/* =====================================
   1. MENU FLOTANTE DE ACCESIBILIDAD
===================================== */

/* Botón para abrir el menú */
#accessibility-toggle {
    position: fixed;
    top: 50%;
    right: 10px;
    background: #4e4996;
    color: white;
    padding: 10px 15px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    z-index: 1000;
}

/* Panel lateral de accesibilidad */
.accessibility-panel {
    position: fixed;
    top: 0;
    right: -650px; /* Oculto por defecto */
    width: 650px;
    height: 100%;
    background: white;
    box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.2);
    transition: right 0.3s ease-in-out;
    z-index: 1500;
    display: flex;
    flex-direction: column;
}

/* Mostrar el panel cuando está activo */
.accessibility-panel.active {
    right: 0;
}

/* Encabezado del panel */
.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background: #4e4996;
    color: white;
    font-size: 18px;
    font-weight: bold;
}

.panel-header h3 {
    color: white;
}

/* Botón de cierre */
.close-button {
    background: none;
    border: none;
    font-size: 20px;
    cursor: pointer;
    color: white;
}

/* Contenido del panel */
.panel-content {
    padding: 15px;
    overflow-y: auto;
    flex-grow: 1;
}

/* =====================================
   2. TARJETAS DE FUNCIONES
===================================== */

/* Contenedor de las tarjetas de accesibilidad */
.accessibility-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas */
    gap: 10px; /* Espaciado entre las tarjetas */
    padding: 10px; /* Espaciado interno */
}

/* Ajuste responsivo: Si la pantalla es más pequeña, cambia a 2 o 1 columna */
@media (max-width: 768px) {
    .accessibility-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en pantallas medianas */
    }
}

@media (max-width: 480px) {
    .accessibility-grid {
        grid-template-columns: repeat(1, 1fr); /* 1 columna en móviles */
    }
}


/* Estilos generales para el checkmark */
.checkmark {
    position: absolute;
    top: 8px; /* Se toma la medida más pequeña */
    right: 8px;
    font-size: 12px; /* Se mantiene el tamaño más pequeño */
    background: blue; /* Se deja el fondo azul */
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: none; /* Oculto por defecto */
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease-in-out;
}

/* Mostrar checkmark cuando la opción está activa */
.accessibility-card.active .checkmark {
    display: flex;
}

/* Tarjeta de accesibilidad única */
.accessibility-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    border: 2px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    position: relative;
    width: 160px;
}

/* Iconos dentro de la tarjeta */
.accessibility-card .icon {
    font-size: 28px;
    color: black;
    margin-bottom: 8px;
}

/* Texto de la tarjeta */
.accessibility-card p {
    font-size: 14px;
    font-weight: bold;
    color: black;
    margin: 0;
}

/* Efecto de selección */
.accessibility-card.active {
    border-color: blue;
    box-shadow: 0 0 5px blue;
}

.accessibility-card:hover {
    background: #f0f0f0;
}

/* Control de velocidad de lectura */
.speech-speed-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
    padding: 5px;
}

.speech-speed-container input[type="range"] {
    width: 100%;
    margin: 5px 0;
    cursor: pointer;
}

/* =====================================
   3. PERFILES DE ACCESIBILIDAD
===================================== */

/* Secciones del menú */
.accessibility-section {
    margin-bottom: 15px;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.profile-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    gap: 10px; /* Espaciado entre tarjetas */
    margin-top: 10px;
}

/* Botones de los perfiles */
.profile-option {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 12px;
    background: #f5f5f5;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    transition: background 0.3s ease;
    width: 100%;
}

.profile-option:hover {
    background: #e0e0e0;
}

/* Ícono dentro del botón */
.profile-option .icon {
    font-size: 20px;
    margin-right: 8px;
}

/* Adaptación para móviles: una columna */
@media (max-width: 600px) {
    .profile-options {
        grid-template-columns: 1fr; /* 1 columna en móviles */
    }
}


/* =====================================
   4. IDIOMAS
===================================== */






/* =====================================
   5. RESALTAR ENLACES
===================================== */

