/**
 * =============================================================================
 * Acessibilidade — componente compartilhado e preferências
 * =============================================================================
 *
 * ISOLAMENTO (plano 2.5): todo seletor começa por `.a11y`, `html.a11y-` ou
 * `:where(#conteudo, …)`. Com nenhuma preferência ligada, o único efeito visual nos
 * 21 layouts e na casca é o próprio botão — nenhuma regra global de
 * `prefers-reduced-motion` mexe nos temas. A catraca
 * tests/acessibilidade-css-isolamento.test.js trava isso.
 */

.a11y {
    --a11y-cor-texto: #14532d;
    --a11y-cor-fundo: #ffffff;
    --a11y-cor-borda: #14532d;
    --a11y-cor-foco: #0b3d1f;
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 1.2;
    font-family: inherit;
}

/* ── Botão ──────────────────────────────────────────────────────────── */
.a11y-botao {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    min-width: 44px;
    min-height: 44px;
    padding: .4rem .75rem;
    background: var(--a11y-cor-fundo);
    color: var(--a11y-cor-texto);
    border: 2px solid var(--a11y-cor-borda);
    border-radius: 999px;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
}

.a11y-botao:hover {
    background: #f0fdf4;
}

.a11y-botao:focus-visible,
.a11y-controle:focus-visible,
.a11y-atalhos a:focus-visible,
.a11y-pagina:focus-visible {
    outline: 3px solid var(--a11y-cor-foco);
    outline-offset: 2px;
}

