/* ============================================================
   Rediseño v8 — Pase 1: override del CHROME.
   CARGAR EL ÚLTIMO (enlazado al final de <body>). Gana por orden de
   documento a los 2 bloques <style> inline (head L146-1955, body L2063-2091).
   Convención por regla: target → mecanismo → por qué.
   ============================================================ */

/* ---- Marca / título ---- */
/* #headerTitle (ID) → gana por orden a styles.css L26-32 (Playfair). */
#headerTitle { font-family: var(--font-brand); letter-spacing: var(--brand-tracking); }
/* h1 del splash en Bricolage (coherencia). */
#loader h1 { font-family: var(--font-brand); letter-spacing: var(--brand-tracking); }

/* Subtítulo del header: sin opacity (3.06:1 ✗AA) → blanco pleno + scrim. Mecanismo: ID por orden. */
#headerSubtitle { opacity: 1; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }

/* ---- Sidebar editorial ---- */
/* #sidebar bg ya = var(--bg-sidebar) (token .96). Solo refinamos el borde. */
#sidebar { border-right: 1px solid var(--line); }

/* Buscador editorial (el bg se edita inline; no estaba tokenizado). */
#searchInput {
  border-radius: 12px;
  border: 1.5px solid var(--line);
  box-shadow: none;
}

/* Tabs → segmented editorial. */
.tab-bar-glass {
  background: var(--color-brand-soft);
  border-radius: 12px;
  padding: 4px;
}
.tab-item-glass.active {
  background: var(--surface);
  color: var(--color-brand-dark);
  box-shadow: var(--shadow-card);
}

/* Tarjetas de ruta: superficie sólida + borde line. Igualar #sidebar .route-card (index.html L998). */
#sidebar .route-card,
.route-card {
  background: var(--surface);
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
#sidebar .route-card:hover,
.route-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-float);
}
/* Nº de ruta: aplanar sombras 3D (color por ruta intacto). */
.route-number-3d { box-shadow: 0 2px 6px rgba(20, 30, 15, 0.12); }

