/* ============================================================ ExamiNáutica — Accesibilidad Preferencias del usuario activadas con atributos data-* en . Se aplican antes de pintar (script inline en el ) -> sin parpadeo. ============================================================ */ /* ---- Saltar al contenido (WCAG 2.4.1): oculto hasta recibir foco ---- */ .skip-link { position: fixed; top: 8px; left: 8px; z-index: 1000; transform: translateY(-200%); transition: transform .15s ease; background: var(--navy-900, #0a2236); color: #fff; padding: 10px 16px; border-radius: 8px; font-weight: 700; font-size: 14px; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.25); } .skip-link:focus { transform: translateY(0); outline: 3px solid #fff; outline-offset: 2px; } #main:focus { outline: none; } /* ---- Tamaño de la interfaz (zoom proporcional, escala todo) ---- */ html[data-a11y-zoom="l"] body { zoom: 1.12; } html[data-a11y-zoom="xl"] body { zoom: 1.25; } /* ---- Alto contraste (reescribe los tokens de color neutros) ---- */ html[data-a11y-contrast="high"] { --ink: #000000; --ink-soft: #0c1a26; --muted: #1e2d3a; --muted-2: #1e2d3a; --line: #0e2438; --line-soft: #516374; --bg: #ffffff; --bg-2: #eef3f7; --surface: #ffffff; --surface-2: #ffffff; --cyan-700: #053a4d; --cyan-600: #064d66; --sea-700: #0a4f41; --sea-600: #0a5a4a; } html[data-a11y-contrast="high"] a:not(.btn) { text-decoration: underline; } html[data-a11y-contrast="high"] .btn, html[data-a11y-contrast="high"] input, html[data-a11y-contrast="high"] textarea, html[data-a11y-contrast="high"] select { border: 2px solid var(--ink) !important; } html[data-a11y-contrast="high"] *:focus-visible { outline: 3px solid #000; outline-offset: 2px; } /* ---- Subrayar todos los enlaces (ayuda a daltónicos) ---- */ html[data-a11y-underline="on"] a:not(.btn) { text-decoration: underline; } /* ---- Foco siempre muy visible (navegación por teclado) ---- */ html[data-a11y-focus="on"] :focus-visible { outline: 3px solid var(--cyan-600); outline-offset: 2px; } /* ---- Reducir movimiento forzado por el usuario ---- */ html[data-a11y-motion="reduce"] *, html[data-a11y-motion="reduce"] *::before, html[data-a11y-motion="reduce"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } /* ============================================================ Botón flotante + panel ============================================================ */ .a11y-fab { position: fixed; left: 16px; bottom: 16px; z-index: 60; width: 48px; height: 48px; border-radius: 50%; background: var(--navy-900); color: #fff; border: 2px solid #fff; box-shadow: var(--sh-lg); display: grid; place-items: center; cursor: pointer; } .a11y-fab:hover { background: var(--cyan-700); } .a11y-fab svg { width: 24px; height: 24px; } .a11y-fab:focus-visible { outline: 3px solid var(--cyan-400); outline-offset: 3px; } /* En móvil del área de estudio hay barra inferior: subimos el botón. */ @media (max-width: 900px) { body:has(.bottomnav) .a11y-fab { bottom: 80px; } } .a11y-panel { position: fixed; left: 16px; bottom: 74px; z-index: 61; width: 300px; max-width: calc(100vw - 32px); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--sh-lg); padding: 16px 16px 12px; } @media (max-width: 900px) { body:has(.bottomnav) .a11y-panel { bottom: 138px; } } .a11y-panel[hidden] { display: none; } .a11y-panel h2 { font-size: 15px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; } .a11y-grp { margin-bottom: 12px; } .a11y-grp > .lbl { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px; display: block; } .a11y-seg { display: flex; gap: 6px; } .a11y-seg button { flex: 1; padding: 8px 6px; font-size: 13px; font-weight: 600; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--ink-soft); } .a11y-seg button[aria-pressed="true"] { background: var(--cyan-600); color: #fff; border-color: var(--cyan-600); } .a11y-row { display: flex; align-items: center; justify-content: space-between; padding: 7px 0; font-size: 14px; } .a11y-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; } .a11y-switch input { opacity: 0; width: 0; height: 0; } .a11y-switch .track { position: absolute; inset: 0; background: var(--line); border-radius: 999px; transition: background .15s; } .a11y-switch .track::before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform .15s; box-shadow: var(--sh-sm); } .a11y-switch input:checked + .track { background: var(--sea-600); } .a11y-switch input:checked + .track::before { transform: translateX(18px); } .a11y-switch input:focus-visible + .track { outline: 2px solid var(--cyan-500); outline-offset: 2px; } .a11y-reset { width: 100%; margin-top: 6px; padding: 8px; font-size: 13px; font-weight: 600; background: none; border: 1px solid var(--line); border-radius: var(--r-sm); color: var(--muted); } /* ============================================================ Selector de idioma (i18n) — en cabecera, con respaldo flotante ============================================================ */ .lang-switch { position: relative; display: inline-flex; align-items: center; } .lang-switch--fixed { position: fixed; top: 12px; right: 12px; z-index: 55; } .lang-switch__btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-pill); font-size: 13px; font-weight: 700; color: var(--ink-soft); line-height: 1; } .lang-switch--fixed .lang-switch__btn { box-shadow: var(--sh-md); } .lang-switch__btn:hover { border-color: var(--cyan-400); } .lang-switch__code { letter-spacing: .03em; } .lang-switch__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 168px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--sh-lg); padding: 6px; z-index: 70; } .lang-switch__menu button { display: flex; width: 100%; align-items: center; gap: 9px; padding: 9px 11px; background: none; border: none; border-radius: var(--r-sm); font-size: 14px; font-weight: 600; color: var(--ink-soft); text-align: left; } .lang-switch__menu button:hover { background: var(--cyan-50); } .lang-switch__menu button[aria-current="true"] { color: var(--cyan-700); background: var(--cyan-50); } /* El código (ES/EN/FR/DE) se muestra siempre: en Windows las banderas emoji no se renderizan, así que el texto garantiza que el selector sea legible en todas partes. */ /* Mientras el banner de cookies está visible (primera visita), ocultamos los botones flotantes para que no se solapen con él; reaparecen al decidir. */ body:has(#cookie-banner) .a11y-fab, body:has(#cookie-banner) .cbot-fab { display: none; } /* Selector de idioma dentro de la fila de cabecera: a la derecha, visible en móvil. */ .site-header__in > .lang-switch { margin-left: 10px; flex-shrink: 0; } @media (max-width: 980px) { .site-header__in > .lang-switch { margin-left: auto; margin-right: 8px; } } .topbar__actions > .lang-switch { margin-right: 4px; }