/* Papón — estilos del sitio.

   Esta hoja parte de la landing entregada por el diseñador
   extendida a todo el sistema de pedidos. Las reglas de la landing se conservan
   tal cual — mismos tokens, mismo header, hero, banda, momentos, cierre y pie —
   y debajo se añaden los componentes que la landing no tenía: carta, carrito,
   checkout, seguimiento, caja y admin, resueltos en ese mismo lenguaje.

   Colores de marca de PAPALUZA, tomados del kit del diseñador
   (07-PALETA/tokens.css): amarillo #FFD91A, rojo #F30D24, rojo profundo
   #B70A1B, negro #080808 y dorado #F5A300. Van siempre por variable, nunca
   escritos a mano.

   Reglas del lenguaje, para no romperlo al agregar cosas nuevas:
   - El fondo por defecto es papel (#FAF8F1). El rojo es ACENTO, no fondo:
     aparece en la banda, en los números y en una palabra del titular.
   - Las secciones alternan papel / negro / amarillo. Ese ritmo es la página.
   - Titulares en Barlow Condensed Bold Italic, mayúsculas, line-height .94.
   - Radio 4px. Sin sombras difusas. La única sombra dura es la del cartel rojo.
   - Cada bloque abre con una etiqueta chica de punto rojo. */

