/* =========================================
   WIDGET DE ACCESIBILIDAD FLOTANTE
   ========================================= */

.widget-accesibilidad {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999999;
}

.btn-access-toggle {
    width: 65px;
    height: 65px;
    border-radius: 50%;
    background-color: #00A499; /* Turquesa institucional */
    color: white;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.btn-access-toggle:hover {
    transform: scale(1.08);
}

.menu-accesibilidad {
    position: absolute;
    bottom: 85px;
    right: 0;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.2);
    width: 260px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
}

.menu-accesibilidad.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu-accesibilidad button {
    background: transparent;
    border: none;
    padding: 15px 20px;
    text-align: left;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    color: #394049;
    cursor: pointer;
    border-bottom: 1px solid #EEEEEE;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: background 0.2s;
}

.menu-accesibilidad button:last-child {
    border-bottom: none;
}

.menu-accesibilidad button:hover {
    background: #E6FAF8;
    color: #00A499;
}

.access-icon-text {
    font-weight: 900;
    font-size: 18px;
    width: 25px;
    text-align: center;
}

/* =========================================
   REGLAS DE ACCESIBILIDAD (Aisladas del menú)
   ========================================= */

/* 1. Zoom de Texto (Aplicado SOLO a contenedores de contenido, no al widget) */
body.a11y-zoom-1 .site-header, body.a11y-zoom-1 .site-content, body.a11y-zoom-1 .site-footer { zoom: 1.05; }
body.a11y-zoom-2 .site-header, body.a11y-zoom-2 .site-content, body.a11y-zoom-2 .site-footer { zoom: 1.10; }
body.a11y-zoom-3 .site-header, body.a11y-zoom-3 .site-content, body.a11y-zoom-3 .site-footer { zoom: 1.15; }
body.a11y-zoom--1 .site-header, body.a11y-zoom--1 .site-content, body.a11y-zoom--1 .site-footer { zoom: 0.95; }
body.a11y-zoom--2 .site-header, body.a11y-zoom--2 .site-content, body.a11y-zoom--2 .site-footer { zoom: 0.90; }
body.a11y-zoom--3 .site-header, body.a11y-zoom--3 .site-content, body.a11y-zoom--3 .site-footer { zoom: 0.85; }

/* 2. Alto Contraste (Solo saturación) */
body.a11y-contraste .site-header, 
body.a11y-contraste .site-content, 
body.a11y-contraste .site-footer {
    filter: contrast(130%) saturate(140%);
}

/* 3. Fuente para Dislexia */
@font-face {
    font-family: 'OpenDyslexic';
    /* Para que esto funcione 100% sin depender de internet:
      1. Crea una carpeta llamada "fonts" dentro de la carpeta de tu tema.
      2. Descarga el archivo OpenDyslexic-Regular.otf y ponlo ahí. 
    */
    src: url('../fonts/OpenDyslexic-Regular.otf') format('opentype'),
         url('https://cdn.jsdelivr.net/gh/antijingoist/opendyslexic@master/fonts/OpenDyslexic-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* El respaldo Comic Sans MS es porque es la tipografía instalada de fábrica más legible para dislexia */
body.a11y-dislexia .site-header *,
body.a11y-dislexia .site-content *,
body.a11y-dislexia .site-footer * {
    font-family: 'OpenDyslexic', 'Comic Sans MS', sans-serif !important;
    letter-spacing: 0.03em !important;
    word-spacing: 0.1em !important;
    line-height: 1.6 !important;
}

/* 4. Pausar Animaciones */
body.a11y-sin-animaciones .site-header *,
body.a11y-sin-animaciones .site-content *,
body.a11y-sin-animaciones .site-footer * {
    transition: none !important;
    animation: none !important;
}

/* Evitamos que el hover mueva o haga zoom a los elementos, 
   PERO excluimos los botones del carrusel (:not) porque ellos 
   necesitan su 'transform' intacto para no perder el centrado vertical */
body.a11y-sin-animaciones .site-header *:not(.carousel-btn):hover,
body.a11y-sin-animaciones .site-content *:not(.carousel-btn):hover,
body.a11y-sin-animaciones .site-footer *:not(.carousel-btn):hover {
    transform: none !important;
}

/* =========================================
   Responsive 
   ========================================= */
@media (max-width: 768px) {
    .widget-accesibilidad {
        bottom: 20px;
        right: 20px;
    }
    .btn-access-toggle {
        width: 55px;
        height: 55px;
    }
    .menu-accesibilidad {
        bottom: 70px;
        width: 240px;
    }
}