/* ============================================================================
   Catálogo Multinegocio — sistema Nocturne (oscuro, denso, móvil primero)
   Los colores viven SOLO aquí como variables (con la excepción declarada del
   verde de WhatsApp). El acento (--color-accent-*) se sobreescribe en runtime
   por acentos.js según el negocio — ver esa lógica antes de tocar un tono aquí.
   ========================================================================= */

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

  /* Rampa por defecto (dorado); acentos.js la reemplaza entera al arrancar
     según negocio.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. */
  --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: sobre el gradiente oscuro, una foto con
     fondo blanco o transparente se ve como un rectángulo flotando. Sobre
     blanco se funde con la tarjeta — 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);

  /* Velo detrás de la hoja del carrito: oscuro en ambos temas (es una
     sombra, no una superficie), pero más suave cuando hay luz. */
  --color-velo: rgba(11, 12, 20, .72);

  --font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --pad: 14px;              /* padding horizontal de pantalla */
  /* Ancho del CONTENIDO. Crece en escritorio (ver el bloque del final). */
  --ancho: 402px;
  /* Ancho de las piezas que siguen siendo "de una mano" pase lo que pase:
     barra del carrito, hoja del pedido, toast y confirmación. Este NUNCA
     crece — estiradas a mil píxeles esas piezas se ven absurdas. */
  --ancho-movil: 402px;
}

/* ─────────────────────────── Tema claro ───────────────────────────
   Solo se redefinen tokens, ningún selector de componente. La rampa del
   acento no se toca aquí: acentos.js la escribe invertida en runtime.

   Los neutrales NO son un intercambio mecánico 400↔900: se calcularon para
   dar sobre el fondo claro el MISMO contraste que cada paso da hoy sobre el
   oscuro (6.3, 4.3, 2.9, 2.0, 1.4, 1.1), así la jerarquía de "qué tan tenue
   se ve cada cosa" queda idéntica al prender la luz. */
:root[data-tema="claro"] {
  --color-bg: #f5f5f7;
  --color-surface: #ffffff;   /* la tarjeta flota más clara que el fondo, igual que en oscuro pero al revés */
  --color-text: #21212d;
  --color-divider: rgba(33, 33, 45, .14);

  --color-neutral-400: #595965;
  --color-neutral-500: #72727e;
  --color-neutral-600: #8f8f9b;
  --color-neutral-700: #aeaeba;
  --color-neutral-800: #ceceda;
  --color-neutral-900: #e6e6f2;

  /* Las sombras de arriba son casi negras: sobre blanco se ven como manchas. */
  --shadow-md: 0 6px 24px rgba(24, 24, 40, .10);
  --shadow-lg: 0 12px 40px rgba(24, 24, 40, .16);

  --color-velo: rgba(24, 24, 40, .45);
}

* { 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;
  /* Nace en ancho de teléfono y se centra. En escritorio --ancho crece y esta
     misma regla lo acompaña, sin tocar nada más (ver el bloque del final). */
  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-barra { scrollbar-width: none; -ms-overflow-style: none; }
.sin-barra::-webkit-scrollbar { display: none; }

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

.header {
  position: sticky; top: 0; z-index: 20;
  overflow: hidden;
  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%);
}

.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);
}

/* Motivo de espiga: solo aparece con el preset "lista" (giro restaurante/
   fonda) — un guiño de pan/trigo detrás del nombre, nunca en cuadrícula
   (zapatería/boutique/cosméticos). z-index negativo lo deja detrás de las
   letras sin tener que tocar el resto del header. */
.header-motivo {
  position: absolute; z-index: -1; top: 4px; right: 8px;
  width: 34px; height: 54px;
  color: var(--color-accent-700);
  opacity: .35;
  pointer-events: none;
}
.header-motivo svg { width: 100%; height: 100%; display: block; }

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

.marca-cuadro {
  width: 52px; height: 52px; flex: none;
  border: 1px solid var(--color-accent-700); border-radius: 50%;
  overflow: hidden;
  display: grid; place-items: center;
  background: var(--color-accent-900);
}
.marca-cuadro img { width: 100%; height: 100%; display: block; object-fit: cover; }
.marca-inicial { font-size: 22px; font-weight: 600; color: var(--color-accent-300); }

.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: 12px; font-weight: 400; color: var(--color-neutral-500); }

