/* ============================================================================
   SneakersLeon7 · Catálogo — sistema Nocturne (oscuro, denso, móvil primero)
   Los colores viven SOLO aquí como variables. Ningún archivo escribe un hex
   suelto, con una excepción declarada: el verde de WhatsApp.
   ========================================================================= */

:root {
  --color-bg: #161826;
  --color-surface: #232532;
  --color-text: #e9e9ed;
  --color-accent: #b88e53;
  --color-divider: rgba(233, 233, 237, .16);

  /* Rampa del acento: 100 es la más clara, 900 la más oscura. En fondo oscuro
     los rellenos tintados salen de 900/800/700 y el texto que va encima, de
     400/300/200 — nunca al revés, o el contraste se cae.
     El tono no se eligió a ojo: se midieron los píxeles del logo del león y su
     matiz dominante es 30° (ámbar cálido, rango 24-40°, saturación media 0.38).
     Toda la rampa se construyó sobre ese matiz para que el acento y la marca
     sean el mismo color, no dos dorados parecidos peleándose. */
  --color-accent-100: #f7edd7;
  --color-accent-200: #eddbb9;
  --color-accent-300: #dbc091;
  --color-accent-400: #cca770;
  --color-accent-500: #b88e53;
  --color-accent-600: #99703d;
  --color-accent-700: #946838;
  --color-accent-800: #4c351f;
  --color-accent-900: #36271a;

  --color-neutral-400: #9a9aa6;
  --color-neutral-500: #7d7d89;
  --color-neutral-600: #62626d;
  --color-neutral-700: #4a4a53;
  --color-neutral-800: #34343d;
  --color-neutral-900: #24242c;

  /* Ficha de producto sobre blanco: es una decisión tomada con los datos reales
     del inventario, no un capricho. De 129 fotos medidas, 68 vienen con fondo
     blanco y 8 con transparencia — sobre el gradiente oscuro que pedía el spec
     original, esas 76 se verían como un rectángulo blanco flotando. Sobre blanco
     se funden con la tarjeta, que es como muestran producto Nike, StockX o GOAT:
     cromo oscuro, ficha clara. */
  --color-foto-bg: #ffffff;

  /* Verde WhatsApp: excepción de marca, el único hex literal permitido.
     Siempre borde + tinte, nunca relleno sólido. */
  --wa: #25d366;
  --wa-tint: rgba(37, 211, 102, .12);
  --wa-tint-fuerte: rgba(37, 211, 102, .2);

  --space-1: 2.8px;  --space-2: 5.6px;  --space-3: 8.4px;  --space-4: 11.2px;
  --space-5: 14px;   --space-6: 16.8px; --space-7: 19.6px; --space-8: 22.4px;

  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px;

  --shadow-md: 0 6px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, .6);

  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pad: 14px;              /* padding horizontal de pantalla */
  --ancho: 402px;           /* el diseño asume una mano y 402 px */
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { background: var(--color-bg); }
/* Con la hoja del carrito encima, el catálogo de atrás se queda quieto. */
html.bloqueado { overflow: hidden; }

body {
  font-family: var(--font);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  /* En una pantalla grande el catálogo no se estira: se queda en su ancho de
     teléfono y se centra. Es un producto de celular, no una web de escritorio. */
  max-width: var(--ancho);
  margin-inline: auto;
  min-height: 100dvh;
  overflow-x: hidden;
}

button, input { font-family: inherit; color: inherit; }
button { background: none; border: none; cursor: pointer; }

/* Nunca el anillo azul del navegador. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}
:focus:not(:focus-visible) { outline: none; }

[disabled], .desactivado { opacity: .45; cursor: not-allowed; }

/* Sin esto, el atributo hidden no oculta nada en ESTE archivo: cualquier
   elemento con su propia regla de display (.btn-icono, .buscador-limpiar)
   le gana a la regla del navegador para [hidden] — misma especificidad,
   pero una regla de autor siempre le gana a la del user-agent. Se descubrió
   con el botón de limpiar búsqueda, que llevaba así desde siempre sin que se
   notara (gris chico sobre fondo oscuro). */
[hidden] { display: none !important; }

/* Barras de scroll ocultas en carruseles y listas internas. */
.sin-barra { scrollbar-width: none; -ms-overflow-style: none; }
.sin-barra::-webkit-scrollbar { display: none; }

/* ─────────────────────────── Header fijo ─────────────────────────── */

