/* =============================================================================
   BRIEFING (v2, cambios-v2 §4)
   Escritorio: contadores a todo el ancho y debajo top (1,5 fr) · mapa (1 fr) · radar
   (300 px); el primer pantallazo cabe en 1440 × 900. Debajo: resumen · países · puertos
   y prensa. 761–1179 px: contadores 3 × 2, top a todo el ancho, mapa y radar lado a
   lado. ≤ 760 px: una columna.
   ============================================================================= */
.brief { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 300px; grid-template-areas: "kpis kpis kpis" "top map radar"; align-items: stretch; }
.kpis { grid-area: kpis; }
.top10 { grid-area: top; }
.mapp { grid-area: map; }
.radarp { grid-area: radar; }
.more { display: grid; gap: var(--gap); margin-top: var(--gap); grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 300px; grid-template-areas: "sum geo ports" "news geo ports"; align-items: start; }
.sum { grid-area: sum; } .geo { grid-area: geo; } .ports { grid-area: ports; } .newsp { grid-area: news; }
.muted-line { margin: 0; font-size: var(--fs-small); color: var(--text-3); padding: 6px 0; }

/* ---------- Contadores: un panel, 6 celdas separadas por filetes ---------- */
.kpis { display: grid; grid-template-columns: 2.1fr repeat(5, minmax(0, 1fr)); margin: 0; }
.kpi { display: grid; align-content: start; gap: 2px; min-width: 0; min-height: 103px; padding: 8px 14px 9px; border-left: 1px solid var(--line-2); }
.kpi:first-child { border-left: 0; }
.kpi dt { font-family: var(--f-mono); font-stretch: var(--mono-stretch); font-size: var(--fs-label); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi dd { margin: 0; }
.kpi__row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kpi__v { font-family: var(--f-display); font-weight: 800; font-size: var(--fs-kpi); line-height: 1; font-variant-numeric: tabular-nums; }
.kpi__d, .kpi__sub { font-family: var(--f-mono); font-stretch: var(--mono-stretch); font-size: 11px; color: var(--text-3); }
.kpi__d .up { color: var(--warn); } .kpi__d .down { color: var(--ok); }
.kpi__sub { line-height: 1.35; }
.kpi__short { display: none; }
.kpi--kev .kpi__v { color: var(--sev-critical); }
.kpi--kev .kpi__sub { color: var(--kev-title); }
.kpi--stack .kpi__v { color: var(--ok); }
.kpi--zero .kpi__v { color: var(--text-3); }
.split { display: flex; height: 5px; gap: 1px; margin-top: 5px; }
.split i { display: block; height: 100%; }
.split__legend { display: flex; flex-wrap: wrap; gap: 2px 10px; margin-top: 3px; font-family: var(--f-mono); font-stretch: var(--mono-stretch); font-size: 10.5px; color: var(--text-3); }
.split__legend b { color: var(--text-2); font-weight: 500; }

/* ---------- Mapa de origen de ataques (cambios-v2 §6) ---------- */
.map-body { position: relative; flex: 1; padding: 0; min-height: 420px; display: flex; }
.globe-box { position: relative; flex: 1; min-height: 100%; overflow: hidden; touch-action: pan-y; }
.globe { position: absolute; inset: 0; cursor: grab; }
.globe:active { cursor: grabbing; }
.globe canvas { outline: none; }
.globe-flat { position: absolute; inset: 16px; display: none; }
.globe-flat svg { width: 100%; height: 100%; }
.globe-box.is-flat .globe { display: none; }
.globe-box.is-flat .globe-flat { display: block; }
.zoom { position: absolute; top: 10px; right: 10px; z-index: 3; display: grid; gap: 4px; }
.zoom button { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--line-3); border-radius: var(--radius); background: rgba(16, 22, 29, .9); color: var(--text-1); cursor: pointer; }
.zoom button:hover { border-color: var(--text-2); }
.zoom button svg { width: 14px; height: 14px; }
.map-legend { position: absolute; left: 12px; bottom: 10px; z-index: 3; display: grid; gap: 4px; font-family: var(--f-mono); font-stretch: var(--mono-stretch); font-size: 10.5px; color: var(--text-3); pointer-events: none; }
.map-legend__keys { display: flex; gap: 12px; }
.map-legend__keys span { display: inline-flex; align-items: center; gap: 5px; }
.map-legend__keys i { display: inline-block; border-radius: var(--radius-dot); }
.lg-hi { width: 11px; height: 11px; background: var(--map-hi); }
.lg-mid { width: 8px; height: 8px; background: var(--map-mid); }
.lg-lo { width: 6px; height: 6px; background: var(--map-lo); }
.map-flat-note { position: absolute; top: -6px; left: 0; z-index: 3; font-family: var(--f-mono); font-stretch: var(--mono-stretch); font-size: 10.5px; color: var(--warn); }
.ff-land { fill: rgba(126, 152, 178, .45); }
.ff-dot { fill-opacity: .9; }
.ff--hi { fill: var(--map-hi); stroke: var(--map-hi); } .ff--mid { fill: var(--map-mid); stroke: var(--map-mid); } .ff--lo { fill: var(--map-lo); stroke: var(--map-lo); }
.ff-ring { transform-box: fill-box; transform-origin: center; fill: none; animation: gm-ring var(--t-pulse) ease-out infinite; animation-delay: var(--d, 0s); }
.ff-lbl { font-family: var(--f-mono); font-size: 8px; fill: var(--text-1); }

