:root{
  --pri:#ea6a0a;--pri-d:#c85a05;--pri-l:#fff1e6;--pri-m:#ffd8b8;
  --bg:#f5f6f8;--card:#fff;--tx:#1f2430;--mut:#6b7280;--bd:#e6e8ec;--bd2:#f0f1f4;
  --ok:#16a34a;--ok-l:#e8f7ee;--bad:#dc2626;--bad-l:#fdecec;--warn:#b45309;--warn-l:#fef3dc;--info:#2563eb;--info-l:#e8f0fe;
  --sh:0 1px 2px #1018280f,0 1px 3px #1018281a;--sh2:0 8px 24px #10182818;--r:14px;--side:244px;
  --font:Inter,"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif}
body.dark{--bg:#14161b;--card:#1d2027;--tx:#eef0f4;--mut:#9aa1ad;--bd:#2c303a;--bd2:#252932;--pri-l:#3a2512;--pri-m:#6b3d17;
  --ok-l:#12301f;--bad-l:#3a1a1a;--warn-l:#392b10;--info-l:#17284a;--sh:0 1px 2px #0006}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);background:var(--bg);color:var(--tx);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,p{margin:0}
button{font-family:inherit}
:focus-visible{outline:3px solid #ea6a0a66;outline-offset:2px;border-radius:8px}
.skip{position:absolute;left:-999px;top:0;background:var(--pri);color:#fff;padding:8px 12px;z-index:100}.skip:focus{left:8px;top:8px}
.i{width:18px;height:18px;flex:none;vertical-align:-3px}

/* ===== Estructura ===== */
.shell{display:flex;min-height:100vh}
#side{width:var(--side);flex:none;background:var(--card);border-right:1px solid var(--bd);padding:18px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;overflow-y:auto}
.content{flex:1;min-width:0}
main{padding:24px 28px 40px;max-width:1500px;margin:0 auto;outline:0}
.topbar{display:none}
.brand{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}
.logo{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,#ff8a2b,var(--pri-d));display:grid;place-items:center;color:#fff;flex:none;box-shadow:0 4px 10px #ea6a0a55}
.logo .i{width:22px;height:22px}
.brand b{display:block;font-size:16px;letter-spacing:-.2px}.brand small{color:var(--mut);font-size:12px}
.nav{display:flex;flex-direction:column;gap:3px}
.nav button{display:flex;align-items:center;gap:11px;border:0;background:none;color:var(--mut);padding:10px 12px;border-radius:10px;font-size:14px;font-weight:500;cursor:pointer;text-align:left;transition:background .15s,color .15s}
.nav button:hover{background:var(--bg);color:var(--tx)}
.nav button[aria-current=page]{background:var(--pri-l);color:var(--pri-d);font-weight:600}
body.dark .nav button[aria-current=page]{color:#ffb070}
.sidefoot{margin-top:auto;background:var(--bg);border:1px solid var(--bd);border-radius:12px;padding:12px;font-size:12px;color:var(--mut)}
.sidefoot b{display:block;color:var(--tx);margin-bottom:2px;font-size:13px}
.sidefoot .btn{margin-top:10px;width:100%}
#tabbar{display:none}

/* ===== Cabecera de página ===== */
.ph{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:20px}
.ph h1{font-size:25px;letter-spacing:-.4px}
.ph p{color:var(--mut);margin-top:3px}
.pha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.pill{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--bd);border-radius:10px;padding:8px 12px;color:var(--mut);font-size:13px;}

/* ===== Botones y campos ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--pri);color:#fff;border:0;padding:9px 15px;border-radius:10px;cursor:pointer;font-size:14px;font-weight:600;transition:background .15s,transform .15s,box-shadow .15s;box-shadow:0 1px 2px #ea6a0a55}
.btn:hover{background:var(--pri-d)}.btn:active{transform:scale(.98)}
.btn.sec{background:var(--card);color:var(--tx);border:1px solid var(--bd);box-shadow:none}.btn.sec:hover{background:var(--bg)}
.btn.red{background:var(--bad);box-shadow:none}.btn.red:hover{background:#b91c1c}
.btn.sm{padding:7px 11px;font-size:13px}
.btn.lite{background:var(--pri-l);color:var(--pri-d);box-shadow:none}.btn.lite:hover{background:var(--pri-m)}
input,select{width:100%;padding:9px 11px;border:1px solid var(--bd);border-radius:10px;font:inherit;background:var(--card);color:var(--tx);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus{outline:0;border-color:var(--pri);box-shadow:0 0 0 3px #ea6a0a26}
.sel{width:auto;padding:8px 10px;font-size:13px}
.toolbar{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap;align-items:center}
.toolbar input{flex:1;min-width:160px;max-width:340px}.toolbar select{width:auto}

/* ===== Tarjetas KPI ===== */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px}
.kpis.k3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.kpis.k6{grid-template-columns:repeat(3,minmax(0,1fr))}
.kpi{all:unset;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:16px;box-shadow:var(--sh);cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s;position:relative;min-width:0}
.kpi.static{cursor:default}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh2);border-color:var(--pri-m)}
.kpi.static:hover{transform:none;box-shadow:var(--sh);border-color:var(--bd)}
.kpi:focus-visible{outline:3px solid #ea6a0a66}
.kh{display:flex;align-items:center;gap:10px}
.kic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--pri-l);color:var(--pri)}
.kpi.ok .kic{background:var(--ok-l);color:var(--ok)}.kpi.bad .kic{background:var(--bad-l);color:var(--bad)}.kpi.info .kic{background:var(--info-l);color:var(--info)}
.kt{font-size:13px;color:var(--mut);font-weight:600;flex:1}
.ka{color:var(--mut);opacity:0;transition:.18s}.kpi:hover .ka{opacity:1;transform:translateX(2px)}
.kv{font-size:28px;font-weight:700;letter-spacing:-.6px;line-height:1.1;overflow-wrap:anywhere}
.kv.pos{color:var(--ok)}.kv.neg{color:var(--bad)}.kv.dash{color:var(--mut)}
.ks{font-size:12.5px;color:var(--mut)}
.bar{height:7px;background:var(--bd2);border-radius:6px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--pri);border-radius:6px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.bar.ok i{background:var(--ok)}.bar.bad i{background:var(--bad)}
.chip{display:inline-flex;align-items:center;gap:5px;max-width:100%;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--bd2);color:var(--mut);width:max-content}
.chip.ok{background:var(--ok-l);color:var(--ok)}.chip.bad{background:var(--bad-l);color:var(--bad)}.chip.warn{background:var(--warn-l);color:var(--warn)}.chip.info{background:var(--info-l);color:var(--info)}.chip.pri{background:var(--pri-l);color:var(--pri-d)}

