/* Atlas Studio V6 — cartografía política (js/modules/political.js)
 *
 * Aspecto de atlas escolar: mar azul claro, países vecinos en gris neutro,
 * fronteras con filete blanco bajo una línea fina oscura, símbolos de capital
 * y nombres de departamento en versalitas con halo.
 *
 * Todas las reglas cuelgan de `svg.pol-on`, la clase que el módulo pone y
 * quita: al salir del mapa político el aspecto anterior vuelve intacto. */

/* ================================================================== */
/* 1 · Base de la lámina: mar y países vecinos                         */
/* ================================================================== */

svg.pol-on .sphere {
  fill: #d6ebf6;
  stroke: rgba(86, 140, 170, .45);
  stroke-width: 1;
}
svg.pol-on .sphere-outline { stroke: rgba(86, 140, 170, .5); }

.pol-under { pointer-events: none; }
.pol-sea { fill: #b7dbee; }
.pol-neighbour {
  fill: #dde1e3;
  stroke: rgba(108, 122, 131, .6);
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

/* El relieve sombreado es oscuro y ensucia las tintas planas: en el mapa
 * político se convierte en un sombreado de "papel" —claro, poco saturado y de
 * bajo contraste— sobre el que los colores pastel siguen siendo legibles. */
svg.pol-paper #rasterLayer {
  filter: saturate(.3) brightness(1.34) contrast(.72);
  opacity: .8;
}
svg.pol-paper #contourLayer { opacity: .55; }
/* con relieve claro, la máscara de enfoque también se suaviza */
svg.pol-paper .focus-mask { fill: rgba(28, 48, 64, .34); }

/* ================================================================== */
/* 2 · Fronteras: filete blanco (en el trazo de cada región) + línea    */
/* ================================================================== */

.pol-borders { pointer-events: none; }
.pol-line {
  fill: none;
  stroke: rgba(58, 72, 84, .82);
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.pol-line-country { stroke: rgba(46, 58, 70, .88); }
.pol-line-department { stroke: rgba(64, 78, 90, .78); }
.pol-line-municipality { stroke: rgba(78, 92, 104, .62); }

/* límites en disputa o indeterminados (Natural Earth: TYPE) */
.pol-disputed {
  fill: none;
  stroke: rgba(150, 70, 70, .85);
  stroke-dasharray: 5 3.2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Sin recorte, la Antártida (hasta −90°) desborda el marco de la proyección y
 * deja una franja de color fuera del mapa. */
svg.pol-on #regionsLayer { clip-path: url(#sphereClip); }
svg.pol-on .region { transition: none; }
svg.pol-on .region:hover { filter: brightness(1.07) saturate(1.12); }
svg.pol-on .region.selected {
  stroke: #1d5f78 !important;
  stroke-width: 2.4 !important;
  filter: drop-shadow(0 0 7px rgba(29, 95, 120, .55));
}
svg.pol-on .graticule { stroke: rgba(50, 80, 100, .17); }

/* ================================================================== */
/* 3 · Tono claro forzado                                              */
/* ================================================================== */
/* El núcleo marca `data-tone="dark"` en el mapa político cuando el relieve
 * está apagado (app.js → isDarkTone). La lámina política es siempre clara, así
 * que aquí se restituye el juego de tintas del tono claro para los rótulos y
 * símbolos del núcleo. */

svg.pol-on .place-label,
svg.pol-on .physical-label { fill: #1b242b; stroke: rgba(255, 255, 255, .93); }
svg.pol-on .map-label { fill: #20303a; stroke: rgba(255, 255, 255, .92); }
svg.pol-on .place-halo { fill: rgba(255, 255, 255, .78); stroke: rgba(20, 30, 40, .55); }
svg.pol-on .place.capital .place-dot { fill: #c62f47; stroke: #fff; }
svg.pol-on .place.city .place-dot { fill: #1b242b; }
svg.pol-on .physical-name.water-name { fill: #0b5fa0; stroke: rgba(245, 250, 252, .93); }
svg.pol-on .physical-name { fill: #5a3517; stroke: rgba(250, 246, 236, .92); }
svg.pol-on .physical-river { stroke: #2a8fd0; stroke-opacity: .85; }
svg.pol-on .physical-lake { fill: #a9d8ef; stroke: #3a92cc; }
svg.pol-on .gaz-label { fill: #3b2a1c; stroke: rgba(252, 248, 238, .93); }
svg.pol-on .gaz-sea .gaz-label,
svg.pol-on .gaz-ocean .gaz-label,
svg.pol-on .gaz-gulf .gaz-label,
svg.pol-on .gaz-strait .gaz-label,
svg.pol-on .gaz-marine .gaz-label { fill: #0a5d97; }

/* Cuando el módulo dibuja sus propios símbolos y nombres, los del núcleo
 * duplicarían la información */
svg.pol-symbols #placesLayer,
svg.pol-symbols #labelsLayer { display: none; }

/* ================================================================== */
/* 4 · Símbolos y nombres                                              */
/* ================================================================== */

.pol-symbols { pointer-events: none; }
.pol-place { pointer-events: auto; cursor: pointer; }

/* capital de la república: estrella */
.pol-star {
  fill: #c62f47;
  stroke: #fff;
  stroke-width: 1.1;
  stroke-linejoin: round;
  paint-order: stroke;
  vector-effect: non-scaling-stroke;
}
/* capitales departamentales: círculo doble */
.pol-ring { fill: #fff; stroke: #2f3d47; vector-effect: non-scaling-stroke; }
.pol-dot { fill: #2f3d47; }
.pol-place.is-capital .pol-dot { fill: #c62f47; }
.pol-place.is-city .pol-ring { fill: rgba(255, 255, 255, .85); stroke: rgba(47, 61, 71, .7); }
.pol-place:hover .pol-ring { stroke: #0f7f8f; stroke-width: 2; }

/* municipios: punto menudo */
.pol-muni {
  fill: rgba(47, 61, 71, .72);
  stroke: rgba(255, 255, 255, .85);
  vector-effect: non-scaling-stroke;
}

.pol-place-name {
  fill: #16232c;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .94);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pol-place.is-national .pol-place-name { font-weight: 800; letter-spacing: .02em; }
.pol-place.is-city .pol-place-name { fill: #3a4a55; font-weight: 600; }

/* nombres de departamento: versalitas con halo, sobre el centro visual */
.pol-region-name {
  fill: #2b3a44;
  font-family: Manrope, "DM Sans", sans-serif;
  font-weight: 700;
  font-variant: small-caps;
  font-variant-caps: small-caps;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .9);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.pol-region-name.pol-municipality {
  font-variant: normal;
  font-variant-caps: normal;
  font-weight: 600;
  fill: #46555f;
}

/* recuadro de referencia del archipiélago de San Andrés */
.pol-inset { pointer-events: none; }
.pol-inset-box { fill: none; stroke: #b8861f; vector-effect: non-scaling-stroke; }
.pol-inset-label {
  fill: #7d5a10;
  font-family: "DM Sans", sans-serif;
  font-weight: 700;
  text-anchor: middle;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .92);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* ================================================================== */
/* 5 · Panel lateral                                                   */
/* ================================================================== */

.pol-panel {
  margin-top: 16px;
  padding: 13px 13px 14px;
  border: 1px solid rgba(73, 214, 197, .18);
  border-radius: 13px;
  background:
    radial-gradient(120% 80% at 100% 0%, rgba(242, 184, 75, .08), transparent 60%),
    radial-gradient(90% 70% at 0% 100%, rgba(73, 214, 197, .06), transparent 60%),
    rgba(255, 255, 255, .02);
}
.pol-head { display: flex; align-items: center; gap: 9px; }
.pol-head h3 { margin: 0; font: 700 13px Manrope, "DM Sans", sans-serif; color: var(--ink, #eaf3f7); }
.pol-head svg { width: 17px; height: 17px; color: var(--gold, #f2b84b); flex: none; }
.pol-note { margin: 8px 0 0; color: var(--muted-2, #617887); font-size: 10.5px; line-height: 1.45; }
.pol-label { display: block; color: var(--muted, #91a6b4); font-size: 12px; font-weight: 600; margin: 13px 0 7px; }
.pol-hint { margin: 7px 0 0; color: var(--muted-2, #617887); font-size: 10.5px; }

.pol-swatches { display: flex; gap: 3px; margin-top: 8px; }
.pol-swatches i {
  flex: 1;
  height: 13px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .25);
}

.pol-panel .switch-row:first-of-type { margin-top: 15px; }

.pol-legend {
  margin-top: 13px;
  padding: 9px 10px 10px;
  border: 1px solid var(--line, rgba(157, 190, 205, .14));
  border-radius: 10px;
  background: rgba(0, 0, 0, .14);
}
.pol-legend h4 {
  margin: 0 0 7px;
  font: 700 10px Manrope, sans-serif;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted, #91a6b4);
}
.pol-legend ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px 8px;
  max-height: 188px;
  overflow-y: auto;
}
.pol-legend li {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10.5px;
  color: #c8d6dc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pol-legend li i {
  width: 11px;
  height: 11px;
  flex: none;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .3);
}

.pol-stats {
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--line, rgba(157, 190, 205, .14));
  color: var(--muted-2, #617887);
  font-size: 10.5px;
  line-height: 1.5;
}
.pol-stats strong { color: var(--aqua, #49d6c5); font-weight: 700; }
.pol-stats small { color: rgba(145, 166, 180, .72); font-size: 10px; }

@media (max-width: 900px) {
  .pol-legend ul { grid-template-columns: 1fr; max-height: 150px; }
}
@media (prefers-reduced-motion: reduce) {
  /* Sin recorte, la Antártida (hasta −90°) desborda el marco de la proyección y
 * deja una franja de color fuera del mapa. */
svg.pol-on #regionsLayer { clip-path: url(#sphereClip); }
svg.pol-on .region { transition: none; }
}