/* ==========================================================================
   tn-map.css  ·  TerraNava — Módulo de Mapas reutilizable
   Dirección de arte "Atlas de la Tierra".
   Estilos para el componente Leaflet que exponen tn-map.js (window.TNMap).
   No depende de tokens.css, pero respeta las mismas variables si existen
   (cae a literales de la paleta cuando el design system no está cargado).
   --------------------------------------------------------------------------
   ÍNDICE
   1. Variables locales (paleta literal + fuentes)
   2. Contenedor + panes de Leaflet (filtro sepia del basemap, orden de capas)
   3. Controles propios (+ / − / centrar) y atribución
   4. Coropleta: transición de color, hover, cursor
   5. Tooltip flotante de nombre
   6. Popup de marca (.tn-pop)
   7. Leyenda-tarjeta (.tn-legend) + colapsable móvil
   8. Accesibilidad / reduced-motion / responsive 375px
   ========================================================================== */

/* 1. ────────────────────────────────────────────────────────────────────── */
.tn-map {
  /* Paleta — usa los tokens del design system si están, si no literal. */
  --tnm-paper:        var(--atlas-paper,        #FAF6EE);
  --tnm-paper-sunken: var(--atlas-paper-sunken, #F3EDE0);
  --tnm-card:         #FFFFFF;
  --tnm-ink:          var(--atlas-ink,          #13334F);
  --tnm-ink-display:  var(--atlas-ink-display,  #0F2942);
  --tnm-gold:         var(--atlas-gold,         #C9A227);
  --tnm-terra:        var(--atlas-terra,        #B0653A);
  --tnm-water:        var(--atlas-water,        #0E6BA8);
  --tnm-border:       var(--atlas-border,       #E5DCC8);
  --tnm-shadow:       rgba(38, 28, 12, .10);
  --tnm-shadow-strong:rgba(38, 28, 12, .18);
  --tnm-radius:       14px;
  --tnm-radius-sm:    12px;

  --tnm-font-display: var(--font-display, "Source Serif Pro", "Source Serif 4", Georgia, serif);
  --tnm-font-body:    var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --tnm-font-mono:    var(--font-mono, "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace);

  position: relative;
  width: 100%;
  min-height: 320px;
  background: var(--tnm-paper);
  border: 1px solid var(--tnm-border);
  border-radius: var(--tnm-radius);
  overflow: hidden;
  box-shadow: 0 1px 3px var(--tnm-shadow);
  font-family: var(--tnm-font-body);
  color: var(--tnm-ink);
}

/* El propio nodo Leaflet llena el contenedor de marca. */
.tn-map .leaflet-container {
  background: var(--tnm-paper);
  font-family: var(--tnm-font-body);
  outline: none;
}

/* 2. ── Panes y filtro sepia del basemap ───────────────────────────────────
   Orden de apilado (zIndex en JS): basemap(200) < spotlight(360) <
   límite(370) < coropleta(420) < labels(640, encima de todo). */

/* El filtro funde los tiles base con el papel. Apuntamos al pane del basemap,
   no a los labels (que deben quedar nítidos y por encima). */
.tn-map .tnm-base-pane {
  filter: sepia(.18) saturate(.85) brightness(1.03);
}

/* Los labels van por encima de las coropletas de datos. */
.tn-map .tnm-labels-pane {
  z-index: 640;
  pointer-events: none;            /* los labels nunca roban el click */
  mix-blend-mode: multiply;        /* el texto se asienta sobre el color */
}

.tn-map .tnm-spotlight-pane  { z-index: 360; pointer-events: none; }
.tn-map .tnm-limit-pane      { z-index: 370; pointer-events: none; }
.tn-map .tnm-data-pane       { z-index: 420; }

/* 3. ── Controles propios ──────────────────────────────────────────────────
   Botonera flotante: redonda, fondo blanco, borde cálido, sombra, hover tinta. */
.tn-map .tnm-controls {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 700;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tn-map .tnm-btn {
  appearance: none;
  -webkit-appearance: none;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
  border: 1px solid var(--tnm-border);
  border-radius: 50%;
  background: var(--tnm-card);
  color: var(--tnm-ink);
  box-shadow: 0 2px 6px var(--tnm-shadow);
  cursor: pointer;
  line-height: 1;
  transition: background .18s ease, color .18s ease,
              border-color .18s ease, transform .12s ease;
}
.tn-map .tnm-btn svg { width: 18px; height: 18px; display: block; }
.tn-map .tnm-btn:hover,
.tn-map .tnm-btn:focus-visible {
  background: var(--tnm-ink);
  color: var(--tnm-paper);
  border-color: var(--tnm-ink);
}
.tn-map .tnm-btn:focus-visible { outline: 2px solid var(--tnm-gold); outline-offset: 2px; }
.tn-map .tnm-btn:active { transform: translateY(1px); }

/* Atribución discreta abajo-derecha. */
.tn-map .leaflet-control-attribution {
  background: rgba(255, 255, 255, .72);
  color: #6b6353;
  border: 1px solid var(--tnm-border);
  border-right: none;
  border-bottom: none;
  border-top-left-radius: 8px;
  padding: 2px 8px;
  font-size: 10px;
  font-family: var(--tnm-font-body);
  letter-spacing: .01em;
  box-shadow: none;
}
.tn-map .leaflet-control-attribution a { color: var(--tnm-water); }

/* 4. ── Coropleta ──────────────────────────────────────────────────────────
   Transición de color suave al cambiar de variable. */
.tn-map .tnm-data-pane path {
  transition: fill .35s ease, fill-opacity .35s ease,
              stroke .18s ease, stroke-width .18s ease;
}
.tn-map .tnm-feature        { cursor: pointer; }
.tn-map .tnm-feature:focus  { outline: none; }
/* El realce de hover/foco lo aplica el JS vía setStyle (saturación + stroke). */

/* 5. ── Tooltip flotante de nombre ─────────────────────────────────────────
   Reemplaza el tooltip por defecto de Leaflet con la estética del sistema. */
.tn-map .tnm-tip.leaflet-tooltip {
  background: var(--tnm-ink-display);
  color: var(--tnm-paper);
  border: none;
  border-radius: 8px;
  padding: 5px 10px;
  font-family: var(--tnm-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  box-shadow: 0 3px 10px var(--tnm-shadow-strong);
}
.tn-map .tnm-tip.leaflet-tooltip::before { display: none; }  /* sin la flechita */

/* 6. ── Popup de marca ─────────────────────────────────────────────────────
   .tn-pop: regla superior de 3px del color del feature, título serif,
   tabla de cifras en mono tabular. */
.tn-map .leaflet-popup.tnm-popup .leaflet-popup-content-wrapper {
  background: var(--tnm-card);
  color: var(--tnm-ink);
  border: 1px solid var(--tnm-border);
  border-radius: var(--tnm-radius-sm);
  box-shadow: 0 8px 24px var(--tnm-shadow-strong);
  padding: 0;
  overflow: hidden;
}
.tn-map .leaflet-popup.tnm-popup .leaflet-popup-content {
  margin: 0;
  width: auto !important;
}
.tn-map .leaflet-popup.tnm-popup .leaflet-popup-tip {
  background: var(--tnm-card);
  border: 1px solid var(--tnm-border);
  box-shadow: none;
}
.tn-map .tn-pop { min-width: 196px; }
.tn-map .tn-pop__rule { height: 3px; width: 100%; background: var(--tnm-ink); }
.tn-map .tn-pop__body { padding: 12px 14px 13px; }
.tn-map .tn-pop__title {
  margin: 0 0 9px;
  font-family: var(--tnm-font-display);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.15;
  color: var(--tnm-ink-display);
}
.tn-map .tn-pop__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
.tn-map .tn-pop__table tr + tr td { border-top: 1px solid var(--tnm-border); }
.tn-map .tn-pop__lab {
  padding: 5px 0;
  color: #6b6353;
  text-align: left;
  white-space: nowrap;
  padding-right: 16px;
}
.tn-map .tn-pop__val {
  padding: 5px 0;
  text-align: right;
  font-family: var(--tnm-font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--tnm-ink);
  white-space: nowrap;
}
.tn-map .leaflet-popup.tnm-popup a.leaflet-popup-close-button {
  color: #9a917f;
  padding: 7px 8px 0 0;
}
.tn-map .leaflet-popup.tnm-popup a.leaflet-popup-close-button:hover { color: var(--tnm-ink); }

/* 7. ── Leyenda-tarjeta ────────────────────────────────────────────────────
   .tn-legend: tarjeta con header en mayúsculas espaciadas, swatches o barra.
   Por defecto se ancla abajo-izquierda dentro del mapa (o donde la monte la
   página, si el contenedor no es el mapa). */
.tn-legend {
  background: var(--tnm-card, #FFFFFF);
  color: var(--atlas-ink, #13334F);
  border: 1px solid var(--atlas-border, #E5DCC8);
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(38, 28, 12, .10);
  padding: 12px 13px 13px;
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  min-width: 168px;
  max-width: 240px;
}
/* Cuando se monta dentro del propio mapa la posicionamos flotante. */
.tn-map .tn-legend {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 700;
}
.tn-legend__head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6b6353;
  margin: 0 0 9px;
}
.tn-legend__title {
  font-family: var(--font-display, "Source Serif Pro", Georgia, serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--atlas-ink-display, #0F2942);
  margin: -4px 0 9px;
  line-height: 1.2;
}
/* Lista de swatches categóricos */
.tn-legend__items { display: flex; flex-direction: column; gap: 7px; }
.tn-legend__item {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12.5px;
  line-height: 1.2;
}
.tn-legend__swatch {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
/* Barra de gradiente continua + extremos min/max */
.tn-legend__bar {
  height: 12px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08);
}
.tn-legend__scale {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: 11px;
  color: #6b6353;
}
/* Botón flotante "Leyenda" (visible solo en móvil) + botón de cierre */
.tn-legend__toggle {
  display: none;
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 700;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--atlas-border, #E5DCC8);
  background: var(--tnm-card, #FFFFFF);
  color: var(--atlas-ink, #13334F);
  border-radius: 999px;
  padding: 8px 14px;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 12px;
  font-weight: 600;
  box-shadow: 0 2px 6px rgba(38, 28, 12, .10);
  cursor: pointer;
}
.tn-legend__close {
  display: none;
  position: absolute;
  top: 7px;
  right: 8px;
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  color: #9a917f;
  cursor: pointer;
  padding: 2px;
  line-height: 0;
}
.tn-legend__close:hover { color: var(--atlas-ink, #13334F); }
.tn-legend__close svg { width: 14px; height: 14px; display: block; }

/* 8. ── Responsive 375px + reduced-motion ──────────────────────────────────*/
@media (max-width: 560px) {
  /* En móvil la leyenda dentro del mapa se colapsa: botón flotante que la abre. */
  .tn-map .tn-legend.is-collapsible {
    display: none;
    left: 14px;
    right: 14px;
    bottom: 14px;
    max-width: none;
  }
  .tn-map .tn-legend.is-collapsible.is-open { display: block; }
  .tn-map .tn-legend.is-collapsible.is-open + .tn-legend__toggle { display: none; }
  .tn-map .tn-legend.is-collapsible .tn-legend__close { display: block; }
  .tn-map .tn-legend__toggle.is-shown { display: inline-flex; align-items: center; gap: 7px; }

  .tn-map .tnm-controls { top: 12px; right: 12px; }
  .tn-map .tnm-btn { width: 40px; height: 40px; }  /* objetivo táctil cómodo */
}

@media (prefers-reduced-motion: reduce) {
  .tn-map .tnm-data-pane path,
  .tn-map .tnm-btn { transition: none !important; }
  .tn-map .leaflet-fade-anim .leaflet-tile,
  .tn-map .leaflet-zoom-anim .leaflet-zoom-animated { transition: none !important; }
}