:root{--fondo:#f6f7f9;--panel:#fff;--texto:#16202c;--suave:#5b6878;--linea:#d9dfe6;--acento:#1f62c4;}
@media (prefers-color-scheme:dark){:root{--fondo:#10151c;--panel:#18202a;--texto:#e7edf4;--suave:#9aa7b6;--linea:#2c3744;--acento:#6ea4ee;}}
*{box-sizing:border-box}html,body{height:100%;margin:0}
body{font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--texto);background:var(--fondo);display:flex;flex-direction:column}
header{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;padding:8px 16px;background:var(--panel);border-bottom:1px solid var(--linea)}
h1{font-size:16px;margin:0;font-weight:650}h2{font-size:16px;margin:0 0 8px}
.control{display:flex;align-items:center;gap:6px;color:var(--suave)}
button,select,input{font:inherit;color:var(--texto);background:var(--panel);border:1px solid var(--linea);border-radius:6px;padding:4px 10px;min-height:32px}
button{cursor:pointer}button:hover{border-color:var(--acento)}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--acento);outline-offset:1px}
.op.activo{background:var(--acento);border-color:var(--acento);color:#fff}
.chip{font-size:12px;padding:2px 8px;border-radius:99px;background:var(--fondo);border:1px solid var(--linea);white-space:nowrap}
main{flex:1;min-height:0;display:grid;grid-template-columns:1fr 400px;position:relative}
#mapa{min-height:300px}
aside{background:var(--panel);border-left:1px solid var(--linea);padding:16px;overflow:auto}
.cifras{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:12px}
.cifra{border:1px solid var(--linea);border-radius:8px;padding:8px 10px}.cifra b{display:block;font-size:20px;font-weight:650;font-variant-numeric:tabular-nums}.cifra span{color:var(--suave);font-size:12px}
.nota{color:var(--suave);font-size:12.5px}
.leyenda{position:absolute;left:12px;bottom:28px;background:var(--panel);border:1px solid var(--linea);border-radius:8px;padding:6px 10px;display:flex;flex-direction:column;gap:2px;font-size:12px;z-index:2}
.leyenda i{display:inline-block;width:12px;height:12px;border:1px solid #7a8794;border-radius:2px;margin-right:6px;vertical-align:-2px}
#grafico{width:100%}
.uplot{font-family:inherit}.u-legend{font-size:12px;text-align:left}
.u-axis{color:var(--suave)}
@media (max-width:860px){main{grid-template-columns:1fr;grid-template-rows:55vh auto}aside{border-left:0;border-top:1px solid var(--linea)}.leyenda{bottom:auto;top:8px}}