/* ==========================================================================
   Jardines · Design Tokens
   --------------------------------------------------------------------------
   Sistema de tokens basado en shadcn/ui adaptado a la paleta de
   Patrimonio Nacional. Cumple WCAG 2.2 AA (Real Decreto 1112/2018).

   Consumo: usa siempre var(--token). No introduzcas literales (#hex, px en
   font-size, números mágicos). Si necesitas un valor nuevo, añádelo aquí
   primero siguiendo la convención documentada en CLAUDE.md.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ------------------------------------------------------------------------
     1. COLORES — Paleta base
     Escalas brutas. NO se usan directamente en componentes; sirven para
     componer tokens semánticos. Si un componente necesita un color que no
     existe como semántico, primero crea el semántico apropiado.
     ------------------------------------------------------------------------ */

  /* Brand · Patrimonio Nacional (rojo) */
  --color-brand-50:  #fdf2f0;
  --color-brand-100: #fbe0dc;
  --color-brand-200: #f6c1b9;
  --color-brand-300: #ee988b;
  --color-brand-400: #e1675a;
  --color-brand-500: #cc3a2c;
  --color-brand-600: #b41400; /* color institucional */
  --color-brand-700: #971105;
  --color-brand-800: #7a130c;
  --color-brand-900: #65150e;
  --color-brand-950: #390604;

  /* Gold · Patrimonio Nacional (oro/oliva) */
  --color-gold-50:  #faf6ec;
  --color-gold-100: #f4ecd1;
  --color-gold-200: #ead8a4;
  --color-gold-300: #ddbd6f;
  --color-gold-400: #d0a448;
  --color-gold-500: #b9893a;
  --color-gold-600: #8f6f24; /* color secundario institucional */
  --color-gold-700: #74591f;
  --color-gold-800: #5d471d;
  --color-gold-900: #4d3b1c;
  --color-gold-950: #2c200d;

  /* Neutrales (grises puros — escala `neutral` de Tailwind) */
  --color-neutral-0:   #ffffff;
  --color-neutral-50:  #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;

  /* Acentos editoriales (POIs / tarjetas) */
  --color-accent-amber: #f8ad00;
  --color-accent-coral: #ed6d5f;
  --color-accent-blue:  #5b9bd5;
  --color-accent-green: #7bc67e;

  /* "Adivinanza" (antes "Educación") — morado de marca del tag. Dos valores
     accesibles según el FONDO sobre el que cae el texto:
     - --color-educacion: sobre superficies CLARAS (blanco/card) ≈ 8.4:1 (AAA).
     - --color-educacion-on-dark: sobre superficies OSCURAS (negro) ≥5.6:1.
     Usa el on-dark cuando el texto/borde "Adivinanza" caiga sobre fondo oscuro;
     en modo oscuro --color-educacion ya se remapea al on-dark (sección dark). */
  --color-educacion: #5f00da;
  --color-educacion-on-dark: #a78bfa;

  /* Placeholder de contenedores de imagen (hueco gris cuando no hay imagen).
     Más oscuro que --muted para que se lea claramente como vacío. */
  --image-placeholder: var(--color-neutral-300);


  /* Funcionales */
  --color-success-600: #1f7a3a;
  --color-warning-600: #a06600;
  --color-info-600:    #0e6e9a;
  --color-danger-600:  #b91c1c; /* rojo funcional (Tailwind red-700) — independiente de la marca retirada */

  /* ------------------------------------------------------------------------
     2. COLORES — Tokens semánticos (modo claro)
     Estos son los que usan los componentes. Cada par foreground/background
     cumple un mínimo de 4.5:1 (texto normal) o 3:1 (texto grande / iconos).
     ------------------------------------------------------------------------ */

  --background:           var(--color-neutral-50);   /* fondo de página */
  --foreground:           var(--color-neutral-950);  /* #0a0a0a */

  /* Alias de texto del diseño: text-primary para títulos / texto principal,
     text-secondary para soporte / labels muted. text-secondary es gris frío
     puro (no la paleta cálida) por exigencia del diseño. */
  --text-primary:         var(--foreground);         /* #0a0a0a — sobre --background */
  --text-secondary:       var(--color-neutral-600);  /* #525252 — ~7:1 sobre --background */

  --card:                 var(--color-neutral-0);
  --card-foreground:      var(--color-neutral-900);  /* 18.4:1 */

  --popover:              var(--color-neutral-0);
  --popover-foreground:   var(--color-neutral-900);

  --primary:              var(--color-neutral-900);   /* #171717 — casi-negro (marca neutra) */
  --primary-foreground:   var(--color-neutral-0);     /* blanco */
  --primary-hover:        var(--color-neutral-800);
  --primary-active:       var(--color-neutral-950);

  --secondary:            var(--color-neutral-100);    /* #f5f5f5 — surface/secondary (Figma ref ≈ neutral-100) */
  --secondary-hover:      var(--color-neutral-200);    /* #e5e5e5 — hover de superficies/botones secundarios */
  --secondary-foreground: var(--color-neutral-900);
  --secondary-hover:      var(--color-neutral-200);
  --secondary-active:     var(--color-neutral-300);

  --muted:                var(--color-neutral-100);
  --muted-foreground:     var(--color-neutral-700);  /* 9.6:1 sobre muted */

  --accent:               var(--color-neutral-100);  /* hover sutil */
  --accent-foreground:    var(--color-neutral-900);

  --destructive:          var(--color-danger-600);     /* #b91c1c rojo funcional */
  --destructive-foreground: var(--color-neutral-0);  /* 7.7:1 */

  --success:              var(--color-success-600);
  --success-foreground:   var(--color-neutral-0);
  --warning:              var(--color-warning-600);
  --warning-foreground:   var(--color-neutral-0);
  --info:                 var(--color-info-600);
  --info-foreground:      var(--color-neutral-0);

  --border:               var(--color-neutral-200);  /* bordes decorativos */
  --border-strong:        var(--color-neutral-500);    /* bordes con significado — ≥3:1 */
  --border-medium:        var(--color-neutral-300);  /* #d4d4d4 — borde decorativo medio (pills/pager con etiqueta) */
  --input:                var(--color-neutral-500);    /* borde de input — ≥3:1 (WCAG 1.4.11) */
  --ring:                 var(--color-neutral-700);     /* focus — ≥3:1 sobre fondo (shadcn default no llega; oscurecido) */

  /* Overlays (modales, drawers) */
  --overlay:              rgb(27 27 27 / 0.55);
  --overlay-strong:       rgb(27 27 27 / 0.78);

  /* Overlays sobre imagen — fondos translúcidos en hero/cards/buttons.
     Usan negro puro porque van encima de fotografías y la mezcla con la
     paleta cálida del sistema cantaría. */
  --overlay-image-weak:      rgb(0 0 0 / 0.40);
  --overlay-image-medium:    rgb(0 0 0 / 0.50);
  --overlay-image-strong:    rgb(0 0 0 / 0.60);
  --overlay-image-stronger:  rgb(0 0 0 / 0.70);

  /* Texto blanco con opacidad reducida sobre imagen — usar solo cuando el
     contraste vs el overlay base supere 4.5:1. */
  --text-on-dark-muted:      rgb(255 255 255 / 0.7);

  /* Superficies translúcidas (paneles, badges sobre imagen). */
  --surface-badge-light:       rgb(255 255 255 / 0.9);
  --overlay-white-weak:        rgb(255 255 255 / 0.1); /* velo blanco 10% sobre fondo */
  --overlay-image-white:       rgb(255 255 255 / 0.6);   /* disco blanco translúcido sobre foto (icono oscuro) */
  --overlay-image-white-hover: rgb(255 255 255 / 0.75);  /* hover del disco blanco translúcido */
  /* Disco blanco MUY translúcido sobre fondo oscuro/negro (galería abierta):
     el velo blanco se lee oscuro sobre negro, así que un icono BLANCO encima
     mantiene ≥3:1 (a 0.35 ≈ 8:1, a 0.45 ≈ 4.5:1). NO usar con icono oscuro. */
  --overlay-image-white-soft:       rgb(255 255 255 / 0.18);
  --overlay-image-white-soft-hover: rgb(255 255 255 / 0.30);
  --skeleton-sheen:            rgb(255 255 255 / 0.55);  /* barrido del skeleton de carga sobre --muted */

  /* Superficie opaca para el panel del menú lateral.
     Gris neutro frío (vs --muted #f1f1ec, que es cálido). Contrasta
     ~16:1 con --foreground y ~4.7:1 con --color-neutral-500. */
  --surface-menu:              #f1f1f1;

  /* Trazo de la ruta OSRM Trip en mapas (grande y mini). Doble polyline:
     stroke oscuro (borde) bajo stroke claro (relleno) para legibilidad. */
  --map-route-trip-outer:      #2A2AFC;
  --map-route-trip-inner:      #B6C8FF;
  /* Marker de POI en mapas (punto negro con borde blanco). */
  --map-marker-fill:    #000000;
  --map-marker-stroke:  #ffffff;
  /* Línea conectora punteada marker↔ruta (gris) en el mapa de rutas. */
  --map-connector:      #605F60;

  /* Sombras compuestas — completas con desplazamiento + blur + color para
     mantener la regla §3.1 (no literales en componentes). */
  --shadow-card:         0 4px 20px rgb(0 0 0 / 0.20);
  --shadow-card-soft:    0 2px 8px rgb(0 0 0 / 0.20);
  --shadow-card-elev:    0 6px 20px rgb(0 0 0 / 0.15);
  --shadow-header:       0 2px 12px rgb(0 0 0 / 0.15);
  --shadow-header-soft:  0 4px 20px rgb(0 0 0 / 0.10);
  --shadow-menu-panel:   -4px 0 24px rgb(0 0 0 / 0.18);
  --shadow-spotlight-mask: 0 0 0 2000px rgb(0 0 0 / 0.40);

  /* Gradientes hero — el del jardín tiene scrim arriba+abajo y zona limpia
     en medio para el título; el de home oscurece toda la imagen.
     Las dos variantes del jardín comparten stops, sólo cambia la dirección. */
  --gradient-jardin-hero-bottom: linear-gradient(180deg, rgb(0 0 0 / 0.48) 0%, rgb(0 0 0 / 0) 42.28%, rgb(0 0 0 / 0.80) 100%);
  --gradient-jardin-hero-top:    linear-gradient(0deg,   rgb(0 0 0 / 0.48) 0%, rgb(0 0 0 / 0) 42.28%, rgb(0 0 0 / 0.80) 100%);
  --gradient-home-hero:          linear-gradient(180deg, rgb(0 0 0 / 0.28) 0%, rgb(0 0 0 / 0.56) 100%);

  /* ------------------------------------------------------------------------
     3. TIPOGRAFÍA
     ------------------------------------------------------------------------ */

  --font-serif:           Georgia, 'Times New Roman', serif;
  --font-sans:            'Helvetica Neue', Arial, system-ui, sans-serif;
  --font-mono:            ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;

  /* Fuente de marca. Servida self-hosted desde /fonts/ (woff2). El stack
     de fallback se usa solo durante el FOUT o si el woff2 falla. */
  --font-replica:         'Replica Pro', 'Helvetica Neue', Arial, system-ui, sans-serif;

  --font-body:            var(--font-replica);
  --font-heading:         var(--font-replica);

  /* Tamaños — rem sobre base 16px. Nunca usar px en font-size. */
  --font-size-xs:    0.75rem;     /* 12px */
  --font-size-sm:    0.875rem;    /* 14px */
  --font-size-base:  1rem;        /* 16px — mínimo para texto corrido */
  --font-size-lg:    1.125rem;    /* 18px */
  --font-size-xl:    1.25rem;     /* 20px */
  --font-size-2xl:   1.5rem;      /* 24px */
  --font-size-3xl:   1.875rem;    /* 30px */
  --font-size-32:    2rem;        /* 32px — off-scale: título de hero/sección */
  --font-size-4xl:   2.25rem;     /* 36px */
  --font-size-5xl:   3rem;        /* 48px */
  --font-size-6xl:   3.75rem;     /* 60px */

  --line-height-tight:   1.15;
  --line-height-snug:    1.3;
  --line-height-normal:  1.5;     /* mínimo WCAG 1.4.12 para texto corrido */
  --line-height-relaxed: 1.7;

  --font-weight-light:    300;
  --font-weight-regular:  400;
  --font-weight-medium:   500;   /* sin archivo Replica — evitar uso */
  --font-weight-semibold: 600;   /* sin archivo Replica — evitar uso */
  --font-weight-bold:     700;
  --font-weight-heavy:    900;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.04em;
  --letter-spacing-wider:  0.08em;

  /* ------------------------------------------------------------------------
     4. ESPACIADO — escala de 4px en rem (base 16px)
     Usa siempre tokens. Si necesitas un paso intermedio, añade aquí.
     ------------------------------------------------------------------------ */

  --space-0:   0;
  --space-px:  1px;
  --space-0_5: 0.125rem;  /*  2px */
  --space-1:   0.25rem;   /*  4px */
  --space-1_5: 0.375rem;  /*  6px */
  --space-2:   0.5rem;    /*  8px */
  --space-2_5: 0.625rem;  /* 10px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-7:   1.75rem;   /* 28px */
  --space-8:   2rem;      /* 32px */
  --space-9:   2.25rem;   /* 36px — paso intermedio: botones-icono / badges cuadrados */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-14:  3.5rem;    /* 56px */
  --space-16:  4rem;      /* 64px */
  --space-18:  4.5rem;    /* 72px — paso intermedio: miniaturas/thumbs */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Anchos máximos de contenido legible */
  --container-prose:   65ch;       /* texto corrido */
  --container-content: 43.75rem;   /* 700px — ancho máximo de contenido/listados */
  --container-panel:   27.5rem;    /* 440px — panel/sheet lateral (POI, overlays) */
  --container-sm:    640px;
  --container-md:    768px;
  --container-lg:    1024px;
  --container-xl:    1280px;

  /* Botones (sistema base — ver src/scss/_buttons.scss) */
  --btn-pill-pad-y: var(--space-1_5);   /* 6px  — padding vertical de pills */
  --btn-pill-pad-x: var(--space-3);     /* 12px — padding horizontal de pills */
  --btn-icon-size:  var(--space-9);     /* 36px — diámetro de botón-icono circular */

  /* ------------------------------------------------------------------------
     5. BORDER RADIUS
     ------------------------------------------------------------------------ */

  --radius-none: 0;
  --radius-xs:   0.125rem;  /* 2px */
  --radius-sm:   0.25rem;   /* 4px */
  --radius-md:   0.5rem;    /* 8px */
  --radius-lg:   0.75rem;   /* 12px */
  --radius-xl:   1rem;      /* 16px */
  --radius-2xl:  1.5rem;    /* 24px */
  --radius-full: 9999px;    /* píldoras y avatares */

  /* Alias semánticos (componentes consumen estos) */
  --radius-button: var(--radius-md);
  --radius-card:   var(--radius-lg);
  --radius-input:  var(--radius-md);
  --radius-pill:   var(--radius-full);

  /* ------------------------------------------------------------------------
     6. SOMBRAS
     Pensadas para fondos cálidos. La sombra nunca debe sustituir al
     contraste: si un elemento depende de la sombra para distinguirse del
     fondo, también debe tener un borde con 3:1 de contraste.
     ------------------------------------------------------------------------ */

  --shadow-none: none;
  --shadow-xs:   0 1px 2px 0 rgb(27 27 27 / 0.05);
  --shadow-sm:   0 1px 3px 0 rgb(27 27 27 / 0.10), 0 1px 2px -1px rgb(27 27 27 / 0.06);
  --shadow-md:   0 4px 6px -1px rgb(27 27 27 / 0.10), 0 2px 4px -2px rgb(27 27 27 / 0.06);
  --shadow-lg:   0 10px 15px -3px rgb(27 27 27 / 0.10), 0 4px 6px -4px rgb(27 27 27 / 0.06);
  --shadow-xl:   0 20px 25px -5px rgb(27 27 27 / 0.12), 0 8px 10px -6px rgb(27 27 27 / 0.08);
  --shadow-inner: inset 0 2px 4px 0 rgb(27 27 27 / 0.06);

  /* ------------------------------------------------------------------------
     7. TRANSICIONES Y MOVIMIENTO
     Todas las animaciones deben respetar prefers-reduced-motion (sección 11).
     ------------------------------------------------------------------------ */

  --duration-instant: 0ms;
  --duration-fast:    120ms;  /* hover, focus, color */
  --duration-base:    200ms;  /* transformaciones pequeñas */
  --duration-slow:    320ms;  /* aperturas, slide */
  --duration-slower:  480ms;  /* transiciones de página */

  --ease-linear:    linear;
  --ease-in:        cubic-bezier(0.4, 0, 1, 1);
  --ease-out:       cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-emphasis:  cubic-bezier(0.2, 0, 0, 1);   /* Material expressive */

  /* Atajo para transiciones comunes */
  --transition-colors:    color var(--duration-fast) var(--ease-out),
                          background-color var(--duration-fast) var(--ease-out),
                          border-color var(--duration-fast) var(--ease-out);
  --transition-transform: transform var(--duration-base) var(--ease-emphasis);
  --transition-opacity:   opacity var(--duration-fast) var(--ease-out);

  /* ------------------------------------------------------------------------
     8. FOCUS
     WCAG 2.2 AA (criterio 2.4.13 Focus Appearance):
     - Indicador de al menos 2px en todo el perímetro del componente
     - Contraste mínimo 3:1 con el estado no enfocado y con el fondo adyacente
     ------------------------------------------------------------------------ */

  --focus-ring-width:  3px;
  --focus-ring-offset: 2px;
  --focus-ring-color:  var(--ring);
  --focus-ring-style:  solid;
  --focus-ring:        var(--focus-ring-width) var(--focus-ring-style) var(--focus-ring-color);

  --focus-ring-shadow: 0 0 0 var(--focus-ring-offset) var(--background),
                       0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--focus-ring-color);

  /* ------------------------------------------------------------------------
     9. TARGETS TÁCTILES
     WCAG 2.2 AA criterio 2.5.8 Target Size (Minimum): 24×24 CSS px.
     Nivel AAA (2.5.5): 44×44 — usar como objetivo en mobile.
     ------------------------------------------------------------------------ */

  --touch-target-min:    24px; /* mínimo legal AA */
  --touch-target-comfy:  44px; /* recomendado y AAA */
  --touch-target-spaced: 8px;  /* separación entre targets adyacentes */

  /* Z-index escala */
  --z-base:     0;
  --z-docked:   10;
  --z-sticky:   20;
  --z-fixed:    30;
  --z-overlay:  40;
  --z-modal:    50;
  --z-popover:  60;
  --z-toast:    70;
  /* Skip-link debe quedar por encima de cualquier capa de la app y de la
     toolbar de Drupal core (que usa ~501-1500). Valor alto deliberado. */
  --z-skiplink: 9999;
}

