:root{
  --bg:#120a1f;--panel:#1c1230;--panel2:#271a42;--borde:#3a2a5e;--txt:#f3eefc;--txt2:#b6a8d6;
  --rosa:#ff3d9a;--cian:#27e1ff;--verde:#2ee59d;--amar:#ffc857;--rojo:#ff5470;--gris:#7d7399;
  --r:14px;--tap:48px;
}
@media (prefers-color-scheme:light){:root[data-tema=auto]{}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.4 system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
body{padding-bottom:env(safe-area-inset-bottom)}
h1,h2,h3{margin:.4em 0;font-weight:700}h2{font-size:1.35rem}h3{font-size:1.05rem;color:var(--txt2)}
small{color:var(--txt2)}b{font-weight:700}
button{font:inherit;color:inherit;cursor:pointer}
input,select,textarea{font:inherit;color:var(--txt);background:var(--panel);border:1px solid var(--borde);border-radius:10px;padding:12px;min-height:var(--tap);width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--cian);outline-offset:1px}
input[type=checkbox]{width:22px;min-height:22px;height:22px}
table{border-collapse:collapse;width:100%}
.centro{min-height:100vh;display:grid;place-items:center;padding:16px}
.nota{color:var(--txt2);font-size:.92rem}.aviso{color:var(--amar)}
.vacio{color:var(--txt2);text-align:center;padding:14px}.vacio.grande{font-size:1.15rem;padding:40px 10px}
.err{color:var(--rojo);min-height:1.3em;margin:.2em 0}

/* login */
.login{width:100%;max-width:360px;background:var(--panel);border:1px solid var(--borde);border-radius:20px;padding:24px;display:grid;gap:12px;text-align:center}
.login .logo{font-size:3rem}.login h1{margin:0}
.tabs2{display:grid;grid-template-columns:1fr 1fr;background:var(--bg);border-radius:10px;padding:3px}
.tabs2 button{border:0;background:none;padding:10px;border-radius:8px;color:var(--txt2)}.tabs2 .on{background:var(--panel2);color:var(--txt)}

