/* ════════════════════════════════════════════════════════════════════════
   TOKENS SEMÂNTICOS — CONVENÇÃO DE TEMA (TASK-034)
   ────────────────────────────────────────────────────────────────────────
   Há 3 temas: claro (este :root), escuro (:root[data-theme="dark"]) e alto
   contraste (:root[data-theme="contrast"]). Os blocos de tema só sobrescrevem
   os VALORES dos tokens abaixo — a troca de tema é só alternar variáveis.

   ➜ REGRA: em CSS/HTML novo, use sempre var(--token), NUNCA cor literal
     (#fff, #1e293b, …). Cor literal não acompanha o tema. (Exceção: imprimir.css.)

     --bg            fundo da página
     --bg-elev       superfície elevada (cards, modais, tabelas, inputs)
     --surface       idem (alias usado em sidebar/footer)
     --text          texto principal
     --text-muted    texto secundário
     --border        bordas e divisórias
     --primary       cor de marca (fundo de botão/header, links)
     --primary-dk    variação escura (hover)
     --primary-lt    variação clara (realce/hover suave)
     --success/--warning/--danger   cores de estado

   Os tokens --bs-* (mais abaixo) mapeiam o Bootstrap nativo a estes tokens,
   então tabela/modal/dropdown/card/form-control herdam o tema sozinhos.
   Documentação: specs/core/convencoes.md › "Temas e tokens semânticos".
   ════════════════════════════════════════════════════════════════════════ */
/* ── Variáveis ──────────────────────────────────────────────────────────── */
:root {
  /* Subfase 10 — informa ao SO/navegador o esquema dos controles nativos
     (scrollbar, <input type=date>, <select>, autofill). O modo de alto
     contraste usa esquema CLARO de propósito: popups nativos (datepicker)
     ficam brancos com texto preto, mantendo o máximo de contraste. */
  color-scheme: light;

  --primary:    #1351b4;
  --primary-dk: #0d3d8e;
  --primary-lt: #e8f0fb;
  --sidebar-w:  430px;
  --sidebar-w-collapsed: 80px;   /* largura recolhida (só ícones): dimensionada pelo
                                    maior elemento — o toggle de grupo (padding 24 +
                                    ícone 32 + 24 = 80) — para o ícone caber com padding
                                    interno simétrico dos dois lados. O ícone mantém o
                                    mesmo padding-left da sidebar aberta, sem salto ao
                                    recolher/expandir. */
  --header-h:   60px;
  --bottom-nav-h: 62px;   /* altura útil da bottom nav — ícone + rótulo (só mobile/tablet <992px) */
  /* "Sobe" o conteúdo das tabs: 8px fixos + área segura (home indicator iOS). */
  --bottom-nav-lift: calc(env(safe-area-inset-bottom, 0px) + 8px);
  /* Espaço total ocupado pela barra (altura útil + folga) — usado para reservar
     espaço no conteúdo/rodapé/sidebar e posicionar a sheet de Ferramentas. */
  --bottom-nav-space: calc(var(--bottom-nav-h) + var(--bottom-nav-lift));

  /* Tokens semânticos (papel, não cor) — base do tema claro. Os temas
     escuro/alto-contraste (Subfase 4) sobrescrevem só estes valores. */
  --bg:         #f5f7fa;
  --bg-elev:    #ffffff;
  --surface:    #ffffff;
  --text:       #1e293b;
  --text-muted: #6c757d;
  --border:     #e2e8f0;
  --success:    #198754;
  --warning:    #ffc107;
  --danger:     #dc3545;

  /* Alinha os tokens do Bootstrap à identidade gov.br (#1351b4) para que
     text-primary / bg-primary / border-primary e links usem o mesmo azul
     do tema, em vez do azul padrão do Bootstrap (#0d6efd). */
  --bs-primary:          #1351b4;
  --bs-primary-rgb:      19, 81, 180;
  --bs-link-color:       #1351b4;
  --bs-link-color-rgb:   19, 81, 180;
  --bs-link-hover-color: #0d3d8e;

  /* Subfase 8 — mapeia os globais do Bootstrap aos tokens semânticos. Como
     --bg/--text/--border são redefinidos por [data-theme], qualquer componente
     nativo do Bootstrap (table, modal, dropdown, card, offcanvas, form-control,
     list-group, pagination…) herda o tema automaticamente nos 3 modos, sem
     precisar de override classe a classe. O fundo de página fica no body
     (var(--bg)); aqui --bs-body-bg aponta para a SUPERFÍCIE elevada (--bg-elev),
     que é o que esses componentes realmente pintam. */
  --bs-body-bg:           var(--bg-elev);
  --bs-body-color:        var(--text);
  --bs-emphasis-color:    var(--text);
  --bs-secondary-bg:      var(--bg);
  --bs-secondary-color:   var(--text-muted);
  --bs-tertiary-bg:       var(--bg);
  --bs-tertiary-color:    var(--text-muted);
  --bs-border-color:      var(--border);
}

/* ── Tema escuro ────────────────────────────────────────────────────────────
   Aplicado via atributo `data-theme="dark"` no <html> (definido por
   static/js/tema.js, Subfase 6) ou, na ausência de escolha salva, pela
   preferência do SO (prefers-color-scheme). */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:         #0f172a;
  --bg-elev:    #1e293b;
  --surface:    #1e293b;
  --text:       #e2e8f0;
  --text-muted: #94a3b8;
  --border:     #334155;
  --primary:    #4d8eff;
  --primary-dk: #2f6bd9;
  --primary-lt: #1e3a5f;
  --success:    #22c55e;
  --warning:    #fbbf24;
  --danger:     #f87171;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg:         #0f172a;
    --bg-elev:    #1e293b;
    --surface:    #1e293b;
    --text:       #e2e8f0;
    --text-muted: #94a3b8;
    --border:     #334155;
    --primary:    #4d8eff;
    --primary-dk: #2f6bd9;
    --primary-lt: #1e3a5f;
    --success:    #22c55e;
    --warning:    #fbbf24;
    --danger:     #f87171;
  }
}

/* ── Tema de alto contraste ───────────────────────────────────────────────
   Preto/branco puro + bordas fortes (WCAG 2.1 AA, ≥4.5:1). Mantém --primary
   no azul gov.br (já validado para AA com texto branco) para preservar a
   identidade da marca; só fundo/texto/borda viram preto/branco puros. */
