/* QUE PERROS FOOD · V1.2 */ /* ============================================================================ QUE PERROS FOOD · V1.2 Paleta abstraída de la gráfica del menú del local. ========================================================================== */ :root{ --carbon:#1C1917; --carbon-alto:#2B2724; --carbon-panel:#221E1C; --queso:#FFC300; --queso-hi:#FFD84D; --mostaza:#D99400; --brasa:#D9481F; --humo:#F7F2E8; --ceniza:#9A9188; --linea:#3A3532; --ok:#3FA96A; --prep:#E0A02A; --ruta:#4A90D9; --caja:#8A7BD8; --wa:#25D366; --r:14px; } /* Tema claro. Todo el archivo pinta con var(--...), así que redefinir las variables aquí cambia la página completa sin duplicar reglas. El oscuro sigue siendo el de por defecto: es la identidad de la marca, y el claro es la opción para quien lo prefiera o para pantallas con mucho reflejo de día. */ html[data-tema="claro"]{ --carbon:#FFFFFF; --carbon-alto:#FFFFFF; --carbon-panel:#FFFFFF; --humo:#1C1917; --ceniza:#6E665E; --linea:#DED8CE; --queso:#E8A800; --queso-hi:#FFC300; --mostaza:#B87F00; --ok:#2F8B54; --prep:#B87F00; --brasa:#C43F19; } html[data-tema="claro"] body{background:var(--carbon)} html[data-tema="claro"] header{ background:radial-gradient(ellipse 90% 120% at 50% -20%,#FFFFFF 0%,var(--carbon) 70%)} html[data-tema="claro"] nav{background:#FFFFFF;box-shadow:none} html[data-tema="claro"] .chip{background:transparent;color:#6B645E} html[data-tema="claro"] .marca{box-shadow:0 0 0 4px rgba(0,0,0,.1)} html[data-tema="claro"] .btn-icono{background:rgba(0,0,0,.06);border-color:rgba(0,0,0,.15);color:#1C1917} html[data-tema="claro"] .btn-icono:hover{color:#1C1917;border-color:#1C1917} html[data-tema="claro"] .btn-icono svg{stroke:#1C1917} html[data-tema="claro"] .horario-btn{box-shadow:0 0 0 4px rgba(0,0,0,.1),0 4px 16px rgba(0,0,0,.15)} html[data-tema="claro"] .horario-btn.cerrado{box-shadow:0 0 0 4px rgba(0,0,0,.1),0 4px 16px rgba(0,0,0,.15)} html[data-tema="claro"] .chip:hover:not(.on){color:#1C1917} html[data-tema="claro"] .chip.on{color:#1C1917} html[data-tema="claro"] .chip::after{background:#1C1917} html[data-tema="claro"] .chorreado{ background-image: radial-gradient(circle at 14px 0, #1C1917 11px, transparent 11.5px), radial-gradient(circle at 23px 0, #1C1917 7px, transparent 7.5px), linear-gradient(#1C1917,#1C1917); background-size:28px 26px,46px 26px,100% 9px; background-position:0 3px,0 10px,0 0; background-repeat:repeat-x} html[data-tema="claro"] .particula-flot{background:#1C1917} html[data-tema="claro"] .header-particles{background:linear-gradient(to top,rgba(0,0,0,.15) 0%,transparent 50%)} html[data-tema="claro"] .header-particle{background:#1C1917} html[data-tema="claro"] .item, html[data-tema="claro"] .paso, html[data-tema="claro"] .ticket, html[data-tema="claro"] .kpi, html[data-tema="claro"] .mapa-card, html[data-tema="claro"] .texto-local{box-shadow:0 3px 10px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.1)} html[data-tema="claro"] .item, html[data-tema="claro"] .ticket, html[data-tema="claro"] .kpi, html[data-tema="claro"] .mapa-card, html[data-tema="claro"] .texto-local{border-color:#000} html[data-tema="claro"] .item:hover{box-shadow:0 8px 24px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.15);border-color:#000} html[data-tema="claro"] .plancha{ background:linear-gradient(180deg,#FFFFFF,#F7F4EE)} html[data-tema="claro"] .plancha::before{ background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(247,244,238,.94))} html[data-tema="claro"] .barra, html[data-tema="claro"] .resumen{background:rgba(255,255,255,.98);border-color:#1C1917;box-shadow:0 6px 20px rgba(0,0,0,.25)} html[data-tema="claro"] .como div{border-color:#000} html[data-tema="claro"] .separador-cat{background:linear-gradient(90deg,transparent,#000,transparent)} html[data-tema="claro"] .tabbar-m,html[data-tema="claro"] .tabbar-m-staff{border-top-color:#1C1917;box-shadow:0 -4px 20px rgba(0,0,0,.12),0 -2px 8px rgba(0,0,0,.08)} html[data-tema="claro"] .promos .promo{box-shadow:0 8px 30px rgba(232,168,0,.18),0 4px 12px rgba(0,0,0,.08)} html[data-tema="claro"] .promos .promo:hover{box-shadow:0 16px 50px rgba(232,168,0,.25),0 8px 25px rgba(232,168,0,.15),0 0 40px rgba(232,168,0,.12)} html[data-tema="claro"] .promos-tab .poster{box-shadow:0 4px 16px rgba(232,168,0,.15),0 2px 6px rgba(0,0,0,.06);border-color:rgba(0,0,0,.1)} html[data-tema="claro"] .promos-tab .poster:hover{box-shadow:0 16px 40px rgba(232,168,0,.25),0 8px 20px rgba(232,168,0,.15);border-color:var(--queso)} html[data-tema="claro"] .barra.on .in::before{animation:fabPulseClaro 2.2s ease-out infinite} @keyframes fabPulseClaro{0%{box-shadow:0 0 0 0 rgba(0,0,0,.3)}70%{box-shadow:0 0 0 14px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}} html[data-tema="claro"] .btn-queso{border-color:#1C1917;box-shadow:0 6px 20px rgba(0,0,0,.2)} html[data-tema="claro"] .hoja{background:#FFFFFF} html[data-tema="claro"] .staff-bar{background:#1C1917} html[data-tema="claro"] .staff-bar .salir{color:#C8C0B6} html[data-tema="claro"] .toast{background:#1C1917;color:#F7F2E8} html[data-tema="claro"] .tab.on{color:#1A1512} html[data-tema="claro"] .item .mas, html[data-tema="claro"] .item .contador .mas{color:#1A1512} html[data-tema="claro"] .op .muestra{background:#EDE8E0} html[data-tema="claro"] .qty button, html[data-tema="claro"] .item .contador .menos{background:#F2EFE9} *{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent} html{scroll-behavior:smooth;--tabbar-h:70px} body{font-family:'Inter',system-ui,sans-serif;background:var(--carbon);color:var(--humo); font-size:15px;line-height:1.45;-webkit-font-smoothing:antialiased;padding-bottom:20px} button,input,select{font-family:inherit;color:inherit} button{cursor:pointer;border:none;background:none} :focus-visible{outline:3px solid var(--queso);outline-offset:2px} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--carbon)} ::-webkit-scrollbar-thumb{background:var(--linea);border-radius:99px;border:2px solid var(--carbon)} ::-webkit-scrollbar-thumb:hover{background:var(--ceniza)} *{scrollbar-width:thick;scrollbar-color:var(--linea) var(--carbon)} @media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}} .chorreado{height:26px;width:100%;position:relative; background-image: radial-gradient(circle at 14px 0, var(--queso) 11px, transparent 11.5px), radial-gradient(circle at 23px 0, var(--queso) 7px, transparent 7.5px), linear-gradient(var(--queso),var(--queso)); background-size:28px 26px,46px 26px,100% 9px; background-position:0 3px,0 10px,0 0; background-repeat:repeat-x; overflow:visible} .chorreado::before{display:none} .particula-flot{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--queso); opacity:0;bottom:0;pointer-events:none} .particula-flot:nth-child(1){left:10%;animation:subir 6s ease-out infinite} .particula-flot:nth-child(2){left:25%;animation:subir 7s ease-out 1s infinite} .particula-flot:nth-child(3){left:40%;animation:subir 5s ease-out 0.5s infinite} .particula-flot:nth-child(4){left:55%;animation:subir 8s ease-out 2s infinite} .particula-flot:nth-child(5){left:70%;animation:subir 6.5s ease-out 1.5s infinite} .particula-flot:nth-child(6){left:85%;animation:subir 7.5s ease-out 3s infinite} .particula-flot:nth-child(7){left:18%;animation:subir 5.5s ease-out 0.8s infinite} .particula-flot:nth-child(8){left:62%;animation:subir 6.8s ease-out 2.5s infinite} @keyframes subir{0%{transform:translateY(0) scale(1);opacity:0}10%{opacity:.4}50%{opacity:.25}100%{transform:translateY(-280px) scale(0.5);opacity:0}} /* ============================== HEADER ==================================== */ header{background:radial-gradient(ellipse 90% 120% at 50% -20%,#0d0b0a 0%,var(--carbon) 70%); padding:0 16px 26px;text-align:center;position:relative;overflow:hidden} .header-particles{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;overflow:hidden; background:linear-gradient(to top,rgba(255,195,0,.12) 0%,transparent 50%)} .header-particle{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--queso);opacity:.5;bottom:-10px} .header-particle:nth-child(1){left:10%;animation:floatUp 6s ease-out infinite} .header-particle:nth-child(2){left:25%;animation:floatUp 7s ease-out 1s infinite} .header-particle:nth-child(3){left:40%;animation:floatUp 5s ease-out 0.5s infinite} .header-particle:nth-child(4){left:55%;animation:floatUp 8s ease-out 2s infinite} .header-particle:nth-child(5){left:70%;animation:floatUp 6.5s ease-out 1.5s infinite} .header-particle:nth-child(6){left:85%;animation:floatUp 7.5s ease-out 3s infinite} .header-particle:nth-child(7){left:18%;animation:floatUp 5.5s ease-out 0.8s infinite} .header-particle:nth-child(8){left:62%;animation:floatUp 6.8s ease-out 2.5s infinite} @keyframes floatUp{0%{transform:translateY(0);opacity:0}10%{opacity:.5}100%{transform:translateY(-350px);opacity:0}} .logo-reveal{position:absolute;top:50%;left:68%;transform:translate(-50%,-50%);width:clamp(160px,32vw,280px);aspect-ratio:1/1;border-radius:50%;overflow:hidden;z-index:10;pointer-events:none;background:#000} .logo-reveal video{width:100%;height:100%;object-fit:cover;display:block;transition:opacity 1.6s ease;opacity:1} @media(max-width:760px){ .logo-reveal{display:none} } .marca{width:92px;height:92px;margin:22px auto 12px;border-radius:50%;overflow:hidden; box-shadow:0 0 0 5px rgba(255,195,0,.13)} .marca img{width:100%;height:100%;display:block;animation:breathing 4s ease-in-out infinite} @media(max-width:760px){ .marca img{animation:logoEntrada 1.5s cubic-bezier(.3,1.4,.5,1) forwards,breathing 4s ease-in-out 1.5s infinite} @keyframes logoEntrada{0%{transform:scale(0) rotate(-360deg);opacity:0}60%{transform:scale(1.3) rotate(20deg);opacity:1}80%{transform:scale(.9) rotate(-10deg)}100%{transform:scale(1) rotate(0deg);opacity:1}} @keyframes breathing{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}} } @keyframes breathing{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}} .eyebrow{font-size:.65rem;letter-spacing:.26em;text-transform:uppercase;color:var(--queso);font-weight:700} h1{font-family:'Anton',sans-serif;font-size:clamp(2.5rem,12.5vw,3.8rem);line-height:.92; margin:8px 0 2px;text-transform:uppercase} h1 .b{color:var(--queso);animation:brillo 3s ease-in-out infinite} @keyframes brillo{0%,100%{color:var(--mostaza);text-shadow:0 0 8px rgba(255,195,0,.3)}50%{color:var(--queso);text-shadow:0 0 16px rgba(255,195,0,.8)}} header p.tag{color:var(--humo);font-size:.88rem;max-width:31ch;margin:8px auto 0;padding-top:12px} /* Angosto (por defecto): los bloques nuevos no deben notarse — mismo apilado centrado de siempre. .in-ancho y .datos-bloque quedan "planos" (display:contents) para que sus hijos se comporten como si el div agrupador no existiera. */ header .in-ancho, header .marca-fila, header .datos-bloque{display:contents} header .separador-h{display:none} @media(min-width:1000px){ header{padding:20px 40px;text-align:left} header .in-ancho{max-width:1400px;margin:0 auto;display:flex;align-items:center;gap:26px} header .marca-fila{display:flex;align-items:center;gap:18px;flex:0 0 auto} .marca{width:64px;height:64px;margin:0;flex:0 0 auto;box-shadow:0 0 0 4px rgba(255,195,0,.13)} .eyebrow{display:block} h1{font-size:2.15rem;margin:1px 0 0;line-height:1} header .separador-h{width:1px;align-self:stretch;background:var(--linea);flex:0 0 auto} header .datos-bloque{flex:1;display:flex;flex-direction:column;justify-content:center;gap:7px;min-width:0} header p.tag{max-width:56ch;margin:0;text-align:left} .horario{margin-top:0} .acciones-top{position:static;margin-left:auto;flex:0 0 auto;display:flex} } /* Acciones del header. El candado va aquí y no en el pie porque es donde la gente busca "mi cuenta"; pero se queda tenue y sin etiqueta para que el cliente que viene a pedir una hamburguesa no lo confunda con algo que le sirva a él. */ .acciones-top{position:absolute;top:14px;right:14px;display:flex;gap:8px;z-index:20} .btn-icono{width:38px;height:38px;border-radius:50%;display:grid;place-items:center; background:rgba(255,255,255,.06);border:1px solid var(--linea);color:var(--ceniza); font-size:1rem;line-height:1;transition:.15s} .btn-icono:hover{color:var(--queso);border-color:var(--queso)} .btn-icono:active{transform:scale(.92)} .btn-icono svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2; stroke-linecap:round;stroke-linejoin:round} .horario{display:inline-flex;align-items:center;margin-top:14px;gap:0} .horario-btn{position:relative;display:flex;align-items:center;gap:10px; background:var(--ok);border-radius:12px;padding:10px 16px; box-shadow:0 0 0 4px rgba(63,169,106,.25),0 4px 16px rgba(63,169,106,.3),0 2px 8px rgba(0,0,0,.3); transition:all .3s ease} .horario-btn.cerrado{background:var(--brasa); box-shadow:0 0 0 2px rgba(217,72,31,.3),0 0 8px rgba(217,72,31,.4),0 2px 8px rgba(0,0,0,.3)} .horario-btn::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%); width:60%;height:6px;background:rgba(0,0,0,.25);border-radius:50%;filter:blur(3px)} .luz{width:12px;height:12px;border-radius:50%;background:#fff; box-shadow:0 0 8px #fff,0 0 16px rgba(255,255,255,.5)} .horario-btn.cerrado .luz{background:#fff;box-shadow:0 0 6px #fff,0 0 12px rgba(255,200,100,.4)} .horario .hora-txt{font-size:.8rem;color:#fff;font-weight:400} .horario .hora-txt b{font-weight:800} /* ============================== NAV ======================================= */ nav{position:sticky;top:0;z-index:60;background:rgba(28,25,23,.98); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-bottom:1px solid var(--linea);overflow-x:auto;scrollbar-width:none; scroll-behavior:smooth;box-shadow:0 4px 20px rgba(0,0,0,.4)} nav::-webkit-scrollbar{display:none} /* `justify-content:center` centra las 5 pestañas cuando caben en el ancho de la pantalla (siempre, en desktop — son 5 palabras cortas). Si algún día no caben, `overflow-x:auto` sigue permitiendo deslizar: no se pierde el resguardo por centrar. */ nav .in{display:flex;gap:22px;padding:11px 14px;min-width:max-content;margin:0 auto;max-width:960px; justify-content:center;width:100%} /* Pestañas de línea, no pastillas: fondo transparente y una barra activa abajo (`.chip.on::after`), como una barra de tabs clásica en vez de botones sueltos — pedido explícito (2026-09-03), reemplaza el estilo de pastilla amarilla de antes. Sin fondo propio, así que el espaciado entre pestañas pasa a vivir en el `gap` de `.in` (antes 6px, pensado para separar pastillas ya con su propio padding lateral). */ .chip{position:relative;padding:11px 2px;background:transparent;color:var(--ceniza); font-size:.88rem;font-weight:700;white-space:nowrap;border:none; transition:color .25s ease} .chip:hover:not(.on){color:var(--humo)} .chip.on{color:var(--queso)} .chip::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:3px;border-radius:3px 3px 0 0; background:var(--queso);transform:scaleX(0);transition:transform .25s ease} .chip.on::after{transform:scaleX(1)} /* Barra inferior fija, estilo app nativa (Uber Eats, Rappi, etc.): en vez de una fila de pastillas que se puede salir de pantalla y esconder una sección sin avisar, esto son 5 casillas de ancho fijo — SIEMPRE caben las 5, no hay nada que descubrir deslizando. Es la única nav en teléfono; la de arriba (.chip) queda solo para pantallas anchas, donde nunca hubo problema de espacio. */ /* Barra inferior fija, estilo app nativa (Uber Eats, Rappi, etc.): en vez de una fila de pastillas que se puede salir de pantalla y esconder una sección sin avisar, esto son casillas de ancho fijo que SIEMPRE caben completas, nada que descubrir deslizando. El mismo estilo (.tabbar-m) lo comparten dos barras distintas: la del cliente (.tabbar-m, dentro de #vitrina) y la del personal (.tabbar-m-staff, dentro de #comandas) — nunca están las dos visibles a la vez porque viven en contenedores que se esconden solos según el modo (body.staff). Cada una se activa en su propio punto de corte porque el panel de personal deja de necesitar esta barra antes (pasa a sidebar en pantalla ancha, 1100px) que el menú del cliente (que nunca tiene sidebar, corta a 760px). */ /* === TABBAR AMARILLO REDONDEADO (actual) === */ .tabbar-m,.tabbar-m-staff{display:none;position:fixed;top:auto;left:0;right:0;bottom:0;z-index:90; background:rgba(24,21,19,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-top:3px solid var(--queso);border-bottom:0;overflow:visible; padding:7px 4px calc(7px + env(safe-area-inset-bottom)); border-radius:20px 20px 0 0; box-shadow:0 -4px 20px rgba(0,0,0,.3),0 0 15px rgba(255,195,0,.3)} .tabbar-m .tab-m,.tabbar-m-staff .tab-m{flex:1;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:3px;padding:8px 6px;border-radius:0; color:var(--humo);font-size:.76rem;font-weight:700;line-height:1.1;transition:.2s ease;position:relative} .tabbar-m .tab-m:hover:not(.on),.tabbar-m-staff .tab-m:hover:not(.on){color:var(--humo);transform:translateY(-2px)} .tabbar-m .tab-m .ico,.tabbar-m-staff .tab-m .ico{font-size:1.55rem;line-height:1;transition:transform .15s} .tabbar-m .tab-m.on,.tabbar-m-staff .tab-m.on{color:var(--queso)} .tabbar-m .tab-m.on .ico,.tabbar-m-staff .tab-m.on .ico{transform:translateY(-2px) scale(1.1)} .tabbar-m .tab-m.on::after,.tabbar-m-staff .tab-m.on::after{content:'';display:block;width:4px;height:4px; border-radius:50%;background:var(--queso);margin-top:1px} .tab-m .globo{position:absolute;top:2px;right:14%;background:var(--brasa);color:#fff; font-size:.6rem;font-weight:800;border-radius:999px;min-width:15px;height:15px; padding:0 3px;display:grid;place-items:center;line-height:1} /* === FIN TABBAR AMARILLO === */ /* === TABBAR ORIGINAL (negro cuadrado) - DESCOMENTA SI QUIERES VOLVER === .tabbar-m,.tabbar-m-staff{display:none;position:fixed;top:auto;left:0;right:0;bottom:0;z-index:90; background:rgba(24,21,19,.97);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); border-top:1px solid var(--linea);border-bottom:0;overflow:visible; padding:7px 4px calc(7px + env(safe-area-inset-bottom))} .tabbar-m .tab-m,.tabbar-m-staff .tab-m{flex:1;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:3px;padding:6px 2px;border-radius:13px; color:var(--ceniza);font-size:.62rem;font-weight:700;line-height:1.05;transition:.2s ease;position:relative} .tabbar-m .tab-m:hover:not(.on),.tabbar-m-staff .tab-m:hover:not(.on){color:var(--humo);transform:translateY(-2px)} .tabbar-m .tab-m .ico,.tabbar-m-staff .tab-m .ico{font-size:1.32rem;line-height:1;transition:transform .15s} .tabbar-m .tab-m.on,.tabbar-m-staff .tab-m.on{color:var(--queso)} .tabbar-m .tab-m.on .ico,.tabbar-m-staff .tab-m.on .ico{transform:translateY(-2px) scale(1.08)} .tabbar-m .tab-m.on::after,.tabbar-m-staff .tab-m.on::after{content:'';display:block;width:4px;height:4px; border-radius:50%;background:var(--queso);margin-top:1px} .tab-m .globo{position:absolute;top:2px;right:14%;background:var(--brasa);color:#fff; font-size:.6rem;font-weight:800;border-radius:999px;min-width:15px;height:15px; padding:0 3px;display:grid;place-items:center;line-height:1} === FIN TABBAR ORIGINAL === */ @media(max-width:760px){ nav:not(.tabbar-m){display:none} .tabbar-m{display:flex} body{padding-bottom:calc(100px + env(safe-area-inset-bottom))} .toast{bottom:calc(178px + env(safe-area-inset-bottom))} } @media(max-width:1099px){ .tabbar-m-staff{display:flex} } main{max-width:960px;margin:0 auto;padding:0 16px} main,.seccion,.items,.ops,.tickets,.kpis{min-width:0;max-width:100%} .seccion{display:none;padding:22px 0 40px} .seccion.on{display:block;animation:fadeSlideIn .3s ease-out;padding-top:16px} @keyframes fadeSlideIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} h2{font-family:'Anton',sans-serif;font-size:1.55rem;text-transform:uppercase;margin:0 0 4px} .sub{color:var(--ceniza);font-size:.85rem;margin-bottom:16px} .como{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:22px} .como div{background:var(--carbon-panel);border:1px solid var(--linea);border-radius:12px; padding:12px 10px;text-align:center;font-size:.76rem;line-height:1.35;color:var(--ceniza)} .como .num{display:grid;place-items:center;width:26px;height:26px;margin:0 auto 7px; border-radius:50%;background:var(--queso);color:#1A1512;font-family:'Anton';font-size:.9rem} .como em{font-style:normal;color:var(--queso);font-weight:800} /* ============================ PROMOS ====================================== Carrusel de fotos que se administra desde el panel de personal (pestaña "Promos") y se pinta como lo primero dentro de #s-menu — que es la sección activa por defecto — para que sea lo primero que se vea al abrir la página, sin depender de que cargue la red primero. Las fotos de promo suelen ser verticales (el póster completo, con precio arriba y CTA abajo), así que la tarjeta NO recorta a un rectángulo fijo: se fija la ALTURA y el ancho se acomoda solo a la proporción real de cada imagen (object-fit:contain). Una promo horizontal queda ancha, una vertical queda angosta — ninguna pierde contenido por el recorte. */ .promos{position:relative;overflow:hidden;padding:10px 0;margin:4px 0} .promos-track{display:flex;gap:14px;animation:carruselInfinito 20s linear infinite} @keyframes carruselInfinito{0%{transform:translateX(0)}100%{transform:translateX(-75%)}} .promos-track:hover{animation-play-state:paused} /* `position:relative` NO es decorativo: sin él, `.cap` y el badge `⤢` (que son `position:absolute`) se anclan al primer ancestro con `transform`, y ese es `.promos-track` — que está animado. Resultado: los badges de las N promos se apilaban todos en la esquina de un track 4× más ancho que la pantalla, así que no se veía ninguno… salvo el de la tarjeta bajo el cursor, porque `:hover` le mete `scale()` y esa tarjeta se vuelve su propio bloque contenedor. Eso es exactamente lo de la captura: una sola promo con lupa. Con esta línea, cada badge se ancla a su tarjeta. */ .promos .promo{flex:0 0 auto;position:relative;width:calc(80vw);max-width:380px;height:220px;border-radius:16px;overflow:hidden; background:var(--carbon-panel);cursor:pointer; box-shadow:0 8px 30px rgba(0,0,0,.5),0 4px 12px rgba(0,0,0,.3); transition:transform .4s ease,box-shadow .4s ease,z-index .4s} .promos .promo:hover{transform:scale(1.08);z-index:10; box-shadow:0 16px 50px rgba(0,0,0,.6),0 8px 25px rgba(255,195,0,.15),0 0 40px rgba(255,195,0,.1)} /* Sin `pointer-events:none`. Lo tenía, y eso hacía que el clic nunca llegara al ``: el delegado de #s-menu busca `.promos .promo img` con `closest()` sobre el target, y el target siempre era el div. O sea, el carrusel entero NO era clicable — el badge de lupa prometía algo que no pasaba. La pestaña "Promos" sí funcionaba porque ahí el img no lo tiene. El delegado además ahora resuelve desde la tarjeta, no desde el img, así que tocar el borde o el caption también abre el visor. */ /* Las fotos de promo son pósters verticales (~360×480 a 572×1024, medidos contra el storage real) metidos en una tarjeta horizontal (~380×220): `cover` solo puede mostrar una franja de ~35-45% del alto del póster, pase lo que pase. Se probó `object-position:top` para no cortar el título — resultado: la franja visible quedaba en el título/fondo y la comida, que en estos pósters vive en la mitad inferior, desaparecía por completo (reportado en producción, 2026-09-03). `75%` baja la franja visible hacia abajo: sacrifica el título (ya redundante — `.cap` pone el mismo texto encima) y el aro de precio del fondo, y prioriza la comida. Si un póster futuro tiene otra composición, este es el primer número a tocar, no una regla nueva. El zoom lento (Ken Burns) es lo que le faltaba a una tarjeta estática con una sola foto: se anima ella sola sin esperar el :hover del mouse, que en un teléfono nunca pasa. `alternate` para que no salte al reiniciar. */ .promos .promo img{height:100%;width:100%;object-fit:cover;object-position:center 75%;display:block; animation:promoKenBurns 9s ease-in-out infinite alternate} @keyframes promoKenBurns{from{transform:scale(1)}to{transform:scale(1.12)}} @media(prefers-reduced-motion:reduce){.promos .promo img{animation:none}} .promos .promo .cap{position:absolute;left:0;right:0;bottom:0;padding:12px 14px 10px; background:linear-gradient(0deg,rgba(0,0,0,.85),transparent);color:#fff; font-size:.84rem;font-weight:700;line-height:1.25} .promos .promo::after,.promos-tab .poster::after{ content:'⤢';position:absolute;top:9px;right:9px;background:rgba(18,18,20,.65); color:#fff;width:28px;height:28px;border-radius:50%;display:grid;place-items:center; font-size:.85rem;pointer-events:none} @media(min-width:1000px){ .promos{padding:16px 0;perspective:1200px} .promos-track{gap:20px;animation:carruselInfinito 18s linear infinite} .promos .promo{width:calc(28vw);max-width:420px;height:300px;border-radius:22px; box-shadow:0 12px 40px rgba(0,0,0,.55),0 6px 16px rgba(0,0,0,.35)} .promos .promo:hover{transform:scale(1.1);box-shadow:0 20px 60px rgba(0,0,0,.65),0 10px 30px rgba(255,195,0,.2),0 0 60px rgba(255,195,0,.15)} } /* Pestaña "Promos": a diferencia del carrusel de arriba (pensado para asomar rápido), aquí cada póster se ve completo y a lo ancho — no hay límite de alto, así que una foto vertical se lee sin comprimir nada. */ .promos-tab{display:grid;gap:18px;max-width:480px;margin:0 auto} .promos-tab .poster{border-radius:16px;overflow:hidden;border:1px solid var(--linea); background:var(--carbon-panel);position:relative;cursor:pointer;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;box-shadow:0 4px 16px rgba(0,0,0,.3)} .promos-tab .poster:hover{transform:translateY(-6px) scale(1.02);box-shadow:0 16px 40px rgba(255,195,0,.2),0 8px 20px rgba(0,0,0,.4);border-color:var(--queso)} .promos-tab .poster img{width:100%;display:block;transition:transform .4s ease} .promos-tab .poster:hover img{transform:scale(1.05)} .promos-tab .poster .cap{padding:11px 14px;font-size:.82rem;color:var(--ceniza); border-top:1px solid var(--linea)} .promos-tab .poster .promo-badge{position:absolute;top:14px;left:14px;z-index:5;font-size:.75rem;padding:5px 12px;box-shadow:0 4px 12px rgba(0,0,0,.4)} /* Cuando la promo está vinculada a un producto real, esta fila se agrega debajo del póster con precio y el mismo control +/− que usa cualquier plato del menú (controlItem()) — es lo que la hace pedible de verdad, no solo una foto bonita. */ .promos-tab .poster-pedible{display:flex;align-items:center;gap:10px;padding:14px; border-top:1px solid var(--linea);background:var(--carbon-alto)} .promos-tab .poster-pedible .pp-info{flex:1;min-width:0} .promos-tab .poster-pedible .pp-nom{font-family:'Anton',sans-serif;font-size:1.05rem;text-transform:uppercase;line-height:1.1;display:block} .promos-tab .poster-pedible .pp-precio{font-family:'Anton',sans-serif;font-size:1.3rem;color:var(--queso);line-height:1.1;display:block} .promos-tab .poster-pedible .pp-precio small{display:block;font-size:.68rem;color:var(--ceniza);font-family:'Inter';font-weight:500} .promos-tab .poster-pedible .pp-ctrl{display:flex;align-items:center;gap:6px;flex:0 0 auto} .promos-tab .poster-pedible .btn-cant{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;font-size:1.2rem;font-weight:700;line-height:1} .promos-tab .poster-pedible .btn-menos{background:var(--carbon);border:1.5px solid var(--linea);color:var(--humo)} .promos-tab .poster-pedible .btn-mas{width:44px;height:44px;border-radius:50%;background:var(--queso);color:#1A1512;display:grid;place-items:center;font-size:1.6rem;font-weight:700;line-height:1;transition:transform .15s ease,box-shadow .2s ease;box-shadow:0 4px 12px rgba(255,195,0,.3)} .promos-tab .poster-pedible .btn-mas:hover{transform:scale(1.1);box-shadow:0 6px 20px rgba(255,195,0,.5)} .promos-tab .poster-pedible .btn-mas:active{transform:scale(.95)} .promos-tab .poster-pedible .cantidad{font-family:'Anton';font-size:1.2rem;color:var(--queso);min-width:20px;text-align:center} /* En PC los pósters caben de a dos (tres en pantallas grandes) en vez de una sola columna angosta. En movil se mantiene la columna unica. Los posters tienen alturas distintas, asi que align-items:start evita que una promo alta estire a su vecina. */ @media(min-width:1000px){ .promos-tab{grid-template-columns:repeat(2,1fr);align-items:start;max-width:940px;gap:22px} } @media(min-width:1400px){ .promos-tab{grid-template-columns:repeat(3,1fr);max-width:1320px} } /* Promo con adicionales: un solo botón en vez del ±. El ± prometía un contador que no puede existir — enCarrito() ignora las líneas con `detalle`, así que siempre marcaría 0. Un botón que abre la hoja no promete nada que después no cumpla. */ .promos-tab .poster-pedible .btn-armar{padding:11px 18px;border-radius:999px; background:var(--queso);color:#1A1512;font-family:'Anton',sans-serif; font-size:.95rem;letter-spacing:.04em;text-transform:uppercase;line-height:1; box-shadow:0 4px 12px rgba(255,195,0,.3);transition:transform .15s ease,box-shadow .2s ease} .promos-tab .poster-pedible .btn-armar:hover{transform:scale(1.05);box-shadow:0 6px 20px rgba(255,195,0,.5)} .promos-tab .poster-pedible .btn-armar:active{transform:scale(.96)} .promos-tab .poster-pedible .pp-precio i{font-style:normal;font-family:'Inter',sans-serif; font-size:.72rem;font-weight:600;color:var(--ceniza);text-transform:uppercase;letter-spacing:.06em} .promos-tab .poster-pedible .tag-adic{margin-top:6px} .promos-tab .vacio{grid-column:1/-1} /* ========================== ADICIONALES =================================== La hoja que se abre al tocar un plato que tiene grupo asignado. Reusa .hoja y .total-hoja del resto de los velos; lo único propio es la fila, que necesita tres zonas (nombre, precio, control) y un estado "elegido" que se lea de un vistazo con el pulgar encima. */ .ad-lista{display:grid;gap:8px;margin-bottom:16px} .ad-fila{display:flex;align-items:center;gap:10px;background:var(--carbon-panel); border:1px solid var(--linea);border-radius:12px;padding:11px 13px;transition:border-color .18s ease,background .18s ease} .ad-fila.on{border-color:var(--queso);background:var(--carbon-alto)} .ad-fila .ad-n{flex:1;min-width:0;font-weight:600;font-size:.92rem} .ad-fila .ad-p{flex:0 0 auto;font-family:'Space Grotesk';font-weight:700;font-size:.83rem;color:var(--ceniza)} .ad-fila.on .ad-p{color:var(--queso)} .ad-fila .ad-ctrl{flex:0 0 auto;display:flex;align-items:center;gap:6px} .ad-fila .ad-ctrl .q{font-family:'Anton';font-size:1.05rem;color:var(--queso);min-width:16px;text-align:center} .ad-fila .ad-ctrl button{width:34px;height:34px;border-radius:50%;display:grid;place-items:center; font-size:1.25rem;font-weight:700;line-height:1} .ad-fila .ad-ctrl .mas{background:var(--queso);color:#1A1512} .ad-fila .ad-ctrl .mas:disabled{opacity:.3} .ad-fila .ad-ctrl .menos{background:var(--carbon);border:1.5px solid var(--linea);color:var(--humo)} /* Encima del editor de comandas, que ya está en 300. Si se quedara al mismo nivel, el orden lo decidiría el orden en el HTML y no el de apertura. */ #veloAdic{z-index:320} /* Panel: título de grupo dentro de Precios y de Agotados. */ .ad-grupo-tit{font-family:'Space Grotesk';font-weight:700;font-size:.72rem;text-transform:uppercase; letter-spacing:.1em;color:var(--queso);margin:14px 0 6px} .ad-grupo-tit:first-child{margin-top:2px} /* Asignación por categoría. El chip es el control, no una etiqueta: tres estados — apagado, `medio` (algunos platos de esa categoría lo tienen, normalmente porque quedó a medias) y `on`. Sin el estado intermedio, una categoría a medio asignar se vería igual que una sin asignar. */ .ad-aplicar{margin:2px 0 12px} .ad-aplicar .k{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em; color:var(--ceniza);margin-bottom:7px} .ad-cats{display:flex;flex-wrap:wrap;gap:7px} .ad-cat{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px; background:var(--carbon-panel);border:1px solid var(--linea);color:var(--ceniza); font-size:.79rem;font-weight:600;line-height:1;transition:.16s} .ad-cat .n{font-family:'Space Grotesk';font-size:.68rem;background:rgba(0,0,0,.25); border-radius:8px;padding:2px 6px} .ad-cat.medio{border-color:rgba(255,195,0,.5);color:var(--humo)} .ad-cat.on{background:var(--queso);border-color:var(--queso);color:#1A1512} .ad-cat.on .n{background:rgba(0,0,0,.18)} .borrar-ad{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center; background:transparent;border:1px solid var(--linea);color:var(--ceniza);font-size:.9rem;transition:.16s} .borrar-ad:hover{border-color:var(--brasa);color:var(--brasa)} /* La cabecera de la lista tiene 3 columnas y las filas ahora 4: se reserva el hueco del botón para que "Precio" y "Máx." sigan alineados. */ .cab-max.con-borrar::after{content:'';width:34px;flex:0 0 auto} /* En la tarjeta del cliente: avisa que ese plato abre una hoja en vez de caer directo al carrito, para que el cambio de comportamiento no sea una sorpresa al tocar el +. */ .tag-adic{display:inline-block;margin-top:4px;font-size:.64rem;font-weight:700; text-transform:uppercase;letter-spacing:.06em;color:var(--queso); background:rgba(255,195,0,.12);border:1px solid rgba(255,195,0,.3); border-radius:999px;padding:2px 8px;width:fit-content} /* Solo informa: el cambio se hace en el chip de arriba. */ .etq-adic{font-size:.71rem;color:var(--queso);letter-spacing:.02em} /* ============================ CARTA ======================================= */ .separador-cat{height:1px;background:linear-gradient(90deg,transparent,var(--queso),transparent);margin:20px 0;opacity:.35} .cat-titulo{display:inline-block;background:var(--queso);color:#1A1512;font-family:'Anton',sans-serif; font-size:1.2rem;text-transform:uppercase;padding:6px 19px;border-radius:7px; margin:0 0 12px;transform:skewX(-4deg)} /* Teléfono: fila horizontal — [foto] [nombre + precio] [control]. La estructura del HTML es la misma en las dos pantallas; lo único que cambia es cómo se acomoda, así el JS que la dibuja no tiene que saber en qué tamaño de pantalla está. */ .items{display:grid;gap:10px} .item{display:flex;align-items:center;gap:12px;background:var(--carbon-panel); border:1px solid var(--linea);border-radius:var(--r);padding:14px; width:100%;text-align:left;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;position:relative;overflow:hidden; box-shadow:0 2px 8px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04)} .item:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(255,195,0,.15);border-color:rgba(255,195,0,.4)} .item:active{transform:scale(.97);border-color:var(--queso)} .item .der{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0} .item .n{font-family:'Anton',sans-serif;font-size:1.05rem;text-transform:uppercase;line-height:1.15} .item .pr{text-align:left} .item .p{font-family:'Anton',sans-serif;font-size:1.15rem;color:var(--queso);display:block;line-height:1} .item .bs{font-size:.68rem;color:var(--ceniza);font-weight:500} .item .ctrl{flex:0 0 auto} .item .mas{width:40px;height:40px;border-radius:50%;background:var(--queso);color:#1A1512; display:grid;place-items:center;font-size:1.5rem;font-weight:700;flex:0 0 auto;line-height:1} /* Antes iba display:none y la descripción solo existía como tooltip (title=""), que en un teléfono no se ve nunca porque no hay hover. Ahora se muestra truncada a 2 líneas: cabe sin romper el alto de la fila. */ .item .d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;font-size:.74rem;color:var(--ceniza);line-height:1.3;margin-top:1px} /* ══════════════════ CARRUSEL DE TARJETAS · PANTALLA ANCHA ══════════════════ En móvil, la lista vertical de filas anchas es correcta: una columna es lo que cabe. En una pantalla de escritorio esa misma fila se estira a 960px y dice apenas "Dog Jr. — $1.50" con un mar de vacío alrededor. A partir de 1000px, cada categoría pasa a ser una tira horizontal de tarjetas cuadradas — mismo dato, mucho menos espacio muerto. La descripción no desaparece: se mueve al atributo title (tooltip nativo al pasar el mouse), porque en una tarjeta de 176px no hay sitio para dos líneas de ingredientes sin que deje de sentirse compacta. */ @media(min-width:1000px){ /* Centrado deliberado y consistente: antes el título de categoría quedaba pegado a la izquierda (era una "pestaña" inline-block normal) mientras las tarjetas de abajo tendían a alinearse distinto — esa combinación es la que se ve "no simétrica". Ahora todo el bloque —encabezado de sección, título de categoría y fila de tarjetas— centra igual, así arriba y abajo se leen como una sola composición. */ #s-menu, #s-combos{text-align:center} #s-menu .como, #s-combos .como{margin-left:auto;margin-right:auto} .items{display:flex;gap:12px;overflow-x:auto;overflow-y:hidden;padding:4px 4px 14px; justify-content:safe center; scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--linea) transparent} .items::-webkit-scrollbar{height:7px} .items::-webkit-scrollbar-thumb{background:var(--linea);border-radius:99px} .items::-webkit-scrollbar-thumb:hover{background:var(--queso)} /* Tarjeta en pantalla ancha, con el MISMO reparto que la del POS para que cliente y caja se lean igual: [foto] [nombre + precio] [──── + / − ────────] Antes el + iba con position:absolute encima de la foto, y por eso parecía flotando sin relación con nada. Ahora cada zona tiene su sitio y la tarjeta no cambia de alto al sumar o restar. */ .item{flex:0 0 232px;scroll-snap-align:start; display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto; gap:10px;align-items:center;text-align:left;padding:12px;min-height:0} html[data-tema="claro"] .item{border:1.5px solid #000;box-shadow:0 3px 10px rgba(0,0,0,.18),0 1px 3px rgba(0,0,0,.1)} .item .miniatura{grid-row:auto;width:58px;height:58px;border-radius:10px;margin:0;order:0} .item .der{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0} .item .n{font-size:.92rem;line-height:1.15;overflow-wrap:anywhere} .item .pr{text-align:left} /* La franja de controles abajo, ocupando las dos columnas. */ .item .ctrl{grid-column:1/-1;display:flex;align-items:center; border-top:1px solid var(--linea);padding-top:9px;margin-top:2px} .item .mas,.item .contador{position:static} .item .contador{width:100%;display:flex;align-items:center;gap:8px; background:transparent;box-shadow:none;padding:0;border-radius:0} .item .contador button{width:34px;height:34px;border-radius:9px;font-size:1.2rem} .item .contador .menos{order:1} .item .contador .q{order:2} .item .contador .mas{order:3;margin-left:auto} .item .mas{width:34px;height:34px;border-radius:9px;font-size:1.2rem;margin-left:auto} /* Antes se ocultaba y quedaba solo como tooltip (`title=""`) para que la tarjeta quedara compacta — pero un tooltip no se ve sin mouse, y en desktop el cliente no sabía qué traía cada producto (reportado en producción, 2026-09-03). Se pidió mostrarla siempre, como en el teléfono; el `title` se deja puesto, no estorba. */ .item .d{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden;font-size:.78rem;color:var(--ceniza);line-height:1.25} .cat-titulo{margin:22px auto 10px} main .seccion h2{margin-bottom:2px} } .item.agotado{opacity:.45;pointer-events:none} .item .miniatura{width:58px;height:58px;border-radius:10px;object-fit:cover; background:var(--carbon-alto);flex:0 0 auto} .fila-foto{display:flex;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid var(--linea)} .fila-foto .mini{width:52px;height:52px;border-radius:9px;object-fit:cover;background:var(--carbon-alto);flex:0 0 auto} .fila-foto .hueco{width:52px;height:52px;border-radius:9px;border:1px dashed var(--linea); display:grid;place-items:center;color:#4A443F;font-size:1.3rem;flex:0 0 auto} .fila-foto .nm{flex:1;font-size:.85rem;min-width:0} .fila-foto .nm small{display:block;color:var(--ceniza);font-size:.72rem} .fila-foto .acc{display:flex;gap:6px;flex:0 0 auto} .fila-foto .acc button{padding:9px 12px;border-radius:9px;font-size:.76rem;font-weight:700; font-family:'Space Grotesk'} .fila-foto .subir{background:var(--queso);color:#1A1512} .fila-foto .borrar{background:transparent;border:1px solid var(--linea);color:var(--ceniza)} .fila-foto.cargando{opacity:.5;pointer-events:none} .fila-promo .txt-promo{flex:1;min-width:0;padding:9px 10px;border-radius:8px; background:var(--carbon);border:1px solid var(--linea);color:var(--humo);font-size:.8rem} .fila-promo .orden{display:flex;flex-direction:column;gap:2px;flex:0 0 auto} .fila-promo .orden button{width:26px;height:20px;border-radius:5px;background:var(--carbon-alto); border:1px solid var(--linea);color:var(--ceniza);font-size:.7rem;line-height:1} .fila-promo .orden button:disabled{opacity:.3;pointer-events:none} /* Bloque "hacer pedible" debajo de cada fila de promo en el panel: es deliberadamente un formulario aparte (no se guarda solo al escribir, como el texto de la foto) porque crea o actualiza una fila real en `items` — una acción con más peso que merece un botón explícito. */ /* Aviso FIJO dentro del formulario, no un toast que desaparece a los pocos segundos — la confusión de antes era exactamente esa: alguien pegaba el link acortado, el toast avisaba y se esfumaba, la persona cambiaba de pestaña sin haberlo visto, y al volver el campo se veía "vacío" (nunca se había guardado). Esto se queda a la vista hasta que el link sea el correcto. */ .aviso-campo{margin-top:8px;padding:10px 12px;border-radius:9px; background:rgba(217,72,31,.12);border:1px solid rgba(217,72,31,.4); color:var(--brasa);font-size:.76rem;line-height:1.5} .campo input.invalido{border-color:var(--brasa)!important;box-shadow:0 0 0 1px var(--brasa)} .pedible-promo{display:flex;flex-wrap:wrap;gap:8px;padding:0 0 16px;margin-top:-4px; border-bottom:1px solid var(--linea)} .pedible-promo .in-pp{flex:1 1 160px;padding:9px 10px;border-radius:8px;background:var(--carbon); border:1px solid var(--linea);color:var(--humo);font-size:.8rem} .pedible-promo .in-pp-precio{flex:0 1 100px} .pedible-promo .pp-adic{flex:1 0 100%;display:flex;align-items:center;gap:8px} .pedible-promo .pp-adic .k{font-size:.73rem;color:var(--ceniza);flex:0 0 auto} .pedible-promo .in-pp-adic{flex:0 1 180px;cursor:pointer} .pedible-promo .pp-adic-vacio{flex:1 0 100%;font-size:.73rem;color:var(--ceniza);line-height:1.5} .pedible-promo .pp-adic-vacio b{color:var(--humo)} /* Puntero desde Precios hacia el control por promo: sin esto, quien busca dónde enlazar los adicionales de una promo se queda mirando unos chips que nunca la incluyen. */ .ad-aplicar .k-nota{display:block;margin-top:8px;font-size:.71rem;color:var(--ceniza);line-height:1.5} .ad-aplicar .k-nota b{color:var(--queso)} .btn-mini{padding:9px 14px;border-radius:8px;background:var(--queso);color:#1A1512; font-size:.78rem;font-weight:700} .btn-mini.btn-mini-fantasma{background:transparent;border:1px solid var(--linea);color:var(--ceniza)} .pp-estado{flex:1 0 100%;font-size:.73rem;color:var(--ok)} .item .contador{display:flex;align-items:center;gap:7px;flex:0 0 auto} .item .contador button{width:40px;height:40px;border-radius:50%;font-size:1.45rem;font-weight:700;line-height:1; display:grid;place-items:center} .item .contador .menos{background:var(--carbon-alto);border:1.5px solid var(--linea);color:var(--humo)} .item .contador .mas{background:var(--queso);color:#1A1512} .item .contador .q{min-width:22px;text-align:center;font-family:'Anton';font-size:1.25rem;color:var(--queso)} .item.puesto{border-color:var(--queso)} .cinta{position:absolute;top:11px;right:-32px;transform:rotate(38deg);background:var(--brasa); color:#fff;font-size:.6rem;font-weight:800;letter-spacing:.1em;padding:3px 34px;animation:shakeAgotado 2s ease-in-out infinite} @keyframes shakeAgotado{0%,100%{transform:rotate(38deg)}10%,30%,50%,70%,90%{transform:rotate(36deg)}20%,40%,60%,80%{transform:rotate(40deg)}} .promo-badge{display:inline-block;background:var(--ok);color:#fff;font-size:.72rem;font-weight:800;letter-spacing:.05em;padding:5px 12px;border-radius:6px;animation:bouncePromo 1.2s ease-in-out infinite;box-shadow:0 4px 12px rgba(0,0,0,.35);vertical-align:top} @keyframes bouncePromo{0%,100%{transform:scale(1) translateY(0)}25%{transform:scale(1.08) translateY(-3px)}75%{transform:scale(0.96) translateY(-2px)}} @keyframes marcaEntrada{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}} @keyframes marcaRespira{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}} @keyframes fadeSlideUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}} @keyframes pulsoQueso{0%,100%{opacity:1}50%{opacity:.7}} @keyframes headerBg{0%,100%{background-position:0% 0%,0% 0%,0% 0%}50%{background-position:0% 0%,100% 100%,100% 0%}} @keyframes destello{0%{background:var(--carbon-panel);transform:scale(1)}40%{background:rgba(255,195,0,.2);transform:scale(1.02)}100%{background:var(--carbon-panel);transform:scale(1)}} .item.flash{animation:destello .4s ease-out} /* ========================= CONSTRUCTOR ==================================== */ .constructor{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start} @media(max-width:780px){ .constructor{grid-template-columns:1fr} .plancha{height:auto;min-height:200px;padding:14px 16px 10px} } /* Sin esto, el texto nowrap del resumen estira la columna y desborda la página: una columna de grid no baja de su min-content salvo que se le diga. */ .constructor > *{min-width:0} #pasos{max-height:420px;overflow-y:auto;scroll-behavior:smooth;padding-right:4px} #pasos::-webkit-scrollbar{width:6px} #pasos::-webkit-scrollbar-thumb{background:var(--linea);border-radius:3px} .pasos-progreso{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:.78rem;color:var(--ceniza)} .pasos-barra{flex:1;height:4px;background:var(--linea);border-radius:2px;overflow:hidden} .pasos-fill{height:100%;background:var(--queso);width:0;transition:width .3s ease;border-radius:2px} .constructor > * > *{min-width:0} /* La plancha queda fija bajo el nav: la hamburguesa siempre a la vista. Fondo con la silueta del emblema, que aprovecha el espacio del banner. */ .plancha{position:sticky;top:66px;z-index:45; background:linear-gradient(180deg,#332E2B,#241F1D); border:1px solid var(--linea);border-radius:20px; height:232px;padding:16px 18px 12px;display:flex;flex-direction:column; align-items:center;justify-content:flex-end;overflow:hidden} .plancha::after{content:'';position:absolute;inset:0;background:url(logo.png) center/70% no-repeat;opacity:.06;pointer-events:none;border-radius:20px} .plancha.vacio{justify-content:center} .plancha::before{content:'';position:absolute;inset:0;border-radius:20px; background:linear-gradient(180deg,rgba(51,46,43,.94),rgba(36,31,29,.96));pointer-events:none} .plancha.vacio::before{ background:linear-gradient(180deg,rgba(51,46,43,.55),rgba(36,31,29,.65)); } .plancha > *{position:relative;z-index:1} @media(min-width:781px){ .constructor{gap:16px} .plancha{height:auto;min-height:340px;padding:24px 18px 18px} } .torre{display:flex;flex-direction:column-reverse;align-items:center;width:100%; transform-origin:bottom center;transition:transform .18s} .capa{width:210px;animation:caer .22s cubic-bezier(.3,1.4,.5,1);cursor:pointer; display:flex;justify-content:center} /* El pan de arriba se pone solo: no se quita, así que no finge ser tocable. */ .capa.fija{cursor:default} @keyframes caer{from{transform:translateY(-30px);opacity:0}to{transform:translateY(0);opacity:1}} .vacio-torre{text-align:center;color:var(--ceniza);font-size:.88rem;line-height:1.6;padding:20px 10px; display:flex;flex-direction:column;align-items:center} .vacio-torre b{color:var(--queso);display:block;font-family:'Anton';font-size:1.35rem; text-transform:uppercase;margin-bottom:6px} .vacio-torre span:not(.flecha){display:block;margin-bottom:8px} .vacio-torre .flecha{font-size:3.2rem;display:block;animation:bota 1.2s infinite} @keyframes bota{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}} @keyframes bounce{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}} @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}} @keyframes pulseGlow{0%,100%{box-shadow:0 0 0 0 rgba(255,195,0,.4)}50%{box-shadow:0 0 0 8px rgba(255,195,0,0)}} .pista-quitar{font-size:.7rem;color:var(--ceniza);margin-top:12px;text-align:center} .l-pan-abajo{height:26px;width:200px;background:linear-gradient(#E3B168,#C68F45);border-radius:6px 6px 16px 16px} .l-pan-arriba{height:42px;width:200px;background:linear-gradient(#EDBB72,#D69F55);border-radius:60px 60px 8px 8px;position:relative} .l-pan-arriba::after{content:'· · · ·';position:absolute;top:7px;left:0;right:0;text-align:center; color:#FFF3D6;letter-spacing:8px;font-size:.75rem} .l-prot-carne{height:25px;width:206px;background:linear-gradient(#8E4C30,#5E2E1B);border-radius:11px; box-shadow:inset 0 -3px 5px rgba(0,0,0,.35)} .l-prot-pollo{height:23px;width:204px;background:linear-gradient(#EBC77E,#C1913D);border-radius:11px; box-shadow:inset 0 -3px 5px rgba(0,0,0,.22)} .l-prot-cerdo{height:23px;width:205px;background:linear-gradient(#D49A8D,#A2624F);border-radius:11px; box-shadow:inset 0 -3px 5px rgba(0,0,0,.25)} .l-panfrito{height:13px;width:196px;background:linear-gradient(#D9A25C,#B87F3C);border-radius:4px} .l-papas{height:14px;width:202px;background:repeating-linear-gradient(96deg,#F0BE4E 0 5px,#D69A2E 5px 9px);border-radius:3px} .l-quesofundido{height:13px;width:214px;background:linear-gradient(#FFCE3D,#E8A400); clip-path:polygon(0 0,100% 0,96% 100%,88% 52%,76% 100%,64% 58%,50% 100%,36% 58%,24% 100%,12% 52%,4% 100%,0 40%)} .l-quesomano{height:14px;width:198px;background:#F6F0E0;border:1px solid #DDD3BC;border-radius:5px} .l-falafel{height:15px;width:194px;background: radial-gradient(circle at 20% 50%,#7E6E34 0 7px,transparent 7.5px), radial-gradient(circle at 50% 50%,#7E6E34 0 7px,transparent 7.5px), radial-gradient(circle at 80% 50%,#7E6E34 0 7px,transparent 7.5px)} .l-kippe{height:16px;width:172px;background:linear-gradient(#7E4B28,#5C3319);border-radius:50%/42%} .l-chile{height:9px;width:200px;background:repeating-linear-gradient(90deg,#C4331B 0 9px,#E2593A 9px 16px);border-radius:6px} .l-verde{height:12px;width:210px;background:#7CB342;border-radius:50% 40% 55% 45%/80% 70% 90% 60%} .l-tomate{height:11px;width:194px;background:linear-gradient(#E25744,#BE3A2A);border-radius:12px} .l-cebolla{height:9px;width:188px;background:#E8D8EE;border:1.5px solid #C5A6D4;border-radius:10px} .l-pepinillo{height:9px;width:184px;background:repeating-linear-gradient(90deg,#5E8C3A 0 12px,#79A84F 12px 20px);border-radius:6px} .l-crema{height:10px;width:206px;background:#F3EDDD;border-radius:8px} .l-tocineta{height:11px;width:198px;background:repeating-linear-gradient(100deg,#A83C2A 0 8px,#EFD8CE 8px 13px);border-radius:5px} .l-huevo{height:14px;width:196px;background:radial-gradient(circle at 50% 50%,#F7C948 0 12px,#FBF6EA 12.5px);border-radius:9px} .l-salsa{height:9px;width:202px;background:linear-gradient(90deg,#C0392B,#E67E22);border-radius:8px} .paso{background:var(--carbon-panel);border:1px solid var(--linea);border-radius:var(--r); padding:14px;margin-bottom:11px;transition:.2s} .paso.bloqueado{opacity:.4;pointer-events:none} .paso.listo{border-color:rgba(63,169,106,.5)} .paso-cab{display:flex;align-items:center;gap:10px;margin-bottom:11px} .paso-num{width:28px;height:28px;border-radius:50%;background:var(--linea);color:var(--ceniza); display:grid;place-items:center;font-family:'Anton';font-size:.9rem;flex:0 0 auto} .paso.activo .paso-num{background:var(--queso);color:#1A1512;animation:latido 1.6s infinite} .paso.listo .paso-num{background:var(--ok);color:#fff} @keyframes latido{0%,100%{box-shadow:0 0 0 0 rgba(255,195,0,.55)}70%{box-shadow:0 0 0 10px rgba(255,195,0,0)}} .paso-cab h3{font-family:'Anton',sans-serif;font-size:1rem;text-transform:uppercase;letter-spacing:.03em} .paso-cab small{display:block;color:var(--ceniza);font-size:.72rem;font-family:'Inter'; font-weight:500;text-transform:none;letter-spacing:0} .ops{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px} /* Un contador − n + ocupa ~80 px. En una tarjeta de 160 px no queda sitio para el nombre y el navegador lo parte letra a letra. Estos pasos van más anchos. */ .op.multi{flex-wrap:wrap;row-gap:6px} .op.multi .paso-num-op{width:100%;justify-content:flex-end} .op{background:var(--carbon-alto);border:2px solid var(--linea);border-radius:12px;padding:14px 12px; text-align:left;font-size:.95rem;transition:.2s ease;display:flex;align-items:center;gap:10px;width:100%} .op:hover:not(.sinstock):not(.topado){border-color:var(--queso);transform:translateX(3px);box-shadow:0 4px 12px rgba(255,195,0,.1)} .op .muestra{width:32px;height:24px;border-radius:6px;overflow:hidden;flex:0 0 auto; border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;background:#151312} .op .muestra > div{width:100%!important;height:100%!important;border-radius:0!important; clip-path:none!important;box-shadow:none!important;border:0!important} .op .txt{flex:1;min-width:0} .op b{display:block;font-size:1rem;font-weight:700;line-height:1.22; overflow-wrap:break-word} .op small{color:var(--ceniza);font-size:.72rem;display:block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .op .paso-num-op{margin-left:auto} .op .marca-op{width:26px;height:26px;border-radius:50%;background:var(--linea);color:var(--ceniza); display:grid;place-items:center;font-size:1.15rem;font-weight:700;flex:0 0 auto;line-height:1} .op.on{border-color:var(--queso);background:rgba(255,195,0,.1)} .op.on .marca-op{background:var(--ok);color:#fff} .op:active{transform:scale(.96)} .op.sinstock{opacity:.4;pointer-events:none} .op.sinstock .marca-op{background:var(--brasa);color:#fff;font-size:.62rem;font-weight:800} .op.topado{opacity:.4} .op.base{border-color:rgba(255,195,0,.45)} .op.base .marca-op{background:transparent;font-size:.85rem} /* contador para ingredientes que admiten más de uno */ .paso-num-op{display:flex;align-items:center;gap:2px;flex:0 0 auto} .paso-num-op button{width:30px;height:30px;border-radius:50%;background:var(--linea); font-size:1.15rem;font-weight:700;line-height:1;color:var(--humo);display:grid;place-items:center} .paso-num-op button.mas{background:var(--queso);color:#1A1512} .paso-num-op button:disabled{opacity:.3} .paso-num-op span{min-width:20px;text-align:center;font-family:'Space Grotesk';font-weight:700;font-size:.9rem} /* Mientras hay algo armado, esta barra sustituye a la del carrito: dos totales apilados se leen como ruido, no como información. */ .resumen{background:rgba(34,30,28,.97);backdrop-filter:blur(10px); border:2px solid var(--queso);border-radius:var(--r);padding:11px 13px; position:sticky;bottom:12px;z-index:50;box-shadow:0 10px 26px rgba(0,0,0,.6);display:none} .resumen.on{display:block} .resumen .det{font-size:.75rem;color:var(--ceniza);line-height:1.35; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:7px;max-width:100%} .resumen .fila{display:flex;align-items:center;gap:10px} .resumen .precios{flex:1;min-width:0} .resumen .tot{font-family:'Anton',sans-serif;font-size:1.75rem;color:var(--queso);line-height:1;display:block} .resumen .totbs{font-size:.71rem;color:var(--ceniza)} .acciones{display:flex;gap:7px;flex:0 0 auto} .skeleton{background:linear-gradient(90deg,var(--carbon-alto) 25%,var(--carbon) 50%,var(--carbon-alto) 75%);background-size:200% 100%;animation:shimmer 1.4s infinite;border-radius:8px} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .skeleton-pasos{display:none} .skeleton-pasos.on{display:block} .skeleton-item{display:flex;align-items:center;gap:12px;background:var(--carbon-panel);border:1px solid var(--linea);border-radius:var(--r);padding:14px;margin-bottom:10px} .skeleton-item .skeleton-foto{width:58px;height:58px;border-radius:10px;flex:0 0 auto} .skeleton-item .skeleton-texto{flex:1} .skeleton-item .skeleton-linea{height:12px;border-radius:6px;margin-bottom:8px} .skeleton-item .skeleton-linea.w80{width:80%} .skeleton-item .skeleton-linea.w50{width:50%;height:10px} .skeleton-item .skeleton-btn{width:40px;height:40px;border-radius:50%;flex:0 0 auto} .acciones .btn{padding:12px 16px;font-size:.85rem;flex:0 0 auto} #btnReset{width:44px;padding:12px 0;font-size:1.1rem} .btn{border-radius:12px;padding:15px 14px;font-weight:800;font-size:.9rem;flex:1;transition:.15s; text-align:center;line-height:1.2} .btn-fantasma{background:transparent;border:1.5px solid var(--linea);color:var(--ceniza);font-weight:600} .btn-fantasma:hover{border-color:var(--queso);color:var(--queso)} .btn-wa{background:var(--wa);color:#fff} .btn-wa:hover{box-shadow:0 4px 20px rgba(37,211,102,.4);transform:translateY(-1px)} .btn:disabled{opacity:.35;cursor:not-allowed} .btn:active:not(:disabled){transform:scale(.95);filter:brightness(1.1)} .texto-local{background:var(--carbon-panel);border:1px solid var(--linea); border-radius:var(--r);padding:28px 24px;font-size:1rem} .texto-local p{font-size:1rem;color:#C8C0B6;line-height:1.75} .texto-local p + p{margin-top:14px} /* ========================== CÓMO LLEGAR =================================== */ .mapa-card{background:var(--carbon-panel);border:1px solid var(--linea);border-radius:var(--r);overflow:hidden} .mapa-card iframe{width:100%;height:290px;border:0;display:block;filter:grayscale(.25) contrast(1.05)} .mapa-datos{padding:16px} .dato{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--linea);font-size:.87rem} .dato:last-child{border:0} .dato .k{color:var(--ceniza);min-width:78px;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;padding-top:2px} /* ============================ BARRA ======================================= */ .barra{position:fixed;left:0;right:0;bottom:0;z-index:95;background:rgba(34,30,28,.98); backdrop-filter:blur(12px);border-top:2px solid var(--queso); padding:12px 16px calc(12px + env(safe-area-inset-bottom));display:none} .barra.on{display:block} .barra .in{max-width:960px;margin:0 auto;display:flex;align-items:center;justify-content:space-between} .barra .in > *{flex:none} .resumen-pedido{display:flex;flex-direction:column;gap:0} .precio-grande{font-family:'Anton',sans-serif;font-size:1.5rem;color:var(--queso);line-height:1} .cantidad-chica{font-size:.75rem;color:var(--humo)} .barra .lbl{display:none} .btn-queso{background:var(--queso);color:#241F1D;border:none;border-radius:12px; padding:10px 18px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;gap:6px; box-shadow:0 4px 12px rgba(0,0,0,.3);transition:transform .2s,box-shadow .2s} .btn-queso:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.4)} .btn-queso:active{transform:scale(.96)} .flecha{font-size:.7rem;transition:transform .3s;display:inline-block} .btn-queso.abierto .flecha{transform:rotate(180deg)} .btn-txt{display:inline} .btn-icon{display:none} @media(max-width:760px){ .barra{position:fixed;right:16px;left:auto;bottom:calc(var(--tabbar-h, 70px) + 10px); z-index:95;background:none;border:none;backdrop-filter:none;padding:0;display:none} .barra.on{display:block} .barra.shake .in{animation:shake .4s ease} .barra .in{position:relative;display:flex;align-items:center;justify-content:center} .resumen-pedido{display:none} .btn-queso{width:60px;height:60px;border-radius:50%;padding:0;z-index:1; display:flex;align-items:center;justify-content:center;flex:none; color:#fff;position:relative; background:var(--carbon-alto); border:2px solid var(--queso); box-shadow:0 6px 20px rgba(0,0,0,.5); animation:fabFloat 3s ease-in-out infinite} .btn-queso svg{width:26px;height:26px} .btn-queso:active{transform:scale(.92)} .barra.on .in{position:relative;background:none} .barra.on .in::before{ content:'';position:absolute;inset:0;border-radius:50%; animation:fabPulse 2.2s ease-out infinite;pointer-events:none} @keyframes fabFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}} @keyframes fabPulse{ 0%{box-shadow:0 0 0 0 rgba(255,195,0,.45)} 70%{box-shadow:0 0 0 14px rgba(255,195,0,0)} 100%{box-shadow:0 0 0 0 rgba(255,195,0,0)}} .barra .lbl{position:absolute;top:-4px;right:-4px;z-index:2;background:var(--brasa);color:#fff; min-width:21px;height:21px;border-radius:50%;font-size:.72rem;font-weight:800; display:none;align-items:center;justify-content:center;padding:0 4px;line-height:1; box-shadow:0 0 0 2px var(--carbon);font-family:'Inter',sans-serif} .barra .lbl.on{display:flex} .barra .lbl.bounce{animation:bounce .3s ease} .btn-txt{display:none !important} .btn-icon{display:block !important} html[data-tema="claro"] .btn-queso{color:#1C1917;border-color:#1C1917;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.2)} html[data-tema="claro"] .btn-queso svg{stroke:#1C1917} html[data-tema="claro"] #btnAddBurger{background:var(--queso)!important;color:#241F1D!important;border:none!important;box-shadow:0 4px 12px rgba(0,0,0,.3)!important} .ticket-btn .btn{width:100%!important;height:auto!important;border-radius:12px!important;padding:15px 14px!important; background:var(--queso)!important;color:#241F1D!important;border:none!important; display:block!important;flex:none!important;box-shadow:none!important;animation:none!important} #btnAddBurger{width:auto!important;height:auto!important;border-radius:12px!important;padding:12px 20px!important; display:inline-flex!important;flex:none!important;animation:none!important;box-shadow:0 4px 12px rgba(0,0,0,.3)!important} #btnAbrirMaps{ width:auto; height:auto; border-radius:12px; padding:14px 18px; background:var(--queso); color:#1A1512; font-weight:700; display:block; text-decoration:none; margin-top:12px; border:none; box-shadow:0 4px 12px rgba(0,0,0,.3); } #btnLogin{width:100%!important;height:auto!important;border-radius:12px!important;padding:15px 14px!important; display:block!important;flex:none!important;animation:none!important} } /* ======================== HOJAS / MODALES ================================= */ /* z-index 300: por encima del panel de personal, que en pantalla ancha es una capa fija en 200. Estaban en 90 y quedaban sepultados detrás — se abría el detalle de un deudor y no se veía, o peor: se veía recién al salir del panel, ya sin sesión, diciendo "hay que estar conectado". */ .velo{position:fixed;inset:0;background:rgba(10,9,8,.78);z-index:300;display:none; align-items:flex-end;justify-content:center;backdrop-filter:blur(3px)} .velo.on{display:flex} .hoja{background:var(--carbon-alto);width:100%;max-width:520px;border-radius:20px 20px 0 0; padding:20px 16px calc(20px + env(safe-area-inset-bottom));max-height:90vh;overflow-y:auto; animation:subir .2s ease-out;border-top:3px solid var(--queso);position:relative} @keyframes subir{from{transform:translateY(50px)}to{transform:translateY(0)}} .hoja h3{font-family:'Anton',sans-serif;font-size:1.35rem;text-transform:uppercase;margin-bottom:3px} .hoja .cerrar{position:absolute;right:16px;top:14px;font-size:1.5rem;color:var(--ceniza);padding:6px 10px} /* Visor de imagen: a diferencia de las demás hojas (que suben desde abajo como una bandeja de opciones), esta centra la imagen y no tiene fondo propio — es un marco transparente, la protagonista es la foto. La X ahora se monta sobre la esquina superior derecha de la imagen misma (antes flotaba arriba, fuera del marco, y no se notaba tanto). */ .velo-imagen{align-items:center;padding:20px} .hoja-imagen{background:transparent;border:0;padding:0;box-shadow:none;max-width:520px; animation:aparecerImg .16s ease-out;display:flex;flex-direction:column;gap:12px} @keyframes aparecerImg{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}} .hoja-imagen .marco-img{position:relative} .hoja-imagen img{width:100%;max-height:78vh;object-fit:contain;border-radius:14px; display:block;background:var(--carbon-panel);cursor:pointer} .hoja-imagen .cerrar{top:10px;right:10px;background:rgba(18,18,20,.75);border-radius:50%; width:34px;height:34px;display:grid;place-items:center;color:#fff;font-size:1.15rem} .hoja-imagen #btnPedirYaPromo{width:100%;display:none} .lista-mas-staff{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px} .fila-mas-staff{display:flex;flex-direction:column;align-items:center;gap:6px; padding:16px 8px;border-radius:12px;background:var(--carbon-panel);border:1px solid var(--linea); color:var(--humo);font-size:.78rem;font-weight:700;position:relative} .fila-mas-staff .ico{font-size:1.5rem} .fila-mas-staff .globo{position:absolute;top:8px;right:10px;background:var(--brasa);color:#fff; font-size:.62rem;font-weight:800;border-radius:999px;min-width:16px;height:16px; padding:0 4px;display:grid;place-items:center;line-height:1} .linea-item{display:flex;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--linea);font-size:.87rem} .linea-item .txt{flex:1;min-width:0} .linea-item .txt small{display:block;color:var(--ceniza);font-size:.73rem} .qty{display:flex;align-items:center;gap:10px} .qty button{width:34px;height:34px;border-radius:50%;background:var(--carbon-panel); border:1px solid var(--linea);font-weight:700;font-size:1.15rem;line-height:1} .qty span{min-width:20px;text-align:center;font-weight:700} .campo{margin-top:14px} .campo label{display:block;font-size:.75rem;color:var(--ceniza);text-transform:uppercase; letter-spacing:.07em;margin-bottom:6px;font-weight:600} .campo input,.campo select{width:100%;padding:13px 12px;border-radius:11px;background:var(--carbon-panel); border:1px solid var(--linea);font-size:.95rem} .radios{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px} .radios label{display:flex;gap:9px;align-items:center;background:var(--carbon-panel); border:2px solid var(--linea);border-radius:12px;padding:13px;font-size:.87rem;cursor:pointer} .radios label:has(input:checked){border-color:var(--queso);background:rgba(255,195,0,.1)} .radios input{accent-color:var(--queso);width:18px;height:18px} .total-hoja{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0 2px} .total-hoja .v{font-family:'Anton',sans-serif;font-size:1.8rem;color:var(--queso)} .nota-envio{font-size:.77rem;color:var(--ceniza);margin-top:9px;line-height:1.45} .ticket-ok{text-align:center;padding:8px 0 4px} .ticket-ok .num{font-family:'Anton',sans-serif;font-size:4rem;color:var(--queso);line-height:1} .ticket-ok .lbl{font-size:.78rem;color:var(--ceniza);text-transform:uppercase;letter-spacing:.12em} .ticket-ok p{font-size:.88rem;color:var(--ceniza);margin-top:14px;line-height:1.5} .ticket-btn{padding:16px 20px 20px} .ticket-btn .btn{width:100%;padding:15px 14px} /* ============================= PIE ======================================== */ footer{border-top:1px solid var(--linea);margin-top:auto;padding:24px 16px 32px;text-align:center; color:var(--ceniza);font-size:.77rem} footer .llave{display:inline-block;margin-top:16px;width:28px;height:28px;border-radius:50%; border:1px solid var(--linea);color:#4A443F;font-size:.72rem;line-height:26px} footer .llave:active{color:var(--queso);border-color:var(--queso)} footer .ver{display:block;margin-top:10px;font-size:.66rem;color:#4A443F;letter-spacing:.1em} /* Pie de todas las pestañas: consulta de pedido + crédito. Es un
y no un