/* Cyber Map (/cyber-map). Builds on sf-cyber-alerts.css (tokens, hero, cards,
   KPIs, bars, area chart, method panel, help and footer); only the map, its
   panel, the legend and the Latin America table live here. */

.sf-cymap {
  --cm-land: #e8e8e8;
  --cm-border: #ffffff;
  --cm-sea: #fbfbfb;
  --cm-b1: #fde3d6;
  --cm-b2: #f9b99a;
  --cm-b3: #f08a5d;
  --cm-b4: #d9502b;
  --cm-b5: #a8261a;
  --cm-out: #6d4ee8;
  --cm-out-soft: rgba(109, 78, 232, .22);
  --cm-select: #0a0a0a;
}
[data-bs-theme="dark"] .sf-cymap {
  --cm-land: #2a2a2a;
  --cm-border: #111111;
  --cm-sea: #0d0d0d;
  --cm-b1: #4a2419;
  --cm-b2: #7a321d;
  --cm-b3: #b2441f;
  --cm-b4: #e2602f;
  --cm-b5: #ff9a6b;
  --cm-out: #9d87ff;
  --cm-out-soft: rgba(157, 135, 255, .28);
  --cm-select: #ffffff;
}

/* ── Map card ─────────────────────────────────────────────────────────── */
.cm-map { padding: 0; overflow: hidden; margin-top: 1.25rem; }
.cm-map__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--cy-line);
}
.cm-map__bar .cy-h3 { margin: 0; margin-right: auto; }
.cm-regions {
  display: flex;
  gap: .375rem;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 100%;
}
.cm-regions::-webkit-scrollbar { display: none; }
.cm-chip {
  flex: none;
  border: 1px solid var(--cy-line);
  background: var(--cy-card);
  color: var(--cy-muted);
  font: inherit;
  font-size: .8125rem;
  line-height: 1;
  padding: .45rem .7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.cm-chip:hover { color: var(--cy-text); background: var(--cy-hover); }
.cm-chip[aria-pressed="true"] { background: var(--cy-text); border-color: var(--cy-text); color: var(--cy-card); }
.cm-chip:focus-visible, .cm-country:focus-visible, .cm-layer input:focus-visible { outline: 2px solid var(--cy-series); outline-offset: 2px; }
.cm-layers { display: flex; gap: 1rem; }
.cm-layer { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; color: var(--cy-text); cursor: pointer; margin: 0; }
.cm-layer input { accent-color: var(--cy-text); margin: 0; }
.cm-layer__key { width: .7rem; height: .7rem; border-radius: 3px; display: inline-block; }
.cm-layer__key--rw { background: var(--cm-b4); }
.cm-layer__key--out { background: var(--cm-out); border-radius: 50%; }

.cm-map__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; }
.cm-stage { position: relative; background: var(--cm-sea); min-height: 220px; aspect-ratio: 1000 / 440; }
.cm-stage__msg { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 1.5rem; color: var(--cy-muted); font-size: .875rem; margin: 0; }
.cm-svg { display: block; width: 100%; height: 100%; touch-action: manipulation; }
.cm-c { fill: var(--cm-land); stroke: var(--cm-border); stroke-width: .5; vector-effect: non-scaling-stroke; cursor: pointer; transition: fill .3s ease, opacity .2s ease; }
.cm-c:hover { opacity: .82; }
.cm-b1 { fill: var(--cm-b1); }
.cm-b2 { fill: var(--cm-b2); }
.cm-b3 { fill: var(--cm-b3); }
.cm-b4 { fill: var(--cm-b4); }
.cm-b5 { fill: var(--cm-b5); }
.hide-ransomware .cm-c { fill: var(--cm-land); }
.cm-c.is-selected { stroke: var(--cm-select); stroke-width: 1.6; }
.cm-o { cursor: pointer; }
.cm-o__dot { fill: var(--cm-out); stroke: var(--cm-sea); stroke-width: 1; vector-effect: non-scaling-stroke; }
.cm-o__pulse { fill: var(--cm-out-soft); transform-box: fill-box; transform-origin: center; }
.cm-o.is-selected .cm-o__dot { stroke: var(--cm-select); stroke-width: 2; }
.hide-outages .cm-outages { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .cm-o__pulse { animation: cm-pulse 2.4s ease-out infinite; }
  .has-map .cm-svg { animation: cm-in .6s ease both; }
}
@keyframes cm-pulse { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.4); opacity: 0; } }
@keyframes cm-in { from { opacity: 0; } to { opacity: 1; } }

.cm-tip {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: none;
  background: var(--cy-text);
  color: var(--cy-card);
  font-size: .75rem;
  line-height: 1.4;
  padding: .45rem .6rem;
  border-radius: 8px;
  box-shadow: var(--cy-shadow-lg);
  white-space: nowrap;
  z-index: 2;
}
.cm-tip[hidden] { display: none; }