/* Banner "cerrado": mismo tono que los chips activos (tinte del acento
   sobre fondo oscuro/900), nunca rojo de alarma — es un aviso, no un error. */
.aviso-cerrado {
  margin-top: var(--space-3);
  padding: var(--space-3);
  font-size: 11.5px; line-height: 1.5;
  background: var(--color-accent-900); color: var(--color-accent-200);
  border: 1px solid var(--color-accent-700); border-radius: var(--radius-md);
}

.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 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; }

/* Layout "lista" (restaurante/fonda): una columna, tarjeta vertical con foto
   grande arriba — a diferencia de la cuadrícula, aquí la foto SÍ recorta a
   "cover": son fotos de platillo ya compuestas (plato centrado, encuadre
   horizontal), y a este tamaño se ven mejor llenando el marco que flotando
   chicas sobre fondo blanco. Si una foto entra mal encuadrada se recorta —
   pídele al dueño que centre el platillo al tomarla. */
.lista-catalogo { display: flex; flex-direction: column; gap: var(--space-4); }

.fila-catalogo {
  display: flex; flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-lg);
  overflow: hidden;
}
.fila-foto {
  position: relative;
  width: 100%; aspect-ratio: 4 / 3;
  background: var(--color-neutral-900);
}
.fila-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fila-foto .foto-vacia { position: absolute; inset: 0; display: grid; place-items: center; color: var(--color-neutral-700); }
.fila-foto .foto-vacia svg { width: 40px; height: 40px; }

.fila-cuerpo { padding: var(--space-4) var(--space-4) var(--space-3); display: flex; flex-direction: column; gap: 4px; }
.fila-nombre { font-size: 16px; font-weight: 600; line-height: 1.25; text-wrap: pretty; }
.fila-descripcion {
  font-size: 12px; line-height: 1.45; color: var(--color-neutral-500);
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.fila-cuerpo .tallas { margin-top: var(--space-1); }
.fila-cuerpo .estado { font-size: 11px; min-height: 14px; line-height: 14px; }

.fila-pie {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 0 var(--space-4) var(--space-4);
}
.fila-pie .precios { text-align: left; }
.fila-pie .precio { font-size: 17px; font-weight: 600; }

/* Botón "Agregar" con texto — más presencia que el "+" chico de la
   cuadrícula, a propósito: en un menú con pocos platillos cada uno debe
   sentirse como una decisión completa, no como un artículo de catálogo. */
.fila-agregar {
  flex: none;
  display: flex; align-items: center; gap: 6px;
  padding: 9px 16px;
  font-size: 12.5px; font-weight: 600;
  color: var(--color-neutral-400);
  background: var(--color-surface);
  border: 1px solid var(--color-neutral-700); border-radius: var(--radius-md);
  transition: all 160ms ease;
}
.fila-agregar svg { width: 15px; height: 15px; }
.fila-agregar.listo {
  border-color: var(--color-accent);
  background: var(--color-accent-900);
  color: var(--color-accent-300);
}
.fila-agregar.bloqueado { color: var(--color-neutral-700); border-color: var(--color-neutral-900); cursor: not-allowed; }

.esqueleto-fila {
  border: 1px solid var(--color-neutral-800); border-radius: var(--radius-lg);
  overflow: hidden;
}
.esqueleto-fila-foto {
  width: 100%; aspect-ratio: 4 / 3;
  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;
}
.esqueleto-fila-textos { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }
.esqueleto-fila-textos .esqueleto-linea {
  height: 9px; border-radius: var(--radius-sm); margin: 0;
  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;
}
.esqueleto-fila-textos .corta { width: 45%; }

/* ─────────────────────────── 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: las fotos de producto no son cuadradas, y recortarlas a
   cuadro parte el producto a la mitad. */
.foto img { width: 100%; height: 100%; object-fit: contain; display: block; }

.foto-vacia {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #d4d4d8;
}
.foto-vacia svg { width: 34px; height: 34px; }

.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;
}

/* "Bajo pedido": mismo tratamiento en cuadrícula y en lista — un dato del
   producto, no del layout. */
.badge-bajo-pedido {
  align-self: flex-start;
  font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 7px; border-radius: 20px;
  color: var(--color-neutral-400); border: 1px solid var(--color-neutral-700);
}

