:root {
      --tp-verde:        #006B3C;   /* verde oficial da bandeira do Piauí */
      --tp-verde-claro:  #00954A;   /* verde mais vibrante para gradientes  */
      --tp-verde-escuro: #004D2B;   /* verde escuro para hover/destaques    */
      --tp-ouro:         #C9A227;   /* ouro do brasão de armas do Piauí     */
      --tp-ouro-claro:   #F0D070;   /* ouro claro para acentos suaves       */
      --tp-azul:         #1565c0;
      --tp-cinza:        #f8f9fa;
      --tp-texto:        #1a2e1a;   /* texto ligeiramente esverdeado        */
      /* cores de TEXTO que adaptam ao tema (acessibilidade/contraste) */
      --tp-verde-texto:   #006B3C;  /* verde p/ texto — vira claro no dark   */
      --tp-laranja-texto: #b45309;  /* laranja p/ texto — idem               */
    }
    /* No tema escuro, o verde/laranja de TEXTO ficam claros (contraste AA) */
    [data-theme="dark"] {
      --tp-texto:         #d4dbd5;   /* texto neutro claro no escuro — evita
                                        "texto escuro em fundo escuro" (invisível) */
      --tp-verde-texto:   #4ade80;
      --tp-laranja-texto: #fb923c;
    }

    body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f4f7f5; color: var(--tp-texto); display: flex; flex-direction: column; min-height: 100vh; }
  main { flex: 1; }

    /* ===== <code>: o rosa do Bootstrap não conhece o tema =====
       O Bootstrap pinta todo <code> com --bs-code-color (#d63384), uma cor FIXA que
       ignora o data-theme. Medido no pixel do resultado (não na regra):

           #d63384 sobre o painel escuro  → 3,92:1   REPROVA
           #d63384 sobre o painel claro   → 4,16:1   REPROVA     (AA pede 4,5:1)

       Ou seja: não era "feio no escuro", era ilegível nos DOIS temas. Mesma família do
       bug da tabela branca — componente do Bootstrap com cor fixa que o tema não alcança.
       Passa a herdar o texto do tema (10,6:1 no escuro, 11,5:1 no claro), com um chip
       cinza translúcido que funciona sobre qualquer fundo.

       Vale para o site INTEIRO: são ~20 ocorrências (dívida, sanções, convênios,
       doações, receitas, prefeituras…) e nenhuma tinha regra. Quem já traz a própria
       classe (.codigo-email, .text-danger) continua mandando, por especificidade. */
    code { color: var(--tp-texto); background: rgba(128,128,128,.14);
           padding: .08em .34em; border-radius: 4px; font-size: .9em; }
    /* Dentro de <pre> o bloco já tem fundo próprio — chip sobre chip vira caixa dupla. */
    pre code { background: transparent; padding: 0; border-radius: 0; font-size: inherit; }

    /* ===== Layout admin: sidebar no DESKTOP; no mobile mantém a barra de cima ===== */
    .tp-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
    .tp-sidebar { display: none; }
    .tp-topbar { display: none; }
    .tp-brand { display:flex; align-items:center; gap:.55rem; padding:1rem 1.1rem; color:#fff; font-weight:700; font-size:1.02rem; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.12); }
    .tp-brand i { color: var(--tp-ouro-claro); font-size: 1.2rem; }
    .tp-brand .marca-b { color: var(--tp-ouro-claro); }
    .tp-nav { padding: .4rem 0 1.5rem; }
    .tp-nav-section { font-size:.64rem; text-transform:uppercase; letter-spacing:.09em; color:rgba(255,255,255,.45); padding:.85rem 1.15rem .25rem; font-weight:700; }
    .tp-nav-link { display:flex; align-items:center; gap:.65rem; padding:.48rem 1.15rem; color:rgba(255,255,255,.86); text-decoration:none; font-size:.85rem; border-left:3px solid transparent; transition:background .12s, border-color .12s; }
    .tp-nav-link i { font-size:1rem; width:1.15rem; text-align:center; opacity:.92; }
    .tp-nav-link:hover { background: rgba(255,255,255,.08); color:#fff; }
    .tp-nav-link.active { background: rgba(0,0,0,.20); color:#fff; border-left-color: var(--tp-ouro); font-weight:600; }
    .tp-topbar-title { flex:1; font-size:.78rem; color:rgba(255,255,255,.82); }
    .tp-topbar-title b { color: var(--tp-ouro-claro); }
    /* Chip neutro que adapta ao tema (cinza translúcido + texto que vira claro no dark) */
    .tp-chip { display:inline-block; background:rgba(0,0,0,.06); border:1px solid rgba(0,0,0,.15); color:#243524 !important; border-radius:6px; padding:.12rem .5rem; font-size:.73rem; font-weight:600; line-height:1.45; }
    [data-theme="dark"] .tp-chip { background:#2f3d33 !important; border-color:#46624f !important; color:#f1f5f1 !important; }
    [data-theme="dark"] .tp-chip * { color:#f1f5f1 !important; }
    .tp-chip-link { text-decoration:none; }
    .tp-chip-link:hover { filter:brightness(1.08); }
    /* Alternador segmentado (ex.: Salários Estado / ALEPI) — tema-aware */
    .tp-seg { display:inline-flex; border:1px solid rgba(128,128,128,.32); border-radius:9px; overflow:hidden; }
    .tp-seg a { padding:.42rem 1.15rem; font-size:.85rem; font-weight:600; text-decoration:none; color:var(--tp-texto); background:transparent; line-height:1.3; }
    .tp-seg a + a { border-left:1px solid rgba(128,128,128,.32); }
    .tp-seg a.active { background:var(--tp-verde); color:#fff; }
    .tp-seg a:not(.active):hover { background:rgba(128,128,128,.13); }
    /* × pra limpar a busca — só aparece quando o campo #buscaNome tem texto (CSS puro) */
    .tp-clear-x { display:none; position:absolute; right:.45rem; top:50%; transform:translateY(-50%); border:0; background:transparent; color:var(--tp-texto); opacity:.5; font-size:1.3rem; line-height:1; cursor:pointer; padding:0 .2rem; }
    .tp-clear-x:hover { opacity:.9; }
    #buscaNome:not(:placeholder-shown) ~ .tp-clear-x { display:block; }
    /* Selo de FONTE (include _fonte.html) — neutro/tema-aware; verde SÓ no link e no ícone */
    .tp-fonte { display:inline-flex; align-items:center; gap:.35rem; flex-wrap:wrap; font-size:.78rem; color:var(--tp-texto); padding:.22rem .6rem; border:1px solid rgba(0,0,0,.12); border-radius:6px; background:rgba(0,0,0,.03); line-height:1.5; }
    [data-theme="dark"] .tp-fonte { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.04); }
    .tp-fonte .bi-patch-check-fill { color:var(--tp-verde-texto); }
    .tp-fonte-label { font-weight:600; }
    .tp-fonte-link { color:var(--tp-verde-texto); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
    .tp-fonte-link:hover { filter:brightness(1.08); }
    .tp-fonte-obs { opacity:.7; }
    /* Gatilho "achou erro?" no selo de fonte + modal de reporte (tema-aware) */
    .tp-fonte-reporte { color:var(--tp-laranja-texto); text-decoration:underline; text-underline-offset:2px; cursor:pointer; background:none; border:none; padding:0; font-size:.78rem; font-weight:600; }
    .tp-fonte-reporte:hover { filter:brightness(1.1); }
    /* Reportar DENTRO do selo: o fundo do .tp-fonte derruba o laranja padrão pra 4,36:1,
       abaixo do mínimo AA (4,5) — medido no navegador, com o fundo COMPOSTO. Escurece só
       nessa combinação; solto na página o laranja padrão passa. No escuro já dá 7,29:1. */
    .tp-fonte .tp-fonte-reporte { color:#8a3f07; }
    [data-theme="dark"] .tp-fonte .tp-fonte-reporte { color:var(--tp-laranja-texto); }
    /* Reportar POR LINHA (include _reportar_item.html).
       UMA COR SÓ, sempre: a mesma laranja do Reportar do selo de fonte. Antes variava
       (cinza na linha comum, âmbar na marcada) e isso ensinava o olho a ler como ações
       diferentes o que é a MESMA ação. Quem sinaliza problema é o ícone de alerta ao
       lado do número do empenho — não a cor do "reportar". */
    .tp-reportar-item { color:var(--tp-laranja-texto); font-size:.68rem; text-decoration:none; white-space:nowrap; }
    .tp-reportar-item:hover { text-decoration:underline; text-underline-offset:2px; filter:brightness(1.1); }
    /* Ações secundárias da célula (dado bruto · reportar) numa linha só, separadas por
       ponto médio — 4 linhas empilhadas por célula viravam parede de texto em 30 linhas. */
    .tp-acoes-linha { display:flex; align-items:center; gap:.3rem; font-size:.68rem; line-height:1.2; margin-top:.15rem; }
    .tp-acoes-sep { opacity:.35; }
    .tp-bruto { color:var(--tp-texto); opacity:.5; text-decoration:none; white-space:nowrap; }
    .tp-bruto:hover { opacity:.9; text-decoration:underline; text-underline-offset:2px; }
    /* Grupos de despesa das diárias (diária de servidor × passagem/locomoção). GRID, não
       flex-wrap: com larguras de rótulo diferentes os cartões quebravam desalinhados.
       Sem fundo próprio — herda o neutro do .tabela-dados, então acompanha o tema; a
       borda usa cinza translúcido (funciona no claro e no escuro) e o verde fica só no
       link, nunca no valor. */
    .tp-grupos-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:.6rem; }
    .tp-grupo-card { border:1px solid rgba(128,128,128,.22); border-radius:8px; padding:.55rem .7rem; }
    .tp-grupo-card.tp-grupo-ativo { border-color:var(--tp-ouro); border-width:2px; padding:calc(.55rem - 1px) calc(.7rem - 1px); }
    .tp-grupo-rotulo { font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--tp-texto); opacity:.72; }
    .tp-grupo-valor { font-size:1.02rem; font-weight:700; color:var(--tp-texto); font-variant-numeric:tabular-nums; margin:.1rem 0; }
    .tp-grupo-meta { font-size:.7rem; color:var(--tp-texto); opacity:.62; }
    .tp-grupo-link { font-size:.72rem; color:var(--tp-verde-texto); text-decoration:none; display:inline-block; margin-top:.25rem; }
    .tp-grupo-link:hover { text-decoration:underline; text-underline-offset:2px; }
    /* Detalhamento de uma diária. Tudo em GRID e sem fundo próprio — herda o neutro do
       .tabela-dados e acompanha o tema. Verde só em link; os VALORES ficam na cor do
       texto, inclusive o "Pago". */
    .tp-det-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:.7rem 1rem; }
    .tp-det-rotulo { font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--tp-texto); opacity:.62; }
    .tp-det-valor { font-size:.9rem; font-weight:600; color:var(--tp-texto); }
    /* O SUBTÓPICO das três fases: recuado e com filete à esquerda, para o olho ler como
       detalhe DO beneficiário e não como bloco solto. */
    .tp-det-sub { border-left:3px solid var(--tp-ouro); padding:.6rem 0 .2rem .8rem; }
    .tp-det-sub-titulo { font-size:.82rem; font-weight:700; color:var(--tp-texto); margin-bottom:.5rem; }
    .tp-det-sub-fonte { font-size:.68rem; font-weight:400; opacity:.6; margin-left:.35rem; }
    .tp-fases-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(170px, 1fr)); gap:.6rem; }
    .tp-fase { border:1px solid rgba(128,128,128,.22); border-radius:8px; padding:.55rem .7rem; }
    .tp-fase-final { border-color:var(--tp-ouro); }
    .tp-fase-rotulo { font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--tp-texto); opacity:.72; }
    .tp-fase-valor { font-size:1.05rem; font-weight:700; color:var(--tp-texto); font-variant-numeric:tabular-nums; margin:.1rem 0; }
    .tp-fase-nota { font-size:.68rem; color:var(--tp-texto); opacity:.6; line-height:1.25; }
    .tp-det-legenda { font-size:.76rem; color:var(--tp-texto); opacity:.75; margin:.55rem 0 0; }
    .tp-det-prova { font-size:.78rem; color:var(--tp-texto); opacity:.85; margin-top:.5rem; line-height:1.45; }
    .tp-det-confere { color:var(--tp-verde-texto); font-weight:600; }
    .tp-det-diverge { color:var(--tp-laranja-texto); font-weight:600; }
    .tp-det-links { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem; margin-top:.7rem; font-size:.72rem; }
    .tp-det-links a { color:var(--tp-verde-texto); text-decoration:none; white-space:nowrap; }
    .tp-det-links a:hover { text-decoration:underline; text-underline-offset:2px; }
    /* "Conferir na fonte": os links de dado cru, fechados por padrão. <details> nativo —
       sem JS, sem requisição, e o leitor de tela anuncia como grupo expansível. */
    .tp-det-conferir { margin-top:.55rem; }
    .tp-det-conferir > summary { cursor:pointer; list-style:revert; font-size:.74rem;
      color:var(--tp-verde-texto); width:fit-content; }
    .tp-det-conferir > summary:hover { text-decoration:underline; text-underline-offset:2px; }
    .tp-det-conferir-corpo { font-size:.74rem; color:var(--tp-texto); opacity:.85; margin-top:.4rem; }
    .tp-det-conferir-corpo p { margin:0 0 .35rem; }
    .tp-det-conferir-corpo ul { margin:0; padding-left:1.1rem; }
    .tp-det-conferir-corpo li { margin-bottom:.3rem; line-height:1.45; }
    .tp-det-conferir-corpo a { color:var(--tp-verde-texto); text-decoration:none; }
    .tp-det-conferir-corpo a:hover { text-decoration:underline; text-underline-offset:2px; }
    /* Não existe marca de inconsistência POR LINHA: quando a repetição atinge 25 de 30
       linhas, o alerta em cada uma para de alertar e vira textura. A informação fica
       num lugar só — o bloco das duas somas lista quais empenhos se repetem —, e cada
       linha tem o link do empenho para o cidadão clicar e ver na fonte. */
    .tp-reporte .modal-content { background:#fff; color:var(--tp-texto); }
    [data-theme="dark"] .tp-reporte .modal-content { background:#1a211c; }
    .tp-reporte .modal-header, .tp-reporte .modal-footer { border-color:rgba(128,128,128,.22); }
    .tp-reporte .form-control { background:transparent; color:var(--tp-texto); border-color:rgba(128,128,128,.35); }
    .tp-reporte .form-control:focus { border-color:var(--tp-verde-texto); box-shadow:0 0 0 .2rem rgba(0,107,60,.15); }
    .tp-reporte .form-control::placeholder { color:var(--tp-texto); opacity:.45; }
    [data-theme="dark"] .tp-reporte .btn-close { filter:invert(1) grayscale(1) brightness(1.8); }
    .tp-honey { position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }
    @media (min-width: 992px) {
      .tp-topnav-mobile { display: none !important; }
      .tp-sidebar { display:flex; flex-direction:column; position:fixed; top:0; left:0; bottom:0; width:250px; background:var(--tp-verde); border-right:3px solid var(--tp-ouro); overflow-y:auto; z-index:1040; }
      .tp-main { margin-left: 250px; }
      .tp-topbar { display:flex; align-items:center; gap:.75rem; padding:.45rem 1.1rem; background:var(--tp-verde-escuro); border-bottom:2px solid var(--tp-ouro); position:sticky; top:0; z-index:1030; }
    }

    /* Navbar */
    .navbar-tp { background: var(--tp-verde); border-bottom: 3px solid var(--tp-ouro); padding: 0.5rem 0; }
    .navbar-tp .navbar-brand { font-weight: 700; font-size: 1rem; letter-spacing: .3px; white-space: nowrap; }
    .navbar-tp .nav-link {
      color: rgba(255,255,255,.85) !important;
      font-size: 0.78rem;
      padding: 0.38rem 0.4rem !important;
      display: flex;
      align-items: center;
      gap: 0.2rem;
      transition: all 0.2s;
      border-radius: 4px;
      white-space: nowrap;
    }
    /* No menu sanduíche (abaixo de xxl), os itens empilham com respiro */
    @media (max-width: 1399.98px) {
      .navbar-tp .navbar-collapse { margin-top: .4rem; }
      .navbar-tp .nav-link { padding: 0.55rem 0.5rem !important; }
      .navbar-tp .dropdown-menu { border: 0; box-shadow: none; padding-left: .5rem; }
    }
    .navbar-tp .nav-link:hover {
      color: #fff !important;
      background: rgba(0,0,0,.15);
    }
    .navbar-tp .nav-link.active {
      color: #fff !important;
      background: rgba(201,162,39,.3);
      border-bottom: none;
    }
    .navbar-tp .dropdown-menu {
      background: rgba(0, 75, 43, 0.95);
      border: none;
      border-top: 2px solid var(--tp-ouro);
      box-shadow: 0 4px 12px rgba(0,0,0,.3);
    }
    .navbar-tp .dropdown-item {
      color: rgba(255,255,255,.85);
      font-size: 0.9rem;
      padding: 0.6rem 1rem;
    }
    .navbar-tp .dropdown-item:hover {
      background: rgba(201,162,39,.2);
      color: #fff;
    }

    /* Breadcrumb */
    .breadcrumb-bar { background: #fff; border-bottom: 1px solid #dee2e6; padding: .5rem 0; font-size: .85rem; }

    /* Cards de resumo */
    .card-resumo {
      border: none;
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0,0,0,.07);
      transition: transform .15s;
      min-height: 140px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .card-resumo:hover { transform: translateY(-2px); }
    .card-resumo .card-icon { width: 48px; height: 48px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; }

    /* Tabela de dados */
    .tabela-dados { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.07); overflow: hidden; }
    /* O .table do Bootstrap NÃO conhece o data-theme do site: ele pinta CADA célula com
       --bs-table-bg (#fff), cobrindo o fundo do .tabela-dados. Resultado: no escuro a
       tabela continuava BRANCA com texto PRETO (fundo claro fixo — proibido). Deixando a
       célula TRANSPARENTE, o fundo do container aparece nos dois temas (#fff no claro,
       #1a211c no escuro). Idem no hover, que tem regra própria abaixo.
       Isto já existia escopado em .alepi-page; aqui vira regra GERAL (toda tabela).
       ATENÇÃO ao HOVER: o Bootstrap tem --bs-table-hover-color, que por padrão é PRETO
       (--bs-emphasis-color). Sem sobrescrever, passar o mouse na linha repintava o texto
       de PRETO — inclusive no escuro (preto no preto, ilegível). Herdar mantém a cor.

       19/07/2026: o seletor estava preso a `.tabela-dados` e o comentário mentia — a
       "regra GERAL" nunca alcançou tabela solta num .card. A de "Resumo por área" em
       /bancada-federal/<pk>/ ficava com célula rgb(255,255,255) no tema ESCURO (medido
       no navegador). Agora é `.table` mesmo, sem escopo. */
    .table {
      --bs-table-bg: transparent;
      --bs-table-hover-bg: transparent;
      --bs-table-hover-color: inherit;
      --bs-table-active-bg: transparent;
      --bs-table-active-color: inherit;
    }
    .tabela-dados table { margin: 0; width: 100%; }
    .tabela-dados thead th {
      background: #2d3d30;          /* barra ESCURA — o cabeçalho se destaca claramente */
      color: #eafff4;
      font-size: .8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .5px;
      border-bottom: 2px solid #1f2b22;
      white-space: nowrap;   /* cabeçalho nunca quebra no meio da palavra */
    }
    .tabela-dados tbody tr { min-height: 50px; }
    .tabela-dados tbody td {
      vertical-align: middle;
      overflow-wrap: break-word;  /* mantém a palavra inteira; só quebra token gigante (ex: URL) */
    }
    /* Nome de município em tabela nunca quebra no meio (catch-all p/ todas as páginas) */
    .tabela-dados a[href^="/municipios/"],
    .tabela-dados .municipio-nome { white-space: nowrap; }
    .tabela-dados tbody tr:hover { background: #f8fffe; }
    /* Tabela "toda em cores primárias": links na célula herdam a cor neutra
       do texto (sem azul/verde), só com sublinhado p/ indicar que clicam;
       o verde aparece apenas no hover. Badges e botões ficam de fora. */
    .tabela-dados tbody td a:not(.btn):not(.badge):not([class*="badge-"]) {
      color: inherit;
      text-decoration: underline;
      text-underline-offset: 2px;
    }
    .tabela-dados tbody td a:not(.btn):not(.badge):not([class*="badge-"]):hover {
      color: var(--tp-verde-texto);
    }
    /* Nome de município: PÍLULA com fundo próprio — traz o próprio contraste,
       legível em qualquer cor de célula (clara ou escura), impossível sumir. */
    .mun-link, .tabela-dados td a.mun-link, .tabela-dados td span.mun-link {
      display:inline-block; background:#e9efe9; color:#111 !important;
      border-radius:5px; padding:.12rem .5rem; font-weight:600;
      text-decoration:none; text-transform:uppercase;
    }
    [data-theme="dark"] .mun-link, [data-theme="dark"] .tabela-dados td a.mun-link, [data-theme="dark"] .tabela-dados td span.mun-link {
      background:#2f3d33; color:#ffffff !important;
    }
    .tabela-dados td a.mun-link:hover { background:#cfe3cf; }
    [data-theme="dark"] .tabela-dados td a.mun-link:hover { background:#3c5142; }
    /* Texto FORTE p/ dados de tabela: NÃO crava cor (branco some em fundo claro).
       Herda a cor da linha — a mesma do "objeto", que sempre contrasta com o
       fundo do tema — e só engrossa. Robusto em claro e escuro. */
    .tp-forte { font-weight:700 !important; }
    .tabela-dados td a.tp-forte:hover { color:var(--tp-verde-texto) !important; }
    /* Divisórias verticais entre colunas (mais harmonioso) */
    .tabela-dados td:not(:last-child) { border-right: 1px solid #eef1ee; }
    .tabela-dados thead th:not(:last-child) { border-right: 1px solid rgba(255,255,255,.12); }
    /* Moeda alinhada em coluna: R$ à esquerda, número à direita, empilhados */
    .cifra {
      display: flex;
      justify-content: space-between;
      gap: .6rem;
      font-variant-numeric: tabular-nums;   /* dígitos com largura igual */
    }
    .cifra-rs { opacity: .55; font-weight: 400; }
    .cifra-num { flex: 1; text-align: right; }

    /* Painel de filtros */
    .painel-filtros { background: #fff; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.07); padding: 1.25rem; }
    .painel-filtros .form-label { font-size: .82rem; font-weight: 600; color: #495057; margin-bottom: .3rem; }

    /* ===== Diretório dos 224 municípios (/municipios/) =====
       O que muda de card para card é o nome, dois números e dois links. Todo o resto —
       grade, sombra, hover, ícone, cor do selo — é IGUAL nos 224 e por isso mora aqui:
       na folha o navegador guarda uma vez; no HTML ele baixa e analisa 224 vezes.
       Medido em 10/08/2026: 537.752 → 139.692 bytes de HTML cru na mesma tela.

       A grade é CSS grid com as MESMAS quebras do Bootstrap que ela substitui
       (col-12 / sm-6 / md-4 / lg-3 = 1, 2, 3 e 4 colunas), gap .5rem como o `g-2`. */
    #grid-municipios { display: grid; grid-template-columns: 1fr; gap: .5rem; }
    @media (min-width: 576px) { #grid-municipios { grid-template-columns: repeat(2, 1fr); } }
    @media (min-width: 768px) { #grid-municipios { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 992px) { #grid-municipios { grid-template-columns: repeat(4, 1fr); } }

    /* ⚠️ O prefixo é `mcard-`, e não `mun-`, porque `.mun-link` JÁ EXISTE nesta folha:
       é a pílula de nome de município nas tabelas (linha ~291), com `text-transform:
       uppercase` e fundo próprio. A primeira versão desta grade usou `mun-link` e a
       tela saiu com TODO o card em CAIXA ALTA e um retângulo verde no lugar do texto.
       Nome de classe novo se confere na folha inteira antes de usar. */
    .mcard { border: 0; border-radius: 10px; padding: 1rem; box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
             transition: transform .15s, box-shadow .15s; }
    /* Era `onmouseover`/`onmouseout` inline em cada card (36,5 KB no HTML). */
    .mcard:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.12); }
    .mcard-link { display: block; position: relative; padding-right: 1.1rem; text-decoration: none; }
    /* Seta ">" do card: era um <i class="bi bi-chevron-right"> por card. */
    .mcard-link::after { content: "\f285"; font-family: bootstrap-icons; position: absolute;
                         right: 0; top: .15rem; font-size: .8rem; line-height: 1; color: #6c757d; }
    .mcard-nome { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                  color: var(--tp-verde-texto); font-weight: 600; font-size: .93rem; }
    .mcard-pop, .mcard-pib, .mcard-ibge { display: block; margin-top: .25rem; font-size: .875em; color: #6c757d; }
    .mcard-pop::before, .mcard-pib::before, .mcard-site::before, .mcard-cam::before {
      font-family: bootstrap-icons; margin-right: .25rem; vertical-align: -.125em;
    }
    .mcard-pop::before { content: "\f4d0"; }                    /* bi-people   */
    .mcard-pib::before { content: "\f3f2"; color: #198754; }    /* bi-graph-up */
    .mcard-ext { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .5rem; }
    /* Selos Site/Câmara: as duas classes carregam a forma do selo. Uma classe comum
       (`.mcard-b`) custaria 9 bytes × 434 selos no HTML para poupar 1 linha aqui. */
    .mcard-site, .mcard-cam { display: inline-block; padding: .35em .65em; border-radius: .375rem;
                              font-size: .7rem; font-weight: 500; line-height: 1; text-decoration: none; }
    .mcard-site { background: #d1fae5; color: #065f46; }
    .mcard-site::before { content: "\f3ef"; }                   /* bi-globe2   */
    .mcard-cam { background: #dbeafe; color: #1e40af; }
    .mcard-cam::before { content: "\f62e"; }                    /* bi-bank     */

    /* Badge de status licitação */
    .badge-aberta    { background: #d1fae5; color: #065f46; }
    .badge-homologada { background: #dbeafe; color: #1e40af; }
    .badge-fracassada { background: #fee2e2; color: #991b1b; }
    .badge-cancelada  { background: #f3f4f6; color: #374151; }
    .badge-suspensa   { background: #fef3c7; color: #92400e; }

    /* Valor monetário */
    .valor-monetario { font-variant-numeric: tabular-nums; white-space: nowrap; }

    /* Loading HTMX */
    .htmx-indicator { display: none; }
    .htmx-request .htmx-indicator { display: inline-block; }
    .htmx-request.htmx-indicator { display: inline-block; }

    /* PIX strip — Simples e funcional */
    .pix-strip {
      background: linear-gradient(135deg, #003d38 0%, #005f58 100%);
      border-top: 3px solid #32BCAD;
      padding: 2.5rem 0;
    }
    .pix-container { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
    .pix-card {
      display: flex;
      gap: 3rem;
      align-items: center;
      justify-content: center;
    }
    .pix-qrcode {
      background: #fff;
      border-radius: 16px;
      padding: 12px;
      box-shadow: 0 8px 24px rgba(0,0,0,.25);
      transition: all 0.25s ease;
      flex-shrink: 0;
    }
    .pix-qrcode:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 32px rgba(0,0,0,.35);
    }
    .pix-qrcode img {
      display: block;
      border-radius: 12px;
    }
    .pix-info {
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
      color: #fff;
    }
    .pix-title {
      font-size: 1.3rem;
      font-weight: 700;
      color: #fff;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }
    .pix-title i {
      color: #32BCAD;
      font-size: 1.5rem;
    }
    .pix-desc {
      font-size: 0.95rem;
      color: rgba(255,255,255,.85);
      margin: 0;
      line-height: 1.5;
    }
    .pix-chave-group {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }
    .pix-label {
      font-size: 0.75rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.5px;
      color: rgba(255,255,255,.6);
    }
    .pix-chave-copy {
      display: flex;
      gap: 0.75rem;
      align-items: center;
    }
    .pix-chave-display {
      flex: 1;
      background: rgba(255,255,255,.1);
      border: 1px solid rgba(50,188,173,.5);
      border-radius: 8px;
      padding: 0.75rem 1rem;
      font-family: 'Courier New', monospace;
      font-size: 0.9rem;
      color: #7fede5;
      font-weight: 600;
      user-select: all;
    }
    .btn-copy {
      background: #32BCAD;
      color: #fff;
      border: none;
      border-radius: 8px;
      padding: 0.75rem 1.2rem;
      font-weight: 600;
      font-size: 0.85rem;
      cursor: pointer;
      transition: all 0.25s ease;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }
    .btn-copy:hover {
      background: #2aa89d;
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(50,188,173,.4);
    }
    .btn-copy i { font-size: 0.9rem; }
    .pix-owner {
      font-size: 0.85rem;
      color: rgba(255,255,255,.7);
      margin: 0;
    }

    /* Footer */
    .footer-tp { background: var(--tp-verde-escuro); border-top: 3px solid var(--tp-ouro); color: rgba(255,255,255,.8); font-size: .82rem; padding: 1.5rem 0; }
    .footer-tp a { color: rgba(255,255,255,.7); text-decoration: none; }
    .footer-tp a:hover { color: var(--tp-ouro-claro); }
    .footer-tp .footer-badge { background: var(--tp-ouro); color: #1a2e1a; font-weight: 700; padding: .15rem .6rem; border-radius: 4px; font-size: .75rem; }
    /* Perfil no Instagram: pílula discreta, contraste alto sobre o verde do rodapé
       (o rodapé tem fundo próprio, não segue o tema claro/escuro). */
    .footer-tp .footer-social {
      display: inline-flex; align-items: center; gap: .4rem;
      margin-top: .6rem; padding: .3rem .7rem;
      border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
      color: #fff; font-weight: 600; font-size: .8rem; text-decoration: none;
    }
    .footer-tp .footer-social i { font-size: 1rem; }
    .footer-tp .footer-social:hover,
    .footer-tp .footer-social:focus-visible {
      color: var(--tp-ouro-claro); border-color: var(--tp-ouro);
      background: rgba(255,255,255,.07);
    }
    /* No mobile, os links do footer ficam 2 a 2 (grid de 2 colunas);
       ícone + nome juntos. O texto da LAI ocupa a linha inteira embaixo. */
    @media (max-width: 575.98px) {
      .footer-links { display: grid; grid-template-columns: 1fr 1fr; gap: .55rem .75rem; text-align: left; }
      .footer-links a { margin: 0 !important; white-space: nowrap; }
      .footer-links br { display: none; }
      .footer-links small { grid-column: 1 / -1; margin-top: .25rem; }
    }

    /* ── Dark mode ─────────────────────────────────────────────────── */
    [data-theme="dark"] body {
      background: #111714;
      color: #d4dbd5;
    }
    [data-theme="dark"] .breadcrumb-bar {
      background: #1a211c;
      border-color: #2d3d30;
      color: #a8b8aa;
    }
    [data-theme="dark"] .breadcrumb-item a { color: var(--tp-ouro-claro); }
    [data-theme="dark"] .breadcrumb-item.active { color: #a8b8aa; }
    [data-theme="dark"] .card-resumo {
      background: #1a211c;
      box-shadow: 0 2px 8px rgba(0,0,0,.4);
      color: #d4dbd5;
    }
    [data-theme="dark"] .card-resumo .text-muted { color: #8a9e8d !important; }
    [data-theme="dark"] .tabela-dados {
      background: #1a211c;
      box-shadow: 0 2px 8px rgba(0,0,0,.4);
    }
    [data-theme="dark"] .tabela-dados thead th {
      background: #243027;
      color: #eafff4;
      border-color: #1f2b22;
    }
    [data-theme="dark"] .tabela-dados tbody tr { color: #ffffff; }  /* BRANCO PURO no escuro — regra: tabela = preto/branco, nada de cinza */
    /* O Bootstrap pinta a COR da célula via --bs-table-color, que ganha do `color` do <tr>
       acima — sem isto o texto ficava PRETO no escuro. */
    /* Desescopado junto com `.table` lá em cima: deixar o FUNDO transparente sem soltar
       também a COR criaria texto PRETO sobre o card escuro — trocaria "branco no escuro"
       por "invisível no escuro", que é pior. As duas regras andam juntas. */
    [data-theme="dark"] .table {
      --bs-table-color: #ffffff;
      --bs-table-hover-color: #ffffff;   /* sem isto, o hover do Bootstrap volta pro PRETO */
      --bs-table-active-color: #ffffff;
    }
    [data-theme="dark"] .tabela-dados tbody tr:hover { background: #1f2b21; }
    [data-theme="dark"] .tabela-dados td, [data-theme="dark"] .tabela-dados th {
      border-color: #2d3d30;
    }
    [data-theme="dark"] .tabela-dados td:not(:last-child),
    [data-theme="dark"] .tabela-dados thead th:not(:last-child) { border-right-color: #2d3d30; }
    [data-theme="dark"] .painel-filtros {
      background: #1a211c;
      box-shadow: 0 2px 8px rgba(0,0,0,.4);
    }
    [data-theme="dark"] .painel-filtros .form-label { color: #a8b8aa; }
    [data-theme="dark"] .form-control,
    [data-theme="dark"] .form-select {
      background: #222d24;
      border-color: #3a4e3d;
      color: #d4dbd5;
    }
    [data-theme="dark"] .form-control:focus,
    [data-theme="dark"] .form-select:focus {
      background: #263029;
      border-color: var(--tp-verde-claro);
      color: #d4dbd5;
      box-shadow: 0 0 0 .2rem rgba(0,149,74,.25);
    }
    [data-theme="dark"] .form-control::placeholder { color: #6b7d6d; }
    [data-theme="dark"] .btn-outline-secondary {
      color: #a8b8aa;
      border-color: #3a4e3d;
    }
    [data-theme="dark"] .btn-outline-secondary:hover {
      background: #222d24;
      color: #d4dbd5;
    }
    [data-theme="dark"] .card {
      background: #1a211c;
      border-color: #2d3d30;
      color: #d4dbd5;
    }
    [data-theme="dark"] .text-muted { color: #8a9e8d !important; }
    [data-theme="dark"] .border { border-color: #2d3d30 !important; }
    [data-theme="dark"] .bg-white { background: #1a211c !important; }
    /* .bg-light (selos/pílulas cinza-claros) adapta ao escuro em TODO o site */
    [data-theme="dark"] .bg-light { background: #232b25 !important; border-color: #2d3d30 !important; }
    [data-theme="dark"] .bg-light.text-dark,
    [data-theme="dark"] .bg-light .text-dark { color: #cdd6cf !important; }
    [data-theme="dark"] .alert-info {
      background: #1a2b33;
      border-color: #2a4a5a;
      color: #8fcfe0;
    }

    /* ── Acessibilidade dark: cards de município (contraste WCAG AA) ── */
    /* O nome não precisa de regra: `.mun-nome` usa var(--tp-verde-texto), que já vira
       #4ade80 no escuro (9,5:1 sobre o #1a211c do card; o #006B3C do claro dava 2,48:1). */
    /* Valores (hab., PIB, IBGE) e a seta: muted mais claro p/ leitura confortável */
    [data-theme="dark"] .mcard-pop,
    [data-theme="dark"] .mcard-pib,
    [data-theme="dark"] .mcard-ibge { color: #b3c4b5; }
    [data-theme="dark"] .mcard-link::after { color: #8a9e8d; }
    /* Ícone verde do PIB visível no escuro */
    [data-theme="dark"] .mcard-pib::before { color: #4ade80; }
    /* Selos Site/Câmara: no claro são pílulas #d1fae5/#dbeafe. Cravadas assim, acendiam
       DUAS pílulas claras dentro do card escuro — o mesmo caso do selo de frescor abaixo.
       No escuro viram a mesma cor com transparência, que funciona sobre qualquer fundo. */
    [data-theme="dark"] .mcard-site { background: rgba(74,222,128,.14); color: #4ade80; }
    [data-theme="dark"] .mcard-cam  { background: rgba(147,197,253,.14); color: #93c5fd; }
    /* Selo de frescor ("Conferimos a fonte em...") — tema-aware de verdade.
       A versão antiga cravava background:#d1fae5 e acendia uma pílula CLARA no
       tema escuro. Aqui o fundo é o verde da marca com transparência, então
       funciona sobre claro e escuro sem cor fixa. */
    .selo-frescor { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; font-size:.82rem; }
    .selo-frescor-pill {
      display:inline-flex; align-items:center; padding:.2rem .55rem; border-radius:999px;
      background: rgba(0,107,60,.10);
      border: 1px solid rgba(0,107,60,.28);
      color: var(--tp-verde-texto);
      font-weight: 600; white-space: nowrap;
    }
    [data-theme="dark"] .selo-frescor-pill {
      background: rgba(74,222,128,.12);
      border-color: rgba(74,222,128,.30);
    }
    .selo-frescor-sub { color: var(--tp-texto); opacity:.75; font-size:.78rem; }
    /* Movimentação da folha (entrou/saiu) — marca na linha da tabela + filtro.
       ÂMBAR nos dois, de propósito: nada de verde-bom/vermelho-ruim. Sumir da folha
       NÃO é acusação (pode ser aposentadoria, transferência…), e entrar também não é
       escândalo. A cor sinaliza "olhe aqui", nunca julga. */
    .mov-filtro-ajuda { font-size:.76rem; color:var(--tp-texto); opacity:.75; line-height:1.5; margin-bottom:.5rem; }
    /* #92400e (não #b45309): sobre o próprio fundo âmbar da marca, o tom mais claro
       dava 4,26:1 no tema claro — reprova no WCAG AA por pouco. Medido, não chutado. */
    .mov-marca { display:inline-flex; align-items:center; gap:.2rem; padding:.05rem .35rem; border-radius:4px;
                 font-size:.68rem; font-weight:700; white-space:nowrap;
                 background:rgba(180,83,9,.12); color:#92400e; border:1px solid rgba(180,83,9,.30); }
    [data-theme="dark"] .mov-marca { background:rgba(251,191,36,.14); color:#fbbf24; border-color:rgba(251,191,36,.32); }
    .mov-marca-saiu { font-style:italic; }
    .mov-obs { font-size:.68rem; color:var(--tp-texto); opacity:.6; }
    /* Caixa de dica amarela vira tom escuro (não estoura a vista) */
    [data-theme="dark"] .dica-amarela {
      background: #221d0c !important;
      border-left-color: var(--tp-ouro-claro) !important;
    }
    [data-theme="dark"] .dica-amarela .dica-texto { color: #e6dcc0 !important; }
    [data-theme="dark"] .dica-amarela .dica-texto strong { color: #f0d070 !important; }
    /* Caixa de dica azul ("como usar") também adapta ao escuro */
    [data-theme="dark"] .dica-azul {
      background: #0e2230 !important;
      border-left-color: #60a5fa !important;
    }
    [data-theme="dark"] .dica-azul .dica-texto { color: #cfe3f5 !important; }
    [data-theme="dark"] .dica-azul .dica-texto strong { color: #93c5fd !important; }

    /* Blocos com fundo suave que ADAPTAM ao tema (nunca branco no escuro) */
    .bloco-suave { background: #f6f8f6; }
    [data-theme="dark"] .bloco-suave { background: #1f2620 !important; }
    .aviso-ambar { background: #fff7ed; border-left: 4px solid #f59e0b !important; }
    [data-theme="dark"] .aviso-ambar { background: #221d0c !important; border-left-color: var(--tp-ouro-claro) !important; }
    [data-theme="dark"] .aviso-ambar a { color: #f0d070; }
    /* Fundos claros fixos que não adaptavam (sensibilidade ao branco) */
    [data-theme="dark"] .input-group-text { background: #1a211c !important; border-color: #2d3d30 !important; color: #8a9e8d !important; }
    [data-theme="dark"] #mensagensContainer { background: #161c17 !important; border-color: #2d3d30 !important; }
    /* Caixas/ícones com tinta clara → tom escuro da mesma cor no tema escuro */
    [data-theme="dark"] .aviso-verde { background: #0f2419 !important; }
    [data-theme="dark"] .ic-verde   { background: #14352a !important; }
    [data-theme="dark"] .ic-azul    { background: #15263d !important; }
    [data-theme="dark"] .ic-ambar   { background: #352c12 !important; }

    /* Nomes de municípios sempre em maiúscula */
    .municipio-nome { text-transform: uppercase; }

    /* Ícone de ajuda — botão ⓘ ao lado de termos difíceis (toque no mobile) */
    /* display:inline (não inline-block) faz o nbsp "colar" o ícone na palavra
       de forma confiável, então ele nunca orfana numa linha sozinha. */
    .dica-info {
      display: inline;
      background: none;
      border: 0;
      padding: 0 .35rem;           /* área de toque horizontal */
      color: var(--tp-verde);
      opacity: .7;
      cursor: help;
      font-size: .92em;
      -webkit-tap-highlight-color: transparent;
      transition: opacity .15s, color .15s;
    }
    .dica-info:hover, .dica-info:focus { opacity: 1; color: var(--tp-verde-claro); outline: none; }
    .dica-info:active { transform: scale(.9); }
    [data-theme="dark"] .dica-info { color: #4ade80; }
    [data-theme="dark"] .dica-info:hover, [data-theme="dark"] .dica-info:focus { color: #6ee7b7; }

    /* Paginação — usa o verde da identidade (em vez do azul do Bootstrap) */
    .pagination { --bs-pagination-color: var(--tp-verde-texto);
                  --bs-pagination-hover-color: var(--tp-verde-texto);
                  --bs-pagination-focus-color: var(--tp-verde-texto);
                  --bs-pagination-active-bg: var(--tp-verde);
                  --bs-pagination-active-border-color: var(--tp-verde);
                  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(0,107,60,.25); }
    [data-theme="dark"] .pagination {
                  --bs-pagination-bg: #1a211c;
                  --bs-pagination-border-color: #2d3d30;
                  --bs-pagination-hover-bg: #1f2b21;
                  --bs-pagination-hover-border-color: #2d3d30;
                  --bs-pagination-disabled-bg: #161c17;
                  --bs-pagination-disabled-border-color: #2d3d30;
                  --bs-pagination-active-bg: var(--tp-verde);
                  --bs-pagination-active-border-color: var(--tp-verde);
                  --bs-pagination-active-color: #fff; }
    /* força a cor verde no texto dos links (sem depender do var() do Bootstrap) */
    .pagination .page-link { color: var(--tp-verde-texto); }
    .pagination .page-link:hover,
    .pagination .page-link:focus { color: var(--tp-verde-texto); }
    .pagination .page-item.active .page-link { color: #fff; background: var(--tp-verde); border-color: var(--tp-verde); }
    .pagination .page-item.disabled .page-link { color: #9aa79c; }
    [data-theme="dark"] .pagination .page-item.disabled .page-link { color: #5d6f60; }

    /* ⓘ fixo no canto superior direito do card — uniforme em todos */
    .dica-canto {
      position: absolute;
      top: .45rem;
      right: .55rem;
      padding: .15rem .25rem;
      z-index: 3;
      line-height: 1;
    }
    .card-resumo { position: relative; }   /* âncora p/ o ⓘ de canto */
    /* Tooltip mais largo e legível (importante no mobile) */
    .tooltip-inner { max-width: min(280px, 80vw); font-size: .82rem; text-align: left; line-height: 1.45; padding: .5rem .7rem; }

    /* Botão toggle */
    .btn-tema {
      background: transparent;
      border: 1px solid rgba(255,255,255,.3);
      color: rgba(255,255,255,.85);
      border-radius: 8px;
      padding: .25rem .6rem;
      font-size: 1rem;
      line-height: 1.4;
      cursor: pointer;
      transition: background .2s, border-color .2s;
    }
    .btn-tema:hover { background: rgba(255,255,255,.1); border-color: var(--tp-ouro); color: #fff; }

    /* Responsivo tablet/desktop médio */
    @media (max-width: 991px) {
      .navbar-tp { padding: 0.4rem 0; }
      .navbar-tp .nav-link {
        padding: 0.3rem 0.6rem !important;
        font-size: 0.85rem;
      }
      .navbar-tp .dropdown-item {
        font-size: 0.85rem;
        padding: 0.5rem 0.8rem;
      }
    }

    /* Responsivo tablet */
    @media (max-width: 1024px) {
      .pix-card {
        grid-template-columns: 1fr;
        gap: 3rem;
        justify-items: center;
      }
      .pix-info {
        align-items: center;
        text-align: center;
      }
      .pix-qr-wrap {
        order: -1;
      }
    }

    /* Responsivo mobile */
    @media (max-width: 768px) {
      .navbar-tp .navbar-brand { font-size: 0.9rem; }
      .navbar-tp { padding: 0.35rem 0; }
      .navbar-tp .nav-link {
        padding: 0.5rem 0 !important;
        margin: 0.25rem 0;
      }
      .navbar-tp .nav-link i { font-size: 1.3rem; }
      #navMenu { padding-top: 0.5rem; }

      .tabela-dados { border-radius: 0; }
      .tabela-dados table { font-size: .82rem; }
      .painel-filtros { border-radius: 0; margin: 0 -12px; }

      .pix-strip {
        padding: 1.5rem 0;
      }
      .pix-card {
        flex-direction: column;
        gap: 1.5rem;
      }
      .pix-qrcode {
        padding: 10px;
      }
      .pix-qrcode img {
        width: 140px;
        height: 140px;
      }
      .pix-info {
        width: 100%;
        text-align: center;
        align-items: center;
        gap: 1rem !important;
      }
      .pix-title {
        font-size: 1.1rem;
      }
      .pix-desc {
        font-size: 0.85rem;
      }
      .pix-chave-group {
        gap: 0.5rem !important;
      }
      .pix-label {
        font-size: 0.7rem;
      }
      .pix-chave-copy {
        flex-direction: column;
        gap: 0.75rem;
      }
      .pix-chave-display {
        font-size: 0.65rem;
        padding: 0.6rem 0.75rem;
        line-height: 1.4;
        word-break: break-all;
      }
      .btn-copy {
        width: 100%;
        justify-content: center;
        padding: 0.8rem;
        font-size: 0.9rem;
      }
      .btn-copy i {
        font-size: 0.95rem;
      }
    }

    /* Mobile pequeno (xs < 576px) */
    @media (max-width: 575px) {
      .pix-strip {
        padding: 1.25rem 0;
      }
      .pix-container {
        padding: 0 1rem;
      }
      .pix-card {
        gap: 1.25rem;
      }
      .pix-qrcode {
        padding: 8px;
      }
      .pix-qrcode img {
        width: 120px;
        height: 120px;
      }
      .pix-info {
        gap: 0.75rem !important;
      }
      .pix-title {
        font-size: 1rem;
      }
      .pix-desc {
        font-size: 0.8rem;
        line-height: 1.4;
      }
      .pix-label {
        font-size: 0.65rem;
      }
      .pix-chave-display {
        font-size: 0.6rem;
        padding: 0.5rem 0.6rem;
        line-height: 1.3;
      }
      .btn-copy {
        padding: 0.7rem;
        font-size: 0.85rem;
      }
      .pix-owner {
        font-size: 0.8rem;
      }
    }

    /* Mobile pequeno (xs < 576px) */
    @media (max-width: 575px) {
      /* Cards de resumo: fonte menor para caber valores longos */
      .card-resumo {
        padding: .6rem !important;
        min-height: 130px;
      }
      .card-resumo .fw-bold { font-size: .78rem !important; }
      .card-resumo .card-icon { width: 38px; height: 38px; font-size: 1.1rem; flex-shrink: 0; }
      .card-resumo .gap-3 { gap: .5rem !important; }
      /* Tabelas: fonte ainda menor e sem padding lateral excessivo */
      .tabela-dados table { font-size: .75rem; }
      .tabela-dados thead th { font-size: 0.7rem !important; }
      .tabela-dados td, .tabela-dados th {
        padding: .35rem .3rem !important;
      }
      .tabela-dados tbody tr { min-height: 45px; }
      /* Chave PIX: quebra para caber na tela */
      .pix-chave-texto { font-size: .78rem; word-break: break-all; }
    }