/* ==========================================================================
   styles.css — Portal da Transparência SEED/SE
   Arquivo CSS consolidado: reúne TODOS os estilos do portal.
   Gerado a partir de: serigy-icones.css, serigy-base.css, ouvidoria.css,
                        lgpd.css, profin.css, pete.css
   Os 12 CSS de tela vazios (contratos.css, convenios.css etc.) não tinham
   regras — apenas comentários de placeholder.

   Ordem de carregamento:
     1. Font Awesome 7 (@font-face precisa vir primeiro)
     2. Design system base (tokens, layout, componentes compartilhados)
     3. Estilos específicos de tela (ouvidoria, lgpd, profin, pete)

   Cores validadas WCAG 2.1 AA — rodar `python3 check_contraste.py`.
   ========================================================================== */


/* ╔════════════════════════════════════════════════════════════════════════════╗
   ║  PARTE 1 — FONT AWESOME 7 FREE (subset local)                           ║
   ║  Font Awesome Free by @fontawesome — https://fontawesome.com             ║
   ║  Ícones: CC BY 4.0 · Fontes: SIL OFL 1.1 · Código: MIT                 ║
   ║  Copyright 2026 Fonticons, Inc.                                          ║
   ║                                                                          ║
   ║  55 classes de ícone usadas nas 16 telas. Ícone novo = acrescentar a     ║
   ║  regra .fa-<nome> aqui, com o code point do all.css oficial.             ║
   ╚════════════════════════════════════════════════════════════════════════════╝ */

:root, :host {
  --fa-family-classic: 'Font Awesome 7 Free';
  --fa-font-solid: normal 900 1em/1 var(--fa-family-classic);
  --fa-style-family-classic: var(--fa-family-classic);
}

.fa-solid,
.fa-regular,
.fa-classic,
.fas,
.far,
.fa {
  --_fa-family: var(--fa-family, var(--fa-style-family, 'Font Awesome 7 Free'));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: var(--fa-display, inline-block);
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: var(--fa-style, 900);
  line-height: 1;
  text-align: center;
  text-rendering: auto;
  width: var(--fa-width, 1.25em);
}

:is(.fas,
.far,
.fa-solid,
.fa-regular,
.fa-classic,
.fa)::before {
  content: var(--fa)/"";
}

@supports not (content: ""/"") {
  :is(.fas,
  .far,
  .fa-solid,
  .fa-regular,
  .fa-classic,
  .fa)::before {
    content: var(--fa);
  }
}

@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("webfonts/fa-solid-900.woff2");
}

.fas {
  --fa-family: var(--fa-family-classic);
  --fa-style: 900;
}

@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("webfonts/fa-regular-400.woff2");
}

.far {
  --fa-family: var(--fa-family-classic);
  --fa-style: 400;
}

