/* =======================================================
   Portal público — acessibilidade (WCAG 2.1 AA)
   Carregado pelos dois layouts do portal, DEPOIS do estilo do layout e do
   tema escolhido pela organização, para valer sobre os dois.
   Plano: docs/PLANO_ACESSIBILIDADE.md
   ======================================================= */

/* Pular para o conteúdo: escondido até receber o foco do teclado. */
.pular-conteudo {
    position: absolute; left: 1rem; top: -200px; z-index: 2000;
    background: #111827; color: #fff; padding: .75rem 1.25rem;
    border-radius: 8px; font-weight: 600; text-decoration: none;
}
.pular-conteudo:focus { top: .75rem; color: #fff; }
main:focus { outline: none; }

/* Foco visível em qualquer fundo. Os temas e os botões de compartilhar
   tiravam o contorno padrão. O player incorporado (iframe) não deixa desenhar
   por dentro: o anel vai na caixa em volta dele (classe posta pelo JS). */
/* "html" na frente ganha dos estilos de página que zeram o foco com !important. */
html a:focus-visible, html button:focus-visible, html input:focus-visible, html select:focus-visible,
html textarea:focus-visible, html summary:focus-visible, html iframe:focus-visible,
html [tabindex]:focus-visible, html .btn:focus-visible, html .nav-link:focus-visible,
html .dropdown-item:focus-visible, html .accordion-button:focus-visible,
html .form-control:focus-visible, html .form-select:focus-visible,
html .foco-no-quadro {
    /* Contorno escuro (não tem transição, aparece na hora) e halo branco,
       que o destaca também sobre fundo escuro. */
    outline: 3px solid #111827 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px #FFFFFF !important;
}

/* Cores do Bootstrap que ficavam abaixo de 4,5:1 sobre branco. */
.text-success { color: #146C43 !important; }
.text-danger  { color: #B02A37 !important; }
.text-muted, .text-secondary { color: #5C636A !important; }
.text-primary { color: var(--cor-primaria-entidade) !important; }
.bg-secondary { background-color: #5C636A !important; }
.btn-primary {
    --bs-btn-bg: var(--cor-primaria-entidade); --bs-btn-border-color: var(--cor-primaria-entidade);
    --bs-btn-hover-bg: color-mix(in srgb, var(--cor-primaria-entidade) 85%, black);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--cor-primaria-entidade) 85%, black);
    --bs-btn-active-bg: color-mix(in srgb, var(--cor-primaria-entidade) 80%, black);
}
.btn-outline-primary { --bs-btn-color: var(--cor-primaria-entidade); --bs-btn-border-color: var(--cor-primaria-entidade); --bs-btn-hover-bg: var(--cor-primaria-entidade); }
.btn-outline-danger { --bs-btn-color: #B02A37; --bs-btn-border-color: #B02A37; }
.nav-pills .nav-link.active { color: #fff !important; }
.btn-outline-secondary { --bs-btn-color: #5C636A; --bs-btn-border-color: #5C636A; }
/* Crachá com texto na cor da organização sobre fundo tingido: um tom mais escuro. */
.badge.text-primary { color: color-mix(in srgb, var(--cor-primaria-entidade) 78%, black) !important; }

/* Classes da cor da organização usadas pelas páginas. A de fundo não estava
   definida em lugar nenhum: o título do cartão saía branco sobre branco. */
.text-primary-entidade { color: var(--cor-primaria-entidade) !important; }
.bg-primary-entidade { background-color: var(--cor-primaria-entidade) !important; color: #fff; }
/* Temas que clareiam todo .card não podem clarear o cartão escuro de destaque:
   o texto dele é branco. */
html .card.bg-dark { background-color: #212529 !important; }
html .card.bg-primary { background-color: var(--cor-primaria-entidade) !important; }
html .card.text-white .opacity-75, html .card.text-white .opacity-50 { opacity: 1 !important; }
html .bg-dark .btn-outline-light, html .bg-primary .btn-outline-light,
html .bg-primary-entidade .btn-outline-light { color: #fff !important; border-color: #fff !important; background: transparent !important; }
html .card.bg-primary-entidade, html .bg-primary-entidade { background-color: var(--cor-primaria-entidade) !important; }

/* Item encerrado: fundo neutro em vez de texto esmaecido, que ficava ilegível. */
.seletivo-encerrado { background-color: #F1F3F5 !important; }
a:not(.btn):not(.nav-link):not(.dropdown-item) { text-underline-offset: .15em; }
code { color: #A61E4D; }

/* Rodapé: o texto esmaecido com opacidade ficava ilegível sobre o fundo escuro. */
.footer, .footer a { color: #C9CDD2; }
.footer .opacity-50, .footer .opacity-75 { opacity: 1 !important; }
.footer a:hover, .footer a:focus-visible { color: #fff; text-decoration: underline; }

/* Cabeçalho das páginas (hero). Cada tema pinta o fundo — claro no cívico,
   editorial e sereno; na cor da organização no comunitário e no vibrante — e
   define a cor do texto. As páginas, porém, marcam o texto com .text-white e
   opacidade, que passavam por cima do tema: texto branco sobre fundo claro.
   Aqui o texto herda a cor que o tema escolheu, sem transparência. */
.hero-section .text-white, .hero-section .text-white-50,
.hero-section a:not(.btn):not(.badge), .hero-section .nav-link:not(.active),
.hero-section .breadcrumb-item, .hero-section .breadcrumb-item + .breadcrumb-item::before {
    color: inherit !important;
}
.hero-section .opacity-25, .hero-section .opacity-50, .hero-section .opacity-75 { opacity: 1 !important; }

/* Celular / zoom de 400%: sem rolagem para os lados. */
@media (max-width: 575.98px) {
    .row.g-5, .row.gx-5, .row.g-4, .row.gx-4 { --bs-gutter-x: 1.5rem; }
}
main { overflow-wrap: break-word; }
/* A animação de entrada "vindo da lateral" deixava o bloco fora da tela até
   animar, e o celular ganhava rolagem para os lados. */
main { overflow-x: clip; }
main img, main video, main iframe { max-width: 100%; }
.tabela-rolavel { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela-rolavel:focus-visible { outline: 3px solid #111827 !important; outline-offset: 2px !important; }

/* Quem pede menos movimento no sistema não recebe animação de entrada. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
    [data-aos] { opacity: 1 !important; transform: none !important; }
}