:root[data-theme="contrast"] {
  color-scheme: light; /* popups nativos brancos/legíveis — ver nota em :root */
  --bg:         #000000;
  --bg-elev:    #000000;
  --surface:    #000000;
  --text:       #ffffff;
  --text-muted: #e2e8f0;
  --border:     #ffffff;
  /* #3366e6: azul de marca recalibrado para o alto contraste (o gov.br
     #1351b4 não pode aparecer aqui). Papéis no contraste: FUNDO de botão/
     header com texto branco — texto branco sobre ele = 5.0:1 (AA com folga);
     e BORDA/ÍCONE sobre preto = 4.2:1 (acima dos 3:1 de 1.4.11). Como TEXTO
     direto sobre preto não atinge 4.5:1, mas todo uso de --primary como texto
     já foi forçado para branco na Subfase 7 — então não há regressão. */
  --primary:    #3366e6;
  --primary-lt: #1a2942;
  --success:    #4ade80;
  --warning:    #fbbf24;
  --danger:     #f87171;
}
@media (prefers-contrast: more) {
  :root:not([data-theme]) {
    color-scheme: light;
    --bg:         #000000;
    --bg-elev:    #000000;
    --surface:    #000000;
    --text:       #ffffff;
    --text-muted: #e2e8f0;
    --border:     #ffffff;
    --primary:    #3366e6;
    --primary-lt: #1a2942;
    --success:    #4ade80;
    --warning:    #fbbf24;
    --danger:     #f87171;
  }
}
/* Foco realçado no modo de alto contraste */
[data-theme="contrast"] *:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
}

/* --primary serve dois papéis (fundo com texto branco / texto sobre tinta
   clara) que são incompatíveis com AA quando a tinta também precisa virar
   bem escura (Subfase 4). Nestes pontos específicos, onde --primary é usado
   como cor de TEXTO sobre uma tinta/fundo escuro, força --text (branco) no
   modo de alto contraste — a cor de marca permanece só em bordas/ícones,
   que não precisam de 4.5:1 (WCAG 1.4.11, 3:1 basta). */
[data-theme="contrast"] .sidebar-link:hover,
[data-theme="contrast"] .sidebar-link.active,
[data-theme="contrast"] .bottom-nav-item:hover,
[data-theme="contrast"] .bottom-nav-item.active,
[data-theme="contrast"] .dash-section-icon,
[data-theme="contrast"] .dash-section-title,
[data-theme="contrast"] #nomeArquivo,
[data-theme="contrast"] .pt-step-count,
[data-theme="contrast"] .pt-hint,
[data-theme="contrast"] .pt-biz b,
[data-theme="contrast"] .pt-hero-icon {
  color: var(--text);
}
[data-theme="contrast"] .brand-name {
  background: none;
  -webkit-text-fill-color: var(--text);
  color: var(--text);
}
/* --bg e --bg-elev são o mesmo preto puro no modo de alto contraste, então
   cards/superfícies elevadas (que só tinham box-shadow, sem borda própria)
   ficam sem separação visível do fundo da página — acrescenta borda forte. */
[data-theme="contrast"] .stat-card,
[data-theme="contrast"] .chart-card,
[data-theme="contrast"] .table-container,
[data-theme="contrast"] .login-card,
[data-theme="contrast"] .pt-tooltip {
  border: 1px solid var(--border);
}

/* Botões "primary" do Bootstrap seguem o azul do tema (os tons --bs-btn-*
   são definidos dentro da própria classe e não derivam de --bs-primary). */
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-dk);
  --bs-btn-hover-border-color: var(--primary-dk);
  --bs-btn-active-bg: var(--primary-dk);
  --bs-btn-active-border-color: var(--primary-dk);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}
.btn-outline-primary {
  --bs-btn-color: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-disabled-color: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
}

/* Botões outline "dark"/"secondary" (Detalhes, Abrir, Exportar PDF…) têm cor
   fixa quase preta no Bootstrap — no escuro somem sobre o fundo. Remapeia para os
   tokens: texto/borda claros e hover preenchendo claro com texto sobre o fundo. */
:root[data-theme="dark"] .btn-outline-dark,
:root[data-theme="dark"] .btn-outline-secondary,
:root[data-theme="contrast"] .btn-outline-dark,
:root[data-theme="contrast"] .btn-outline-secondary {
  --bs-btn-color:               var(--text);
  --bs-btn-border-color:        var(--border);
  --bs-btn-hover-color:         var(--bg);
  --bs-btn-hover-bg:            var(--text);
  --bs-btn-hover-border-color:  var(--text);
  --bs-btn-active-color:        var(--bg);
  --bs-btn-active-bg:           var(--text);
  --bs-btn-active-border-color: var(--text);
  --bs-btn-disabled-color:      var(--text-muted);
  --bs-btn-disabled-border-color: var(--border);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .btn-outline-dark,
  :root:not([data-theme]) .btn-outline-secondary {
    --bs-btn-color:               var(--text);
    --bs-btn-border-color:        var(--border);
    --bs-btn-hover-color:         var(--bg);
    --bs-btn-hover-bg:            var(--text);
    --bs-btn-hover-border-color:  var(--text);
    --bs-btn-active-color:        var(--bg);
    --bs-btn-active-bg:           var(--text);
    --bs-btn-active-border-color: var(--text);
    --bs-btn-disabled-color:      var(--text-muted);
    --bs-btn-disabled-border-color: var(--border);
  }
}

/* Foco e seleção de formulários no azul do tema (substitui o azul Bootstrap) */
.form-control:focus,
.form-select:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .25rem rgba(19, 81, 180, .20);
}
.form-check-input:checked {
  background-color: var(--primary);
  border-color: var(--primary);
}
.form-check-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 .25rem rgba(19, 81, 180, .20);
}

/* ── Tabelas (Subfase 8) ──────────────────────────────────────────────────
   As classes .table* do Bootstrap usam variáveis próprias (--bs-table-*) que
   NÃO derivam de --bs-body-* — por isso o mapeamento global acima não chega
   sozinho até elas. Pior: as VARIANTES de tabela (.table-light/.table-dark)
   só ganham adaptação a color mode no Bootstrap v6, então hoje carregam cor
   fixa e precisam de override explícito. layout.css carrega depois do
   bootstrap.min.css, então estes overrides (mesma especificidade) vencem. */