/* Ícones em uso (64) */
.fa-balance-scale { --fa: "\f24e"; }
.fa-ban { --fa: "\f05e"; }
.fa-book { --fa: "\f02d"; }
.fa-book-reader { --fa: "\f5da"; }
.fa-building { --fa: "\f1ad"; }
.fa-bus-alt { --fa: "\f55e"; }
.fa-calendar-alt { --fa: "\f073"; }
.fa-calendar-plus { --fa: "\f271"; }
.fa-chart-bar { --fa: "\f080"; }
.fa-chart-line { --fa: "\f201"; }
.fa-chart-pie { --fa: "\f200"; }
.fa-circle-info { --fa: "\f05a"; }
.fa-clipboard-check { --fa: "\f46c"; }
.fa-clipboard-list { --fa: "\f46d"; }
.fa-clock { --fa: "\f017"; }
.fa-coins { --fa: "\f51e"; }
.fa-comments { --fa: "\f086"; }
.fa-database { --fa: "\f1c0"; }
.fa-envelope { --fa: "\f0e0"; }
.fa-file-alt { --fa: "\f15c"; }
.fa-file-contract { --fa: "\f56c"; }
.fa-file-invoice { --fa: "\f570"; }
.fa-file-invoice-dollar { --fa: "\f571"; }
.fa-file-signature { --fa: "\f573"; }
.fa-gavel { --fa: "\f0e3"; }
.fa-graduation-cap { --fa: "\f19d"; }
.fa-hand-holding-usd { --fa: "\f4c0"; }
.fa-handshake { --fa: "\f2b5"; }
.fa-hard-hat { --fa: "\f807"; }
.fa-headset { --fa: "\f590"; }
.fa-house-user { --fa: "\e1b0"; }
.fa-id-badge { --fa: "\f2c1"; }
.fa-id-card { --fa: "\f2c2"; }
.fa-landmark { --fa: "\f66f"; }
.fa-laptop { --fa: "\f109"; }
.fa-laptop-house { --fa: "\e066"; }
.fa-layer-group { --fa: "\f5fd"; }
.fa-map-marker-alt { --fa: "\f3c5"; }
.fa-list-alt { --fa: "\f022"; }
.fa-minus { --fa: "\f068"; }
.fa-money-bill-wave { --fa: "\f53a"; }
.fa-money-check-alt { --fa: "\f53d"; }
.fa-phone { --fa: "\f095"; }
.fa-plane { --fa: "\f072"; }
.fa-plane-departure { --fa: "\f5b0"; }
.fa-plus { --fa: "\2b"; }
.fa-question-circle { --fa: "\f059"; }
.fa-receipt { --fa: "\f543"; }
.fa-school { --fa: "\f549"; }
.fa-share-square { --fa: "\f14d"; }
.fa-shield-alt { --fa: "\f3ed"; }
.fa-sitemap { --fa: "\f0e8"; }
.fa-star-half-alt { --fa: "\f5c0"; }
.fa-suitcase-rolling { --fa: "\f5c1"; }
.fa-table { --fa: "\f0ce"; }
.fa-tasks { --fa: "\f0ae"; }
.fa-user-check { --fa: "\f4fc"; }
.fa-user-friends { --fa: "\f500"; }
.fa-user-graduate { --fa: "\f501"; }
.fa-users { --fa: "\f0c0"; }
.fa-university { --fa: "\f19c"; }
.fa-wallet { --fa: "\f555"; }


/* ╔════════════════════════════════════════════════════════════════════════════╗
   ║  PARTE 2 — DESIGN SYSTEM BASE                                           ║
   ║  Tokens, layout, componentes compartilhados por todas as telas.          ║
   ╚════════════════════════════════════════════════════════════════════════════╝ */

/* --------------------------------------------------------------------------
   1. Base
   -------------------------------------------------------------------------- */
body {
    margin: 0;
    background-color: #ffffff;
    color: var(--sg-azul-800);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Escala do root: todo font-size do design system está em rem, então esta é
   a única alavanca da fonte ampliada (1.21 = 120% duas casas para o texto
   não 'quebrar' de volta em 100% em algum arredondamento). Com root 16px o
   documento renderiza idêntico ao px original. */
html {
    font-size: 100%;
}
html.fonte-ampliada {
    font-size: 121%;
}

/* --------------------------------------------------------------------------
   1.1 Tokens de cor — paleta azul do portal, validada WCAG 2.1 AA
   --------------------------------------------------------------------------
   O azul principal é --sg-azul-700 (#174195): os outros tons da rampa saem
   dele por mistura fixa com branco (tons claros) e com preto (tons escuros).

   Para trocar a paleta por outro azul:
     1. `python3 temp/paleta.py --azul <hex>` imprime a rampa pronta (calibrada
        para os pares WCAG fecharem) e avisa se o azul não serve como frente;
     2. substitua os valores --sg-azul-* abaixo pelo que ele imprimir;
     3. `python3 temp/paleta.py --confere-css` (guarda), `python3 check_contraste.py`
        (portão WCAG) e `python3 build_wp.py` — o WP/assets/styles.css é cópia
        byte a byte deste arquivo.

   Mínimos atendidos: texto normal 4.5:1 · texto grande 3:1 · componentes de
   UI, bordas de controle e anel de foco 3:1 (1.4.11). Os pares estão no
   check_contraste.py.
   -------------------------------------------------------------------------- */
:root {
    /* rampa azul — número maior = mais escuro */
    --sg-azul-900:     #0a1d43;  /* 16.54:1 sobre #fff — nav, skip link, títulos   */
    --sg-azul-800:     #112f6b;  /* 12.78:1 — texto corrido, fundo dos botões      */
    --sg-azul-700:     #174195;  /*  9.43:1 — AZUL PRINCIPAL: links, foco, ícones  */
    --sg-azul-600:     #4567aa;  /*  5.56:1 — texto de apoio, descrições           */
    --sg-azul-500:     #5d7ab5;  /*  4.27:1 — bordas de controle e barras (1.4.11) */
    --sg-azul-300:     #a2b3d5;  /*  2.11:1 sobre #fff — texto no fundo escuro da nav */
    --sg-azul-200:     #d5ddec;  /* decorativa — borda de card, fundo do btn Limpar   */
    --sg-azul-100:     #eaeef5;  /* fundo de botões e da barra de acessibilidade   */
    --sg-azul-50:      #f3f6fa;  /* fundo suave do portal                          */

    /* papéis usados pelos componentes — apelidos da rampa acima */
    --sg-texto:        var(--sg-azul-800);
    --sg-texto-forte:  var(--sg-azul-900);
    --sg-texto-suave:  var(--sg-azul-600);
    --sg-borda-ui:     var(--sg-azul-500);
    --sg-borda-decor:  var(--sg-azul-200);
    --sg-foco:         var(--sg-azul-700);
    --sg-fundo-suave:  var(--sg-azul-50);
}

/* --------------------------------------------------------------------------
   1.2 Skip link — WCAG 2.4.1 Bypass Blocks
   -------------------------------------------------------------------------- */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    background-color: var(--sg-azul-900);
    color: #ffffff;
    padding: 12px 18px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 6px 0;
}
.skip-link:focus {
    left: 0;
}

