/** * accessibility.css * --------------------------------------------------------------------- * Estilos del widget de accesibilidad (botón flotante + panel) y de * cada uno de los "modos" que puede activar un visitante. El JS que * controla esto vive en js/accessibility.js: de ahí sale y hacia ahí * entra cada clase mencionada aquí. * * Todas las clases de modo se aplican sobre (no sobre ) * para que tengan la máxima prioridad posible sobre el resto del CSS * del sitio, incluido el original de la plantilla Joomla. * --------------------------------------------------------------------- */ /* ---- Botón flotante ---- */ .a11y-toggle-btn { position: fixed; left: 20px; bottom: 20px; width: 52px; height: 52px; border-radius: 50%; background: #12233f; color: #ffffff; border: none; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,0.3); z-index: 9998; transition: transform 0.2s ease; } .a11y-toggle-btn:hover { transform: scale(1.08); } /* ---- Panel ---- */ .a11y-panel { position: fixed; left: 20px; bottom: 84px; width: 340px; max-width: calc(100vw - 40px); max-height: 80vh; overflow-y: auto; background: #ffffff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,0.25); z-index: 9999; display: none; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } .a11y-panel.open { display: block; } .a11y-panel__header { background: #12233f; color: #ffffff; padding: 16px 20px; border-radius: 16px 16px 0 0; display: flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 1rem; } .a11y-panel__close { background: rgba(255,255,255,0.15); border: none; color: #fff; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; font-size: 1rem; line-height: 1; } .a11y-panel__close:hover { background: rgba(255,255,255,0.3); } .a11y-panel__body { padding: 16px; } .a11y-reset-btn { display: block; width: 100%; padding: 12px; margin-bottom: 14px; background: #f4f6fb; border: 1px solid #dfe3ee; border-radius: 10px; font-weight: 600; color: #12233f; cursor: pointer; text-align: center; } .a11y-reset-btn:hover { background: #e9edf7; } .a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .a11y-option { border: 1px solid #e2e5ee; border-radius: 10px; padding: 14px 8px; text-align: center; background: #ffffff; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 6px; color: #333; font-size: 0.78rem; line-height: 1.2; } .a11y-option:hover { border-color: #ff9473; } .a11y-option.active { background: #fff1ec; border-color: #ff9473; color: #b6431f; } .a11y-option__icon { font-size: 1.4rem; line-height: 1; } .a11y-option__dots { display: flex; gap: 3px; margin-top: 2px; } .a11y-option__dots span { width: 6px; height: 6px; border-radius: 50%; background: #cfd3e0; } .a11y-option.active .a11y-option__dots span.filled { background: #ff9473; } /* ===================================================================== MODOS DE ACCESIBILIDAD — aplicados sobre ===================================================================== */ /* Alto contraste */ html.a11y-high-contrast body { background: #000000 !important; color: #ffffff !important; } html.a11y-high-contrast a { color: #ffe14d !important; } html.a11y-high-contrast .site-header, html.a11y-high-contrast footer, html.a11y-high-contrast .topbar, html.a11y-high-contrast [class*="linelabox4-bg-"] { background: #000000 !important; color: #ffffff !important; } html.a11y-high-contrast img { filter: contrast(1.2); } /* Escala de grises */ html.a11y-grayscale { filter: grayscale(100%); } /* Agrandar texto (3 niveles) */ html.a11y-fontsize-1 { font-size: 112.5%; } html.a11y-fontsize-2 { font-size: 125%; } html.a11y-fontsize-3 { font-size: 137.5%; } /* Espaciado de texto */ html.a11y-letterspacing body, html.a11y-letterspacing p, html.a11y-letterspacing li, html.a11y-letterspacing span { letter-spacing: 0.06em !important; word-spacing: 0.12em !important; } /* Resaltar enlaces */ html.a11y-highlight-links a { background: #fff200 !important; color: #000000 !important; text-decoration: underline !important; text-decoration-thickness: 2px !important; } /* Lectura fácil (tipografía simple + más interlineado) */ html.a11y-easy-reading body, html.a11y-easy-reading p, html.a11y-easy-reading li { font-family: Arial, Helvetica, sans-serif !important; line-height: 1.9 !important; word-spacing: 0.05em; } /* Detener animaciones */ html.a11y-stop-animations *, html.a11y-stop-animations *::before, html.a11y-stop-animations *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Ocultar imágenes */ html.a11y-hide-images img, html.a11y-hide-images video, html.a11y-hide-images iframe { visibility: hidden !important; } /* Alinear texto a la izquierda */ html.a11y-align-left body, html.a11y-align-left p, html.a11y-align-left li, html.a11y-align-left h1, html.a11y-align-left h2, html.a11y-align-left h3 { text-align: left !important; } /* Cursor grande (flecha negra grande vía SVG embebido, sin archivos externos) */ html.a11y-big-cursor, html.a11y-big-cursor * { cursor: url('data:image/svg+xml;utf8,') 4 4, auto !important; } /* Botón "Leer página" activo */ .a11y-option[data-action="read"].active .a11y-option__icon::after { content: " ⏸"; } @media (max-width: 480px) { .a11y-panel { left: 10px; right: 10px; width: auto; } .a11y-toggle-btn { left: 14px; bottom: 14px; } }