/* v1.10.0 -- Página pública de pedidos en línea. Pensada primero para el celular; sin fuentes externas ni imágenes pesadas (rápida en 4G).
   T1 (tienda legendaria): marca El Capi (azul marino y dorado, logo C), fotos grandes, «Lo más pedido», «Va bien con…», seguimiento en 3 pasos. */
:root{--azul:#102545;--azul2:#1a3566;--dorado:#f2b632;--dorado2:#ffd166;--acento:#1f6feb;--fondo:#f4f6fa;--tarjeta:#fff;--texto:#14213d;--suave:#5b6478;--linea:#e2e7f0;--rojo:#c62828;--verde:#1b7f3b;--ambar:#b26a00;--sombra:0 6px 18px rgba(16,37,69,.10)}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{background:var(--fondo);color:var(--texto);font:16px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding-bottom:104px;-webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.cabeza{display:flex;align-items:center;gap:12px;padding:12px 16px calc(12px);background:linear-gradient(135deg,var(--azul),var(--azul2));color:#fff;position:sticky;top:0;z-index:5;box-shadow:0 2px 10px rgba(0,0,0,.15)}
.logo{width:46px;height:auto;background:#fff;border-radius:14px;padding:4px}
.cabeza-texto strong{display:block;font-size:19px;letter-spacing:.2px}
.cabeza-texto small{opacity:.9;color:var(--dorado2)}
.aviso-demo{background:#fff3cd;color:#5c4400;text-align:center;font-weight:700;padding:8px 16px;font-size:14px}
.app{max-width:760px;margin:0 auto;padding:12px 16px}
.cargando{color:var(--suave);text-align:center;padding:40px 0}

/* Bienvenida */
.bienvenida{background:linear-gradient(135deg,var(--azul),#24447f);color:#fff;border-radius:20px;padding:16px 18px;margin:4px 0 14px;box-shadow:var(--sombra);position:relative;overflow:hidden}
.bienvenida::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:rgba(242,182,50,.18)}
.saludo{margin:0 0 6px;font-size:21px;font-weight:800;line-height:1.25}
.estado-tienda{margin:0 0 8px;color:#bff0cf;font-weight:600;font-size:15px}
.estado-tienda.cerrado{background:#fdecea;color:var(--rojo);border-radius:12px;padding:10px 12px}
.bienvenida .pago{background:rgba(255,255,255,.12);border:0;color:#fff;margin:0}
.horario{font-weight:400;color:var(--texto);margin-top:6px;font-size:14px}
.horario td{padding:1px 10px 1px 0}
.en-curso{display:flex;justify-content:space-between;align-items:center;gap:10px;text-decoration:none;color:var(--texto);background:#e8f5ec;border:1px solid #bfe3c9;border-radius:16px;padding:12px 14px;margin:0 0 12px}
.en-curso span{color:var(--verde);font-weight:700}

/* Repetir mi pedido */
.repetir{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#fff;border:2px solid var(--dorado);border-radius:18px;padding:14px;margin:0 0 14px;box-shadow:var(--sombra)}
.repetir b{display:block;font-size:18px}
.repetir small{display:block;color:var(--suave);margin-top:2px}
.boton-repetir{flex:0 0 auto;border:0;border-radius:14px;padding:12px 16px;background:var(--dorado);color:var(--azul);font-weight:800;font-size:16px}

/* Lo más pedido */
.destacados h2{margin:6px 0 8px;font-size:20px}
.carrusel{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:2px 2px 10px;margin:0 -16px 6px;padding-left:16px;padding-right:16px;scrollbar-width:none}
.carrusel::-webkit-scrollbar{display:none}
.estrella{flex:0 0 46%;max-width:220px;scroll-snap-align:start;border:0;background:var(--tarjeta);border-radius:18px;padding:0 0 10px;text-align:left;color:inherit;box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column}
.estrella b{padding:8px 12px 0;font-size:16px;line-height:1.2}
.estrella span{padding:2px 12px 0;color:var(--azul2);font-weight:700}
.foto-estrella{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;background:#eef2f9}

.buscador{width:100%;padding:12px 14px;border:1px solid var(--linea);border-radius:14px;background:#fff;margin:4px 0 10px}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 10px;position:sticky;top:70px;background:var(--fondo);z-index:4;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--linea);background:#fff;border-radius:999px;padding:8px 14px;color:var(--texto);font-weight:600}
.chip.activo{background:var(--azul);color:#fff;border-color:var(--azul)}
.categoria{margin:16px 0 6px;font-size:21px}

/* Platillo */
.platillo{display:flex;align-items:center;gap:12px;background:var(--tarjeta);border:1px solid var(--linea);border-radius:18px;padding:10px;margin:10px 0;width:100%;text-align:left;color:inherit;box-shadow:0 2px 6px rgba(16,37,69,.05);position:relative}
.platillo .foto{width:88px;height:88px;border-radius:14px;object-fit:cover;flex:0 0 auto;background:#eef2f9}
.platillo.con-foto{flex-direction:column;align-items:stretch;padding:0;overflow:hidden}
.platillo.con-foto .foto{width:100%;height:auto;aspect-ratio:16/10;border-radius:0}
.platillo.con-foto .platillo-texto{padding:10px 14px 14px}
.platillo.con-foto .agregar{position:absolute;right:12px;bottom:12px}
.platillo-texto{flex:1;min-width:0}
.platillo h3{margin:0 0 2px;font-size:17px}
.platillo p{margin:0;color:var(--suave);font-size:14px}
.sin-foto{display:flex;align-items:center;justify-content:center;font-size:40px;background:linear-gradient(135deg,#eef3fb,#dde7f6)}
.foto-estrella.sin-foto{font-size:54px}
.precio{font-weight:800;white-space:nowrap;color:var(--azul)}
.platillo .precio{margin-top:4px}
.agregar{flex:0 0 auto;width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:var(--dorado);color:var(--azul);border:0;border-radius:50%;font-weight:900;font-size:24px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.vacio{color:var(--suave);text-align:center;padding:24px 0}

/* Carrito flotante */
.barra-carrito{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(14px + env(safe-area-inset-bottom));z-index:6;pointer-events:none}
.barra-carrito button{pointer-events:auto;width:100%;max-width:560px;display:flex;align-items:center;gap:10px;justify-content:space-between;margin:0 auto;background:var(--azul);color:#fff;border:0;border-radius:999px;padding:15px 20px;font-weight:800;font-size:17px;box-shadow:0 10px 24px rgba(16,37,69,.35)}
.barra-carrito .bolsa{font-size:20px}

/* Hojas */
.hoja{position:fixed;inset:0;background:rgba(10,20,40,.5);z-index:10;display:flex;align-items:flex-end;justify-content:center}
.hoja-cuerpo{background:#fff;width:100%;max-width:720px;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;padding:16px 16px calc(20px + env(safe-area-inset-bottom))}
.hoja-cabeza{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.hoja h2{margin:0 0 4px;font-size:21px}
.foto-grande{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:16px;margin:6px 0;display:block}
.cerrar{border:0;background:#eef1f6;border-radius:999px;width:38px;height:38px;font-size:20px;line-height:1}
fieldset{border:0;padding:0;margin:14px 0}
legend{font-weight:700;margin-bottom:6px}
.opciones{display:flex;flex-wrap:wrap;gap:8px}
.opcion{position:relative}
.opcion input{position:absolute;opacity:0;inset:0}
.opcion span{display:inline-block;border:1px solid var(--linea);border-radius:12px;padding:9px 13px;background:#fff}
.opcion input:checked+span{background:var(--azul);color:#fff;border-color:var(--azul)}
.opcion input:focus-visible+span{outline:3px solid #9cc0ff}
.cantidad{display:flex;align-items:center;gap:14px}
.cantidad button{width:46px;height:46px;border-radius:14px;border:1px solid var(--linea);background:#fff;font-size:22px}
.cantidad output{min-width:28px;text-align:center;font-weight:800;font-size:19px}
.boton{display:block;width:100%;text-align:center;text-decoration:none;border:0;border-radius:16px;padding:15px 18px;font-weight:800;font-size:17px;background:var(--azul);color:#fff;margin-top:14px}
.boton.secundario{background:#eef1f6;color:var(--texto)}
.boton:disabled{opacity:.6}
.dos-botones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.agregado-ok{color:var(--verde);font-weight:700;margin:2px 0 6px}
.va-bien{margin:10px 0 6px;font-size:18px}
.sugerencias{display:grid;gap:10px}
.sugerencia{display:flex;align-items:center;gap:12px;border:1px solid var(--linea);background:#fff;border-radius:16px;padding:8px;text-align:left;color:inherit}
.sugerencia span:nth-child(2){flex:1}
.sugerencia small{display:block;color:var(--azul2);font-weight:700}
.sugerencia.listo{border-color:var(--verde);background:#f0faf3}
.sugerencia.listo .agregar{background:var(--verde);color:#fff}
.foto-sug{width:56px;height:56px;border-radius:12px;object-fit:cover;flex:0 0 auto;font-size:28px}
label.campo{display:block;font-weight:600;margin:12px 0 4px}
.entrada{width:100%;padding:12px 14px;border:1px solid var(--linea);border-radius:12px;background:#fff}
.casilla{display:flex;gap:10px;align-items:flex-start;margin:12px 0}
.casilla input{width:22px;height:22px;margin-top:2px;flex:0 0 auto}
.linea-carrito{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--linea);padding:10px 0}
.linea-carrito small{display:block;color:var(--suave)}
.quitar{border:0;background:none;color:var(--rojo);padding:4px 0}
.total{display:flex;justify-content:space-between;font-size:19px;font-weight:800;margin:12px 0}
.pago{background:#fff8e1;border:1px solid #ffe08a;color:#5c4400;border-radius:12px;padding:10px 12px;font-weight:600}
.error{background:#fdecea;color:var(--rojo);border-radius:12px;padding:10px 12px;margin:10px 0;font-weight:600}

/* Seguimiento */
.seguimiento{background:#fff;border:1px solid var(--linea);border-radius:20px;padding:18px;margin:12px 0;box-shadow:var(--sombra)}
.seg-titulo{margin:0;color:var(--suave)}
.folio{font-size:32px;font-weight:900;letter-spacing:.5px;color:var(--azul)}
.pasos3{list-style:none;padding:0;margin:18px 0 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;position:relative}
.pasos3::before{content:"";position:absolute;left:16%;right:16%;top:26px;height:4px;background:var(--linea);border-radius:2px}
.pasos3 li{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--suave);font-weight:600;position:relative}
.paso-icono{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;background:#eef1f6;border:3px solid #fff;box-shadow:0 0 0 2px var(--linea)}
.pasos3 li.hecho .paso-icono{background:var(--verde);color:#fff;box-shadow:0 0 0 2px var(--verde);font-weight:900}
.pasos3 li.hecho{color:var(--texto)}
.pasos3 li.actual{color:var(--texto);font-weight:800}
.pasos3 li.actual .paso-icono{background:var(--dorado);box-shadow:0 0 0 3px var(--dorado);animation:latido 1.6s ease-in-out infinite}
@keyframes latido{50%{transform:scale(1.07)}}
@media (prefers-reduced-motion:reduce){.pasos3 li.actual .paso-icono{animation:none}}
.seg-texto{font-size:18px;font-weight:700;text-align:center;margin:8px 0 2px}
.seg-hora{text-align:center;margin:0 0 6px;color:var(--suave)}
.seg-datos{color:var(--suave);font-size:14px}
.ya-llegue{background:var(--dorado);color:var(--azul);font-size:20px;padding:18px}
.llego-ok{background:#e8f5ec;color:var(--verde);border-radius:14px;padding:12px;font-weight:700;text-align:center}
.rechazado{background:#fdecea;color:var(--rojo);border-radius:12px;padding:12px;font-weight:700}
.pie{text-align:center;color:var(--suave);font-size:14px;padding:20px 16px 120px}
.pie a{color:var(--acento)}
@media (min-width:720px){.hoja{align-items:center}.hoja-cuerpo{border-radius:22px}.estrella{flex-basis:30%}}