/* Aspecto "azul corporativo": menú lateral azul marino, contenido claro, acento azul.
   Fuentes: Manrope (títulos y cifras grandes), Inter (texto), IBM Plex Mono (montos en tablas y ticket). */
:root{
  --side:#0d1b33; --side-2:#13254a; --side-fg:#c9d4e8; --side-muted:#8193b2; --side-active:#ffffff; --side-line:rgb(255 255 255 / .08);
  --bg:#f4f6fa; --surface:#ffffff; --surface-2:#eef2f8; --fg:#0f1b2d; --muted:#5d6b82; --line:#e1e6ef; --line-2:#cfd7e4;
  --accent:#1f4fd8; --accent-2:#173fb0; --accent-fg:#ffffff; --accent-soft:#e7eeff;
  --ok:#0f7a4f; --ok-soft:#e3f5ec; --warn:#a15c00; --warn-soft:#fff1dc; --danger:#c0262d; --danger-soft:#fde8e8;
  --paper:#ffffff;
  --f-display:"Manrope","Segoe UI",system-ui,sans-serif;
  --f-body:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:12px; --r-sm:8px;
  --shadow-sm:0 1px 2px rgb(15 27 45 / .06);
  --shadow:0 1px 2px rgb(15 27 45 / .05), 0 8px 24px rgb(15 27 45 / .07);
  --side-w:248px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --side:#0a1426; --side-2:#12213f; --side-fg:#c3cee3; --side-muted:#7b8cab;
  --bg:#0e1626; --surface:#152035; --surface-2:#1b2842; --fg:#e7ecf5; --muted:#97a5bd; --line:#24324d; --line-2:#2f3f5f;
  --accent:#5b8cff; --accent-2:#7aa2ff; --accent-fg:#071025; --accent-soft:#1a2c55;
  --ok:#4cc68f; --ok-soft:#123326; --warn:#f0b04d; --warn-soft:#3a2a10; --danger:#ff7a7a; --danger-soft:#3c1a1d; --paper:#152035;
  --shadow:0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .3); color-scheme:dark }}
:root[data-theme="dark"]{
  --side:#0a1426; --side-2:#12213f; --side-fg:#c3cee3; --side-muted:#7b8cab;
  --bg:#0e1626; --surface:#152035; --surface-2:#1b2842; --fg:#e7ecf5; --muted:#97a5bd; --line:#24324d; --line-2:#2f3f5f;
  --accent:#5b8cff; --accent-2:#7aa2ff; --accent-fg:#071025; --accent-soft:#1a2c55;
  --ok:#4cc68f; --ok-soft:#123326; --warn:#f0b04d; --warn-soft:#3a2a10; --danger:#ff7a7a; --danger-soft:#3c1a1d; --paper:#152035;
  --shadow:0 1px 2px rgb(0 0 0 / .3), 0 8px 24px rgb(0 0 0 / .3); color-scheme:dark }

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;min-height:100%}
:root{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:14.5px;line-height:1.5;-webkit-font-smoothing:antialiased}
img{max-width:100%}
a{color:var(--accent)}
h1,h2,h3{font-family:var(--f-display);margin:0;letter-spacing:-.015em;text-wrap:balance}
h2{font-size:1.45rem;font-weight:700} h3{font-size:1rem;font-weight:700}
.num,.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{padding-left:max(28px,env(safe-area-inset-left,0px));padding-right:max(28px,env(safe-area-inset-right,0px))}
.muted{color:var(--muted)}

