/* ============================= ACCESIBILIDAD DECSEF – CSS ============================= */ /* Fuente para modo Dislexia */ @font-face { font-family: "OpenDyslexic3"; src: url("/accesibilidad/fonts/OpenDyslexic3-Regular.woff2") format("woff2"); font-weight: normal; font-style: normal; } /* CONTENEDOR PRINCIPAL */ .decsef-a11y { position: fixed; top: 30%; left: 0; right: auto; z-index: 9999; font-family: inherit; } /* BOTÓN – SOLO ÍCONO, ESTILO DECSEF */ .decsef-a11y__toggle { background-color: #FD8900; color: #ffffff; border: none; padding: 8px; cursor: pointer; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; } .decsef-a11y__toggle:focus-visible { outline: 3px solid #ffd447; outline-offset: 2px; } /* ÍCONO PNG (ONU ACCESIBILIDAD) */ .decsef-a11y__icon { display: inline-block; width: 32px; height: 32px; background-image: url("icon.png"); /* ajusta nombre si es distinto */ background-repeat: no-repeat; background-position: center; background-size: contain; } /* Texto solo para lectores de pantalla (no visible) */ .decsef-a11y__text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================= MENÚ ============================= */ .decsef-a11y__menu { position: absolute; top: 0; left: 100%; right: auto; background: #ffffff; border: 1px solid #000000; border-radius: 0 6px 6px 0; box-shadow: 0 2px 6px rgba(0,0,0,0.25); min-width: 210px; padding: 0; display: none; z-index: 9999; } .decsef-a11y__menu--open { display: block; } /* Encabezado del menú: "ACCESIBILIDAD" */ .decsef-a11y__header { padding: 8px 12px; font-size: 14px; font-weight: 700; text-transform: uppercase; background-color: #000000; color: #ffffff; border-bottom: 1px solid #eee; } .decsef-a11y__menu ul { list-style: none; margin: 0; padding: 0; } .decsef-a11y__menu li { border-bottom: 1px solid #eee; } .decsef-a11y__menu li:last-child { border-bottom: none; } .decsef-a11y__menu button, .decsef-a11y__menu a { width: 100%; text-align: left; padding: 6px 12px; font-size: 14px; background: transparent; border: none; color: #333333; cursor: pointer; text-decoration: none; } .decsef-a11y__menu button:hover, .decsef-a11y__menu a:hover, .decsef-a11y__menu button:focus-visible, .decsef-a11y__menu a:focus-visible { background: #f5f5f5; outline: none; } /* ============================= MODOS DE ACCESIBILIDAD ============================= */ /* Escala de grises (aplicada sobre ) */ .decsef-a11y--grayscale { filter: grayscale(100%); } /* ========= ALTO CONTRASTE ========= */ /* Fondo negro + texto blanco base en todo el body */ .decsef-a11y--high-contrast, .decsef-a11y--high-contrast body { background-color: #000000 !important; color: #ffffff !important; } /* Enlaces amarillos para máxima visibilidad */ .decsef-a11y--high-contrast a, .decsef-a11y--high-contrast a * { color: #ffff00 !important; } /* Ajuste específico del menú en alto contraste */ .decsef-a11y--high-contrast .decsef-a11y__menu { background-color: #000000 !important; border-color: #ffffff !important; } .decsef-a11y--high-contrast .decsef-a11y__header { background-color: #000000 !important; color: #ffffff !important; border-color: #ffffff !important; } .decsef-a11y--high-contrast .decsef-a11y__menu button, .decsef-a11y--high-contrast .decsef-a11y__menu a { background-color: #000000 !important; color: #ffffff !important; } .decsef-a11y--high-contrast .decsef-a11y__menu button:hover, .decsef-a11y--high-contrast .decsef-a11y__menu a:hover, .decsef-a11y--high-contrast .decsef-a11y__menu button:focus-visible, .decsef-a11y--high-contrast .decsef-a11y__menu a:focus-visible { background-color: #222222 !important; } /* Forzar encabezados de contenido a blanco en alto contraste */ .decsef-a11y--high-contrast h1, .decsef-a11y--high-contrast h2, .decsef-a11y--high-contrast h3, .decsef-a11y--high-contrast h4, .decsef-a11y--high-contrast h5, .decsef-a11y--high-contrast h6, .decsef-a11y--high-contrast .sec-title { color: #ffffff !important; } /* ========= NEGATIVO ========= */ .decsef-a11y--invert { filter: invert(100%) hue-rotate(180deg); } /* ========= SUBRAYAR LINKS ========= */ .decsef-a11y--underline-links a { text-decoration: underline !important; } /* ========= DISLEXIA ========= */ .decsef-a11y--dyslexia body, .decsef-a11y--dyslexia body p, .decsef-a11y--dyslexia body span, .decsef-a11y--dyslexia body li, .decsef-a11y--dyslexia body a, .decsef-a11y--dyslexia body h1, .decsef-a11y--dyslexia body h2, .decsef-a11y--dyslexia body h3, .decsef-a11y--dyslexia body h4, .decsef-a11y--dyslexia body h5, .decsef-a11y--dyslexia body h6, .decsef-a11y--dyslexia body button, .decsef-a11y--dyslexia body input, .decsef-a11y--dyslexia body textarea, .decsef-a11y--dyslexia body select { font-family: "OpenDyslexic3", "OpenDyslexic", Arial, sans-serif !important; } /* ============================= COMPATIBILIDAD FIREFOX ============================= */ body.decsef-a11y-scaled { transform-origin: 0 0; } /* ============================= RESPONSIVO ============================= */ @media (max-width: 768px) { .decsef-a11y { top: 40%; } }