/* Folha de estilo do eIVIZINHO.

   As cores saem da marca: o verde-água do balão e o dourado do "Ei". Elas
   substituíram o azul-marinho de antes, que não vinha de lugar nenhum.

   Os hexadecimais foram lidos da imagem da logo, a olho. Se houver valor
   oficial da marca, é aqui que se troca — e em nenhum outro lugar, porque
   nada mais no projeto escreve cor.

   Verde, âmbar e vermelho de estado continuam reservados para sucesso,
   alerta e erro real. O verde de estado é propositalmente mais escuro e
   menos saturado que o da marca, para que "é a cor do sistema" e "deu certo"
   não se confundam. */

:root {
  --marca: #17a98e;
  --marca-escura: #0f7d68;
  --marca-clara: #e6f5f1;
  --ouro: #c9a84c;
  --ouro-escuro: #a8892f;
  --ouro-claro: #faf4e4;
  --fundo: #f4f6f9;
  --superficie: #ffffff;
  --borda: #e3e7ed;
  --borda-forte: #cdd5df;
  --texto: #1f2733;
  --texto-suave: #5c6875;
  --sucesso: #14663f;
  --sucesso-fundo: #e8f5ee;
  --sucesso-borda: #a9d8c0;
  --alerta: #7a5200;
  --alerta-fundo: #fff7e3;
  --alerta-borda: #e8cf96;
  --erro: #9e2019;
  --erro-fundo: #fdeceb;
  --erro-borda: #f0b6b2;
  --raio: 10px;
  --gutter: 16px;
  --sombra: 0 1px 2px rgba(31, 39, 51, 0.06), 0 1px 3px rgba(31, 39, 51, 0.04);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  font-size: 15px;
  line-height: 1.55;
}

/* ------------------------------------------------------------ cabeçalho -- */
.cabecalho {
  background: var(--superficie);
  border-bottom: 1px solid var(--borda);
}

.faixa {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  /* 22px de folga empurrava "4 Acompanhar" para uma segunda linha em tela
     de 1366. O menu já tem respiro próprio no ``padding`` de cada etapa. */
  gap: 8px 14px;
  flex-wrap: wrap;
}

.marca {
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  font-size: 1.22rem;
  white-space: nowrap;
}

/* "Ei" dourado e "vizinho" escuro, como na logo. */
.marca__ei {
  color: var(--ouro);
}

.marca__resto {
  color: var(--texto);
  font-weight: 600;
}

/* As quatro etapas do trabalho. O número não é enfeite: ele diz que há
   ordem, e que ela é obrigatória. */
.menu {
  display: flex;
  gap: 4px;
  flex: 1;
  flex-wrap: wrap;
}

.menu__etapa {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--texto-suave);
  text-decoration: none;
  padding: 6px 10px;
  border-radius: var(--raio);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.menu__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  background: var(--borda);
  color: var(--texto-suave);
}

.menu__etapa:hover {
  color: var(--marca-escura);
  background: var(--marca-clara);
}

.menu__etapa.ativo {
  color: var(--marca-escura);
  background: var(--marca-clara);
  font-weight: 600;
}

.menu__etapa.ativo .menu__numero {
  background: var(--marca);
  color: #fff;
}

/* A segunda camada: as telas de dentro da etapa. */
.faixa--telas {
  padding-top: 0;
  padding-bottom: 10px;
}

.submenu {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

.submenu a {
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 3px 0;
  border-bottom: 2px solid transparent;
}

.submenu a:hover {
  color: var(--marca-escura);
}

.submenu a.ativo {
  color: var(--texto);
  border-bottom-color: var(--ouro);
  font-weight: 600;
}

.ambiente {
  font-size: 0.75rem;
  color: var(--texto-suave);
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  padding: 2px 10px;
  text-transform: lowercase;
}

/* -------------------------------------------------------------- estrutura */
.conteudo {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px var(--gutter) 48px;
}

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--sombra);
}

.cartao.destaque {
  border-top: 3px solid var(--marca);
}

.titulo-acao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

h1 {
  margin: 0;
  font-size: 1.5rem;
  color: var(--marca-escura);
}

h2 {
  margin: 0 0 14px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--texto-suave);
}

.resumo {
  margin: 0 0 8px;
  color: var(--texto-suave);
}

.rodape {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--gutter) 30px;
  color: var(--texto-suave);
  font-size: 0.8rem;
}