/* --------------------------------------------------------------------------
   1.3 Foco visível — WCAG 2.4.7 / 1.4.11 (contraste mínimo 3:1)
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 3px solid var(--sg-foco);
    outline-offset: 2px;
    border-radius: 4px;
}
.site-nav a:focus-visible {
    outline-color: #ffffff;
}
body.alto-contraste a:focus-visible,
body.alto-contraste button:focus-visible,
body.alto-contraste input:focus-visible,
body.alto-contraste select:focus-visible {
    outline-color: #ffff00;
}

/* --------------------------------------------------------------------------
   1.4 Barra de acessibilidade
   -------------------------------------------------------------------------- */
.a11y-bar {
    background-color: var(--sg-azul-100);
    border-bottom: 1px solid var(--sg-borda-ui);
}
.a11y-bar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
}
.a11y-simbolo {
    font-size: 1.0625rem;
    line-height: 1;
    color: var(--sg-azul-900);
    margin-right: 2px;
}
.a11y-bar .a11y-acao {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 0 12px;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--sg-azul-700);
    background-color: #ffffff;
    border: 1px solid var(--sg-borda-ui);
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease, color .2s ease;
}
.a11y-bar .a11y-acao:hover {
    background-color: var(--sg-azul-200);
    color: var(--sg-azul-900);
}
.a11y-bar .a11y-acao[aria-pressed="true"] {
    background-color: var(--sg-azul-900);
    color: #ffffff;
    border-color: var(--sg-azul-900);
}
.a11y-bar .a11y-acao[aria-pressed="true"]::after {
    content: "ligado";
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .85;
}
.a11y-mapa {
    margin-left: auto;
}
body.alto-contraste .a11y-bar {
    background-color: #000000;
    border-color: #ffff00;
}
body.alto-contraste .a11y-bar .a11y-acao,
body.alto-contraste .a11y-simbolo {
    background-color: #000000;
    color: #ffff00;
    border-color: #ffff00;
}
body.alto-contraste .a11y-bar .a11y-acao[aria-pressed="true"] {
    background-color: #ffff00;
    color: #000000;
}

/* --------------------------------------------------------------------------
   2. Barra de navegação do site
   -------------------------------------------------------------------------- */
