/* ============ Menú de accesibilidad — botón + panel + funciones ============ */ /* El botón reusa .home-inie-search-btn (redondo). Sin estilos extra necesarios. */ /* ---- Panel (popover) ---- */ /* Panel anclado al lado DERECHO (drawer de altura completa). La posicion va en #id.clase para ganarle a los estilos UA del popover y evitar conflictos. */ #inie-a11y-panel { margin: 0; } #inie-a11y-panel.inie-a11y-panel { position: fixed; inset: 0 0 0 auto; margin: 0; width: 330px; max-width: 90vw; height: 100%; max-height: 100%; overflow: auto; background: #fff; color: #00395d; border: 0; border-left: 1px solid #cdddea; border-radius: 0; box-shadow: -12px 0 40px rgba(0,57,93,.22); padding: 18px 16px; z-index: 100001; font-family: inherit; } /* Icono del boton: contorno (no relleno). Anula la regla heredada de chrome.css (.home-inie-search-btn svg path{fill:currentColor}) que lo volvia un disco. */ .inie-a11y-btn svg, .inie-a11y-btn svg path, .inie-a11y-btn svg circle, .inie-a11y-btn svg line { fill: none !important; stroke: currentColor !important; } .inie-a11y-panel h2 { font-size: 1.05rem; margin: 0 0 12px; color: #00395d; } .inie-a11y-zoom { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; } .inie-a11y-zoom button { min-width: 44px; min-height: 44px; border: 1px solid #cdddea; border-radius: 10px; background: #f4f8fc; color: #00395d; font: inherit; font-weight: 700; cursor: pointer; } .inie-a11y-zoom button:hover { background: #e4eef7; } .inie-a11y-zoom .inie-a11y-zreset { min-width: auto; padding: 0 12px; font-weight: 600; } .inie-a11y-zoom [data-a11y-zoom-label] { min-width: 52px; text-align: center; font-weight: 700; } .inie-a11y-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 10px 12px; border: 1px solid #cdddea; border-radius: 10px; background: #f4f8fc; color: #00395d; font: inherit; font-weight: 600; cursor: pointer; text-align: left; } .inie-a11y-toggle:hover { background: #e4eef7; } .inie-a11y-toggle[aria-pressed="true"] { background: #005f9e; color: #fff; border-color: #005f9e; } .inie-a11y-toggle .estado::after { content: "Off"; font-size: .8rem; opacity: .8; } .inie-a11y-toggle[aria-pressed="true"] .estado::after { content: "On"; } .inie-a11y-tts { display: flex; gap: 8px; margin: 12px 0 0; } .inie-a11y-tts button { flex: 1; min-height: 44px; border: 1px solid #cdddea; border-radius: 10px; background: #f4f8fc; color: #00395d; font: inherit; font-weight: 600; cursor: pointer; } .inie-a11y-tts button:hover { background: #e4eef7; } .inie-a11y-reset { width: 100%; min-height: 44px; margin-top: 12px; background: #fff; border: 2px solid #005f9e; color: #005f9e; border-radius: 10px; font: inherit; font-weight: 700; cursor: pointer; } .inie-a11y-reset:hover { background: #005f9e; color: #fff; } /* ---- Fuente legible (OpenDyslexic OFL) ---- */ @font-face { font-family: 'OpenDyslexic'; src: url(assets/OpenDyslexic-Regular.woff2) format('woff2'); font-display: swap; font-weight: normal; } /* ============ Clases de funciones (en ) ============ */ /* Subrayar enlaces */ html.a11y-enlaces a { text-decoration: underline !important; text-underline-offset: 2px; font-weight: 600 !important; } /* Parar animaciones */ html.a11y-animaciones *, html.a11y-animaciones *::before, html.a11y-animaciones *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html.a11y-animaciones .aliados-network .orbita, html.a11y-animaciones .aliados-network .aliados-lines, html.a11y-animaciones .aliado-central { animation: none !important; } /* Fuente legible (excluye icon-fonts) */ html.a11y-fuente body, html.a11y-fuente p, html.a11y-fuente li, html.a11y-fuente a, html.a11y-fuente span, html.a11y-fuente h1, html.a11y-fuente h2, html.a11y-fuente h3, html.a11y-fuente h4, html.a11y-fuente h5, html.a11y-fuente h6, html.a11y-fuente button, html.a11y-fuente input, html.a11y-fuente label, html.a11y-fuente td, html.a11y-fuente th { font-family: 'OpenDyslexic', Verdana, Tahoma, sans-serif !important; } html.a11y-fuente .material-symbols-outlined, html.a11y-fuente [class*="material-symbols"], html.a11y-fuente .dashicons, html.a11y-fuente .dashicons::before, html.a11y-fuente [class^="fa-"], html.a11y-fuente [class*=" fa-"], html.a11y-fuente .ti, html.a11y-fuente [class^="ti-"] { font-family: revert !important; } /* Más espaciado */ html.a11y-espaciado body, html.a11y-espaciado p, html.a11y-espaciado li, html.a11y-espaciado a, html.a11y-espaciado span { line-height: 1.8 !important; letter-spacing: .06em !important; word-spacing: .12em !important; } /* Cursor grande */ html.a11y-cursor, html.a11y-cursor * { cursor: url(assets/cursor-grande.png) 4 2, auto !important; } /* Resaltar al enfocar/hover */ html.a11y-foco a:hover, html.a11y-foco a:focus, html.a11y-foco button:hover, html.a11y-foco button:focus, html.a11y-foco [role="button"]:hover, html.a11y-foco [role="button"]:focus, html.a11y-foco input:focus, html.a11y-foco li:hover { outline: 3px solid #FFC83E !important; outline-offset: 2px; background: rgba(255,200,62,.15) !important; } /* Guía de lectura (barra que sigue el mouse) */ .a11y-guia-barra { position: fixed; left: 0; right: 0; height: 40px; background: rgba(255,200,62,.22); border-top: 2px solid #005f9e; border-bottom: 2px solid #005f9e; pointer-events: none; z-index: 99998; } /* Alto contraste (esquema oscuro AA) */ html.a11y-contraste, html.a11y-contraste body { background: #000 !important; color: #fff !important; } html.a11y-contraste *:not(svg):not(path):not(img) { background-color: transparent !important; color: #fff !important; border-color: #fff !important; box-shadow: none !important; } html.a11y-contraste a, html.a11y-contraste a * { color: #ff0 !important; } html.a11y-contraste button, html.a11y-contraste input, html.a11y-contraste textarea, html.a11y-contraste select { background: #000 !important; border: 1px solid #fff !important; } html.a11y-contraste .inie-a11y-panel { background: #000 !important; border-color: #fff !important; } html.a11y-contraste .inie-a11y-toggle[aria-pressed="true"] { outline: 2px solid #ff0; } html.a11y-contraste img { filter: none !important; }