/* pedido.css — Fase B: la pantalla del empleado con la piel del CRM.
   Carga después de marca.css. La estructura y los IDs de pedido.html no se
   tocaron (los usa firebase-catering.js y el <script> de la propia página);
   esto solo retoma sus mismas clases con los tokens, la tipografía y los
   tiempos de marca.css. Ver MARCA.md → sección 11, fila pedido.html.

   Componentes que ya son 100% del CRM y no necesitan nada acá porque
   marca.css los resuelve solos con solo poner la clase: .tarjeta (en
   .order-section), .chip (los de "tu plato de siempre"), .btn/.campo/label/
   input/select/textarea (toda la base de formulario), .aviso.ember, .aviso/.rojo/.verde (los alert de error/éxito). */

:root {
  /* Los únicos tokens que sigue leyendo el JS de la página (toggleIngrediente,
     resetIngredientes, cargarOpcionesMenu) vía var(--x) en estilos inline.
     No se tocó el JS: sólo se les cambió el valor a los tokens del CRM. */
  --bg: var(--c-superficie-alt);
  --border: var(--c-linea);
  --accent: var(--c-acento);
  --accent-glow: rgb(var(--acento-rgb) / .16);
  --text-muted: var(--c-texto-3);
}

/* ── Encabezado de "Tu pedido" (arriba de la tarjeta) ─────────────── */
.pedido-header { text-align: center; margin-bottom: 22px; }
.pedido-header-line { width: 44px; height: 2px; background: var(--c-cuero); margin: 0 auto 16px; border-radius: 2px; }
.pedido-title { font-family: var(--sans); font-weight: 800; font-size: clamp(22px, 5vw, 27px); letter-spacing: -.02em; color: var(--c-texto); }
.pedido-sub { color: var(--c-texto-2); font-size: 13.5px; margin-top: 8px; }

/* ── Login (paso 1) ────────────────────────────────────────────────── */
/* Velocidad (DEMO 9): la cabecera (módulo shell-catering.js) y el lockup (DOMContentLoaded) llegan después del
   primer pintado y empujaban el login (CLS 0,30). Mientras están vacíos se les guarda el alto que van a tener:
   cabecera 55 / 60 (≥900) / 94 px (≥1024); lockup lv-grande = 104 px + el ícono (clamp de lockup.css). */
