/* ========================================================== BARRA DE ACCESIBILIDAD - DOCK VERTICAL (ITA 1.1) Acoplada al borde derecho, con íconos y tooltip lateral. ========================================================== */ .ieoma-a11y-dock { position: fixed; top: 50%; right: 2px; transform: translateY(-50%); z-index: 999999; display: flex; flex-direction: column; background: var(--ieoma-a11y-bar-color, #1a4fa0); border-radius: 10px 0 0 10px; box-shadow: -3px 0 14px rgba(0, 0, 0, 0.25); overflow: visible; max-height: calc(100vh - 20px); overflow-y: auto; touch-action: manipulation; } .ieoma-a11y-icon { position: relative; width: 46px; height: 46px; border: none; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.18); cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; touch-action: manipulation; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.35); } .ieoma-a11y-icon:last-of-type { border-bottom: none; } .ieoma-a11y-icon:hover, .ieoma-a11y-icon:focus { background: rgba(255, 255, 255, 0.15); } .ieoma-a11y-glyph { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: rgba(255, 255, 255, 0.95); color: var(--ieoma-a11y-bar-color, #1a4fa0); font-size: 1rem; line-height: 1; } .ieoma-a11y-glyph-text { font-weight: 800; font-size: 0.9rem; } /* Estado activo (acción encendida) */ .ieoma-a11y-icon.is-active .ieoma-a11y-glyph { background: #ffffff; box-shadow: 0 0 0 2px #fff inset; color: #000; } /* --- Tooltip lateral (aparece hacia la izquierda, como el ejemplo) --- */ .ieoma-a11y-tooltip { position: absolute; right: calc(100% + 8px); top: 50%; transform: translateY(-50%) translateX(8px); background: var(--ieoma-a11y-bar-color, #1a4fa0); color: #fff; padding: 10px 16px; border-radius: 6px; white-space: nowrap; font-size: 0.9rem; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity 0.15s ease, transform 0.15s ease; filter: brightness(1.15); } .ieoma-a11y-icon:hover .ieoma-a11y-tooltip, .ieoma-a11y-icon:focus .ieoma-a11y-tooltip { opacity: 1; transform: translateY(-50%) translateX(0); } /* --- Botón "Volver arriba": círculo destacado al final del dock --- */ .ieoma-a11y-top { border-radius: 0 0 0 10px; } .ieoma-a11y-top .ieoma-a11y-glyph { background: #ffffff; color: var(--ieoma-a11y-bar-color, #1a4fa0); font-weight: 900; } /* ========================================================== MODO ALTO CONTRASTE (aplicado vía JS al ) ========================================================== */ html.ieoma-high-contrast body { background: #000 !important; color: #fff !important; } html.ieoma-high-contrast a { color: #ffdd00 !important; } html.ieoma-high-contrast .ieoma-header, html.ieoma-high-contrast .ieoma-middle-bar, html.ieoma-high-contrast .ieoma-nav-bar, html.ieoma-high-contrast .ieoma-footer, html.ieoma-high-contrast .ieoma-topbar { background: #000 !important; color: #fff !important; border-color: #ffdd00 !important; } html.ieoma-high-contrast img { filter: grayscale(100%) contrast(1.2); } /* ========================================================== RESALTAR ENLACES ========================================================== */ html.ieoma-highlight-links a { background: #ffef00 !important; color: #000 !important; text-decoration: underline !important; font-weight: 700 !important; } /* ========================================================== PAUSAR ANIMACIONES (ITA 1.1.g control de movimiento/parpadeo) ========================================================== */ html.ieoma-pause-animations *, html.ieoma-pause-animations *::before, html.ieoma-pause-animations *::after { animation-play-state: paused !important; transition: none !important; scroll-behavior: auto !important; } /* ========================================================== FUENTE LEGIBLE (mayor espaciado, tipografía sencilla) ========================================================== */ html.ieoma-readable-font body, html.ieoma-readable-font input, html.ieoma-readable-font textarea, html.ieoma-readable-font button { font-family: Arial, Helvetica, sans-serif !important; letter-spacing: 0.03em !important; line-height: 1.9 !important; word-spacing: 0.08em !important; } /* ========================================================== ESCALADO DE FUENTE (aplicado vía JS a --ieoma-font-base) ========================================================== */ html { font-size: var(--ieoma-font-base, 16px); } /* ========================================================== RESPONSIVE: dock más compacto en móvil ========================================================== */ @media (max-width: 480px) { .ieoma-a11y-dock { right: 4px; } .ieoma-a11y-icon { width: 40px; height: 40px; } .ieoma-a11y-glyph { width: 26px; height: 26px; font-size: 0.85rem; } .ieoma-a11y-tooltip { font-size: 0.8rem; padding: 7px 10px; } }