/* ═══════════════════════════════════════════════════════════════
   CAFEINNOVA — Registro de pedidos
   Paleta tomada del logo de la marca:
     naranjo  #EC652D   café  #4B2D22   casi negro  #24191D
   ═══════════════════════════════════════════════════════════════ */

:root{
  --cream:#FBF6F1;
  --panel:#FFFFFF;
  --panel-2:#F4EAE2;
  --ink:#24191D;
  --ink-2:#57433B;
  --muted:#8D7A70;
  --rule:#E7DACF;

  --naranjo:#EC652D;        /* rellenos y marcas */
  --naranjo-ink:#BF4718;    /* naranjo legible sobre claro */
  --naranjo-soft:#FDE8DB;
  --cafe:#4B2D22;
  --cafe-soft:#EFE2DB;

  --good:#2E6B4F; --good-soft:#DEEDE5;
  --bad:#A33726;  --bad-soft:#F8E1DA;

  --btn-bg:var(--cafe); --btn-ink:#FFF8F4;

  --sans:"Segoe UI",-apple-system,system-ui,"Helvetica Neue",Arial,sans-serif;
  --display:"Segoe UI Black","Arial Black","Segoe UI",Impact,var(--sans);
  --mono:"Consolas","SF Mono",ui-monospace,"Roboto Mono",monospace;

  --r:10px;
  --shadow:0 1px 2px rgba(36,25,29,.05), 0 10px 26px -18px rgba(36,25,29,.45);
}

:root[data-theme="dark"]{
  --cream:#16100E;
  --panel:#211917;
  --panel-2:#2C221E;
  --ink:#F5EBE4;
  --ink-2:#D2C0B5;
  --muted:#998478;
  --rule:#392B26;

  --naranjo:#F5793F;
  --naranjo-ink:#F5793F;
  --naranjo-soft:#3A2118;
  --cafe:#E9DDD5;
  --cafe-soft:#31241F;

  --good:#79B593; --good-soft:#1C2B23;
  --bad:#DE8371;  --bad-soft:#33201B;

  --btn-bg:var(--naranjo); --btn-ink:#2A1611;
  --shadow:0 1px 2px rgba(0,0,0,.5), 0 12px 30px -20px #000;
}

*{box-sizing:border-box;}
/* El atributo hidden manda por sobre cualquier display de más abajo. */
[hidden]{display:none !important;}
html,body{margin:0; padding:0;}
body{
  background:var(--cream); color:var(--ink);
  font-family:var(--sans); font-size:15.5px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
button,input,select,textarea{font:inherit; color:inherit;}
:focus-visible{outline:2px solid var(--naranjo); outline-offset:2px; border-radius:4px;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms !important; animation-duration:.01ms !important;}
}

/* ───────────── Barra superior ───────────── */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:1.2rem;
  padding:.55rem clamp(.8rem,2.4vw,1.5rem);
  background:var(--ink); color:#F6EDE7;
  border-bottom:2px solid var(--naranjo);
  flex-wrap:wrap;
}
.brand{display:flex; align-items:center; gap:.6rem; min-width:0;}
.brand-logo{width:34px; height:34px; object-fit:contain; flex:none; filter:drop-shadow(0 0 10px rgba(236,101,45,.35));}
.brand-txt{display:flex; flex-direction:column; line-height:1.05; min-width:0;}
.brand-txt strong{
  font-family:var(--display); font-size:1.06rem; letter-spacing:.005em;
  text-transform:uppercase; color:#FFF6F0;
}
.brand-txt span{
  font-size:.62rem; letter-spacing:.19em; text-transform:uppercase;
  color:var(--naranjo); font-weight:700;
}

