/* Ficha de producto. CSS normal (no Tailwind) para no depender de recompilar klzalo.css. */

/* Celular: imagen apaisada y baja, para que "Dónde comprar" aparezca antes. */
.producto-imagen { aspect-ratio: 4 / 3; max-height: 13rem; width: 100%; }

/* Computador: imagen cuadrada y fija al costado mientras se recorre la columna derecha. */
@media (min-width: 1024px) {
  .producto-imagen { aspect-ratio: 1 / 1; max-height: none; position: sticky; top: 5rem; align-self: start; }
}

/* Ofertas agotadas: se ven atenuadas (y van al final de la lista). */
.oferta.agotada > * { opacity: 0.55; }

/* Celular: precio y "Dónde comprar" juntos, y las tallas después. `order` cambia el
   orden visual sin tocar el HTML (en computador se mantiene el orden original). */
@media (max-width: 1023px) {
  .columna-compra { display: flex; flex-direction: column; }
  .columna-compra > #donde-comprar { order: 1; }
  .columna-compra > #cuadro-tallas { order: 2; }
  .columna-compra > #guardar-en-lista { order: 3; }
}

/* Aviso de historial ficticio (manage.py historial_ficticio, solo desarrollo). */
.aviso-ficticio {
  margin-bottom: 0.75rem;
  border-radius: 0.5rem;
  background: var(--aviso-fondo);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--aviso-fuerte);
}

/* «Otros colores y versiones»: fila que se desplaza de lado (con el dedo en celular). */
.carrusel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(10.5rem, 13rem);
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x mandatory;
}
.carrusel-item { position: relative; scroll-snap-align: start; display: flex; }
.carrusel-item > a { flex: 1; }
/* Solo en los de otro género (ej. la versión de niños de un modelo de adulto). */
.carrusel-genero {
  position: absolute;
  z-index: 1;
  top: 0.5rem;
  left: 0.5rem;
  border-radius: 9999px;
  background: #171717;
  padding: 0.125rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #fff;
}

/* ¿El precio tachado es real? (views.evaluar_descuentos) */
.descuento-real, .descuento-inflado { margin-top: 0.125rem; font-size: 0.7rem; font-weight: 600; }
.descuento-real { color: var(--ok); }
.descuento-inflado { color: var(--aviso); cursor: help; }
.como-calculamos summary { cursor: pointer; width: fit-content; }
.como-calculamos summary:hover { color: var(--texto); }
.como-calculamos p { margin-top: 0.375rem; line-height: 1.45; }

/* «Avísame si baja de precio» (listas/alertas.py). */
.caja-alerta { border: 1px solid var(--borde); border-radius: 1rem; background: var(--superficie); padding: 1rem 1.25rem; font-size: 0.875rem; }
.alerta-activa { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem;
  margin-top: 0.5rem; border-radius: 0.5rem; background: var(--ok-fondo); padding: 0.5rem 0.75rem; color: var(--ok-fuerte); }
.enlace-quitar { font-size: 0.75rem; text-decoration: underline; color: var(--ok-fuerte); padding: 0.25rem 0; }

/* Las columnas de la grilla no pueden ser más anchas que la pantalla (sin esto, una fila
   larga ensancha la columna y aparece scroll horizontal en celulares de 320 px). */
.producto-imagen, .columna-compra { min-width: 0; }

/* «Dónde comprar» en pantallas muy angostas (< 360 px): el botón baja a su propia línea. */
.oferta-fila { flex-wrap: wrap; }
@media (max-width: 359px) {
  .oferta-fila .btn { width: 100%; }
}

/* Tablet (una sola columna, pero más ancha): la foto puede crecer un poco. */
@media (min-width: 640px) and (max-width: 1023px) {
  .producto-imagen { max-height: 20rem; }
}

/* Resumen de precios con datos propios (seo.resumen_producto). */
.resumen-producto { margin-top: 1rem; font-size: 0.9rem; line-height: 1.55; color: var(--texto-3); }