:root{
  --bg:#111113; --panel:#18181b; --card:#1f1f23; --line:#2c2c31; --line2:#3a3a40;
  --txt:#f1ece0; --dim:#a8a293; --mute:#77736a;
  --vino:#9b1c1f; --vino2:#c2282c; --gold:#c7a85c; --gold2:#e0c27a;
  --ok:#3fbf73; --warn:#f0a73a; --info:#5aa7e8; --bad:#e2554f;
  --r:14px;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--txt);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-size:15px}
button{font:inherit;cursor:pointer;border:0;border-radius:10px;padding:10px 14px;font-weight:600;color:var(--txt);background:#2a2a30;transition:filter .15s, transform .1s}
button:hover{filter:brightness(1.15)} button:active{transform:scale(.98)}
button.pri{background:var(--gold);color:#1d1608}
button.ok{background:var(--ok);color:#06210f}
button.bad{background:transparent;color:var(--bad);border:1px solid #5a2a28}
button.ghost{background:transparent;border:1px solid var(--line2);color:var(--dim)}
input,select,textarea{font:inherit;color:var(--txt);background:#121215;border:1px solid var(--line2);border-radius:10px;padding:12px 14px;width:100%;outline:none}
input:focus{border-color:var(--gold)}
a{color:var(--gold2)}

/* login */
.login{min-height:100%;display:grid;place-items:center;padding:24px}
.login .box{width:min(360px,100%);text-align:center}
.login img{width:84px;margin-bottom:10px}
.login h1{font-size:22px;font-weight:700;margin-bottom:4px}
.login p{color:var(--dim);margin-bottom:22px}
.login input{text-align:center;font-size:26px;letter-spacing:.5em;margin-bottom:12px}
.login button{width:100%;padding:14px}
.login .err{color:var(--bad);min-height:22px;margin-top:10px;font-size:14px}

/* top bar */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;padding:12px 18px;background:rgba(17,17,19,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top img{width:34px}
.top .ttl{font-weight:700;font-size:17px}
.top .ttl small{display:block;font-weight:500;font-size:12px;color:var(--dim)}
.top .sp{flex:1}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--dim);border:1px solid var(--line2);border-radius:999px;padding:6px 12px}
.pill .led{width:8px;height:8px;border-radius:50%;background:var(--mute)}
.pill.on .led{background:var(--ok);box-shadow:0 0 0 3px rgba(63,191,115,.2)}
.pill.off .led{background:var(--bad)}

/* board */
.board{display:grid;grid-template-columns:repeat(4,minmax(260px,1fr));gap:14px;padding:16px 18px;align-items:start;min-height:calc(100% - 60px)}
.col{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);display:flex;flex-direction:column;min-height:200px}
.col h2{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);padding:13px 14px;border-bottom:1px solid var(--line)}
.col h2 .n{margin-left:auto;background:#2a2a30;color:var(--txt);border-radius:999px;padding:2px 9px;font-size:12px;letter-spacing:0}
.col h2 .dot{width:9px;height:9px;border-radius:50%}
.col .list{display:flex;flex-direction:column;gap:10px;padding:10px}
.col .empty{color:var(--mute);font-size:13px;text-align:center;padding:26px 8px}
.col.c-por_confirmar{border-color:#5b4a22}
.col.c-por_confirmar h2{color:var(--gold2)}

/* card */
.card{background:var(--card);border:1px solid var(--line2);border-radius:12px;padding:12px 13px}
.card.nuevo{border-color:var(--gold);box-shadow:0 0 0 3px rgba(199,168,92,.18);animation:in .35s ease}
@keyframes in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.card .hd{display:flex;align-items:center;flex-wrap:wrap;gap:6px 8px;margin-bottom:6px}
.card .cod{font-weight:800;font-size:17px}
.card .tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;border-radius:6px;padding:3px 7px;background:#2a2a30;color:var(--dim)}
.tag.delivery{background:#2b2213;color:var(--gold2)}
.tag.retiro{background:#16263a;color:var(--info)}
.tag.whatsapp{color:#6fdc94} .tag.instagram{color:#e98bc2} .tag.facebook{color:#7fb0ff} .tag.tiktok{color:#9ff}
.card .time{margin-left:auto;font-size:12px;color:var(--dim);white-space:nowrap}
.card .time.late{color:var(--warn);font-weight:700}
.card .cli{font-weight:600}
.card .cli small{color:var(--dim);font-weight:400}
.card ul{list-style:none;margin:8px 0;border-top:1px dashed var(--line2);border-bottom:1px dashed var(--line2);padding:7px 0}
.card li{display:flex;gap:8px;padding:2px 0;font-size:14.5px}
.card li b{min-width:24px;color:var(--gold2)}
.card li .nt{display:block;color:var(--warn);font-size:12.5px}
.card .addr{font-size:13.5px;color:var(--dim);margin-top:4px}
.card .addr a{font-size:13px}
.card .nota{font-size:13px;background:#2b2213;color:#f3d79a;border-radius:8px;padding:6px 8px;margin-top:6px}
.card .tot{display:flex;justify-content:space-between;align-items:baseline;margin-top:6px}
.card .tot strong{font-size:18px}
.card .tot span{font-size:12.5px;color:var(--dim)}
.card .acts{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.card .acts button{flex:1 1 auto;padding:9px 10px;font-size:14px}
.eta{display:flex;gap:6px;margin-top:10px}
.eta button{flex:1;padding:10px 0;background:#2b2213;color:var(--gold2);border:1px solid #5b4a22}
.eta button:hover{background:var(--gold);color:#1d1608}

/* entregados */
.done{padding:0 18px 30px}
.done details{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px}
.done summary{cursor:pointer;color:var(--dim);font-size:14px}
.done table{width:100%;border-collapse:collapse;margin-top:10px;font-size:13.5px}
.done td{padding:6px 4px;border-top:1px solid var(--line);color:var(--dim)}
.done td:first-child{color:var(--txt);font-weight:700}

/* burbujas */
.toasts{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.toast{display:flex;align-items:center;gap:12px;background:var(--gold);color:#1d1608;border-radius:999px;padding:12px 18px 12px 12px;box-shadow:0 14px 40px rgba(0,0,0,.55);font-weight:700;cursor:pointer;animation:pop .45s cubic-bezier(.2,1.4,.4,1)}
.toast .bub{width:38px;height:38px;border-radius:50%;background:#1d1608;color:var(--gold2);display:grid;place-items:center;font-size:18px}
.toast small{display:block;font-weight:500;opacity:.8}
@keyframes pop{from{opacity:0;transform:translateY(20px) scale(.8)}to{opacity:1;transform:none}}

/* modal */
.modal{position:fixed;inset:0;background:rgba(0,0,0,.6);display:grid;place-items:center;z-index:60;padding:20px}
.modal .box{background:var(--panel);border:1px solid var(--line2);border-radius:var(--r);padding:20px;width:min(420px,100%)}
.modal h3{margin-bottom:12px}
.modal .row{display:flex;gap:8px;margin-top:12px}
.modal .row button{flex:1}

.sound-off{position:fixed;left:50%;top:70px;transform:translateX(-50%);z-index:40;background:var(--warn);color:#2a1700;border-radius:999px;padding:10px 18px;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.4)}

@media(max-width:1100px){.board{grid-template-columns:repeat(2,minmax(240px,1fr))}}
@media(max-width:620px){.board{grid-template-columns:1fr;padding:12px}.top{padding:10px 12px}}

/* ticket impresión 80mm */
#ticket{display:none}
@media print{
  body *{visibility:hidden}
  #ticket,#ticket *{visibility:visible}
  #ticket{display:block;position:absolute;left:0;top:0;width:72mm;color:#000;background:#fff;font:12px/1.35 monospace}
  #ticket h4{font-size:15px;text-align:center}
  #ticket hr{border:0;border-top:1px dashed #000;margin:6px 0}
  @page{size:80mm auto;margin:3mm}
}
/* interruptores de caja */
button.sw{padding:8px 12px;font-size:14px;border:1px solid}
button.sw.on{background:#13261a;color:#7fd99a;border-color:#2f6b43}
button.sw.off{background:#3a1414;color:#ff8b8b;border-color:#8a2f2f;animation:swpulse 1.6s ease-in-out infinite}
@keyframes swpulse{50%{filter:brightness(1.35)}}
@media (max-width:900px){header.top{flex-wrap:wrap}button.sw{font-size:13px}}