/* ============================================================
   RADAR PREVIDÊNCIA — identidade da Casa (09/09/2026)
   ------------------------------------------------------------
   Tokens, casca (barra lateral clara com faixa navy, barra
   superior, selo do sistema) e componentes comuns (indicadores,
   painéis, botões, campos, tabelas, filtros, estados vazios).
   Contrato: docs do responsável em spec-comum.md; implementação
   de referência em D:\Zarnsmonitor\Sistemas TCM\siat\public\styles\base.css.
   Acento do Radar Previdência na régua de acentos da Casa: ameixa.
   Este arquivo substitui styles.css e styles-elegancia.css, que
   foram movidos para _legado-2026-09/ na raiz do projeto.
   ============================================================ */

:root {
  --navy: #1b2a4a;
  --navy-escuro: #0f172a;
  --navy-claro: #2b3e64;
  --navy-suave: #eaf0f7;

  /* Acento do Radar Previdência (ameixa) */
  --acento: #6f4f8c;
  --acento-tinta: #4d3466;
  --acento-suave: #f1ecf6;

  --papel: #ffffff;
  --papel-suave: #fbfcfd;
  --fundo: #f4f6f9;
  --tinta: #19293d;
  --cinza: #526278;
  /* Contraste 5,25:1 no branco, 4,85 no fundo e 4,67 na barra lateral. O
     #7d8ca1 anterior dava 3,42 e reprovava para texto pequeno. */
  --cinza-claro: #5f6d82;
  --linha: #d9e1e9;
  --linha-suave: #e8edf3;
  --borda-campo: #bfcbd8;
  --lateral-fundo: #eef2f7;
  --lateral-borda: #d3dce8;

  --ok: #19634c;      --ok-fundo: #e8f4ee;
  --alerta: #83540f;  --alerta-fundo: #fff4de;
  --erro: #a22c28;    --erro-fundo: #fcefed;

  --raio: 4px;
  --raio-folha: 2px;
  --sombra: 0 1px 2px rgba(15, 23, 42, .045), 0 8px 24px rgba(27, 42, 74, .06);
  --sombra-m: 0 4px 16px rgba(15, 23, 42, .08);

  --serifa: 'Lora', Georgia, 'Times New Roman', serif;
  --largura-lateral: 232px;
  --altura-topo: 72px;

  /* --- Nomes antigos usados pelo CSS/JS de telas que ainda não
     foram totalmente componentizadas (CRP, Alíquotas, Repasses,
     Governança, Riscos, Sobre), remapeados para a paleta nova.
     Mesma técnica do SIAT: mantém essas telas coerentes com a
     casca sem reescrever cada bloco de estilo interno. --- */
  --primary: var(--navy); --primary-dark: var(--navy-escuro); --primary-light: var(--navy-claro);
  --accent: var(--acento); --accent-light: var(--acento);
  --danger: var(--erro); --danger-light: var(--erro);
  --warning: var(--alerta);
  --text-dark: var(--tinta); --text-primary: var(--tinta);
  --text-muted: var(--cinza); --text-3: var(--cinza-claro);
  --bg-light: var(--papel-suave); --bg-card: var(--papel); --bg-secondary: #f6f8fb; --bg-hover: rgba(27,42,74,.05);
  --border: var(--linha); --border-light: var(--linha-suave);
  --shadow: var(--sombra); --shadow-lg: var(--sombra-m);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, 'Segoe UI', Arial, sans-serif;
  font-size: 14px; line-height: 1.6; color: var(--tinta); background: var(--fundo);
  display: flex; min-height: 100vh;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
button, input, select, textarea { font-family: inherit; color: inherit; }
input, select, textarea { font-size: 14px; }
button { cursor: pointer; }
a { color: var(--acento-tinta); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
:focus-visible { outline: 2px solid var(--acento-tinta); outline-offset: 3px; border-radius: 2px; }
.hidden { display: none !important; }

.versalete {
  font-size: 10px; font-weight: 700; letter-spacing: 1.1px;
  text-transform: uppercase; color: var(--cinza-claro);
}

/* ============================================================
   SELO DO SISTEMA (sinete circular em SVG inline)
   ============================================================ */
.selo-sistema { flex: none; display: block; }
.selo-sistema-nome { font-family: var(--serifa); font-size: 7.2px; font-weight: 600; letter-spacing: .3px; fill: var(--navy); }
.selo-sistema-casa { font-family: 'Inter', Arial, sans-serif; font-size: 5.4px; font-weight: 600; letter-spacing: 1.1px; fill: var(--cinza); }

/* ============================================================
   BARRA LATERAL
   ============================================================ */
.sidebar {
  width: var(--largura-lateral);
  position: fixed; inset: 0 auto 0 0;
  display: flex; flex-direction: column;
  background: var(--lateral-fundo); color: var(--tinta);
  border-right: 1px solid var(--lateral-borda);
  z-index: 50;
}
.marca {
  height: var(--altura-topo); flex: none;
  display: flex; align-items: center; padding: 0 14px;
  background: var(--navy); border-bottom: 2px solid var(--acento);
}
.marca-logo {
  width: 100%; height: 48px;
  display: flex; align-items: center; justify-content: center;
  padding: 6px 10px; background: var(--papel); border-radius: var(--raio);
}
.marca-logo img { display: block; max-width: 100%; max-height: 100%; height: auto; }

.marca-sistema {
  flex: none; display: flex; align-items: center; gap: 10px;
  padding: 11px 14px 10px; border-bottom: 1px solid var(--linha);
}
.marca-nome { min-width: 0; }
.marca-sigla { font-family: var(--serifa); font-size: 15px; font-weight: 600; letter-spacing: 2px; line-height: 1.2; color: var(--navy); }
.marca-extenso { margin-top: 1px; font-size: 10.5px; font-weight: 500; line-height: 1.35; color: var(--tinta); }

.sidebar-nav { flex: 1; padding: 12px 10px 4px; display: flex; flex-direction: column; gap: 1px; overflow-y: auto; }
.nav-label { padding: 0 10px 9px; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--cinza-claro); }
.nav-item + .nav-label { padding-top: 14px; }
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 6px 10px; border: 0; border-left: 3px solid transparent;
  background: transparent; color: var(--cinza);
  font-size: 12.5px; line-height: 1.35; text-align: left; font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.nav-item:hover { background: rgba(27, 42, 74, .05); color: var(--tinta); }
.nav-item.active { background: var(--acento-suave); color: var(--navy); font-weight: 600; border-left-color: var(--acento); }
.nav-item .ico { width: 18px; height: 18px; flex: none; color: var(--cinza); }
.nav-item.active .ico { color: var(--acento-tinta); }
.nav-item-label { flex: 1; min-width: 0; }

.sidebar-rodape {
  flex: none; padding: 12px 14px 14px; border-top: 1px solid var(--linha);
  background: #f6f8fb; font-size: 10.5px; line-height: 1.5; color: var(--cinza-claro);
}
.sidebar-rodape strong { display: block; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--cinza-claro); margin-bottom: 3px; }
.sidebar-rodape span { color: var(--cinza); }

