/* ═══════════════════════════════════════════════════════════════════════════
   Las Pinchis Alitas — EL DISEÑO NUEVO DE LA APP DE CLIENTES (aprobado el 24-oct-2026)

   Se carga DESPUÉS de app.css y rediseno.css y les gana sin tocarlas. Las referencias son
   las maquetas aprobadas (trabajo/diseno-aprobado-24oct/*.dc.html): de ahí salen medidas,
   radios y colores. Las clases las pintan js/app.js y js/avisos.js.

   ESTILO ÚNICO (el mismo del repartidor):
     fondo #F4F1EC · tarjetas blancas · tinta #1E1A17
     naranja «salsa búfalo» #E8501F (lo que se toca; como LETRA, #C93D12)
     mostaza #FFC43D (promos y avisos) · verde #1F6B3A (listo, pagado) · rojo #B42318
     Rubik · botones de 44 px o más · el pollito, en pequeño, en todas las pantallas.

   ⚠️ Los colores de MARCA que pinta js/marca.js (--orange, --bg…) llegan como estilo en línea
      del <html>; por eso aquí se pisan con !important: este diseño NO sigue el color de
      acento que el negocio guarde en el panel (el dueño aprobó el #E8501F).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0 · Rubik, ALOJADA EN EL SERVIDOR (revisión independiente, 24-oct) ─────────────────
   Antes se bajaba de Google Fonts. Ya no: las cuatro letras viven en /kds/fonts/ (las mismas que usa
   la cocina) y el empaquetador las sigue desde aquí (url() del CSS → entran al paquete del cliente,
   la app empaquetada no depende de Google). 600 cae en la de 700 y 800 en la de 900 (el navegador
   escoge la más cercana hacia arriba). Sin red, `font-display: swap` deja la letra del sistema. */
@font-face { font-family: Rubik; font-style: normal; font-weight: 400; font-display: swap; src: url(/kds/fonts/rubik-400.ttf) format("truetype"); }
@font-face { font-family: Rubik; font-style: normal; font-weight: 500; font-display: swap; src: url(/kds/fonts/rubik-500.ttf) format("truetype"); }
@font-face { font-family: Rubik; font-style: normal; font-weight: 700; font-display: swap; src: url(/kds/fonts/rubik-700.ttf) format("truetype"); }
@font-face { font-family: Rubik; font-style: normal; font-weight: 900; font-display: swap; src: url(/kds/fonts/rubik-900.ttf) format("truetype"); }

/* ── 1 · Los colores y la letra ─────────────────────────────────────────── */
:root {
  --d-fondo: #F4F1EC;
  --d-tarjeta: #FFFFFF;
  --d-tinta: #1E1A17;
  --d-gris: #6B625B;
  --d-linea: #EEE8E1;
  --d-naranja: #E8501F;
  --d-naranja-txt: #C93D12;
  --d-naranja-osc: #9E2E0B;
  --d-naranja-suave: #FFF0EA;
  --d-mostaza: #FFC43D;
  --d-mostaza-suave: #FFF1D6;
  --d-mostaza-txt: #7A4B00;
  --d-verde: #1F6B3A;
  --d-verde-osc: #185A30;
  --d-verde-suave: #E3F4E8;
  --d-rojo: #B42318;
  --d-rojo-suave: #FDECEA;
  --d-fuente: Rubik, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --d-sombra: 0 1px 3px rgba(30,26,23,.06);
  --d-nav: 78px;
}

/* Los tokens VIEJOS apuntan a los nuevos: así todo lo que no se reescribió se pinta como el diseño. */
:root {
  --orange: #E8501F !important; --orange-light: #E8501F !important; --orange-dark: #C93D12 !important;
  --orange-text: #C93D12 !important; --on-orange: #FFFFFF !important; --on-red: #FFFFFF !important; --on-green: #FFFFFF !important;
  --bg: #F4F1EC !important; --surface: #FFFFFF !important; --surface2: #F4F1EC !important;
  --border: #E4DDD4; --border-light: rgba(30,26,23,.08);
  --text: #1E1A17; --text-muted: #6B625B;
  --green: #1F6B3A; --red: #B42318;
  --radius: 18px; --radius-sm: 12px; --nav-h: var(--d-nav);
  --rd-naranja: #E8501F; --rd-sobre-naranja: #FFFFFF; --rd-naranja-txt: #C93D12; --rd-naranja-osc: #9E2E0B;
  --rd-verde: #1F6B3A; --rd-verde-cl: #E3F4E8; --rd-azul: #1F6B3A; --rd-azul-cl: #E3F4E8;
  --rd-fondo: #F4F1EC; --rd-tinta: #1E1A17; --rd-gris: #6B625B; --rd-linea: #EEE8E1;
  --rd-fuente: var(--d-fuente);
}

html, body { background: var(--d-fondo); color: var(--d-tinta); font-family: var(--d-fuente); }
body { font-size: 15px; -webkit-tap-highlight-color: transparent; }
button, input, select, textarea { font-family: var(--d-fuente); }
h1, h2, h3 { font-family: var(--d-fuente); letter-spacing: -.01em; }
.pollito { display: inline-block; object-fit: contain; }
.pollito.blanco { filter: invert(1); }
.ico { vertical-align: -.14em; }

/* El encabezado global ya no existe: cada pantalla trae su propio título con el pollito.
   (Los nodos siguen en app.html: el JS los lee y los escribe, sólo no se ven.) */