/* ------------------------------------------------------------------ notas */
.nota {
  margin: 0 0 16px;
  padding: 12px 14px;
  border-radius: var(--raio);
  border: 1px solid var(--borda-forte);
  background: var(--marca-clara);
}

.nota--sucesso {
  background: var(--sucesso-fundo);
  border-color: var(--sucesso-borda);
  color: var(--sucesso);
}

.nota--alerta {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  color: var(--alerta);
}

.nota--erro {
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
  color: var(--erro);
}

/* --------------------------------------------------------------- botões -- */
.botao {
  display: inline-block;
  background: var(--marca);
  color: #fff;
  border: 1px solid var(--marca);
  border-radius: 6px;
  padding: 9px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.botao:hover {
  background: var(--marca-escura);
  border-color: var(--marca-escura);
}

.botao--neutro {
  background: var(--superficie);
  color: var(--marca);
}

.botao--neutro:hover {
  background: var(--marca-clara);
  color: var(--marca-escura);
}

/* Para o que não se desfaz. Reabrir exercício troca o orçamento que a
   assembleia aprovou, e o botão não deve parecer com o de salvar um filtro. */
.botao--cuidado {
  background: var(--erro);
  border-color: var(--erro);
}

.botao--cuidado:hover {
  background: #7d1812;
  border-color: #7d1812;
}

/* Linha de conta que teve gasto sem estar no orçamento. Discreta o bastante
   para não competir com a tabela, visível o bastante para não passar batido. */
.fora-do-orcamento {
  background: var(--erro-fundo);
}

/* ------------------------------------------------- tabelas pesquisáveis -- */
/* Sem JavaScript: ordenar é um link e buscar é um formulário. A seta precisa
   ser legível no cabeçalho sem competir com o rótulo. */
.ordenavel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
}

.ordenavel:hover {
  color: var(--marca);
  text-decoration: underline;
}

.ordenavel__seta {
  font-size: 0.7em;
  opacity: 0.35;
}

.ordenavel--ativa {
  color: var(--marca);
}

.ordenavel--ativa .ordenavel__seta {
  opacity: 1;
}

.busca-da-tabela {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  margin-bottom: 4px;
}

.busca-da-tabela label {
  display: grid;
  gap: 6px;
  flex: 1 1 220px;
}

.busca-da-tabela .limpar {
  padding-bottom: 10px;
}

.contagem-da-busca {
  color: var(--texto-suave);
  font-size: 0.9rem;
  margin: 8px 0 0;
}

/* --------------------------------------------------- cartões de número -- */
/* Escaneáveis de propósito: a tabela responde "quanto em cada conta", estes
   respondem "onde está o meu problema" num segundo. */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.cartao-numero {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
}

.cartao-numero__rotulo {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.cartao-numero .numero {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

.cartao-numero__apoio {
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.cartao-numero--bom {
  border-color: var(--sucesso-borda);
  background: var(--sucesso-fundo);
}

.cartao-numero--bom .numero {
  color: var(--sucesso);
}

.cartao-numero--ruim {
  border-color: var(--erro-borda);
  background: var(--erro-fundo);
}

.cartao-numero--ruim .numero {
  color: var(--erro);
}

/* A tela que o condômino abre por link: sem menu, sem cabeçalho do sistema. */
.publico__topo {
  padding: 24px 0 8px;
}

.publico__topo h1 {
  margin: 8px 0 4px;
}

.escopo {
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 12px 14px;
}

.escopo legend {
  font-weight: 600;
  padding: 0 6px;
}

.escopo__grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
  margin-top: 8px;
}

.escopo__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
}

.boleto-da-unidade {
  padding: 14px 0;
  border-top: 1px solid var(--borda);
}

.boleto-da-unidade:first-of-type {
  border-top: 0;
}

.boleto-da-unidade h3 {
  margin: 0 0 4px;
}

.formulario-movimento {
  display: grid;
  gap: 12px;
  margin-top: 10px;
}

.formulario-movimento p {
  display: grid;
  gap: 6px;
  margin: 0;
}

.formulario-movimento label {
  display: grid;
  gap: 6px;
  font-weight: 600;
}

.formulario-movimento button {
  justify-self: start;
}

.formulario-reabertura {
  display: grid;
  gap: 14px;
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--erro-borda);
  border-radius: 8px;
  background: var(--erro-fundo);
}

.formulario-reabertura p {
  display: grid;
  gap: 6px;
  margin: 0;
}