.sidebar, .sidebar-nav { scrollbar-width: thin; scrollbar-color: rgba(27, 42, 74, .14) transparent; }
.sidebar::-webkit-scrollbar, .sidebar-nav::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-track, .sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb, .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(27, 42, 74, .14); border-radius: 3px; }

.sidebar-backdrop { display: none; }

/* ============================================================
   ÁREA PRINCIPAL E BARRA SUPERIOR
   ============================================================ */
.main { margin-left: var(--largura-lateral); flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

.topbar {
  min-height: var(--altura-topo); flex: none;
  display: flex; align-items: center; gap: 20px; padding: 12px 30px;
  background: linear-gradient(180deg, #ffffff, #fcfdfe);
  border-bottom: 1px solid var(--linha); box-shadow: 0 1px 0 rgba(27, 42, 74, .04);
  position: sticky; top: 0; z-index: 20;
}
.topbar-title { flex: 1 1 240px; min-width: 0; }
.topbar-title h1 { margin: 0; font-family: var(--serifa); font-size: 22px; font-weight: 600; line-height: 1.25; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-sub { margin-top: 4px; font-size: 10px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: var(--cinza); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-sub .divisor { letter-spacing: 0; opacity: .55; margin: 0 3px; }

.lente { display: flex; align-items: flex-end; gap: 16px; flex: none; }
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo-label { font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--cinza-claro); }
.select, .input {
  min-height: 36px; padding: 7px 34px 7px 12px; background: var(--papel); color: var(--tinta);
  border: 1px solid var(--borda-campo); border-radius: var(--raio); font-size: 13px; font-family: inherit; line-height: 1.4;
  transition: border-color .15s, box-shadow .15s;
}
.select {
  cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235f6d82' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8l4.5 4.5L14.5 8'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 18px;
}
.input { padding-right: 12px; }
.select:hover, .input:hover { border-color: #93a5bb; }
.select:focus, .input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27, 42, 74, .1); }

.segmentado { display: inline-flex; align-items: stretch; gap: 22px; padding-bottom: 2px; }
.segmentado button { padding: 0 0 4px; border: 0; border-bottom: 2px solid transparent; background: none; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--cinza-claro); font-family: inherit; }
.segmentado button:hover { color: var(--cinza); }
.segmentado button.active { color: var(--navy); font-weight: 700; border-bottom-color: var(--acento); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 36px; padding: 7px 18px; border: 1px solid var(--navy); border-radius: var(--raio);
  background: var(--navy); color: var(--papel); font-size: 12.5px; font-weight: 600; white-space: nowrap; font-family: inherit;
  transition: background .15s, border-color .15s, color .15s;
}
.btn:hover:not(:disabled) { background: var(--navy-claro); border-color: var(--navy-claro); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-outline { background: var(--papel); border-color: var(--borda-campo); color: var(--navy); }
.btn-outline:hover:not(:disabled) { background: var(--navy-suave); border-color: #93a5bb; }

.acao-texto {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 0;
  border: 0; border-bottom: 1px solid transparent; background: none; color: var(--cinza);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; font-family: inherit;
}
.acao-texto:hover:not(:disabled) { color: var(--navy); border-bottom-color: var(--acento); }
.acao-texto:disabled { opacity: .45; cursor: not-allowed; }
.acao-texto .ico { width: 18px; height: 18px; flex: none; }

.status { font-size: 10px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--cinza); }
.status.ok { color: var(--ok); } .status.alerta { color: var(--alerta); } .status.erro { color: var(--erro); }

.mobile-menu-btn {
  display: none; flex-direction: column; gap: 4px; flex: none;
  width: 36px; height: 36px; align-items: center; justify-content: center;
  border: 1px solid var(--borda-campo); border-radius: var(--raio); background: var(--papel);
}
.mobile-menu-btn span { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--navy); }

.content { flex: 1; width: 100%; max-width: 1560px; padding: 20px 30px 30px; align-self: stretch; display: flex; flex-direction: column; gap: 16px; }
.ico { width: 20px; height: 20px; flex: none; }

/* ============================================================
   INDICADORES
   ============================================================ */
.indicadores { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ind {
  position: relative; padding: 15px 19px 17px; background: linear-gradient(180deg, #fff, #fbfcfe);
  border: 1px solid var(--linha); border-top: 2px solid var(--acento); border-radius: 3px;
  box-shadow: var(--sombra); display: flex; flex-direction: column; gap: 4px;
}
/* Indicador em destaque: filete superior em âmbar e número na cor de alerta.
   O destaque marca o que pede leitura, não o que está irregular. */
.ind.marcado {
  border-top-color: transparent; border-top-width: 2px; border-top-style: solid;
  border-image: linear-gradient(90deg, #d4a44a, #a3711a) 1;
}
.ind-valor.marcado { color: var(--alerta); }
.ind-label { font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--cinza-claro); }
.ind-valor { font-family: var(--serifa); font-size: 30px; font-weight: 600; line-height: 1.15; color: var(--navy); }
.ind-valor small { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; color: var(--cinza); letter-spacing: 0; margin-left: 4px; }
.ind-nota { font-size: 11.5px; line-height: 1.45; color: var(--cinza); }
.ind-nota.alerta { color: var(--alerta); }

/* ============================================================
   PAINÉIS
   ============================================================ */
.linha { display: grid; gap: 16px; }
.panel { background: var(--papel); border: 1px solid var(--linha); border-radius: 3px; padding: 18px 22px 20px; box-shadow: var(--sombra); display: flex; flex-direction: column; min-width: 0; }
.panel-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--linha-suave); }
.panel-hd h3 { margin: 0; font-family: var(--serifa); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--navy); }
.panel-hd .hint { margin-top: 2px; font-size: 11px; color: var(--cinza); line-height: 1.4; max-width: 70ch; }
.panel-hd .acoes { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }

