/* ===========================================================================
   LA BODEGA DEL PERFUME — PANTALLAS  ·  Fase 3 de «MOUILLETTE»

   Se carga la última. Todo sale de tokens: ni un hex ni un px de color.
   Aquí solo lo que es de una pantalla concreta y no de un componente.
   =========================================================================== */

/* ===========================================================================
   1 · LA FICHA DE PRODUCTO
   ---------------------------------------------------------------------------
   Es donde se decide la compra y era la pantalla peor tratada: 63 estilos en
   línea, quince tamaños de letra —nueve de ellos entre 11 y 16 px— y la
   familia olfativa reducida a una línea gris sin nombre.
   =========================================================================== */

/* La familia, con etiqueta y con su color. */
.ficha-familia {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--ritmo);
  margin: 0 0 calc(var(--ritmo) * 1.5);
  padding-left: calc(var(--ritmo) * 1.5);
  border-left: 3px solid var(--fam, var(--laton-hondo));
}

.ficha-familia__etiqueta {
  font-family: var(--tipo-texto);
  font-size: var(--paso-micro);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--versalita-espacio);
  text-transform: uppercase;
  color: var(--grafito-3);
}

.ficha-familia__valor {
  font-family: var(--tipo-display);
  font-size: var(--paso-medio);
  font-weight: var(--peso-medio);
  color: var(--fam, var(--laton-hondo));
}

/* La tira, también en la galería: mismo sitio, mismo color que en la
   cuadrícula. Es lo que hace que el ojo lo reconozca de una pantalla a otra. */
#imagen-principal-container .mouillette {
  height: 100%;
}

/* ===========================================================================
   2 · ESTADO DE CARGA EN CARRITO Y CHECKOUT
   ---------------------------------------------------------------------------
   El hueco que quedaba. Entre pulsar «Confirmar pedido» y la respuesta del
   servidor no había nada: el botón cambiaba a «Procesando…» y ya. En un
   checkout sin pasarela, donde el servidor además crea el pedido y redirige,
   ese silencio son varios segundos en los que el cliente vuelve a pulsar.

   `aria-busy` en el formulario apaga los controles y pinta la barra. Lo pone
   el JS que ya existía; aquí solo se le da forma.
   =========================================================================== */

[aria-busy="true"] {
  position: relative;
  cursor: progress;
}

/* Los controles dejan de aceptar el dedo mientras el servidor responde: es lo
   que evita el pedido duplicado, y se ve que están apagados. */
[aria-busy="true"] :is(input, select, textarea, button, a) {
  pointer-events: none;
  opacity: 0.55;
  transition: opacity var(--tiempo-2) var(--curva-suave);
}

/* Una barra de latón que recorre la parte de arriba. Solo `transform`. */
[aria-busy="true"]::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 2px;
  background: var(--laton-hondo);
  transform-origin: left center;
  animation: barra-carga 1.1s var(--curva-suave) infinite;
  z-index: 10;
}

@keyframes barra-carga {
  0%   { transform: scaleX(0);   opacity: 1; }
  60%  { transform: scaleX(1);   opacity: 1; }
  100% { transform: scaleX(1);   opacity: 0; }
}

/* El botón que se pulsó dice qué está pasando, no solo que está ocupado. */
button[data-cargando]::after {
  content: attr(data-cargando);
}

/* ===========================================================================
   3 · REMATE DE LA ESCALA
   ---------------------------------------------------------------------------
   Los 122 `font-size` sueltos del markup ya apuntan a los ocho pasos. Lo que
   queda son reglas de `style.css` heredadas de la plantilla de DW Jeans, que
   siguen pintando tamaños intermedios. Se reconducen las que de verdad se ven.
   =========================================================================== */

.breadcrumb,
.breadcrumb a,
.breadcrumb__current { font-size: var(--paso-menor); }

.badge { font-size: var(--paso-micro); letter-spacing: var(--versalita-espacio); }

.tienda-toolbar__results,
.sidebar__chip,
.paginacion a,
.paginacion span { font-size: var(--paso-menor); }

.product-card__summary { font-size: var(--paso-menor); }

.dw-marquee,
.dw-marquee span { font-size: var(--paso-micro); letter-spacing: var(--versalita-espacio); }

.dw-hero__eyebrow { font-size: var(--paso-micro); letter-spacing: var(--versalita-espacio); }
.dw-hero__sub     { font-size: var(--paso-medio); }
.dw-hero__title   { font-size: var(--paso-display); }

.section__title    { font-size: var(--paso-titulo); }
.section__subtitle { font-size: var(--paso-base); }

.dw-footer,
.dw-footer a,
.dw-footer p { font-size: var(--paso-menor); }

.dw-footer__bar,
.dw-footer__bar span { font-size: var(--paso-micro); }