/* ==========================================================================
   2bis. COLORES — Modo oscuro
   Activación dual: clase .dark (control manual) o
   @media (prefers-color-scheme: dark) (preferencia del sistema).
   Mantener todos los pares semánticos con el mismo nombre.
   ========================================================================== */

.dark,
[data-theme='dark'] {
  color-scheme: dark;

  --background:           var(--color-neutral-950);
  --foreground:           #f5f5f0;                  /* 17.7:1 */

  --text-primary:         var(--foreground);        /* #f5f5f0 */
  --text-secondary:       #b8b8b0;                  /* 8.7:1 — alias visual al muted-foreground oscuro */

  --card:                 #1b1b1a;
  --card-foreground:      #f5f5f0;

  --popover:              #1b1b1a;
  --popover-foreground:   #f5f5f0;

  --primary:              var(--color-brand-400);   /* sube luminancia para AA en oscuro */
  --primary-foreground:   var(--color-neutral-950); /* 8.4:1 */
  --primary-hover:        var(--color-brand-300);
  --primary-active:       var(--color-brand-200);

  --secondary:            var(--color-gold-400);
  --secondary-foreground: var(--color-neutral-950);
  --secondary-hover:      var(--color-gold-300);
  --secondary-active:     var(--color-gold-200);

  --muted:                #262624;
  --muted-foreground:     #b8b8b0;                  /* 8.7:1 */
  --skeleton-sheen:       rgb(255 255 255 / 0.06);  /* barrido del skeleton sobre --muted oscuro */

  --accent:               #2a2a26;
  --accent-foreground:    #f5f5f0;

  --destructive:          var(--color-brand-400);
  --destructive-foreground: var(--color-neutral-950);

  --success:              #56c47a;
  --success-foreground:   var(--color-neutral-950);
  --warning:              #f1c065;
  --warning-foreground:   var(--color-neutral-950);
  --info:                 #62b6dd;
  --info-foreground:      var(--color-neutral-950);

  --border:               #2f2f2c;
  --border-strong:        #5a5a55;
  --input:                #4a4a45;
  --ring:                 var(--color-brand-300);

  /* "Adivinanza" sobre superficies oscuras: morado claro accesible (≥5.6:1). */
  --color-educacion:      var(--color-educacion-on-dark);

  --overlay:              rgb(0 0 0 / 0.7);
  --overlay-strong:       rgb(0 0 0 / 0.85);
}

