/*
 * Identidade visual do GEAD — ADR-010.
 *
 * A paleta é a do Facebook deslocada 8° no matiz, e a razão é de contraste, não
 * de estética: o `#3b5998` original dá 6,88:1 sobre branco e não alcança AAA
 * para texto. O `#3b4d98` adotado dá 7,78:1 e passa.
 *
 * Os três azuis de apoio NÃO servem para texto, e o arquivo respeita isso:
 * `#6d84b4` só em borda e ícone, `#afbdd4` só em divisor, `#d8dfea` só em
 * superfície. Texto corrente é sempre `--tinta` ou `--gead-azul`.
 */
:root {
  --gead-azul: #3b4d98;
  --gead-azul-medio: #6d84b4;
  --gead-azul-claro: #afbdd4;
  --gead-azul-palido: #d8dfea;

  --tinta: #1c2333;
  --tinta-suave: #4a5568;
  --papel: #ffffff;
  --papel-fundo: #f5f7fa;

  --positivo: #1d6f42;
  --negativo: #9b2226;
  --atencao: #8a5a00;

  --borda: 1px solid var(--gead-azul-claro);
  --raio: 8px;
  --sombra: 0 1px 3px rgba(28, 35, 51, 0.08);
  --fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  /* Tabular para que os centavos alinhem coluna a coluna. */
  --fonte-num: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/*
 * **`hidden` tem de vencer o `display` da regra de classe.**
 *
 * A folha de estilo do navegador aplica `[hidden] { display: none }`, mas
 * `.entrada { display: grid }` é mais específica e ganha. O resultado é que a
 * tela de entrada continuava por cima do painel depois do login — o painel
 * existia, respondia a `hidden === false`, e ninguém o via.
 *
 * Nenhum teste de unidade pegaria isso: `element.hidden` era `true` e o DOM
 * estava certo. Só apareceu ao abrir a página num navegador de verdade.
 */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.5;
  color: var(--tinta);
  background: var(--papel-fundo);
}

h1, h2, h3 { margin: 0 0 0.5rem; font-weight: 600; }
h2 { font-size: 1.1rem; color: var(--gead-azul); margin-top: 1.75rem; }
h3 { font-size: 0.95rem; color: var(--gead-azul); }

/* ── Entrada ───────────────────────────────────────────────────────────── */
.entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: linear-gradient(160deg, var(--gead-azul-palido), var(--papel-fundo));
}
.cartao--entrada { width: 100%; max-width: 380px; }
.marca {
  font-size: 1.9rem; letter-spacing: 0.08em; color: var(--gead-azul);
  margin-bottom: 0;
}
.marca__sub {
  margin: 0 0 1.5rem; color: var(--tinta-suave); font-size: 0.85rem;
}

label {
  display: block; margin: 0.85rem 0 0.25rem;
  font-size: 0.8rem; font-weight: 600; color: var(--tinta-suave);
}
input[type="email"], input[type="password"], input[type="text"], input[type="date"] {
  width: 100%; padding: 0.6rem 0.7rem;
  border: var(--borda); border-radius: var(--raio);
  font: inherit; color: var(--tinta); background: var(--papel);
}
input:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  /* Contorno de 3px em azul médio: visível sem depender de cor para o daltônico. */
  outline: 3px solid var(--gead-azul-medio);
  outline-offset: 2px;
}

.botao {
  margin-top: 1.25rem; width: 100%; padding: 0.65rem 1rem;
  border: 1px solid var(--gead-azul); border-radius: var(--raio);
  background: var(--gead-azul); color: var(--papel);
  font: inherit; font-weight: 600; cursor: pointer;
}
.botao:hover { background: #33427f; }
.botao--claro, .botao--vazado {
  width: auto; margin: 0; padding: 0.4rem 0.85rem; font-size: 0.85rem;
}
.botao--vazado { background: transparent; color: var(--gead-azul); }
.botao--vazado:hover { background: var(--gead-azul-palido); }

.erro {
  margin: 0.9rem 0 0; padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--negativo); border-radius: 4px;
  background: #fdf2f2; color: var(--negativo); font-size: 0.85rem;
}

/* ── Painel ────────────────────────────────────────────────────────────── */
.topo {
  display: flex; flex-wrap: wrap; gap: 1rem; align-items: center;
  padding: 0.85rem 1.25rem;
  background: var(--gead-azul); color: var(--papel);
}
.topo__marca { font-weight: 700; letter-spacing: 0.08em; }
.topo__periodo { display: flex; align-items: center; gap: 0.5rem; }
.topo__periodo label { margin: 0; color: var(--papel); font-size: 0.8rem; }
.topo__periodo input { width: auto; }
.topo__usuario {
  margin-left: auto; display: flex; align-items: center; gap: 0.75rem;
  font-size: 0.85rem;
}
.topo .botao--vazado { border-color: var(--papel); color: var(--papel); }
.topo .botao--vazado:hover { background: rgba(255, 255, 255, 0.14); }

