/*
 * frontend/estilos/governanca.css — visual único das páginas de Governança (#207):
 * Compliance, Transparência e Relatórios Institucionais; desde a parte 5, também Ouvidoria,
 * Ética e Integridade e Planejamento Estratégico (com as 2 subpáginas).
 *
 * Segue o "Padrão Priscila" (o mesmo da página Antidoping e das páginas institucionais):
 * título Montserrat azul em maiúsculas, texto Open Sans, cores da CBSA.
 * Mobile first: as regras valem para o celular e só a partir de 768px algo muda.
 *
 * Cores usadas (com o contraste do texto branco, mínimo exigido 4,5:1):
 *   #002776 azul CBSA ......... 13,1:1
 *   #007a2e verde escurecido ... 5,5:1 (o verde #009c3b puro dá só 3,6:1 com branco)
 *   #ffdf00 ouro ............... só em bordas e no contorno de foco (não em texto)
 */

/* ---------- Correções do CSS antigo (style.css), só nestas páginas ----------
 * O style.css antigo pinta TODO <article> de azul (#334F92) e deixa as listas com
 * "display: contents". Uma classe vence a regra de elemento, sem precisar de !important.
 */

/* O conteúdo da página fica com fundo branco. */
.artigo-governanca {
    background-color: #ffffff;
}

/* ---------- Cabeçalho da página (igual ao das outras páginas institucionais) ---------- */

/* Faixa do título: linha cinza embaixo separando do conteúdo. */
.page-header {
    background-color: transparent;
    margin-bottom: 30px;
    border-bottom: 2px solid #e9ecef;
    padding-bottom: 15px;
}

/* Etiqueta verde acima do título (ex.: "Governança"). */
.page-badge {
    display: inline-block;
    margin-bottom: 1rem;
    background-color: #007a2e;
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 4px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ícone dentro da etiqueta: fica branco como o texto (o CSS antigo pinta ícones de azul). */
.page-badge i {
    color: inherit;
}
/* Título principal: cresce com a tela (clamp = mínimo 24px, máximo 32px). */
.page-header h1 {
    font-family: 'Montserrat', sans-serif;
    color: #002776;
    font-weight: 800;
    font-size: clamp(24px, 4vw, 32px);
    text-transform: uppercase;
    margin-bottom: 10px;
}

/* Frase de apresentação logo abaixo do título. */
.page-header .page-intro {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #444444;
    margin-bottom: 0;
}

/* Trilha (Início / Página): sem o fundo cinza do Bootstrap, alinhada à esquerda. */
.trilha-governanca .breadcrumb {
    background: transparent;
    padding-left: 0;
    margin-bottom: 0;
}

/* ---------- Sanfona (<details>/<summary>) ----------
 * <details> é a sanfona nativa do navegador: abre e fecha com clique, Enter ou espaço,
 * o leitor de tela anuncia "recolhido/expandido" sozinho e funciona sem JavaScript.
 */

/* Cada item da sanfona: borda leve e espaço entre um e outro. */
.sanfona {
    border: 1px solid #dfe3ea;
    border-radius: 6px;
    margin-bottom: 10px;
    background-color: #ffffff;
    overflow: hidden;
}

/* A barra clicável com o nome do item. */
.sanfona > summary {
    list-style: none;                 /* tira o triângulo padrão (Firefox/Chrome) */
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;                 /* área de toque mínima no celular */
    padding: 14px 18px;
    background-color: #002776;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

/* Tira o triângulo padrão no Safari (ele usa outro seletor). */
.sanfona > summary::-webkit-details-marker {
    display: none;
}

/* Sinal de "+" à direita (vira "−" quando aberto, regra abaixo). Decorativo:
   o leitor de tela já anuncia se está aberto ou fechado. */
.sanfona > summary::after {
    content: '\002B';
    flex-shrink: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

/* Item aberto: sinal de "−". */
.sanfona[open] > summary::after {
    content: '\2212';
}

/* Passar o mouse ou estar aberto: verde (contraste 5,5:1 com o texto branco). */
.sanfona > summary:hover,
.sanfona[open] > summary {
    background-color: #007a2e;
}

/* Foco do teclado bem visível: contorno ouro por dentro da barra. */
.sanfona > summary:focus-visible {
    outline: 3px solid #ffdf00;
    outline-offset: -3px;
}

/* Conteúdo que aparece ao abrir. */
.sanfona-conteudo {
    padding: 18px;
    background-color: #f8f9fa;
}

/* Texto das políticas: mesmo corpo de texto das outras páginas institucionais. */
.sanfona-conteudo p {
    font-family: 'Open Sans', sans-serif;
    font-size: 17px;
    line-height: 1.8;
    color: #444444;
    text-align: left;                 /* no celular, justificado abre "buracos" no texto */
    margin-bottom: 16px;
}

/* Último parágrafo sem espaço sobrando embaixo. */
.sanfona-conteudo p:last-child {
    margin-bottom: 0;
}

/* A partir do tablet o texto fica justificado, como no resto do site. */
@media (min-width: 768px) {
    .sanfona-conteudo p {
        text-align: justify;
    }
}

/* ---------- Lista de documentos (Transparência) ---------- */

/* Lista sem marcadores; cada documento numa linha. display: block desfaz o
   "display: contents" que o style.css antigo põe em toda lista. */
.lista-docs {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Espaço entre os documentos. */
.lista-docs li + li {
    margin-top: 10px;
}

/* O link do documento: ícone + texto, área de toque de 44px. */
.lista-docs a {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    color: #002776;
    text-decoration: none;
}

/* Ícone do PDF (decorativo, com aria-hidden no HTML). */
.lista-docs a i {
    color: #DB2E20;
    font-size: 1.4em;
    flex-shrink: 0;
}

/* Passar o mouse ou focar: sublinha para mostrar que é link. */
.lista-docs a:hover,
.lista-docs a:focus-visible {
    color: #007a2e;
    text-decoration: underline;
}

/* Data do documento em cinza, antes do nome. */
.lista-docs .doc-data {
    color: #5c6670;
    font-weight: 400;
}

/* ---------- Relatórios: aviso e visualizador do PDF ---------- */

/* Aviso de documento protegido (texto vermelho escuro: contraste 5,9:1). O seletor
   começa por .sanfona-conteudo para vencer a regra do texto comum (.sanfona-conteudo p). */
.sanfona-conteudo .protecao-aviso {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 15px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 600;
    color: #b02a1d;
}

/* O ícone do escudo acompanha a cor do aviso (o CSS antigo pinta ícones de azul). */
.sanfona-conteudo .protecao-aviso i {
    color: inherit;
}

/* Moldura do PDF: 80% da altura da tela, nunca menor que 400px. */
.pdf-responsivo {
    width: 100%;
    height: 80vh;
    min-height: 400px;
    background-color: #525659;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}

/* O visualizador ocupa a moldura inteira. */
.pdf-responsivo iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: none;
}

/* Página com a proteção contra cópia dos relatórios: não deixa selecionar o texto. */
.no-select {
    -webkit-user-select: none;
    user-select: none;
}