#topbar:empty { min-height: 55px; }
@media (min-width: 900px) { #topbar:empty { min-height: 60px; } }
@media (min-width: 1024px) { #topbar:empty { min-height: 94px; } }
#lockupLogin:empty { min-height: calc(104px + clamp(110px, 26vw, 150px)); }
.login-panel { text-align: center; padding: 4px 0; }
.login-title { font-family: var(--sans); font-weight: 800; font-size: 17px; line-height: 1.4; color: var(--c-texto); margin-top: 10px; letter-spacing: -.01em; }
.login-title em { color: var(--c-acento); font-style: normal; }
/* (1/10) Login mínimo: los tres caminos + "Primera vez", uno abajo del otro. */
.login-caminos { display: flex; flex-direction: column; gap: 10px; }
.login-caminos .btn, #caminoForm .login-btn { width: 100%; text-align: center; }
#caminoTitulo { margin: 0 0 12px; }
.login-label { display: block; text-align: left; font-size: 13px; font-weight: 600; color: var(--c-texto-2); margin: 0 0 6px; }
#nombreInput { letter-spacing: normal; font-weight: 500; }
#caminoForm .login-btn { margin-top: 12px; }
.form-group { margin-bottom: 14px; }
/* Los .aviso de esta pantalla (error/éxito) van sueltos, sin un
   .campo que les dé margen: se lo dan ellos mismos. */
#loginError.aviso, #pedidoError.aviso, #pedidoSuccess.aviso { margin-bottom: 14px; }
/* label, input/select/textarea, .campo: ya vienen de marca.css tal cual
   (misma piel que el resto del sistema) — .form-input/.form-label no se
   quitaron del HTML pero tampoco necesitan una regla propia acá. */
.login-input { text-align: center; letter-spacing: .14em; font-weight: 700; }
/* El PIN, calcado del pin-grande real del login del CRM (acceso/index.html). */
.pin-grande { text-align: center; font-size: 26px; letter-spacing: .4em; min-height: 54px; font-weight: 800; }
.pin-hola { font-size: 13px; color: var(--c-texto-2); margin-bottom: 8px; }
.login-ayuda { font-size: 12px; color: var(--c-texto-2); margin-top: 16px; line-height: 1.5; }
.login-ayuda a { color: var(--c-acento); }
.olvidar-box { text-align: center; margin-top: 16px; font-size: 12.5px; color: var(--c-texto-2); }
.olvidar-box p { margin: 0 0 4px; }
.login-entrando { text-align: center; padding: 28px 14px; color: var(--c-texto-2); font-size: 13px; }

/* ── Botones: en esta pantalla, salvo ".btn-secondary" explícito, todo
   botón es LA acción del paso en el que está (nunca hay dos visibles a la
   vez), así que el .btn de marca.css se sobreescribe acá para que sea
   siempre el primario del CRM (ancho completo, como ya era antes). ── */
.btn { background: var(--c-bordo); border-color: var(--c-cuero); color: var(--c-texto); width: 100%; box-shadow: var(--sombra-1); }
.btn:hover { background: var(--c-bordo-hover); border-color: var(--c-acento-hover); color: var(--c-texto); }
.btn:disabled { background: var(--c-bordo); opacity: .45; }
.btn-secondary, .btn.btn-secondary { background: transparent; border-color: var(--c-linea-fuerte); color: var(--c-texto-2); width: auto; box-shadow: none; }
.btn-secondary:hover, .btn.btn-secondary:hover { background: var(--c-superficie-alt); border-color: var(--c-texto-3); color: var(--c-texto); }
.btn-sm, .btn.btn-sm { width: auto; padding: 7px 14px; min-height: 36px; font-size: 12.5px; }
.step2-barra { display: flex; justify-content: space-between; align-items: center; margin-bottom: 22px; gap: 8px; }
.step2-barra .btn { margin: 0; width: auto; }

/* ── PIN opcional, info del empleado ───────────────────────────────── */
.aviso-pin { background: var(--c-superficie-2); border: 1px solid var(--c-linea); border-left: 3px solid var(--c-cuero); border-radius: var(--radio-medio); padding: 14px 16px; margin-bottom: 18px; }
.aviso-pin-tit { font-weight: 700; margin-bottom: 4px; color: var(--c-texto); }
.aviso-pin-txt { font-size: 12.5px; color: var(--c-texto-2); margin-bottom: 12px; line-height: 1.55; }
.info-box { background: var(--c-superficie-2); border: 1px solid var(--c-linea); border-radius: var(--radio-medio); padding: 14px 16px; margin-bottom: 16px; }
.info-box h3 { color: var(--c-acento); font-size: 14px; font-weight: 800; margin-bottom: 4px; }
.info-box p { font-size: 12.5px; color: var(--c-texto-2); margin: 2px 0; }

/* ── Cuenta regresiva al corte ──────────────────────────────────────── */
.cuenta-regresiva { text-align: center; padding: 9px 14px; margin-bottom: 14px; border-radius: var(--radio-medio); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; background: var(--c-superficie-2); color: var(--c-texto-2); border: 1px solid var(--c-linea); }
.cuenta-regresiva.aviso { background: var(--c-alerta-suave); border-color: color-mix(in srgb, var(--c-alerta) 45%, transparent); color: var(--c-alerta); }
.cuenta-regresiva.urgente { background: var(--c-bordo-suave); border-color: var(--c-bordo); color: var(--c-peligro-claro); font-size: 14px; animation: pulso-cierre 1s ease-in-out infinite; }
.cuenta-regresiva.cerrado { background: var(--c-peligro-suave); border-color: var(--c-peligro); color: var(--c-peligro); }
@keyframes pulso-cierre { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .cuenta-regresiva.urgente { animation: none; } }

/* ── "Hoy no como" / pedido tardío ──────────────────────────────────── */
.no-como-box { background: var(--c-superficie-2); border: 1px solid var(--c-linea); border-radius: var(--radio-medio); padding: 14px 16px; margin-bottom: 18px; text-align: center; }
.no-como-box p { font-size: 13px; color: var(--c-texto-2); margin-bottom: 10px; }
.no-como-box button { width: auto; padding: 8px 16px; }
.tardio-box { background: var(--c-superficie); border: 1px solid var(--c-linea); border-left: 4px solid var(--c-cuero); border-radius: var(--radio-medio); padding: 14px 16px; margin-bottom: 18px; }
.tardio-box h3 { font-size: 14px; font-weight: 800; color: var(--c-acento); margin-bottom: 6px; }
.tardio-box p { font-size: 12.5px; color: var(--c-texto-2); margin: 4px 0; line-height: 1.5; }
.tardio-box .btn { width: auto; margin-top: 8px; }
.tardio-estado { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; padding: 2px 8px; border-radius: 999px; margin-bottom: 6px; }
.tardio-estado.pendiente { background: var(--c-alerta-suave); color: var(--c-alerta); }
.tardio-estado.aceptada, .tardio-estado.agregada { background: var(--c-exito-suave); color: var(--c-exito); }
.tardio-estado.rechazada { background: var(--c-peligro-suave); color: var(--c-peligro); }
.tardio-texto { width: 100%; font-family: inherit; font-size: 12.5px; padding: 9px; border: 1px solid var(--c-linea); border-radius: var(--radio-chico); margin-top: 8px; background: var(--c-superficie-alt); color: var(--c-texto); }

/* ── "Ya registraste tu pedido de hoy" ──────────────────────────────── */
.mi-pedido-box { background: var(--c-superficie-2); border: 1px solid var(--c-linea); border-left: 4px solid var(--c-cuero); border-radius: var(--radio-medio); padding: 16px 18px; margin-bottom: 18px; }
.mi-pedido-tit { font-weight: 700; color: var(--c-acento); margin-bottom: 7px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; }
.mi-pedido-detalle { color: var(--c-texto); font-size: 13.5px; line-height: 1.6; }
.mi-pedido-acciones { margin-top: 12px; }
.btn-cambiar { background: none; border: 1px solid var(--c-linea-fuerte); color: var(--c-texto-2); padding: 7px 14px; border-radius: var(--radio-chico); font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; transition: border-color var(--rapido), color var(--rapido), background-color var(--rapido); }
.btn-cambiar:hover { background: var(--c-superficie-alt); border-color: var(--c-texto-3); color: var(--c-texto); }
.mi-pedido-nota { font-size: 12px; color: var(--c-texto-2); line-height: 1.6; }

/* ── Tu plato de siempre ────────────────────────────────────────────── */
.siempre-card { background: var(--c-superficie); border: 1px dashed var(--c-cuero); border-radius: var(--radio-medio); padding: 14px 16px; margin-bottom: 18px; }
.siempre-tit { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--c-texto-3); margin-bottom: 8px; font-weight: 700; }
.siempre-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.siempre-fila + .siempre-fila { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--c-linea); }
.siempre-fila p { font-size: 13px; color: var(--c-texto); margin: 0; }
.siempre-fila p strong { color: var(--c-acento); }
.siempre-fila .btn { width: auto; padding: 8px 14px; font-size: 11.5px; }
.siempre-link { background: none; border: 0; padding: 5px 0; color: var(--c-texto-2); font-size: 12px; text-decoration: underline; cursor: pointer; font-family: inherit; }
.siempre-link:hover { color: var(--c-acento); }
.siempre-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* .chip ya es 100% de marca.css (badge/chip); acá son botones de verdad
   (eligen el plato de siempre), así que necesitan el mínimo de 44px al
   toque que pide MARCA.md sección 8 — el badge del CRM, al ser solo
   etiqueta, no lo trae. */