/* Resaltar enlaces cuando está activado */
.highlight-links a {
    background-color: yellow;
    color: #000 !important; /* Asegurar contraste */
    text-decoration: underline 3px solid red !important;
    padding: 2px 4px;
    border-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}

/* Cuando el mouse pasa sobre un enlace resaltado */
.highlight-links a:hover {
    background-color: orange;
    color: #000 !important;
}

/* =====================================
   6. ESPACIADO DE TEXTO
===================================== */

/* Ajustar espaciado cuando está activado */
.text-spacing p,
.text-spacing h1,
.text-spacing h2,
.text-spacing h3,
.text-spacing h4,
.text-spacing h5,
.text-spacing h6,
.text-spacing li,
.text-spacing a,
.text-spacing span {
    line-height: inherit !important;
    letter-spacing: inherit !important;
}

/* =====================================
   7. DETENER ANIMACIONES
===================================== */

/* Apaga todas las animaciones, transiciones y efectos */
.disable-animations *,
.disable-animations *::before,
.disable-animations *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
    transition-delay: 0s !important;
    transition-duration: 0s !important;
    animation-delay: 0s !important;
    animation-duration: 0s !important;
}

/* Evita efectos de entrada/salida en textos y elementos */
.disable-animations [class*="fade"],
.disable-animations [class*="zoom"],
.disable-animations [class*="slide"],
.disable-animations [class*="animate"],
.disable-animations [class*="motion"],
.disable-animations [class*="wow"],
.disable-animations [class*="scroll"],
.disable-animations [class*="effect"] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Evita animaciones en elementos interactivos */
.disable-animations a,
.disable-animations button,
.disable-animations input,
.disable-animations select,
.disable-animations textarea {
    transition: none !important;
}

/* Eliminar efectos de desplazamiento suave */
.disable-animations html,
.disable-animations body {
    scroll-behavior: auto !important;
}

/* Evita parpadeos o cambios de opacidad */
.disable-animations [style*="animation"],
.disable-animations [style*="transition"] {
    animation: none !important;
    transition: none !important;
}

/* Desactiva keyframes */
@keyframes noneAnimation {
    from { opacity: 1; }
    to { opacity: 1; }
}

.disable-animations * {
    animation-name: noneAnimation !important;
}


/* =====================================
   8. OCULTAR IMAGENES
===================================== */
/* Ocultar todas las imágenes cuando esté activado */
.hide-images img,
.hide-images figure,
.hide-images picture,
.hide-images svg {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Opcional: Mostrar un placeholder en lugar de las imágenes ocultas */
.hide-images img::before {
    content: "🖼️ Imagen oculta";
    display: block;
    font-size: 14px;
    font-weight: bold;
    color: #888;
    text-align: center;
}

/* ===========================
   9. "Apto para Dislexia"
=========================== */
/* Importar la fuente Dyslexia Friendly Font */
@font-face {
    font-family: "DyslexiaFriendly";
    src: url("https://cdn.jsdelivr.net/gh/antijingoist/open-dyslexic/OpenDyslexic-Regular.otf") format("opentype");
}

/* ===========================
   Modo 1: "Apto para Dislexia"
=========================== */
.dyslexia-friendly * {
    letter-spacing: 0.12em !important;
    word-spacing: 0.16em !important;
    line-height: 1.6 !important;
}

/* ===========================
   Modo 2: "Fuentes Legibles"
=========================== */
.dyslexia-font * {
    font-family: "DyslexiaFriendly", Arial, sans-serif !important;
    letter-spacing: 0.1em !important;
    line-height: 1.8 !important;
}

/* EXCLUIR ÍCONOS DE MATERIAL SYMBOLS Y FONTAWESOME */
.dyslexia-font .material-symbols-outlined,
.dyslexia-font .material-icons,
.dyslexia-font [class^="fa"], /* FontAwesome */
.dyslexia-font [class*=" fa"],
.dyslexia-font .icon,
.dyslexia-font [data-icon] {
    font-family: "Material Symbols Outlined", "Material Icons", FontAwesome, sans-serif !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
    line-height: normal !important;
}


/* ===========================
   1️⃣ GRAN CURSOR
=========================== */
.large-cursor * {
    cursor: url("https://cdn.userway.org/widgetapp/images/arrow_w.svg"), auto !important;
}

/* ===========================
   2️⃣ MÁSCARA DE LECTURA
=========================== */
.reading-mask-element {
    position: fixed;
    left: 0;
    width: 100%;
    height: 100px;
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    z-index: 10000;
    transition: top 0.1s ease-out;
    border: 8px solid #4e4996;
}

/* ===========================
   3️⃣ GUÍA DE LECTURA
=========================== */
.reading-guide-element {
    position: fixed;
    left: 0;
    width: 100%;
    height: 5px;
    background: yellow;
    border-radius: 5px;
    box-shadow: 0 0 10px black;
    pointer-events: none;
    z-index: 10000;
    transition: top 0.1s ease-out;
}

/* ===========================
   10. "Modal de Estructura de la pagina"
=========================== */

/* Modal */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 10000;
}