/* Ningún objetivo táctil por debajo de 44px de área efectiva: a 28px con 5 de
   separación el pulgar acierta sin que la tarjeta pierda densidad. */
.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); }

/* 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 opción. */
.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); }

.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; }

.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);
}
.agregar.bloqueado { color: var(--color-neutral-700); border-color: var(--color-neutral-900); cursor: not-allowed; }
.agregar.bloqueado svg { width: 12px; height: 12px; }

/* ───────────────────── 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-movil) - 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; }

.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-movil); margin-inline: auto;
  display: flex; gap: 8px;
  padding: var(--space-5) var(--pad) calc(env(safe-area-inset-bottom, 0px) + var(--space-5));
  /* El degradado arranca en el propio fondo con alpha 0 — antes era el azul
     marino literal, que en tema claro dejaba una franja gris. */
  background: linear-gradient(180deg, transparent, 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; }

body.con-barra .contenido { padding-bottom: 116px; }

/* ── Hoja del carrito ── */

.velo {
  position: fixed; inset: 0; z-index: 40;
  background: var(--color-velo);
  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-movil); 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; }

.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); }
.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; }

.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);
}

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

.exito {
  position: fixed; inset: 0; z-index: 50;
  max-width: var(--ancho-movil); 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);
}

.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);
}

/* ═══════════════════════════ Escritorio ═══════════════════════════
   El catálogo nació como producto de celular y ahí sigue mandando: por
   debajo de 720 px no cambia ni una regla de todo lo de arriba. De 720 en
   adelante deja de tener sentido dejar el 80% de la pantalla en blanco, así
   que crece el contenedor y las dos rejillas deciden solas cuántas columnas
   caben — nunca se agrandan las tarjetas, cabe más producto, que es lo que
   alguien quiere de un catálogo abierto en una laptop.

   Lo que NO crece: barra del carrito, hoja del pedido, toast y pantalla de
   confirmación. Se quedan en --ancho-movil, centradas sobre el viewport.
   Para eso existen los dos tokens de ancho.
   ══════════════════════════════════════════════════════════════════ */

/* El QR solo existe en pantalla grande: en un celular no tiene sentido:
   quien ya está viendo el catálogo en su teléfono no va a escanearlo.
   app.js usa este MISMO umbral para ni siquiera bajar el generador. */
.qr-header { display: none; }

@media (min-width: 720px) {
  :root {
    --ancho: min(1060px, 92vw);
    --pad: 24px;
  }

  /* minmax() es el ancho mínimo legible de una tarjeta, no un número de
     columnas: así el mismo CSS da 3 columnas en una tablet y 5 en un
     monitor, sin un breakpoint por cada tamaño. */
  .rejilla {
    grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
    gap: var(--space-4);
  }

  /* El layout "lista" (restaurante) deja de ser una columna: mismas
     tarjetas altas, pero en rejilla. align-items:start evita que una
     tarjeta con descripción larga estire a sus vecinas. */
  .lista-catalogo {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    align-items: start;
  }

  /* Ya no hacen falta el scroll horizontal ni los márgenes negativos que lo
     hacían llegar al borde: con este ancho los chips caben en renglones. */
  .chips {
    flex-wrap: wrap;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
  }

  /* La confirmación es angosta y fija: sin esto, en una pantalla ancha se
     vería el catálogo asomando a los lados. Pinta el viewport completo por
     detrás del panel. */
  .exito::before {
    content: ""; position: fixed; inset: 0; z-index: -1;
    background: var(--color-bg);
  }
}

