:root{
  --bg:#060907;--bg-alt:#0a0f0b;--surface:#0e1610;--surface-2:#131d16;--line:#1c2e21;
  --green:#6EFF4F;--green-soft:#9CFF7E;--green-deep:#1f7a2e;--green-dim:#2a5c35;
  --magenta:#FF3FA4;--cyan:#35E0E0;--yellow:#FFE94F;
  --text:#EFFFEA;--text-dim:#9DB8A8;--text-faint:#4C6656;
  --f-display:'Bungee','Arial Black',sans-serif;
  --f-mono:'JetBrains Mono','Courier New',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
body.map-page{
  height:100vh;display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(circle at 50% 40%,rgba(110,255,79,.06),transparent 55%),var(--bg);
  color:var(--text);font-family:var(--f-mono);-webkit-font-smoothing:antialiased;
}

/* ── Header ── */
.map-header{
  height:56px;flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:0 clamp(12px,3vw,28px);border-bottom:1px solid var(--line);background:rgba(6,9,7,.92);
}
.map-brand{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:400 15px var(--f-display);letter-spacing:.02em}
.map-brand img{width:36px;height:36px;object-fit:contain}
.map-brand b{color:var(--green);font-weight:400}
.map-status{display:flex;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.14em;color:var(--text-dim)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--text-faint)}
.status-dot.online{background:var(--green);box-shadow:0 0 8px var(--green)}
.status-dot.offline{background:var(--magenta)}
.status-dot.paused{background:var(--yellow)}
.clock{color:var(--green);margin-left:10px}

/* ── Layout ── */
.map-main{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:260px minmax(0,1fr) 280px;gap:0}
.side{min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding:12px}
.side-left{border-right:1px solid var(--line)}
.side-right{border-left:1px solid var(--line)}

.panel{border:1px solid var(--green-dim);background:rgba(14,22,16,.85);padding:12px}
.panel-title{font:400 12px var(--f-display);letter-spacing:.08em;color:var(--green);margin-bottom:10px;text-transform:uppercase}
.panel-title .muted{float:right;font:400 10px var(--f-mono);letter-spacing:0;color:var(--text-faint);text-transform:none}

.kpis{display:grid;gap:2px}
.kpis div{display:flex;justify-content:space-between;align-items:baseline;padding:9px 0;border-bottom:1px solid var(--line);font-size:11px;color:var(--text-dim)}
.kpis div:last-child{border-bottom:0}
.kpis dd{font:400 16px var(--f-display);color:var(--text)}
.note{margin-top:12px;font-size:10px;line-height:1.5;color:var(--text-faint)}
.empty{font-size:11px;color:var(--text-faint)}

/* ── Severidad ── */
.band-row{display:grid;grid-template-columns:1fr auto;gap:6px;margin-bottom:10px;font-size:11px}
.band-row span:last-child{color:var(--text)}
.bar-track{grid-column:1/-1;height:6px;background:var(--surface-2)}
.bar-fill{height:100%;transition:width .4s}