/* Badges de dificultad: una definición editorial (vence index.html L410-433 + styles.css L356-372). */
.badge-easy   { background: var(--color-brand-soft); color: var(--color-brand-dark); border: none; }
.badge-medium { background: #FBEFD6; color: #7A3B0A; border: none; }
.badge-hard   { background: #FAE0DC; color: #7F1D1D; border: none; }

/* ---- Banderas de idioma: circulares + estado activo NO solo opacity ---- */
.lang-btn { width: 36px; height: 36px; padding: 0; position: relative; }
.lang-btn::after { content: ''; position: absolute; inset: -4px; }  /* hit-area ≥44px */
.lang-btn.active {
  opacity: 1;
  outline: 2px solid #FFFFFF;
  outline-offset: 1px;
  box-shadow: 0 2px 9px rgba(255, 255, 255, 0.35);
}
.lang-btn svg { width: 32px; height: 32px; }

/* ---- Chrome flotante sobre el mapa: glass .94 unificado ----
   .lc-trigger/.trc-btn/.bl-row/.map-control-glass son clases puras → ganan por orden (sin !important). */
.lc-trigger,
.trc-btn,
.bl-row,
.map-control-glass,
.maplibregl-ctrl-group,
.vv-mapnav button {
  background: var(--glass-chrome);
  border-color: var(--glass-chrome-bd);
}
.lc-trigger {
  height: 48px;
  border-radius: 999px;
  box-shadow: var(--shadow-pill);
}
.lc-trigger-count,
.lc-count,
.vv-cnt-badge {
  background: var(--badge-fill);
  color: var(--badge-text);
}
.lc-panel {
  background: var(--surface);
  box-shadow: var(--shadow-popover);
  border-radius: var(--r-modal);
}
.trc-btn,
.bl-row { box-shadow: var(--shadow-float); }

/* Popups del mapa: .82 → glass-chrome (caso AA sobre ortofoto). Igualar los 4 !important. */
.maplibregl-popup-content { background: var(--glass-chrome) !important; }

/* ---- Insignias de sección a color (DuoIcon tint). Uso: data-duo="<seccion>" en el contenedor del icono ---- */
[data-duo] { background: var(--duo-tint-info); border-radius: 11px; }
[data-duo] svg,
[data-duo] .icon { color: var(--duo-ink-info); }
[data-duo="tiempo"]{ background: var(--duo-tint-tiempo) }       [data-duo="tiempo"] svg{ color: var(--duo-ink-tiempo) }
[data-duo="aire"]{ background: var(--duo-tint-aire) }           [data-duo="aire"] svg{ color: var(--duo-ink-aire) }
[data-duo="transporte"]{ background: var(--duo-tint-transporte) } [data-duo="transporte"] svg{ color: var(--duo-ink-transporte) }
[data-duo="rutas"]{ background: var(--duo-tint-rutas) }         [data-duo="rutas"] svg{ color: var(--duo-ink-rutas) }
[data-duo="mapa"]{ background: var(--duo-tint-mapa) }           [data-duo="mapa"] svg{ color: var(--duo-ink-mapa) }
[data-duo="capas"]{ background: var(--duo-tint-capas) }         [data-duo="capas"] svg{ color: var(--duo-ink-capas) }
[data-duo="turismo"]{ background: var(--duo-tint-turismo) }     [data-duo="turismo"] svg{ color: var(--duo-ink-turismo) }
[data-duo="servicios"]{ background: var(--duo-tint-servicios) } [data-duo="servicios"] svg{ color: var(--duo-ink-servicios) }
[data-duo="fotos"]{ background: var(--duo-tint-fotos) }         [data-duo="fotos"] svg{ color: var(--duo-ink-fotos) }
[data-duo="cine"]{ background: var(--duo-tint-cine) }           [data-duo="cine"] svg{ color: var(--duo-ink-cine) }
[data-duo="info"]{ background: var(--duo-tint-info) }           [data-duo="info"] svg{ color: var(--duo-ink-info) }
[data-duo="filtros"]{ background: var(--duo-tint-filtros) }     [data-duo="filtros"] svg{ color: var(--duo-ink-filtros) }
[data-duo="pueblos"]{ background: var(--duo-tint-pueblos) }     [data-duo="pueblos"] svg{ color: var(--duo-ink-pueblos) }
[data-duo="naturaleza"]{ background: var(--duo-tint-naturaleza) } [data-duo="naturaleza"] svg{ color: var(--duo-ink-naturaleza) }
[data-duo="restauracion"]{ background: var(--duo-tint-restauracion) } [data-duo="restauracion"] svg{ color: var(--duo-ink-restauracion) }
[data-duo="patrimonio"]{ background: var(--duo-tint-patrimonio) } [data-duo="patrimonio"] svg{ color: var(--duo-ink-patrimonio) }
[data-duo="tren"]{ background: var(--duo-tint-tren) }           [data-duo="tren"] svg{ color: var(--duo-ink-tren) }
[data-duo="agua"]{ background: var(--duo-tint-agua) }           [data-duo="agua"] svg{ color: var(--duo-ink-agua) }
[data-duo="incidencias"]{ background: var(--duo-tint-incidencias) } [data-duo="incidencias"] svg{ color: var(--duo-ink-incidencias) }
/* Pase 2: solo tinte. Sin --duo-ink-*: los SVG v8 son multicolor (no usan currentColor). */
[data-duo="aseos"]{ background: var(--duo-tint-aseos) }
[data-duo="taller"]{ background: var(--duo-tint-taller) }
[data-duo="parking"]{ background: var(--duo-tint-parking) }
[data-duo="estilo"]{ background: var(--duo-tint-estilo) }
[data-duo="bici"]{ background: var(--duo-tint-bici) }
[data-duo="senderismo"]{ background: var(--duo-tint-senderismo) }
[data-duo="mirador"]{ background: var(--duo-tint-mirador) }
[data-duo="tunel"]{ background: var(--duo-tint-tunel) }
[data-duo="viaducto"]{ background: var(--duo-tint-viaducto) }
[data-duo="floracion"]{ background: var(--duo-tint-floracion) }
[data-duo="accesible"]{ background: var(--duo-tint-accesible) }
[data-duo="gpx"]{ background: var(--duo-tint-gpx) }
[data-duo="sos"]{ background: var(--duo-tint-sos) }
[data-duo="eventos"]{ background: var(--duo-tint-eventos) }
[data-duo="brand"]{ background: var(--duo-tint-brand) }
[data-duo="ubicacion"]{ background: var(--duo-tint-ubicacion) }

/* Pase 3: cabeceras de modal con insignia DuoIcon tintada */
.wx-header-ic[data-duo], .tx-header-ic[data-duo] { background: var(--duo-tint-tiempo); }
.tx-header-ic[data-duo] { background: var(--duo-tint-transporte); }
.wx-header-ic[data-duo] svg { color: var(--duo-ink-tiempo); }
.tx-header-ic[data-duo] svg { color: var(--duo-ink-transporte); }

/* ============================================================================
   POI MARKER v8 — "Solid Chip" FINAL
   PEGAR EN src/styles/redesign-v8-chrome.css, REEMPLAZANDO el bloque actual de
   marcadores POI (lineas ~154-200). Este fichero carga el ULTIMO
   (index.html:6497) -> gana por orden de documento sin !important.
   NO pegar en el <style> inline del <head>: lo pisaria este mismo fichero.
   - Se MANTIENE background:var(--glass-chrome) (= rgba(255,255,255,.94)) ->
     el test 28-markers-v8.spec.js:159-161 ('0.94') sigue verde.
   - Se ELIMINA backdrop-filter (el coste real con ~514 markers).
   - El CONTENEDOR .poi-marker es el chip; NO hay wrapper .poi-chip.
   - Ningun transform en el contenedor (ancla al mapa). Animacion solo en hijos.
   ============================================================================ */

/* Color oscurecido del tipo SOLO para anilla + icono de linea (>=3:1, WCAG 1.4.11).
   cfg.color puro se conserva para cabecera/tooltip. Fallback si no hay color-mix. */
.poi-marker { --poi-ink: var(--poi-color, #6B7280); }
@supports (color: color-mix(in srgb, red, blue)) {
  .poi-marker { --poi-ink: color-mix(in srgb, var(--poi-color, #6B7280) 78%, #14201d); }
}

/* ---- Chip base (TIER 2 por defecto) ---- */
.poi-marker {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--glass-chrome, rgba(255, 255, 255, 0.94)); /* 0.94 -> test verde */
  -webkit-backdrop-filter: none;   /* se retira el blur (perf con 514 nodos) */
  backdrop-filter: none;
  border: 2px solid var(--poi-ink, #6B7280);
  box-shadow:
    0 1px 2px rgba(20, 40, 15, 0.22),
    0 3px 8px rgba(20, 40, 15, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  cursor: pointer;
  position: relative;              /* contenedor SIN transform: ancla al mapa */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: box-shadow var(--dur-base, 250ms) var(--ease-snappy, ease),
              border-color var(--dur-base, 250ms) var(--ease-snappy, ease);
  -webkit-tap-highlight-color: transparent;
}

/* Icono de LINEA (hijo directo <svg> = cfg.svg): tenido con --poi-ink. Los
   DuoIcons NO entran aqui (van anidados en .poi-duo) -> conservan su paleta. */
.poi-marker > svg {
  width: 15px;
  height: 15px;
  color: var(--poi-ink, #6B7280);
  stroke: var(--poi-ink, #6B7280);
  flex-shrink: 0;
  display: block;
  transition: transform var(--dur-base, 250ms) var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}
/* DuoIcon: ilustracion multicolor -> solo encajar, NUNCA recolorear. */
.poi-marker .poi-duo { width: 18px; height: 18px; display: block; flex-shrink: 0; line-height: 0; }
.poi-marker.poi-marker--duo svg {
  width: 18px; height: 18px;
  color: initial; stroke: none;
  transition: transform var(--dur-base, 250ms) var(--ease-spring, cubic-bezier(.34,1.56,.64,1));
}

/* ---- HOVER: anima SOLO el hijo + refuerza chip. Contenedor quieto. ---- */
.poi-marker:hover {
  z-index: 20 !important;
  border-color: var(--poi-color, #6B7280);
  box-shadow:
    0 2px 5px rgba(20, 40, 15, 0.26),
    0 8px 18px rgba(20, 40, 15, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.poi-marker:hover > svg,
.poi-marker.poi-marker--duo:hover svg { transform: scale(1.16); }

/* ---- FOCUS por teclado (el JS ya pone role/tabindex/aria-label) ---- */
.poi-marker:focus { outline: none; }
.poi-marker:focus-visible {
  z-index: 25 !important;
  box-shadow: var(--focus, 0 0 0 2px #fff, 0 0 0 5px rgba(74,140,63,.55));
}

/* ============================================================================
   JERARQUIA POR TIER — solo CSS sobre [data-poi-type] (ya existe, sin tocar JS)
   ============================================================================ */
/* TIER 1 — destacados: chip mayor, anilla mas marcada, z-index superior. */
.poi-marker[data-poi-type="patrimonio"],
.poi-marker[data-poi-type="estacion"],
.poi-marker[data-poi-type="mirador"],
.poi-marker[data-poi-type="puente"],
.poi-marker[data-poi-type="tunel"],
.poi-marker[data-poi-type="naturaleza"],
.poi-marker[data-poi-type="area_descanso"],
.poi-marker[data-poi-type="foto_spot"],
.poi-marker[data-poi-type="panel_interpretativo"],
.poi-marker[data-poi-type="oficina_turismo"] {
  width: 34px;
  height: 34px;
  border-width: 2.5px;
  z-index: 6;
}
.poi-marker[data-poi-type="patrimonio"] > svg,
.poi-marker[data-poi-type="estacion"] > svg,
.poi-marker[data-poi-type="mirador"] > svg,
.poi-marker[data-poi-type="puente"] > svg,
.poi-marker[data-poi-type="tunel"] > svg,
.poi-marker[data-poi-type="naturaleza"] > svg,
.poi-marker[data-poi-type="area_descanso"] > svg,
.poi-marker[data-poi-type="foto_spot"] > svg,
.poi-marker[data-poi-type="panel_interpretativo"] > svg,
.poi-marker[data-poi-type="oficina_turismo"] > svg { width: 17px; height: 17px; }
.poi-marker[data-poi-type="patrimonio"].poi-marker--duo svg,
.poi-marker[data-poi-type="estacion"].poi-marker--duo svg,
.poi-marker[data-poi-type="mirador"].poi-marker--duo svg,
.poi-marker[data-poi-type="puente"].poi-marker--duo svg,
.poi-marker[data-poi-type="tunel"].poi-marker--duo svg,
.poi-marker[data-poi-type="naturaleza"].poi-marker--duo svg,
.poi-marker[data-poi-type="foto_spot"].poi-marker--duo svg,
.poi-marker[data-poi-type="oficina_turismo"].poi-marker--duo svg { width: 20px; height: 20px; }

/* TIER 3 — servicios discretos: chip menor y ligeramente atenuado; recupera
   presencia al hover/foco/activo. opacity .88 (no .8) para no penalizar la
   visibilidad de servicios sensibles sobre basemap oscuro. */
.poi-marker[data-poi-type="farmacia"],
.poi-marker[data-poi-type="cajero"],
.poi-marker[data-poi-type="centro_salud"],
.poi-marker[data-poi-type="comisaria"],
.poi-marker[data-poi-type="servicio"],
.poi-marker[data-poi-type="aparcamiento"],
.poi-marker[data-poi-type="albergue"],
.poi-marker[data-poi-type="alquiler_bici"] {
  width: 26px;
  height: 26px;
  border-width: 2px;
  opacity: 0.88;
  z-index: 3;
}
.poi-marker[data-poi-type="farmacia"] > svg,
.poi-marker[data-poi-type="cajero"] > svg,
.poi-marker[data-poi-type="centro_salud"] > svg,
.poi-marker[data-poi-type="comisaria"] > svg,
.poi-marker[data-poi-type="servicio"] > svg,
.poi-marker[data-poi-type="aparcamiento"] > svg,
.poi-marker[data-poi-type="albergue"] > svg,
.poi-marker[data-poi-type="alquiler_bici"] > svg { width: 13px; height: 13px; }
.poi-marker[data-poi-type="farmacia"]:hover,
.poi-marker[data-poi-type="cajero"]:hover,
.poi-marker[data-poi-type="centro_salud"]:hover,
.poi-marker[data-poi-type="comisaria"]:hover,
.poi-marker[data-poi-type="servicio"]:hover,
.poi-marker[data-poi-type="aparcamiento"]:hover,
.poi-marker[data-poi-type="albergue"]:hover,
.poi-marker[data-poi-type="alquiler_bici"]:hover,
.poi-marker[data-poi-type="farmacia"]:focus-visible,
.poi-marker[data-poi-type="cajero"]:focus-visible,
.poi-marker[data-poi-type="centro_salud"]:focus-visible,
.poi-marker[data-poi-type="comisaria"]:focus-visible,
.poi-marker[data-poi-type="servicio"]:focus-visible,
.poi-marker[data-poi-type="aparcamiento"]:focus-visible { opacity: 1; }

/* punto_conflictivo — alerta: anilla en su rojo PURO (no oscurecida) + z-index 7. */
.poi-marker[data-poi-type="punto_conflictivo"] {
  border-color: var(--poi-color, #DC2626);
  z-index: 7;
}

/* ============================================================================
   ESTADO ACTIVO (.is-active) — lo pone map-sync.js y el retoque instantaneo.
   Reconciliado con poi-icons.css:49-67: anulamos su filter:drop-shadow duro y
   damos anilla de marca limpia; el pulse ::before (transform/opacity) se CONSERVA.
   ============================================================================ */
.poi-marker.is-active {
  filter: none;                      /* anula el drop-shadow heredado */
  opacity: 1;                        /* gana aunque sea TIER 3 */
  z-index: 40 !important;
  border-color: var(--color-brand, #4A8C3F);
  box-shadow:
    0 0 0 3px var(--surface, #fff),
    0 0 0 5px var(--poi-color, #4A8C3F),
    0 10px 22px rgba(20, 40, 15, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.poi-marker.is-active > svg { transform: scale(1.2); }
.poi-marker.is-active.poi-marker--duo svg { transform: scale(1.18); }

/* ============================================================================
   TOOLTIP (.poi-tip) — tokens de tema; conserva el unico blur en pantalla
   (1 a la vez). Estructura interna intacta -> el re-traductor de index.html:3233
   sigue funcionando.
   ============================================================================ */
.poi-marker .poi-tip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--glass-chrome, rgba(255, 255, 255, 0.94));
  -webkit-backdrop-filter: var(--glass-blur, blur(18px) saturate(150%));
  backdrop-filter: var(--glass-blur, blur(18px) saturate(150%));
  color: var(--text-primary, #1C2418);
  padding: 7px 12px;
  border-radius: var(--r-card, 14px);
  border: 1px solid var(--line, #E1E6DC);
  font-size: 11px;
  line-height: 1.4;
  box-shadow: 0 8px 24px rgba(20, 40, 15, 0.16);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s var(--ease-snappy, ease);
  z-index: 100;
  max-width: 230px;
  white-space: normal;
  text-align: left;
}
.poi-marker .poi-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--glass-chrome, rgba(255, 255, 255, 0.94));
}
.poi-marker:hover .poi-tip,
.poi-marker:focus-visible .poi-tip { opacity: 1; }

/* ============================================================================
   MOVIL — el CONTENEDOR sube a 44px (area tactil >=44px sin pseudo que choque
   con el pulse ::before; MapLibre lo centra simetrico -> anclaje intacto).
   ============================================================================ */
@media (max-width: 768px) {
  .poi-marker { width: 44px; height: 44px; }
  .poi-marker > svg { width: 17px; height: 17px; }
  .poi-marker.poi-marker--duo svg { width: 20px; height: 20px; }
  .poi-marker[data-poi-type="patrimonio"],
  .poi-marker[data-poi-type="estacion"],
  .poi-marker[data-poi-type="mirador"],
  .poi-marker[data-poi-type="puente"],
  .poi-marker[data-poi-type="tunel"],
  .poi-marker[data-poi-type="naturaleza"],
  .poi-marker[data-poi-type="area_descanso"],
  .poi-marker[data-poi-type="foto_spot"],
  .poi-marker[data-poi-type="panel_interpretativo"],
  .poi-marker[data-poi-type="oficina_turismo"] { width: 46px; height: 46px; }
  .poi-marker[data-poi-type="farmacia"],
  .poi-marker[data-poi-type="cajero"],
  .poi-marker[data-poi-type="centro_salud"],
  .poi-marker[data-poi-type="comisaria"],
  .poi-marker[data-poi-type="servicio"],
  .poi-marker[data-poi-type="aparcamiento"],
  .poi-marker[data-poi-type="albergue"],
  .poi-marker[data-poi-type="alquiler_bici"] { width: 44px; height: 44px; }
}

/* ---- reduced-motion: sin scale en iconos; el pulse ::before lo apaga poi-icons.css ---- */
@media (prefers-reduced-motion: reduce) {
  .poi-marker > svg,
  .poi-marker.poi-marker--duo svg { transition: none; }
  .poi-marker:hover > svg,
  .poi-marker:hover.poi-marker--duo svg,
  .poi-marker.is-active > svg,
  .poi-marker.is-active.poi-marker--duo svg { transform: none; }
}

.town-marker-icon {
  background: var(--glass-chrome, rgba(255, 255, 255, 0.94));
  -webkit-backdrop-filter: var(--glass-blur, blur(20px));
  backdrop-filter: var(--glass-blur, blur(20px));
  border: 1px solid var(--line, #E1E6DC);
  box-shadow: 0 2px 10px rgba(20, 40, 15, 0.14);
}
.town-marker-icon svg { width: 18px; height: 18px; }
.town-marker-tip {
  background: var(--badge-fill, #1A4A18);   /* AA 10.3:1 con texto blanco */
}
.town-marker-tip::after { border-top-color: var(--badge-fill, #1A4A18); }

@media (prefers-reduced-motion: reduce) {
  .poi-marker:hover svg, .poi-marker.poi-marker--duo:hover svg { transform: none; }
}

/* Pase 4: km de vía a tokens v8 — inicio/fin badge-fill (AA), intermedios glass */
/* Gana a los <style> inline por orden de documento (este fichero carga al final del body). */
/* Especificidad igual (0,1,0) — el orden es suficiente; no se usa !important. */
.km-marker-start, .km-marker-end {
  background: var(--badge-fill, #1A4A18);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  border-radius: var(--r-pill, 999px);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 800;
  font-size: 9px;
  min-width: 30px;
  height: 19px;
  box-shadow: 0 2px 6px rgba(26, 74, 24, 0.3);
}
.km-marker-dot {
  background: var(--glass-chrome, rgba(255, 255, 255, 0.94));
  color: var(--text-primary, #1C2418);
  font-family: 'Manrope', system-ui, sans-serif;
  font-weight: 700;
  border-radius: var(--r-pill, 999px);
}