.formulario-reabertura label {
  font-weight: 600;
}

.formulario-reabertura button {
  justify-self: start;
}

.limpar {
  color: var(--texto-suave);
  text-decoration: none;
  font-size: 0.9rem;
}

.limpar:hover {
  color: var(--marca);
  text-decoration: underline;
}

/* ------------------------------------------------------------ formulários */
.formulario {
  display: grid;
  gap: 18px;
  max-width: 620px;
}

.campo {
  display: grid;
  gap: 6px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--texto);
}

.campo--duplo {
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.campo--duplo label {
  display: grid;
  gap: 6px;
}

input[type="text"],
input[type="number"],
input[type="month"],
input[type="file"],
/* ``password`` estava de fora, e a tela de entrar ficava com o campo de
   e-mail desenhado ao lado de um campo de senha padrão do navegador. */
input[type="password"],
textarea,
select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--borda-forte);
  border-radius: 6px;
  background: var(--superficie);
  color: var(--texto);
  font-weight: 400;
  width: 100%;
}

input:focus,
textarea:focus,
select:focus {
  outline: 2px solid var(--marca);
  outline-offset: 1px;
  border-color: var(--marca);
}

.ajuda {
  font-weight: 400;
  color: var(--texto-suave);
  font-size: 0.82rem;
}

.formulario-acoes {
  margin-top: 4px;
}

.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  align-items: end;
}

.filtros label {
  display: grid;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--texto-suave);
}

.filtros-acoes {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* --------------------------------------------------------------- tabelas -- */
.tabela-rolavel {
  overflow-x: auto;
}

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.tabela th {
  text-align: left;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borda-forte);
  padding: 8px 10px;
  white-space: nowrap;
}

.tabela td {
  padding: 10px;
  border-bottom: 1px solid var(--borda);
  vertical-align: top;
}

.tabela tr:last-child td {
  border-bottom: none;
}

.tabela .numero {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.arquivo {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  word-break: break-all;
}

.ausente {
  color: var(--texto-suave);
  font-style: italic;
}

.vazio {
  color: var(--texto-suave);
  margin: 0;
  padding: 20px 0;
  text-align: center;
}

/* ------------------------------------------------------------- etiquetas -- */
.etiqueta {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 2px 10px;
  border: 1px solid var(--borda-forte);
  background: var(--fundo);
  color: var(--texto-suave);
  white-space: nowrap;
}

.etiqueta--recebido {
  background: var(--marca-clara);
  border-color: #bcd3e8;
  color: var(--marca);
}

.etiqueta--info {
  background: var(--marca-clara);
  border-color: #bcd3e8;
  color: var(--marca);
}

.etiqueta--alerta {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  color: var(--alerta);
}

.etiqueta--erro {
  background: var(--erro-fundo);
  border-color: var(--erro-borda);
  color: var(--erro);
}

/* Homologação usa listras, e não só cor: quem não distingue cor continua
   vendo que esta linha é diferente das outras. */
.etiqueta--homologacao {
  background: repeating-linear-gradient(
    -45deg,
    var(--alerta-fundo),
    var(--alerta-fundo) 5px,
    var(--fundo) 5px,
    var(--fundo) 10px
  );
  border-color: var(--alerta-borda);
  color: var(--alerta);
  font-weight: 600;
}

/* Na faixa escura do cabeçalho as cores das etiquetas somem; aqui ela é
   clara sobre o escuro, e não o contrário. */
/* O perfil, discreto. Em caixa alta e do tamanho do nome, ele competia com
   quem está logado — e a informação principal ali é o nome. Continua
   visível porque "não achei o botão" precisa ter resposta na tela. */
.perfil {
  font-size: 0.72rem;
  letter-spacing: 0.03em;
  color: var(--texto-suave);
  border-left: 1px solid var(--borda);
  padding-left: 10px;
  margin-left: 2px;
  white-space: nowrap;
}

/* A marca de homologação. Menor que antes: ela precisa ser **vista**, não
   gritada — competia com o nome do condomínio, que é a informação. */
.trocador__homologacao {
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  padding: 2px 8px;
  white-space: nowrap;
  background: var(--alerta-fundo);
  color: var(--alerta);
  border: 1px solid var(--alerta-borda);
  font-weight: 700;
}

/* Empurra "Painel deste condomínio" para a direita, em vez de deixá-lo
   colado no exercício como se fosse parte dele. */
.trocador__painel {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--marca);
}