/* ===== Paneles y rejillas ===== */
.panel{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);padding:18px;box-shadow:var(--sh);min-width:0}
.panel.flush{padding:0;overflow:hidden}
.pt{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.pt h3{font-size:15.5px;display:flex;align-items:center;gap:8px}
.pt h3 .i{color:var(--pri)}
.pt small{color:var(--mut);font-weight:400;font-size:12.5px}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:18px}
.row21{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:14px;margin-bottom:18px}
.link{background:none;border:0;color:var(--pri-d);font-weight:600;cursor:pointer;font-size:13px;display:inline-flex;align-items:center;gap:4px;padding:4px 6px;border-radius:8px}
.link:hover{background:var(--pri-l)}

/* ===== Gráficos ===== */
.chart{width:100%;height:auto;display:block}
.chart text{fill:var(--mut);font-size:11px;font-family:var(--font)}
.chart .gl{stroke:var(--bd);stroke-width:1}
.chart .hit{fill:transparent;cursor:crosshair}
.chart .hit:hover{fill:#ea6a0a12}
.bb{transform-box:fill-box;transform-origin:bottom;animation:grow .6s ease-out}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.leg{display:flex;gap:16px;flex-wrap:wrap;font-size:12.5px;color:var(--mut)}
.leg span{display:inline-flex;align-items:center;gap:6px}.leg i{width:10px;height:10px;border-radius:3px;display:inline-block}
#tip{position:fixed;z-index:60;background:#111827;color:#fff;font-size:12px;padding:8px 10px;border-radius:8px;pointer-events:none;display:none;white-space:pre-line;box-shadow:var(--sh2);max-width:240px}
#tip.on{display:block}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:26px 14px;color:var(--mut)}
.empty .ei{width:52px;height:52px;border-radius:50%;background:var(--pri-l);color:var(--pri);display:grid;place-items:center;margin-bottom:4px}
.empty .ei .i{width:24px;height:24px}
.empty b{color:var(--tx);font-size:15px}.empty p{max-width:340px;font-size:13px}
.empty .btn{margin-top:8px}

/* ===== Camadas ===== */
.lcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));gap:12px}
.lc{border:1px solid var(--bd);border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:11px;background:var(--card);transition:border-color .18s,box-shadow .18s}
.lc:hover{border-color:var(--pri-m);box-shadow:var(--sh2)}
.lch{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.lch h4{font-size:15px}.lch small{color:var(--mut);font-size:12px;display:flex;align-items:center;gap:5px;margin-top:2px}.lch small .i{width:13px;height:13px}
.lcm{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center}
.lcm div{background:var(--bg);border-radius:9px;padding:7px 4px}
.lcm small{display:block;color:var(--mut);font-size:11px}.lcm b{font-size:16px}
.lcf{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mut);gap:8px}
.lca{display:flex;gap:6px;justify-content:space-between;align-items:center}
.chips{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.chips button{border:1px solid var(--bd);background:var(--card);color:var(--mut);padding:7px 13px;border-radius:20px;cursor:pointer;font-size:13px;font-weight:600}
.chips button.on{background:var(--pri);border-color:var(--pri);color:#fff}

/* ===== Acciones rápidas ===== */
.qas{display:grid;gap:8px}
.qa{all:unset;box-sizing:border-box;display:flex;align-items:center;gap:12px;padding:11px 12px;border:1px solid var(--bd);border-radius:12px;cursor:pointer;transition:.15s;background:var(--card)}
.qa:hover{border-color:var(--pri-m);background:var(--pri-l);transform:translateX(2px)}
.qa:focus-visible{outline:3px solid #ea6a0a66}
.qa .kic{width:34px;height:34px}
.qa b{display:block;font-size:13.5px}.qa small{color:var(--mut);font-size:12px}
.qa.ok .kic{background:var(--ok-l);color:var(--ok)}.qa.bad .kic{background:var(--bad-l);color:var(--bad)}.qa.info .kic{background:var(--info-l);color:var(--info)}

/* ===== Movimientos / alertas ===== */
.mv{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:center;padding:11px 0;border-bottom:1px solid var(--bd2)}
.mv:last-child{border:0}
.mi{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;background:var(--bd2);color:var(--mut)}
.mi.ingreso{background:var(--ok-l);color:var(--ok)}.mi.gasto{background:var(--bad-l);color:var(--bad)}
.mt{font-weight:600;font-size:13.5px}.ms{color:var(--mut);font-size:12.5px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.ma{text-align:right;font-weight:700;white-space:nowrap}.ma small{display:block;color:var(--mut);font-weight:400;font-size:12px}
.ma.ingreso{color:var(--ok)}.ma.gasto{color:var(--bad)}
.al{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;margin-bottom:8px;font-size:13px;cursor:pointer;border:0;width:100%;text-align:left;font-family:inherit;color:inherit}
.al.warn{background:var(--warn-l);color:var(--warn)}.al.bad{background:var(--bad-l);color:var(--bad)}.al.info{background:var(--info-l);color:var(--info)}.al.ok{background:var(--ok-l);color:var(--ok);cursor:default}
body.dark .al{color:var(--tx)}
.note{font-size:12.5px;color:var(--mut);background:var(--bg);border-radius:10px;padding:10px 12px}

/* ===== Tablas ===== */
.wrap{overflow-x:auto;position:relative}
.tw{background:var(--card);border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden;margin-bottom:18px}
.tw .th{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--bd);flex-wrap:wrap}
.tw .th h3{font-size:15px;display:flex;align-items:center;gap:8px}.tw .th h3 .i{color:var(--pri)}
.tw .th small{color:var(--mut);display:block;font-weight:400;font-size:12.5px;margin-top:2px}
table{width:100%;border-collapse:collapse;font-size:13.5px}
th,td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--bd2);white-space:nowrap}
th{background:var(--bg);color:var(--mut);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:.3px}
tr:last-child td{border-bottom:0}
tbody tr:hover td{background:var(--pri-l)}
td.r,th.r{text-align:right}
.ic{background:none;border:0;cursor:pointer;color:var(--mut);padding:6px;border-radius:8px;line-height:0}
.ic:hover{background:var(--bd2);color:var(--tx)}.ic.del:hover{background:var(--bad-l);color:var(--bad)}
.pos{color:var(--ok)}.neg{color:var(--bad)}

/* ===== Modal ===== */
#modal{position:fixed;inset:0;background:#0f172a99;display:none;align-items:center;justify-content:center;z-index:50;padding:14px;backdrop-filter:blur(2px)}
#modal.on{display:flex}
#modal form,#modal .dlg{background:var(--card);border-radius:18px;padding:22px;width:100%;max-width:480px;max-height:92vh;overflow:auto;box-shadow:var(--sh2);animation:pop .2s ease-out}
#modal .dlg.wide{max-width:720px}#modal .dlg.sm{max-width:420px}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
#modal h3{font-size:18px;display:flex;align-items:center;gap:9px;margin-bottom:16px}#modal h3 .i{color:var(--pri)}
#modal label{display:block;font-size:12.5px;font-weight:600;color:var(--tx);margin-bottom:13px}
#modal label input,#modal label select{margin-top:5px;font-weight:400}
.rq{color:var(--bad)}
.hint{display:block;color:var(--mut);font-weight:400;margin-top:4px;font-size:12px}
.err{color:var(--bad);font-size:13px;min-height:20px;margin-bottom:6px;font-weight:600}
.err:not(:empty){background:var(--bad-l);padding:9px 12px;border-radius:10px}
.linkbtn{border:0;background:transparent;color:var(--accent);cursor:pointer;font:inherit;font-size:.9rem;margin:12px auto 0;display:block;text-decoration:underline}
.audit{display:grid;gap:8px}.audit>div{display:grid;grid-template-columns:minmax(120px,1fr) minmax(160px,2fr) auto;gap:12px;align-items:center;padding:9px 0;border-bottom:1px solid var(--bd);font-size:.88rem}.audit span,.audit small{color:var(--mut)}.audit small{white-space:nowrap}@media(max-width:640px){.audit>div{grid-template-columns:1fr;gap:3px}.audit small{white-space:normal}}
.row{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.chs{display:grid;gap:8px}
.dgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin-bottom:14px}
.dgrid div{background:var(--bg);border-radius:10px;padding:10px 12px}
.dgrid small{display:block;color:var(--mut);font-size:11.5px}.dgrid b{font-size:16px}
.dh{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:14px}
.dh h3{margin:0}
.sub{font-size:13px;font-weight:700;margin:14px 0 6px}
.mini{font-size:13px;color:var(--mut)}.mini div{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px solid var(--bd2)}

/* ===== Toast ===== */
#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#111827;color:#fff;padding:11px 16px;border-radius:12px;display:none;z-index:70;gap:14px;align-items:center;box-shadow:var(--sh2)}
#toast.on{display:flex;animation:pop .2s}
#toast button{background:none;border:0;color:#ffb070;cursor:pointer;font-weight:700}

/* ===== Ajustes ===== */
.set{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:16px}
.set label{font-size:12.5px;font-weight:600}.set label input,.set label select{margin-top:5px;font-weight:400}
.set .hint{font-weight:400}
.group{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(360px,100%),1fr));gap:14px;margin-bottom:18px}

