/* Izakaya OS - estilos. Liviano a propósito: sin sombras pesadas ni desenfoques (PC Celeron). */
:root{
  --bg:#15120f; --panel:#1f1a16; --panel2:#2a231d; --panel3:#342b24; --line:#3a3029;
  --txt:#f3ece4; --muted:#bcae9f; --rojo:#d64533; --rojo2:#b3372a;
  --ok:#2f9a54; --warn:#e0a030; --azul:#2f74c0; --r:12px;
  --morado:#7a4fd0; --morado-borde:#a784ff; --line2:#5a4a3e;
  --piso:#1b1714; --grid:#2a2420;
  --sobre-txt:#111; --header:#0f0c0a; --borde-plano:#4a3d33;
  --ocupada:var(--rojo); --ocupada-borde:#ff8a70; --ocupada-txt:#ffe1d8; --ocupada-silla:#8a2c20;
  --barra-mesa:#4a3424; --barra-borde:#6b4c34; --silla:#4d4037;
  --pared1:#3a332e; --pared2:#2c2622; --pared-borde:#4a423b; --pared-txt:#f1e6d8;
  --com-barra:#5a4318; --com-cocina:#1f4a2e; --com-cab-txt:#e9dccd;
  --est-ok-bg:#1f3a28; --est-ok:#7fd39a; --est-bajo-bg:#4a3814; --est-bajo:#ffd27a; --est-sin-bg:#4a1d17; --est-sin:#ff9c8a;
  --rechazado:#3a1814; --patron-ocupada:none;
}
[hidden]{display:none!important}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;background:var(--bg);color:var(--txt);
  font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;font-size:16px;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;border:0;border-radius:var(--r)}
input,select{font:inherit;color:var(--txt);background:var(--panel2);border:1px solid var(--line);
  border-radius:10px;padding:10px 12px;width:100%}
.app{display:flex;flex-direction:column;height:100%}
header{display:flex;align-items:center;gap:14px;padding:8px 14px;background:var(--header);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:8px;font-weight:700;letter-spacing:.5px;font-size:19px;white-space:nowrap}
.logo img{width:30px;height:30px}
nav{display:flex;gap:4px;margin-left:6px;overflow-x:auto}
nav button{background:transparent;padding:10px 15px;color:var(--muted);font-weight:600;white-space:nowrap}
nav button.act{background:var(--panel2);color:var(--txt)}
.reloj{margin-left:auto;color:var(--muted);text-align:right;font-size:13px;line-height:1.3;white-space:nowrap}
.sis{display:flex;gap:6px}
.sis button{background:var(--panel2);padding:8px 11px;font-size:13px;color:var(--muted);white-space:nowrap}
.sis button:hover{color:var(--txt)}
main{flex:1;min-height:0}
.vista{display:none;height:100%}
.vista.act{display:flex}

/* ---------- botones y chips ---------- */
.btn{padding:14px 16px;font-weight:700;background:var(--panel2)}
.btn.pri{background:var(--rojo)}
.btn.pri:active{background:var(--rojo2)}
.btn.ok{background:var(--ok)}
.btn.chico{padding:9px 12px;font-size:14px;font-weight:600}
.btn:disabled{opacity:.4;cursor:default}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{background:var(--panel2);padding:11px 16px;font-weight:600;border-left:5px solid transparent}
.chips button.act{background:var(--txt);color:var(--sobre-txt)}
.chips button.nuevo{background:transparent;border:1px dashed var(--line);color:var(--muted)}