button.chip { cursor: pointer; font: inherit; padding: 8px 14px; font-size: 12.5px; }
@media (pointer: coarse) { button.chip { min-height: 44px; } }
.chip.activo { background: var(--c-bordo); color: var(--c-texto); border-color: var(--c-cuero); }

/* ── Calificar lo de ayer ───────────────────────────────────────────── */
.calificar-box { background: var(--c-superficie-2); border: 1px solid var(--c-linea); border-radius: var(--radio-medio); padding: 14px 16px; margin-bottom: 18px; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.calificar-texto { font-size: 13px; color: var(--c-texto); margin: 0; }
.calificar-texto strong { color: var(--c-acento); }
.estrellas { display: flex; gap: 2px; }
.estrella { min-width: 44px; min-height: 44px; padding: 0; background: none; border: 0; cursor: pointer; font-size: 28px; line-height: 1; color: var(--c-texto-3); transition: color var(--rapido), transform var(--rapido); }
.estrella:hover, .estrella.encendida { color: var(--c-acento); }
.estrella:active { transform: scale(.9); }
.estrella:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; border-radius: 4px; }
.estrellas:hover .estrella { color: var(--c-acento); }
.estrellas .estrella:hover ~ .estrella { color: var(--c-texto-3); }

/* ── Menú: acordeón por categoría y tarjeta de plato ─────────────────── */
.accordion-categoria { border: 1px solid var(--c-linea); border-radius: var(--radio-medio); margin-bottom: 8px; overflow: hidden; background: var(--c-superficie); }
.accordion-header { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; background: var(--c-superficie-alt); cursor: pointer; user-select: none; transition: background-color var(--rapido); }
.accordion-header:hover, .accordion-header.open { background: var(--c-superficie-2); }
.accordion-header-name { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .11em; color: var(--c-texto-2); }
.accordion-arrow { font-size: 10px; color: var(--c-acento); transition: transform var(--suave); }
.accordion-header.open .accordion-arrow { transform: rotate(180deg); }
.accordion-body { display: none; }
.accordion-body.open { display: block; }
.plato-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer; border-bottom: 1px solid var(--c-linea); border-left: 3px solid transparent; transition: background-color var(--rapido), border-color var(--rapido); }
.plato-card:last-child { border-bottom: 0; }
@media (hover: hover) and (pointer: fine) { .plato-card:hover { background: var(--c-realce-fuerte); } }
.plato-card.selected { background: rgb(var(--acento-rgb) / .10); border-left-color: var(--c-acento); }
.plato-card-img { width: 72px; height: 54px; min-width: 72px; border-radius: var(--radio-chico); object-fit: cover; }
.plato-card-info { flex: 1; min-width: 0; }
.plato-card-nombre { font-size: 13.5px; font-weight: 600; color: var(--c-texto); }
.plato-card.selected .plato-card-nombre { font-weight: 800; color: var(--c-acento); }
.plato-card.agotado { opacity: .55; cursor: not-allowed; }
.plato-card-agotado { font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.plato-card-destacado { font-size: 10px; font-weight: 800; color: var(--c-acento); text-transform: uppercase; letter-spacing: .06em; }
.plato-card-precio { font-size: 12.5px; color: var(--c-texto-2); margin-top: 2px; font-variant-numeric: tabular-nums; }
.plato-card.selected .plato-card-precio { color: var(--c-acento); }
.repetir-extras { font-size: 11px; color: var(--c-texto-3); }

/* ── Confirmación del pedido ("quedó pedido") ────────────────────────── */
#pedidoSuccess:not(.hidden) { display: block; padding: 16px 18px; border-radius: var(--radio); }
#pedidoSuccess .exito-tit { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 15px; font-weight: 800; color: var(--c-exito); margin-bottom: 10px; }
#pedidoSuccess .exito-check { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0; background: var(--c-exito); color: #0C1A10; font-size: 13px; font-weight: 800; }
#pedidoSuccess .exito-linea { font-size: 12.5px; line-height: 1.7; color: var(--c-texto-2); }
#pedidoSuccess .exito-linea span { opacity: .75; }
/* DEMO 10 b): el comprobante releído del servidor; en ámbar si no se pudo comprobar */
#pedidoSuccess .exito-comprobante { font-size: 14px; font-weight: 700; color: var(--c-texto); margin: -4px 0 10px; }
#pedidoSuccess.ember .exito-tit { color: var(--c-alerta); }
#pedidoSuccess.ember .exito-check { background: var(--c-alerta); }
/* §7 (MEJORAS-DEMO12): enviando = círculo vacío gris con borde punteado y el texto «Enviando»; registrado = ✓ verde lleno. Se distinguen sin color. */
#pedidoSuccess.gris .exito-tit { color: var(--c-texto-suave, #a8a29e); }
#pedidoSuccess.gris .exito-check { background: transparent; border: 2px dashed currentColor; color: inherit; }

/* ── Links de texto e historial de pedidos ───────────────────────────── */
.btn-link-no-como { display: block; width: 100%; text-align: center; margin-top: 14px; background: none; border: none; color: var(--c-texto-3); font-size: 12px; text-decoration: underline; cursor: pointer; font-family: inherit; }
.btn-link-no-como:hover { color: var(--c-acento); }
.mis-pedidos-box { border-top: 1px solid var(--c-linea); margin-top: 16px; padding-top: 8px; }
.mis-pedidos-tit { font-size: 10.5px; text-transform: uppercase; letter-spacing: .11em; color: var(--c-texto-3); font-weight: 700; margin: 8px 0 6px; }
.mis-pedidos-vacio { font-size: 12.5px; color: var(--c-texto-2); padding: 6px 0; }
.mp-fila { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--c-linea); font-size: 12.5px; }
.mp-fila:last-child { border-bottom: 0; }
.mp-fecha { color: var(--c-texto-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
.mp-plato { color: var(--c-texto); }
.mp-detalle { color: var(--c-texto-2); }

/* WhatsApp: color de marca ajeno, se mantiene (igual que el oro/plata/bronce
   del podio en crm.css: no cambia con la paleta de La Payuca). */

.volver-link { text-align: center; padding: 20px; font-size: 12px; }
.volver-link a { color: var(--c-texto-2); text-decoration: none; }
.volver-link a:hover { color: var(--c-acento); }

/* ── Compu: layout de verdad, no el celular estirado ─────────────────
   pedido.html usa body.panel-simple (una sola pantalla, sin riel):
   marca.css le pone max-width:640px a <main> pensando en el celular (no se
   toca ese archivo). Acá, solo para esta pantalla y solo desde 1024px, se
   abre el ancho y el paso 2 pasa a dos columnas: menú a la izquierda,
   estado del día fijo a la derecha (.pedido-lateral/.pedido-principal,
   nuevos en pedido.html, agrupan los mismos divs de siempre sin tocar
   IDs). En celular esas dos cajas son transparentes y todo se apila
   exactamente en el mismo orden que antes — ningún estilo de acá corre
   por debajo de 1024px. */
@media (min-width: 1024px) {
  body.panel-simple main { max-width: 1180px; }

  #step1 { max-width: 460px; margin: 48px auto 0; background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--radio); padding: 28px; box-shadow: var(--sombra-1); }
  .order-section.tarjeta { background: transparent; border: 0; box-shadow: none; padding: 0; }

  /* Áreas con nombre, no auto-placement: el menú (pedido-principal) va antes
     que el panel (pedido-lateral) en el HTML de siempre, pero visualmente
     tiene que quedar a la izquierda y ancho — con grid-column a secas el
     auto-placement los mezclaba mal. Un nombre por caja, sin ambigüedad. */
  #step2:not(.hidden) {
    display: grid; align-items: start; gap: 10px 22px;
    grid-template-columns: minmax(0, 1fr) 320px;
    grid-template-areas: "barra barra" "principal lateral";
  }
  .step2-barra { grid-area: barra; }
  .pedido-principal { grid-area: principal; background: var(--c-superficie); border: 1px solid var(--c-linea); border-radius: var(--radio); padding: 24px; box-shadow: var(--sombra-1); }
  .pedido-lateral { grid-area: lateral; position: sticky; top: 20px; }
  /* Día cerrado / modo centralizado: el formulario entero queda oculto (sus
     hijos quedan todos con .hidden) — no dejar una tarjeta vacía ocupando la
     columna ancha, centrar el panel solo. */
  #step2:not(.hidden):not(:has(.pedido-principal > *:not(.hidden))) {
    grid-template-columns: 460px; grid-template-areas: "barra" "lateral"; justify-content: center;
  }
  #step2:not(.hidden):not(:has(.pedido-principal > *:not(.hidden))) .pedido-principal { display: none; }
  /* Prueba final DEMO 12 (21/10): con el pedido ya hecho («ya», sin «Hoy no como» desde el 20/10) la tarjeta también
     queda vacía: mismo trato, el panel solo y centrado. Al tocar «Sumar otro plato» el paso cambia y vuelve. */
  #step2:not(.hidden):has(.pedido-principal[data-paso="ya"]) { grid-template-columns: 460px; grid-template-areas: "barra" "lateral"; justify-content: center; }
  .pedido-principal[data-paso="ya"] { display: none; }

  /* Menú en grilla de dos columnas: una lista larga de 12+ platos no hace
     falta que sea una sola columna cuando hay ancho de sobra. */
  .accordion-body.open { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 6px; }
  .plato-card { align-items: center; gap: 12px; border: 1px solid var(--c-linea); border-radius: var(--radio-medio); }
  .plato-card:last-child { border-bottom: 1px solid var(--c-linea); }
  /* D2: miniatura 4:3 al lado del nombre, como en el celular; sin foto, la tarjeta queda sola con el texto. */
  .plato-card-img { width: 96px; height: 72px; min-width: 96px; }
}

