/* ============================================================
   Vías Verdes Murcia V5 — Design Tokens
   Sistema unificado de variables CSS para toda la app.
   Mantiene la paleta teal de V3 + amplía con escalas sistemáticas
   de espaciado, tipografía fluida, sombras Liquid Glass y motion.
   ============================================================ */

:root {
  /* ===== PALETA MARCA (heredada de V3, refinada) ===== */
  --color-brand: #4A8C3F;            /* Murcia teal principal */
  --color-brand-light: #8DBA8A;       /* hover, glow */
  --color-brand-glow: #A9CBA0;
  --color-brand-dark: #1A4A18;
  --color-brand-accent: #8DBA8A;

  /* ===== FONDOS ===== */
  --bg-primary: #F4F3EE;              /* warm off-white */
  --bg-secondary: rgba(230, 240, 237, 0.45);
  --bg-sidebar: rgba(255, 255, 255, 0.96);  /* v8: editorial near-solid (era rgba(244,243,238,.82)) */
  --bg-header: linear-gradient(135deg, rgba(74, 140, 63, 0.92), rgba(26, 74, 24, 0.95));

  /* ===== TEXTO (contraste WCAG AA verificado) ===== */
  --text-primary: #1C2418;            /* v8 editorial, +contraste (era #2C3E3A) */
  --text-secondary: #4F6661;          /* refinado para AA en pequeño */
  --text-muted: #6E8580;              /* refinado desde #8EA09B (V3) — ahora AA en 14px+ */
  --text-on-brand: #FFFFFF;           /* sobre fondos teal */

  /* ===== GLASS / CARDS ===== */
  --card-bg: #FFFFFF;                 /* v8: tarjeta sólida (era rgba(255,255,255,.55)) */
  --card-border: rgba(201, 212, 196, 0.5);
  --card-shadow: rgba(0, 0, 0, 0.06);
  --card-hover-shadow: rgba(74, 140, 63, 0.18);

  --input-bg: rgba(255, 255, 255, 0.6);
  --modal-bg: rgba(244, 243, 238, 0.88);
  --modal-overlay: rgba(26, 74, 24, 0.25);

  --stat-bg: rgba(230, 240, 237, 0.5);
  --stat-border: rgba(201, 212, 196, 0.6);

  --chart-bg: rgba(230, 240, 237, 0.45);
  --chart-border: rgba(201, 212, 196, 0.5);
  --chart-grid: rgba(44, 62, 58, 0.06);

  --legend-bg: rgba(230, 240, 237, 0.5);
  --filter-bg: rgba(230, 240, 237, 0.5);
  --filter-hover-bg: rgba(74, 140, 63, 0.08);

  --border-color: rgba(201, 212, 196, 0.45);
  --scrollbar-track: transparent;
  --scrollbar-thumb: rgba(74, 140, 63, 0.25);
  --scrollbar-hover: rgba(74, 140, 63, 0.4);

  /* ===== BADGES DIFICULTAD ===== */
  --badge-easy-bg: rgba(74, 140, 63, 0.15);
  --badge-easy-text: #1A4A18;
  --badge-medium-bg: rgba(245, 158, 11, 0.18);
  --badge-medium-text: #7A3B0A;       /* refinado para AA */
  --badge-hard-bg: rgba(239, 68, 68, 0.18);
  --badge-hard-text: #7F1D1D;         /* refinado para AA */

  --btn-secondary-bg: rgba(230, 240, 237, 0.5);
  --btn-secondary-text: #2C3E3A;
  --btn-secondary-hover: rgba(230, 240, 237, 0.75);

  --attribution-bg: rgba(244, 243, 238, 0.6);
  --attribution-text: #6E8580;

  --loader-from: #4A8C3F;
  --loader-to: #1A4A18;

  /* ===== GLASS EFFECTS ===== */
  --glass-blur: blur(20px) saturate(160%);  /* v8 (era blur(40px) saturate(180%)) */
  --glass-blur-light: blur(20px) saturate(150%);
  --glass-blur-strong: blur(60px) saturate(200%);
  --glass-border: 1px solid rgba(201, 212, 196, 0.45);
  --glass-inset: inset 0 1px 0 rgba(255, 255, 255, 0.5),
                 inset 0 -1px 0 rgba(0, 0, 0, 0.05);
  --glass-shadow: 0 8px 32px rgba(26, 74, 24, 0.08),
                  0 2px 8px rgba(0, 0, 0, 0.04);

  /* ===== ESCALA SOMBRAS LIQUID GLASS ===== */
  --shadow-glass-sm: 0 4px 16px rgba(26, 74, 24, 0.06),
                     inset 0 1px 0 rgba(255, 255, 255, 0.4);
  --shadow-glass-md: 0 8px 32px rgba(26, 74, 24, 0.08),
                     inset 0 1px 0 rgba(255, 255, 255, 0.5);
  --shadow-glass-lg: 0 16px 48px rgba(26, 74, 24, 0.12),
                     inset 0 1px 0 rgba(255, 255, 255, 0.55);
  --shadow-glass-xl: 0 24px 64px rgba(26, 74, 24, 0.16),
                     inset 0 1px 0 rgba(255, 255, 255, 0.6);

  /* ===== ESPACIADO BASE-4 ===== */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ===== TIPOGRAFÍA FLUIDA ===== */
  /* clamp(min, vw-based, max) — se adapta entre móvil y desktop */
  --font-xs: clamp(11px, 0.78vw + 9px, 13px);
  --font-sm: 14px;
  --font-base: 16px;
  --font-md: 18px;
  --font-lg: clamp(20px, 1.2vw + 16px, 22px);
  --font-xl: clamp(24px, 1.8vw + 18px, 28px);
  --font-2xl: clamp(28px, 2.2vw + 20px, 34px);
  --font-3xl: clamp(34px, 2.8vw + 24px, 44px);

  /* Pesos */
  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  /* Line heights */
  --leading-tight: 1.2;
  --leading-snug: 1.35;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* Letter spacing */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
  --tracking-wider: 0.05em;

  /* ===== ICONOS SISTEMÁTICOS ===== */
  --icon-xs: 12px;
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 32px;
  --icon-2xl: 48px;

  /* ===== RADIOS ===== */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-pill: 999px;
  --radius-full: 50%;

  /* ===== TAMAÑO DE TARGET TÁCTIL (iOS HIG: 44px mínimo) ===== */
  --touch-target: 44px;
  --touch-target-sm: 36px;

  /* ===== MICROINTERACCIONES ===== */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);  /* overshoot suave */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);     /* out-quint */
  --ease-snappy: cubic-bezier(0.4, 0, 0.2, 1);       /* material standard */
  --ease-out-quad: cubic-bezier(0, 0, 0.58, 1);

  --dur-instant: 80ms;
  --dur-fast: 150ms;
  --dur-base: 250ms;
  --dur-slow: 400ms;
  --dur-slower: 600ms;

  /* ===== FOCUS RING ACCESIBLE ===== */
  --ring-width: 3px;
  --ring-color: rgba(74, 140, 63, 0.55);
  --ring-offset: 2px;
  --ring: 0 0 0 var(--ring-offset) var(--bg-primary),
          0 0 0 calc(var(--ring-offset) + var(--ring-width)) var(--ring-color);

  /* ===== Z-INDEX SCALE ===== */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-sidebar: 300;
  --z-overlay: 800;
  --z-modal: 900;
  --z-toast: 1000;
  --z-tooltip: 1100;

  /* ===== BOTTOM SHEET (móvil) ===== */
  --sheet-collapsed: 140px;
  --sheet-half: 45vh;
  --sheet-full-offset: 60px;  /* desde el top de la ventana */

  /* ===== BREAKPOINTS (informativos — usar en media queries directamente) ===== */
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1440px;
  --bp-3xl: 1920px;

  /* ===== SIDEBAR (V5.1) — Variable por viewport ===== */
  --sidebar-width: 380px;             /* default desktop estándar (1024-1439) */

  /* ============================================================
     REDISEÑO v8 (Pase 1) — tokens aditivos. Lenguaje "editorial".
     ============================================================ */
  /* Superficies sólidas y líneas (dialecto v8) */
  --surface:        #FFFFFF;
  --surface-raised: #FFFFFF;
  --surface-sunken: #F6F8F4;
  --surface-content:#FFFFFF;
  --line:           #E1E6DC;
  --line-strong:    #C9D4C4;
  --color-brand-soft:   #EAF1E7;
  --color-brand-softer: #F4F8F2;

  /* Glass del chrome flotante CON texto (AA sobre #EDEDED, peor píxel) */
  --glass-chrome:       rgba(255, 255, 255, 0.94);
  --glass-chrome-bd:    rgba(255, 255, 255, 0.70);
  --glass-chrome-solid: #FBFCFA;

  /* Marca */
  --font-brand: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;
  --brand-tracking: -0.02em;

  /* Scrims (3 cosas distintas) */
  --scrim-on-photo: rgba(15, 25, 12, 0.42);
  --scrim-text:     rgba(10, 18, 8, 0.55);

  /* Sombras v8 */
  --shadow-card:    0 1px 3px rgba(20, 30, 15, 0.05);
  --shadow-pill:    0 8px 24px rgba(26, 74, 24, 0.18);
  --shadow-float:   0 6px 18px rgba(26, 74, 24, 0.20);
  --shadow-popover: 0 20px 60px rgba(15, 30, 12, 0.30);
  --shadow-modal:   0 24px 70px rgba(15, 30, 12, 0.40);

  --state-hover:  rgba(74, 140, 63, 0.08);
  --state-active: rgba(74, 140, 63, 0.14);

  /* Texto blanco pequeño sobre fill brand = 4.11:1 ✗AA → fill = brand-dark (10.3:1 ✓) */
  --badge-fill: #1A4A18;
  --badge-text: #FFFFFF;

  --grabber-w: 40px; --grabber-h: 4px; --grabber-hit: 44px;

  /* Alias dialecto v8 (para escribir el override en v8) */
  --r-pill: 999px; --r-card: var(--radius-lg); --r-modal: 22px; --r-md: var(--radius-md); --r-sm: 10px;
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-md: 18px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 34px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s7: 32px; --s8: 48px;

  /* DuoIcon — tinte de fondo + acento del icono (claro). Acentos oscurecidos donde no daban ≥3:1. */
  --duo-tint-tiempo:#DCEEFA;       --duo-ink-tiempo:#2E6FA8;
  --duo-tint-aire:#E4F1E6;         --duo-ink-aire:#2E6B34;
  --duo-tint-transporte:#DEEAFA;   --duo-ink-transporte:#2E6FA8;
  --duo-tint-rutas:#DBEFE0;        --duo-ink-rutas:#2E6B34;
  --duo-tint-mapa:#DAEAEC;         --duo-ink-mapa:#2E6B34;
  --duo-tint-capas:#DBEFE0;        --duo-ink-capas:#2E6B34;
  --duo-tint-turismo:#FAE0E8;      --duo-ink-turismo:#A14E70;
  --duo-tint-servicios:#FBEFD6;    --duo-ink-servicios:#8A5A12;
  --duo-tint-fotos:#E7E2F7;        --duo-ink-fotos:#2E6FA8;
  --duo-tint-cine:#E7E2F7;         --duo-ink-cine:#5B4BB5;
  --duo-tint-info:#DEEAFA;         --duo-ink-info:#2E6FA8;
  --duo-tint-filtros:#E6EAF2;      --duo-ink-filtros:#2E6B34;
  --duo-tint-brand:#DCEFEA;        --duo-ink-brand:#2E6B34;
  --duo-tint-ubicacion:#FAE0E0;    --duo-ink-ubicacion:#B5352B;
  --duo-tint-pueblos:#E7E2F7;      --duo-ink-pueblos:#5B4BB5;
  --duo-tint-naturaleza:#E0F0E2;   --duo-ink-naturaleza:#2E6B34;
  --duo-tint-restauracion:#FAE0DC; --duo-ink-restauracion:#B5352B;
  --duo-tint-patrimonio:#F0E9DC;   --duo-ink-patrimonio:#8A5A12;
  --duo-tint-tren:#DEEAFA;         --duo-ink-tren:#2E6FA8;
  --duo-tint-agua:#DCEEFA;         --duo-ink-agua:#2E6FA8;
  --duo-tint-incidencias:#FBE6CB;  --duo-ink-incidencias:#8A5A12;

  /* Pase 2 — 14 DuoIcons nuevos (solo tinte: los SVG llevan el color dibujado) */
  --duo-tint-aseos:#DCEEFA;      --duo-tint-taller:#FBEFD6;
  --duo-tint-parking:#DEEAFA;    --duo-tint-estilo:#E6EAF2;
  --duo-tint-bici:#DBEFE0;       --duo-tint-senderismo:#F0E9DC;
  --duo-tint-mirador:#DCEEFA;    --duo-tint-tunel:#E6EAF2;
  --duo-tint-viaducto:#F0E9DC;   --duo-tint-floracion:#FAE0E8;
  --duo-tint-accesible:#DEEAFA;  --duo-tint-gpx:#DBEFE0;
  --duo-tint-sos:#FAE0DC;        --duo-tint-eventos:#FBEFD6;

  /* Pase 2 — alias del dialecto v8 + focus ring del handoff */
  --touch: var(--touch-target); --touch-sm: var(--touch-target-sm);
  --focus: 0 0 0 2px #fff, 0 0 0 5px rgba(74,140,63,.55);
}

