:root{--side:#2B7BBB;--side2:#1e5f96;--bg:#eef1f6;--card:#fff;--acc:#2B7BBB;--txt:#1e293b;--mut:#64748b}
*{box-sizing:border-box}body{font-family:'Segoe UI',system-ui,sans-serif;margin:0;background:var(--bg);color:var(--txt)}
aside{position:fixed;width:220px;height:100vh;background:var(--side);color:#e8f1fa;padding:1.4rem 1rem}
body.page-informes aside{overflow-y:auto}
.brand{background:#fff;border-radius:10px;padding:.45rem .7rem;margin-bottom:.4rem}
.brand img{width:100%;display:block}
aside small{color:#cfe3f5}
aside nav{margin-top:1.4rem}aside a{display:block;color:#e8f1fa;text-decoration:none;padding:.55rem .7rem;
border-radius:8px;margin-bottom:.2rem}aside a.on,aside a:hover{background:var(--side2);color:#fff}
aside .syncbox{margin-top:1rem}
aside .syncbox button{width:100%;padding:.55rem;border:0;border-radius:8px;background:#fff;color:#1e5f96;font-weight:600;cursor:pointer}
aside .syncmsg{font-size:.75rem;margin-top:.4rem;color:#e8f1fa}
main{margin-left:220px;padding:1.6rem 2rem}
.top{display:flex;gap:.7rem;align-items:end;flex-wrap:wrap;background:var(--card);padding:1rem 1.2rem;
border-radius:14px;box-shadow:0 1px 4px #0001;margin-bottom:1.2rem}
body.page-informes .top{position:sticky;top:0;z-index:5}
.top label{font-size:.78rem;color:var(--mut);display:flex;flex-direction:column;gap:.25rem}
.top input,.top select{padding:.5rem .6rem;border:1px solid #cbd5e1;border-radius:8px}
.top button{padding:.55rem 1.1rem;border:0;border-radius:8px;background:var(--acc);color:#fff;
font-weight:600;cursor:pointer}
.pill{background:#e3edf6 !important;color:#1e5f96 !important;font-weight:500 !important}
.pill.on{background:var(--acc) !important;color:#fff !important}
.salir{margin-left:auto;font-size:.85rem}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;margin-bottom:1.2rem}
.kpis2{display:grid;grid-template-columns:repeat(2,minmax(180px,1fr));gap:1rem;margin-bottom:1.2rem}
.kpi{background:var(--card);border-radius:14px;padding:1rem 1.2rem;box-shadow:0 1px 4px #0001;
border-top:4px solid var(--acc)}.kpi b{font-size:1.7rem;display:block}.kpi span{color:var(--mut);font-size:.8rem}
.kpi.b{background:#fafafa;border-top-color:#16a34a}.kpi.b b{color:#16a34a}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.card{background:var(--card);border-radius:14px;padding:1rem 1.2rem;box-shadow:0 1px 4px #0001;margin-bottom:1rem}
.card h3{margin:.2rem 0 1rem;font-size:.95rem}.wide canvas{max-height:380px;min-height:300px}
body.page-informes .wide canvas{max-height:340px;min-height:260px}
.card canvas{max-height:300px}
body.page-datos table{width:100%;border-collapse:collapse;font-size:.88rem}
body.page-datos th{position:sticky;top:0;background:#f1f5f9;text-align:left;padding:.55rem .6rem;color:var(--mut);
font-weight:600;border-bottom:2px solid #e2e8f0}
body.page-datos td{padding:.45rem .6rem;border-bottom:1px solid #f1f5f9}
body.page-datos tr:hover td{background:#f8fafc}
.num{text-align:right;font-variant-numeric:tabular-nums}
.src{font-size:.72rem;padding:.1rem .45rem;border-radius:20px;background:#e3edf6;color:#1e5f96}
.src.imap{background:#dcfce7;color:#15803d}
.pag{display:flex;gap:.6rem;align-items:center;margin-top:.8rem;font-size:.85rem;color:var(--mut)}
.pag button{padding:.4rem .9rem;border:1px solid #cbd5e1;border-radius:8px;background:#fff;cursor:pointer}
body.page-informes table{width:100%;border-collapse:collapse;font-size:.85rem}
body.page-informes th{background:#f1f5f9;text-align:left;padding:.5rem .6rem;color:var(--mut);border-bottom:2px solid #e2e8f0}
body.page-informes td{padding:.4rem .6rem;border-bottom:1px solid #f1f5f9}
.piv{overflow-x:auto}.piv table{min-width:100%}
.piv th:first-child,.piv td:first-child{position:sticky;left:0;background:#fff;z-index:1;box-shadow:1px 0 0 #e2e8f0;white-space:nowrap}
.piv thead th:first-child{background:#f1f5f9}
.page-informes .card td,.page-informes .card th{text-align:center}
.page-informes .card td:first-child,.page-informes .card th:first-child{text-align:left}
.piv tbody td{color:#1e293b}
.piv tbody tr:nth-child(even) td{background:#e9f1f8}
.piv tbody tr:nth-child(even) td:first-child{background:#dde8f3}
.piv tbody tr:hover td{background:#d7e6f5}
.piv tbody tr:hover td:first-child{background:#c9ddF0}
.cost{display:flex;gap:.6rem;align-items:end;flex-wrap:wrap;margin-top:.8rem}
.cost label{font-size:.78rem;color:var(--mut);display:flex;flex-direction:column;gap:.25rem}
.cost input{padding:.5rem .6rem;border:1px solid #cbd5e1;border-radius:8px}
.cost button{padding:.55rem 1.1rem;border:0;border-radius:8px;background:#16a34a;color:#fff;font-weight:600;cursor:pointer}
@media(max-width:900px){aside{display:none}main{margin:0}.grid2{grid-template-columns:1fr}}
body.login-page{background:#0f172a;color:#e2e8f0;display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-box{background:#1e293b;padding:2.2rem;border-radius:14px;width:340px;box-shadow:0 20px 60px #0008}
.login-box .brand{margin-bottom:1rem}
.login-sub{color:#94a3b8;font-size:.85rem;margin-bottom:1.2rem}
.login-box input{display:block;width:100%;margin:.5rem 0;padding:.65rem;border-radius:8px;border:1px solid #334155;
background:#0f172a;color:#fff}.login-box button{width:100%;padding:.7rem;border:0;border-radius:8px;
background:var(--acc);color:#fff;font-weight:600;cursor:pointer;margin-top:.4rem}
.login-err{color:#f87171;font-size:.85rem}
.kpi.green{border-top-color:#16a34a}
.kpi.orange{border-top-color:#d97706}
.kpi.purple{border-top-color:#7c3aed}