/**
 * Estilos de Accesibilidad Web - San Rafael Turismo
 * Conforme a directrices WCAG 2.1 AA
 */

@import url('https://fonts.cdnfonts.com/css/opendyslexic');

/* ==========================================================================
   1. PROTECCIÓN DE ÍCONOS MATERIAL SYMBOLS (¡NUNCA ALTERAR SU FUENTE!)
   ========================================================================== */
.material-symbols-outlined,
span.material-symbols-outlined,
i.material-symbols-outlined {
    font-family: 'Material Symbols Outlined' !important;
    font-weight: normal !important;
    font-style: normal !important;
    font-size: inherit;
    line-height: 1 !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    text-transform: none !important;
    display: inline-block !important;
    white-space: nowrap !important;
    word-wrap: normal !important;
    direction: ltr !important;
    -webkit-font-smoothing: antialiased !important;
}

/* ==========================================================================
   2. PROTECCIÓN DEL PANEL DE CONTROL DE ACCESIBILIDAD
   (El panel siempre debe mantener su propia estructura limpia para no romperse)
   ========================================================================== */
#accessibility-panel,
#accessibility-trigger {
    font-family: 'Montserrat', 'Poppins', sans-serif !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    line-height: 1.5 !important;
}

#accessibility-panel *:not(.material-symbols-outlined),
#accessibility-trigger *:not(.material-symbols-outlined) {
    font-family: 'Montserrat', 'Poppins', sans-serif !important;
}

/* ==========================================================================
   3. TIPOGRAFÍA PARA DISLEXIA (Aplica solo al contenido de la web)
   ========================================================================== */
body.acc-dyslexic p,
body.acc-dyslexic h1,
body.acc-dyslexic h2,
body.acc-dyslexic h3,
body.acc-dyslexic h4,
body.acc-dyslexic h5,
body.acc-dyslexic h6,
body.acc-dyslexic li,
body.acc-dyslexic label:not(#accessibility-panel label),
body.acc-dyslexic a:not(#accessibility-panel a):not(.material-symbols-outlined),
body.acc-dyslexic span:not(#accessibility-panel span):not(.material-symbols-outlined),
body.acc-dyslexic td,
body.acc-dyslexic th,
body.acc-dyslexic blockquote {
    font-family: 'OpenDyslexic', 'Montserrat', sans-serif !important;
    letter-spacing: 0.03em !important;
    word-spacing: 0.06em !important;
    line-height: 1.8 !important;
}

/* ==========================================================================
   4. MODO ALTO CONTRASTE (WCAG AAA - Negro, Amarillo y Blanco)
   ========================================================================== */
html.acc-high-contrast {
    color-scheme: dark !important;
}

html.acc-high-contrast body {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Contenedores y secciones principales */
html.acc-high-contrast main,
html.acc-high-contrast section,
html.acc-high-contrast header,
html.acc-high-contrast footer,
html.acc-high-contrast nav,
html.acc-high-contrast article,
html.acc-high-contrast .bg-white,
html.acc-high-contrast .bg-gray-50,
html.acc-high-contrast .bg-gray-100,
html.acc-high-contrast .bg-surface-light,
html.acc-high-contrast .bg-background-light {
    background-color: #0d0d0d !important;
    border-color: #555555 !important;
}

/* Delimitación clara de tarjetas para que no se pierdan en el fondo */
html.acc-high-contrast .rounded-2xl:not(#accessibility-panel),
html.acc-high-contrast .rounded-3xl:not(#accessibility-panel),
html.acc-high-contrast .rounded-xl:not(#accessibility-panel),
html.acc-high-contrast .card,
html.acc-high-contrast article {
    border: 2px solid #ffff00 !important;
    box-shadow: none !important;
}

/* Títulos y textos destacados en blanco puro */
html.acc-high-contrast h1,
html.acc-high-contrast h2,
html.acc-high-contrast h3,
html.acc-high-contrast h4,
html.acc-high-contrast h5,
html.acc-high-contrast h6 {
    color: #ffffff !important;
    text-shadow: none !important;
}

/* Párrafos y textos normales en Amarillo Alta Visibilidad */
html.acc-high-contrast p,
html.acc-high-contrast li,
html.acc-high-contrast td,
html.acc-high-contrast th,
html.acc-high-contrast span:not(#accessibility-panel span):not(.material-symbols-outlined) {
    color: #ffff00 !important;
}

/* Enlaces y botones interactivos en Cian y Amarillo */
html.acc-high-contrast a:not(#accessibility-panel a) {
    color: #00ffff !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    font-weight: 700 !important;
}

html.acc-high-contrast button:not(#accessibility-panel button):not(#accessibility-trigger) {
    background-color: #1a1a1a !important;
    color: #ffff00 !important;
    border: 2px solid #ffff00 !important;
}

/* Preservar imágenes visibles y con mayor contraste */
html.acc-high-contrast img,
html.acc-high-contrast video {
    filter: contrast(120%) brightness(105%) !important;
    opacity: 1 !important;
}

/* Estilos de alto contraste para el propio panel */
html.acc-high-contrast #accessibility-panel {
    background-color: #000000 !important;
    border: 3px solid #ffff00 !important;
    color: #ffffff !important;
}

html.acc-high-contrast #accessibility-panel h3,
html.acc-high-contrast #accessibility-panel label {
    color: #ffff00 !important;
}

html.acc-high-contrast #accessibility-panel .bg-gray-50,
html.acc-high-contrast #accessibility-panel .dark\:bg-gray-800\/50,
html.acc-high-contrast #accessibility-panel .bg-gray-100 {
    background-color: #1a1a1a !important;
    border-color: #ffff00 !important;
    color: #ffffff !important;
}

/* ==========================================================================
   5. MODO MONOCROMÁTICO (Escala de Grises)
   ========================================================================== */
html.acc-grayscale {
    filter: grayscale(100%) !important;
}

/* ==========================================================================
   6. MODO INVERTIR COLORES
   ========================================================================== */
html.acc-invert {
    filter: invert(100%) hue-rotate(180deg) !important;
}

html.acc-invert img,
html.acc-invert video,
html.acc-invert iframe,
html.acc-invert #accessibility-panel,
html.acc-invert #accessibility-trigger {
    filter: invert(100%) hue-rotate(180deg) !important;
}

/* ==========================================================================
   7. RESALTAR ENLACES
   ========================================================================== */
body.acc-highlight-links a:not(#accessibility-panel a) {
    background-color: #fef08a !important;
    color: #000000 !important;
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    font-weight: 700 !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    outline: 2px solid #ca8a04 !important;
}

/* ==========================================================================
   8. DETENER ANIMACIONES
   ========================================================================== */
body.acc-pause-animations,
body.acc-pause-animations * {
    animation: none !important;
    transition: none !important;
}

/* ==========================================================================
   9. GUÍA DE LECTURA (Regla que sigue al mouse)
   ========================================================================== */
#acc-reading-guide-bar {
    position: fixed;
    left: 0;
    right: 0;
    height: 40px;
    background: rgba(254, 240, 138, 0.35);
    border-top: 2px solid #ca8a04;
    border-bottom: 2px solid #ca8a04;
    pointer-events: none;
    z-index: 9998;
    display: none;
    transform: translateY(-50%);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   10. ANIMACIONES Y ESTADOS DEL PANEL
   ========================================================================== */
#accessibility-panel {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
}

#accessibility-panel.hidden-panel {
    transform: translateY(20px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

#accessibility-panel.visible-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}