.table {
  --bs-table-color:         var(--text);
  --bs-table-bg:            var(--bg-elev);
  --bs-table-border-color:  var(--border);
  --bs-table-striped-color: var(--text);
  --bs-table-striped-bg:    var(--bg);
  --bs-table-hover-color:   var(--text);
  --bs-table-hover-bg:      var(--primary-lt);
  --bs-table-active-color:  var(--text);
  --bs-table-active-bg:     var(--primary-lt);
}
/* Cabeçalho (thead.table-light): tom levemente distinto do corpo para separar
   a faixa de títulos das linhas — usa --bg (fundo de página) sobre rows --bg-elev. */
.table-light,
.table-light > th,
.table-light > td {
  --bs-table-color:        var(--text);
  --bs-table-bg:           var(--bg);
  --bs-table-border-color: var(--border);
  color: var(--text);
}
/* .table-dark fixa preto/branco do Bootstrap — realinha aos tokens caso surja. */
.table-dark {
  --bs-table-color:        var(--text);
  --bs-table-bg:           var(--bg-elev);
  --bs-table-border-color: var(--border);
  color: var(--text);
}

/* ── Utilitários de cor fixa do Bootstrap (Subfase 8) ─────────────────────
   .bg-white/.bg-light e .alert-light têm cor FIXA por design (não acompanham
   data-bs-theme) — sobre fundo escuro/preto ficariam claros (resquício do tema
   claro). São usados como superfícies (painéis de filtro, card-header/footer,
   caixa de aviso), então remapeia para os tokens. Bootstrap aplica !important
   nos utilitários .bg-*, daí o !important aqui. */
.bg-white { background-color: var(--bg-elev) !important; }
.bg-light { background-color: var(--bg) !important; }
.alert-light {
  --bs-alert-color:        var(--text);
  --bs-alert-bg:           var(--bg);
  --bs-alert-border-color: var(--border);
  --bs-alert-link-color:   var(--text);
}

/* Badges .bg-light (microárea, características) não são superfícies: o remapeamento
   de .bg-light acima os deixaria com fundo escuro e, somado a .text-dark, ilegíveis.
   No escuro viram azul do tema com texto branco. !important porque .text-dark do
   Bootstrap aplica a cor com !important. */
:root[data-theme="dark"] .badge.bg-light {
  background-color: var(--primary) !important;
  color: #fff !important;
  border-color: var(--primary) !important;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .badge.bg-light {
    background-color: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
  }
}

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); }

/* Seleção de texto no azul do tema (Subfase 10) — em vez do azul padrão do
   navegador, que não acompanha o modo escuro/contraste. */
::selection { background: var(--primary); color: #fff; }

/* Utilitários tokenizados (Subfase 13) — substituem cores literais em
   style="..." inline, que (por especificidade máxima) escapariam da cascata
   de [data-theme]. */
.icon-danger { color: var(--danger); }

/* ── Auth Gate ──────────────────────────────────────────────────────────── */
#authGate {
  position: fixed; inset: 0; z-index: 9999;
  background: linear-gradient(135deg, var(--primary) 0%, #091d61 100%);
  color: #fff; display: flex; align-items: center;
  justify-content: center; text-align: center; padding: 20px;
}
#authGate .box {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 16px; padding: 40px; max-width: 420px; width: 100%;
}
#appContent { display: none; }

/* Token presente: oculta gate e exibe app sem flash */
.pec-authed #authGate  { display: none; }
.pec-authed #appContent { display: block; }

/* ── Layout container ───────────────────────────────────────────────────── */
.app-layout { display: flex; flex-direction: column; min-height: 100vh; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.app-header {
  background: var(--primary);
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; position: sticky; top: 0; z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.2); flex-shrink: 0;
}
.header-brand { display: flex; align-items: center; gap: 12px; }

.sidebar-toggle {
  display: block; background: transparent; border: none;
  color: #fff; font-size: 1.2rem; cursor: pointer;
  padding: 6px 8px; border-radius: 6px; line-height: 1;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.15); }

.header-logo-zone {
  width: 38px; height: 38px; border-radius: 8px;
  background: rgba(255,255,255,.15);
  border: 2px dashed rgba(255,255,255,.4);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.header-logo-zone img          { width: 100%; height: 100%; object-fit: contain; }
.header-logo-zone .ph-icon     { color: rgba(255,255,255,.5); font-size: .9rem; }

.header-title {
  color: #fff; font-weight: 700; font-size: .95rem; letter-spacing: .04em;
}
.header-right { display: flex; align-items: center; gap: 10px; }
.header-right-menus { display: flex; align-items: center; gap: 10px; }

/* Botão de olho (toggle de dados sensíveis) — quadrado, ícone centralizado.
   Quando ativo (dados revelados) ganha destaque para sinalizar o estado. */
.header-eye[aria-pressed="true"] {
  background: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.7);
  color: #fff;
}

.user-dropdown { position: relative; }

.user-chip {
  color: rgba(255,255,255,.9); font-size: .8rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 34px; box-sizing: border-box;
  background: transparent; border: 1px solid rgba(255,255,255,.45);
  border-radius: 6px; padding: 0 12px; cursor: pointer;
  transition: background .2s, border-color .2s;
}

/* Botões do header que mostram só o ícone (olho de dados sensíveis e tema):
   quadrados idênticos, mesma altura dos demais .user-chip. */
.header-icon-btn { width: 34px; padding: 0; }
.user-chip:hover,
.user-chip[aria-expanded="true"] { background: rgba(255,255,255,.15); }
.user-chip-caret { font-size: .65rem; opacity: .8; transition: transform .2s; }
.user-chip[aria-expanded="true"] .user-chip-caret { transform: rotate(180deg); }

/* ── Chip "Módulo" (header, só mobile/tablet) ──────────────────────────────
   Botão que abre o dropdown de troca de módulo. Compacto, com o nome do módulo
   truncável (alguns nomes são longos). Visibilidade controlada por d-lg-none. */
.modulo-chip {
  color: #fff; font-size: .82rem; font-weight: 700;
  display: flex; align-items: center; gap: 7px;
  height: 34px; max-width: 56vw; box-sizing: border-box;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.4);
  border-radius: 8px; padding: 0 10px; cursor: pointer;
  transition: background .2s, border-color .2s;
}
.modulo-chip:hover,
.modulo-chip[aria-expanded="true"] { background: rgba(255,255,255,.25); }
.modulo-chip-icon { flex-shrink: 0; font-size: .95rem; }
.modulo-chip-nome {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.modulo-chip-caret { font-size: .6rem; opacity: .85; flex-shrink: 0; transition: transform .2s; }
.modulo-chip[aria-expanded="true"] .modulo-chip-caret { transform: rotate(180deg); }
.modulo-dropdown-menu { min-width: 250px; border-radius: 10px; padding: 6px; }
.modulo-dropdown-menu .dropdown-header {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--text-muted); padding: 4px 12px;
}
.modulo-dropdown-menu .dropdown-item {
  display: flex; align-items: center; gap: 10px;
  border-radius: 7px; font-size: .88rem; font-weight: 600; padding: 9px 12px;
  white-space: normal;
}
.modulo-dropdown-menu .dropdown-item i { width: 18px; text-align: center; opacity: .9; }
.modulo-dropdown-menu .dropdown-item.active {
  background: var(--primary-lt); color: var(--primary);
}

