:root{--navy:#081a45;--bg:#f5f7fb;--card:#fff;--line:#e6eaf2;--blue:#2563eb;--green:#16a34a;--purple:#7c3aed;--pink:#ec4899;--orange:#f97316;--text:#172033;--muted:#6b7280}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Tahoma,Arial,sans-serif;color:var(--text)}
.sidebar{position:fixed;right:0;top:0;width:280px;height:100vh;background:linear-gradient(180deg,#07183f,#0b1f50);color:white;padding:22px;overflow:auto}
.brand{display:flex;gap:12px;align-items:center;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:18px;margin-bottom:18px}.logo{width:48px;height:48px;border:2px solid #d7a63c;border-radius:14px;display:grid;place-items:center;color:#d7a63c;font-weight:900}.brand h2{margin:0}.brand p{margin:4px 0 0;color:#cbd5e1;font-size:13px}
nav button{width:100%;border:0;background:transparent;color:#fff;text-align:right;padding:13px 12px;border-radius:12px;font-weight:700;margin:3px 0;cursor:pointer}nav button.active,nav button:hover{background:#2563eb}.add{width:100%;padding:14px;border:0;border-radius:14px;background:#2563eb;color:white;font-weight:900;margin-top:18px}
.main{margin-right:280px;padding:22px}.topbar{display:flex;gap:20px;align-items:center;justify-content:space-between;margin-bottom:20px}.topbar h1{margin:0}.topbar p{margin:5px 0;color:var(--muted)}.topbar input{width:340px;max-width:45%;padding:14px;border:1px solid var(--line);border-radius:16px}.icons{font-size:22px;letter-spacing:10px}
.kpis,.bottom{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.grid{display:grid;grid-template-columns:1.2fr 1.2fr .9fr 1fr;gap:16px;margin-top:16px}.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:0 8px 24px rgba(15,23,42,.06)}.wide{grid-column:span 2}
h3{margin:0 0 14px}.kpi span{color:var(--muted);font-weight:700}.kpi b{display:block;font-size:30px;margin:10px 0}.kpi small{color:var(--muted)}.green b{color:var(--green)}.blue b{color:var(--blue)}.purple b{color:var(--purple)}.teal b{color:#0891b2}.orange b{color:var(--orange)}
.line{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:11px 0}.blueText{color:var(--blue)}.pinkText{color:var(--pink)}a{display:block;text-align:center;color:var(--blue);font-weight:800;margin-top:14px}
.bars{height:210px;display:flex;align-items:end;gap:18px;border-bottom:1px solid var(--line);padding:10px 5px}.bars i{flex:1;background:linear-gradient(180deg,#2563eb,#dbeafe);border-radius:10px 10px 0 0}
.donut{width:130px;height:130px;border-radius:50%;margin:auto;background:conic-gradient(#2563eb 0 40%,#22c55e 40% 65%,#f97316 65% 82%,#ec4899 82% 100%);position:relative}.donut:after{content:"";position:absolute;inset:28px;background:white;border-radius:50%}
.progress{margin:18px 0}.progress span{display:block;color:var(--muted)}.progress b{display:block;margin:6px 0}.progress em{display:block;height:8px;background:#2563eb;border-radius:99px}
.alerts{list-style:none;padding:0;margin:0}.alerts li{padding:11px;border-bottom:1px solid var(--line)}.alerts b{background:#eef2ff;border-radius:50%;padding:5px 9px;margin-left:8px}
table{width:100%;border-collapse:collapse}th,td{padding:12px;border-bottom:1px solid var(--line);text-align:right;font-size:14px}th{color:var(--muted)}.badge{padding:6px 10px;border-radius:99px;font-weight:800;font-size:12px}.orange{background:#ffedd5;color:#c2410c}.greenb{background:#dcfce7;color:#15803d}
.tree{display:grid;gap:10px}.tree span{border-right:3px solid #cbd5e1;padding-right:12px;color:#475569}
.bottom{margin-top:16px}
@media(max-width:900px){.sidebar{position:relative;width:100%;height:auto}.main{margin:0;padding:14px}.topbar{display:block}.topbar input{max-width:100%;width:100%;margin:12px 0}.kpis,.bottom,.grid{grid-template-columns:1fr}.wide{grid-column:auto}}