/*
 * Acessibilidade do DocBox (lib_acessibilidade.php): barra de atalhos e recursos no padrão do
 * eMAG 3.1, foco visível, alto contraste, tamanho do texto e redução de movimento.
 * Referências: Lei 13.146/2015 (LBI, art. 63), eMAG 3.1, ABNT NBR 17225 e WCAG 2.2 nível AA.
 *
 * Carregado por último no <head> para prevalecer sobre os temas, que removem o contorno de foco.
 */

/* Ícone de acessibilidade (SVG de lib_acessibilidade.php) alinhado ao texto */
.a11y-icone {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: -0.15em;
}

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

/* ---------- Foco visível (WCAG 2.4.7 / 2.4.11; eMAG 1.9) ---------- */
/* Dois tons (amarelo + preto) para aparecer sobre qualquer cor de fundo */
html body :focus-visible {
    outline: 3px solid #ffbf47 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px #0b0c0c !important;
}
html body .a11y-alvo:focus,
html body [tabindex="-1"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* ---------- Barra de acessibilidade (eMAG 1.5: atalhos 1 a 4) ---------- */
.a11y-barra {
    background: #f3f4f6;
    border-bottom: 1px solid #d1d5db;
    color: #1f2937;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.4;
    position: relative;
    z-index: 1200;
}
.a11y-barra__inner {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1240px;
    padding: 4px 16px;
}
.a11y-barra ul {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 2px 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.a11y-barra li { margin: 0; padding: 0; }
.a11y-barra a,
.a11y-barra button {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    color: #1f2937;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    gap: 4px;
    min-height: 28px;
    min-width: 28px;
    justify-content: center;
    padding: 2px 6px;
    text-decoration: none;
}
.a11y-barra a:hover,
.a11y-barra button:hover {
    border-color: #6b7280;
    text-decoration: underline;
}
.a11y-barra button[aria-pressed="true"] {
    background: #1f2937;
    color: #fff;
}
.a11y-tecla {
    background: #1f2937;
    border-radius: 3px;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    min-width: 16px;
    text-align: center;
}
.a11y-barra .a11y-separador {
    border-left: 1px solid #9ca3af;
    height: 18px;
    margin: 0 4px;
}
@media (max-width: 767px) {
    /* No celular os atalhos de teclado ficam ocultos até receberem o foco */
    .a11y-barra .a11y-atalhos {
        left: 0;
        position: absolute;
        top: -200px;
    }
    .a11y-barra .a11y-atalhos:focus-within {
        background: #f3f4f6;
        padding: 4px 16px;
        position: static;
        width: 100%;
    }
    .a11y-barra__inner { justify-content: flex-end; }
}

/* Painel: atalhos ocultos até receberem foco (o layout do painel tem cabeçalho fixo) */
.a11y-pular {
    left: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    position: fixed;
    top: -200px;
    z-index: 100000;
}
.a11y-pular:focus-within { top: 8px; }
.a11y-pular a {
    background: #1f2937;
    border-radius: 4px;
    color: #fff !important;
    display: block;
    font: 600 14px/1.4 Arial, Helvetica, sans-serif;
    margin-bottom: 4px;
    padding: 8px 14px;
    text-decoration: underline;
}

/* Painel: botão flutuante logo abaixo do botão do VLibras (40px, a 10px da direita, centrado
   na altura da tela); o painel abre à esquerda do botão */
.a11y-flutuante {
    position: fixed;
    right: 10px;
    top: calc(50% + 56px);
    z-index: 99998;
}
@media (min-width: 768px) {
    .a11y-flutuante--celular { display: none; }
}
@media (max-width: 767px) {
    /* No celular os recursos saem da barra do topo e ficam no botão flutuante */
    .a11y-barra .a11y-barra__recursos { display: none; }
    .a11y-barra { background: transparent; border-bottom: 0; }
    .a11y-barra__inner { padding: 0; }
    .a11y-flutuante__painel { width: min(270px, calc(100vw - 70px)); }
}
.a11y-flutuante__botao {
    align-items: center;
    background: #1351b4;
    border: 0;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
    color: #fff;
    cursor: pointer;
    display: flex;
    font-size: 24px;
    height: 40px;
    justify-content: center;
    padding: 0;
    width: 40px;
}
.a11y-flutuante__botao:hover,
.a11y-flutuante__botao[aria-expanded="true"] { background: #0c326f; }
.a11y-flutuante__painel {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
    color: #1f2937;
    font: 13px/1.4 Arial, Helvetica, sans-serif;
    padding: 12px;
    position: absolute;
    right: 48px;
    top: 0;
    width: 270px;
}
.a11y-flutuante__painel[hidden] { display: none; }
.a11y-flutuante__titulo {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 8px;
    padding: 0;
}
.a11y-flutuante__botoes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.a11y-flutuante__botoes button {
    background: #fff;
    border: 1px solid #6b7280;
    border-radius: 4px;
    color: #1f2937;
    cursor: pointer;
    font: inherit;
    min-height: 32px;
    min-width: 36px;
    padding: 4px 8px;
}
.a11y-flutuante__botoes button:hover { background: #f3f4f6; }
.a11y-flutuante__botoes button[aria-pressed="true"] {
    background: #1f2937;
    border-color: #1f2937;
    color: #fff;
}
.a11y-flutuante__painel a { color: #124f8c; text-decoration: underline; }
@media print {
    .a11y-flutuante { display: none !important; }
}

/* ---------- Tamanho do texto (botões A+ / A / A-) ---------- */
/* zoom (CSS padrão desde 2024) amplia texto e layout juntos, sem cortar textos em caixas de
   altura fixa; o zoom do navegador (Ctrl +) continua funcionando normalmente (WCAG 1.4.4) */
html.a11y-fonte-1 body { zoom: 1.1; }
html.a11y-fonte-2 body { zoom: 1.25; }
html.a11y-fonte-3 body { zoom: 1.5; }
html.a11y-fonte-4 body { zoom: 1.75; }
html.a11y-fonte-5 body { zoom: 2; }
/* O tema público tem larguras fixas de 1170px (.row, .header, .announcement): com o texto
   ampliado elas viram rolagem horizontal; limitadas à largura da tela, o conteúdo reflui (WCAG 1.4.10) */
html[class*="a11y-fonte-"] .site-container .row:not(.full-width),
html[class*="a11y-fonte-"] .site-container .header,
html[class*="a11y-fonte-"] .site-container .announcement {
    max-width: 100%;
}
html[class*="a11y-fonte-"] .site-container .row.full-width .row {
    max-width: 100%;
}
html[class*="a11y-fonte-"] body { overflow-wrap: break-word; }

/* ---------- Alto contraste (eMAG 4.1; WCAG 1.4.3 / 1.4.11) ---------- */
html.a11y-contraste,
html.a11y-contraste body,
html.a11y-contraste body *:not(img):not(video):not(canvas):not(svg):not(svg *):not([vw]):not([vw] *) {
    background-color: #000 !important;
    background-image: none !important;
    border-color: #fff !important;
    box-shadow: none !important;
    color: #fff !important;
    text-shadow: none !important;
}
html.a11y-contraste body a,
html.a11y-contraste body a *:not(img) {
    color: #ff0 !important;
    text-decoration: underline !important;
}
html.a11y-contraste body button,
html.a11y-contraste body input,
html.a11y-contraste body select,
html.a11y-contraste body textarea,
html.a11y-contraste body .btn,
html.a11y-contraste body .more {
    border: 2px solid #fff !important;
}
html.a11y-contraste body button[aria-pressed="true"] {
    background-color: #ff0 !important;
    color: #000 !important;
}
html.a11y-contraste body ::placeholder { color: #ccc !important; opacity: 1; }
html.a11y-contraste body img {
    /* Logotipos com fundo transparente e texto escuro continuam legíveis */
    background-color: #fff !important;
}
html.a11y-contraste body mark,
html.a11y-contraste body .highlight {
    background-color: #ff0 !important;
    color: #000 !important;
}
html.a11y-contraste body :focus-visible {
    box-shadow: 0 0 0 5px #fff !important;
    outline-color: #ff0 !important;
}

/* ---------- Ajustes de contraste do tema público (WCAG 1.4.3, mínimo 4,5:1) ---------- */
.more,
.more[type="submit"] { color: #1f5f87; }
.more:hover { background: #1f5f87; border-color: #1f5f87; color: #fff; }
.copyright { color: #4b5563; }
.scroll-top.animated-element { background: rgba(31, 41, 55, .85); }

/* Botões e etiquetas do Bootstrap/tema com texto branco abaixo de 4,5:1 (vermelho #f25656 = 3,3:1,
   ciano #12AFCB = 2,6:1, amarelo com texto branco = 1,5:1). Primária e sucesso já passam (custom.css). */
.btn-danger,
.btn-danger:focus,
.label-danger,
.badge-danger {
    background-color: #b42318;
    border-color: #b42318;
    color: #fff;
}
.btn-danger:hover,
.btn-danger:active,
.btn-danger.active {
    background-color: #912018;
    border-color: #912018;
    color: #fff;
}
.btn-info,
.btn-info:focus,
.label-info,
.badge-info {
    background-color: #0b6e8a;
    border-color: #0b6e8a;
    color: #fff;
}
.btn-info:hover,
.btn-info:active,
.btn-info.active {
    background-color: #08566c;
    border-color: #08566c;
    color: #fff;
}
.btn-warning,
.btn-warning:focus,
.btn-warning:hover,
.btn-warning:active,
.label-warning,
.badge-warning {
    color: #1f2937;
}
.text-muted { color: #5f6b7a; }
.text-danger { color: #b42318; }

/* Links do conteúdo não dependem só da cor (WCAG 1.4.1) */
.site-container main a:not(.btn):not(.more):not([class*="list-group"]),
#rodape a:not(.btn):not(.more) {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Links empilhados do rodapé: área de toque mínima de 24px (WCAG 2.5.8) */
#rodape .list a {
    display: inline-block;
    min-height: 24px;
    padding: 3px 0;
}

/* ---------- Redução de movimento (WCAG 2.3.3) ---------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}

/* ---------- Modo de alto contraste do sistema (Windows) ---------- */
@media (forced-colors: active) {
    html body :focus-visible { outline: 3px solid CanvasText !important; }
    .a11y-tecla { border: 1px solid CanvasText; }
}

/* ---------- Impressão ---------- */
@media print {
    .a11y-barra,
    .a11y-pular,
    [vw] { display: none !important; }
}