/* ============================================================
   PORTAL DA TRANSPARÊNCIA — PV SYNTEC
   Identidade visual: "ERÁRIO" — editorial cívico
   Papel creme · tinta · petróleo · ocre
   Fraunces (display) · Hanken Grotesk (dados) · Newsreader (notas)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;1,6..72,400&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    /* — Paleta editorial cívica — */
    --paper:        #F4EEE1;   /* papel creme — fundo */
    --paper-2:      #FBF7EE;   /* superfície clara — cards/tabelas */
    --paper-3:      #ECE4D2;   /* creme afundado — hovers, faixas */
    --ink:          #211C15;   /* tinta — texto principal */
    --ink-soft:     #5C5347;   /* tinta diluída — texto secundário */
    --ink-faint:    #8A7F6E;   /* legendas, meta */
    --line:         #D8CDB8;   /* fios/hairlines sobre creme */
    --line-strong:  #B7A98C;

    --petrol:       #14524E;   /* petróleo — voz institucional */
    --petrol-deep:  #0B3633;
    --petrol-soft:  #4C817C;
    --petrol-wash:  #DCE6E0;   /* lavado — estados ativos claros */

    --ochre:        #B5642B;   /* ocre queimado — acento agudo */
    --ochre-bright: #CE7E3D;
    --ochre-wash:   #F0E0CC;

    --pos:          #3F6B3A;   /* semânticos editoriais */
    --warn:         #A8702A;
    --neg:          #97362B;

    /* — Aliases legados (usados em centenas de estilos inline) —
       Remapeados para a nova paleta: a cascata reveste o portal todo. */
    --primary:      var(--petrol);
    --primary-light:var(--petrol-soft);
    --primary-dark: var(--petrol-deep);
    --secondary:    var(--petrol-soft);
    --accent:       var(--ochre);
    --background:   var(--paper);

    --azul:         var(--petrol);
    --azul-claro:   var(--petrol-wash);
    --azul-escuro:  var(--petrol-deep);

    --coral:        var(--ochre);
    --coral-light:  var(--ochre-bright);
    --coral-dark:   #8F4D20;
    --coral-gradient: linear-gradient(135deg, #B5642B 0%, #CE7E3D 100%);

    --branco:       #FCFAF4;
    --cinza-claro:  var(--paper-3);
    --cinza-medio:  var(--line);
    --cinza-escuro: var(--ink-soft);
    --texto:        var(--ink);
    --borda:        var(--line);

    --shadow-soft:  0 1px 2px rgba(33,28,21,0.04), 0 8px 28px -18px rgba(33,28,21,0.28);
    --serif:  'Fraunces', Georgia, 'Times New Roman', serif;
    --sans:   'Hanken Grotesk', -apple-system, sans-serif;
    --read:   'Newsreader', Georgia, serif;
}

/* ============================================================
   BASE
   ============================================================ */

body {
    font-family: var(--sans);
    background: var(--paper);
    color: var(--ink);
    line-height: 1.5;
    font-size: 15px;
    font-feature-settings: "ss01", "cv01";
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Grão de papel sutil + fio editorial no topo da página */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.04;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 4px;
    z-index: 200;
    background: linear-gradient(90deg, var(--petrol) 0%, var(--petrol) 62%, var(--ochre) 62%, var(--ochre) 100%);
}

::selection { background: var(--ochre); color: var(--branco); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--paper-3); }
::-webkit-scrollbar-thumb { background: var(--line-strong); border: 3px solid var(--paper-3); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--petrol-soft); }

a { color: var(--petrol); text-decoration: none; transition: color 0.18s; }
a:hover { color: var(--ochre); }

.main-container { width: 100%; flex: 1; display: flex; flex-direction: column; }

/* ============================================================
   MASTHEAD (cabeçalho editorial)
   ============================================================ */

.header, .header-top {
    background: var(--paper-2);
    color: var(--ink);
    border-bottom: 3px double var(--petrol);
    width: 100%;
    position: relative;
}

.header-topo, .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 30px;
    gap: 24px;
    max-width: 1640px;
    margin: 0 auto;
    width: 100%;
}

.header-logo, .logo {
    display: flex;
    align-items: center;
    gap: 15px;
}

/* Marca cívica em SVG no lugar do emoji 🏛️ */
.header-logo .icone, .logo-icon, .logo .icon {
    font-size: 0 !important;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Ccircle cx='24' cy='24' r='22' stroke='%2314524E' stroke-width='1.4'/%3E%3Cpath d='M9.5 19 L24 10.5 L38.5 19 Z' stroke='%2314524E' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12.5 19.5 V34 M19 19.5 V34 M29 19.5 V34 M35.5 19.5 V34' stroke='%2314524E' stroke-width='1.6'/%3E%3Cpath d='M9.5 34.5 H38.5' stroke='%2314524E' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M11 38 H37' stroke='%23B5642B' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.header-logo .texto h1, .logo-text h1, .logo h1 {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-size: 25px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1;
    color: var(--ink);
    margin-bottom: 4px;
}

.header-logo .texto p, .logo-text p, .logo p {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--petrol);
}