.header {
  position: sticky; top: 0; z-index: 20;
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-5)) var(--pad) var(--space-3);
  background: linear-gradient(180deg, var(--color-accent-900), var(--color-bg) 88%);
}

/* Regla inferior que se desvanece 40 px en cada extremo, en vez de un borde
   que choca contra los bordes de la pantalla. */
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-divider) 40px,
              var(--color-divider) calc(100% - 40px), transparent);
}

.marca { display: flex; align-items: center; gap: var(--space-3); }

/* Retrato del león recortado en círculo, con un aro delgado que lo amarra al
   resto del sistema. El aro va en accent-700 y no en el acento puro: el logo es
   cálido (crema y oro) y un morado saturado a su lado se pelea con él. */
.marca-cuadro {
  width: 30px; height: 30px; flex: none;
  border: 1px solid var(--color-accent-700); border-radius: 50%;
  overflow: hidden;
}
.marca-cuadro img { width: 100%; height: 100%; display: block; object-fit: cover; }

.marca-textos { flex: 1; min-width: 0; }
.marca-nombre {
  font-size: 15px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .13em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.marca-tagline { font-size: 10px; font-weight: 400; color: var(--color-neutral-500); }

.btn-icono {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  color: var(--color-neutral-400);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.btn-icono:hover { background: var(--color-neutral-800); border-color: var(--color-neutral-700); }
.btn-icono.activo {
  border-color: var(--color-accent-700);
  background: var(--color-accent-900);
  color: var(--color-accent-300);
}
.btn-icono.activo svg { fill: currentColor; }
.btn-icono svg { width: 16px; height: 16px; }

/* Buscador */
.buscador { position: relative; margin-top: var(--space-4); }
.buscador > svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 14px; height: 14px; color: var(--color-neutral-500); pointer-events: none;
}
.buscador input {
  width: 100%; height: 36px;
  padding: 0 32px 0 30px;
  font-size: 12.5px;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  transition: border-color 150ms ease;
}
.buscador input::placeholder { color: var(--color-neutral-600); }
.buscador input:focus { border-color: var(--color-accent-700); }
.buscador-limpiar {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; display: grid; place-items: center;
  color: var(--color-neutral-500); border-radius: var(--radius-sm);
}
.buscador-limpiar:hover { color: var(--color-text); }
.buscador-limpiar svg { width: 12px; height: 12px; }

/* Chips de categoría */
.chips {
  display: flex; gap: var(--space-2);
  margin: var(--space-3) calc(var(--pad) * -1) 0;
  padding: 0 var(--pad);
  overflow-x: auto;
}
.chip {
  flex: none; height: 29px; padding: 0 12px;
  display: inline-flex; align-items: center;
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
  color: var(--color-neutral-400);
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.chip:hover { background: var(--color-neutral-800); }
.chip.activo {
  border-color: var(--color-accent);
  background: var(--color-accent-900);
  color: var(--color-accent-200);
}

/* ─────────────────────────── Cuadrícula ─────────────────────────── */

.contenido { padding: var(--space-4) var(--pad) 40px; }

.resumen {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3);
  font-size: 10.5px; margin-bottom: var(--space-4);
}
.resumen-conteo { color: var(--color-neutral-500); }
.resumen-envio { color: var(--color-accent-300); text-align: right; }

.rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }

/* ─────────────────────────── Tarjeta ─────────────────────────── */

.tarjeta {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.foto {
  position: relative;
  aspect-ratio: 1 / 1;
  background: var(--color-foto-bg);
}
/* contain, no cover: 4 de cada 10 fotos del inventario son más anchas que altas
   (una mide 2.23 de proporción) y recortarlas a cuadro les cortaría el tenis. */
.foto img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  position: relative; z-index: 1;   /* por encima del marcador de "sin foto" de abajo */
  cursor: pointer;
  transition: transform 120ms ease;
}
/* Retroalimentación táctil de que la foto sí responde al toque — sin esto,
   nada avisa que se puede ampliar hasta que alguien la toca por accidente. */
.foto img:active { transform: scale(.97); }

/* Si la foto externa se cae (varias apuntan a nike.com o puma.com), queda este
   marcador en su lugar en vez de un hueco roto. */
/* El marcador vive sobre el blanco de la ficha, así que va en gris claro. */
.foto-vacia {
  position: absolute; inset: 0; z-index: 0;
  display: grid; place-items: center;
  color: #d4d4d8;
}
.foto-vacia svg { width: 34px; height: 34px; }

