:root {
  --bg: #f7f8fa;
  --panel: #ffffff;
  --panel-2: #f2f4f7;
  --ink: #1f2933;
  --ink-soft: #6b7280;
  --border: #e5e7eb;
  --stroke: #ffffff;          /* borde entre localidades */
  --btn-bg: #ffffff;
  --btn-ink: #374151;
  --shadow: rgba(16, 24, 40, 0.08);

  /* Extremos de la escala de color (deben coincidir con app.js) */
  --c-low: #E24B4A;
  --c-mid: #EF9F27;
  --c-high: #97C459;
  --c-top: #3B6D11;

  /* Modo Metro: fondo neutro de localidades + color oficial del metro */
  --metro-bg: #e5e7eb;
  --metro-line: #7c3aed;
}

/* ---------- Modo oscuro (feature 9) ---------- */
:root[data-theme="dark"] {
  --bg: #0e1116;
  --panel: #171b22;
  --panel-2: #1f242c;
  --ink: #e6e9ee;
  --ink-soft: #9aa4b2;
  --border: #2b313b;
  --stroke: #6b7280;          /* gris medio en lugar de blanco puro */
  --btn-bg: #1f242c;
  --btn-ink: #cbd5e1;
  --shadow: rgba(0, 0, 0, 0.45);

  --metro-bg: #2b313b;        /* gris neutro oscuro para el fondo del metro */
  --metro-line: #a78bfa;      /* violeta más claro para contraste en oscuro */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  transition: background 0.3s ease, color 0.3s ease;
}

.app {
  /* Columna en formato retrato: el área urbana de Bogotá es más alta que
     ancha, así el mapa llena su tarjeta sin márgenes laterales. */
  max-width: 380px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

/* ---------- Header ---------- */
.app__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
}

.app__titles { text-align: left; }

.app__header h1 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.app__subtitle {
  margin: 3px 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

/* Botones tipo icono (tema, reset) */
.icon-btn {
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--btn-ink);
  border-radius: 10px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}
.icon-btn:hover { border-color: var(--ink-soft); }
.icon-btn:active { transform: scale(0.94); }

/* ---------- Selector de vista (punto 6) ---------- */
.viewbar {
  margin-bottom: 12px;
}

.view-select {
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  padding: 9px 34px 9px 12px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--ink);
  border-radius: 10px;
  font-size: 0.92rem;
  font-weight: 550;
  font-family: inherit;
  cursor: pointer;
  /* flecha ▾ dibujada con background para no depender del estilo nativo */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) calc(50% - 2px),
    calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.view-select:hover { border-color: var(--ink-soft); }
.view-select:focus-visible { outline: 2px solid var(--ink-soft); outline-offset: 1px; }

/* ---------- Selector de año (solo modo licencias) ---------- */
.yearbar {
  margin-bottom: 14px;
}
.yearbar[hidden] { display: none; }

/* ---------- Selector de fecha (feature 5) ---------- */
.datebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 14px;
}

.date-arrow {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--btn-ink);
  border-radius: 8px;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.date-arrow:hover:not(:disabled) { border-color: var(--ink-soft); }
.date-arrow:disabled { opacity: 0.35; cursor: default; }

.datebar__label {
  min-width: 168px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 550;
  text-transform: capitalize;
}

/* ---------- Resumen destacado (features 4 y 6) ---------- */
.summary {
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

.summary-card {
  flex: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-left-width: 4px;
  border-radius: 10px;
  padding: 8px 10px;
  box-shadow: 0 1px 2px var(--shadow);
}
.summary-card--safe   { border-left-color: var(--c-top); }
.summary-card--unsafe { border-left-color: var(--c-low); }

/* En modo licencias ambas tarjetas usan el azul de esa escala */
.summary.is-licencias .summary-card--safe   { border-left-color: #1e3a8a; }
.summary.is-licencias .summary-card--unsafe { border-left-color: #93c5fd; }

/* Guardas: estos elementos son flex, así que el atributo [hidden]
   (display:none de baja especificidad) no bastaría por sí solo. */
.datebar[hidden], .summary[hidden], .legend-note[hidden] { display: none; }

.summary-card__label {
  display: block;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ink-soft);
}

.summary-card__value {
  display: block;
  margin-top: 2px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: capitalize;
}

.total-count {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.82rem;
  margin: 0 0 14px;
}
.total-count[hidden] { display: none; }

/* Texto del modo Metro ("Línea 1 · 23.8 km · N estaciones") */
.metro-info {
  text-align: center;
  color: var(--ink);
  font-weight: 550;
  font-size: 0.95rem;
  margin: 0 0 14px;
}
.metro-info[hidden] { display: none; }
.metro-info::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--metro-line);
  vertical-align: middle;
  margin-right: 8px;
}

/* ---------- Mapa (features 3, 7, 8) ---------- */
.map-viewport {
  position: relative;
  overflow: hidden;             /* recorta el pan/zoom */
  user-select: none;            /* evita seleccionar las etiquetas al arrastrar */
  -webkit-user-select: none;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 1px 2px var(--shadow);
  touch-action: none;           /* gestionamos pinch/pan nosotros */
  transition: background 0.3s ease, border-color 0.3s ease;
}