@font-face{font-family:Barlow;src:url("../fuentes/Barlow-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Barlow;src:url("../fuentes/Barlow-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:'Barlow Condensed';src:url("../fuentes/BarlowCondensed-BoldItalic.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}

:root{--negro:#080808;--rojo-profundo:#B70A1B;--dorado:#F5A300;--rojo:#F30D24;--amarillo:#FFD91A;--blanco:#fff;--papel:#faf8f1;--ancho:1280px;--radio:4px;--linea:#e2ddd0;--tinta-suave:#494743}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:108px}
body{margin:0;background:var(--papel);color:var(--negro);font:400 18px/1.55 Barlow,Arial,sans-serif}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit}
button,a:focus-visible{outline-offset:6px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid currentColor}
::selection{background:var(--rojo);color:white}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-style:italic;font-weight:700;line-height:.94}
p{line-height:1.55}
.skip{position:fixed;top:-90px;left:20px;z-index:20;background:var(--amarillo);padding:12px 20px;color:black}
.skip:focus{top:16px}
.seccion{max-width:var(--ancho);margin:auto;padding:112px 40px}
.etiqueta{font-size:14px;letter-spacing:.12em;font-weight:600;color:var(--amarillo);display:flex;gap:12px;align-items:center}
.etiqueta>span{width:8px;height:8px;background:var(--rojo);border-radius:50%}
.etiqueta-oscura{color:var(--negro)}

/* --- Cabecera y pie: compartidos por la landing y por todo el sistema --- */
.cabecera{position:sticky;top:0;z-index:10;background:var(--amarillo);color:var(--negro);border-bottom:4px solid var(--negro)}
.cabecera-interior{max-width:var(--ancho);margin:auto;min-height:92px;display:flex;align-items:center;justify-content:space-between;gap:35px;padding:10px 40px}
.marca{width:210px;flex-shrink:0}
.cabecera nav{display:flex;align-items:center;gap:28px;font-size:16px;font-weight:700}
.cabecera nav a:hover{color:var(--rojo)}
.nav-pedido{padding:12px 22px;background:var(--rojo);color:white!important;border:3px solid var(--negro);border-radius:999px;box-shadow:5px 5px 0 var(--negro)}
.nav-pedido .cuenta{background:var(--negro);color:var(--amarillo);border-radius:50%;min-width:22px;height:22px;display:inline-grid;place-items:center;font-size:13px;margin-left:4px}
.menu-boton{display:none}
footer{background:var(--negro);color:var(--amarillo);font-size:14px;font-weight:700;letter-spacing:.1em}
.pie-interior{max-width:var(--ancho);margin:auto;padding:25px 40px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
.pie-interior a{color:var(--amarillo)}
.pie-interior a:hover{color:white}

/* --- Botones --- */
.boton{display:inline-flex;align-items:center;gap:35px;padding:16px 25px;font-size:18px;font-weight:600;border:2px solid transparent;border-radius:var(--radio);transition:transform .18s,background .18s;cursor:pointer}
.boton:hover{transform:translateY(-3px)}
.boton-amarillo{background:var(--amarillo);color:black}
.boton-negro{background:black;color:white}
.boton-linea{background:transparent;color:inherit;border-color:currentColor;gap:14px}
.boton-rojo{background:var(--rojo);color:white}
.boton>span{font-size:25px;line-height:1}
.boton-ancho{width:100%;justify-content:center;gap:14px}
.boton-chico{padding:9px 14px;font-size:15px;gap:10px}
.boton:disabled{opacity:.4;cursor:not-allowed;transform:none}
.enlace-flecha{font-weight:600;display:inline-flex;align-items:center;gap:35px;border-bottom:2px solid black;padding-bottom:8px;margin-top:30px}
.enlace-flecha:hover{color:#b10000;border-color:#b10000}

/* --- Landing de PAPALUZA ---------------------------------------------------
   Traída del kit del diseñador (10-LANDING-PAGE/styles.css). Va con la clase
   .landing para que sus nombres genéricos no choquen con el resto del sistema. */

.landing .hero{
  min-height:680px;
  background:
    radial-gradient(circle at 82% 43%,var(--amarillo) 0 12%,transparent 12.5%),
    linear-gradient(120deg,var(--rojo) 0 58%,var(--negro) 58%);
  padding:72px 8%;position:relative;overflow:hidden;
}
.landing .hero:after{
  content:"";position:absolute;width:760px;height:760px;
  border:60px solid var(--amarillo);border-radius:50%;right:-250px;bottom:-390px;
}
.landing .hero-copy{position:relative;z-index:1;color:white;max-width:720px}
.landing .hero-copy img{width:205px;filter:drop-shadow(7px 9px 0 var(--negro));margin-bottom:22px}
.landing .hero p,.landing .sabor>div>p,.landing .energia p{font-weight:700;letter-spacing:.14em}
.landing .hero h1,.landing h2{
  font-family:'Barlow Condensed',Arial,sans-serif;font-style:italic;
  text-transform:uppercase;line-height:.9;margin:15px 0 34px;
}
.landing .hero h1{font-size:clamp(70px,9vw,142px);text-shadow:8px 8px 0 var(--negro)}
.landing .sabor,.landing .energia{
  display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;
  padding:110px 8%;border-top:4px solid var(--negro);
}
.landing .sabor{background:var(--amarillo)}
.landing .sabor h2,.landing .energia h2,.landing .pedido h2{font-size:clamp(46px,5vw,82px)}
.landing .sabor img{filter:drop-shadow(8px 10px 0 var(--rojo))}
.landing .energia{background:var(--negro);color:white}
.landing .energia>img{width:min(100%,520px);justify-self:center}
.landing .pedido{text-align:center;background:var(--rojo);padding:100px 8%;color:white;border-top:4px solid var(--negro)}
.landing .pedido img{width:180px;margin:0 auto 25px}
.landing .estado{display:inline-flex;align-items:center;gap:9px;font-weight:700;letter-spacing:.1em}
.landing .estado .punto{width:12px;height:12px;border-radius:50%;background:var(--amarillo);border:2px solid var(--negro)}
.landing .estado .punto.cerrado{background:var(--negro);border-color:white}
.landing .acciones{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;margin-top:10px}

/* ==========================================================================
   Sistema de pedidos. Todo lo de acá abajo no existía en la landing: se
   construyó con sus mismas reglas para que la carta no se sienta otra web.
   ========================================================================== */

/* Cabecera de las páginas internas: mismo header negro, con el título del paso */
.tapa{background:var(--negro);color:white;padding:52px 0 44px}
.tapa .interior{max-width:var(--ancho);margin:auto;padding:0 40px}
.tapa h1{font-size:clamp(46px,6vw,78px);margin:16px 0 0}
.tapa h1 span{color:var(--amarillo)}
.tapa .sub{color:#bbb;font-size:17px;margin-top:14px}
.tapa .sub a{color:var(--amarillo);font-weight:600}

/* Navegación de categorías: barra negra pegada bajo el header.
   La categoría visible se resalta sola (scrollspy en carta.html). */
.nav-categorias{position:sticky;top:92px;z-index:9;background:var(--negro);border-bottom:1px solid #292929;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav-categorias::-webkit-scrollbar{display:none}
.nav-categorias .interior{max-width:var(--ancho);margin:auto;display:flex;gap:10px;padding:12px 40px}
.nav-categorias a{flex:0 0 auto;font-size:14px;font-weight:600;letter-spacing:.08em;color:#bbb;padding:8px 14px;border:1px solid #3c3c3c;border-radius:var(--radio)}
.nav-categorias a:hover{color:white;border-color:#777}
.nav-categorias a.activa{background:var(--amarillo);color:var(--negro);border-color:var(--amarillo)}

/* Carta */
.carta{max-width:var(--ancho);margin:auto;padding:70px 40px 40px}
.grupo{margin-bottom:76px;scroll-margin-top:160px}
/* Los titulares del sistema van en mayúsculas como en la landing, pero el
   nombre real se guarda tal como lo escribió el local en /admin: el mayúsculas
   es presentación (CSS), no dato. */
.grupo h2{font-size:clamp(42px,5.1vw,70px);margin:14px 0 30px;text-transform:uppercase}
.grupo h2 span{color:var(--rojo)}
.plato{border-top:1px solid var(--linea);padding:28px 0;display:grid;grid-template-columns:1fr auto;gap:10px 30px;align-items:start}
.grupo .plato:last-child{border-bottom:1px solid var(--linea)}
.plato h3{font-size:32px;text-transform:uppercase}
.plato .desc{color:var(--tinta-suave);font-size:17px;margin-top:8px;max-width:62ch}
.plato .precio{font:700 italic 40px/1 'Barlow Condensed',sans-serif;grid-column:2;grid-row:1;text-align:right}
.plato form{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px}
.opciones{display:flex;flex-wrap:wrap;gap:10px;flex:1 1 320px}
.opcion{display:inline-flex;align-items:center;gap:8px;font-size:15px;border:1px solid var(--linea);border-radius:var(--radio);padding:7px 13px;cursor:pointer;background:white}
.opcion:has(input:checked){border-color:var(--negro);background:var(--amarillo)}
.opcion input{accent-color:var(--rojo)}
.plato-acciones{display:flex;gap:12px;align-items:center;flex:0 0 auto}

/* Stepper de cantidad — más táctil que el spinner nativo del navegador */
.paso{display:inline-flex;align-items:center;border:1px solid var(--negro);border-radius:var(--radio);background:white;overflow:hidden}
.paso-btn{background:transparent;border:0;width:40px;height:44px;font-size:20px;font-weight:600;cursor:pointer;line-height:1}
.paso-btn:hover{background:var(--amarillo)}
.paso .cantidad{border:0;width:40px;text-align:center;background:transparent;padding:0;font-weight:600;font-size:17px;-moz-appearance:textfield}
.paso .cantidad::-webkit-outer-spin-button,.paso .cantidad::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* Barra de pedido fija */
.barra{position:fixed;left:0;right:0;bottom:0;z-index:12;background:var(--negro);color:white;border-top:4px solid var(--amarillo)}
.barra .interior{max-width:var(--ancho);margin:auto;padding:14px 40px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.barra .monto{font:700 italic 30px/1 'Barlow Condensed',sans-serif;color:var(--amarillo)}
.barra small{display:block;color:#bbb;font-size:13px;letter-spacing:.08em}
.espaciador{height:110px}

/* Bloques de formulario y resumen */
.columnas{max-width:var(--ancho);margin:auto;padding:60px 40px 40px;display:grid;grid-template-columns:1.25fr .75fr;gap:60px;align-items:start}
.bloque{border:1px solid var(--linea);border-radius:var(--radio);background:white;padding:28px;margin-bottom:22px}
.bloque h2{font-size:30px;margin-bottom:18px;text-transform:uppercase}
.bloque.resumen{position:sticky;top:120px}
.linea{display:flex;justify-content:space-between;gap:16px;padding:12px 0}
.linea+.linea{border-top:1px solid var(--linea)}
.total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--negro);margin-top:14px;padding-top:14px;font:700 italic 34px/1 'Barlow Condensed',sans-serif}
.menor{font-size:14px;color:var(--tinta-suave)}
.campo{margin-bottom:18px}
.campo label{display:block;font-size:14px;font-weight:600;letter-spacing:.06em;margin-bottom:7px}
input[type=text],input[type=tel],input[type=number],input[type=password],input[type=email],select,textarea{font:inherit;font-size:17px;padding:12px 14px;border:1px solid var(--negro);border-radius:var(--radio);background:white;color:var(--negro);width:100%}
input::placeholder,textarea::placeholder{color:#8d897f}
textarea{resize:vertical;min-height:90px}
input[type=radio],input[type=checkbox]{accent-color:var(--rojo)}

/* Selector de tipo de pedido y de pago */
.tipos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:24px}
.tipos label{border:1px solid var(--negro);border-radius:var(--radio);padding:18px;text-align:center;cursor:pointer;background:white;font-weight:600;letter-spacing:.06em}
.tipos input{position:absolute;opacity:0;width:0}
.tipos label:has(input:checked){background:var(--amarillo)}
.pagos label{display:flex;align-items:center;gap:12px;border:1px solid var(--linea);border-radius:var(--radio);padding:16px;margin-bottom:10px;background:white;cursor:pointer}
.pagos label:has(input:checked){border-color:var(--negro);background:var(--amarillo)}

/* Seguimiento */
.pasos{list-style:none;margin:0;padding:0}
.pasos li{padding:22px 0 22px 56px;position:relative;border-top:1px solid var(--linea);color:var(--tinta-suave);font-size:19px}
.pasos li:last-child{border-bottom:1px solid var(--linea)}
.pasos li::before{content:"";position:absolute;left:8px;top:26px;width:16px;height:16px;border-radius:50%;border:2px solid var(--linea);background:white}
.pasos li.hecho{color:var(--negro);font-weight:600}
.pasos li.hecho::before{background:var(--rojo);border-color:var(--rojo)}
.estado-actual{display:inline-flex;align-items:center;gap:10px;background:var(--amarillo);color:var(--negro);padding:10px 18px;font-weight:600;letter-spacing:.06em;margin-top:22px;border-radius:var(--radio)}

/* Avisos */
.aviso{max-width:var(--ancho);margin:22px auto;padding:16px 22px;background:var(--amarillo);color:var(--negro);font-weight:600;border-left:6px solid var(--rojo)}

/* Login */
.login{max-width:440px;margin:auto;padding:80px 24px}
.login .sello{width:150px;margin:0 auto 32px}

/* --- Caja y admin: paneles de operación ------------------------------------
   Mismo alfabeto (negro, amarillo, condensed italic) pero denso y sin aire de
   marketing: acá manda la operación, no la portada. */
body.panel{background:#f2efe7}
.panel-tapa{background:var(--negro);color:white;position:sticky;top:0;z-index:20}
.panel-tapa .interior{max-width:1600px;margin:auto;padding:12px 28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.panel-tapa h1{margin-right:auto}
.panel-tapa h1{font-size:24px;color:var(--amarillo)}

/* --- Cajón lateral ---------------------------------------------------------
   La navegación estorbaba arriba: dieciséis botones comiéndose el alto de la
   pantalla justo donde se toman los pedidos. Ahora vive en un cajón que por
   defecto está cerrado y se abre con el botón o con la tecla M. */
.lateral-boton{
  display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  background:var(--amarillo);color:var(--negro);border:2px solid var(--negro);
  border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;cursor:pointer;
}
.lateral-lineas{width:16px;height:11px;border-top:2.5px solid var(--negro);border-bottom:2.5px solid var(--negro);position:relative}
.lateral-lineas::after{content:"";position:absolute;top:4px;left:0;width:100%;border-top:2.5px solid var(--negro)}
.lateral{
  position:fixed;top:0;left:0;bottom:0;width:250px;z-index:45;overflow-y:auto;
  background:var(--negro);color:white;padding:18px 16px 24px;
  transform:translateX(-100%);transition:transform .18s ease;
}
body.con-lateral .lateral{transform:none}
.lateral-marca{display:block;width:170px;margin:0 auto 18px}
.lateral nav{display:flex;flex-direction:column;gap:2px}
.lateral-grupo{
  font-size:11px;letter-spacing:.16em;font-weight:700;color:var(--amarillo);
  margin:16px 0 6px;text-transform:uppercase;
}
.lateral nav a{padding:11px 12px;border-radius:var(--radio);font-weight:600;font-size:15px;color:#ddd}
.lateral nav a:hover{background:#1c1c1c;color:white}
.lateral nav a[aria-current="page"]{background:var(--amarillo);color:var(--negro)}
.lateral-fondo{position:fixed;inset:0;z-index:44;background:rgba(0,0,0,.5)}

/* En pantalla ancha el cajón abierto corre el contenido en vez de taparlo. */
@media(min-width:1100px){
  body.con-lateral .panel-cuerpo,
  body.con-lateral .panel-tapa .interior{padding-left:274px}
}

.metricas{display:flex;gap:26px;align-items:center}
.metrica small{display:block;color:#999;font-size:11px;letter-spacing:.12em;font-weight:600}
.metrica b{font:700 italic 26px/1 'Barlow Condensed',sans-serif;color:var(--amarillo)}
.panel-cuerpo{max-width:1600px;margin:auto;padding:24px 28px 70px}
.tablero{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:18px}
.pedido{background:white;border:1px solid var(--linea);border-radius:var(--radio);padding:18px}
.pedido.urgente{border:2px solid var(--rojo)}
.pedido-tapa{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--linea)}
.codigo{font:700 italic 30px/1 'Barlow Condensed',sans-serif}
.marca-tipo{font-size:11px;letter-spacing:.12em;font-weight:600;padding:4px 10px;border-radius:var(--radio);display:inline-block;margin-bottom:6px}
.marca-tipo.delivery{background:var(--rojo);color:white}
.marca-tipo.retiro{background:var(--amarillo);color:var(--negro)}
.reloj{font:700 italic 18px/1 'Barlow Condensed',sans-serif;color:var(--tinta-suave)}
.pedido ul{list-style:none;margin:14px 0;padding:0;font-size:16px}
.pedido li{padding:4px 0}
.pedido li em{display:block;padding-left:16px;font-style:normal;font-size:14px;color:var(--tinta-suave)}
.acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.acciones form{margin:0}
.panel-cuerpo .bloque{max-width:none}
.panel-cuerpo .bloque h2{font-size:26px}
.tarjeta-sub{background:#faf8f1;border:1px solid var(--linea);border-radius:var(--radio);padding:16px;margin-bottom:12px}
.rejilla{display:grid;gap:12px}
.rejilla.dos{grid-template-columns:2fr 1fr}
.rejilla.tres{grid-template-columns:2fr 1fr 1fr}

/* Ticket: siempre blanco y negro — es lo que sale por la impresora térmica */
.ticket{font-family:"Courier New",monospace;font-size:12px;line-height:1.35;white-space:pre;background:#fff;color:#000;padding:16px;border:1px solid #ddd;width:min(100%,400px);overflow-x:auto}

@media print{.no-imprimir{display:none}.ticket{border:0;padding:0;width:auto}body{background:#fff}}

@media(min-width:1500px){.hero-interior{min-height:740px}}

@media(max-width:1000px){
  .cabecera nav{gap:20px}
  .hero-interior{gap:0;padding-top:40px;padding-bottom:40px;min-height:580px}
  .hero h1{font-size:105px}
  .hero-descripcion{font-size:19px}
  .hero .etiqueta{font-size:12px;letter-spacing:.07em}
  .sello-nota{font-size:18px;right:0}
  .presentacion{gap:45px}
  .seccion{padding:85px 32px}
  .cartel{padding:38px 24px 22px}
  .cartel p{font-size:45px}
  .momentos-cabecera{grid-template-columns:1fr}
  .momentos article{grid-template-columns:90px 1fr 45px}
  .carta,.columnas,.tapa .interior,.nav-categorias .interior,.barra .interior{padding-left:32px;padding-right:32px}
  .columnas{grid-template-columns:1fr;gap:34px}
  .bloque.resumen{position:static}
}

@media(max-width:700px){
  html{scroll-padding-top:85px}
  .cabecera-interior{min-height:75px;padding:10px 22px;gap:18px;flex-wrap:wrap}
  .marca{width:134px}
  .menu-boton:not([hidden]){display:flex;align-items:center;gap:10px;background:var(--negro);color:white;border:0;border-radius:20px;padding:12px 18px;font-size:15px;font-weight:700;cursor:pointer}
  .menu-lineas{height:10px;width:15px;border-top:2px solid white;border-bottom:2px solid white}
  .cabecera nav{width:100%;flex-wrap:wrap;gap:0;padding:4px 0 16px}
  .cabecera nav a{padding:12px 0;width:100%}
  .js .cabecera nav{display:none}
  .js .cabecera nav.abierto{display:flex}
  .cabecera nav .nav-pedido{padding:12px 16px}
  .hero-interior{grid-template-columns:1fr;padding:44px 23px 30px;gap:18px;min-height:0}
  .hero h1{font-size:clamp(80px,21vw,140px);margin:25px 0;line-height:.86}
  .hero .etiqueta{font-size:12px;letter-spacing:.08em}
  .hero-descripcion{font-size:19px;margin-bottom:24px}
  .boton{padding:13px 20px;font-size:17px;gap:20px}
  .hero-arte{max-width:460px;width:100%;margin:auto;padding:20px 7px 6px}
  .sello-nota{top:10px;right:6px;font-size:18px}
  .hero-firma{font-size:10px;margin-top:17px;letter-spacing:.05em}
  .hero-pie{padding:14px 23px}
  .hero-pie span:last-child{display:none}
  .hero-pie span{font-size:10px}
  .banda{padding:14px 0}
  .banda>div{font-size:25px;word-spacing:10px}
  .seccion{padding:68px 24px}
  .presentacion{grid-template-columns:1fr;gap:57px}
  .presentacion h2,.contacto h2{font-size:62px;margin:22px 0}
  .presentacion-texto>p:not(.etiqueta){font-size:18px}
  .solo-escritorio{display:none}
  .cartel{width:calc(100% - 16px);margin:0 auto;padding:37px 25px 21px;box-shadow:8px 8px 0 black;transform:rotate(2deg)}
  .cartel p{font-size:clamp(38px,10.5vw,65px)}
  .cartel img{width:66%}
  .cartel-base{font-size:11px}
  .momentos-cabecera{gap:20px}
  .momentos h2{font-size:clamp(39px,9vw,62px)}
  .momentos-lista{margin-top:38px}
  .momentos article{grid-template-columns:48px 1fr;gap:20px;padding:26px 0}
  .numero{font-size:47px}
  .momentos h3{font-size:29px;line-height:1.02}
  .momentos article p{font-size:16px}
  .estrella{display:none}
  .contacto{grid-template-columns:1fr;gap:15px}
  .cierre-interior{padding:46px 20px}
  .cierre img{width:100%;margin:25px 0}
  .cierre p{font-size:14px;letter-spacing:.08em}
  .pie-interior{padding:22px;align-items:center;font-size:13px}
  .etiqueta{font-size:12px}
  /* Sistema de pedidos en móvil */
  .tapa{padding:36px 0 30px}
  .tapa .interior,.carta,.columnas,.nav-categorias .interior,.barra .interior,.panel-cuerpo{padding-left:22px;padding-right:22px}
  .nav-categorias{top:75px}
  .carta{padding-top:44px}
  .grupo{margin-bottom:52px;scroll-margin-top:140px}
  .plato{grid-template-columns:1fr auto;padding:22px 0}
  .plato h3{font-size:26px}
  .plato .desc{font-size:16px}
  .plato .precio{font-size:30px}
  .plato-acciones{width:100%}
  .plato-acciones .boton{flex:1;justify-content:center}
  .tipos{grid-template-columns:1fr}
  .bloque{padding:20px}
  .barra .interior{padding:12px 22px}
  .panel-tapa .interior{padding:12px 22px}
  .tablero{grid-template-columns:1fr}
  .rejilla.dos,.rejilla.tres{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* --- Punto de venta: tomar un pedido ---------------------------------------
   Pantalla de mostrador, pensada para dedo y para prisa: dos zonas fijas, la
   carta en grilla y la boleta siempre a la vista, botones grandes y ni un paso
   de más entre tocar un producto y mandarlo a cocina. */
.pos{display:grid;grid-template-columns:1fr 420px;gap:18px;align-items:start}
.pos-carta{background:white;border:1px solid var(--linea);border-radius:var(--radio);padding:16px}
.pos-busqueda #buscar{font-size:19px;padding:14px 16px}
.pos-categorias{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 4px}
.pos-cat{background:white;border:2px solid var(--negro);border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;cursor:pointer}
.pos-cat.activa{background:var(--negro);color:var(--amarillo)}
.pos-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px;margin-top:14px}
.pos-producto{
  display:flex;flex-direction:column;justify-content:space-between;gap:8px;min-height:104px;
  text-align:left;padding:14px;cursor:pointer;background:var(--amarillo);
  border:2px solid var(--negro);border-radius:var(--radio);box-shadow:3px 3px 0 var(--negro);
}
.pos-producto:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--negro)}
.pos-nombre{font-weight:700;font-size:16px;line-height:1.2}
.pos-precio{font:700 italic 22px/1 'Barlow Condensed',sans-serif}
.pos-variantes{font-size:11px;letter-spacing:.1em;font-weight:700;opacity:.7}

.pos-boleta{background:white;border:1px solid var(--linea);border-radius:var(--radio);padding:16px;position:sticky;top:90px}
.pos-tipo,.pos-pago{display:flex;gap:8px;margin-bottom:12px}
.pos-tipo button,.pos-pago button{
  flex:1;padding:12px 6px;font-weight:700;font-size:13px;letter-spacing:.06em;cursor:pointer;
  background:white;border:2px solid var(--negro);border-radius:var(--radio);
}
.pos-tipo button.activa,.pos-pago button.activa{background:var(--negro);color:var(--amarillo)}
.pos-lineas{max-height:38vh;overflow-y:auto;margin-bottom:10px}
.pos-linea{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--linea)}
.pos-linea-texto span{display:block}
.pos-linea-monto{font-weight:600;min-width:74px;text-align:right}
.pos-paso{display:inline-flex;align-items:center;border:2px solid var(--negro);border-radius:var(--radio);overflow:hidden}
.pos-paso button{width:38px;height:38px;font-size:20px;font-weight:700;border:0;background:white;cursor:pointer}
.pos-paso button:active{background:var(--amarillo)}
.pos-paso span{min-width:34px;text-align:center;font-weight:700}
.pos-totales{border-top:2px solid var(--negro);padding-top:8px}
.pos-datos{margin:12px 0}
.pos-datos summary{cursor:pointer;font-weight:600;font-size:14px;margin-bottom:10px}
.pos-efectivo input{margin-bottom:8px}
.pos-rapidos{display:flex;gap:8px;flex-wrap:wrap}
.pos-rapidos button{flex:1;min-width:88px;padding:10px;font-weight:700;background:white;border:2px solid var(--negro);border-radius:var(--radio);cursor:pointer}
.pos-rapidos button:active{background:var(--amarillo)}
.pos-enviar{margin-top:14px;font-size:19px;padding:18px}
.pos-espera{display:flex;align-items:center;gap:8px;margin-top:10px}
.pos-espera input{width:auto}

.pos-modal{position:fixed;inset:0;background:rgba(0,0,0,.55);display:grid;place-items:center;z-index:50;padding:20px}
.pos-modal-caja{background:white;border:3px solid var(--negro);border-radius:var(--radio);padding:22px;width:min(460px,100%)}
.pos-modal-caja h2{font-size:28px;margin-bottom:14px}
.pos-opciones{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.pos-opciones .opcion{padding:12px;font-size:16px}
.pos-modal-pie{display:flex;gap:10px;justify-content:flex-end}

@media(max-width:980px){
  .pos{grid-template-columns:1fr}
  .pos-boleta{position:static}
  .pos-lineas{max-height:none}
}

/* Producto que ya está en la boleta: se marca y lleva su cuenta, para saber de
   un vistazo qué se lleva pedido sin ir a leer la boleta línea por línea. */
.pos-producto{position:relative}
.pos-producto.en-boleta{background:var(--negro);color:var(--amarillo)}
.pos-cuenta{
  position:absolute;top:-10px;right:-10px;min-width:30px;height:30px;padding:0 6px;
  display:grid;place-items:center;background:var(--rojo);color:white;font-weight:700;
  border:2px solid var(--negro);border-radius:999px;font-size:15px;
}
.pos-acciones-boleta{display:flex;justify-content:flex-end;margin-bottom:6px}
#vaciar{background:none;border:0;text-decoration:underline;cursor:pointer;color:var(--tinta-suave)}

/* Anular: el formulario vive plegado dentro del botón rojo, para que nadie lo
   apriete sin querer y para que el motivo sea parte del gesto, no un estorbo. */
.anular summary{list-style:none;cursor:pointer;display:inline-flex}
.anular summary::-webkit-details-marker{display:none}
.anular[open] summary{opacity:.6}

/* El panel que se abre dentro de una tarjeta de caja (descuento, anulación)
   ocupa el ancho completo de la tarjeta, debajo de los botones, en vez de
   apretujarse entre ellos. */
/* Cerrado, cada cajon ocupa lo que mide su boton y los demas caben al lado;
   abierto se lleva la fila entera, que es cuando necesita el espacio. */
.acciones details{width:auto}
.acciones details[open]{width:100%}
/* La accion principal ocupa el ancho: es la que se aprieta sin mirar. */
.acciones-principal{margin-top:16px}
.acciones-principal .boton{width:100%;text-align:center;padding:13px 18px;font-size:15px}
.acciones-principal form{width:100%}
/* El resto vive detras de «Mas…», que en reposo es un boton chico. */
.acciones-mas{margin-top:10px}
.acciones-mas > summary{list-style:none;display:inline-flex;cursor:pointer}
.acciones-mas > summary::-webkit-details-marker{display:none}
.acciones-mas[open] > summary{margin-bottom:4px}
.panel-accion{
  display:flex;flex-direction:column;gap:8px;margin-top:10px;padding:12px;
  background:var(--superficie-alta);border:1px solid var(--linea);border-radius:var(--radio);
}
.panel-accion .boton{align-self:flex-start}

/* --- Pantalla de cocina ----------------------------------------------------
   Va colgada en un monitor y se lee de lejos: tarjetas grandes, cantidades
   enormes y el color como reloj (amarillo a los 10 minutos, rojo a los 20). */
.kds-tablero{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.kds{background:white;border:3px solid var(--negro);border-radius:var(--radio);padding:16px;display:flex;flex-direction:column}
.kds header{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.kds-codigo{font:700 italic 32px/1 'Barlow Condensed',sans-serif}
.kds-reloj{font:700 italic 26px/1 'Barlow Condensed',sans-serif}
.kds-tipo{font-size:14px;font-weight:600;letter-spacing:.06em;margin:4px 0 10px;text-transform:uppercase}
.kds-items{list-style:none;margin:0 0 12px;padding:0;flex:1}
.kds-items li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;border-top:1px solid var(--linea);font-size:19px;line-height:1.25}
.kds-cantidad{font:700 italic 30px/1 'Barlow Condensed',sans-serif;min-width:38px}
.kds-items em{display:block;font-style:normal;font-size:15px;color:var(--tinta-suave)}
.kds-nota{color:var(--rojo);font-weight:600}
.kds button{
  width:100%;padding:16px;font-weight:700;font-size:18px;letter-spacing:.08em;cursor:pointer;
  background:var(--negro);color:var(--amarillo);border:0;border-radius:var(--radio);
}
.kds button.kds-retirar{background:var(--amarillo);color:var(--negro);border:3px solid var(--negro)}
.kds-atento{background:#FFF6CC}
.kds-tarde{background:#FFE0E3;border-color:var(--rojo)}
.kds-tarde .kds-reloj{color:var(--rojo)}
.kds-listo{opacity:.75;border-style:dashed}
.kds-vacio{grid-column:1/-1;font-size:20px;color:var(--tinta-suave)}

/* --- Pantalla de pedidos listos -------------------------------------------
   Pensada para un televisor colgado sobre el meson, mirado desde cinco metros
   y de reojo. Por eso todo es tamano: los codigos ocupan la pantalla entera y
   el color hace de semaforo. No hay nada que tocar. */
body.pizarra{background:var(--negro);color:var(--papel);overflow:hidden}
.pizarra-marco{height:100vh;display:flex;flex-direction:column;padding:2vh 2vw;gap:2vh}
.pizarra-tapa{display:flex;align-items:center;justify-content:space-between;gap:20px}
.pizarra-tapa img{height:8vh;width:auto}
.pizarra-reloj{font-family:"Barlow Condensed",system-ui,sans-serif;font-size:5vh;
  font-weight:700;color:var(--amarillo)}
.pizarra-columnas{flex:1;display:grid;grid-template-columns:1fr 1.4fr;gap:2vw;min-height:0}
.pizarra-col{display:flex;flex-direction:column;min-height:0;
  border:.4vh solid rgba(250,248,241,.18);border-radius:1.6vh;padding:1.6vh 1.6vw}
.pizarra-col h2{font-family:"Barlow Condensed",system-ui,sans-serif;font-style:italic;
  font-size:4vh;letter-spacing:.04em;margin:0 0 1.4vh;color:rgba(250,248,241,.7)}
/* La columna de retiro es la que el cliente busca: se lleva el amarillo. */
.pizarra-col-listo{border-color:var(--amarillo);background:rgba(255,217,26,.07)}
.pizarra-col-listo h2{color:var(--amarillo)}
.pizarra-codigos{list-style:none;margin:0;padding:0;overflow:hidden;
  display:flex;flex-wrap:wrap;gap:1.2vh 1.2vw;align-content:flex-start}
.pizarra-codigos li{font-family:"Barlow Condensed",system-ui,sans-serif;font-weight:700;
  font-size:7vh;line-height:1.05;letter-spacing:.02em}
.pizarra-col-listo .pizarra-codigos li{font-size:10vh;color:var(--negro);
  background:var(--amarillo);border-radius:1vh;padding:0 1.4vw}
/* El guion de "no hay nada" no lleva el fondo amarillo del codigo: un cuadro
   vacio con relleno se lee como si hubiera un pedido sin nombre. */
.pizarra-vacio,.pizarra-col-listo .pizarra-codigos li.pizarra-vacio{opacity:.35;background:none;
  color:rgba(250,248,241,.7);padding:0;font-size:6vh}
@media (max-width:700px){
  .pizarra-columnas{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .pizarra-codigos li{font-size:5vh}
  .pizarra-col-listo .pizarra-codigos li{font-size:7vh}
}

/* Foto del plato en la carta. Discreta a proposito: la marca la llevan la
   tipografia y el color, no la fotografia. */
.plato-foto{grid-column:1;width:100%;max-width:260px;aspect-ratio:4/3;
  object-fit:cover;border-radius:14px;margin-top:14px;background:var(--linea)}

/* Cartel imprimible con el QR de la carta. Se disena para el papel: fondo
   blanco, negro puro y el codigo grande, porque una camara de telefono a medio
   metro necesita tamano, no decoracion. */
.cartel-qr{background:#fff;color:var(--negro);border:2px solid var(--negro);
  border-radius:18px;padding:40px;text-align:center}
.cartel-qr > img:first-child{height:64px;width:auto}
.cartel-titulo{font:700 italic 54px/0.95 'Barlow Condensed',sans-serif;
  text-transform:uppercase;margin:24px 0}
.cartel-titulo span{color:var(--rojo)}
.cartel-codigo{width:min(320px,70%);height:auto;margin:0 auto;display:block}
.cartel-pie{font-size:18px;margin-top:22px}
@media print{
  .cartel-qr{border:none;padding:0}
  .panel-tapa,.lateral,.lateral-fondo{display:none}
}

/* Armado del combo dentro de la carta. */
.combo-partes{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px;margin-top:16px}
.combo-parte{margin:0;min-width:200px;flex:1}
.combo-parte span{display:block;font:700 italic 15px/1 'Barlow Condensed',sans-serif;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}

/* Armado del combo dentro de la ventanita de la caja. */
.pos-combo{display:flex;flex-direction:column;gap:12px}
.pos-combo:empty{display:none}
.pos-combo .campo{margin:0}

/* --- Mantenedor de la carta -----------------------------------------------
   Lista compacta: una linea por producto y el detalle solo del que se abre.
   Con una carta de verdad, la version anterior —todos los formularios
   desplegados— obligaba a buscar un precio entre paredes de campos. */
.carta-barra{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.carta-nueva-cat{display:flex;gap:10px;align-items:flex-end;flex:1;min-width:260px}
.carta-resumen{margin-bottom:22px}
.carta-cat-tapa{display:flex;justify-content:space-between;align-items:center;
  gap:14px;margin-bottom:14px;flex-wrap:wrap}
.carta-cat-nombre{display:flex;gap:10px;align-items:center}
.carta-cat-nombre input{font-weight:600;min-width:200px}
.carta-cat-acciones{display:flex;gap:8px;flex-wrap:wrap}

.carta-agregar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px;
  padding:12px;border:1px dashed var(--linea);border-radius:12px}
.carta-agregar input[name="nombre"]{flex:2;min-width:170px}
.carta-agregar input[name="precio"]{flex:0 0 120px}
.carta-agregar input[name="descripcion"]{flex:3;min-width:180px}

.carta-fila{border-bottom:1px solid var(--linea)}
.carta-fila > summary{display:flex;align-items:center;gap:14px;padding:10px 4px;
  cursor:pointer;list-style:none}
.carta-fila > summary::-webkit-details-marker{display:none}
.carta-fila > summary:hover{background:rgba(0,0,0,.03)}
.carta-fila > summary img,.carta-sinfoto{width:44px;height:44px;border-radius:9px;
  object-fit:cover;flex:none;background:var(--linea)}
.carta-nombre{flex:1;font-weight:600}
.carta-precio{font:700 italic 22px/1 'Barlow Condensed',sans-serif;white-space:nowrap}
.carta-marca{display:inline-block;font:700 11px/1 'Barlow',sans-serif;text-transform:uppercase;
  letter-spacing:.08em;background:var(--amarillo);color:var(--negro);
  border-radius:6px;padding:3px 6px;margin-left:6px;vertical-align:middle}
.carta-marca-roja{background:var(--rojo);color:#fff}
/* El agotado se ve apagado sin desaparecer: sigue estando, solo que no se vende. */
.carta-agotado > summary .carta-nombre,.carta-agotado > summary .carta-precio{opacity:.5}
.carta-detalle{padding:6px 4px 22px}
.carta-orden{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.carta-variantes{margin-top:16px;padding-top:14px;border-top:1px solid var(--linea)}
.carta-combo{margin-top:14px}

/* Barra del pedido, fija abajo en la carta. En el celular es lo unico que
   recuerda al cliente que lleva algo: la cabecera queda a una carta de scroll. */
.barra-pedido{position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px clamp(16px,4vw,40px);text-decoration:none;
  background:var(--negro);color:var(--papel);
  box-shadow:0 -10px 30px rgba(0,0,0,.25)}
.barra-pedido-cuenta{display:inline-grid;place-items:center;min-width:30px;height:30px;
  border-radius:15px;background:var(--amarillo);color:var(--negro);
  font:700 16px/1 'Barlow',sans-serif;padding:0 9px}
.barra-pedido strong{font:700 italic 26px/1 'Barlow Condensed',sans-serif;color:var(--amarillo)}
.barra-pedido-ir{margin-left:auto;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;font-size:14px}
.barra-pedido:hover .barra-pedido-ir{color:var(--amarillo)}
/* Deja aire al final para que la barra no tape el ultimo producto. */
body:has(.barra-pedido) footer{padding-bottom:90px}
@media (max-width:560px){
  .barra-pedido{gap:8px;padding:12px 16px}
  .barra-pedido-ir{width:100%;margin-left:0;text-align:right}
}

/* Lista de lo que falta configurar. Se puede cerrar —no es una alarma— pero
   mientras quede algo sin hacer vuelve a aparecer en cada carga. */
.pendientes{border:1px solid var(--linea);border-left:4px solid var(--amarillo);
  border-radius:12px;padding:14px 18px;margin:0 0 18px;background:#fff}
.pendientes > summary{cursor:pointer;font-weight:700;letter-spacing:.02em}
.pendientes ul{list-style:none;margin:12px 0 0;padding:0;display:flex;
  flex-direction:column;gap:12px}
.pendientes li{display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;font-size:15px;color:var(--tinta-suave)}
.pendientes li .boton{flex:none}
.pendientes li.pendiente-grave{color:var(--rojo);font-weight:600}

/* Linea de tiempo de un pedido: hora a la izquierda, lo que paso a la derecha. */
.historia{list-style:none;margin:0;padding:0}
.historia li{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--linea);
  font-size:15px}
.historia li:last-child{border-bottom:none}
.historia-hora{flex:none;width:52px;font-weight:700;color:var(--tinta-suave)}
.tablero .codigo a{color:inherit;text-decoration:none}
.tablero .codigo a:hover{text-decoration:underline}

/* Pedido agendado para mas tarde. */
.marca-agendado{background:var(--negro);color:var(--amarillo);margin-left:6px}
.kds-agendado{font:700 italic 22px/1 'Barlow Condensed',sans-serif;
  color:var(--rojo);margin:6px 0 0}

/* De quien es el pedido, en el tablero: el nombre se grita y el telefono se
   marca, asi que van a la vista y no adentro de la ficha. */
.pedido-quien{font-size:15px;font-weight:600;margin-top:2px}
.pedido-quien a{color:inherit}

/* Horario semanal: una linea por dia, para llenarlo de corrido. */
.horarios{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.horario-dia{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.horario-dia > span:first-child{width:92px;font-weight:600;font-size:15px}
.horario-dia input[type=time]{width:120px}
.horario-dia label{display:inline-flex;align-items:center;gap:6px}

/* Propina sugerida: botones del mismo tamano, con el monto debajo del
   porcentaje para no tener que calcularlo de cabeza. */
.propinas{display:flex;gap:10px;flex-wrap:wrap}
.propinas .opcion{flex:1;min-width:110px;text-align:center;justify-content:center}

/* --- Pantalla de cierre ----------------------------------------------------
   Sigue el orden en que se hace el cierre de verdad: mirar lo vendido, ver
   cuanto deberia haber, contar y firmar. Un paso debajo del otro, porque en
   dos columnas apretadas los numeros grandes se partian en dos lineas. */
.cierre{max-width:760px}
.cierre-paso{display:flex;gap:18px;margin-bottom:22px}
.cierre-numero{flex:none;width:38px;height:38px;border-radius:19px;
  background:var(--negro);color:var(--amarillo);display:grid;place-items:center;
  font:700 italic 20px/1 'Barlow Condensed',sans-serif}
.cierre-cuerpo{flex:1;background:#fff;border:1px solid var(--linea);
  border-radius:14px;padding:20px 22px}
.cierre-cuerpo > h2{margin:0 0 6px}

/* Las dos cifras que se miran: lo vendido y lo que deberia haber. */
.cierre-cifra{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;margin:16px 0;padding-top:14px;border-top:2px solid var(--negro)}
.cierre-cifra span{font:700 italic 17px/1 'Barlow Condensed',sans-serif;
  text-transform:uppercase;letter-spacing:.06em}
.cierre-cifra strong{font:700 italic 34px/1 'Barlow Condensed',sans-serif;white-space:nowrap}
.cierre-cifra-fuerte strong{color:var(--rojo)}

/* Como entro la plata: solo los medios que tuvieron monto. */
.cierre-medios{display:flex;flex-wrap:wrap;gap:10px}
.cierre-medios > div{flex:1;min-width:128px;border:1px solid var(--linea);
  border-radius:10px;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.cierre-medios strong{font:700 italic 22px/1 'Barlow Condensed',sans-serif}
.cierre-ojo{border-color:var(--rojo)}
.cierre-ojo strong{color:var(--rojo)}

.cierre-detalles,.cierre-cuenta{margin-top:14px}
.cierre-desglose{margin-top:12px}
.cierre-desglose > summary{cursor:pointer;padding:6px 0}

/* El veredicto del arqueo, mientras se escribe. */
.cierre-diferencia{margin-top:14px;padding:12px 14px;border-radius:10px;
  font-weight:700;font-size:16px}
.cierre-diferencia.cuadra{background:#E8F5E9;color:#1B5E20}
.cierre-diferencia.descuadra{background:#FFE0E3;color:var(--rojo-profundo)}

@media (max-width:620px){
  .cierre-paso{gap:12px}
  .cierre-cuerpo{padding:16px}
  .cierre-cifra strong{font-size:28px}
}

/* Conteo del cajon por denominacion. */
.conteo{margin-bottom:16px}
.conteo > summary{cursor:pointer;padding:6px 0}
.conteo-grilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));
  gap:10px;margin:10px 0}
.conteo-grilla label{display:flex;flex-direction:column;gap:4px;font-size:14px}
.conteo-grilla span{font-weight:600}

/* Buscador rapido del tablero de caja. */
.caja-buscar{display:flex;gap:8px;flex:1;min-width:260px;max-width:420px}
.caja-buscar input{flex:1}

/* «Pedir lo mismo»: una linea sobria antes de la carta, sin robarle
   protagonismo a los productos. */
.repetir{background:var(--negro);color:var(--papel)}
.repetir form{max-width:1180px;margin:0 auto;padding:14px clamp(16px,4vw,40px);
  display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.repetir span{font-weight:600}
.repetir input{flex:1;min-width:160px;max-width:260px}
.repetir .boton{background:transparent;color:var(--amarillo);border-color:var(--amarillo)}

/* Modo noche de la cocina: la pantalla se mira toda la jornada y el blanco
   puro a las once cansa la vista. El color sigue siendo el reloj. */
body.kds-noche{background:#121212;color:#ECECEC}
body.kds-noche .kds{background:#1E1E1E;border-color:#333;color:#ECECEC}
body.kds-noche .kds-atento{background:#3A3216}
body.kds-noche .kds-tarde{background:#3A1A1E;border-color:var(--rojo)}
body.kds-noche .kds-listo{opacity:.55}
body.kds-noche .kds-vacio{color:#888}
body.kds-noche .kds button{background:var(--amarillo);color:var(--negro)}

/* --- Ruleta ----------------------------------------------------------------
   Gira en la pantalla de caja y el cajero la da vuelta hacia el cliente. La
   animacion solo muestra lo que el servidor ya decidio. */
.pasos-ruleta{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.pasos-ruleta li{display:flex;align-items:center;gap:12px;justify-content:space-between;
  flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--linea)}
.pasos-ruleta label{display:flex;align-items:center;gap:10px;font-weight:600;flex:1}
.pasos-ruleta input{width:auto}
.ruleta-listo{background:var(--amarillo);color:var(--negro);border-radius:12px;
  padding:14px 16px;margin-top:16px}
.ruleta-premios{display:flex;gap:10px;flex-wrap:wrap}
.ruleta-premios span{font:700 italic 26px/1 'Barlow Condensed',sans-serif;
  background:var(--negro);color:var(--amarillo);border-radius:10px;padding:10px 16px}

.ruleta-caja{text-align:center;max-width:420px}
.ruleta-aguja{width:0;height:0;margin:0 auto -10px;position:relative;z-index:2;
  border-left:14px solid transparent;border-right:14px solid transparent;
  border-top:24px solid var(--rojo)}
.ruleta-rueda{position:relative;width:280px;height:280px;margin:0 auto;border-radius:50%;
  border:8px solid var(--negro);background:
    conic-gradient(var(--amarillo) 0 25%, var(--papel) 0 50%,
                   var(--amarillo) 0 75%, var(--papel) 0);
  transition:transform 4s cubic-bezier(.17,.67,.21,1)}
.ruleta-casilla{position:absolute;left:50%;top:10px;transform-origin:0 130px;
  font:700 italic 22px/1 'Barlow Condensed',sans-serif;color:var(--negro)}
.ruleta-resultado{font:700 italic 30px/1.2 'Barlow Condensed',sans-serif;
  color:var(--rojo);margin:22px 0 14px}
@media (max-width:420px){
  .ruleta-rueda{width:220px;height:220px}
  .ruleta-casilla{transform-origin:0 100px;font-size:18px}
}