#app-header { display: none !important; }
#app { max-width: 480px; background: var(--d-fondo); }
.page-content { padding-bottom: calc(var(--d-nav) + env(safe-area-inset-bottom) + 24px); }
body.con-barra .page-content { padding-bottom: calc(var(--d-nav) + env(safe-area-inset-bottom) + 96px); }
.page.active { animation: fadeInSoft .2s ease; }
#profile-content, #orders-content { padding: 0 16px; }
.loading-screen { color: var(--d-gris); }
.spinner { border-color: rgba(30,26,23,.15); border-top-color: var(--d-naranja); }
.btn-primary .spinner, .ct-hacer .spinner { border-color: rgba(255,255,255,.4); border-top-color: #fff; }

/* ── 2 · Botones y campos ───────────────────────────────────────────────── */
.btn { min-height: 46px; border-radius: 14px; font: 700 15px var(--d-fuente); padding: 0 22px; }
.btn-block { border-radius: 14px; }
.btn-primary { background: var(--d-naranja); color: #fff; }
.btn-primary:hover { background: var(--d-naranja-txt); }
.btn-primary:disabled { background: #E7E1DA; color: var(--d-gris); }
.btn-secondary { background: #fff; color: var(--d-tinta); box-shadow: inset 0 0 0 1.5px var(--d-linea); }
.btn-danger { background: var(--d-rojo); color: #fff; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 13.5px; }
.form-group label { font: 600 13px var(--d-fuente); text-transform: none; letter-spacing: 0; color: var(--d-gris); margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
  background: #fff; border: 2px solid var(--d-linea); border-radius: 14px; min-height: 50px; padding: 12px 14px;
  font: 500 16px var(--d-fuente); color: var(--d-tinta);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--d-naranja); }
.form-group textarea { min-height: 88px; }
input::placeholder, textarea::placeholder { color: #9A9088; }
#toast { background: var(--d-tinta); border-radius: 14px; font-family: var(--d-fuente); bottom: calc(var(--d-nav) + env(safe-area-inset-bottom) + 16px); }
body.con-barra #toast { bottom: calc(var(--d-nav) + env(safe-area-inset-bottom) + 92px); }
body[data-pagina="cart"] #toast, body[data-pagina="auth"] #toast { bottom: calc(env(safe-area-inset-bottom) + 96px); }

/* ── 3 · La barra de abajo: Inicio · Mis pedidos · Perfil ───────────────── */
.bottom-nav {
  height: calc(var(--d-nav) + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--d-linea);
  backdrop-filter: none; -webkit-backdrop-filter: none; justify-content: space-around; z-index: 60;
}
.nav-btn { font: 600 12px var(--d-fuente); color: var(--d-gris); gap: 4px; min-width: 64px; min-height: 56px; }
.nav-btn .icon { display: flex; }
.nav-btn.active { color: var(--d-naranja-txt); font-weight: 700; }
.nav-btn .badge { top: 8px; right: calc(50% - 22px); background: var(--d-naranja); color: #fff; min-width: 18px; height: 18px; font: 800 11px var(--d-fuente); }
/* Sin barra de abajo: carrito (trae su botón), avisos, saldo, calificar, rastreo */
body[data-pagina="cart"] #bottom-nav, body[data-pagina="avisos"] #bottom-nav,
body[data-pagina="wallet-movements"] #bottom-nav, body[data-pagina="calificar"] #bottom-nav { display: none !important; }
body[data-pagina="cart"] .page-content, body[data-pagina="avisos"] .page-content,
body[data-pagina="wallet-movements"] .page-content, body[data-pagina="calificar"] .page-content { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }
body[data-pagina="cart"] .page-content { padding-bottom: calc(env(safe-area-inset-bottom) + 120px); }

/* La barra flotante «Ver carrito» */
.cart-bar {
  position: fixed; z-index: 55; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 448px;
  bottom: calc(var(--d-nav) + env(safe-area-inset-bottom) + 14px); height: 60px;
  display: flex; align-items: center; gap: 12px; padding: 0 18px 0 8px; border: 0; border-radius: 18px;
  background: var(--d-naranja); color: #fff; cursor: pointer; text-align: left;
  box-shadow: 0 10px 24px rgba(201,61,18,.35); font: 600 15px var(--d-fuente);
}
.cart-bar[hidden] { display: none; }
.cart-bar .badge {
  position: static; display: flex; width: 30px; height: 30px; min-width: 30px; border-radius: 50%; margin-left: 10px;
  background: #fff; color: var(--d-naranja-txt); font: 800 15px var(--d-fuente); align-items: center; justify-content: center; padding: 0;
}
.cart-bar .cb-t { flex: 1; }
.cart-bar b { font: 800 17px var(--d-fuente); padding-right: 4px; }
.cart-bar:active { transform: translateX(-50%) scale(.99); }

/* Títulos de pantalla con el pollito: Mis pedidos, Mi perfil… y las de «regresar» (.pt-cab) */
.pg-tit { padding: calc(env(safe-area-inset-top) + 18px) 0 14px; align-items: center; }
.pg-tit h1 { font: 800 28px var(--d-fuente); letter-spacing: -.02em; color: var(--d-tinta); }
.pg-tit::after { content: ""; flex: none; width: 56px; height: 33px; margin-left: auto; background: url(/icons/ui/pollito.png) right center / contain no-repeat; }
.pg-tit .pg-sub { display: none; }
.pt-cab {
  display: flex; align-items: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 14px) 16px 12px;
  font-family: var(--d-fuente);
}
.pt-cab h1 { flex: 1; min-width: 0; margin: 0; font: 800 24px var(--d-fuente); letter-spacing: -.02em; color: var(--d-tinta); }
.pt-cab .pg-sub { font: 500 14px var(--d-fuente); color: var(--d-gris); white-space: nowrap; }
.pt-atras {
  flex: none; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--d-tinta);
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--d-sombra);
}
.pt-pollito { flex: none; width: 56px; height: 33px; }

/* ── 4 · Entrar / crear cuenta / recuperar ──────────────────────────────── */
#page-auth { background: var(--d-fondo); min-height: 100%; }
.auth-container { max-width: 420px; padding: calc(env(safe-area-inset-top) + 36px) 24px 40px; }
.au-pollito { display: block; width: 92px; height: 54px; margin: 0 auto 18px; }
.auth-title { font: 800 28px/1.15 var(--d-fuente); letter-spacing: -.02em; text-align: left; margin: 0 0 6px; color: var(--d-tinta); }
.auth-sub { text-align: left; font: 400 15px/1.45 var(--d-fuente); color: var(--d-gris); margin: 0 0 22px; }
.auth-switch { text-align: center; font-size: 14px; color: var(--d-gris); margin-top: 16px; }
.auth-switch a { color: var(--d-naranja-txt); font-weight: 700; cursor: pointer; }
.au-legal { text-align: center; font-size: 12.5px; line-height: 1.5; color: var(--d-gris); margin-top: 18px; }
.au-legal a { color: var(--d-naranja-txt); font-weight: 600; cursor: pointer; }
.au-ayuda { font-size: 14.5px; line-height: 1.5; color: var(--d-gris); margin: 0 0 16px; }
.au-ayuda strong { color: var(--d-tinta); }
.au-reenvio { text-align: center; font-size: 13px; color: var(--d-gris); margin: 10px 0 16px; min-height: 18px; }
.au-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.au-banner {
  background: var(--d-mostaza-suave); border-radius: 14px; padding: 12px 14px; margin-bottom: 16px;
  font-size: 13.5px; line-height: 1.5; color: var(--d-mostaza-txt);
}
.phone-input-wrap { display: flex; background: #fff; border: 2px solid var(--d-linea); border-radius: 14px; min-height: 54px; overflow: hidden; }
.phone-input-wrap:focus-within { border-color: var(--d-naranja); }
.phone-input-wrap .phone-cc {
  width: 84px; font: 700 16px var(--d-fuente); color: var(--d-tinta); background-color: var(--d-fondo); border-right: 2px solid var(--d-linea);
  min-height: 0; padding: 0 24px 0 14px; border-radius: 0;
}
.phone-input-wrap input { min-height: 0 !important; font: 500 17px var(--d-fuente) !important; letter-spacing: .02em; }
/* El código de WhatsApp: seis casillas; el campo de verdad queda encima, invisible */
.otp-caja { position: relative; margin: 4px 0 6px; }
.otp-casillas { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.otp-casillas span {
  height: 58px; border-radius: 14px; background: #fff; border: 2px solid var(--d-linea);
  display: flex; align-items: center; justify-content: center; font: 800 26px var(--d-fuente); color: var(--d-tinta);
}
.otp-casillas span.on { border-color: var(--d-naranja); box-shadow: 0 0 0 3px var(--d-naranja-suave); }
.otp-casillas span.lleno { border-color: var(--d-tinta); }
.otp-campo { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; font-size: 16px; border: 0; background: none; letter-spacing: 1em; }

/* ── 5 · INICIO ─────────────────────────────────────────────────────────── */
.aviso-cerrado {
  margin: calc(env(safe-area-inset-top) + 12px) 16px 0; padding: 14px; border-radius: 16px; background: var(--d-mostaza-suave);
  border: 0; color: var(--d-mostaza-txt); display: flex; gap: 12px; align-items: center; font-family: var(--d-fuente);
}
.aviso-cerrado[hidden] { display: none; }
.aviso-cerrado .pollito { flex: none; width: 46px; height: 28px; }
.aviso-cerrado b { display: block; font: 800 15px/1.25 var(--d-fuente); color: var(--d-tinta); }
.aviso-cerrado span span { display: block; font: 400 13.5px/1.4 var(--d-fuente); margin-top: 2px; }

.in { padding: calc(env(safe-area-inset-top) + 14px) 16px 0; display: flex; flex-direction: column; gap: 14px; font-family: var(--d-fuente); color: var(--d-tinta); }
.aviso-cerrado:not([hidden]) + #menu-cat-view .in { padding-top: 14px; }
.in-cab { display: flex; align-items: center; gap: 12px; }
.in-pollito { flex: none; width: 64px; height: 38px; }
.in-saludo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.in-saludo span { font-size: 13px; color: var(--d-gris); }
.in-saludo b { font: 700 20px/1.2 var(--d-fuente); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-campana {
  position: relative; flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: #fff; color: var(--d-tinta);
  display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--d-sombra);
}
.in-campana svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.in-punto { position: absolute; top: 9px; right: 10px; width: 11px; height: 11px; border-radius: 50%; background: var(--d-naranja); border: 2px solid #fff; }
.in-punto[hidden] { display: none; }
.in-entrar { flex: none; height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: var(--d-naranja); color: #fff; font: 700 14px var(--d-fuente); cursor: pointer; }
.in-dir {
  display: flex; align-items: center; gap: 10px; border: 0; background: #fff; border-radius: 14px; padding: 12px 14px; min-height: 56px;
  text-align: left; color: var(--d-tinta); cursor: pointer; width: 100%; box-shadow: var(--d-sombra);
}
.in-dir.solo-texto { cursor: default; }
.in-dir > svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--d-naranja); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.in-dir-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.in-dir-t small { font-size: 12px; color: var(--d-gris); }
.in-dir-t b { font: 600 14px/1.3 var(--d-fuente); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.in-chip { flex: none; font: 600 12px var(--d-fuente); background: var(--d-mostaza-suave); color: var(--d-mostaza-txt); padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.in-chip.rojo { background: var(--d-rojo-suave); color: var(--d-rojo); }
.in-buscar { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 0 14px; height: 50px; box-shadow: var(--d-sombra); }
.in-buscar > svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--d-gris); stroke-width: 2; stroke-linecap: round; }
.in-buscar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: 400 15px var(--d-fuente); color: var(--d-tinta); -webkit-appearance: none; }
.in-buscar input::-webkit-search-cancel-button { display: none; }
.in-q-x { flex: none; width: 36px; height: 36px; border: 0; background: none; font-size: 24px; line-height: 1; color: var(--d-gris); cursor: pointer; }
.in-q-x[hidden] { display: none; }
#in-cuerpo { display: flex; flex-direction: column; gap: 4px; }

/* ¿Lo de siempre? */
.in-siempre { display: flex; gap: 14px; align-items: center; background: var(--d-tinta); color: #fff; border-radius: 22px; padding: 16px; margin-top: 4px; }
.in-siempre > img, .in-siempre > .in-sinfoto { flex: none; width: 92px; height: 92px; border-radius: 16px; object-fit: cover; }
.in-siempre-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.in-siempre-t small { font: 600 12px var(--d-fuente); letter-spacing: .08em; text-transform: uppercase; color: var(--d-mostaza); }
.in-siempre-t b { font: 600 15px/1.25 var(--d-fuente); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.in-siempre-t span { font-size: 13px; color: #CFC6BE; }
.in-siempre-t button { align-self: flex-start; margin-top: 2px; height: 44px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--d-naranja); color: #fff; font: 700 14px var(--d-fuente); cursor: pointer; }

/* ── EL MENÚ COMPLETO (24-oct, tarde): el mismo diseño del Menú Digital (styles.css v30) ─────────────
   Una sola página con todos los grupos, barra «negro glass» pegajosa, promos y charolas a 2 cuadros,
   «Lo más pedido» en pastillas chicas. El scroll es el de `.page-content` (no el de la ventana). */
.in-sinfoto { display: block; background: var(--d-naranja-suave) url(/icons/ui/pollito.png) center / 52% no-repeat; }

/* Lo más pedido: una tira chica de una línea que se desliza (no empuja el menú hacia abajo). */
.in-mp-cab { margin: 14px 2px 0; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.in-mp-cab h2 { margin: 0; font: 700 13px var(--d-fuente); text-transform: uppercase; letter-spacing: .06em; color: var(--d-gris); }
.in-mp-cab span { font-size: 12px; color: var(--d-gris); }
.in-mp { display: flex; gap: 8px; overflow-x: auto; margin: 4px -16px 0; padding: 4px 16px 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; scroll-padding: 0 16px; }
.in-mp::-webkit-scrollbar { display: none; }
.in-mp-pill { flex: none; max-width: 220px; display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 5px; background: #fff; border-radius: 999px; box-shadow: var(--d-sombra); cursor: pointer; scroll-snap-align: start; text-align: left; }
.in-mp-foto { flex: none; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; background: var(--d-naranja-suave); }
.in-mp-t { display: flex; align-items: baseline; gap: 6px; min-width: 0; white-space: nowrap; }
.in-mp-t b { font: 700 13px var(--d-fuente); overflow: hidden; text-overflow: ellipsis; }
.in-mp-t span { flex: none; font: 400 13px var(--d-fuente); color: var(--d-gris); }
.in-mp-pill:active { transform: scale(.98); }

/* Barra de categorías: negro «glass» pegajoso. Flota arriba, encima del menú completo. Cápsula de negro
   translúcido con desenfoque (el contenido pasa borroso por debajo, como en iOS); la activa en cápsula
   blanca con letra #1E1A17, las demás en blanco al 75 %. Una sola línea; sin cabida se desliza sin partir
   palabras. Pegada se queda debajo de la isla del iPhone (`env(safe-area-inset-top)`). Sin `backdrop-filter`
   cae a negro sólido. El contenedor es transparente y deja pasar los toques; sólo la cápsula los recibe. */
.in-nav-wrap { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; padding: 8px 0 6px; margin: 0 -4px; pointer-events: none; }
.in-nav-wrap[hidden] { display: none; }
.in-nav {
  pointer-events: auto; position: relative; display: flex; flex-wrap: nowrap; gap: 2px; margin: 0; padding: 4px;
  background: #1E1A17; border: 1px solid rgba(255,255,255,.12); border-radius: 999px;
  box-shadow: 0 8px 22px rgba(30,26,23,.22); transition: background .2s, box-shadow .2s;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .in-nav { background: rgba(20,17,15,.92); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); }
  .in-nav-wrap.pegada .in-nav { background: rgba(20,17,15,.72); box-shadow: 0 10px 28px rgba(0,0,0,.30); }
}
.in-nav::-webkit-scrollbar { display: none; }
.in-nav button { flex: 1 0 auto; min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: rgba(255,255,255,.75); font: 700 15px var(--d-fuente); white-space: nowrap; cursor: pointer; transition: background .18s, color .18s; }
.in-nav button.active { background: #fff; color: #1E1A17; box-shadow: 0 1px 4px rgba(0,0,0,.25); }
.in-nav button:focus-visible { outline: 2px solid var(--d-mostaza); outline-offset: -2px; }

/* Los grupos: título completo y rejilla pareja (las columnas las reparte `_inAjustarRejillas` en `--cols`). */
.in-menu { display: flex; flex-direction: column; }
.in-grupo { margin-top: 6px; }
.in-grupo + .in-grupo { margin-top: 10px; }
.in-grupo-t { margin: 14px 2px 8px; font: 700 13px var(--d-fuente); text-transform: uppercase; letter-spacing: .06em; color: var(--d-gris); }
.in-grid { display: grid; grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); gap: 10px; }
.in-pc { display: flex; gap: 8px; align-items: center; background: #fff; border-radius: 18px; padding: 7px; box-shadow: var(--d-sombra); position: relative; cursor: pointer; text-align: left; min-width: 0; }
.in-pc:active { transform: scale(.99); }
.in-pc-media { position: relative; flex: none; }
.in-pc-img { display: block; width: 52px; height: 52px; border-radius: 12px; object-fit: cover; background: var(--d-naranja-suave); }
.in-pc-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-self: stretch; justify-content: center; }
.in-pc-name { font: 700 13px/1.2 var(--d-fuente); overflow-wrap: break-word; hyphens: manual; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.in-pc-desc { display: none; font-size: 12.5px; line-height: 1.35; color: var(--d-gris); margin-top: 3px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.in-pc-dias { align-self: flex-start; margin-top: 3px; background: var(--d-mostaza); color: var(--d-tinta); font: 700 11px/1 var(--d-fuente); padding: 4px 7px; border-radius: 999px; }
.in-pc-price { margin-top: 3px; font: 700 14.5px var(--d-fuente); color: var(--d-naranja-txt); }
.in-pc-add { position: absolute; right: -5px; bottom: -5px; width: 24px; height: 24px; border-radius: 50%; background: var(--d-naranja); color: #fff; font: 700 17px/1 var(--d-fuente); display: flex; align-items: center; justify-content: center; border: 2px solid #fff; }
.in-pc.pc-unavailable { opacity: .5; }
.in-pc.pc-unavailable .in-pc-name { text-decoration: line-through; }
/* Tarjeta ancha (una columna, o de sobra): foto más grande y la descripción. */
.in-grid.ancha .in-pc { padding: 10px; gap: 12px; }
.in-grid.ancha .in-pc-price { font-size: 15.5px; }
.in-grid.ancha .in-pc-img { width: 76px; height: 76px; border-radius: 15px; }
.in-grid.ancha .in-pc-name { font-size: 15.5px; }
.in-grid.ancha .in-pc-desc { display: -webkit-box; }
.in-grid.muy-ancha .in-pc-img { width: 96px; height: 96px; border-radius: 18px; }
.in-grid.muy-ancha .in-pc-name { font-size: 17px; }
.in-grid.muy-ancha .in-pc-desc { font-size: 13.5px; }
.in-grid.muy-ancha .in-pc-price { font-size: 17px; }
/* Promos y charolas a 2 cuadros (y SÓLO esas): foto más grande y la descripción a la vista. */
.in-pc.doble { padding: 10px; gap: 12px; }
.in-pc.doble .in-pc-img { width: 96px; height: 96px; border-radius: 16px; }
.in-pc.doble .in-pc-name { font-size: 17px; }
.in-pc.doble .in-pc-price { font-size: 17px; }
.in-pc.doble .in-pc-desc { display: -webkit-box; }
/* Al tocar una categoría de la barra, los productos del grupo se sacuden un poco. */
.in-pc.saltada { animation: in-salta .5s ease; }
@keyframes in-salta { 0% { transform: translateY(0); } 30% { transform: translateY(-6px); } 60% { transform: translateY(2px); } 100% { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .in-pc.saltada { animation: none; } }

.in-nada { text-align: center; padding: 40px 16px; color: var(--d-gris); }
.in-nada button { margin-top: 12px; min-height: 44px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--d-naranja); color: #fff; font: 700 14px var(--d-fuente); cursor: pointer; }

/* ── 6 · Pantallas a todo lo alto (producto y «¿A dónde y cuándo?») ─────── */
.modal-overlay.modal-pantalla { background: var(--d-fondo); align-items: stretch; z-index: 210; }
.modal-overlay.modal-pantalla .modal-sheet.pantalla {
  width: 100%; max-width: 480px; height: 100%; max-height: 100dvh; margin: 0 auto; padding: 0; border-radius: 0;
  background: var(--d-fondo); display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(24px); opacity: 0; transition: transform .28s cubic-bezier(.32,.72,0,1), opacity .22s;
}
.modal-overlay.modal-pantalla.open .modal-sheet.pantalla { transform: none; opacity: 1; }
.pantalla .pt-cuerpo { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 16px 120px; }
.ck-h2 { font: 800 19px var(--d-fuente); margin: 16px 2px 8px; letter-spacing: -.01em; color: var(--d-tinta); }

/* El pie fijo con el botón grande (carrito, producto, dirección) */
.ct-pie {
  position: fixed; z-index: 70; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px; bottom: 0;
  padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--d-linea);
  pointer-events: auto; display: flex; flex-direction: column; gap: 8px;
}
.ct-pie[hidden] { display: none; }
.pantalla .ct-pie { position: relative; left: auto; transform: none; max-width: none; flex: none; }
/* 🔴 24-oct (prueba de la app, ya en producción): el pie `.ct-pie` trae `pointer-events: auto`, y como hijo gana sobre el
   `pointer-events: none` de su pantalla cerrada. El pie INVISIBLE de «¿A dónde y cuándo?» (#modal-dir, el último en el HTML y del
   mismo z-index) se quedaba encima del botón «Agregar» de la ficha del producto y se comía el toque (`cerrarDireccion()` en vez de
   agregar). Pantalla cerrada = nada de sus botones recibe toques. */
.modal-overlay:not(.open) .ct-pie, .modal-overlay:not(.open) .ct-pie * { pointer-events: none; }
.ct-hacer {
  width: 100%; min-height: 56px; border: 0; border-radius: 16px; background: var(--d-naranja); color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 22px;
  font: 800 17px var(--d-fuente); box-shadow: 0 8px 20px rgba(201,61,18,.28);
}
.ct-hacer b { font: 800 17px var(--d-fuente); }
.ct-hacer.solo { justify-content: center; }
.ct-hacer:active { transform: scale(.99); }
.ct-hacer:disabled { background: #E7E1DA; color: var(--d-gris); box-shadow: none; cursor: default; transform: none; }
.cuando-ir { align-self: center; border: 0; background: none; color: var(--d-naranja-txt); font: 700 14px var(--d-fuente); min-height: 40px; cursor: pointer; text-decoration: underline; }
.cuando-ir[hidden] { display: none; }

/* ── 7 · LA FICHA DEL PRODUCTO ──────────────────────────────────────────── */
#modal-item.modal-pantalla .modal-sheet.pantalla { background: var(--d-fondo); }
.px-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 24px; }
.px-hero { position: relative; height: 300px; background: var(--d-naranja-suave); }
.px-hero .modal-item-img { width: 100%; height: 100%; margin: 0; border-radius: 0; background: none; display: block; }
.px-hero .modal-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; }
.px-sinfoto { display: block; width: 100%; height: 100%; background: var(--d-naranja-suave) url(/icons/ui/pollito.png) center / 34% no-repeat; }
.px-atras {
  position: absolute !important; left: 16px; top: calc(env(safe-area-inset-top) + 14px); right: auto !important; width: 44px; height: 44px;
  border-radius: 50%; border: 0; background: #fff; color: var(--d-tinta); display: flex; align-items: center; justify-content: center;
  cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.15); z-index: 3;
}
.px-tag { position: absolute; right: 16px; top: calc(env(safe-area-inset-top) + 20px); background: var(--d-tinta); color: var(--d-mostaza); font: 700 12px var(--d-fuente); padding: 6px 10px; border-radius: 999px; }
.px-tag.promo { background: var(--d-mostaza); color: var(--d-tinta); }
.px-tag[hidden] { display: none; }
.px-cuerpo { position: relative; margin-top: -24px; background: var(--d-fondo); border-radius: 24px 24px 0 0; padding: 22px 20px 4px; display: flex; flex-direction: column; gap: 6px; }
.px-nombre { margin: 0; font: 800 26px/1.15 var(--d-fuente); letter-spacing: -.02em; }
.px-desc { margin: 0; font-size: 14px; line-height: 1.45; color: var(--d-gris); }
.px-desc:empty { display: none; }
.px-precio { font: 800 22px var(--d-fuente); color: var(--d-naranja-txt); }
.px-incluye { margin: 4px 0 0 !important; padding: 10px 12px !important; border-radius: 12px !important; background: #fff !important; font-size: 13px; line-height: 1.45; }

/* Cada bloque de opciones, en su tarjeta blanca y numerado */
#modal-modifiers { margin: 16px 16px 0 !important; counter-reset: paso; display: flex; flex-direction: column; gap: 14px; }
#modal-modifiers[style*="display: none"], #modal-modifiers[style*="display:none"] { display: none !important; }
#modal-modifiers .px-card, #modal-modifiers .px-extras > .px-card { background: #fff; border-radius: 20px; padding: 16px; margin: 0 !important; box-shadow: var(--d-sombra); counter-increment: paso; }
#modal-modifiers .px-extras { display: flex; flex-direction: column; gap: 14px; margin: 0 !important; }
#modal-modifiers .mod-section-title {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 10px; margin: 0 0 12px;
  font: 700 16px/1.25 var(--d-fuente); color: var(--d-tinta); text-transform: none; letter-spacing: 0;
}
#modal-modifiers .px-card > .mod-section-title::before { content: counter(paso) ". "; margin-right: -6px; }
#modal-modifiers .mod-required, #modal-modifiers .mod-hint, #modal-modifiers .mod-section-title > span {
  flex: none; font: 600 12px var(--d-fuente); color: var(--d-gris); background: #EFEAE3; border-radius: 999px; padding: 4px 9px; text-transform: none; letter-spacing: 0;
}
#modal-modifiers .mod-required.falta { color: var(--d-naranja-osc); background: var(--d-naranja-suave); }
#modal-modifiers .mod-required.listo { color: var(--d-verde); background: var(--d-verde-suave); }
#modal-modifiers .mod-hint { background: none; padding: 0; width: 100%; order: 3; color: var(--d-gris); font-weight: 400; font-size: 13px; }
#modal-modifiers .px-extras .mod-hint { width: auto; order: 0; background: #EFEAE3; padding: 4px 9px; font-size: 12px; font-weight: 600; }
.ex-sub { margin: -6px 0 6px; font-size: 13px; color: var(--d-gris); }

/* La REJILLA PAREJA: todas las opciones, mismo alto, última fila llena */
#modal-modifiers .ctx-chips, #modal-modifiers .cg-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; margin: 0; }
#modal-modifiers .ctx-chip, #modal-modifiers .cg-chip {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px;
  min-height: 56px; min-width: 0; margin: 0; padding: 6px 8px; border-radius: 14px; border: 2px solid var(--d-linea); background: #fff; color: var(--d-tinta);
  font: 600 14px/1.2 var(--d-fuente); overflow-wrap: anywhere; cursor: pointer; box-shadow: none; flex: initial;
}
#modal-modifiers .ctx-chip-label { font: 600 14px/1.2 var(--d-fuente); color: inherit; }
#modal-modifiers .ctx-chip-price, #modal-modifiers .cg-chip b { display: block; font: 700 13px var(--d-fuente); color: var(--d-gris); margin: 0; }
#modal-modifiers .ctx-chip.selected, #modal-modifiers .cg-chip.cg-on {
  border-color: var(--d-naranja); background: var(--d-naranja-suave); color: var(--d-naranja-osc); font-weight: 700;
}
#modal-modifiers .ctx-chip.selected .ctx-chip-label, #modal-modifiers .ctx-chip.selected .ctx-chip-price, #modal-modifiers .cg-chip.cg-on b { color: var(--d-naranja-osc); }
#modal-modifiers .ctx-chip.agotado-opt, #modal-modifiers .cg-chip.cg-ago { opacity: .45; text-decoration: line-through; cursor: not-allowed; }
#modal-modifiers .cg-grp.px-card { margin: 0 !important; }

/* Combínalo: los extras del panel */
.ex-fila { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--d-linea); cursor: pointer; position: relative; min-height: 56px; }
.ex-fila:first-of-type, .ex-sub + .ex-fila, .mod-section-title + .ex-fila { border-top: 0; }
.ex-n { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; font: 600 15px/1.25 var(--d-fuente); }
.ex-n small { font: 500 14px var(--d-fuente); color: var(--d-gris); }
.ex-fila input { position: absolute; opacity: 0; pointer-events: none; }
.ex-marca { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--d-naranja); background: #fff; display: flex; align-items: center; justify-content: center; box-sizing: border-box; }
.ex-marca::before { content: "+"; font: 700 22px/1 var(--d-fuente); color: var(--d-naranja); }
.ex-fila input:checked ~ .ex-marca { background: var(--d-naranja); }
.ex-fila input:checked ~ .ex-marca::before { content: "✓"; color: #fff; font-size: 19px; }
.ex-fila input:disabled ~ .ex-marca { opacity: .4; }

.px-notas { display: flex; align-items: center; gap: 10px; margin: 14px 16px 0; padding: 0 16px; min-height: 52px; background: #fff; border-radius: 20px; color: var(--d-gris); box-shadow: var(--d-sombra); }
.px-notas svg { flex: none; }
.px-notas input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: 400 16px var(--d-fuente); color: var(--d-tinta); padding: 14px 0; }

/* El pie: cantidad + «Agregar · total» */
#modal-item .item-pie.px-pie {
  position: relative; margin: 0; flex: none; display: flex; gap: 12px; align-items: center; background: #fff; border-top: 1px solid var(--d-linea);
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
}
#modal-item .item-pie .item-qty { background: var(--d-fondo); border-radius: 14px; height: 54px; padding: 0; gap: 0; box-shadow: none; flex: none; }
#modal-item .item-pie .qty-control .qty-btn { width: 46px; height: 54px; border-radius: 0; background: transparent !important; color: var(--d-tinta); font: 500 24px var(--d-fuente); }
#modal-item .item-pie .qty-control .qty-btn.plus, #modal-item .item-pie .qty-control .qty-btn.minus { background: transparent !important; color: var(--d-tinta); width: 46px; height: 54px; border-radius: 0; font-size: 24px; }
#modal-item .item-pie .qty-num { width: 22px; min-width: 22px; font: 700 17px var(--d-fuente); color: var(--d-tinta); }
#modal-item .item-pie .item-add { flex: 1; height: 54px; border-radius: 14px; font: 700 16px var(--d-fuente); background: var(--d-naranja); color: #fff; box-shadow: none; }
#modal-item .item-pie .item-add:disabled { background: #E7E1DA !important; color: var(--d-gris); opacity: 1 !important; }
.modal-overlay#modal-item.sobre-hoja { z-index: 260; }

/* ── 8 · EL CARRITO («Tu pedido») ───────────────────────────────────────── */
/* Revisión independiente: 48 px abajo para que el pie fijo (botón + «Prográmalo», ~130 px con el local cerrado) no tape el «Total». */
#page-cart { padding: 0 0 48px; font-family: var(--d-fuente); color: var(--d-tinta); }
#cart-content { padding: 0 16px; }
#cart-content > .pt-cab { padding-left: 0; padding-right: 0; }
.cart-empty { padding: 70px 24px; text-align: center; color: var(--d-gris); }
.cart-empty .pollito { width: 96px; height: 56px; opacity: .8; margin-bottom: 8px; }
.ct-lista { background: #fff; border-radius: 20px; padding: 6px 14px; gap: 0; box-shadow: var(--d-sombra); }
.ct-item { background: none; box-shadow: none; border-radius: 0; padding: 12px 0; border-bottom: 1px solid var(--d-linea); }
.ct-item:last-of-type { border-bottom: 0; }
.ct-item.is-nohoy { box-shadow: none; }
.ct-foto { width: 64px; height: 64px; border-radius: 12px; }
.ct-sinfoto { background: var(--d-naranja-suave) url(/icons/ui/pollito.png) center / 60% no-repeat; }
.ct-d b { font: 600 15px/1.25 var(--d-fuente); }
.ct-d span { font-size: 13px; color: var(--d-gris); }
.ct-d .ct-nohoy { color: var(--d-rojo); }
.ct-pr { font: 800 15px var(--d-fuente); margin-top: 4px; }
.ct-cant { background: var(--d-fondo); border-radius: 12px; height: 44px; }
.ct-cant button { width: 36px; color: var(--d-tinta); font-weight: 500; }
.ct-cant b { font: 700 15px var(--d-fuente); }
.ct-vaciar { display: block; width: auto; margin: 4px auto 6px; min-height: 40px; background: none; color: var(--d-gris); font: 600 13px var(--d-fuente); text-decoration: underline; border: 0; cursor: pointer; }
.ct-nota { background: #fff; border-radius: 16px; min-height: 52px; box-shadow: var(--d-sombra); }
.ct-nota input { font-family: var(--d-fuente); }
.ct-sug-t { display: flex; align-items: baseline; justify-content: space-between; margin: 20px 2px 10px; }
.ct-sug-t h2 { margin: 0; font: 800 19px var(--d-fuente); }
.ct-sug-t span { font-size: 13px; color: var(--d-gris); }
.ct-sug { margin: 0 -16px 8px; }
.ct-s { background: #fff; border-radius: 18px; padding: 0; width: 126px; overflow: hidden; box-shadow: var(--d-sombra); font-family: var(--d-fuente); }
.ct-s img, .ct-s-sin { height: 78px; border-radius: 0; }
.ct-s-sin { background: var(--d-naranja-suave) url(/icons/ui/pollito.png) center / 52% no-repeat; }
.ct-s b { font: 600 13px/1.2 var(--d-fuente); margin: 8px 10px 0; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.4em; }
.ct-s-r { margin: 6px 10px 10px; font: 800 14px var(--d-fuente); }
.ct-s-r i { width: 34px; height: 34px; background: var(--d-naranja); color: #fff; font-size: 22px; }
.ct-aviso { background: var(--d-rojo-suave); border: 0; color: #7F1D1D; border-radius: 14px; margin-top: 12px; }
.ct-aviso strong { color: var(--d-rojo); }
.ct-login { margin-top: 16px; background: #fff; border-radius: 20px; padding: 18px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--d-sombra); }
.ct-login span { font-size: 14px; color: var(--d-gris); margin-bottom: 8px; }
/* La tarjeta «Tu pedido #N sigue en cocina» */
.ct-agr { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--d-mostaza-suave); border: 2px solid var(--d-mostaza); border-radius: 20px; padding: 14px; margin-bottom: 14px; }
.ct-agr-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: #FFE3A3; color: var(--d-mostaza-txt); display: flex; align-items: center; justify-content: center; }
.ct-agr-t { flex: 1; min-width: 150px; display: flex; flex-direction: column; gap: 2px; }
.ct-agr-t b { font: 800 15px/1.25 var(--d-fuente); }
.ct-agr-t span { font-size: 13px; color: var(--d-gris); line-height: 1.35; }
.ct-agr button { flex: 1 1 100%; min-height: 48px; border: 0; border-radius: 14px; background: var(--d-naranja); color: #fff; font: 700 15px var(--d-fuente); cursor: pointer; }

/* Cómo lo quieres / cómo pagas */
#cart-checkout { padding: 0 16px; display: flex; flex-direction: column; gap: 14px; margin-top: 16px; }
#cart-checkout[hidden] { display: none; }
.ck-card { background: #fff; border-radius: 20px; padding: 16px; box-shadow: var(--d-sombra); }
.ck-t { display: block; margin: 0 0 12px; font: 700 17px var(--d-fuente); color: var(--d-tinta); }
.ck-t span { font: 400 13px var(--d-fuente); color: var(--d-gris); }
.order-type-toggle, .cuando-toggle { background: var(--d-fondo); border-radius: 14px; padding: 4px; gap: 4px; margin: 0 0 12px; }
.order-type-btn, .cuando-btn { min-height: 46px; border-radius: 11px; font: 700 14px var(--d-fuente); color: var(--d-gris); background: none; }
.order-type-btn.active, .cuando-btn.active { background: #fff; color: var(--d-tinta); box-shadow: 0 1px 3px rgba(30,26,23,.12); }
.order-type-btn:disabled, .order-type-btn.disabled { opacity: .45; }
.ck-dir {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: var(--d-tinta);
}
.ck-dir svg { flex: none; color: var(--d-naranja); }
.ck-dir-t { flex: 1; min-width: 0; font: 500 14.5px/1.3 var(--d-fuente); overflow-wrap: anywhere; }
.ck-dir-t.vacio { color: var(--d-naranja-txt); font-weight: 700; }
.ck-dir u, .ck-cuando u { flex: none; text-decoration: none; color: var(--d-naranja-txt); font: 700 14px var(--d-fuente); }
.ck-cuando { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: var(--d-tinta); border-top: 1px solid var(--d-linea); margin-top: 8px; padding-top: 8px; }
.ck-cuando[hidden] { display: none; }
.ck-cuando svg { flex: none; color: var(--d-naranja); }
.ck-local { display: flex; flex-direction: column; gap: 2px; font-size: 14px; color: var(--d-gris); }
.ck-local b { color: var(--d-tinta); font-size: 15px; }
.ck-local a { color: var(--d-naranja-txt); font-weight: 700; }
.ck-sin-dom { margin: 0 0 12px; padding: 12px 14px; border-radius: 12px; background: var(--d-rojo-suave); color: var(--d-rojo); font: 600 14px/1.45 var(--d-fuente); }

/* Pago: dos botones grandes y la cajita que se abre */
.pay-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-opt {
  display: flex; align-items: center; justify-content: center; text-align: center; min-height: 56px; padding: 8px; border-radius: 14px;
  border: 2px solid var(--d-linea); background: #fff; cursor: pointer; box-shadow: none; position: relative; margin: 0;
}
.pay-opt.selected { border-color: var(--d-naranja); background: var(--d-naranja-suave); }
.pay-opt .po-radio, .pay-opt .po-emoji { display: none; }
.pay-opt .po-txt { display: flex; flex-direction: column; gap: 1px; font: 700 15px var(--d-fuente); color: var(--d-tinta); }
.pay-opt.selected .po-txt { color: var(--d-naranja-osc); }
.pay-opt .po-sub { font: 400 11.5px/1.25 var(--d-fuente); color: var(--d-gris); }
.pay-opt .po-fee { position: absolute; top: 4px; right: 6px; font: 700 10.5px var(--d-fuente); color: var(--d-gris); }
.pay-opts .pay-box { grid-column: 1 / -1; order: 3; }
.pay-box { display: none; background: none; border: 0; padding: 4px 0 0; margin: 4px 0 0; box-shadow: none; }
.pay-box.open { display: block; }
.pb-title { font: 400 13.5px/1.35 var(--d-fuente); color: var(--d-gris); margin: 0 0 10px; }
.pb-rapidos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 10px; }
.pb-rapidos::before, .pb-rapidos::after { content: none; }
.pb-rapido { min-height: 48px; border-radius: 12px; border: 2px solid var(--d-linea); background: #fff; font: 700 15px var(--d-fuente); color: var(--d-tinta); cursor: pointer; }
.pb-rapido.on { border-color: var(--d-naranja); background: var(--d-naranja-suave); color: var(--d-naranja-osc); }
.pb-row { display: flex; align-items: center; gap: 10px; }
.pb-lbl { font: 500 14px var(--d-fuente); color: var(--d-gris); }
.pb-field { flex: 1; display: flex; align-items: center; gap: 4px; background: var(--d-fondo); border-radius: 12px; min-height: 48px; padding: 0 12px; }
.pb-field input { flex: 1; min-width: 0; border: 0; background: none; outline: 0; font: 700 17px var(--d-fuente); color: var(--d-tinta); }
.pb-cur { font-weight: 700; color: var(--d-gris); }
.pb-max { min-height: 48px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--d-fondo); color: var(--d-naranja-txt); font: 700 14px var(--d-fuente); cursor: pointer; }
.pb-note { margin-top: 8px; font: 600 13.5px var(--d-fuente); color: var(--d-gris); }
.pb-note.ok { color: var(--d-verde); }
.pb-note.warn { color: var(--d-rojo); }
.pay-opt.wallet { margin-top: 12px; min-height: 56px; justify-content: flex-start; gap: 12px; padding: 8px 14px; text-align: left; border-style: dashed; grid-column: auto; }
.pay-opt.wallet.on { border-style: solid; border-color: var(--d-verde); background: var(--d-verde-suave); }
.pay-opt.wallet .po-txt { align-items: flex-start; }
.pay-opt.wallet .po-check { width: 24px; height: 24px; accent-color: var(--d-verde); flex: none; }
/* Código de descuento */
.ck-promo .ck-t { margin-bottom: 8px; }
.ck-promo-fila { display: flex; gap: 8px; }
.ck-promo-fila input { flex: 1; min-width: 0; min-height: 48px; padding: 0 14px; border: 2px solid var(--d-linea); border-radius: 12px; font: 600 16px var(--d-fuente); text-transform: uppercase; outline: 0; background: #fff; color: var(--d-tinta); }
.ck-promo-fila input:focus { border-color: var(--d-naranja); }
.ck-promo-fila .btn { min-height: 48px; padding: 0 18px; border-radius: 12px; }
.ck-promo-msg { font-size: 12.5px; margin-top: 6px; min-height: 16px; }
/* El resumen: sin tarjeta, como en la maqueta */
.co-resumen { background: none; padding: 4px 6px 0; box-shadow: none; margin: 0; }
.co-resumen .summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; border: 0; font: 400 15px var(--d-fuente); color: var(--d-gris); }
.co-resumen .summary-row .label { color: var(--d-gris); }
.co-resumen .summary-row .ok { color: var(--d-verde); }
.co-resumen .summary-row .aviso { color: var(--d-mostaza-txt); }
.co-resumen .summary-row.total { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--d-linea); font: 800 22px var(--d-fuente); color: var(--d-tinta); }
.co-resumen .summary-row.total span { color: var(--d-tinta); }
.envio-aviso { font-size: 12.5px; line-height: 1.4; padding: 8px 10px; border-radius: 10px; background: var(--d-mostaza-suave); color: var(--d-mostaza-txt); margin: 4px 0; }
.envio-aviso.malo { background: var(--d-rojo-suave); color: var(--d-rojo); }

/* ── 9 · «¿A dónde y cuándo?» ───────────────────────────────────────────── */
#checkout-addresses { display: flex; flex-direction: column; gap: 10px; }
.addr-card {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 14px; margin: 0; border-radius: 16px;
  background: #fff; border: 2px solid var(--d-linea); cursor: pointer; font-family: var(--d-fuente); color: var(--d-tinta); box-shadow: none;
}
.addr-card.selected { border-color: var(--d-naranja); background: var(--d-naranja-suave); }
.addr-card.lejos { opacity: .65; }
.ac-radio { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C9C0B6; background: #fff; box-sizing: border-box; }
.addr-card.selected .ac-radio { border-color: var(--d-naranja); background: radial-gradient(circle, var(--d-naranja) 0 45%, #fff 48%); }
.ac-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ac-t b { font: 700 15px var(--d-fuente); }
.ac-t b em { font: 600 11.5px var(--d-fuente); font-style: normal; color: var(--d-naranja-txt); }
.ac-t b em.rojo { color: var(--d-rojo); }
.ac-t span { font-size: 13.5px; line-height: 1.35; color: var(--d-gris); overflow-wrap: anywhere; }
.ac-envio { flex: none; font: 600 12px var(--d-fuente); background: var(--d-mostaza-suave); color: var(--d-mostaza-txt); padding: 5px 9px; border-radius: 999px; }
.ac-otra { min-height: 52px; border-radius: 16px; border: 2px dashed #E3B9A8; background: var(--d-naranja-suave); color: var(--d-naranja-osc); font: 700 15px var(--d-fuente); cursor: pointer; width: 100%; }
#checkout-new-addr.ck-card { margin-top: 12px; }
.ck-ayuda { font-size: 13px; line-height: 1.45; color: var(--d-gris); margin: 0 0 8px; }
.ck-cp-msg { font-size: 12.5px; margin: 0 0 10px; min-height: 14px; text-align: center; color: var(--d-gris); }
.ck-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ck-dos-21 { grid-template-columns: 2fr 1fr; }
.ck-check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--d-gris); margin: 4px 0 14px; cursor: pointer; min-height: 44px; }
.ck-check input { width: 22px; height: 22px; accent-color: var(--d-naranja); }
.uber-map { border-radius: 16px; overflow: hidden; }
.cuando { margin-top: 8px; }
.cuando-cerrado { font-size: 13.5px; color: var(--d-mostaza-txt); background: var(--d-mostaza-suave); padding: 10px 12px; border-radius: 12px; margin: 0 0 10px; }
.cuando-box { background: #fff; border-radius: 20px; padding: 14px; box-shadow: var(--d-sombra); }
.cuando-dias { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; margin-bottom: 10px; scrollbar-width: none; }
.cuando-dias::-webkit-scrollbar { display: none; }
.cuando-dia { flex: none; min-width: 72px; min-height: 56px; border-radius: 14px; border: 2px solid var(--d-linea); background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: var(--d-fuente); color: var(--d-tinta); cursor: pointer; }
.cuando-dia.active { border-color: var(--d-naranja); background: var(--d-naranja-suave); color: var(--d-naranja-osc); }
.cd-1 { font: 700 14px var(--d-fuente); } .cd-2 { font: 500 12px var(--d-fuente); color: inherit; opacity: .8; }
.cuando-hora-lbl { display: block; font: 600 13px var(--d-fuente); color: var(--d-gris); margin: 4px 0 8px; }
.cuando-hora { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.cuando-h { min-height: 48px; border-radius: 14px; border: 2px solid var(--d-linea); background: #fff; font: 600 14px var(--d-fuente); color: var(--d-tinta); cursor: pointer; }
.cuando-h.selected { border-color: var(--d-naranja); background: var(--d-naranja-suave); color: var(--d-naranja-osc); font-weight: 700; }
.cuando-nota { font-size: 13px; line-height: 1.45; color: var(--d-gris); margin: 10px 0 0; }

/* — ajustes de la ficha tras probarla — */
#modal-item #modal-modifiers, #modal-item #modal-modifiers:not(:has(.cg-grp)) { background: none; padding: 0; box-shadow: none; border-radius: 0; }
#modal-modifiers .mod-section-title { justify-content: flex-start; gap: 4px 6px; }
#modal-modifiers .px-card > .mod-section-title::before { margin-right: 0; }
#modal-modifiers .mod-section-title .mod-required, #modal-modifiers .mod-section-title > span:not(.mod-hint) { margin-left: auto; }
#modal-modifiers .px-extras .mod-section-title .mod-hint { margin-left: auto; }
#modal-modifiers .ctx-chip, #modal-modifiers .cg-chip { overflow-wrap: break-word; word-break: normal; hyphens: manual; padding: 6px 4px; font-size: 13.5px; }
#modal-modifiers .ctx-chip-label { font-size: 13.5px; }
/* Revisión independiente: a 320 px «Chistorra/Chorizo» y «Honey&Apple» tocaban el borde de su casilla (la Rubik alojada es un poco más ancha que la de Google). */
@media (max-width: 340px) { #modal-modifiers .ctx-chip, #modal-modifiers .cg-chip { padding: 6px 3px; overflow-wrap: anywhere; } #modal-modifiers .ctx-chip-label { font-size: 12.5px; } #modal-modifiers .ctx-chip-price, #modal-modifiers .cg-chip b { font-size: 12px; } }
.pay-box .pb-note { color: var(--d-gris); font-weight: 500; }
.pay-box .pb-note.ok { color: var(--d-verde); font-weight: 700; }
.pay-box .pb-note.warn { color: var(--d-rojo); font-weight: 700; }

/* ── 10 · MIS PEDIDOS ───────────────────────────────────────────────────── */
.pd-sec { display: flex; align-items: center; gap: 8px; margin: 18px 2px 10px; font: 700 15px var(--d-fuente); letter-spacing: 0; color: var(--d-gris); text-transform: none; }
.pd-sec i { font-style: normal; background: var(--d-naranja); color: #fff; border-radius: 10px; min-width: 20px; height: 20px; padding: 0 6px; font: 800 12px var(--d-fuente); display: inline-flex; align-items: center; justify-content: center; }
.pd-mes { font: 700 14px var(--d-fuente); color: var(--d-gris); margin: 14px 2px 8px; text-transform: capitalize; letter-spacing: 0; }
.pd-vacio { text-align: center; padding: 48px 16px; color: var(--d-gris); }
.pd-vacio.chico { padding: 22px 16px; background: #fff; border-radius: 20px; box-shadow: var(--d-sombra); }
.pd-vacio p { font-size: 15px; margin: 0 0 14px; }
#orders-content .order-card-wrap { margin: 0 0 12px; border-radius: 22px; overflow: hidden; }
#orders-content .order-card-swipe-action { border-radius: 0 22px 22px 0; background: var(--d-rojo); }

/* La tarjeta del pedido vivo: cabeza oscura con el pollito + cuerpo blanco */
#orders-content .order-card.pe { padding: 0; border-radius: 22px; background: #fff; box-shadow: var(--d-sombra); overflow: hidden; font-family: var(--d-fuente); color: var(--d-tinta); }
.pe-head { background: var(--d-tinta); color: #fff; padding: 14px 16px 16px; }
.pe-fila1 { display: flex; align-items: center; gap: 10px; }
.pe-pollito { flex: none; width: 44px; height: 26px; }
/* Revisión independiente: antes `nowrap` + `ellipsis` cortaba la hora («8:10 p…») en 320-375; ahora baja a 2 renglones. */
.pe-k { flex: 1; min-width: 0; font: 500 13px/1.3 var(--d-fuente); color: #D9D1C8; overflow-wrap: anywhere; }
.pe-chip, #orders-content .pe-chip { flex: none; font: 700 12px var(--d-fuente); padding: 5px 10px; border-radius: 999px; background: var(--d-mostaza); color: var(--d-tinta); }
.pe-chip.verde { background: #CDEBD6; color: var(--d-verde); }
.pe-chip.rojo { background: var(--d-rojo-suave); color: var(--d-rojo); }
.pe-kick { margin-top: 14px; font: 700 12px var(--d-fuente); letter-spacing: .1em; text-transform: uppercase; color: var(--d-mostaza); }
.pe-est { margin-top: 3px; font: 800 24px/1.15 var(--d-fuente); letter-spacing: -.02em; }
.pe-eta { margin-top: 5px; font: 400 15px var(--d-fuente); color: #D9D1C8; }
.pe-pasos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 16px; }
.pe-paso { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pe-paso i { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.2); position: relative; overflow: hidden; }
.pe-paso.done i { background: var(--d-naranja); }
.pe-paso.now i::after, .pe-paso.next i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 55%; background: var(--d-naranja); border-radius: 3px; }
.pe-paso.next i::after { width: 20%; }
.pe-paso span { font: 500 12px var(--d-fuente); color: #BDB3A8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pe-paso.now span, .pe-paso.done span { color: #fff; }
.pe-paso.now span { font-weight: 700; }
/* La barra «Preparando tu pedido»: sobre el oscuro */
.pe-head .oc-coc { --coc-pista: rgba(255,255,255,.16); --coc-relleno: var(--d-naranja); --coc-der: var(--d-mostaza); --coc-sub: #D9D1C8;
  margin: 14px 0 0; padding: 12px 14px; border-radius: 16px; background: #2C2723; border: 0; color: #fff; }
.pe-head .oc-coc-tit { font: 700 15px var(--d-fuente); }
.pe-head .oc-coc-r { font: 700 13px var(--d-fuente); color: var(--d-mostaza); }
.pe-head .oc-coc-bar { height: 10px; }
.pe-head .oc-coc-bar i { background: var(--d-naranja); }
.pe-head .oc-coc-s { color: #D9D1C8; font-size: 13px; }
.pe-head .oc-coc.casi { --coc-relleno: #4CAF73; --coc-der: #9BE0B3; background: #1F3B2A; }
.pe-head .oc-coc.casi .oc-coc-bar i { background: #4CAF73; }
.pe-head .oc-coc.demora .oc-coc-bar i { background: var(--d-mostaza); }
.pe-head .oc-coc.demora { background: #2C2723; }
.pe-head .oc-coc-aviso { margin-top: 10px; padding: 12px; border: 0; border-radius: 12px; background: var(--d-mostaza-suave); color: #5A3600; font-size: 13.5px; line-height: 1.5; }
.pe-cuerpo { padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 12px; }
.pe-cuerpo:empty { display: none; }
.pe-codigo { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--d-verde-suave); border-radius: 16px; padding: 14px 16px; color: var(--d-verde); }
.pe-codigo span { font: 600 15px var(--d-fuente); }
.pe-codigo b { font: 900 34px/1 var(--d-fuente); letter-spacing: 1px; }
.pe-aviso { background: var(--d-mostaza-suave); border-radius: 14px; padding: 12px 14px; font-size: 14px; line-height: 1.45; color: var(--d-mostaza-txt); }
.pe-aviso.ok { background: var(--d-verde-suave); color: var(--d-verde); }
.pe-aviso b { color: inherit; }
.pe-aviso-t { display: block; margin-top: 4px; font-weight: 600; }
.pe-aviso-t.rojo { color: var(--d-rojo); font-weight: 700; }
.pe-aviso .transfer-countdown { font-family: var(--d-fuente); font-weight: 800; }
/* ¿Se te olvidó algo? */
.pe-agr { background: #fff; border: 2px solid var(--d-mostaza); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.pe-agr-h { display: flex; align-items: center; gap: 12px; }
.pe-agr-ic { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--d-mostaza-suave); color: var(--d-mostaza-txt); display: flex; align-items: center; justify-content: center; }
.pe-agr-h b { display: block; font: 800 16px var(--d-fuente); }
/* (revisión independiente) `div span`, no `span`: el selector corto pisaba el display:flex del icono y el «+» quedaba arriba a la izquierda del círculo */
.pe-agr-h div span { display: block; font-size: 13px; color: var(--d-gris); line-height: 1.35; }
.pe-agr-b { min-height: 52px; border: 0; border-radius: 14px; background: var(--d-naranja); color: #fff; font: 800 16px var(--d-fuente); cursor: pointer; }
.pe-agr-r { text-align: center; font-size: 13px; color: var(--d-gris); }
.pe-agr-r b { color: var(--d-tinta); }
/* Tu pedido */
.pe-pedido { display: flex; flex-direction: column; gap: 4px; }
.pe-pedido-t { font: 700 16px var(--d-fuente); margin-bottom: 4px; }
.pe-pedido-t em { font: 600 12.5px var(--d-fuente); font-style: normal; color: var(--d-verde); }
.pe-item { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
.pe-item-f { flex: none; width: 46px; height: 46px; border-radius: 10px; overflow: hidden; background: var(--d-naranja-suave) url(/icons/ui/pollito.png) center / 60% no-repeat; }
.pe-item-f img { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--d-naranja-suave); }
.pe-item-n { flex: 1; min-width: 0; font: 600 14.5px/1.3 var(--d-fuente); overflow-wrap: anywhere; }
.pe-item-n small { display: block; font: 400 12.5px var(--d-fuente); color: var(--d-gris); }
.pe-item-n em, .pa-det-r em { font: 700 10px var(--d-fuente); font-style: normal; text-transform: uppercase; letter-spacing: .03em; color: var(--d-verde); background: var(--d-verde-suave); border-radius: 4px; padding: 1px 5px; margin-left: 4px; white-space: nowrap; }
.pe-item b { flex: none; font: 700 15px var(--d-fuente); }
.pe-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--d-linea); font: 800 19px var(--d-fuente); }
.pe-pago { display: flex; justify-content: space-between; gap: 10px; font: 700 14px var(--d-fuente); color: var(--d-verde); }
.pe-pago:empty, .pe-pago b:empty { display: none; }
.pe-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pe-acc.tres { grid-template-columns: repeat(3, 1fr); }
.pe-btn { min-height: 50px; border: 0; border-radius: 14px; background: var(--d-fondo); color: var(--d-tinta); font: 700 15px var(--d-fuente); display: flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; padding: 0 10px; }
.pe-btn.live { grid-column: 1 / -1; background: var(--d-naranja); color: #fff; min-height: 54px; }
.pe-rojo { color: var(--d-rojo) !important; }
.pe-cancelar { min-height: 48px; border-radius: 14px; border: 2px solid var(--d-linea); background: #fff; color: var(--d-rojo); font: 700 15px var(--d-fuente); cursor: pointer; }
/* Lo heredado, re-pintado para el cuerpo claro */
.oc-driver { margin: 0; padding: 10px; border-radius: 16px; background: var(--d-fondo); display: flex; align-items: center; gap: 10px; }
.oc-driver.con-chat { margin: 0; background: var(--d-mostaza-suave); border: 0; }
.oc-dav { background: var(--d-mostaza); color: var(--d-tinta); font: 800 15px var(--d-fuente); width: 40px; height: 40px; }
.oc-dav .ico { color: var(--d-tinta); }
.oc-dn { font: 700 15px var(--d-fuente); color: var(--d-tinta); }
.oc-dm { font: 400 13px var(--d-fuente); color: var(--d-gris); }
.oc-chat-nota { color: var(--d-naranja-txt); font: 600 12px var(--d-fuente); }
.oc-chat-nota.nuevo { color: var(--d-rojo); font-weight: 800; }
.oc-chat-cta { background: var(--d-naranja); color: #fff; border-radius: 12px; font: 700 13px var(--d-fuente); }
.oc-online { background: var(--d-verde); }
.reub-aviso { margin: 0; background: var(--d-mostaza-suave); border: 0; border-radius: 16px; }
.reub-aviso.suave { background: var(--d-mostaza-suave); }
.reub-txt b, .reub-aviso.suave .reub-txt b { color: var(--d-tinta); font: 800 15px var(--d-fuente); }
.reub-txt span, .reub-aviso.suave .reub-txt span { color: var(--d-gris); font-size: 13px; }
.reub-bt { border: 2px solid var(--d-linea); border-radius: 12px; font: 700 14px var(--d-fuente); }
.reub-bt.prim { background: var(--d-naranja); border-color: var(--d-naranja); color: #fff; }
.oc-prog { background: var(--d-mostaza-suave); border-radius: 14px; border: 0; padding: 12px 14px; }
.oc-prog .op-t { font: 700 14px var(--d-fuente); } .oc-prog .op-s { color: var(--d-mostaza-txt); }
.oc-tr { border-radius: 16px; border: 0; background: var(--d-fondo); }
.oc-tr-sum { font: 700 14px var(--d-fuente); color: var(--d-tinta); }
.oc-tr-copy { background: #fff; border: 2px solid var(--d-linea); color: var(--d-naranja-txt); border-radius: 10px; font-weight: 700; }
.oc-tr-val.mono { font-family: var(--d-fuente); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.oc-tr-val { word-break: normal; overflow-wrap: normal; }
.oc-tr-val .g { white-space: nowrap; }
@media (max-width: 340px) { .oc-tr-lbl { flex-basis: 66px; } .oc-tr-val { font-size: 12.5px; } .oc-tr-copy { padding-left: 8px; padding-right: 8px; } }

/* Pedidos anteriores */
.pa-card { background: #fff; border-radius: 20px; padding: 14px; margin: 0; box-shadow: var(--d-sombra); font-family: var(--d-fuente); display: block; }
.order-card.pa-card { border-radius: 20px; padding: 14px; }
#orders-content .order-card-wrap:has(> .pa-card) { border-radius: 20px; }
.pa-top { display: flex; align-items: center; gap: 12px; }
.pa-fotos img, .pa-sinfoto { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; border: 0; display: block; }
.pa-sinfoto { background: var(--d-naranja-suave) url(/icons/ui/pollito.png) center / 62% no-repeat; }
.pa-d b { font: 700 15px/1.25 var(--d-fuente); white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pa-d span { font: 400 13px var(--d-fuente); color: var(--d-gris); white-space: normal; }
.pa-acc { display: block; margin-top: 12px; }
.pa-btn.pri { background: #fff; color: var(--d-naranja-txt); border: 2px solid var(--d-naranja); border-radius: 12px; min-height: 44px; font: 700 14px var(--d-fuente); width: 100%; }
.pa-card:not(.compacto) .pa-top { padding-right: 0; }
.pa-ver { display: block; width: 100%; margin-top: 6px; min-height: 40px; border: 0; background: none; color: var(--d-gris); font: 600 13px var(--d-fuente); cursor: pointer; text-decoration: underline; }
.cal-slot { margin-top: 2px; }
.cal-link { border: 0; background: none; padding: 4px 0; min-height: 28px; font: 700 14px var(--d-fuente); color: var(--d-naranja-txt); cursor: pointer; text-align: left; }
.pa-card.compacto { display: flex; align-items: center; gap: 10px; padding: 12px; }
.pa-card.compacto .pa-top { flex: 1; min-width: 0; }
.pa-card.compacto .pa-acc { margin: 0; flex: none; }
.pa-card.compacto .pa-btn.pri { width: 84px; min-height: 48px; padding: 4px 8px; font-size: 13px; line-height: 1.2; }
.pa-det { border-top: 1px solid var(--d-linea); }

/* ── 11 · PERFIL («Mi perfil») ──────────────────────────────────────────── */
#profile-content { padding: 0; font-family: var(--d-fuente); color: var(--d-tinta); }
.pf-bloque { background: var(--d-tinta); color: #fff; border-radius: 0 0 28px 28px; padding: calc(env(safe-area-inset-top) + 18px) 16px 16px; }
.pf-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pf-cab h1 { margin: 0; font: 800 24px var(--d-fuente); letter-spacing: -.02em; }
.pf-cab .pollito { width: 56px; height: 33px; }
.pf-bloque .pf-fila { display: flex; align-items: center; gap: 14px; }
.pf-av { flex: none; width: 72px; height: 72px; border-radius: 50%; padding: 3px; position: relative; cursor: pointer; background: var(--d-naranja); }
.pf-av-in { width: 100%; height: 100%; border-radius: 50%; border: 3px solid var(--d-tinta); background-color: var(--d-naranja); background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; font: 800 26px var(--d-fuente); color: #fff; }
.pf-cam { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--d-tinta); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.pf-cam .ico { width: 14px; height: 14px; }
.pf-nom { font: 800 22px/1.2 var(--d-fuente); letter-spacing: -.01em; overflow-wrap: anywhere; }
.pf-tel { color: #CFC6BE; font-size: 13.5px; margin-top: 1px; }
.pf-vip { display: inline-flex; align-items: center; gap: 6px; margin-top: 7px; padding: 5px 11px; border-radius: 999px; font: 700 12.5px var(--d-fuente); }
.pf-vip .ico { width: 14px; height: 14px; }
.pf-prog { margin-top: 16px; }
.pf-prog-t { display: flex; justify-content: space-between; gap: 10px; font: 600 13.5px var(--d-fuente); color: #fff; }
.pf-bar { height: 8px; border-radius: 99px; background: rgba(255,255,255,.18); margin-top: 8px; overflow: hidden; }
.pf-bar i { display: block; height: 100%; border-radius: 99px; }
.pf-niveles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pf-niveles.uno { grid-template-columns: 1fr; }
.pf-nivel { border-radius: 16px; padding: 12px; border: 2px solid var(--vc, #fff); background: #2C2723; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pf-nivel.sig { border-style: dashed; }
.pf-nivel > span:first-child { font: 700 11.5px var(--d-fuente); letter-spacing: .06em; text-transform: uppercase; color: var(--vc); }
.pf-nivel > span:last-child { font: 400 14px/1.35 var(--d-fuente); color: #fff; }
.pf-nivel b { font-weight: 800; }
.pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 16px; padding: 0; border: 0; }
.pf-stats > div { text-align: center; display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 0 4px; border: 0 !important; }
.pf-stats b { font: 800 17px var(--d-fuente); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-stats span { font-size: 12.5px; color: #CFC6BE; }
.pf-bloque .pf-saldo { background: none; padding: 0; margin: 16px 0 0; box-shadow: none; }
.pf-saldo-fila { display: flex; justify-content: space-between; align-items: baseline; }
.pf-saldo-l { font: 600 13.5px var(--d-fuente); color: #CFC6BE; }
.pf-saldo-tot { font: 800 22px var(--d-fuente); color: #fff; letter-spacing: -.01em; margin: 0; }
.pf-saldo-tot small { font-size: 14px; color: #CFC6BE; }
.pf-mezcla { height: 6px; background: rgba(255,255,255,.14); margin: 8px 0 10px; }
.pf-mezcla .e { background: var(--d-mostaza); } .pf-mezcla .p { background: #fff; }
.pf-partes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pf-parte { border: 0; text-align: left; border-radius: 16px; padding: 12px; min-width: 0; background: #2C2723 !important; display: flex; flex-direction: column; gap: 2px; cursor: pointer; font-family: var(--d-fuente); color: #fff; }
.pf-parte .n { font: 500 13px var(--d-fuente); color: #CFC6BE !important; display: block; }
.pf-parte b { font: 800 22px var(--d-fuente); color: #fff; margin: 0; display: block; }
.pf-parte.e b { color: var(--d-mostaza); }
.pf-parte > span:last-child { font-size: 12px; color: #A89F96 !important; }
.pf-cod { margin-top: 12px; border-radius: 16px; padding: 12px 14px; background: #2C2723; color: #fff; box-shadow: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; overflow: visible; }
.pf-cod-k { font: 400 14px var(--d-fuente); color: #CFC6BE; padding: 0; text-transform: none; letter-spacing: 0; opacity: 1; }
.pf-cod-k b { color: #fff; font: 800 16px var(--d-fuente); letter-spacing: .08em; margin-left: 4px; }
.pf-cod-copiar { position: static; min-height: 40px; padding: 0 18px; background: #fff; color: var(--d-tinta); border-radius: 12px; font: 700 14px var(--d-fuente); display: inline-flex; align-items: center; }
.pf-accesos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 16px 0; }
.pf-ac { background: #fff; border: 0; border-radius: 16px; padding: 12px 2px 10px; min-height: 84px; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: var(--d-fuente); box-shadow: var(--d-sombra); cursor: pointer; }
.pf-ac .ic { width: 28px; height: 28px; margin: 0; background: none !important; color: var(--d-naranja); }
.pf-ac .ic .ico { width: 24px; height: 24px; color: var(--d-naranja) !important; }
.pf-ac > span:last-child { font: 700 12px var(--d-fuente); color: var(--d-tinta); }
.pf-sec-t { margin: 20px 16px 8px; }
.pf-sec-t h2 { font: 800 19px var(--d-fuente); }
.pf-sec-t button { font: 700 14px var(--d-fuente); color: var(--d-naranja-txt); }
#profile-orders-inline { padding: 0 16px; }
.pf-pedidos { background: #fff; border-radius: 20px; padding: 4px 14px; box-shadow: var(--d-sombra); }
.pf-pedidos .pa-card { box-shadow: none; padding: 12px 0; border-radius: 0; border-bottom: 1px solid var(--d-linea); }
.pf-pedidos .pa-card:last-child { border-bottom: 0; }
.pf-vacio { text-align: center; color: var(--d-gris); font-size: 14px; padding: 18px 12px; background: #fff; border-radius: 20px; }
.pf-vacio button { display: block; margin: 10px auto 0; min-height: 44px; padding: 0 20px; border: 0; border-radius: 12px; background: var(--d-naranja); color: #fff; font: 700 14px var(--d-fuente); cursor: pointer; }
.pf-gtit { font: 800 19px var(--d-fuente); text-transform: none; letter-spacing: 0; color: var(--d-tinta); margin: 22px 18px 8px; }
.pf-grupo { background: #fff; border-radius: 20px; overflow: hidden; margin: 0 16px 6px; box-shadow: var(--d-sombra); }
.profile-menu-item.pf-item { min-height: 56px; padding: 12px 18px; display: flex; align-items: center; gap: 12px; }
.pf-grupo > .pf-item:not(:first-child) { border-top: 1px solid var(--d-linea); }
.pf-item .pm-label { font: 400 16px var(--d-fuente); color: var(--d-tinta); }
.pf-item .pm-label small { color: var(--d-gris); font-size: 12.5px; }
.pf-item .pm-arrow { color: #A89F96; font-size: 22px; }
.pf-switch { flex: none; width: 52px; height: 32px; border-radius: 16px; background: #CFC6BE; position: relative; transition: background .2s; }
.pf-switch > span { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.pf-switch.on { background: var(--d-verde); }
.pf-switch.on > span { transform: translateX(20px); }
.pf-grupo > .profile-section-body { padding: 0 14px 10px; }
.pf-salir { display: flex; align-items: center; gap: 12px; margin: 18px 16px 8px; }
.pf-sal { flex: 1; min-height: 54px; border-radius: 14px; border: 2px solid var(--d-tinta); background: transparent; color: var(--d-tinta); font: 700 16px var(--d-fuente); cursor: pointer; }
.pf-borrar { flex: 1; min-height: 54px; border: 0; background: none; color: var(--d-rojo); font: 700 15px var(--d-fuente); cursor: pointer; text-decoration: none; }
#app-version-label { color: var(--d-gris); }

/* ── 12 · Calificar, Mi saldo, Avisos y la pantalla verde ───────────────── */
#page-calificar { font-family: var(--d-fuente); }
.cal-wrap { max-width: 420px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 36px) 22px 32px; text-align: center; }
.cal-logo { width: 84px; height: 50px; object-fit: contain; border-radius: 0; margin: 0 auto 16px; display: block; background: none; box-shadow: none; }
.cal-titulo { font: 800 26px/1.2 var(--d-fuente); letter-spacing: -.02em; margin: 0 0 8px; color: var(--d-tinta); }
.cal-pedido, .cal-productos { font-size: 14px; color: var(--d-gris); margin: 0 0 4px; }
.cal-estrellas { display: flex; justify-content: center; gap: 6px; margin: 22px 0 6px; }
.cal-estrella { width: 56px; height: 56px; border: 0; background: none; padding: 0; cursor: pointer; }
.cal-estrella svg { width: 100%; height: 100%; fill: #E0D8CF; transition: fill .12s; }
.cal-estrella.on svg { fill: var(--d-mostaza); }
.cal-leyenda { font: 700 15px var(--d-fuente); color: var(--d-gris); min-height: 22px; margin: 0 0 16px; }
.cal-leyenda.elegida { color: var(--d-tinta); }
.cal-que { font: 700 15px var(--d-fuente); text-align: left; margin: 6px 0 8px; }
.cal-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 14px; }
.cal-chip { min-height: 48px; border-radius: 14px; border: 2px solid var(--d-linea); background: #fff; font: 600 14px var(--d-fuente); color: var(--d-tinta); cursor: pointer; }
.cal-chip.on { border-color: var(--d-naranja); background: var(--d-naranja-suave); color: var(--d-naranja-osc); font-weight: 700; }
.cal-label { display: block; text-align: left; font: 600 13px var(--d-fuente); color: var(--d-gris); margin: 6px 0; }
.cal-label span { font-weight: 400; }
.cal-comentario { width: 100%; border: 2px solid var(--d-linea); border-radius: 14px; background: #fff; padding: 12px 14px; font: 400 16px var(--d-fuente); color: var(--d-tinta); min-height: 96px; resize: none; outline: 0; box-sizing: border-box; }
.cal-comentario:focus { border-color: var(--d-naranja); }
.cal-contador { text-align: right; font-size: 12px; color: var(--d-gris); margin: 4px 0 12px; }
.cal-error { color: var(--d-rojo); font-size: 13.5px; margin: 0 0 10px; }
.cal-enviar { min-height: 56px; border-radius: 16px; font-weight: 800; }
.cal-ahora-no { margin-top: 8px; min-height: 44px; border: 0; background: none; color: var(--d-gris); font: 600 14px var(--d-fuente); cursor: pointer; text-decoration: underline; }
.cal-gracias .cal-check { color: var(--d-verde); }
.cal-check svg { width: 64px; height: 64px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cal-texto, .cal-nota { color: var(--d-gris); font-size: 14.5px; line-height: 1.5; }
.cal-barra { height: 4px; border-radius: 2px; background: var(--d-linea); overflow: hidden; margin: 14px 0 6px; }
.cal-barra span { display: block; height: 100%; background: var(--d-naranja); animation: calBarra 3s linear forwards; }
@keyframes calBarra { from { width: 0; } to { width: 100%; } }
.cal-cita { margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: #fff; color: var(--d-tinta); font-size: 14.5px; text-align: left; }
.cal-estrella-fija { width: 40px; height: 40px; } .cal-estrella-fija svg { width: 100%; height: 100%; fill: #E0D8CF; } .cal-estrella-fija.on svg { fill: var(--d-mostaza); }

/* Mi saldo */
#page-wallet-movements { font-family: var(--d-fuente); }
.sd-pt { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 16px; }
.sd-par { border-radius: 18px; padding: 14px; display: flex; flex-direction: column; gap: 4px; background: var(--d-tinta); color: #fff; }
.sd-par span { font: 500 13.5px var(--d-fuente); color: #CFC6BE; }
.sd-par b { font: 800 24px var(--d-fuente); }
.sd-par.e b { color: var(--d-mostaza); }
.sd-ayuda { margin: 12px 16px 0; font-size: 13.5px; line-height: 1.45; color: var(--d-gris); }
.sd-h2 { margin: 20px 18px 8px; }
.sd-lista { margin: 0 16px 24px; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: var(--d-sombra); }
.mov-row { background: none; border-bottom: 1px solid var(--d-linea) !important; }
.mov-row:last-child { border-bottom: 0 !important; }
.mov-row.resaltado { background: var(--d-mostaza-suave); box-shadow: inset 4px 0 0 var(--d-mostaza); }
.pf-franja { border-radius: 14px; }

/* Avisos (la campanita) */
#page-avisos { font-family: var(--d-fuente); }
#avisos-lista { padding: 0 16px 32px; }
.av-grupo { font: 700 14px var(--d-fuente); color: var(--d-gris); margin: 16px 2px 8px; }
.av-fila { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 0; background: #fff; border-radius: 16px; padding: 12px 14px; min-height: 64px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--d-sombra); font-family: var(--d-fuente); color: var(--d-tinta); }
.av-fila.nuevo { box-shadow: inset 4px 0 0 var(--d-naranja), var(--d-sombra); }
.av-ic { flex: none; width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--d-naranja-suave); color: var(--d-naranja); }
.av-ic.chat, .av-ic.novedad { background: var(--d-mostaza-suave); color: var(--d-mostaza-txt); }
.av-ic.saldo { background: var(--d-verde-suave); color: var(--d-verde); }
.av-ic.promo { background: var(--d-mostaza-suave); color: var(--d-mostaza-txt); }
.av-t { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.av-t b { font: 700 15px/1.25 var(--d-fuente); }
.av-t span { font-size: 13px; line-height: 1.35; color: var(--d-gris); }
.av-h { flex: none; font-size: 12.5px; color: var(--d-gris); }
.av-pie { text-align: center; font-size: 12.5px; color: var(--d-gris); margin: 16px 8px 0; }
.av-vacio { text-align: center; padding: 56px 24px; color: var(--d-gris); display: flex; flex-direction: column; gap: 6px; }
.av-vacio b { color: var(--d-tinta); font-size: 17px; }

/* ¡Tu pedido está confirmado! — pantalla VERDE */
.cf {
  position: fixed; inset: 0; z-index: 3000; background: var(--d-verde); color: #fff; font-family: var(--d-fuente);
  display: flex; flex-direction: column; align-items: center; gap: 16px; overflow-y: auto;
  padding: calc(env(safe-area-inset-top) + 40px) 24px calc(env(safe-area-inset-bottom) + 28px);
  opacity: 0; transition: opacity .25s;
}
.cf.on { opacity: 1; }
.cf > * { width: 100%; max-width: 420px; }
.cf-pollito { width: 76px !important; height: 46px; object-fit: contain; margin-bottom: 14px; }
.cf-check { width: 120px !important; height: 120px; border-radius: 60px; background: #fff; color: var(--d-verde); display: flex; align-items: center; justify-content: center; flex: none; }
.cf h1 { margin: 0; font: 800 30px/1.15 var(--d-fuente); text-align: center; letter-spacing: -.02em; }
.cf-sub { margin: 0; font-size: 16px; line-height: 1.4; color: #CDEBD6; text-align: center; }
.cf-datos { background: var(--d-verde-osc); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.cf-datos > div { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.cf-datos span { color: #CDEBD6; } .cf-datos b { text-align: right; }
.cf-acc { margin-top: auto; padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.cf-ver { height: 60px; border: 0; border-radius: 18px; background: #fff; color: var(--d-verde); font: 800 18px var(--d-fuente); cursor: pointer; }
.cf-menu { height: 52px; border-radius: 14px; border: 2px solid #CDEBD6; background: none; color: #fff; font: 700 15px var(--d-fuente); cursor: pointer; }

/* ── 13 · Hojas, avisos y detalles sueltos ──────────────────────────────── */
.modal-overlay { background: rgba(30,26,23,.55); }
.modal-sheet { border-radius: 24px 24px 0 0; background: #fff; font-family: var(--d-fuente); color: var(--d-tinta); }
.modal-handle { background: #D9D1C8; width: 44px; height: 5px; }
.modal-title { font: 800 21px var(--d-fuente); letter-spacing: -.01em; }
.preguntar-app .modal-sheet { padding-top: 24px; }
.preguntar-app .pa-txt { font-size: 14.5px; line-height: 1.5; color: var(--d-gris); margin: -6px 0 16px; }
#modal-novedades .modal-sheet { border-radius: 24px; }
#modal-novedades span[style*="uppercase"] { color: var(--d-naranja-txt) !important; }
/* «Agregar a tu pedido» y «¿Lo agregamos a tu pedido?» */
#modal-agregar .modal-sheet, #modal-agregar-carrito .modal-sheet { background: var(--d-fondo); }
#agregar-cuerpo, #agrc-cuenta { font-family: var(--d-fuente); }
#agrc-cuenta > div { background: var(--d-mostaza-suave) !important; border: 2px solid var(--d-mostaza) !important; border-radius: 18px !important; }
#agregar-cuerpo [style*="rgba(255,149,0,.08)"] { background: var(--d-mostaza-suave) !important; border: 2px solid var(--d-mostaza) !important; border-radius: 18px !important; }
#agregar-cuerpo button.btn-primary.btn-sm { background: var(--d-naranja); }
#agregar-enviar, #agrc-si { min-height: 56px; border-radius: 16px; font-weight: 800; font-size: 16px; }
#agrc-no { min-height: 50px; }
/* Direcciones guardadas del perfil */
.ad-card { border-radius: 20px; box-shadow: var(--d-sombra); }
.ad-card.es-principal { box-shadow: 0 0 0 2px var(--d-naranja); }
.ad-ico { background: var(--d-naranja-suave); color: var(--d-naranja); }
.ad-chip { background: var(--d-verde-suave); color: var(--d-verde); }
.ad-nueva { border: 2px dashed #E3B9A8; background: var(--d-naranja-suave); color: var(--d-naranja-osc); border-radius: 16px; }
.ad-nota { color: var(--d-naranja-osc); }
.ad-acc .ad-borrar { background: var(--d-rojo-suave); color: var(--d-rojo); }
/* Franja y letrero de saldo (antes azules) */
.pf-franja, .pf-franja.p { background: var(--d-mostaza-suave); border: 0; color: var(--d-tinta); }
.pf-franja .ic, .pf-franja.p .ic { background: var(--d-naranja); }
.pf-franja .t b, .pf-franja .fl { color: var(--d-tinta); } .pf-franja .t span { color: var(--d-gris); }
.pf-franja.e { background: var(--d-verde-suave); } .pf-franja.e .ic { background: var(--d-verde); } .pf-franja.e .t b, .pf-franja.e .fl { color: var(--d-verde); }
.pf-franja.menos { background: var(--d-rojo-suave); } .pf-franja.menos .ic { background: var(--d-rojo); color: #fff; } .pf-franja.menos .t b, .pf-franja.menos .fl { color: var(--d-rojo); }
.pf-saldo.resalta { box-shadow: none; }
.letrero-saldo { border-radius: 18px; font-family: var(--d-fuente); }
.letrero-saldo .ic { background: var(--d-verde-suave); color: var(--d-verde); }
.letrero-saldo button { background: var(--d-naranja); color: #fff; }
/* Mapa y rastreo en vivo */
#modal-livemap .modal-sheet { border-radius: 24px 24px 0 0; }
.uber-pin .up-cuerpo path { fill: var(--d-naranja); }
/* Cuenta suspendida (la pinta app.js con estilos propios en línea) */
#cuenta-suspendida { font-family: var(--d-fuente); }
/* Instalar versión nueva de Android */
.app-update-bar, #app-update-bar { font-family: var(--d-fuente); }
/* Pantalla «Enviando…» y «sin internet» son de módulos compartidos (enviando.js, nativo.js): sólo heredan la letra */
.pantalla .pt-cab h1 { font-size: 21px; line-height: 1.15; }
.cuando-box { border: 0; }
.cuando-hora, select.cuando-hora { background: none; border: 0; padding: 0; margin: 0; border-radius: 0; min-height: 0; }
.cuando-dias { padding: 2px 2px 8px; }

.pe-paso span { font-size: 11.5px; letter-spacing: -.01em; }
@media (max-width: 340px) { .pe-paso span { font-size: 10.5px; } .pe-pasos { gap: 4px; } }
#cal-chips-caja { width: 100%; }
#cal-chips-caja[hidden] { display: none; }
.cal-chips { width: 100%; }
.cal-estrella svg, .cal-estrella-fija svg { stroke: none; }
.cal-label { text-transform: none; letter-spacing: 0; }
#pay-card { grid-column: 1 / -1; }