/* ==========================================================================
   styles.css — ESTRUCTURA. Nada de colores/fuentes/radios literales acá:
   todo sale de tokens.css. Ver la regla en la cabecera de ese archivo.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--fuente);
  font-size: var(--t-base);
  line-height: 1.45;
  /* La barra de categorías es sticky; sin esto el scroll-spy pelea con el
     desplazamiento suave del navegador. */
  scroll-behavior: smooth;
}

.envoltura {
  max-width: var(--ancho-max);
  margin: 0 auto;
  padding: 0 var(--e-4);
}

/* ── Encabezado ─────────────────────────────────────────────────────────── */
/* 🪤 Acá decía `padding: var(--e-5) 0 var(--e-3)` y ese `0` de los lados pisaba
   el padding lateral de `.envoltura`: el logo, el lema y el estado quedaban
   pegados al borde de la pantalla mientras todo lo demás respetaba 16 px.
   Al escribir el atajo `padding:` de un elemento que YA hereda de una clase de
   layout, hay que repetir los cuatro lados o no tocarlos. */
/* EL CROMADO va en dos bandas: cabecera AZUL, barra de categorías ROJA.
   🔑 La cabecera es azul por el logo, no por gusto: el logo es rojo con
   contorno blanco, y sobre rojo se disolvía en su propio fondo — quedaba
   leyéndose por el contorno. Sobre azul recupera su color. El fondo de un
   logo no puede ser el color del logo. */
.cabecera {
  background: var(--azul);
  color: var(--sobre-azul);
}

.cabecera__interior {
  padding: var(--e-4);
}

/* 🔑 El lema AL LADO del logo, alineado con su base (Jefe, 20-ago). La cabecera
   se comía el 42% de la primera pantalla —el primer producto arrancaba en el
   pixel 340 de 812— y el lema en línea propia costaba ~28px para decir lo que
   la barra de categorías dice mejor justo debajo, con los nombres reales.
   `flex-end` y no `center`: el logo es un script inclinado y su masa está
   abajo; a media altura el texto flotaba. */
/* 🪤 `wrap` NO sirve acá: si el lema no cabe se va a su propia línea y la
   cabecera queda MÁS alta que antes (medido: 217px → 224). O caben los dos al
   lado, o no hay ahorro. Por eso `nowrap` y las medidas ajustadas abajo. */
.cabecera__marca {
  display: flex;
  align-items: flex-end;
  flex-wrap: nowrap;
  gap: var(--e-3);
}

/* El logo ocupa el lugar del nombre escrito. Con él en la cabecera, la
   tipografía ya no tiene que cargar la personalidad de la marca: solo tiene
   que dejarse leer. Eso es lo que hace que Epilogue funcione acá. */
.cabecera__logo {
  margin: 0;
  line-height: 0;
}

/* 140px y no 168: es lo que hace que el lema quepa a su lado. Medido a 375px —
   el contenedor da 343, el lema pide 166 y el gap 12, así que el logo no puede
   pasar de ~165; se deja en 140 para que sobre margen, porque `font-display:
   swap` pinta primero la fuente del sistema, que es MÁS ANCHA que Epilogue: sin
   ese colchón la cabecera daría un salto mientras carga la tipografía.
   De paso el logo baja de 101px de alto a 84. */
.cabecera__logo img {
  width: 140px;
  height: auto;
  /* El logo lleva su propio contorno blanco: en fondo oscuro se sostiene solo,
     sin necesidad de una caja ni de invertirlo. */
}

/* 🔑 El lema se METE en el área del logo, sin tocarlo (Jefe, 20-ago). El logo
   es un script inclinado: su esquina inferior derecha está vacía y ese hueco
   estaba desperdiciado, mientras el texto quedaba pegado al borde derecho de
   la pantalla.
   Medido sobre el alpha del propio `foodies.webp`, por bandas horizontales —
   el último píxel opaco de cada franja, en % del ancho:
       banda 60-70%: 100%   banda 70-80%: 67%
       banda 80-90%:  52%   banda 90-100%: 40%
   El texto se apoya en la BASE del logo (ver el `margin` de abajo), así que cae
   en las franjas 70-100%, donde el dibujo se retira: en la banda que ocupa el
   lema el trazo termina en el píxel 104 de la pantalla. Entrando 48px, el texto
   arranca en el 120 — **16px de aire contra el trazo, verificados leyendo el
   alpha en la franja exacta que ocupa el texto**, no a ojo.
   ⚠️ Ese -48 está atado al ancho del logo Y a la posición vertical del texto.
   Si cambia cualquiera de los dos —o el arte—, hay que volver a medir. */
.cabecera .lema {
  /* Sin margen abajo: el texto se apoya en la BASE del logo. Ahí es donde el
     dibujo ya se retiró (franjas 70-100%: llega al 67%, 52% y 40% del ancho).
     Con los 8px que tenía, la caja del texto subía a la franja 60-70%, que
     está pintada al 100%, y se montaba 28px encima del trazo. */
  margin: 0;
  margin-left: -48px;
  color: var(--sobre-azul);
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}

/* La pastilla de estado vive sobre el azul: en blanco con el texto en su color
   semántico se lee limpia. Con el crema/ámbar de `--aviso-suave` quedaba
   cálida sobre frío y se veía turbia. */
.cabecera .estado { background: var(--superficie); }
.cabecera .estado--abierto { color: var(--ok); }
.cabecera .estado--cerrado { color: var(--aviso); }

/* Estado del negocio: abierto / cerrado / horario */
.estado {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--radio-pill);
  font-size: var(--t-sm);
  font-weight: var(--peso-medio);
}
.estado--abierto { background: var(--ok-suave);    color: var(--ok); }
.estado--cerrado { background: var(--aviso-suave); color: var(--aviso); }

.estado .punto {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}

/* ── Barra de categorías (sticky) ───────────────────────────────────────
   Esto es lo que el Jefe quería de la referencia: las categorías nunca se
   pierden de vista. Scroll horizontal, sin barra visible, y el activo se
   auto-centra cuando cambias de sección. */
