:root{
  --morado:#544595; --morado-d:#3a2d6b; --naranja:#F3930D; --magenta:#874088;
  --tinta:#241a3a; --gris:#6b647e; --bg:#faf8fd; --panel:#ffffff; --line:#e7e1f0;
  --verde:#1f9e4f; --rojo:#c0392b;
}
*{ box-sizing:border-box; }
body{ margin:0; background:var(--bg); color:var(--tinta); font-family:"Nunito Sans",Arial,sans-serif; line-height:1.5; }
.wrap{ max-width:1120px; margin:0 auto; padding:0 18px; }
a{ color:var(--morado); }
.top{ background:var(--morado-d); }
.top-in{ display:flex; align-items:center; justify-content:space-between; padding:10px 18px; }
.top .logo{ height:38px; }
.top .back{ color:#fff; text-decoration:none; font-weight:700; font-size:.85rem; opacity:.9; }
.hero{ background:linear-gradient(160deg,var(--morado) 0%, var(--morado-d) 70%, #2a1f52 100%); color:#fff; padding:34px 0 30px; }
.eyebrow{ color:var(--naranja); font-weight:900; letter-spacing:.12em; text-transform:uppercase; font-size:.72rem; margin:0 0 6px; }
.hero h1{ font-family:"Archivo Black"; font-size:2.5rem; line-height:1.02; margin:0 0 12px; }
.hero .lead{ max-width:70ch; color:#e8e3f5; font-size:1.02rem; }
.hero .lead b{ color:#fff; }
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:22px; }
.kpi{ background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:12px 14px; }
.kpi b{ display:block; font-family:"Archivo Black"; font-size:1.5rem; color:#fff; }
.kpi span{ font-size:.72rem; color:#d7cff0; }
main{ padding:24px 0 40px; }
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:16px 18px; margin:16px 0; box-shadow:0 1px 3px rgba(60,40,110,.05); }
.panel h2{ font-family:"Archivo Black"; color:var(--morado-d); font-size:1.15rem; margin:0 0 4px; }
.panel > p{ color:var(--gris); margin:0 0 12px; font-size:.9rem; }
.panel-head{ display:flex; flex-wrap:wrap; gap:12px; align-items:flex-start; justify-content:space-between; }
.modes,.tabs{ display:flex; flex-wrap:wrap; gap:6px; }
.modes button,.tabs button{ border:1px solid var(--line); background:#f3effa; color:var(--morado-d); font-weight:800; font-size:.78rem; padding:7px 11px; border-radius:999px; cursor:pointer; }
.modes button.active,.tabs button.active{ background:var(--morado); color:#fff; border-color:var(--morado); }
.map-wrap{ position:relative; }
#map{ height:560px; border-radius:12px; border:1px solid var(--line); background:#eef0f4; }
.legend{ position:absolute; right:12px; bottom:12px; background:rgba(255,255,255,.95); border:1px solid var(--line); border-radius:10px; padding:9px 11px; font-size:.72rem; z-index:500; box-shadow:0 1px 6px rgba(0,0,0,.08); }
.plegend{ right:auto; left:12px; bottom:12px; }
.mapbtn{ position:absolute; top:12px; right:12px; z-index:600; background:var(--morado); color:#fff; border:none; border-radius:999px; font-weight:800; font-size:.8rem; padding:8px 14px; cursor:pointer; box-shadow:0 2px 8px rgba(0,0,0,.25); }
.mapbtn:hover{ background:var(--morado-d); }
.backlink{ background:none; border:none; color:var(--morado); font-weight:800; font-size:.82rem; cursor:pointer; padding:0 0 8px; }
.backlink:hover{ text-decoration:underline; }
.legend h4{ margin:0 0 6px; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--gris); }
.legend .row{ display:flex; align-items:center; gap:6px; margin:2px 0; }
.legend i{ width:14px; height:14px; border-radius:3px; display:inline-block; }
.search-row{ display:flex; gap:10px; align-items:center; margin-top:12px; flex-wrap:wrap; }
#q{ flex:1; min-width:240px; padding:10px 13px; border:1px solid var(--line); border-radius:10px; font-size:.92rem; font-family:inherit; }
.hint{ font-size:.78rem; color:var(--gris); }
.detail{ }
.detail:empty{ display:none; }
.detail .card{ background:var(--panel); border:1px solid var(--line); border-left:6px solid var(--morado); border-radius:14px; padding:16px 18px; margin:16px 0; }
.detail .dh{ display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; }
.detail .dh h3{ font-family:"Archivo Black"; color:var(--morado-d); margin:0; font-size:1.25rem; }
.detail .dh .dep{ color:var(--gris); font-weight:700; }
.badge{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:.72rem; font-weight:800; }
.b-win{ background:#e9e3f6; color:var(--morado-d); } .b-lose{ background:#fbe6d6; color:#a8531f; }
.stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:10px; margin:12px 0; }
.stat{ background:#f6f3fc; border:1px solid var(--line); border-radius:10px; padding:9px 11px; }
.stat b{ display:block; font-size:1.15rem; color:var(--morado-d); font-family:"Archivo Black"; }
.stat span{ font-size:.7rem; color:var(--gris); }
.txt{ font-size:.92rem; }
.eval{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.eval .panel{ margin:0; }
.bars{ display:flex; flex-direction:column; gap:7px; }
.bar{ cursor:default; }
.bar .bl{ display:flex; justify-content:space-between; font-size:.82rem; margin-bottom:2px; }
.bar .bl b{ color:var(--tinta); } .bar .bl span{ color:var(--gris); font-weight:700; }
.bar .track{ background:#efeaf7; border-radius:6px; height:14px; overflow:hidden; }
.bar .fill{ height:100%; border-radius:6px; }
.fill.pos{ background:var(--morado); } .fill.neg{ background:var(--naranja); }
.fill.swneg{ background:var(--rojo); } .fill.swpos{ background:var(--verde); }
.routes{ display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:10px; }
.muni{ text-align:left; background:#f7f4fc; border:1px solid var(--line); border-radius:10px; padding:9px 11px; cursor:pointer; font-family:inherit; }
.muni:hover{ border-color:var(--morado); }
.muni .mn{ font-weight:800; color:var(--morado-d); }
.muni .md{ font-size:.74rem; color:var(--gris); }
.muni .mv{ font-size:.8rem; margin-top:3px; }
.foot{ background:#efeaf7; border-top:1px solid var(--line); padding:18px 0; margin-top:24px; }
.foot p{ font-size:.78rem; color:var(--gris); margin:4px 0; }
.ruta-tag{ display:inline-block; padding:2px 10px; border-radius:999px; font-size:.72rem; font-weight:800; background:#efe9f8; color:var(--morado-d); }
.deeplink{ display:inline-block; margin-top:8px; font-weight:800; font-size:.84rem; color:var(--morado-d); background:#efe9f8; border:1px solid var(--line); border-radius:8px; padding:7px 11px; text-decoration:none; }
.deeplink:hover{ background:#e4dcf4; }
.strat-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:10px; }
.sc{ border:1px solid var(--line); border-radius:10px; padding:10px 12px; border-left:5px solid var(--morado); }
.sc b{ display:block; color:var(--morado-d); font-size:.92rem; margin-bottom:3px; } .sc span{ font-size:.78rem; color:var(--gris); }
.sc-cons{ border-left-color:#1f5d3a; } .sc-cuid{ border-left-color:#3f9e6b; } .sc-fren{ border-left-color:var(--naranja); } .sc-semb{ border-left-color:#b6543a; }
.deep-row{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.deepbtn{ display:block; border:1px solid var(--line); border-radius:10px; padding:12px 14px; text-decoration:none; background:#f7f4fc; }
.deepbtn:hover{ border-color:var(--morado); }
.deepbtn b{ color:var(--morado-d); font-size:1rem; } .deepbtn span{ display:block; font-size:.78rem; color:var(--gris); margin-top:3px; }
@media(max-width:740px){ .deep-row{ grid-template-columns:1fr; } }
.dsel{ display:flex; flex-direction:column; gap:3px; } .dsel span{ font-size:.7rem; color:var(--gris); font-weight:700; }
#deptSel{ padding:9px 12px; border:1px solid var(--line); border-radius:10px; font-size:.9rem; font-family:inherit; min-width:230px; background:#fff; }
.dept-card .dh{ display:flex; gap:10px; align-items:center; margin-bottom:8px; }
.dept-card .dh h3{ font-family:"Archivo Black"; color:var(--morado-d); margin:0; font-size:1.2rem; }
.mun-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px; margin-top:12px; }
.puestos{ margin-top:14px; border-top:1px dashed var(--line); padding-top:10px; }
.puestos h4{ margin:0 0 6px; color:var(--morado-d); font-size:.92rem; }
.ptbl{ max-height:330px; overflow:auto; border:1px solid var(--line); border-radius:8px; }
.ptbl table{ margin:0; } .ptbl th{ position:sticky; top:0; }
.leaflet-container{ font-family:inherit; }
@media(max-width:740px){
  .hero h1{ font-size:2rem; } .kpis{ grid-template-columns:1fr 1fr; } .eval{ grid-template-columns:1fr; }
  #map{ height:440px; }
}