@media (min-width: 1024px) {
  /* El header reparte el ancho en vez de apilar todo: marca a la izquierda,
     buscador y QR a la derecha, chips y aviso cruzando completo debajo.
     .header-motivo es position:absolute, así que no ocupa celda. */
  .header {
    display: grid;
    grid-template-columns: 1fr auto auto;
    column-gap: var(--space-5);
    align-items: center;
  }
  .marca { grid-column: 1; }
  .buscador { grid-column: 2; width: 300px; margin-top: 0; }
  .qr-header { grid-column: 3; }
  .aviso-cerrado, .chips { grid-column: 1 / -1; }

  /* El QR se agranda al apuntarlo, y para eso no puede quedar recortado.
     .header-motivo es lo único que ese recorte contenía, y en este ancho
     cae justo detrás de la tarjeta del QR (que es opaca), así que aquí se
     retira: en escritorio el adorno de espiga no se vería de todos modos. */
  .header { overflow: visible; }
  .header-motivo { display: none; }

  .qr-header {
    display: flex; align-items: center; gap: var(--space-3);
    padding: 6px 12px 6px 6px;
    background: var(--color-surface);
    border: 1px solid var(--color-neutral-800);
    border-radius: var(--radius-md);
  }
  /* El lienzo es blanco SIEMPRE, en tema claro y en oscuro: un QR sobre
     fondo oscuro o teñido con el acento pierde contraste y hay cámaras que
     dejan de leerlo. El color de la marca vive en el borde, no en el código.
     76 px es el mínimo con el que este QR se lee cómodo desde el celular. */
  .qr-lienzo {
    width: 104px; height: 104px; flex: none;
    padding: 4px;
    background: #ffffff;
    border-radius: var(--radius-sm);
    /* Crece hacia abajo y a la izquierda, nunca hacia fuera de la pantalla. */
    transform-origin: top right;
    transition: transform 160ms ease, box-shadow 160ms ease;
  }
  .qr-lienzo svg { width: 100%; height: 100%; display: block; }

  /* A 104 px el código se lee con una cámara moderna, pero no con una vieja
     ni desde lejos. Al apuntarlo (o al llegar con el tabulador) se agranda a
     ~2.4x, que es tamaño de sobra para cualquier teléfono. Es la diferencia
     entre un QR que decora y uno que de verdad se escanea. */
  .qr-header:hover .qr-lienzo,
  .qr-header:focus-within .qr-lienzo {
    transform: scale(2.4);
    box-shadow: var(--shadow-lg);
  }
  .qr-texto {
    font-size: 10px; line-height: 1.4;
    color: var(--color-neutral-500);
    white-space: nowrap;
  }
  .btn-compartir {
    width: 36px; height: 36px; padding: 0; margin-left: auto; flex: none;
    background: var(--color-accent-800);
    border: 1px solid var(--color-accent-700);
    border-radius: var(--radius-sm);
    color: var(--color-accent-100);
    display: grid; place-items: center;
    cursor: pointer;
    transition: background 150ms ease, border-color 150ms ease;
  }
  .btn-compartir:hover { background: var(--color-accent-700); border-color: var(--color-accent-600); }
  .btn-compartir svg { width: 18px; height: 18px; }
}

/* ═════════════════════════ Modal de compartir ════════════════════════ */

.compartir-modal {
  position: fixed; z-index: 101; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: var(--ancho-movil);
  background: var(--color-surface);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: 0 -12px 40px rgba(0, 0, 0, .4);
  display: flex; flex-direction: column;
  max-height: 90dvh; overflow-y: auto;
}

.compartir-cabeza {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px;
  border-bottom: 1px solid var(--color-divider);
  flex: none;
}

.compartir-titulo {
  font-size: 16px; font-weight: 600;
  color: var(--color-text);
}

.compartir-cuerpo {
  padding: 20px 16px;
  display: flex; flex-direction: column; gap: 18px;
}

.compartir-desc {
  font-size: 13px;
  color: var(--color-neutral-500);
}

.compartir-qr {
  display: flex; justify-content: center;
  background: var(--color-bg);
  padding: 16px;
  border-radius: var(--radius-md);
}

.qr-canvas {
  width: 180px; height: 180px;
  background: #ffffff;
  padding: 8px;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}

.qr-canvas svg {
  width: 100%; height: 100%;
  display: block;
}

.compartir-url {
  display: flex; flex-direction: column; gap: 10px;
}

.campo-url {
  width: 100%;
  padding: 10px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  color: var(--color-text);
  font-size: 13px;
  font-family: var(--font);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.campo-url:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px rgba(184, 142, 83, .15);
}

.btn-copiar {
  width: 100%;
  padding: 12px 16px;
  background: linear-gradient(135deg, var(--color-accent-600), var(--color-accent-700));
  border: none;
  border-radius: var(--radius-md);
  color: #ffffff;
  font-size: 14px; font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 150ms ease, transform 150ms ease;
}

.btn-copiar:hover {
  background: linear-gradient(135deg, var(--color-accent-500), var(--color-accent-600));
}

.btn-copiar:active {
  transform: scale(.98);
}