.categorias {
  position: sticky;
  top: 0;
  z-index: 20;
  /* Sigue siendo el mismo rojo de la cabecera: al hacer scroll, la barra que
     queda pegada arriba es el cromado de la marca, no una franja gris. */
  background: var(--marca);
  border-bottom: 1px solid var(--marca-oscura);
  /* Cubre el ancho completo aunque el contenido esté centrado */
  margin-bottom: var(--e-4);
}

.categorias__pista {
  max-width: var(--ancho-max);
  margin: 0 auto;
  display: flex;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-4);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.categorias__pista::-webkit-scrollbar { display: none; }

.categorias__chip {
  flex: 0 0 auto;
  padding: var(--e-2) var(--e-4);
  /* 🪤 Acá decía `36px` mientras `--alto-toque` (44px) existía desde el día
     uno. La regla estaba escrita y no se aplicó justo en el control que más
     se toca de toda la carta. Un token que no se usa no es un token. */
  min-height: var(--alto-toque);
  /* Sobre el rojo: el chip en reposo es un contorno blanco translúcido y el
     activo es una pastilla blanca sólida con el texto rojo. Blanco es lo único
     que se destaca sobre rojo sin vibrar. */
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--radio-pill);
  background: transparent;
  color: var(--sobre-marca);
  font: inherit;
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.categorias__chip[aria-current="true"] {
  background: var(--superficie);
  border-color: var(--superficie);
  color: var(--marca);
  font-weight: var(--peso-fuerte);
}

/* ── Secciones ──────────────────────────────────────────────────────────── */
.seccion {
  /* Compensa la barra sticky al saltar con el ancla. Subió con el chip:
     12 + 44 + 12 = 68 de barra, más aire para que el título no quede pegado. */
  scroll-margin-top: 80px;
  margin-bottom: var(--e-6);
}

.seccion__titulo {
  margin: 0 0 var(--e-3);
  font-size: var(--t-md);
  font-weight: var(--peso-fuerte);
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
}

.seccion__cuenta {
  font-size: var(--t-xs);
  font-weight: var(--peso-normal);
  color: var(--texto-tenue);
}

/* ── Producto ───────────────────────────────────────────────────────────── */
.lista { display: grid; gap: var(--e-2); }

.producto {
  display: grid;
  grid-template-columns: var(--foto) 1fr;
  gap: var(--e-3);
  padding: var(--e-3);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  box-shadow: var(--sombra-sm);
}

/* 🚨 Acá había `opacity: 0.62` sobre la tarjeta entera. Se veía bien y dejaba
   el nombre del producto en 1.9:1 de contraste — ilegible. Atenuar un bloque
   con opacidad no atenúa "un poco": arrastra el texto al fondo.
   Lo agotado se marca donde se debe: la foto en gris, el precio apagado y su
   etiqueta. El NOMBRE se lee igual que el de un producto disponible, que es
   justo el dato por el que el cliente vuelve mañana. */
.producto--agotado .producto__foto img { filter: grayscale(1); opacity: 0.55; }
.producto--agotado .producto__detalle   { color: var(--agotado); }

/* Marca de agua mientras no haya fotos: 0 de 45 productos tienen imagen.
   La inicial sobre fondo teñido es un lugar honesto para la foto que falta;
   el día que existan, se cambia el contenido y no la retícula. */
.producto__foto {
  position: relative;
  width: var(--foto); height: var(--foto);
  border-radius: var(--radio);
  background: var(--marca-suave);
  color: var(--marca);
  overflow: hidden;
  user-select: none;
}

/* La inicial es el suelo: siempre está. La foto se pinta encima cuando carga,
   así un fallo de red deja una tarjeta digna en vez de un hueco. */
.producto__inicial {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--fuente-numeros);
  font-size: var(--t-lg);
  font-weight: var(--peso-fuerte);
}

.producto__foto img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.producto__cuerpo { min-width: 0; }

/* El nombre pesaba MENOS que el precio (base vs md): el dato por el que el
   cliente recorre la carta iba un escalón por debajo. Ahora empatan en `md`.
   No se le dio MÁS que al precio a propósito: subirlo a `lg` (22px) rompe en
   dos líneas los nombres largos ("Super Peppe con tocineta") y una tarjeta
   que crece de alto es menos carta por pantalla. */
.producto__nombre {
  margin: 0;
  font-size: var(--t-md);
  font-weight: var(--peso-fuerte);
  line-height: 1.25;
}

