/* Elite's · la carta del cliente (Fase 05).
   Es el sistema de diseño aprobado de la maqueta (maqueta/maqueta.css, Fase 04 v3) pasado a la app:
   mismos tokens, piezas y pantallas del cliente. Se activa solo en #/carta (app.js apaga estilos.css
   y prende este), así las clases de la maqueta no chocan con las del equipo.
   Container queries sobre #v-carta (el «app» de la maqueta). Paleta y tipos: Biblia de Marca v3.1.
   Desde la Fase 07 también las pantallas del equipo de la maqueta (Pedidos y Cocina, en #v-operacion,
   #/pedidos y #/cocina): la sección «PANTALLAS DEL EQUIPO» al final, copiada de maqueta.css. */

@font-face { font-family: 'Rubik'; src: url('./fuentes/rubik.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Inter'; src: url('./fuentes/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  /* Marca (fijos) */
  --rojo: #E52612; --carbon: #1E1F1F; --hueso: #F3EBDD; --kraft: #C29A6B; --salsa: #9E1409;
  /* Tema claro */
  --fondo: #F3EBDD; --texto: #1E1F1F; --texto-suave: #4a4b4b; --linea: #1E1F1F;
  --tarjeta: #F3EBDD; --campo: #fbf6ee; --apagado: #d9cfbf; --suave: #e9dfcd;
  --peligro: #9E1409; --velo: rgba(30, 31, 31, .62);
  --escenario: #e2d7c4; --marco: #1E1F1F;
  --fuerte: #1E1F1F; --sobre-fuerte: #F3EBDD; --barra-linea: #1E1F1F;
  --titulares: 'Rubik', 'Arial Black', system-ui, sans-serif;
  --cuerpo: 'Inter', Arial, system-ui, sans-serif;
  --radio: 18px; --t: 2.5px;
  /* Escala de espacios: dentro de un grupo, dentro de una tarjeta, entre tarjetas, entre secciones grandes */
  --e1: .5rem; --e2: .9rem; --e3: 1.5rem; --e4: 2.4rem;
  /* Archivos del kit (sin modificar) */
  --s-hueso: url('./img/simbolo-hueso.svg'); --s-carbon: url('./img/simbolo-carbon.svg'); --s-rojo: url('./img/simbolo-rojo.svg');
  --l-hueso: url('./img/logo-vertical-hueso.svg'); --l-carbon: url('./img/logo-vertical-carbon.svg');
  --f-hueso: url('./img/firma-hueso.svg'); --f-carbon: url('./img/firma-carbon.svg');
  --i-hamb-c: url('./img/icono-hamburguesa-carbon.svg'); --i-hamb-h: url('./img/icono-hamburguesa-hueso.svg');
  --i-papas-c: url('./img/icono-papas-carbon.svg'); --i-papas-h: url('./img/icono-papas-hueso.svg');
  --i-perro-c: url('./img/icono-perro-carbon.svg'); --i-perro-h: url('./img/icono-perro-hueso.svg');
  --i-vaso-c: url('./img/icono-vaso-carbon.svg'); --i-vaso-h: url('./img/icono-vaso-hueso.svg');
  /* Los que cambian con el tema */
  --s-tema: var(--s-carbon); --f-tema: var(--f-carbon); --l-tema: var(--l-carbon);
  --i-hamb: var(--i-hamb-c); --i-papas: var(--i-papas-c); --i-perro: var(--i-perro-c); --i-vaso: var(--i-vaso-c);
  --i-hamb-inv: var(--i-hamb-h); --i-papas-inv: var(--i-papas-h); --i-perro-inv: var(--i-perro-h); --i-vaso-inv: var(--i-vaso-h);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #1E1F1F; --texto: #F3EBDD; --texto-suave: #cfc6b8; --linea: #F3EBDD;
    --tarjeta: #262727; --campo: #2e2f2f; --apagado: #4a4b4b; --suave: #2b2c2c;
    --peligro: #ff8a7a; --velo: rgba(0, 0, 0, .7);
    --escenario: #121313; --marco: #3a3b3b;
    --fuerte: #F3EBDD; --sobre-fuerte: #1E1F1F; --barra-linea: #4a4b4b;
    --s-tema: var(--s-hueso); --f-tema: var(--f-hueso); --l-tema: var(--l-hueso);
    --i-hamb: var(--i-hamb-h); --i-papas: var(--i-papas-h); --i-perro: var(--i-perro-h); --i-vaso: var(--i-vaso-h);
    --i-hamb-inv: var(--i-hamb-c); --i-papas-inv: var(--i-papas-c); --i-perro-inv: var(--i-perro-c); --i-vaso-inv: var(--i-vaso-c);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #1E1F1F; --texto: #F3EBDD; --texto-suave: #cfc6b8; --linea: #F3EBDD;
  --tarjeta: #262727; --campo: #2e2f2f; --apagado: #4a4b4b; --suave: #2b2c2c;
  --peligro: #ff8a7a; --velo: rgba(0, 0, 0, .7);
  --escenario: #121313; --marco: #3a3b3b;
  --fuerte: #F3EBDD; --sobre-fuerte: #1E1F1F; --barra-linea: #4a4b4b;
  --s-tema: var(--s-hueso); --f-tema: var(--f-hueso); --l-tema: var(--l-hueso);
  --i-hamb: var(--i-hamb-h); --i-papas: var(--i-papas-h); --i-perro: var(--i-perro-h); --i-vaso: var(--i-vaso-h);
  --i-hamb-inv: var(--i-hamb-c); --i-papas-inv: var(--i-papas-c); --i-perro-inv: var(--i-perro-c); --i-vaso-inv: var(--i-vaso-c);
  color-scheme: dark;
}
:root[data-letra="grande"] { font-size: 125%; }

/* Corrección 10.1 · Íconos propios de Elite's (regla 33: nunca genéricos). Mismo grosor de trazo que el kit
   (≈ 3,5 % del alto): nunca más chicos de 2rem (32 px). Se pintan como máscara: toman el color del texto. */
.ic { display: inline-block; width: 2rem; height: 2rem; flex: 0 0 auto; vertical-align: -.18em; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--fondo); color: var(--texto);
  font-family: var(--cuerpo); font-size: 1rem; line-height: 1.45;
  overflow-wrap: break-word; -webkit-tap-highlight-color: transparent;
}
/* En la carta solo se ve la carta (lo del equipo queda en la página, apagado). */
body > :not(#v-carta):not(#v-operacion):not(#impresion):not(script):not(.hoja-fondo):not(#aviso-corto) { display: none !important; }
#v-carta, #v-operacion { container: app / inline-size; min-height: 100vh; min-height: 100dvh; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }


/* ===================== PIEZAS DE LA APP ===================== */
h1, h2, h3 { font-family: var(--titulares); text-transform: uppercase; letter-spacing: .01em; line-height: 1.05; margin: 0; text-wrap: balance; }
h1 { font-weight: 900; font-size: min(2rem, 9cqi); }
h2 { font-weight: 800; font-size: 1.12rem; }
h3 { font-weight: 800; font-size: .95rem; }
p { margin: 0; }
.suave { color: var(--texto-suave); }
.chico { font-size: .85rem; }
.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.nowrap { white-space: nowrap; }

/* Barra superior de la app (carbón en los dos temas) */
.barra {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: .6rem; min-width: 0;
  background: var(--carbon); color: var(--hueso); border-bottom: 2px solid var(--barra-linea);
  padding-block: .55rem; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px));
}
.barra-simbolo { width: 44px; height: 44px; margin-left: -5px; flex: 0 0 auto; background: var(--s-hueso) center / 34px auto no-repeat; border: 0; padding: 0; }   /* 10.3: la barra como antes de la 10.2 (Jean) */
.barra-titulo { flex: 1 1 auto; min-width: 0; font-family: var(--titulares); font-weight: 800; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; line-height: 1.15; overflow-wrap: normal; }
.barra-volver { flex: 0 0 auto; min-height: 44px; min-width: 44px; padding: .3rem .8rem; border-radius: 999px; border: 2px solid var(--hueso); background: transparent; color: var(--hueso); font-weight: 800; font-size: .9rem; }
.pastilla {
  flex: 0 1 auto; min-width: 0; display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem .75rem; border-radius: 999px; font-weight: 700; font-size: .8rem; line-height: 1.2;
  background: var(--hueso); color: var(--carbon); border: 2px solid var(--hueso);
}
.pastilla::before { content: ''; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.pastilla[data-tono="kraft"] { background: var(--kraft); border-color: var(--kraft); }
.pastilla[data-tono="rojo"] { background: var(--rojo); border-color: var(--rojo); color: var(--hueso); }
.pastilla[data-tono="borde"] { background: transparent; color: var(--hueso); }
.pastilla.sin-punto::before { display: none; }
.carrito-boton {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; min-height: 44px; padding: .25rem .4rem .25rem .8rem;
  border-radius: 999px; border: 2px solid var(--hueso); background: transparent; color: var(--hueso); font-weight: 800; font-size: .85rem;
}
.carrito-boton .cuenta { background: var(--rojo); color: var(--hueso); border-radius: 999px; min-width: 1.7rem; height: 1.7rem; display: inline-grid; place-items: center; font-size: .8rem; padding: 0 .35rem; }
@container app (max-width: 23rem) { .barra .solo-ancho { display: none; } }
@container app (max-width: 20rem) { .barra-titulo { display: none; } }

/* Contenido */
.contenido {
  width: 100%; max-width: 76rem; margin: 0 auto; display: grid; gap: var(--e3); grid-template-columns: minmax(0, 1fr); align-content: start;
  padding-block: 1.25rem 2rem; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px));
}
.contenido.ancho { max-width: none; }
/* Rejillas de cada pantalla: con su espacio en TODOS los anchos. (Error de la versión 1: en el
   teléfono no eran rejillas y las tarjetas quedaban pegadas una con otra.) */