.site-nav {
    background-color: var(--sg-azul-900);
}
.site-nav-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 15px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}
.site-nav .brand {
    color: #ffffff;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    margin-right: 16px;
    white-space: nowrap;
}
.site-nav .nav-link {
    color: var(--sg-azul-300);
    text-decoration: none;
    font-size: 0.8125rem;
    padding: 6px 10px;
    border-radius: 5px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.site-nav .nav-link:hover {
    background-color: var(--sg-azul-800);
    color: #ffffff;
}
.site-nav .nav-link[aria-current="page"] {
    background-color: var(--sg-azul-700);
    color: #ffffff;
}

/* --------------------------------------------------------------------------
   3. Breadcrumb
   -------------------------------------------------------------------------- */
.site-breadcrumb {
    background-color: var(--sg-azul-50);
    border-bottom: 1px solid var(--sg-azul-200);
}
.site-breadcrumb ol {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 15px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8125rem;
    color: var(--sg-azul-600);
}
.site-breadcrumb a {
    color: var(--sg-azul-700);
    text-decoration: none;
}
.site-breadcrumb a:hover {
    text-decoration: underline;
}
.site-breadcrumb li + li::before {
    content: "\203A";
    margin-right: 8px;
    color: var(--sg-borda-ui);
}
.site-breadcrumb [aria-current="page"] {
    color: var(--sg-azul-900);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   4. Rodapé
   -------------------------------------------------------------------------- */
.site-footer {
    border-top: 1px solid var(--sg-azul-200);
    margin-top: 40px;
    background-color: var(--sg-azul-50);
}
.site-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 15px;
    font-size: 0.8125rem;
    color: var(--sg-azul-600);
}

/* --------------------------------------------------------------------------
   5. Ocultação semântica para indexação de crawlers
   -------------------------------------------------------------------------- */
.serigy-crawler-meta {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Seção do par gatilho/seção do robô (serigyExecuteWaitSection serigyLoadSection).
   Tem de existir FORA do .serigy-crawler-meta — um placeholder dentro do bloco
   invisível nunca muda e o robô reporta TABLE_NOT_CHANGED após 30 s (regra v6
   do check_serigy.py). Fica recortada da tela, mas com caixa real (1×1), para o
   MutationObserver do crawler enxergar a mutação. */
.serigy-historico-secao {
    position: absolute !important;
    left: -9999px !important;
    top: 0 !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
}

/* --------------------------------------------------------------------------
   6. Container principal
   -------------------------------------------------------------------------- */
.serigy-main-wrapper,
.serigy-subpage-wrapper {
    padding: 30px 15px;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.serigy-main-wrapper *,
.serigy-subpage-wrapper * {
    box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   7. Cabeçalho do módulo / página
   -------------------------------------------------------------------------- */
.serigy-header-section {
    border-bottom: 2px solid var(--sg-azul-200);
    padding-bottom: 15px;
    margin-bottom: 25px;
}
.serigy-header-section h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sg-azul-900);
    margin: 0 0 6px 0;
}
.serigy-header-section p {
    font-size: 0.875rem;
    color: var(--sg-azul-600);
    margin: 0;
    line-height: 1.5;
}
/* Data de atualização do módulo — usada onde o schema do tipo não define
   dataUltimaAtualizacao (ex.: Ouvidoria, LGPD). Mesmo tom do parágrafo do header:
   var(--sg-azul-600) sobre #ffffff = 4.76:1, acima do piso WCAG AA de 4.5:1. */
.serigy-header-section .data-atualizacao {
    margin-top: 8px;
    font-size: 0.8125rem;
    color: var(--sg-azul-600);
}

/* --------------------------------------------------------------------------
   8. Formulário de filtros
   -------------------------------------------------------------------------- */
.serigy-filter-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    background-color: var(--sg-azul-50);
    padding: 20px;
    border-radius: 8px;
    border: 1px solid var(--sg-azul-200);
    margin-bottom: 30px;
    align-items: flex-end;
}
.serigy-filter-container .filter-control {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 220px;
}
.serigy-filter-container label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--sg-azul-700);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.serigy-filter-container input,
.serigy-filter-container select {
    height: 42px;
    width: 100%;
    border: 1px solid var(--sg-borda-ui);
    border-radius: 6px;
    padding: 0 12px;
    font-size: 0.875rem;
    font-family: inherit;
    background-color: #ffffff;
    color: var(--sg-azul-800);
    outline: none;
    transition: border-color 0.2s ease;
}
.serigy-filter-container select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 38px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23174195' stroke-width='2' stroke-linecap='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}
.serigy-filter-container input:focus,
.serigy-filter-container select:focus {
    border-color: var(--sg-foco);
}
body.alto-contraste .serigy-filter-container input,
body.alto-contraste .serigy-filter-container select {
    background-color: #000000;
    color: #ffff00;
    border-color: #ffff00;
}
body.alto-contraste .serigy-filter-container select {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23ffff00' stroke-width='2' stroke-linecap='round' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
}
.serigy-filter-container .filter-buttons {
    display: flex;
    gap: 8px;
}
.btn-limpar {
    background-color: var(--sg-azul-200);
    color: var(--sg-azul-700);
    border: 1px solid var(--sg-borda-ui);
    height: 42px;
    line-height: 40px;
    padding: 0 16px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-block;
    cursor: pointer;
    text-align: center;
}
.btn-limpar:hover {
    background-color: var(--sg-azul-300);
    color: var(--sg-azul-800);
}