.producto__detalle {
  margin: var(--e-1) 0 0;
  color: var(--texto-suave);
  font-size: var(--t-sm);
  /* Dos líneas máximo: la carta se recorre, no se lee */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.producto__pie {
  margin-top: var(--e-2);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.producto__precio {
  font-family: var(--fuente-numeros);
  font-size: var(--t-md);
  font-weight: var(--peso-fuerte);
  color: var(--marca);
}
.producto--agotado .producto__precio { color: var(--agotado); }

/* `.producto__bs` (el precio en bolívares bajo cada producto) se eliminó el
   15-ago: nadie lo emite ya. El equivalente en Bs sobrevive UNA sola vez, en
   el subtotal del pedido (`.resumen__bs`), que es donde el monto se vuelve
   plata de verdad. */

/* ── Etiquetas ──────────────────────────────────────────────────────────── */
.etiqueta {
  display: inline-block;
  padding: 2px var(--e-2);
  border-radius: var(--radio-sm);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  white-space: nowrap;
}
.etiqueta--agotado { background: var(--agotado-suave); color: var(--agotado); }
.etiqueta--sabores { background: var(--marca-suave);   color: var(--marca); }

/* ── Estados de carga y error ───────────────────────────────────────────── */
.aviso {
  margin: var(--e-6) auto;
  padding: var(--e-5);
  max-width: 34ch;
  text-align: center;
  color: var(--texto-suave);
  font-size: var(--t-sm);
}

.aviso__titulo {
  display: block;
  color: var(--texto);
  font-size: var(--t-base);
  font-weight: var(--peso-fuerte);
  margin-bottom: var(--e-2);
}

/* LAS ACCIONES SON AZULES. Es el papel que Domino's le da al rojo, invertido:
   el color de acción tiene que ser el que NO pinta la página, o el botón se
   pierde dentro de su propio cromado. Con la cabecera roja, un botón rojo se
   leería como más decoración; azul se lee como "esto se toca". */
.boton {
  min-height: var(--alto-toque);
  padding: var(--e-2) var(--e-5);
  border: 0;
  border-radius: var(--radio-pill);
  background: var(--azul);
  color: var(--sobre-azul);
  font: inherit;
  font-weight: var(--peso-medio);
  cursor: pointer;
}
.boton:active { background: var(--azul-oscuro); }

/* Esqueleto de carga: la carta tarda lo que tarde la API, y una pantalla en
   blanco se lee como "está roto". */
.esqueleto {
  height: 88px;
  border-radius: var(--radio-lg);
  background: linear-gradient(90deg, var(--superficie) 25%, var(--borde) 50%, var(--superficie) 75%);
  background-size: 200% 100%;
  animation: brillo 1.4s infinite;
}
@keyframes brillo { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .esqueleto { animation: none; }
}

/* ── Acciones del producto ──────────────────────────────────────────────── */

.acciones { margin-top: var(--e-3); }

.boton--agregar {
  padding: var(--e-2) var(--e-4);
  min-height: 38px;
  font-size: var(--t-sm);
}
.boton--chico { min-height: 34px; padding: var(--e-1) var(--e-3); font-size: var(--t-xs); }
.boton:disabled { opacity: 0.45; cursor: default; }

.opciones {
  margin-top: var(--e-3);
  padding: var(--e-3);
  background: var(--marca-suave);
  border-radius: var(--radio);
}

.opciones__titulo {
  margin: 0 0 var(--e-2);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.opciones__titulo:not(:first-child) { margin-top: var(--e-4); }

.opciones__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
}

.chip {
  padding: var(--e-1) var(--e-3);
  min-height: 32px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio-pill);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-xs);
  cursor: pointer;
}
.chip[aria-pressed="true"] {
  background: var(--marca);
  border-color: var(--marca);
  color: var(--sobre-marca);
}
/* Quitar un ingrediente no es lo mismo que elegir un sabor: se marca tachado
   para que se lea "esto NO va" de un vistazo. */
.chip--quitar[aria-pressed="true"] { text-decoration: line-through; }

/* ── Aviso de pedido sin enviar: ELIMINADO ──────────────────────────────────
   `.pendiente*` se quitó el 15-ago. Era un cuadro ámbar encima de la carta
   diciendo "Tu pedido XXXX sigue activo". Le tapaba la comida a quien acaba de
   abrir la página para ver qué hay, y repetía lo que la barra flotante de
   abajo ya dice mejor. La recuperación del pedido no se tocó: sigue pasando,
   en silencio. */

/* ── Nota para la cocina ────────────────────────────────────────────────── */

.nota-cocina {
  width: 100%;
  margin-bottom: var(--e-3);
  padding: var(--e-2) var(--e-3);
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-sm);
  resize: none;
}
.nota-cocina::placeholder { color: var(--texto-tenue); }

.mas-opciones {
  display: block;
  margin-top: var(--e-2);
  padding: var(--e-1) 0;
  border: 0;
  background: none;
  /* Un enlace es navegación, no antojo: va en azul. El rojo se reserva para lo
     que se come. */
  color: var(--azul);
  font: inherit;
  font-size: var(--t-xs);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.linea__nota {
  margin: var(--e-1) 0 0;
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

.listo__nota-cocina {
  margin-left: var(--e-3);
  font-size: var(--t-xs);
  color: var(--texto-suave);
}

/* ── Barra flotante del pedido ──────────────────────────────────────────── */

.barra {
  position: sticky;
  bottom: 0;
  z-index: 30;
  padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom));
  background: var(--fondo);
  box-shadow: var(--sombra-lg);
}

.barra__boton {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  max-width: var(--ancho-max);
  margin: 0 auto;
  min-height: 56px;
  padding: 0 var(--e-4);
  border: 0;
  border-radius: var(--radio-pill);
  /* Azul como todas las acciones. Es el único azul grande de la página, y está
     abajo, flotando sobre blanco: no compite con el rojo de arriba. */
  background: var(--azul);
  color: var(--sobre-azul);
  font: inherit;
  font-size: var(--t-md);
  font-weight: var(--peso-medio);
  cursor: pointer;
}
.barra__boton:active { background: var(--azul-oscuro); }
.barra__boton:disabled { opacity: 1; background: var(--azul-oscuro); cursor: default; }

/* En el pedido esta barra ya no lleva a ningún lado: ENVÍA. Es la acción final
   de la página y se le nota en el peso. */
.barra__boton--enviar { font-weight: var(--peso-fuerte); }

.barra__cuenta {
  display: grid;
  place-items: center;
  min-width: 28px; height: 28px;
  border-radius: var(--radio-pill);
  /* Era `rgba(255,255,255,.22)` fijo: en oscuro el botón es claro con texto
     oscuro y la pastilla blanca desaparecía. `currentColor` la ata al texto,
     que es lo que siempre contrasta con el fondo del botón. */
  background: color-mix(in srgb, currentColor 20%, transparent);
  font-family: var(--fuente-numeros);
  font-size: var(--t-base);
  font-weight: var(--peso-fuerte);
}

.barra__texto { min-width: 0; }
.barra__monto {
  margin-left: auto;
  font-family: var(--fuente-numeros);
  font-size: var(--t-ml);
  font-weight: var(--peso-fuerte);
}

/* ── Vista del pedido ───────────────────────────────────────────────────── */

/* 🔑 `--t-lg` (22px) y no `--t-xl` (28) — Jefe, 20-ago. A 28px "Confirma tu
   pedido" no dejaba sitio para el código y el paréntesis caía a una línea
   propia, gastando un renglón entero en el dato que menos le sirve al cliente.
   A 22 entran los dos juntos en 375px. `nowrap` para que no se parta el título
   antes que el código. */
