/* ================================================================
   ACCESIBILIDAD.CSS — barra vertical de iconos (borde izquierdo) + efectos de cada ajuste
   (clases en <html>). El JS (accesibilidad.js) arma la barra; las preferencias se guardan
   en el navegador de cada visitante (localStorage).
   ================================================================ */

/* ── Barra: una columna de iconos ── */
.a11y-bar {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 5px;
    background: var(--navy);
    border-radius: 0 12px 12px 0;
    box-shadow: 0 10px 24px -10px rgba(6,27,72,.55);
}

.a11y-item {
    position: relative;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    transition: background .15s ease,color .15s ease;
}

    .a11y-item svg {
        width: 20px;
        height: 20px;
        pointer-events: none
    }

    .a11y-item:hover {
        background: rgba(255,255,255,.16)
    }

    .a11y-item[aria-pressed="true"] {
        background: #fff;
        color: var(--navy)
    }

    .a11y-item:focus-visible {
        outline: 3px solid var(--spark);
        outline-offset: 1px
    }

.a11y-sep {
    height: 1px;
    margin: 3px 6px;
    background: rgba(255,255,255,.25)
}

.a11y-items {
    display: flex;
    flex-direction: column;
    gap: 2px
}

.a11y-bar.is-closed .a11y-items, .a11y-bar.is-closed .a11y-sep {
    display: none
}
/* etiqueta al pasar el mouse o enfocar */
.a11y-item::after {
    content: attr(data-tip);
    position: absolute;
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--navy);
    color: #fff;
    font: 600 12px/1 var(--body);
    white-space: nowrap;
    padding: 7px 10px;
    border-radius: 6px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .12s ease;
}

.a11y-item:hover::after, .a11y-item:focus-visible::after {
    opacity: 1
}
/* indicador del tamaño elegido (1, 2) sobre el icono de tamaño */
.a11y-item[data-nivel]::before {
    content: attr(data-nivel);
    position: absolute;
    right: 2px;
    bottom: 2px;
    font: 800 9px/1 var(--mono);
    color: inherit;
}

/* ── Efectos de cada ajuste (clases en <html>) ── */
html.a11y-zoom-1 body {
    zoom: 1.12
}

html.a11y-zoom-2 body {
    zoom: 1.25
}

html.a11y-zoom-3 body {
    zoom: 1.4
}
/* el botón y el panel no se agrandan con el zoom de la página */
html[class*="a11y-zoom-"] .a11y-bar {
    zoom: 1
}

html.a11y-gray {
    filter: grayscale(1)
}

html.a11y-contrast {
    --ink: #000;
    --ink-soft: #1B1B1B;
    --line: rgba(0,0,0,.6);
    --line-soft: rgba(0,0,0,.4);
    --spark: #0B4FCC;
    --blue-2: #0A3A85;
    --gold: #6F5200;
    --mist: #fff;
    --mist-2: #E6ECF6;
}

    html.a11y-contrast a {
        text-decoration: underline
    }

    html.a11y-contrast .dx-card, html.a11y-contrast .cform, html.a11y-contrast .dx-sec, html.a11y-contrast .svc-card, html.a11y-contrast .caso-card {
        border-color: #000
    }

    html.a11y-contrast ::placeholder {
        color: #333
    }

html.a11y-font {
    --display: Verdana,Tahoma,Arial,sans-serif;
    --body: Verdana,Tahoma,Arial,sans-serif;
    --mono: Verdana,Tahoma,Arial,sans-serif;
}

    html.a11y-font body {
        line-height: 1.75;
        letter-spacing: .015em;
        word-spacing: .05em
    }

html.a11y-links a {
    text-decoration: underline !important;
    text-underline-offset: 3px
}

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

html.a11y-motion .reveal {
    opacity: 1 !important;
    transform: none !important
}

html.a11y-motion .sector-ticker-track {
    animation: none !important;
    transform: none !important
}

html.a11y-focus :focus-visible {
    outline: 3px solid #000 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 6px #fff !important
}

@media print {
    .a11y-bar {
        display: none !important
    }
}