.badge {
  position: absolute; top: 6px; left: 6px; z-index: 2; pointer-events: none;
  padding: 3px 6px;
  font-size: 9px; font-weight: 500; text-transform: uppercase; letter-spacing: .08em;
  color: var(--color-accent-200);
  background: var(--color-accent-900);
  border: 1px solid var(--color-accent-700); border-radius: var(--radius-sm);
}
/* Pares que ya se compraron pero todavía no llegan a la tienda: badge en gris
   neutro, no en dorado, para no confundirlo con "Oferta" de un vistazo. */
.badge.transito {
  color: var(--color-text);
  background: var(--color-neutral-800);
  border-color: var(--color-neutral-600);
}

.favorito {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: rgba(22, 24, 38, .72);
  border: 1px solid transparent; border-radius: var(--radius-md);
  color: #e9e9ed;
  transition: color 150ms ease, border-color 150ms ease;
}
.favorito svg { width: 14px; height: 14px; }
.favorito.activo { border-color: var(--color-accent-400); color: var(--color-accent-300); }
.favorito.activo svg { fill: currentColor; }

.cuerpo {
  padding: var(--space-3) var(--space-3) var(--space-4);
  display: flex; flex-direction: column; gap: var(--space-2);
  flex: 1;
}

.tarjeta-colorway {
  font-size: 9.5px; font-weight: 400; text-transform: uppercase; letter-spacing: .11em;
  color: var(--color-neutral-500);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tarjeta-modelo {
  font-size: 13px; font-weight: 500; line-height: 1.25; text-wrap: pretty;
}

/* El diseño pide que ningún objetivo táctil quede por debajo de 44 px de área
   efectiva. A 22 px no se cumplía ni de cerca; a 28 px con 5 de separación el
   pulgar ya acierta sin que la tarjeta pierda densidad. Subir más obligaría a
   que las áreas de dos renglones de chips se encimaran, que es peor: el cliente
   tocaría la talla de arriba creyendo que toca la de abajo. */
.tallas { display: flex; flex-wrap: wrap; gap: 5px; margin-top: var(--space-1); }
.talla {
  min-width: 30px; height: 28px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 500;
  color: var(--color-neutral-400);
  background: transparent;
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-sm);
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
}
.talla:hover { border-color: var(--color-neutral-700); }
.talla.elegida {
  border-color: var(--color-accent);
  background: var(--color-accent-800);
  color: var(--color-accent-100);
}
.talla.agotada {
  color: var(--color-neutral-700);
  text-decoration: line-through;
  cursor: not-allowed;
  border-color: var(--color-neutral-900);
}
.talla.agotada:hover { border-color: var(--color-neutral-900); }
/* Todavía se puede tocar (es un apartado válido), pero el punteado avisa que no
   es un chip normal — combina bien encima con .elegida cuando se selecciona. */
.talla.transito { border-style: dashed; }

.talla-unica {
  font-size: 10.5px; color: var(--color-neutral-500);
  margin-top: var(--space-1);
}

/* Siempre presente aunque esté vacía: si apareciera y desapareciera, la tarjeta
   daría un brinco de altura cada vez que el cliente elige una talla. */
.estado { font-size: 9.5px; min-height: 12px; line-height: 12px; color: var(--color-neutral-600); }
.estado.elegida { color: var(--color-neutral-400); }
.estado.error { color: var(--color-accent-300); }
.estado.transito { color: var(--color-text); }

.pie {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-2);
  margin-top: auto; padding-top: var(--space-1);
}
.precios { min-width: 0; }
.precio-desde { font-size: 9px; color: var(--color-neutral-600); display: block; line-height: 1.1; }
.precio { font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; }
.precio-anterior { font-size: 10px; font-weight: 400; color: var(--color-neutral-600); text-decoration: line-through; display: block; }

.agregar {
  width: 34px; height: 34px; flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--color-neutral-700); border-radius: var(--radius-md);
  color: var(--color-neutral-500);
  transition: all 160ms ease;
}
.agregar svg { width: 15px; height: 15px; }
.agregar.listo {
  border-color: var(--color-accent);
  background: var(--color-accent-900);
  color: var(--color-accent-300);
}
/* Apartar no es agregar al carrito, así que no lleva el mismo dorado — el
   mismo gris neutro del badge y del chip punteado de "Próximamente". Va
   después de .agregar.listo a propósito, para ganarle cuando las dos aplican. */
