/* ========================================================================== accesibilidad-widget.css — Menú de accesibilidad propio del sitio -------------------------------------------------------------------------- Reemplaza al widget de Elfsight (2026-09-18): mismo set de funciones que ya tenia (contraste, escala de grises, agrandar texto, etc.) pero 100% autocontenido en estos archivos — no depende de ninguna cuenta externa, asi que esta garantizado que funciona siempre que el archivo este subido. Se incluye una sola vez en footer.php/footer2.php y aparece en todo el sitio. Logica en js/accesibilidad-widget.js. ========================================================================== */ /* --- Boton flotante (abre/cierra el panel) --- */ #cvm-a11y-boton { position: fixed; left: 20px; bottom: 20px; width: 56px; height: 56px; border-radius: 50%; background: #133853; /* azul institucional del sitio */ color: #fff; border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 3px 10px rgba(0,0,0,.3); z-index: 9998; } #cvm-a11y-boton:hover { background: #0d2940; } #cvm-a11y-boton svg { width: 28px; height: 28px; } @media (max-width: 480px) { #cvm-a11y-boton { width: 48px; height: 48px; left: 14px; bottom: 14px; } } /* --- Panel del menu --- */ #cvm-a11y-panel { position: fixed; left: 20px; bottom: 86px; width: 340px; max-width: calc(100vw - 28px); max-height: 75vh; overflow-y: auto; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 9999; display: none; font-family: Arial, Helvetica, sans-serif; } #cvm-a11y-panel.abierto { display: block; } #cvm-a11y-panel header { background: #133853; color: #fff; padding: 16px 18px; border-radius: 12px 12px 0 0; display: flex; align-items: center; justify-content: space-between; font-size: 17px; font-weight: bold; } #cvm-a11y-panel header button { background: transparent; border: none; color: #fff; font-size: 20px; cursor: pointer; line-height: 1; } #cvm-a11y-panel .cvm-a11y-reset { display: block; width: calc(100% - 32px); margin: 16px auto 8px; padding: 10px; border: 1px solid #cfd8e3; border-radius: 8px; background: #f4f6f9; font-weight: bold; cursor: pointer; text-align: center; } #cvm-a11y-panel .cvm-a11y-reset:hover { background: #e9edf3; } #cvm-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 8px 16px 20px; } .cvm-a11y-opcion { border: 1px solid #cfd8e3; border-radius: 10px; background: #fff; padding: 14px 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; font-size: 13px; text-align: center; color: #133853; } .cvm-a11y-opcion:hover { background: #f4f6f9; } .cvm-a11y-opcion.activa { background: #133853; color: #fff; border-color: #133853; } .cvm-a11y-opcion svg { width: 26px; height: 26px; } /* ========================================================================== Estados que el JS activa/desactiva sobre . Cada uno es independiente — se pueden combinar varios a la vez. ========================================================================== */ /* Contraste alto */ html.cvm-a11y-contraste-alto { filter: contrast(1.5); } html.cvm-a11y-contraste-alto body { background: #000 !important; color: #fff !important; } html.cvm-a11y-contraste-alto a { color: #ffd400 !important; } /* Escala de grises */ html.cvm-a11y-grises { filter: grayscale(100%); } /* Agrandar texto (3 niveles, ciclicos) */ html.cvm-a11y-texto-1 { font-size: 112.5%; } html.cvm-a11y-texto-2 { font-size: 125%; } html.cvm-a11y-texto-3 { font-size: 137.5%; } /* Espaciado de texto */ html.cvm-a11y-espaciado * { letter-spacing: .06em !important; word-spacing: .12em !important; line-height: 1.7 !important; } /* Resaltar enlaces */ html.cvm-a11y-enlaces a { background: #fff176 !important; color: #000 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; } /* Lectura facil: tipografia mas simple y espaciada, parrafos mas angostos */ html.cvm-a11y-lectura-facil body, html.cvm-a11y-lectura-facil p, html.cvm-a11y-lectura-facil li { font-family: Arial, Helvetica, sans-serif !important; line-height: 1.8 !important; } html.cvm-a11y-lectura-facil p { max-width: 70ch; } /* Detener animaciones */ html.cvm-a11y-sin-animacion *, html.cvm-a11y-sin-animacion *::before, html.cvm-a11y-sin-animacion *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* Ocultar imagenes (deja los iconos del propio menu y el boton de whatsapp) */ html.cvm-a11y-sin-imagenes img:not(#cvm-a11y-panel img):not(#cvm-a11y-boton img) { visibility: hidden !important; } /* Alinear texto a la izquierda */ html.cvm-a11y-alinear-izq p, html.cvm-a11y-alinear-izq li, html.cvm-a11y-alinear-izq h1, html.cvm-a11y-alinear-izq h2, html.cvm-a11y-alinear-izq h3 { text-align: left !important; } /* Cursor grande (SVG propio, flecha negra con borde blanco, 48x48) */ html.cvm-a11y-cursor-grande, html.cvm-a11y-cursor-grande * { cursor: url('data:image/svg+xml;utf8,') 4 4, auto !important; } /* "Leyendo..." feedback visual en el boton mientras habla el navegador */ #cvm-a11y-boton.leyendo { background: #0a7a3e; }