:root { --azul:#0b3a66; --azul2:#04162b; --verde:#2e9e4f; --verde2:#8dc63f; --rojo:#d8343f; --ambar:#e8a317; --texto:#1f2937; --tenue:#64748b; --borde:#dfe6ee; --fondo:#f3f6fa; --card:#fff; }
* { box-sizing:border-box; }
body { margin:0; font-family:Montserrat, Arial, sans-serif; color:var(--texto); background:var(--fondo); font-size:14px; }
.cab { background:linear-gradient(120deg, var(--azul2), var(--azul)); color:#fff; }
.cab-in { max-width:1320px; margin:0 auto; padding:14px 16px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.logo { width:52px; height:52px; object-fit:contain; }
.marca h1 { margin:0; font-size:22px; font-weight:800; }
.eyebrow { color:var(--verde2); font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:800; }
.tabs { margin-left:auto; display:flex; gap:6px; flex-wrap:wrap; }
.tabs button { background:transparent; border:1px solid rgba(255,255,255,.3); color:#fff; padding:8px 14px; border-radius:8px; font:inherit; font-weight:600; cursor:pointer; }
.tabs button.on { background:#fff; color:var(--azul); }
.filtros { max-width:1320px; margin:14px auto 0; padding:0 16px; display:flex; gap:12px 24px; flex-wrap:wrap; align-items:center; }
.f-grupo { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.f-lab { font-weight:700; color:var(--azul); }
.seg { display:inline-flex; border:1px solid var(--borde); border-radius:8px; overflow:hidden; background:#fff; }
.seg button { border:0; background:transparent; padding:7px 12px; font:inherit; cursor:pointer; }
.seg button.on { background:var(--azul); color:#fff; }
input, select { font:inherit; padding:7px 10px; border:1px solid var(--borde); border-radius:8px; background:#fff; color:var(--texto); }
.chk { display:flex; gap:6px; align-items:center; color:var(--tenue); }
main { max-width:1320px; margin:0 auto; padding:14px 16px 80px; }
.tab { display:none; } .tab.on { display:block; }
.kpis { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; margin-bottom:12px; }
.kpi { background:var(--card); border:1px solid var(--borde); border-radius:10px; padding:12px 14px; border-left:5px solid var(--azul); }
.kpi b { display:block; font-family:'Barlow Condensed', Arial, sans-serif; font-size:34px; line-height:1; color:var(--azul); }
.kpi span { color:var(--tenue); font-size:12px; }
.kpi.pos { border-left-color:var(--verde); } .kpi.pos b { color:var(--verde); }
.kpi.neu { border-left-color:var(--ambar); } .kpi.neu b { color:#b07a08; }
.kpi.neg { border-left-color:var(--rojo); } .kpi.neg b { color:var(--rojo); }
.kpi.marca { border-left-color:var(--verde2); }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit, minmax(320px, 1fr)); gap:12px; }
.card { background:var(--card); border:1px solid var(--borde); border-radius:12px; padding:14px 16px; min-width:0; }
.card.ancho { grid-column:1 / -1; }
.card h2 { margin:0 0 10px; font-size:15px; color:var(--azul); }
.card h2 small { color:var(--tenue); font-weight:500; }
.nota { color:var(--tenue); font-size:12px; margin:8px 0 0; }
.tenue { color:var(--tenue); }
.barras .fila { display:grid; grid-template-columns:minmax(90px, 38%) 1fr 44px; gap:8px; align-items:center; margin:5px 0; font-size:13px; }
.barras .fila span:first-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.barras .b { height:12px; background:var(--azul); border-radius:3px; min-width:2px; }
.barras .n { text-align:right; font-weight:700; }
.chart svg { width:100%; height:auto; display:block; }
.leyenda { display:flex; gap:14px; font-size:12px; color:var(--tenue); margin-top:6px; flex-wrap:wrap; }
.leyenda i { display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:4px; vertical-align:-1px; }
.temas { margin:0; padding-left:20px; } .temas li { margin:6px 0; } .temas b { color:var(--azul); }
.pill { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px; font-weight:700; white-space:nowrap; }
.pill.Positivo { background:#dcf3e3; color:#16683a; } .pill.Neutro { background:#fdf0d2; color:#8a5d00; } .pill.Negativo { background:#fde0e2; color:#a21d27; } .pill.pend { background:#e8edf3; color:var(--tenue); }
.dest { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:10px; }
.dest a { display:block; border:1px solid var(--borde); border-radius:10px; padding:10px 12px; color:inherit; text-decoration:none; }
.dest a:hover { border-color:var(--azul); }
.dest h3 { margin:6px 0 4px; font-size:13.5px; } .dest p { margin:0; font-size:12px; color:var(--tenue); }
.barra { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.barra input[type=search] { flex:1 1 240px; }
.btn { background:var(--azul); color:#fff; border:0; border-radius:8px; padding:8px 14px; font:inherit; font-weight:600; cursor:pointer; text-decoration:none; display:inline-block; }
.btn.sec { background:#fff; color:var(--azul); border:1px solid var(--azul); }
.btn:disabled { opacity:.6; cursor:wait; }
.tabla-wrap { overflow-x:auto; background:#fff; border:1px solid var(--borde); border-radius:12px; }
.tabla { width:100%; border-collapse:collapse; font-size:13px; min-width:860px; }
.tabla th { background:var(--azul); color:#fff; text-align:left; padding:9px 10px; position:sticky; top:0; }
.tabla td { border-bottom:1px solid var(--borde); padding:8px 10px; vertical-align:top; }
.tabla td a { color:var(--azul); font-weight:600; text-decoration:none; } .tabla td a:hover { text-decoration:underline; }
.tabla .res { color:var(--tenue); font-size:12px; margin-top:3px; }
.tabla select { padding:3px 6px; font-size:12px; }
.pag { display:flex; gap:6px; margin-top:10px; flex-wrap:wrap; }
.pal-grupo h2 { display:flex; justify-content:space-between; }
.pal { display:flex; align-items:center; gap:8px; padding:6px 0; border-bottom:1px solid var(--borde); }
.pal:last-child { border-bottom:0; }
.pal .t { flex:1; } .pal.off .t { color:var(--tenue); text-decoration:line-through; }
.pal .c { font-size:12px; color:var(--tenue); white-space:nowrap; }
.pal button { border:1px solid var(--borde); background:#fff; border-radius:6px; padding:3px 8px; cursor:pointer; font-size:12px; }
.pie { position:fixed; bottom:0; left:0; right:0; background:#fff; border-top:1px solid var(--borde); padding:8px 16px; display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:12px; color:var(--tenue); z-index:5; }
.vacio { color:var(--tenue); padding:20px 0; text-align:center; }
@media (max-width:640px) { .tabs { margin-left:0; } .marca h1 { font-size:18px; } .kpi b { font-size:28px; } }
.tab-link { color:#fff; border:1px dashed rgba(255,255,255,.45); padding:8px 14px; border-radius:8px; font-weight:600; text-decoration:none; }

/* ================= Radar ================= */
.rd { --rd-lado:#13263a; --rd-tiempo:#0d1d2e; --rd-mapa:#071420; --rd-linea:#20405a; --rd-txt:#dbe7f1; --rd-tenue:#7f9bb2;
  display:grid; grid-template-columns:300px 150px minmax(0, 1fr); height:max(600px, calc(100vh - 210px)); border-radius:16px; overflow:hidden; color:var(--rd-txt); background:var(--rd-mapa); box-shadow:0 14px 40px rgba(4,22,43,.25); }
.rd-lado { background:var(--rd-lado); padding:26px 22px; overflow:auto; }
.rd-titulo { font-size:30px; line-height:1.08; letter-spacing:.04em; text-transform:uppercase; font-weight:700; margin:0 0 14px; color:#fff; }
.rd-desc { color:var(--rd-tenue); font-size:13px; line-height:1.55; margin:0 0 22px; }
.rd-sub { color:var(--rd-tenue); font-size:12px; letter-spacing:.14em; text-transform:uppercase; font-weight:600; margin:18px 0 8px; }
.rd-temas { list-style:none; margin:0; padding:0; }
.rd-temas li { display:flex; align-items:center; gap:10px; padding:6px 0; font-size:13.5px; transition:opacity .2s; }
.rd-temas li.off { opacity:.38; } .rd-temas li.cero .nom { color:var(--rd-tenue); }
.rd-temas .num { font-family:'Barlow Condensed', Arial; color:#5eead4; font-weight:700; width:20px; }
.rd-temas .pt { width:14px; height:14px; border-radius:50%; box-shadow:0 0 0 3px rgba(255,255,255,.06); }
.rd-temas .nom { flex:1; } .rd-temas .cnt { color:var(--rd-tenue); font-size:12px; min-width:18px; text-align:right; }
.rd-temas .ojo { background:transparent; border:0; color:#9fb6c8; cursor:pointer; padding:2px; display:grid; place-items:center; border-radius:6px; }
.rd-temas .ojo:hover, .rd-temas .ojo:focus-visible { color:#fff; background:rgba(255,255,255,.08); outline:none; }
.rd-tiempo { position:relative; background:var(--rd-tiempo); border-left:1px solid #1a3247; border-right:1px solid #1a3247; outline:none; }
.rd-tiempo:focus-visible { box-shadow:inset 0 0 0 2px #3b82f6; }
.rd-dias { position:absolute; inset:0; overflow-y:auto; scrollbar-width:none; display:flex; flex-direction:column; cursor:ns-resize; user-select:none; touch-action:none; }
.rd-dias::-webkit-scrollbar { display:none; }
.rd-dias .dia { flex:1 0 34px; display:flex; align-items:center; gap:6px; padding:0 8px 0 10px; border-bottom:1px solid #132b3f; position:relative; transition:background .2s; }
.rd-dias .dia:hover { background:rgba(255,255,255,.03); } .rd-dias .dia.sel { background:rgba(59,130,246,.16); }
.rd-dias .lab { font-size:10.5px; letter-spacing:.06em; color:var(--rd-tenue); white-space:nowrap; width:44px; }
.rd-dias .dia.sin .lab { opacity:.55; }
.rd-dias .pts { display:flex; flex-wrap:wrap; gap:3px; flex:1; }
.rd-dias .pts i { width:6px; height:6px; border-radius:50%; display:block; opacity:.9; }
.rd-marca { position:absolute; left:-10px; right:-10px; top:8px; z-index:3; background:#2f7fd6; color:#fff; border:0; border-radius:8px; padding:7px 8px; font:inherit; font-size:11.5px; font-weight:700; letter-spacing:.06em;
  box-shadow:0 6px 16px rgba(47,127,214,.45); cursor:pointer; transition:top .35s cubic-bezier(.2,.8,.2,1); pointer-events:auto; }
.rd-marca::before, .rd-marca::after { content:''; position:absolute; top:50%; margin-top:-5px; border:5px solid transparent; }
.rd-marca::after { right:-9px; border-left-color:#2f7fd6; } .rd-marca::before { left:-9px; border-right-color:#2f7fd6; }
.rd-mapa { position:relative; overflow:hidden; background:radial-gradient(circle at 50% 50%, #0b2236 0%, #071420 62%); }
.rd-mapa svg { position:absolute; inset:0; width:100%; height:100%; }
.rd-barrido { position:absolute; border-radius:50%; pointer-events:none; mix-blend-mode:screen;
  background:conic-gradient(from 0deg, rgba(94,234,212,0) 0deg, rgba(94,234,212,0) 290deg, rgba(94,234,212,.10) 330deg, rgba(94,234,212,.38) 359deg, rgba(94,234,212,0) 360deg);
  animation:rd-giro 6s linear infinite; }
@keyframes rd-giro { to { transform:rotate(360deg); } }
.blip { cursor:pointer; transition:opacity .35s; } .blip:focus { outline:none; }
.blip .nucleo { transition:r .3s; } .blip:hover .nucleo, .blip:focus .nucleo { stroke:#fff; stroke-width:2.5; }
.blip .halo { opacity:0; transform-box:fill-box; transform-origin:center; animation:rd-ping 6s linear infinite; }
@keyframes rd-ping { 0% { opacity:.55; transform:scale(.4); } 12% { opacity:0; transform:scale(1.3); } 100% { opacity:0; } }
.blip.tenue { opacity:.14; } .blip.tenue .halo { animation:none; }
.blip.foco .halo { animation:rd-foco 1.6s ease-out infinite; }
@keyframes rd-foco { 0% { opacity:.5; transform:scale(.5); } 100% { opacity:0; transform:scale(1.4); } }
.rd-hud { position:absolute; left:16px; right:16px; bottom:14px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px; color:var(--rd-tenue); }
.rd-hud span { margin-right:auto; letter-spacing:.04em; }
.rd-btn { background:rgba(255,255,255,.06); color:var(--rd-txt); border:1px solid #24435c; border-radius:20px; padding:6px 14px; font:inherit; font-size:12px; font-weight:600; cursor:pointer; backdrop-filter:blur(6px); }
.rd-btn:hover { background:rgba(255,255,255,.12); }
.rd-ficha { position:absolute; z-index:5; width:min(360px, calc(100% - 24px)); background:rgba(19,38,58,.72); backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  border:1px solid rgba(143,179,201,.22); border-radius:12px; padding:16px 18px 14px; box-shadow:0 18px 40px rgba(0,0,0,.45); animation:rd-entra .22s ease-out; }
@keyframes rd-entra { from { opacity:0; transform:translateY(6px) scale(.98); } }
.rd-ficha .x { position:absolute; right:8px; top:8px; background:transparent; border:0; color:var(--rd-tenue); cursor:pointer; font-size:14px; }
.rd-ficha .f-tit { font-size:15px; font-weight:700; letter-spacing:.02em; color:#fff; padding-right:18px; line-height:1.3; }
.rd-ficha .f-sub { color:var(--rd-tenue); font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin:4px 0 12px; }
.rd-ficha dl { display:grid; grid-template-columns:96px 1fr; gap:6px 12px; margin:0; font-size:13px; }
.rd-ficha dt { color:var(--rd-tenue); } .rd-ficha dd { margin:0; color:var(--rd-txt); line-height:1.4; }
.rd-ficha .pt { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:0; }
.rd-ficha a { color:#7cc4ff; }
@media (max-width:980px) { .rd { grid-template-columns:96px minmax(0, 1fr); grid-template-rows:minmax(460px, 70vh) auto; height:auto; }
  .rd-lado { grid-column:1 / -1; grid-row:2; } .rd-tiempo { grid-row:1; } .rd-mapa { grid-row:1; }
  .rd-dias .pts { display:none; } .rd-marca { font-size:10px; left:-4px; right:-4px; } .rd-titulo { font-size:22px; } }
@media (prefers-reduced-motion: reduce) { .blip .halo, .rd-barrido { animation:none; } }