/* ==========================================================================
   Selector de variación de la ficha.

   Dos controles y cinco estados. Nada de valores literales de color, tamaño ni
   espaciado: todo sale de tokens.css.

   TOKEN QUE FALTA: --sf-muestra-foto (56px). La miniatura de foto no es el
   swatch de 44px del sistema de diseño v2: lleva al lado un rótulo de hasta 34
   caracteres. Mientras no esté en tokens.css se usa --sf-muestra-color como
   respaldo, así que al agregar el token la miniatura crece sola y este archivo
   no se toca.
   ========================================================================== */

.sf-variaciones { margin-bottom: var(--sf-esp-6); }

/* ficha.css ya estila `form.cart` con un selector de dos clases: hay que
   igualarlo para mandar sobre la separación entre ejes. */
.sf-ficha__resumen form.cart.sf-variaciones__form,
.sf-variaciones__form {
  display: flex;
  flex-direction: column;
  gap: var(--sf-esp-6);
}

/* Aviso de producto entero agotado (40 productos, 16% del catálogo) y respaldo
   sin JavaScript. Va arriba del selector, no lo reemplaza: el comprador tiene
   que poder ver qué colores maneja Cacofish. */
.sf-variaciones__aviso {
  margin: 0 0 var(--sf-esp-4);
  padding: var(--sf-esp-3) var(--sf-esp-4);
  border-radius: var(--sf-radio);
  background: var(--sf-aviso-fondo);
  color: var(--sf-aviso);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
}

/* --- Eje ------------------------------------------------------------------ */

.sf-variaciones__eje {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* El rótulo lleva siempre el valor elegido al lado: «Color: ADA4068 Yamame Red
   Belly». Los códigos se parecen entre sí y devolverlos escritos evita el error
   más caro del catálogo. */
.sf-variaciones__rotulo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sf-esp-2);
  margin-bottom: var(--sf-esp-3);
  padding: 0;
  width: 100%;
}

.sf-variaciones__nombre {
  font-size: var(--sf-etiqueta-tam);
  line-height: var(--sf-etiqueta-alto);
  letter-spacing: var(--sf-etiqueta-tracking);
  font-weight: 600;
  text-transform: uppercase;
  color: var(--sf-texto-secundario);
}

.sf-variaciones__elegido {
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-texto-secundario);
}

.sf-variaciones__elegido--puesto {
  color: var(--sf-texto-principal);
  font-weight: 600;
}

/* --- Opciones: caja común ------------------------------------------------- */

.sf-variaciones__opciones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-esp-2);
}

.sf-opcion {
  position: relative;
  display: block;
  min-width: 0;
  cursor: pointer;
}

/* El radio es real (las flechas y el tabulador funcionan solos), pero no se
   dibuja: el control es la tarjeta entera. */
