/*
 * Formas de las opciones de un producto, comunes a TODOS los temas (7-oct-2026).
 *
 * Cada tema dibuja .opt a su manera (bordes, colores, la respuesta elegida); acá solo se cambia
 * la DISPOSICIÓN, para que un tema nuevo herede las tres formas sin copiar nada:
 *   .opt-list            una respuesta por renglón (lo de siempre: masa, tamaños con precio)
 *   .opt-list.grid       respuestas de hasta 3 caracteres: una inicial de la A a la Z, tallas
 *   .opt-list.chips      muchas palabras cortas sin recargo: colores de hilo, dijes
 * Lo decide cart.js (formaDe). Se carga con el carrito: un menú de solo lectura no tiene hoja.
 */

.opt-list.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 8px;
}
.opt-list.grid .opt {
  justify-content: center;
  min-height: 46px;
  padding: 8px 0;
  gap: 0;
}
.opt-list.grid .opt-name { font-weight: 600; font-size: 1rem; }

.opt-list.chips { flex-direction: row; flex-wrap: wrap; gap: 8px; }
.opt-list.chips .opt {
  width: auto;
  min-height: 42px;
  padding: 8px 14px;
  gap: 8px;
  border-radius: 999px;
}

/* En las dos formas compactas la elección se ve en el borde y el fondo: el círculo sobra. */
.opt-list.grid .radio,
.opt-list.chips .radio { display: none; }

/* La respuesta que se pone y se quita (varias a la vez, o un agregado suelto) va en un cuadro con
   palomita. El color del borde lo pone cada tema al marcarla; la palomita lo hereda. */
.opt .radio.check { border-radius: 5px; }
.opt[aria-pressed="true"] .radio.check::after {
  inset: auto;
  left: 50%;
  top: 45%;
  width: 4px;
  height: 9px;
  border-radius: 0;
  background: none;
  border: solid;
  border-color: inherit;
  border-width: 0 2px 2px 0;
  transform: translate(-50%, -50%) rotate(45deg);
}

/* Muestra del color. El borde interior hace visible el blanco y el crema sobre fondo claro. */
.swatch {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.opt[aria-pressed="true"] .swatch { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18), 0 0 0 2px currentColor; }

/* La foto de las respuestas (V231): la paleta de colores, los dijes. Entera, sin recortar: una
   paleta cortada esconde justo los colores de la orilla. */
.opt-foto {
  display: block;
  width: 100%;
  max-height: 240px;
  margin-top: 11px;
  object-fit: contain;
  border-radius: 12px;
  background: rgba(127, 127, 127, .08);
}

/* Lo que falta elegir, cuando el cliente toca el botón antes de tiempo; y el tope, cuando toca una
   respuesta más de las que caben («Hasta 4»). */
.opt-group.falta .opt-label,
.opt-group.tope .opt-label { color: var(--warn); }
.opt-group.falta .opt-list,
.opt-group.tope .opt-list { animation: falta-elegir .42s ease 1; }
@keyframes falta-elegir {
  0%, 100% { transform: none; }
  25%      { transform: translateX(-5px); }
  75%      { transform: translateX(5px); }
}

/* El botón que dice qué falta: tocable, pero sin la fuerza del «Agregar». */
.add[aria-disabled="true"] { opacity: .78; }

@media (prefers-reduced-motion: reduce) {
  .opt-group.falta .opt-list,
  .opt-group.tope .opt-list { animation: none; }
}

/* Para qué se pide el correo (V232), debajo del campo. Común a los temas: cada uno trae --ink-3. */
.note-hint {
  display: block;
  margin-top: 7px;
  font-size: .82rem;
  line-height: 1.35;
  color: var(--ink-3);
}