/* ===== Dark mode — activado con <html data-theme="dark"> (preset "Oscuro"/"Satélite") =====
   Override de tokens manteniendo el sistema glass. Solo aplica cuando el atributo está
   presente, por lo que el look claro por defecto queda intacto. */
[data-theme="dark"] {
  --bg-primary: #14201D;
  --bg-secondary: rgba(40, 58, 53, 0.5);
  --bg-sidebar: rgba(20, 32, 29, 0.86);
  --bg-header: linear-gradient(135deg, rgba(26, 74, 24, 0.95), rgba(12, 20, 18, 0.97));

  --text-primary: #ECF3F0;
  --text-secondary: #B4C6C0;
  --text-muted: #8AA39C;
  --text-on-brand: #FFFFFF;

  --card-bg: rgba(40, 58, 53, 0.45);
  --card-border: rgba(141, 186, 138, 0.18);
  --card-shadow: rgba(0, 0, 0, 0.45);
  --card-hover-shadow: rgba(141, 186, 138, 0.25);

  --input-bg: rgba(40, 58, 53, 0.55);
  --modal-bg: rgba(20, 32, 29, 0.92);
  --modal-overlay: rgba(0, 0, 0, 0.55);

  --stat-bg: rgba(40, 58, 53, 0.5);
  --stat-border: rgba(141, 186, 138, 0.2);

  --chart-bg: rgba(40, 58, 53, 0.45);
  --chart-border: rgba(141, 186, 138, 0.2);
  --chart-grid: rgba(236, 243, 240, 0.08);

  --legend-bg: rgba(40, 58, 53, 0.5);
  --filter-bg: rgba(40, 58, 53, 0.5);
  --filter-hover-bg: rgba(141, 186, 138, 0.14);

  --border-color: rgba(141, 186, 138, 0.2);
  --scrollbar-thumb: rgba(141, 186, 138, 0.3);
  --scrollbar-hover: rgba(141, 186, 138, 0.5);

  --attribution-text: #B4C6C0;

  /* ===== Rediseño v8 — dark ===== */
  --bg-sidebar: #1D2C28;             /* sólido editorial dark */
  --card-bg: #1D2C28;
  --surface: #1D2C28;
  --surface-raised: #243530;
  --surface-sunken: #18241F;
  --surface-content: #1D2C28;
  --line: #2B3D38;
  --line-strong: #3C524C;
  --color-brand-soft: #20352B;
  --color-brand-softer: #1A2A23;
  --glass-chrome: rgba(28, 42, 38, 0.94);
  --glass-chrome-bd: rgba(255, 255, 255, 0.10);
  --glass-chrome-solid: #1F2F2A;
  --badge-fill: #1A4A18;
  --shadow-card: 0 1px 3px rgba(0,0,0,0.4);
  --shadow-popover: 0 20px 60px rgba(0,0,0,0.5);
  --shadow-modal: 0 24px 70px rgba(0,0,0,0.6);
  /* DuoIcon dark: tinte oscuro translúcido + acento aclarado (≥3:1). Las usadas en chrome (capas/dock/info). */
  --duo-tint-tiempo:#1E2E33; --duo-ink-tiempo:#7FB5DF;
  --duo-tint-aire:#1C2E22; --duo-ink-aire:#7FC089;
  --duo-tint-transporte:#1E2A33; --duo-ink-transporte:#7FA8D2;
  --duo-tint-rutas:#1C2E22; --duo-ink-rutas:#7FC089;
  --duo-tint-mapa:#1C2E2E; --duo-ink-mapa:#7FC089;
  --duo-tint-capas:#1C2E22; --duo-ink-capas:#7FC089;
  --duo-tint-info:#1E2A33; --duo-ink-info:#7FA8D2;
  --duo-tint-filtros:#212833; --duo-ink-filtros:#7FC089;
  --duo-tint-patrimonio:#2A2A1F; --duo-ink-patrimonio:#D8B36A;
  --duo-tint-pueblos:#272238; --duo-ink-pueblos:#A99BE6;
  --duo-tint-cine:#272238; --duo-ink-cine:#A99BE6;
  /* Pase 2 — dark para el resto de tints usados por el hub */
  --duo-tint-turismo:#2E2127;    --duo-tint-servicios:#2A2A1F;
  --duo-tint-fotos:#272238;      --duo-tint-tren:#1E2A33;
  --duo-tint-agua:#1E2E33;       --duo-tint-restauracion:#2E211F;
  --duo-tint-naturaleza:#1C2E22; --duo-tint-incidencias:#2A2A1F;
  --duo-tint-ubicacion:#2E211F;  --duo-tint-brand:#1C2E2E;
  --duo-tint-aseos:#1E2E33;      --duo-tint-taller:#2A2A1F;
  --duo-tint-parking:#1E2A33;    --duo-tint-estilo:#212833;
  --duo-tint-bici:#1C2E22;       --duo-tint-senderismo:#2A2A1F;
  --duo-tint-mirador:#1E2E33;    --duo-tint-tunel:#212833;
  --duo-tint-viaducto:#2A2A1F;   --duo-tint-floracion:#2E2127;
  --duo-tint-accesible:#1E2A33;  --duo-tint-gpx:#1C2E22;
  --duo-tint-sos:#2E211F;        --duo-tint-eventos:#2A2A1F;
  --focus: 0 0 0 2px #14201d, 0 0 0 5px rgba(141,186,138,.6);
}