.sf-opcion__control {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.sf-opcion__cuerpo {
  display: flex;
  align-items: center;
  gap: var(--sf-esp-2);
  min-height: var(--sf-alto-tactil);
  border: 2px solid var(--sf-borde-sutil);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
  color: var(--sf-texto-principal);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.sf-opcion__texto { min-width: 0; }

/* Estado 2, sobre. */
.sf-opcion:hover .sf-opcion__cuerpo {
  border-color: var(--sf-borde-campo);
  box-shadow: var(--sf-sombra-2);
  transform: translateY(-2px);
}

/* Estado 3, elegida: anillo separado del borde para que no compita con la
   foto. */
.sf-opcion__control:checked + .sf-opcion__cuerpo {
  border-color: var(--sf-accion-primaria);
  box-shadow: 0 0 0 1px var(--sf-superficie-base), 0 0 0 3px var(--sf-accion-primaria);
}

/* Foco visible, no negociable. */
.sf-opcion__control:focus-visible + .sf-opcion__cuerpo {
  outline: 2px solid var(--sf-foco);
  outline-offset: 2px;
}

/* --- Control A: grilla de foto con rótulo --------------------------------- */

.sf-variaciones__opciones--foto {
  display: grid;
  grid-template-columns: 1fr;
}

/* Una sola columna en móvil: un código de 34 caracteres en media pantalla se
   corta y deja de identificar la variación, que es lo único que hace. */
@media (min-width: 600px) {
  .sf-variaciones__opciones--foto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.sf-variaciones__opciones--foto .sf-opcion__cuerpo {
  padding: var(--sf-esp-2);
  height: 100%;
}

.sf-opcion__foto {
  flex: none;
  width: var(--sf-muestra-foto, var(--sf-muestra-color));
  height: var(--sf-muestra-foto, var(--sf-muestra-color));
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-hundida);
  object-fit: cover;
  transition: opacity .15s ease;
}

.sf-variaciones__opciones--foto .sf-opcion__texto {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}

/* --- Control B: píldoras compactas ---------------------------------------- */

.sf-variaciones__opciones--pildoras .sf-opcion__cuerpo {
  justify-content: center;
  padding-inline: var(--sf-esp-4);
  white-space: nowrap;
}

/* --- Estado 4: agotada ---------------------------------------------------- */

/* Sigue siendo elegible. Con 36,3% de variaciones agotadas, un control muerto
   deja al comprador sin entender por qué el botón no responde. */
.sf-opcion--agotada .sf-opcion__texto { text-decoration: line-through; }
.sf-opcion--agotada .sf-opcion__cuerpo { color: var(--sf-stock-agotado); }
.sf-opcion--agotada .sf-opcion__foto { opacity: .45; }

/* --- Estado 5: inexistente ------------------------------------------------ */

/* La combinación no fue creada. No se esconde: si desapareciera, la grilla
   cambiaría de tamaño a cada clic y el comprador perdería el mapa. */
.sf-opcion--inexistente { cursor: not-allowed; }

.sf-opcion--inexistente .sf-opcion__cuerpo {
  border-color: var(--sf-accion-desactivada);
  background: var(--sf-accion-desactivada);
  color: var(--sf-accion-desactivada-txt);
  text-decoration: none;
}

.sf-opcion--inexistente .sf-opcion__texto { text-decoration: none; }
.sf-opcion--inexistente .sf-opcion__foto { opacity: .25; }

.sf-opcion--inexistente:hover .sf-opcion__cuerpo {
  border-color: var(--sf-accion-desactivada);
  box-shadow: none;
  transform: none;
}

/* --- Desborde: los 15 controles con más de 10 opciones -------------------- */

/* Se muestran las primeras 8 y el resto queda tras un enlace. El 9 de este
   selector va a la par de SF_VARIACIONES_TOPE_VISIBLE en inc/variaciones.php y
   de TOPE_VISIBLE en variaciones.js: si cambia uno, cambian los tres. */
.sf-variaciones__opciones--plegado > .sf-opcion:nth-child(n + 9) { display: none; }

.sf-variaciones__mas {
  display: inline-block;
  margin-top: var(--sf-esp-3);
  padding: 0;
  border: 0;
  background: none;
  color: var(--sf-accion-secundaria);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-s-tam);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.sf-variaciones__mas:hover { color: var(--sf-accion-secundaria-hover); }

.sf-variaciones__ayuda {
  margin: var(--sf-esp-2) 0 0;
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  color: var(--sf-texto-secundario);
}

/* --- Resumen y stock ------------------------------------------------------ */

/* El mismo formato exacto que va a aparecer en el carro y en el correo. */
.sf-variaciones__resumen {
  margin: 0;
  padding: var(--sf-esp-3) var(--sf-esp-4);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-bloque);
  color: var(--sf-texto-principal);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  font-weight: 600;
}

.sf-variaciones__stock {
  margin: 0;
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  font-weight: 600;
  color: var(--sf-stock-disponible);
}

.sf-variaciones__stock--agotado { color: var(--sf-stock-agotado); }

.sf-variaciones__stock--aviso {
  padding: var(--sf-esp-2) var(--sf-esp-3);
  border-radius: var(--sf-radio);
  background: var(--sf-aviso-fondo);
  color: var(--sf-aviso);
}

/* --- Cantidad y botón ----------------------------------------------------- */

.sf-variaciones__compra {
  display: flex;
  align-items: stretch;
  gap: var(--sf-esp-3);
}

/* ficha.css esconde `.quantity` porque en el tema base nadie compra dos marcos
   iguales. Acá sí: un pescador lleva tres señuelos del mismo color. */
.sf-cantidad {
  display: flex;
  align-items: center;
  flex: none;
  border: 1px solid var(--sf-borde-campo);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-base);
  overflow: hidden;
}

.sf-cantidad__boton {
  width: var(--sf-alto-tactil);
  height: var(--sf-boton-l);
  border: 0;
  background: none;
  color: var(--sf-texto-marca);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-l-tam);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.sf-cantidad__boton:hover { background: var(--sf-superficie-calida); }
.sf-cantidad__boton:disabled { color: var(--sf-accion-desactivada-txt); cursor: not-allowed; }

.sf-cantidad__campo {
  width: var(--sf-alto-tactil);
  height: var(--sf-boton-l);
  padding: 0;
  border: 0;
  background: none;
  color: var(--sf-texto-principal);
  font-family: var(--sf-fuente-ui);
  font-size: var(--sf-cuerpo-m-tam);
  font-weight: 600;
  text-align: center;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}