.inicio-col { container: col / inline-size; }
/* Foto y banda lado a lado solo si la columna es ancha; si no, una encima de la otra. */
@container col (min-width: 44rem) {
  .portada { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); }
  .portada .foto { aspect-ratio: auto; min-height: 100%; }
  .portada-banda { align-content: center; padding: 1.5rem; }
}
.inicio-rejilla, .inicio-col, .menu-rejilla, .menu-secciones, .prod-rejilla, .prod-config, .pedido-rejilla, .pedido-col, .pedido-lateral,
.seg-rejilla, .seg-col, .antes-rejilla, .pagar-rejilla, .pagar-col, .caja-rejilla, .caja-col {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); align-items: start; align-content: start; min-width: 0;
}
.menu-secciones { gap: var(--e4); }
.seccion { display: grid; gap: var(--e2); min-width: 0; }
.seccion-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; flex-wrap: wrap; min-width: 0; }
.seccion-cabeza > * { min-width: 0; }

.tarjeta { background: var(--tarjeta); border: var(--t) solid var(--linea); border-radius: var(--radio); padding: 1.15rem; display: grid; gap: var(--e2); min-width: 0; align-content: start; }
.tarjeta.oscura { background: var(--carbon); color: var(--hueso); border-color: var(--carbon); }
:root[data-theme="dark"] .tarjeta.oscura { border-color: var(--hueso); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .tarjeta.oscura { border-color: var(--hueso); } }
.filete { height: var(--t); background: var(--linea); border: 0; margin: 0; }

/* Botones (un solo botón rojo por pantalla) */
.boton {
  min-height: 52px; width: 100%; padding: .65rem min(1.3rem, 5cqi); border-radius: 999px; border: var(--t) solid transparent;
  font-family: var(--titulares); font-weight: 800; font-size: min(1.08rem, 5.2cqi); letter-spacing: .03em; text-transform: uppercase; line-height: 1.1;
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem; text-align: center;
}
.boton.principal { background: var(--rojo); color: var(--hueso); }
.boton.secundario { background: transparent; color: var(--texto); border-color: var(--linea); }
.boton.carbon { background: var(--fuerte); color: var(--sobre-fuerte); border-color: var(--fuerte); }
.boton.hueso { background: var(--hueso); color: var(--carbon); border-color: var(--hueso); }
.boton.chico { min-height: 44px; width: auto; padding: .35rem min(1rem, 4cqi); font-size: min(.88rem, 4.6cqi); }
.boton .monto { font-family: var(--cuerpo); font-weight: 800; letter-spacing: 0; text-transform: none; white-space: nowrap; }
.boton:disabled { opacity: .5; cursor: default; }
a.boton { text-decoration: none; }
.botones { display: flex; flex-wrap: wrap; gap: .5rem; min-width: 0; }
.botones > .boton { flex: 1 1 auto; width: auto; }
.enlace { background: none; border: 0; padding: .35rem 0; min-height: 44px; color: var(--texto); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* Opciones en píldora */
.opciones { display: flex; flex-wrap: wrap; gap: .45rem; min-width: 0; }
.opcion {
  flex: 0 1 auto; min-height: 44px; padding: .45rem .95rem; min-width: 0;
  border-radius: 999px; border: 2px solid var(--linea); background: transparent; color: var(--texto); font-weight: 700; font-size: .92rem; line-height: 1.2;
}
.opcion[aria-pressed="true"], .opcion[aria-checked="true"] { background: var(--texto); color: var(--fondo); }
.opcion small { font-weight: 600; opacity: .85; }
.segmento { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0; border: 2px solid var(--linea); border-radius: 999px; padding: 3px; min-width: 0; }
.segmento button { min-height: 40px; border-radius: 999px; border: 0; background: transparent; color: var(--texto); font-weight: 700; font-size: .9rem; padding: .3rem .5rem; min-width: 0; line-height: 1.15; }
.segmento button[aria-pressed="true"] { background: var(--texto); color: var(--fondo); }

/* Etiquetas */
.etiqueta { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .12rem .55rem; font-family: var(--titulares); font-weight: 800; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; border: 2px solid var(--linea); line-height: 1.3; white-space: nowrap; }
.etiqueta.llena { background: var(--texto); color: var(--fondo); }
.etiqueta.roja { background: var(--rojo); color: var(--hueso); border-color: var(--rojo); }
.etiqueta.kraft { background: var(--kraft); color: var(--carbon); border-color: var(--kraft); }
.etiqueta.salsa { background: var(--salsa); color: var(--hueso); border-color: var(--salsa); }
.etiqueta.borde-rojo { border-color: var(--rojo); color: var(--texto); }
.etiqueta.larga { white-space: normal; text-align: left; border-radius: 12px; }

/* Foto real (marcador kraft hasta la sesión de fotos) */
.foto { position: relative; background: var(--kraft); color: var(--carbon); border-radius: 14px; overflow: hidden; display: grid; place-items: center; aspect-ratio: 1; max-width: 100%; min-width: 0; }
.foto::before { content: ''; width: 46%; aspect-ratio: 1; background: var(--i-hamb-c) center / contain no-repeat; opacity: .9; }
.foto[data-i="papas"]::before { background-image: var(--i-papas-c); }
.foto[data-i="perro"]::before { background-image: var(--i-perro-c); }
.foto[data-i="vaso"]::before { background-image: var(--i-vaso-c); }
.portada .foto::before { width: 24%; }
.foto-texto { position: absolute; left: .5rem; bottom: .45rem; right: .5rem; font-family: var(--titulares); font-weight: 800; font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; }
/* Con la foto chica (angosto con letra grande) el letrero tapaba el ícono: se quita (Fase 09). */
@container app (max-width: 22rem) { .producto .foto-texto { display: none; } }
.foto.ancha { aspect-ratio: 4 / 3; }
.foto.panoramica { aspect-ratio: 16 / 10; }
.foto.ancha::before, .foto.panoramica::before { width: 28%; }
.foto.agotado { filter: grayscale(.6); opacity: .65; }

/* El Corte: titular en tres franjas (Manual visual 6.3). Una vez por pantalla. */
.corte { font-family: var(--titulares); font-weight: 900; text-transform: uppercase; line-height: .9; letter-spacing: -.005em; margin: 0; display: grid; gap: .06em; font-size: min(3.3rem, 13cqi); }
.corte-l { position: relative; display: block; white-space: nowrap; width: max-content; max-width: 100%; padding-right: .07em; }
.corte-l > span { display: block; }
.corte-l > span:nth-child(1) { clip-path: inset(-20% -2% 63% -2%); }
.corte-l > span:nth-child(2) { position: absolute; left: 0; top: 0; bottom: 0; right: .07em; clip-path: inset(39.5% -6% 32% -6%); transform: translateX(.06em); }
.corte-l > span:nth-child(3) { position: absolute; left: 0; top: 0; bottom: 0; right: .07em; clip-path: inset(70.5% -2% -20% -2%); }

/* Pie con la firma */
.pie { display: flex; align-items: center; justify-content: center; gap: .8rem; padding: 1.4rem 1rem 1.8rem; }
.pie-simbolo { width: 30px; height: 33px; background: var(--s-tema) center / contain no-repeat; }
.pie-firma { width: 130px; height: 34px; background: var(--f-tema) left center / contain no-repeat; }

/* Barra fija de abajo (acción principal) */
.abajo {
  position: sticky; bottom: 0; z-index: 4; margin-top: auto;
  background: var(--fondo); border-top: var(--t) solid var(--linea);
  padding-block: .7rem calc(.7rem + env(safe-area-inset-bottom, 0px)); padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px));
}
.abajo-caja { max-width: 40rem; margin: 0 auto; display: grid; gap: .45rem; }
.abajo-linea { display: flex; justify-content: space-between; gap: .6rem; font-size: .85rem; font-weight: 600; flex-wrap: wrap; }
.pantalla { min-height: 100%; display: flex; flex-direction: column; }

/* Campos */
.campo { display: grid; gap: .3rem; font-weight: 700; font-size: .9rem; min-width: 0; }
.campo input, .campo select, .campo textarea, .entrada {
  width: 100%; min-width: 0; min-height: 48px; border-radius: 12px; border: 2px solid var(--linea); background: var(--campo); color: var(--texto);
  padding: .55rem .75rem; font-weight: 500; font-size: 1rem;
}
.campo textarea { resize: vertical; min-height: 4.5rem; line-height: 1.35; }

/* Filas tipo lista */
.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.lista > li { border-top: 2px solid var(--apagado); }
.lista > li:first-child { border-top: 0; }
.fila { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .7rem 0; min-width: 0; }
.fila > * { min-width: 0; }
.fila-texto { flex: 1 1 9rem; display: grid; gap: .1rem; }
.fila-valor { flex: 0 0 auto; text-align: right; font-weight: 800; }