/* ===== Soporte para reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms;
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
    --dur-slower: 0ms;
  }
}

/* ===========================================================
   MODO SENIOR (V5.1 prototipo)
   Activado con <body data-senior="on">. Override de tokens
   manteniendo el sistema clamp() para que la fluidez sobreviva.
   Sube tipografía ~125%, touch targets a 56px, reduce
   translucidez del glass para más contraste, y refuerza
   el color de texto secundario.
   =========================================================== */
[data-senior="on"] {
  /* Tipografía escalada (clamp con valores mayores) */
  --font-xs: clamp(14px, 0.95vw + 11px, 16px);
  --font-sm: 17px;
  --font-base: 20px;
  --font-md: 22px;
  --font-lg: clamp(24px, 1.4vw + 19px, 27px);
  --font-xl: clamp(28px, 2vw + 21px, 33px);
  --font-2xl: clamp(34px, 2.4vw + 24px, 40px);
  --font-3xl: clamp(40px, 3vw + 28px, 52px);

  /* Iconos un escalón mayor */
  --icon-xs: 14px;
  --icon-sm: 20px;
  --icon-md: 24px;
  --icon-lg: 28px;
  --icon-xl: 36px;
  --icon-2xl: 52px;

  /* Touch targets generosos */
  --touch-target: 56px;
  --touch-target-sm: 48px;

  /* Glass menos translúcido (mayor contraste) */
  --glass-blur: blur(20px) saturate(120%);
  --glass-blur-light: blur(12px) saturate(110%);
  --glass-blur-strong: blur(30px) saturate(140%);
  --card-bg: rgba(255, 255, 255, 0.88);
  --modal-bg: rgba(244, 243, 238, 0.96);
  --bg-sidebar: rgba(244, 243, 238, 0.94);

  /* Texto secundario refuerza contraste */
  --text-secondary: #2C3E3A;
  --text-muted: #4F6661;

  /* Bordes más visibles */
  --card-border: rgba(74, 140, 63, 0.45);
  --border-color: rgba(74, 140, 63, 0.4);

  /* ===== Rediseño v8 — senior (glass más opaco) ===== */
  --glass-chrome: rgba(255, 255, 255, 0.97);
  /* Pase 2: los alias NO se re-resuelven (var() sustituye en computed-value
     time del elemento que declara) → redefinir el alias aquí, no solo el target. */
  --touch: 56px; --touch-sm: 48px;
}

/* Rediseño v8 — dark + senior. data-theme va en <html>, data-senior en <body>
   (elementos distintos) → combinador DESCENDIENTE, no compuesto. */
[data-theme="dark"] [data-senior="on"] { --glass-chrome: rgba(28, 42, 38, 0.97); }

/* Marcadores POI más grandes en modo senior.
   SIN transform en el raíz: .poi-marker es el nodo que MapLibre posiciona con
   `transform: translate(...)`; escalarlo aquí lo desplazaría del punto. Se
   agranda la caja (width/height) y el icono interno (svg), no el raíz. */
[data-senior="on"] .poi-marker,
[data-senior="on"] .map-poi-marker {
  width: 38px;
  height: 38px;
}
[data-senior="on"] .poi-marker svg,
[data-senior="on"] .map-poi-marker svg {
  transform: scale(1.18);
}

/* Botones con mayor área táctil */
[data-senior="on"] button,
[data-senior="on"] [role="button"] {
  min-height: var(--touch-target-sm);
}

/* Banderas de idioma más grandes */
[data-senior="on"] .lang-btn { width: 36px; height: 36px; }
[data-senior="on"] .lang-btn svg { width: 30px; height: 30px; }