/* Mera — Widget accesibilidad WCAG 2.1 AA. Todo namespaced con prefijo .mera-a11y-* + clases en .mera-a11y-* para no chocar con tema/plugin/captcha/ticker/forms. Las clases que aplican efectos van al via JS. */ /* ============================================ BOTÓN FLOTANTE (FAB) ============================================ */ .mera-a11y-fab { position: fixed; bottom: 1.25rem; left: 1.25rem; z-index: 99998; display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, #1F7A3F 0%, #0E4A26 100%); color: #fff; border: 0; border-radius: 50px; padding: 0.75rem 1.125rem; font-size: 1.0625rem; font-weight: 700; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; cursor: pointer; box-shadow: 0 6px 18px rgba(14,74,38,0.35), 0 0 0 3px rgba(247,168,35,0.3); transition: transform .2s, box-shadow .2s, background .2s; outline: none; } .mera-a11y-fab:hover, .mera-a11y-fab:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(14,74,38,0.45), 0 0 0 4px rgba(247,168,35,0.5); } .mera-a11y-fab:focus-visible { outline: 3px solid #F7A823; outline-offset: 2px; } .mera-a11y-fab[aria-expanded="true"] { background: linear-gradient(135deg, #F7A823 0%, #D88A0A 100%); color: #0E4A26; } .mera-a11y-fab > span:first-child { font-size: 1.5rem; line-height: 1; } .mera-a11y-fab__label { white-space: nowrap; } @media (max-width: 640px) { .mera-a11y-fab { padding: 0.625rem 0.875rem; font-size: 0.9375rem; } .mera-a11y-fab__label { display: none; } .mera-a11y-fab > span:first-child { font-size: 1.625rem; } } /* ============================================ PANEL ============================================ */ .mera-a11y-panel { position: fixed; bottom: 5.5rem; left: 1.25rem; z-index: 99999; width: min(420px, calc(100vw - 2.5rem)); max-height: calc(100vh - 7rem); background: #fff; border-radius: 18px; box-shadow: 0 24px 64px rgba(0,0,0,0.28), 0 0 0 1px rgba(0,0,0,0.06); overflow: hidden; display: flex; flex-direction: column; animation: meraA11ySlideUp .25s ease-out; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color: #1a2520; } .mera-a11y-panel[hidden] { display: none; } @keyframes meraA11ySlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .mera-a11y-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; background: linear-gradient(135deg, #0E4A26 0%, #1F7A3F 100%); color: #fff; } .mera-a11y-panel__head h2 { margin: 0; font-size: 1.0625rem; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 0.5rem; } .mera-a11y-panel__close { background: rgba(255,255,255,0.15); color: #fff; border: 0; width: 32px; height: 32px; border-radius: 50%; font-size: 1rem; cursor: pointer; transition: background .15s; } .mera-a11y-panel__close:hover, .mera-a11y-panel__close:focus-visible { background: rgba(255,255,255,0.3); outline: none; } .mera-a11y-panel__intro { padding: 0.875rem 1.25rem; margin: 0; background: #FFF7E6; font-size: 0.8125rem; color: #7A4E0A; border-bottom: 1px solid #F7E2B0; } .mera-a11y-panel__intro strong { color: #0E4A26; } .mera-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.625rem; padding: 1.125rem; overflow-y: auto; } .mera-a11y-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.875rem 0.625rem; background: #F4F8F5; border: 2px solid #E1E7E3; border-radius: 12px; cursor: pointer; font-family: inherit; font-size: 0.8125rem; color: #1a2520; transition: all .15s; text-align: center; min-height: 90px; } .mera-a11y-btn:hover, .mera-a11y-btn:focus-visible { background: #E8F5EC; border-color: #1F7A3F; transform: translateY(-2px); outline: none; } .mera-a11y-btn:focus-visible { outline: 3px solid #F7A823; outline-offset: 2px; } .mera-a11y-btn.is-active { background: linear-gradient(135deg, #1F7A3F 0%, #0E4A26 100%); border-color: #0E4A26; color: #fff; box-shadow: 0 4px 12px rgba(14,74,38,0.3); } .mera-a11y-btn--reset { grid-column: 1 / -1; background: #FEEAE8; border-color: #C0392B; color: #7A1D14; } .mera-a11y-btn--reset:hover { background: #C0392B; color: #fff; } .mera-a11y-btn__icon { font-size: 1.5rem; line-height: 1; } .mera-a11y-btn__label { font-weight: 700; line-height: 1.2; } .mera-a11y-btn__hint { font-size: 0.6875rem; color: #6B7670; font-weight: 500; margin-top: -0.125rem; } .mera-a11y-btn.is-active .mera-a11y-btn__hint { color: rgba(255,255,255,0.85); } .mera-a11y-panel__foot { padding: 0.875rem 1.25rem 1rem; background: #F4F8F5; border-top: 1px solid #E1E7E3; font-size: 0.75rem; color: #3A413E; } .mera-a11y-panel__foot p { margin: 0 0 0.375rem; } .mera-a11y-panel__foot p:last-child { margin-bottom: 0; } .mera-a11y-panel__foot kbd { background: #fff; border: 1px solid #D0DAD3; border-radius: 4px; padding: 0.0625rem 0.375rem; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.6875rem; font-weight: 700; color: #0E4A26; } .mera-a11y-panel__note a { color: #1F7A3F; font-weight: 700; text-decoration: none; } .mera-a11y-panel__note a:hover { text-decoration: underline; } @media (max-width: 640px) { .mera-a11y-panel { bottom: 5rem; left: 1rem; right: 1rem; width: auto; } } /* ============================================ EFECTOS (clases en ) Cuando JS añade .mera-a11y-* al , estos selectores aplican. ============================================ */ /* Tamaño de fuente — variable controlada por JS */ html.mera-a11y-text-scale { font-size: calc(16px * var(--mera-a11y-text-scale, 1)) !important; } /* Alto contraste (negro absoluto + amarillo) */ html.mera-a11y-high-contrast, html.mera-a11y-high-contrast body, html.mera-a11y-high-contrast main, html.mera-a11y-high-contrast section, html.mera-a11y-high-contrast article, html.mera-a11y-high-contrast aside, html.mera-a11y-high-contrast header:not(.mera-a11y-panel__head), html.mera-a11y-high-contrast footer, html.mera-a11y-high-contrast div:not(.mera-a11y-panel):not(.mera-a11y-panel__head):not(.mera-a11y-panel__foot):not(.mera-a11y-fab), html.mera-a11y-high-contrast nav { background: #000 !important; color: #FFEB3B !important; } html.mera-a11y-high-contrast h1, html.mera-a11y-high-contrast h2, html.mera-a11y-high-contrast h3, html.mera-a11y-high-contrast h4, html.mera-a11y-high-contrast h5, html.mera-a11y-high-contrast h6, html.mera-a11y-high-contrast p, html.mera-a11y-high-contrast span, html.mera-a11y-high-contrast li, html.mera-a11y-high-contrast td, html.mera-a11y-high-contrast th { color: #FFEB3B !important; background: transparent !important; } html.mera-a11y-high-contrast a { color: #00FFFF !important; text-decoration: underline !important; background: transparent !important; } html.mera-a11y-high-contrast a:hover { color: #FFEB3B !important; background: #00008B !important; } html.mera-a11y-high-contrast img, html.mera-a11y-high-contrast iframe, html.mera-a11y-high-contrast video { filter: brightness(1.1) contrast(1.2); } html.mera-a11y-high-contrast button, html.mera-a11y-high-contrast input, html.mera-a11y-high-contrast select, html.mera-a11y-high-contrast textarea { background: #000 !important; color: #FFEB3B !important; border-color: #FFEB3B !important; } /* Modo oscuro (más suave) */ html.mera-a11y-dark-mode { background: #1a1a1a !important; } html.mera-a11y-dark-mode body, html.mera-a11y-dark-mode main, html.mera-a11y-dark-mode section:not(.mera-pc-hero):not(.mera-noticia__hero):not(.tk-hero):not(.contact-hero):not(.mera-hero):not(.mera-ticker):not(.contact-schedule):not(.tk-help):not(.mera-noticia__more), html.mera-a11y-dark-mode article, html.mera-a11y-dark-mode div:not(.mera-a11y-panel):not(.mera-a11y-panel__head):not(.mera-a11y-fab):not([class*="hero"]):not([class*="ticker"]):not(.mera-noticia__hero):not(.mera-doc-download) { background-color: #1a1a1a !important; color: #e1e7e3 !important; } html.mera-a11y-dark-mode h1, html.mera-a11y-dark-mode h2, html.mera-a11y-dark-mode h3, html.mera-a11y-dark-mode h4, html.mera-a11y-dark-mode h5, html.mera-a11y-dark-mode h6 { color: #fff !important; } html.mera-a11y-dark-mode p, html.mera-a11y-dark-mode span:not([class*="hero"]):not([class*="badge"]), html.mera-a11y-dark-mode li { color: #e1e7e3 !important; } html.mera-a11y-dark-mode a { color: #66d68c !important; } /* Escala de grises */ html.mera-a11y-grayscale { filter: grayscale(100%) !important; } /* Colores invertidos */ html.mera-a11y-invert { filter: invert(100%) hue-rotate(180deg) !important; } html.mera-a11y-invert img, html.mera-a11y-invert video, html.mera-a11y-invert iframe { filter: invert(100%) hue-rotate(180deg) !important; } /* Subrayar enlaces */ html.mera-a11y-links-underline a { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important; } /* Lectura cómoda — más line-height + letter-spacing */ html.mera-a11y-readable-font, html.mera-a11y-readable-font body, html.mera-a11y-readable-font p, html.mera-a11y-readable-font li, html.mera-a11y-readable-font span, html.mera-a11y-readable-font a { line-height: 1.95 !important; letter-spacing: 0.03em !important; word-spacing: 0.06em !important; font-family: Verdana, "DejaVu Sans", Geneva, Arial, sans-serif !important; } /* Cursor grande */ html.mera-a11y-big-cursor, html.mera-a11y-big-cursor * { cursor: url("data:image/svg+xml;utf8,") 6 4, auto !important; } /* Resaltar foco */ html.mera-a11y-focus-highlight *:focus, html.mera-a11y-focus-highlight *:focus-visible { outline: 4px solid #F7A823 !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px rgba(247,168,35,0.3) !important; } /* Pausar animaciones */ html.mera-a11y-stop-animations *, html.mera-a11y-stop-animations *::before, html.mera-a11y-stop-animations *::after { animation-play-state: paused !important; animation-duration: 0s !important; transition-duration: 0s !important; } /* Asegurar que panel + fab no sean afectados por sus propios efectos */ html.mera-a11y-high-contrast .mera-a11y-fab, html.mera-a11y-high-contrast .mera-a11y-panel, html.mera-a11y-dark-mode .mera-a11y-fab, html.mera-a11y-dark-mode .mera-a11y-panel { background: #fff !important; color: #1a2520 !important; } html.mera-a11y-high-contrast .mera-a11y-panel__head, html.mera-a11y-dark-mode .mera-a11y-panel__head { background: linear-gradient(135deg, #0E4A26 0%, #1F7A3F 100%) !important; color: #fff !important; } html.mera-a11y-high-contrast .mera-a11y-panel__head h2, html.mera-a11y-dark-mode .mera-a11y-panel__head h2 { color: #fff !important; } html.mera-a11y-grayscale .mera-a11y-fab, html.mera-a11y-grayscale .mera-a11y-panel, html.mera-a11y-invert .mera-a11y-fab, html.mera-a11y-invert .mera-a11y-panel { filter: none !important; } /* Print: ocultar widget al imprimir */ @media print { .mera-a11y-fab, .mera-a11y-panel { display: none !important; } }