/* ---------- catálogo (mostrador y cuenta) ---------- */
.catalogo{flex:1;display:flex;flex-direction:column;min-width:0;padding:14px;gap:12px}
.grid{flex:1;overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px;align-content:start}
.prod{background:var(--panel);min-height:92px;padding:12px;text-align:left;display:flex;flex-direction:column;justify-content:space-between;
  border-top:5px solid var(--c,#c0392b)}
.prod:active{transform:scale(.96);background:var(--panel2)}
.prod b{font-size:16px;line-height:1.2}
.prod span{color:var(--muted);font-size:15px}
.ticket{width:360px;max-width:42vw;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column}
.ticket-ancho{width:420px}
.ticket h2{margin:0;padding:14px 16px;font-size:18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.ticket h2 button{background:transparent;color:var(--muted);font-size:14px;padding:6px 8px}
.items{flex:1;overflow:auto;padding:4px 10px}
.vacio{color:var(--muted);text-align:center;padding:30px 10px}
.item{display:grid;grid-template-columns:1fr auto;gap:4px 8px;padding:9px 6px;border-bottom:1px solid var(--line)}
.item .n{font-weight:600}
.item .p{text-align:right;font-weight:600}
.item .ctl{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;grid-column:1/-1}
.ctl button{min-width:38px;height:34px;background:var(--panel2);font-size:19px;line-height:1;padding:0 8px}
.ctl button.txt{font-size:13px;font-weight:600;margin-left:auto}
.ctl .q{min-width:24px;text-align:center;color:var(--txt);font-weight:700;font-size:16px}
.item.pagado{opacity:.55}
.item.pagado .n:after{content:" · pagado";color:var(--ok);font-weight:600;font-size:13px}
.totales{padding:10px 16px;border-top:1px solid var(--line)}
.fila{display:flex;justify-content:space-between;margin:3px 0;color:var(--muted)}
.fila.total{color:var(--txt);font-size:25px;font-weight:800;margin-top:6px}
.acciones{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 12px 12px}
.acciones .btn.pri{grid-column:1/-1}
.acciones.una #cta-precuenta{grid-column:1/-1}
.acciones.una{grid-template-columns:1fr}
.acciones .btn.pri{font-size:19px}

/* ---------- cuenta de mesa ---------- */
.cta-head{display:flex;align-items:center;gap:8px;padding:10px;border-bottom:1px solid var(--line)}
.cta-titulo{flex:1;text-align:center;line-height:1.25}
.cta-titulo b{display:block;font-size:19px}
.cta-titulo small{color:var(--muted)}
.cta-destino{padding:10px;border-bottom:1px solid var(--line)}
.cta-destino small{color:var(--muted);display:block;margin-bottom:6px}
.cta-destino .chips button{padding:9px 12px;font-size:14px}
.grupo{margin:8px 0 2px;padding:8px 8px;background:var(--panel2);border-radius:10px;display:flex;align-items:center;gap:8px}
.grupo b{flex:1}
.grupo .monto{font-weight:700}
.grupo button{background:var(--rojo);padding:7px 12px;font-size:14px;font-weight:700}
.grupo button.edit{background:transparent;color:var(--muted);padding:6px}
.grupo.pagados{background:transparent;color:var(--ok)}

/* ---------- salón ---------- */
#v-salon{flex-direction:column}
.salon-top{display:flex;align-items:center;gap:16px;padding:12px 14px;flex-wrap:wrap}
.leyenda{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:14px}
.leyenda span{width:14px;height:14px;border-radius:4px;display:inline-block;margin-left:8px}
.l-libre{background:var(--panel3);border:2px solid var(--ok)}
.l-ocup{background:var(--rojo)}
.salon-info{margin-left:auto;color:var(--muted);font-size:15px}
.salon-info b{color:var(--txt)}
.plano-wrap{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;padding:10px 14px 14px}
.plano{position:relative;background-color:var(--piso);border:3px solid var(--borde-plano);border-radius:6px;touch-action:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px)}
.pieza{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  user-select:none;line-height:1.1;overflow:visible}
.pieza .forma{position:absolute;inset:0;border-radius:8px;background:var(--panel3);border:2px solid #5a4a3e}
.pieza.redonda .forma{border-radius:50%}
.pieza.barra .forma{background:var(--barra-mesa);border-color:var(--barra-borde);border-radius:6px}
.pieza.elemento .forma{background:repeating-linear-gradient(45deg,var(--pared1),var(--pared1) 6px,var(--pared2) 6px,var(--pared2) 12px);border-color:var(--pared-borde);border-radius:3px}
.pieza .silla{position:absolute;width:12px;height:12px;border-radius:50%;background:var(--silla);transform:translate(-50%,-50%)}
.pieza .etq{position:relative;pointer-events:none;padding:2px}
.pieza .etq b{font-size:17px;display:block}
.pieza .etq small{font-size:12px;color:var(--muted);display:block}
.pieza.elemento .etq b{font-size:15px;color:var(--pared-txt);font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  text-shadow:0 1px 2px #000,0 0 4px #000;white-space:nowrap}
/* estados en el salón */
.salon .pieza:not(.elemento){cursor:pointer}
.salon .pieza.libre .forma{border-color:var(--ok)}
.salon .pieza.ocupada .forma{background:var(--ocupada);background-image:var(--patron-ocupada);border-color:var(--ocupada-borde)}
.salon .pieza.ocupada .etq small{color:var(--ocupada-txt)}
.salon .pieza.ocupada .silla{background:var(--ocupada-silla)}
.salon .pieza:not(.elemento):active{filter:brightness(1.25)}
/* diseño */
.dz .pieza{cursor:grab}
.dz .pieza.sel .forma{outline:3px solid var(--azul);outline-offset:3px}
.dz .tirador{position:absolute;right:-9px;bottom:-9px;width:20px;height:20px;border-radius:5px;background:var(--azul);cursor:nwse-resize;border:2px solid #fff}

/* ---------- diseño ---------- */
.dz-lado{width:230px;background:var(--panel);border-right:1px solid var(--line);padding:12px;display:flex;flex-direction:column;gap:10px;overflow:auto}
.dz-lado h3{margin:0;font-size:15px;color:var(--muted)}
.dz-lista{display:flex;flex-direction:column;gap:6px}
.dz-lista button{background:var(--panel2);padding:11px 12px;text-align:left;font-weight:600}
.dz-lista button.act{background:var(--txt);color:var(--sobre-txt)}
.dz-lista button small{display:block;font-weight:400;color:var(--muted);font-size:12px}
.dz-lista button.act small{color:#555}
.dz-lado label,.dz-props label{display:block;color:var(--muted);font-size:13px;margin:8px 0 4px}
.dz-centro{flex:1;display:flex;flex-direction:column;min-width:0}
.dz-barra{display:flex;gap:6px;align-items:center;flex-wrap:wrap;padding:10px 12px;border-bottom:1px solid var(--line)}
.dz-lbl{color:var(--muted);font-size:14px}
.dz-estado{margin-left:auto;color:var(--warn);font-size:14px;font-weight:600}
.dz-ayuda{color:var(--muted);font-size:13px;text-align:center;padding:0 0 8px}
.dz-props{width:240px;background:var(--panel);border-left:1px solid var(--line);padding:12px;overflow:auto}
.dz-props h3{margin:0 0 6px}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rot{display:flex;gap:6px}
.rot button{flex:1;background:var(--panel2);padding:9px 0;font-weight:600}
.ic{display:inline-block;width:14px;height:14px;margin-right:6px;vertical-align:-2px;background:var(--muted)}
.ic-cuad{border-radius:3px}.ic-red{border-radius:50%}.ic-rect{width:20px;height:11px;border-radius:2px}
.ic-barra{width:22px;height:8px;background:#8a6448}.ic-elem{width:20px;height:5px}

/* ---------- páginas ---------- */
.pagina{flex:1;overflow:auto;padding:18px}
.barra{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.barra h1{margin:0 auto 0 0;font-size:22px}
.barra input{width:auto}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.kpi{background:var(--panel);padding:14px;border-radius:var(--r)}
.kpi small{color:var(--muted);display:block;margin-bottom:6px}
.kpi b{font-size:23px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.caja{background:var(--panel);border-radius:var(--r);padding:14px;overflow:auto}
.caja h3{margin:0 0 10px;font-size:16px;color:var(--muted);font-weight:600}
table{width:100%;border-collapse:collapse}
th,td{padding:8px 6px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}
th{color:var(--muted);font-weight:600}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
tr.anulada td{color:var(--muted);text-decoration:line-through}
.chip{display:inline-block;padding:2px 8px;border-radius:20px;background:var(--panel2);font-size:13px}
.mini{padding:6px 10px;background:var(--panel2);font-size:14px}

/* ---------- modal y aviso ---------- */
.velo{position:fixed;inset:0;background:#000b;display:none;align-items:center;justify-content:center;z-index:10;padding:16px}
.velo.act{display:flex}
.modal{background:var(--panel);border-radius:16px;width:540px;max-width:100%;max-height:100%;overflow:auto;padding:20px}
.modal h2{margin:0 0 12px}
.modal p{color:var(--muted);line-height:1.5}
.modal label{display:block;color:var(--muted);font-size:14px;margin:12px 0 6px}
.opciones{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:8px}
.opciones button{padding:13px 4px;background:var(--panel2);font-weight:600;font-size:15px}
.opciones button.act{background:var(--txt);color:var(--sobre-txt)}
.pie{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.pie .btn{min-width:130px}
.grande{font-size:32px;font-weight:800;text-align:center;margin:4px 0 0}
.grande-sub{text-align:center;color:var(--muted);min-height:20px}
.vuelto{text-align:center;color:var(--ok);font-weight:700;min-height:24px;margin-top:6px}
.stepper{display:flex;align-items:center;justify-content:center;gap:14px}
.stepper button{width:56px;height:52px;background:var(--panel2);font-size:26px}
.stepper b{font-size:30px;min-width:50px;text-align:center}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(140px);background:var(--ok);color:#fff;
  padding:14px 22px;border-radius:12px;font-weight:700;transition:transform .2s;z-index:20;max-width:90vw}
.toast.err{background:var(--rojo)}
.toast.act{transform:translateX(-50%) translateY(0)}

@media (max-width:900px){
  #v-mostrador,#v-cuenta{flex-direction:column}
  .catalogo{min-height:0}
  .ticket,.ticket-ancho{width:auto;max-width:none;border-left:0;border-top:1px solid var(--line);max-height:58%}
  .dos{grid-template-columns:1fr}
  .logo span,.reloj,.sis{display:none}
  header{gap:6px;padding:6px}
  nav button{padding:10px 9px}
  #v-diseno{flex-direction:column}
  .dz-lado,.dz-props{width:auto;max-height:30%}
}

/* ---------- v0.4: comandas, categorías, varios ---------- */
.badge{display:inline-block;min-width:20px;padding:1px 6px;border-radius:10px;background:var(--rojo);color:#fff;font-size:12px;font-weight:800;margin-left:4px}
.check{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;margin-top:8px;cursor:pointer}
.check input{width:auto;margin:0}
.por-enviar{background:var(--warn);color:#111;border-radius:8px;padding:1px 7px;font-size:12px;font-weight:800}
.grupo button.edit{background:transparent;color:var(--muted);padding:6px;font-weight:600}
.tablero{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;align-items:start}
.comanda{background:var(--panel);border-radius:14px;overflow:hidden;border:2px solid transparent}
.comanda.tarde{border-color:var(--warn)}
.comanda.muy-tarde{border-color:var(--rojo)}
.comanda .cab{padding:10px 12px;display:flex;align-items:baseline;gap:8px}
.comanda.d-barra .cab{background:var(--com-barra)}
.comanda.d-cocina .cab{background:var(--com-cocina)}
.comanda .cab b{font-size:21px;flex:1}
.comanda .cab small{color:var(--com-cab-txt);font-weight:700;text-transform:uppercase;font-size:12px}
.comanda .meta{padding:6px 12px;color:var(--muted);font-size:13px;display:flex;justify-content:space-between;gap:6px}
.comanda ul{list-style:none;margin:0;padding:4px 12px 8px}
.comanda li{font-size:18px;font-weight:700;padding:5px 0;border-bottom:1px dashed var(--line)}
.comanda li small{display:block;font-size:13px;color:var(--muted);font-weight:600}
.comanda .imp{padding:0 12px 6px;font-size:12px}
.comanda .imp.ok{color:var(--ok)} .comanda .imp.err{color:var(--rojo)} .comanda .imp.no{color:var(--muted)}
.comanda .bot{display:grid;grid-template-columns:2fr 1fr;gap:8px;padding:0 10px 10px}
.comanda .bot button{padding:12px;font-weight:700;background:var(--panel2)}
.comanda .bot button.listo{background:var(--ok)}
.swatches{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.swatches button{width:40px;height:40px;border-radius:10px;border:3px solid transparent}
.swatches button.act{border-color:#fff}
.swatches input[type=color]{width:52px;height:42px;padding:2px}
.swatches .sin{width:auto;padding:0 12px;background:var(--panel2);font-size:13px;font-weight:600}
.cuadro{display:inline-block;width:18px;height:18px;border-radius:5px;vertical-align:-4px;margin-right:6px}
.modal.ancho{width:780px}
.impresora{background:var(--panel2);border-radius:12px;padding:12px;margin-bottom:10px}
.impresora .fila3{display:grid;grid-template-columns:1.1fr 1fr 1.3fr .7fr 1fr;gap:8px}
.impresora .checks{display:flex;flex-wrap:wrap;gap:4px 16px;margin-top:8px}
.impresora .pie{margin-top:10px}
pre.ticket-vista{background:#f4f1ea;color:#111;padding:14px;border-radius:6px;font:14px/1.35 Consolas,"Courier New",monospace;white-space:pre;overflow:auto;max-height:50vh}
@media (max-width:900px){.impresora .fila3{grid-template-columns:1fr 1fr}}
.impresora .btn{background:var(--panel3)}

/* ---------- v0.4.2: compras y costos ---------- */
.cp-frec{margin-bottom:12px}
.cp-frec button small{display:block;font-weight:500;font-size:12px;color:var(--muted)}
.cp-frec button.act small{color:#555}
.cp-info{display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;color:var(--muted);margin-bottom:12px}
.cp-info b{color:var(--txt)}
.cp-cat{margin:14px 0 6px;color:var(--muted);font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.cp-item{display:flex;align-items:center;gap:12px;background:var(--panel);border-radius:12px;padding:10px 12px;margin-bottom:6px}
.cp-item .caja-check{width:44px;height:44px;border-radius:10px;border:2px solid var(--muted);background:transparent;font-size:24px;font-weight:800;flex:none;color:#fff}
.cp-item.hecho .caja-check{background:var(--ok);border-color:var(--ok)}
.cp-item.hecho .cp-nombre{text-decoration:line-through;color:var(--muted)}
.cp-item .cp-txt{flex:1;min-width:0}
.cp-nombre{font-weight:700;font-size:17px}
.cp-sub{color:var(--muted);font-size:13px}
.cp-cant{font-weight:700;white-space:nowrap}
.cp-precio{min-width:90px;text-align:right;white-space:nowrap}
.cp-precio small{display:block;color:var(--muted);font-size:12px}
.receta{background:var(--panel2);border-radius:12px;padding:10px;margin-top:8px}
.receta .r-fila{display:grid;grid-template-columns:1fr 90px 44px 80px 36px;gap:6px;align-items:center;margin-bottom:6px}
.receta .r-fila select,.receta .r-fila input{padding:8px}
.receta .r-fila span{color:var(--muted);font-size:13px}
.receta .r-fila b{text-align:right}
.receta .r-fila button{background:var(--panel3);height:36px}
.receta .r-total{display:flex;justify-content:space-between;font-weight:700;margin-top:6px;padding-top:6px;border-top:1px solid var(--line)}

@media (max-width:1500px){
  .logo span{display:none}
  nav{margin-left:0}
  nav button{padding:10px 11px;font-size:15px}
  header{gap:10px}
}
#b-full{font-size:17px;padding:5px 10px}
@media (max-width:1150px){.reloj{display:none}}

/* ---------- v0.4.3: promos, garzones, club ---------- */
.prod{position:relative}
.promo-cinta{position:absolute;bottom:8px;right:6px;background:var(--warn);color:#111;font-style:normal;font-weight:800;font-size:12px;padding:2px 7px;border-radius:8px}
.promo-chip{display:inline-block;margin-left:6px;background:var(--warn);color:#111;font-size:11px;font-weight:800;padding:1px 6px;border-radius:7px;vertical-align:1px}
.fila.promo{color:var(--warn);font-weight:700}
.promo-linea{text-align:center;color:var(--warn);font-weight:700;font-size:14px;margin-top:4px}
.opciones.especiales button{background:transparent;border:1px dashed var(--line);color:var(--muted)}
.opciones.especiales button.act{background:var(--warn);color:#111;border-color:var(--warn)}
#b-garzon{color:var(--txt);max-width:150px;overflow:hidden;text-overflow:ellipsis}
#b-garzon.sin{color:var(--warn)}
.tablero.promos{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.promo-card{background:var(--panel);border-radius:14px;padding:14px;border-left:6px solid var(--line)}
.promo-card.on{border-left-color:var(--ok)}
.promo-card.prog{border-left-color:var(--azul)}
.promo-card .t{display:flex;align-items:center;gap:8px}
.promo-card .t b{font-size:18px;flex:1}
.promo-card .etq{background:var(--warn);color:#111;font-weight:800;border-radius:8px;padding:3px 9px}
.promo-card .estado{font-size:13px;font-weight:700;margin:4px 0 8px}
.promo-card.on .estado{color:var(--ok)} .promo-card.prog .estado{color:var(--azul)} .promo-card .estado{color:var(--muted)}
.promo-card p{margin:4px 0;color:var(--muted);font-size:14px;line-height:1.4}
.promo-card .bot{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.dias{display:flex;gap:6px;flex-wrap:wrap}
.dias button{width:46px;height:44px;background:var(--panel2);font-weight:700}
.dias button.act{background:var(--txt);color:var(--sobre-txt)}
.lista-check{max-height:180px;overflow:auto;background:var(--panel2);border-radius:10px;padding:8px;display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 10px}
.saldo-pos{color:var(--rojo);font-weight:800}
.saldo-cero{color:var(--ok)}
@media (max-width:1500px){.reloj{display:none}}

/* ---------- v0.4.4: administrador y teléfonos ---------- */
body.no-admin .solo-admin{display:none!important}
#b-admin{font-size:15px}
#b-admin.on{background:var(--ok);color:#fff}
#b-admin.sinpin{background:var(--warn);color:#111}
.qr{background:#fff;padding:12px;border-radius:12px;display:inline-block}
.qr svg{display:block;width:220px;height:220px}
.conectar{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start}
.conectar ol{margin:0;padding-left:20px;line-height:1.6;color:var(--muted)}
.conectar ol b{color:var(--txt)}
.url-grande{font:700 22px/1.2 Consolas,monospace;color:var(--warn);word-break:break-all;margin:6px 0 10px}
.pin-in{font-size:28px;text-align:center;letter-spacing:10px}
@media (max-width:900px){
  .sis{display:flex}
  #b-full,#b-apagar{display:none}
  .conectar{grid-template-columns:1fr}
}

.mesas-lista{width:100%;align-self:flex-start;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.mesa-btn{min-height:84px;padding:12px;text-align:left;display:flex;flex-direction:column;gap:4px;background:var(--panel3);border:2px solid var(--ok)}
.mesa-btn b{font-size:19px}
.mesa-btn span{font-size:14px;color:var(--muted)}
.mesa-btn small{font-size:12px}
.mesa-btn.ocupada{background:var(--ocupada);background-image:var(--patron-ocupada);border-color:var(--ocupada-borde)}
.mesa-btn.ocupada span{color:var(--ocupada-txt)}
#v-salon .plano-wrap{overflow:auto}
@media (max-width:900px){
  header{flex-wrap:wrap}
  nav{order:3;width:100%;margin:0}
  .sis{margin-left:auto}
  .salon-top{gap:8px}
  .salon-info{margin-left:0}
}

/* ---------- v0.5: inventario, solicitudes, portal ---------- */
@media (max-width:1500px){ nav button{padding:10px 9px;font-size:14px} }
.est{font-weight:800;font-size:13px;padding:2px 8px;border-radius:8px;white-space:nowrap}
.est.ok{background:var(--est-ok-bg);color:var(--est-ok)} .est.bajo{background:var(--est-bajo-bg);color:var(--est-bajo)} .est.sin{background:var(--est-sin-bg);color:var(--est-sin)} .est.off{background:var(--panel2);color:var(--muted)}
#inv-tabla td small{color:var(--muted)}
#salon-sol.hay{background:var(--rojo);color:#fff;animation:latido 1.2s infinite}
@keyframes latido{50%{filter:brightness(1.35)}}
.pieza .campana{position:absolute;top:-10px;right:-10px;background:var(--warn);color:#111;border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:14px;z-index:2;animation:latido 1.2s infinite}
.mesa-btn{position:relative}
.mesa-btn .campana{position:absolute;top:8px;right:10px;font-size:18px}
.sol{background:var(--panel2);border-radius:12px;padding:12px;margin-bottom:10px}
.sol .cab{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.sol .cab b{font-size:18px}
.sol .cab small{color:var(--muted)}
.sol ul{margin:8px 0;padding-left:18px}
.sol .bots{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.sol .bots .btn{padding:11px 14px}
.qr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.qr-grid div{background:#fff;color:#111;border-radius:10px;padding:8px;text-align:center;font-weight:700}
.qr-grid svg{width:100%;height:auto}

.sol .btn{background:var(--panel3)} .sol .btn.ok{background:var(--ok)}
#b-apagar{font-size:17px;padding:5px 11px}
#b-garzon{max-width:130px}
@media (max-width:1500px){ nav button{padding:10px 8px} header{gap:8px} .sis{gap:4px} }

/* ---------- v0.5.1: notas ---------- */
.nota-item{grid-column:1/-1;color:var(--warn);font-weight:700;font-size:14px}
.nota-com{display:block;font-style:normal;color:var(--warn);font-size:15px;font-weight:800}
.conexion{position:fixed;top:0;left:50%;transform:translateX(-50%);background:var(--rojo);color:#fff;font-weight:800;padding:6px 16px;border-radius:0 0 12px 12px;z-index:30}

.aviso-ip{background:var(--rojo);color:#fff;padding:8px 14px;font-size:14px;line-height:1.4;text-align:center}
body{display:flex;flex-direction:column}
.app{height:auto;flex:1;min-height:0}

/* ---- caja y turnos ---- */
.turno-chip{font-weight:700;cursor:pointer;font-size:12px}
.turno-chip.on{color:var(--ok)} .turno-chip.off{color:var(--rojo)}
.gran-estado{font-size:24px;font-weight:800;margin-bottom:4px}
.turno-cerrado{text-align:center;padding:40px 20px;margin-bottom:16px}
.turno-cerrado p{color:var(--muted)}
.grande-btn{font-size:20px;padding:16px 40px;margin:10px 0}
.turno-abierto{display:flex;gap:16px;align-items:center;flex-wrap:wrap;justify-content:space-between;margin-bottom:16px;border-left:6px solid var(--ok)}
.turno-abierto p{color:var(--muted);margin:0}
.turno-bots{display:flex;gap:8px;flex-wrap:wrap}
.kpi.destacado{outline:2px solid var(--ok)}
.kpi b+small{margin:4px 0 0}
tr.fila-total td{border-top:2px solid var(--line);font-size:17px}
tr.apagado td{color:var(--muted)}
.alerta{background:var(--est-bajo-bg);color:var(--est-bajo)!important;padding:10px 12px;border-radius:10px}
.dif-box{margin-top:10px;font-size:18px}
.billetes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:8px}
.billetes label{display:flex;align-items:center;gap:6px;margin:0;font-size:13px;justify-content:space-between}
.billetes input{width:70px;padding:6px}
.ticket-pre{background:#fff;color:#111;font:13px/1.35 Consolas,"Courier New",monospace;padding:14px;border-radius:8px;max-height:50vh;overflow:auto;white-space:pre}
tr.rechazado td{background:var(--rechazado)}
.bt-det{max-width:320px;word-break:break-word}
.turno-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-left:3px;vertical-align:middle;background:var(--muted)}
.turno-dot.on{background:var(--ok);box-shadow:0 0 6px var(--ok)} .turno-dot.off{background:var(--rojo);box-shadow:0 0 6px var(--rojo)}

/* ---- v0.7: botones más visibles en la cuenta ---- */
.btn.azul{background:var(--azul);color:#fff}
.btn.ok{color:#fff}
.btn.pri{color:#fff}
.cta-dest-cab{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.cta-dest-cab small{margin:0!important}
.btn.dividir{background:var(--morado);color:#fff;font-weight:800;border:2px solid var(--morado-borde)}
.cta-destino .chips button.nuevo{border:2px dashed var(--morado);color:var(--txt)}
.ctl button.txt{background:var(--panel3);color:var(--txt);border:1px solid var(--line2);padding:0 10px}
.ctl button.txt + button.txt{margin-left:4px}
.grupo button.edit{color:var(--txt)!important;border:1px solid var(--line2)!important}
.cta-nombre{display:block;font-style:normal;color:var(--warn);font-weight:700;font-size:13px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mesa-btn .cta-nombre{margin:2px 0}
.opciones.prop4{grid-template-columns:repeat(4,1fr)}
.promo-estado{display:flex;align-items:center;gap:10px;margin:8px 0}
.switch{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:30px;background:var(--panel3);color:var(--txt);font-weight:800;border:2px solid var(--line2)}
.switch .bola{width:22px;height:22px;border-radius:50%;background:var(--muted)}
.switch.on{background:var(--ok);border-color:var(--ok);color:#fff}
.switch.on .bola{background:#fff}
.promo-estado .sub{font-size:13px;color:var(--muted);font-weight:600}
.promo-card.on .promo-estado .sub{color:var(--ok)}

/* ---- inventario rápido ---- */
.cant-uni{display:grid;grid-template-columns:1fr 80px;gap:6px}
.modal.extra{width:1100px}
.rr{display:grid;grid-template-columns:280px 1fr;gap:16px;min-height:60vh}
.rr-izq{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line);padding-right:12px}
.rr-lista{flex:1;overflow:auto;max-height:55vh;display:flex;flex-direction:column;gap:4px}
.rr-lista button{text-align:left;background:var(--panel2);padding:9px 10px;font-weight:600;display:flex;justify-content:space-between;gap:6px}
.rr-lista button small{color:var(--muted);font-weight:500}
.rr-lista button.act{background:var(--txt);color:var(--sobre-txt)}
.rr-lista button.act small{color:var(--sobre-txt);opacity:.7}
.rr-cat{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;margin:8px 0 2px}
.rr-filas{margin:12px 0;display:flex;flex-direction:column;gap:6px}
.rr-fila{display:grid;grid-template-columns:1fr 90px 70px 110px 80px 40px;gap:6px;align-items:center;background:var(--panel2);padding:8px;border-radius:10px}
.rr-fila span{text-align:right;font-weight:700}
.rr-fila small{color:var(--muted)}
.rr-fila button{background:var(--panel3);height:36px}
.rr-sug{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;max-height:130px;overflow:auto}
.rr-sug button{background:var(--panel2);padding:8px 12px;font-weight:600}
.rr-sug button small{color:var(--muted)}
.rr-sug button.nuevo{border:2px dashed var(--azul);background:transparent}
.rr-bot{display:flex;gap:8px;margin-top:14px;align-items:center;flex-wrap:wrap}
.rr-bot select{width:auto;flex:1}
@media (max-width:900px){.rr{grid-template-columns:1fr}.rr-izq{border:0;padding:0}.rr-fila{grid-template-columns:1fr 70px 60px 40px}.rr-fila small,.rr-fila span{display:none}}

/* ================= TEMAS (Ajustes → Apariencia) ================= */
body{background:var(--bg)}
html[data-tema="dia"],[data-tema-prev="dia"]{
  --bg:#f3eee7; --panel:#ffffff; --panel2:#ebe3d8; --panel3:#ddd1c2; --line:#cdbfae; --line2:#9d8b77;
  --txt:#1d1712; --muted:#5d5044; --sobre-txt:#fff; --rojo:#c23a28; --rojo2:#a02e1f; --ok:#1f7f42; --warn:#b77400; --azul:#1f63b0;
  --morado:#6a3fc2; --morado-borde:#8d66e0;
  --piso:#faf6f0; --grid:#e6ddd1; --header:#2a211a; --borde-plano:#8a7866;
  --ocupada:#c23a28; --ocupada-borde:#7d1f13; --ocupada-txt:#fff; --ocupada-silla:#7d1f13;
  --barra-mesa:#b08a66; --barra-borde:#7a5a3e; --silla:#b9a893;
  --pared1:#8b7f74; --pared2:#6f645a; --pared-borde:#4b423a; --pared-txt:#fff;
  --com-barra:#f1ddb0; --com-cocina:#cfe8d5; --com-cab-txt:#3b3026;
  --est-ok-bg:#d6efdd; --est-ok:#11632f; --est-bajo-bg:#fbe7c0; --est-bajo:#7a4b00; --est-sin-bg:#f9d4cd; --est-sin:#8c1f10; --rechazado:#f9d4cd;
}
html[data-tema="dia"] header .logo,html[data-tema="dia"] header .reloj{color:#f3ece4}
html[data-tema="dia"] nav button{color:#cbbba9}
html[data-tema="dia"] nav button.act{background:#4a3c30;color:#fff}
html[data-tema="dia"] .sis button{background:#4a3c30;color:#e8dccd}
html[data-tema="dia"] .salon .pieza.libre .forma{background:#fff}
html[data-tema="contraste"],[data-tema-prev="contraste"]{
  --bg:#000; --panel:#0d0d0d; --panel2:#1c1c1c; --panel3:#2a2a2a; --line:#8a8a8a; --line2:#d0d0d0;
  --txt:#fff; --muted:#d8d8d8; --sobre-txt:#000; --rojo:#ff3b30; --rojo2:#d62d23; --ok:#00c853; --warn:#ffd600; --azul:#2f8cff;
  --morado:#b388ff; --morado-borde:#fff;
  --piso:#000; --grid:#1a1a1a; --header:#000; --borde-plano:#fff;
  --ocupada:#ff3b30; --ocupada-borde:#fff; --ocupada-txt:#fff; --ocupada-silla:#fff;
  --barra-mesa:#5a3e1f; --barra-borde:#ffd600; --silla:#9e9e9e;
  --pared1:#bdbdbd; --pared2:#616161; --pared-borde:#fff; --pared-txt:#000;
  --com-barra:#7a5a00; --com-cocina:#00602a; --com-cab-txt:#fff;
  --est-ok-bg:#003d17; --est-ok:#7dffb0; --est-bajo-bg:#4d4000; --est-bajo:#ffe866; --est-sin-bg:#5c0000; --est-sin:#ffb3ad; --rechazado:#5c0000;
}
html[data-tema="contraste"] button,html[data-tema="contraste"] .btn{border:2px solid var(--line2)}
html[data-tema="contraste"] .btn.pri,html[data-tema="contraste"] .btn.ok{border-color:#fff}
html[data-tema="contraste"] body{font-weight:500}
/* daltónico: paleta segura para protanopia/deuteranopia (azul / naranjo / amarillo) y ocupadas con rayas */
html[data-tema="daltonico"],[data-tema-prev="daltonico"]{
  --rojo:#d55e00; --rojo2:#b04d00; --ok:#0072b2; --warn:#f0e442; --azul:#56b4e9; --morado:#cc79a7; --morado-borde:#e8a9cc;
  --ocupada:#d55e00; --ocupada-borde:#ffd0a8; --ocupada-txt:#fff; --ocupada-silla:#8a3d00;
  --patron-ocupada:repeating-linear-gradient(135deg,transparent 0 8px,rgba(0,0,0,.28) 8px 12px);
  --est-ok-bg:#0b3350; --est-ok:#8fd0ff; --est-bajo-bg:#4a4410; --est-bajo:#f0e442; --est-sin-bg:#4d2400; --est-sin:#ffb27a;
  --com-cocina:#0b3350;
}
html[data-tema="daltonico"] .salon .pieza.libre .forma{border-style:dashed}
html[data-letra="grande"]{font-size:18px}
html[data-letra="grande"] body,html[data-letra="grande"] button,html[data-letra="grande"] input,html[data-letra="grande"] select{font-size:18px}

.nav-sep{width:1px;background:var(--line2);margin:8px 6px;flex:none}
body.no-caja .solo-caja{display:none!important}
.aj-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px;align-items:start}
.aj-apariencia{grid-column:1/-1}
.temas{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:10px 0}
.tema-card{background:var(--bg);color:var(--txt);border:3px solid var(--line);border-radius:14px;padding:12px;text-align:left;cursor:pointer}
.tema-card.act{border-color:var(--warn);box-shadow:0 0 0 3px var(--warn)}
.tema-card b{display:block;font-size:16px;margin-bottom:8px}
.tema-card .mini{display:flex;gap:8px;margin-bottom:8px}
.tema-card .m{flex:1;height:44px;border-radius:8px;display:grid;place-items:center;font-size:12px;font-weight:800;border:3px solid}
.tema-card .m.libre{background:var(--panel);border-color:var(--ok);color:var(--txt)}
.tema-card .m.ocup{background:var(--ocupada);background-image:var(--patron-ocupada);border-color:var(--ocupada-borde);color:var(--ocupada-txt)}
.tema-card .bots{display:flex;gap:6px}
.tema-card .bots span{flex:1;padding:6px 4px;border-radius:8px;text-align:center;font-size:12px;font-weight:800;color:#fff}
.tema-card small{display:block;color:var(--muted);margin-top:6px;font-size:12px}
.usr{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:10px 0;border-bottom:1px solid var(--line);align-items:center}
.usr .r{font-size:12px;font-weight:800;padding:2px 8px;border-radius:8px;background:var(--panel3);margin-left:6px}
.usr .r.debugger{background:var(--morado);color:#fff} .usr .r.admin{background:var(--azul);color:#fff} .usr .r.cajero{background:var(--ok);color:#fff}
.usr small{color:var(--muted);grid-column:1/-1}
.usr .bots{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.usr.inactivo{opacity:.5}
@media (max-width:900px){.aj-grid{grid-template-columns:1fr}}

[data-tema-prev]{
  --bg:#15120f; --panel:#1f1a16; --panel2:#2a231d; --panel3:#342b24; --line:#3a3029;
  --txt:#f3ece4; --muted:#bcae9f; --rojo:#d64533; --rojo2:#b3372a;
  --ok:#2f9a54; --warn:#e0a030; --azul:#2f74c0; --r:12px;
  --morado:#7a4fd0; --morado-borde:#a784ff; --line2:#5a4a3e;
  --piso:#1b1714; --grid:#2a2420;
  --sobre-txt:#111; --header:#0f0c0a; --borde-plano:#4a3d33;
  --ocupada:var(--rojo); --ocupada-borde:#ff8a70; --ocupada-txt:#ffe1d8; --ocupada-silla:#8a2c20;
  --barra-mesa:#4a3424; --barra-borde:#6b4c34; --silla:#4d4037;
  --pared1:#3a332e; --pared2:#2c2622; --pared-borde:#4a423b; --pared-txt:#f1e6d8;
  --com-barra:#5a4318; --com-cocina:#1f4a2e; --com-cab-txt:#e9dccd;
  --est-ok-bg:#1f3a28; --est-ok:#7fd39a; --est-bajo-bg:#4a3814; --est-bajo:#ffd27a; --est-sin-bg:#4a1d17; --est-sin:#ff9c8a;
  --rechazado:#3a1814; --patron-ocupada:none;
}
[data-tema-prev="dia"]{
  --bg:#f3eee7; --panel:#ffffff; --panel2:#ebe3d8; --panel3:#ddd1c2; --line:#cdbfae; --line2:#9d8b77;
  --txt:#1d1712; --muted:#5d5044; --sobre-txt:#fff; --rojo:#c23a28; --rojo2:#a02e1f; --ok:#1f7f42; --warn:#b77400; --azul:#1f63b0;
  --morado:#6a3fc2; --morado-borde:#8d66e0;
  --piso:#faf6f0; --grid:#e6ddd1; --header:#2a211a; --borde-plano:#8a7866;
  --ocupada:#c23a28; --ocupada-borde:#7d1f13; --ocupada-txt:#fff; --ocupada-silla:#7d1f13;
  --barra-mesa:#b08a66; --barra-borde:#7a5a3e; --silla:#b9a893;
  --pared1:#8b7f74; --pared2:#6f645a; --pared-borde:#4b423a; --pared-txt:#fff;
  --com-barra:#f1ddb0; --com-cocina:#cfe8d5; --com-cab-txt:#3b3026;
  --est-ok-bg:#d6efdd; --est-ok:#11632f; --est-bajo-bg:#fbe7c0; --est-bajo:#7a4b00; --est-sin-bg:#f9d4cd; --est-sin:#8c1f10; --rechazado:#f9d4cd;
}
[data-tema-prev="contraste"]{
  --bg:#000; --panel:#0d0d0d; --panel2:#1c1c1c; --panel3:#2a2a2a; --line:#8a8a8a; --line2:#d0d0d0;
  --txt:#fff; --muted:#d8d8d8; --sobre-txt:#000; --rojo:#ff3b30; --rojo2:#d62d23; --ok:#00c853; --warn:#ffd600; --azul:#2f8cff;
  --morado:#b388ff; --morado-borde:#fff;
  --piso:#000; --grid:#1a1a1a; --header:#000; --borde-plano:#fff;
  --ocupada:#ff3b30; --ocupada-borde:#fff; --ocupada-txt:#fff; --ocupada-silla:#fff;
  --barra-mesa:#5a3e1f; --barra-borde:#ffd600; --silla:#9e9e9e;
  --pared1:#bdbdbd; --pared2:#616161; --pared-borde:#fff; --pared-txt:#000;
  --com-barra:#7a5a00; --com-cocina:#00602a; --com-cab-txt:#fff;
  --est-ok-bg:#003d17; --est-ok:#7dffb0; --est-bajo-bg:#4d4000; --est-bajo:#ffe866; --est-sin-bg:#5c0000; --est-sin:#ffb3ad; --rechazado:#5c0000;
}
[data-tema-prev="daltonico"]{
  --rojo:#d55e00; --rojo2:#b04d00; --ok:#0072b2; --warn:#f0e442; --azul:#56b4e9; --morado:#cc79a7; --morado-borde:#e8a9cc;
  --ocupada:#d55e00; --ocupada-borde:#ffd0a8; --ocupada-txt:#fff; --ocupada-silla:#8a3d00;
  --patron-ocupada:repeating-linear-gradient(135deg,transparent 0 8px,rgba(0,0,0,.28) 8px 12px);
  --est-ok-bg:#0b3350; --est-ok:#8fd0ff; --est-bajo-bg:#4a4410; --est-bajo:#f0e442; --est-sin-bg:#4d2400; --est-sin:#ffb27a;
  --com-cocina:#0b3350;
}
.r-chip{font-size:13px;font-weight:800;padding:3px 9px;border-radius:8px;vertical-align:middle;background:var(--panel3)}
.r-chip.debugger{background:var(--morado);color:#fff} .r-chip.admin{background:var(--azul);color:#fff} .r-chip.cajero{background:var(--ok);color:#fff}
#b-admin.on{color:#fff;max-width:170px;overflow:hidden;text-overflow:ellipsis}
#b-admin.rol-debugger{background:var(--morado)} #b-admin.rol-admin{background:var(--azul)} #b-admin.rol-cajero{background:var(--ok)}
/* barra de pestañas compacta (entra en 1366 px con todas las pestañas de administrador) */
nav{gap:1px}
nav button{padding:9px 8px;font-size:14.5px}
#b-garzon{max-width:120px;overflow:hidden;text-overflow:ellipsis}
.sis{flex:none}
.logo span{display:none}
@media (min-width:1600px){.logo span{display:inline}nav button{padding:10px 14px}}

/* ---- barra con varias cuentas ---- */
.barra-ctas{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:8px}
.barra-ctas button{background:var(--ocupada);background-image:var(--patron-ocupada);color:var(--ocupada-txt);padding:10px;text-align:left;display:flex;flex-direction:column;gap:2px;border:2px solid var(--ocupada-borde)}
.barra-ctas button span{font-size:18px;font-weight:800}
.barra-ctas button small{opacity:.85}
.asientos{display:flex;flex-wrap:wrap;gap:6px}
.asientos button{min-width:46px;height:42px;background:var(--panel2);font-weight:800;border:2px solid var(--ok)}
.asientos button:disabled{background:var(--ocupada);border-color:var(--ocupada-borde);color:var(--ocupada-txt);opacity:.6;cursor:not-allowed}
.asientos button.act{background:var(--txt);color:var(--sobre-txt)}
.salon .pieza .silla.oc{background:var(--ocupada);box-shadow:0 0 0 2px var(--ocupada-borde)}
.salon .pieza.barra.ocupada .forma{background:var(--barra-mesa);border-color:var(--ocupada);border-width:3px}
.salon .pieza.barra.ocupada .silla{background:var(--silla)}
.salon .pieza.barra .silla.oc{background:var(--ocupada);box-shadow:0 0 0 2px var(--ocupada-borde)}
.salon .pieza.barra.ocupada .etq small{color:var(--txt)}
html[data-tema="dia"] .salon .pieza.barra.ocupada .etq small{color:#fff}

/* ---- buscador del catálogo ---- */
.cat-top{display:flex;gap:8px}
.cat-top .cat-buscar{flex:1;font-size:16px}
.cat-top .cat-orden{width:auto;flex:none}
.cat-lista{display:flex;flex-direction:column;gap:4px;max-height:55vh;overflow:auto;margin-top:10px}
.prod-fila{display:grid;grid-template-columns:1fr auto auto 40px;align-items:center;gap:10px;background:var(--panel2);padding:11px 12px;text-align:left;border-left:5px solid var(--c,#666)}
.prod-fila b{font-size:16px}
.prod-fila small{color:var(--muted)}
.prod-fila span{font-weight:700}
.prod-fila em{font-style:normal;background:var(--ok);color:#fff;border-radius:8px;height:34px;display:grid;place-items:center;font-weight:800}
.prod-fila .promo-chip{margin:0}
.cat-modal .chips{margin-top:10px}
@keyframes toque{0%{box-shadow:0 0 0 3px var(--ok)}100%{box-shadow:0 0 0 0 transparent}}
.toque{animation:toque .5s}
.cta-dest-cab{flex-wrap:wrap}
.cta-dest-cab small{flex:1}
.prop-cierre{background:var(--est-bajo-bg);border-radius:10px;padding:10px 12px;margin-bottom:10px}
.prop-cierre label.check{margin:6px 0}
.kpi.alerta-kpi{outline:2px solid var(--warn)}
.kpi.alerta-kpi b{color:var(--warn)}

/* ---- menú lateral de productos dentro de la cuenta ---- */
.cta-lateral{width:390px;flex:none;background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;padding:12px;gap:8px;min-height:0}
.cta-lateral .lat-cab{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cta-lateral .lat-cab b{font-size:17px}
.cta-lateral .lat-cab b span{color:var(--warn)}
.lat-cat{flex:1;display:flex;flex-direction:column;min-height:0}
.lat-cat .chips{margin-top:8px}
.lat-cat .chips button{padding:8px 11px;font-size:14px}
.lat-cat .cat-lista{flex:1;max-height:none;min-height:0}
.lat-cat .cat-top{flex-wrap:wrap}
.lat-cat .cat-top .cat-orden{flex:1 1 100%}
.lat-cat .prod-fila{grid-template-columns:1fr auto 38px}
.lat-cat .prod-fila small{display:none}
.lat-ult{color:var(--ok);font-weight:700;font-size:14px;min-height:18px}
#cta-agregar.act{background:var(--panel3);color:var(--txt)}
/* con el menú abierto en pantallas medianas, la cuadrícula se achica */
#v-cuenta.lat-abierto .catalogo .grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
@media (max-width:1200px){#v-cuenta.lat-abierto #cuenta-catalogo{display:none}}
@media (max-width:900px){.cta-lateral{width:auto;border-left:0;flex:1;min-height:40%}}
@media (max-width:900px){
  #v-cuenta.lat-abierto .cta-lateral{flex:0 0 46%;min-height:0;padding:8px 10px}
  #v-cuenta.lat-abierto .ticket{max-height:none;flex:1;min-height:0}
  #v-cuenta.lat-abierto .cta-lateral .chips{flex-wrap:nowrap;overflow-x:auto}
  #v-cuenta.lat-abierto .cta-lateral .chips button{flex:none}
  #v-cuenta.lat-abierto .cat-top .cat-orden{flex:0 0 auto}
  #v-cuenta.lat-abierto .cat-top{flex-wrap:nowrap}
}
@media (max-width:900px){
  /* en el teléfono con el menú abierto la pestaña se desplaza: arriba el menú, abajo la cuenta completa */
  #v-cuenta.act.lat-abierto{overflow-y:auto;display:block}
  #v-cuenta.lat-abierto .cta-lateral{height:52vh;flex:none}
  #v-cuenta.lat-abierto .ticket{max-height:none;height:auto}
  #v-cuenta.lat-abierto .ticket .items{overflow:visible;flex:none}
}
#cf-tabs{margin:10px 0 14px}
.tabla-largo{width:100%;border-collapse:collapse}
.tabla-largo th,.tabla-largo td{padding:8px;text-align:left;vertical-align:middle}
.orden-ventas{display:flex;gap:16px;flex-wrap:wrap;margin:0 0 10px}
.orden-ventas label{display:flex;gap:8px;align-items:center;font-weight:600}
tr.grupo-cab{background:var(--panel2);cursor:pointer}
tr.grupo-cab td{padding-top:10px;padding-bottom:10px}
.chip.ok{background:#1e6b3a;color:#fff}.chip.azul{background:#1f5fa8;color:#fff}.chip.err{background:#a52a2a;color:#fff}.chip.apagado{opacity:.7}
.modal.sacude{animation:sacude .35s}
@keyframes sacude{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
/* los botones de la ventana quedan siempre a la vista, aunque el teclado de la tablet tape media pantalla */
.modal > .pie{position:sticky;bottom:-20px;background:var(--panel);padding:10px 0 4px;margin-bottom:-4px;z-index:2;border-top:1px solid var(--line)}

#rep-aviso{position:fixed;left:12px;bottom:12px;z-index:60;background:#7a2a1f;color:#fff;border-radius:24px;padding:8px 8px 8px 16px;display:flex;gap:8px;align-items:center;box-shadow:0 4px 18px #0008;font-size:15px}
#rep-aviso[hidden]{display:none}
#rep-aviso button{background:#fff2;color:#fff;padding:6px 12px;border-radius:16px}
tr.clicable{cursor:pointer}tr.clicable:hover{background:var(--panel2)}
textarea{width:100%;background:var(--panel2);color:var(--txt);border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;resize:vertical}

#act-overlay{position:fixed;inset:0;z-index:100;background:#000d;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;padding:20px}
#act-overlay[hidden]{display:none}
.act-rueda{width:54px;height:54px;border:6px solid #fff4;border-top-color:#fff;border-radius:50%;margin:0 auto 18px;animation:act-giro 1s linear infinite}
@keyframes act-giro{to{transform:rotate(360deg)}}
.barra-prog{height:14px;background:var(--panel2);border-radius:8px;overflow:hidden}.barra-prog div{height:100%;width:0;background:var(--ok,#2e9e5b);transition:width .2s}

/* ===== v0.9.5 ===== */
/* menú: lo que no cabe pasa a "Más" (antes se cortaba y el ⚙ Ajustes quedaba escondido) */
#nav-mas-b{background:transparent;color:var(--muted);font-weight:700}
#nav-mas-b.act{background:var(--panel2);color:var(--txt)}
#nav-mas{position:fixed;z-index:70;background:var(--panel);border:1px solid var(--line2);border-radius:12px;padding:6px;box-shadow:0 10px 30px #000a;display:flex;flex-direction:column;min-width:190px}
#nav-mas[hidden]{display:none}
#nav-mas button{background:transparent;color:var(--txt);text-align:left;padding:12px 14px;font-weight:600;border-radius:8px}
#nav-mas button.act{background:var(--panel2)}
.cta-botones{display:flex;gap:6px}
/* copia de prueba */
#cinta-prueba{display:none}
body.modo-prueba #cinta-prueba{display:block;position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:90;background:#c98a00;color:#000;font-weight:800;font-size:12px;letter-spacing:.04em;padding:2px 14px;border-radius:0 0 10px 10px;pointer-events:none}
body.modo-prueba header{box-shadow:inset 0 3px 0 #c98a00}
/* avisos y anulaciones en el tablero de comandas */
.comanda.anulacion{border:3px solid #d33;background:#3a1212}
.comanda.anulacion .cab small{color:#fff;background:#d33;padding:2px 8px;border-radius:10px}
.comanda.aviso{border:3px solid #d9a200;background:#33290b}
.comanda.aviso .cab small{color:#000;background:#d9a200;padding:2px 8px;border-radius:10px}
/* asistente para dividir la cuenta */
.modal.dividir{width:880px}
.dv-personas{display:flex;gap:8px;flex-wrap:wrap;margin:6px 0 12px}
.dv-personas button{display:flex;flex-direction:column;align-items:flex-start;min-width:120px;padding:10px 14px;border:2px solid transparent;background:var(--panel2);border-radius:12px}
.dv-personas button span{font-size:14px;color:var(--muted)}
.dv-personas button.act{border-color:#8e5be0;background:#2b1f45}
.dv-personas button.nuevo{border:2px dashed #8e5be0;background:transparent;justify-content:center;color:var(--txt)}
.dv-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dv-col{background:var(--panel2);border-radius:12px;padding:10px;min-height:220px;max-height:46vh;overflow:auto}
.dv-col.sel{outline:2px solid #8e5be0}
.dv-col h3{margin:0 0 8px;display:flex;gap:8px;align-items:center}
.dv-col h3 small{margin-left:auto;color:var(--muted);font-size:15px}
.dv-fila{display:flex;align-items:center;gap:8px;padding:10px;border-radius:10px;background:var(--panel);margin-bottom:6px;cursor:pointer}
.dv-fila:active{transform:scale(.99)}
.dv-nom{flex:1;display:flex;flex-direction:column}
.dv-nom small{color:var(--muted)}
.dv-mas1{color:#b79bf0;font-weight:700;white-space:nowrap}
.dv-todo{background:#8e5be0;color:#fff;padding:8px 10px;border-radius:8px;font-weight:700}
.dv-cobrar{width:100%;margin-top:8px}
@media (max-width:700px){.dv-cols{grid-template-columns:1fr}.dv-col{max-height:30vh}}
/* dedos: en pantallas táctiles todos los botones miden al menos 44 px (guías WCAG/Apple/Material) */
@media (pointer:coarse){
  button,.btn,select,input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.mini,.chico{min-height:44px}
  .mini,.chico{padding-left:12px;padding-right:12px}
  .ctl button,.stepper button{min-width:44px;min-height:44px}
  nav button{min-height:44px}
}

/* ---------- v0.9.6: Izakaya Academia (guía integrada) ---------- */
.sis #b-academia{font-size:16px}
.sis #b-academia.aca-late{animation:acaLate 1.4s ease-in-out 4}
@keyframes acaLate{50%{box-shadow:0 0 0 6px #e8a33d88}}
.aca-panel{position:fixed;inset:0;z-index:90;background:#000a;display:grid;place-items:center;padding:12px}
.aca-caja{background:var(--panel);border:1px solid var(--line2);border-radius:16px;width:min(640px,100%);max-height:92vh;overflow:auto;padding:16px}
.aca-cab{display:flex;gap:10px;align-items:center}
.aca-cab img{width:40px;height:40px;border-radius:10px}
.aca-cab div{flex:1;display:flex;flex-direction:column}
.aca-cab small{color:var(--muted)}
.aca-x{background:var(--panel2);min-width:44px;min-height:44px}
.aca-intro{color:var(--muted);margin:10px 0}
#aca-q{width:100%;font-size:16px;margin-bottom:10px}
.aca-caja h4{margin:14px 0 8px;display:flex;justify-content:space-between;align-items:baseline}
.aca-caja h4 small{color:var(--muted);font-weight:400}
.aca-rec{display:grid;gap:8px}
.aca-rec button,.aca-hit{display:flex;gap:12px;align-items:center;text-align:left;background:var(--panel2);padding:12px;min-height:56px;border-radius:12px;width:100%}
.aca-rec small,.aca-hit small{display:block;color:var(--muted);font-weight:400}
.aca-ico{font-size:26px}
.aca-hit{flex-direction:column;align-items:flex-start;gap:2px;margin-bottom:6px}
.aca-chips{display:flex;flex-wrap:wrap;gap:6px}
.aca-chips button{background:var(--panel2);padding:10px 12px;min-height:44px;border-radius:20px;font-size:14px}
.aca-capa{position:fixed;inset:0;z-index:95;pointer-events:none}
.aca-foco{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px #000a,0 0 0 3px #e8a33d;transition:all .25s}
.aca-tarjeta{position:fixed;pointer-events:auto;width:min(340px,calc(100vw - 16px));background:var(--panel);border:2px solid #e8a33d;border-radius:14px;padding:12px;box-shadow:0 10px 30px #000b}
.aca-tarjeta h3{margin:10px 0 4px}
.aca-tarjeta p{margin:4px 0;line-height:1.4}
.aca-esp{color:var(--warn)}
.aca-pie{display:flex;justify-content:space-between;align-items:center;margin-top:10px}
.aca-pie span{display:flex;gap:6px}
.aca-esp a{color:#e8a33d;text-decoration:underline}

/* ---------- v0.9.6: colores de producto más claros ---------- */
.prod{background:color-mix(in srgb,var(--c,#c0392b) 22%,var(--panel));border-top:0;border-left:9px solid var(--c,#c0392b)}
.prod:active{background:color-mix(in srgb,var(--c,#c0392b) 40%,var(--panel2))}
.prod .prod-cat{display:block;color:var(--txt);opacity:.75;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px}
.item[style*="--c"]{border-left:7px solid var(--c);background:color-mix(in srgb,var(--c) 12%,transparent);padding-left:10px;border-radius:6px;margin-bottom:3px}
.item .cat-tag{margin-left:8px;font-size:11px;font-weight:700;text-transform:uppercase;opacity:.7}

/* ---------- v0.9.6: modo práctica ---------- */
.aca-practica{display:flex;gap:12px;align-items:center;text-align:left;width:100%;background:color-mix(in srgb,#2e86c1 22%,var(--panel2));border:2px solid #2e86c1;padding:12px;min-height:60px;border-radius:12px;margin-bottom:8px}
.aca-practica small{display:block;color:var(--muted);font-weight:400}
.pra{position:fixed;inset:0;z-index:92;background:var(--bg,#15120f);display:flex;flex-direction:column}
.pra-cinta{background:#2e86c1;color:#fff;font-weight:800;padding:8px 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:14px}
.pra-cuerpo{flex:1;display:flex;min-height:0}
.pra-guia{width:300px;flex:none;background:var(--panel);border-right:1px solid var(--line);padding:12px;overflow:auto}
.pra-guia h3{margin:10px 0 4px}
.pra-metas{list-style:none;padding:0;margin:10px 0;display:grid;gap:6px}
.pra-metas li{display:flex;gap:8px;align-items:flex-start;background:var(--panel2);padding:8px;border-radius:10px;opacity:.7}
.pra-metas li span{flex:none;width:24px;height:24px;border-radius:50%;background:var(--line2);display:grid;place-items:center;font-weight:800;font-size:13px}
.pra-metas li.ahora{opacity:1;outline:2px solid #e8a33d}
.pra-metas li.ok{opacity:1}.pra-metas li.ok span{background:var(--ok);color:#fff}
.pra-listo{background:color-mix(in srgb,var(--ok) 25%,var(--panel2));padding:10px;border-radius:10px;margin:8px 0}
.pra-nav{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.pra-msg{background:var(--panel2);border-left:4px solid #e8a33d;padding:8px 10px;border-radius:8px;margin:8px 0;line-height:1.4}
.pra-sel{display:flex;gap:6px;margin-top:10px}
.pra-sel button{min-width:44px;min-height:44px;background:var(--panel2)}.pra-sel .act{outline:2px solid #e8a33d}
.pra-pant{flex:1;padding:14px;overflow:auto;min-width:0}
.pra-tit{margin-bottom:10px}.pra-tit small{color:var(--muted);margin-left:8px}
.pra-salon{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr));gap:12px;max-width:560px}
.pm{min-height:96px;border-radius:14px;border:3px solid var(--ok);background:var(--panel2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px}
.pm b{font-size:26px}.pm.ocup{border-color:#c0392b;background:color-mix(in srgb,#c0392b 22%,var(--panel2))}
.pra-cuenta{display:flex;gap:14px;min-height:100%}.pra-menu{flex:1;min-width:0}.pra-menu .grid{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.pra-ticket{width:340px;max-width:46%;background:var(--panel);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:8px}
.pra-barra{display:flex;justify-content:space-between;align-items:center;gap:6px}
.pra-ticket .items{flex:1;overflow:auto}.pra-tip{color:var(--muted)}
.pra-grupo{display:flex;gap:8px;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:1px solid var(--line)}.pra-grupo b{flex:1}
.enviado{color:var(--ok);font-weight:700;font-size:13px}
.pra-modal{position:absolute;inset:0;background:#000a;display:grid;place-items:center;z-index:3;padding:12px}
.pra-modal-c{background:var(--panel);border-radius:14px;padding:16px;width:min(420px,100%);display:grid;gap:8px}
.pra-ops{display:flex;gap:8px;flex-wrap:wrap}.pra-ops .btn{min-height:46px}
.pra-tot{display:flex;justify-content:space-between;font-size:18px}
.pra-pulso{animation:praPulso .7s ease-in-out 5;outline:4px solid #e8a33d;outline-offset:2px;position:relative;z-index:2}
@keyframes praPulso{50%{outline-offset:8px;outline-color:#fff}}
@media (max-width:760px){.pra-cuerpo{flex-direction:column}.pra-guia{width:auto;max-height:42%;border-right:0;border-bottom:1px solid var(--line)}.pra-cuenta{flex-direction:column}.pra-ticket{width:auto;max-width:none}}

/* ---------- v0.9.6: mejoras de operación ---------- */
#deshacer{position:fixed;left:50%;bottom:76px;transform:translate(-50%,20px);opacity:0;pointer-events:none;background:var(--panel);border:2px solid #e8a33d;border-radius:14px;padding:8px 8px 8px 16px;display:flex;gap:12px;align-items:center;z-index:80;box-shadow:0 8px 24px #000a;transition:.2s}
#deshacer.act{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.pm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
.pm-mesa{min-height:56px;border-radius:12px;padding:8px;border:3px solid var(--ok);background:var(--panel2);display:flex;flex-direction:column;justify-content:center;text-align:center;cursor:pointer;color:var(--txt)}
.pm-mesa.ocup{border-color:#c0392b;background:color-mix(in srgb,#c0392b 20%,var(--panel2))}
.pm-mesa small{color:var(--muted)}
.pm-mesa.sobre{outline:4px solid #e8a33d;transform:scale(1.05)}
.arr-capa{position:fixed;inset:0;z-index:97;background:#000c;padding:14px;overflow:auto;display:flex;flex-direction:column;gap:12px}
.arr-tit{font-size:18px;text-align:center}
.arr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.arr-fantasma{position:fixed;left:0;top:0;z-index:99;pointer-events:none;background:#e8a33d;color:#111;font-weight:800;padding:8px 12px;border-radius:10px;box-shadow:0 6px 18px #000a}
#cta-items .item:not(.pagado){user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
#tl-barra{background:var(--panel);border-bottom:1px solid var(--line);padding:8px 14px}
.tl-cab{display:flex;gap:12px;align-items:center}.tl-cab b{flex:1}#tl-hora{font-size:20px;font-weight:800}
#tl-rango{width:100%;height:36px}
.tl-marcas{position:relative;height:18px;color:var(--muted);font-size:12px}.tl-marcas span{position:absolute;transform:translateX(-50%)}
.tl-lista{display:flex;gap:6px;flex-wrap:wrap;max-height:84px;overflow:auto;margin-top:6px}
.tl-chip{background:var(--panel2);padding:8px 12px;min-height:44px;border-radius:20px;border:2px solid #e8a33d}.tl-chip.cerrada{border-color:var(--line2);opacity:.85}.tl-chip small{color:var(--muted);margin-left:4px}
.tl-hit{outline:5px solid #e8a33d !important;outline-offset:2px;position:relative;z-index:3}
.tl-pulso{animation:praPulso .6s ease-in-out 4}
.tl-peor td{background:color-mix(in srgb,#c0392b 25%,transparent);font-weight:700}
.chk{display:flex;gap:8px;align-items:flex-start;margin:8px 0}.chk input{width:22px;height:22px;flex:none}
/* modo comandero: solo lo que usa un garzón con el teléfono */
body.modo-comandero #nav button:not([data-v=salon]):not([data-v=comandas]):not([data-v=ajustes]),
body.modo-comandero .reloj,body.modo-comandero .nav-sep,body.modo-comandero .logo span,body.modo-comandero #b-full,body.modo-comandero #b-apagar{display:none !important}
body.modo-comandero .btn,body.modo-comandero .prod,body.modo-comandero .chips button{min-height:52px;font-size:17px}
body.modo-comandero .ticket,body.modo-comandero .ticket-ancho{width:auto;max-width:none}
/* modo estación: comandas grandes para leer de lejos */
body.modo-estacion header{display:none}
body.modo-estacion #v-comandas{font-size:130%}
body.modo-estacion .comanda{font-size:1.15em}
#est-salir{display:none;position:fixed;top:8px;right:8px;z-index:60;background:var(--panel2);padding:10px 14px;border-radius:12px;opacity:.85}
body.modo-estacion #est-salir{display:block}
.aca-q{min-width:30px;min-height:30px;border-radius:50%;background:#2e86c1;color:#fff;font-weight:800;padding:0;margin-left:4px;vertical-align:middle;flex:none}
.aca-glos details{background:var(--panel2);border-radius:10px;padding:8px 12px;margin-bottom:6px}.aca-glos summary{font-weight:700;cursor:pointer;min-height:32px}.aca-glos p{margin:6px 0;color:var(--muted)}

/* ---------- v0.9.8: Lumi, la lámpara guía ---------- */
.mascota{flex:none;overflow:visible;filter:drop-shadow(0 0 10px #ff9a5a88)}
.aca-cab .mascota{margin:-4px 2px -6px 0}
.ml-flota{animation:mlFlota 3.2s ease-in-out infinite;transform-origin:50% 10%}
.ml-borla{animation:mlBorla 2.4s ease-in-out infinite;transform-origin:32px 67px}
.ml-ojos{animation:mlParpadeo 5s infinite;transform-origin:32px 36px}
.ml-chispas{animation:mlChispas 1s ease-in-out infinite alternate;transform-origin:center}
@keyframes mlFlota{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
@keyframes mlBorla{0%,100%{transform:rotate(-9deg)}50%{transform:rotate(9deg)}}
@keyframes mlParpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes mlChispas{from{opacity:.4;transform:scale(.85)}to{opacity:1;transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.ml-flota,.ml-borla,.ml-ojos,.ml-chispas{animation:none}}
/* globo de diálogo, como los asistentes de antes */
.aca-tarjeta{border-radius:18px;overflow:visible}
.aca-tarjeta::after{content:"";position:absolute;left:34px;bottom:-14px;width:22px;height:22px;background:var(--panel);border-right:2px solid #e8a33d;border-bottom:2px solid #e8a33d;transform:rotate(45deg) skew(8deg,8deg);border-bottom-right-radius:6px}
.aca-nombre{display:flex;flex-direction:column}.aca-nombre b{font-size:17px}

/* ---------- v0.9.12: diseñador de tickets ---------- */
.dis{position:fixed;inset:0;z-index:92;background:var(--bg,#15120f);display:flex;flex-direction:column}
.dis-cab{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line)}
.dis-esp{flex:1}
.dis-tabs{display:flex;gap:4px}.dis-tabs button{background:var(--panel2);padding:8px 14px;min-height:44px;border-radius:10px}.dis-tabs .act{outline:2px solid #e8a33d}
.dis-cab select{width:auto}
.dis-cuerpo{flex:1;display:grid;grid-template-columns:300px minmax(240px,1fr) minmax(300px,1.2fr);gap:0;min-height:0}
.dis-col{padding:12px;overflow:auto;border-right:1px solid var(--line);min-width:0}
.dis-col h4{margin:0 0 8px}.dis-col h4 small{color:var(--muted);font-weight:400}
.dis-bloque{display:flex;align-items:center;gap:6px;background:var(--panel2);border-radius:10px;padding:4px 6px;margin-bottom:5px;border:2px solid transparent;min-height:46px}
.dis-bloque.sel{border-color:#e8a33d}.dis-bloque.off{opacity:.5}
.dis-bloque input{width:22px;height:22px;flex:none}
.dis-nom{flex:1;min-width:0;display:flex;flex-direction:column;cursor:pointer}.dis-nom small{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dis-nom i{font-style:normal}
.dis-bloque .mini{min-width:34px;min-height:34px}
.dis-add{margin-top:10px}.dis-add summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:700}
.dis-add-l{display:grid;gap:5px}.dis-add-l button{text-align:left;background:var(--panel2);padding:9px 10px;min-height:44px;border-radius:10px}.dis-add-l button:disabled{opacity:.35}
.dis-car button{font-family:ui-monospace,Consolas,monospace}
.dis-prev{background:#2a2622;display:flex;flex-direction:column;align-items:center}
.dis-papel{background:#fffef8;color:#111;font:15px/1.25 ui-monospace,Consolas,"Courier New",monospace;width:calc(var(--ch) * 1ch + 36px);max-width:100%;padding:20px 18px 26px;box-shadow:0 6px 24px #000a;border-radius:2px 2px 0 0;
  background-image:linear-gradient(135deg,transparent 75%,#d8d4c4 75%),linear-gradient(225deg,transparent 75%,#d8d4c4 75%);background-size:0 0}
.vl{white-space:pre;min-height:1.25em;overflow:hidden}
.vl-centro{text-align:center}.vl-izq,.vl-i{text-align:left}.vl-c{text-align:center}
.vl-doble{font-size:2em;line-height:1.1}
.vl-alto span{display:inline-block;transform:scaleY(1.9);transform-origin:left center}.vl-alto{min-height:2.4em;display:flex;align-items:center}.vl-alto.vl-c,.vl-alto.vl-centro{justify-content:center}
.vl-neg{font-weight:800}
.vl-qr{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0}.vl-qr small{font-size:10px;color:#555;white-space:normal;word-break:break-all;text-align:center}
.qr-mock{width:92px;height:92px;background:
  conic-gradient(from 90deg at 3px 3px,#0000 90deg,#111 0) 0 0/6px 6px, #fff;border:6px solid #111;outline:2px solid #fff}
@media (max-width:980px){.dis-cuerpo{grid-template-columns:1fr;overflow:auto;display:block}.dis-col{border-right:0;border-bottom:1px solid var(--line)}.dis-papel{font-size:12px}}