/* ==============================================
   Accesibilidad – Estilos externos (a11y.css)
   ==============================================
   Este archivo aplica clases agregadas por JS:
     - a11y-font-scale
     - a11y-contrast-dark / a11y-contrast-light
     - a11y-legible
     - a11y-letter-spacing
     - a11y-line-height
     - a11y-focus-ring
     - a11y-reduce-motion
     - a11y-invert
   Cargar en layout:
     <link rel="stylesheet" href="/css/a11y.css">
   ============================================== */

:root {
    --a11y-font-scale: 1;
    --a11y-focus: #1e90ff;
}

html.a11y-font-scale {
    font-size: calc(16px * var(--a11y-font-scale));
}

/* ==============================================
   CONTRASTES
   ============================================== */
html.a11y-contrast-dark body,
html.a11y-contrast-dark body *:not(svg):not(path) {
    background-color: #000 !important;
    color: #fff !important;
    border-color: #fff !important;
}

html.a11y-contrast-dark a {
    color: #00b7ff !important;
}

html.a11y-contrast-light body,
html.a11y-contrast-light body *:not(svg):not(path) {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
}

html.a11y-contrast-light a {
    color: #0033cc !important;
}

/* ==============================================
   LEGIBILIDAD
   ============================================== */
html.a11y-legible body,
html.a11y-legible body * {
    font-family: 'Atkinson Hyperlegible', 'OpenDyslexic', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

html.a11y-letter-spacing body,
html.a11y-letter-spacing body * {
    letter-spacing: 0.04em !important;
}

html.a11y-line-height body,
html.a11y-line-height body * {
    line-height: 1.6 !important;
}

/* ==============================================
   FOCO Y CURSOR
   ============================================== */
html.a11y-focus-ring :focus {
    outline: 3px solid var(--a11y-focus) !important;
    outline-offset: 2px !important;
}

html.a11y-focus-ring a,
html.a11y-focus-ring button,
html.a11y-focus-ring [role="button"],
html.a11y-focus-ring input,
html.a11y-focus-ring select,
html.a11y-focus-ring textarea {
    cursor: pointer;
}

/* ==============================================
   REDUCIR ANIMACIONES
   ============================================== */
html.a11y-reduce-motion *,
html.a11y-reduce-motion *::before,
html.a11y-reduce-motion *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
}

/* ==============================================
   INVERTIR SITIO
   ============================================== */
html.a11y-invert body {
    filter: invert(1) hue-rotate(180deg) !important;
}

    /* Evitar invertir medios (imágenes/videos/iframes/canvas) */
    html.a11y-invert body img,
    html.a11y-invert body video,
    html.a11y-invert body iframe,
    html.a11y-invert body canvas {
        filter: invert(1) hue-rotate(180deg) !important;
    }

/* Protección específica para mapas y elementos SVG/canvas */
html.a11y-protect-maps .map,
html.a11y-protect-maps .leaflet-container,
html.a11y-protect-maps .mapboxgl-canvas,
html.a11y-protect-maps .azure-map-canvas,
html.a11y-protect-maps .esri-view,
html.a11y-protect-maps .ol-viewport,
html.a11y-protect-maps canvas,
html.a11y-protect-maps svg {
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* ==============================================
   REGLAS EXTRAS – PARA QUE AFECTE MÁS ELEMENTOS
   ============================================== */
/* Aplica fondo y texto también a tarjetas, modales, menús */
html.a11y-contrast-dark .card,
html.a11y-contrast-dark .modal,
html.a11y-contrast-dark .dropdown-menu,
html.a11y-contrast-dark .navbar,
html.a11y-contrast-dark header,
html.a11y-contrast-dark footer {
    background-color: #000 !important;
    color: #fff !important;
}

html.a11y-contrast-light .card,
html.a11y-contrast-light .modal,
html.a11y-contrast-light .dropdown-menu,
html.a11y-contrast-light .navbar,
html.a11y-contrast-light header,
html.a11y-contrast-light footer {
    background-color: #fff !important;
    color: #000 !important;
}

/* Botones */
html.a11y-contrast-dark button,
html.a11y-contrast-dark .btn {
    background-color: #222 !important;
    color: #fff !important;
    border-color: #fff !important;
}

html.a11y-contrast-light button,
html.a11y-contrast-light .btn {
    background-color: #eee !important;
    color: #000 !important;
    border-color: #000 !important;
}

/* Inputs */
html.a11y-contrast-dark input,
html.a11y-contrast-dark select,
html.a11y-contrast-dark textarea {
    background-color: #111 !important;
    color: #fff !important;
    border: 1px solid #fff !important;
}

html.a11y-contrast-light input,
html.a11y-contrast-light select,
html.a11y-contrast-light textarea {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #000 !important;
}

/* ==============================================
   Protección adicional para el toolbar (antiguo: botón/panel)
   ============================================== */
/* Evita que el iframe del toolbar se vea afectado por invertir colores */
html.a11y-invert iframe#a11y-iframe,
html.a11y-contrast-dark iframe#a11y-iframe,
html.a11y-contrast-light iframe#a11y-iframe {
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* Forzar que el iframe quede fijo y visible */
iframe#a11y-iframe {
    position: fixed !important;
    bottom: 45vh !important;
    right: 15px !important;
    z-index: 2147483647 !important;
    background: transparent !important;
    border: none !important;
    pointer-events: auto !important;
    transform: none !important;
}