/* Auto-detección de modo oscuro deshabilitada hasta que los componentes
   estén pulidos para esa paleta (muchas tarjetas usan $color-white fijo
   en lugar de var(--card)). La paleta dark sigue disponible vía la clase
   .dark / [data-theme='dark'] (sección 2bis) para opt-in manual. */
/*
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme='light']) {
    color-scheme: dark;

    --background:           var(--color-neutral-950);
    --foreground:           #f5f5f0;

    --card:                 #1b1b1a;
    --card-foreground:      #f5f5f0;

    --popover:              #1b1b1a;
    --popover-foreground:   #f5f5f0;

    --primary:              var(--color-brand-400);
    --primary-foreground:   var(--color-neutral-950);
    --primary-hover:        var(--color-brand-300);
    --primary-active:       var(--color-brand-200);

    --secondary:            var(--color-gold-400);
    --secondary-foreground: var(--color-neutral-950);
    --secondary-hover:      var(--color-gold-300);
    --secondary-active:     var(--color-gold-200);

    --muted:                #262624;
    --muted-foreground:     #b8b8b0;

    --accent:               #2a2a26;
    --accent-foreground:    #f5f5f0;

    --destructive:          var(--color-brand-400);
    --destructive-foreground: var(--color-neutral-950);

    --success:              #56c47a;
    --success-foreground:   var(--color-neutral-950);
    --warning:              #f1c065;
    --warning-foreground:   var(--color-neutral-950);
    --info:                 #62b6dd;
    --info-foreground:      var(--color-neutral-950);

    --border:               #2f2f2c;
    --border-strong:        #5a5a55;
    --input:                #4a4a45;
    --ring:                 var(--color-brand-300);

    --overlay:              rgb(0 0 0 / 0.7);
    --overlay-strong:       rgb(0 0 0 / 0.85);
  }
}
*/

