/* Variante B — celeste y blanco. Mapa institucional, papel claro, sol de mayo. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700;800&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

:root {
  --f-ui: 'Inter', system-ui, sans-serif;
  --f-tit: 'Archivo', 'Inter', sans-serif;
  --f-num: 'IBM Plex Mono', ui-monospace, monospace;

  --bg: #eef3f9;
  --bg-panel: #ffffff;
  --bg-mapa: #f5f9fd;
  --linea: #dbe5f0;
  --linea-suave: #eef3f8;
  --hover: #f1f6fc;
  --scroll: #c7d6e6;

  --txt: #46566b;
  --txt-fuerte: #12263c;
  --txt-suave: #4d6076;
  --txt-tenue: #8296ab;

  --acento: #2f8fd4;
  --sobre-acento: #ffffff;
  --oro: #c07a12;
  --vivo: #1a9e63;
  --vivo-glow: rgba(26, 158, 99, .22);
  --sel: #12263c;

  --terr-libre: #dce9f6;
  --terr-borde: #ffffff;
  --borde-prov: #ffffff;
  --terr-activo: #c3dcf2;
  --terr-activo-borde: #ffffff;
  --terr-contexto: #e8eff7;
  --terr-apagado: #e4ecf4;
  --chip-vacio: #dfe9f4;
  --barra-bg: #e8eff7;
  --met-bg: #f2f7fc;
  --met-destacada: #e7f2fb;
  --tip-bg: #ffffff;
  --velo: rgba(18, 38, 60, .34);
  --inset-bg: rgba(255, 255, 255, .9);

  --cta-bg: linear-gradient(135deg, #74acdf, #2f8fd4);
  --cta-txt: #ffffff;
  --cta-borde: transparent;
  --cta-sombra: 0 3px 16px rgba(47, 143, 212, .3);
  --cta-sombra-hover: 0 6px 24px rgba(47, 143, 212, .42);
  --robar-bg: linear-gradient(135deg, #f0a52a, #db6b18);
  --robar-txt: #fff;
  --claim-bg: #f3f8fd;
  --claim-borde: #c3d9ee;
  --claim-hover: #e9f3fc;
}

/* Franja celeste-blanco-celeste al tope: el guiño, sin disfraz. */
.top::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #74acdf 0 33.3%, #ffffff 33.3% 66.6%, #74acdf 66.6%);
}
.top { box-shadow: 0 1px 3px rgba(18, 38, 60, .05); }
.logo { color: #12263c; }
.tld { color: #74acdf; }

.mapa-wrap::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 55% 50% at 50% 40%, rgba(116, 172, 223, .13), transparent 72%);
}
.mapa svg { filter: drop-shadow(0 6px 20px rgba(18, 38, 60, .1)); }
.terr { stroke: #fff; stroke-width: calc(0.8 / var(--k, 1)); }
.terr.libre { fill: var(--terr-libre); }
.terr:hover { filter: brightness(1.06) saturate(1.15); }
.terr.sel { stroke: #12263c; }

.panel { box-shadow: none; }
.col { background: var(--linea); }
.chip { text-shadow: 0 1px 2px rgba(0, 0, 0, .28); }
.mapa-tools button { background: #fff; box-shadow: 0 2px 10px rgba(18, 38, 60, .1); }
.modal-box { box-shadow: 0 24px 60px rgba(18, 38, 60, .22); }
.met.destacada { box-shadow: inset 0 0 0 1px rgba(47, 143, 212, .2); }
.tip { box-shadow: 0 10px 30px rgba(18, 38, 60, .18); }