/* ── Country panel ────────────────────────────────────────────────────── */
.cm-panel { border-left: 1px solid var(--cy-line); padding: 1.25rem; overflow-y: auto; max-height: 440px; }
.cm-panel:focus { outline: none; }
.cm-panel .cy-label { margin: 1rem 0 .4rem; }
.cm-panel .cy-label:first-child { margin-top: 0; }
.cm-panel__name { font-size: 1.25rem; font-weight: 600; letter-spacing: -.01em; margin: 0 0 1rem; color: var(--cy-text); }
.cm-panel__nums { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.cm-panel__nums div { border: 1px solid var(--cy-line); border-radius: 10px; padding: .6rem .75rem; }
.cm-panel__nums strong { display: block; font-size: 1.375rem; font-variant-numeric: tabular-nums; color: var(--cy-text); }
.cm-panel__nums span { font-size: .75rem; color: var(--cy-muted); }
.cm-panel__list { list-style: none; padding: 0; margin: 0; font-size: .8125rem; }
.sf-cyber .cm-panel__list > li { display: flex; justify-content: space-between; gap: .75rem; padding: .3rem 0; border-bottom: 1px solid var(--cy-line); }
.cm-panel__list strong { font-variant-numeric: tabular-nums; }
.cm-panel__out { font-size: .8125rem; margin: 0; color: var(--cy-text); }

/* ── Legend ───────────────────────────────────────────────────────────── */
.cm-legend { display: flex; flex-wrap: wrap; gap: .75rem 2rem; padding: .85rem 1.25rem; border-top: 1px solid var(--cy-line); font-size: .75rem; color: var(--cy-muted); }
.cm-legend__item { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cm-legend .cy-label { margin: 0; }
.cm-scale { display: inline-flex; }
.cm-scale i { width: 1.4rem; height: .55rem; display: block; }
.cm-scale i:nth-child(1) { background: var(--cm-b1); border-radius: 3px 0 0 3px; }
.cm-scale i:nth-child(2) { background: var(--cm-b2); }
.cm-scale i:nth-child(3) { background: var(--cm-b3); }
.cm-scale i:nth-child(4) { background: var(--cm-b4); }
.cm-scale i:nth-child(5) { background: var(--cm-b5); border-radius: 0 3px 3px 0; }
.cm-legend__ends { display: inline-flex; gap: .5rem; }
.cm-dots { display: inline-flex; align-items: center; gap: .35rem; }
.cm-dots i { display: block; border-radius: 50%; background: var(--cm-out); }
.cm-dots .is-1 { width: .35rem; height: .35rem; }
.cm-dots .is-2 { width: .55rem; height: .55rem; }
.cm-dots .is-3 { width: .75rem; height: .75rem; }

/* ── Cards below the map ──────────────────────────────────────────────── */
.cm-grid { margin-top: 1.25rem; align-items: start; }
.cm-more { display: inline-block; margin-top: .75rem; border: 0; background: none; padding: 0; font: inherit; font-size: .8125rem; cursor: pointer; }
.cm-country {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.cm-country:hover { text-decoration: underline; text-underline-offset: 2px; }
.cm-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.cm-table th, .cm-table td { padding: .5rem .5rem; border-bottom: 1px solid var(--cy-line); text-align: left; font-weight: 400; color: var(--cy-text); }
.cm-table thead th { font-size: .75rem; color: var(--cy-muted); font-weight: 500; }
.cm-table th:first-child, .cm-table td:first-child { padding-left: 0; }
.cm-table th:last-child, .cm-table td:last-child { padding-right: 0; }
.cm-table .is-num { text-align: right; font-variant-numeric: tabular-nums; width: 3.5rem; }
.cm-table tr.is-home th, .cm-table tr.is-home td { font-weight: 600; }
.cm-list { list-style: none; padding: 0; margin: 0; font-size: .875rem; }
.sf-cyber .cm-list > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--cy-line); }
.cm-out { color: var(--cy-muted); }
.cm-level { display: inline-block; font-size: .6875rem; font-weight: 600; letter-spacing: .02em; padding: .15rem .45rem; border-radius: 999px; background: var(--cm-out-soft); color: var(--cy-text); }
.cm-level--3 { background: var(--cm-out); color: #fff; }
.cm-level--1 { background: transparent; border: 1px solid var(--cy-line); color: var(--cy-muted); }

/* ── Phones and tablets: the panel goes under the map ─────────────────── */
@media (max-width: 860px) {
  .cm-map__body { grid-template-columns: minmax(0, 1fr); }
  .cm-panel { border-left: 0; border-top: 1px solid var(--cy-line); max-height: none; }
  .cm-map__bar { padding: .85rem 1rem; }
  .cm-map__bar .cy-h3 { width: 100%; }
  .cm-regions { margin: 0 -1rem; padding: 0 1rem; max-width: calc(100% + 2rem); }
  .cm-stage { aspect-ratio: 1000 / 520; }
  .cm-legend { padding: .75rem 1rem; }
}