.header-ferramentas, .header-top .header-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.busca-header {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--line-strong);
    border-radius: 0;
    padding: 4px 2px;
    transition: border-color 0.2s;
}
.busca-header:focus-within { border-bottom-color: var(--ochre); }
.busca-header input {
    border: none; background: transparent;
    color: var(--ink); font-family: var(--sans);
    font-size: 13px; width: 190px; outline: none;
}
.busca-header input::placeholder { color: var(--ink-faint); font-style: italic; font-family: var(--read); }
.busca-header button { background: none; border: none; color: var(--petrol); cursor: pointer; font-size: 14px; line-height: 1; }
.busca-header button:hover { color: var(--ochre); }

/* Botões de acessibilidade — controles editoriais discretos */
.acessibilidade-btns { display: flex; align-items: center; gap: 6px; }
.acessibilidade-btns button, .theme-btn {
    background: transparent;
    border: 1px solid var(--line-strong);
    color: var(--ink-soft);
    padding: 6px 10px;
    border-radius: 2px;
    cursor: pointer;
    font-family: var(--sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: all 0.18s;
}
.acessibilidade-btns button:hover, .theme-btn:hover {
    background: var(--petrol);
    border-color: var(--petrol);
    color: var(--branco);
}

/* ============================================================
   LAYOUT
   ============================================================ */

.conteudo, .main-wrapper {
    width: 100%;
    max-width: 1640px;
    margin: 0 auto;
    padding: 34px 30px 50px;
    display: flex;
    gap: 42px;
    align-items: flex-start;
}

/* Páginas do template legado (folha/api/contato/dados-abertos):
   a navegação horizontal e o botão móvel são substituídos pelo
   menu lateral numerado — ocultos para evitar redundância. */
.header-nav, .mobile-menu-btn { display: none; }
.theme-switcher { display: flex; align-items: center; gap: 6px; }

/* ============================================================
   MENU LATERAL — índice editorial numerado
   ============================================================ */

.sidebar {
    width: 252px;
    flex-shrink: 0;
    position: sticky;
    top: 22px;
    align-self: flex-start;
    max-height: calc(100vh - 44px);
    overflow-y: auto;
    overflow-x: hidden;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: var(--line-strong); border: none; }

.sidebar-menu {
    background: transparent;
    border-top: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
    counter-reset: sec;
}

.sidebar-menu h3 {
    background: transparent;
    color: var(--ink);
    padding: 11px 4px 11px 0;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-bottom: 1px solid var(--line);
    transition: color 0.18s, padding-left 0.18s;
}
.sidebar-menu h3:not(.menu-direto)::before {
    counter-increment: sec;
    content: counter(sec, decimal-leading-zero);
    font-family: var(--serif);
    font-size: 12px;
    font-weight: 500;
    font-style: italic;
    color: var(--ochre);
    flex-shrink: 0;
    min-width: 20px;
}
.sidebar-menu h3:not(.menu-direto)::after {
    content: '+';
    margin-left: auto;
    font-size: 15px;
    font-weight: 400;
    color: var(--ink-faint);
    transition: transform 0.25s, color 0.18s;
    line-height: 1;
}
.sidebar-menu h3.open::after { content: '–'; color: var(--ochre); }
.sidebar-menu h3:hover { color: var(--petrol); padding-left: 3px; }
.sidebar-menu h3.open { color: var(--petrol); }

/* Início — link direto destacado no topo do índice */
.sidebar-menu h3.menu-direto {
    background: var(--petrol);
    color: var(--branco);
    padding: 12px 14px;
    margin-bottom: 4px;
    border-bottom: none;
    letter-spacing: 0.08em;
}
.sidebar-menu h3.menu-direto::after { content: '→'; color: var(--ochre-bright); }
.sidebar-menu h3.menu-direto:hover { background: var(--petrol-deep); color: var(--branco); padding-left: 14px; }
.sidebar-menu h3.menu-direto.ativo { box-shadow: inset 4px 0 0 var(--ochre); }

.sidebar-menu ul { list-style: none; padding: 3px 0 9px 30px; display: none; }
.sidebar-menu ul.show { display: block; animation: menuReveal 0.3s ease; }
@keyframes menuReveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }

.sidebar-menu a {
    display: block;
    padding: 5px 8px 5px 12px;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.35;
    border-left: 1.5px solid var(--line);
    transition: all 0.16s;
}
.sidebar-menu a::before { content: ''; }
.sidebar-menu a:hover {
    background: var(--paper-2);
    border-left-color: var(--ochre);
    color: var(--petrol);
    padding-left: 16px;
    text-decoration: none;
}
.sidebar-menu a.ativo {
    color: var(--petrol-deep);
    border-left: 2.5px solid var(--ochre);
    font-weight: 600;
    background: var(--petrol-wash);
}