.agregar.apartar {
  border-color: var(--color-neutral-600);
  background: var(--color-neutral-800);
  color: var(--color-text);
}

/* ───────────────────── Bloque de cierre, vacíos y carga ───────────────────── */

.cierre {
  margin-top: var(--space-8);
  padding: var(--space-6) var(--space-5);
  text-align: center;
  border: 1px dashed var(--color-neutral-800); border-radius: var(--radius-lg);
}
.cierre-titulo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 500; margin-bottom: var(--space-2);
}
.cierre-titulo svg { width: 15px; height: 15px; color: var(--wa); }
.cierre-texto { font-size: 10.5px; line-height: 1.6; color: var(--color-neutral-500); }

.aviso { padding: 48px var(--space-5); text-align: center; }
.aviso > svg { width: 30px; height: 30px; color: var(--color-neutral-700); margin-bottom: var(--space-4); }
.aviso-titulo { font-size: 13.5px; font-weight: 500; margin-bottom: var(--space-2); }
.aviso-texto { font-size: 11px; line-height: 1.6; color: var(--color-neutral-500); }
.aviso button {
  margin-top: var(--space-5); height: 34px; padding: 0 16px;
  font-size: 12px; font-weight: 500;
  color: var(--color-accent-200);
  background: var(--color-accent-900);
  border: 1px solid var(--color-accent-700); border-radius: var(--radius-md);
}
.aviso button:hover { background: var(--color-accent-800); }

/* Esqueleto de carga: mismas medidas que la tarjeta real, para que al llegar los
   datos nada se mueva de lugar. */
.esqueleto { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--color-neutral-800); }
.esqueleto-foto { aspect-ratio: 1 / 1; }
.esqueleto-linea { height: 9px; border-radius: var(--radius-sm); margin: var(--space-3) var(--space-3) 0; }
.esqueleto-linea.corta { width: 45%; }
.esqueleto-linea.ultima { margin-bottom: var(--space-5); width: 65%; }
.esqueleto-foto, .esqueleto-linea {
  background: linear-gradient(90deg, var(--color-neutral-900), var(--color-neutral-800), var(--color-neutral-900));
  background-size: 200% 100%;
  animation: brillo 1.4s ease-in-out infinite;
}
@keyframes brillo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

/* ─────────────────────────── Toast ─────────────────────────── */

.toast {
  position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 24px);
  left: var(--pad); right: var(--pad);
  max-width: calc(var(--ancho) - var(--pad) * 2);
  margin-inline: auto;
  z-index: 60;
  padding: var(--space-4) var(--space-5);
  font-size: 11.5px; line-height: 1.45;
  color: var(--color-accent-200);
  background: var(--color-neutral-900);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  animation: subir 220ms cubic-bezier(.2, .8, .2, 1);
}

@keyframes subir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════ Pedido: barra, hoja del carrito y confirmación ═══════════════════ */

/* El botón de WhatsApp es el elemento más importante de la app y aparece en tres
   lugares. Siempre borde + tinte, nunca relleno sólido: un bloque verde macizo
   sobre fondo oscuro grita más fuerte que el producto, que es lo que se vende. */
.btn-wa {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 50px;
  font-size: 14.5px; font-weight: 500;
  color: var(--wa);
  background: var(--wa-tint);
  border: 1px solid var(--wa); border-radius: var(--radius-md);
  text-decoration: none;
  transition: background 150ms ease;
}
.btn-wa:hover, .btn-wa:active { background: var(--wa-tint-fuerte); }
.btn-wa[disabled] { opacity: .55; cursor: progress; }
.btn-wa[disabled]:hover { background: var(--wa-tint); }
.btn-wa svg { width: 19px; height: 19px; flex: none; }

/* Mismo tamaño que .btn-wa, pero en el acento dorado en vez del verde de
   WhatsApp — a propósito: este botón no manda a WhatsApp (copia un link), y
   pintarlo de verde le mentiría al ojo sobre a dónde lleva. */
.btn-primario {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 50px;
  font-size: 14.5px; font-weight: 500;
  color: var(--color-accent-200);
  background: var(--color-accent-900);
  border: 1px solid var(--color-accent-700); border-radius: var(--radius-md);
  transition: background 150ms ease;
}
.btn-primario:hover, .btn-primario:active { background: var(--color-accent-800); }
.btn-primario svg { width: 19px; height: 19px; flex: none; }