/* ==========================================================================
   10. PREFERS-REDUCED-MOTION
   WCAG 2.3.3. Anula las duraciones a casi cero para conservar reflow pero
   eliminar movimiento. No las pongas a 0 absoluto: rompe transiciones que
   detectan transitionend.
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast:   0.01ms;
    --duration-base:   0.01ms;
    --duration-slow:   0.01ms;
    --duration-slower: 0.01ms;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   11. FORCED-COLORS / Modo de alto contraste de Windows
   Los tokens de color se ignoran en este modo: el SO impone su paleta.
   Aquí mapeamos los tokens a las palabras clave del sistema para que el
   contraste se mantenga. No usar `forced-color-adjust: none` salvo que sea
   estrictamente imprescindible (logos institucionales, mapas).
   ========================================================================== */

@media (forced-colors: active) {
  :root {
    --background:           Canvas;
    --foreground:           CanvasText;
    --card:                 Canvas;
    --card-foreground:      CanvasText;
    --popover:              Canvas;
    --popover-foreground:   CanvasText;

    --primary:              ButtonText;
    --primary-foreground:   ButtonFace;
    --primary-hover:        Highlight;
    --primary-active:       Highlight;

    --secondary:            ButtonText;
    --secondary-foreground: ButtonFace;

    --muted:                Canvas;
    --muted-foreground:     GrayText;

    --accent:               Highlight;
    --accent-foreground:    HighlightText;

    --destructive:          LinkText;
    --destructive-foreground: Canvas;

    --border:               CanvasText;
    --border-strong:        CanvasText;
    --input:                CanvasText;
    --ring:                 Highlight;

    --shadow-xs: none;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --shadow-xl: none;
  }

  /* Asegura que el outline de focus sea siempre visible */
  *:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
  }
}