/* ===================== PANTALLAS DEL CLIENTE ===================== */
/* Entrega y promesa */
/* Entrega y promesa en una sola línea (inicio) */
.entrega-tira {
  display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; width: 100%; min-height: 56px; text-align: left;
  padding: .55rem .9rem; border-radius: 16px; border: 2px solid var(--linea); background: transparent; color: var(--texto); min-width: 0;
}
.entrega-tira small { display: block; font-size: .75rem; font-weight: 600; color: var(--texto-suave); line-height: 1.2; }
.entrega-tira b { display: block; font-weight: 800; line-height: 1.25; }
.entrega-texto { flex: 1 1 10rem; min-width: 0; }
.entrega-promesa { flex: 0 0 auto; }
.entrega-promesa b { font-family: var(--titulares); font-weight: 900; white-space: nowrap; }
.entrega-cambiar { flex: 0 0 auto; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 2px solid var(--linea); display: grid; place-items: center; font-weight: 900; font-size: 1.2rem; line-height: 1; }
.direccion { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.direccion-texto { flex: 1 1 auto; min-width: 0; font-weight: 600; line-height: 1.3; }
.direccion-texto small { display: block; font-weight: 500; color: var(--texto-suave); }
.promesa { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; padding: .55rem .8rem; border: 2px solid var(--linea); border-radius: 14px; min-width: 0; }
.promesa b { font-family: var(--titulares); font-weight: 900; font-size: 1.05rem; white-space: nowrap; flex: 0 0 auto; }
.promesa span { min-width: 0; flex: 1 1 11rem; }

/* Portada de inicio */
.portada { display: grid; grid-template-columns: minmax(0, 1fr); border-radius: var(--radio); overflow: hidden; border: var(--t) solid var(--linea); min-width: 0; }
.portada .foto { border-radius: 0; aspect-ratio: 2 / 1; }
.portada-banda { background: var(--carbon); color: var(--hueso); padding: 1.15rem 1.15rem 1.3rem; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e2); min-width: 0; container: banda / inline-size; }
/* El titular y los íconos se miden con el ancho de la banda, no con el de la app (error de la v2 en tableta). */
.portada-banda .corte { font-size: min(3.3rem, 14.5cqi); }
@container banda (max-width: 23rem) { .categorias.en-banda { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.categorias.en-banda { margin-top: .35rem; }
.en-banda .categoria { border-color: var(--hueso); color: var(--hueso); }
.en-banda .categoria i { background-image: var(--i-hamb-h); }
.en-banda .categoria i[data-i="perro"] { background-image: var(--i-perro-h); }
.en-banda .categoria i[data-i="papas"] { background-image: var(--i-papas-h); }
.en-banda .categoria i[data-i="vaso"] { background-image: var(--i-vaso-h); }
.portada-banda p { color: #e6dccb; }

.siempre { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: .85rem; align-items: center; }
.siempre .foto { border-radius: 12px; }
.siempre-texto { display: grid; gap: .2rem; min-width: 0; }
.siempre-texto h3 { font-size: 1rem; }

.sellos { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: .3rem; }
.sello { height: .9rem; border-radius: 999px; border: 2px solid var(--linea); }
.sello.lleno { background: var(--texto); }
.sello.gratis { border-color: var(--rojo); border-style: dashed; }
/* Fase 16: la gratis ganada (la 9.ª) se llena de rojo. */
.sello.gratis.lleno { background: var(--rojo); border-style: solid; }
/* Fase 16: el código puesto en «¿Cómo pagas?». */
.cupon-puesto { display: grid; gap: .2rem; padding: var(--e2); border: 1px dashed var(--rojo); border-radius: var(--radio, .8rem); }
.cupon-puesto p { margin: 0; overflow-wrap: anywhere; }
.cupon-campo { display: grid; gap: var(--e1); }

.categorias { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.categoria { display: grid; justify-items: center; gap: .3rem; padding: .7rem .3rem .6rem; border-radius: 16px; border: 2px solid var(--linea); background: transparent; color: var(--texto); font-weight: 700; font-size: .82rem; min-width: 0; line-height: 1.15; }
.categoria[aria-pressed="true"] { background: var(--texto); color: var(--fondo); }
.categoria i { width: 2rem; height: 2rem; background: var(--i-hamb) center / contain no-repeat; display: block; }
.categoria i[data-i="perro"] { background-image: var(--i-perro); }
.categoria i[data-i="papas"] { background-image: var(--i-papas); }
.categoria i[data-i="vaso"] { background-image: var(--i-vaso); }
.categoria[aria-pressed="true"] i { background-image: var(--i-hamb-inv); }
.categoria[aria-pressed="true"] i[data-i="perro"] { background-image: var(--i-perro-inv); }
.categoria[aria-pressed="true"] i[data-i="papas"] { background-image: var(--i-papas-inv); }
.categoria[aria-pressed="true"] i[data-i="vaso"] { background-image: var(--i-vaso-inv); }
.categoria span { overflow-wrap: normal; }
@container app (max-width: 21rem) { .categorias { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Menú */
.cabeza-fija { position: sticky; top: 0; z-index: 5; }
.cabeza-fija .barra { position: static; }
.cats-barra { background: var(--fondo); padding-block: .6rem; border-bottom: 2px solid var(--apagado); }
.cats-barra .categorias { max-width: 76rem; margin: 0 auto; padding-left: max(1rem, env(safe-area-inset-left, 0px)); padding-right: max(1rem, env(safe-area-inset-right, 0px)); }
.cats-barra .categoria { padding-block: .4rem; grid-template-columns: auto; }
.cats-barra .categoria i { width: 1.6rem; height: 1.6rem; }
/* Título de sección: ícono del kit + título grande + línea gruesa. Los productos van más chicos. */
.cat { display: grid; gap: .3rem; min-width: 0; scroll-margin-top: 1rem; }
.cat-cabeza { display: flex; align-items: center; gap: .7rem; padding-bottom: .6rem; border-bottom: var(--t) solid var(--linea); min-width: 0; }
.cat-cabeza i { width: 2.4rem; height: 2.4rem; flex: 0 0 auto; background: var(--i-hamb) center / contain no-repeat; }
.cat-cabeza i[data-i="perro"] { background-image: var(--i-perro); }
.cat-cabeza i[data-i="papas"] { background-image: var(--i-papas); }
.cat-cabeza i[data-i="vaso"] { background-image: var(--i-vaso); }
.cat-cabeza i[data-i="drop"] { background-image: var(--i-drop); }   /* 10.3: la llama, el ícono propio del drop (kit 06_Iconos, Jean eligió la llama el 13 nov) */
.cat-cabeza h2 { flex: 1 1 auto; min-width: 0; font-weight: 900; font-size: min(1.75rem, 8cqi); letter-spacing: .02em; }
.cat-cuantos { flex: 0 0 auto; font-size: .8rem; font-weight: 700; color: var(--texto-suave); }
/* El drop del mes (corrección 8.3): nunca un quinto botón de categoría; sale primero en el menú, en
   carbón, para que resalte (en modo oscuro, en hueso: abajo). Dentro, los colores del tema contrario. */
.cat.cat-drop {
  --fondo: var(--carbon); --texto: var(--hueso); --texto-suave: #d9cdb8; --linea: var(--hueso); --apagado: #4a4b4b;
  --i-hamb: var(--i-hamb-h); --i-papas: var(--i-papas-h); --i-perro: var(--i-perro-h); --i-vaso: var(--i-vaso-h);
  --i-drop: url('./img/icono-llama-hueso.svg');
  background: var(--carbon); color: var(--hueso); border: var(--t) solid var(--carbon); border-radius: var(--radio);
  padding: 1rem 1rem .35rem; margin-bottom: var(--e2);
}
.cat-drop .cat-cabeza .etiqueta { flex: 0 0 auto; }
/* En modo oscuro el drop va al revés (Jean, 11 nov: «si el usuario tiene modo oscuro no va a destacar»):
   siempre el color contrario a la página, carbón sobre hueso o hueso sobre carbón. */
:root[data-theme="dark"] .cat.cat-drop {
  --fondo: var(--hueso); --texto: var(--carbon); --texto-suave: #4a4b4b; --linea: var(--carbon); --apagado: #d9cfbf;
  --i-hamb: var(--i-hamb-c); --i-papas: var(--i-papas-c); --i-perro: var(--i-perro-c); --i-vaso: var(--i-vaso-c);
  --i-drop: url('./img/icono-llama-carbon.svg');
  background: var(--hueso); color: var(--carbon); border-color: var(--hueso);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cat.cat-drop {
    --fondo: var(--hueso); --texto: var(--carbon); --texto-suave: #4a4b4b; --linea: var(--carbon); --apagado: #d9cfbf;
    --i-hamb: var(--i-hamb-c); --i-papas: var(--i-papas-c); --i-perro: var(--i-perro-c); --i-vaso: var(--i-vaso-c);
    --i-drop: url('./img/icono-llama-carbon.svg');
    background: var(--hueso); color: var(--carbon); border-color: var(--hueso);
  }
}
.productos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
/* La foto se achica en un teléfono angosto con letra grande (30 % del ancho): si no, «CHIPOTLE» y «LA DE LA CASA» quedaban debajo de la foto (Fase 09). */
.producto { display: grid; grid-template-columns: minmax(0, 1fr) min(6.2rem, 30cqi); gap: .85rem; padding: 1rem 0; border-top: 2px solid var(--apagado); align-items: start; min-width: 0; text-align: left; background: none; border-left: 0; border-right: 0; border-bottom: 0; color: inherit; width: 100%; }
.productos > li:first-child .producto { border-top: 0; }
.producto-texto { display: grid; gap: .25rem; min-width: 0; }
.producto-texto h3 { font-size: .98rem; font-weight: 800; letter-spacing: .02em; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.capas-linea { font-size: .84rem; color: var(--texto-suave); line-height: 1.35; }
.remate { font-size: .88rem; font-weight: 600; }
.precio { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; margin-top: .15rem; }
.precio b { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.precio span { font-size: .8rem; color: var(--texto-suave); font-variant-numeric: tabular-nums; white-space: nowrap; }
.agotado-nota { font-size: .84rem; font-weight: 700; color: var(--peligro); }
.producto .foto { border-radius: 12px; }

.menu-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.resumen-lateral { display: none; }

/* Producto */
.prod-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.prod-fotos { display: grid; gap: .5rem; min-width: 0; }
.puntos { display: flex; justify-content: center; gap: .35rem; }
.puntos i { width: 1.4rem; height: .5rem; border-radius: 999px; border: 2px solid var(--linea); display: block; }
.puntos i.si { background: var(--texto); }
.prod-cabeza { display: grid; gap: .35rem; }
.prod-cabeza h1 { font-size: min(2.2rem, 10cqi); }
.arma { gap: var(--e2); }
.pila { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; justify-items: center; width: 100%; }
.capa {
  width: 100%; min-height: 52px; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding: .3rem .35rem .3rem 1rem;
  border: var(--t) solid var(--linea); border-radius: 26px; background: transparent; color: var(--texto); min-width: 0;
}
.capa-nombre { flex: 1 1 5.5rem; min-width: 0; font-weight: 800; font-size: .98rem; line-height: 1.2; display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .45rem; }
.capa-nombre small { flex: 1 1 100%; font-weight: 500; font-size: .76rem; color: var(--texto-suave); line-height: 1.25; }
.capa-nota { flex: 0 0 auto; font-size: .8rem; color: var(--texto-suave); font-weight: 600; padding-right: .7rem; }
.paso { flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: .15rem; border: 2px solid var(--linea); border-radius: 999px; padding: 2px; }
.paso button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--texto); font-weight: 900; font-size: 1.2rem; line-height: 1; }
.paso button:disabled { opacity: .3; cursor: default; }
.paso output { min-width: 3.5rem; text-align: center; font-weight: 800; font-size: .88rem; font-variant-numeric: tabular-nums; }
.capa.carne { background: var(--suave); }
.capa.extra { border-width: 3px; }
.capa.agregada { border-style: solid; }
.capa.quitada { border-style: dashed; color: var(--texto-suave); background: transparent; }
.capa.quitada .capa-nombre { text-decoration: line-through; text-decoration-thickness: 2px; }
.capa.quitada .capa-nombre small { text-decoration: none; }
.capa.pan-arriba { border-radius: 2.6rem 2.6rem .9rem .9rem; min-height: 3.6rem; width: 94%; }
.capa.pan-abajo { border-radius: .9rem .9rem 2rem 2rem; min-height: 3.2rem; width: 90%; }
.capa.pan-arriba, .capa.pan-abajo { justify-content: space-between; }
.agregar-capa { display: grid; gap: .5rem; padding-top: .3rem; border-top: 2px solid var(--apagado); }
.agregar-capa p { padding-top: .6rem; }
.agregar-capa .opcion small { font-weight: 600; opacity: .8; }
.resumen-cambios { font-size: .88rem; line-height: 1.4; }
.resumen-cambios .enlace { min-height: 0; padding: 0; margin-left: .3rem; }
.elegir { display: grid; gap: .5rem; }
.eleccion {
  display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; text-align: left; width: 100%;
  padding: .75rem .9rem; border-radius: 16px; border: var(--t) solid var(--linea); background: transparent; color: var(--texto); min-height: 56px;
}
.eleccion .radio { width: 1.3rem; height: 1.3rem; border-radius: 50%; border: 2px solid currentColor; display: grid; place-items: center; }
.eleccion[aria-checked="true"] { background: var(--texto); color: var(--fondo); }
.eleccion[aria-checked="true"] .radio::after { content: ''; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }
.eleccion-texto { display: grid; gap: .1rem; min-width: 0; }
.eleccion-texto b { font-weight: 800; }
.eleccion-texto small { font-size: .82rem; opacity: .85; line-height: 1.3; }
.eleccion-precio { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Angosto con letra grande: el precio baja debajo del texto (antes «Papas» quedaba debajo de «+ $ 3,40»; Fase 09). */
@container app (max-width: 22rem) { .eleccion { grid-template-columns: 1.4rem minmax(0, 1fr); } .eleccion-precio { grid-column: 2; } }
.sub-eleccion { display: grid; gap: .45rem; padding: .2rem 0 .3rem 2.1rem; }
.sub-eleccion p { font-size: .82rem; font-weight: 700; }
.dato-real { font-size: .82rem; font-weight: 700; display: flex; gap: .45rem; align-items: center; }
.dato-real::before { content: ''; width: 1rem; height: .55rem; border: 2px solid var(--rojo); border-radius: 999px; flex: 0 0 auto; }
.extras { display: grid; gap: .45rem; }
.check { display: flex; align-items: center; gap: .7rem; min-height: 48px; padding: .4rem .8rem; border: 2px solid var(--linea); border-radius: 14px; background: transparent; color: var(--texto); width: 100%; text-align: left; }
.check .caja { width: 1.3rem; height: 1.3rem; border: 2px solid currentColor; border-radius: 6px; flex: 0 0 auto; display: grid; place-items: center; font-weight: 900; font-size: .8rem; }
.check[aria-checked="true"] .caja { background: var(--texto); color: var(--fondo); }
.check[aria-checked="true"] .caja::after { content: ''; width: .5rem; height: .5rem; border-radius: 2px; background: currentColor; }
.check span { flex: 1 1 auto; min-width: 0; font-weight: 600; }
.check b { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.cantidad { display: inline-flex; align-items: center; gap: .2rem; border: 2px solid var(--linea); border-radius: 999px; padding: 2px; flex: 0 0 auto; }
.cantidad button { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--texto); font-weight: 900; font-size: 1.15rem; line-height: 1; }
.cantidad output { min-width: 1.6rem; text-align: center; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Carrito */
.linea-pedido { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .8rem; padding: .85rem 0; align-items: start; }
.linea-pedido h3 { font-size: .98rem; }
.linea-detalle { font-size: .84rem; color: var(--texto-suave); line-height: 1.35; }
.linea-pie { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.linea-monto { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.empuje { display: grid; gap: .6rem; padding: .85rem 1rem; border-radius: 16px; background: var(--kraft); color: var(--carbon); }
.empuje p { font-weight: 600; }
.empuje .barrita { height: .7rem; border-radius: 999px; border: 2px solid var(--carbon); overflow: hidden; }
.empuje .barrita i { display: block; height: 100%; background: var(--carbon); }
.empuje .boton.secundario { color: var(--carbon); border-color: var(--carbon); }
.mapa {
  position: relative; border-radius: 14px; border: 2px solid var(--linea); overflow: hidden; aspect-ratio: 16 / 7; max-width: 100%;
  background:
    linear-gradient(90deg, transparent 47%, var(--apagado) 47%, var(--apagado) 53%, transparent 53%) 0 0 / 5.5rem 100%,
    linear-gradient(0deg, transparent 44%, var(--apagado) 44%, var(--apagado) 56%, transparent 56%) 0 0 / 100% 3.6rem,
    var(--suave);
}
.mapa::after { content: ''; position: absolute; left: 50%; top: 50%; width: 2.4rem; height: 2.6rem; transform: translate(-50%, -70%); background: var(--s-rojo) center / contain no-repeat; }
.mapa-texto { position: absolute; left: .55rem; bottom: .45rem; font-size: .72rem; font-weight: 700; background: var(--fondo); padding: .1rem .5rem; border-radius: 999px; border: 2px solid var(--linea); }
.totales { display: grid; gap: .35rem; }
.totales .t { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 .6rem; font-variant-numeric: tabular-nums; }
.totales .t span:last-child { white-space: nowrap; font-weight: 700; margin-left: auto; }
.totales .t.total { font-family: var(--titulares); font-weight: 900; font-size: 1.25rem; text-transform: uppercase; padding-top: .35rem; border-top: var(--t) solid var(--linea); }
.totales .t.bs { font-size: .85rem; color: var(--texto-suave); }
.reconocido { display: flex; gap: .7rem; align-items: center; }
.reconocido .avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--rojo) var(--s-carbon) center / 62% no-repeat; flex: 0 0 auto; }

/* Pagar */
.monto-grande { display: grid; gap: .2rem; text-align: center; padding: .4rem 0; }
.monto-grande b { font-family: var(--titulares); font-weight: 900; font-size: min(2.4rem, 11cqi); font-variant-numeric: tabular-nums; line-height: 1; white-space: nowrap; }
.datos-pago { list-style: none; margin: 0; padding: 0; display: grid; }
.datos-pago li { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; padding: .55rem 0; border-top: 2px solid var(--apagado); min-width: 0; }
.datos-pago li:first-child { border-top: 0; }
.datos-pago .d { flex: 1 1 auto; min-width: 0; display: grid; }
.datos-pago .d small { font-size: .78rem; color: var(--texto-suave); font-weight: 600; }
.datos-pago .d b { font-variant-numeric: tabular-nums; white-space: nowrap; }   /* regla 21: un teléfono o un RIF no se parte */
.datos-pago .d b.partible { white-space: normal; overflow-wrap: anywhere; }
.junto { white-space: nowrap; }   /* regla 21: un teléfono, un RIF o una referencia no se parte */
.datos-pago .copiar { margin-left: auto; }   /* si el dato no cabe a su lado, baja a la derecha */
.copiar { flex: 0 0 auto; min-height: 40px; padding: .25rem .8rem; border-radius: 999px; border: 2px solid var(--linea); background: transparent; color: var(--texto); font-weight: 800; font-size: .8rem; }
.copiar.hecho { background: var(--texto); color: var(--fondo); }
.subir { display: grid; justify-items: center; gap: .4rem; padding: 1.1rem; border: var(--t) dashed var(--linea); border-radius: 16px; text-align: center; background: transparent; color: var(--texto); width: 100%; }
.subir b { font-family: var(--titulares); text-transform: uppercase; font-weight: 800; }
.leido { display: grid; gap: .5rem; }
.paso-num { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--texto); color: var(--fondo); display: inline-grid; place-items: center; font-weight: 900; font-size: .9rem; flex: 0 0 auto; }
.tarjeta-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; min-width: 0; }
.tarjeta-cabeza h2, .tarjeta-cabeza h1 { flex: 1 1 auto; min-width: min-content; overflow-wrap: normal; }

/* Seguimiento */
.llega { display: grid; gap: .3rem; }
.llega b { font-family: var(--titulares); font-weight: 900; font-size: min(2.6rem, 12cqi); line-height: 1; white-space: nowrap; }
.tiempo { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
/* En flex (no en grid): con letra grande en 360 px la hora no cabe al lado de «RECIBIDO» y baja a la derecha en vez de taparlo (Fase 09). */
.tiempo li { display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: flex-start; position: relative; padding-bottom: 1rem; }
.tiempo li::before { content: ''; position: absolute; left: calc(1.2rem - 1px); top: 1.9rem; bottom: 0; width: var(--t); background: var(--apagado); }
.tiempo li:last-child::before { display: none; }
.tiempo li.hecho::before { background: var(--linea); }
.tiempo .marca { flex: 0 0 2.4rem; width: 2.4rem; height: 1.25rem; margin-top: .15rem; border-radius: 999px; border: var(--t) solid var(--apagado); background: var(--fondo); position: relative; z-index: 1; }
.tiempo li.hecho .marca { background: var(--texto); border-color: var(--texto); }
.tiempo li.ahora .marca { border-color: var(--rojo); background: var(--rojo); }
.tiempo .paso-t { display: grid; gap: .15rem; flex: 1 1 0; min-width: min-content; }
.tiempo .paso-t b { font-family: var(--titulares); text-transform: uppercase; font-weight: 800; font-size: .95rem; line-height: 1.15; }
.tiempo .paso-t span { font-size: .85rem; color: var(--texto-suave); }
.tiempo li:not(.hecho):not(.ahora) .paso-t b { color: var(--texto-suave); }
.tiempo li:last-child { padding-bottom: 0; }
.tiempo .hora { font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; margin-left: auto; }
.foto-pedido { display: grid; gap: .5rem; }
.repartidor { display: flex; gap: .7rem; align-items: center; }
.repartidor .avatar { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: var(--t) solid var(--linea); display: grid; place-items: center; font-family: var(--titulares); font-weight: 900; flex: 0 0 auto; }
.garantia { border-left: 4px solid var(--rojo); padding: .2rem 0 .2rem .8rem; font-weight: 600; }

/* Antes de abrir */
/* El título grande se ajusta a la caja según su línea más larga (el mes cambia: «EN MAYO», «EN SEPTIEMBRE»). */
.antes-portada { container-type: inline-size; }
.antes-portada .corte { font-size: min(3.3rem, calc(100cqi / (var(--n, 9) * .7))); }
.antes-portada { background: var(--carbon); color: var(--hueso); border-radius: var(--radio); padding: 1.3rem 1.1rem 1.4rem; display: grid; gap: 1rem; justify-items: start; min-width: 0; }
.antes-logo { width: 90px; height: 124px; background: var(--l-hueso) left center / contain no-repeat; }
.antes-portada p { color: #e6dccb; }
.cuenta-atras { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; width: 100%; }
.cuenta-atras div { border: 2px solid var(--hueso); border-radius: 14px; padding: .5rem; text-align: center; display: grid; }
.cuenta-atras b { font-family: var(--titulares); font-weight: 900; font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.1; }
.cuenta-atras small { font-size: .75rem; color: #e6dccb; }
.primer-pedido { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.primer-pedido .opcion { width: 100%; text-align: center; }

/* Escritorio del cliente */
@container app (min-width: 40rem) {
  .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.4rem; }
  .productos > li:nth-child(2) .producto { border-top: 0; }
  .primer-pedido { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@container app (min-width: 56rem) {
  .inicio-rejilla { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .menu-rejilla { grid-template-columns: minmax(0, 1fr) 21rem; }
  .resumen-lateral { display: grid; position: sticky; top: calc(var(--alto-cabeza, 8rem) + 1rem); }
  .menu .abajo { display: none; }
  .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: var(--e4); }
  .prod-fotos { position: sticky; top: calc(var(--alto-cabeza, 4rem) + 1rem); }
  .pedido-rejilla { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .pedido-lateral { position: sticky; top: calc(var(--alto-cabeza, 4rem) + 1rem); }
  .seg-rejilla, .antes-rejilla, .pagar-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
@container app (min-width: 90rem) {
  .productos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .productos > li:nth-child(3) .producto { border-top: 0; }
}
/* Corrección 10.1 (Jean, en computadora): los 4 botones de arriba eran más anchos que el menú, porque
   «Tu pedido» va al lado. Ahora ocupan la misma columna que el menú (la del resumen queda libre arriba). */
@container app (min-width: 56rem) {
  .menu.con-lateral .cats-barra .categorias { padding-right: calc(max(1rem, env(safe-area-inset-right, 0px)) + 21rem + 1.2rem); }
}
/* El drop con un solo producto ocupa toda su tarjeta (antes quedaba en la mitad izquierda, pegado a una
   esquina): el texto a la izquierda y la foto, más grande, a la derecha. */
/* Con «Tu pedido» al lado, la columna del menú no da para 3 productos por fila (en 1920 quedaban apretados). */
@container app (min-width: 90rem) {
  .menu.con-lateral .productos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .menu.con-lateral .productos > li:nth-child(3) .producto { border-top: 2px solid var(--apagado); }
}
.cat-drop .productos.uno { grid-template-columns: minmax(0, 1fr) !important; }
@container app (min-width: 40rem) {
  .cat-drop .productos.uno .producto { grid-template-columns: minmax(0, 1fr) min(11rem, 36cqi); gap: var(--e3); align-items: center; }
  .cat-drop .productos.uno .producto-texto h3 { font-size: 1.15rem; }
}
@container app (max-width: 55.98rem) { .solo-escritorio { display: none !important; } }
@container app (min-width: 56rem) { .solo-movil { display: none !important; } }


/* Lo más pedido */
.mas-pedidos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.mas-pedido { display: grid; gap: .35rem; align-content: start; text-align: left; background: none; border: 0; padding: 0; color: inherit; min-width: 0; }
.mas-pedido .foto { border-radius: 12px; }
.mas-pedido b { font-family: var(--titulares); text-transform: uppercase; font-weight: 800; font-size: .85rem; line-height: 1.15; }
.mas-pedido span { font-size: .85rem; font-weight: 700; font-variant-numeric: tabular-nums; }
@container app (max-width: 21rem) { .mas-pedidos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mas-pedido:nth-child(3) { display: none; } }


/* ===================== LA CARTA EN LA APP (Fase 05) ===================== */
/* La pantalla ocupa toda la ventana (en la maqueta era el marco). */
.pantalla { min-height: 100vh; min-height: 100dvh; }
.barra { padding-top: max(.55rem, env(safe-area-inset-top, 0px)); }
.barra-volver { text-decoration: none; display: inline-flex; align-items: center; }
a.producto { text-decoration: none; }
a.producto:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
/* Foto real cuando la haya (hasta la sesión de fotos: recuadro kraft con el ícono). */
.foto.con-foto::before { display: none; }
.foto .foto-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* 10.1: la foto no se descarga ni se abre aparte (sin menú al dejarla presionada, sin arrastrar ni seleccionar). */
.foto, .fotito { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* 8.3: entera (la portada del inicio): la foto completa y, detrás, la misma foto difuminada. */
/* Fase 14 (Jean): la portada llena su recuadro; la que eligió Jean, con su punto al centro (--foco = «x% y%»). */
.portada .foto .foto-img { object-fit: cover; object-position: var(--foco, 50% 50%); }
.foto.foto-entera { background: var(--carbon); }
.foto.foto-entera .foto-img { object-fit: contain; }
.foto.foto-entera canvas.foto-fondo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; filter: brightness(.85); }
.drop-nota { font-size: .84rem; font-weight: 800; }
.carta-nota { margin: 0; text-align: center; font-weight: 700; font-size: .92rem; padding: .7rem .9rem; border-radius: 999px; border: var(--t) solid var(--linea); }
.carta-horario { text-align: center; }
.aviso-carta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem; padding: .75rem .9rem;
  border-radius: 14px; border: 2px solid var(--linea); border-left: 6px solid var(--kraft); min-width: 0; }
.aviso-carta p { flex: 1 1 14rem; min-width: 0; font-weight: 600; }
.antes-portada { gap: var(--e2); }
.opcion:disabled { opacity: .5; cursor: default; text-decoration: line-through; }
/* «Volver a la receta» se toca con el dedo (43 px o más, regla 20). */
.resumen-cambios .enlace { display: flex; align-items: center; min-height: 44px; padding: 0; margin-left: 0; }
/* El título de cada categoría no se parte: si no cabe, «N opciones» baja de línea. */
.cat-cabeza { flex-wrap: wrap; row-gap: .2rem; }
.cat-cabeza h2 { min-width: min-content; overflow-wrap: normal; }
/* Enlaces con forma de botón o de enlace de la maqueta (en la app navegan con la dirección). */
a.enlace { display: inline-flex; align-items: center; justify-self: start; }
a.mas-pedido { text-decoration: none; }
a.barra-simbolo { display: block; }
/* «Avísame»: el error de un campo, en palabras y junto al campo. */
.campo-error { color: var(--peligro); font-weight: 700; font-size: .88rem; }
/* El primer pedido con los nombres reales («Double Trouble»): con letra grande en un teléfono angosto, uno debajo del otro. */
@container app (max-width: 20rem) { .primer-pedido { grid-template-columns: minmax(0, 1fr); } }
/* La cuenta atrás con letra grande en un teléfono angosto: los números caben en su recuadro. */
.cuenta-atras div { min-width: 0; }
@container app (max-width: 20rem) {
  .cuenta-atras div { padding: .45rem .2rem; }
  .cuenta-atras b { font-size: 1.15rem; }
  .cuenta-atras small { font-size: .68rem; }
  /* El drop en el inicio: la foto arriba y el texto debajo. */
  .siempre { grid-template-columns: minmax(0, 1fr); }
  .siempre .foto { width: 7rem; }
  .mas-pedido .foto-texto { display: none; }
}
.campo input[aria-invalid="true"] { border-color: var(--peligro); border-width: 3px; }
/* Solo para las capturas de la revisión de pantalla (pruebas): lo fijo va en su lugar. */
html.captura .cabeza-fija, html.captura .abajo, html.captura .prod-fotos, html.captura .barra, html.captura .pedido-lateral, html.captura .resumen-lateral { position: static !important; }

/* ---------- Fase 06: pedir ---------- */
/* El mapa de verdad (Leaflet): sus capas quedan dentro del mapa (no pasan por encima de la barra al
   deslizar) y el pin rojo, al centro, va por encima de todas. El punto es el centro del mapa. */
.mapa { isolation: isolate; z-index: 0; }
.mapa.leaflet-container { background: var(--suave); font-family: var(--cuerpo); font-size: .8rem; }
.mapa.leaflet-container::after { z-index: 650; pointer-events: none; }
.mapa .leaflet-control-attribution { font-size: .62rem; line-height: 1.5; padding: 0 .4rem; }
.mapa .leaflet-control-zoom a { width: 44px; height: 44px; line-height: 44px; font-size: 1.3rem; }
.mapa.editando { aspect-ratio: 4 / 3; min-height: 15rem; max-height: 52vh; }
.mapa.editando .mapa-texto { right: .55rem; }
.dir-hoja { display: grid; gap: .9rem; min-width: 0; }
.dir-hoja > * { min-width: 0; }
.dir-buscar-fila { display: flex; gap: .5rem; align-items: stretch; min-width: 0; }
.dir-buscar-fila input { flex: 1 1 auto; min-width: 0; }
.dir-buscar-fila .boton { flex: 0 0 auto; width: auto; }
.vacio { display: grid; gap: .6rem; justify-items: start; }
.listo-rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); align-items: start; }
.confirmacion h1 { font-family: var(--titulares); font-weight: 900; font-size: 1.5rem; line-height: 1.1; text-transform: uppercase; }
@container app (min-width: 56rem) { .listo-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* Hojas (ventanas que suben desde abajo; en la computadora, al centro) y aviso corto: los de la app del equipo,
   que la carta no carga. */
body.con-hoja { overflow: hidden; }
.hoja-fondo { position: fixed; inset: 0; z-index: 20; background: transparent; display: flex; align-items: flex-end; justify-content: center; transition: background-color .16s ease-out; }
.hoja-fondo.visible { background: var(--velo); }
.hoja {
  width: 100%; max-width: 34rem; max-height: 92vh; max-height: 92dvh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--tarjeta); color: var(--texto); font-family: var(--cuerpo);
  border: var(--t) solid var(--linea); border-bottom: 0; border-radius: 22px 22px 0 0;
  padding: 1rem 1.1rem; padding-bottom: max(1.25rem, env(safe-area-inset-bottom));
  display: grid; gap: .9rem; align-content: start; min-width: 0;
  transform: translateY(20px); transition: transform .2s ease-out;
}
.hoja-fondo.visible .hoja { transform: none; }
@media (min-width: 700px) {
  .hoja-fondo { align-items: center; padding: 1.5rem; }
  .hoja { border-bottom: var(--t) solid var(--linea); border-radius: var(--radio); max-height: 90vh; padding: 1.3rem 1.4rem; }
}
.hoja-cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; min-width: 0; }
/* 10.1: «Cerrar» es una palabra (no la «×»): si el título no cabe a su lado, «Cerrar» baja a la derecha. */
.hoja-cabeza h2 { flex: 1 1 13rem; min-width: 0; font-size: 1.2rem; }
.hoja-cabeza .hoja-cerrar { margin-left: auto; }
.hoja-cerrar { flex: 0 0 auto; min-height: 44px; padding: .3rem .95rem; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--linea); background: transparent; color: var(--texto); font: inherit; font-size: .95rem; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; }
.hoja-cerrar:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
.hoja-cuerpo { display: grid; gap: .85rem; min-width: 0; }
.aviso-corto {
  position: fixed; left: 50%; bottom: max(5.5rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 30;
  width: max-content; max-width: calc(100% - 2rem); padding: .75rem 1.1rem; border-radius: 14px; font-family: var(--cuerpo);
  background: var(--carbon); color: var(--hueso); border: 2px solid var(--hueso); font-weight: 700; box-shadow: 0 8px 26px rgba(0, 0, 0, .28);
}
.aviso-corto[data-tono="error"] { background: var(--salsa); }
.aviso-corto[hidden] { display: none; }
body.con-hoja .aviso-corto { top: max(1rem, env(safe-area-inset-top)); bottom: auto; }


/* ===================== PANTALLAS DEL EQUIPO (Fase 07: Pedidos y Cocina) =====================
   Copiadas de maqueta/maqueta.css (aprobada, v3) tal cual; lo nuevo va marcado «Fase 07». */
.equipo-barra { flex-wrap: wrap; row-gap: .45rem; }
.equipo-barra .barra-titulo { font-size: .95rem; }
.quien { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 700; color: #e6dccb; white-space: nowrap; }
.herramientas { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; min-width: 0; }
.herramientas > * { flex: 0 1 auto; }
.herramientas .crece { flex: 1 1 14rem; min-width: 0; }
.promesa { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .7rem; padding: .55rem .8rem; border: 2px solid var(--linea); border-radius: 14px; min-width: 0; }
.promesa b { font-family: var(--titulares); font-weight: 900; font-size: 1.05rem; white-space: nowrap; flex: 0 0 auto; }
.promesa span { min-width: 0; flex: 1 1 11rem; }

.tablero { display: grid; gap: var(--e3); grid-template-columns: minmax(0, 1fr); align-items: start; }
.columna { display: grid; gap: .8rem; min-width: 0; align-content: start; }
.columna-cabeza { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .2rem; border-bottom: var(--t) solid var(--linea); }
.columna-cabeza h2 { font-size: .95rem; }
.columna-cabeza .cuantos { font-family: var(--titulares); font-weight: 900; font-size: .85rem; border-radius: 999px; background: var(--texto); color: var(--fondo); min-width: 1.8rem; height: 1.8rem; display: inline-grid; place-items: center; padding: 0 .4rem; }
.orden { background: var(--tarjeta); border: var(--t) solid var(--linea); border-radius: 16px; padding: .75rem .8rem; display: grid; gap: .5rem; min-width: 0; }
.orden.tarde { border-color: var(--rojo); box-shadow: inset 6px 0 0 var(--rojo); padding-left: 1.05rem; }
.orden-cabeza { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; min-width: 0; }
.orden-num { font-family: var(--titulares); font-weight: 900; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.orden-cabeza .crece { flex: 1 1 auto; }
.orden-cliente { font-weight: 700; font-size: .92rem; display: flex; gap: .4rem; flex-wrap: wrap; align-items: baseline; }
.orden-cliente span { color: var(--texto-suave); font-weight: 600; font-size: .82rem; }
.orden-items { margin: 0; padding: 0; list-style: none; font-size: .86rem; display: grid; gap: .1rem; }
.orden-pie { display: flex; align-items: center; justify-content: space-between; gap: .5rem; flex-wrap: wrap; }
.orden-pie .total { font-weight: 800; font-variant-numeric: tabular-nums; }
.reloj { font-style: normal; font-family: var(--titulares); font-weight: 900; font-size: .78rem; border-radius: 999px; padding: .15rem .55rem; border: 2px solid var(--linea); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reloj.justo { background: var(--kraft); border-color: var(--kraft); color: var(--carbon); }
.reloj.tarde { background: var(--rojo); border-color: var(--rojo); color: var(--hueso); }
.pestanas { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .35rem; }
.pestanas button { min-height: 48px; border-radius: 14px; border: 2px solid var(--linea); background: transparent; color: var(--texto); font-weight: 700; font-size: .82rem; line-height: 1.15; padding: .3rem .25rem; display: grid; justify-items: center; gap: .1rem; min-width: 0; }
.pestanas button b { font-family: var(--titulares); font-size: 1rem; }
.pestanas button[aria-pressed="true"] { background: var(--texto); color: var(--fondo); }
.leyenda { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .78rem; color: var(--texto-suave); align-items: center; }
.leyenda span { display: inline-flex; align-items: center; gap: .35rem; }
.columna[data-oculta] { display: none; }
@container app (min-width: 56rem) {
  .tablero { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tablero .pestanas { display: none; }
  .tablero .columna[data-oculta] { display: grid !important; }
}

/* Cocina */
.estaciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }   /* 10.3: tres (Armado, Empaque, Listos) en una fila: con dos columnas «Listos» quedaba abajo (Jean) */
/* Letra con min(…, cqi) (regla 21): con letra grande en 360 px, «EMPAQUE 1» se montaba sobre «ARMADO 2» (Fase 09). */
.estaciones button { min-height: 52px; border-radius: 999px; border: 2px solid var(--hueso); background: transparent; color: var(--hueso); font-family: var(--titulares); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; font-size: min(1rem, 3.3cqi); padding: .25rem min(.5rem, 2cqi); min-width: 0; line-height: 1.1; display: inline-flex; align-items: center; justify-content: center; gap: min(.5rem, 1.5cqi); }
.estaciones button b { background: var(--rojo); color: var(--hueso); border-radius: 999px; min-width: min(1.8rem, 7cqi); height: min(1.8rem, 7cqi); display: inline-grid; place-items: center; font-size: min(.85rem, 3.4cqi); padding: 0 min(.4rem, 1.2cqi); }
.estaciones button[aria-pressed="true"] { background: var(--hueso); color: var(--carbon); }
/* Lo que hay que preparar ahora (solo lo que no está en cero) */
.en-cola { display: grid; gap: .6rem; }
.en-cola h2 { font-size: .95rem; }
.en-cola-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.2rem, 1fr)); gap: .75rem; }
.cola-cifra { display: grid; align-content: start; gap: .1rem; padding: .5rem .7rem; border-radius: 16px; border: var(--t) solid var(--linea); min-width: 0; }
.cola-cifra b { font-family: var(--titulares); font-weight: 900; font-size: 1.75rem; line-height: 1; font-variant-numeric: tabular-nums; }
.cola-cifra small { font-weight: 700; font-size: .82rem; line-height: 1.2; }
.cola-cifra:first-child { background: var(--fuerte); color: var(--sobre-fuerte); border-color: var(--fuerte); }
.comandas { display: grid; gap: var(--e3); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container app (min-width: 40rem) { .comandas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container app (min-width: 60rem) { .comandas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container app (min-width: 90rem) { .comandas { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.comanda { border: var(--t) solid var(--linea); border-radius: 18px; overflow: hidden; display: grid; min-width: 0; background: var(--tarjeta); }
.comanda.tarde { border-color: var(--rojo); }
.comanda-cabeza { background: var(--carbon); color: var(--hueso); padding: .6rem .8rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.comanda.tarde .comanda-cabeza { background: var(--rojo); }
.comanda-cabeza .orden-num { font-size: 1.5rem; }
.comanda-cabeza .crece { flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: .85rem; }
.comanda .reloj { border-color: var(--hueso); color: var(--hueso); }
.comanda .reloj.justo { color: var(--carbon); border-color: var(--kraft); }
.comanda.tarde .reloj { background: var(--hueso); color: var(--rojo); border-color: var(--hueso); }
.comanda-cuerpo { padding: .8rem .9rem .9rem; display: grid; gap: .7rem; }
.proteinas { display: flex; flex-wrap: wrap; gap: .3rem 1rem; padding: .6rem .9rem; border-bottom: 2px solid var(--apagado); }
.proteinas span { display: inline-flex; align-items: baseline; gap: .4rem; font-family: var(--titulares); font-weight: 800; text-transform: uppercase; font-size: 1rem; letter-spacing: .03em; }
.proteinas b { font-weight: 900; font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.empacar { margin: 0; padding: 0 0 0 1.1rem; display: grid; gap: .2rem; font-weight: 700; }
.plato { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .5rem; align-items: start; }
.plato-cant { font-family: var(--titulares); font-weight: 900; font-size: 1.5rem; line-height: 1.05; }
.plato-texto { display: grid; gap: .25rem; min-width: 0; }
.plato-texto b { font-family: var(--titulares); text-transform: uppercase; font-weight: 800; font-size: 1.15rem; line-height: 1.15; }
.plato-texto .cambios { display: flex; flex-wrap: wrap; gap: .3rem; }
.ficha-boton { min-height: 40px; padding: .2rem .7rem; border-radius: 999px; border: 2px solid var(--linea); background: transparent; color: var(--texto); font-weight: 800; font-size: .78rem; }
.nota-cliente { font-size: .88rem; font-weight: 700; border: 2px dashed var(--linea); border-radius: 12px; padding: .4rem .6rem; }
.comanda-pie { display: grid; gap: .45rem; padding: 0 .9rem .9rem; }
.ficha-tabla { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ficha-tabla th, .ficha-tabla td { text-align: left; padding: .45rem .3rem; border-bottom: 2px solid var(--apagado); vertical-align: top; }
.ficha-tabla th { font-family: var(--titulares); text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; }
.ficha-tabla td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.reconocido { display: flex; gap: .7rem; align-items: center; }
.reconocido .avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; background: var(--rojo) var(--s-carbon) center / 62% no-repeat; flex: 0 0 auto; }

/* Fase 07: lo que la maqueta no tenía y la operación de verdad necesita (mismas piezas, mismos tokens). */
.op-aviso { border: var(--t) solid var(--linea); border-radius: 14px; padding: .65rem .85rem; font-weight: 700; font-size: .9rem; display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; justify-content: space-between; min-width: 0; }
.op-aviso[data-tono="rojo"] { border-color: var(--rojo); box-shadow: inset 6px 0 0 var(--rojo); padding-left: 1.1rem; }
.op-aviso > span { min-width: 0; flex: 1 1 14rem; }
.op-aviso .boton { flex: 0 0 auto; }
.orden[data-abrir] { cursor: pointer; }
.orden:focus-visible, .comanda:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }
.orden-num.provisional, .comanda-cabeza .provisional { opacity: .8; }
.columna-vacia { color: var(--texto-suave); font-size: .86rem; padding: .3rem .2rem; }
.detalle-lineas { margin: 0; padding: 0; list-style: none; display: grid; gap: .45rem; }
.detalle-lineas li { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; min-width: 0; }
.detalle-lineas li > span:first-child { min-width: 0; }
.detalle-lineas .num { flex: 0 0 auto; }
.tiempos { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .3rem 1rem; font-size: .84rem; }
.tiempos b { font-variant-numeric: tabular-nums; }
.rapido-producto { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .75rem; padding: .6rem 0; min-width: 0; }
.rapido-producto > .fila-texto { flex: 1 1 8rem; }
.rapido-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; padding: 0 0 .6rem .9rem; border-left: 3px solid var(--apagado); margin-left: .2rem; min-width: 0; }
.rapido-sub > .fila-texto { flex: 1 1 8rem; }
.rapido-capa { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .35rem 0; border-top: 2px solid var(--apagado); min-width: 0; }
.rapido-capa:first-child { border-top: 0; }
.rapido-capa > span { min-width: 0; }
.cambios-rapido { display: grid; gap: .2rem; }
/* Fase 07: las hojas del equipo miden lo mismo que en la maqueta (40rem; las del cliente siguen en 34rem). */
html[data-vista="operacion"] .hoja { max-width: 40rem; }
/* Fase 07: con letra grande en el teléfono la porción baja de línea (en la maqueta cabía en una). */
.ficha-tabla td:last-child { white-space: normal; overflow-wrap: break-word; }
/* Fase 07: en el pedido rápido, si «Sola · + Papas · Combo» no cabe en una línea, pasa a dos (sin partir palabras).
   Con espacio se ve igual que la maqueta: todos del mismo ancho. */
.hoja-rapido .segmento { display: flex; flex-wrap: wrap; border-radius: 1.4rem; }
.hoja-rapido .segmento button { flex: 1 1 0; min-width: max-content; }
.porcion-campo { width: 100%; min-width: 0; max-width: 11rem; min-height: 40px; border-radius: 10px; border: 2px solid var(--linea); background: var(--campo); color: var(--texto); padding: .25rem .5rem; font-weight: 600; font-size: .9rem; text-align: right; }
.mapa.chico { height: 13rem; }
@container app (max-width: 21rem) { .plato { grid-template-columns: 2rem minmax(0, 1fr); } .plato .ficha-boton { grid-column: 2; justify-self: start; } }

/* Fase 07: piezas de las hojas del equipo (confirmar con motivo) dentro de esta hoja de estilos. */
.boton.peligro { background: var(--salsa); color: var(--hueso); border-color: var(--salsa); }
.ayuda { color: var(--texto-suave); font-size: .92rem; }
.mensaje { font-weight: 700; color: var(--peligro); font-size: .9rem; }
details.seccion > summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.campo select { appearance: auto; }

/* Fase 07 · El ticket de cocina y la etiqueta de la bolsa (impresora térmica de 80 mm).
   Solo se ve al imprimir: todo lo demás se esconde. */
#impresion { display: none; }
@media print {
  @page { size: 80mm auto; margin: 3mm 3mm 6mm; }
  html, body { background: #fff !important; color: #000 !important; min-height: 0 !important; }
  body > :not(#impresion) { display: none !important; }
  #impresion { display: block !important; width: 72mm; font-family: Arial, sans-serif; font-size: 11pt; line-height: 1.25; color: #000; }
  .tk { break-after: page; page-break-after: always; }
  .tk:last-child { break-after: auto; page-break-after: auto; }
  .tk h1, .tk h2 { font-family: 'Arial Black', Arial, sans-serif; margin: 0; text-transform: uppercase; color: #000; }
  .tk h1 { font-size: 20pt; line-height: 1; }
  .tk h2 { font-size: 13pt; }
  .tk .tk-num { font-size: 30pt; font-weight: 900; line-height: 1; }
  .tk .tk-linea { border-top: 1.5pt dashed #000; margin: 2mm 0; }
  .tk .tk-fila { display: flex; justify-content: space-between; gap: 2mm; }
  .tk ul { margin: 1mm 0; padding-left: 0; list-style: none; }
  .tk li { margin: .5mm 0; }
  .tk .tk-cambio { font-weight: 700; text-transform: uppercase; }
  .tk .tk-grande { font-size: 18pt; font-weight: 900; line-height: 1.05; }
  .tk .tk-chico { font-size: 9pt; }
  .tk .tk-logo { width: 34mm; height: auto; display: block; margin: 0 auto 1mm; }
}

/* ------------------------------------------------------------------
   Fase 08: seguimiento (#/p/…) y avisos al teléfono
   ------------------------------------------------------------------ */
.avisos-tel { display: grid; gap: var(--e1); justify-items: start; padding-top: var(--e2); border-top: 2px solid var(--apagado); min-width: 0; }
.avisos-tel p { margin: 0; min-width: 0; }
.avisos-tel .boton { width: 100%; }
@container app (min-width: 40rem) { .avisos-tel .boton { width: auto; } }
.guia-iphone { display: grid; gap: var(--e2); min-width: 0; }
.guia-iphone p { margin: 0; }
.guia-pasos { margin: 0; padding-left: 1.3rem; display: grid; gap: .5rem; }
.guia-pasos li { padding-left: .2rem; }

/* ---------------------------------------------------------------------
   Fase 09 · Caja y pagos del equipo (de maqueta.css: «Pagos por verificar»).
   La miniatura de la captura llega con la Fase 10: aquí la fila es de una columna.
   --------------------------------------------------------------------- */
.verificar { display: grid; gap: .75rem; min-width: 0; }
.pago-fila { display: grid; grid-template-columns: minmax(0, 1fr); gap: .75rem; padding: .75rem; border: 2px solid var(--linea); border-radius: 16px; min-width: 0; }
.pago-fila.alerta { border-color: var(--salsa); border-width: var(--t); }
.pago-texto { display: grid; gap: .35rem; min-width: 0; }
.pago-linea { display: flex; flex-wrap: wrap; gap: .3rem .6rem; align-items: baseline; min-width: 0; }
.pago-linea > * { min-width: 0; overflow-wrap: anywhere; }
.pago-linea b { font-variant-numeric: tabular-nums; }
.pago-acciones { display: flex; flex-wrap: wrap; gap: .4rem; min-width: 0; }
.pago-acciones > .boton { flex: 0 1 auto; width: auto; }
@container app (min-width: 62rem) { .caja-rejilla { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
/* El seguimiento: «Falta tu pago» con su botón, y la fila «Pagado con … · Verificado» de los totales. */
#seg-falta-pago, #pg-rechazo, #pg-parcial { margin-bottom: var(--e2); }

/* ---------------------------------------------------------------------
   Fase 13 · Repartidores y «en camino»
   Mis entregas (#/reparto): la ruta en orden, lo que sale, lo de hoy. Con espacio en TODOS los anchos.
   --------------------------------------------------------------------- */
.reparto-rejilla, .reparto-col, .paradas { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); align-items: start; align-content: start; min-width: 0; }
.paradas { gap: .8rem; }
@container app (min-width: 62rem) { .reparto-rejilla { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); } }
.parada-num { font-family: var(--titulares); font-weight: 900; font-size: .95rem; background: var(--texto); color: var(--fondo); border-radius: 999px; min-width: 2rem; height: 2rem; display: inline-grid; place-items: center; padding: 0 .45rem; flex: 0 0 auto; }
.orden.parada.siguiente { border-width: calc(var(--t) + 1px); }
.orden.parada.siguiente .parada-num { background: var(--rojo); color: var(--hueso); }
.parada-dir { overflow-wrap: anywhere; }
.parada-ir > .boton, .orden .botones > .boton { flex: 0 1 auto; width: auto; }
#rp-ruta-toda { justify-self: start; width: auto; }
#rp-salir-ya { justify-self: stretch; }
@container app (min-width: 40rem) { #rp-salir-ya { justify-self: start; width: auto; } }
/* «¿Quién lleva el #0150?»: una fila por repartidor, con lo que ya lleva. */
.lista-repartidores { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; }
.fila-repartidor { display: grid; justify-items: start; gap: .1rem; text-align: left; width: 100%; padding: .55rem .9rem; border-radius: 16px; }
.fila-repartidor b { font-size: .95rem; }
.fila-repartidor.elegido .suave, .fila-repartidor[aria-checked="true"] .suave { color: inherit; opacity: .85; }
/* El seguimiento: la moto en el mapa (sin el pin del centro: el punto es la moto). */
.mapa.moto::after { display: none; }
.mapa.moto { aspect-ratio: 16 / 9; min-height: 12rem; }
.moto-icono { background: var(--rojo); color: var(--hueso); border: 3px solid var(--hueso); border-radius: 50%; display: grid !important; place-items: center; box-shadow: 0 0 0 2px var(--carbon); }
.moto-icono b { font-family: var(--titulares); font-weight: 900; font-size: 1rem; line-height: 1; }
/* «¿Cómo estuvo tu pedido?»: dos botones iguales con su pulgar (sin amarillo: el ícono toma el color del texto). */
.calificar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.calificar .boton { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.calificar .boton[aria-pressed="true"] { background: var(--texto); color: var(--fondo); }
.ic-bien { --ic: url('./img/icono-bien.svg'); } .ic-mal { --ic: url('./img/icono-mal.svg'); }
/* Corrección 10.2: Espátula, Brindis y Bolsa (kit 06_Iconos, 13 nov). */
.ic-espatula { --ic: url('./img/icono-espatula.svg'); } .ic-brindis { --ic: url('./img/icono-brindis.svg'); } .ic-bolsa { --ic: url('./img/icono-bolsa.svg'); }
.llega .ic { width: 2.4rem; height: 2.4rem; }

#seg-cal-motivos .opcion { flex: 0 1 auto; min-width: 0; }
/* Calificaciones (dueño y encargada) */
.cf-numeros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.cf-numeros > div { border: 2px solid var(--linea); border-radius: 16px; padding: .6rem .8rem; display: grid; gap: .1rem; min-width: 0; }
.cf-numeros b { font-family: var(--titulares); font-weight: 900; font-size: 1.8rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.cf-numeros > div.mal { border-color: var(--rojo); }
.cf-numeros span { font-size: .82rem; color: var(--texto-suave); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }

/* Corrección 10.2 · modo prueba: la marca PRUEBA (siempre al contrario de la página: resalta en claro y en oscuro). */
.etiqueta.prueba { background: var(--fuerte); color: var(--sobre-fuerte); border-color: var(--fuerte); }
.aviso-prueba { border-left-color: var(--fuerte); }
.aviso-prueba .etiqueta.prueba { margin-right: .25rem; }

/* ---------------------------------------------------------------------
   Fase 11 · Caja: el cierre del día (de maqueta.css, tal cual: en el teléfono un bloque por método; en
   pantallas anchas, una fila; nada se desliza), los gastos y la foto del comprobante.
   --------------------------------------------------------------------- */
.cierre { display: grid; gap: var(--e2); min-width: 0; }
.cierre-cabeza { display: none; }
.cierre-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "metodo dif" "app contado";
  gap: .6rem .9rem; align-items: end; padding: .8rem .9rem; border: 2px solid var(--linea); border-radius: 16px; min-width: 0;
}
.cierre-fila.mal { border-color: var(--salsa); border-width: var(--t); }
.cierre-fila > * { min-width: 0; }
.c-metodo { grid-area: metodo; display: flex; align-items: baseline; gap: .1rem .4rem; flex-wrap: wrap; align-self: center; }
.c-metodo b { font-weight: 800; overflow-wrap: anywhere; }
.c-metodo small, .c-app small, .c-contado small { font-size: .76rem; font-weight: 600; color: var(--texto-suave); }
.c-metodo .c-cuenta { flex: 1 1 100%; }
.c-app { grid-area: app; display: grid; gap: .15rem; font-variant-numeric: tabular-nums; }
.c-app b, .c-contado b { white-space: nowrap; }
.c-contado { grid-area: contado; display: grid; gap: .15rem; }
.c-contado input { width: 100%; min-width: 0; min-height: 44px; text-align: right; border-radius: 10px; border: 2px solid var(--linea); background: var(--campo); color: var(--texto); padding: .3rem .6rem; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1rem; }
.c-dif { grid-area: dif; justify-self: end; align-self: center; font-weight: 800; text-align: right; }
.c-dif.suave { font-weight: 600; }
.cierre-total { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem .9rem; padding: .8rem .9rem; border-top: var(--t) solid var(--linea); font-weight: 700; }
.cierre-total b { font-variant-numeric: tabular-nums; white-space: nowrap; }
@container app (max-width: 20rem) {
  .cierre-fila { grid-template-columns: minmax(0, 1fr); grid-template-areas: "metodo" "app" "contado" "dif"; }
  .c-dif { justify-self: start; text-align: left; }
}
@container app (min-width: 44rem) {
  .cierre-cabeza, .cierre-fila { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, .9fr); grid-template-areas: "metodo app contado dif"; align-items: center; }
  .cierre-cabeza { display: grid; gap: .9rem; padding: 0 .9rem; font-family: var(--titulares); font-weight: 800; text-transform: uppercase; font-size: .72rem; letter-spacing: .05em; color: var(--texto-suave); }
  .c-app small, .c-contado small { display: none; }
}
.dif-mal { color: var(--peligro); font-weight: 800; }
.tachado { text-decoration: line-through; text-decoration-thickness: 2px; }
#cj-sin-cerrar .botones, #cj-otro-dia .boton { margin-top: .4rem; }
#cj-cerrar, #cj-mes { display: grid; gap: var(--e1); align-content: start; }
#cj-cerrar p, #cj-mes p { margin: 0; }
#cj-cerrar .boton.chico, #cj-mes .boton.chico, #cj-gastos > .boton.chico { justify-self: start; }
#cj-gastos { display: grid; gap: var(--e1); align-content: start; }
#cj-gastos h2, #cj-gastos p { margin: 0; }
/* La foto del comprobante: entera (es un papel que se tiene que leer), nunca más ancha que la hoja. */
.gasto-foto { display: grid; gap: .5rem; min-width: 0; }
.gasto-foto p { margin: 0; }
img.comprobante { display: block; max-width: 100%; max-height: 16rem; width: auto; height: auto; border-radius: 12px; border: 2px solid var(--linea); background: var(--hueso); justify-self: start; }
img.comprobante.grande { max-height: 70vh; }

/* ---------------------------------------------------------------------
   Fase 15 · Clientes (#/clientes): los números por segmento, la lista y, en pantallas anchas, la lista de
   espera y la importación al lado. La ficha 360 y la importación son hojas. Con espacio en TODOS los anchos.
   --------------------------------------------------------------------- */
.cl-rejilla, .cl-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e3); align-items: start; align-content: start; min-width: 0; }
@container app (min-width: 62rem) { .cl-rejilla { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.cl-numeros { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr)); gap: .6rem; min-width: 0; }
.cl-numeros > div { border: 2px solid var(--linea); border-radius: 16px; padding: .6rem .8rem; display: grid; gap: .1rem; min-width: 0; align-content: start; }
.cl-numeros b { font-family: var(--titulares); font-weight: 900; font-size: 1.6rem; line-height: 1.05; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cl-numeros span { font-size: .76rem; color: var(--texto-suave); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.cl-numeros > div[data-numero="elite_lover"] { border-color: var(--rojo); }
.cl-numeros > div.meta { border-color: var(--texto); border-width: var(--t); }
#cl-resumen, #cl-filtros, #cl-espera, #cl-importar { display: grid; gap: var(--e2); align-content: start; }
#cl-resumen h2, #cl-espera h2, #cl-importar h2, #cl-resumen p, #cl-espera p, #cl-importar p { margin: 0; }
#cl-espera .boton.chico, #cl-importar .boton.chico { justify-self: start; }
#cl-filtros .opcion { flex: 0 1 auto; min-width: 0; }
#cl-filtros .campo > span { font-weight: 700; }
#cl-encontrados { margin: 0; }
#cl-mas { justify-self: start; width: auto; }
.cl-nombre { font-size: 1rem; overflow-wrap: anywhere; min-width: 0; }
.cl-informe { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; }
.cl-informe li { overflow-wrap: anywhere; }
.cl-ejemplos summary { cursor: pointer; font-weight: 700; }
.cl-ejemplos ul { margin: .4rem 0 0; padding-left: 1.1rem; display: grid; gap: .2rem; font-size: .88rem; }
.cl-barra { height: .7rem; border-radius: 999px; border: 2px solid var(--linea); overflow: hidden; }
.cl-barra-lleno { display: block; height: 100%; width: 0; background: var(--texto); transition: width .3s; }
.ficha-cabeza { display: flex; flex-wrap: wrap; gap: .4rem .6rem; align-items: center; min-width: 0; }
.fi-tel { font-weight: 800; font-size: 1.05rem; }
.ficha-bloque { display: grid; gap: .3rem; padding-top: var(--e2); border-top: 2px solid var(--linea); min-width: 0; }
.ficha-bloque h3 { margin: 0; font-family: var(--titulares); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; }
.ficha-bloque p { margin: 0; overflow-wrap: anywhere; }
.fi-pedidos { display: grid; gap: .3rem; }
/* Fase 14: las garantías de tiempo de la ficha: el texto a la izquierda; el estado y «Quitar» a la derecha (abajo si no caben). */
.fi-garantias { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; min-width: 0; }
.fi-garantia { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem .8rem; padding: .55rem 0; min-width: 0; }
.fi-garantia + .fi-garantia { border-top: 1.5px solid var(--apagado, rgba(0,0,0,.12)); }
.fi-garantia-texto { display: grid; gap: .1rem; min-width: min(100%, 14rem); flex: 1 1 14rem; overflow-wrap: anywhere; }
.fi-garantia-lado { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.r-segmento { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
/* Fase 14 (N1): la foto del pedido en la comanda de Empaque (entera, como la verá el cliente) y su estado; el enlace
   «Listo sin foto» / «Tomar otra foto» debajo de los botones, a la derecha. */
.comanda-foto-caja { display: grid; gap: .3rem; min-width: 0; }
.comanda-foto { aspect-ratio: 4 / 3; border-radius: 12px; max-height: 14rem; }
.comanda > .enlace { justify-self: end; margin: -.4rem .9rem .4rem; font-size: .85rem; min-height: 40px; }
/* Fase 14: el pedido rápido busca al cliente por el nombre (la lista para elegir). */
.r-sugeridos { display: grid; gap: .4rem; min-width: 0; }
.r-sugeridos .lista { margin: 0; }
.r-sugerido { display: flex; align-items: center; justify-content: space-between; gap: .6rem; width: 100%; min-width: 0; text-align: left;
  padding: .55rem .7rem; border: var(--t) solid var(--linea); border-radius: 12px; background: var(--tarjeta); color: var(--texto); min-height: 48px; }
.r-sugerido .fila-texto { min-width: 0; display: grid; }
.r-sugerido .tel { white-space: nowrap; }
.r-sugerido .etiqueta { flex: 0 0 auto; }
/* Fase 22: los términos y la privacidad, abajo de la firma. */
.pie { flex-wrap: wrap; }
.pie-legal { flex: 0 0 100%; display: flex; justify-content: center; flex-wrap: wrap; gap: .2rem 1.2rem; font-size: .85rem; }
.pie-legal a { color: inherit; min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 3px; }
#pd-terminos { margin: .6rem 0 0; }
#pd-terminos a { color: inherit; }