/* --------------------------------------------------------------------------
   9. Grid de cards
   -------------------------------------------------------------------------- */
.serigy-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.serigy-card {
    background: #ffffff;
    border: 1px solid var(--sg-azul-200);
    border-radius: 8px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    box-shadow: 0 1px 3px rgba(10, 29, 67, 0.05);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.serigy-card:hover {
    transform: translateY(-4px);
    border-color: var(--sg-azul-300);
    box-shadow: 0 10px 20px rgba(10, 29, 67, 0.08);
}
.serigy-card .card-icon {
    font-size: 2rem;
    color: var(--sg-azul-700);
    margin-bottom: 15px;
}
.serigy-card .card-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--sg-azul-900);
    margin: 0 0 10px 0;
}
.serigy-card p {
    font-size: 0.84375rem;
    color: var(--sg-azul-600);
    line-height: 1.5;
    margin: 0 0 20px 0;
    flex-grow: 1;
}
.serigy-card .card-nota {
    /* Aviso curto dentro do card (ex.: exercício sem documentos publicados). Fica logo
       acima dos botões de ano: ao contrário da descrição, não cresce para empurrá-los.
       --sg-texto-suave sobre o branco do card = 5.56:1 (acima do piso de 4.5:1). */
    flex-grow: 0;
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--sg-texto-suave);
    margin: 0 0 12px 0;
}
.serigy-card .card-nota i {
    margin-right: 5px;
    font-size: 0.75rem;
}

/* --------------------------------------------------------------------------
   9.1 Botões de busca e de ano
   -------------------------------------------------------------------------- */
.btn-buscar {
    height: 42px;
    line-height: 40px;
    padding: 0 16px;
    border-radius: 6px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    background-color: var(--sg-azul-800);
    color: #ffffff;
    border: 1px solid var(--sg-azul-800);
    transition: all 0.2s ease;
}
.btn-buscar:hover {
    background-color: var(--sg-azul-700);
}
.ano-buttons {
    /* Grade 3+2 da série histórica: os 4 botões de ano + "Anos anteriores" (--wide)
       ocupando duas colunas. Consolidado aqui em 2026-09-11 — antes era um bloco        de estilo inline repetido no cabeçalho de 10 telas.*/
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    width: 100%;
    margin-top: auto;
}
.btn-ano--wide {
    grid-column: span 2;
}
.ano-buttons--2x2 {
    /* Série de 4 exercícios sem "Anos anteriores" (Resolução TCE nº 351/2023): 2x2 mantém a
       largura do botão das grades 3+2 — numa grade de 3 colunas o 4º botão ficaria sozinho. */
    grid-template-columns: repeat(2, 1fr);
}
.btn-ano {
    flex: 1;
    padding: 8px 0;
    background-color: var(--sg-azul-100);
    color: var(--sg-azul-800);
    text-decoration: none !important;
    font-size: 0.8125rem;
    font-weight: 600;
    text-align: center;
    border-radius: 6px;
    border: 1px solid var(--sg-borda-ui);
    transition: all 0.2s ease;
}
.btn-ano:hover {
    background-color: var(--sg-azul-800);
    color: #ffffff;
    border-color: var(--sg-azul-800);
}
.serigy-card .btn-acessar {
    width: 100%;
    padding: 10px 0;
    background-color: var(--sg-azul-100);
    color: var(--sg-azul-800);
    text-decoration: none !important;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 6px;
    border: 1px solid var(--sg-borda-ui);
    transition: all 0.2s ease;
    display: inline-block;
}
.serigy-card .btn-acessar:hover {
    background-color: var(--sg-azul-800);
    color: #ffffff;
    border-color: var(--sg-azul-800);
}
body.alto-contraste .btn-buscar,
body.alto-contraste .btn-ano,
body.alto-contraste .serigy-card .btn-acessar {
    background-color: #000000;
    color: #ffff00;
    border-color: #ffff00;
}