/* Avatar por iniciais da Minha conta (TASK-047) — sem upload de imagem; usa os
   tokens de tema, então acompanha claro/escuro/alto contraste. */
.conta-avatar {
  flex-shrink: 0;
  width: 52px; height: 52px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--primary); color: #fff;
  font-weight: 700; font-size: 1.1rem; letter-spacing: .5px;
  text-transform: uppercase; user-select: none;
}
.min-w-0 { min-width: 0; }

.user-dropdown-menu { min-width: 200px; border-radius: 10px; padding: 6px; }
.user-dropdown-menu .dropdown-item {
  display: flex; align-items: center; gap: 9px;
  border-radius: 6px; font-size: .85rem; font-weight: 500; padding: 8px 12px;
}
.user-dropdown-menu .dropdown-item i { width: 16px; text-align: center; opacity: .85; }
.user-dropdown-menu .dropdown-item-danger { color: var(--danger); }
.user-dropdown-menu .dropdown-item-danger:hover { background: var(--danger); color: #fff; }

.data-atualizacao {
  color: rgba(255,255,255,.9); font-size: .75rem; font-weight: 600;
  display: none; align-items: center; gap: 6px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 6px; padding: 4px 10px;
}
.data-atualizacao i { opacity: .8; }
/* Exibido apenas após carregar a data e somente no desktop (md+). */
@media (min-width: 768px) {
  .data-atualizacao.is-ready { display: inline-flex; }
}

/* ── Body ───────────────────────────────────────────────────────────────── */
.app-body { display: flex; flex: 1; min-height: 0; }

/* ── Sidebar ────────────────────────────────────────────────────────────── */
.app-sidebar {
  width: var(--sidebar-w); background: var(--surface);
  border-right: 1px solid var(--border);
  flex-shrink: 0; display: flex; flex-direction: column;
  padding: 0;
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h));
  overflow-y: auto; z-index: 80;
}
.sidebar-sec {
  font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-muted);
  padding: 12px 19px 5px;
}

.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 19px; color: var(--text-muted);
  text-decoration: none; font-weight: 500; font-size: .92rem;
  border-left: 3px solid transparent;
  transition: background .15s, color .15s;
  background: none;
  border-top: none; border-right: none; border-bottom: none;
  width: 100%; text-align: left; cursor: pointer;
  /* Não quebrar em 2 linhas enquanto a sidebar ainda está estreita (durante a
     animação de expansão): o texto fica em 1 linha e o excesso é clipado até a
     sidebar atingir a largura cheia. */
  white-space: nowrap; overflow: hidden;
}
.sidebar-link i { width: 24px; text-align: center; flex-shrink: 0; font-size: 1.18rem; }

.sidebar-link:hover { background: var(--primary-lt); color: var(--primary); }

.sidebar-link.active {
  background: var(--primary-lt); color: var(--primary);
  border-left-color: var(--primary); font-weight: 600;
}

/* ── Grupos colapsáveis (dropdowns Admin/Cadastro/CDI) ──────────────────── */
.sidebar-group { display: flex; flex-direction: column; }

.sidebar-group-toggle {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left; cursor: pointer;
  padding: 24px; background: none; border: none;
  color: var(--text); font-weight: 700;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  transition: background .15s, color .15s;
  /* idem .sidebar-link: 1 linha só, clipa o excesso durante a expansão. */
  white-space: nowrap; overflow: hidden;
}
.sidebar-group-toggle:hover { background: var(--primary-lt); color: var(--primary); }

/* Configurações: módulo pai SEM dropdown — é um link de navegação com a mesma
   aparência do .sidebar-group-toggle (já aplicada pela classe). Aqui só removemos
   o sublinhado de link e damos o realce de página ativa. */
.sidebar-module-link { text-decoration: none; }
.sidebar-module-link.active { background: var(--primary-lt); color: var(--primary); }

/* Bloco "Sistema" (Configurações) no rodapé da sidebar: linha delimitadora acima,
   igual à dos demais módulos pais (2px, var(--border)) — espelha a linha que fica
   acima do rótulo "Módulos". */
.sidebar-system { border-top: 2px solid var(--border); }