.titulo-vista {
  margin: var(--e-4) 0 var(--e-3);
  font-size: var(--t-lg);
  font-weight: var(--peso-fuerte);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.volver, .vaciar {
  display: block;
  margin: var(--e-4) 0 0;
  padding: var(--e-2) 0;
  border: 0;
  background: none;
  color: var(--texto-suave);
  font: inherit;
  font-size: var(--t-base);
  cursor: pointer;
  text-align: left;
}
.volver { margin-top: var(--e-4); }
.vaciar { margin: var(--e-4) auto var(--e-3); text-align: center; }

/* ── Los cuatro pasos ───────────────────────────────────────────────────────
   La vista del pedido dejó de ser una lista de bloques sueltos y pasó a ser
   una TARJETA POR PASO, numerada. Es lo que la vuelve corta de leer aunque sea
   larga de recorrer: el cliente ve cuatro cosas que hacer, no ocho secciones.
   ========================================================================== */

.paso {
  margin-top: var(--e-4);
  padding: var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
}
.paso:first-child { margin-top: var(--e-3); }

/* `wrap` y no `nowrap`: con el código del pedido puesto, el título y la acción
   no caben en 375px. Que baje la ACCIÓN a la línea siguiente es correcto; que
   se parta "Tu / pedido" en dos, no. */
.paso__cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  margin-bottom: var(--e-3);
}

.paso__titulo {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  margin: 0;
  white-space: nowrap;
  /* 22px y no 20 (Jefe, 20-ago): "un poquito más grande, solo un poco". Es el
     rótulo del paso en el que está parado el cliente. */
  font-size: var(--t-lg);
  font-weight: var(--peso-fuerte);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

/* El número es azul y no rojo: el rojo de esta página es superficie y precio.
   Un número de paso no es ni una cosa ni la otra — es la guía. */
.paso__numero {
  color: var(--azul);
  font-family: var(--fuente-numeros);
}
.paso__numero::after { content: '.'; }

/* La acción de la cabecera, alineada a la derecha del título. Azul porque es
   una acción, y a 16px porque a 13 nadie la ve. */
.paso__accion {
  flex: none;
  padding: var(--e-1) 0;
  border: 0;
  background: none;
  color: var(--azul);
  font: inherit;
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
  cursor: pointer;
}

/* ── La línea del pedido ────────────────────────────────────────────────────
   Foto a la izquierda ocupando las dos filas; arriba nombre y papelera, abajo
   el contador y el total. La nota cruza las tres columnas.
   ========================================================================== */

.linea {
  /* 🪤 La papelera NO puede ser una celda de la grilla. Compartiría columna con
     el total del renglón de abajo, y esa columna mide lo que mide `$22,50`: la
     papelera de 36px reservaba 90 y se los quitaba al NOMBRE, que es el dato
     principal. Fuera de la grilla, el nombre recupera 54px y deja de partirse
     en dos líneas. */
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas:
    "foto info    info"
    "foto control total";
  align-items: center;
  /* Compactada el 20-ago (Jefe: *"pudiera estar un poco más compacta la
     información de cada producto, para no desplazarlos tanto hacia abajo con
     espacio vago"*). El aire salió de los huecos ENTRE piezas, no del tamaño
     de la letra: el nombre, el precio y el total siguen igual de grandes. */
  column-gap: var(--e-2);
  row-gap: var(--e-1);
  padding: var(--e-2) var(--e-3);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
}

/* Más chica que la de la carta (108px): acá el producto ya está elegido, la
   foto solo tiene que hacer reconocible la línea. Y cada píxel que se lleve la
   foto se lo quita al NOMBRE, que a 20px es lo que tiene que caber. */
.linea__foto {
  grid-area: foto;
  position: relative;
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--marca-suave);
}
.linea__foto img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.linea__info { grid-area: info; min-width: 0; padding-right: 36px; }
.linea__nombre { margin: 0; font-size: var(--t-ml); font-weight: var(--peso-fuerte); line-height: 1.2; }
.linea__mods   { margin: 2px 0 0; font-size: var(--t-sm); color: var(--marca); }
.linea__unitario { margin: 2px 0 0; font-size: var(--t-base); color: var(--texto-suave); }

/* 36px y no 44: es la única excepción al mínimo táctil de la página, y es
   deliberada. Está pegada al nombre del producto y su acción es DESTRUCTIVA —
   un blanco grande ahí es un pedido borrado sin querer. La forma segura de
   bajar la cantidad sigue siendo el "−", que sí mide 40. */
.linea__quitar {
  position: absolute;
  top: var(--e-2); right: var(--e-2);
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  border: 0;
  border-radius: var(--radio-pill);
  background: none;
  font-size: var(--t-md);
  line-height: 1;
  cursor: pointer;
}
.linea__quitar:active { background: var(--marca-suave); }

.linea__total {
  grid-area: total;
  font-family: var(--fuente-numeros);
  font-weight: var(--peso-fuerte);
  font-size: var(--t-ml);
  min-width: 4.5ch;
  text-align: right;
}

.contador { grid-area: control; display: flex; align-items: center; gap: var(--e-2); }

/* 🔑 SE VEN, no se adivinan (Jefe, 20-ago: *"el contador − y + debería ser más
   visible"*). Eran un círculo de borde gris claro con el signo fino encima: a
   un brazo de distancia parecían decoración. Ahora el círculo va teñido de
   marca, con borde del mismo color y el signo en negrita — se lee como un
   botón sin gritar como uno rojo sólido, que competiría con el precio.
   40px y no 34: son los dos controles que más se tocan de toda la pantalla. */
.contador__boton {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1.5px solid var(--marca);
  border-radius: var(--radio-pill);
  background: var(--marca-suave);
  color: var(--marca);
  font: inherit;
  font-size: var(--t-lg);
  font-weight: var(--peso-fuerte);
  line-height: 1;
  cursor: pointer;
}
.contador__boton:active { background: var(--marca); color: var(--sobre-marca); }
.contador__valor {
  min-width: 2ch;
  text-align: center;
  font-family: var(--fuente-numeros);
  font-size: var(--t-ml);
  font-weight: var(--peso-fuerte);
}

/* El resumen vive DENTRO del paso 1: es su cierre, no una tarjeta aparte. */
.resumen {
  margin-top: var(--e-4);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
}
.resumen__fila {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--t-ml);
  font-weight: var(--peso-medio);
}
.resumen__fila strong { font-family: var(--fuente-numeros); font-size: var(--t-xl); color: var(--total); }
.resumen__bs { margin-top: var(--e-1); text-align: right; font-size: var(--t-base); color: var(--texto-suave); }
.resumen__nota { margin: var(--e-3) 0 0; font-size: var(--t-sm); color: var(--texto-suave); }