/* ── Globo ── */
.globe-wrap{position:relative;min-width:0;min-height:0;overflow:hidden}
#globe{position:absolute;inset:0;background:var(--bg)}
.globe-loading{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:var(--bg);font:800 11px var(--f-mono);letter-spacing:.14em;color:var(--green)}
.globe-loading.hidden{display:none}
#flatMap{position:absolute;inset:0;z-index:1;background:var(--bg)}
#flatMap svg{width:100%;height:100%;display:block}
.flat-tip{position:absolute;z-index:4;display:none;pointer-events:none;white-space:nowrap}
/* Marcadores de país afectado sobre el globo */
.ctry-mark{
  padding:2px 6px;background:rgba(6,9,7,.85);border:1px solid var(--c);
  color:var(--c);font:700 10px var(--f-mono);letter-spacing:.04em;white-space:nowrap;
  pointer-events:none;transform:translate(-50%,-50%);
}
.legend .sub{margin-top:14px;font-size:9px;letter-spacing:.12em;color:var(--text-faint);text-transform:uppercase}
.legend .note{margin-top:8px}
/* Flujo de puntos sobre los arcos del mapa plano */
.flat-arc{stroke-dasharray:6 4;animation:flatDash 1.2s linear infinite}
@keyframes flatDash{to{stroke-dashoffset:-10}}
.view-btn{
  position:absolute;right:14px;top:14px;z-index:3;padding:9px 14px;cursor:pointer;
  border:1px solid var(--green);background:rgba(6,9,7,.85);color:var(--green);
  font:800 11px var(--f-mono);letter-spacing:.12em;
}
.view-btn[aria-pressed="true"]{background:var(--green);color:#031006}
#globe canvas{display:block}
.pause-btn{
  position:absolute;left:14px;bottom:14px;z-index:3;padding:9px 14px;cursor:pointer;
  border:1px solid var(--green);background:rgba(6,9,7,.85);color:var(--green);
  font:800 11px var(--f-mono);letter-spacing:.12em;
}
.pause-btn[aria-pressed="true"]{background:var(--green);color:#031006}
.band-cards{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;display:flex;gap:6px}
.band-card{min-width:110px;padding:7px 12px;background:rgba(6,9,7,.9);border:1px solid var(--line);border-top:2px solid var(--c);text-align:center}
.band-card span{display:block;font-size:9px;letter-spacing:.12em;color:var(--text-dim)}
.band-card strong{display:block;font:400 18px var(--f-display);color:var(--text)}

.globe-tooltip{background:var(--bg-alt);border:1px solid var(--green-dim);padding:6px 10px;font:12px var(--f-mono);color:var(--text)}

/* ── Top países / L3 / tendencia ── */
.country-row{display:grid;grid-template-columns:1fr auto;gap:4px 8px;margin-bottom:9px;font-size:11px}
.country-row span:last-child{color:var(--text)}
.trend-avg{font-size:11px;color:var(--magenta);margin-bottom:6px}
.trend-chart{width:100%;height:90px;display:block}
.trend-chart .area{fill:rgba(255,63,164,.16)}
.trend-chart .line{fill:none;stroke:var(--magenta);stroke-width:2;vector-effect:non-scaling-stroke}

/* ── Bottom: tabla y leyenda ── */
.bottom{flex:0 0 220px;height:220px;display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:10px;padding:10px 12px;border-top:1px solid var(--line);overflow:hidden}
.table-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.table-wrap{flex:1 1 auto;min-height:0;overflow-y:auto}
table.events{width:100%;border-collapse:collapse;font-size:11px}
table.events th{position:sticky;top:0;background:var(--surface);text-align:left;font-weight:700;color:var(--text-faint);padding:6px 8px;border-bottom:1px solid var(--line);letter-spacing:.08em;font-size:9px;text-transform:uppercase}
table.events td{padding:6px 8px;border-bottom:1px solid var(--line);color:var(--text-dim)}
table.events td:first-child{color:var(--text-faint)}
table.events tr.fresh td{color:var(--text)}
.sev{font-weight:800}

.legend ul{list-style:none;display:grid;gap:8px;font-size:11px;color:var(--text-dim)}
.legend li{display:flex;align-items:center;gap:8px}
.swatch{width:10px;height:10px;display:inline-block}

/* ── Responsive ── */
@media(max-width:1100px){
  body.map-page{height:auto;overflow:auto}
  .map-main{grid-template-columns:1fr;grid-template-rows:60vh auto auto}
  .side-left,.side-right{border:0;flex-direction:row;flex-wrap:wrap}
  .side-left .panel,.side-right .panel{flex:1 1 220px}
  .bottom{flex:none;grid-template-columns:1fr}
  .band-cards{display:none}
}
@media(max-width:520px){
  .map-brand span{font-size:12px}
  .map-status span:nth-child(2){display:none}
}
.sub-title{margin:12px 0 6px;font-size:9px;letter-spacing:.12em;color:var(--text-faint);text-transform:uppercase}