/* =========================================================
   Portal de Contas Públicas — estilos sobre Bootstrap 5.3
   Tokens do CONAM PHP Design System
   ========================================================= */

:root {
  /* Marca CONAM */
  --conam-teal: #277B7A;
  --conam-teal-escuro: #006F6C;
  --conam-teal-claro: #e6f1f1;

  /* Interativo (SmartAdmin blue) */
  --conam-primario: #3276b1;
  --conam-primario-borda: #2c699d;
  --conam-hover: #eef4fa;
  --conam-foco: #97bef6;

  /* Superfícies */
  --conam-superficie: #fff;
  --conam-canvas: #ECECEC;
  --conam-well: #f5f5f5;
  --conam-borda: #ddd;
  --conam-borda-input: #ced4da;

  /* Texto */
  --conam-texto: #3f4042;
  --conam-titulo: #232323;
  --conam-mudo: #6b7177;
  --conam-perigo: #a90329;

  /* Mapeamento para variáveis do Bootstrap */
  --bs-body-font-family: Roboto, Arial, sans-serif;
  --bs-body-font-size: .875rem;
  --bs-body-color: var(--conam-texto);
  --bs-body-bg: var(--conam-canvas);
  --bs-primary: var(--conam-primario);
  --bs-primary-rgb: 50, 118, 177;
  --bs-link-color: var(--conam-primario);
  --bs-link-color-rgb: 50, 118, 177;
  --bs-link-hover-color: var(--conam-primario-borda);
  --bs-border-color: var(--conam-borda);
  --bs-secondary-color: var(--conam-mudo);
}

body { background: var(--conam-canvas); }

/* Invólucro do conteúdo. Os filtros de acessibilidade são aplicados aqui e
   não no <html>: filter cria bloco de contenção e quebraria o position:fixed
   dos botões flutuantes, que ficam fora deste invólucro. */
.portal-conteudo {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container { max-width: 1140px; }

/* ---------- Botão primário no padrão CONAM ---------- */
.btn-primary {
  --bs-btn-bg: var(--conam-primario);
  --bs-btn-border-color: var(--conam-primario-borda);
  --bs-btn-hover-bg: #2d6aa0;
  --bs-btn-hover-border-color: var(--conam-primario-borda);
  --bs-btn-active-bg: var(--conam-primario-borda);
  --bs-btn-active-border-color: var(--conam-primario-borda);
  --bs-btn-focus-shadow-rgb: 50, 118, 177;
}

/* ---------- 1. Barra superior ---------- */
.portal-topo {
  background: var(--conam-teal);
  color: #fff;
  border-bottom: 3px solid var(--conam-teal-escuro);
}
.portal-brasao {
  width: 48px; height: 56px; flex: none;
  background: var(--conam-superficie); border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
}
.portal-brasao img { max-width: 40px; max-height: 48px; object-fit: contain; }
.portal-topo-sobre { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; opacity: .85; }
.portal-topo-nome { font-size: 1.3125rem; font-weight: 500; line-height: 1.2; }

/* ---------- 2. Cabeçalho ---------- */
.portal-cabecalho { background: var(--conam-superficie); border-bottom: 1px solid var(--conam-borda); }
.portal-titulo { font-size: 2.25rem; font-weight: 300; color: var(--conam-titulo); line-height: 1.15; margin-bottom: .625rem; }
.portal-subtitulo { font-size: .9375rem; line-height: 1.55; }
.portal-h2 { font-size: 1.25rem; font-weight: 500; color: var(--conam-titulo); }

/* Select: inputs/selects são quadrados no DS CONAM */
.portal-select {
  min-width: 180px; min-height: 44px;
  background-color: var(--conam-superficie);
  font-size: .9375rem;
  border-radius: 0;
  border-color: var(--conam-borda-input);
  cursor: pointer;
}
.portal-select:focus {
  border-color: var(--conam-foco);
  box-shadow: 0 0 0 .2rem rgba(50, 118, 177, .25);
}

/* ---------- 3. Áreas ---------- */
.portal-area { --bs-card-bg: var(--conam-superficie); border-color: var(--conam-borda); overflow: hidden; }
.portal-area .card-body { padding: 1rem 1.25rem; }

.portal-area-num {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: var(--conam-teal-claro); color: var(--conam-teal-escuro);
  font-weight: 700; font-size: .8125rem;
  display: flex; align-items: center; justify-content: center;
}
.portal-area-info { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.portal-area-titulo { margin: 0; font-size: 1rem; font-weight: 500; color: var(--conam-titulo); line-height: 1.35; }
.portal-area-sub { font-size: .875rem; }
.portal-area-prazo { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--conam-mudo); }
.portal-area-prazo strong { font-weight: 500; color: var(--conam-texto); }

.portal-area-acoes { flex: 1 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: .75rem; }
.portal-contagem {
  font-size: .75rem; font-weight: 500;
  color: var(--conam-texto); background: var(--conam-well);
  border: 1px solid var(--conam-borda); border-radius: 10px;
  padding: .3rem .625rem;
}

.portal-btn-listar { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: 0 1.125rem; font-weight: 500; }
.portal-btn-listar svg { transition: transform .2s; }
/* Estado aberto: vira botão outline */
.portal-btn-listar[aria-expanded="true"] {
  --bs-btn-bg: var(--conam-superficie); --bs-btn-color: var(--conam-primario);
  --bs-btn-border-color: var(--conam-primario);
  --bs-btn-hover-bg: var(--conam-hover); --bs-btn-hover-color: var(--conam-primario);
  --bs-btn-active-bg: var(--conam-hover); --bs-btn-active-color: var(--conam-primario);
}
.portal-btn-listar[aria-expanded="true"] svg { transform: rotate(180deg); }

/* ---------- Documentos ---------- */
.portal-docs { border-top: 1px solid var(--conam-borda); background: var(--conam-well); padding: 1rem 1.25rem; }
.portal-docs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .625rem; }