/* ============================================================
   ÁREA PRINCIPAL
   ============================================================ */

.principal, .main-content { flex: 1; min-width: 0; }

.breadcrumb {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 18px;
    display: flex;
    gap: 8px;
    align-items: center;
}
.breadcrumb a { color: var(--petrol); }

.page-titulo, .page-title {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-size: clamp(30px, 4.4vw, 46px);
    font-weight: 600;
    letter-spacing: -0.022em;
    line-height: 1.02;
    color: var(--ink);
    margin-bottom: 26px;
    padding-bottom: 0;
    border-bottom: none;
    position: relative;
    padding-top: 16px;
}
/* Filete editorial acima do título */
.page-titulo::before, .page-title::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 64px; height: 3px;
    background: var(--ochre);
}

/* ============================================================
   AVISO DE ORIGEM DOS DADOS (estilo inline injetado por api.js;
   refinamos por atributo para preservar a semântica de cor)
   ============================================================ */
#aviso-origem-dados {
    font-family: var(--sans) !important;
    font-size: 13px !important;
    border-radius: 0 !important;
    padding: 12px 18px !important;
    border-left: 3px solid currentColor !important;
    letter-spacing: 0.01em;
}

/* ============================================================
   CARDS / KPIs
   ============================================================ */

.cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
    background: transparent;
    border: none;
    margin-bottom: 30px;
}

.card {
    background: var(--paper-2);
    border-radius: 0;
    padding: 22px 20px;
    box-shadow: none;
    border: 1px solid var(--line);
    border-top: 2px solid var(--petrol);
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    position: relative;
    transition: background 0.2s;
}
.card::before { content: none; }
.card:hover { transform: none; background: var(--paper-3); box-shadow: none; }
.card:hover::before { transform: none; }

/* Ícones emoji nos cards são suprimidos — tipografia conduz */
.card .icone { display: none; }

.card h3 {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-bottom: 10px;
    order: -1;
}
/* O "p" do KPI carrega o número de destaque */
.card p {
    font-family: var(--serif);
    font-optical-sizing: auto;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.05;
    color: var(--ink);
    margin-bottom: 0;
    font-feature-settings: "tnum";
}
.card .btn-card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 7px 16px;
    background: transparent;
    color: var(--petrol);
    border: 1px solid var(--petrol);
    border-radius: 2px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.04em;
    box-shadow: none;
    transition: all 0.2s;
}
.card .btn-card:hover {
    background: var(--petrol);
    color: var(--branco);
    transform: none;
    box-shadow: none;
    text-decoration: none;
}

/* ============================================================
   STAT-CARDS (folha e afins)
   ============================================================ */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    background: transparent;
    border: none;
    margin-bottom: 28px;
}
.stat-card {
    background: var(--paper-2);
    padding: 20px 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid var(--line);
    border-top: 2px solid var(--petrol);
}
.stat-icon { display: none; }
.stat-info h3 {
    font-family: var(--serif);
    font-size: 26px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.05;
    font-feature-settings: "tnum";
}
.stat-info p {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin-top: 4px;
}

.info-card {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--petrol);
    padding: 18px 22px;
    margin-bottom: 20px;
}

/* ============================================================
   CARDS AGRUPADOS (index)
   ============================================================ */
.grupos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-bottom: 28px; }
.grupo-box {
    background: transparent;
    border: none;
    border-top: 1.5px solid var(--ink);
    border-radius: 0;
    padding: 16px 0 0;
}
.grupo-box-titulo {
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--petrol);
    margin-bottom: 14px;
    padding-bottom: 0;
    border-bottom: none;
}
.grupo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.grupo-cards .card { margin: 0; padding: 16px; }
.grupo-cards .card h3 { font-size: 10.5px; margin-bottom: 6px; }
.grupo-cards .card p { font-family: var(--read); font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--ink-soft); margin-bottom: 0; }
.grupo-cards .card .btn-card { font-size: 11px; padding: 5px 12px; margin-top: 12px; }

/* ============================================================
   TABELAS DE DADOS (núcleo do portal)
   ============================================================ */
.tabela-wrapper {
    background: var(--paper-2);
    border: 1px solid var(--line);
    border-radius: 0;
    overflow: hidden;
    box-shadow: none;
    margin-bottom: 28px;
}
.tabela-wrapper > div { padding: 22px 24px; }
.tabela-wrapper h3 {
    font-family: var(--serif) !important;
    font-size: 19px !important;
    font-weight: 600;
    color: var(--ink) !important;
    letter-spacing: -0.01em;
}