/* --------------------------------------------------------------------------
   9.15 Painel de destaque (dados de atendimento, identidade institucional)
   -------------------------------------------------------------------------- */
.serigy-info-highlight {
    background-color: var(--sg-fundo-suave);
    border: 1px solid var(--sg-borda-decor);
    border-left: 5px solid var(--sg-azul-800);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 30px;
}
.serigy-info-highlight h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--sg-texto-forte);
    margin: 0 0 12px 0;
}
.serigy-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
}
.serigy-info-item {
    font-size: 0.84375rem;
    color: var(--sg-azul-700);
    line-height: 1.5;
}
.serigy-info-item strong {
    color: var(--sg-texto-forte);
}
.serigy-info-item a {
    color: var(--sg-azul-700);
    text-decoration: underline;
}
body.alto-contraste .serigy-info-highlight {
    background-color: #000000;
    border-color: #ffff00;
}
body.alto-contraste .serigy-info-highlight h3,
body.alto-contraste .serigy-info-item strong {
    color: #ffffff;
}
body.alto-contraste .serigy-info-item,
body.alto-contraste .serigy-info-item a {
    color: #ffff00;
}

/* --------------------------------------------------------------------------
   9.3 Estado vazio
   -------------------------------------------------------------------------- */
.serigy-empty-state {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px;
    background-color: var(--sg-azul-50);
    border: 1px dashed var(--sg-borda-ui);
    border-radius: 8px;
    text-align: center;
    color: var(--sg-azul-600);
    font-size: 0.875rem;
}

/* --------------------------------------------------------------------------
   10. Acessibilidade — alto contraste e fonte ampliada
   -------------------------------------------------------------------------- */
/* A ampliação acontece pelo root (html.fonte-ampliada, acima) — não aqui.
   body.fonte-ampliada fica NEUTRO (1rem): a classe segue no body por
   compatibilidade com seletor/teste externo, mas se tivesse valor >1 o texto
   herdado (sem font-size próprio) levaria ampliação dupla — medido no
   navegador em 2026-09-14: span herdado foi a 1.21×1.21 antes deste ajuste. */
body.fonte-ampliada {
    font-size: 1rem;
}
body.alto-contraste {
    background-color: #000000;
    color: #ffffff;
}
body.alto-contraste .serigy-card,
body.alto-contraste .serigy-filter-container,
body.alto-contraste .serigy-empty-state,
body.alto-contraste .site-breadcrumb,
body.alto-contraste .site-footer {
    background-color: #000000;
    border-color: #ffffff;
}
body.alto-contraste .serigy-header-section h2,
body.alto-contraste .serigy-card .card-title,
body.alto-contraste .site-breadcrumb [aria-current="page"] {
    color: #ffffff;
}
body.alto-contraste .serigy-header-section p,
body.alto-contraste .serigy-card p,
body.alto-contraste .site-footer-inner,
body.alto-contraste .site-breadcrumb a {
    color: #ffff00;
}

/* --------------------------------------------------------------------------
   11. Responsivo (base)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .serigy-filter-container {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-control,
    .btn-limpar,
    .btn-buscar {
        width: 100%;
    }
}


/* ╔════════════════════════════════════════════════════════════════════════════╗
   ║  PARTE 3 — OUVIDORIA                                                    ║
   ║  Variante institucional do painel de destaque e blocos de texto longo.   ║
   ╚════════════════════════════════════════════════════════════════════════════╝ */

.serigy-info-highlight.institucional {
    border-left-color: var(--sg-azul-500);
    margin-bottom: 30px;
}
.serigy-info-highlight h3 {
    text-transform: uppercase;
}
.serigy-info-highlight h4 {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--sg-texto-forte);
    margin: 0 0 5px 0;
}
.serigy-info-text,
.serigy-info-list {
    font-size: 0.84375rem;
    color: var(--sg-azul-700);
    line-height: 1.5;
    margin-bottom: 15px;
}
.serigy-info-list {
    padding-left: 20px;
}
.serigy-info-grid.institucional {
    grid-template-columns: 1fr 1fr;
}
.serigy-atribuicoes {
    margin-top: 10px;
}
.serigy-info-list.colunas {
    column-count: 2;
    column-gap: 40px;
    margin-bottom: 0;
}
body.alto-contraste .serigy-info-highlight.institucional {
    border-left-color: #ffff00;
}
body.alto-contraste .serigy-info-highlight h4 {
    color: #ffffff;
}
body.alto-contraste .serigy-info-text,
body.alto-contraste .serigy-info-list {
    color: #ffff00;
}
@media (max-width: 768px) {
    .serigy-info-grid.institucional {
        grid-template-columns: 1fr;
    }
    .serigy-info-list.colunas {
        column-count: 1;
    }
}