.sidebar-group-icon { width: 32px; text-align: center; flex-shrink: 0; font-size: 1.77rem; }
.sidebar-group-toggle > span {
  flex: 1; line-height: 1.25; margin-left: 8px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sidebar-group-caret {
  flex-shrink: 0; font-size: .68rem; color: var(--text-muted);
}
.sidebar-group.open > .sidebar-group-toggle .sidebar-group-caret { transform: rotate(180deg); }

/* Itens recolhidos por padrão; o JS adiciona `.open` ao grupo para exibi-los.
   A revelação é animada (deslize para baixo): max-height + opacidade + um leve
   translateY dão a sensação dos componentes "descendo" ao abrir o dropdown. */
.sidebar-group-items {
  display: flex; flex-direction: column;
  overflow: hidden;
  max-height: 0; opacity: 0; transform: translateY(-6px);
}
.sidebar-group.open > .sidebar-group-items {
  max-height: 600px; opacity: 1; transform: translateY(0);
  padding-bottom: 4px;
}

/* Transições só depois que o JS aplica o estado inicial (.groups-ready) — evita
   o grupo ativo "animar" sozinho a cada carregamento de página. */
.app-sidebar.groups-ready .sidebar-group-items {
  transition: max-height .25s ease, opacity .2s ease, transform .25s ease;
}
.app-sidebar.groups-ready .sidebar-group-caret { transition: transform .2s ease; }

@media (prefers-reduced-motion: reduce) {
  .app-sidebar.groups-ready,
  .app-sidebar.groups-ready .sidebar-group-items,
  .app-sidebar.groups-ready .sidebar-group-caret,
  .app-sidebar.groups-ready .sidebar-link span,
  .app-sidebar.groups-ready .sidebar-group-toggle span { transition: none; }
}

/* Indenta os links dentro do grupo (a borda de "ativo" segue na margem esquerda). */
.sidebar-group-items .sidebar-link { padding-left: 34px; }
.sidebar-group-items .sidebar-sec  { padding-left: 34px; }

/* ── Delimitadores entre módulos ────────────────────────────────────────────
   Cada módulo (grupo) é separado por uma linha horizontal. Os módulos
   PRINCIPAIS (os grupos) recebem uma linha mais GROSSA; os itens INTERNOS de
   cada grupo, uma linha mais FINA. As linhas acompanham o tema (var(--border)),
   ficando visíveis no claro, escuro e alto contraste. */
.sidebar-group { border-bottom: 2px solid var(--border); }
/* Linha fina entre os itens internos de um grupo (entre links e subtítulos). */
.sidebar-group-items > * + * { border-top: 1px solid var(--border); }

/* ── Sidebar recolhível (desktop) ───────────────────────────────────────────
   No desktop, o botão do header (#sidebarToggle) alterna `.collapsed`: a sidebar
   encolhe para `--sidebar-w-collapsed` mostrando só os ícones, e o conteúdo
   principal ganha a largura liberada. Ao passar o mouse, ela reexpande para a
   largura cheia SEM empurrar o conteúdo — o `margin-right` negativo compensa a
   largura extra, fazendo a sidebar expandida sobrepor o conteúdo (z-index).
   Tudo escopado a >=992px (Bootstrap lg) para não interferir no drawer de
   mobile/tablet (que usa `.open`/position:fixed). Abaixo de 992px — celular E
   tablet — vale o drawer com menu sanduíche. A transição só vale após
   `.groups-ready` (aplicado pelo sidebar-groups.js), evitando animação no load. */
@media (min-width: 992px) {
  /* Largura + opacidade dos rótulos animam juntas (mesma curva/duração) só após
     `.groups-ready` — evita animar no carregamento (a sidebar nasce recolhida). */
  .app-sidebar.groups-ready {
    transition: width .22s cubic-bezier(.4, 0, .2, 1),
                margin-right .22s cubic-bezier(.4, 0, .2, 1);
  }
  .app-sidebar.groups-ready .sidebar-link span,
  .app-sidebar.groups-ready .sidebar-group-toggle span,
  .app-sidebar.groups-ready .sidebar-group-caret {
    transition: opacity .16s ease;
  }

  .app-sidebar.collapsed { width: var(--sidebar-w-collapsed); }
  .app-sidebar.collapsed:hover {
    width: var(--sidebar-w);
    margin-right: calc(var(--sidebar-w-collapsed) - var(--sidebar-w));
    z-index: 200;
    box-shadow: 4px 0 24px rgba(0,0,0,.18);
  }

  /* Recolhida (sem hover): os rótulos DESAPARECEM por opacidade (animável), não por
     `display:none` (que não anima e causava o "pop"/flick do texto). O `overflow:
     hidden` da própria linha clipa o texto invisível enquanto a largura encolhe.
     Os ÍCONES não recebem `justify-content:center`/`padding:0` — mantêm o mesmo
     `padding-left` da sidebar aberta, então ficam imóveis (sem salto). */
  .app-sidebar.collapsed:not(:hover) .sidebar-link span,
  .app-sidebar.collapsed:not(:hover) .sidebar-group-toggle span,
  .app-sidebar.collapsed:not(:hover) .sidebar-group-caret {
    opacity: 0;
    pointer-events: none;
  }
  /* Subtítulos de seção são linhas inteiras (sem ícone): saem por completo para não
     deixar buracos verticais no rail de ícones. */
  .app-sidebar.collapsed:not(:hover) .sidebar-sec { display: none; }
}

/* ── Overlay mobile ─────────────────────────────────────────────────────── */
.sidebar-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.4); z-index: 79;
}
.sidebar-overlay.show { display: block; }

/* ── Conteúdo principal ─────────────────────────────────────────────────── */
.app-content { flex: 1; padding: 24px; min-width: 0; overflow-x: hidden; }