.sf-cantidad__campo::-webkit-outer-spin-button,
.sf-cantidad__campo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sf-cantidad__campo:focus-visible { outline: 2px solid var(--sf-foco); outline-offset: -2px; }

/* El producto de un solo ítem por pedido no muestra el control. */
.sf-cantidad[hidden] { display: none; }

.sf-variaciones .sf-boton.sf-variaciones__comprar {
  flex: 1;
  min-height: var(--sf-boton-l);
  min-width: 0;
}

/* Sin variación elegida el botón dice qué falta elegir, no «Añadir al carro». */
.sf-variaciones .sf-boton.sf-variaciones__comprar:disabled,
.sf-variaciones .sf-boton.sf-variaciones__comprar:disabled:hover {
  background: var(--sf-accion-desactivada);
  color: var(--sf-accion-desactivada-txt);
  cursor: not-allowed;
}

/* --- Salida por WhatsApp -------------------------------------------------- */

.sf-variaciones__whatsapp {
  display: flex;
  align-items: center;
  gap: var(--sf-esp-3);
  padding: var(--sf-esp-3) var(--sf-esp-4);
  border: 1px solid var(--sf-borde-sutil);
  border-radius: var(--sf-radio);
  background: var(--sf-superficie-bloque);
  color: var(--sf-texto-secundario);
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  text-decoration: none;
}

/* Un `display` de clase le gana al atributo `hidden`, así que hay que decirlo:
   el enlace solo aparece cuando la combinación elegida está agotada. */
.sf-variaciones__whatsapp[hidden] { display: none; }

.sf-variaciones__whatsapp:hover { border-color: var(--sf-accion-primaria); color: var(--sf-texto-secundario); }
.sf-variaciones__whatsapp .sf-icono { flex: none; color: var(--sf-acento-texto); }
.sf-variaciones__whatsapp strong { display: block; color: var(--sf-texto-principal); }

/* --- Foto grande de la galería -------------------------------------------- */

/* Fundido corto al cambiar de variación. El espacio ya está reservado, así que
   no hay esqueleto ni salto de layout. */
.sf-ficha__galeria img.sf-variaciones-cambiando { opacity: .35; }
.sf-ficha__galeria .woocommerce-product-gallery__image img { transition: opacity .18s ease; }

/* --- Llamada de atención -------------------------------------------------- */

/* En móvil, el botón de la barra fija dice «Elegir opción» y trae acá. Al
   llegar, el bloque parpadea una vez: mostrar el selector de verdad es mejor
   que duplicarlo en una hoja aparte. */
.sf-variaciones--llamada .sf-variaciones__eje {
  animation: sf-variaciones-llamada 1s ease;
}

@keyframes sf-variaciones-llamada {
  0%, 100% { box-shadow: none; }
  30%, 70% { box-shadow: 0 0 0 2px var(--sf-error); }
}

/* --- Barra fija de móvil -------------------------------------------------- */

/* La barra la pinta content-single-product.php; acá solo se estila la segunda
   línea que el JS le agrega con la variación elegida. */
.sf-barra-compra__precio { min-width: 0; }

.sf-barra-compra__variacion {
  display: block;
  font-size: var(--sf-cuerpo-s-tam);
  line-height: var(--sf-cuerpo-s-alto);
  font-weight: 400;
  color: var(--sf-texto-secundario);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* El botón de la barra no compra cuando la combinación elegida está agotada:
   se ve apagado y lo dice, pero sigue llevando al selector. */
.sf-barra-compra .sf-boton.sf-boton--inerte,
.sf-barra-compra .sf-boton.sf-boton--inerte:hover {
  background: var(--sf-accion-desactivada);
  color: var(--sf-accion-desactivada-txt);
}

/* --- Móvil ---------------------------------------------------------------- */

@media (max-width: 599px) {
  /* El selector es lo que decide el diseño móvil de la ficha: nunca detrás de
     un acordeón y a un scroll corto del precio. */
  .sf-variaciones__form { gap: var(--sf-esp-4); }

  .sf-variaciones__compra { flex-wrap: wrap; }
  .sf-variaciones .sf-boton.sf-variaciones__comprar { flex: 1 0 100%; }
}

/* --- Confirmación de agregado ---------------------------------------------
   Se confirma sobre el propio botón: el usuario está mirando lo que acaba de
   tocar, no otra zona de la página. Dura MS_CONFIRMACION en variaciones.js. */
.sf-variaciones__comprar--listo,
[data-sf-comprar].sf-variaciones__comprar--listo {
  background: var(--sf-exito);
  border-color: var(--sf-exito);
  color: var(--sf-accion-inversa);
}