.modal-content {
    background: white;
    width: 60%;
    max-width: 600px;
    margin: 10% auto;
    padding: 20px;
    border-radius: 8px;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: white;
    padding: 10px;
    border-radius: 8px 8px 0 0;
}

.close {
    cursor: pointer;
    font-size: 24px;
}

.tab-container {
    display: flex;
    justify-content: space-between;
    border-bottom: 2px solid #ddd;
}

.tab {
    flex: 1;
    padding: 10px;
    text-align: center;
    background: #f5f5f5;
    border: none;
    cursor: pointer;
}

.tab.active {
    background: white;
    font-weight: bold;
    border-bottom: 2px solid #4e4996;
}

.tab-content {
    padding: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.tab-pane {
    display: none;
}

.tab-pane.active {
    display: block;
}

.structure-item {
    padding: 8px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.heading-item {
    background: #4e4996;
    color: white;
}

.section-item {
    background: #555;
    color: white;
}

.link-item {
    background: #444;
    color: white;
}

/* ===========================
   12. "Altura de Línea"
=========================== */

/* Clases para modificar la altura de línea */
.line-height-150,
.line-height-175,
.line-height-200 {
    line-height: inherit !important; /* Asegurar herencia */
}

/* Aplicar a todos los elementos de texto */
.line-height-150 *,
.line-height-175 *,
.line-height-200 * {
    line-height: inherit !important;
}

/* Específico para cada nivel de altura */
.line-height-150 h1,
.line-height-150 h2,
.line-height-150 h3,
.line-height-150 h4,
.line-height-150 h5,
.line-height-150 h6,
.line-height-150 p,
.line-height-150 span,
.line-height-150 a,
.line-height-150 li,
.line-height-150 label,
.line-height-150 button,
.line-height-150 input,
.line-height-150 textarea,
.line-height-150 th,
.line-height-150 td {
    line-height: 1.5 !important;
}

.line-height-175 h1,
.line-height-175 h2,
.line-height-175 h3,
.line-height-175 h4,
.line-height-175 h5,
.line-height-175 h6,
.line-height-175 p,
.line-height-175 span,
.line-height-175 a,
.line-height-175 li,
.line-height-175 label,
.line-height-175 button,
.line-height-175 input,
.line-height-175 textarea,
.line-height-175 th,
.line-height-175 td {
    line-height: 1.75 !important;
}

.line-height-200 h1,
.line-height-200 h2,
.line-height-200 h3,
.line-height-200 h4,
.line-height-200 h5,
.line-height-200 h6,
.line-height-200 p,
.line-height-200 span,
.line-height-200 a,
.line-height-200 li,
.line-height-200 label,
.line-height-200 button,
.line-height-200 input,
.line-height-200 textarea,
.line-height-200 th,
.line-height-200 td {
    line-height: 2 !important;
}


/* ===========================
   11. "Alinear todos los textos"
=========================== */

/* Asegurar que la alineación se aplique a todos los textos */
.text-align-left,
.text-align-center,
.text-align-justify {
    text-align: inherit !important; /* Asegurar herencia */
}

/* Aplicar la alineación a todos los tipos de textos */
.text-align-left * {
    text-align: left !important;
}

.text-align-center * {
    text-align: center !important;
}

.text-align-justify * {
    text-align: justify !important;
}

/* Elementos específicos */
.text-align-left h1,
.text-align-left h2,
.text-align-left h3,
.text-align-left h4,
.text-align-left h5,
.text-align-left h6,
.text-align-left p,
.text-align-left span,
.text-align-left a,
.text-align-left li,
.text-align-left label,
.text-align-left button,
.text-align-left input,
.text-align-left textarea,
.text-align-left th,
.text-align-left td {
    text-align: left !important;
}

.text-align-center h1,
.text-align-center h2,
.text-align-center h3,
.text-align-center h4,
.text-align-center h5,
.text-align-center h6,
.text-align-center p,
.text-align-center span,
.text-align-center a,
.text-align-center li,
.text-align-center label,
.text-align-center button,
.text-align-center input,
.text-align-center textarea,
.text-align-center th,
.text-align-center td {
    text-align: center !important;
}

.text-align-justify h1,
.text-align-justify h2,
.text-align-justify h3,
.text-align-justify h4,
.text-align-justify h5,
.text-align-justify h6,
.text-align-justify p,
.text-align-justify span,
.text-align-justify a,
.text-align-justify li,
.text-align-justify label,
.text-align-justify button,
.text-align-justify input,
.text-align-justify textarea,
.text-align-justify th,
.text-align-justify td {
    text-align: justify !important;
}

/* ===========================
   13. "Saturación de Colores"
=========================== */

/* Estado normal (sin cambios) */
.saturation-off {
    filter: none !important;
}

/* Baja Saturación (Reduce a 50%) */
.saturation-low {
    filter: saturate(50%) !important;
}

/* Alta Saturación (Aumenta a 150%) */
.saturation-high {
    filter: saturate(150%) !important;
}

/* Desaturar (Convertir todo en tonos de gris) */
.saturation-none {
    filter: grayscale(100%) !important;
}

/* ===========================
   14. ESTILOS DE BOTÓN ACTIVO
=========================== */

.profile-option.active {
    background-color: #4e4996 !important; /* Color de fondo activo */
    color: white !important; /* Color del texto */
    border: 2px solid #4e4996 !important;
    font-weight: bold;
}

.profile-option.active .icon {
    filter: brightness(0) invert(1); /* Hace que el icono cambie de color */
}

/* ===========================
   15. BOTON PARA RESET ACCESIBILIDAD
=========================== */

.accessibility-reset {
    text-align: center;
    margin-top: 15px;
    padding: 10px;
}

.accessibility-reset button {
    background-color: #d32f2f;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.accessibility-reset button:hover {
    background-color: #b71c1c;
}

/* ============================
   RESPONSIVE (Móviles y Tabletas)
============================ */
@media (max-width: 768px) {
    .accessibility-panel {
        width: 100%;
        height: 100vh;
        right: -100%; /* 🔥 Ocultarlo fuera de la pantalla en móviles */
        transform: none;
        border-radius: 0;
        z-index: 9999; /* 🔥 Asegurar que está por encima de todo */

    }

    /* Mostrar el panel cuando está activo */
    .accessibility-panel.active {
        right: 0;
    }

    .panel-header h3 {
        font-size: 18px; /* 🔥 Ajustar tamaño de texto */
    }

    .profile-options button {
        font-size: 14px; /* 📌 Reducir tamaño de los botones */
        padding: 10px;
    }

    .accessibility-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 📌 2 columnas en móviles */
        gap: 10px;
    }

    .accessibility-card {
        font-size: 14px;
        padding: 10px;
    }

    .accessibility-reset {
        text-align: center;
        margin-top: 20px;
    }

    .accessibility-reset button {
        width: 100%; /* 📌 Botón de restablecer ancho completo */
        padding: 12px;
        font-size: 16px;
    }
}