/* Fondo blanco fijo: un QR se lee por el contraste entre módulos oscuros y
   claros — sobre el fondo oscuro del catálogo, el navegador podría invertirlo
   o perder contraste, y un lector de códigos ya no lo reconocería. */
.qr-caja {
  display: flex; justify-content: center;
  background: #ffffff;
  padding: var(--space-6);
  margin: var(--space-4) 0;
  border-radius: var(--radius-lg);
}
.qr-caja svg { display: block; width: 100%; height: auto; max-width: 220px; }

.enlace-fantasma {
  display: block; width: 100%;
  padding: var(--space-4) 0;
  font-size: 11.5px; color: var(--color-neutral-500);
  transition: color 150ms ease;
}
.enlace-fantasma:hover { color: var(--color-text); }

/* ── Barra inferior ── */

.barra {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  max-width: var(--ancho); margin-inline: auto;
  display: flex; gap: 8px;
  padding: var(--space-5) var(--pad) calc(env(safe-area-inset-bottom, 0px) + var(--space-5));
  /* La cuadrícula se disuelve detrás en vez de cortarse con una línea dura. */
  background: linear-gradient(180deg, rgba(22, 24, 38, 0), var(--color-bg) 34%);
  animation: subir 220ms cubic-bezier(.2, .8, .2, 1);
}
.barra-resumen {
  flex: 1; min-width: 0; height: 50px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  padding: 0 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-700); border-radius: var(--radius-md);
}
.barra-articulos { font-size: 10px; color: var(--color-neutral-500); }
.barra-subtotal { font-size: 14px; font-weight: 500; }
.barra-enviar { flex: 1.15; }

/* Con la barra puesta, la última fila de tarjetas no puede quedar tapada. */
body.con-barra .contenido { padding-bottom: 116px; }

/* ── Hoja del carrito ── */

.velo {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(11, 12, 20, .72);
  animation: aparecer 200ms ease;
}
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }

.hoja {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  max-width: var(--ancho); margin-inline: auto;
  display: flex; flex-direction: column;
  max-height: 86%;
  background: var(--color-bg);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-lg);
  animation: subir 260ms cubic-bezier(.2, .8, .2, 1);
}

.hoja-cabeza {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-6) var(--pad) var(--space-4);
  border-bottom: 1px solid var(--color-neutral-900);
}
.hoja-titulo { font-size: 16px; font-weight: 500; }
.hoja-sub { font-size: 10.5px; color: var(--color-neutral-500); margin-top: 2px; }

.hoja-cuerpo { flex: 1; overflow-y: auto; padding: 0 var(--pad); }

.hoja-pie {
  padding: var(--space-4) var(--pad) calc(env(safe-area-inset-bottom, 0px) + var(--space-4));
  border-top: 1px solid var(--color-neutral-900);
}

/* ── Renglón de producto ── */

.renglon {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 11px 0;
  border-bottom: 1px solid var(--color-neutral-900);
}
.renglon-inicial {
  width: 42px; height: 42px; flex: none;
  display: grid; place-items: center;
  font-size: 16px; font-weight: 500; color: var(--color-accent-300);
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
}
.renglon-textos { flex: 1; min-width: 0; }
.renglon-nombre {
  font-size: 12.5px; font-weight: 500; line-height: 1.25;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.renglon-detalle { font-size: 10.5px; color: var(--color-neutral-500); margin-top: 2px; }

.stepper { display: flex; align-items: center; gap: 2px; flex: none; }
.stepper button {
  width: 28px; height: 28px; display: grid; place-items: center;
  color: var(--color-neutral-400); border-radius: var(--radius-sm);
  transition: background 150ms ease, color 150ms ease;
}
.stepper button:hover { background: var(--color-neutral-800); color: var(--color-text); }
.stepper button.mas { color: var(--color-accent-400); }
.stepper button svg { width: 13px; height: 13px; }
.stepper span { min-width: 16px; text-align: center; font-size: 12.5px; font-weight: 500; }

.renglon-importe { width: 62px; flex: none; text-align: right; font-size: 12.5px; font-weight: 500; }

/* Aviso de lo que el punto de venta vendió mientras el cliente armaba su pedido. */
.retirados {
  display: flex; flex-direction: column; gap: 3px;
  margin-top: var(--space-4);
  padding: var(--space-4);
  font-size: 10.5px; line-height: 1.5;
  color: var(--color-accent-200);
  background: var(--color-accent-900);
  border: 1px solid var(--color-accent-700); border-radius: var(--radius-md);
}
.retirados strong { font-weight: 500; }
.retirados em { font-style: normal; color: var(--color-accent-300); }

/* ── Datos del pedido y resumen ── */

.grupo { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6) 0; }
.segmentado { display: flex; gap: var(--space-2); }
.segmentado .chip { flex: 1; justify-content: center; height: 36px; }

