/* estiloaccesibilidad.css */

/* ————— Importar fuente OpenDyslexic ————— */
@import url('https://fonts.googleapis.com/css2?family=OpenDyslexic&display=swap');

/* ————— Variables CSS ————— */
:root {
    --base-font: 1rem;
    --line-height: 1.4;
    --bg-light: #f8f9fa;
    --text-dark: #333;
    --accent: #1C2454;
    --transition: 0.2s;
}

/* ————— Barra de accesibilidad moderna ————— */
.accessibility-toolbar-modern {
    position: fixed;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: rgba(255,255,255,0.8);
    backdrop-filter: blur(8px);
    border-radius: 1.5rem;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 10001;
}

/* Icono principal */
.toolbar-icon-modern {
    font-size: 1.6rem;
    color: var(--accent);
    margin-bottom: 0.3rem;
}

/* Botones circulares */
.toolbar-btn {
    width: 2.2rem;
    height: 2.2rem;
    background: var(--bg-light);
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-dark);
    cursor: pointer;
    transition: background var(--transition), transform var(--transition);
}

    .toolbar-btn:hover,
    .toolbar-btn:focus {
        background: var(--accent);
        color: #fff;
        transform: scale(1.1);
    }

/* ————— Modos de accesibilidad ————— */

/* 1) Alto contraste */
body.high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}

    body.high-contrast a,
    body.high-contrast .btn,
    body.high-contrast .card,
    body.high-contrast .toolbar-btn {
        color: #0ff !important;
        background-color: transparent !important;
        border-color: #0ff !important;
    }

/* 2) Fuente disléxica */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('/fonts/OpenDyslexic-Regular.otf') format('opentype');
}

body.dyslexic {
    font-family: 'OpenDyslexic', sans-serif !important;
}

/* 3) Refuerzo de interlineado y tamaño global */
html {
    font-size: var(--base-font);
}

body {
    line-height: var(--line-height) !important;
}

/* 4) Selector de idioma (opcional) */
.language-selector {
    margin-top: 0.5rem;
}

    .language-selector select {
        border: none;
        background: var(--bg-light);
        border-radius: 0.5rem;
        padding: 0.25rem 0.5rem;
        font-size: 0.875rem;
        cursor: pointer;
        transition: background var(--transition);
    }

        .language-selector select:hover,
        .language-selector select:focus {
            background: var(--accent);
            color: #fff;
        }

/* ————— Modales ————— */

/* Hacer que TODO dentro del modal herede font-size e interlineado */
.modal-content,
.modal-content * {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* Asegurar interlineado también en la zona de body */
.modal-body {
    line-height: inherit !important;
}

/* Estilos de alto contraste para modales */
/* 3) En alto contraste, sobreescribimos fondo y color de texto */
body.high-contrast .modal-content,
body.high-contrast .modal-content * {
    background-color: #000 !important;
    color: #fff !important;
}

    /* En alto contraste los enlaces dentro del modal se ven en cian */
    body.high-contrast .modal-content a {
        color: #0ff !important;
    }

/* Fuente disléxica en modales */
body.dyslexic .modal-content,
body.dyslexic .modal-content * {
    font-family: 'OpenDyslexic', sans-serif !important;
}
/* ————— Footer del sitio (accesibilidad) ————— */

/* Aseguramos que el footer herede font-size e interlineado */
footer {
    font-size: inherit !important;
    line-height: inherit !important;
}

/* En alto contraste, fondo negro y texto blanco en footer */
body.high-contrast footer {
    background-color: #000 !important;
    color: #fff !important;
}

    body.high-contrast footer a {
        color: #0ff !important;
    }

/* En fuente disléxica, también aplicamos la tipografía */
body.dyslexic footer {
    font-family: 'OpenDyslexic', sans-serif !important;
}