/* Marcador de país sobre el globo (capa htmlElementsData de globe.gl): un solo anillo de pulso */
.gm { position: relative; width: 0; height: 0; pointer-events: none; }
.gm--hi { --c: var(--map-hi); } .gm--mid { --c: var(--map-mid); } .gm--lo { --c: var(--map-lo); }
.gm__dot, .gm__ring { position: absolute; left: 0; top: 0; width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2); border-radius: var(--radius-dot); }
.gm__dot { background: var(--c); opacity: .9; box-shadow: 0 0 0 1px rgba(10, 14, 19, .8); }
.gm__ring { border: 1px solid var(--c); opacity: 0; animation: gm-ring var(--t-pulse) ease-out infinite; animation-delay: var(--d); }
.gm__lbl { position: absolute; left: calc(var(--s) / 2 + 5px); top: -8px; white-space: nowrap; padding: 1px 4px; background: rgba(10, 14, 19, .82); font-family: var(--f-mono); font-stretch: var(--mono-stretch); font-size: 10.5px; color: var(--text-1); }
.gm__lbl em { font-style: normal; color: var(--text-3); margin-left: 4px; }
@keyframes gm-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(2.6); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gm__ring, .ff-ring { display: none; } }

/* ---------- Radar de urgencia (cambios-v2 §8) ---------- */
.radarp .panel__body { display: grid; gap: 8px; justify-items: center; align-content: start; }
.radar { display: block; width: 100%; max-width: 300px; height: auto; }
.radar__disc { fill: #0C1117; stroke: var(--line-3); }
.radar__tick { stroke: var(--line-2); }
.radar__tick--major { stroke: var(--line-3); }
.radar__sector { stroke: var(--line-1); }
.radar__lbl { font-family: var(--f-mono); font-size: 14px; fill: var(--text-2); }
.radar__lbl--none { fill: var(--text-3); }
.radar__ring { fill: none; stroke: var(--line-2); }
.radar__ring--hoy { stroke: rgba(255, 79, 109, .6); stroke-dasharray: 2 3; }
.radar__ringlbl { font-family: var(--f-mono); font-size: 11.5px; fill: var(--text-3); }
.radar__ringlbl--hoy { fill: var(--kev-title); }
.radar__beam { stroke: var(--ok); stroke-opacity: .8; }
.radar__center { fill: var(--ok); }
.radar__sweep { transform-origin: 150px 150px; animation: spin var(--t-radar) linear infinite; }
.blip .hit { fill: transparent; }
.blip .core { fill: var(--vc); transform-box: fill-box; transform-origin: center; animation: blip var(--t-radar) linear infinite; animation-delay: var(--delay); }
.blip:focus { outline: none; }
.blip:hover .hit, .blip:focus-visible .hit { stroke: var(--text-1); stroke-width: 1.2; }
@keyframes blip { 0% { transform: scale(1.8); opacity: 1; } 8% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: .45; } }
.radar-tip { min-height: 18px; font-family: var(--f-mono); font-stretch: var(--mono-stretch); font-size: 11px; color: var(--text-1); text-align: center; }
.radar-legend { width: 100%; display: grid; gap: 6px; font-family: var(--f-mono); font-stretch: var(--mono-stretch); font-size: 11px; color: var(--text-3); }
.vdist { display: grid; margin: 0; padding: 0; list-style: none; }
.vdist li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line-1); }
.vdist li:last-child { border-bottom: 0; }
.vdist b { font-family: var(--f-mono); font-size: 12px; color: var(--text-1); font-variant-numeric: tabular-nums; }
.vdist li.is-zero .vtag, .vdist li.is-zero b { opacity: .5; }