/* ── Upsell ─────────────────────────────────────────────────────────────── */

/* El upsell es un paso más, y su cabecera ya la pinta `.paso`. Lo suyo es la
   rejilla de tres tarjetas: con foto, el sugerido se lee como comida y no como
   un renglón de formulario. */
.upsell__nota  { margin: calc(var(--e-3) * -1) 0 var(--e-3); font-size: var(--t-base); color: var(--texto-suave); }
/* `auto-fit` y no `repeat(3,…)`: las sugerencias son 1, 2 o 3 según lo que ya
   lleve el cliente, y con tres columnas fijas dos tarjetas dejaban un hueco. */
.upsell__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--e-2);
}
.upsell__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-2);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  text-align: center;
}
.upsell__foto {
  position: relative;
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: var(--radio-sm);
  background: var(--marca-suave);
}
.upsell__foto img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.upsell__nombre {
  /* `auto` empuja el precio y el botón al fondo: con nombres de una y de dos
     líneas mezclados, los botones quedaban a alturas distintas. */
  margin-bottom: auto;
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
  line-height: 1.25;
}
.upsell__precio {
  font-family: var(--fuente-numeros);
  font-size: var(--t-md);
  color: var(--marca);
  font-weight: var(--peso-fuerte);
}
.upsell__item .boton--chico { width: 100%; font-size: var(--t-base); }

/* ── La hoja flotante del producto ──────────────────────────────────────── */
/* Sube desde abajo y deja ver la carta detrás. Que se siga viendo el fondo NO
   es decoración: es lo que le dice al cliente que no cambió de sitio y que
   puede volver. La pantalla completa no daba esa pista, y por eso la gente
   buscaba el botón atrás del teléfono. */
.hoja { position: fixed; inset: 0; z-index: 50; }

.hoja__fondo {
  position: absolute; inset: 0;
  background: rgba(8, 20, 30, 0.55);
  animation: aparecer .18s ease-out;
}

/* 🔑 FLOTA DE VERDAD (Jefe, 15-ago): queda fondo visible también ABAJO, no solo
   arriba. Antes se pegaba al borde inferior y con las esquinas rectas abajo
   parecía media pantalla, no una tarjeta encima de la carta. Ese aire de abajo
   es lo que dice "esto está montado sobre algo que sigue ahí". */
.hoja__panel {
  position: absolute;
  /* Abajo respira más que a los lados a propósito: es el borde por donde el
     Jefe quería ver que la hoja está montada sobre la carta, no encajada. */
  left: var(--e-3); right: var(--e-3); bottom: var(--e-5);
  max-width: calc(var(--ancho-max) - var(--e-3) * 2);
  margin: 0 auto;
  max-height: 76vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--superficie);
  border-radius: var(--radio-lg);
  padding: var(--e-3) var(--e-4) var(--e-4);
  /* El respiro del gesto del teléfono se suma ABAJO del panel, no adentro:
     si va en el padding, el contenido queda flotando sobre un hueco. */
  margin-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 40px rgba(8, 20, 30, .28);
  animation: subir .22s cubic-bezier(.2, .8, .3, 1);
}

@keyframes aparecer { from { opacity: 0 } to { opacity: 1 } }
@keyframes subir { from { transform: translateY(100%) } to { transform: translateY(0) } }

/* Quien pidió menos movimiento no lo recibe. */
@media (prefers-reduced-motion: reduce) {
  .hoja__fondo, .hoja__panel { animation: none; }
}

/* ROJO y sólida (Jefe, 15-ago). Era un círculo gris claro sobre fondo blanco:
   se perdía justo encima de la foto del producto, que es donde cae el ojo. Es
   la salida principal de la hoja — tiene que verse a la primera. */
.hoja__cerrar {
  position: sticky; top: 0; float: right;
  z-index: 2;
  width: var(--alto-toque); height: var(--alto-toque);
  border: 2px solid var(--superficie);
  border-radius: 50%;
  background: var(--marca); color: var(--sobre-marca);
  font: inherit; font-size: var(--t-md); font-weight: var(--peso-fuerte);
  line-height: 1;
  box-shadow: var(--sombra-sm);
  cursor: pointer;
}
.hoja__cerrar:active { background: var(--marca-oscura); }

/* Con la hoja abierta el fondo se congela en su sitio. `position: fixed` es lo
   único que lo impide de verdad en móvil; el `top` negativo lo pone `app.js`
   para que no salte al principio. */
body.con-hoja {
  position: fixed;
  left: 0; right: 0;
  overflow: hidden;
}

/* ── Precios de una tarjeta agrupada (carne / pollo) ────────────────────── */
.precios { display: grid; gap: 2px; width: 100%; }

.precios__fila {
  display: flex; align-items: center; gap: var(--e-2);
  font-family: var(--fuente-numeros);
}
.precios__etiqueta {
  font-family: var(--fuente);
  font-size: var(--t-sm);
  color: var(--texto-suave);
  min-width: 3.6em;
}
/* El botón se va al extremo: el precio y su botón quedan en la misma línea, y
   los dos botones alineados uno debajo del otro. */
.precios__fila .boton { margin-left: auto; flex: 0 0 auto; }

/* En la tarjeta las filas respiran: son zonas de toque, no una tabla. */
.precios--tarjeta { gap: var(--e-2); }
.precios__monto {
  font-size: var(--t-md);
  font-weight: var(--peso-fuerte);
  color: var(--marca);
}
.precios__fila--agotada .precios__monto {
  color: var(--agotado);
  font-size: var(--t-sm);
  font-weight: var(--peso-normal);
}

.precios--tarjeta { margin-top: var(--e-1); }

/* ── Enviar y código ────────────────────────────────────────────────────── */

/* El cierre de la página 2 — "Ver total y confirmar". Es la única acción de esa
   pantalla, así que ocupa el ancho entero. */
.boton--enviar {
  display: block;
  width: 100%;
  margin-top: var(--e-5);
  min-height: 56px;
  font-size: var(--t-md);
  font-weight: var(--peso-fuerte);
}