/* No celular a barra vira duas linhas em vez de oito: o nome ocupa a
   primeira inteira e os controles se arrumam embaixo. */
@media (max-width: 720px) {
  .faixa--condominio {
    gap: 8px 12px;
  }

  .trocador__atual {
    max-width: 100%;
  }

  .trocador__painel {
    margin-left: 0;
  }
}

/* ------------------------------------------------------------- ficha ----- */
.ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px 24px;
  margin: 0 0 18px;
}

.ficha div {
  display: grid;
  gap: 2px;
}

.ficha .largo {
  grid-column: 1 / -1;
}

.ficha dt {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--texto-suave);
}

.ficha dd {
  margin: 0;
}

.hash {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  word-break: break-all;
  color: var(--texto-suave);
}

/* --------------------------------------------------------- linha do tempo */
.linha-tempo {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.linha-tempo li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  border-left: 3px solid var(--marca-clara);
  padding-left: 12px;
}

.momento {
  color: var(--texto-suave);
  font-size: 0.82rem;
}

.mensagem {
  margin: 0;
  width: 100%;
  color: var(--texto-suave);
  font-size: 0.88rem;
}

/* ------------------------------------------------------------- paginação -- */
.paginacao {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  font-size: 0.88rem;
}

.paginacao a {
  color: var(--marca);
}

.paginacao .inativo {
  color: var(--borda-forte);
}

.lista-links {
  margin: 0;
  padding-left: 18px;
}