.tabela { width: 100%; border-collapse: collapse; font-family: var(--sans); }
.tabela thead { background: var(--petrol); color: var(--branco); }
.tabela th {
    padding: 13px 16px;
    text-align: left;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--ochre);
}
.tabela td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 13.5px;
    color: var(--ink);
    font-feature-settings: "tnum";
    vertical-align: top;
}
.tabela tbody tr { transition: background 0.14s; }
.tabela tbody tr:nth-child(even) { background: rgba(216,205,184,0.16); }
.tabela tbody tr:hover { background: var(--petrol-wash); transform: none; box-shadow: inset 3px 0 0 var(--ochre); }
.tabela td strong, .tabela td b { font-weight: 600; color: var(--ink); }

/* ============================================================
   GRID PADRÃO — cabeçalhos ordenáveis + paginação (grid.js)
   ============================================================ */
.tabela th.th-ordenavel,
.table th.th-ordenavel {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 26px;
    transition: color 0.15s, background 0.15s;
}
.tabela th.th-ordenavel:hover,
.table th.th-ordenavel:hover { background: rgba(255,255,255,0.12); }
.tabela th.th-ordenavel:focus-visible,
.table th.th-ordenavel:focus-visible { outline: 2px solid var(--ochre); outline-offset: -2px; }
/* seta de ordenação — neutra (ambas) por padrão, destacada quando ativa */
.tabela th.th-ordenavel::after,
.table th.th-ordenavel::after {
    content: '⇅';
    position: absolute;
    right: 9px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    opacity: 0.4;
    font-weight: 400;
}
.tabela th.ord-asc::after,
.table th.ord-asc::after { content: '↑'; opacity: 1; color: var(--ochre-bright, #F2CC8F); }
.tabela th.ord-desc::after,
.table th.ord-desc::after { content: '↓'; opacity: 1; color: var(--ochre-bright, #F2CC8F); }

.grid-vazio, .grid-carregando { text-align: center; padding: 28px 16px !important; color: var(--ink-faint); font-style: italic; }

/* Larguras de coluna congeladas: estáveis ao ordenar/paginar */
.tabela.grid-fixo, .table.grid-fixo { table-layout: fixed; }
.tabela.grid-fixo th, .tabela.grid-fixo td,
.table.grid-fixo th, .table.grid-fixo td { word-break: break-word; overflow-wrap: anywhere; }

.grid-paginador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
    font-family: var(--sans);
}
.grid-info { font-size: 12px; color: var(--ink-soft); letter-spacing: 0.02em; }
.grid-info strong { color: var(--ink); font-weight: 700; }
.grid-paginas { display: flex; align-items: center; gap: 4px; }
.grid-pg, .grid-pg-nav {
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    border: 1px solid var(--line-strong);
    background: var(--paper-2);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.15s;
}
.grid-pg:hover:not(.ativo), .grid-pg-nav:hover:not([disabled]) {
    border-color: var(--petrol);
    color: var(--petrol);
}
.grid-pg.ativo {
    background: var(--petrol);
    border-color: var(--petrol);
    color: var(--branco);
    cursor: default;
}
.grid-pg-nav[disabled] { opacity: 0.4; cursor: not-allowed; }
.grid-pg-gap { padding: 0 4px; color: var(--ink-faint); font-size: 13px; }

/* Barra de filtro-padrão da grid (busca em todos os campos) */
.grid-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.grid-busca {
    flex: 1;
    min-width: 0;
    max-width: 420px;
    padding: 9px 14px 9px 34px;
    border: 1px solid var(--line-strong);
    border-radius: 7px;
    background: var(--paper-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23857a64' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.5' y2='16.5'/%3E%3C/svg%3E") no-repeat 11px center;
    font-family: var(--sans);
    font-size: 13.5px;
    color: var(--ink);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.grid-busca::placeholder { color: var(--ink-faint); }
.grid-busca:focus {
    outline: none;
    border-color: var(--petrol);
    box-shadow: 0 0 0 3px var(--petrol-wash);
}

/* Filtros estruturados (select / faixa de valor / período) */
.grid-filtros { flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; }
.grid-filtros .grid-busca { flex: 1 1 220px; max-width: 320px; }
.grid-filtro-campo { display: flex; flex-direction: column; gap: 4px; }
.grid-filtro-campo > label {
    font-family: var(--sans);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.grid-filtro-campo select,
.grid-filtro-campo .grid-num,
.grid-filtro-campo .grid-date {
    padding: 8px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: var(--paper-2);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 13px;
}
.grid-filtro-campo select { min-width: 150px; max-width: 230px; cursor: pointer; }
.grid-range { display: flex; gap: 6px; }
.grid-range .grid-num { width: 92px; }
.grid-range .grid-date { width: 140px; }
.grid-filtro-campo select:focus,
.grid-filtro-campo .grid-num:focus,
.grid-filtro-campo .grid-date:focus {
    outline: none;
    border-color: var(--petrol);
    box-shadow: 0 0 0 3px var(--petrol-wash);
}
.grid-limpar {
    align-self: flex-end;
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 6px;
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.grid-limpar:hover { border-color: var(--ochre); color: var(--ochre); }

/* Seletor de Exercício (ano de vigência) — no header/masthead.
   Casa com os controles de acessibilidade do header. */
.exercicio-header {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-right: 8px;
}
.exercicio-header label {
    font-family: var(--sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
.exercicio-header select {
    padding: 6px 10px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    background: transparent;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.exercicio-header select:hover {
    border-color: var(--petrol);
    color: var(--petrol);
}
.exercicio-header select option { color: var(--ink); background: var(--paper-2); }
.exercicio-header select:focus { outline: none; border-color: var(--ochre); }
body.alto-contraste .exercicio-header label,
body.alto-contraste .exercicio-header select { color: #FF0; border-color: #FF0; }
@media (max-width: 600px) { .exercicio-header label { display: none; } }

/* ============================================================
   FILTROS / FORM
   ============================================================ */
.filtros-bar, .filters { display: flex; gap: 12px; margin-bottom: 22px; flex-wrap: wrap; align-items: flex-end; }
.filter-group { display: flex; flex-direction: column; gap: 5px; }
.filter-group label, .modal-filtros-field label {
    font-family: var(--sans); font-size: 11px; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint);
}
.filtros-bar select, .filtros-bar input,
.filters select, .filters input,
.modal-filtros-field select, .modal-filtros-field input {
    padding: 9px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    font-family: var(--sans);
    font-size: 13px;
    background: var(--paper-2);
    color: var(--ink);
    transition: all 0.18s;
}
.filtros-bar select:focus, .filtros-bar input:focus,
.filters select:focus, .filters input:focus,
.modal-filtros-field select:focus, .modal-filtros-field input:focus {
    outline: none; border-color: var(--ochre);
    box-shadow: 0 0 0 3px var(--ochre-wash);
}
.filtros-bar input[type="text"] { min-width: 220px; flex-grow: 1; }

/* Botões */
.btn, .btn-primary, .btn-vibrant, .btn-filtros-avancados, .btn-limpar-filtros, .btn-sm {
    font-family: var(--sans);
    font-weight: 600;
    letter-spacing: 0.03em;
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.18s;
}
.btn-primary, .btn-vibrant {
    background: var(--petrol); color: var(--branco);
    border: 1px solid var(--petrol); padding: 9px 20px; box-shadow: none;
}
.btn-primary:hover, .btn-vibrant:hover { background: var(--petrol-deep); border-color: var(--petrol-deep); transform: none; box-shadow: none; }
.btn-sm { padding: 6px 13px; font-size: 12px; }
.btn-filtros-avancados {
    padding: 9px 15px; background: var(--paper-2);
    border: 1px solid var(--line-strong); color: var(--petrol);
    font-size: 13px; display: flex; align-items: center; gap: 8px;
}
.btn-filtros-avancados:hover { background: var(--petrol); color: var(--branco); border-color: var(--petrol); }
.btn-filtros-avancados::before { content: ''; }
.btn-filtros-avancados::after { content: '▾'; font-size: 10px; margin-left: auto; }
.btn-limpar-filtros {
    padding: 9px 15px; background: transparent;
    border: 1px solid var(--line-strong); color: var(--ink-soft); font-size: 13px;
}
.btn-limpar-filtros:hover { background: var(--paper-3); color: var(--ink); }

/* ============================================================
   BADGES
   ============================================================ */
.badge-vibrant, .badge-success, .badge-warning, .badge-danger, .badge-info, .emenda-badge {
    display: inline-flex; align-items: center;
    padding: 3px 11px; border-radius: 2px;
    font-family: var(--sans); font-size: 11px; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
    border: 1px solid currentColor;
}
.badge-success, .emenda-badge-success { background: transparent; color: var(--pos); }
.badge-warning { background: transparent; color: var(--warn); }
.badge-danger  { background: transparent; color: var(--neg); }
.badge-info    { background: transparent; color: var(--petrol); }

/* ============================================================
   TABS
   ============================================================ */
.tabs-container { margin-bottom: 24px; }
.tabs {
    display: flex; gap: 4px; background: transparent;
    padding: 0; border: none; border-bottom: 1.5px solid var(--line);
}
.tab-btn {
    padding: 11px 18px; background: transparent; border: none;
    border-bottom: 2.5px solid transparent; cursor: pointer;
    font-family: var(--sans); font-size: 12.5px; font-weight: 600;
    letter-spacing: 0.04em; color: var(--ink-soft); transition: all 0.18s; margin-bottom: -1.5px;
}
.tab-btn:hover { color: var(--petrol); }
.tab-btn.active { background: transparent; color: var(--petrol-deep); border-bottom-color: var(--ochre); font-weight: 700; }
.tab-content { display: none; }
.tab-content.active { display: block; }

/* ============================================================
   RODAPÉ — colofão
   ============================================================ */
.rodape, .footer {
    background: var(--petrol-deep);
    color: var(--paper);
    padding: 26px 30px;
    text-align: center;
    margin-top: auto;
    border-top: 4px solid var(--ochre);
    font-family: var(--sans);
    font-size: 12.5px;
    letter-spacing: 0.02em;
}
.rodape .main-container { max-width: 1640px; margin: 0 auto; }
.rodape a, .footer a { color: var(--ochre-bright); }

/* ============================================================
   ANIMAÇÕES DE ENTRADA
   ============================================================ */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeInUp 0.6s cubic-bezier(0.2,0.7,0.2,1) both; }
.principal > *, .main-content > * { animation: fadeInUp 0.55s cubic-bezier(0.2,0.7,0.2,1) both; }
.principal > .breadcrumb { animation-delay: 0.02s; }
.principal > .page-titulo, .main-content > .page-title { animation-delay: 0.06s; }
.principal > *:nth-child(3) { animation-delay: 0.12s; }
.principal > *:nth-child(4) { animation-delay: 0.18s; }
.principal > *:nth-child(5) { animation-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   DARK MODE — "edição noturna"
   Redefine os tokens; a cascata reveste todo o conteúdo inline.
   ============================================================ */
body.dark-mode {
    --paper:        #16120C;
    --paper-2:      #221C13;
    --paper-3:      #2C2417;
    --ink:          #EFE6D4;
    --ink-soft:     #BCB09A;
    --ink-faint:    #8E8470;
    --line:         #3A3225;
    --line-strong:  #564B38;

    --petrol:       #5FB3A6;
    --petrol-deep:  #8FD0C4;
    --petrol-soft:  #4C817C;
    --petrol-wash:  #2A352F;

    --ochre:        #D58C4E;
    --ochre-bright: #E6A268;
    --ochre-wash:   #382B1C;

    --pos:          #7FB872;
    --warn:         #D7A24E;
    --neg:          #D4796B;

    --azul:         #6FBBAE;
    --azul-claro:   #2A352F;
    --azul-escuro:  #9BD6CB;
    --coral:        #D58C4E;
    --coral-light:  #E6A268;
    --coral-dark:   #C2763A;
    --coral-gradient: linear-gradient(135deg, #C2763A 0%, #D58C4E 100%);
    --branco:       #16120C;
    --cinza-claro:  #2C2417;
    --cinza-medio:  #3A3225;
    --cinza-escuro: #BCB09A;
    --texto:        #EFE6D4;
    --borda:        #3A3225;
    --primary:      #5FB3A6;
    --primary-light:#4C817C;
    --primary-dark: #8FD0C4;
    --background:   #16120C;
}
body.dark-mode { background: var(--paper); color: var(--ink); }
/* A marca SVG precisa de traços claros no escuro */
body.dark-mode .header-logo .icone, body.dark-mode .logo-icon, body.dark-mode .logo .icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Ccircle cx='24' cy='24' r='22' stroke='%235FB3A6' stroke-width='1.4'/%3E%3Cpath d='M9.5 19 L24 10.5 L38.5 19 Z' stroke='%235FB3A6' stroke-width='1.6' stroke-linejoin='round'/%3E%3Cpath d='M12.5 19.5 V34 M19 19.5 V34 M29 19.5 V34 M35.5 19.5 V34' stroke='%235FB3A6' stroke-width='1.6'/%3E%3Cpath d='M9.5 34.5 H38.5' stroke='%235FB3A6' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M11 38 H37' stroke='%23D58C4E' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}
body.dark-mode .header, body.dark-mode .header-top { background: var(--paper-2); }
/* Pastéis e cores fixas no HTML — harmonizar no escuro */
body.dark-mode [style*="background:#f9f9f9"], body.dark-mode [style*="background: #f9f9f9"],
body.dark-mode [style*="background:#f5f5f5"], body.dark-mode [style*="background: #f5f5f5"],
body.dark-mode [style*="background:#fff"],   body.dark-mode [style*="background: #fff"],
body.dark-mode [style*="background:#e3f2fd"],body.dark-mode [style*="background: #e3f2fd"],
body.dark-mode [style*="background:#e0f2fe"],body.dark-mode [style*="background: #e0f2fe"],
body.dark-mode [style*="background:#f9fafb"],body.dark-mode [style*="background: #f9fafb"] {
    background: var(--paper-3) !important;
}
body.dark-mode [style*="color: #666"], body.dark-mode [style*="color:#666"],
body.dark-mode [style*="color: #1565c0"], body.dark-mode [style*="color:#1565c0"],
body.dark-mode [style*="color: #075985"], body.dark-mode [style*="color:#075985"] {
    color: var(--ink-soft) !important;
}
body.dark-mode [style*="color: green"] { color: var(--pos) !important; }
body.dark-mode [style*="color: orange"], body.dark-mode [style*="color:#F57C00"] { color: var(--warn) !important; }

/* ============================================================
   ALTO CONTRASTE (WCAG — preto/amarelo/azul)
   Redefine tokens p/ cascata + ajustes diretos.
   ============================================================ */
body.alto-contraste {
    background: #000; color: #FF0;
    --azul: #00F; --azul-claro: #FF0; --azul-escuro: #00F;
    --primary: #00F; --primary-light: #00F;
    --petrol: #00F; --petrol-deep: #00F; --petrol-wash: #FF0; --petrol-soft: #00F;
    --ochre: #00F; --ochre-bright: #00F; --ochre-wash: #FF0;
    --cinza-claro: #FF0; --cinza-medio: #000; --cinza-escuro: #000;
    --texto: #000; --borda: #00F; --line: #00F; --line-strong: #00F;
    --paper: #000; --paper-2: #FF0; --paper-3: #FF0; --background: #000;
    --ink: #000; --ink-soft: #000; --ink-faint: #000;
    --coral: #00F; --coral-gradient: linear-gradient(#00F,#00F);
}
body.alto-contraste .header, body.alto-contraste .header-top { background: #00F; border-bottom-color: #FF0; }
body.alto-contraste .header-logo .texto h1, body.alto-contraste .logo-text h1 { color: #FF0; }
body.alto-contraste .header-logo .texto p, body.alto-contraste .logo-text p { color: #FF0; }
body.alto-contraste .acessibilidade-btns button, body.alto-contraste .theme-btn { color: #FF0; border-color: #FF0; }
body.alto-contraste .busca-header input { color: #FF0; }
body.alto-contraste .busca-header { border-bottom-color: #FF0; }
body.alto-contraste .sidebar-menu { border-top-color: #FF0; }
body.alto-contraste .sidebar-menu h3 { color: #FF0; border-bottom-color: #00F; }
body.alto-contraste .sidebar-menu h3:not(.menu-direto)::before { color: #FF0; }
body.alto-contraste .sidebar-menu h3:not(.menu-direto)::after { color: #FF0; }
body.alto-contraste .sidebar-menu h3.menu-direto { background: #00F; color: #FF0; }
body.alto-contraste .sidebar-menu a { color: #FF0; border-left-color: #00F; }
body.alto-contraste .sidebar-menu a:hover { background: #00F; color: #FF0; }
body.alto-contraste .sidebar-menu a.ativo { background: #00F; color: #FF0; }
body.alto-contraste .page-titulo, body.alto-contraste .page-title { color: #FF0; }
body.alto-contraste .breadcrumb, body.alto-contraste .breadcrumb a { color: #FF0; }
body.alto-contraste .card, body.alto-contraste .stat-card, body.alto-contraste .tabela-wrapper,
body.alto-contraste .info-card { background: #FF0; border: 2px solid #00F; color: #000; }
body.alto-contraste .card h3, body.alto-contraste .card p,
body.alto-contraste .stat-info h3, body.alto-contraste .stat-info p,
body.alto-contraste .tabela td, body.alto-contraste .tabela-wrapper h3 { color: #000 !important; }
body.alto-contraste .card .btn-card { color: #00F; border-color: #00F; }
body.alto-contraste .card .btn-card:hover { background: #00F; color: #FF0; }
body.alto-contraste .tabela thead, body.alto-contraste .tabela th { background: #00F; color: #FF0; border-bottom-color: #FF0; }
body.alto-contraste .tabela td { border-bottom-color: #00F; }
body.alto-contraste .tabela tbody tr:nth-child(even) { background: #FFF; }
body.alto-contraste .tabela tbody tr:hover { background: #FFF; box-shadow: inset 3px 0 0 #00F; }
body.alto-contraste .tabela th.th-ordenavel::after,
body.alto-contraste .tabela th.ord-asc::after,
body.alto-contraste .tabela th.ord-desc::after { color: #FF0; opacity: 1; }
body.alto-contraste .tabela th.th-ordenavel:hover { background: rgba(255,255,0,0.18); }
body.alto-contraste .grid-paginador { border-top-color: #00F; }
body.alto-contraste .grid-info, body.alto-contraste .grid-info strong { color: #FF0; }
body.alto-contraste .grupo-box { border-top-color: #FF0; }
body.alto-contraste .grupo-box-titulo { color: #FF0; }
body.alto-contraste .grupo-cards { background: #00F; border-color: #00F; }
body.alto-contraste a { color: #00F; }
body.alto-contraste .rodape, body.alto-contraste .footer { background: #00F; color: #FF0; border-top-color: #FF0; }
body.alto-contraste .tab-btn { color: #000; }
body.alto-contraste .tab-btn.active { color: #00F; border-bottom-color: #00F; }

/* Vitrine editorial (home) em alto contraste */
body.alto-contraste .home-title,
body.alto-contraste .home-title em,
body.alto-contraste .home-kicker,
body.alto-contraste .home-lead,
body.alto-contraste .home-meta,
body.alto-contraste .home-meta strong,
body.alto-contraste .home-section-title,
body.alto-contraste .home-section-title .sec-mark { color: #FF0; }
body.alto-contraste .home-hero { border-bottom-color: #FF0; }
body.alto-contraste .home-section-title { border-bottom-color: #FF0; }
body.alto-contraste .home-grid { background: #00F; border-color: #00F; }
body.alto-contraste .home-card { background: #FF0; }
body.alto-contraste .home-card-name,
body.alto-contraste .home-card.is-star .home-card-name,
body.alto-contraste .home-card-desc,
body.alto-contraste .home-card-num { color: #000; }
body.alto-contraste .home-card-go { color: #00F; }

/* Dark mode — a marca e bordas da home herdam tokens; reforça o grid */
body.dark-mode .home-grid { background: var(--line); border-color: var(--line); }

/* ============================================================
   MODAL DE FILTROS
   ============================================================ */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(11,54,51,0.55);
    display: none; justify-content: center; align-items: center; z-index: 1000;
    animation: fadeIn 0.2s ease;
}
.modal-overlay.active { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-filtros {
    background: var(--paper-2); border: 1px solid var(--line-strong);
    border-top: 4px solid var(--ochre);
    border-radius: 2px; width: 90%; max-width: 600px; max-height: 85vh;
    overflow-y: auto; box-shadow: 0 30px 80px -20px rgba(11,54,51,0.5);
    animation: slideUp 0.3s ease;
}
@keyframes slideUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.modal-filtros-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 20px 24px; border-bottom: 1px solid var(--line); background: var(--paper-3);
}
.modal-filtros-header h3 { font-family: var(--serif); font-size: 20px; font-weight: 600; color: var(--ink); }
.modal-filtros-close { background: none; border: none; font-size: 24px; color: var(--ink-soft); cursor: pointer; line-height: 1; }
.modal-filtros-close:hover { color: var(--ochre); }
.modal-filtros-body { padding: 24px; }
.modal-filtros-section { margin-bottom: 24px; }
.modal-filtros-section:last-child { margin-bottom: 0; }
.modal-filtros-section-title {
    font-family: var(--sans); font-size: 11px; font-weight: 700; text-transform: uppercase;
    color: var(--petrol); margin-bottom: 12px; letter-spacing: 0.1em;
}
.modal-filtros-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.modal-filtros-field { display: flex; flex-direction: column; gap: 6px; }
.modal-filtros-footer {
    display: flex; justify-content: flex-end; gap: 12px; padding: 16px 24px;
    border-top: 1px solid var(--line); background: var(--paper-3);
}
.modal-filtros-footer button { padding: 9px 20px; border-radius: 2px; font-family: var(--sans); font-size: 13px; font-weight: 600; cursor: pointer; }
.modal-filtros-btn-cancel { background: transparent; border: 1px solid var(--line-strong); color: var(--ink-soft); }
.modal-filtros-btn-cancel:hover { background: var(--paper-3); }
.modal-filtros-btn-apply { background: var(--petrol); border: 1px solid var(--petrol); color: var(--branco); }
.modal-filtros-btn-apply:hover { background: var(--petrol-deep); }
.filtros-ativos-badge {
    display: inline-flex; align-items: center; padding: 3px 10px;
    background: var(--ochre); color: var(--branco); border-radius: 2px;
    font-size: 11px; font-weight: 700; margin-left: 8px; text-transform: uppercase; letter-spacing: 0.05em;
}
.filtros-ativos-badge::before { content: '×'; margin-right: 5px; cursor: pointer; }
body.dark-mode .modal-filtros-field select, body.dark-mode .modal-filtros-field input { background: var(--paper-3); color: var(--ink); border-color: var(--line-strong); }

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width: 1000px) {
    .conteudo { flex-direction: column; gap: 28px; padding: 24px 20px 40px; }
    .sidebar { width: 100%; position: static; max-height: none; }
    .grupos-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 640px) {
    .header-topo, .header-top { flex-direction: column; align-items: flex-start; gap: 14px; padding: 14px 18px; }
    .header-ferramentas { flex-wrap: wrap; }
    .busca-header input { width: 140px; }
    .cards-container { grid-template-columns: 1fr; }
    .grupo-cards { grid-template-columns: 1fr; }
    .tabela { font-size: 12px; }
    .tabela th, .tabela td { padding: 9px 11px; }
    .page-titulo, .page-title { font-size: 30px; }
}