/* ╔════════════════════════════════════════════════════════════════════════════╗
   ║  PARTE 4 — LGPD E GOVERNO DIGITAL                                      ║
   ║  Variante verde do painel de destaque e componente accordion.            ║
   ╚════════════════════════════════════════════════════════════════════════════╝ */

.serigy-info-highlight.lgpd {
    border-left-color: #059669;
}
.serigy-info-item + .serigy-info-item {
    margin-top: 10px;
}
.lgpd-accordion {
    border: 1px solid var(--sg-borda-decor);
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 30px;
}
.lgpd-accordion-titulo {
    margin: 0;
    font-size: inherit;
    font-weight: inherit;
}
.lgpd-accordion-header {
    width: 100%;
    background-color: var(--sg-fundo-suave);
    padding: 15px 20px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    color: var(--sg-azul-800);
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    border: 0;
    border-bottom: 1px solid var(--sg-borda-decor);
    transition: background-color 0.2s ease;
}
.lgpd-accordion-header:hover {
    background-color: var(--sg-azul-100);
}
.lgpd-accordion-header i {
    color: var(--sg-azul-700);
    flex-shrink: 0;
}
.lgpd-accordion-content {
    padding: 20px;
    background-color: #ffffff;
    font-size: 0.9375rem;
    color: var(--sg-azul-700);
    line-height: 1.6;
}
.lgpd-accordion-content[hidden] {
    display: none;
}
.lgpd-accordion-content p {
    margin: 0;
}
body.alto-contraste .lgpd-accordion,
body.alto-contraste .lgpd-accordion-header {
    background-color: #000000;
    border-color: #ffff00;
}
body.alto-contraste .lgpd-accordion-header,
body.alto-contraste .lgpd-accordion-header i,
body.alto-contraste .lgpd-accordion-content {
    color: #ffff00;
    background-color: #000000;
}
body.alto-contraste .serigy-info-highlight.lgpd {
    border-left-color: #ffff00;
}
@media (max-width: 768px) {
    .serigy-grid-container {
        grid-template-columns: 1fr;
    }
}


/* ╔════════════════════════════════════════════════════════════════════════════╗
   ║  PARTE 5 — PROFIN (dashboard financeiro)                                ║
   ║  Escopo isolado em .serigy-finance-demo.                                ║
   ╚════════════════════════════════════════════════════════════════════════════╝ */