/* Los ocho que quedaban fuera de la escala en la ficha, identificados uno a
   uno midiendo el DOM en producción. Ninguno venía de un estilo en línea: los
   ocho salían de reglas heredadas de la plantilla de DW Jeans.
       11.52 · 12.16 · 12.8 · 13.44 · 13.76 · 14.4 · 15.2 · 16              */
.dw-footer h4              { font-size: var(--paso-micro); }   /* 11.52 */
.cookie-consent .btn       { font-size: var(--paso-micro); }   /* 12.16 */
.header__nav a             { font-size: var(--paso-menor); }   /* 12.80 */
.cookie-consent p          { font-size: var(--paso-menor); }   /* 13.44 */
.dw-float__label,
.dw-float span             { font-size: var(--paso-menor); }   /* 13.76 */
.carrito-qty__btn          { font-size: var(--paso-medio); }   /* 14.40 */
.dw-lightbox__counter      { font-size: var(--paso-menor); }   /* 15.20 */
.product-description,
.producto-detail-grid p    { font-size: var(--paso-base); }    /* 16.00 */

/* Y los doce de la portada, localizados igual: midiendo el DOM, no leyendo.
       9.92 · 10.56 · 11.52 · 12.16 · 12.8 · 13.76
      14.72 · 16 · 16.8 · 17.92 · 18.4 · 18.88                              */
.dw-card__flag             { font-size: var(--paso-micro); }   /*  9.92 */
.dw-card__cat              { font-size: var(--paso-micro); }   /* 10.56 */
.dw-eyebrow,
.product-card__quick span  { font-size: var(--paso-micro); }   /* 11.52 */
.btn                       { font-size: var(--paso-menor); }   /* 12.16 */
.header nav a,
.header__topbar a          { font-size: var(--paso-menor); }   /* 12.80 */
.dw-value p,
.dw-promesa p              { font-size: var(--paso-base); }    /* 14.72 */
.dw-card__price            { font-size: var(--paso-medio); }   /* 16.00 */
.section__lead,
.dw-seccion__sub           { font-size: var(--paso-medio); }   /* 16.80 */
.dw-card__name,
.dw-card__name a           { font-size: var(--paso-medio); }   /* 17.92 */
.dw-carrusel__nombre       { font-size: var(--paso-medio); }   /* 18.40 */
.dw-value h3,
.dw-promesa h3             { font-size: var(--paso-mayor); }   /* 18.88 */

/* Tercera pasada. Las anteriores fallaron porque escribí los selectores «a
   ojo» a partir del texto, y varios no existían: `.dw-card__name` en vez de
   `.dw-card__quick span`, `.dw-float span` en vez de `.asesor-float span`.
   Estos salen del camino de clases COMPLETO leído del DOM, que es la única
   forma de acertar sin ver la página. */
.dw-card__quick,
.dw-card__quick span       { font-size: var(--paso-micro); }   /* 11.52 */
.btn--sm,
.cookie-consent__actions .btn,
.dw-editorial .btn         { font-size: var(--paso-menor); }   /* 12.16 */
.btn--lg                   { font-size: var(--paso-base) !important; }  /* 12.80 — premium.css lo fija con !important */
.asesor-float span        { font-size: var(--paso-menor); }   /* 13.76 */
.dw-editorial__text p,
.cookie-consent strong     { font-size: var(--paso-base); }    /* 16.00 */
.dw-cta p                  { font-size: var(--paso-medio); }   /* 16.80 */

/* ===========================================================================
   4 · EL ESTADO VACÍO
   ---------------------------------------------------------------------------
   Ya estaba bien resuelto —icono, explicación y salida—. Solo se le pone la
   tipografía de la casa y se le quita el gris de plantilla.
   =========================================================================== */

.store-empty h3 {
  font-family: var(--tipo-display);
  font-size: var(--paso-mayor);
  color: var(--grafito);
}

.store-empty p {
  font-size: var(--paso-base);
  color: var(--grafito-2);
}

.store-empty i { color: var(--laton-hondo); }

/* ===========================================================================
   5 · LOS ESQUELETOS, CON EL COLOR DE LA CASA
   =========================================================================== */

.esqueleto__foto,
.esqueleto__linea { background: var(--papel-bajo); }

/* ASTRA · 6-sep-2026. Los hijos del grid deben poder encogerse: su mínimo
   intrínseco expandía la colección a 587px en una pantalla de 390px. */
.tienda-layout > *,
.tienda-sidebar > *,
.producto-detail-grid > * { min-width: 0; }

.producto-detail-grid .btn { white-space: normal; text-align: center; }
.producto-detail-grid h1 { overflow-wrap: anywhere; }
#tabs-header { flex-wrap: wrap; }
#tabs-header button { flex: 1 1 150px; white-space: normal; }
.legal-content h3,
.legal-content a { color: var(--laton-hondo) !important; }
.legal-content div > span { color: var(--grafito-2) !important; }