.portal-doc {
  display: flex; align-items: center; gap: .625rem;
  min-height: 44px; padding: .5rem .75rem;
  background: var(--conam-superficie); border: 1px solid var(--conam-borda); border-radius: .375rem;
  font-size: .875rem; color: var(--conam-primario); text-decoration: none;
  transition: background .2s, border-color .2s;
}
.portal-doc:hover { background: var(--conam-hover); border-color: var(--conam-foco); color: var(--conam-primario-borda); }
.portal-doc:focus-visible { outline: 3px solid var(--conam-foco); outline-offset: 2px; }
.portal-doc svg { flex: none; }
.portal-doc .nome { flex: 1; min-width: 0; }
.portal-doc .tipo { font-size: .6875rem; font-weight: 700; color: var(--conam-perigo); }

/* Indisponível = link desabilitado */
.portal-doc.disabled {
  color: var(--conam-mudo); background: var(--conam-well);
  border-style: dashed; cursor: not-allowed; pointer-events: none;
}
.portal-doc.disabled .tipo { color: var(--conam-mudo); font-weight: 400; }

.portal-vazio { color: var(--conam-mudo); font-size: .875rem; margin: 0; }

/* ---------- Rodapé ---------- */
.portal-rodape { background: var(--conam-superficie); border-top: 1px solid var(--conam-borda); color: var(--conam-mudo); }

@media (prefers-reduced-motion: reduce) {
  .portal-btn-listar svg, .portal-doc, .collapsing { transition: none !important; }
}

/* ---------- Subgrupos dentro de uma seção ----------
   RREO, RGF, audiências e balancetes mensais trazem dezenas de documentos
   repartidos em bimestres, quadrimestres, tipos de ata ou meses. O subtítulo
   quebra a grade e devolve essa estrutura, que o sistema antigo tinha em
   acordeões aninhados. */
.portal-docs-grupo {
  grid-column: 1 / -1;
  margin: .5rem 0 -.125rem;
  font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--conam-teal-escuro);
}
.portal-docs-grupo:first-child { margin-top: 0; }

/* ---------- Mensagem de erro em página cheia ---------- */
.portal-aviso { background: var(--conam-superficie); border: 1px solid var(--conam-borda); border-radius: .375rem; padding: 2rem; }
.portal-aviso h2 { font-size: 1.125rem; font-weight: 500; color: var(--conam-titulo); margin-bottom: .5rem; }
.portal-aviso p { margin-bottom: 0; color: var(--conam-mudo); }

/* Enquanto a lista recarrega, o conteúdo antigo esmaece em vez de sumir. */
#lista-areas[aria-busy="true"] { opacity: .55; }