.serigy-finance-demo {
    --sf-acento: var(--sg-azul-700);
    --sf-acento-suave: var(--sg-azul-50);
    --sf-acento-neg: #cf3b40;
    --sf-acento-neg-suave: #fff0f1;
    width: 100%;
    max-width: 1120px;
    margin: 0 auto;
    padding: 24px;
    color: var(--sg-texto-forte);
    background: var(--sg-fundo-suave);
    border-radius: 14px;
}
.serigy-finance-demo *,
.serigy-finance-demo *::before,
.serigy-finance-demo *::after {
    box-sizing: border-box;
}
.serigy-finance-demo h3,
.serigy-finance-demo h4,
.serigy-finance-demo p {
    margin-top: 0;
}
.sf-heading {
    margin: 0 0 18px;
}
.sf-heading h3 {
    margin-bottom: 5px;
    color: var(--sg-texto-forte);
    font-size: clamp(19px, 2vw, 22px);
    line-height: 1.2;
    letter-spacing: -.4px;
    font-weight: 700;
}
.sf-heading p {
    margin-bottom: 0;
    color: var(--sg-texto-suave);
    font-size: 0.875rem;
    line-height: 1.45;
}
.sf-meta {
    margin: 8px 0 0;
    color: var(--sg-texto-suave);
    font-size: 0.78125rem;
}
.sf-meta strong {
    color: var(--sg-texto-forte);
}
.sf-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}
.sf-finance-card {
    overflow: hidden;
    border: 1px solid var(--sg-borda-decor);
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(10, 29, 67, .045);
    transition: transform .2s ease, box-shadow .2s ease;
}
.sf-finance-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(10, 29, 67, .08);
}
.sf-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--sg-borda-decor);
}
.sf-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    height: 43px;
    border-radius: 10px;
    font-size: 1.1875rem;
    flex-shrink: 0;
}
.sf-card-icon.recebido {
    color: var(--sf-acento);
    background: var(--sf-acento-suave);
}
.sf-card-icon.executado {
    color: var(--sf-acento-neg);
    background: var(--sf-acento-neg-suave);
}
.sf-card-title {
    margin: 0;
    color: var(--sg-texto-forte);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -.15px;
}
.sf-card-description {
    margin: 3px 0 0;
    color: var(--sg-texto-suave);
    font-size: 0.75rem;
    line-height: 1.4;
}
.sf-card-rows {
    padding: 3px 20px 14px;
}
.sf-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 52px;
    border-bottom: 1px solid var(--sg-borda-decor);
}
.sf-card-row:last-child {
    border-bottom: 0;
}
.sf-card-row-current {
    min-height: 78px;
}
.sf-card-year {
    display: flex;
    align-items: center;
    gap: 7px;
    color: var(--sg-azul-700);
    font-size: 0.8125rem;
    font-weight: 600;
}
.sf-card-row-current .sf-card-year {
    color: var(--sf-acento);
    font-weight: 700;
}
.sf-card-value {
    color: var(--sg-texto);
    font-size: 0.875rem;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
}
.sf-card-row-current .sf-card-value {
    font-size: clamp(23px, 2.2vw, 29px);
    letter-spacing: -.7px;
}
.sf-finance-card.recebido .sf-card-row-current .sf-card-value {
    color: var(--sf-acento);
}
.sf-finance-card.executado .sf-card-row-current .sf-card-value {
    color: var(--sf-acento-neg);
}
.sf-partial-badge {
    display: inline-flex;
    align-items: center;
    min-height: 23px;
    padding: 0 8px;
    border-radius: 999px;
    color: var(--sf-acento);
    background: var(--sf-acento-suave);
    font-size: 0.625rem;
    font-weight: 700;
    line-height: 1;
}

/* PROFIN — Alto contraste */
body.alto-contraste .serigy-finance-demo,
body.alto-contraste .sf-finance-card,
body.alto-contraste .sf-card-icon {
    background: #000000;
    border-color: #ffff00;
}
body.alto-contraste .sf-heading h3,
body.alto-contraste .sf-card-title,
body.alto-contraste .sf-card-value,
body.alto-contraste .sf-meta strong {
    color: #ffffff;
}
body.alto-contraste .sf-heading p,
body.alto-contraste .sf-card-description,
body.alto-contraste .sf-card-year,
body.alto-contraste .sf-meta,
body.alto-contraste .sf-card-icon,
body.alto-contraste .sf-partial-badge,
body.alto-contraste .sf-card-row-current .sf-card-value {
    color: #ffff00;
    background-color: #000000;
}
body.alto-contraste .sf-card-header,
body.alto-contraste .sf-card-row {
    border-color: #ffff00;
}
body.alto-contraste .sf-finance-card.recebido .sf-card-row-current .sf-card-value {
    color: #ffffff;
}
body.alto-contraste .sf-finance-card.executado .sf-card-row-current .sf-card-value {
    color: #ffff00;
}

/* PROFIN — Responsivo */
@media (max-width: 720px) {
    .serigy-finance-demo {
        padding: 16px;
    }
    .sf-cards-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .sf-card-row-current .sf-card-value {
        font-size: 1.5625rem;
    }
}
@media (max-width: 420px) {
    .serigy-finance-demo {
        padding: 13px;
    }
    .sf-card-header,
    .sf-card-rows {
        padding-right: 15px;
        padding-left: 15px;
    }
    .sf-card-row {
        gap: 8px;
    }
    .sf-card-year {
        font-size: 0.75rem;
    }
    .sf-card-value {
        font-size: 0.8125rem;
    }
    .sf-card-row-current .sf-card-value {
        font-size: 1.3125rem;
    }
}