@media (max-width: 768px) {
  .tienda-layout,
  .tienda-sidebar { grid-template-columns: minmax(0, 1fr); }
  .tienda-toolbar select { min-width: 0; max-width: 100%; }
  .productos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #paginacion-contenedor ul { flex-wrap: wrap; }
  .producto-detail-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .producto-detail-grid > div > div:first-child { flex-wrap: wrap; }
  .header__btn-store,
  .header__search-toggle,
  .header__hamburger { min-width: 44px; min-height: 44px; }
  .header__logo { min-width: 0; }
  .header__logo-img { max-width: 100%; }

  /* Las bandas quietas conservan sus cuatro mensajes completos en móvil, en UNA línea
     deslizable. Auditoría 4-oct-2026: en 2×2 la banda medía ~185 px y en 375×812 ningún
     perfume entraba en la primera pantalla de la portada. */
  .dw-marquee__track { width: 100%; }
  .dw-marquee__group:first-child {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
    gap: 22px;
    padding: 10px 18px;
    white-space: nowrap;
  }
  .dw-marquee__group:first-child::-webkit-scrollbar { display: none; }
  .dw-marquee__group:first-child > span:not(.dw-marquee__dot) {
    display: flex;
    flex: none;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    line-height: 1.5;
    letter-spacing: .06em;
  }
  .dw-marquee__group > .dw-marquee__dot { display: none; }

  /* El asesor sigue disponible, por encima de la barra de compra. */
  body:has(.cart-mobile-bottom, .checkout-mobile-bar) #aia-burbuja {
    bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* Portada en celular: el texto del hero con menos aire para que la fragancia destacada
   asome en la primera pantalla (auditoría 4-oct-2026). */
@media (max-width: 520px) {
  .dw-hero__text { padding: 28px 22px 30px; }
  .dw-hero__eyebrow { margin-bottom: 10px; }
  .dw-hero__divider { margin: 14px 0; }
  .dw-hero__sub { margin-bottom: 18px; }
}

@media (max-width: 359px) {
  .productos-grid { grid-template-columns: minmax(0, 1fr); }
  .header__container { gap: 6px; padding-inline: 10px; }
  .dw-hero__ctas .btn { white-space: normal; text-align: center; }
}

/* ===========================================================================
   SEGUIMIENTO DEL PEDIDO  (/pedido/{id}/{token} · 5-oct-2026)
   El cliente ve su pedido y sube el comprobante de la transferencia.
   =========================================================================== */
.seguimiento { text-align: left; gap: 14px; }
.seguimiento .gracias-card__title, .seguimiento .gracias-card__text { text-align: left; }
.seguimiento__eyebrow { font-size: var(--paso-menor); letter-spacing: .12em; text-transform: uppercase; color: var(--dw-gold); margin: 0; }
.seguimiento__aviso { width: 100%; border-radius: var(--radius-md); padding: 12px 16px; font-size: var(--paso-base); }
.seguimiento__aviso--ok { border: 1px solid var(--success); color: var(--success); }
.seguimiento__aviso--error { border: 1px solid var(--danger); color: var(--danger); }
.seguimiento__items { list-style: none; margin: 0; padding: 16px 20px; width: 100%; background: var(--surface-high); border-radius: var(--radius-md); }
.seguimiento__items li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--on-surface); }
.seguimiento__items li span { color: var(--on-surface-dim); }
.seguimiento__total { border-top: 1px solid var(--dw-cyan-border); margin-top: 6px; padding-top: 10px !important; }
.seguimiento__total strong { color: var(--dw-gold); font-size: 1.15em; }
.seguimiento__banco, .seguimiento__evidencias { width: 100%; border: 1px solid var(--dw-cyan-border); border-radius: var(--radius-md); padding: 14px 18px; }
.seguimiento__banco pre { white-space: pre-wrap; font-family: inherit; margin: 6px 0; color: var(--on-surface); }
.seguimiento__label { display: block; font-size: var(--paso-menor); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--on-surface-dim); margin: 0 0 8px; }
.seguimiento__nota { font-size: var(--paso-menor); color: var(--on-surface-dim); margin: 6px 0 0; }
.seguimiento__evidencias p { display: flex; justify-content: space-between; gap: 10px; margin: 6px 0; font-size: var(--paso-menor); }
.seguimiento__estado--aprobada { color: var(--success); }
.seguimiento__estado--rechazada { color: var(--danger); }
.seguimiento__estado--pendiente { color: var(--warning); }
.seguimiento__form { width: 100%; display: grid; gap: 12px; }
.seguimiento__subir { display: grid; gap: 6px; padding: 16px; border: 1px dashed var(--dw-gold); border-radius: var(--radius-md); cursor: pointer; }
.seguimiento__subir input { font: inherit; color: var(--on-surface); max-width: 100%; }
.seguimiento__subir small { color: var(--on-surface-dim); }