/* botones */
.btn{background:var(--rosa);color:#fff;border:0;border-radius:12px;padding:12px 18px;min-height:var(--tap);font-weight:600}
.btn:active{transform:scale(.98)}.btn:disabled{opacity:.5}
.btn.sec{background:var(--panel2);border:1px solid var(--borde)}
.btn.ok{background:var(--verde);color:#06251a}.btn.peligro{background:var(--rojo)}.btn.aviso{background:var(--amar);color:#2b2000}
.btn.grande{min-height:56px;font-size:1.1rem;width:100%}.btn.peq{min-height:36px;padding:6px 12px;font-size:.88rem}
.acciones{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.acciones .btn{flex:1}
.acciones.fijas{position:sticky;bottom:8px;background:linear-gradient(transparent,var(--bg) 30%);padding-top:14px}

/* layout */
.cab{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 14px;background:var(--panel);border-bottom:1px solid var(--borde);position:sticky;top:0;z-index:20}
.marca{font-size:1.1rem}.quien{display:flex;gap:10px;align-items:center;font-size:.85rem;color:var(--txt2);flex-wrap:wrap;justify-content:flex-end}
.red{cursor:pointer;padding:4px 10px;border-radius:99px;font-size:.78rem;border:1px solid var(--borde)}
.red.on{color:var(--verde)}.red.off{color:var(--rojo);border-color:var(--rojo)}.red.err{background:#3a1020}
.nav{display:flex;gap:4px;overflow-x:auto;padding:6px 8px;background:var(--panel);border-bottom:1px solid var(--borde);position:sticky;top:57px;z-index:19;scrollbar-width:none}
.nav button{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px;background:none;border:0;border-radius:10px;padding:6px 12px;color:var(--txt2);font-size:.78rem;min-width:66px}
.nav button .ic{font-size:1.3rem}.nav button.on{background:var(--panel2);color:var(--txt);box-shadow:inset 0 -3px 0 var(--rosa)}
.badge{position:absolute;top:2px;right:6px;background:var(--amar);color:#222;border-radius:99px;font-size:.7rem;font-style:normal;padding:0 6px;min-width:18px}.badge:empty{display:none}.badge.roja{background:var(--rojo);color:#fff}
main{padding:14px;max-width:1100px;margin:0 auto}
.barra-sup{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}.barra-sup h2{margin:0;flex:1}.barra-sup select,.barra-sup input{width:auto;flex:1;min-width:140px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px}
.scroll-x{overflow-x:auto}

/* mesas */
.zona{margin:14px 0 6px}
.mesas{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:10px}
.mesa{display:grid;gap:3px;text-align:left;background:var(--panel);border:2px solid var(--borde);border-radius:var(--r);padding:12px;min-height:110px}
.mesa b{font-size:1.1rem}.mesa .est{font-size:.82rem;color:var(--txt2)}.mesa .tot{font-size:1.15rem;font-weight:700;color:var(--cian)}
.mesa.libre{opacity:.75}.mesa.ocupada{border-color:var(--cian)}.mesa.pidio_cuenta{border-color:var(--rosa);background:#2a1238}
.mesa.demorada{border-color:var(--rojo);animation:lat 1.6s infinite}.sinenviar{color:var(--amar)}
@keyframes lat{50%{box-shadow:0 0 0 4px #ff547033}}

/* consumos */
.resumen{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.resumen div{background:var(--panel);border-radius:var(--r);padding:12px;display:grid}.resumen b{font-size:1.4rem;color:var(--verde)}.resumen div:last-child b{color:var(--amar)}
.consumos{display:grid;gap:8px}
.fila-consumo{background:var(--panel);border:1px solid var(--borde);border-left:5px solid var(--gris);border-radius:12px;padding:10px 12px;display:grid;grid-template-columns:1fr auto;gap:6px 10px}
.fila-consumo .info{display:grid}.fila-consumo .der{display:grid;justify-items:end;gap:4px}.fila-consumo .acc{grid-column:1/-1;display:flex;gap:6px;flex-wrap:wrap}
.e-PENDIENTE_CONFIRMACION{border-left-color:var(--amar)}.e-POR_DESPACHAR,.e-DESPACHADO{border-left-color:var(--cian)}.e-VALIDADO{border-left-color:var(--verde)}.e-SIN_CONFIRMAR,.e-RECHAZADO{border-left-color:var(--rojo)}
.fila-consumo.local{border-style:dashed;border-left-color:var(--amar)}
.chip{display:inline-block;padding:3px 10px;border-radius:99px;font-size:.75rem;background:var(--panel2);border:1px solid var(--borde);white-space:nowrap}
.chip.verde{background:#0e3a2b;border-color:var(--verde);color:var(--verde)}.chip.rojo{background:#3b1220;border-color:var(--rojo);color:var(--rojo)}
.chip.amar{background:#3b2f10;border-color:var(--amar);color:var(--amar)}.chip.azul{background:#0e2f3b;border-color:var(--cian);color:var(--cian)}.chip.gris{color:var(--gris)}

/* tarjetas de pedido (anfitriona / barra) */
.tarjetas{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
.tarjeta-pedido{background:var(--panel);border:2px solid var(--borde);border-radius:18px;padding:16px;display:grid;gap:8px}
.tarjeta-pedido .tp-cab{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tp-prod{font-size:1.5rem;font-weight:800}.tp-com{color:var(--verde);font-weight:700}.tp-det{color:var(--txt2)}
.tarjeta-pedido .acciones{flex-direction:column}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:10px 0}
.kpi{background:var(--panel);border-radius:var(--r);padding:12px;display:grid;gap:2px}.kpi b{font-size:1.4rem}
.kpi.ok b{color:var(--verde)}.kpi.rojo b{color:var(--rojo)}.kpi.amar b{color:var(--amar)}
.estados{margin:10px 0}.etq{margin:8px 0 4px;color:var(--txt2);font-size:.9rem}
.liq{display:grid;grid-template-columns:1fr auto auto;gap:8px;align-items:center;background:var(--panel);border-radius:12px;padding:10px 12px;margin:6px 0}.liq .acciones{grid-column:1/-1;margin:0}

/* tablas y bloques */
.tabla{background:var(--panel);border-radius:12px;overflow:hidden;font-size:.9rem}
.tabla th{text-align:left;color:var(--txt2);font-weight:600;padding:8px 10px;background:var(--panel2);text-transform:capitalize}
.tabla td{padding:8px 10px;border-top:1px solid var(--borde)}.tabla tr.click{cursor:pointer}.tabla tr.click:hover td{background:var(--panel2)}
.bloque{min-width:0}
.alerta{display:grid;grid-template-columns:1fr auto;gap:8px;background:var(--panel);border-left:6px solid var(--gris);border-radius:12px;padding:12px;margin:8px 0}
.alerta p{margin:.3em 0;color:var(--txt2)}.g-critica{border-left-color:var(--rojo);background:#2a1020}.g-media{border-left-color:var(--amar)}.g-info{border-left-color:var(--cian)}
.alerta .acc{display:flex;gap:6px;flex-wrap:wrap;align-items:flex-start}
.lista-dif{padding-left:1.2em;color:var(--amar)}.resultado{display:grid;gap:8px}

/* botellas */
.botella,.bot-uso{background:var(--panel);border:1px solid var(--borde);border-radius:12px;padding:12px;margin:6px 0;display:grid;gap:6px}
.botella{grid-template-columns:1fr auto;align-items:center}.botella .acc{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.botellas-uso{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:10px}
.nivel{position:relative;background:var(--bg);border-radius:99px;height:20px;overflow:hidden;min-width:140px}.nivel div{background:linear-gradient(90deg,var(--rosa),var(--cian));height:100%}
.nivel span{position:absolute;inset:0;text-align:center;font-size:.72rem;line-height:20px}
.seccion h3{margin-top:18px}
.etiquetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px;margin:10px 0}
.etiqueta{border:1px dashed var(--borde);border-radius:8px;padding:6px;text-align:center;display:grid;gap:2px;justify-items:center}.etiqueta .qr{width:90px}

/* caja */
.turno{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--panel);border-radius:var(--r);padding:12px;margin-bottom:10px}.turno>div{display:grid}
.medios{display:grid;gap:8px;margin:10px 0}.medios label{display:grid;grid-template-columns:110px 1fr auto;gap:8px;align-items:center}
.cobro-total{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--bg);border-radius:12px;padding:12px;font-size:1.05rem}.cobro-total .ok{color:var(--verde)}.cobro-total .rojo{color:var(--rojo)}
.ticket-lista div,.tl{display:flex;justify-content:space-between;padding:4px 0;border-bottom:1px dotted var(--borde)}
.ticket{display:grid;gap:4px;text-align:center}.ticket .tl{text-align:left}

/* modal y formularios */
.modal-fondo{position:fixed;inset:0;background:#000b;display:grid;place-items:center;padding:12px;z-index:100;overflow:auto}
.modal{background:var(--panel);border:1px solid var(--borde);border-radius:18px;width:100%;max-width:440px;max-height:92vh;overflow:auto;padding:14px 16px}
.modal.ancho{max-width:760px}.modal-cab{display:flex;justify-content:space-between;align-items:center}.modal-cab h3{color:var(--txt);margin:0}
.x{background:none;border:0;font-size:1.3rem;color:var(--txt2);min-width:40px;min-height:40px}
.form{display:grid;gap:10px}.form label{display:grid;gap:4px}.form label span{font-size:.88rem;color:var(--txt2)}.form label.chk{display:flex;gap:10px;align-items:center}
.fila{display:flex;gap:8px}.fila input{flex:1}
.chips-cat,.anfs{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.chipbtn{background:var(--panel2);border:1px solid var(--borde);border-radius:99px;padding:8px 14px;min-height:40px}.chipbtn.on{background:var(--rosa);border-color:var(--rosa);color:#fff}
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.prod{display:grid;gap:3px;text-align:left;background:var(--panel2);border:1px solid var(--borde);border-radius:12px;padding:12px;min-height:84px}.prod span{color:var(--cian);font-weight:700}
.prod.t-trago_anfitriona{border-color:var(--rosa)}.prod.t-botella{border-color:var(--amar)}
.cantidad{display:flex;align-items:center;justify-content:center;gap:20px;margin:12px 0}.cantidad b{font-size:2rem;min-width:50px;text-align:center}
.codigo-entrega{text-align:center}.codigo-entrega .cod{font-size:2.6rem;font-weight:800;letter-spacing:.2em;color:var(--cian)}
.qr{background:#fff;padding:6px;border-radius:10px;display:inline-block;width:min(260px,70vw)}.qr svg{width:100%;height:auto;display:block}
.escaner .video{width:100%;border-radius:12px;background:#000;max-height:50vh;margin-bottom:8px}
.op{display:flex;justify-content:space-between;gap:8px;align-items:center;background:var(--bg);border-radius:10px;padding:8px 10px;margin:6px 0}.op.error{border-left:4px solid var(--rojo)}.op>div{display:grid}
.cab-mesa{margin-bottom:8px}

/* toasts */
#toasts{position:fixed;left:0;right:0;bottom:78px;display:grid;gap:8px;justify-items:center;z-index:200;padding:0 12px;pointer-events:none}
.toast{background:var(--panel2);border:1px solid var(--borde);border-radius:12px;padding:10px 16px;box-shadow:0 6px 24px #0008;max-width:520px}
.toast.err{border-color:var(--rojo);color:#ffd0d8}.toast.warn{border-color:var(--amar)}.toast.ok{border-color:var(--verde)}

@media (max-width:520px){.cab{padding:8px 10px}.nav{top:52px}.medios label{grid-template-columns:90px 1fr auto}}
@media print{body *{visibility:hidden}.modal,.modal *{visibility:visible}.modal{position:absolute;left:0;top:0;border:0;background:#fff;color:#000;max-width:none;max-height:none}.modal button,.x{display:none!important}.etiqueta{border-color:#999}}