.a11y--compacto .a11y-botao-rotulo {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Variantes ──────────────────────────────────────────────────────── */
.a11y--navbar {
    margin-left: .5rem;
}

.a11y--navbar .a11y-botao {
    --a11y-cor-texto: #14532d;
    --a11y-cor-fundo: #ffffff;
    --a11y-cor-borda: #ffffff;
    --a11y-cor-foco: #14532d;
}

.a11y--flutuante {
    position: fixed;
    top: .75rem;
    right: .75rem;
    z-index: 1035;
}

.a11y--emag {
    margin-left: .5rem;
}

.a11y--emag .a11y-botao {
    border-radius: .4rem;
}

/* Controle direto na barra eMAG (layout-acessibilidade): mesma aparência do botão,
   sem a largura total dos controles do painel. */
.a11y--emag .a11y-controle--barra {
    width: auto;
    margin-bottom: 0;
    min-height: 44px;
    padding: .4rem .75rem;
    border-radius: .4rem;
}

/* ── Painel ─────────────────────────────────────────────────────────── */
.a11y-painel {
    position: absolute;
    z-index: 1035;
    top: calc(100% + .4rem);
    right: 0;
    width: min(22rem, calc(100vw - 1rem));
    max-height: min(80vh, 40rem);
    overflow: auto;
    padding: .9rem 1rem;
    background: #ffffff;
    color: #111827;
    border: 1px solid #d1d5db;
    border-radius: .75rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    text-align: left;
}

.a11y-painel[hidden] {
    display: none;
}

.a11y-titulo {
    margin: 0 0 .6rem;
    font-size: .95rem;
    font-weight: 700;
}

.a11y-controle {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    min-height: 24px;
    padding: .5rem .6rem;
    margin-bottom: .35rem;
    background: #f8fafc;
    color: #111827;
    border: 1px solid #cbd5e1;
    border-radius: .5rem;
    font: inherit;
    font-size: .85rem;
    text-align: left;
    cursor: pointer;
}

.a11y-controle:hover {
    background: #eef2f7;
}

.a11y-controle[aria-pressed="true"] {
    background: #dcfce7;
    border-color: #16a34a;
}

.a11y-controle[disabled] {
    opacity: .7;
    cursor: not-allowed;
}

.a11y-controle-rotulo {
    flex: 1 1 auto;
}

.a11y-estado {
    flex: 0 0 auto;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.a11y-controle--restaurar {
    background: #ffffff;
}

.a11y-ajuda {
    margin-top: .6rem;
    padding-top: .6rem;
    border-top: 1px solid #e2e8f0;
    font-size: .78rem;
    color: #374151;
}

.a11y-ajuda-titulo {
    margin: 0 0 .25rem;
    font-weight: 700;
}

.a11y-atalhos-lista {
    margin: 0 0 .4rem;
    padding-left: 1.1rem;
}

.a11y-ajuda-zoom {
    margin: 0;
}

.a11y-pagina {
    display: inline-block;
    margin-top: .5rem;
    color: #1d4ed8;
    font-size: .82rem;
    font-weight: 600;
}

.a11y-status {
    margin: .4rem 0 0;
    min-height: 1.1em;
    font-size: .78rem;
    font-weight: 600;
    color: #14532d;
}

/* ── Barra de atalhos (escondida até o foco, por recorte) ───────────── */
.a11y-atalhos {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1040;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

.a11y-atalhos a {
    padding: .5rem .75rem;
    background: #14532d;
    color: #ffffff;
    border-radius: 0 0 .4rem 0;
    font-size: .82rem;
    font-weight: 600;
    text-decoration: none;
}

.a11y-atalhos:not(.a11y-atalhos--visivel) a {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.a11y-atalhos:not(.a11y-atalhos--visivel) a:focus {
    position: static;
    width: auto;
    height: auto;
    padding: .5rem .75rem;
    margin: 0;
    overflow: visible;
    clip: auto;
}

.a11y-tecla {
    opacity: .85;
}

/* Alvos dos atalhos: a barra fixa de topo não pode cobrir o título. */
:where(#conteudo, #menu, #busca, #rodape) {
    scroll-margin-top: 5rem;
}

/* ── Preferência: destacar links e foco ─────────────────────────────── */
html.a11y-links a {
    text-decoration: underline !important;
    text-underline-offset: .15em;
}

html.a11y-links :focus-visible {
    outline: 3px solid #a16207 !important;
    outline-offset: 2px;
}

/* ── Preferência: espaçamento do texto (WCAG 1.4.12) ────────────────── */
html.a11y-espacamento :where(p, li, blockquote, dd, dt, td, th, label, figcaption) {
    line-height: 1.5 !important;
    letter-spacing: .12em !important;
    word-spacing: .16em !important;
}

html.a11y-espacamento :where(p, blockquote) {
    margin-bottom: 2em !important;
}

/* ── Preferência: reduzir efeitos visuais ───────────────────────────── */
html.a11y-sem-animacao {
    scroll-behavior: auto !important;
}

html.a11y-sem-animacao *,
html.a11y-sem-animacao *::before,
html.a11y-sem-animacao *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
}

/* ── Preferência: alto contraste (eMAG; WCAG 1.4.3 e 1.4.11) ────────── */
html.a11y-contraste {
    background: #000000 !important;
    /* Ícones do Bootstrap são background-image em SVG: redefinir as variáveis em vez
       de zerar `background-image` em `*` (o que apagaria ☰, ✕, rádio, checkbox e seta). */
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23000000' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

html.a11y-contraste body {
    background: #000000 !important;
    color: #ffffff !important;
}

html.a11y-contraste :where(h1, h2, h3, h4, h5, h6, p, span, div, li, td, th, dt, dd, label, strong, small, em, time, caption, legend, blockquote, figcaption) {
    color: #ffffff !important;
}

html.a11y-contraste a,
html.a11y-contraste a:visited {
    color: #fff333 !important;
    text-decoration: underline !important;
}

html.a11y-contraste :where(header, nav, main, footer, section, article, aside, table, th, td, tr, div, ul, ol, li, form, input, select, textarea, fieldset, hr) {
    border-color: #ffffff !important;
}

/* Fundos decorativos (gradientes, imagens de CSS) caem; imagens de CONTEÚDO e o banner
   marcado com data-a11y-imagem ficam. Os ícones do Bootstrap (☰, ✕, select, check) ficam
   fora da lista para a variável redefinida acima continuar valendo. */
html.a11y-contraste *:not(img):not(picture):not(video):not(svg):not(path):not([data-a11y-imagem]):not(.navbar-toggler-icon):not(.btn-close):not(.form-select):not(.form-check-input) {
    background-color: transparent !important;
    background-image: none !important;
}

html.a11y-contraste :focus-visible {
    outline: 3px solid #fff333 !important;
    outline-offset: 2px;
}

html.a11y-contraste .navbar-toggler-icon {
    background-image: var(--bs-navbar-toggler-icon-bg) !important;
}

html.a11y-contraste .btn-close {
    background-image: var(--bs-btn-close-bg) !important;
    filter: none !important;
}

html.a11y-contraste .form-select {
    background-image: var(--bs-form-select-bg-img) !important;
}

html.a11y-contraste .form-check-input:checked {
    background-color: #fff333 !important;
    border-color: #ffffff !important;
    background-image: var(--bs-form-check-bg-image) !important;
}

html.a11y-contraste .a11y-botao {
    background-color: #ffffff !important;
    background-image: none !important;
    color: #14532d !important;
    border-color: #ffffff !important;
}

html.a11y-contraste .a11y-botao * {
    color: inherit !important;
}

html.a11y-contraste .a11y-painel {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

html.a11y-contraste .a11y-controle {
    background-color: #000000 !important;
    border-color: #ffffff !important;
}

html.a11y-contraste .a11y-atalhos a {
    background-color: #000000 !important;
    color: #fff333 !important;
    border: 2px solid #ffffff !important;
}

html.a11y-contraste .a11y-pagina {
    color: #fff333 !important;
}

html.a11y-contraste .a11y-status {
    color: #ffffff !important;
}

/* ── Contraste forçado pelo sistema operacional ─────────────────────── */
@media (forced-colors: active) {
    html.a11y-contraste .a11y-controle[disabled] {
        border-style: dashed !important;
    }

    .a11y-botao {
        color: ButtonText;
        background-color: ButtonFace;
        border-color: ButtonText;
    }
}