:root{
  --bg:#F3F5F9; --card:#FFFFFF; --ink:#111827; --muted:#6B7280; --line:#E5E7EB; --thead:#F3F4F6;
  --side:#0F1B33; --side2:#16264A; --sideText:#C9D2E3; --active:#2F5FD0;
  --blue:#2F6BEA; --blueBg:#EEF4FF; --blueSoft:#DCE7FD;
  --green:#16A34A; --greenBg:#EEFAF2; --greenSoft:#D3F2DE;
  --amber:#F5B400; --amberBg:#FFF8E8; --amberSoft:#FDEBC0;
  --red:#E03B3B; --redBg:#FFF1F1; --redSoft:#FBD9D9;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
html,body{height:100%}
html{color-scheme:light only}
select,option,input,textarea{color-scheme:light;color:var(--ink);background-color:#fff}
select{appearance:none;-webkit-appearance:none;padding-right:34px!important;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
option{color:#111827;background:#fff}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--ink);font-size:15px}
button,input,select{font:inherit}
button{color:inherit}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
svg{flex-shrink:0}

.app{display:grid;grid-template-columns:256px 1fr;min-height:100%}

/* Sidebar */
aside{grid-column:1;grid-row:1;background:linear-gradient(180deg,var(--side),#0B1529);color:var(--sideText);padding:18px 16px;position:sticky;top:0;height:100vh;height:100dvh;overflow-y:auto}
.logo{display:flex;align-items:center;gap:10px;padding:0 6px 28px;color:#fff;font-weight:700;font-size:24px;letter-spacing:-.3px}
.logo span{color:#4F8BFF}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
nav a{display:flex;align-items:center;gap:16px;padding:13px 16px;border-radius:8px;color:var(--sideText);text-decoration:none;font-size:16px}
nav a:hover{background:var(--side2);color:#fff}
nav a.active{background:var(--active);color:#fff;font-weight:500}

/* Main */
main{grid-column:2;grid-row:1;min-width:0;display:flex;flex-direction:column}
.scrim{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:15}
.topbar{display:flex;align-items:center;gap:16px;background:var(--card);border-bottom:1px solid var(--line);padding:14px 28px;position:sticky;top:0;z-index:5}
.menuBtn{display:none;background:none;border:0;padding:6px;cursor:pointer}
.search{flex:0 1 468px;display:flex;align-items:center;gap:10px;border:1px solid var(--line);background:var(--bg);border-radius:8px;padding:9px 14px;color:var(--muted)}
.search input{border:0;outline:0;background:transparent!important;width:100%;font-size:15px}
.search:focus-within{border-color:var(--blue)}
.spacer{flex:1}
.bell{position:relative;background:none;border:0;cursor:pointer;padding:6px;color:var(--muted)}
.bell i{position:absolute;top:5px;right:6px;width:8px;height:8px;background:var(--red);border-radius:50%;border:2px solid var(--card)}
[hidden]{display:none!important}
.bell-wrap{position:relative}
.bell-pop{position:absolute;right:0;top:calc(100% + 10px);width:min(360px,calc(100vw - 32px));max-height:min(420px,70vh);overflow:auto;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(15,27,51,.1);z-index:6}
.bell-h{font-weight:600;padding:12px 14px;border-bottom:1px solid var(--line)}
.bell-pop ul{list-style:none;margin:0;padding:0}
.bell-pop li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.bell-pop li:last-child{border-bottom:0}
.bell-pop li.none{color:var(--muted)}
.bell-pop .bn{flex:1;min-width:0}
.bell-pop .bn small{display:block;color:var(--muted);font-size:12.5px}
.bell-pop .btn-repo{margin:0}
.user{display:flex;align-items:center;gap:12px;background:none;border:0;cursor:pointer;padding:0;text-align:left}
.avatar{width:42px;height:42px;border-radius:50%;background:#1F2937;display:grid;place-items:center;overflow:hidden}
.user b{display:block;font-weight:600;font-size:15px}
.user small{color:var(--muted);font-size:13px}

.content{padding:24px 28px 36px;display:flex;flex-direction:column;gap:18px}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:12px}
.head h1{margin:0;font-size:30px;font-weight:700;letter-spacing:-.4px}
.head p{margin:4px 0 0;color:var(--muted);font-size:16px}
.date{display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:11px 16px;font-size:14px;color:var(--ink)}

/* KPI cards */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kpi{display:flex;gap:18px;border-radius:10px;padding:18px 20px;border:1px solid var(--line)}
.kpi .ic{width:70px;height:70px;border-radius:50%;display:grid;place-items:center}
.kpi .t{font-size:15px}
.kpi .v{font-size:34px;font-weight:700;margin:4px 0 6px;letter-spacing:-.5px}
.kpi .d{font-weight:600;font-size:15px;display:flex;align-items:center;gap:4px}
.kpi .s{color:var(--muted);font-size:14px;margin-top:2px}
.k-blue{background:var(--blueBg);border-color:var(--blueSoft)} .k-blue .ic{background:var(--blueSoft)}
.k-green{background:var(--greenBg);border-color:var(--greenSoft)} .k-green .ic{background:var(--greenSoft)}
.k-amber{background:var(--amberBg);border-color:var(--amberSoft)} .k-amber .ic{background:var(--amberSoft)}
.k-red{background:var(--redBg);border-color:var(--redSoft)} .k-red .ic{background:var(--redSoft)}
.up{color:var(--green)} .upbad{color:var(--red)}

/* Tables */
.tables{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px 22px}
.card .ch{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.card h2{margin:0;font-size:20px;font-weight:600;letter-spacing:-.2px}
.link{background:none;border:0;color:var(--blue);cursor:pointer;font-size:15px;padding:0}
.link:hover{text-decoration:underline}
.tw{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:520px}
th{background:var(--thead);color:var(--muted);font-weight:500;text-align:left;padding:10px 10px;white-space:nowrap}
td{padding:11px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.pill{display:inline-block;padding:4px 10px;border-radius:6px;font-size:13.5px;font-weight:500}
.p-red{background:var(--redBg);color:var(--red);border:1px solid var(--redSoft)}
.p-green{background:var(--greenBg);color:var(--green);border:1px solid var(--greenSoft)}
.red{color:var(--red)}
.p-amber{background:var(--amberBg);color:#B7791F;border:1px solid var(--amberSoft)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.toolbar select,.toolbar input{border:1px solid var(--line);background-color:#fff;border-radius:8px;padding:9px 12px;font-size:14.5px}
.toolbar input{flex:1 1 240px;min-width:0}
.toolbar select:focus,.toolbar input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blueSoft)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 14px;cursor:pointer;font-size:14px}
.chip[aria-pressed="true"]{background:var(--active);border-color:var(--active);color:#fff}
th.sort{cursor:pointer;user-select:none}
th.sort:hover{color:var(--ink)}
th[aria-sort="ascending"]::after{content:" ▲";font-size:10px}
th[aria-sort="descending"]::after{content:" ▼";font-size:10px}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums}
.stk{font-weight:600}
.cnt{color:var(--muted);font-size:14px}
.lbl{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--muted);font-weight:500}
.pager-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-top:14px}
.pager{display:flex;flex-wrap:wrap;gap:6px}
.pager button{min-width:38px;height:38px;padding:0 12px;border:1px solid var(--line);background:#fff;border-radius:8px;cursor:pointer;font-size:14px}
.pager button:hover:not(:disabled){border-color:var(--blue);color:var(--blue)}
.pager button[aria-current="page"]{background:var(--active);border-color:var(--active);color:#fff;font-weight:600}
.pager button:disabled{opacity:.45;cursor:not-allowed}
.pager .gap{align-self:center;color:var(--muted);padding:0 2px}
.placeholder{text-align:center;padding:60px 20px;color:var(--muted)}
.placeholder h2{color:var(--ink);font-size:20px;margin:0 0 6px}
.head-actions{display:flex;gap:10px;align-items:center}
.btn-primary{display:inline-flex;align-items:center;gap:8px;background:var(--active);color:#fff;border:0;border-radius:8px;padding:11px 16px;font-weight:600;font-size:15px;cursor:pointer}
.btn-primary:hover{background:#2653BA}
.btn-sec{background:#fff;border:1px solid var(--line);border-radius:8px;padding:10px 16px;font-weight:500;cursor:pointer}
.btn-sec:hover{border-color:var(--muted)}
.btn-danger{background:var(--red);color:#fff;border:0;border-radius:8px;padding:10px 16px;font-weight:600;cursor:pointer}
.btn-danger:hover{background:#C42F2F}
.act{display:flex;gap:6px;justify-content:flex-end}
.icon-btn{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--line);border-radius:7px;padding:6px 10px;cursor:pointer;font-size:13.5px;color:var(--ink)}
.icon-btn:hover{border-color:var(--blue);color:var(--blue)}
.icon-btn.del:hover{border-color:var(--red);color:var(--red)}
.catname{display:flex;align-items:center;gap:8px;font-weight:600}
.caret{background:none;border:0;cursor:pointer;padding:4px;border-radius:6px;color:var(--muted);display:inline-flex;transition:transform .2s}
.caret:hover{background:var(--thead);color:var(--ink)}
.caret[aria-expanded="true"]{transform:rotate(90deg)}
.cdesc{display:block;color:var(--muted);font-size:13.5px;font-weight:400;margin:2px 0 0 32px;white-space:normal;max-width:52ch}
tr.subrow>td{background:#F9FAFB;padding:6px 10px 14px 42px}
.sublist{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.sublist li{display:flex;align-items:center;gap:12px;padding:8px 0 8px 16px;flex-wrap:wrap}
.sublist li+li{border-top:1px dashed var(--line)}
.sublist .sn{font-weight:500;min-width:140px}
.sublist .sc{color:var(--muted);font-size:13.5px;margin-right:auto}
.addsub{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0 16px;background:none;border:1px dashed var(--blue);color:var(--blue);border-radius:7px;padding:6px 12px;cursor:pointer;font-size:13.5px;font-weight:500}
.addsub:hover{background:var(--blueBg)}
.nosub{color:var(--muted);font-size:14px;padding:8px 0 0 16px}
.dot{width:12px;height:12px;border-radius:50%;flex-shrink:0}

.linkcount{background:none;border:0;color:var(--blue);cursor:pointer;font:inherit;padding:0;text-decoration:underline;text-underline-offset:3px}
.linkcount:disabled{color:var(--muted);text-decoration:none;cursor:default}
dialog.modal{border:0;border-radius:12px;padding:0;width:min(460px,calc(100% - 28px));box-shadow:0 20px 50px rgba(15,27,51,.25);color:var(--ink);background:#fff}
dialog.modal::backdrop{background:rgba(15,27,51,.45)}
.modal form{padding:24px}
.modal h3{margin:0 0 6px;font-size:20px}
.modal .mdesc{margin:0 0 18px;color:var(--muted);font-size:14.5px}
.modal .fld input,.modal .fld textarea,.modal .fld select{border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px;width:100%}
.modal .fld textarea{resize:vertical;min-height:80px;font-family:inherit}
.modal .fld input:focus,.modal .fld textarea:focus,.modal .fld select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blueSoft)}
.modal .fld .opt{font-weight:400;color:var(--muted)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.swatches input{position:absolute;opacity:0;pointer-events:none}
.swatches label{width:30px;height:30px;border-radius:50%;cursor:pointer;border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}
.swatches input:checked+label{box-shadow:0 0 0 2px var(--ink)}
.swatches input:focus-visible+label{outline:3px solid var(--blue);outline-offset:2px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.grid4{display:grid;grid-template-columns:1.1fr 1.3fr 1fr;gap:0 14px}
@media (max-width:700px){.grid4{grid-template-columns:1fr}}
dialog.modal.wide{width:min(980px,calc(100% - 28px))}
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media (max-width:760px){.stats3{grid-template-columns:1fr}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.stat .l{color:var(--muted);font-size:14px}
.stat .v{font-size:26px;font-weight:700;margin-top:4px;letter-spacing:-.3px}
.toolbar input[type=date]{flex:0 0 auto;min-width:0}
.p-gray{background:var(--thead);color:var(--muted);border:1px solid var(--line)}
.pv-name{font-weight:600}
.areasw{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.areasw button{border:0;background:none;border-radius:7px;padding:7px 14px;font-weight:500;font-size:14px;cursor:pointer;color:var(--muted);display:inline-flex;align-items:center;gap:7px}
.areasw button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(15,27,51,.15)}
.areasw button:hover{color:var(--ink)}
.area-tag{margin:-14px 6px 22px;padding:8px 12px;border-radius:8px;background:rgba(255,255,255,.07);color:#fff;font-size:13px;display:flex;align-items:center;gap:8px}
.area-tag b{font-weight:600}
.area-dot{width:8px;height:8px;border-radius:50%;background:#4F8BFF}
.area-dot.cocina{background:#F5B400}
.areas-sub{display:block;color:var(--muted);font-size:12.5px;margin-top:2px}
body.ro-productos [data-perm="productos"],body.ro-categorias [data-perm="categorias"],body.ro-entradas [data-perm="entradas"],
body.ro-salidas [data-perm="salidas"],body.ro-proveedores [data-perm="proveedores"]{display:none!important}
.permtbl{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:6px}
.permtbl th{background:var(--thead);color:var(--muted);font-weight:500;padding:8px 10px;text-align:center}
.permtbl th:first-child{text-align:left}
.permtbl td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:center}
.permtbl td:first-child{text-align:left;font-weight:500}
.permtbl input{width:18px;height:18px;accent-color:var(--active);cursor:pointer}
.permtbl input:disabled{cursor:not-allowed}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.presets span{font-size:13px;color:var(--muted);align-self:center}
.presets button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:13px;cursor:pointer}
.presets button:hover{border-color:var(--blue);color:var(--blue)}
.pchips{display:flex;flex-wrap:wrap;gap:4px;white-space:normal;max-width:420px}
.pchip{font-size:12.5px;border-radius:5px;padding:2px 7px;border:1px solid var(--line)}
.pchip.edit{background:var(--greenBg);border-color:var(--greenSoft);color:var(--green)}
.pchip.view{background:var(--blueBg);border-color:var(--blueSoft);color:var(--blue)}
.pchip.none{background:var(--thead);color:var(--muted);text-decoration:line-through}
.switch{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:500;cursor:pointer}
.switch input{width:18px;height:18px;accent-color:var(--active)}
.lock{background:var(--amberBg);border:1px solid var(--amberSoft);color:#8a5a00;border-radius:8px;padding:10px 12px;font-size:14px;margin-bottom:12px}
.you{font-size:12px;background:var(--blueBg);color:var(--blue);border-radius:5px;padding:1px 6px;margin-left:6px;font-weight:500}
.icon-btn.only{padding:7px 8px}
#provBody .ctc{min-width:150px}
.pv-sub{display:block;color:var(--muted);font-size:13px;font-weight:400}
.ctc{white-space:normal;min-width:170px;font-size:14px;line-height:1.45}
.ctc a{color:var(--blue);text-decoration:none}.ctc a:hover{text-decoration:underline}
.ctc .none{color:var(--muted)}
.tags{display:flex;flex-wrap:wrap;gap:4px;max-width:240px;white-space:normal}
.tag{background:var(--thead);border:1px solid var(--line);border-radius:5px;padding:2px 7px;font-size:12.5px}
.chkgrid{display:flex;flex-wrap:wrap;gap:8px}
.chkgrid input{position:absolute;opacity:0;pointer-events:none}
.chkgrid label{border:1px solid var(--line);background:#fff;border-radius:999px;padding:7px 12px;cursor:pointer;font-size:14px}
.chkgrid input:checked+label{background:var(--blueBg);border-color:var(--blue);color:var(--blue);font-weight:500}
.chkgrid input:focus-visible+label{outline:3px solid var(--blue);outline-offset:2px}
.p-blue{background:var(--blueBg);color:var(--blue);border:1px solid var(--blueSoft)}
.res b.neg{color:var(--red)}
.res b.dec{color:var(--ink)}
.res b.warn{color:#B7791F}
.chipsel{display:flex;flex-wrap:wrap;gap:8px}
.chipsel input{position:absolute;opacity:0;pointer-events:none}
.chipsel label{border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;cursor:pointer;font-size:14px;font-weight:500}
.chipsel input:checked+label{background:var(--active);border-color:var(--active);color:#fff}
.chipsel input:focus-visible+label{outline:3px solid var(--blue);outline-offset:2px}
tr.anulada td{color:var(--muted)}
tr.anulada td:not(:last-child){text-decoration:line-through;text-decoration-color:rgba(107,114,128,.5)}
.sec-title{font-size:15px;font-weight:600;margin:6px 0 10px}
.picker{position:relative;margin-bottom:12px}
.picker input{width:100%;border:1px solid var(--line);border-radius:8px;padding:11px 12px 11px 38px;font-size:15px}
.picker input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blueSoft)}
.picker svg{position:absolute;left:12px;top:13px;color:var(--muted)}
.picker ul{position:absolute;left:0;right:0;top:calc(100% + 4px);background:#fff;border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 30px rgba(15,27,51,.15);list-style:none;margin:0;padding:4px;max-height:260px;overflow:auto;z-index:5}
.picker li{padding:9px 10px;border-radius:6px;cursor:pointer;display:flex;justify-content:space-between;gap:10px}
.picker li small{color:var(--muted)}
.picker li[aria-selected="true"],.picker li:hover{background:var(--blueBg)}
.picker li.none{color:var(--muted);cursor:default;background:none}
.itbl{width:100%;border-collapse:collapse;min-width:760px;font-size:14px}
.itbl th{background:var(--thead);font-weight:500;color:var(--muted);padding:8px;text-align:left}
.itbl td{padding:8px;border-bottom:1px solid var(--line);vertical-align:middle;white-space:nowrap}
.itbl .pn{font-weight:500;white-space:normal;min-width:180px}
.itbl .pn small{display:block;color:var(--muted);font-weight:400}
.itbl input,.itbl select{border:1px solid var(--line);border-radius:7px;padding:7px 8px;font-size:14px;width:100%}
.itbl input:focus,.itbl select:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blueSoft)}
.itbl .w-qty{width:84px}.itbl .w-cost{width:110px}.itbl .w-per{width:62px}
.fmt{display:flex;gap:6px;align-items:center}
.fmt span{color:var(--muted);font-size:13px}
.res{font-variant-numeric:tabular-nums}
.res b{color:var(--green)}
.xbtn{background:none;border:0;color:var(--muted);cursor:pointer;padding:6px;border-radius:6px;display:inline-flex}
.xbtn:hover{color:var(--red);background:var(--redBg)}
.itempty{padding:22px;text-align:center;color:var(--muted);border:1px dashed var(--line);border-radius:8px;margin-bottom:12px}
.totals{display:flex;justify-content:flex-end;gap:28px;padding:12px 4px;font-size:15px;flex-wrap:wrap}
.totals b{font-size:17px}
.info{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px 18px;background:var(--bg);border-radius:8px;padding:14px 16px;margin-bottom:16px}
.info div span{display:block;color:var(--muted);font-size:13px}
.info div b{font-weight:500}
.btn-repo{background:#fff;border:1px solid var(--blueSoft);color:var(--blue);border-radius:6px;padding:4px 10px;font-size:13px;font-weight:500;cursor:pointer;margin-left:6px}
.btn-repo:hover{background:var(--blueBg)}
@media (max-width:480px){.grid2{grid-template-columns:1fr}}
.mfoot{display:flex;justify-content:flex-end;gap:10px;margin-top:6px}
.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,140px);background:#111827;color:#fff;padding:12px 18px;border-radius:8px;font-weight:500;z-index:50;transition:transform .25s ease;max-width:calc(100% - 32px)}
.toast.show{transform:translate(-50%,0)}
.toast:not(.show){visibility:hidden;transition:transform .25s ease,visibility 0s .25s}
.empty td{color:var(--muted);text-align:center;white-space:normal}

@media (max-width:1250px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1100px){.tables{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  aside{position:fixed;inset:0 auto 0 0;width:256px;z-index:20;transform:translateX(-100%);transition:transform .25s ease;padding-top:calc(18px + env(safe-area-inset-top,0px))}
  body.nav-open aside{transform:none}
  body.nav-open .scrim{display:block}
  main{grid-column:1}
  .menuBtn{display:block}
  .topbar{padding:12px 16px;top:env(safe-area-inset-top,0px)}
  .user div{display:none}
  .content{padding:20px 16px 32px}
}
@media (max-width:560px){.kpis{grid-template-columns:minmax(0,1fr)} .search{display:none}}
/* Login */
.login{min-height:100%;display:grid;place-items:center;padding:24px 16px;background:var(--bg)}
.login-card{width:min(420px,100%);background:var(--card);border:1px solid var(--line);border-radius:12px;padding:32px 30px;box-shadow:0 10px 30px rgba(15,27,51,.08)}
.login .logo{color:var(--ink);justify-content:center;padding:0 0 22px}
.login h1{font-size:22px;margin:0 0 4px;text-align:center;font-weight:600}
.login p.sub{margin:0 0 24px;color:var(--muted);text-align:center;font-size:14.5px}
.fld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.fld label{font-size:14px;font-weight:500}
.inp{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:8px;padding:0 12px;background:#fff;color:var(--muted)}
.inp:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px var(--blueSoft)}
.inp input{border:0;outline:0;background:transparent!important;padding:11px 0;width:100%;font-size:15px;color:var(--ink)}
.eye{background:none;border:0;cursor:pointer;color:var(--muted);padding:4px;font-size:13px}
.lerr{color:var(--red);font-size:14px;min-height:20px;margin:-4px 0 10px}
.btn-login{width:100%;background:var(--active);color:#fff;border:0;border-radius:8px;padding:12px;font-weight:600;font-size:15.5px;cursor:pointer}
.btn-login:hover{background:#2653BA}
.login .foot{margin-top:18px;text-align:center;color:var(--muted);font-size:13px}
.hidden{display:none!important}
.shake{animation:shake .35s}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
.menu-pop{position:absolute;right:28px;top:68px;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 8px 24px rgba(15,27,51,.1);padding:6px;min-width:180px}
.menu-pop button{width:100%;text-align:left;background:none;border:0;padding:10px 12px;border-radius:6px;cursor:pointer;color:var(--red);font-weight:500}
.menu-pop button:hover{background:var(--redBg)}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Conexión con la API ---------- */
.menu-pop button.neutral{color:var(--ink)}
.menu-pop button.neutral:hover{background:var(--thead)}
body.loading .content{opacity:.55;pointer-events:none;transition:opacity .2s}
body.loading::before{content:"";position:fixed;top:0;left:0;height:3px;width:40%;background:var(--blue);z-index:60;animation:ldbar 1s ease-in-out infinite}
@keyframes ldbar{0%{left:-40%}100%{left:100%}}
button:disabled{opacity:.6;cursor:wait}
input:disabled{background:var(--thead)!important;color:var(--muted)}
/* Nombre del local bajo el logo */
.biz-login{margin:-12px 0 20px;text-align:center;color:var(--muted);font-weight:600;font-size:15px}
.biz-side{margin:-22px 6px 26px;color:rgba(255,255,255,.72);font-size:13.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Configuración */
.cfgtabs{align-self:flex-start;flex-wrap:wrap;max-width:100%}
.cfg .fld input{border:1px solid var(--line);border-radius:8px;padding:10px 12px;font-size:15px;width:100%}
.cfg .fld input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blueSoft)}
.cfg .fld .opt{font-weight:400;color:var(--muted)}
.cfg .hint{color:var(--muted);font-size:13px;line-height:1.4}
.cfg-desc{margin:-4px 0 16px;color:var(--muted);font-size:14.5px;line-height:1.5;max-width:760px}
.cfg-desc code{background:var(--thead);border-radius:4px;padding:1px 5px;font-size:13px}
.cfg-foot{display:flex;flex-wrap:wrap;gap:10px}
.cfg-stack{display:flex;flex-direction:column;gap:18px}
.cfg2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.cfg2 .cfg-note{grid-column:1/-1;margin:0}
.cfg2 .ch{gap:10px;flex-wrap:wrap}
@media (max-width:1000px){.cfg2{grid-template-columns:minmax(0,1fr)}}
.au-det{white-space:normal;min-width:260px;max-width:520px;font-size:14px}
/* Detalle del producto y kárdex */
body.no-kardex .kdx-btn{display:none!important}
.modal.kdx{width:min(1180px,calc(100% - 28px))}
#kdxTbl.no-cost .kdx-cost{display:none}
#kdxTbl td{white-space:nowrap}
tr.kdx-esp td{font-style:italic;background:var(--bg)}
.kdx-note{margin:0 0 12px;padding:10px 14px;border-radius:8px;background:var(--amberBg);border:1px solid var(--amberSoft);font-size:14px;line-height:1.45}
.kdx-warn{color:var(--red);cursor:help;font-weight:700}
.permtbl input:disabled{cursor:not-allowed;opacity:.35}
/* Valorización */
.kpi-val{grid-column:1/-1;align-items:center}
.kdx-small{margin:0 4px 8px;color:var(--muted);font-size:12.5px;text-align:right}
.kdx-main{background:var(--blueBg);border:1px solid var(--blueSoft);border-radius:8px;padding:4px 10px;color:var(--blue)}
th.kdx-main-col,td.kdx-main-col{background:var(--blueBg)}
/* Pedidos sugeridos */
.pd-top{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.pd-bar{margin-bottom:6px}
.pd-bar .cnt{margin-left:auto}
.pd-note{margin:0;color:var(--muted);font-size:13px}
#pdList{display:flex;flex-direction:column;gap:18px}
.pd-card .ch{align-items:flex-start;gap:12px;flex-wrap:wrap}
.pd-card .pd-sub{margin:4px 0 0;color:var(--muted);font-size:14px}
.pd-q{display:flex;align-items:center;gap:8px}
.pd-q input{width:78px;border:1px solid var(--line);border-radius:7px;padding:6px 8px;font-size:14.5px;text-align:right}
.pd-q input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blueSoft)}
.pd-q input[aria-invalid="true"]{border-color:var(--red);box-shadow:0 0 0 3px var(--redSoft)}
.pd-tot{color:var(--muted);font-size:13px}
.pd-chk{width:18px;height:18px;cursor:pointer}
.pd-msg{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.pd-msg label{font-size:14px;font-weight:500}
.pd-msg textarea{border:1px solid var(--line);border-radius:8px;padding:10px 12px;font:inherit;font-size:14.5px;min-height:150px;resize:vertical;width:100%}
.pd-msg textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px var(--blueSoft)}
.pd-act{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:10px}
.pd-act button:disabled{cursor:not-allowed}
.pd-warn{margin:12px 0 0;color:var(--muted);font-size:14px}
/* Entradas: filtro del buscador por proveedor habitual */
.pick-opts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:-4px 0 12px;font-size:14px}
.pick-opts label{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:500}
.pick-opts input{width:17px;height:17px;cursor:pointer}
.pick-opts .opt{color:var(--muted);font-size:13px}
.pick-note{margin:-4px 0 12px;padding:9px 12px;border-radius:8px;background:var(--amberBg);border:1px solid var(--amberSoft);font-size:14px}