.map-stage {
  transform-origin: 0 0;        /* pan/zoom controlado por JS */
  will-change: transform;
}

.map {
  display: block;
  width: 100%;
  height: auto;
}

/* Cada localidad es un <g class="loc"> con relleno + rayado + (borde) */
.map .loc { cursor: pointer; }

.map .loc__fill {
  stroke: var(--stroke);
  stroke-width: 1;
  stroke-linejoin: round;
  transition: fill 0.4s ease;   /* feature 8: transición suave de color */
}

.map .loc__stripes {
  stroke: none;
  pointer-events: none;
}

/* Realce al pasar / fijado */
.map .loc:hover .loc__fill,
.map .loc.is-pinned .loc__fill {
  filter: brightness(1.08) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

/* ---------- Modo Metro: localidades como fondo neutro ---------- */
/* La regla CSS gana sobre el atributo fill (presentation attr), y la
   transición de .loc__fill anima el paso de color -> gris y viceversa. */
.map.is-metro .loc__fill { fill: var(--metro-bg); }
.map.is-metro .loc__label { fill: var(--ink); stroke: var(--panel); }
.map.is-metro .loc { cursor: default; }
.map.is-metro .loc:hover .loc__fill { filter: none; }   /* fondo, sin realce */

/* Trazado de la Línea 1 (encima del mapa, misma proyección) */
.metro-line {
  fill: none;
  stroke: var(--metro-line);
  stroke-width: 3.2;
  stroke-linejoin: round;
  stroke-linecap: round;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
}
.metro-line[hidden] { display: none; }

/* Estaciones sobre la línea */
.metro-station {
  fill: var(--panel);
  stroke: var(--metro-line);
  stroke-width: 1.6;
  cursor: pointer;
  transition: fill 0.15s ease;
}
.metro-station:hover { fill: var(--metro-line); }

/* Atenúa el resto cuando hay una localidad activa */
.map.is-active .loc:not(:hover):not(.is-pinned) { opacity: 0.4; }

.map .loc__label {
  pointer-events: none;
  font-size: 9px;
  font-weight: 600;
  text-anchor: middle;
  dominant-baseline: middle;
  paint-order: stroke;          /* halo suave para legibilidad */
  stroke-width: 2px;
  stroke-linejoin: round;
  transition: fill 0.4s ease;
}

/* Botón reset zoom (feature 3) */
.zoom-reset {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  background: var(--btn-bg);
  color: var(--btn-ink);
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px var(--shadow);
  z-index: 4;
}
.zoom-reset:hover { border-color: var(--ink-soft); }
.zoom-reset[hidden] { display: none; }

/* ---------- Leyenda ---------- */
.legend {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
}
.legend[hidden] { display: none; }

/* Leyenda simple del modo Metro (reusa legend-note con swatch sólido) */
.legend-note--metro .legend-note__swatch {
  background-image: none;
  background: var(--metro-line);
  width: 22px;
  height: 4px;
  border: none;
  border-radius: 2px;
}

.legend__bar {
  flex: 1;
  height: 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
}

/* Escala roja-verde (seguridad) */
.legend__bar--seguridad {
  background: linear-gradient(
    to right,
    var(--c-low) 0%,
    var(--c-mid) 37.5%,
    var(--c-high) 62.5%,
    var(--c-top) 100%
  );
}

/* Escala azul secuencial (licencias): claro = menos, oscuro = más */
.legend__bar--licencias {
  background: linear-gradient(
    to right,
    #dbeafe 0%,
    #60a5fa 55%,
    #1e3a8a 100%
  );
}

.legend__label {
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.legend-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 9px 0 0;
  font-size: 0.75rem;
  color: var(--ink-soft);
}

.legend-note__swatch {
  flex: none;
  width: 18px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--border);
  /* rayas diagonales, igual idea que el patrón SVG */
  background-image: repeating-linear-gradient(
    45deg,
    transparent 0 2px,
    var(--ink-soft) 2px 3px
  );
}

.status {
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  min-height: 1.2em;
  margin: 12px 0 0;
}

/* ---------- Tooltip ---------- */
.tooltip {
  position: fixed;
  z-index: 20;
  pointer-events: none;         /* en hover no captura eventos */
  background: rgba(17, 22, 29, 0.96);
  color: #fff;
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 0.82rem;
  line-height: 1.35;
  display: flex;
  flex-direction: column;
  gap: 1px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  transform: translate(-50%, calc(-100% - 12px));
  white-space: nowrap;
}

.tooltip[hidden] { display: none; }

/* Cuando está fijado (clic) sí acepta clics (para la X) */
.tooltip.is-pinned { pointer-events: auto; }

.tooltip__close {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: none;                /* solo visible al fijar */
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.tooltip.is-pinned .tooltip__close { display: inline-flex; }
.tooltip__close:hover { color: #fff; background: rgba(255, 255, 255, 0.15); }

.tooltip__name {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: capitalize;
  padding-right: 14px;          /* espacio para la X */
}

.tooltip__score { opacity: 0.95; }

.tooltip__count {
  opacity: 0.7;
  font-size: 0.76rem;
}