:root{--bg:#f2f4f0;--surf:#fff;--ink:#1b2a21;--mut:#5d6b62;--line:#dde3db;--g:#1f4a33;--g2:#2d6a49;--h:#c98a0b;--hbg:#fbefd0;--ok:#1f7a4d;--okbg:#dcf1e5;--warn:#9a5b00;--warnbg:#fde9c4;--bad:#a8321f;--badbg:#f9dcd6;--info:#2a5a8a;--infobg:#dde9f6;--side:#1f4a33;--sb:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#121a15;--surf:#1a251e;--ink:#e8efe9;--mut:#9fb0a5;--line:#2b3a31;--g:#7cc79c;--g2:#4fa078;--h:#e5a823;--hbg:#3a2f12;--ok:#7fd8a6;--okbg:#17382a;--warn:#f0b955;--warnbg:#3b2c10;--bad:#f09a8b;--badbg:#3d1e18;--info:#9cc4ef;--infobg:#1b2c40;--side:#0d1912}}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;min-height:100vh}
.login{min-height:100vh;display:grid;place-items:center;padding:20px}.lbox{background:var(--surf);border:1px solid var(--line);border-radius:16px;padding:28px 24px;width:100%;max-width:380px}
.lbox img{height:64px;display:block;margin:0 auto 10px}
.brand{font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--g)}.brand i{font-style:normal;color:var(--h)}
label{display:block;font-weight:700;font-size:13px;margin:12px 0 5px;color:var(--mut)}
input,select,textarea{width:100%;padding:12px 13px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font:inherit;font-size:16px}
input:focus,select:focus{outline:2px solid var(--g2);outline-offset:0;border-color:transparent}
.btn{background:var(--g);color:#fff;border:0;border-radius:10px;padding:12px 18px;font:inherit;font-weight:700;cursor:pointer;min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .btn{color:#10231a}}
.btn.ghost{background:transparent;color:var(--g);border:1px solid var(--line)}.btn.sm{padding:8px 13px;min-height:38px;font-size:14px}.btn.full{width:100%}.btn[disabled]{opacity:.5}
.btn.wa{background:#25d366;color:#0b2a16}.btn.tel{background:var(--infobg);color:var(--info)}
.app{display:none;min-height:100vh}
.side{position:fixed;inset:0 auto 0 0;width:230px;background:var(--side);color:#fff;padding:20px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;z-index:20}
.side .brand{color:#fff;padding:0 10px 4px}.who{font-size:12px;color:#c9dccf;padding:0 10px 14px}
.nav{background:transparent;border:0;color:#d5e6db;text-align:left;padding:10px 12px;border-radius:8px;font:inherit;font-size:15px;font-weight:500;cursor:pointer}.nav:hover{background:rgba(255,255,255,.1)}.nav.on{background:var(--h);color:#1b1500;font-weight:800}.out{margin-top:auto}
main{margin-left:230px;padding:24px 28px 60px;max-width:1180px}
h2{font-size:24px;margin:0;letter-spacing:-.02em}h3{margin:0;font-size:17px}.sub{color:var(--mut);margin:2px 0 16px;font-size:14px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px}
.kpi{background:var(--surf);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer}.kpi small{color:var(--mut);font-weight:700;font-size:12px}.kpi b{display:block;font-size:22px;margin-top:3px;letter-spacing:-.02em}.kpi.al b{color:var(--bad)}.kpi.ok b{color:var(--ok)}.kpi .note{font-size:12px}
.card{background:var(--surf);border:1px solid var(--line);border-radius:14px;margin-bottom:16px;overflow:hidden}.hd{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}.pad{padding:14px 16px}
table{width:100%;border-collapse:collapse;font-size:14px}th{text-align:left;color:var(--mut);font-weight:700;font-size:12px;padding:10px 12px;border-bottom:1px solid var(--line)}td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}td.n,th.n{text-align:right;white-space:nowrap}tr.cliq{cursor:pointer}tr.cliq:hover{background:var(--hbg)}tr:last-child td{border-bottom:0}
.tag{display:inline-block;border-radius:99px;padding:2px 9px;font-size:12px;font-weight:700;white-space:nowrap}.t-ok{background:var(--okbg);color:var(--ok)}.t-w{background:var(--warnbg);color:var(--warn)}.t-b{background:var(--badbg);color:var(--bad)}.t-i{background:var(--infobg);color:var(--info)}
.filters{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap;align-items:center}.filters input{max-width:340px}.note{color:var(--mut);font-size:13px}.err{color:var(--bad);font-size:14px;margin-top:8px;min-height:1em}
.chips{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:12px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}.chip{flex:none;border:1px solid var(--line);background:var(--surf);color:var(--ink);border-radius:99px;padding:8px 14px;font:inherit;font-size:14px;font-weight:600;cursor:pointer;min-height:38px}.chip.on{background:var(--g);color:#fff;border-color:var(--g)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .chip.on{color:#10231a}}
.ov{position:fixed;inset:0;background:rgba(0,0,0,.45);display:grid;place-items:center;padding:16px;z-index:50}.dl{background:var(--surf);border-radius:16px;padding:20px;max-width:760px;width:100%;max-height:90vh;overflow:auto;border:1px solid var(--line)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.acts{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
.menu,.tabs,.fab{display:none}
.vacio{padding:30px;text-align:center;color:var(--mut)}
/* ---------- celular ---------- */
@media(max-width:820px){
 body{font-size:16px}.side{display:none}main{margin:0;padding:14px 14px calc(84px + var(--sb));max-width:none}
 h2{font-size:22px}.sub{margin-bottom:12px}
 .kpis{grid-template-columns:1fr 1fr;gap:10px}.kpi{padding:12px}.kpi b{font-size:20px}
 .filters{position:sticky;top:0;background:var(--bg);padding:6px 0 10px;margin:0 0 8px;z-index:5}.filters input{max-width:none;border-radius:12px;padding:13px 14px}
 /* tablas → tarjetas */
 .card table,.card thead,.card tbody,.card tr,.card td{display:block}.card thead{display:none}
 .card tr{padding:12px 14px;border-bottom:1px solid var(--line);position:relative}.card tr:active{background:var(--hbg)}
 .card td{padding:0;border:0;display:flex;justify-content:space-between;gap:10px;align-items:baseline;font-size:15px}
 .card td.n{text-align:right}.card td[data-l]::before{content:attr(data-l);color:var(--mut);font-size:12px;font-weight:700;flex:none}
 .card td.t{display:block;font-size:17px;margin-bottom:4px}.card td.t b{font-weight:800}.card td.ac{display:flex;justify-content:flex-start;gap:8px;margin-top:10px}
 .card td.ac .btn{flex:1}.card td.oc{display:none}
 /* fichas como hoja desde abajo */
 .ov{place-items:end center;padding:0}.dl{border-radius:18px 18px 0 0;max-height:92vh;padding:16px 16px calc(16px + var(--sb));animation:up .2s ease}
 @keyframes up{from{transform:translateY(40px)}to{transform:none}}
 .dl::before{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--line);margin:0 auto 12px}
 .grid{grid-template-columns:1fr 1fr}
 /* barra inferior */
 .tabs{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--surf);border-top:1px solid var(--line);padding:6px 4px calc(6px + var(--sb));z-index:30;overflow-x:auto;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs .tab{flex:0 0 auto;min-width:68px}
 .tab{flex:1;background:none;border:0;color:var(--mut);font:inherit;font-size:11px;font-weight:700;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;border-radius:10px;min-height:48px;cursor:pointer}
 .tab svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.tab.on{color:var(--g)}
 .tab.on svg{stroke-width:2.6}
}