/* ===== Adaptación ===== */
@media(max-width:1200px){.kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.row21{grid-template-columns:minmax(0,1fr)}}
@media(max-width:1000px){.row2{grid-template-columns:minmax(0,1fr)}}
@media(max-width:900px){
  #side{display:none}
  .topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--bd);position:sticky;top:0;z-index:20}
  .topbar .brand{padding:0}.topbar .logo{width:34px;height:34px}
  main{padding:16px 14px 96px}
  #tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;background:var(--card);border-top:1px solid var(--bd);z-index:30;padding:6px 4px calc(6px + env(safe-area-inset-bottom));justify-content:space-around}
  #tabbar button{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;border:0;background:none;color:var(--mut);font-size:10.5px;padding:6px 2px;border-radius:10px;cursor:pointer;font-weight:600}
  #tabbar button[aria-current=page]{color:var(--pri-d);background:var(--pri-l)}
  #tabbar .i{width:21px;height:21px}
  #toast{bottom:84px}
}
@media(max-width:560px){
  .kpis{gap:10px}.kpi{padding:13px}.kv{font-size:22px}.kic{width:32px;height:32px}
  .ph h1{font-size:21px}.pha{width:100%}.pha .btn{flex:1}.pha .pill{display:none}
  .lcs{grid-template-columns:minmax(0,1fr)}.group{grid-template-columns:minmax(0,1fr)}.kpis.k3,.kpis.k6{grid-template-columns:repeat(2,minmax(0,1fr))}
  th,td{padding:10px 12px}.panel{padding:14px}
  .ks{font-size:12px}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ===== Login y estado de la nube ===== */
#login{position:fixed;inset:0;z-index:80;background:radial-gradient(circle at 20% 10%,var(--pri-l),var(--bg) 60%);display:none;place-items:center;padding:16px;overflow:auto}
#login.on{display:grid}
body.locked .shell,body.locked #tabbar{display:none}
.lg-box{background:var(--card);border:1px solid var(--bd);border-radius:20px;padding:28px;width:100%;max-width:400px;box-shadow:var(--sh2);animation:pop .25s ease-out}
.lg-box h1{text-align:center;font-size:22px;margin-top:6px}
.lg-box .lg-sub{text-align:center;color:var(--mut);margin:4px 0 20px}
.lg-box label{display:block;font-size:12.5px;font-weight:600;margin-bottom:13px}
.lg-box label input{margin-top:5px;font-weight:400;padding:11px}
.lg-foot{display:flex;gap:6px;justify-content:center;align-items:center;color:var(--mut);font-size:12px;margin-top:16px}
.lg-foot .i{width:14px;height:14px}
.cstat{display:block;margin-bottom:10px}
.cstat .chip{border:0;font-family:inherit;cursor:default}
.cstat button.chip{cursor:pointer}
.cstat small{display:block;margin-top:4px;color:var(--mut);font-size:11.5px;overflow-wrap:anywhere}
.topbar .cstat{margin:0 8px 0 auto}.topbar .cstat .chip{padding:5px 7px}
.btn:disabled{opacity:.6;cursor:wait}