/* ---------- estructura: menú lateral + contenido ---------- */
#scr-app{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr);min-height:100vh}
#scr-app > .top{grid-column:1;grid-row:1 / span 3}
#scr-app > .banner,#scr-app > main{grid-column:2}
.top{background:var(--side);color:var(--side-fg)}
.side{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:22px 14px 16px;gap:22px;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:0 8px;min-width:0}
.logo{flex:none;width:36px;height:36px;border-radius:10px;background:linear-gradient(145deg,#3c6cf0,#1a3fae);display:grid;place-items:center;box-shadow:inset 0 1px 0 rgb(255 255 255 / .2)}
.logo svg{width:20px;height:20px;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.logo.lg{width:48px;height:48px;border-radius:13px}.logo.lg svg{width:26px;height:26px}
.brand-text{min-width:0}
.brand h1{font-size:1.06rem;font-weight:800;color:#fff;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sysname b{color:#8fb0ff;font-weight:800}
.brand small{display:block;font-size:.76rem;color:var(--side-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
nav.tabs{display:flex;flex-direction:column;gap:2px;flex:1}
nav.tabs a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:9px;color:var(--side-fg);text-decoration:none;font-weight:500;font-size:.93rem;transition:background .12s,color .12s}
nav.tabs a svg{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
nav.tabs a:hover{background:var(--side-line);color:#fff}
nav.tabs a[aria-current="page"]{background:var(--side-2);color:var(--side-active);box-shadow:inset 3px 0 0 #6d95ff}
nav.tabs a[aria-current="page"] svg{opacity:1;color:#8fb0ff}
.badge{margin-left:auto;font-family:var(--f-mono);font-size:.7rem;font-weight:600;background:#f59e0b;color:#2a1a00;border-radius:99px;padding:0 7px;line-height:1.7}
.who{display:grid;gap:10px;border-top:1px solid var(--side-line);padding-top:14px}
.sucbox{display:grid;gap:5px;padding:0 4px}
.sucbox span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--side-muted);font-weight:600}
.sucbox select{background:var(--side-2);border:1px solid var(--side-line);color:#fff;border-radius:8px;padding:7px 9px;width:100%}
.menu{position:relative}
.userbtn{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;color:var(--side-fg);padding:7px 8px;border-radius:10px;cursor:pointer;text-align:left}
.userbtn:hover{background:var(--side-line)}
.avatar{flex:none;width:34px;height:34px;border-radius:50%;background:#2b4a8f;color:#fff;display:grid;place-items:center;font-weight:700;font-size:.82rem;font-family:var(--f-display)}
.un{min-width:0;display:grid}
.un b{color:#fff;font-weight:600;font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.un small{color:var(--side-muted);font-size:.74rem}
.menu-pop{position:absolute;left:0;right:0;bottom:calc(100% + 8px);background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;z-index:40;display:grid}
.menu-pop .who-info{padding:9px 10px;border-bottom:1px solid var(--line);margin-bottom:4px;font-size:.86rem;display:grid;gap:2px}
.menu-pop button{text-align:left;border:0;background:none;padding:9px 10px;border-radius:8px;cursor:pointer}
.menu-pop button:hover{background:var(--surface-2)}
.rolechip{justify-self:start;font-size:.72rem;background:var(--accent-soft);color:var(--accent);border-radius:99px;padding:1px 9px;font-weight:600;white-space:nowrap}
.banner{background:var(--warn-soft);color:var(--warn);font-size:.88rem;border-bottom:1px solid var(--line)}
.banner .wrap{padding-block:9px}
main{padding-block:28px 96px;max-width:1500px;width:100%}
.view[hidden]{display:none}
section+section{margin-top:32px}

/* ---------- controles ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line-2);background:var(--surface);border-radius:var(--r-sm);padding:8px 15px;cursor:pointer;font-weight:600;font-size:.9rem;white-space:nowrap;box-shadow:var(--shadow-sm);transition:background .12s,border-color .12s}
.btn:hover{border-color:var(--muted);background:var(--surface-2)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg)}
.btn.primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn.danger{color:var(--danger)}
.btn.danger.solid{background:var(--danger);border-color:var(--danger);color:#fff}
.btn.ghost{border-color:transparent;background:transparent;box-shadow:none}
.btn.ghost:hover{background:var(--surface-2)}
.btn.sm{padding:5px 11px;font-size:.82rem}
.btn:disabled{opacity:.45;cursor:not-allowed}
input[type=text],input[type=password],input[type=number],input[type=search],input[type=date],input[type=email],input[type=tel],select,textarea{
  width:100%;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:9px 11px;min-width:0;transition:border-color .12s,box-shadow .12s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
input[type=checkbox]{accent-color:var(--accent)}
label.f{display:grid;gap:5px;font-size:.82rem;color:var(--muted);font-weight:600}
label.f small{font-weight:400}
.toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:16px}
.toolbar .grow{flex:1 1 240px;min-width:0}
.head{display:flex;align-items:end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.head h2 + .muted{margin-top:3px}
.chip{display:inline-block;font-size:.74rem;font-weight:600;padding:2px 9px;border-radius:99px;background:var(--surface-2);color:var(--muted);white-space:nowrap}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.bad{background:var(--danger-soft);color:var(--danger)}

/* ---------- vender ---------- */
.pos{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start}
#posSearch{padding:12px 14px;font-size:1rem;box-shadow:var(--shadow-sm)}
.cats{display:flex;gap:6px;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;scrollbar-width:thin}
.cats button{border:1px solid var(--line-2);background:var(--surface);border-radius:99px;padding:6px 14px;cursor:pointer;white-space:nowrap;font-size:.86rem;font-weight:500}
.cats button:hover{border-color:var(--accent)}
.cats button[aria-pressed="true"]{background:var(--side);color:#fff;border-color:var(--side)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.tile{display:flex;flex-direction:column;gap:8px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:14px;cursor:pointer;min-height:122px;box-shadow:var(--shadow-sm);transition:border-color .12s,box-shadow .12s,transform .08s}
.tile:hover{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.tile:active{transform:scale(.985)}
.tile .c{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-weight:600}
.tile .n{font-weight:600;line-height:1.3;flex:1}
.tile .row{display:flex;justify-content:space-between;align-items:center;gap:6px}
.tile .p{font-family:var(--f-display);font-weight:800;font-size:1.08rem;color:var(--fg);font-variant-numeric:tabular-nums}
.tile:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.tile:disabled:hover{border-color:var(--line)}
.empty{border:1.5px dashed var(--line-2);border-radius:var(--r);padding:32px 20px;text-align:center;color:var(--muted);background:var(--surface)}
.empty b{color:var(--fg);display:block;font-family:var(--f-display);font-size:1.08rem;margin-bottom:4px}

.cart{position:sticky;top:20px;background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column;max-height:calc(100vh - 40px);overflow:hidden}
.cart header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.lines{overflow-y:auto;padding:4px 18px;flex:1;min-height:80px}
.line{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:12px 0;border-bottom:1px solid var(--line)}
.line:last-child{border-bottom:0}
.line .nm{font-weight:600;overflow-wrap:anywhere}
.line .sub{font-family:var(--f-mono);font-size:.8rem;color:var(--muted)}
.line .amt{font-family:var(--f-mono);font-weight:600;text-align:right}
.qty{display:flex;align-items:center;gap:4px;justify-content:flex-end}
.qty button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line-2);background:var(--surface);cursor:pointer;font-weight:600;line-height:1}
.qty button:hover{background:var(--surface-2)}
.qty input{width:54px;text-align:center;padding:4px;font-family:var(--f-mono)}
.cart .foot{padding:14px 18px 18px;border-top:1px solid var(--line);display:grid;gap:12px;background:var(--surface-2)}
.tot{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;color:var(--muted)}
.tot .num{color:var(--fg)}
.tot.big{font-family:var(--f-display);font-size:1.15rem;font-weight:700;color:var(--fg);align-items:baseline;padding-top:4px;border-top:1px solid var(--line-2)}
.tot.big .num{font-family:var(--f-display);font-size:1.75rem;font-weight:800;letter-spacing:-.02em}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.seg{display:grid;grid-template-columns:repeat(3,1fr);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:3px;gap:3px}
.seg button{border:0;background:transparent;padding:8px 4px;cursor:pointer;font-size:.86rem;font-weight:600;border-radius:6px;color:var(--muted)}
.seg button+button{border-left:0}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-fg);box-shadow:var(--shadow-sm)}
.cambio{display:flex;justify-content:space-between;align-items:center;background:var(--ok-soft);color:var(--ok);border-radius:var(--r-sm);padding:9px 12px;font-weight:600}
.cambio.bad{background:var(--danger-soft);color:var(--danger)}
.pay{font-size:1.05rem;padding:14px;border-radius:10px;font-family:var(--f-display);font-weight:700;letter-spacing:.01em}
.mobilebar{display:none}

/* ---------- tablas y tarjetas ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow-sm);overflow:hidden}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap;background:var(--surface-2)}
td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
tbody tr:hover td{background:color-mix(in srgb,var(--surface-2) 55%,transparent)}
tr:last-child td{border-bottom:0}
td.r,th.r{text-align:right}
td.num{white-space:nowrap}
td.act{white-space:nowrap;text-align:right}
tr.anulada td{color:var(--muted);text-decoration:line-through}
tr.anulada td.act,tr.anulada td:nth-last-child(2){text-decoration:none}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0;box-shadow:var(--shadow-sm)}
.panel h3{margin-bottom:14px}
.panel[style*="padding:0"]{overflow:hidden}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:18px}
.kpi{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-sm)}
.kpi .l{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700}
.kpi .v{font-family:var(--f-display);font-size:1.6rem;font-weight:800;margin-top:4px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.kpi .h{font-size:.8rem;color:var(--muted)}
.rep-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:18px;margin-bottom:18px}
.bars{display:grid;gap:12px}
.bar{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;font-size:.88rem}
.bar .track{height:8px;background:var(--surface-2);border-radius:99px;overflow:hidden}
.bar .fill{height:100%;background:var(--accent);border-radius:99px}
.chart svg{width:100%;height:auto;display:block}
.chart text{font-family:var(--f-mono);font-size:10px;fill:var(--muted)}
.ranges{display:flex;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);padding:3px;gap:2px;flex-wrap:wrap}
.ranges button{border:0;background:transparent;border-radius:6px;padding:6px 12px;cursor:pointer;font-size:.85rem;font-weight:600;color:var(--muted)}
.ranges button[aria-pressed="true"]{background:var(--side);color:#fff}
.cierre{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px}
.cierre dl{display:grid;grid-template-columns:1fr auto;gap:10px 16px;margin:0;align-items:center}
.cierre dt{color:var(--muted)}
.cierre dd{margin:0;font-family:var(--f-mono);text-align:right;font-variant-numeric:tabular-nums}
.cierre dd.big{font-family:var(--f-display);font-size:1.25rem;font-weight:800}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.form-grid .full{grid-column:1/-1}
.perm-grid th:not(:first-child),.perm-grid td:not(:first-child){text-align:center}
.perm-grid td:first-child{min-width:240px}
.perm-grid input{width:18px;height:18px}
.stockmap{font-size:.76rem;color:var(--muted);font-family:var(--f-mono)}

/* ---------- diálogos, ticket, avisos ---------- */
dialog{border:1px solid var(--line);border-radius:16px;background:var(--surface);color:var(--fg);padding:0;width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 40px);box-shadow:0 24px 70px rgb(8 18 40 / .35)}
dialog::backdrop{background:rgb(8 18 40 / .55);backdrop-filter:blur(2px)}
dialog form,dialog .body{padding:22px;display:grid;gap:14px}
dialog .actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding-top:6px}
dialog h2{font-size:1.2rem}
dialog.wide{width:min(820px,calc(100vw - 32px))}
fieldset.opts{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px 12px;margin:0;display:grid;gap:8px}
fieldset.opts legend{font-size:.82rem;color:var(--muted);font-weight:600;padding:0 4px}
fieldset.opts label,label.chk{display:flex;gap:9px;align-items:flex-start;cursor:pointer}
fieldset.opts input,label.chk input{margin-top:3px;accent-color:var(--accent)}
input[type=file]{width:100%;font-size:.86rem;padding:7px;border:1px dashed var(--line-2);border-radius:var(--r-sm);background:var(--surface-2)}
.subtabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:-6px 0 22px;overflow-x:auto;scrollbar-width:none}
.subtabs a{display:flex;align-items:center;gap:8px;padding:10px 14px;color:var(--muted);text-decoration:none;font-weight:600;font-size:.92rem;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
.subtabs a:hover{color:var(--fg)}
.subtabs a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--accent)}
.subtabs .badge{margin-left:0}
.sol-list{display:grid;gap:12px}
.sol{background:var(--surface);border:1px solid var(--line);border-left:4px solid #f59e0b;border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-sm);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:center}
.sol h4{margin:0;font-family:var(--f-display);font-size:1.02rem}
.sol .meta{color:var(--muted);font-size:.86rem}
.sol .acts{display:flex;gap:8px;flex-wrap:wrap;grid-row:1 / span 3;grid-column:2}
.sol-status{border-radius:var(--r-sm);padding:12px 14px;background:var(--surface-2);font-weight:500}
.sol-status.ok{background:var(--ok-soft);color:var(--ok)}
.sol-status.bad{background:var(--danger-soft);color:var(--danger)}
.wa-box{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.btn.wa{background:#1fa855;border-color:#1fa855;color:#fff;text-decoration:none}
.btn.wa:hover{background:#178a45;border-color:#178a45}
.code-in{font-family:var(--f-mono);font-size:1.6rem;letter-spacing:.4em;text-align:center;padding:12px}
.code-big{font-family:var(--f-mono);font-size:2.6rem;font-weight:600;letter-spacing:.25em;text-align:center;padding:14px;border-radius:var(--r);background:var(--accent-soft);color:var(--accent)}
@media (max-width:640px){ .sol{grid-template-columns:1fr} .sol .acts{grid-row:auto;grid-column:auto} }
.cot-banner{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 18px;background:var(--accent-soft);color:var(--accent);font-size:.85rem;border-bottom:1px solid var(--line)}
.picker{position:relative}
.picker input{padding:11px 13px}
.sugs{position:absolute;left:0;right:0;top:calc(100% + 4px);background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-sm);box-shadow:var(--shadow);z-index:5;max-height:260px;overflow:auto}
.sugs button{display:flex;justify-content:space-between;gap:10px;width:100%;text-align:left;border:0;background:none;padding:9px 12px;cursor:pointer;border-bottom:1px solid var(--line)}
.sugs button:last-child{border-bottom:0}
.sugs button:hover,.sugs button.on{background:var(--accent-soft)}
.sugs small{color:var(--muted);font-family:var(--f-mono)}
#dItems input{width:96px;text-align:right;padding:5px 8px;font-family:var(--f-mono)}
.dv-info{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px 18px;font-size:.9rem}
.dv-info div span{display:block;font-size:.72rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.chip.in{background:var(--accent-soft);color:var(--accent)}
.imp-sum{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.imp-sum .chip{font-size:.8rem;padding:4px 11px}
.ticket{font-family:var(--f-mono);font-size:.83rem;background:var(--paper);border:1px solid var(--line);border-radius:8px;padding:18px 16px;line-height:1.5;max-height:55vh;overflow:auto;box-shadow:inset 0 0 0 4px var(--surface-2)}
.ticket .c{text-align:center}
.ticket .row{display:flex;justify-content:space-between;gap:10px}
.ticket hr{border:0;border-top:1px dashed var(--muted);margin:8px 0}
.ticket .big{font-weight:700;font-size:1rem}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(22px + env(safe-area-inset-bottom,0px));background:var(--side);color:#fff;padding:11px 18px;border-radius:10px;font-weight:500;z-index:50;box-shadow:var(--shadow);max-width:calc(100vw - 32px)}
.toast.bad{background:var(--danger)}

/* ---------- acceso ---------- */
.auth{min-height:100vh;display:grid;place-items:center;padding:24px max(16px,env(safe-area-inset-right,0px)) 24px max(16px,env(safe-area-inset-left,0px));
  background:radial-gradient(1200px 600px at 15% -10%,#1e3a7a 0%,transparent 60%),radial-gradient(900px 500px at 110% 110%,#173c9c 0%,transparent 55%),var(--side)}
.auth-card{width:min(420px,100%);background:var(--surface);border-radius:18px;box-shadow:0 30px 80px rgb(0 0 0 / .35);padding:32px;display:grid;gap:15px}
.auth-card h1{font-size:1.55rem;font-weight:800}
.auth-card .sysname b{color:var(--accent)}
.auth-card .err{background:var(--danger-soft);color:var(--danger);border-radius:8px;padding:9px 12px;font-size:.9rem}
.auth-card .btn{padding:12px;font-size:.95rem}

/* ---------- pantallas angostas: el menú lateral pasa arriba ---------- */
@media (max-width:1100px){ .pos{grid-template-columns:minmax(0,1fr) 360px} }
@media (max-width:900px){
  #scr-app{display:block}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:12px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
  .top{position:sticky;top:0;z-index:20}
  .brand{padding:0;flex:1}
  .brand small{display:none}
  nav.tabs{order:3;flex-direction:row;width:100%;overflow-x:auto;scrollbar-width:none;flex:none}
  nav.tabs a{padding:7px 11px;white-space:nowrap}
  nav.tabs a[aria-current="page"]{box-shadow:inset 0 -2px 0 #6d95ff}
  .who{border:0;padding:0;display:flex;align-items:center;gap:8px}
  .sucbox span,.un{display:none}
  .userbtn{width:auto;padding:4px}
  .menu-pop{left:auto;right:0;bottom:auto;top:calc(100% + 8px);width:240px}
  .wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  main{padding-block:18px 96px}
  .pos{grid-template-columns:1fr}
  .cart{position:static;max-height:none}
  .rep-grid,.cierre{grid-template-columns:1fr}
  .mobilebar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:15;background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -6px 20px rgb(15 27 45 / .08);
    padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));gap:10px;align-items:center;justify-content:space-between}
}
@media (max-width:520px){ .form-grid{grid-template-columns:1fr} .bar{grid-template-columns:84px 1fr auto} .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- impresión térmica ---------- */
#print-area{display:none}
@media print{
  :root,html,body{background:#fff!important;color:#000!important;padding:0!important;margin:0!important}
  body > *:not(#print-area){display:none!important}
  #print-area{display:block!important}
  .tk{width:var(--tk-w,72mm);font-family:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;font-size:var(--tk-fs,11.5px);line-height:1.35;color:#000;padding:2mm 0 6mm;break-after:page}
  .tk:last-child{break-after:auto}
  .tk .c{text-align:center}
  .tk .b{font-weight:700}
  .tk .xl{font-size:1.25em;font-weight:700}
  .tk .row{display:flex;justify-content:space-between;gap:6px}
  .tk .row span:last-child{white-space:nowrap}
  .tk hr{border:0;border-top:1px dashed #000;margin:4px 0}
}
a.btn{text-decoration:none;color:inherit}a.btn.primary{color:var(--accent-fg)}a.btn.wa{color:#fff}

/* ---------- Punto de venta más limpio ---------- */
.pos{grid-template-columns:minmax(0,1fr) 380px;gap:28px}
.pos-left{min-width:0;display:grid;gap:14px;align-content:start}
.searchbar{position:relative}
.searchbar svg{position:absolute;left:14px;top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;pointer-events:none}
.searchbar input{padding:13px 14px 13px 42px;font-size:1rem;border-radius:12px;box-shadow:var(--shadow-sm)}
.cats{margin-bottom:0}
.grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.tile{position:relative;min-height:104px;padding:14px;gap:10px;box-shadow:none;border-color:var(--line)}
.tile .n{font-size:.94rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tile .p{font-size:1.05rem}
.tile .stk{font-size:.74rem;color:var(--muted)}
.tile.in{border-color:var(--accent);background:color-mix(in srgb,var(--accent-soft) 45%,var(--surface))}
.qbadge{position:absolute;top:-7px;right:-7px;min-width:24px;height:24px;padding:0 7px;border-radius:99px;background:var(--accent);color:var(--accent-fg);font-weight:700;font-size:.78rem;display:grid;place-items:center;box-shadow:0 0 0 3px var(--bg)}
.cart header{padding:16px 18px 12px}
.cart header small{display:block;font-size:.8rem;margin-top:1px}
.cart-cli{display:flex;align-items:center;gap:10px;padding:10px 18px;border-bottom:1px solid var(--line)}
.cart-cli label{font-size:.8rem;color:var(--muted);font-weight:600}
.cart-cli select{border:0;background:var(--surface-2);padding:7px 10px;font-weight:500;font-size:.9rem;flex:1}
.lines{padding:2px 12px 2px 18px}
.line{grid-template-columns:minmax(0,1fr) auto auto 26px;align-items:center;gap:10px;padding:11px 0}
.line .nm{font-size:.92rem;line-height:1.3}
.line .sub{font-size:.76rem}
.line .amt{min-width:76px;font-size:.92rem}
.line .qty{gap:0;border:1px solid var(--line-2);border-radius:8px;overflow:hidden}
.line .qty button{width:26px;height:28px;border:0;border-radius:0;background:var(--surface-2);font-size:.95rem}
.line .qty input{width:36px;border:0;border-radius:0;padding:3px 0;font-size:.88rem;box-shadow:none}
.line .x{width:26px;height:26px;border:0;background:transparent;border-radius:6px;color:var(--muted);font-size:1.15rem;line-height:1;cursor:pointer}
.line .x:hover{background:var(--danger-soft);color:var(--danger)}
.cart-empty{display:grid;justify-items:center;gap:4px;text-align:center;padding:42px 12px;color:var(--muted)}
.cart-empty svg{width:34px;height:34px;fill:none;stroke:var(--line-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:4px}
.cart-empty b{color:var(--fg);font-family:var(--f-display)}
.cart .foot{gap:8px;padding:14px 18px 16px}
.desc-row{align-items:center}
.desc-in{display:inline-flex;align-items:center;gap:4px;font-family:var(--f-mono);color:var(--fg)}
.desc-in input{width:92px;text-align:right;padding:4px 8px;font-family:var(--f-mono);font-size:.88rem}
.tot.big{margin-top:4px;padding-top:10px}
.pay{margin-top:6px}
.hint{font-size:.74rem;text-align:center}
.pago-total{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px;border-radius:var(--r);background:var(--side);color:#fff}
.pago-total span{font-size:.85rem;color:var(--side-fg)}
.pago-total b{font-family:var(--f-display);font-size:2rem;font-weight:800;letter-spacing:-.02em}
.big-in{font-size:1.5rem!important;font-family:var(--f-mono);text-align:right;padding:12px 14px!important}
.quick{display:flex;gap:8px;flex-wrap:wrap}
.quick .btn{flex:1 1 0;min-width:80px}
#dlgPago .cambio{padding:12px 14px;font-size:1.1rem}
#dlgPago .cambio .num{font-size:1.35rem;font-weight:700}
#dlgPago .actions .btn{padding:11px 18px}
@media (max-width:1100px){ .pos{grid-template-columns:minmax(0,1fr) 340px} }
@media (max-width:900px){ .pos{grid-template-columns:1fr} .hint{display:none} }
.searchbar #posSearch{padding:13px 14px 13px 42px}

/* ---------- descuentos y crédito ---------- */
.unit-tg{display:inline-flex;border:1px solid var(--line-2);border-radius:7px;overflow:hidden;margin-right:4px}
.unit-tg button{border:0;background:var(--surface);padding:3px 9px;font-family:var(--f-mono);font-size:.82rem;cursor:pointer;color:var(--muted)}
.unit-tg button[aria-pressed="true"]{background:var(--side);color:#fff}
.desc-in input{width:82px}
.desc-mot input{padding:7px 10px;font-size:.86rem}
#dlgPago .seg{grid-template-columns:repeat(4,1fr)}
#dlgPago .seg:has(#mCredito[hidden]){grid-template-columns:repeat(3,1fr)}
.credito-box,.aut-box{display:grid;gap:10px;border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;background:var(--surface-2)}
.cr-info{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;font-size:.84rem}
.cr-info div span{display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.cr-info b{font-family:var(--f-mono)}
.cr-res{display:flex;justify-content:space-between;font-weight:600;padding:8px 12px;border-radius:var(--r-sm);background:var(--accent-soft);color:var(--accent)}
.aut-box{border-color:#f5b54a;background:var(--warn-soft)}
.aut-why{color:var(--warn);font-weight:600;font-size:.9rem;display:grid;gap:3px}
.aut-box .code-in{font-size:1.3rem;padding:9px}
.sol.v{border-left-color:var(--accent)}
@media (max-width:520px){ .cr-info{grid-template-columns:repeat(2,1fr)} }

/* ---------- productos ---------- */
.np-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:18px;align-items:start}
.inline{display:flex;gap:6px}
.inline input{flex:1;min-width:0}
.np-margen{display:flex;gap:14px;flex-wrap:wrap;font-size:.88rem;color:var(--muted)}
.np-margen b{font-family:var(--f-mono);color:var(--fg)}
.np-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}
#npSucs input{width:100px;text-align:right;padding:6px 8px;font-family:var(--f-mono)}
th.suc-col,td.suc-col{text-align:right;white-space:nowrap}
td .min{font-size:.72rem;color:var(--muted);display:block}
@media (max-width:900px){ .np-grid{grid-template-columns:1fr} }

/* ---------- auditoría */
[id^="v-aud-"] .rep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
[id^="v-aud-"] .panel table td{vertical-align:top}
.aud-bar{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;box-shadow:var(--shadow-sm)}
.a-neg{color:var(--danger);font-weight:600}
.a-pos{color:var(--ok);font-weight:600}
tr.a-void td{color:var(--muted);text-decoration:line-through}
.nowrap{white-space:nowrap}
.kpi.bad .v{color:var(--danger)} .kpi.warn .v{color:var(--warn)}
.chg{font-size:.82rem;line-height:1.45;white-space:nowrap}
.chg s{color:var(--muted)} .chg span{font-weight:600}
.aud-alertas{display:grid;gap:8px}
.aud-al{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-sm);text-decoration:none;color:var(--fg);border:1px solid var(--line);background:var(--surface)}
.aud-al:hover{border-color:var(--line-2)}
.aud-al .dot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--muted)}
.aud-al.alta{background:var(--danger-soft);border-color:transparent} .aud-al.alta .dot{background:var(--danger)}
.aud-al.media{background:var(--warn-soft);border-color:transparent} .aud-al.media .dot{background:var(--warn)}
.aud-al .go{margin-left:auto;font-weight:600;font-size:.85rem;color:var(--muted);white-space:nowrap}
.aud-ok{background:var(--ok-soft);color:var(--ok);border-radius:var(--r-sm);padding:14px;font-weight:600}
@media (max-width:900px){ [id^="v-aud-"] .rep-grid{grid-template-columns:1fr} }
.stack-aud{display:grid;gap:16px;margin-bottom:16px}

/* ---------- conciliación de inventario */
.k-steps{list-style:none;counter-reset:k;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;margin:0 0 18px;padding:0}
.k-steps li{counter-increment:k;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px 12px 48px;position:relative;font-size:.88rem}
.k-steps li::before{content:counter(k);position:absolute;left:14px;top:12px;width:24px;height:24px;border-radius:50%;background:var(--side);color:#fff;display:grid;place-items:center;font-weight:700;font-size:.8rem}
.k-steps b{display:block;margin-bottom:2px} .k-steps span{color:var(--muted)}
.k-alert{display:grid;gap:8px;margin-bottom:16px}
.k-al{border-radius:var(--r-sm);padding:12px 14px;font-weight:500;background:var(--surface);border:1px solid var(--line)}
.k-al.warn{background:var(--warn-soft);color:var(--warn);border-color:transparent}
.k-al.ok{background:var(--ok-soft);color:var(--ok);border-color:transparent}
.k-al.bad{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.k-tip{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-sm);padding:10px 12px;font-size:.88rem;margin-top:4px}
.k-bar{display:block;height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin-top:6px}
.k-bar span{display:block;height:100%;background:var(--ok);border-radius:99px}
.k-table input.k-in{width:96px;margin-left:auto;display:block;text-align:right;padding:6px 8px;font-variant-numeric:tabular-nums}
.k-in.bad{border-color:var(--danger);outline-color:var(--danger)}
.k-table tr.k-f td{background:color-mix(in srgb,var(--danger-soft) 55%,transparent)}
.k-table tr.k-s td{background:color-mix(in srgb,var(--ok-soft) 55%,transparent)}
@keyframes kflash{from{background:var(--warn-soft)}to{background:transparent}}
.k-table tr.k-flash td{animation:kflash 1.2s ease-out}
tr.clk{cursor:pointer} tr.clk:hover td{background:var(--bg)}
/* ---------- roles por menú y submenú */
.perm-grid tr.perm-grp td{background:var(--bg);border-top:2px solid var(--line-2)}
.perm-grid tr.perm-grp td:first-child b{font-family:var(--f-display);font-size:.98rem}
.perm-tg{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:.9rem;padding:0 4px}
.perm-grid tr.perm-it td:first-child{padding-left:34px}
.perm-sub{display:block;font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent,var(--side));margin:4px 0 2px}
.perm-lb{display:block;font-size:.9rem}

/* ---------- conciliación: resumen tipo tablero */
:root{--k-ok:#17803d;--k-ok-bg:#e1f3e7;--k-tol:#8a6a00;--k-tol-bg:#fbf0c9;--k-falt:#b93815;--k-falt-bg:#fde4da;--k-sobr:#1d4fb8;--k-sobr-bg:#e0e9fb;--k-pend:#5d6e72;--k-pend-bg:#e8eceb}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--k-ok:#6fd195;--k-ok-bg:#16301f;--k-tol:#e6c552;--k-tol-bg:#332b0c;--k-falt:#ff9b7a;--k-falt-bg:#3a1c12;--k-sobr:#8fb1ff;--k-sobr-bg:#16264a;--k-pend:#97a9ad;--k-pend-bg:#223033}}
:root[data-theme="dark"]{--k-ok:#6fd195;--k-ok-bg:#16301f;--k-tol:#e6c552;--k-tol-bg:#332b0c;--k-falt:#ff9b7a;--k-falt-bg:#3a1c12;--k-sobr:#8fb1ff;--k-sobr-bg:#16264a;--k-pend:#97a9ad;--k-pend-bg:#223033}
.k-hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;margin-bottom:16px;box-shadow:var(--shadow-sm)}
.k-hero-top{display:flex;flex-wrap:wrap;gap:18px 36px;align-items:flex-end;justify-content:space-between}
.k-big{font-family:var(--f-display);font-size:3rem;line-height:1;font-weight:800;letter-spacing:-.03em}
.k-big small{font-family:var(--f-body,inherit);font-size:1rem;font-weight:500;color:var(--muted);margin-left:8px;letter-spacing:0}
.k-stats{display:flex;flex-wrap:wrap;gap:8px 32px}
.k-stat b{display:block;font-size:1.25rem;font-variant-numeric:tabular-nums} .k-stat b small{font-size:.8rem;font-weight:500;color:var(--muted)}
.k-stat span{color:var(--muted);font-size:.85rem}
.k-sbar{display:flex;height:14px;border-radius:7px;overflow:hidden;background:var(--k-pend-bg);margin-top:18px}
.k-sbar i{display:block;height:100%}
.k-bg-ok{background:var(--k-ok)}.k-bg-tol{background:var(--k-tol)}.k-bg-falt{background:var(--k-falt)}.k-bg-sobr{background:var(--k-sobr)}.k-bg-pend{background:var(--k-pend-bg)}
.k-legend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px}
.k-lg{border:0;background:transparent;padding:2px 4px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-size:.85rem;border-radius:6px}
.k-lg:hover{background:var(--bg)} .k-lg::before{content:"";width:10px;height:10px;border-radius:3px;background:currentColor} .k-lg span{color:var(--muted)}
.k-c-ok{color:var(--k-ok)}.k-c-tol{color:var(--k-tol)}.k-c-falt{color:var(--k-falt)}.k-c-sobr{color:var(--k-sobr)}.k-c-pend{color:var(--k-pend)}
.k-badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.78rem;font-weight:600;white-space:nowrap}
.k-b-ok{background:var(--k-ok-bg);color:var(--k-ok)}.k-b-tol{background:var(--k-tol-bg);color:var(--k-tol)}.k-b-falt{background:var(--k-falt-bg);color:var(--k-falt)}.k-b-sobr{background:var(--k-sobr-bg);color:var(--k-sobr)}.k-b-pend{background:var(--k-pend-bg);color:var(--k-pend)}
.k-table tr.k-f td{background:transparent}.k-table tr.k-s td{background:transparent}
.k-causa{padding:4px 6px;font-size:.85rem;max-width:180px}
.k-foot{display:flex;flex-wrap:wrap;gap:18px;justify-content:flex-end;margin-top:12px;font-size:.92rem}
.k-foot b{margin-left:4px;font-variant-numeric:tabular-nums}
.k-paste{margin-bottom:16px} .k-paste summary{cursor:pointer;color:var(--accent);font-weight:600}
.k-paste textarea{width:100%;margin:10px 0;font-family:var(--f-mono);font-size:.85rem}
@media (max-width:560px){.k-big{font-size:2.4rem}}
.k-table{min-width:1080px}
.k-table td,.k-table th{white-space:nowrap}
.k-table td:nth-last-child(n+2) .k-causa{min-width:175px}
.k-table select.k-causa{min-width:175px;max-width:220px}

/* ---------- compras */
.cp-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;align-items:start}
.cp-main{display:grid;gap:14px;min-width:0}
.cp-side{position:sticky;top:16px;display:grid;gap:12px}
.cp-side h3{margin:0}
.cp-tot{display:flex;justify-content:space-between;align-items:baseline;color:var(--muted)}
.cp-tot b{color:var(--fg);font-variant-numeric:tabular-nums}
.cp-tot.big{border-top:1px solid var(--line);padding-top:12px}
.cp-tot.big b{font-family:var(--f-display);font-size:1.8rem}
.cp-warn{background:var(--warn-soft);color:var(--warn);border-radius:var(--r-sm);padding:10px 12px;font-size:.85rem;display:grid;gap:6px}
.cp-table input[type=number]{width:96px;text-align:right;margin-left:auto;display:block}
.cp-table td{vertical-align:middle}
.cp-var{font-size:.75rem;margin-top:2px;min-height:1em}
.cl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){.cp-grid,.cl-grid{grid-template-columns:1fr}.cp-side{position:static}}
.cp-grid{grid-template-columns:minmax(0,1fr) 290px}
.cp-table th,.cp-table td{padding-left:10px;padding-right:10px}
.cp-table th{white-space:nowrap;font-size:.72rem}
.cp-table td:first-child{min-width:170px}
.cp-table input[type=number]{width:82px}

/* ---------- traslados */
.tr-table{min-width:760px}
.tr-resolver{display:flex;gap:14px;align-items:end;flex-wrap:wrap;margin-top:16px}
.tr-resolver .f{flex:1 1 360px}
.tr-table select.k-causa{min-width:250px;max-width:300px}
.cp-tot.big{flex-wrap:wrap;gap:4px 10px}

/* ---------- menú lateral compacto (computadora y teléfono): solo íconos; se despliega con el cursor o al tocar ---------- */
.suc-mini{display:none}
:root{--side-mini:72px;--side-open:var(--side-w)}
#scr-app{display:grid;grid-template-columns:var(--side-mini) minmax(0,1fr)}
#scr-app > .top{position:relative;top:auto;z-index:30}
.side{position:sticky;top:0;height:100vh;height:100dvh;width:var(--side-mini);background:var(--side);overflow-x:hidden;flex-direction:column;flex-wrap:nowrap;align-items:stretch;
  padding:22px 12px 16px;transition:width .2s ease,box-shadow .2s ease}
.brand{padding:0 6px;flex:none}
.brand small{display:block}
.brand-text,nav.tabs a span:not(.badge),.un,.sucbox{opacity:0;transition:opacity .12s ease;white-space:nowrap}
nav.tabs{order:0;flex-direction:column;width:auto;overflow:visible;flex:1}
nav.tabs a{position:relative;padding:10px 15px;white-space:nowrap}
nav.tabs a[aria-current="page"]{box-shadow:inset 3px 0 0 #6d95ff}
nav.tabs a .badge{position:absolute;left:30px;top:3px;margin:0;font-size:.62rem;padding:0 5px;line-height:1.55}
.who{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;border-top:1px solid var(--side-line);padding-top:14px}
.sucbox span{display:block} .un{display:grid}
.userbtn{width:100%;padding:7px}
.suc-mini{display:block;align-self:center;font-family:var(--f-mono);font-size:.7rem;font-weight:600;color:#fff;background:var(--side-2);border:1px solid var(--side-line);border-radius:7px;padding:3px 0;text-align:center;width:44px;margin:0 auto}
.suc-mini[hidden]{display:none}
.sucbox{height:0;overflow:hidden;margin-top:-10px}
.menu-pop{left:0;right:auto;top:auto;bottom:calc(100% + 8px);width:220px}
/* desplegado: al tocar o con teclado (y con el cursor en equipos con mouse) */
  .side.open,.side:has(:focus-visible),.side:has(select:focus),.side:has(.menu-pop:not([hidden])){width:var(--side-open);box-shadow:12px 0 32px rgb(5 12 28 / .28)}
  .side.open :is(.brand-text,nav.tabs a span,.un,.sucbox),.side:has(:focus-visible) :is(.brand-text,nav.tabs a span,.un,.sucbox),.side:has(select:focus) :is(.brand-text,nav.tabs a span,.un,.sucbox),.side:has(.menu-pop:not([hidden])) :is(.brand-text,nav.tabs a span,.un,.sucbox){opacity:1;transition-delay:.06s}
  .side.open nav.tabs a .badge,.side:has(:focus-visible) nav.tabs a .badge,.side:has(select:focus) nav.tabs a .badge,.side:has(.menu-pop:not([hidden])) nav.tabs a .badge{position:static;margin-left:auto;font-size:.7rem;padding:0 7px;line-height:1.7}
  .side.open .suc-mini,.side:has(:focus-visible) .suc-mini,.side:has(select:focus) .suc-mini,.side:has(.menu-pop:not([hidden])) .suc-mini{display:none}
  .side.open .sucbox,.side:has(:focus-visible) .sucbox,.side:has(select:focus) .sucbox,.side:has(.menu-pop:not([hidden])) .sucbox{height:auto;overflow:visible;margin-top:0}
@media (hover:hover){
  .side:hover{width:var(--side-open);box-shadow:12px 0 32px rgb(5 12 28 / .28)}
  .side:hover :is(.brand-text,nav.tabs a span,.un,.sucbox){opacity:1;transition-delay:.06s}
  .side:hover nav.tabs a .badge{position:static;margin-left:auto;font-size:.7rem;padding:0 7px;line-height:1.7}
  .side:hover .suc-mini{display:none}
  .side:hover .sucbox{height:auto;overflow:visible;margin-top:0}
}
@media (prefers-reduced-motion:reduce){ .side{transition:none} }
/* teléfono: riel más angosto; el menú abierto ocupa como máximo 80 % de la pantalla */
@media (max-width:900px){
  :root{--side-mini:56px;--side-open:min(248px,80vw)}
  .side{padding:14px 7px calc(12px + env(safe-area-inset-bottom,0px)) calc(7px + env(safe-area-inset-left,0px));gap:16px}
  .brand{padding:0 3px}
  nav.tabs a{padding:10px 12px}
  nav.tabs a .badge{left:24px}
  .userbtn{padding:6px 4px}
  .suc-mini{width:40px;font-size:.66rem}
  .wrap{padding-left:12px;padding-right:max(12px,env(safe-area-inset-right,0px))}
  .mobilebar{left:var(--side-mini)}
}
.danger-zone{border-color:color-mix(in srgb,var(--danger) 35%,var(--line))}
.danger-zone h3{color:var(--danger);margin-bottom:6px}
.danger-zone p{margin:0 0 14px}

/* ---------- respaldos */
.bk-warn{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--warn-soft);color:var(--warn);font-weight:600;font-size:.9rem;padding:10px 24px;border-bottom:1px solid var(--line)}
.bk-warn .btn{margin-left:auto}
#scr-app > .bk-warn{grid-column:2}
.bk-card{display:grid;gap:12px;justify-items:start}
.bk-estado{display:grid;gap:2px} .bk-estado span{color:var(--muted);font-size:.88rem}
@media (max-width:900px){ .cp-grid,.cl-grid{grid-template-columns:1fr} .cp-side{position:static} }
/* en pantallas angostas ninguna columna debe estirar la página: las tablas se desplazan dentro de su recuadro */
.cierre > *,.rep-grid > *,.cp-grid > *,.np-grid > *,.pos > *,.form-grid > *{min-width:0}
.tw{max-width:100%}
@media (max-width:900px){ .rep-grid,.cierre,.cp-grid,.cl-grid,[id^="v-aud-"] .rep-grid{grid-template-columns:minmax(0,1fr)} }
.cierre dl{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:520px){ .cierre dl{gap:8px 10px} .cierre dd input{width:100px!important} .panel{padding:14px} }

/* ---------- teléfono: más espacio útil y textos a la medida ---------- */
@media (max-width:600px){
  .wrap{padding-left:10px;padding-right:max(10px,env(safe-area-inset-right,0px))}
  main{padding-block:12px 96px}
  h2{font-size:1.2rem} h3{font-size:.95rem}
  .head{margin-bottom:12px;gap:10px}
  .head .muted,.head + .muted{font-size:.84rem;line-height:1.4}
  .subtabs{margin:0 0 14px}
  .subtabs a{padding:9px 10px;font-size:.86rem}
  th{padding:9px 10px;font-size:.66rem} td{padding:9px 10px;font-size:.88rem}
  td .empty,.tw .empty{position:sticky;left:0;max-width:calc(100vw - 90px);padding:22px 10px}
  .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .kpi{padding:12px}
  .kpi .v{font-size:1.25rem}
  .kpi .h{font-size:.74rem}
  .panel{padding:14px}
  .toolbar{gap:8px}
  .toolbar .f{flex:1 1 130px}
  .toolbar .f select,.toolbar .f input{width:100%}
  .ranges button{padding:6px 9px}
  input,select,textarea{font-size:16px} /* evita el zoom automático del teléfono al escribir */
  .bk-warn{padding:8px 12px;font-size:.8rem;gap:8px}
  .bk-warn .btn{padding:5px 9px;font-size:.78rem}
  .k-hero,.cp-side{padding:14px}
  .k-big{font-size:2rem}
  dialog{width:calc(100vw - 20px);max-width:calc(100vw - 20px)}
}
@media (max-width:600px){ .k-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} .k-steps li{padding:10px 10px 10px 40px;font-size:.82rem} .k-steps li::before{left:10px;top:10px;width:22px;height:22px} .k-steps span{display:none} }
/* margen oculto salvo que se active "Ver margen" */
body:not(.ver-mg) .col-mg,body:not(.ver-mg) .np-margen{display:none}
.mg-chk{font-size:.82rem;color:var(--muted);align-self:end;white-space:nowrap}

/* ---------- personalización: logo y fondo */
.login-logo{display:block;max-width:180px;max-height:96px;object-fit:contain}
.login-bienv{font-weight:600;color:var(--fg);font-size:1rem;line-height:1.35;margin-top:-6px}
.auth.con-fondo{background-size:cover;background-position:center}
.brand-logo{flex:none;width:36px;height:36px;border-radius:10px;object-fit:contain;background:#fff;padding:3px}
.tk .tk-logo{max-width:60%;max-height:22mm;object-fit:contain;filter:grayscale(1);margin-bottom:2mm}
.pz-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pz-grid .full{grid-column:1 / -1}
.pz-img{display:grid;gap:8px;align-content:start}
.pz-lbl{font-size:.82rem;font-weight:600;color:var(--muted);display:block;margin-bottom:6px}
.pz-prev{height:120px;border:1.5px dashed var(--line-2);border-radius:var(--r-sm);display:grid;place-items:center;overflow:hidden;background:var(--surface-2)}
.pz-prev img{max-width:100%;max-height:100%;object-fit:contain}
.pz-fondo img{width:100%;height:100%;object-fit:cover}
.pz-acts{display:flex;gap:8px}
.pz-mini{height:190px;border-radius:var(--r-sm);background:linear-gradient(145deg,#13254a,#0d1b33);background-size:cover;background-position:center;display:grid;place-items:center}
.pz-card{width:min(220px,80%);background:var(--surface);border-radius:12px;padding:14px;display:grid;gap:6px;box-shadow:0 12px 30px rgb(0 0 0 / .3);font-size:.78rem}
.pz-card img{max-width:90px;max-height:44px;object-fit:contain}
.pz-card .logo{width:30px;height:30px}
.pz-card .sysname{font-size:.95rem;font-family:var(--f-display)} .pz-card .sysname b{color:var(--accent)}
.pz-card i{display:block;height:16px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line)}
.pz-card em{display:block;height:18px;border-radius:5px;background:var(--accent)}
@media (max-width:600px){ .pz-grid{grid-template-columns:minmax(0,1fr)} }
.pz-mini{height:auto;min-height:200px;padding:16px 0}

/* ---------- rotación */
.ro-kpis .kpi .v{font-size:1.15rem;line-height:1.25;overflow-wrap:anywhere}
.ro-table{min-width:980px}
.ro-table td:first-child{min-width:190px}

/* ---------- productos nuevos y modificados */
.pc-table{min-width:900px}
.pc-table td:nth-child(2){min-width:190px}
.pc-det{font-size:.88rem;line-height:1.5}
.pc-det s{text-decoration:line-through}
.pc-pct{font-size:.8rem;margin-left:4px;font-weight:600}
.pc-pct{color:var(--muted, #64748b)}
.pc-link{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--accent);cursor:pointer;text-align:left}
.pc-link:hover{text-decoration:underline}
button.kpi.pc-kpi{text-align:left;font:inherit;color:inherit;cursor:pointer}
button.kpi.pc-kpi.on{outline:2px solid var(--accent);outline-offset:-2px}