/* Barras horizontais (uma série, navy). Trilho com relevo. */
.barras { display: flex; flex-direction: column; gap: 9px; }
.barra { display: grid; grid-template-columns: 220px 1fr 118px; align-items: center; gap: 10px; font-size: 12px; }
.barra .rotulo { color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barra .trilho { height: 13px; background: linear-gradient(180deg, #e4eaf1, #eef2f7); border-radius: 0 4px 4px 0; overflow: hidden; }
.barra .cheio { height: 100%; background: linear-gradient(90deg, #2b3e64, #1b2a4a); border-radius: 0 4px 4px 0; }
.barra .cheio.sec { background: var(--acento); }
/* Estoque a adequar: âmbar, a mesma tinta do indicador em destaque. */
.barra .cheio.adequar { background: linear-gradient(90deg, #c99b3f, #a3711a); }
.barra .valor { text-align: right; color: var(--cinza); font-variant-numeric: tabular-nums; }

/* Colunas (série no tempo) */
.colunas { display: flex; align-items: flex-end; gap: 22px; height: 150px; padding: 0 8px; border-bottom: 1px solid var(--linha); }
.coluna { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.coluna .valor { font-size: 11px; color: var(--cinza); font-variant-numeric: tabular-nums; }
.coluna .pilar { width: 100%; max-width: 64px; background: var(--navy); border-radius: 4px 4px 0 0; min-height: 2px; }
.coluna .pilar.suave { background: var(--navy-suave); }
.colunas-eixo { display: flex; gap: 22px; padding: 6px 8px 0; }
.colunas-eixo span { flex: 1; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--cinza-claro); }
.legenda { display: flex; gap: 18px; margin-top: 10px; font-size: 11px; color: var(--cinza); flex-wrap: wrap; }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--navy); }
.legenda i.sec { background: var(--acento); }
.rampa { display: flex; gap: 2px; }
.rampa i { width: 22px; height: 8px; border-radius: 2px; margin: 0; }

/* ============================================================
   TABELA
   ============================================================ */
table.tabela-casa { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.tabela-casa th { padding: 8px 10px; text-align: left; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--cinza-claro); border-bottom: 1px solid var(--linha); white-space: nowrap; }
table.tabela-casa td { padding: 9px 10px; border-bottom: 1px solid var(--linha-suave); color: var(--tinta); vertical-align: middle; }
table.tabela-casa td.num, table.tabela-casa th.num { text-align: right; font-variant-numeric: tabular-nums; }
table.tabela-casa td.forte { font-weight: 600; color: var(--navy); }
table.tabela-casa td.sec { color: var(--cinza); }
/* Alíquota fora de vigência (22/09/2026, public/js/aliquota.js): o número que o
   ente declarou continua à vista, em cinza, com a data do encerramento logo
   abaixo. Célula vazia não informa; o estado do dado informa. */
table.tabela-casa td span.sec { color: var(--cinza); }
.aliq-nota { font-size: 10px; line-height: 1.3; color: var(--cinza-claro); margin-top: 1px; white-space: nowrap; }
table.tabela-casa tr.par td { background: var(--papel-suave); }
.pilula { display: inline-block; padding: 1px 8px; border: 1px solid var(--linha); border-radius: 10px; font-size: 10px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--cinza); background: none; font-family: inherit; cursor: pointer; }
.pilula.acento { border-color: var(--acento); color: var(--acento-tinta); background: var(--acento-suave); }
/* Tabela larga em tela estreita: rola dentro do painel, em vez de
   empurrar a página inteira para além da largura do aparelho. */
.rolagem-x { overflow-x: auto; }
.rolagem-x > table.tabela-casa { min-width: 640px; }
.tabela-rodape { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; font-size: 11.5px; color: var(--cinza); flex-wrap: wrap; gap: 8px; }
.paginacao { display: flex; gap: 14px; }
.paginacao span, .paginacao button { font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--cinza-claro); background: none; border: 0; font-family: inherit; cursor: pointer; padding: 0; }
.paginacao span.active, .paginacao button.active { color: var(--navy); border-bottom: 2px solid var(--acento); }

/* ============================================================
   FILTROS EM LINHA
   ============================================================ */
.filtros { display: flex; align-items: flex-end; gap: 14px; padding: 14px 20px 16px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--raio-folha); box-shadow: var(--sombra); flex-wrap: wrap; }
/* Filtro sem folha: os campos ficam soltos sobre o fundo, como na tela de
   carteira, em que a faixa de contexto logo abaixo já é o primeiro plano. */
.filtros.solta { padding: 0; background: none; border: 0; box-shadow: none; gap: 16px; }
.filtros .campo { flex: 1; min-width: 130px; } .filtros .campo.curto { flex: 0 0 150px; } .filtros .campo.largo { flex: 1.6; min-width: 220px; }
.filtros .select, .filtros .input { width: 100%; }
.contagem { font-size: 11.5px; color: var(--cinza); }
.mapa { flex: 1; min-height: 260px; background: linear-gradient(160deg, #f1f4f8, #e6ebf2); border: 1px dashed var(--linha); border-radius: var(--raio); display: flex; align-items: center; justify-content: center; text-align: center; color: var(--cinza); font-size: 11.5px; line-height: 1.5; padding: 20px; }

/* ============================================================
   ESCALA DE ADERÊNCIA AO PRÓ-GESTÃO
   ------------------------------------------------------------
   Componente único, usado por Painel, Municípios, Carteira de
   ativos, Governança e Riscos. Dois estados de situação (neutro
   e âmbar) e quatro degraus de nível, em rampa sequencial que
   escurece do I ao IV; separação validada em visão normal e nas
   três formas de daltonismo.

   A classe de estado (.pg-sem, .pg-aderiu, .pg-n1..n4) não
   pinta nada por si: define as tintas da escala em variáveis, e
   cada peça (selo, faixa, preenchimento de barra, texto) as
   consome. Assim a cor do nível é dita uma única vez.

   .pg-indeterminado não é um dos seis estados: vale quando a
   apuração do nível não pôde ser feita, e nunca deve ser lido
   como "sem Pró-Gestão".
   ============================================================ */
.pg-sem            { --pg-a: #f3f5f8; --pg-b: #e7ebf1; --pg-borda: #ccd5e0; --pg-tinta: #566275; --pg-faixa-a: #8896a8; --pg-faixa-b: #6b7a8f; --pg-lavagem: #fafbfc; }
.pg-aderiu         { --pg-a: #fdf5e6; --pg-b: #f8e8c9; --pg-borda: #e3c88f; --pg-tinta: #85601a; --pg-faixa-a: #c99b3f; --pg-faixa-b: #b07d1f; --pg-lavagem: #fefbf5; }
.pg-n1             { --pg-a: #e9f6f3; --pg-b: #cfeae4; --pg-borda: #93cdc3; --pg-tinta: #0b6b5e; --pg-faixa-a: #2aa897; --pg-faixa-b: #0f8f7e; --pg-lavagem: #f6fcfb; }
.pg-n2             { --pg-a: #ecf1fc; --pg-b: #d5e0f8; --pg-borda: #a5bced; --pg-tinta: #1e46a0; --pg-faixa-a: #4a7ce0; --pg-faixa-b: #2a5ed2; --pg-lavagem: #f7f9fe; }
.pg-n3             { --pg-a: #f8eef9; --pg-b: #eeddf0; --pg-borda: #d3aed6; --pg-tinta: #6f3073; --pg-faixa-a: #ac5ab0; --pg-faixa-b: #96429a; --pg-lavagem: #fcf8fd; }
.pg-n4             { --pg-a: #6a3d8c; --pg-b: #3f2456; --pg-borda: #3f2456; --pg-tinta: #ffffff; --pg-faixa-a: #6a3d8c; --pg-faixa-b: #4a2a63; --pg-lavagem: #faf7fc; }
.pg-indeterminado  { --pg-a: #f6f8fb; --pg-b: #eef2f7; --pg-borda: #d9e1e9; --pg-tinta: #526278; --pg-faixa-a: #c3cddb; --pg-faixa-b: #a8b4c5; --pg-lavagem: #fafbfd; }

.selo-progestao {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 2px 10px; border-radius: 11px;
  font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; white-space: nowrap;
  color: var(--pg-tinta); background: linear-gradient(135deg, var(--pg-a), var(--pg-b)); border: 1px solid var(--pg-borda);
}
.selo-progestao.compacto { padding: 1px 8px; border-radius: 10px; letter-spacing: 1px; }

.faixa-progestao {
  display: inline-block; width: 4px; height: 26px; border-radius: 2px;
  vertical-align: -8px; margin-right: 10px;
  background: linear-gradient(180deg, var(--pg-faixa-a), var(--pg-faixa-b));
}
.preenchimento-progestao { background: linear-gradient(90deg, var(--pg-faixa-a), var(--pg-faixa-b)); }
.tinta-progestao { color: var(--pg-tinta); }

/* ============================================================
   ESTADOS VAZIOS, GIRO, SOBREPOSIÇÃO
   ============================================================ */
.empty { padding: 28px 22px; text-align: center; border: 1px dashed var(--linha); border-radius: var(--raio); background: var(--papel-suave); color: var(--cinza); font-size: 12.5px; line-height: 1.6; }
.empty p { max-width: 56ch; margin: 0 auto; line-height: 1.6; }
.spinner { width: 26px; height: 26px; margin: 0 auto 10px; border: 3px solid var(--linha); border-top-color: var(--navy); border-radius: 50%; animation: girar .8s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ============================================================
   PROSA (tela Sobre)
   ============================================================ */
.prosa { max-width: 78ch; font-size: 13.5px; line-height: 1.75; color: var(--tinta); }
.prosa h2 { font-family: var(--serifa); font-size: 18px; font-weight: 600; color: var(--navy); margin: 26px 0 10px; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { font-family: var(--serifa); font-size: 14.5px; font-weight: 600; color: var(--navy); margin: 18px 0 6px; }
.prosa p { margin: 0 0 12px; }
.prosa ul { margin: 0 0 12px 1.3em; padding: 0; }
.prosa li { margin-bottom: 5px; }
.prosa .fonte-nota { margin-top: 4px; font-size: 11.5px; color: var(--cinza-claro); }

/* ============================================================
   TELAS ESTREITAS
   ============================================================ */
@media (max-width: 1080px) {
  .sidebar { width: min(288px, 86vw); transform: translateX(-104%); transition: transform .22s ease; box-shadow: 4px 0 24px rgba(15, 23, 42, .25); }
  .sidebar.open { transform: none; }
  .sidebar-backdrop { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(15, 23, 42, .45); opacity: 0; pointer-events: none; transition: opacity .2s; }
  .sidebar-backdrop.on { opacity: 1; pointer-events: auto; }
  .main { margin-left: 0; }
  .mobile-menu-btn { display: inline-flex; }
  body.menu-open { overflow: hidden; }
  .indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .topbar { flex-wrap: wrap; padding: 12px 18px; gap: 12px; }
  .content { padding: 18px 18px 30px; }
  .panel { padding: 16px 16px 18px; }
  .panel-hd { flex-direction: column; align-items: flex-start; }
  .linha { grid-template-columns: 1fr !important; }
  .barra { grid-template-columns: 110px 1fr 92px; }
}
@media (max-width: 600px) {
  .indicadores { grid-template-columns: 1fr; }
}