/* Aparência do sistema. As cores ficam em variáveis: o tema escuro só troca os valores. */

:root {
  color-scheme: light;
  --fundo: #f2f6fb;
  --superficie: #ffffff;
  --superficie-2: #f5f8fc;
  --linha: #e2e9f2;
  --borda-forte: #cdd7e4;
  --texto: #0e1c33;
  --texto-2: #44536a;
  --texto-3: #64748b;
  --acento: #2a78d6;
  --acento-texto: #1c5cab;
  --acento-suave: #e8f1fc;
  --botao-primario: #1c5cab;
  --trilho: #cde2fb;
  --negativo: #b42318;
  --critico: #d03b3b;
  --critico-suave: #fdecec;
  --bom: #0ca30c;
  --alerta: #fab219;
  --neutro: #9aa3af;
  /* etapas dos lançamentos: um só tom de azul, do mais claro (provisionado) ao mais escuro (concluído) */
  --etapa-1: #86b6ef;
  --etapa-2: #3987e5;
  --etapa-3: #1c5cab;
  --etapa-4: #0d366b;
  /* fontes do orçamento: 3 cores distintas, validadas para daltonismo */
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --serie-4: #eda100;
  /* barras de valor: azul da UnB que chega ao verde do cerrado */
  --degrade-barra: linear-gradient(90deg, #2a78d6, #22a39a);
  --menu-fundo: linear-gradient(180deg, #0d3170 0%, #0a2556 48%, #071a3e 100%);
  --menu-texto: #c3d2ea;
  --menu-titulo: #7d95bd;
  --menu-ativo: linear-gradient(90deg, #2f7de8, #1d5fc9);
  --heroi-fundo: linear-gradient(140deg, #0d3170 0%, #1a56b8 70%, #1f7fa8 100%);
  --sombra: 0 1px 2px rgba(14, 42, 90, .04), 0 10px 28px -14px rgba(14, 42, 90, .18);
  --raio: 18px;
  --fonte: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fonte-titulo: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Tema escuro só na tela: impresso, sai sempre claro. */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --fundo: #081224; --superficie: #0e1c33; --superficie-2: #13233d; --linha: #1d2f4c; --borda-forte: #2b4063;
    --texto: #eef3fb; --texto-2: #b8c6da; --texto-3: #8e9db3;
    --acento: #3987e5; --acento-texto: #86b6ef; --acento-suave: #15253b; --botao-primario: #2a78d6; --trilho: #1d3352;
    --negativo: #f08080; --critico: #e66767; --critico-suave: #301818;
    --etapa-1: #184f95; --etapa-2: #2a78d6; --etapa-3: #5598e7; --etapa-4: #9ec5f4;
    --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500;
    --menu-fundo: linear-gradient(180deg, #0a1d40 0%, #071630 55%, #050f22 100%);
    --heroi-fundo: linear-gradient(140deg, #0f2f66 0%, #1a4f9f 70%, #1b6c8c 100%);
    --degrade-barra: linear-gradient(90deg, #3987e5, #26b3a8);
    --sombra: 0 12px 30px -18px rgba(0, 0, 0, .6);
  }
}
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --fundo: #081224; --superficie: #0e1c33; --superficie-2: #13233d; --linha: #1d2f4c; --borda-forte: #2b4063;
    --texto: #eef3fb; --texto-2: #b8c6da; --texto-3: #8e9db3;
    --acento: #3987e5; --acento-texto: #86b6ef; --acento-suave: #15253b; --botao-primario: #2a78d6; --trilho: #1d3352;
    --negativo: #f08080; --critico: #e66767; --critico-suave: #301818;
    --etapa-1: #184f95; --etapa-2: #2a78d6; --etapa-3: #5598e7; --etapa-4: #9ec5f4;
    --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70; --serie-4: #c98500;
    --menu-fundo: linear-gradient(180deg, #0a1d40 0%, #071630 55%, #050f22 100%);
    --heroi-fundo: linear-gradient(140deg, #0f2f66 0%, #1a4f9f 70%, #1b6c8c 100%);
    --degrade-barra: linear-gradient(90deg, #3987e5, #26b3a8);
    --sombra: 0 12px 30px -18px rgba(0, 0, 0, .6);
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font: 14px/1.5 var(--fonte);
  background: var(--fundo);
  color: var(--texto);
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  min-height: 100vh;
}
h1, h2, h3 { margin: 0; line-height: 1.25; font-family: var(--fonte-titulo); }
a { color: var(--acento-texto); }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- menu lateral ---------- */
.menu {
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  /* ondas finas (verde → azul) no pé do menu, sobre o degradê azul-marinho */
  background: url(menu-ondas.svg) no-repeat left bottom / 100% auto, var(--menu-fundo);
  color: var(--menu-texto);
  padding: 22px 14px 18px; display: flex; flex-direction: column;
}
.marca { display: flex; align-items: center; gap: 12px; padding: 0 8px 18px; color: #fff; }
.marca img { border-radius: 11px; width: 40px; height: 40px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5); }
.marca div { display: flex; flex-direction: column; line-height: 1.2; }
.marca strong { white-space: nowrap; font-family: var(--fonte-titulo); font-size: 17px; font-weight: 650; letter-spacing: -.01em; }
.marca small { color: var(--menu-titulo); font-size: 12px; margin-top: 2px; }
.menu .icone { flex-shrink: 0; align-self: center; opacity: .85; }
.menu { scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .15) transparent; }
.menu h4 { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: var(--menu-titulo); margin: 14px 12px 3px; font-weight: 600; }
.menu nav a {
  display: flex; align-items: baseline; gap: 10px; padding: 6px 12px; border-radius: 10px;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.menu nav > a { margin: 1px 0; }
.menu nav a b { font-weight: 500; }
.menu nav a[aria-current="page"] b, .menu nav a.aberto b { font-weight: 650; }
.menu nav a small { font-size: 12px; opacity: .75; overflow: hidden; text-overflow: ellipsis; }
.menu nav a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
/* item aberto: pílula azul acesa */
.menu nav a[aria-current="page"] { background: var(--menu-ativo); color: #fff; box-shadow: 0 6px 16px -8px rgba(20, 100, 230, .9); }
.menu nav a[aria-current="page"] .icone { opacity: 1; }
.menu-rodape { margin-top: auto; padding-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.botao-menu {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; font: inherit; font-size: 11.5px; cursor: pointer;
  background: rgba(255, 255, 255, .07); color: var(--menu-texto); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 10px; padding: 8px 4px 6px; text-decoration: none; text-align: center; white-space: nowrap;
}
.botao-menu .icone { width: 16px; height: 16px; }
.botao-menu:hover { background: rgba(255, 255, 255, .14); color: #fff; }
.menu-assinatura {
  margin: 14px 8px 0; color: #fff; font-family: var(--fonte-titulo); font-weight: 650; font-size: 13.5px; line-height: 1.3;
  display: flex; flex-direction: column;
}
.menu-assinatura small { color: var(--menu-texto); font-family: var(--fonte); font-weight: 400; font-size: 11.5px; opacity: .8; }
.topo-movel { display: none; }

/* ---------- conteúdo ---------- */
.conteudo {
  padding: 32px 32px 64px; width: 100%; max-width: 1480px;
  background: url(ondas.svg) no-repeat right -40px top -70px / min(460px, 45%) auto;
}
/* no Painel as ondas são maiores e descem até o título */
.conteudo:has(.cabecalho-painel) { background-position: right -40px top -30px; background-size: min(720px, 70%) auto; }
.pagina { display: flex; flex-direction: column; gap: 16px; }
.cabecalho-pagina { margin-bottom: 4px; }
.cabecalho-pagina h1 { font-size: 30px; font-weight: 700; letter-spacing: -.02em; }
.cabecalho-pagina p { margin: 4px 0 0; color: var(--texto-3); }
/* Painel: título grande e subtítulo espaçado */
.cabecalho-painel { margin-bottom: 10px; }
.cabecalho-painel h1 { font-size: clamp(30px, 3.2vw, 40px); }
.cabecalho-painel p { font-size: 15px; letter-spacing: .14em; color: var(--texto-2); margin-top: 8px; }
.cabecalho-secao { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }
.cabecalho-secao h2 { font-size: 18px; }
.carregando { color: var(--texto-3); }

.cartao {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 20px; box-shadow: var(--sombra); min-width: 0;
}
.titulo-bloco { margin-bottom: 14px; }
.titulo-bloco h2 { font-size: 17px; font-weight: 650; letter-spacing: -.005em; }
.titulo-bloco.com-icone { display: flex; gap: 14px; align-items: center; margin-bottom: 18px; }
.icone-bloco {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acento-suave); color: var(--acento-texto);
}
.icone-bloco .icone { width: 22px; height: 22px; }
.titulo-bloco p { margin: 3px 0 0; color: var(--texto-3); font-size: 13px; }
.nota { color: var(--texto-3); font-size: 12.5px; margin: 12px 0 0; }

/* Painel, topo: "Saldo atual" + 3 indicadores num bloco 2×2 e, ao lado, a situação dos lançamentos. */
.grade-topo { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1180px) { .grade-topo { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
.grade-quatro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 600px) { .grade-quatro { grid-template-columns: minmax(0, 1fr); } }
.grade-quatro .indicador { padding: 20px 22px; gap: 3px; }
.grade-quatro .indicador .valor { font-size: 25px; margin-top: 2px; }
.marca-indicador {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 12px;
  background: var(--acento-suave); color: var(--acento-texto);
}
.indicador.critico .marca-indicador { background: var(--critico-suave); color: var(--negativo); }
.grade-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)); gap: 16px; }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 16px; }
/* gráfico principal largo + um menor ao lado (como no Painel) */
.grade-larga { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 1180px) { .grade-larga { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); } }
/* cartão que estica o conteúdo até a altura do vizinho da mesma linha */
.cartao-coluna { display: flex; flex-direction: column; }
.cartao-coluna > .legenda { flex: 1; align-content: space-evenly; }
.lista-blocos { display: flex; flex-direction: column; gap: 16px; }

/* ---------- indicadores ---------- */
.indicador { display: flex; flex-direction: column; gap: 4px; }
.indicador .rotulo, .heroi .rotulo { font-size: 13px; color: var(--texto-2); font-weight: 500; }
.indicador .valor { font-family: var(--fonte-titulo); font-size: 23px; font-weight: 700; letter-spacing: -.015em; white-space: nowrap; }
.indicador .detalhe, .heroi .detalhe { font-size: 12.5px; color: var(--texto-3); }
.indicador.critico { border-color: color-mix(in srgb, var(--critico) 45%, var(--linha)); background: linear-gradient(var(--critico-suave), var(--superficie) 70%); }
.indicador.critico .valor { color: var(--negativo); }
.indicador .medidor { margin-top: 6px; }

.heroi {
  display: flex; flex-direction: column; gap: 6px; color: #fff; border: 0;
  background: url(ondas.svg) no-repeat right -140px bottom -70px / 560px auto, var(--heroi-fundo);
  box-shadow: 0 18px 40px -22px rgba(13, 49, 112, .8);
}
.heroi .rotulo { color: #d6e4fb; display: flex; align-items: center; gap: 8px; }
.heroi .detalhe { color: #c9d9f3; }
.heroi .detalhe b { color: #fff; }
.heroi .negativo { color: #ffc2c2; }
.heroi .medidor { background: rgba(255, 255, 255, .2); }
.heroi .medidor span { background: linear-gradient(90deg, #8cc4ff, #6fe0c9); }
.heroi .execucao-texto { color: #d6e4fb; }
.valor-heroi { font-family: var(--fonte-titulo); font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.1; }
.execucao { margin-top: auto; padding-top: 14px; display: grid; gap: 8px; }
.execucao-texto { display: flex; justify-content: space-between; font-size: 13px; color: var(--texto-2); }

.medidor { height: 8px; background: var(--trilho); border-radius: 99px; overflow: hidden; }
.medidor span { display: block; height: 100%; background: var(--degrade-barra); border-radius: 99px; }
.medidor.estourado span { background: var(--critico); }

.negativo { color: var(--negativo); font-weight: 600; }
.apagado { color: var(--texto-3); }


/* ---------- gráficos ---------- */
.empilhada { display: flex; gap: 3px; height: 22px; margin: 4px 0 18px; border-radius: 8px; overflow: hidden; }
.empilhada span { min-width: 3px; flex-basis: 0; }
.empilhada span:hover, .barras-barra:hover { filter: brightness(1.12); }
.legenda { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.legenda li { display: grid; grid-template-columns: 12px 1fr auto; gap: 10px; align-items: center; }
.legenda i { width: 14px; height: 14px; border-radius: 50%; }
.legenda li { padding: 4px 0; }
.legenda span { display: flex; flex-direction: column; line-height: 1.3; }
.legenda small { color: var(--texto-3); font-size: 12px; }
.legenda strong { font-variant-numeric: tabular-nums; font-weight: 600; }

.barras { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.barras li { display: grid; grid-template-columns: minmax(120px, 36%) 1fr; gap: 14px; align-items: center; font-size: 13px; }
.barras-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--texto-2); }
.barras-trilho { display: flex; align-items: center; gap: 8px; min-width: 0; }
.barras-barra { height: 14px; width: calc((100% - 84px) * var(--fracao)); min-width: 4px; background: var(--degrade-barra); border-radius: 99px; flex-shrink: 0; }
.barras-valor { color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- selos e filtros ---------- */
.selo {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--texto-2);
  background: var(--superficie-2); border: 1px solid var(--linha); border-radius: 999px; padding: 1px 9px; white-space: nowrap;
}
.selo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--neutro); }
.selo.bom::before { background: var(--bom); }
.selo.alerta::before { background: var(--alerta); }
.selo.critico::before { background: var(--critico); }

.filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip {
  display: inline-flex; align-items: center; gap: 7px; font: inherit; font-size: 13px; cursor: pointer;
  background: var(--superficie); color: var(--texto-2); border: 1px solid var(--linha); border-radius: 999px; padding: 5px 12px;
}
.chip i { width: 10px; height: 10px; border-radius: 3px; }
.chip small { color: var(--texto-3); }
.chip:hover { border-color: var(--borda-forte); }
.chip[aria-pressed="true"] { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-texto); font-weight: 600; }
.chip .selo { border: 0; background: none; padding: 0; }
.filtros select, .busca {
  font: inherit; font-size: 13px; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--linha); border-radius: 8px; padding: 6px 10px;
}

/* ---------- botões ---------- */
.botao {
  font: inherit; font-weight: 500; cursor: pointer; white-space: nowrap;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borda-forte); border-radius: 10px; padding: 8px 16px;
}
.botao:hover { background: var(--superficie-2); }
.botao.primario { background: var(--menu-ativo); border-color: transparent; color: #fff; box-shadow: 0 6px 14px -8px rgba(29, 95, 201, .9); }
.botao.primario:hover { filter: brightness(1.1); }
.botao.perigo { color: var(--negativo); border-color: color-mix(in srgb, var(--negativo) 45%, transparent); }

/* ---------- tabelas ---------- */
.bloco-tabela { padding: 0; overflow: hidden; }
.barra-tabela { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.barra-tabela h2 { font-size: 15px; font-weight: 600; }
.contador { color: var(--texto-3); font-size: 12.5px; }
.espaco { flex: 1; }
.busca { width: 220px; }
.rolagem { overflow-x: auto; }
.rolagem.limite { max-height: 360px; overflow-y: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th {
  text-align: left; font-weight: 600; color: var(--texto-2); background: var(--superficie-2);
  padding: 9px 10px; border-bottom: 1px solid var(--linha); vertical-align: bottom;
}
/* Cabeçalhos longos ("Pago (todos os contratos)") quebram em duas linhas para as colunas caberem na tela. */
.tabela th.num { min-width: 92px; white-space: normal; }
.tabela.editavel th { cursor: pointer; user-select: none; }
.tabela.editavel th:hover { color: var(--texto); }
.tabela td { padding: 8px 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tbody tr:last-child td { border-bottom: 0; }
.tabela.editavel tbody tr[data-linha], .tabela.pendencias tbody tr { cursor: pointer; }
.tabela tbody tr:hover td { background: var(--superficie-2); }
.tabela .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabela .centro { text-align: center; }
.tabela td.texto { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela td.texto.quebra { white-space: normal; min-width: 130px; max-width: 220px; line-height: 1.35; }
.tabela tfoot td { font-weight: 650; border-top: 1px solid var(--borda-forte); border-bottom: 0; background: var(--superficie-2); }
.tabela tr.vazia td { text-align: center; color: var(--texto-3); padding: 28px; cursor: default; }
.tabela input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--acento); cursor: pointer; }
.tabela.resumo td:first-child { white-space: nowrap; }
.tabela.pendencias td.texto { max-width: 280px; }
/* tabela de resumo encostada nas bordas do cartão */
.cartao:not(.bloco-tabela) > .rolagem { margin: 0 -20px -20px; }
.cartao > .rolagem .tabela td:first-child, .cartao > .rolagem .tabela th:first-child { padding-left: 20px; }
.cartao > .rolagem .tabela td:last-child, .cartao > .rolagem .tabela th:last-child { padding-right: 20px; }
.marca-obs {
  display: inline-grid; place-items: center; width: 16px; height: 16px; margin-right: 6px; border-radius: 50%;
  background: var(--acento-suave); color: var(--acento-texto); font-size: 11px; font-weight: 700; font-style: italic; vertical-align: 1px;
}
.formula { margin-left: 4px; color: var(--texto-3); font-style: italic; text-decoration: none; cursor: help; }

/* ---------- formulário (janela) ---------- */
dialog.formulario {
  border: 0; border-radius: 16px; padding: 0; width: min(720px, calc(100vw - 24px));
  background: var(--superficie); color: var(--texto); box-shadow: 0 24px 64px rgba(0, 0, 0, .28);
}
dialog.formulario::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
.formulario header { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--linha); }
.formulario header h2 { font-size: 17px; }
.fechar { font-size: 22px; line-height: 1; background: none; border: 0; color: var(--texto-3); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.fechar:hover { background: var(--superficie-2); color: var(--texto); }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 20px 22px; max-height: 64vh; overflow-y: auto; }
.campo { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--texto-2); font-weight: 500; }
.campo.largo { grid-column: 1 / -1; }
.campo small { color: var(--texto-3); font-weight: 400; font-size: 11.5px; }
.obrigatorio { color: var(--negativo); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 14px; font-weight: 400; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: 8px; padding: 8px 10px; width: 100%;
}
.campo textarea { resize: vertical; }
.campo.caixa { flex-direction: row; align-items: center; gap: 8px; color: var(--texto); cursor: pointer; }
.campo.caixa input { width: 17px; height: 17px; accent-color: var(--acento); }
/* Várias escolhas (ex.: termos de um empenho), separadas por contrato */
.campo.varios { border: 1px solid var(--borda-forte); border-radius: 8px; padding: 8px 12px 10px; margin: 0; min-width: 0; }
.campo.varios legend { padding: 0 4px; }
.grupo-varios { display: flex; flex-direction: column; gap: 5px; }
.grupo-varios + .grupo-varios { border-top: 1px solid var(--borda-forte); padding-top: 6px; margin-top: 4px; }
.grupo-varios b, .grupo-varios summary { font-size: 12px; color: var(--texto-3); font-weight: 600; }
.grupo-varios summary { cursor: pointer; }
details.grupo-varios[open] summary { margin-bottom: 2px; }
.grupo-varios label { display: flex; align-items: center; gap: 6px; color: var(--texto); font-weight: 400; cursor: pointer; }
.campo.varios input { width: 16px; height: 16px; padding: 0; accent-color: var(--acento); }
.erro-formulario { color: var(--negativo); margin: 0 22px; min-height: 1em; font-weight: 500; }
.formulario footer { display: flex; gap: 8px; padding: 14px 22px; border-top: 1px solid var(--linha); }

/* ---------- anotações, dica e avisos ---------- */
.anotacoes { margin-top: 16px; padding: 14px 20px; }
.anotacoes summary { cursor: pointer; font-weight: 600; color: var(--texto-2); }
.anotacoes textarea {
  width: 100%; margin-top: 12px; font: inherit; color: var(--texto); background: var(--superficie-2);
  border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; resize: vertical;
}
.dica {
  position: fixed; z-index: 100; pointer-events: none; max-width: 280px;
  background: var(--texto); color: var(--superficie); border-radius: 8px; padding: 7px 10px; font-size: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}
.dica strong { display: block; font-size: 14px; font-variant-numeric: tabular-nums; }
.avisos { position: fixed; right: 20px; bottom: 20px; display: grid; gap: 8px; z-index: 200; }
.aviso {
  background: var(--texto); color: var(--superficie); padding: 10px 16px; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .2); font-weight: 500; animation: entrar .18s ease-out;
}
.aviso.erro { background: var(--critico); color: #fff; }
@keyframes entrar { from { transform: translateY(8px); opacity: 0; } }
.erro-geral h2 { margin-bottom: 8px; }

/* ---------- telas médias (notebook): menu e margens um pouco menores, sobra mais espaço para as tabelas ---------- */
@media (min-width: 901px) and (max-width: 1280px) {
  body { grid-template-columns: 212px minmax(0, 1fr); }
  .marca strong { font-size: 15.5px; }
  .conteudo { padding: 22px 20px 56px; }
}

@media (max-width: 1100px) {
  .tabela.resumo td:first-child { white-space: normal; min-width: 96px; }
}

/* ---------- telas estreitas ---------- */
@media (max-width: 900px) {
  body { grid-template-columns: minmax(0, 1fr); }
  .menu { position: fixed; inset: 0 auto 0 0; width: 272px; z-index: 50; transform: translateX(-100%); transition: transform .2s; }
  body.menu-aberto .menu { transform: none; box-shadow: 0 0 0 100vmax rgba(0, 0, 0, .4); }
  .topo-movel {
    display: flex; align-items: center; gap: 12px; padding: 10px 16px; position: sticky; top: 0; z-index: 10;
    background: var(--menu-fundo); color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .08);
  }
  .topo-movel .botao { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .2); }
  .conteudo { padding: 16px 16px 48px; }
  .grade-topo, .grade-larga { grid-template-columns: 1fr; }
  .valor-heroi { font-size: 38px; }
  .campos { grid-template-columns: 1fr; }
  .busca { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* tabelas de lançamentos têm muitas colunas: letra e espaçamento um pouco menores */
.tabela.editavel { font-size: 12.5px; }
.tabela.editavel td, .tabela.editavel th { padding-left: 8px; padding-right: 8px; }

/* ---------- formulário: campos condicionais e previsão de saldo ---------- */
.campo[hidden] { display: none; }
.resumo-formulario:not(:empty) {
  margin: 0 22px 12px; padding: 12px 14px; border-radius: 10px;
  background: var(--superficie-2); border: 1px solid var(--linha); font-size: 13px; display: grid; gap: 6px;
}
.resumo-formulario strong { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); }
.linha-previsao { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr 1fr; gap: 10px; align-items: baseline; }
.linha-previsao b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-previsao span { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- pontos de atenção e conferência ---------- */
.linha-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.contagens { display: flex; gap: 6px; flex-wrap: wrap; }
.lista-alertas { list-style: none; margin: 0; padding: 0; }
.lista-alertas li + li { border-top: 1px solid var(--linha); }
.lista-alertas a {
  display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: start;
  padding: 10px 10px; margin: 0 -10px; border-radius: 8px; color: inherit; text-decoration: none;
}
.lista-alertas a:hover { background: var(--superficie-2); }
.lista-alertas .selo { justify-self: start; margin-top: 1px; }
.lista-alertas b { display: block; font-weight: 600; }
.lista-alertas small { color: var(--texto-3); font-size: 12.5px; }
.lista-alertas .seta { color: var(--texto-3); }
.ver-mais { display: inline-block; margin-top: 10px; font-weight: 600; text-decoration: none; }
.ver-mais:hover { text-decoration: underline; }
.vazio-grande { display: flex; gap: 10px; align-items: center; color: var(--texto-2); }
.contador-menu {
  margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 999px; text-align: center;
  background: var(--critico); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px;
}

/* ---------- listas editáveis ---------- */
.itens-lista { list-style: none; margin: 0 0 12px; padding: 0; max-height: 320px; overflow-y: auto; }
.itens-lista li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--linha); }
.itens-lista li span { flex: 1; }
.itens-lista small { color: var(--texto-3); font-size: 12px; white-space: nowrap; }
.remover {
  border: 0; background: none; color: var(--texto-3); font-size: 18px; line-height: 1; cursor: pointer; padding: 2px 8px; border-radius: 6px;
}
.remover:hover { background: var(--critico-suave); color: var(--negativo); }
.adicionar { display: flex; gap: 8px; }
.adicionar input {
  flex: 1; font: inherit; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borda-forte); border-radius: 8px; padding: 7px 10px;
}

/* ---------- histórico e outros ---------- */
.historico td { vertical-align: top; }
.historico td:first-child { white-space: nowrap; }
.historico td.mudancas { color: var(--texto-2); font-size: 12.5px; max-width: 520px; }
.texto-curto { display: inline-block; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.estado-anotacao { font-weight: 400; color: var(--texto-3); }
button:disabled { opacity: .6; cursor: wait; }

/* ---------- impressão (Ctrl+P ou botão "Imprimir esta página") ---------- */
@media print {
  body { display: block; background: #fff; font-size: 12px; }
  .menu, .topo-movel, .avisos, .dica, .busca, .novo, .novo-grupo, .filtros, .restaurar, .adicionar, .remover, .anotacoes:not([open]) { display: none !important; }
  .conteudo { padding: 0; max-width: none; }
  .cartao { box-shadow: none; }
  .indicador, .item-gasto, .lista-alertas li { break-inside: avoid; }
  .rolagem, .rolagem.limite, .itens-lista { overflow: visible; max-height: none; }
  .tabela td.texto { max-width: none; white-space: normal; }
  .grade-topo, .grade-larga, .grade-2 { grid-template-columns: 1fr 1fr; }
  .medidor, .empilhada span, .legenda i, .barras-barra, .selo::before { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  a { color: inherit; text-decoration: none; }
}

/* ---------- submenu dos setores (Geral + subsetores) ---------- */
.submenu { display: grid; margin: 2px 0 6px 16px; padding-left: 8px; border-left: 1px solid rgba(255, 255, 255, .12); }
.submenu a { padding: 4px 10px; font-size: 12.5px; }
.menu nav a.aberto { color: #fff; }

/* ---------- abas de subsetor, títulos de grupo, ações ---------- */
a.chip { text-decoration: none; }
.chip[aria-current="page"] { background: var(--acento-suave); border-color: var(--acento); color: var(--acento-texto); font-weight: 600; }
.titulo-grupo { font-size: 13px; font-weight: 650; color: var(--texto-2); text-transform: uppercase; letter-spacing: .05em; margin: 18px 0 8px; }
.titulo-bloco + .titulo-grupo { margin-top: 4px; }
.cartao > .titulo-grupo + .rolagem { margin: 0 -20px 8px; }
.acoes-pagina { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- contratos ---------- */
details.contrato > summary { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 12px; align-items: center; cursor: pointer; list-style: none; }
details.contrato > summary::-webkit-details-marker { display: none; }
details.contrato > summary::before { content: "▸"; color: var(--texto-3); margin-right: 4px; }
details.contrato[open] > summary::before { content: "▾"; }
.contrato-nome { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; }
.contrato-nome b { font-size: 16px; }
.contrato-nome small, .contrato-numeros { color: var(--texto-3); font-size: 12.5px; }
.contrato-numeros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; white-space: nowrap; }
/* minmax(0, …): sem isso a tabela larga estica o cartão e as últimas colunas saem da tela */
.contrato-corpo { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.termos-periodo { display: flex; flex-direction: column; line-height: 1.3; }
.termos-periodo b { font-weight: 550; white-space: nowrap; }
.termos-periodo small { font-size: 11.5px; color: var(--texto-3); white-space: nowrap; }
.contrato-corpo > .rolagem { margin: 0 -20px; }
.contrato-corpo .bloco-tabela { box-shadow: none; }

/* ---------- subsetores vinculados (ex.: Direção → CABio, Contrato Simpress...) ---------- */
.submenu.vinculados { margin: 0 0 4px 14px; }
.submenu a small { opacity: .7; margin-left: 4px; }
.abas-subsetor.vinculados { margin-top: -6px; padding-left: 14px; border-left: 2px solid var(--acento-suave); }
.abas-subsetor.vinculados .chip { font-size: 12.5px; padding: 3px 10px; }
a.vinculado { padding-left: 16px; position: relative; }
a.vinculado::before { content: "↳"; position: absolute; left: 0; color: var(--texto-3); }
.chip[aria-current="true"] { border-color: var(--acento); color: var(--acento-texto); }
.submenu a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }

/* setas para mudar a ordem (termos dos contratos) */
.coluna-mover { width: 1%; white-space: nowrap; }
.alca {
  border: 0; background: none; color: var(--texto-3); cursor: grab; font-size: 16px; line-height: 1;
  padding: 4px 6px; border-radius: 6px; touch-action: none;
}
.alca:hover, .alca:focus-visible { background: var(--acento-suave); color: var(--acento-texto); }
.alca:active { cursor: grabbing; }
tr.arrastando td { opacity: .45; }
tr.soltar-antes td { box-shadow: inset 0 3px 0 var(--acento); }
tr.soltar-depois td { box-shadow: inset 0 -3px 0 var(--acento); }
.invisivel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media print { .coluna-mover { display: none; } }

/* ---------- parcelas por período (uma linha por vigência; abre a tabela ao clicar) ---------- */
.parcelas-periodos { padding: 0; overflow: hidden; box-shadow: none; }
.lista-periodos { display: grid; grid-template-columns: minmax(0, 1fr); }
details.periodo { border-bottom: 1px solid var(--linha); }
details.periodo:last-child { border-bottom: 0; }
details.periodo > summary {
  display: grid; grid-template-columns: 18px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 4px 14px; align-items: center;
  padding: 12px 18px; cursor: pointer; list-style: none;
}
details.periodo > summary::-webkit-details-marker { display: none; }
details.periodo > summary::before { content: "▸"; color: var(--texto-3); transition: transform .15s; }
details.periodo[open] > summary::before { transform: rotate(90deg); color: var(--acento-texto); }
details.periodo > summary:hover { background: var(--superficie-2); }
/* período aberto: faixa de destaque à esquerda, como o item ativo do menu */
details.periodo[open] > summary { background: var(--acento-suave); box-shadow: inset 3px 0 0 var(--acento); }
.periodo-vigencia { color: var(--texto-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.periodo-numeros { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 10px; align-items: center; color: var(--texto-3); font-size: 12.5px; white-space: nowrap; }
.periodo-termo .termos-periodo b { font-size: 14px; }
details.periodo > .bloco-tabela { border: 0; border-top: 1px solid var(--linha); border-radius: 0; box-shadow: none; }
details.periodo > .bloco-tabela .barra-tabela { padding: 10px 18px; }
details.periodo > .bloco-tabela .barra-tabela h2 { font-size: 13px; color: var(--texto-2); }
@media (max-width: 700px) {
  details.periodo > summary { grid-template-columns: 18px minmax(0, 1fr); }
  .periodo-vigencia, .periodo-numeros { grid-column: 2; justify-content: flex-start; }
}
@media print { details.periodo > summary::before { display: none; } }

/* ---------- faixa do Instituto (fim do painel): gasto detalhado por setor e por célula ---------- */
.faixa-ib {
  display: grid; grid-template-columns: minmax(200px, 1fr) minmax(0, 3fr); gap: 20px; align-items: center;
  padding: 22px; border-radius: var(--raio); color: #fff; overflow: hidden;
  background: url(folhas.svg) no-repeat left -30px bottom -20px / auto 150%, var(--heroi-fundo);
  box-shadow: 0 18px 40px -24px rgba(13, 49, 112, .8);
}
.faixa-texto { display: flex; flex-direction: column; gap: 2px; padding-left: 6px; }
.faixa-texto strong { font-family: var(--fonte-titulo); font-size: 18px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; }
.faixa-texto span { color: #cfe0f7; font-size: 13px; margin-top: 8px; }
.faixa-total { font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.faixa-painel { background: var(--superficie); color: var(--texto); border-radius: 14px; padding: 6px 16px; }
.faixa-linha { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 12px; align-items: center; padding: 10px 0; }
.faixa-linha + .faixa-linha { border-top: 1px solid var(--linha); }
.faixa-linha h3 { font-size: 13px; font-weight: 600; color: var(--texto-2); }
.faixa-itens { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); gap: 6px; }
.item-gasto {
  display: flex; align-items: center; gap: 8px; padding: 6px 10px 6px 8px; border-radius: 10px;
  color: inherit; text-decoration: none; border: 1px solid var(--linha); background: var(--superficie-2);
}
.item-gasto:hover { border-color: var(--acento); background: var(--acento-suave); }
.item-gasto .icone { color: var(--acento-texto); width: 17px; height: 17px; flex-shrink: 0; }
.item-gasto > span { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.item-gasto b { font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-gasto small { font-size: 12.5px; color: var(--texto-2); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .faixa-ib { grid-template-columns: 1fr; }
  .faixa-linha { grid-template-columns: 1fr; gap: 6px; }
}
@media print { .faixa-ib { background: none; color: inherit; box-shadow: none; padding: 0; } .faixa-texto span { color: inherit; } }

/* quadradinhos de saldo (Saldo por setor / por célula) e o "de <total>" da faixa */
.item-gasto small em { display: block; font-style: normal; color: var(--texto-3); font-size: 11.5px; }
.item-saldo { align-items: flex-start; padding: 8px 10px 8px 8px; }
.item-saldo .icone { margin-top: 2px; }
.item-saldo > span { flex: 1; }
.item-saldo strong { font-family: var(--fonte-titulo); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.25; }
.item-saldo small { font-size: 11.5px; color: var(--texto-3); }
.aviso-provisionado { color: var(--negativo); font-size: 12px; }
.barrinha { display: block; height: 4px; margin-top: 5px; border-radius: 99px; background: var(--trilho); overflow: hidden; }
.barrinha > i { display: block; height: 100%; border-radius: 99px; background: var(--degrade-barra); }
.barrinha.estourada > i { background: var(--critico); }
.cartao > .faixa-itens, .titulo-grupo + .faixa-itens { margin-bottom: 4px; }

/* Saldo por setor: uma linha por setor, esticadas para ocupar a altura do cartão */
.lista-setores { flex: 1; display: grid; grid-auto-rows: minmax(52px, 1fr); gap: 6px; }
.linha-setor {
  display: grid; grid-template-columns: 40px minmax(0, 1fr) minmax(0, 1.25fr) minmax(92px, auto); gap: 14px; align-items: center;
  padding: 6px 14px 6px 8px; border-radius: 14px; color: inherit; text-decoration: none; border: 1px solid transparent;
}
.linha-setor:nth-child(odd) { background: var(--superficie-2); }
.linha-setor:hover { border-color: var(--acento); background: var(--acento-suave); }
.linha-setor-icone {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: var(--acento-suave); color: var(--acento-texto);
}
.linha-setor:nth-child(odd) .linha-setor-icone { background: var(--superficie); }
.linha-setor-nome { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.linha-setor-nome b { font-weight: 650; }
.linha-setor small { font-size: 12px; color: var(--texto-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.linha-setor-gasto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.linha-setor-gasto .barrinha { height: 6px; margin: 0; }
.linha-setor strong {
  text-align: right; font-family: var(--fonte-titulo); font-size: 16px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
@media (max-width: 560px) {
  .linha-setor { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .linha-setor-gasto { grid-column: 2 / -1; grid-row: 2; }
}
@media print { .lista-setores { grid-auto-rows: auto; } .linha-setor { break-inside: avoid; } }

/* ---------- controle de empenho de um subsetor ---------- */
.resumo-empenho {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 16px; margin-bottom: 16px;
  padding: 14px 16px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--linha);
}
.resumo-empenho > div { display: flex; flex-direction: column; gap: 1px; }
.resumo-empenho span { font-size: 12.5px; color: var(--texto-2); }
.resumo-empenho strong { font-family: var(--fonte-titulo); font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.resumo-empenho small { font-size: 12px; color: var(--texto-3); }
.resumo-empenho .medidor { grid-column: 1 / -1; }
.controle-empenho .bloco-tabela { box-shadow: none; }
@media (max-width: 700px) { .resumo-empenho { grid-template-columns: 1fr; } }

/* botão "Editar" no fim da linha (tabelas com botaoEditar) */
.tabela .coluna-editar { width: 1%; white-space: nowrap; text-align: right; }
.botao-editar {
  font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; white-space: nowrap;
  color: var(--acento-texto); background: var(--acento-suave); border: 1px solid transparent; border-radius: 8px; padding: 3px 10px;
}
.botao-editar:hover, .botao-editar:focus-visible { border-color: var(--acento); }
@media print { .coluna-editar { display: none; } }

/* ---------- acesso online ---------- */
body.so-leitura .so-editor { display: none !important; }
.menu-rodape:has(> :nth-child(4)) { grid-template-columns: repeat(2, 1fr); }
.faixa-teste { display: flex; gap: 8px; align-items: center; margin: 0 0 16px; padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--alerta) 18%, transparent); color: var(--texto); border: 1px solid var(--alerta); }
.faixa-teste .icone { width: 18px; height: 18px; flex: none; }
.pagina-avulsa { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--fundo); }
.caixa-avulsa { width: min(420px, 100%); padding: 32px; text-align: center; }
.caixa-avulsa h1 { margin: 12px 0; }
.caixa-avulsa form { display: grid; gap: 12px; text-align: left; margin-top: 16px; }
.caixa-avulsa .botao { justify-self: stretch; }
.campo-link { width: 100%; min-width: 16em; font: inherit; font-size: .85em; }
.acoes-link { white-space: nowrap; }