/* ══════════════════════════════════════════════════════════════ BlueMed — Acessibilidade (integrado ao Personalizador de Tema) Classes aplicadas em pelo JS (bm-a11y--*), filtros visuais escopados para #bm-page-content para não travar position:fixed. ══════════════════════════════════════════════════════════════ */ /* ─── Skip to Content (WCAG 2.4.1) ─── */ .acc-skip-link { position: absolute; top: -100%; left: 8px; z-index: 99999; padding: 8px 18px; background: var(--bluemed-primary, #00a0e4); color: #fff !important; border-radius: 0 0 10px 10px; font-weight: 700; font-size: 0.875rem; text-decoration: none !important; transition: top 0.15s ease; white-space: nowrap; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .acc-skip-link:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; } /* ─── Floating Trigger Button ─── */ #acc-trigger { position: fixed; bottom: 84px; right: 20px; z-index: 9990; width: 52px; height: 52px; border-radius: 50%; background: var(--bluemed-primary, #00a0e4); border: 2.5px solid #fff; box-shadow: 0 4px 18px rgba(0, 160, 228, 0.45); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; padding: 0; outline: none; } #acc-trigger:hover { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0, 160, 228, 0.6); background: var(--bluemed-secondary, #263481); } #acc-trigger:focus-visible { outline: 3px solid #fff; outline-offset: 3px; transform: scale(1.05); } #acc-trigger[aria-expanded="true"] { background: var(--bluemed-secondary, #263481); transform: scale(1.05); } #acc-trigger svg { width: 26px; height: 26px; fill: #fff; pointer-events: none; } /* ─── Panel Container ─── */ #acc-panel { position: fixed; bottom: 148px; right: 20px; z-index: 9989; width: 292px; border-radius: 16px; background: #ffffff; box-shadow: 0 10px 44px rgba(0, 0, 0, 0.17), 0 2px 8px rgba(0,0,0,0.08); overflow: hidden; opacity: 0; transform: translateY(18px) scale(0.96); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; transform-origin: bottom right; } #acc-panel.acc-open { opacity: 1; transform: translateY(0) scale(1); pointer-events: all; } /* ─── Panel Header (gradiente azul BlueMed / estilo Unimed) ─── */ .acc-header { background: linear-gradient(135deg, var(--bluemed-secondary, #263481) 0%, var(--bluemed-primary, #00a0e4) 100%); padding: 12px 14px 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 8px; } .acc-header-title { margin: 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; display: flex; align-items: center; gap: 7px; line-height: 1; } .acc-header-title svg { width: 17px; height: 17px; fill: #fff; flex-shrink: 0; } .acc-close-btn { background: rgba(255, 255, 255, 0.18); border: none; border-radius: 50%; width: 28px; height: 28px; min-width: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s; padding: 0; } .acc-close-btn:hover { background: rgba(255, 255, 255, 0.32); } .acc-close-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .acc-close-btn svg { width: 16px; height: 16px; fill: #fff; } /* ─── Panel Body ─── */ .acc-body { padding: 14px 16px 16px; } .acc-section-label { font-size: 0.67rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #9aa; margin: 0 0 8px; line-height: 1; } /* ─── Font Size Row ─── */ .acc-font-row { display: flex; gap: 6px; margin-bottom: 12px; } .acc-btn-font { flex: 1; border: 1.5px solid #e2e6ea; background: transparent; border-radius: 8px; cursor: pointer; padding: 7px 4px; font-weight: 700; color: #555; transition: background 0.15s, border-color 0.15s, color 0.15s; line-height: 1; text-align: center; position: relative; } .acc-btn-font:hover { border-color: var(--bluemed-primary, #00a0e4); color: var(--bluemed-primary, #00a0e4); } .acc-btn-font.acc-active { background: var(--bluemed-primary, #00a0e4); border-color: var(--bluemed-primary, #00a0e4); color: #fff; } .acc-btn-font:focus-visible { outline: 2px solid var(--bluemed-primary, #00a0e4); outline-offset: 2px; } /* Tamanhos visuais dos rótulos de fonte */ #acc-font-sm { font-size: 0.78rem; } #acc-font-md { font-size: 0.9rem; } #acc-font-lg { font-size: 1.08rem; } /* ─── Toggle Grid (2×2) ─── */ .acc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 2px; } .acc-btn-toggle { border: 1.5px solid #e2e6ea; background: transparent; border-radius: 10px; cursor: pointer; padding: 9px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 0.68rem; font-weight: 600; color: #555; line-height: 1.35; text-align: center; transition: background 0.15s, border-color 0.15s, color 0.15s; -webkit-user-select: none; user-select: none; } .acc-btn-toggle svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; } .acc-btn-toggle:hover { border-color: var(--bluemed-primary, #00a0e4); color: var(--bluemed-primary, #00a0e4); } .acc-btn-toggle.acc-active { background: var(--bluemed-primary, #00a0e4); border-color: var(--bluemed-primary, #00a0e4); color: #fff; } .acc-btn-toggle:focus-visible { outline: 2px solid var(--bluemed-primary, #00a0e4); outline-offset: 2px; } /* ─── Divisor ─── */ .acc-div { border: none; border-top: 1px solid #eef0f3; margin: 11px 0; } /* ─── Botão Restaurar ─── */ .acc-btn-reset { width: 100%; border: 1.5px solid #e2e6ea; background: transparent; border-radius: 8px; cursor: pointer; padding: 7px 12px; font-size: 0.73rem; font-weight: 600; color: #888; display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s, color 0.15s, border-color 0.15s; margin-top: 4px; } .acc-btn-reset svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; } .acc-btn-reset:hover { background: #f4f5f7; color: #444; border-color: #c8cdd5; } .acc-btn-reset:focus-visible { outline: 2px solid var(--bluemed-primary, #00a0e4); outline-offset: 2px; } /* ─── Crédito VLibras ─── */ .acc-vlibras-note { text-align: center; font-size: 0.62rem; color: #aaa; margin-top: 8px; line-height: 1.3; } .acc-vlibras-note a { color: var(--bluemed-primary, #00a0e4) !important; } /* ─── Mobile ─── */ @media (max-width: 600px) { #acc-trigger { bottom: 16px; right: 14px; width: 46px; height: 46px; } #acc-panel { bottom: 70px; right: 8px; width: calc(100vw - 16px); max-width: 320px; } } /* ══════════════════════════════════════════════════════════════ Modos de Acessibilidade — filtros aplicados a elementos individuais. NUNCA filtramos um ancestral do botão flutuante ou do offcanvas; dessa forma position:fixed permanece relativo ao viewport em todos os navegadores (filtro em flex-item cria stacking context). Nota: .sidebar-header e .sidebar-bottom são position:fixed dentro de .sidebar-wrapper (também fixed); o containing block troca para .sidebar-wrapper, mas as coordenadas visuais finais são idênticas. ══════════════════════════════════════════════════════════════ */ /* Alto Contraste */ html.bm-a11y--high-contrast .top-header .navbar, html.bm-a11y--high-contrast .sidebar-wrapper, html.bm-a11y--high-contrast .main-wrapper, html.bm-a11y--high-contrast .page-footer { filter: contrast(160%) brightness(0.92); } /* Escala de Cinza */ html.bm-a11y--grayscale .top-header .navbar, html.bm-a11y--grayscale .sidebar-wrapper, html.bm-a11y--grayscale .main-wrapper, html.bm-a11y--grayscale .page-footer { filter: grayscale(100%); } /* Combinação cinza + contraste */ html.bm-a11y--high-contrast.bm-a11y--grayscale .top-header .navbar, html.bm-a11y--high-contrast.bm-a11y--grayscale .sidebar-wrapper, html.bm-a11y--high-contrast.bm-a11y--grayscale .main-wrapper, html.bm-a11y--high-contrast.bm-a11y--grayscale .page-footer { filter: grayscale(100%) contrast(160%) brightness(0.92); } /* Fallback: páginas de autenticação (sem .main-wrapper) — sem botão flutuante */ html.bm-a11y--high-contrast body:not(:has(.main-wrapper)) { filter: contrast(160%) brightness(0.92); } html.bm-a11y--grayscale body:not(:has(.main-wrapper)) { filter: grayscale(100%); } html.bm-a11y--high-contrast.bm-a11y--grayscale body:not(:has(.main-wrapper)) { filter: grayscale(100%) contrast(160%) brightness(0.92); } /* Sublinhar Links — aplica em todos os , incluindo botões-link */ html.bm-a11y--underline-links a { text-decoration: underline !important; text-underline-offset: 3px; font-weight: 600 !important; } /* Pausar Animações */ html.bm-a11y--pause-animations *, html.bm-a11y--pause-animations *::before, html.bm-a11y--pause-animations *::after { animation-play-state: paused !important; transition: none !important; } /* Fonte para Dislexia (OpenDyslexic via CDN) */ @font-face { font-family: 'OpenDyslexic'; src: url('https://cdn.jsdelivr.net/npm/open-dyslexic@1.0.3/otf/OpenDyslexic-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; } html.bm-a11y--dyslexic, html.bm-a11y--dyslexic *:not(.material-icons):not(.material-icons-outlined):not(.bi):not([class*="material-icon"]):not([class^="bi-"]):not([class*=" bi-"]) { font-family: 'OpenDyslexic', Arial, sans-serif !important; } /* Guia de Leitura */ #bm-reading-guide { position: fixed; left: 0; top: 50%; width: 100%; height: 40px; background: rgba(0, 160, 228, 0.15); border-top: 2px solid var(--bluemed-primary, #00a0e4); border-bottom: 2px solid var(--bluemed-primary, #00a0e4); pointer-events: none; z-index: 99990; display: none; } /* VLibras — o botão nativo fica fora da tela para não aparecer visualmente. O [vw-plugin-wrapper] (painel 3D) permanece no fluxo normal do SDK. O clique é disparado pelo botão do painel de acessibilidade via JS. */ [vw] { position: fixed !important; bottom: 0 !important; right: 0 !important; z-index: 9998 !important; } [vw] [vw-access-button] { position: fixed !important; bottom: -300px !important; right: 0 !important; opacity: 0 !important; pointer-events: auto !important; /* precisa ser clicável via JS */ } /* ══════════════════════════════════════════════════════════════ Componentes de Acessibilidade (dentro do Offcanvas Bootstrap) Os estilos usam var(--bs-*) para funcionar em todos os temas. ══════════════════════════════════════════════════════════════ */ /* Título de seção */ .bm-a11y__section-title { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--bs-secondary-color, #6c757d); margin: 0 0 10px; } /* --- Linha de Tamanho de Fonte --- */ .bm-a11y__font-row { display: flex; align-items: center; gap: 8px; background: var(--bs-secondary-bg, #f8f9fa); border-radius: 10px; padding: 8px 12px; margin-bottom: 12px; } .bm-a11y__font-label { font-size: 0.78rem; color: var(--bs-body-color, #555); flex: 1; min-width: 0; } .bm-a11y__font-btn { width: 30px; height: 30px; border-radius: 50%; border: 1.5px solid var(--bs-border-color, #dee2e6); /* Usa secondary-bg para distinguir do bg do offcanvas em temas escuros */ background: var(--bs-secondary-bg, #fff); color: var(--bs-body-color, #555); font-size: 1rem; font-weight: 700; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; transition: background 0.15s, border-color 0.15s, color 0.15s; flex-shrink: 0; } .bm-a11y__font-btn:hover:not(:disabled) { background: var(--bluemed-primary, #00a0e4); border-color: var(--bluemed-primary, #00a0e4); color: #fff; } .bm-a11y__font-btn:disabled { opacity: 0.4; cursor: default; } .bm-a11y__font-value { font-size: 0.75rem; font-weight: 700; color: var(--bluemed-primary, #00a0e4); min-width: 44px; text-align: center; flex-shrink: 0; } /* --- Grid de Toggles (2 colunas) --- */ .bm-a11y__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; } .bm-a11y__btn { border: 1.5px solid var(--bs-border-color, #dee2e6); background: transparent; border-radius: 10px; cursor: pointer; padding: 9px 6px 8px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 0.66rem; font-weight: 600; color: var(--bs-body-color, #555); line-height: 1.3; text-align: center; transition: background 0.15s, border-color 0.15s, color 0.15s; -webkit-user-select: none; user-select: none; } .bm-a11y__btn svg { width: 20px; height: 20px; fill: currentColor; flex-shrink: 0; } .bm-a11y__btn:hover { border-color: var(--bluemed-primary, #00a0e4); color: var(--bluemed-primary, #00a0e4); } .bm-a11y__btn.is-active { background: var(--bluemed-primary, #00a0e4); border-color: var(--bluemed-primary, #00a0e4); color: #fff; } .bm-a11y__btn:focus-visible { outline: 2px solid var(--bluemed-primary, #00a0e4); outline-offset: 2px; } /* --- Ações de Leitura --- */ .bm-a11y__read-actions { display: flex; gap: 5px; margin-bottom: 8px; } .bm-a11y__read-btn { flex: 1; border: 1.5px solid var(--bs-border-color, #dee2e6); background: transparent; border-radius: 8px; cursor: pointer; padding: 7px 4px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 0.62rem; font-weight: 600; color: var(--bs-body-color, #555); line-height: 1.3; text-align: center; transition: background 0.15s, border-color 0.15s, color 0.15s; } .bm-a11y__read-btn svg { width: 16px; height: 16px; fill: currentColor; flex-shrink: 0; } .bm-a11y__read-btn:hover:not(:disabled) { border-color: var(--bluemed-primary, #00a0e4); color: var(--bluemed-primary, #00a0e4); } .bm-a11y__read-btn.is-active { background: var(--bluemed-primary, #00a0e4); border-color: var(--bluemed-primary, #00a0e4); color: #fff; } .bm-a11y__read-btn:disabled { opacity: 0.45; cursor: default; } .bm-a11y__read-btn:focus-visible { outline: 2px solid var(--bluemed-primary, #00a0e4); outline-offset: 2px; } /* --- Botão VLibras no painel --- */ .bm-a11y__vlibras-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid #1e6fe0; background: transparent; color: #1e6fe0; border-radius: 8px; padding: 8px 12px; font-size: 0.75rem; font-weight: 600; cursor: pointer; margin-bottom: 8px; transition: background 0.15s, color 0.15s; } .bm-a11y__vlibras-btn:hover { background: #1e6fe0; color: #fff; } .bm-a11y__vlibras-btn svg { width: 18px; height: 18px; fill: currentColor; flex-shrink: 0; } .bm-a11y__vlibras-btn:focus-visible { outline: 2px solid #1e6fe0; outline-offset: 2px; } /* --- Botão Restaurar Padrão --- */ .bm-a11y__reset { width: 100%; border: 1.5px solid var(--bs-border-color, #dee2e6); background: transparent; border-radius: 8px; cursor: pointer; padding: 7px 12px; font-size: 0.73rem; font-weight: 600; color: var(--bs-secondary-color, #888); display: flex; align-items: center; justify-content: center; gap: 6px; transition: background 0.15s, color 0.15s, border-color 0.15s; } .bm-a11y__reset svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; } .bm-a11y__reset:hover { background: var(--bs-secondary-bg, #f4f5f7); color: var(--bs-body-color, #444); border-color: #c8cdd5; } .bm-a11y__reset:focus-visible { outline: 2px solid var(--bluemed-primary, #00a0e4); outline-offset: 2px; } /* --- Separador --- */ .bm-a11y__divider { border: none; border-top: 1px solid var(--bs-border-color, #eef0f3); margin: 14px 0; }