/* Control Safe v3 — mobile-first, keeps the v1 look cues (white top bar with tabs, coloured company banner,
   big balance, green Entrada / red Salida, inventory table). Breakpoints 600 / 900 / 1200 px. */
:root{--bg:#f3f4f6;--card:#fff;--ink:#111827;--muted:#6b7280;--line:#e5e7eb;--green:#15803d;--green-bg:#dcfce7;--red:#b91c1c;--red-bg:#fee2e2;
  --blue:#1d4ed8;--blue-bg:#dbeafe;--amber-bg:#fef3c7;--amber:#92400e;--cco:#1d4ed8;--tap:44px;--radius:12px;--nav-h:58px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.35}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 14px;color:var(--ink);min-height:var(--tap)}
button:hover{background:#f9fafb}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,a:focus-visible{outline:3px solid #93c5fd;outline-offset:1px}
button.primary{background:var(--blue);color:#fff;border-color:var(--blue)}
button.primary:hover{background:#1e40af}
button.danger{background:var(--red);color:#fff;border-color:var(--red)}
button.danger:hover{background:#991b1b}
button.ok{background:var(--green);color:#fff;border-color:var(--green)}
button.ghost{background:transparent;border-color:transparent}
button.sm{min-height:36px;padding:6px 10px;font-size:13px}
button.link{background:none;border:none;color:var(--blue);padding:0;text-decoration:underline;min-height:0}
button:disabled{opacity:.5;cursor:not-allowed}
input,select,textarea{font:inherit;padding:10px 12px;border:1px solid #cbd5e1;border-radius:10px;background:#fff;color:var(--ink);min-height:var(--tap);max-width:100%}
input[type=number]{-moz-appearance:textfield}
input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
textarea{min-height:60px;resize:vertical}
label{font-size:13px;color:var(--muted);font-weight:600}
h1{font-size:20px;margin:0 0 12px}
h2{font-size:17px;margin:0 0 12px}
h3{font-size:14px;margin:14px 0 8px;color:var(--muted)}
p{margin:0 0 10px}
.muted{color:var(--muted)}
.pos{color:var(--green)}.neg{color:var(--red)}
.hidden{display:none!important}
.boot{padding:60px;text-align:center;color:var(--muted)}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:14px}
.card.tight{padding:10px}
.grid2{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:900px){.grid2{grid-template-columns:1fr 1fr}}
.grid2>*,.cards3>*{min-width:0}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.row.end{justify-content:flex-end}
.row.between{justify-content:space-between}
.sp{flex:1}
.field{display:flex;flex-direction:column;gap:4px;margin-bottom:12px;min-width:0}
.field input,.field select,.field textarea{width:100%}
.field .hint{font-size:12px;color:var(--muted);font-weight:400}
.fields2{display:grid;grid-template-columns:1fr;gap:0 14px}
@media(min-width:600px){.fields2{grid-template-columns:1fr 1fr}}
.err{background:var(--red-bg);color:var(--red);padding:10px 12px;border-radius:10px;margin:10px 0;font-size:14px}
.warn{background:var(--amber-bg);color:var(--amber);padding:10px 12px;border-radius:10px;margin:10px 0;font-size:14px}
.info{background:var(--blue-bg);color:var(--blue);padding:10px 12px;border-radius:10px;margin:10px 0;font-size:14px}
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.pill.in,.pill.transfer_in,.pill.ok{background:var(--green-bg);color:var(--green)}
.pill.out,.pill.transfer_out,.pill.bad{background:var(--red-bg);color:var(--red)}
.pill.adj,.pill.pending{background:var(--amber-bg);color:var(--amber)}
.pill.void,.pill.cancelled{background:#e5e7eb;color:#374151}
.pill.voided{background:#111;color:#fff}
.pill.received{background:var(--green-bg);color:var(--green)}
.pill.admin{background:var(--blue-bg);color:var(--blue)}.pill.superuser{background:#ede9fe;color:#6d28d9}.pill.operator{background:#f1f5f9;color:#475569}
.pill.morning{background:#fef3c7;color:#92400e}.pill.afternoon{background:#e0e7ff;color:#3730a3}
.pill.till{background:#f1f5f9;color:#475569}.pill.machine{background:#fef9c3;color:#854d0e}.pill.bank{background:var(--blue-bg);color:var(--blue)}.pill.other{background:#f3e8ff;color:#6b21a8}
.ctag{display:inline-block;padding:3px 10px;border-radius:8px;color:#fff;font-weight:700;font-size:13px}
.dot{display:inline-block;width:14px;height:14px;border-radius:50%;vertical-align:middle;margin-right:6px}

/* ---------- header / banner / nav ---------- */
.topbar{background:#fff;border-bottom:1px solid var(--line);padding:6px 12px;display:flex;align-items:center;gap:6px 8px;position:sticky;top:0;z-index:20;flex-wrap:wrap}
@media(max-width:600px){.topbar .clock{display:none}.topbar{padding:6px 8px}}
.topbar .brand{font-weight:800;font-size:15px;white-space:nowrap;display:flex;align-items:center;gap:6px}
.topbar .brand small{font-weight:400;color:var(--muted);font-size:11px}
.topbar .tabs{display:none;gap:2px;margin-left:8px;flex:1;overflow-x:auto}
.topbar .tabs button{border:none;background:transparent;padding:8px 10px;border-radius:8px;white-space:nowrap;min-height:38px;font-weight:500}
.topbar .tabs button.active{background:var(--blue-bg);color:var(--blue);font-weight:700}
.topbar .tabs button .badge{background:var(--red);color:#fff;border-radius:999px;font-size:11px;padding:0 6px;margin-left:4px}
.topbar .who{font-weight:700;background:var(--blue-bg);color:var(--blue);padding:6px 10px;border-radius:999px;white-space:nowrap;font-size:13px;max-width:40vw;overflow:hidden;text-overflow:ellipsis}
.topbar .clock{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.topbar .lang{border:none;background:#f1f5f9;font-weight:700;padding:6px 10px;min-height:36px;font-size:12px}
.topbar .logout{min-height:36px;padding:6px 10px;font-size:13px}
@media(min-width:900px){.topbar .tabs{display:flex}.topbar .sp-mobile{display:none}}
.cbanner{display:flex;align-items:center;gap:10px;padding:8px 12px;color:#fff;flex-wrap:wrap;background:var(--cco);box-shadow:0 2px 6px rgba(0,0,0,.15)}
.cbanner .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.08em;opacity:.85;display:block}
.cbanner select{font-weight:700;border:2px solid rgba(255,255,255,.7);background:rgba(255,255,255,.95);color:#111;padding:6px 10px;border-radius:10px;font-size:14px;min-height:40px;max-width:60vw}
.cbanner .cname{font-size:17px;font-weight:800;letter-spacing:.02em}
.cbanner .ccif{font-size:12px;opacity:.9}
.cbanner .ucard{background:#fff;color:#111;border-radius:10px;padding:6px 10px;font-weight:700;font-size:13px;white-space:nowrap}
.cbanner .safebtns{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.cbanner .safebtns button{font-weight:700;font-size:14px;padding:8px 14px;border:2px solid rgba(255,255,255,.7);background:rgba(255,255,255,.2);color:#fff;border-radius:10px;min-height:40px}
.cbanner .safebtns button.sel{background:#fff;color:#111}
.cbanner .safebtns button small{font-weight:400;display:block;font-size:11px}
.banner-alert{background:var(--red);color:#fff;padding:8px 12px;font-weight:600;text-align:center}
main{max-width:1200px;margin:14px auto;padding:0 12px calc(var(--nav-h) + 16px)}
@media(min-width:900px){main{padding-bottom:20px}}
.bottomnav{position:fixed;left:0;right:0;bottom:0;height:var(--nav-h);background:#fff;border-top:1px solid var(--line);display:flex;z-index:20;padding-bottom:env(safe-area-inset-bottom)}
.bottomnav button{flex:1;border:none;border-radius:0;background:transparent;font-size:10px;padding:4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);min-height:var(--nav-h);position:relative}
.bottomnav button .ic{font-size:20px;line-height:1}
.bottomnav button.active{color:var(--blue);font-weight:700}
.bottomnav button .badge{position:absolute;top:4px;right:calc(50% - 22px);background:var(--red);color:#fff;border-radius:999px;font-size:10px;padding:0 5px}
@media(min-width:900px){.bottomnav{display:none}}

/* ---------- home ---------- */
.balance{text-align:center;padding:22px 12px}
.balance .label{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:12px}
.balance .amount{font-size:44px;font-weight:800;margin:6px 0 14px;font-variant-numeric:tabular-nums;color:var(--cco)}
@media(min-width:600px){.balance .amount{font-size:56px}}
.bigbtns{display:grid;grid-template-columns:1fr 1fr;gap:12px;justify-content:center;max-width:560px;margin:0 auto}
.bigbtns button{font-size:22px;font-weight:800;padding:16px 10px;border-radius:16px;min-height:76px;color:#fff}
.bigbtns button small{display:block;font-size:13px;font-weight:500;opacity:.95}
.bigbtns .plus{background:var(--green);border-color:var(--green)}
.bigbtns .plus:hover{background:#166534}
.bigbtns .minus{background:var(--red);border-color:var(--red)}
.bigbtns .minus:hover{background:#991b1b}
.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0 0;justify-content:center}
.toolbar button{font-weight:600}
.toolbar .order{background:var(--blue-bg);color:var(--blue);border-color:#93c5fd}

/* ---------- tables ---------- */
.tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;font-size:14px}
th,td{padding:7px 8px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap;vertical-align:top}
th{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:700;position:sticky;top:0;background:#fff}
th.l,td.l{text-align:left}
td.wrap{white-space:normal;min-width:160px}
tr.total td{font-weight:700;border-top:2px solid var(--ink)}
tr.section td{background:#f9fafb;font-weight:600;text-align:left;color:var(--muted);font-size:12px;text-transform:uppercase}
tr.voided td{text-decoration:line-through;color:#9ca3af}tr.voided td .pill,tr.voided td button{text-decoration:none}
tr.click{cursor:pointer}
tr.sub td{background:#f9fafb}
.detail{font-size:12px;color:var(--muted);white-space:normal;max-width:360px}
.detail b{color:var(--red)}

/* ---------- forms in dialogs ---------- */
.parties{display:flex;gap:8px;flex-wrap:wrap}
.parties button{padding:10px 14px;font-weight:600;flex:1 1 auto}
.parties button.sel{background:var(--blue);color:#fff;border-color:var(--blue)}
.shifts{display:flex;gap:8px}
.shifts button{flex:1;padding:10px;font-weight:700;font-size:15px}
.shifts button[data-s="morning"].sel{background:#f59e0b;border-color:#f59e0b;color:#111}
.shifts button[data-s="afternoon"].sel{background:#4338ca;border-color:#4338ca;color:#fff}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches button{width:36px;height:36px;min-height:36px;border-radius:50%;border:3px solid transparent;padding:0}
.swatches button.sel{border-color:#111}
.chk{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink);font-weight:500;min-height:var(--tap);padding:4px 0}
.chk input{width:22px;height:22px;min-height:0;margin:0}
.actions{display:flex;gap:10px;justify-content:flex-end;margin-top:12px;flex-wrap:wrap}
.actions button{min-width:110px}
.pw{display:flex;align-items:stretch;width:100%}.pw input{flex:1;border-radius:10px 0 0 10px;border-right:0;min-width:0}.pw .eye{border:1px solid #cbd5e1;border-radius:0 10px 10px 0;background:#f3f4f6;padding:0 14px;min-width:52px}.pw .eye.on{background:var(--blue-bg)}
.mtotal{display:flex;justify-content:space-between;align-items:center;font-size:22px;font-weight:800;padding:12px 0;border-top:2px solid var(--ink);margin-top:10px;position:sticky;bottom:0;background:#fff}

/* ---------- denomination grid ---------- */
.denom{border:1px solid var(--line);border-radius:12px;overflow:hidden}
.denom .dh,.denom .dr{display:grid;grid-template-columns:62px 1fr 1fr 96px;gap:4px 8px;align-items:center;padding:4px 8px}
.denom .dh{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:700;background:#f9fafb;border-bottom:1px solid var(--line)}
.denom .dr{border-bottom:1px solid var(--line)}
.denom .dr:last-child{border-bottom:none}
.denom .sec{grid-column:1/-1;font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:700;padding:6px 8px;background:#f3f4f6;border-bottom:1px solid var(--line)}
.denom .d{font-weight:700}
.denom .d small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.denom .sub{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.denom .sub small{display:block;font-weight:400;color:var(--muted);font-size:11px}
.denom .dr.short{background:var(--red-bg)}
.denom .dr.short .sub{color:var(--red)}
.stepper{display:flex;align-items:stretch;min-width:0}
.stepper button{min-width:38px;min-height:var(--tap);padding:0;border-radius:10px 0 0 10px;font-size:18px;font-weight:700;background:#f9fafb}
.stepper button:last-child{border-radius:0 10px 10px 0}
.stepper input{width:100%;min-width:40px;text-align:center;border-radius:0;border-left:0;border-right:0;padding:6px 2px;font-weight:600}
.stepper.empty input{color:var(--muted)}
.denom .openroll{grid-column:1/-1;display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:12px;color:var(--amber);background:var(--amber-bg);padding:6px 8px;border-radius:8px}
.denom .openroll button{min-height:34px;padding:4px 10px;font-size:12px}
@media(max-width:600px){
  .denom .dh,.denom .dr{grid-template-columns:52px 1fr 1fr;gap:4px 6px}
  .denom .dh .hsub{display:none}
  .denom .dh div:first-child{visibility:hidden}
  .mtotal{position:static}
  .denom .dr .sub{grid-column:1/-1;text-align:right;font-size:13px;padding-bottom:2px}
  .denom .dr .sub small{display:inline;margin-left:8px}
  .stepper button{min-width:34px}
}

/* ---------- login ---------- */
.login{max-width:420px;margin:40px auto;padding:0 12px}
.login h1{font-size:22px;text-align:center;margin-bottom:4px}
.login .sub{text-align:center;color:var(--muted);font-size:13px;margin-bottom:18px}
.companies{display:grid;grid-template-columns:1fr;gap:8px;margin:4px 0 12px}
.companies button{padding:14px 12px;border:2px solid var(--line);border-radius:10px;min-height:56px;font-weight:700;font-size:16px;text-align:left}
.companies button:hover{border-color:var(--blue);background:var(--blue-bg)}
.picked{display:flex;align-items:center;gap:10px;justify-content:space-between;background:#f9fafb;border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-bottom:10px;font-size:15px}
.picked .link{white-space:nowrap}
.login .users{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 12px}
.login .users button{padding:12px 8px;border:2px solid var(--line);border-radius:10px;min-height:60px}
.login .users button.on{border-color:var(--blue);background:var(--blue-bg)}
.login .users button small{display:block;color:var(--muted);font-size:11px;margin-top:2px}
.login .lan{font-size:12px;text-align:center;color:var(--muted);margin-top:14px;word-break:break-all}

/* ---------- modal / toast ---------- */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:flex-start;justify-content:center;padding:0;overflow:auto;z-index:40}
@media(min-width:600px){.overlay{padding:24px 12px}}
.modal{background:#fff;width:100%;max-width:760px;padding:16px;box-shadow:0 20px 60px rgba(0,0,0,.3);min-height:100%;border-radius:0}
@media(min-width:600px){.modal{border-radius:16px;min-height:0;padding:22px}}
.modal.narrow{max-width:520px}
.modal.wide{max-width:960px}
.modal h2{font-size:18px;display:flex;align-items:center;gap:10px;margin-bottom:10px}
.modal h2 .pill{font-size:14px;padding:4px 12px}
.modal .ctx{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:10px;color:#fff;font-weight:700;margin-bottom:12px;background:var(--cco);flex-wrap:wrap}
.modal .ctx .safe{margin-left:auto;background:#fff;color:#111;padding:2px 10px;border-radius:6px}
.modal .xclose{position:absolute;right:8px;top:8px;border:none;background:transparent;font-size:22px;min-height:40px;min-width:40px}
.modal-wrap{position:relative;width:100%;max-width:760px}
.modal-wrap.narrow{max-width:520px}.modal-wrap.wide{max-width:960px}
.toast{position:fixed;bottom:calc(var(--nav-h) + 12px);left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:12px 20px;border-radius:10px;z-index:60;font-weight:600;max-width:92vw;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.toast.err{background:var(--red)}.toast.ok{background:var(--green)}
@media(min-width:900px){.toast{bottom:20px}}
.printchooser{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0}
.printchooser button{min-height:64px;font-size:16px;font-weight:700}

/* ---------- reports / config ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:end;background:#f9fafb;border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:14px}
.filters .fg{display:flex;flex-direction:column;gap:4px;min-width:0}
.filters .fg label{font-size:11px}
.filters input,.filters select{min-width:120px}
.filters .quick{display:flex;gap:6px}
.cards3{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:14px}
@media(min-width:600px){.cards3{grid-template-columns:repeat(3,1fr)}}
.kcard{border:1px solid var(--line);border-radius:14px;padding:14px;text-align:center;background:#fff}
.kcard .lbl{font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.kcard .val{font-size:24px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums}
.kcard.cin{background:var(--green-bg);border-color:#bbf7d0}.kcard.cin .val{color:var(--green)}
.kcard.cout{background:var(--red-bg);border-color:#fecaca}.kcard.cout .val{color:var(--red)}
.kcard.cbal{background:var(--blue-bg);border-color:#bfdbfe}.kcard.cbal .val{color:var(--blue)}
.subtabs{display:flex;gap:4px;flex-wrap:wrap;border-bottom:2px solid var(--line);margin-bottom:14px;overflow-x:auto}
.subtabs button{border:none;background:transparent;padding:10px 12px;border-radius:8px 8px 0 0;color:var(--muted);font-weight:600;border-bottom:3px solid transparent;margin-bottom:-2px;white-space:nowrap;min-height:40px}
.subtabs button.active{color:var(--ink);border-bottom-color:var(--blue);background:#f9fafb}
.perm-grid{display:grid;grid-template-columns:1fr auto auto;gap:6px 14px;align-items:center;margin:10px 0;padding:10px;border:1px solid var(--line);border-radius:10px}
.perm-grid .ph{font-weight:700;font-size:13px}
.inbox-item{border:1px solid var(--line);border-radius:12px;padding:12px;margin-bottom:10px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.inbox-item .amt{font-size:20px;font-weight:800;margin-left:auto}
.inbox-item .acts{display:flex;gap:8px;width:100%}
@media(min-width:600px){.inbox-item .acts{width:auto}}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-all}
.token{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:18px;letter-spacing:.06em;background:#f3f4f6;padding:10px;border-radius:10px;word-break:break-all}
.company-list .item,.list .item{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.list .item .grow{flex:1;min-width:160px}
.footer{color:var(--muted);font-size:11px;text-align:center;margin:20px 0}
.kv{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:14px}
.kv .k{color:var(--muted)}
.lines-list{font-size:13px;color:var(--muted)}
.stack{display:flex;flex-direction:column;gap:8px}
.safelist{margin:6px 0 0 8px;padding:8px 12px;border:1px solid var(--line);border-radius:10px;gap:2px}
.banner-must{padding:10px 12px;background:var(--amber-bg);color:var(--amber);font-weight:600;text-align:center}
@media print{.topbar,.cbanner,.bottomnav,.toolbar,.filters,.actions{display:none!important}}