/* ── Botões compartilhados ──────────────────────────────────────────────── */
.btn-app {
  background: var(--primary); color: #fff; border: none;
  border-radius: 6px; padding: 7px 16px;
  font-weight: 600; font-size: .82rem; cursor: pointer;
  transition: background .2s;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; white-space: nowrap;
}
.btn-app:hover { background: var(--primary-dk); color: #fff; }

.btn-app-outline {
  background: transparent; color: var(--primary);
  border: 1px solid var(--primary);
  border-radius: 6px; padding: 6px 14px;
  font-weight: 600; font-size: .8rem; cursor: pointer;
  transition: background .2s;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; white-space: nowrap;
}
.btn-app-outline:hover { background: var(--primary-lt); }

/* Estado desabilitado (ex.: "Anterior/Próxima" da paginação no início/fim). */
.btn-app:disabled, .btn-app[disabled],
.btn-app-outline:disabled, .btn-app-outline[disabled] {
  opacity: .5; cursor: default; pointer-events: none;
}

/* Arredondamento padrão de todos os botões do sistema (mesmo raio do
   .btn-app/.btn-app-outline, 6px) — alguns botões usavam .rounded-pill
   (50rem) do Bootstrap e ficavam com formato de "comprimido", desproporcional
   em botões largos/com texto (ex.: "Criar lista" na Gestão de Logradouros).
   Escopo em `.btn` para não afetar badges e selects, que continuam pill. */
.btn.rounded-pill { border-radius: 6px; }

/* ── Logo standby (header) ───────────────────────────────────────────────── */
.header-logo-img { width: 100%; height: 100%; object-fit: contain; display: none; }
.header-logo-img[src]:not([src=""]) { display: block; }
.header-logo-img[src]:not([src=""]) ~ .ph-icon { display: none; }

/* ── Logo standby (footer) ───────────────────────────────────────────────── */
.footer-logo-img { max-width: 100%; max-height: 100%; object-fit: contain; display: none; }
.footer-logo-img[src]:not([src=""]) { display: block; }
.footer-logo-img[src]:not([src=""]) ~ .footer-logo-label { display: none; }
.footer-logo-label { font-size: .58rem; color: var(--text-muted); text-align: center; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.app-footer {
  background: var(--surface); border-top: 1px solid var(--border);
  padding: 14px 24px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px;
}
.footer-logos { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-logo-ph {
  width: 60px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: .6rem; color: var(--text-muted); text-align: center; padding: 4px;
  overflow: hidden;
}
.footer-logo-ph img { max-width: 100%; max-height: 100%; object-fit: contain; }
.footer-version { font-size: .7rem; color: var(--text-muted); font-weight: 500; }

/* ── Bottom navigation (mobile) ─────────────────────────────────────────────
   Barra fixa no rodapé, estilo app nativo: ÍCONE + RÓTULO. Existe apenas no
   mobile/tablet (<992px) — no desktop fica `display:none` (a navegação é a
   sidebar). As tabs de indicador são as páginas do MÓDULO ATIVO; seguem "Admin"
   e "Eu" (Minha conta) e a tab "Ferramentas" (abre a #ferramentas-sheet com as
   ferramentas do módulo). Usa tokens de tema → acompanha claro/escuro/alto
   contraste. */
.bottom-nav { display: none; }

/* A sheet de ferramentas (mobile) só existe dentro do media query abaixo;
   sem este display:none ela fica no fluxo normal do documento no desktop
   (é só uma <div>) e aparece visível embaixo do footer. */
.ferramentas-sheet { display: none; }

/* ── Responsividade ─────────────────────────────────────────────────────── */
/* Mobile E tablet (<992px): a navegação principal vira a BOTTOM NAV (abaixo). A
   troca de módulo é o dropdown "Módulo" do header (#moduloMenuToggle) e as
   ferramentas do módulo saem da tab "Ferramentas" (#bottomNavFerramentas →
   #ferramentasSheet); o drawer da sidebar deixa de ser aberto nesta faixa (a
   sidebar é a navegação só no desktop). O divisor é 992px (Bootstrap lg),
   casando com a regra `min-width: 992px` da sidebar recolhível. */
@media (max-width: 991.98px) {
  /* O menu sanduíche do header some: a navegação é a bottom nav + dropdown
     "Módulo". */
  .sidebar-toggle { display: none; }
  .header-title   { font-size: .8rem; }

  /* Bottom nav visível: barra fixa só-ícones. Reserva espaço embaixo para o
     conteúdo/rodapé/drawer não ficarem escondidos atrás dela. */
  .bottom-nav {
    display: flex;
    /* Ancorada na borda inferior (`bottom: 0`) para não deixar vão transparente
       embaixo. A altura total inclui o `--bottom-nav-lift`; o `padding-bottom`
       reserva só a safe-area do aparelho (gesture bar do iPhone), de modo que as
       tabs ficam MAIORES — a área clicável de cada uma cresce e o fundo preenche
       até a borda. */
    position: fixed; left: 0; right: 0; bottom: 0;
    height: var(--bottom-nav-space);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 10px rgba(0,0,0,.08);
    z-index: 950;                         /* acima do drawer (900)/overlay (800), abaixo do header (1000) */
  }
  .bottom-nav-item {
    flex: 1; min-width: 0;                 /* min-width:0 deixa o rótulo truncar sem estourar */
    display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px;
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 1.15rem;
    text-decoration: none;
    border-top: 3px solid transparent;    /* indicador de ativo (espelha o topo) */
    transition: color .15s, background .15s;
  }
  .bottom-nav-label {
    max-width: 100%;
    font-size: .6rem; font-weight: 600; line-height: 1;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .bottom-nav-item:hover,
  .bottom-nav-item:active { background: var(--primary-lt); color: var(--primary); }
  .bottom-nav-item.active {
    color: var(--primary); border-top-color: var(--primary);
  }

  /* ── Sheet de Ferramentas (mobile) ───────────────────────────────────────
     Folha que desliza de baixo (acima da bottom nav), aberta pela tab
     "Ferramentas". Lista as ferramentas do módulo ativo. Usa o mesmo overlay
     (#sidebarOverlay) do drawer. */
  .ferramentas-sheet {
    display: block;
    position: fixed; left: 0; right: 0;
    bottom: var(--bottom-nav-space);
    background: var(--surface);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(0,0,0,.18);
    border-radius: 16px 16px 0 0;
    z-index: 949;                          /* logo abaixo da bottom nav (950) */
    transform: translateY(110%);
    transition: transform .25s ease;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    max-height: 60vh; overflow-y: auto;
  }
  .ferramentas-sheet.open { transform: translateY(0); }
  .ferramentas-sheet-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 6px 10px; font-size: .72rem; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em;
    border-bottom: 1px solid var(--border);
  }
  .ferramentas-sheet-items { display: flex; flex-direction: column; padding-top: 6px; }
  .ferramentas-sheet-link {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 8px; text-decoration: none; color: var(--text);
    font-size: .95rem; font-weight: 600; border-radius: 10px;
  }
  .ferramentas-sheet-link + .ferramentas-sheet-link { border-top: 1px solid var(--border); }
  .ferramentas-sheet-link:hover,
  .ferramentas-sheet-link.active { background: var(--primary-lt); color: var(--primary); }
  .ferramentas-sheet-ico {
    width: 38px; height: 38px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: var(--primary-lt); color: var(--primary);
    font-size: 1.05rem;
  }

  /* Reserva de espaço para a barra fixa nas áreas fixas (a do .app-content vai
     junto da regra de padding mais abaixo). */
  .app-footer  { margin-bottom: var(--bottom-nav-space); }
  .app-sidebar { padding-bottom: var(--bottom-nav-space); }

  /* Logo removida do header no mobile/tablet (header enxuto: à direita sobra só
     o botão de privacidade). */
  .header-logo-zone { display: none; }

  /* Header acima de tudo no mobile */
  .app-header { z-index: 1000; }

  /* Drawer: desliza da esquerda (position:fixed sai do flex e exige width). A
     largura segue o teto do desktop, mas nunca ultrapassa a viewport (86vw) —
     em celulares estreitos o drawer cabe na tela; em tablets fica confortável. */
  .app-sidebar {
    position: fixed; top: var(--header-h); left: 0;
    width: min(var(--sidebar-w), 86vw);
    height: calc(100vh - var(--header-h));
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: none;
    z-index: 900;                          /* acima do overlay (800), abaixo do header (1000) */
    padding: 8px 0;
    overflow-y: auto;
  }
  .app-sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.15);
  }

  /* Escala padronizada do drawer: módulos-pai (.sidebar-group-toggle) e itens
     (.sidebar-link) compartilham o mesmo padding vertical e alinhamento; nomes
     longos podem quebrar em 2 linhas (sem clipar como no recolher do desktop).
     Os itens de grupo mantêm uma indentação menor que no desktop (drawer mais
     estreito). */
  .sidebar-sec { padding: 10px 16px 4px !important; font-size: .62rem; }
  .sidebar-link,
  .sidebar-group-toggle {
    padding: 11px 16px !important;
    white-space: normal; overflow: visible;
  }
  .sidebar-link          { font-size: .9rem !important; }
  .sidebar-group-toggle  { font-size: .8rem !important; }
  .sidebar-group-items .sidebar-link,
  .sidebar-group-items .sidebar-sec { padding-left: 30px !important; }
  .sidebar-link i      { font-size: 1.1rem; }
  .sidebar-group-icon  { font-size: 1.4rem; }

  /* Overlay cobre o conteúdo mas fica abaixo da sidebar e do header */
  .sidebar-overlay { z-index: 800; }

  .app-content { padding: 14px 14px calc(14px + var(--bottom-nav-space)); }
  .app-footer  { padding: 10px 14px; justify-content: center; text-align: center; }
  .footer-logos { justify-content: center; }
}

/* ── Stat cards e chart cards (compartilhados) ──────────────────────────── */
.stat-card {
  background: var(--bg-elev); border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,.06);
  padding: 16px; border-left: 5px solid;
  transition: transform .2s; height: 100%;
}
.stat-card:hover { transform: translateY(-3px); }