.alerta {
  margin: var(--e-3) 0;
  padding: var(--e-3);
  background: var(--aviso-suave);
  color: var(--aviso);
  border-radius: var(--radio);
  font-size: var(--t-sm);
}

/* `.codigo`, `.codigo__rotulo`, `.codigo__valor` y `.listo__texto` se
   eliminaron el 15-ago. El código dejó de tener cuadro propio: ahora es un
   paréntesis junto al título de cada vista (`.titulo-vista__codigo`). */

/* El código junto al título. Se lee, pero no compite: mismo tamaño de línea,
   peso normal y color atenuado. Es un número de seguimiento para el negocio,
   no un dato que el cliente tenga que memorizar. */
.titulo-vista__codigo {
  font-size: var(--t-md);
  font-weight: var(--peso-normal);
  color: var(--texto-tenue);
  letter-spacing: 0.06em;
}

/* 🔑 ESTE es el bloque que el cliente vino a leer: qué está llevando. Estaba
   en 13px mientras el código iba a 32px — el dato que menos le sirve era ocho
   veces más grande que el que sí. Se invirtió. */
/* Sube a 18px y BAJA el interlineado (Jefe, 20-ago): "me gusta la sobriedad de
   ese resumen, pero pudiera tener un tamaño de letra solo un poco más legible"
   + "hay espacios vacíos que pueden reducirse". Las dos cosas a la vez: letra
   más grande y menos aire entre renglones, que es lo que deja el bloque igual
   de compacto leyéndose mejor. */
.listo__resumen {
  margin-top: var(--e-3);
  padding: var(--e-4);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio-lg);
  font-size: var(--t-md);
  line-height: 1.35;
}
.listo__resumen > div { padding: 0; }

/* El nombre a la izquierda, su monto a la derecha — la forma en que se lee una
   cuenta. `baseline` y no `center`: los dos textos tienen que sentarse sobre la
   misma línea aunque el nombre ocupe dos renglones. */
.listo__linea {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  padding: var(--e-1) 0;
}
.listo__linea-monto {
  flex: none;
  font-family: var(--fuente-numeros);
  font-weight: var(--peso-medio);
}

/* `.listo__subtotal` se fue: la pantalla de confirmar ya no muestra un subtotal
   suelto sino el desglose completo (subtotal, delivery, total y su equivalente
   en bolívares) con el mismo `.resumen` que la página del pedido. Es la única
   pantalla donde el número de abajo es el definitivo. */
.listo__resumen .resumen { margin-top: var(--e-3); }

/* Dos líneas: la acción y lo que va a pasar al tocarla. `line-height` vuelve a
   lo normal porque el de 52px era para centrar una sola línea. */
.boton--whatsapp {
  display: block;
  padding: var(--e-3) var(--e-4);
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  /* Más alto que los secundarios (48px), no igual: de los tres botones del
     final este es el único que cierra el pedido. Si los tres miden lo mismo,
     los tres pesan lo mismo. */
  min-height: 56px;
  font-size: var(--t-md);
}

/* El `margin-top` vivía acá y separaba el botón del resumen. Ahora la
   separación la pone `.acciones-listo` para los tres juntos. */
.confirmar { margin: 0; }

.confirmar__accion {
  display: block;
  font-size: var(--t-md);
  font-weight: var(--peso-fuerte);
  letter-spacing: 0.02em;
}

/* El aviso de que el mensaje NO se manda solo. Chico, pero legible: es lo que
   evita que alguien confirme, cierre y quede esperando un pedido que nadie
   recibió. Por eso NO se atenúa con opacidad — heredaría el fondo y quedaría
   ilegible, la trampa que ya se pagó con las tarjetas agotadas. */
.confirmar__aviso {
  display: block;
  margin-top: var(--e-1);
  font-size: var(--t-xs);
  font-weight: var(--peso-normal);
  /* Reparte las dos líneas parejo: sin esto "ENVIAR" —la palabra que dice qué
     hacer— caía sola en el último renglón. */
  text-wrap: balance;
}

.listo__nota { margin: var(--e-3) 0 0; font-size: var(--t-xs); color: var(--texto-tenue); text-align: center; }

/* ── Pie ────────────────────────────────────────────────────────────────── */
/* No es letra pequeña de contrato: ahí va la TASA con la que se calculan los
   bolívares, que es un número que el cliente sí busca. */
.pie {
  padding: var(--e-5) 0 var(--e-6);
  color: var(--texto-tenue);
  font-size: var(--t-sm);
  text-align: center;
  line-height: 1.6;
}

/* ==========================================================================
   Detalle del producto — pantalla completa (13-ago)
   ========================================================================== */

/* La tarjeta entera abre el detalle. El foco tiene que verse: en el teléfono
   no importa, pero quien navega con teclado se pierde sin esto. */
.producto--tocable { cursor: pointer; }
.producto--tocable:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
}

/* 16/9 y no 4/3: con la hoja flotante la foto era 275px de los 617 del panel —
   casi la mitad— y el panel vivía pegado a su tope de altura, o sea que
   arreglar los ingredientes no encogía nada porque el desborde seguía. Bajar
   la foto es lo que de verdad devuelve altura, y a este tamaño la hamburguesa
   se sigue viendo entera. */
.detalle__foto {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin-top: var(--e-2);
  background: var(--marca-suave);
  border-radius: var(--radio);
}

/* Absoluta para que TAPE la inicial de respaldo en vez de convivir con ella:
   en grid las dos quedaban superpuestas y la letra flotaba sobre la comida.
   Si la imagen falla, `app.js` la quita y la inicial vuelve a verse sola. */
.detalle__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La inicial de respaldo es enorme acá: el hueco mide 4/3 de la pantalla y una
   letra de tarjeta se vería perdida en el medio. */
.detalle__foto .producto__inicial { font-size: var(--t-xl); }

.detalle__nombre {
  margin: var(--e-3) 0 var(--e-2);
  font-size: var(--t-lg);
  font-weight: var(--peso-fuerte);
  line-height: 1.2;
}

.detalle__precio {
  display: flex;
  align-items: baseline;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
}

.detalle__texto {
  margin: var(--e-3) 0 0;
  color: var(--texto-suave);
  font-size: var(--t-base);
  line-height: 1.5;
}