/* 6b (DEMO 3, 4/10): botón de la empresa con su logo. Fondo claro: el azul marino del logo se pierde sobre negro. */
.login-empresa { background: #fff; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; padding: 12px; min-height: 64px; }
.login-empresa:hover, .login-empresa:focus-visible { box-shadow: 0 0 0 2px var(--c-acento, #c8843a); }
.login-empresa img { height: 40px; width: auto; max-width: 80%; }
/* D7 v2 (DEMO 4, Tommy 5/10 05:40): el logo real (lockup blanco, 36 px de alto) + el ícono LP, mismo alto que
   Facimex (66 px), fondo brasa, borde cuero y el hilo de brasa abajo. */
.login-lapayuca { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 12px; min-height: 66px; border-radius: 12px;
  background: radial-gradient(120% 140% at 50% 120%, #3a1a12 0%, #161210 55%, #111 100%); border: 1px solid rgba(177,122,69,.55); color: #fff; }
.login-lapayuca:hover { background: radial-gradient(120% 140% at 50% 120%, #4a2116 0%, #1b1512 55%, #141414 100%); border-color: rgba(177,122,69,.8); }
.login-lapayuca:hover, .login-lapayuca:focus-visible { box-shadow: 0 0 0 2px var(--c-acento, #c8843a); }
.lp-icono { width: 40px; height: 40px; flex: none; border-radius: 9px; outline: 1px solid rgba(177,122,69,.7); overflow: hidden; display: block; }
.lp-icono svg { width: 100%; height: 100%; display: block; }
.lp-lockup { height: 36px; width: auto; max-width: calc(100% - 54px); object-fit: contain; }
.lp-hilo { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, #6E1F1B, #B17A45); }

/* ── "Mi pedido" en pasos (7/10, DEMO 5) · pedido-pasos.js ───────────────
   data-paso en .pedido-principal decide qué parte del formulario se ve. Sin data-paso
   (o con "ya"/"hecho") no hay asistente. Todo en variables de marca: oscuro y claro. */
.pedido-principal[data-paso]:not([data-paso="plato"]) #siempreBox,
.pedido-principal[data-paso]:not([data-paso="plato"]) #grupoPlato,
.pedido-principal:is([data-paso="para"], [data-paso="ops"], [data-paso="conf"], [data-paso="hecho"]) #btnNoComo { display: none; }
.pedido-principal[data-paso]:not([data-paso="ops"]) :is(#grupoGuarnicion, #grupoSalsa, #grupoPunto, #grupoOpciones, #grupoEnsalada, #totalPedido) { display: none; }
.pedido-principal[data-paso]:not([data-paso="conf"]) :is(#btnEnviar, #pasoResumen, #avisoConfirmado) { display: none; }
#avisoConfirmado { margin-bottom: 10px; font-size: 13.5px; color: var(--c-texto); }   /* 20/10: «el pedido confirmado es el que sale» */
.pedido-principal[data-paso="para"] #formPedido,
.pedido-principal[data-paso="hecho"] #formPedido,
.pedido-principal[data-paso="ya"] #formPedido { display: none; }
.pedido-principal:not([data-paso="para"]) #pasoPara,
.pedido-principal:not([data-paso="hecho"]) #pasoHecho { display: none; }
#pasoHecho { margin-top: 12px; }
.pedido-principal[data-paso="conf"] #totalPedido { display: none; }

.paso-stp { list-style: none; display: flex; gap: 6px; margin: 0 0 14px; padding: 0; }
.paso-stp li { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; padding-top: 8px; border-top: 3px solid var(--c-linea); font-size: 11.5px; color: var(--c-texto-3); }
.paso-stp li.cur { border-top-color: var(--c-acento); color: var(--c-texto); font-weight: 700; }
.paso-stp li.done { border-top-color: var(--c-cuero); color: var(--c-texto-2); }
.paso-stp .n { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; border: 1px solid currentColor; font-size: 11px; flex: none; }
.paso-stp li.cur .n { background: var(--c-acento); border-color: var(--c-acento); color: var(--c-superficie); }
.paso-stp .l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 380px) { .paso-stp li:not(.cur) .l { display: none; } }
.paso-ctx { font-size: 12.5px; color: var(--c-texto-2); margin-bottom: 10px; }
.paso-ctx b { color: var(--c-texto); }
.paso-t { font-size: 20px; font-weight: 800; letter-spacing: -.01em; color: var(--c-texto); margin: 4px 0 2px; }
.paso-t:focus { outline: none; }
.paso-s { font-size: 13px; color: var(--c-texto-2); margin: 0 0 14px; }
.paso-falta { color: var(--c-alerta); font-size: 13px; font-weight: 600; margin: 8px 0 0; min-height: 0; }
.paso-falta:empty { display: none; }

.paso-nav { display: flex; gap: 10px; margin-top: 14px; }
.paso-nav .btn { flex: 1; min-height: 48px; width: auto; }
.paso-nav .btn-secondary { flex: 0 0 auto; }
.pedido-principal[data-paso="conf"] #btnEnviar { min-height: 52px; margin-top: 10px; font-size: 15px; }

.paso-cards { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .paso-cards { grid-template-columns: 1fr 1fr; } }
.paso-card { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; min-height: 96px; padding: 16px; border: 2px solid var(--c-linea-fuerte); border-radius: var(--radio-medio); background: var(--c-superficie); color: var(--c-texto); cursor: pointer; font: inherit; }
.paso-card b { font-size: 18px; }
.paso-card span { font-size: 13px; color: var(--c-texto-2); }
.paso-card small { font-size: 12.5px; color: var(--c-texto-3); }
.paso-card small.si { color: var(--c-acento); font-weight: 700; }
.paso-card .elegida { font-style: normal; font-size: 11.5px; font-weight: 800; color: var(--c-acento); text-transform: uppercase; letter-spacing: .06em; }
.paso-card.on { border-color: var(--c-acento); background: rgb(var(--acento-rgb) / .10); }
.paso-card:focus-visible, .paso-lnk:focus-visible { outline: 2px solid var(--c-acento); outline-offset: 2px; }

.paso-resu { margin: 0 0 4px; border: 1px solid var(--c-linea); border-radius: var(--radio-medio); background: var(--c-superficie); }
.paso-resu > div { display: grid; grid-template-columns: 7.5rem 1fr auto; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--c-linea); }
.paso-resu > div:last-child { border-bottom: 0; }
.paso-resu dt { font-size: 12px; color: var(--c-texto-3); text-transform: uppercase; letter-spacing: .06em; }
.paso-resu dd { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--c-texto); }
.paso-lnk { min-height: 44px; min-width: 44px; background: none; border: 0; color: var(--c-acento); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: underline; }
@media (pointer: coarse) { .paso-card, .paso-nav .btn { min-height: 48px; } }

/* Mi pedido en pasos: encabezado de marca y el hilo de brasa como barra de progreso (7/10) */
#pasoCab .marca-cab { margin-bottom: 8px; }
.paso-hilo { height: 3px; margin: 0 0 12px; border-radius: 2px; background: var(--c-linea); overflow: hidden; }
.paso-hilo i { display: block; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #6E1F1B, #B17A45); transition: width .3s ease; }
@media (prefers-reduced-motion: reduce) { .paso-hilo i { transition: none; } }

/* D9.5 (DEMO 9): pie con Privacidad · Términos (links con 44 px para el dedo). */
/* ── DEMO 10 (15/10, Tommy): ingreso por lista. Diseño de la maqueta de CLAUDIO con los tokens de marca.css:
   bienvenida «Hola, [Facimex]», caja angosta con hilo de brasa, buscador, fila de letras (toques de 44 px)
   y ~6 nombres a la vista. Al tocar uno, «Hola, Nombre Apellido» y el PIN. ── */
.ing-bienvenida { position: relative; z-index: 1; text-align: center; padding: 0 4px 10px; }   /* arriba del brillo del lockup */
.ing-bienvenida h1 { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 8px 0 6px; font-size: 25px; line-height: 1.2; font-weight: 800; letter-spacing: -.025em; color: var(--c-texto); }
.ing-bienvenida p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--c-texto-2); text-wrap: balance; }
/* Facimex: su logo en chip blanco (el azul marino no se lee sobre negro); La Payuca manda, Facimex acompaña. */
.ing-fx { display: inline-flex; align-items: center; height: 38px; padding: 0 4px; overflow: hidden; border-radius: var(--radio-chico, 10px); background: #fff; }
.ing-fx img { height: 40px; width: auto; display: block; }
.ing-caja { position: relative; display: flex; flex-direction: column; margin: 6px 0 14px; border: 1px solid var(--c-linea-fuerte); border-radius: 18px; overflow: hidden; background: var(--c-superficie); box-shadow: var(--sombra-1); }
.ing-caja::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 6; pointer-events: none; background: linear-gradient(90deg, var(--c-bordo), var(--c-cuero)); }
.ing-buscador { position: relative; padding: 12px 10px 10px; background: var(--c-superficie); }
.ing-lupa { position: absolute; left: 22px; top: calc(50% + 1px); margin-top: -9px; width: 18px; height: 18px; fill: none; stroke: var(--c-texto-3); stroke-width: 2.2; stroke-linecap: round; pointer-events: none; }
.ing-q { display: block; width: 100%; height: 46px; padding: 0 14px 0 42px; border: 1px solid color-mix(in srgb, var(--c-texto-3) 68%, var(--c-superficie-alt)); border-radius: 11px; background: var(--c-superficie-alt); color: var(--c-texto); font: inherit; font-size: 17px; font-weight: 600; -webkit-appearance: none; appearance: none; }
.ing-q:not(:placeholder-shown) { padding-right: 50px; }
.ing-q::placeholder { color: var(--c-texto-3); font-weight: 600; }
.ing-q:focus { outline: none; border-color: var(--c-acento); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-acento) 18%, transparent); }
.ing-q::-webkit-search-cancel-button { display: none; }
.ing-borrar { position: absolute; right: 10px; top: 12px; width: 50px; height: 46px; border: 0; background: transparent; border-radius: 12px; color: var(--c-texto-2); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ing-borrar[hidden] { display: none; }
.ing-borrar svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; fill: none; }
/* Letras: cada toque mide 44 px; se ve una pastilla de 36. El filo de la derecha avisa que hay más. */
.ing-letras { display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 0 4px 6px; background: var(--c-superficie); border-bottom: 1px solid var(--c-linea);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 14px), transparent); }
.ing-letras::after { content: ""; flex: none; width: 30px; }
.ing-letras::-webkit-scrollbar { display: none; }
.ing-letras button { flex: none; display: grid; place-items: center; width: max(44px, calc(100% / 7.5)); height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.ing-letras button span { display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--c-linea-fuerte); border-radius: var(--radio-chico, 10px); background: var(--c-superficie-alt); color: var(--c-acento); font-size: 15px; font-weight: 800; }
@media (max-width: 380px) { .ing-letras button { width: max(44px, calc(100% / 6.5)); } }
.ing-letras button.apagada span { color: var(--c-texto-3); border-color: var(--c-linea); background: transparent; font-weight: 600; }
.ing-letras button:active span { background: var(--c-cuero); border-color: var(--c-cuero); color: var(--c-acento-texto); }
/* ~6 nombres a la vista y scroll (Tommy 15/10). */
.ing-lista { position: relative; height: calc(6 * 44px + 26px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.ing-lista::-webkit-scrollbar { display: none; }
.ing-letra { position: sticky; top: 0; z-index: 2; margin: 0; padding: 0 14px; height: 26px; display: flex; align-items: center; background: var(--c-superficie-2); border-bottom: 1px solid var(--c-linea); border-top: 1px solid var(--c-linea); font-size: 16px; font-weight: 800; letter-spacing: .08em; color: var(--c-acento); }
.ing-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; padding: 6px 14px; border: 0; border-bottom: 1px solid var(--c-linea); background: transparent; text-align: left; color: var(--c-texto); font: inherit; font-size: 15px; cursor: pointer; }
.ing-fila:active { background: color-mix(in srgb, var(--c-texto) 7%, transparent); }
.ing-fila[aria-busy="true"] { opacity: .55; }   /* velocidad: tocada mientras baja el SDK */
/* El nombre nunca se corta con «…»: si no entra, pasa a otra línea (cortar el apellido es como elegir a otro). */
.ing-fila .nom { min-width: 0; overflow-wrap: anywhere; line-height: 1.25; font-weight: 500; }
.ing-fila .nom b { font-weight: 800; }
.ing-fila .piso { flex: none; font-size: 14px; font-weight: 700; color: var(--c-texto-2); }
.ing-vacio { margin: 0; padding: 22px 18px; font-size: 17px; line-height: 1.45; color: var(--c-texto); }
/* Solo para el lector de pantalla (el conteo de la búsqueda). */
.solo-lector { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ing-reintentar { margin-top: 10px; }
.ing-pie { margin: 0 8px; text-align: center; font-size: 14px; color: var(--c-texto-3); text-wrap: balance; }
.ing-hola { margin: 4px 0 8px; text-align: center; font-size: 29px; line-height: 1.2; font-weight: 800; letter-spacing: -.025em; color: var(--c-texto); text-wrap: balance; }
.ing-hola em { font-style: normal; color: var(--c-acento); }
/* Pantalla bajita: queda solo el ícono LP del lockup. */
@media (max-height: 600px) { #lockupLogin .lv-wm, #lockupLogin .lv-sub { display: none; } }
/* En el ingreso por lista (y en su PIN), sin título «Ingresar» ni tarjeta y con el lockup chico: la lista
   tiene que verse entera en el celu (maqueta: ~6 nombres a la vista sin scrollear la página). Sin JS: :has(). */
body:has(#step1:not(.hidden) :is(#nombreBox:not(.hidden), #ingHola:not(.hidden), #pkPantalla:not(.hidden))) .pedido-header { display: none; }
body:has(#step1:not(.hidden) :is(#nombreBox:not(.hidden), #ingHola:not(.hidden), #pkPantalla:not(.hidden))) .order-section.tarjeta { background: transparent; border-color: transparent; box-shadow: none; padding-top: 0; }
body:has(#step1:not(.hidden) :is(#nombreBox:not(.hidden), #ingHola:not(.hidden), #pkPantalla:not(.hidden))) #lockupLogin .lockup-v.lv-grande { padding-top: 6px; }
body:has(#step1:not(.hidden) :is(#nombreBox:not(.hidden), #ingHola:not(.hidden), #pkPantalla:not(.hidden))) #lockupLogin .lv-lp { width: 64px; }
body:has(#step1:not(.hidden) :is(#nombreBox:not(.hidden), #ingHola:not(.hidden), #pkPantalla:not(.hidden))) #lockupLogin .lv-wm { margin-top: 10px; }
body:has(#step1:not(.hidden) :is(#nombreBox:not(.hidden), #ingHola:not(.hidden), #pkPantalla:not(.hidden))) #lockupLogin .lv-sub { margin-top: 8px; }


/* DEMO 10 (T19): los enlaces del sector «Cambiar mi PIN» a 16 px y 48 px (maqueta de Face ID). */
.mis-pedidos-box .btn-link-no-como { min-height: 48px; font-size: 16px; color: var(--c-texto-2); text-underline-offset: 3px; }

/* Fluidez A (21/10): con la carta o el pedido de la última vez, «actualizando» y sin pedir ni sumar hasta tener lo fresco. */
body.datos-viejos #pedidoTitulo::after { content: ' · de las ' attr(data-hora) attr(data-estado); font-size: .55em; font-weight: 500; opacity: .7; }
body.datos-viejos #btnEnviar, body.datos-viejos .btn-cambiar, body.datos-viejos #btnNoComo { opacity: .5; pointer-events: none; }