/* El panel de preferencias.
 *
 * Hereda la superficie de .side-panel; aquí solo van sus piezas propias. */
.pref-section {
  margin-block-end: var(--block-space);
}

.pref-caption {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0 0 0.5em;
  opacity: 0.55;
  text-transform: uppercase;
}

.pref-grid {
  display: grid;
  gap: var(--inline-space-half);
}

.pref-grid--2 { grid-template-columns: repeat(2, 1fr); }
.pref-grid--3 { grid-template-columns: repeat(3, 1fr); }

.pref-opt {
  background-color: transparent;
  border: 1px solid var(--color-border-dark);
  border-radius: 0.5em;
  color: var(--color-text);
  cursor: pointer;
  font-size: 0.875rem;
  padding-block: 0.6em;
  text-align: center;

  &:hover {
    background-color: var(--color-message-bg);
  }
}

/* La opción activa se marca con el propio acento: así el panel enseña de qué
   color va a quedar todo mientras lo eliges. */
.pref-opt--on {
  background-color: var(--color-selected);
  border-color: var(--color-link);
  font-weight: 600;
}

.pref-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: var(--inline-space-half);
}

.pref-swatch {
  aspect-ratio: 1;
  background-color: var(--swatch);
  border: 2px solid transparent;
  border-radius: 50%;
  cursor: pointer;
  inline-size: 2em;
  padding: 0;

  /* El anillo va por fuera del color, no encima: encima cambiaría el color que
     se está enseñando, que es justo lo que hay que ver. */
  &.pref-opt--on {
    box-shadow: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--swatch);
  }
}

.pref-reset {
  inline-size: 100%;
  margin-block-start: var(--block-space);
}

/* Las muestras con nombre: el color de la barra se elige por su nombre y no
   solo por un circulo, porque seis morados y azules oscuros se parecen. */
.pref-swatch--labeled {
  align-items: center;
  aspect-ratio: auto;
  background-color: transparent;
  border: 1px solid var(--color-border-dark);
  border-radius: 0.5em;
  color: var(--color-text);
  display: inline-flex;
  font-size: 0.875rem;
  gap: 0.5em;
  inline-size: auto;
  padding: 0.35em 0.7em 0.35em 0.45em;

  &:hover {
    background-color: var(--color-message-bg);
  }

  &.pref-opt--on {
    border-color: var(--color-link);
    box-shadow: 0 0 0 1px var(--color-link);
    font-weight: 600;
  }
}

.pref-swatch__chip {
  aspect-ratio: 1;
  background-color: var(--swatch);
  border-radius: 0.35em;
  box-shadow: inset 0 0 0 1px oklch(0% 0 0 / 0.15);
  display: block;
  inline-size: 1.25em;
}