.aviso {
  margin: 0; padding: 0.7rem 1.25rem;
  background: #fff6e0; color: var(--atencao);
  border-bottom: 3px solid var(--atencao); font-size: 0.85rem;
}

.conteudo { padding: 0.5rem 1.25rem 3rem; max-width: 1180px; margin: 0 auto; }
.ajuda { margin: 0 0 0.75rem; color: var(--tinta-suave); font-size: 0.82rem; }

.cartao {
  background: var(--papel); border: var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 1rem 1.15rem;
}
.cartao--rolavel { padding: 0; overflow-x: auto; }

/* ── Índices ───────────────────────────────────────────────────────────── */
.indices {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.indice {
  background: var(--papel); border: var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra); padding: 0.85rem 1rem;
}
.indice__nome {
  font-size: 0.78rem; font-weight: 600; color: var(--tinta-suave);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.indice__valor {
  font-family: var(--fonte-num); font-size: 1.5rem; font-weight: 600;
  color: var(--gead-azul); margin: 0.2rem 0;
}
.indice__valor--ausente { color: var(--tinta-suave); font-size: 1rem; }
.indice__leitura { font-size: 0.76rem; color: var(--tinta-suave); }
.indice__situacao {
  display: inline-block; margin-top: 0.35rem; padding: 0.1rem 0.5rem;
  border-radius: 999px; font-size: 0.72rem; font-weight: 600;
}
/* Cor E texto: quem não distingue verde de vermelho lê a palavra. */
.indice__situacao--solvencia { background: #e3f3e9; color: var(--positivo); }
.indice__situacao--penumbra { background: #fff6e0; color: var(--atencao); }
.indice__situacao--insolvencia { background: #fdf2f2; color: var(--negativo); }

/* ── Tabelas ───────────────────────────────────────────────────────────── */
/*
 * **`min-width: 0` nos filhos, e não é detalhe.** Item de grade nasce com
 * `min-width: auto`, o que significa "nunca menor que o meu conteúdo" — e uma
 * tabela larga dentro dele empurra a GRADE, que empurra a PÁGINA. O resultado
 * é rolagem lateral do documento inteiro no celular, que o ADR-010 não aceita:
 * informação financeira não se esconde em tela menor, ela rola dentro do
 * próprio quadro.
 */
.balanco { display: grid; gap: 1rem; grid-template-columns: 1fr 1fr; }
.balanco > * { min-width: 0; }

.tabela { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
.tabela th {
  text-align: left; font-size: 0.75rem; text-transform: uppercase;
  letter-spacing: 0.03em; color: var(--tinta-suave);
  border-bottom: 2px solid var(--gead-azul-claro); padding: 0.55rem 0.75rem;
}
.tabela td { padding: 0.32rem 0.75rem; border-bottom: 1px solid #eef1f6; }
.tabela .num {
  text-align: right; font-family: var(--fonte-num);
  /* Valor monetário nunca quebra em duas linhas: "R$" numa e "259.400,00" na
     outra é lido como dois números, e em tela estreita isso acontecia. */
  white-space: nowrap;
}
.linha--grupo { font-weight: 600; background: var(--gead-azul-palido); }
.linha--sintetica { font-weight: 600; }
.linha--negativo .num { color: var(--negativo); }
.valor--retificadora { color: var(--negativo); }
.marcador--arquivada {
  font-size: 0.7rem; color: var(--tinta-suave); font-style: italic;
  margin-left: 0.4rem;
}
.conferencia { margin: 0 0 0.75rem; font-size: 0.85rem; }
.conferencia--fecha { color: var(--positivo); }
.conferencia--nao-fecha { color: var(--negativo); font-weight: 600; }

/* ── A área de soltar ───────────────────────────────────────────────────── */
/* É um `label` com o `input` dentro, então o clique e o Tab funcionam de graça;
   o `input` fica invisível mas NÃO com `display:none`, que o tiraria da ordem
   de foco e deixaria a área inalcançável por teclado. */
.soltar {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 1.4rem 1rem; margin-bottom: 0.75rem;
  border: 2px dashed var(--gead-azul-claro); border-radius: var(--raio);
  background: var(--gead-azul-palido);
  font-weight: 400; cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
}
.soltar:hover, .soltar:focus-within, .soltar--sobre {
  border-color: var(--gead-azul); background: var(--papel);
}
.soltar:focus-within { outline: 2px solid var(--gead-azul); outline-offset: 2px; }
.soltar input {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; pointer-events: none;
}
.soltar__texto { font-size: 0.92rem; color: var(--tinta); }
.soltar__ajuda { font-size: 0.78rem; color: var(--tinta-suave); }

.envios { list-style: none; margin: 0 0 0.75rem; padding: 0; }
.envio {
  font-family: var(--fonte-num); font-size: 0.8rem;
  padding: 0.25rem 0.5rem; border-left: 3px solid var(--gead-azul-claro);
  margin-bottom: 0.2rem; color: var(--tinta-suave);
}
.envio--pronto { border-left-color: var(--positivo); color: var(--tinta); }
.envio--erro { border-left-color: var(--negativo); color: var(--negativo); }

/* ── A fila de arquivos por classificar ─────────────────────────────────── */
.fila__item { margin-bottom: 0.6rem; }
.fila__cabecalho {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.8rem;
  margin-bottom: 0.6rem;
}
.fila__meta {
  font-family: var(--fonte-num); font-size: 0.78rem; color: var(--tinta-suave);
}
/* Os três seletores em linha, e quebrando juntos quando a tela aperta — o
   ADR-010 não admite esconder informação em tela menor. */
.fila__escolhas {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.fila__campo { width: auto; min-width: 11rem; flex: 1 1 11rem; margin: 0; }
.fila__revisao {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.85rem; font-weight: 400; margin: 0; white-space: nowrap;
}
.fila__revisao input { width: auto; margin: 0; }
/* O `.botao` nasce com `width: 100%` porque o lugar dele é o rodapé de um
   formulário. Aqui ele é o fim de uma linha de escolhas, e esticado empurrava
   o "Arquivar" para uma faixa própria — o cartão parecia ter dois assuntos. */
.fila__escolhas .botao {
  width: auto; margin: 0; flex: 0 0 auto; padding: 0.45rem 1.1rem;
}

.abrivel { cursor: pointer; }
.abrivel:hover { background: var(--gead-azul-palido); }
.seta {
  display: inline-block; width: 1em; color: var(--gead-azul-medio);
  transition: transform 0.12s;
}
.seta--aberta { transform: rotate(90deg); }
.tabela--fluxo .documento td {
  background: #fafbfd; font-size: 0.82rem; color: var(--tinta-suave);
}
.documento__codigo { font-family: var(--fonte-num); font-size: 0.76rem; }
.selo {
  display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600;
}
.selo--pago { background: #e3f3e9; color: var(--positivo); }
.selo--aberto { background: #fff6e0; color: var(--atencao); }
.selo--vencido { background: #fdecec; color: var(--negativo); }
.vazio { padding: 1.25rem; color: var(--tinta-suave); font-size: 0.88rem; }

/* ── Abrir e fechar ────────────────────────────────────────────────────── */
/*
 * O `+` é BOTÃO, e não uma seta numa linha clicável.
 *
 * A linha inteira clicável parecia mais confortável e não é: quem navega por
 * teclado não tem como chegar nela sem `tabindex` inventado, e quem usa leitor
 * de tela não ouve que existe algo a abrir. Um `<button>` com `aria-expanded`
 * resolve os dois de graça, e é o que o rótulo da coluna também ganha.
 */
.abrir {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.35rem; height: 1.35rem; margin-right: 0.4rem; padding: 0;
  border: var(--borda); border-radius: 4px; background: var(--papel);
  color: var(--gead-azul); font: inherit; font-size: 0.85rem; line-height: 1;
  cursor: pointer;
}
.abrir:hover { background: var(--gead-azul-palido); }
.abrir:focus-visible { outline: 2px solid var(--gead-azul); outline-offset: 1px; }
/* Na tabela de etapas o próprio NÚMERO é o botão. */
.abrir--numero {
  width: auto; min-width: 1.8rem; padding: 0 0.4rem; margin-right: 0;
  font-variant-numeric: tabular-nums; font-weight: 600;
}
.fluxo__conta { white-space: nowrap; }

/* O saldo que fecha o fluxo de caixa. */
.linha--saldo th, .linha--saldo td {
  border-top: 2px solid var(--gead-azul);
  padding-top: 0.6rem; font-size: 0.95rem;
}
.linha--saldo th { text-align: left; font-weight: 600; }
.linha--nota td { padding-top: 0.2rem; border: 0; }

/* O totalizador de coluna. Fica ACIMA do saldo final e com peso menor: as duas
   linhas respondem perguntas diferentes, e dar o mesmo destaque às duas faria
   parecer que uma confere a outra. */
.linha--total th, .linha--total td {
  border-top: 1px solid var(--gead-azul);
  padding-top: 0.5rem;
}
.linha--total th { text-align: left; font-weight: 600; }
.num--negativo { color: var(--negativo); }

/* O período que está na tela, logo abaixo do filtro. */
.periodo-ativo {
  margin: 0.35rem 0 0.9rem; font-size: 0.85rem; color: var(--tinta-suave);
}
.numero {
  display: inline-block; margin-right: 0.4rem; padding: 0.05rem 0.45rem;
  border-radius: 999px; background: var(--gead-azul-palido);
  color: var(--gead-azul); font-size: 0.75rem; font-weight: 700;
  vertical-align: middle;
}

/* Filtro dentro de uma seção, mais discreto que o do topo da aba. */
.filtros--secao {
  margin: 0 0 0.75rem; padding: 0.5rem 0.75rem;
  background: var(--papel); border: var(--borda); border-radius: var(--raio);
}

/* As linhas que o `+` abre. */
.linha--cliente th, .linha--cliente td {
  background: #fafbfd; font-size: 0.82rem;
}
.linha--cliente th { font-weight: 500; padding-left: 1.6rem; }
/* A projeção fica visualmente separada do fato: são coisas diferentes, e a
   tabela não as soma. */
.linha--projecao th, .linha--projecao td {
  color: var(--tinta-suave); font-style: italic;
  border-top: 1px dashed var(--gead-azul-claro);
}
.faixa {
  display: inline-block; margin-right: 0.5rem; padding: 0.05rem 0.45rem;
  border-radius: 999px; background: var(--papel-fundo);
  font-size: 0.72rem; color: var(--tinta-suave);
}
.faixa--recebido { background: #e3f3e9; color: var(--positivo); }
.faixa--areceber { background: #fff6e0; color: var(--atencao); }
.faixa--obra { background: var(--gead-azul-palido); color: var(--gead-azul); }
.etapa-concluida { padding: 0.25rem 0; }
.etapa-concluida__nome {
  display: inline-block; margin-right: 0.6rem; font-weight: 600;
  font-size: 0.82rem;
}

/* O título estornado e a hora anulada: continuam visíveis, e riscados. */
.linha--cancelada td, .linha--cancelada th {
  color: var(--tinta-suave); text-decoration: line-through;
  text-decoration-color: var(--gead-azul-claro);
}
.linha--cancelada .etiqueta { text-decoration: none; }
.acoes { white-space: nowrap; }
.acoes .botao { padding: 0.2rem 0.6rem; font-size: 0.78rem; margin-left: 0.3rem; }
/* O selo RT é BOTÃO: clicar abre quem paga, quanto e quando. */
.selo--rt {
  margin-left: 0.4rem; border: 0; cursor: pointer;
  background: #fdecec; color: var(--negativo); font: inherit;
  font-size: 0.7rem; font-weight: 700; padding: 0.05rem 0.45rem;
  border-radius: 999px;
}
.selo--rt:focus-visible { outline: 2px solid var(--negativo); outline-offset: 1px; }

/* ── Operação: a visão 360 ─────────────────────────────────────────────── */
.grade-360 {
  display: grid; gap: 0.75rem 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  margin: 0.75rem 0;
}
.dado { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.dado__rotulo {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--tinta-suave);
}
.dado__valor {
  font-size: 0.92rem; color: var(--tinta);
  display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap;
}
.dado--vazio .dado__valor { color: var(--tinta-suave); }
.dado__seta { color: var(--gead-azul-medio); }
.faixa--atraso { background: #fdecec; color: var(--negativo); }
.faixa--adianto { background: #e3f3e9; color: var(--positivo); }

/* A barra de avanço. O número é derivado do peso dos tetos das etapas
   concluídas — nunca digitado. */
.avanco {
  height: 0.4rem; border-radius: 999px; background: var(--gead-azul-palido);
  overflow: hidden; margin: 0.35rem 0;
}
.avanco--grande { height: 0.7rem; }
.avanco__parte { height: 100%; background: var(--gead-azul); }
.avanco__rotulo {
  margin: 0.5rem 0 0; font-size: 0.88rem; font-weight: 600;
  color: var(--gead-azul);
}

.etapa {
  border-left: 3px solid var(--gead-azul-claro);
  padding: 0.6rem 0 0.6rem 0.85rem; margin: 0.6rem 0;
}
/* A sub-etapa recua, para os dois níveis da EAP se lerem de relance. */
.etapa--n1 { margin-left: 1.5rem; border-left-color: var(--gead-azul-palido); }
.etapa__topo {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
}
.etapa__codigo { font-family: var(--fonte-num); font-weight: 600; }
.etapa__nome { font-weight: 600; margin-right: auto; }
.etapa__dados {
  display: grid; gap: 0.5rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  margin-top: 0.4rem;
}

/*
 * A Reserva Técnica.
 *
 * Verde quando o fornecedor já pagou, vermelho enquanto não — e o texto diz o
 * mesmo que a cor, porque cor sozinha não é informação para quem não a
 * distingue. É a mesma razão pela qual o selo de "pago" traz a data escrita.
 */
.cartao--rt { border-left: 3px solid var(--negativo); }
.rts { margin-top: 0.6rem; }
.rts__titulo {
  margin: 0 0 0.3rem; font-size: 0.78rem; text-transform: uppercase;
  letter-spacing: 0.04em; color: var(--tinta-suave);
}
.rt {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem;
  padding: 0.3rem 0.6rem; border-radius: var(--raio);
  font-size: 0.85rem; margin-bottom: 0.25rem;
}
.rt--recebida { background: #e3f3e9; }
.rt--pendente { background: #fdecec; }
.rt--recebida .rt__marca, .rt--recebida .rt__valor { color: var(--positivo); }
.rt--pendente .rt__marca, .rt--pendente .rt__valor { color: var(--negativo); }
.rt__valor { font-family: var(--fonte-num); font-weight: 600; }
.rt__quem { font-weight: 600; }
.rt__quando { color: var(--tinta-suave); margin-left: auto; }
.indice--verde .indice__valor { color: var(--positivo); }
.indice--vermelho .indice__valor { color: var(--negativo); }

/* ── Tablet e celular ──────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .balanco { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .topo { padding: 0.75rem 1rem; }
  .topo__usuario { margin-left: 0; width: 100%; justify-content: space-between; }
  .conteudo { padding: 0.5rem 0.85rem 2.5rem; }
  .indices { grid-template-columns: 1fr 1fr; }
  .indice__valor { font-size: 1.25rem; }
  /* Em tela estreita a tabela rola em vez de espremer o número. */
  .tabela { font-size: 0.82rem; }
  .tabela td, .tabela th { padding: 0.3rem 0.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .seta { transition: none; }
}

/* ── Abas ──────────────────────────────────────────────────────────────── */
.abas {
  display: flex; gap: 0.25rem; padding: 0 1.25rem;
  background: var(--gead-azul); border-bottom: 3px solid #33427f;
  overflow-x: auto;
}
.aba {
  padding: 0.6rem 1.1rem; border: 0; border-radius: var(--raio) var(--raio) 0 0;
  background: transparent; color: var(--gead-azul-palido);
  font: inherit; font-weight: 600; font-size: 0.88rem; cursor: pointer;
  white-space: nowrap;
}
.aba:hover { background: rgba(255, 255, 255, 0.12); color: var(--papel); }
.aba--ativa { background: var(--papel-fundo); color: var(--gead-azul); }

.abas--interna {
  background: transparent; border-bottom: 2px solid var(--gead-azul-claro);
  padding: 0; margin: 1rem 0 1.25rem;
}
.abas--interna .aba { color: var(--tinta-suave); }
.abas--interna .aba:hover { background: var(--gead-azul-palido); color: var(--gead-azul); }
.abas--interna .aba--ativa {
  background: var(--gead-azul-palido); color: var(--gead-azul);
}

/* ── Cadastro ──────────────────────────────────────────────────────────── */
.cadastro { display: grid; gap: 1rem; grid-template-columns: 340px 1fr; align-items: start; }
.cartao__titulo { padding: 1rem 1.15rem 0; }
.cartao--rolavel .tabela { margin-top: 0.5rem; }

.sucesso {
  margin: 0.9rem 0 0; padding: 0.6rem 0.75rem;
  border-left: 3px solid var(--positivo); border-radius: 4px;
  background: #e3f3e9; color: var(--positivo); font-size: 0.85rem;
}
.campo--linha { display: grid; gap: 0.5rem; grid-template-columns: 1fr 1fr; }
select {
  width: 100%; padding: 0.6rem 0.7rem; border: var(--borda);
  border-radius: var(--raio); font: inherit; background: var(--papel);
  color: var(--tinta);
}
.dica { margin: 0.25rem 0 0; font-size: 0.75rem; color: var(--tinta-suave); }

/* O alerta do CAU/BR nunca é discreto: ele existe para ser lido. */
.alerta-rt {
  display: block; margin-top: 0.2rem; padding: 0.25rem 0.5rem;
  border-left: 3px solid var(--atencao); background: #fff6e0;
  color: var(--atencao); font-size: 0.74rem; border-radius: 0 4px 4px 0;
}
.etiqueta {
  display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px;
  font-size: 0.7rem; font-weight: 600; background: var(--gead-azul-palido);
  color: var(--gead-azul);
}
.etiqueta--alerta { background: #fdf2f2; color: var(--negativo); }
.etiqueta--neutra { background: #eef1f6; color: var(--tinta-suave); }
.linha--selecionada { background: var(--gead-azul-palido); }

/* A faixa de vencimento. Chama atenção sem gritar: quem está em dia nunca a vê,
   e quem a vê tem sete dias, não uma emergência. Vencida, ela fica vermelha —
   aí o fato mudou. */
.aviso--cobranca {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  justify-content: space-between;
}
.aviso--cobranca .botao { flex: 0 0 auto; }
.aviso__texto { margin: 0; }
.aviso--vencida { border-left-color: var(--negativo); background: #fdf2f2; }

.cartao--pix { max-width: 34rem; margin: 0 auto 1rem; }
/* O QR precisa de contraste alto e de fundo branco de verdade — QR sobre cor
   não lê. E de tamanho: abaixo de ~180px a câmera do celular erra. */
.qr {
  width: 100%; max-width: 15rem; margin: 0.5rem auto; padding: 0.5rem;
  background: #fff; border: var(--borda); border-radius: 6px;
}
.qr img { display: block; width: 100%; height: auto; }
.copiacola {
  width: 100%; font-family: ui-monospace, monospace; font-size: 0.7rem;
  word-break: break-all; resize: vertical;
}
.acoes { display: flex; gap: 0.5rem; margin-top: 0.5rem; }

/* A sub-etapa recuada, com um fio à esquerda: dois níveis da EAP na mesma
   tabela. Recuo por padding na primeira célula, e não por espaço no texto —
   leitor de tela não lê indentação. */
.linha--filha > td:first-child {
  padding-left: 1.6rem; border-left: 3px solid var(--gead-azul-palido);
}
.linha--filha > td { color: var(--tinta-suave); }
/* "derivado" ao lado do teto da mãe: existe para ninguém procurar onde digitá-lo. */
.nota { font-size: 0.68rem; color: var(--tinta-suave); font-weight: 400; }

/* ── Relatórios (spec 5) ──────────────────────────────────────────────────
 *
 * Nenhuma cor nova. Os gráficos usam a paleta do ADR-010 — o azul primário
 * para receita, o médio para despesa, o pálido para projeção —, e as duas
 * cores semânticas que já existiam para resultado positivo e negativo.
 */

.filtros {
  display: flex; flex-wrap: wrap; align-items: end; gap: 0.75rem;
  padding: 0.9rem 1rem; margin-bottom: 1.25rem;
  background: var(--papel); border: var(--borda); border-radius: var(--raio);
  box-shadow: var(--sombra);
}
.filtros label { margin: 0; align-self: center; }
.filtros select, .filtros input { width: auto; min-width: 11rem; margin: 0; }

/*
 * O gráfico rola na horizontal DENTRO do próprio quadro.
 *
 * ADR-010: nenhuma tela menor esconde informação financeira. Doze meses não
 * cabem num celular, e a saída não é omitir meses nem espremê-los até a barra
 * não significar nada — é deixar rolar, com o número escrito na tabela abaixo.
 */
.grafico__rolagem { overflow-x: auto; padding-bottom: 0.25rem; }

/* O SVG ocupa a largura toda e deixa a altura seguir a proporção do desenho.
 *
 * Com altura FIXA, o `meet` do `preserveAspectRatio` escalava pelo lado mais
 * apertado — a altura — e sobrava faixa branca à direita, justamente o que
 * ocupar a página inteira deveria ter resolvido. Deixando a altura livre, quem
 * manda é a largura, e o gráfico vai de ponta a ponta.
 *
 * A proporção fica estável porque a largura interna do desenho mira sempre a
 * mesma `LARGURA_ALVO`: séries de quatro e de doze meses desenham cartões de
 * altura parecida, em vez de um alto e um achatado. */
.grafico { display: block; width: 100%; height: auto; min-width: 100%; }
/* Os corpos crescem junto com o cartão: 9px foi dimensionado para um gráfico
   de um terço de tela, e num cartão de página inteira o número fica ilegível
   à distância de leitura normal. */
.grafico__mes {
  font-family: var(--fonte-num); font-size: 12px; fill: var(--tinta-suave);
}

.legenda {
  display: flex; flex-wrap: wrap; gap: 1rem;
  margin: 0.6rem 0 1rem; font-size: 0.8rem; color: var(--tinta-suave);
}
.legenda__item { display: inline-flex; align-items: center; gap: 0.4rem; }
.legenda__cor {
  width: 0.75rem; height: 0.75rem; border-radius: 2px;
  background: var(--gead-azul); display: inline-block;
}
.legenda__cor--entrou { background: var(--gead-azul); }
.legenda__cor--falta { background: var(--gead-azul-palido); }

/* A barra partida do 5.2: o que entrou contra o que falta entrar. */
.barra {
  display: flex; height: 1.5rem; border-radius: var(--raio);
  overflow: hidden; border: var(--borda);
}
.barra__parte--entrou { background: var(--gead-azul); }
.barra__parte--falta { background: var(--gead-azul-palido); }

/* A conta do KPI, dobrada. Aberta ocupa demais; ausente vira número sem
   origem, que é onde duas pessoas leem coisas diferentes. */
.definicao > summary {
  cursor: pointer; font-size: 0.75rem; color: var(--gead-azul);
  margin-top: 0.4rem;
}
.definicao .ajuda { margin: 0.35rem 0 0; }

.premissas { margin: 0.5rem 0 0 1rem; padding: 0; font-size: 0.82rem; }
.premissas li { margin-bottom: 0.25rem; }
.aviso--projecao { border-left-color: var(--gead-azul-medio); }


.tabela--larga { min-width: 44rem; }
.forte { font-weight: 600; }
.negativo { color: var(--negativo); }
.tabela tfoot th, .tabela tfoot td {
  font-weight: 600; border-top: 2px solid var(--gead-azul-claro);
}

/* ── O painel gerencial ──────────────────────────────────────────────────── */

.grafico__valor {
  font-family: var(--fonte-num); font-size: 12px; fill: var(--tinta);
}
.grafico__variacao { font-family: var(--fonte-num); font-size: 11px; }

/* Um cartão por rubrica, EMPILHADOS, cada um com a largura inteira da página.
 *
 * Antes eram três por linha. Numa grade de três, o gráfico ficava com um terço
 * da tela: as barras espremiam e o valor sobre elas saía cortado no meio — o
 * "R$ 136.368" de abril, sem os centavos e sem o resto. Comparar dois meses da
 * mesma rubrica é a pergunta que estes gráficos respondem, e ela precisa de
 * largura, não de densidade. */
#relGraficos { display: flex; flex-direction: column; gap: 1rem; }
#relGraficos > * { min-width: 0; }
#relGraficos h3 { margin-top: 0; }

.barra--destinos { height: 2rem; }
.destinos { list-style: none; margin: 0.75rem 0 0; padding: 0; font-size: 0.85rem; }
.destinos li { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.destinos b { min-width: 11rem; }

.rubricas { margin: 0.5rem 0 0; font-size: 0.8rem; }
.rubricas dt {
  font-family: var(--fonte-num); font-weight: 600; color: var(--gead-azul);
  margin-top: 0.5rem;
}
.rubricas dd { margin: 0.15rem 0 0; color: var(--tinta-suave); }

/*
 * A tabela transposta: períodos nas colunas, arquiteto e conta nas linhas.
 *
 * A primeira coluna fica GRUDADA na esquerda ao rolar. Sem isso, rolar até
 * dezembro deixa a pessoa olhando uma fileira de números sem saber de quem
 * nem de qual conta — que é o mesmo que não mostrar.
 */
.tabela--transposta th[scope="row"] {
  position: sticky; left: 0; z-index: 1;
  background: var(--papel); text-align: left; font-weight: 400;
  padding-left: 1.2rem; white-space: nowrap;
}
/*
 * O CANTO do cabeçalho também gruda.
 *
 * Sem ele, rolar até dezembro leva embora o rótulo "Arquiteto / conta
 * contábil" e a coluna grudada fica sem título — de pé, e anônima.
 */
.tabela--transposta thead th:first-child {
  position: sticky; left: 0; z-index: 2;
  background: var(--gead-azul-palido);
}

/*
 * A linha do arquiteto GRUDA, e antes não grudava.
 *
 * Ela era um `th` atravessando a largura inteira com `position: static`: rolar
 * na horizontal levava o nome embora e deixava uma faixa azul vazia com uma
 * fileira de números sem dono. Agora o nome é o cabeçalho da própria linha, ao
 * lado da caixinha e do `+`, e acompanha a rolagem como as contas acompanham.
 */
.linha--arquiteto th[scope="row"] {
  background: var(--gead-azul-palido);
  font-weight: 600; color: var(--tinta); padding-left: 0.5rem;
  display: flex; align-items: center; gap: 0.15rem;
}
.linha--arquiteto td { background: var(--gead-azul-palido); font-weight: 600; }
.arquiteto__nome { margin-left: 0.15rem; }
/* Desmarcado: continua na lista para poder voltar, e sai da conta. */
.linha--fora th[scope="row"], .linha--fora td {
  opacity: 0.45; font-weight: 400;
}
/* A conta contábil, um degrau à direita do nome. */
.linha--conta th[scope="row"] { padding-left: 2.6rem; }
.linha--total th, .linha--total td { font-weight: 600; }
.linha--percentual td, .linha--percentual th { color: var(--tinta-suave); }
.tabela--transposta tfoot th[scope="row"] { background: var(--papel-fundo); }
.tabela--transposta tfoot td { background: var(--papel-fundo); }

/* A caixinha de seleção, do tamanho de uma da planilha. */
.caixa {
  width: 0.95rem; height: 0.95rem; margin: 0 0.2rem 0 0;
  accent-color: var(--gead-azul); cursor: pointer; flex: none;
}
.selecao {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  margin: 0 0 0.6rem;
}
.selecao__rotulo {
  margin-right: auto; font-size: 0.82rem; color: var(--tinta-suave);
}
.selecao .botao { padding: 0.2rem 0.7rem; font-size: 0.78rem; }

@media (max-width: 900px) {
  .cadastro { grid-template-columns: 1fr; }
  .filtros select, .filtros input { min-width: 0; flex: 1 1 8rem; }
  /* Duas colunas de tabela não cabem lado a lado num celular, e espremê-las
     até a coluna de valor quebrar é pior que empilhar. */
  .balanco { grid-template-columns: 1fr; }
  .tabela--larga { min-width: 32rem; }
  /*
   * E o quadro vira o contêiner de rolagem.
   *
   * Uma tabela de dinheiro tem largura mínima real: a coluna de valores é
   * monoespaçada e "R$ 197.707,21" não quebra em duas linhas — nem deveria.
   * Sem isto, a tabela empurra o quadro, o quadro empurra a página, e o
   * documento inteiro rola de lado. Com isto, quem rola é a TABELA, dentro do
   * cartão dela, e o resto da tela fica parado.
   */
  .cartao { overflow-x: auto; }
}

/* ── O saldo de horas da obra (aba Horas) ──────────────────────────────────
 *
 * Quatro graus, e os limiares são os MESMOS do alerta (`LIMIARES_BPS`): 85% e
 * 90%. A tela não inventa patamar próprio — dois números diferentes para a
 * mesma pergunta é como o painel e o aviso passam a discordar.
 *
 * O vermelho é o do sistema (`--negativo`), e não um vermelho novo: cor que
 * significa "ruim" tem de ser a mesma em toda a interface, ou deixa de
 * significar. */
.saldos { display: grid; gap: 0.5rem; margin: 0.75rem 0; }
.saldo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 8rem auto auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  background: var(--papel-fundo);
  border-left: 3px solid var(--gead-azul-claro);
  font-size: 0.85rem;
}
.saldo__obra { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.saldo__barra {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--gead-azul-palido);
  overflow: hidden;
}
.saldo__barra__cheia { height: 100%; background: var(--gead-azul); }
.saldo__numeros { color: var(--tinta-suave); font-variant-numeric: tabular-nums; }
.saldo__restante { font-weight: 600; font-variant-numeric: tabular-nums; }

.saldo--atencao  { border-left-color: var(--atencao); }
.saldo--atencao  .saldo__barra__cheia { background: var(--atencao); }
.saldo--atencao  .saldo__restante { color: var(--atencao); }
.saldo--critico  { border-left-color: var(--negativo); background: #fff8f8; }
.saldo--critico  .saldo__barra__cheia { background: var(--negativo); }
.saldo--critico  .saldo__restante { color: var(--negativo); }
.saldo--estourado { border-left-color: var(--negativo); background: #fdf2f2; }
.saldo--estourado .saldo__barra__cheia { background: var(--negativo); }
.saldo--estourado .saldo__restante { color: var(--negativo); font-weight: 700; }

/* Em tela estreita o quadro vira duas linhas em vez de espremer a barra. */
@media (max-width: 640px) {
  .saldo { grid-template-columns: minmax(0, 1fr) auto; }
  .saldo__barra { grid-column: 1 / -1; }
}

/* ── O cronômetro ─────────────────────────────────────────────────────────
   Dois toques. O tempo corrido é o maior número do quadro: é o que a pessoa
   confere de relance antes de decidir se para. */
.cronometros { margin: 0.75rem 0; }
.cronometro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  background: var(--papel-fundo);
  border-left: 3px solid var(--gead-azul);
}
.cronometro--correndo { background: var(--gead-azul-palido); }
.cronometro__tempo {
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--gead-azul);
}
.cronometro__obra { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.cronometro__desde { color: var(--tinta-suave); }
.cronometro__descricao { flex: 1 1 14rem; min-width: 0; }

/* Passou do teto ou virou o dia: o quadro muda de cor e o "Parar" some, porque
   o servidor recusaria. Ver `desenharCronometro`. */
.cronometro--ajuste {
  background: #fdf2f2;
  border-left-color: var(--negativo);
}
.cronometro--ajuste .cronometro__tempo { color: var(--negativo); }
.cronometro__aviso { flex: 1 1 100%; margin: 0; color: var(--tinta); }

/* Em tela estreita cada parte ocupa a própria linha: o tempo espremido ao lado
   do nome da obra é o número que ninguém lê. */
@media (max-width: 640px) {
  .cronometro { flex-direction: column; align-items: stretch; }
  .cronometro__tempo { text-align: center; }
}