.tabs{display:flex; gap:.2rem; margin-inline:auto;}
.tab{
  border:0; background:transparent; color:#C6B2A7; cursor:pointer;
  padding:.5rem .95rem .55rem; border-radius:0; position:relative;
  font-size:.88rem; font-weight:600;
}
.tab:hover{color:#FFF6F0;}
.tab.is-active{color:#FFF6F0;}
/* El filamento: marca la pestaña encendida */
.tab.is-active::after{
  content:""; position:absolute; left:.35rem; right:.35rem; bottom:-.55rem; height:2px;
  background:var(--naranjo); box-shadow:0 0 10px 1px rgba(236,101,45,.75);
}

.topbar-right{display:flex; align-items:center; gap:.55rem;}
.live{
  text-align:right; font-family:var(--mono); line-height:1.15;
  font-size:.63rem; color:#A28C80; text-transform:uppercase; letter-spacing:.06em;
}
.live strong{display:block; font-size:1rem; color:#F6EDE7; letter-spacing:.02em;}
.icon-btn{
  width:34px; height:34px; border-radius:8px; cursor:pointer;
  border:1px solid #4A3730; background:transparent; color:#C6B2A7;
}
.icon-btn:hover{background:#31241F; color:#FFF6F0;}

/* ───────────── Vistas ───────────── */
.view{display:none;}
.view.is-active{display:block;}
.page{max-width:84rem; margin:0 auto; padding:clamp(1rem,2.6vw,1.8rem);}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:1.1rem;}
.page-head h1{
  font-family:var(--display); font-size:clamp(1.3rem,3vw,1.75rem);
  margin:0; letter-spacing:-.005em; text-transform:uppercase;
}
.page-actions{display:flex; gap:.5rem; flex-wrap:wrap;}

/* ───────────── Botones ───────────── */
.btn-primary,.btn-ghost,.btn-danger{
  border-radius:9px; cursor:pointer; font-weight:600; font-size:.88rem;
  padding:.55rem 1rem; border:1px solid transparent; white-space:nowrap;
  transition:background .14s, color .14s, box-shadow .14s, border-color .14s;
}
.btn-primary{background:var(--btn-bg); color:var(--btn-ink); border-color:var(--btn-bg);}
.btn-primary:hover:not(:disabled){filter:brightness(1.1);}
.btn-primary:disabled{opacity:.5; cursor:not-allowed;}
.btn-ghost{background:var(--panel); border-color:var(--rule); color:var(--ink-2);}
.btn-ghost:hover{background:var(--panel-2); color:var(--ink);}
.btn-danger{background:var(--bad-soft); color:var(--bad); border-color:transparent;}
.btn-danger:hover{filter:brightness(.97);}
.sm{padding:.3rem .65rem; font-size:.79rem; border-radius:7px;}
button:active{transform:translateY(1px);}

/* ───────────── Campos ───────────── */
.fld{display:flex; flex-direction:column; gap:.25rem; min-width:0;}
.fld > span{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:700;
}
.fld .req{color:var(--naranjo);}
.fld input,.fld select,.add-row input,.search-wrap input{
  background:var(--panel); border:1px solid var(--rule); border-radius:8px;
  padding:.5rem .65rem; width:100%; min-width:0; color:var(--ink);
}
.fld input:focus,.fld select:focus{
  border-color:var(--naranjo); outline:none; box-shadow:0 0 0 3px var(--naranjo-soft);
}
.chk{display:flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--ink-2); cursor:pointer; white-space:nowrap;}
.chk input{accent-color:var(--naranjo); width:16px; height:16px;}
.row-2{display:grid; grid-template-columns:1fr 1.4fr; gap:.6rem;}

/* Descuento y nota, en una sola línea baja: el descuento cabe en tres dígitos
   y la nota casi siempre va vacía. */
.fila-chica{display:grid; grid-template-columns:4.4rem 1fr; gap:.45rem; align-items:end;}
.fila-chica .fld span{font-size:.64rem;}
.fila-chica input{padding:.32rem .5rem; font-size:.86rem;}
.fila-chica .mini input{text-align:right; font-family:var(--mono);}

.seg{display:inline-flex; background:var(--panel-2); padding:.2rem; border-radius:9px; gap:.15rem; flex-wrap:wrap;}
.seg button{
  border:0; background:transparent; color:var(--ink-2); cursor:pointer;
  padding:.38rem .8rem; border-radius:7px; font-size:.84rem; font-weight:600;
}
.seg button.is-active{background:var(--ink); color:var(--cream);}

/* ═════════════ CAJA ═════════════ */
/* El panel del pedido pasó de un ancho FIJO (26.5rem) a una PROPORCIÓN del
   espacio disponible, con suelo y techo:
     · En un escritorio de 1366 el ancho fijo dejaba el panel en un 32% y la
       lista del pedido se leía apretada. Con 40% pasa a 523 px.
     · El SUELO son esas mismas 26.5rem, y no es capricho: en un iPad de 1024
       el 40% daría 387 px, MENOS de lo que ya tenía. Agrandar el carrito no
       puede significar encogerlo justo en el equipo del mostrador, así que ahí
       manda el suelo y queda en ~44%.
     · El TECHO evita que en una pantalla muy ancha el panel se estire sin que
       nadie gane nada con ello. */
.pos{
  display:grid; grid-template-columns:minmax(0,1fr) clamp(26.5rem,40%,34rem);
  gap:1rem; align-items:start;
  max-width:90rem; margin:0 auto; padding:clamp(.8rem,2vw,1.4rem);
}
.pos-menu{min-width:0;}
.menu-head{
  position:sticky; top:56px; z-index:20;
  background:var(--cream); padding-bottom:.55rem;
  display:flex; flex-direction:column; gap:.5rem;
}
.search-wrap input{border-radius:9px; padding:.6rem .8rem;}
.cats{display:flex; gap:.15rem; overflow-x:auto; scrollbar-width:thin; border-bottom:1px solid var(--rule);}
.cat{
  border:0; background:transparent; color:var(--muted);
  padding:.42rem .75rem .5rem; cursor:pointer; position:relative;
  font-size:.82rem; font-weight:700; white-space:nowrap;
  text-transform:uppercase; letter-spacing:.04em;
}
.cat:hover{color:var(--ink);}
.cat.is-active{color:var(--ink);}
.cat.is-active::after{
  content:""; position:absolute; left:.4rem; right:.4rem; bottom:-1px; height:2px;
  background:var(--naranjo);
}

.grid-prod{display:grid; grid-template-columns:repeat(auto-fill,minmax(9.8rem,1fr)); gap:.55rem;}
.prod{
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--r);
  padding:.7rem .75rem; cursor:pointer; text-align:left;
  display:flex; flex-direction:column; gap:.35rem; min-height:5.1rem;
  transition:border-color .12s, box-shadow .12s, transform .06s;
}
.prod:hover{border-color:var(--naranjo); box-shadow:0 4px 14px -8px rgba(236,101,45,.7); transform:translateY(-1px);}
.prod .p-nom{font-weight:600; font-size:.9rem; line-height:1.25;}
.prod .p-bot{display:flex; align-items:center; justify-content:space-between; gap:.4rem; margin-top:auto;}
.prod .p-pre{font-family:var(--mono); font-size:.94rem; color:var(--ink); font-weight:700;}
.prod .p-lec{
  display:inline-flex; align-items:center; gap:.28rem;
  font-size:.58rem; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  color:var(--naranjo-ink);
}
.prod .p-lec::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--naranjo);}
.grid-prod .empty{grid-column:1/-1;}

/* ───── El pedido: barra oscura, como el mesón ───── */
.pos-ticket{
  --panel:#2B1F1C; --panel-2:#3A2A24; --rule:#4A362E;
  --ink:#F7EFE9; --ink-2:#DCC9BE; --muted:#A08A7C;
  --btn-bg:var(--naranjo); --btn-ink:#2A1611;
  position:sticky; top:56px;
  background:var(--panel); color:var(--ink);
  border-radius:12px; box-shadow:0 18px 40px -28px rgba(36,25,29,.9);
  display:flex; flex-direction:column;
  max-height:calc(100vh - 70px); overflow:hidden;
}
/* Cabecera y pie compactos: cada milímetro que sueltan se lo lleva la lista de
   productos, que es lo único que se mira mientras se arma el pedido. */
.ticket-head{
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.3rem .7rem .3rem .9rem; border-bottom:1px solid var(--rule);
}
/* El selector de modo, metido en la cabecera, va en letra chica y sin envolver:
   si sus dos botones se apilaran, la cabecera crecería y el ahorro se perdería. */
.ticket-head .seg-modo{padding:.12rem; flex-wrap:nowrap; margin-inline:auto;}
.ticket-head .seg-modo button{padding:.26rem .5rem; font-size:.75rem; white-space:nowrap;}
.ticket-tit{
  font-size:.62rem; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); font-weight:700;
}
/* Nombre y modo EN LA MISMA FILA. Antes iban uno debajo del otro y se comían
   dos renglones del panel; el carrito es lo único que se mira mientras se arma
   el pedido, así que cada fila que se ahorra aquí se la lleva él. */
.ticket-ids{display:grid; gap:.3rem; padding:.4rem .9rem .3rem;}
.ticket-ids .fld input{padding:.42rem .6rem;}
.ticket-ids .opt{font-weight:400; text-transform:none; letter-spacing:0; opacity:.7;}