.detalle__subtitulo {
  margin: var(--e-3) 0 var(--e-2);
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}

/* Los ingredientes se LEEN, no se tocan: quitar cosas se pide en la nota.
   🔑 UNO AL LADO DEL OTRO, no uno debajo del otro (Jefe, 15-ago). Seis
   ingredientes en lista vertical son seis renglones —la mitad de la hoja— y
   son palabras sueltas, no frases: no necesitan una línea cada una. En fila
   ocupan dos renglones y es lo que más altura devuelve de todo el panel. */
.detalle__ingredientes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-1) var(--e-2);
  margin: 0;
  padding: 0;
}

.detalle__ingredientes li {
  padding: 2px var(--e-2);
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio-sm);
  color: var(--texto-suave);
  font-size: var(--t-sm);
  line-height: 1.5;
}

.boton--ancho { width: 100%; margin-top: var(--e-5); }

/* Salida abajo además de arriba: tras leer la descripción el pulgar está en el
   pie de la pantalla, no en el encabezado. */
.volver--pie { text-align: center; margin: var(--e-3) auto var(--e-5); }

/* ==========================================================================
   Notas para la cocina — por línea y del pedido completo
   ========================================================================== */

/* Ocupa el ancho entero de la línea: `.linea` es una grilla de tres columnas
   (info, contador, total) y la nota va debajo de las tres. */
/* Ocupa el ancho entero de la línea: `.linea` es una grilla de tres columnas
   y la nota va debajo de las tres. */
.nota { grid-column: 1 / -1; }

/* La banda: icono, qué es, un ejemplo, y la acción a la derecha. Reemplaza al
   enlace de 13px "📝 Agregar una nota", que era lo más chico de la pantalla, y
   al párrafo de ayuda que vivía arriba del pedido explicando lo mismo. */
.nota__banda {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  /* El alto lo pone `--alto-toque` (44px), no el relleno: la banda tiene DOS
     líneas de texto y con 8px arriba y abajo se iba a 63px, que era la pieza
     más alta de cada producto. Con 4 y el interlineado ajustado abajo baja a
     ~50 sin perder el blanco táctil. */
  min-height: var(--alto-toque);
  padding: var(--e-1) var(--e-3);
  border: 1px dashed var(--borde-fuerte);
  border-radius: var(--radio);
  background: var(--fondo);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.nota__banda:active { background: var(--marca-suave); }

.nota__icono { flex: none; font-size: var(--t-ml); line-height: 1; }
.nota__texto { flex: 1; min-width: 0; display: grid; gap: 0; line-height: 1.3; }
/* Las dos líneas se recortan con puntos suspensivos en vez de partirse: una
   banda que crece a tres renglones deja de ser una banda y la línea del pedido
   se vuelve el doble de alta. */
.nota__rotulo, .nota__detalle {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.nota__rotulo  { font-size: var(--t-base); font-weight: var(--peso-medio); }
.nota__detalle {
  font-size: var(--t-sm);
  color: var(--texto-suave);
}
.nota__accion {
  flex: none;
  color: var(--marca);
  font-size: var(--t-base);
  font-weight: var(--peso-medio);
}

/* Con la nota escrita la banda deja de ser una invitación y pasa a ser un dato
   del pedido: borde sólido y el texto de la nota en negro, no atenuado. */
.nota--escrita .nota__banda { border-style: solid; border-color: var(--marca); background: var(--marca-suave); }
.nota--escrita .nota__detalle { color: var(--texto); }

.nota .nota-cocina { margin-top: var(--e-2); }

/* La banda de nota pegada a su línea: el hueco de 8px la hacía parecer un
   bloque aparte y estiraba cada producto sin motivo. */
.linea .nota { margin-top: 2px; }

/* ==========================================================================
   Entrega: delivery o retiro, y la ubicación (13-ago)
   ========================================================================== */

/* ── El cierre de la página 1 ───────────────────────────────────────────────
   Volver al menú, y los dos caminos de entrega. Los dos botones SON el
   "continuar": no hay un tercer botón que pregunte otra vez.
   ========================================================================== */

.salida { margin-top: var(--e-5); }

.salida__titulo {
  margin: var(--e-5) 0 var(--e-3);
  font-size: var(--t-ml);
  font-weight: var(--peso-fuerte);
  text-align: center;
}

.entrega__opciones {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--e-2);
}

/* 🔑 NO SON CHIPS: son LA decisión de esta pantalla, y se ven como dos
   TARJETAS — ilustración, título y una línea que dice qué gana el cliente por
   ese camino (diseño del Jefe, 25-ago).

   Rojo sólido los DOS: acá no se está marcando una selección, se está
   eligiendo el camino. Un botón elegido y otro apagado tendría sentido si
   hubiera un "continuar" después — y no lo hay: estos dos SON el continuar.

   El relieve es un `box-shadow` sólido abajo, no un degradado de sombra: da el
   canto inferior más oscuro de la referencia y al presionar la tarjeta BAJA
   —se acorta el canto y se empuja con `translateY`—, que es como se siente un
   botón físico. */
.chip--entrega {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--e-2);
  min-height: 150px;
  padding: var(--e-4) var(--e-2) var(--e-3);
  border: 0;
  border-radius: var(--radio-lg);
  background: linear-gradient(180deg, var(--marca) 0%, var(--marca-oscura) 100%);
  box-shadow: 0 4px 0 var(--marca-oscura), var(--sombra);
  color: var(--sobre-marca);
  line-height: 1.15;
  text-align: center;
  transition: transform .08s, box-shadow .08s;
}
.chip--entrega:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--marca-oscura);
}

/* La ilustración manda el alto de la tarjeta. Si el arte no está, el emoji
   ocupa el mismo sitio y nada se mueve. */
.chip__icono {
  display: grid;
  place-items: center;
  height: 62px;
  font-size: 34px;
  line-height: 1;
}
.chip__icono img { max-height: 62px; max-width: 100%; object-fit: contain; }

.chip__titulo { font-size: var(--t-md); font-weight: var(--peso-fuerte); }

/* Atenuada, pero NO por debajo del piso de lectura: es una frase que vende y
   se lee de un vistazo, no letra pequeña de contrato. */