.lista-links a {
  color: var(--marca);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (max-width: 560px) {
  .cartao {
    padding: 16px;
  }
  .campo--duplo {
    grid-template-columns: 1fr;
  }
  h1 {
    font-size: 1.25rem;
  }
}

/* --------------------------------------------------------- plano de contas */
.acoes-documento {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

.acao-inline {
  margin: 0;
  display: inline;
}

.tabela tr.sintetica td {
  font-weight: 600;
  background: var(--marca-clara);
}

button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ------------------------------------------------------------------- DRE -- */
.tabela--dre tr.grupo td {
  font-weight: 700;
  background: var(--marca-clara);
  color: var(--marca-escura);
  border-top: 1px solid var(--borda-forte);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}

.tabela--dre tr.grupo--alerta td {
  background: var(--alerta-fundo);
  color: var(--alerta);
}

.tabela--dre tr.resultado td {
  font-weight: 700;
  border-top: 2px solid var(--marca);
  background: var(--superficie);
  font-size: 0.95rem;
}

.numero.negativo {
  color: var(--erro);
}

/* Entrada no sistema ----------------------------------------------------- */
.pagina-entrada {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  gap: 1rem;
}

.cartao--entrada {
  width: min(24rem, 90vw);
}

.cartao--entrada h1 {
  margin-top: 0;
}

.formulario {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.formulario label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.9rem;
}

.formulario input {
  padding: 0.5rem 0.6rem;
  font: inherit;
}

.identidade {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.identidade .usuario {
  font-size: 0.9rem;
}

.identidade .sair {
  display: inline;
  margin: 0;
}

.ligacao {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
  color: inherit;
}

.nota--erro {
  border-left: 3px solid #a4262c;
}

/* Unidades --------------------------------------------------------------- */
.tabela--unidades td:first-child {
  font-variant-numeric: tabular-nums;
}

.tabela--unidades tr.inativa {
  opacity: 0.55;
}

.tabela--unidades tr.inativa td:first-child::after {
  content: " (inativa)";
  font-size: 0.8em;
}

/* Simulação orçamentária -------------------------------------------------- */
.formulario--linha {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
}

.criterio {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}

.criterio input {
  font: inherit;
  padding: 0.15rem 0.3rem;
}

.destaque {
  font-weight: 600;
}

/* O caminho do condomínio ------------------------------------------------- */




.marcar {
  flex-direction: row;
  align-items: center;
  gap: 0.4rem;
}

/* Exceções por mês na simulação ------------------------------------------ */
.ajuste {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.ajuste .acao {
  margin: 0;
}

.excecao > summary {
  cursor: pointer;
  font-size: 0.85rem;
  margin-top: 0.3rem;
}

.excecao .criterio {
  flex-wrap: wrap;
  margin-top: 0.3rem;
}

/* --------------------------------------------------------------------------
   Tela de saldos: faixas de quatro números.

   É a tela que se projeta em assembleia, então o número manda e o resto
   desaparece. Quatro cartões por faixa, na mesma ordem em que o síndico lê:
   de onde partiu, quanto saiu, quanto entrou, onde está.
   -------------------------------------------------------------------------- */
.faixa-saldo__titulo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  font-size: 1.05rem;
}

.cartoes-quatro {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width: 860px) {
  .cartoes-quatro {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.cartao-numero {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--fundo);
  padding: 12px 14px;
}

.cartao-numero--forte {
  background: var(--marca-clara);
  border-color: #bcd3e8;
}

.cartao-numero__rotulo {
  display: block;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 4px;
}

.cartao-numero__valor {
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: 1.32rem;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.etiqueta--fundo_reserva {
  background: var(--sucesso-fundo);
  border-color: var(--sucesso-borda);
  color: var(--sucesso);
}

.etiqueta--chamada_capital {
  background: var(--marca-clara);
  border-color: #bcd3e8;
  color: var(--marca);
}

.etiqueta--provisao {
  background: var(--alerta-fundo);
  border-color: var(--alerta-borda);
  color: var(--alerta);
}

.detalhe-faixa {
  margin-top: 14px;
}

.detalhe-faixa > summary {
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--marca);
  padding: 4px 0;
}

.detalhe-faixa > summary:hover {
  text-decoration: underline;
}

.detalhe-faixa .tabela {
  margin-top: 10px;
}

/* --------------------------------------------------------------------------
   Cenários e prévia da grade: a tela que se projeta na assembleia.
   -------------------------------------------------------------------------- */
.apoio {
  display: inline-block;
  font-size: 0.78rem;
  color: var(--texto-suave);
  margin-left: 6px;
}

.tabela--cenarios tbody td {
  vertical-align: middle;
}

.tabela--cenarios .numero {
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}

.cenario--ativo {
  background: var(--marca-clara);
}

.cenario--ativo td {
  border-color: #bcd3e8;
}

.tabela--previa .numero {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Atalhos do painel do condomínio: as telas dele, sem reescolher o condomínio. */
.atalhos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.atalhos a {
  display: inline-block;
  border: 1px solid var(--borda-forte);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.88rem;
  text-decoration: none;
  background: var(--superficie);
}

.atalhos a:hover {
  background: var(--marca-clara);
  border-color: #bcd3e8;
}

/* --------------------------------------------------------------------------
   Gráficos.

   O SVG vem montado do servidor e só traz classes; a cor mora aqui, para
   acompanhar o tema e para que quem mexer em cor mexa onde cor se mexe.
   -------------------------------------------------------------------------- */
.grafico {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.grafico--rosca {
  max-width: 260px;
  margin: 0 auto;
}

.grafico__rotulo {
  font-size: 12px;
  fill: var(--texto-suave);
}

.grafico__centro {
  font-size: 17px;
  font-weight: 600;
  fill: var(--texto);
}

.grafico__vazio {
  font-size: 13px;
  fill: var(--texto-suave);
}

.grafico__barra--orcado {
  fill: var(--borda-forte);
}

.grafico__barra--realizado {
  fill: var(--marca);
}

.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  font-size: 0.84rem;
}

.legenda li {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legenda__cor {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}

.legenda__valor {
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}

.fatia--1, .legenda__cor--1 { fill: #1b4f8a; background: #1b4f8a; }
.fatia--2, .legenda__cor--2 { fill: #2e7d9a; background: #2e7d9a; }
.fatia--3, .legenda__cor--3 { fill: #3f9c8f; background: #3f9c8f; }
.fatia--4, .legenda__cor--4 { fill: #6aa84f; background: #6aa84f; }
.fatia--5, .legenda__cor--5 { fill: #b08b2e; background: #b08b2e; }
.fatia--6, .legenda__cor--6 { fill: #c26a3a; background: #c26a3a; }
.fatia--7, .legenda__cor--7 { fill: #a84b5e; background: #a84b5e; }
.fatia--8, .legenda__cor--8 { fill: #7a5a9c; background: #7a5a9c; }

.fatia { stroke: var(--superficie); stroke-width: 1.5; }
.grafico--rosca circle.fatia { stroke: currentColor; }

.graficos-lado-a-lado {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

@media (max-width: 860px) {
  .graficos-lado-a-lado {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --------------------------------------------------------------------------
   A barra do condomínio corrente.

   Fica logo abaixo do menu, em toda página, porque a pergunta "em qual
   condomínio eu estou?" não pode depender de lembrar onde estava o seletor.
   -------------------------------------------------------------------------- */
/* ------------------------------------------------- barra de contexto -- */
/* Onde se diz em qual condomínio e em qual exercício se está. Ela existe
   porque aprovar o orçamento do condomínio errado é caro, e saber onde se
   está não pode depender de lembrar (ADR-068).
   
   As cores eram de um cabeçalho **escuro** — borda e fundo em branco
   translúcido —, e o cabeçalho é branco: o campo de busca ficava invisível e
   o texto do placeholder parecia solto na página. */
.faixa--condominio {
  display: flex;
  align-items: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid var(--borda);
  background: var(--fundo);
}

.trocador {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  min-width: 0;
}

.trocador__rotulo {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
  white-space: nowrap;
}

/* O nome fica numa linha só. Antes quebrava em três — "9000 —",
   "[HOMOLOGAÇÃO]", "EDIFÍCIO VILLA AURELIA" — e empurrava a página inteira
   para baixo. Quem precisa do nome completo tem o title. */
.trocador__atual {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--texto);
  max-width: 28rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.trocador__busca {
  display: contents;
}

/* Rótulo que o leitor de tela lê e o olho não vê: o campo precisa de nome,
   e "Condomínio" já está escrito ao lado. */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.trocador input[type="text"],
.trocador input[type="number"] {
  font: inherit;
  font-size: 0.88rem;
  padding: 5px 10px;
  border-radius: var(--raio);
  border: 1px solid var(--borda-forte);
  background: var(--superficie);
  color: var(--texto);
  width: auto;
}

.trocador input[type="text"] {
  min-width: 14rem;
}

.trocador input::placeholder {
  color: var(--texto-suave);
  opacity: 1;
}

.trocador input:focus {
  outline: 2px solid var(--marca);
  outline-offset: 1px;
  border-color: var(--marca);
}

/* "Abrir" e "Ir" eram texto puro e pareciam inacabados ao lado de um campo.
   Botão discreto: lê-se como ação sem competir com o conteúdo. */
.trocador__abrir,
.trocador button {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 5px 12px;
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  background: var(--superficie);
  color: var(--marca);
  cursor: pointer;
  white-space: nowrap;
}

.trocador__abrir:hover,
.trocador button:hover {
  background: var(--marca-clara);
  border-color: var(--marca);
}

.trocador__painel {
  font-size: 0.84rem;
  opacity: 0.85;
}

@media (max-width: 720px) {
  .trocador select {
    min-width: 0;
    flex: 1;
  }
}

/* O que o ano-base arrecadou, proposto na simulação. Fica visivelmente
   separado do que já foi definido: é sugestão, não decisão tomada. */
.sugestoes {
  margin-top: 20px;
  padding: 14px 16px 6px;
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
  background: var(--marca-clara);
}

.sugestoes h3 {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--marca-escura);
}

.tabela--sugestoes {
  background: var(--superficie);
}

/* Sugestão que discorda do que está definido. */
.tabela--sugestoes tr.divergente td {
  background: var(--alerta-fundo);
}

/* ----------------------------------------------- fluxo do exercício ----- */
/* As cinco etapas em coluna, cada uma com o seu estado. A diferença entre
   "feita", "é a vez" e "esperando" é de cor **e** de peso: cor sozinha não
   serve para quem não a distingue. */
.fluxo {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: etapa;
}

.fluxo__etapa {
  display: grid;
  grid-template-columns: 32px minmax(140px, 1fr) minmax(0, 1.4fr) auto;
  align-items: center;
  gap: 12px;
  padding: 12px 4px;
  border-top: 1px solid var(--borda);
}

.fluxo__etapa:first-child {
  border-top: none;
}

.fluxo__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--borda-forte);
  font-size: 0.8rem;
  color: var(--texto-suave);
}

.fluxo__nome {
  font-weight: 500;
}

.fluxo__detalhe {
  color: var(--texto-suave);
  font-size: 0.9rem;
}

.fluxo__acao {
  text-align: right;
  font-size: 0.9rem;
}

.fluxo__etapa--feita .fluxo__marca {
  background: var(--marca-clara);
  border-color: var(--marca);
  color: var(--marca);
}

.fluxo__etapa--feita .fluxo__nome {
  color: var(--texto-suave);
}

.fluxo__etapa--vez {
  background: var(--marca-clara);
}

.fluxo__etapa--vez .fluxo__marca {
  background: var(--marca);
  border-color: var(--marca);
  color: #fff;
  font-weight: 700;
}

.fluxo__etapa--vez .fluxo__nome {
  font-weight: 700;
}

/* Esperando a anterior: apagada de propósito, para não convidar ao clique. */
.fluxo__etapa--espera .fluxo__nome,
.fluxo__etapa--espera .fluxo__detalhe {
  opacity: 0.6;
}

.proxima__rotulo {
  margin: 0 0 4px;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

/* ------------------------------------------------- escolha de cartões --- */
.sobretitulo {
  margin: 0 0 2px;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}

.cartoes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.cartao--escolha {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.cartao--escolha:hover,
.cartao--escolha:focus-visible {
  border-color: var(--marca);
}

.cartao--escolha__sigla {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--marca-clara);
  color: var(--marca);
  font-weight: 700;
  letter-spacing: 0.02em;
}

.cartao--escolha__corpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

@media (max-width: 720px) {
  .fluxo__etapa {
    grid-template-columns: 26px 1fr;
    row-gap: 4px;
  }

  .fluxo__detalhe,
  .fluxo__acao {
    grid-column: 2;
    text-align: left;
  }
}

/* As duas cargas do ContaBit, lado a lado quando cabe. */
.cargas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
}

/* O exercício, ao lado do condomínio: a mesma pergunta, o mesmo lugar. */
.trocador--exercicio {
  border-left: 1px solid var(--borda);
  padding-left: 14px;
}

.trocador--exercicio input[type="number"] {
  /* Largura em ``ch`` conta só o caractere e ignora o preenchimento: com
     6.5ch o ano aparecia cortado como "20". Quatro dígitos mais a folga. */
  width: 8ch;
  text-align: center;
}

/* --------------------------------------------------------- manual ------- */
.manual__etapa {
  padding: 14px 0;
  border-top: 1px solid var(--borda);
}

.manual__etapa:first-of-type {
  border-top: none;
}

.manual__etapa h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 4px;
}

.manual__numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--marca);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}

/* Rótulo e explicação em duas colunas quando cabe; empilhados no telefone. */
.manual__telas {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 2.4fr);
  gap: 6px 18px;
  margin: 8px 0 0;
}

.manual__telas dt {
  font-weight: 600;
}

.manual__telas dd {
  margin: 0;
  color: var(--texto-suave);
}

.manual__passos {
  margin: 0;
  padding-left: 1.3em;
  line-height: 1.75;
}

.manual__passos li {
  margin-bottom: 6px;
}

@media (max-width: 720px) {
  .manual__telas {
    grid-template-columns: 1fr;
  }

  .manual__telas dd {
    margin-bottom: 8px;
  }
}

/* Explicação que fica fora do caminho até ser pedida. <details> é do HTML:
   abre e fecha sem JavaScript, que o nosso CSP bloqueia de qualquer forma. */
.explicacao {
  margin-top: 12px;
  border-top: 1px solid var(--borda);
  padding-top: 10px;
}

.explicacao summary {
  cursor: pointer;
  color: var(--marca);
  font-size: 0.9rem;
}

.explicacao[open] summary {
  margin-bottom: 8px;
}

/* ------------------------------------------------ onde o exercício está -- */
/* O veredito é a primeira coisa que o síndico lê. Cor **e** palavra: quem
   não distingue verde de vermelho continua lendo "dentro" ou "acima". */
.veredito {
  margin: 4px 0 14px;
  font-size: 1.15rem;
  line-height: 1.4;
}

.veredito--dentro strong {
  color: var(--marca);
}

.veredito--acima strong {
  color: var(--erro);
}

/* Mês que ainda não fechou fica apagado: ele está na tabela para ser visto,
   não para ser comparado. */
.mes--aberto td {
  opacity: 0.55;
}

.tabela--meses tfoot .resultado td {
  border-top: 2px solid var(--borda-forte);
  font-weight: 600;
}

.nota--recebido {
  background: var(--marca-clara);
  border-color: #bcd3e8;
  color: var(--marca);
}

/* --------------------------------------------------------- extrato ------ */
.extrato {
  padding: 16px 0;
  border-top: 1px solid var(--borda);
}

.extrato:first-of-type {
  border-top: none;
  padding-top: 4px;
}

.extrato h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 8px;
}

/* Linhas apertadas: o extrato é para correr o olho pela coluna do que saiu. */
.tabela--extrato td,
.tabela--extrato th {
  padding-top: 5px;
  padding-bottom: 5px;
}

/* --------------------------------------------------------------------------
   O razão dobrado dentro da tabela de contas.

   A linha da dobra é filha do mesmo <tbody> da conta a que pertence, e precisa
   parecer subordinada a ela — não mais uma conta. Daí o recuo à esquerda, o
   fundo levemente rebaixado e a ausência de borda superior: visualmente ela
   cola na linha de cima.
   -------------------------------------------------------------------------- */
.tabela tr.lancamentos > td {
  padding: 0 0 0 26px;
  background: var(--fundo);
  border-top: 0;
}

.lancamentos__dobra > summary {
  cursor: pointer;
  font-size: 0.82rem;
  color: var(--marca);
  padding: 6px 0;
  /* O triângulo padrão do navegador basta, e some o `list-style` que o Safari
     põe por fora dele. */
  list-style-position: inside;
}

.lancamentos__dobra > summary:hover {
  text-decoration: underline;
}

.tabela--lancamentos {
  margin: 2px 0 12px;
  font-size: 0.84rem;
}

.tabela--lancamentos th,
.tabela--lancamentos td {
  padding: 5px 10px;
}

/* O histórico é o que se lê; o resto é referência. Dar-lhe a largura evita
   que a data e os valores a espremam numa coluna de duas palavras por linha. */
.tabela--lancamentos td:nth-child(2) {
  width: 100%;
  color: var(--texto);
}

/* A âncora que vem do quadro de estouros. Sem isto, o cabeçalho fixo cobre a
   linha para onde o link levou, e a pessoa acha que o link não funcionou. */
.tabela--orcamento tr[id] {
  scroll-margin-top: 90px;
}

/* --------------------------------------------------------------------------
   O nível que o DRE totaliza, acima dos grupos.

   Precisa pesar mais que a linha de grupo e menos que o TOTAL: é o número que
   o síndico confere contra o relatório do contador, e tem de ser achável de
   relance sem roubar a leitura do resultado final.
   -------------------------------------------------------------------------- */
.tabela tr.bloco > td {
  background: var(--fundo);
  border-top: 2px solid var(--borda-forte);
  font-weight: 650;
  letter-spacing: 0.01em;
  padding-top: 12px;
  padding-bottom: 10px;
}

/* O grupo recua, para ler como filho do bloco acima. */
.tabela tr.grupo > td:first-child {
  padding-left: 22px;
}

/* --------------------------------------------------------------------------
   As contas fora da base orçamentária.

   Dobrada e não aberta: é informação de reconciliação, não de decisão. Quem
   acompanha o orçamento não precisa dela toda vez; quem confere contra o DRE
   precisa achá-la na primeira procura.
   -------------------------------------------------------------------------- */
.fora-da-base > summary {
  cursor: pointer;
  font-size: 0.92rem;
  padding: 2px 0;
}

.fora-da-base > summary:hover {
  text-decoration: underline;
}

.fora-da-base[open] > summary {
  margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   A linha do acumulado.

   Substitui as barras pareadas mês a mês, que não tinham legenda, não tinham
   escala e desenhavam em módulo — o mês de superávit saía igual ao de déficit.
   -------------------------------------------------------------------------- */
.grafico--linha {
  max-width: 100%;
}

.grafico__grade {
  stroke: var(--borda);
  stroke-width: 1;
}

.grafico__escala,
.grafico__legenda {
  font-size: 11px;
  fill: var(--texto-suave);
}

.grafico__serie {
  fill: none;
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* O orçado é referência, não resultado: tracejado e discreto, para a linha
   cheia do realizado ser a que o olho segue. */
.grafico__serie--orcado {
  stroke: var(--borda-forte);
  stroke-dasharray: 5 4;
}

.grafico__serie--dentro { stroke: var(--marca); }
.grafico__serie--acima  { stroke: var(--erro-forte, #d03b3b); }

.grafico__ponta--dentro { fill: var(--marca); }
.grafico__ponta--acima  { fill: var(--erro-forte, #d03b3b); }

.grafico__ponta-valor {
  font-size: 12px;
  font-weight: 600;
}

.grafico__ponta-valor--orcado { fill: var(--texto-suave); }
.grafico__ponta-valor--dentro { fill: var(--marca); }
.grafico__ponta-valor--acima  { fill: var(--erro-forte, #d03b3b); }