.stat-icon  { font-size: 1.3rem; margin-bottom: 6px; display: block; }
.stat-label {
  color: var(--text-muted); font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .06em; display: block;
}
.stat-value { font-size: 2rem; font-weight: 800; line-height: 1.15; margin-top: 4px; }

.chart-card {
  background: var(--bg-elev); border-radius: 12px;
  box-shadow: 0 4px 15px rgba(0,0,0,.06); padding: 16px;
}
.chart-title {
  font-size: .78rem; font-weight: 700; text-transform: uppercase;
  color: var(--text-muted); letter-spacing: .07em;
  margin-bottom: 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px;
}
.chart-wrap { position: relative; height: 240px; }

@media (max-width: 767px) {
  .stat-value { font-size: 1.5rem; }
  .stat-label { font-size: .62rem; }
  .chart-wrap { height: 210px; }
}

/* ── Skeleton loading ────────────────────────────────────────────────────── */
@keyframes skel-shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}
.skel {
  /* Tokenizado (Subfase 11): o bloco usa --border e o brilho passa por --bg,
     então o shimmer fica visível nos 3 temas (antes era cinza claro fixo,
     invisível sobre fundo escuro/preto). */
  background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
  background-size: 1200px 100%;
  animation: skel-shimmer 1.5s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}

/* ── Skeleton: tabela ────────────────────────────────────────────────────── */
.skel-text      { height: 13px; }
.skel-text-sm   { height: 11px; }
.skel-badge     { height: 24px; width: 80px; border-radius: 20px; }
.skel-btn       { height: 28px; width: 72px; border-radius: 20px; }

/* ── Skeleton: stat cards ────────────────────────────────────────────────── */
.skel-icon      { height: 18px; width: 18px; border-radius: 50%; }
.skel-label     { height: 11px; width: 65%; }
.skel-value     { height: 34px; width: 45%; }

/* ── Skeleton: título de seção ───────────────────────────────────────────── */
.skel-title     { height: 12px; width: 50%; }

/* ── Skeleton: gráfico donut (anel com buraco central) ───────────────────── */
.skel-donut {
  width: 150px; height: 150px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
}
.skel-donut::after {
  content: '';
  position: absolute;
  inset: 30px;
  border-radius: 50%;
  background: var(--bg-elev); /* "buraco" do donut = cor do card (Subfase 11) */
}

/* ── Skeleton: legenda do donut ──────────────────────────────────────────── */
.skel-legend { height: 10px; border-radius: 10px; }

/* ── Skeleton: barras verticais ──────────────────────────────────────────── */
.skel-vbars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 160px;
}
.skel-vbar {
  flex: 1;
  min-height: 16px;
  border-radius: 4px 4px 0 0;
}

/* ── Skeleton: barras horizontais ────────────────────────────────────────── */
.skel-hbars { display: flex; flex-direction: column; gap: 10px; }
.skel-hbar  { height: 20px; border-radius: 4px; }

/* ── Seletor de tema na página Configurações (apenas mobile/tablet) ──────────
   Espelha o dropdown de tema do header (que some abaixo de 992px) como uma
   grade tocável. tema.js liga os botões data-tema-opcao e marca o ativo com
   .active. Usa tokens semânticos → acompanha claro/escuro/alto contraste. */
.cfg-tema-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}
.cfg-tema-opcao {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px; border-radius: 10px;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--border); cursor: pointer;
  font-weight: 600; font-size: .9rem;
  transition: background .15s, border-color .15s, color .15s;
}
.cfg-tema-opcao i { font-size: 1.05rem; }
.cfg-tema-opcao:hover { border-color: var(--primary); background: var(--primary-lt); }
.cfg-tema-opcao.active {
  background: var(--primary); border-color: var(--primary); color: #fff;
}