.pos-ticket .fld input,.pos-ticket .fld select{background:#241A17; border-color:var(--rule); color:var(--ink);}
.pos-ticket .fld input::placeholder{color:#7E6A5E;}
.pos-ticket .btn-ghost{background:transparent; border-color:var(--rule); color:var(--ink-2);}
.pos-ticket .btn-ghost:hover{background:var(--panel-2); color:var(--ink);}

/* `min-height` alto a propósito: con 5rem el carrito se encogía hasta dos
   líneas cuando el pie crecía, y había que hacer rodar la lista para ver un
   pedido de cuatro cafés. Ahora el pie cede antes que la lista. */
.cart{list-style:none; margin:0; padding:.4rem .9rem; overflow-y:auto; flex:1 1 auto; min-height:13rem;}
.cart .vacio{
  color:var(--muted); font-size:.86rem; text-align:center; line-height:1.6;
  padding:1.5rem .5rem; border:1px dashed var(--rule); border-radius:9px;
}
.ci{display:flex; gap:.5rem; padding:.55rem 0; border-bottom:1px solid var(--rule);}
.ci:last-child{border-bottom:0;}
.ci-main{flex:1; min-width:0;}
.ci-nom{font-weight:600; font-size:.91rem;}
.ci-det{font-size:.75rem; color:var(--muted); line-height:1.45;}
.ci-det b{color:var(--naranjo); font-weight:600;}
.ci-right{display:flex; flex-direction:column; align-items:flex-end; gap:.3rem;}
.ci-pre{font-family:var(--mono); font-size:.9rem; font-weight:700;}
.qty{display:flex; align-items:center; gap:.1rem; background:var(--panel-2); border-radius:7px; padding:.1rem;}
.qty button{
  width:22px; height:22px; border:0; background:transparent; cursor:pointer;
  color:var(--ink-2); border-radius:5px; font-weight:700; line-height:1;
}
.qty button:hover{background:var(--ink); color:var(--panel);}
.qty span{min-width:1.4rem; text-align:center; font-size:.84rem; font-weight:700; font-family:var(--mono);}
.ci-del{border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:.71rem; text-decoration:underline; padding:0;}
.ci-del:hover{color:var(--naranjo);}

/* Línea a la que todavía le falta leche o sabor */
.ci.pend{border-left:2px solid var(--naranjo); padding-left:.5rem; margin-left:-.5rem;}
.ci-falta{
  color:var(--naranjo); font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:.66rem;
}
.seg-modo{display:flex; width:100%;}
.seg-modo button{flex:1; font-size:.78rem; padding:.38rem .3rem;}
.pos-ticket .seg{background:#241A17;}
.pos-ticket .seg button{color:var(--muted);}
.pos-ticket .seg button.is-active{background:var(--panel-2); color:var(--ink);}
.btn-pend{
  width:100%; padding:.6rem 1rem; border-radius:10px; cursor:pointer;
  background:transparent; border:1px solid var(--naranjo); color:var(--naranjo);
  font-weight:700; font-size:.9rem;
}
.btn-pend:hover{background:var(--naranjo); color:#2A1611;}

/* `flex-shrink:0`: el pie lleva el botón de registrar y no puede encogerse
   hasta recortarlo. Lo que cede espacio es la lista, que ya sabe rodar. */
.ticket-foot{
  padding:.5rem .9rem .6rem; border-top:1px solid var(--rule);
  display:grid; gap:.4rem; background:#241A17; flex-shrink:0;
}
.totales{display:grid; gap:.15rem;}
.tot-row{display:flex; justify-content:space-between; font-size:.82rem; line-height:1.3; color:var(--ink-2); font-variant-numeric:tabular-nums;}
.tot-row.muted-row{color:var(--naranjo);}
.tot-row.grand{
  font-family:var(--display); font-size:1.25rem; color:var(--ink);
  align-items:baseline; margin-top:.15rem; padding-top:.25rem;
  border-top:1px solid var(--rule);
}
.tot-row.grand span:last-child{color:var(--naranjo);}
/* Se enciende cuando el pedido está listo para cobrar */
.btn-primary.big{
  width:100%; padding:.7rem 1rem; font-size:1rem; border-radius:10px;
  box-shadow:0 0 0 0 rgba(236,101,45,0), 0 8px 22px -10px rgba(236,101,45,.85);
}
.btn-primary.big:disabled{
  background:transparent; color:var(--muted); border:1px dashed var(--rule);
  box-shadow:none; opacity:1;
}
.hint{margin:0; font-size:.72rem; color:var(--muted); text-align:center; min-height:0; line-height:1.35;}
.hint.warn{color:var(--naranjo);}

/* ═════════════ FILTROS Y TABLAS ═════════════ */
.filtros{
  display:flex; gap:.7rem; align-items:flex-end; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--rule); border-radius:var(--r);
  padding:.75rem .9rem; margin-bottom:1rem;
}
.filtros .fld{min-width:8.5rem;}
.filtros .fld.grow{flex:1; min-width:12rem;}

.tbl-wrap{background:var(--panel); border:1px solid var(--rule); border-radius:var(--r); overflow:auto;}
.tbl{width:100%; border-collapse:collapse; font-size:.87rem;}
.tbl th{
  text-align:left; font-size:.64rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:700; padding:.6rem .7rem;
  border-bottom:1px solid var(--rule); background:var(--panel-2);
  position:sticky; top:0; z-index:2; white-space:nowrap;
}
.tbl td{padding:.55rem .7rem; border-bottom:1px solid var(--rule); vertical-align:top;}
.tbl tbody tr:last-child td{border-bottom:0;}
.tbl tbody tr:hover{background:var(--panel-2);}
.tbl .num,.tbl td.num{text-align:right; font-variant-numeric:tabular-nums; font-family:var(--mono);}
.tbl .ctr,.tbl td.ctr{text-align:center;}
.tbl .folio{font-family:var(--mono); font-weight:700; color:var(--naranjo-ink);}
.tbl .det{color:var(--ink-2); font-size:.81rem; max-width:26rem;}
.tbl .det .ln{display:block;}
.tbl .det .op{color:var(--muted);}
.tbl .acc{display:flex; gap:.3rem; justify-content:flex-end;}
.tbl tr.anulado td{opacity:.5; text-decoration:line-through;}
.tbl tr.anulado .badge-anul{text-decoration:none; opacity:1;}
.badge-anul{
  display:inline-block; background:var(--bad-soft); color:var(--bad);
  font-size:.6rem; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
  padding:.1rem .35rem; border-radius:4px; margin-left:.3rem;
}
.pts{font-family:var(--mono); font-weight:700; color:var(--naranjo-ink);}
.empty{padding:2rem 1rem; text-align:center; color:var(--muted); font-size:.9rem; margin:0;}
.tbl-foot{
  display:flex; gap:1.6rem; flex-wrap:wrap; justify-content:flex-end;
  padding:.8rem .2rem 0; font-size:.88rem; color:var(--ink-2);
}
.tbl-foot b{font-family:var(--mono); color:var(--ink); font-size:1.05rem;}

/* ═════════════ REPORTES Y CLUB ═════════════ */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.7rem; margin-bottom:1.2rem;}
.kpi{background:var(--panel); border:1px solid var(--rule); border-radius:var(--r); padding:.85rem .95rem;}
.kpi .k-lbl{font-size:.65rem; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); font-weight:700;}
.kpi .k-val{font-family:var(--display); font-size:1.6rem; line-height:1.25; margin-top:.25rem; letter-spacing:-.01em;}
.kpi .k-sub{font-size:.74rem; color:var(--muted);}
.kpi.hi{background:var(--ink); border-color:var(--ink);}
.kpi.hi .k-lbl{color:#A8907F;}
.kpi.hi .k-val{color:var(--naranjo);}
.kpi.hi .k-sub{color:#C6B2A7;}

.cols{display:grid; grid-template-columns:repeat(auto-fit,minmax(19rem,1fr)); gap:.9rem;}
.card{background:var(--panel); border:1px solid var(--rule); border-radius:var(--r); padding:.9rem 1rem;}
.card h3{
  margin:0 0 .7rem; font-size:.68rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:700;
}
.bars{display:grid; gap:.5rem;}
.bar-row{display:grid; grid-template-columns:1fr auto; gap:.15rem .6rem; font-size:.85rem;}
.bar-row .b-nom{color:var(--ink-2);}
.bar-row .b-val{font-family:var(--mono); font-weight:700; font-variant-numeric:tabular-nums;}
.bar-track{grid-column:1/-1; height:6px; background:var(--panel-2); border-radius:99px; overflow:hidden;}
.bar-fill{height:100%; background:var(--cafe); border-radius:99px;}
.bar-fill.cu{background:var(--naranjo);}
.hours{display:flex; align-items:flex-end; gap:3px; height:110px; margin-top:.3rem;}
.hour{flex:1; display:flex; flex-direction:column; align-items:center; gap:.25rem; justify-content:flex-end; height:100%;}
.hour .h-bar{width:100%; background:var(--cafe-soft); border-radius:3px 3px 0 0; min-height:2px;}
.hour .h-lbl{font-size:.57rem; color:var(--muted); font-family:var(--mono);}
.hour.top .h-bar{background:var(--naranjo);}
.mini-tbl{width:100%; border-collapse:collapse; font-size:.85rem;}
.mini-tbl td{padding:.32rem 0; border-bottom:1px solid var(--rule);}
.mini-tbl tr:last-child td{border-bottom:0;}
.mini-tbl td:last-child{text-align:right; font-family:var(--mono); font-weight:700;}

/* Bloque explicativo del club */
.club-nota{
  display:flex; gap:.7rem; align-items:flex-start;
  background:var(--naranjo-soft); border-radius:var(--r);
  padding:.75rem .9rem; margin-bottom:1rem; font-size:.86rem; color:var(--ink-2);
}
.club-nota strong{color:var(--naranjo-ink);}
.club-nota .cn-ico{font-size:1.1rem; line-height:1.2;}

/* ═════════════ AJUSTES ═════════════ */
.cfg{background:var(--panel); border:1px solid var(--rule); border-radius:var(--r); margin-bottom:.7rem; overflow:hidden;}
.cfg > summary{
  cursor:pointer; padding:.8rem 1rem; font-weight:700; font-size:.93rem;
  list-style:none; display:flex; align-items:center; gap:.5rem;
}
.cfg > summary::-webkit-details-marker{display:none;}
.cfg > summary::before{content:"▸"; color:var(--naranjo); transition:transform .15s;}
.cfg[open] > summary::before{transform:rotate(90deg);}
.cfg > summary:hover{background:var(--panel-2);}
.cnt{font-size:.71rem; color:var(--muted); font-weight:600; font-family:var(--mono);}
.cfg-body{padding:0 1rem 1rem; display:grid; gap:.8rem;}
.note{margin:0; font-size:.82rem; color:var(--muted); max-width:64ch;}
.note b{color:var(--ink-2);}
.note.warn{color:var(--naranjo-ink); font-weight:600;}

/* Casilla con explicación debajo, para decisiones que no se pueden deshacer. */
.chk.bloque{
  align-items:flex-start; gap:.55rem; white-space:normal; margin-top:.8rem;
  border:1px solid var(--rule); border-radius:10px; padding:.6rem .7rem; background:var(--panel-2);
}
.chk.bloque input{margin-top:.15rem; flex:0 0 auto;}
.chk.bloque b{display:block; color:var(--ink); font-size:.86rem;}
.chk.bloque small{display:block; margin-top:.2rem; color:var(--muted); font-size:.78rem; line-height:1.45;}

.avisos-lista{
  margin:.7rem 0 0; padding:.5rem .7rem .5rem 1.6rem; border-radius:8px;
  background:var(--naranjo-soft); color:var(--ink); font-size:.8rem; line-height:1.5;
}
.avisos-lista li + li{margin-top:.3rem;}
.add-row{display:flex; gap:.5rem; flex-wrap:wrap; align-items:center;}
.add-row input[type=text],.add-row input[type=number]{
  background:var(--panel); border:1px solid var(--rule); border-radius:8px; padding:.5rem .65rem; color:var(--ink);
}
.add-row input[type=text]{min-width:11rem; flex:1;}
.add-row input[type=number]{width:7.5rem;}
.chips{display:flex; gap:.4rem; flex-wrap:wrap;}
.chip{
  display:inline-flex; align-items:center; gap:.45rem;
  background:var(--panel-2); border-radius:20px; padding:.3rem .5rem .3rem .85rem;
  font-size:.86rem; font-weight:600;
}
.chip button{border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:.95rem; line-height:1; padding:0 .15rem;}
.chip button:hover{color:var(--bad);}
.tbl-cfg input[type=text],.tbl-cfg input[type=number]{
  background:transparent; border:1px solid transparent; border-radius:6px; padding:.25rem .35rem; width:100%;
}
.tbl-cfg input:hover{border-color:var(--rule);}
.tbl-cfg input:focus{background:var(--panel); border-color:var(--naranjo); outline:none;}
.tbl-cfg input[type=number]{text-align:right; font-family:var(--mono);}
.tbl-cfg input[type=radio],.tbl-cfg input[type=checkbox]{accent-color:var(--naranjo); width:16px; height:16px;}
.x-btn{border:0; background:transparent; color:var(--muted); cursor:pointer; font-size:1rem; padding:.1rem .3rem; border-radius:5px;}
.x-btn:hover{color:var(--bad); background:var(--bad-soft);}
.regla{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  font-size:.92rem; color:var(--ink-2);
}
.regla input[type=number]{
  width:6.5rem; background:var(--panel); border:1px solid var(--rule);
  border-radius:8px; padding:.45rem .6rem; text-align:right; font-family:var(--mono); color:var(--ink);
}
.regla-prev{
  background:var(--naranjo-soft); color:var(--naranjo-ink); border-radius:8px;
  padding:.5rem .75rem; font-size:.86rem; font-weight:600; width:max-content;
}

/* ── Puntos dobles ── */
/* Apagada es una fila más de ajustes; encendida tiene que saltar a la vista,
   porque estar corriendo un lunes sin darse cuenta sale caro. */
.promo{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  margin:.9rem 0; padding:.75rem .9rem;
  border:1px solid var(--rule); border-radius:10px; background:var(--panel);
}
.promo-txt{display:flex; flex-direction:column; gap:.15rem; flex:1; min-width:12rem;}
.promo-txt strong{font-size:.95rem;}
.promo-txt span{font-size:.8rem; color:var(--ink-2);}
.promo.encendida{
  border-color:var(--naranjo); background:var(--naranjo-soft);
}
.promo.encendida .promo-txt strong{color:var(--naranjo-ink);}
.promo.encendida .promo-txt strong::before{content:'★ '; }
.btn-promo{
  border:1px solid var(--rule); background:var(--panel); color:var(--ink);
  border-radius:8px; padding:.5rem 1.1rem; font:inherit; font-weight:600; cursor:pointer;
  white-space:nowrap;
}
.btn-promo:hover{border-color:var(--naranjo);}
.promo.encendida .btn-promo{background:var(--naranjo); border-color:var(--naranjo); color:#fff;}

/* El mismo aviso, pero en la caja: la cajera tiene que poder decírselo al cliente. */
.aviso-dobles{
  display:flex; flex-direction:column; gap:.1rem;
  margin-bottom:.6rem; padding:.55rem .8rem; border-radius:10px;
  background:var(--naranjo); color:#fff;
}
.aviso-dobles b{font-size:.9rem; letter-spacing:.04em;}
.aviso-dobles span{font-size:.78rem; opacity:.92;}

/* ═════════════ MODAL ═════════════ */
.modal-bg{
  position:fixed; inset:0; z-index:60; background:rgba(36,25,29,.5);
  display:grid; place-items:center; padding:1rem; backdrop-filter:blur(2px);
}
.modal{
  background:var(--panel); border-radius:14px; border:1px solid var(--rule);
  box-shadow:0 30px 70px -25px rgba(0,0,0,.6);
  width:min(30rem,100%); max-height:92vh; overflow-y:auto;
}
/* Editores con varias columnas por línea: caben sin tener que desplazar. */
.modal.ancho{width:min(40rem,100%);}
/* Panel compacto: pide el nombre sin tapar la caja entera. */
.modal-bg.compacta{
  background:transparent; backdrop-filter:none;
  place-items:end center; padding:0 0 1rem;
}
.modal-bg.compacta .modal{
  width:min(23rem,calc(100% - 1.5rem));
  box-shadow:0 24px 60px -18px rgba(0,0,0,.55), 0 0 0 2px var(--naranjo);
  animation:sube .16s ease-out;
}
.modal-bg.compacta .m-head{padding:.7rem .85rem .3rem;}
.modal-bg.compacta .m-head h2{font-size:1rem;}
.modal-bg.compacta .m-body{padding:.3rem .85rem 0; gap:.6rem;}
.modal-bg.compacta .m-foot{padding:.7rem .85rem .85rem;}
.modal-bg.compacta .sugs{max-height:11rem;}
@keyframes sube{from{transform:translateY(14px); opacity:0;} to{transform:none; opacity:1;}}
/* En pantalla ancha se acomoda sobre el panel del pedido, a la derecha. */
@media (min-width:900px){
  .modal-bg.compacta{place-items:end end; padding:0 1rem 1rem;}
}

.m-head{padding:1rem 1.1rem .5rem; position:relative;}
.m-head h2{margin:0; font-family:var(--display); font-size:1.2rem; text-transform:uppercase; letter-spacing:-.005em; padding-right:2rem;}
/* Salida al pedido: el cliente agrega algo más justo cuando le preguntas el nombre. */
.m-cerrar{
  position:absolute; top:.55rem; right:.6rem; width:2rem; height:2rem;
  border:0; background:transparent; color:var(--muted);
  font-size:1.5rem; line-height:1; cursor:pointer; border-radius:8px;
}
.m-cerrar:hover{background:var(--panel-2); color:var(--ink);}
.m-head p{margin:.2rem 0 0; font-size:.84rem; color:var(--muted);}
.m-body{padding:.4rem 1.1rem 0; display:grid; gap:.9rem;}
.m-foot{padding:1rem 1.1rem 1.1rem; display:flex; gap:.5rem; justify-content:flex-end; align-items:center;}
.m-foot .btn-primary{flex:1;}
.opt-group > .g-lbl{
  font-size:.66rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:700; display:block; margin-bottom:.35rem;
}
.opts{display:flex; gap:.35rem; flex-wrap:wrap;}
.opt{
  border:1px solid var(--rule); background:var(--panel); border-radius:8px;
  padding:.4rem .7rem; cursor:pointer; font-size:.86rem; text-align:left; color:var(--ink);
}
.opt:hover{border-color:var(--naranjo);}
.opt.is-active{background:var(--naranjo); border-color:var(--naranjo); color:#2A1611;}
.opt .plus{opacity:.75; font-size:.77rem; font-family:var(--mono);}
.g-inc{
  color:var(--naranjo-ink); background:var(--naranjo-soft);
  padding:.05rem .3rem; border-radius:4px; margin-left:.3rem; letter-spacing:.06em;
}
.g-opc{
  color:var(--muted); background:var(--panel-2);
  padding:.05rem .3rem; border-radius:4px; margin-left:.3rem; letter-spacing:.06em;
}
.extra-opc{
  display:flex; align-items:center; gap:.5rem; margin-top:.5rem;
  font-size:.85rem; color:var(--ink-2);
}
.extra-opc select{
  flex:1; background:var(--panel); color:var(--ink);
  border:1px solid var(--naranjo); border-radius:8px; padding:.4rem .5rem;
}

/* Grupos de opciones en Ajustes */
.grupo{border:1px solid var(--rule); border-radius:var(--r); padding:.7rem .8rem; margin-bottom:.6rem; display:grid; gap:.55rem;}
.grupo-head{display:flex; align-items:center; gap:.7rem; flex-wrap:wrap;}
.grupo-nom{
  flex:1; min-width:9rem; font-weight:700; background:transparent;
  border:1px solid transparent; border-radius:6px; padding:.3rem .4rem; color:var(--ink);
}
.grupo-nom:hover{border-color:var(--rule);}
.grupo-nom:focus{background:var(--panel); border-color:var(--naranjo); outline:none;}
.grupo .chip b{color:var(--naranjo-ink); font-family:var(--mono); font-size:.8rem;}
.sug input[type=checkbox]{accent-color:var(--naranjo); width:16px; height:16px;}

/* Autocompletado del nombre del cliente */
.sugs{display:flex; flex-direction:column; gap:.25rem; max-height:15rem; overflow-y:auto;}
.sug{
  display:flex; align-items:center; gap:.5rem; width:100%; text-align:left;
  border:1px solid var(--rule); background:var(--panel); color:var(--ink);
  border-radius:8px; padding:.45rem .6rem; cursor:pointer; font-size:.9rem;
}
.sug:hover{border-color:var(--naranjo); background:var(--naranjo-soft);}
.sug .sug-nom{flex:1; font-weight:600;}
.sug .sug-socio{
  font-size:.58rem; text-transform:uppercase; letter-spacing:.09em; font-weight:800;
  background:var(--naranjo); color:#2A1611; padding:.1rem .3rem; border-radius:4px;
}
.sug .sug-veces{font-size:.72rem; color:var(--muted); font-family:var(--mono); white-space:nowrap;}
.sug .sug-det{display:block; font-weight:400; font-size:.72rem; color:var(--muted);}
.m-total{font-family:var(--display); font-size:1.25rem; margin-right:auto;}
.det-tbl{width:100%; border-collapse:collapse; font-size:.87rem;}
.det-tbl td{padding:.35rem 0; border-bottom:1px solid var(--rule); vertical-align:top;}
.det-tbl td:last-child{text-align:right; font-family:var(--mono); white-space:nowrap;}
.det-meta{display:grid; grid-template-columns:auto 1fr; gap:.2rem .8rem; font-size:.85rem;}
.det-meta dt{color:var(--muted);}
.det-meta dd{margin:0; font-weight:600;}
.det-meta .dd-edit{display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;}
.det-meta .dd-edit select{
  background:var(--panel); color:var(--ink); border:1px solid var(--rule);
  border-radius:6px; padding:.25rem .4rem; font:inherit; font-weight:600;
}
.det-meta .dd-edit select:focus{border-color:var(--naranjo); outline:none;}

/* Socios del club en Ajustes */
.tbl-scroll{max-height:26rem;}
.in-pts{
  width:5rem; text-align:right; background:var(--panel); color:var(--ink);
  border:1px solid var(--rule); border-radius:6px; padding:.25rem .4rem; font-family:var(--mono);
}
.in-pts:focus{border-color:var(--naranjo); outline:none;}

/* Estado de la caja (apertura y cierre) */
.caja-estado{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.55rem .7rem; border-radius:10px; margin-bottom:.7rem;
  font-size:.8rem; line-height:1.35; border:1px solid var(--rule);
}
.caja-estado .ce-txt{flex:1; min-width:9rem;}
.caja-estado.cerrada{border-color:var(--naranjo); background:var(--naranjo-soft);}
.caja-estado.abierta{opacity:.9;}

/* El pedido que ya está en la barra y espera pago (flujo de agosto 2026). */
.pendiente-cobro{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.55rem .7rem; border-radius:10px; margin-bottom:.7rem;
  font-size:.8rem; line-height:1.35;
  border:1px solid var(--good); background:var(--good-soft);
}
.pendiente-cobro .pc-txt{flex:1; min-width:9rem; color:var(--good);}
.sub-h{
  font-family:var(--display); font-size:1rem; text-transform:uppercase;
  letter-spacing:.02em; margin:1.6rem 0 .6rem;
}
.turno-abierto td{font-weight:600;}
td.dif{color:var(--naranjo-ink); font-weight:700;}
.hint.chico{font-size:.72rem; margin:.25rem 0 0;}

/* Líneas editables: reparto de puntos y formas de pago */
.lineas{display:flex; flex-direction:column; gap:.45rem;}
.linea{
  display:flex; flex-direction:column; gap:.4rem;
  border:1px solid var(--rule); border-radius:8px; padding:.5rem .55rem; font-size:.86rem;
}
.linea.pts{border-color:var(--naranjo); background:var(--naranjo-soft);}
.ln-fila{display:flex; align-items:center; gap:.5rem;}
.linea .ln-nom{flex:1; font-weight:600;}
.linea .ln-op{font-weight:400; color:var(--muted); font-size:.74rem;}
.linea .ln-pts{
  font-family:var(--mono); font-size:.78rem; font-weight:700;
  color:var(--naranjo-ink); white-space:nowrap; margin-left:auto;
}
.linea .ln-detalle{font-size:.76rem; color:var(--ink-2); line-height:1.4;}
.linea select,
.linea input[type=number]{
  background:var(--panel); color:var(--ink); border:1px solid var(--rule);
  border-radius:6px; padding:.35rem .4rem; font:inherit; min-width:0;
}
.linea select{flex:1;}
.linea input[type=number]{width:7rem; text-align:right; font-family:var(--mono);}
.linea .ln-socio{flex:1;}

/* Un solo campo: se escribe y aparecen debajo los socios que calzan. Con
   doscientos, bajar un desplegable con la cola esperando no es viable. */
.autocom{position:relative; flex:1;}
.autocom .ln-buscar{
  width:100%; background:var(--panel); border:1px solid var(--rule); border-radius:8px;
  padding:.45rem .6rem; font:inherit; font-size:.9rem; color:var(--ink);
}
.autocom .ln-buscar::placeholder{color:var(--muted); font-weight:400;}
.autocom-lista{
  position:absolute; top:calc(100% + .25rem); left:0; right:0; z-index:5;
  background:var(--panel); border:1px solid var(--rule); border-radius:9px;
  box-shadow:0 14px 30px -18px rgba(36,25,29,.8); overflow:hidden; max-height:13rem; overflow-y:auto;
}
.autocom-op{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem;
  width:100%; border:0; background:transparent; cursor:pointer; text-align:left;
  padding:.5rem .65rem; font:inherit; font-size:.88rem; color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.autocom-op:last-child{border-bottom:0;}
.autocom-op:hover{background:var(--naranjo-soft); color:var(--naranjo-ink);}
.autocom-op small{color:var(--muted); font-family:var(--mono); font-size:.76rem;}
.autocom-nada{margin:0; padding:.6rem .65rem; font-size:.82rem; color:var(--muted);}

/* Extras que ya vienen en el precio del producto. */
.g-lbl .incl{
  margin-left:.4rem; padding:.05rem .4rem; border-radius:99px;
  background:var(--naranjo-soft); color:var(--naranjo-ink);
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase;
}
.linea .ln-canjes{
  display:flex; align-items:center; gap:.35rem; white-space:nowrap;
  font-size:.74rem; color:var(--muted);
}
.linea .ln-canjes input{width:4rem;}
.mini-acc{display:flex; gap:.4rem; flex-wrap:wrap;}
.aviso-canje{
  margin:0; padding:.45rem .6rem; border-radius:8px; font-size:.78rem; line-height:1.45;
  border:1px solid var(--naranjo); background:var(--naranjo-soft); color:var(--ink);
}
.aviso{
  border:1px solid var(--naranjo); background:var(--naranjo-soft); color:var(--ink);
  border-radius:var(--r); padding:.7rem .85rem; font-size:.85rem; line-height:1.5;
}

/* ═════════════ TOAST ═════════════ */
.toast{
  position:fixed; left:50%; bottom:1.4rem; transform:translateX(-50%);
  background:var(--ink); color:#F6EDE7; z-index:80;
  padding:.65rem .7rem .65rem 1.1rem; border-radius:11px;
  font-size:.89rem; font-weight:600;
  box-shadow:0 16px 36px -14px rgba(0,0,0,.65);
  max-width:min(92vw,34rem);
  display:flex; align-items:center; gap:.8rem;
  border-left:3px solid var(--naranjo);
}
.toast.err{border-left-color:#E06A55;}
.toast .t-msg{flex:1;}
.toast button{
  border:0; background:var(--naranjo); color:#2A1611; cursor:pointer;
  padding:.4rem .8rem; border-radius:8px; font-size:.83rem; font-weight:700; white-space:nowrap;
}
.toast button:hover{filter:brightness(1.1);}

/* ═════════════ RESPONSIVE ═════════════ */
@media (max-width:1000px){
  .pos{grid-template-columns:1fr;}
  .pos-ticket{position:static; max-height:none; order:-1;}
  .menu-head{top:0;}
}
@media (max-width:640px){
  body{font-size:15px;}
  .topbar{gap:.5rem; padding:.5rem .7rem;}
  .tabs{order:3; width:100%; margin:0; justify-content:space-between;}
  .tab{flex:1; padding:.45rem .2rem .5rem; font-size:.8rem; text-align:center;}
  .tab.is-active::after{bottom:-.5rem;}
  .brand-txt span{display:none;}
  .live{font-size:.58rem;}
  .live strong{font-size:.88rem;}
  .row-2{grid-template-columns:1fr;}
  .grid-prod{grid-template-columns:repeat(auto-fill,minmax(8rem,1fr));}
  /* En el teléfono los tres de la cabecera no caben en una línea y el selector
     de modo desbordaba. Aquí sí sobra alto —el panel deja de estar limitado—,
     así que baja a su propio renglón en vez de apretarse. */
  .ticket-head{flex-wrap:wrap;}
  .ticket-head .seg-modo{order:3; width:100%; margin-inline:0; justify-content:center;}
  .ticket-head .seg-modo button{flex:1;}
  .filtros .fld{min-width:6.8rem;}
  .tbl .det{max-width:none;}
}

.ce-btns{display:flex; gap:.4rem; flex-wrap:wrap; flex:0 0 auto;}

/* ═════════════ USUARIOS Y ENTRADA ═════════════ */
/* Estado de la conexión con los otros equipos. */
.estado-red{
  display:flex; align-items:center; gap:.4rem; white-space:nowrap;
  padding:.28rem .55rem; border-radius:999px; font-size:.72rem; font-weight:600;
  background:var(--panel-2); border:1px solid var(--rule); color:var(--muted);
}
.estado-red .punto{width:.5rem; height:.5rem; border-radius:50%; background:currentColor; flex:0 0 auto;}
.estado-red.al-dia{color:#1f8f4e; border-color:rgba(31,143,78,.4);}
.estado-red.sincronizando{color:var(--naranjo-ink); border-color:var(--naranjo);}
.estado-red.sin-conexion,.estado-red.error{color:var(--bad); border-color:rgba(200,60,60,.45);}
.estado-red.local{display:none;}
@media (max-width:900px){ .estado-red span:not(.punto){display:none;} .estado-red{padding:.3rem;} }

.sesion-chip{
  display:flex; flex-direction:column; line-height:1.15; text-align:right;
  padding:.25rem .6rem; border-radius:9px; background:var(--panel-2); border:1px solid var(--rule);
}
.sesion-chip b{font-size:.82rem; color:var(--ink);}
.sesion-chip small{font-size:.66rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}

/* La bitácora es para el administrador: el cajero/a no se audita a sí mismo. */
body.es-cajero .solo-admin{display:none !important;}

/* Caja prestada a un administrador: se ve todo el tiempo para que no se olvide. */
.supervisando{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.5rem .9rem; background:var(--naranjo); color:#fff; font-size:.83rem; line-height:1.4;
}
.supervisando b{font-weight:700;}
.supervisando .btn-ghost{
  background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); color:#fff; flex:0 0 auto;
}
.supervisando .btn-ghost:hover{background:rgba(255,255,255,.28);}

.sin-pin{font-size:.72rem; color:var(--naranjo-ink); font-weight:600;}
#tblUsuarios td.ctr{white-space:nowrap;}
#tblUsuarios td .g-inc,#tblUsuarios td .sin-pin{margin-left:.4rem; vertical-align:middle;}
.bloque-seg{
  margin-top:1rem; padding-top:.9rem; border-top:1px solid var(--rule);
  display:flex; flex-direction:column; gap:.6rem;
}
.sub-h .btn-ghost.chico{margin-left:.6rem; font-size:.75rem; padding:.28rem .6rem; vertical-align:middle;}
tr.fila-ojo td{background:var(--naranjo-soft);}

.login{
  position:fixed; inset:0; z-index:60; display:grid; place-items:center;
  background:var(--cream); padding:1rem; overflow:auto;
}
.login-caja{
  width:min(22rem,100%); background:var(--panel); border:1px solid var(--rule);
  border-radius:var(--r); padding:1.4rem; box-shadow:0 20px 50px rgba(0,0,0,.14);
}
.login-marca{display:flex; align-items:center; gap:.7rem; margin-bottom:1.2rem;}
.login-marca img{width:2.6rem; height:2.6rem; object-fit:contain;}
.login-marca strong{display:block; font-family:var(--display); font-size:1.15rem; color:var(--ink);}
.login-marca span{font-size:.75rem; color:var(--muted);}
.login-tit{margin:0 0 .8rem; font-size:.9rem; color:var(--ink-2); font-weight:600;}
#loginSetup .note,#loginRemoto .note{margin-bottom:1rem;}
#loginSetup .fld,#loginRemoto .fld{margin-bottom:.75rem;}
#loginSetup .btn-primary,#loginRemoto .btn-primary{margin-top:.3rem;}

/* Salida discreta entre "poner en marcha la caja" y "sumar este equipo". */
.login-link{
  display:block; width:100%; margin:.7rem 0 0; padding:.35rem; border:0; background:none;
  font:inherit; font-size:.78rem; color:var(--ink-2); text-decoration:underline;
  text-underline-offset:3px; cursor:pointer;
}
.login-link:hover{color:var(--ink);}

.usuarios{display:flex; flex-direction:column; gap:.5rem;}
.usr{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.7rem;
  padding:.6rem .7rem; border-radius:11px; cursor:pointer; text-align:left;
  background:var(--panel-2); border:1px solid var(--rule); color:var(--ink);
}
.usr:hover{border-color:var(--naranjo); background:var(--naranjo-soft);}
.usr-ini{
  width:2.1rem; height:2.1rem; display:grid; place-items:center; border-radius:50%;
  background:var(--naranjo); color:#fff; font-weight:700; font-size:1rem;
}
.usr-nom{font-weight:600; font-size:.92rem;}
.usr-rol{font-size:.68rem; color:var(--muted); text-transform:uppercase; letter-spacing:.05em;}

.pin-campo{
  width:100%; text-align:center; font-size:1.7rem; letter-spacing:.5rem; padding:.5rem;
  background:var(--panel-2); border:1px solid var(--rule); border-radius:10px; color:var(--ink);
  margin-bottom:.8rem;
}
.teclado{display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; margin-bottom:.9rem;}
.teclado button{
  padding:.85rem 0; font-size:1.2rem; font-weight:600; cursor:pointer;
  background:var(--panel-2); border:1px solid var(--rule); border-radius:11px; color:var(--ink);
}
.teclado button:active{background:var(--naranjo-soft); border-color:var(--naranjo);}
.teclado .tec-sec{font-size:.85rem; color:var(--muted);}
.btn-primary.ancho{width:100%; justify-content:center;}
.login-error{
  margin:.8rem 0 0; text-align:center; font-size:.82rem; font-weight:600; color:var(--bad);
}

/* ═════════════ IMPRESIÓN ═════════════ */
#printArea{display:none;}
@media print{
  body{background:#fff; color:#000;}
  .topbar,.view,.toast,.modal-bg,.login{display:none !important;}
  #printArea{display:block; padding:0; font-size:12px;}
  .pr-ticket{width:calc(var(--papel,80mm) - 8mm); margin:0 auto; font-family:var(--mono); color:#000;}

  /* Comanda de barra: sin precios, letra grande, legible de reojo */
  .pr-comanda{
    width:calc(var(--papel,80mm) - 6mm); margin:0 auto;
    font-family:var(--sans); color:#000; line-height:1.25;
  }
  .pr-comanda hr{border:0; border-top:2px solid #000; margin:5px 0;}
  /* El nombre del cliente es lo primero y lo más grande: es con lo que se le
     llama cuando la bebida está lista, a un metro de distancia y de reojo. */
  .pr-c-cli{font-size:28px; font-weight:800; text-transform:uppercase; letter-spacing:-.02em; line-height:1.1;}
  .pr-c-head{display:flex; justify-content:space-between; align-items:baseline; margin-top:2px;}
  .pr-c-folio{font-size:13px; font-weight:700; color:#444;}
  .pr-c-hora{font-size:14px; font-weight:700;}
  .pr-c-item{margin:7px 0;}
  .pr-c-nom{font-size:17px; font-weight:800; line-height:1.15;}
  .pr-c-cant{
    display:inline-block; border:2px solid #000; border-radius:4px;
    padding:0 4px; margin-right:3px; font-size:15px;
  }
  .pr-c-det{font-size:14px; font-weight:700; padding-left:4px; text-transform:uppercase;}
  .pr-c-nota{font-size:14px; font-style:italic; padding-left:4px;}
  .pr-c-pie{font-size:11px; text-align:center;}
  .pr-ticket h1{font-size:16px; text-align:center; margin:0 0 1px; font-family:var(--display); letter-spacing:.02em;}
  .pr-ticket .pr-sub{text-align:center; font-size:10px; margin:0 0 8px;}
  .pr-ticket hr{border:0; border-top:1px dashed #000; margin:6px 0;}
  .pr-ticket table{width:100%; border-collapse:collapse;}
  .pr-ticket td{padding:1px 0; vertical-align:top; font-size:11px;}
  .pr-ticket td:last-child{text-align:right; white-space:nowrap;}
  .pr-ticket .op{font-size:10px; padding-left:6px;}
  .pr-ticket .tot td{font-size:14px; font-weight:700; padding-top:4px;}
  .pr-ticket .pr-foot{text-align:center; font-size:10px; margin-top:10px;}
  .pr-cierre{max-width:100%; font-family:var(--sans); color:#000;}
  .pr-cierre h1{font-size:19px; margin:0 0 2px; font-family:var(--display); text-transform:uppercase;}
  .pr-cierre .pr-sub{font-size:12px; color:#444; margin:0 0 14px;}
  .pr-cierre h2{font-size:12px; text-transform:uppercase; letter-spacing:.08em; margin:16px 0 6px; border-bottom:1px solid #000; padding-bottom:3px;}
  .pr-cierre table{width:100%; border-collapse:collapse; font-size:12px;}
  .pr-cierre td{padding:3px 0; border-bottom:1px solid #ddd;}
  .pr-cierre td:last-child{text-align:right; font-weight:600;}
  .pr-cierre .pr-kpi td{font-size:14px;}
  .pr-cierre .pr-firma{margin-top:34px; display:flex; gap:40px;}
  .pr-cierre .pr-firma div{flex:1; border-top:1px solid #000; padding-top:4px; font-size:11px;}
  /* El tamaño del papel lo inyecta imprimir() en su propia regla @page:
     los descriptores de @page no leen variables CSS en Chromium. */
}

/* ═══════════════════ ASISTENCIA Y AVISOS ═══════════════════ */

/* Quién está en turno ahora. Va arriba de la tabla porque es lo que se mira de
   un vistazo: la tabla es para revisar el mes, esto es para revisar el momento. */
.as-ahora{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  margin:.35rem 0 .9rem; font-size:.88rem; color:var(--ink-2);
}
.as-punto{
  width:.55rem; height:.55rem; border-radius:50%; flex:none;
  background:var(--good); box-shadow:0 0 0 3px var(--good-soft);
}
.as-punto.off{ background:var(--muted); box-shadow:0 0 0 3px var(--rule); }

/* En la lista de marcaje, el estado va donde en la de entrada va el rol. */
.as-lista .usr-rol.as-dentro{
  color:var(--good); font-weight:700; text-transform:none; letter-spacing:0;
}

/* Un turno sin cerrar no se esconde: se marca. Esconderlo haría que las horas
   del mes cuadraran de mentira. */
.as-incompleto td{ color:var(--muted); background:var(--panel-2); }
.as-incompleto td:last-child{ color:var(--naranjo-ink); font-size:.78rem; }

.cfg-h3{
  margin:1.4rem 0 .3rem; font-size:.82rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
  padding-top:.9rem; border-top:1px solid var(--rule);
}
.cfg-body > .cfg-h3:first-of-type{ border-top:0; padding-top:0; margin-top:.8rem; }

/* Interruptores: la casilla y su texto en una línea, no apilados. */
.fld.fila{
  flex-direction:row; align-items:center; gap:.55rem; margin:.45rem 0;
}
.fld.fila input[type=checkbox]{ width:1.05rem; height:1.05rem; flex:none; margin:0; }
.fld.fila span{ font-size:.88rem; color:var(--ink-2); }

/* Resultado del aviso de prueba: se dice canal por canal cuál contestó y cuál
   no, con el motivo. Un "no funcionó" a secas no deja arreglar nada. */
.av-resultado{
  margin-top:.8rem; padding:.7rem .85rem; border-radius:var(--r);
  background:var(--panel-2); font-size:.84rem; display:grid; gap:.35rem;
}
.av-linea.bien{ color:var(--good); }
.av-linea.mal{ color:var(--bad); font-family:var(--mono); font-size:.78rem; }

/* ═══════════════ ASISTENCIA ═══════════════
   Se apoya en lo que ya existe —.kpi, .card, .tbl, .filtros, .seg, .fld— y
   solo agrega lo que la asistencia necesita y no tenía nombre. Reinventar las
   tarjetas habría dado dos estilos parecidos que se separan con el tiempo. */

/* La tarjeta de jornadas olvidadas. No grita, pero no se puede pasar por alto:
   una jornada de 20 horas sin cerrar es alguien que se fue sin marcar, y
   esconderla haría que las horas cuadraran de mentira. */
.kpi.as-alerta{border-color:var(--bad); background:var(--bad-soft);}
.kpi.as-alerta .k-val{color:var(--bad);}

/* Estado de una jornada, en la tabla. */
.as-tag{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.04em;
  padding:.15rem .45rem; border-radius:999px; background:var(--panel-2); color:var(--ink-2);
  border:1px solid var(--rule); white-space:nowrap;}
.as-tag-vive{background:var(--good-soft); color:var(--good); border-color:transparent;}
.as-tag-corr{background:var(--naranjo-soft); color:var(--naranjo-ink); border-color:transparent;}
.tbl tr.as-abierta td{background:color-mix(in srgb, var(--good-soft) 45%, transparent);}
.tbl td.acciones{white-space:nowrap; text-align:right;}

/* La confirmación después de marcar. Grande a propósito: se lee de un vistazo,
   de pie y con el teléfono en la mano. */
.as-hecho{text-align:center;}
.as-hecho-nombre{font-family:var(--display); font-size:1.5rem; margin:.2rem 0 0;}
.as-hecho-hora{font-family:var(--display); font-size:3rem; line-height:1.05; margin:.1rem 0;
  letter-spacing:-.02em; color:var(--naranjo-ink);}
.as-hecho-tipo{color:var(--muted); margin:0 0 .8rem;}
.as-ok{color:var(--good); font-weight:600;}
/* Sin conexión NO se registró, y se dice en rojo. Una marca que no quedó
   guardada no puede parecerse a una que sí: la persona se va tranquila y las
   horas no están. */
.as-sinred{background:var(--bad-soft); color:var(--bad);
  border-radius:var(--r); padding:.6rem .75rem; font-size:.85rem; text-align:left;}
.as-hecho-mal{color:var(--bad);}

/* El detalle de una jornada. */
.as-detalle{display:grid; grid-template-columns:repeat(auto-fit,minmax(7rem,1fr)); gap:.6rem;
  margin-bottom:.9rem;}
.as-detalle div{background:var(--panel-2); border-radius:var(--r); padding:.55rem .7rem;}
.as-detalle span{display:block; font-size:.65rem; text-transform:uppercase; letter-spacing:.1em;
  color:var(--muted); font-weight:700;}
.as-detalle b{font-family:var(--display); font-size:1.25rem;}

/* El historial de correcciones: lo viejo arriba, como se lee una historia. */
.as-hist{list-style:none; margin:.4rem 0 0; padding:0; display:grid; gap:.5rem;}
.as-hist li{border-left:3px solid var(--naranjo); padding:.35rem 0 .35rem .6rem;}
.as-hist small{display:block; color:var(--muted); font-size:.75rem; margin-top:.15rem;}

@media (max-width:640px){
  .as-hecho-hora{font-size:2.4rem;}
  .tbl td.acciones{text-align:left;}
}