/* ---------- Resumen del día ---------- */
.sum__p { margin: 0 0 10px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; max-width: 70ch; }
.edmeta { margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; padding-top: 10px; border-top: 1px solid var(--line-1); }
.edmeta div { display: grid; gap: 2px; }
.edmeta dt { font-family: var(--f-mono); font-stretch: var(--mono-stretch); font-size: 10.5px; letter-spacing: var(--track-label); color: var(--text-3); text-transform: uppercase; }
.edmeta dd { margin: 0; font-family: var(--f-mono); font-stretch: var(--mono-stretch); font-size: 12px; color: var(--text-1); font-variant-numeric: tabular-nums; }

/* ---------- Países y puertos (.rank): países en escala log con el color del mapa ---------- */
.rank { list-style: none; margin: 0; padding: 4px 14px 10px; }
.rank li { display: grid; grid-template-columns: 30px minmax(0, 1fr) 70px; gap: 3px 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line-1); font-family: var(--f-mono); font-stretch: var(--mono-stretch); font-size: 11.5px; }
.rank li:last-child { border-bottom: 0; }
.rank .cc { color: var(--text-3); }
.rank .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-1); }
.rank .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }
.rank .bar { grid-column: 2 / -1; height: 3px; background: var(--line-1); }
.rank .bar i { display: block; height: 100%; width: calc(var(--w) * 1%); background: var(--text-3); }
.rank .bar--hi i { background: var(--map-hi); } .rank .bar--mid i { background: var(--map-mid); } .rank .bar--lo i { background: var(--map-lo); }

/* ---------- Avisos y prensa ---------- */
.news-list { list-style: none; margin: 0; padding: 2px 14px 8px; }
.news-list__a { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid var(--line-1); text-decoration: none; }
.news-list li:last-child .news-list__a { border-bottom: 0; }
.news-list__a span { font-size: 14px; line-height: 1.4; }
a.news-list__a:hover span { text-decoration: underline; text-decoration-color: var(--ok); }
.news-list small { font-family: var(--f-mono); font-stretch: var(--mono-stretch); font-size: 10.5px; color: var(--text-3); text-transform: uppercase; }

/* ---------- Responsive ---------- */
@media (max-width: 1179px) {
  .brief { grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: "kpis kpis" "top top" "map radar"; }
  .more { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "sum sum" "geo ports" "news news"; }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi { border-top: 1px solid var(--line-2); min-height: 0; }
  .kpi:nth-child(-n+3) { border-top: 0; }
  .kpi:nth-child(3n+1) { border-left: 0; }
}
@media (max-width: 760px) {
  .brief { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kpis" "top" "map" "radar"; }
  .more { grid-template-columns: minmax(0, 1fr); grid-template-areas: "sum" "geo" "ports" "news"; }
  .kpi { padding: 7px 10px 8px; }
  .kpi dt { font-size: 10px; letter-spacing: .04em; }
  .kpi__d, .kpi__sub, .split__legend { display: none; }
  .kpi__long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .kpi__short { display: inline; }
  .split { margin-top: 4px; height: 4px; }
  .map-body { min-height: 300px; }
  .radarp .radar { max-width: 340px; }
}