.chip__apoyo {
  font-size: var(--t-sm);
  font-weight: var(--peso-normal);
  color: color-mix(in srgb, var(--sobre-marca) 82%, transparent);
}

/* 🔑 El momento del permiso tiene cara propia, y es AZUL. Todo lo demás de la
   carta es rojo y comida: cuando este bloque cambia de color, deja de leerse
   como "el restaurante vendiéndote" y pasa a leerse como "el sistema
   pidiéndote un dato". Es el mismo recurso que usan Uber y Rappi con los
   permisos, y responde la objeción exacta del Jefe: cuesta darle la ubicación
   a una página que no se ve seria. */
.entrega__ubicacion {
  margin-top: var(--e-3);
  padding: var(--e-4);
  /* 🔑 AZUL, NO ROJO (Jefe, 15-ago): "el cuadro rojo crea alarma, da miedo".
     Y tiene razón — en una interfaz el rojo es el color del error y de lo
     destructivo, así que un bloque rojo justo donde se pide un permiso del
     navegador se lee como una advertencia, no como una invitación. Es el único
     lugar de la carta donde el rojo trabajaba en contra. */
  background: var(--azul);
  border-radius: var(--radio);
  color: var(--sobre-azul);
}

/* Dentro del bloque azul el texto de apoyo se invierte Y sube de tamaño: en
   13px atenuado sobre color no lo lee nadie, y esta es justo la letra que
   explica que compartir la ubicación es opcional. */
.entrega__ubicacion .entrega__aviso,
.entrega__ubicacion .entrega__ok,
.entrega__ubicacion .entrega__quitar {
  color: var(--sobre-azul);
  font-size: var(--t-base);
}

/* 🔑 LA SEGUNDA CARA DEL BLOQUE. Sólido mientras PIDE el permiso; suave una vez
   RESUELTO. Ya no pide nada: muestra la zona y su precio, que es un dato del
   pedido, y a esa altura de la pantalla un rectángulo azul saturado compite con
   el total. El azul se queda —sigue siendo "el sistema", no "el restaurante"—
   pero baja la voz. */
.entrega__ubicacion--resuelta {
  padding: var(--e-3);
  background: var(--azul-suave);
  color: var(--texto);
}
.entrega__ubicacion--resuelta .entrega__ok {
  color: var(--azul);
  font-size: var(--t-md);
  font-weight: var(--peso-medio);
}
.entrega__ubicacion--resuelta .entrega__quitar {
  color: var(--azul);
  font-size: var(--t-base);
}

/* El botón dentro del bloque azul NO puede ser azul: se disolvería en su
   propio fondo. Blanco con el texto azul — el mismo recurso que el chip activo
   sobre la barra roja. */
.entrega__ubicacion .boton {
  background: var(--superficie);
  color: var(--azul);
  /* Es LA acción del bloque, no una nota al pie: mismo tamaño que el resto de
     los botones de decisión. Estaba heredando los 13px de `--chico`. */
  min-height: var(--alto-toque);
  font-size: var(--t-base);
}
.entrega__ubicacion .boton:active { background: var(--azul-suave); }

/* El texto que dice que compartir la ubicación es OPCIONAL. No se atenúa con
   opacidad: es la salida para quien no quiera dar el permiso, y una salida que
   no se lee no es una salida. */
.entrega__aviso {
  margin: var(--e-2) 0 0;
  font-size: var(--t-sm);
  color: var(--texto-suave);
  line-height: 1.5;
}

.entrega__ok {
  margin: 0;
  font-size: var(--t-base);
  color: var(--ok);
}

.entrega__quitar {
  margin-top: var(--e-1);
  padding: var(--e-1) 0;
  border: 0;
  background: none;
  color: var(--texto-suave);
  font: inherit;
  font-size: var(--t-sm);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.entrega__error {
  margin: var(--e-2) 0 0;
  font-size: var(--t-sm);
  color: var(--aviso);
}

/* Explica para qué sirve la libretica. Lo que el cliente no escriba acá lo
   escribe por WhatsApp, y ahí alguien tiene que leerlo y copiarlo a mano.
   Estaba en 13px con `--texto-suave` sobre fondo teñido: tres formas de
   atenuar el mismo texto a la vez, y era ilegible. Si vale la pena decirlo,
   vale la pena leerlo. */
.ayuda-notas {
  margin: 0 0 var(--e-4);
  padding: var(--e-3) var(--e-4);
  background: var(--marca-suave);
  border-left: 3px solid var(--marca);
  border-radius: var(--radio);
  font-size: var(--t-base);
  color: var(--texto);
  line-height: 1.5;
}

.ayuda-notas--listo { margin-top: var(--e-3); }

/* ── Las tres acciones de la vista final ────────────────────────────────── */
/* Confirmar / Modificar / Volver, apilados y los tres con forma de botón.
   Modificar y Volver eran texto subrayado y no se leían como tocables: quien
   quería cambiar algo se devolvía con el botón del navegador o se iba. */
.acciones-listo {
  display: grid;
  gap: var(--e-3);
  margin-top: var(--e-5);
}

.acciones-listo .boton { width: 100%; }

/* Secundario: la misma forma y la misma altura que el principal, pero hueco.
   Se ve tocable sin competir con confirmar. */
.boton--secundario {
  background: transparent;
  color: var(--azul);
  border: 2px solid var(--azul);
  min-height: 48px;
}
.boton--secundario:active { background: var(--azul-suave); }

/* El aviso de "solo toca ENVIAR" ahora vive DEBAJO del botón, no dentro. */
.confirmar__aviso {
  margin: var(--e-2) 0 0;
  font-size: var(--t-xs);
  color: var(--texto-suave);
  text-align: center;
  text-wrap: balance;
}

/* `.en-curso` (el cuadro verde "Estás modificando tu pedido XXXX") se eliminó
   el 15-ago. Decía con una frase entera lo que ahora dice el paréntesis del
   título: si el código está al lado de "Tu pedido", ya se sabe que es ese. */

/* Las líneas de subtotal y delivery, cuando el total ya está cerrado. Más
   chicas que el total: lo que el cliente mira es cuánto paga. */
.resumen__fila--chica {
  font-size: var(--t-base);
  color: var(--texto-suave);
  margin-bottom: var(--e-2);
}