/*
 * Acessibilidade comum a todas as páginas (WCAG 2.1 AA). Carregado pelo {% include 'acessibilidade/_cabecalho.html' %}.
 *
 * - Foco visível e consistente: anel de 3px na cor da marca, ajustado por acessibilidade.js para ter contraste
 *   >= 3:1 com o fundo de cada elemento (WCAG 1.4.11 e 2.4.7). Sem JavaScript vale a cor padrão abaixo.
 * - Link "Pular para o conteúdo" (2.4.1), texto só para leitores de tela e preferência por menos movimento (2.3.3).
 */
:root {
    --a11y-foco: #0a7873;        /* verde da marca escurecido: 5,3:1 sobre branco */
    --a11y-foco-halo: #ffffff;
    /* Texto sobre a cor principal quando nem a marca nem a pessoa definiram outro (o verde padrão pede texto escuro;
       marca/cores.py e appearance_store.js usam a mesma regra para as cores escolhidas). */
    --on-primary: #111827;
}
body.dark-mode, :root[data-client-theme="dark"], :root[data-tv-theme="dark"] {
    --a11y-foco: #7fe0d2;
    --a11y-foco-halo: #0b1220;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-appearance-scope]) { --a11y-foco: #7fe0d2; --a11y-foco-halo: #0b1220; }
}

/* Anel de foco: contorno na cor de foco com uma borda fina de "halo" encostada no elemento, para que o anel se
   destaque também sobre botões coloridos. Elementos com tabindex="-1" (alvos de foco programático, como o conteúdo
   principal depois do "Pular para o conteúdo") não ganham anel. */
:root :focus-visible:not([tabindex="-1"]) {
    outline: 3px solid var(--a11y-foco-elemento, var(--a11y-foco)) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 2px var(--a11y-foco-halo-elemento, var(--a11y-foco-halo)) !important;
}
:root [tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
/* Campos dentro de contêineres com overflow escondido: o anel fica por dentro para não ser cortado. */
:root :is(input, textarea, select, [contenteditable="true"]):focus-visible:not([tabindex="-1"]) { outline-offset: 1px !important; }

/* Contraste elevado (janela "Acessibilidade"): texto secundário e bordas na cor do texto principal, em todas as áreas. */
body[data-high-contrast="true"] {
    --text-muted: var(--text-main);
    --border-color: var(--text-main);
}
body[data-high-contrast="true"] a:not([class]) { text-decoration: underline; }

/* Links dentro de texto corrido: sublinhados, para não depender só da cor (WCAG 1.4.1). */
:root :is(p, dd, td, small, label) > a:not([class]) { text-decoration: underline; text-underline-offset: 2px; }

/* Áreas com rolagem própria que recebem o foco (acessibilidade.js): o anel aparece por dentro, sem ser cortado. */
:root [data-a11y-rolagem]:focus-visible { outline-offset: -3px !important; }

/* "Pular para o conteúdo": invisível até receber o foco do teclado. */
.a11y-pular {
    position: fixed;
    top: calc(8px + env(safe-area-inset-top, 0px));
    left: 8px;
    z-index: 2147483000;
    padding: 10px 16px;
    border-radius: 8px;
    background: #0b1220;
    color: #ffffff !important;
    font: 600 14px/1.3 system-ui, -apple-system, 'Segoe UI', sans-serif;
    text-decoration: underline;
    transform: translateY(-200%);
}
.a11y-pular:focus, .a11y-pular:focus-visible { transform: none; --a11y-foco-elemento: #ffffff; --a11y-foco-halo-elemento: #0b1220; }

/* Texto só para leitores de tela (anúncios e rótulos complementares). */
.a11y-oculto {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Menos movimento: animações e transições praticamente instantâneas, sem rolagem suave nem pulsos infinitos. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }
}

/* Aviso de atualização automática com botão de pausa (meta a11y-atualizar, acessibilidade.js). */
.a11y-atualizar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border-color, #cbd5e1); border-radius: 8px; background: var(--bg-sidebar, #ffffff); color: var(--text-main, #101827); font-size: 13px; }
.a11y-atualizar button { min-height: 32px; padding: 4px 12px; border: 1px solid currentColor; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-weight: 600; cursor: pointer; }

/* Dica de contraste ao lado dos seletores de cor (acessibilidade.js). */
.a11y-dica-cor { display: block; margin-top: 4px; font-size: 12px; line-height: 1.4; color: inherit; }

/* Avisos de tempo (sessão e inatividade): cartão fixo, fora do fluxo, acima de tudo. */
.a11y-aviso-tempo {
    position: fixed;
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    z-index: 2147482000;
    max-width: min(420px, calc(100vw - 32px));
    display: grid;
    gap: 10px;
    padding: 16px 18px;
    border: 2px solid #0b1220;
    border-radius: 12px;
    background: #ffffff;
    color: #101827;
    box-shadow: 0 18px 54px #00000040;
    font: 14px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.a11y-aviso-tempo strong { font-size: 15px; }
.a11y-aviso-tempo p { margin: 0; }
.a11y-aviso-tempo div { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.a11y-aviso-tempo button {
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid #0b1220;
    border-radius: 8px;
    background: #ffffff;
    color: #101827;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.a11y-aviso-tempo button[data-principal] { background: #0b1220; color: #ffffff; }
body.dark-mode .a11y-aviso-tempo, :root[data-client-theme="dark"] .a11y-aviso-tempo {
    border-color: #e8edf5; background: #161d29; color: #e8edf5;
}
body.dark-mode .a11y-aviso-tempo button, :root[data-client-theme="dark"] .a11y-aviso-tempo button { border-color: #e8edf5; background: #161d29; color: #e8edf5; }
body.dark-mode .a11y-aviso-tempo button[data-principal], :root[data-client-theme="dark"] .a11y-aviso-tempo button[data-principal] { background: #e8edf5; color: #101827; }