:root{
  --bg:#f7f1e8; --bg2:#efe6d8; --card:#fffdf9; --ink:#2b2621; --muted:#8a7f72;
  --grid:rgba(120,100,80,.14); --accent:#c65f3f; --accent2:#d99a4e; --accent3:#7c8f5a;
  --accent4:#4f8394; --line:#e6dccd; --shadow:0 6px 22px rgba(120,90,60,.10);
  --radius:16px;
}
[data-theme="dark"]{
  --bg:#191512; --bg2:#221d18; --card:#231e19; --ink:#ece3d6; --muted:#a2968a;
  --grid:rgba(230,215,195,.12); --accent:#e0805c; --accent2:#e6b06a; --accent3:#9bb072;
  --accent4:#6fa9ba; --line:#332b24; --shadow:0 6px 22px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink); background:
    radial-gradient(1200px 600px at 15% -10%, rgba(198,95,63,.08), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(217,154,78,.10), transparent 55%),
    linear-gradient(180deg,var(--bg),var(--bg2));
  min-height:100vh; -webkit-font-smoothing:antialiased; line-height:1.45;
}
.top{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:22px clamp(16px,4vw,40px) 8px; max-width:1180px; margin:0 auto;
}
.brand{display:flex; align-items:center; gap:14px}
.logo{font-size:34px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.15))}
h1{margin:0; font-size:clamp(20px,3vw,26px); letter-spacing:-.02em}
.plate{
  font-size:.62em; font-weight:700; letter-spacing:.08em; vertical-align:middle;
  background:var(--ink); color:var(--bg); padding:2px 8px; border-radius:6px; margin-left:6px;
}
.sub{margin:2px 0 0; color:var(--muted); font-size:13px}
.tema{
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  width:46px; height:46px; border-radius:50%; font-size:20px; cursor:pointer;
  box-shadow:var(--shadow); transition:transform .15s ease;
}
.tema:hover{transform:rotate(-12deg) scale(1.05)}
main{max-width:1180px; margin:0 auto; padding:8px clamp(16px,4vw,40px) 48px}

.kpis{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px; margin:18px 0;
}
.kpi{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.kpi::before{content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent)}
.kpi .val{font-size:clamp(20px,2.4vw,26px); font-weight:750; letter-spacing:-.02em; line-height:1.1}
.kpi .lab{font-size:12px; color:var(--muted); margin-top:4px; text-transform:uppercase; letter-spacing:.04em}

.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 20px; box-shadow:var(--shadow); margin:16px 0;
}
.card h2{margin:0 0 2px; font-size:17px; letter-spacing:-.01em}
.hint{margin:0 0 12px; color:var(--muted); font-size:12.5px}
.insights ul{margin:10px 0 0; padding-left:0; list-style:none}
.insights li{
  padding:10px 12px 10px 38px; position:relative; border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.insights li:last-child{border-bottom:0}
.insights li::before{content:"→"; position:absolute; left:12px; color:var(--accent); font-weight:700}
.badge{font-size:12px; color:var(--muted); font-weight:400}
.cargando{color:var(--muted); font-style:italic}

.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:16px; margin:16px 0}
.grid .card{margin:0}
.cv{position:relative; height:260px}
.cv-doughnut{height:300px}

.tabla-wrap{overflow-x:auto; margin-top:8px}
table{border-collapse:collapse; width:100%; font-size:13px; font-variant-numeric:tabular-nums}
th,td{padding:8px 10px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap}
th:first-child,td:first-child{text-align:left}
thead th{color:var(--muted); font-weight:600; text-transform:uppercase; font-size:11px; letter-spacing:.04em; position:sticky; top:0; background:var(--card)}
tbody tr:hover{background:rgba(198,95,63,.05)}

.pie{text-align:center; color:var(--muted); font-size:12px; margin-top:26px}
@media(max-width:560px){ .cv{height:230px} .kpi .val{font-size:20px} }