/* ══════════════════════════════════════════════════
   WIDGET DE ACCESIBILIDAD
   ══════════════════════════════════════════════════ */

/* Botón flotante TTS (arriba) */
.tts-fab {
    position: fixed;
    right: 18px;
    top: 90px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: #1b5e20;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    cursor: pointer;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.tts-fab:hover { transform: scale(1.06); background: #2e7d32; }
.tts-fab:focus-visible { outline: 3px solid #ffd34d; outline-offset: 2px; }
.tts-fab.is-active {
    background: #ff6f00;
    box-shadow: 0 8px 24px rgba(255, 111, 0, .45);
    animation: pulse-tts 1.5s ease-in-out infinite;
}
.tts-fab.is-active:hover { background: #ff8f00; }
.tts-fab-icon {
    font-size: 1.5rem;
    line-height: 1;
}

@keyframes pulse-tts {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* Botón flotante accesibilidad (abajo) */
.a11y-fab {
    position: fixed;
    right: 18px;
    bottom: 18px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: #0a4d8c;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
    cursor: pointer;
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .2s ease, background .2s ease;
}
.a11y-fab:hover { transform: scale(1.06); background: #0c5aa3; }
.a11y-fab:focus-visible { outline: 3px solid #ffd34d; outline-offset: 2px; }
.a11y-fab svg { width: 28px; height: 28px; fill: currentColor; }

/* Panel */
.a11y-panel {
    position: fixed;
    right: 18px;
    bottom: 86px;
    width: 320px;
    max-width: calc(100vw - 24px);
    max-height: 75vh;
    overflow-y: auto;
    background: #fff;
    color: #1a1a1a;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, .28);
    padding: 14px 14px 12px;
    z-index: 9999;
    display: none;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.a11y-panel.is-open { display: block; }

.a11y-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.a11y-panel-head h3 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #0a4d8c;
}
.a11y-panel-close {
    background: transparent;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
    color: #555;
    padding: 4px 8px;
    border-radius: 6px;
}
.a11y-panel-close:hover { background: #eee; }

.a11y-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

@media (max-width: 768px) {
    .tts-fab {
        top: 70px;
        width: 50px;
        height: 50px;
    }
    .tts-fab-icon {
        font-size: 1.3rem;
    }
}

.a11y-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px;
    background: #f4f6fa;
    border: 2px solid transparent;
    border-radius: 10px;
    color: #1a1a1a;
    cursor: pointer;
    font-size: .78rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.15;
    transition: background .15s, border-color .15s;
}
.a11y-btn:hover { background: #e6ecf5; }
.a11y-btn.is-active {
    background: #d6e6f8;
    border-color: #0a4d8c;
    color: #0a4d8c;
}
.a11y-btn .a11y-ico {
    font-size: 1.25rem;
    line-height: 1;
}

.a11y-reset {
    margin-top: 10px;
    width: 100%;
    background: #b71c1c;
    color: #fff;
    border: none;
    padding: 9px 10px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
    font-size: .85rem;
}
.a11y-reset:hover { background: #d32f2f; }

/* ──────── Modificadores de tamaño de fuente ──────── */
html.a11y-font-1 { font-size: 106.25%; }
html.a11y-font-2 { font-size: 112.5%; }
html.a11y-font-3 { font-size: 125%; }
html.a11y-font-n1 { font-size: 93.75%; }
html.a11y-font-n2 { font-size: 87.5%; }

/* ──────── Escala de grises ──────── */
html.a11y-grayscale {
    filter: grayscale(100%);
    -webkit-filter: grayscale(100%);
}

/* ──────── Alto contraste (negro/amarillo) ──────── */
html.a11y-high-contrast,
html.a11y-high-contrast body {
    background: #000 !important;
    color: #ffeb3b !important;
}
html.a11y-high-contrast *:not(.a11y-panel):not(.a11y-panel *):not(.a11y-fab):not(.a11y-fab *) {
    background-color: #000 !important;
    color: #ffeb3b !important;
    border-color: #ffeb3b !important;
}
html.a11y-high-contrast a,
html.a11y-high-contrast a * {
    color: #00e5ff !important;
}
html.a11y-high-contrast img,
html.a11y-high-contrast video {
    filter: grayscale(100%) contrast(1.2);
}

/* ──────── Contraste negativo (invertir colores) ──────── */
html.a11y-negative {
    filter: invert(100%) hue-rotate(180deg);
    -webkit-filter: invert(100%) hue-rotate(180deg);
    background: #fff;
}
html.a11y-negative img,
html.a11y-negative video,
html.a11y-negative iframe,
html.a11y-negative .a11y-fab,
html.a11y-negative .a11y-panel {
    filter: invert(100%) hue-rotate(180deg);
    -webkit-filter: invert(100%) hue-rotate(180deg);
}

/* ──────── Fondo claro ──────── */
html.a11y-light-bg,
html.a11y-light-bg body {
    background: #ffffff !important;
    color: #1a1a1a !important;
}
html.a11y-light-bg .site-banner,
html.a11y-light-bg .site-nav,
html.a11y-light-bg .site-footer,
html.a11y-light-bg section,
html.a11y-light-bg article,
html.a11y-light-bg main,
html.a11y-light-bg .card,
html.a11y-light-bg .nav-list,
html.a11y-light-bg .dropdown {
    background: #ffffff !important;
    color: #1a1a1a !important;
}
html.a11y-light-bg .nav-link,
html.a11y-light-bg .footer-col h4,
html.a11y-light-bg .footer-col a,
html.a11y-light-bg .footer-col li,
html.a11y-light-bg .footer-bottom,
html.a11y-light-bg p,
html.a11y-light-bg li,
html.a11y-light-bg h1,
html.a11y-light-bg h2,
html.a11y-light-bg h3,
html.a11y-light-bg h4,
html.a11y-light-bg h5,
html.a11y-light-bg h6 {
    color: #1a1a1a !important;
}

/* ──────── Subrayar enlaces ──────── */
html.a11y-underline a {
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 2px !important;
}

/* ──────── Texto legible (fuente y espaciados) ──────── */
html.a11y-readable,
html.a11y-readable body,
html.a11y-readable * {
    font-family: Arial, Verdana, "Helvetica Neue", Helvetica, sans-serif !important;
    letter-spacing: .03em !important;
    word-spacing: .08em !important;
    line-height: 1.7 !important;
}

/* ──────── Resaltar elemento siendo leído (TTS) ──────── */
.a11y-tts-highlight {
    background: #fff59d !important;
    outline: 2px dashed #f57f17 !important;
    outline-offset: 2px;
}

/* ──────── Responsivo ──────── */
@media (max-width: 480px) {
    .a11y-fab {
        width: 50px;
        height: 50px;
        right: 12px;
        bottom: 12px;
    }
    .a11y-fab svg { width: 24px; height: 24px; }
    .a11y-panel {
        right: 8px;
        left: 8px;
        width: auto;
        bottom: 72px;
    }
}