.campo {
  width: 100%; height: 38px; padding: 0 12px;
  font-size: 12.5px;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-md);
  transition: border-color 150ms ease;
}
.campo::placeholder { color: var(--color-neutral-600); }
.campo:focus { border-color: var(--color-accent-700); }

.resumen-pedido {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-5) 0 var(--space-6);
  border-top: 1px solid var(--color-neutral-900);
}
.resumen-pedido > div { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 12px; }
.resumen-pedido > div > span:first-child { color: var(--color-neutral-500); }
/* Ya no es una cifra alineada a la derecha sino una frase, así que se lee de
   izquierda a derecha como cualquier texto. */
.resumen-nota {
  font-size: 10.5px; line-height: 1.5; color: var(--color-neutral-500);
  display: block !important; margin-top: var(--space-1);
}
.resumen-total { align-items: baseline; }
.resumen-total > span:first-child { color: var(--color-text) !important; font-size: 13px; }
.resumen-total > span:last-child { font-size: 18px; font-weight: 500; }

/* Pista debajo de los campos: explica por qué se pide el teléfono. */
.campo-ayuda { font-size: 10px; line-height: 1.5; color: var(--color-neutral-600); }

/* El reclamo se marca con color Y con texto, nunca solo con color: quien no
   distingue bien los tonos tiene que poder saber igual qué salió mal. */
.campo-ayuda-error { color: var(--color-accent-300); }
.campo-error { border-color: var(--color-accent); }
.campo-error:focus { border-color: var(--color-accent); }

/* Folio del pedido en la pantalla de confirmación. Es lo que convierte el
   mensaje en un trámite con nombre en vez de un antojo suelto. */
.folio {
  display: inline-block;
  margin-top: var(--space-3);
  padding: 4px 10px;
  font-size: 11px; font-weight: 500; letter-spacing: .06em;
  color: var(--color-accent-200);
  background: var(--color-accent-900);
  border: 1px solid var(--color-accent-700); border-radius: var(--radius-sm);
}

/* ── Foto ampliada ── */

.foto-grande {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top, 0px) + var(--space-6)) var(--pad)
           calc(env(safe-area-inset-bottom, 0px) + var(--space-6));
  animation: aparecer 200ms ease;
}
.foto-grande img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-lg);
  background: var(--color-foto-bg);
}
.foto-grande-cerrar {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + var(--space-5)); right: var(--pad);
  background: rgba(11, 12, 20, .7);
  border-color: transparent;
}

/* ── Pantalla de confirmación ── */

.exito {
  position: fixed; inset: 0; z-index: 50;
  max-width: var(--ancho); margin-inline: auto;
  overflow-y: auto;
  padding: calc(env(safe-area-inset-top, 0px) + 56px) var(--pad)
           calc(env(safe-area-inset-bottom, 0px) + var(--space-6));
  background: var(--color-bg);
  text-align: center;
  animation: aparecer 200ms ease;
}
.exito-check {
  width: 46px; height: 46px; margin: 0 auto var(--space-5);
  display: grid; place-items: center;
  color: var(--wa);
  background: var(--wa-tint);
  border: 1px solid var(--wa); border-radius: 50%;
  animation: brotar 320ms cubic-bezier(.2, .9, .3, 1.4);
}
.exito-check svg { width: 22px; height: 22px; }
@keyframes brotar { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

.exito-titulo { font-size: 22px; font-weight: 500; letter-spacing: -.015em; }
.exito-texto {
  font-size: 11.5px; line-height: 1.65; color: var(--color-neutral-500);
  margin: var(--space-3) 0 var(--space-6);
}

/* El mensaje tal cual va a salir: nada de sorpresas al abrir WhatsApp. */
.vista-mensaje {
  text-align: left;
  padding: var(--space-5);
  font-size: 11.5px; line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  background: var(--color-surface);
  border-left: 2px solid var(--wa);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.exito-para {
  text-align: right; font-size: 10px; color: var(--color-neutral-600);
  margin: var(--space-3) 0 var(--space-6);
}