/* ───────────────────────────────────────────────────────────────────────────
   Tabelas → cards no CELULAR (<576px)

   Padrão genérico, reaproveitável por qualquer `<table class="tabela-cards">`.
   No celular o `<thead>` some e cada `<tr>` vira um card; as células com
   `data-label` exibem "RÓTULO …… valor". A marcação (data-label + classes
   `td-principal` / `td-check` / `td-acoes` / `td-bloco`) é feita no template ou
   no JS de cada página. É CSS puro — o HTML renderizado é o mesmo do desktop,
   então seleção em massa, ordenação, selects e botões seguem funcionando sem
   código extra. Tudo em tokens semânticos (acompanha os 3 temas).

   `tr` é flex-column + `order` para o título (`td-principal`, order -1) subir ao
   topo e as ações (`td-acoes`, order 100) descerem ao rodapé, independentemente
   da ordem das colunas no DOM. O `!important` nos paddings vence a regra global
   `.table td { padding: 15px !important }` (painel.css), mais específica que a
   nossa só por causa do !important.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
  /* Molduras pesadas (container do painel/listas, cards do admin) recuam para
     os cards de cada linha (em --bg-elev) saltarem. Só afeta quem embrulha uma
     tabela-cards — painéis de filtro (.table-container/.card sem tabela) ficam
     intactos. */
  .table-container:has(.tabela-cards),
  .card:has(.tabela-cards) {
    background: transparent;
    box-shadow: none;
    border-color: transparent;
    overflow: visible;
  }

  .tabela-cards,
  .tabela-cards tbody,
  .tabela-cards td { display: block; width: 100%; }

  .tabela-cards thead { display: none; }

  /* Folga superior: o primeiro card não pode encostar na barra de busca/toolbar
     que fica acima dele (o container vira transparente no modo card). */
  .tabela-cards { margin-top: .75rem; }

  /* Cada linha = um card (flex-column para ordenar título/ações). */
  .tabela-cards tbody tr {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    padding: 1rem;
    margin-bottom: .75rem;
  }
  .tabela-cards tbody tr:last-child { margin-bottom: 0; }
  /* Anula o hover azulado de tabela dentro do card. O Bootstrap 5.3 pinta o
     hover nas células (> *) via --bs-table-bg-state, então não basta o fundo
     do tr: zeramos o estado das células para o --bg-elev do card aparecer. */
  .tabela-cards.table-hover tbody tr:hover { background: var(--bg-elev); }
  .tabela-cards.table-hover tbody tr:hover > * { --bs-table-bg-state: transparent; }

  /* Zera padding/bordas herdados das células de tabela. */
  .tabela-cards tbody td {
    padding: 0 !important;
    border: 0;
    text-align: left !important;
  }

  /* Coluna principal = título do card (sem rótulo; sobe ao topo; folga p/ o
     checkbox no canto). */
  .tabela-cards td.td-principal {
    order: -1;
    padding: 0 2rem 0 0 !important;
    margin-bottom: .5rem;
  }

  /* Checkbox de seleção no canto superior direito do card (painel). */
  .tabela-cards td.td-check {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: auto;
  }

  /* Demais colunas: linha "RÓTULO …… valor". */
  .tabela-cards td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0 !important;
    border-top: 1px solid var(--border);
  }
  .tabela-cards td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--text-muted);
  }

  /* Conteúdo "largo" (barra de progresso, select de status, botão de
     observação): rótulo em cima, controle em largura total embaixo. */
  .tabela-cards td.td-bloco[data-label] {
    display: block;
  }
  .tabela-cards td.td-bloco[data-label]::before {
    display: block;
    margin-bottom: .35rem;
  }
  .tabela-cards td.td-bloco .form-select,
  .tabela-cards td.td-bloco .btn,
  .tabela-cards td.td-bloco .progress { width: 100%; }

  /* Ações: botões em largura total no rodapé do card. */
  .tabela-cards td.td-acoes {
    order: 100;
    margin-top: .75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
  }
  .tabela-cards td.td-acoes .btn { flex: 1 1 auto; }

  /* Estados sem dados (vazio/skeleton/erro: <td colspan> sem data-label):
     ocupam o card inteiro, centralizados. */
  .tabela-cards tbody td[colspan] { text-align: center !important; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Modo de exibição "cards" no DESKTOP/TABLET (≥576px) — preferência opt-in

   No celular (<576px) as `.tabela-cards` já viram cards (regra acima). Aqui o
   usuário pode ESCOLHER, em Configurações, ver as mesmas listas como cards
   também no tablet/desktop. A escolha fica salva em localStorage (`pec_view`),
   que liga a classe `html.modo-cards` (anti-flash em base.html + view_modo.js).

   São exatamente as mesmas declarações do bloco mobile, agora condicionadas à
   classe raiz e a ≥576px. Mantemos a duplicação (em vez de combinar selic) por
   ser CSS puro: o caminho mobile fica 100% intacto, sem regressão.
   ─────────────────────────────────────────────────────────────────────────── */
@media (min-width: 576px) {
  html.modo-cards .table-container:has(.tabela-cards),
  html.modo-cards .card:has(.tabela-cards) {
    background: transparent;
    box-shadow: none;
    border-color: transparent;
    overflow: visible;
  }

  html.modo-cards .tabela-cards,
  html.modo-cards .tabela-cards tbody,
  html.modo-cards .tabela-cards td { display: block; width: 100%; }

  html.modo-cards .tabela-cards thead { display: none; }

  /* Folga superior do primeiro card em relação à barra de busca/toolbar. */
  html.modo-cards .tabela-cards { margin-top: .75rem; }

  html.modo-cards .tabela-cards tbody tr {
    display: flex;
    flex-direction: column;
    position: relative;
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
    padding: 1rem;
    margin-bottom: .75rem;
  }
  html.modo-cards .tabela-cards tbody tr:last-child { margin-bottom: 0; }
  /* Anula o hover azulado dentro do card (ver explicação no bloco mobile). */
  html.modo-cards .tabela-cards.table-hover tbody tr:hover { background: var(--bg-elev); }
  html.modo-cards .tabela-cards.table-hover tbody tr:hover > * { --bs-table-bg-state: transparent; }

  html.modo-cards .tabela-cards tbody td {
    padding: 0 !important;
    border: 0;
    text-align: left !important;
  }

  html.modo-cards .tabela-cards td.td-principal {
    order: -1;
    padding: 0 2rem 0 0 !important;
    margin-bottom: .5rem;
  }

  html.modo-cards .tabela-cards td.td-check {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: auto;
  }

  html.modo-cards .tabela-cards td[data-label] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0 !important;
    border-top: 1px solid var(--border);
  }
  html.modo-cards .tabela-cards td[data-label]::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--text-muted);
  }

  html.modo-cards .tabela-cards td.td-bloco[data-label] {
    display: block;
  }
  html.modo-cards .tabela-cards td.td-bloco[data-label]::before {
    display: block;
    margin-bottom: .35rem;
  }
  html.modo-cards .tabela-cards td.td-bloco .form-select,
  html.modo-cards .tabela-cards td.td-bloco .btn,
  html.modo-cards .tabela-cards td.td-bloco .progress { width: 100%; }

  html.modo-cards .tabela-cards td.td-acoes {
    order: 100;
    margin-top: .75rem;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
  }
  html.modo-cards .tabela-cards td.td-acoes .btn { flex: 1 1 auto; }

  html.modo-cards .tabela-cards tbody td[colspan] { text-align: center !important; }

  /* Em telas largas (≥992px) os cards em coluna única ficariam exageradamente
     largos. Limita a uma grade fluida de cards lado a lado, mais legível. */
  @media (min-width: 992px) {
    html.modo-cards .tabela-cards tbody {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
      gap: .75rem;
    }
    html.modo-cards .tabela-cards tbody tr { margin-bottom: 0; }
    /* Linhas de estado (vazio/erro/carregando) ocupam a largura toda da grade. */
    html.modo-cards .tabela-cards tbody tr:has(td[colspan]) { grid-column: 1 / -1; }
  }
}