/* assets/css/a11y.css */

/* --- CONFIGURACIÓN BASE Y TRANSICIONES --- */
html { transition: filter 0.3s ease; }
body { transition: background-color 0.3s ease, color 0.3s ease; }

/* --- ESTRUCTURA DEL WIDGET (ESTILO CARDS) --- */
.a11y-widget { position: fixed !important; bottom: 20px !important; left: 20px !important; z-index: 999999 !important; font-family: 'Montserrat', sans-serif; }
#a11y-toggle { background: #003583; color: white; border: none; border-radius: 50%; width: 65px; height: 65px; font-size: 32px; cursor: pointer; box-shadow: 0 5px 15px rgba(0,0,0,0.3); }
.a11y-menu { position: absolute; bottom: 80px; left: 0; background: #fdfdfd; width: 350px; border-radius: 20px; box-shadow: 0 10px 40px rgba(0,0,0,0.2); padding: 0; display: none; overflow: hidden; animation: fadeInSlide 0.3s ease-out; }
.a11y-menu.active { display: block; }
.a11y-header { background: #003583; color: white; padding: 15px 20px; display: flex; justify-content: space-between; align-items: center; }
.a11y-header h4 { margin: 0; font-size: 16px; font-weight: 700; }
#a11y-close { background: none; border: none; color: white; font-size: 20px; cursor: pointer; }

/* --- DISEÑO DE CARDS --- */
.a11y-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 20px; background: #f4f7f9; }
.a11y-card { background: white; border-radius: 15px; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; border: 2px solid transparent; box-shadow: 0 4px 6px rgba(0,0,0,0.05); transition: all 0.2s ease; text-align: center; }
.a11y-card:hover { border-color: #003583; transform: translateY(-2px); }
.a11y-card i { font-size: 22px; color: #333; margin-bottom: 8px; }
.a11y-card span { font-size: 12px; font-weight: 600; color: #444; margin-bottom: 10px; }

/* Barras de Nivel (Indicadores) */
.level-bars { display: flex; gap: 3px; width: 60%; height: 4px; }
.bar { flex: 1; background: #e0e0e0; border-radius: 2px; transition: background 0.3s; }
.a11y-card.active-1 .bar:nth-child(1) { background: #003583; }
.a11y-card.active-2 .bar:nth-child(1), .a11y-card.active-2 .bar:nth-child(2) { background: #003583; }
.a11y-card.active-3 .bar:nth-child(1), .a11y-card.active-3 .bar:nth-child(2), .a11y-card.active-3 .bar:nth-child(3) { background: #003583; }

.a11y-footer { padding: 15px; border-top: 1px solid #eee; text-align: center; background: #fff; }
.a11y-reset { background: none; border: none; color: #003583; font-weight: 700; font-size: 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 auto; }


/* =========================================================
   CLASES FUNCIONALES DE ACCESIBILIDAD (CORREGIDAS)
========================================================= */

/* 1. CONTRASTE INVERTIDO (EFECTO NEGATIVO REAL COMO ONPE) */
/* Aplicamos al HTML para que afecte todo el viewport (fondo e imágenes incluidas) */
html.a11y-contrast-inverted {
    filter: invert(100%) !important;
    background-color: #fff !important; /* Forza el fondo blanco que al invertir será negro puro */
}
/* Reinvertir el widget para que la ventana de opciones se siga viendo normal */
html.a11y-contrast-inverted .a11y-widget {
    filter: invert(100%) !important;
}

/* 2. BLANCO Y NEGRO */
html.a11y-contrast-bw { filter: grayscale(100%) contrast(110%) !important; }

/* 3. TAMAÑO DE TEXTO (SOLUCIÓN DEFINITIVA CON ZOOM) */
/* Al usar zoom, obligamos al navegador a escalar toda la página como una lupa, evitando que las fuentes se encojan */
body.a11y-text-1 { zoom: 1.08 !important; }
body.a11y-text-2 { zoom: 1.15 !important; }

/* 4. CURSORES (SVG INCRUSTADO GIGANTE) */
body.a11y-cursor-yellow, body.a11y-cursor-yellow * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23FFEB3B' stroke='black' stroke-width='1' d='M7 2l12 11.2l-5.8.5l3.3 7.3l-2.2 1l-3.2-7.4L7 19z'/%3E%3C/svg%3E"), auto !important;
}
body.a11y-cursor-white, body.a11y-cursor-white * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='white' stroke='black' stroke-width='1' d='M7 2l12 11.2l-5.8.5l3.3 7.3l-2.2 1l-3.2-7.4L7 19z'/%3E%3C/svg%3E"), auto !important;
}

/* 5. INTERLINEADO (ESPACIADO) */
/* Aplicamos directamente a las etiquetas de texto para forzar el espaciado */
body.a11y-spacing-1 p, body.a11y-spacing-1 span, body.a11y-spacing-1 a, body.a11y-spacing-1 li, body.a11y-spacing-1 h1, body.a11y-spacing-1 h2, body.a11y-spacing-1 h3, body.a11y-spacing-1 h4 {
    line-height: 1.7 !important;
    letter-spacing: 1px !important;
}
body.a11y-spacing-2 p, body.a11y-spacing-2 span, body.a11y-spacing-2 a, body.a11y-spacing-2 li, body.a11y-spacing-2 h1, body.a11y-spacing-2 h2, body.a11y-spacing-2 h3, body.a11y-spacing-2 h4 {
    line-height: 2.0 !important;
    letter-spacing: 2px !important;
    word-spacing: 4px !important;
}

/* 6. DISLEXIA AMIGABLE */
body.a11y-dyslexic p, body.a11y-dyslexic span, body.a11y-dyslexic a, body.a11y-dyslexic li, body.a11y-dyslexic h1, body.a11y-dyslexic h2, body.a11y-dyslexic h3, body.a11y-dyslexic h4 {
    font-family: 'Comic Sans MS', 'Arial', sans-serif !important;
}

/* 7. MÁSCARA DE LECTURA (ENFOQUE) */
.a11y-reading-mask { display: none; position: fixed !important; pointer-events: none; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 999998; background: rgba(0, 0, 0, 0.7); }
.a11y-reading-mask.active { display: block; }

@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(15px); }
    to { opacity: 1; transform: translateY(0); }
}