/* En caso extremo, si otro estilo intenta moverlo */
body iframe#a11y-iframe {
    position: fixed !important;
}

/* Compatibilidad con implementaciones antiguas (si quedara #a11y-trigger/#a11y-panel fuera del iframe) */
html.a11y-invert #a11y-trigger,
html.a11y-invert #a11y-panel,
html.a11y-contrast-dark #a11y-trigger,
html.a11y-contrast-light #a11y-trigger {
    filter: none !important;
    position: fixed !important;
    bottom: 15px !important;
    right: 15px !important;
    z-index: 999999 !important;
    transform: none !important;
}

/* ==============================================
   Estilos de accesibilidad para Azure Maps (controles)
   ============================================== */

/*
  Nota: Azure Maps pinta el mapa en canvas. Estos estilos no cambian
  tiles ni labels (eso se hace con map.setStyle desde JS), pero sí
  afectan la UI/controles que Azure Maps inyecta en el DOM.
  Si tus controles usan otra clase, inspecciona el DOM y ajusta selectores.
*/

/* === Contraste Oscuro === */
html.a11y-contrast-dark .azure-maps-control-container,
html.a11y-invert .azure-maps-control-container,
html.a11y-contrast-dark .azure-maps-zoomcontrol,
html.a11y-invert .azure-maps-zoomcontrol {
    background-color: #000 !important;
    color: #fff !important;
    border: 1px solid #444 !important;
}

    html.a11y-contrast-dark .azure-maps-control-container button,
    html.a11y-invert .azure-maps-control-container button,
    html.a11y-contrast-dark .azure-maps-zoomcontrol button,
    html.a11y-invert .azure-maps-zoomcontrol button {
        background-color: #111 !important;
        color: #fff !important;
        border: 1px solid #666 !important;
    }

        html.a11y-contrast-dark .azure-maps-control-container button:hover,
        html.a11y-invert .azure-maps-control-container button:hover {
            background-color: #222 !important;
            border-color: #888 !important;
        }

html.a11y-contrast-dark .azure-maps-control-container,
html.a11y-invert .azure-maps-control-container,
html.a11y-contrast-dark .azure-maps-zoomcontrol,
html.a11y-invert .azure-maps-zoomcontrol {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

/* === Contraste Claro === */
html.a11y-contrast-light .azure-maps-control-container,
html.a11y-contrast-light .azure-maps-zoomcontrol {
    background-color: #fff !important;
    color: #000 !important;
    border: 1px solid #ccc !important;
}

    html.a11y-contrast-light .azure-maps-control-container button,
    html.a11y-contrast-light .azure-maps-zoomcontrol button {
        background-color: #f9f9f9 !important;
        color: #000 !important;
        border: 1px solid #aaa !important;
    }

        html.a11y-contrast-light .azure-maps-control-container button:hover {
            background-color: #eee !important;
            border-color: #888 !important;
        }

html.a11y-contrast-light .azure-maps-control-container,
html.a11y-contrast-light .azure-maps-zoomcontrol {
    font-size: 14px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

/* === Ajustes generales comunes === */
.azure-maps-control-container button,
.azure-maps-zoomcontrol button {
    border-radius: 6px !important;
    padding: 4px 6px !important;
}

.azure-maps-control-container {
    font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
}


/* Escalado de fuentes SOLO en gráficos D3plus */
svg.d3plus-chart.a11y-font-scale text {
    font-size: calc(12px * var(--a11y-font-scale, 1)) !important;
}

/* Contraste oscuro/invertido SOLO en D3plus */
svg.d3plus-chart.a11y-contrast-dark text {
    fill: #fff !important;
}

svg.d3plus-chart.a11y-contrast-dark rect,
svg.d3plus-chart.a11y-contrast-dark circle,
svg.d3plus-chart.a11y-contrast-dark path,
svg.d3plus-chart.a11y-contrast-dark line,
svg.d3plus-chart.a11y-contrast-dark polygon {
    stroke: #fff !important;
    fill: #222 !important;
}

/* Contraste claro SOLO en D3plus */
svg.d3plus-chart.a11y-contrast-light text {
    fill: #000 !important;
}

svg.d3plus-chart.a11y-contrast-light rect,
svg.d3plus-chart.a11y-contrast-light circle,
svg.d3plus-chart.a11y-contrast-light path,
svg.d3plus-chart.a11y-contrast-light line,
svg.d3plus-chart.a11y-contrast-light polygon {
    stroke: #000 !important;
    fill: #ddd !important;
}


/* ==============================================
   FIN de a11y.css
   ============================================== */