/* Layout do portal. Compartilhado entre todos os tenants e cacheavel para
   sempre -- por isso NAO pode conter cor, nome ou logo de cliente nenhum.
   As variaveis abaixo sao apenas o padrao de quem nao cadastrou marca; o
   tema real chega num bloco :root embutido na pagina, por requisicao.
   Ha teste lendo este arquivo. */
:root {
  --cor-primaria: #1f2937;
  --cor-fundo: #ffffff;
  --cor-superficie: #f5f5f5;
  --cor-texto: #111111;
  --cor-suave: #6b7280;
  --cor-borda: #e5e7eb;
  --raio: 8px;
  --gap: 8px;

  /* AS TRES TONALIDADES DA MARCA SAO DERIVADAS, E NAO CADASTRADAS, e a
     decisao vale ser lida antes de alguem "consertar" isto acrescentando
     campos em associacoes_branding.

     O redesenho de 2026-08-28 pos uma FAIXA de marca no topo com texto
     BRANCO em cima, e um cartao de destaque num tom claro da mesma cor.
     Isso cria uma exigencia que o white-label nao tinha: a cor do cliente
     precisa render um tom escuro o bastante para texto branco e um tom
     claro o bastante para texto escuro.

     DERIVAR, E NAO PEDIR UM SEGUNDO CAMPO: um campo novo e obrigatorio
     para todo tenant futuro, e quem esquecer de preencher ganha branco
     sobre amarelo -- um defeito de contraste que so aparece no cliente que
     o sofreu. Misturar em direcao ao preto garante a DIRECAO do contraste
     seja qual for o matiz cadastrado; um amarelo de marca vira um marrom
     escuro, feio talvez, mas legivel. Legivel sempre e melhor que bonito
     as vezes.

     72% / 8% / 22% sao os tres pontos: o escuro carrega texto branco, o
     claro e superficie de leitura, e a borda separa os dois sem virar
     linha preta.

     COLOR-MIX DENTRO DE CUSTOM PROPERTY NAO TEM FALLBACK, e isso e uma
     armadilha conhecida: a declaracao e aceita na analise (custom property
     aceita quase qualquer token) e so falha no USO, quando ja e tarde para
     a declaracao anterior valer. Por isso as superficies que carregam
     TEXTO BRANCO repetem o padrao progressivo do body.entrada -- cor
     solida primeiro, color-mix depois -- em vez de confiar nestas tres.
     Num navegador sem color-mix a faixa cai em --cor-primaria, que
     continua escura e continua aceitando branco. */
  --marca-escura: color-mix(in srgb, var(--cor-primaria) 72%, #000000);
  --marca-clara: color-mix(in srgb, var(--cor-primaria) 8%, #ffffff);
  --marca-borda: color-mix(in srgb, var(--cor-primaria) 22%, #ffffff);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--cor-fundo);
  color: var(--cor-texto);
  font-family: Archivo, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  line-height: 1.45;
}

a { color: var(--cor-primaria); }

/* A FAIXA DE MARCA (2026-08-28). Era uma barra branca com uma borda em
   baixo; virou um bloco na cor escura da marca, com a navegacao do painel
   DENTRO dela. A diferenca nao e decorativa: as abas do painel eram tres
   links cinzas soltos sobre o branco, no meio da pagina, indistinguiveis
   das sub-abas do Fechamento que vem logo abaixo. Dentro da faixa elas
   viram abas de pasta -- a ativa e a unica recortada na cor do conteudo, e
   a hierarquia "painel > tela > aba" se le de cima para baixo.

   Cor solida ANTES do color-mix, e a ordem e o mecanismo: ver a nota das
   tres tonalidades no :root. Esta faixa carrega texto branco, entao ela e
   uma das superficies que nao pode depender de color-mix existir. */
.topo {
  padding: calc(var(--gap) * 2) calc(var(--gap) * 3) 0;
  background: var(--cor-primaria);
  background: color-mix(in srgb, var(--cor-primaria) 72%, #000000);
  color: #ffffff;
}
.topo-linha {
  display: flex; align-items: center; justify-content: space-between;
  gap: calc(var(--gap) * 2);
}
/* A LOGO NUMA PASTILHA BRANCA. A logo de um cliente pode ser da propria
   cor da marca sobre fundo transparente -- e a do primeiro tenant a usar
   esta faixa e -- e sobre a faixa escura ela simplesmente sumiria. A
   pastilha e o unico jeito que funciona sem saber nada sobre o arquivo
   enviado. Nao ha nome de cliente neste arquivo, e nao pode haver: ha
   teste. */
.topo .marca-pastilha {
  background: #ffffff; border-radius: 10px;
  padding: 7px 14px; display: flex; align-items: center; flex: none;
}
.topo img { height: 26px; display: block; }
.topo .marca-texto {
  font-weight: 700; font-size: 1.1rem; text-decoration: none;
  color: #ffffff;
}
.topo-quem { display: flex; align-items: center; gap: calc(var(--gap) * 2); }
.topo-nome { font-size: 0.9rem; font-weight: 600; text-align: right; }
.topo-nivel {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
  text-align: right;
  /* rgba e nao um cinza fixo: o branco a 70% funciona sobre QUALQUER
     matiz de marca, e um #9ca3af sumiria sobre um azul claro. */
  color: rgba(255, 255, 255, 0.7);
}
.topo-sair {
  color: rgba(255, 255, 255, 0.85); font-size: 0.88rem;
  text-decoration: none; border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 999px; padding: 7px 16px; white-space: nowrap;
}
.topo-sair:hover { background: rgba(255, 255, 255, 0.12); }

.conteudo { padding: calc(var(--gap) * 2); }

.kpis {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: calc(var(--gap) * 1.75);
}
/* CINCO colunas, e o numero nao e arbitrario: o cartao principal ocupa
   DUAS, e as telas que o usam tem tres cartoes menores. Com quatro
   colunas sobrava um cartao sozinho numa segunda linha, com o peso visual
   de um titulo de secao e o conteudo de um rodape. */
@media (min-width: 900px) {
  .kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
.kpi {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  border-radius: var(--raio); padding: calc(var(--gap) * 1.5);
}
/* O rotulo vem ANTES do valor no documento -- ler "R$ 150.378,16" e so
   depois descobrir do que ele e obriga a voltar. O margin-top saiu junto
   com a inversao. */
.kpi-rotulo {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--cor-suave); font-weight: 600;
}
.kpi-valor {
  font-size: 1.35rem; font-weight: 700; color: var(--cor-texto);
  font-variant-numeric: tabular-nums; margin-top: 3px;
}

/* O CARTAO PRINCIPAL. Ele e o unico que carrega a cor da marca: quando os
   quatro numeros tinham o mesmo peso, a tela nao dizia qual deles e a
   resposta da pergunta que levou a pessoa ate ali. */
.kpi-hero {
  grid-column: span 2;
  background: var(--cor-fundo);
  border-left: 4px solid var(--cor-primaria);
  padding: calc(var(--gap) * 1.75) calc(var(--gap) * 2);
}
.kpi-hero .kpi-valor {
  font-size: 2.2rem; line-height: 1.1; color: var(--cor-primaria);
  letter-spacing: -0.02em; margin-top: 4px;
}

/* OS FILTROS PERDERAM A CAIXA (2026-08-28), e o motivo e o oposto do que
   a criou. Eles ganharam a faixa cinza quando viviam sozinhos no meio da
   pagina: sem moldura, "agosto/2026" dentro de um <select> solto nao dizia
   que a tela inteira era daquele mes. Agora eles vivem NA MESMA LINHA do
   titulo -- ver .cabeca-tela --, e a proximidade faz o mesmo trabalho que
   a moldura fazia. Mantidas as duas, a caixa so somava peso ao redor de
   controles que ja estavam ancorados.

   Some com ela a linha `.contexto` que repetia o mes por extenso debaixo
   do titulo: com o seletor ao lado dizendo "Agosto/2026", repetir nao
   reforca, ocupa altura. */
.filtros {
  display: flex; gap: calc(var(--gap) * 1.5); flex-wrap: wrap;
  align-items: flex-end;
}
/* Rotulo em cima do campo, e nao ao lado: ao lado, cada par empurra o
   proximo e a faixa quebra em lugares diferentes a cada largura. */
.campo-filtro { display: flex; flex-direction: column; gap: 5px; }
.campo-filtro > span {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--cor-suave); font-weight: 600;
}
.filtros input, .filtros select, .filtros button {
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  padding: var(--gap) calc(var(--gap) * 1.5); font: inherit;
  background: var(--cor-fundo); color: var(--cor-texto);
  /* 44px e o alvo de toque minimo, e estas telas sao usadas no celular
     por metade dos usuarios. */
  min-height: 44px;
}
.filtros select { min-width: 150px; }
.filtros button { background: var(--cor-primaria); color: #ffffff; cursor: pointer; font-weight: 600; }
.filtros button[disabled] { opacity: 0.45; cursor: default; }

/* A tabela e a lista de cartoes sao a MESMA informacao em duas formas --
   e, no HTML, sao as MESMAS LINHAS. Renderizar dois conjuntos (um <tr> e
   um <article>) dobraria o documento: o spec orca ~100 KB para as 675
   linhas do maior escopo, e duplicar estoura esse orcamento sem entregar
   nada novo. Entao a tabela vira cartao por CSS, e cada <td> carrega o
   rotulo da coluna em data-rotulo para o modo cartao imprimi-lo.
   Efeito colateral bom: a Task 9 filtra, ordena e pagina UM conjunto de
   linhas, e as duas formas acompanham de graca. */
.tabela { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.tabela th {
  text-align: left; font-size: 0.66rem; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--cor-suave); font-weight: 600;
  padding: calc(var(--gap) * 1.25) var(--gap);
  /* Fundo no cabecalho: sem ele, a primeira linha de dado e o cabecalho
     tem o mesmo peso e a tabela comeca sem borda de entrada. */
  background: var(--cor-superficie);
  border-bottom: 1px solid var(--cor-borda);
}
.tabela thead tr:first-child th:first-child { border-top-left-radius: 6px; }
.tabela thead tr:first-child th:last-child { border-top-right-radius: 6px; }
.tabela td { padding: calc(var(--gap) * 1.4) var(--gap); border-bottom: 1px solid var(--cor-borda); }
/* tabular-nums: sem isto os valores da coluna da direita "dancam" entre as
   linhas, porque os digitos tem larguras diferentes. */
.tabela td.valor, .tabela th.valor {
  text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums;
}
.tabela td.valor { font-weight: 700; }
/* A placa e a identidade da linha, e ela e alfanumerica: sem tabular-nums
   duas placas na mesma coluna nao alinham. */
.tabela td.chave { font-weight: 600; letter-spacing: 0.03em; font-variant-numeric: tabular-nums; }
.tabela td.suave { color: var(--cor-suave); }
.tabela th[data-ordenavel] { cursor: pointer; user-select: none; }
.tabela th[aria-sort="ascending"]::after  { content: " \2191"; }
.tabela th[aria-sort="descending"]::after { content: " \2193"; }

@media (max-width: 720px) {
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabela, .tabela tbody, .tabela tr, .tabela td { display: block; width: auto; }
  .tabela tr {
    border: 1px solid var(--cor-borda); border-radius: var(--raio);
    padding: calc(var(--gap) * 1.5); margin-bottom: var(--gap);
  }
  .tabela td { border: 0; padding: 2px 0; font-size: 0.8rem; color: var(--cor-suave); }
  .tabela td::before {
    content: attr(data-rotulo) ": "; text-transform: uppercase;
    font-size: 0.65rem; letter-spacing: 0.04em;
  }
  /* a primeira celula e o titulo do cartao, e a marcada como .valor e o
     numero grande -- as duas sem o rotulo repetido na frente */
  .tabela td:first-child {
    font-size: 1rem; font-weight: 600; color: var(--cor-texto);
    padding-bottom: var(--gap);
  }
  .tabela td:first-child::before, .tabela td.valor::before { content: ""; }
  .tabela td.valor {
    text-align: left; font-size: 1.05rem; color: var(--cor-primaria);
    padding-top: var(--gap);
  }
}

.aviso {
  display: flex; gap: calc(var(--gap) * 1.25); align-items: flex-start;
  border: 1px solid var(--cor-borda); border-left: 4px solid var(--cor-primaria);
  border-radius: var(--raio); padding: calc(var(--gap) * 1.5);
  margin-bottom: calc(var(--gap) * 2); background: var(--cor-superficie);
  font-size: 0.85rem;
}
.aviso svg { flex: none; margin-top: 2px; color: var(--cor-primaria); }
.rodape { color: var(--cor-suave); font-size: 0.8rem; padding-top: var(--gap); }
.lista-paineis { list-style: none; padding: 0; }
.lista-paineis li { margin-bottom: var(--gap); }
.oculto { display: none !important; }

/* O banner de "acessando como" e deliberadamente barulhento: ele existe
   para ser impossivel de nao ver. */
.aviso-como {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 12px 16px;
  border-radius: 10px;
  border: 2px solid #b45309;
  background: #fef3c7;
  color: #7c2d12;
  font-size: 15px;
}

.aviso-como a {
  color: #7c2d12;
  font-weight: 700;
}

/* ---- Telas de entrada: login, esqueci-senha, nova-senha ---------------
   Sem cor, nome ou logo de cliente: ver o cabecalho deste arquivo. A
   identidade entra pelas variaveis, que chegam no :root embutido por
   requisicao. */

body.entrada {
  min-height: 100vh;
  /* dvh depois de vh, como fallback progressivo: quem nao entende dvh
     descarta a segunda linha e fica com a primeira.
     O 100vh do iOS e a altura COM a barra do navegador RECOLHIDA -- ou
     seja, MAIOR que a area visivel, nao menor. A barra nao come parte do
     vh: o vh ignora a barra. Por isso o cartao centralizado nasce abaixo
     da dobra, e o dvh, que acompanha a area realmente visivel, conserta. */
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--gap) * 3) calc(var(--gap) * 2);
  /* Fundo tingido pela cor do cliente, e a cor NAO esta aqui: as duas
     variaveis chegam no :root embutido por requisicao (_cabeca.html).
     Este arquivo continua cacheavel e sem identidade de tenant.

     A ordem das duas linhas e o fallback, do mesmo feitio do vh/dvh
     acima: color-mix nao existe em navegador antigo, e uma declaracao
     invalida e DESCARTADA inteira. Sem a cor solida na linha anterior,
     quem nao entende color-mix nao cairia na cor do cliente -- cairia
     em fundo transparente, com o texto do rodape sobre o branco do
     navegador. Inverter as duas deixa a tela certa no navegador novo e
     errada no antigo, que e o defeito que nao aparece em quem testa.

     A mistura e de 38% no topo e some em 60% da altura. Os dois numeros
     andam juntos de proposito: o cartao branco precisa continuar sendo a
     superficie de leitura, e o rodape -- que fica FORA do cartao -- tem
     que cair na faixa ja limpa. Empurrar o fim para baixo de 60% poria
     texto secundario sobre cor saturada, que e onde o contraste quebra
     em marca escura. */
  background-color: var(--cor-fundo);
  background-image: linear-gradient(
    160deg,
    color-mix(in srgb, var(--cor-primaria) 38%, var(--cor-fundo)) 0%,
    var(--cor-fundo) 60%
  );
  background-repeat: no-repeat;
}

.entrada-caixa { width: 100%; max-width: 400px; }

.cartao {
  background: var(--cor-fundo);
  border: 1px solid var(--cor-borda);
  border-radius: calc(var(--raio) * 1.5);
  padding: calc(var(--gap) * 5) calc(var(--gap) * 4);
}

.cartao-marca { text-align: center; margin-bottom: calc(var(--gap) * 4); }

/* max-height 64px, o dobro do .topo: aqui a marca e o unico elemento de
   identidade da tela, enquanto no topo ela divide espaco com a navegacao.

   A logo NAO distorce porque a ALTURA E A UNICA DIMENSAO FIXADA -- com
   `height` ausente e `width: auto`, o navegador deriva a largura da razao
   intrinseca da imagem. E o que NAO esta escrito aqui que faz o trabalho,
   e por isso vale um comentario. Quem um dia fixar as duas dimensoes
   quebra isso, e precisa escolher naquele momento, com as logos reais na
   frente, entre tarjas e corte -- nao ha propriedade pre-decidindo isso
   por ele. */
.cartao-marca img {
  max-height: 64px;
  max-width: 100%;
  width: auto;
}

.cartao-marca .marca-texto {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cor-texto);
}

.cartao-titulo {
  margin: 0 0 calc(var(--gap) * 3);
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--cor-texto);
}

.campo { display: block; margin-bottom: calc(var(--gap) * 2.5); }

.campo > span {
  display: block;
  margin-bottom: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--cor-suave);
}

.campo input {
  width: 100%;
  font: inherit;
  /* 16px, e nao herdado: abaixo disso o iOS da zoom sozinho ao focar. */
  font-size: 16px;
  padding: 12px 14px;
  min-height: 44px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  background: var(--cor-fundo);
  color: var(--cor-texto);
}

/* O anel de foco sai de --cor-texto, e NAO de --cor-primaria: os dois
   lados do contraste seriam do tenant (o anel na primaria, o fundo do
   campo na --cor-fundo), entao um cliente com primaria perto do fundo
   ficaria SEM indicador de foco visivel nos unicos campos da tela de
   entrada. E o mesmo criterio ja aplicado ao .alerta mais abaixo: estado
   nao e identidade de marca. O .botao-principal ja acertava isso; era
   este aqui que destoava. A borda fica na primaria -- ela e a metade
   decorativa, nao a que carrega a informacao. */
.campo input:focus-visible {
  outline: 2px solid var(--cor-texto);
  outline-offset: 1px;
  border-color: var(--cor-primaria);
}

/* O UNICO ponto de destaque da tela. Se algum dia houver um segundo
   botao aqui, ele nao usa esta classe. */
.botao-principal {
  width: 100%;
  min-height: 48px;
  margin-top: var(--gap);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--cor-primaria);
  border: 0;
  border-radius: var(--raio);
  cursor: pointer;
}

.botao-principal:hover { filter: brightness(0.92); }

.botao-principal:focus-visible {
  outline: 2px solid var(--cor-texto);
  outline-offset: 2px;
}

.link-discreto {
  display: block;
  margin-top: calc(var(--gap) * 2.5);
  text-align: center;
  font-size: 0.85rem;
}

.texto-apoio {
  margin: 0 0 calc(var(--gap) * 3);
  font-size: 0.9rem;
  color: var(--cor-suave);
}

/* Vermelho de erro e superficie neutra de aviso fixos, nao variaveis do
   tenant: estado nao e identidade de marca, e um cliente com primaria
   vermelha tornaria erro indistinguivel de botao. Mesmo criterio do
   .aviso-como. */
.alerta {
  margin: 0 0 calc(var(--gap) * 2.5);
  padding: 12px 14px;
  border-radius: var(--raio);
  border: 1px solid #f5c2c7;
  background: #fdf2f3;
  color: #842029;
  font-size: 0.9rem;
}

.aviso-ok {
  margin: 0 0 calc(var(--gap) * 2.5);
  padding: 12px 14px;
  border-radius: var(--raio);
  border: 1px solid var(--cor-borda);
  background: var(--cor-superficie);
  color: var(--cor-texto);
  font-size: 0.9rem;
}

.rodape-entrada {
  margin: calc(var(--gap) * 3) 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--cor-suave);
}

/* No celular o cartao vira a tela: borda e canto arredondado em volta de
   um cartao que ocupa a largura inteira sao moldura de nada. */
@media (max-width: 480px) {
  body.entrada { padding: 0; align-items: stretch; }
  .entrada-caixa {
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .cartao {
    border: 0;
    border-radius: 0;
    padding: calc(var(--gap) * 4) calc(var(--gap) * 3);
  }
}

/* --------------------------------------------------------------------
   ABAS, CARTAO DE COOPERATIVA E A SERIE (2026-08-25)
   -------------------------------------------------------------------- */

/* AS ABAS DO PAINEL, DENTRO DA FAIXA (2026-08-28). Elas sao abas de pasta:
   a ativa e recortada na cor do CONTEUDO e encosta na borda de baixo da
   faixa, o que a liga fisicamente a pagina que ela abre. As inativas ficam
   sobre o escuro.

   Wrap continua: com tres abas e um telefone estreito, sem ele a terceira
   sai da tela e nao ha rolagem lateral no shell -- ela some.

   margin-bottom: 0 e nao negativa. A faixa nao tem borda de 1px para a aba
   cobrir; o que faz o encaixe e a aba terminar exatamente onde a faixa
   termina, e por isso o padding-bottom da .topo e zero. */
.abas {
  display: flex;
  gap: 4px;
  margin: calc(var(--gap) * 2.25) 0 0;
  flex-wrap: wrap;
}
.aba {
  padding: var(--gap) calc(var(--gap) * 2.25);
  border-radius: var(--raio) var(--raio) 0 0;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.92rem;
}
.aba:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); }
.aba-ativa {
  background: var(--cor-fundo);
  color: var(--cor-primaria);
  font-weight: 700;
}
/* Opacidade E cursor: so a opacidade ficaria ambigua com um link visitado,
   e so o cursor nao aparece em toque nenhum. */
.aba-indisponivel { opacity: 0.45; cursor: default; }

.nota-medida {
  font-size: 0.8rem;
  color: var(--cor-suave);
  margin: 0 0 calc(var(--gap) * 2) 0;
}

.cartao-coop {
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio);
  padding: calc(var(--gap) * 1.5);
  margin-bottom: var(--gap);
  background: var(--cor-superficie);
}
/* O CARTAO FECHADO TEM QUE RESPONDER SOZINHO. Enquanto a serie e a
   variacao so apareciam depois de abrir, a lista fechada era uma coluna de
   nomes e valores -- e a pergunta que traz a pessoa ao Historico ("esta
   subindo?") exigia abrir os cinco cartoes, um a um. Agora o summary
   carrega os quatro: nome, quantas adesoes, para onde foi e quanto. */
.cartao-coop > summary {
  display: flex;
  align-items: center;
  gap: calc(var(--gap) * 2);
  cursor: pointer;
  list-style: none;
}
.cartao-ident { flex-grow: 1; min-width: 0; }
.cartao-meta {
  font-size: 0.8rem; color: var(--cor-suave); margin-top: 2px;
  display: flex; gap: var(--gap); align-items: center; flex-wrap: wrap;
}
/* O triangulo padrao do <details> desalinha o flex no WebKit -- o iPhone e
   o navegador de metade dos usuarios deste portal. */
.cartao-coop > summary::-webkit-details-marker { display: none; }
/* block: o nome e a meta empilham dentro de .cartao-ident, e nao lado a lado. */
.cartao-nome { display: block; font-weight: 600; }
.cartao-valor {
  flex: none;
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--cor-primaria);
  /* Sem isto, "R$ 150.378,16" quebra em duas linhas no telefone e o cartao
     fica com duas alturas diferentes na mesma lista. */
  white-space: nowrap;
}
/* Zero, e nao var(--gap): a serie agora vive DENTRO do summary, alinhada
   com o nome e o valor, e nao numa faixa propria abaixo deles. */
.cartao-serie { margin: 0; flex: none; }
/* A cor da serie vem do tema do cliente, e nao daqui: e o unico elemento
   grafico do cartao, e ele tem que ser da marca de quem esta olhando. */
.cartao-serie .serie rect { fill: var(--cor-primaria); opacity: 0.75; }
.cartao-resumo {
  font-size: 0.8rem;
  color: var(--cor-suave);
  margin: 0 0 var(--gap) 0;
}

/* AS DUAS UNICAS CORES FIXAS QUE ESTE ARQUIVO PODE TER, e o motivo importa:
   verde e vermelho aqui nao sao marca de cliente, sao CONVENCAO DE SINAL --
   subiu e caiu. Deriva-las de var(--cor-primaria) faria um tenant de marca
   vermelha mostrar QUEDA em verde-marca e ALTA em vermelho-marca, que e a
   leitura invertida.
   Ha teste em test_app.py afirmando que so estas duas sao fixas aqui. */
.sobe { color: #15803d; }
.desce { color: #b91c1c; }

/* ---------------------------------------------------------------------
   FECHAMENTO (Fatia 2)

   Nenhuma cor literal aqui, e isso nao e estilo: e o que mantem o portal
   white-label. Tudo sai de var(--cor-*), que o tema do tenant sobrescreve
   por requisicao. Ha teste lendo este arquivo.

   As sub-abas sao as MESMAS no celular e na web (D9 do spec): uma navegacao
   que muda de forma entre larguras obriga a pessoa a reaprender a tela
   quando troca de aparelho.
   --------------------------------------------------------------------- */
.sub-abas {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  margin: calc(var(--gap) * 2) 0;
  border-bottom: 1px solid var(--cor-borda);
}
.sub-abas a {
  padding: var(--gap) calc(var(--gap) * 1.5);
  text-decoration: none;
  color: var(--cor-suave);
  border-bottom: 2px solid transparent;
  /* margin-bottom negativa: a borda da aba ativa cobre a da <nav>, senao
     ficam duas linhas paralelas de 1px e a ativa nao parece ativa. */
  margin-bottom: -1px;
}
.sub-abas a.on {
  color: var(--cor-primaria);
  font-weight: 700;
  border-bottom-color: var(--cor-primaria);
}

.fech-total {
  border: 1px solid var(--cor-borda);
  border-left: 4px solid var(--cor-primaria);
  border-radius: var(--raio);
  background: var(--cor-superficie);
  padding: calc(var(--gap) * 2);
  margin-bottom: calc(var(--gap) * 2);
}
.fech-rotulo {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--cor-suave);
}
.fech-valor {
  font-size: 2rem;
  font-weight: 700;
  color: var(--cor-primaria);
  line-height: 1.2;
}
.fech-nivel {
  display: inline-block;
  font-size: 0.75rem;
  padding: 2px calc(var(--gap) * 1.5);
  border-radius: 999px;
  border: 1px solid var(--cor-borda);
  background: var(--cor-fundo);
  color: var(--cor-suave);
}
.fech-parcelas {
  margin-top: calc(var(--gap) * 2);
  border-top: 1px solid var(--cor-borda);
  padding-top: var(--gap);
}
.fech-parcelas > div {
  display: flex;
  justify-content: space-between;
  gap: var(--gap);
  padding: calc(var(--gap) * 0.75) 0;
  /* tabular-nums: sem isto os valores da coluna da direita "dancam" entre
     as linhas, porque os digitos tem larguras diferentes. */
  font-variant-numeric: tabular-nums;
}

/* A BARRA DE CADA PARCELA. O Resumo responde "quanto voce recebe"; a barra
   responde "de onde ele vem" sem obrigar a dividir tres numeros de cabeca.
   A largura sai do servidor -- ver normalizar_fechamento -- porque e uma
   conta sobre Decimal, e Jinja nao e lugar de fazer conta. */
.fech-parcela { display: flex; flex-direction: column; gap: 5px; padding: calc(var(--gap) * 0.75) 0; }
.fech-parcela > div {
  display: flex; justify-content: space-between; gap: var(--gap);
  align-items: baseline; font-variant-numeric: tabular-nums;
}
.fech-barra {
  height: 6px; border-radius: 999px;
  background: var(--cor-borda); overflow: hidden;
}
.fech-barra > i { display: block; height: 100%; background: var(--cor-primaria); border-radius: 999px; }
.fech-parcelas em {
  font-style: normal;
  color: var(--cor-suave);
  font-size: 0.8rem;
}
.fech-soma {
  border-top: 1px solid var(--cor-borda);
  margin-top: var(--gap);
  font-weight: 700;
}
.fech-tabela { font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------------
   CABECALHO DE TELA, NOTA COM ICONE, BARRA DA TABELA E O GRAFICO
   (2026-08-26)

   Nenhuma cor literal aqui, e isso nao e estilo: e o que mantem o portal
   white-label. Tudo sai de var(--cor-*), que o tema do tenant sobrescreve
   por requisicao. Ha teste lendo este arquivo.
   --------------------------------------------------------------------- */

/* O QUE ESTA TELA ESTA MOSTRANDO, EM PALAVRAS. Antes disto o periodo e o
   escopo so existiam dentro dos <select>, e uma tela impressa, colada num
   grupo ou aberta no dia seguinte nao dizia de que mes era. */
/* O TITULO E OS FILTROS NA MESMA LINHA (2026-08-28). Eram dois blocos
   empilhados -- titulo, subtitulo com o periodo por extenso, e so entao a
   faixa de filtros --, o que empurrava o primeiro numero da tela para
   perto de 200px de altura no celular. Sao a mesma coisa: "que recorte
   esta tela esta mostrando". Na mesma linha, o recorte se le de uma vez.

   flex-end e nao baseline: os <select> tem 44px de altura minima (alvo de
   toque) e o h2 nao; alinhados pela base do texto, o titulo flutuava
   acima dos campos. */
.cabeca-tela {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: calc(var(--gap) * 2.5); flex-wrap: wrap;
  margin-bottom: calc(var(--gap) * 2.5);
}
.cabeca-tela h2 {
  margin: 0; font-size: 1.6rem; font-weight: 800; letter-spacing: -0.02em;
}

/* A VARIACAO. Verde e vermelho vem de .sobe e .desce, que sao convencao de
   sinal e nao marca -- ver o comentario delas. */
.delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.8rem; font-weight: 600; margin-top: 6px;
}
.delta em { font-style: normal; color: var(--cor-suave); font-weight: 400; }

/* A nota de medida ganhou icone. Ela explica por que dois totais da mesma
   base nao coincidem, e como paragrafo cinza solto ninguem a lia. */
.nota-medida {
  display: flex; gap: var(--gap); align-items: flex-start;
  font-size: 0.82rem; color: var(--cor-suave);
  margin: 0 0 calc(var(--gap) * 2) 0; max-width: 78ch;
}
.nota-medida svg { flex: none; margin-top: 2px; }
.nota-medida strong { color: var(--cor-texto); font-weight: 600; }

/* BUSCA, CONTAGEM E PAGINACAO NA MESMA LINHA, acima da tabela. Eram tres
   blocos em lugares diferentes -- a busca antes da tabela e a paginacao
   depois dela -- e num telefone a paginacao ficava a uma rolagem inteira
   de distancia do que ela pagina. */
.barra-tabela {
  display: flex; gap: calc(var(--gap) * 1.25); align-items: center;
  flex-wrap: wrap; margin-bottom: calc(var(--gap) * 1.25);
}
.barra-tabela input[type="search"] {
  flex: 1; min-width: 220px; min-height: 44px;
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  padding: var(--gap) calc(var(--gap) * 1.5); font: inherit;
  background: var(--cor-fundo); color: var(--cor-texto);
}
.paginacao {
  display: flex; gap: var(--gap); align-items: center; flex-wrap: wrap;
  margin-left: auto; font-size: 0.8rem; color: var(--cor-suave);
}
.paginacao button {
  border: 1px solid var(--cor-borda); border-radius: 6px;
  background: var(--cor-fundo); color: var(--cor-texto);
  font: inherit; font-size: 0.85rem; min-height: 36px;
  padding: 0 calc(var(--gap) * 1.5); cursor: pointer;
}
.paginacao button[disabled] { opacity: 0.45; cursor: default; }

/* ---- O GRAFICO DO PERIODO -------------------------------------------
   Divs e nao SVG, ao contrario do sparkline do cartao: este grafico TEM
   texto -- rotulo de mes e valor por barra -- e serie_svg.py nao escreve
   texto por invariante testada. Escrever texto la para este caso mudaria
   um modulo que existe justamente para nao ter essa responsabilidade.

   A ALTURA DE CADA BARRA VEM DO SERVIDOR, em porcentagem do maior valor da
   propria serie. Escala compartilhada com outro grafico nao ha: cada tela
   desenha a sua. */
.grafico {
  border: 1px solid var(--cor-borda); border-radius: var(--raio);
  padding: calc(var(--gap) * 2);
  margin-bottom: calc(var(--gap) * 2);
}
.grafico-topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: calc(var(--gap) * 1.5); flex-wrap: wrap;
  margin-bottom: calc(var(--gap) * 1.75);
}
.grafico-titulo { font-size: 0.95rem; font-weight: 600; }
.grafico-nota { font-size: 0.78rem; color: var(--cor-suave); }
/* BASE NO ZERO, sempre. Cortar o eixo faria uma diferenca de 3% entre dois
   meses parecer uma queda pela metade -- e a barra existe justamente para
   mostrar o zero, que e o que a linha esconde. */
.grafico-barras {
  display: flex; align-items: flex-end; gap: var(--gap);
  height: 160px; border-bottom: 1px solid var(--cor-borda);
}
.grafico-col {
  flex-grow: 1; display: flex; flex-direction: column;
  justify-content: flex-end; height: 100%;
}
.grafico-col > i {
  display: block; background: var(--cor-primaria);
  border-radius: 4px 4px 0 0;
}
.grafico-rotulos { display: flex; gap: var(--gap); margin-top: var(--gap); }
.grafico-rot {
  flex-grow: 1; text-align: center; font-size: 0.72rem;
  color: var(--cor-suave);
}
.grafico-rot b {
  display: block; font-weight: 600; color: var(--cor-texto);
  font-size: 0.78rem; font-variant-numeric: tabular-nums; margin-top: 1px;
}

@media (max-width: 720px) {
  .cabeca-tela h2 { font-size: 1.3rem; }
  .filtros { gap: var(--gap); }
  .campo-filtro { flex-grow: 1; min-width: 0; }
  .campo-filtro select { width: 100%; min-width: 0; }
  .filtros button { width: 100%; }
  .grafico { padding: calc(var(--gap) * 1.5); }
  .grafico-barras { height: 130px; gap: 6px; }
  .grafico-rotulos { gap: 6px; }
  /* O VALOR DE CADA BARRA SAI NO CELULAR. Seis vezes "R$ 108.240,15" nao
     cabe em 390px: os rotulos encavalam e o grafico fica ilegivel. O mes
     fica, e o intervalo por extenso vira uma frase abaixo -- ver
     .grafico-nota no template. */
  .grafico-rot { font-size: 0.68rem; }
  .grafico-rot b { display: none; }

  /* O cartao de cooperativa empilha: o summary em fila num telefone
     espremeria a serie a nada. */
  .cartao-coop > summary { flex-wrap: wrap; gap: var(--gap); }
  .cartao-ident { flex-basis: 100%; order: 1; }
  .cartao-valor { order: 2; }
  .cartao-serie { order: 3; margin-left: auto; }
}

/* ---- A LINHA DA TABELA COMO CARTAO DE DUAS COLUNAS ------------------
   Continua sendo a MESMA LINHA -- ver o comentario grande da .tabela:
   renderizar um segundo conjunto de elementos dobraria o documento, e o
   orcamento e de ~100 KB para as 675 linhas do maior escopo.

   O que muda e so a grade: identificacao a esquerda, valor a direita, no
   lugar de uma pilha de "rotulo: valor" em que o numero -- que e o que a
   pessoa procura -- ficava no fim.

   SO EM .tabela-cartao, e a restricao e o ponto: as tabelas do Fechamento
   tem VARIAS celulas .valor por linha, e todas cairiam na mesma celula da
   grade, uma por cima da outra. */
@media (max-width: 720px) {
  .tabela-cartao tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 0 calc(var(--gap) * 1.5);
    align-items: start;
  }
  .tabela-cartao td { grid-column: 1; }
  .tabela-cartao td:first-child { grid-row: 1; }
  .tabela-cartao td.valor {
    grid-column: 2; grid-row: 1;
    text-align: right; padding-top: 0;
    font-size: 1.05rem; color: var(--cor-primaria);
  }
}

/* =====================================================================
   O REDESENHO DE 2026-08-28

   Tres telas, uma anatomia: faixa de marca no topo (ver .topo), titulo e
   filtros na mesma linha (ver .cabeca-tela), UM cartao de destaque com o
   numero que responde a pergunta da tela, e so entao a tabela.

   AS NOTAS DE RODAPE SAIRAM DAS TRES, por decisao do usuario. Elas
   explicavam por que Fechamento/Historico e Veiculos Pagantes nao batem
   (mensalidades pagas x todo boleto pago, com juros e desconto rateados).
   Se a pergunta voltar, o caminho e um icone de informacao que abre ao
   clicar -- nao o paragrafo de volta.

   Nenhuma cor de cliente aqui: o que houver de marca sai de var(--cor-*)
   e das tres tonalidades derivadas no :root. As cores fixas que este bloco
   acrescenta sao de SINAL, e estao agrupadas e justificadas em
   "ETIQUETAS DE ESTADO" mais abaixo.
   ===================================================================== */

/* ---- O CARTAO DE DESTAQUE -------------------------------------------
   Substitui a grade de .kpis nas tres telas. A grade dava o MESMO peso a
   quatro numeros, e a tela nao dizia qual deles e a resposta da pergunta
   que levou a pessoa ate ali. Aqui ha um numero grande e os secundarios a
   direita, separados por um fio. */
.destaque {
  background: var(--marca-clara);
  border: 1px solid var(--marca-borda);
  border-radius: calc(var(--raio) * 1.75);
  padding: calc(var(--gap) * 3) calc(var(--gap) * 3.5);
  margin-bottom: calc(var(--gap) * 2.5);
}
.destaque-linha {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: calc(var(--gap) * 3); flex-wrap: wrap;
}
.destaque-rotulo {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  font-weight: 700; color: var(--cor-primaria);
  color: color-mix(in srgb, var(--cor-primaria) 72%, #000000);
  opacity: 0.75;
}
.destaque-valor {
  font-size: 3.1rem; font-weight: 800; line-height: 1.05;
  letter-spacing: -0.035em; font-variant-numeric: tabular-nums;
  margin-top: 4px;
  color: var(--cor-primaria);
  color: color-mix(in srgb, var(--cor-primaria) 72%, #000000);
}
/* O destaque das ABAS (Equipe, Consultores) e menor que o do Resumo: ele
   e uma PARCELA, e nao o total. Se os dois tivessem o mesmo corpo, o
   numero grande mudaria de significado entre uma aba e outra sem mudar de
   aparencia -- que e como se le errado sem perceber. */
.destaque-parcela .destaque-valor { font-size: 2.6rem; }
.destaque-apoio {
  font-size: 0.84rem; color: var(--cor-suave); margin-top: 6px;
  font-variant-numeric: tabular-nums;
}
.destaque-apoio strong { color: var(--cor-texto); font-weight: 600; }
.destaque-lado {
  display: flex; gap: calc(var(--gap) * 3.5); align-items: flex-start;
}
.destaque-fio { width: 1px; align-self: stretch; background: var(--marca-borda); }
.destaque-item { text-align: right; }
.destaque-item-rotulo {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--cor-suave); font-weight: 600;
}
.destaque-item-valor {
  font-size: 2rem; font-weight: 800; line-height: 1.1;
  letter-spacing: -0.03em; font-variant-numeric: tabular-nums;
  color: var(--cor-primaria);
  color: color-mix(in srgb, var(--cor-primaria) 72%, #000000);
}
.destaque-item-nota {
  font-size: 0.78rem; color: var(--cor-suave); margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
/* A MEDIA MENSAL DESCE PARA DENTRO DO CARTAO, separada por um fio. Ela nao
   e uma quinta pergunta: e o que torna dois periodos de larguras
   diferentes comparaveis. Sem ela, trocar de seis para doze meses dobra o
   total e parece crescimento. */
.destaque-pe {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: calc(var(--gap) * 1.5);
  border-top: 1px solid var(--marca-borda);
  margin-top: calc(var(--gap) * 2); padding-top: calc(var(--gap) * 1.5);
  font-variant-numeric: tabular-nums;
}
.destaque-pe span:first-child { font-size: 0.8rem; color: var(--cor-suave); }
.destaque-pe span:last-child { font-size: 1rem; font-weight: 700; }

/* ---- ETIQUETAS DE ESTADO --------------------------------------------
   AS CORES FIXAS DESTE BLOCO SAO CONVENCAO DE SINAL, e a extensao da regra
   e deliberada -- nao um relaxamento dela.

   O arquivo ja tinha .sobe e .desce, com a justificativa de que verde e
   vermelho ali dizem "subiu" e "caiu", nao "esta e a marca". As etiquetas
   abaixo dizem outra coisa da MESMA especie: se o mes ainda pode mudar
   (em andamento / finalizado) e se a meta foi batida ou nao.

   E elas tem que ser fixas pelo MESMO motivo que .sobe e .desce: um
   cliente de marca vermelha mostraria "meta batida" em vermelho-marca, e
   um de marca amarela mostraria "faltam 2 adesoes" na cor do botao de
   confirmar. Estado nao e identidade de marca.

   O AMARELO JA EXISTIA no .aviso-como e nao e novo: e o mesmo par,
   reusado de proposito para "atencao" ter uma cor so no portal inteiro,
   e e por isso que ele -- e so ele -- aparece duas vezes no arquivo. O verde e NOVO, e o da etiqueta nao e o mesmo do
   .sobe: sao dois verdes diferentes de proposito -- o do .sobe e texto
   sobre branco, e o da etiqueta e texto sobre um fundo verde claro,
   onde aquele nao teria contraste.

   NENHUM DOS HEX E CITADO NESTES COMENTARIOS, e isso e regra e nao
   estilo: o teste conta ocorrencias no arquivo inteiro, entao explicar
   uma cor escrevendo-a de novo ja quebra a contagem que a protege.

   Se um dia aparecer uma TERCEIRA familia aqui, a pergunta certa nao e
   "cor fixa e aceitavel?" -- e "isto e estado ou e marca?". Se for marca,
   sai de var(--cor-primaria) e nao entra neste bloco. */
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px;
  border-radius: 999px; padding: 2px 10px;
  font-size: 0.7rem; white-space: nowrap;
}
.etiqueta svg { flex: none; }
.etiqueta-ok { background: #dcfce7; border: 1px solid #5cbb7f; color: #14532d; }
.etiqueta-falta { background: #fef3c7; border: 1px solid #e0a33e; color: #7c2d12; }
/* A etiqueta neutra e a de "sem indicados": ela nao e sinal de nada, e por
   isso sai das variaveis e nao das cores fixas acima. */
.etiqueta-neutra {
  background: var(--cor-superficie); border: 1px solid var(--cor-borda);
  color: var(--cor-suave);
}
/* O ESTADO DO MES VIVE DENTRO DO CARTAO DO VALOR, acima do numero, e nunca
   fora dele: fora, alguem le o valor sem ler o estado -- e o estado e
   exatamente o que diz se aquele numero ainda pode mudar.

   O DADO NAO VEM DA TABELA DIRETO, e vale saber por que antes de alguem
   "simplificar" isso. O estado mora em cadastro_registros, cuja policy de
   SELECT exige is_superadmin() OR is_admin_assoc() OR is_membro_assoc() --
   e is_membro_assoc devolve FALSE para todo usuario com tipo 'externo',
   que e o que os usuarios deste portal sao. Lendo a tabela direto, o
   portal recebe ZERO linhas: nao um erro, um resultado vazio.

   E vazio e indistinguivel de "mes nao cadastrado", que a regra manda
   mostrar como EM ANDAMENTO. A etiqueta diria "em andamento" para todo
   mes, para sempre, sem erro nenhum -- inclusive para um mes cadastrado
   como concluido.

   Por isso ela vem de get_mes_fechamento (supabase/mes_fechamento_rpc.sql),
   que e SECURITY DEFINER e recusa por EXCECAO em vez de por vazio. */
.etiqueta-estado {
  margin-bottom: calc(var(--gap) * 2);
  padding: 5px 13px 5px 10px;
  width: fit-content;
}
.etiqueta-solta { margin-bottom: calc(var(--gap) * 2.25); }
/* A etiqueta ja traz margem quando esta DENTRO do cartao; solta, ela
   herdaria essa margem e mais a do bloco, dobrando o respiro. */
.etiqueta-solta .etiqueta-estado { margin-bottom: 0; }
.etiqueta-estado strong {
  text-transform: uppercase; letter-spacing: 0.07em;
  font-size: 0.7rem; font-weight: 700;
}

/* ---- SUB-ABAS COMO PILULAS ------------------------------------------
   Eram sublinhados, iguais as abas do painel que agora vivem na faixa
   escura -- dois niveis de navegacao com a mesma forma, um debaixo do
   outro. Pilulas dentro de um trilho separam os dois de relance.

   NO CELULAR ELAS QUEBRAM EM DUAS LINHAS, e nao rolam de lado. Sao cinco,
   e "Bonus Adesoes" e a mais larga; numa fila com rolagem lateral as duas
   ultimas ficam atras da borda, e aba que nao se ve nao existe. O
   flex-wrap e width:auto abaixo de 720px e o que garante isso. */
.sub-abas {
  display: flex; flex-wrap: wrap; gap: 6px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 999px;
  padding: 5px;
  margin: 0 0 calc(var(--gap) * 2.25);
  width: fit-content;
  max-width: 100%;
}
.sub-abas a {
  padding: 9px 18px; border-radius: 999px;
  text-decoration: none; color: var(--cor-suave); font-size: 0.88rem;
  border-bottom: 0;
  margin-bottom: 0;
}
.sub-abas a:hover { background: var(--cor-fundo); color: var(--cor-texto); }
.sub-abas a.on {
  background: var(--cor-primaria);
  background: color-mix(in srgb, var(--cor-primaria) 72%, #000000);
  color: #ffffff; font-weight: 600;
}

/* ---- A BARRA EMPILHADA ----------------------------------------------
   Eram tres barras separadas, uma por parcela, cada uma medindo a sua
   fatia do total. Tres barras respondem "quanto e cada uma" tres vezes;
   uma barra so responde "como as tres se dividem" de uma vez -- que e a
   pergunta.

   E ela e o lugar onde a AUSENCIA aparece: quando a meta do regional nao e
   batida, a base propria simplesmente NAO ESTA na barra. Um segmento de
   largura zero e a forma mais direta de dizer que a parcela nao existe
   neste mes -- mais direta que uma frase, e impossivel de nao ver. */
.barra-empilhada {
  display: flex; height: 14px; border-radius: 999px; overflow: hidden;
  background: var(--cor-fundo);
  margin-top: calc(var(--gap) * 2.75);
}
.barra-empilhada > i { display: block; }
/* Os tres tons sao a MESMA cor da marca em tres profundidades, e nao tres
   cores diferentes: as parcelas somam UM total, e cores distintas as
   fariam parecer tres coisas de naturezas diferentes. */
.fatia-1 {
  background: var(--cor-primaria);
  background: color-mix(in srgb, var(--cor-primaria) 72%, #000000);
}
.fatia-2 { background: var(--cor-primaria); }
.fatia-3 { background: color-mix(in srgb, var(--cor-primaria) 55%, #ffffff); }

.legenda {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--gap) * 2); margin-top: calc(var(--gap) * 1.75);
}
.legenda-item { display: flex; gap: 10px; align-items: flex-start; }
.legenda-marca {
  width: 10px; height: 10px; border-radius: 3px; flex: none; margin-top: 6px;
}
/* A parcela AUSENTE ganha marca vazada, e nao colorida: ela nao esta na
   barra, entao um quadradinho cheio prometeria um segmento que nao existe. */
.legenda-marca.vazia { background: var(--cor-fundo); border: 1px solid var(--marca-borda); }
.legenda-rotulo { font-size: 0.82rem; color: var(--cor-suave); }
.legenda-rotulo strong { color: var(--cor-texto); font-weight: 600; }
.legenda-valor {
  font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.legenda-valor.apagado { color: var(--cor-suave); }

/* ---- A ARVORE DA ABA EQUIPE -----------------------------------------
   O segundo nivel aparece RECUADO abaixo do superior que o indicou. O dado
   e o ID Superior, que ja existia em dim_fechamento e nao aparecia em
   lugar nenhum da tela: uma lista plana com uma coluna "nivel" diz QUANTOS
   degraus abaixo, mas nao DE QUEM -- e "quem indicou quem" e a pergunta
   que o regional faz.

   A coluna Nivel saiu junto: o recuo ja responde, e a aliquota na coluna %
   distingue os dois casos.

   OS COTOVELOS SAO SVG, e nao os caracteres de caixa: estes dependem de o
   glifo existir na fonte, e a fonte do portal e uma pilha com fallback --
   num aparelho que caia no Arial eles viram retangulos vazios. O SVG
   escala com a fonte e usa a cor da borda.

   SUBTOTAL POR RAMO, e nao por nivel. A arvore faz nascer a pergunta
   "quanto ESTE ramo me deu"; o corte por nivel subiu para o cartao de
   destaque, onde continua conferivel contra a regra. */
.arvore-filho { display: inline-flex; align-items: center; gap: 8px; padding-left: 14px; }
.arvore-pai { display: inline-flex; align-items: center; gap: 10px; }
.arvore-ponto {
  width: 9px; height: 9px; border-radius: 2px; flex: none;
  background: var(--cor-primaria);
  background: color-mix(in srgb, var(--cor-primaria) 72%, #000000);
}
.arvore-nome { font-weight: 700; font-size: 0.98rem; }
tr.ramo-inicio > td { padding-top: calc(var(--gap) * 2.25); }
tr.ramo-soma > td {
  background: var(--cor-superficie);
  font-size: 0.8rem; color: var(--cor-suave);
  border-bottom: 0;
}
tr.ramo-soma > td.valor { font-weight: 700; color: var(--cor-texto); }
/* A linha de total fecha a tabela com a cor da marca: ela e a unica que o
   cartao de destaque tambem mostra, e a igualdade dos dois numeros e o que
   permite a tela se conferir sozinha na frente de quem a le. */
tr.linha-total > td {
  border-bottom: 0;
  border-top: 2px solid var(--cor-primaria);
  padding-top: calc(var(--gap) * 2.25);
  font-weight: 700;
}
tr.linha-total > td.valor:last-child {
  font-weight: 800; font-size: 1.1rem;
  color: var(--cor-primaria);
  color: color-mix(in srgb, var(--cor-primaria) 72%, #000000);
}

/* ---- AS DUAS COLUNAS DE DINHEIRO DA ABA CONSULTORES -----------------
   A tela tinha so o que o REGIONAL recebe. O que o CONSULTOR recebe da
   mesma arrecadacao nao aparecia em lugar nenhum -- e e a metade da
   conversa que o regional tem com ele.

   Cada coluna carrega a PROPRIA aliquota em texto pequeno abaixo do valor,
   o que dispensou a antiga coluna "%" solta: ela virou ambigua no instante
   em que passaram a existir duas comissoes na mesma linha.

   A COLUNA DO REGIONAL E A REALCADA: a tela e dele. */
td.col-realce, th.col-realce {
  background: var(--marca-clara);
}
th.col-realce {
  color: var(--cor-primaria);
  color: color-mix(in srgb, var(--cor-primaria) 72%, #000000);
}
td.col-realce .valor-forte {
  font-weight: 700;
  color: var(--cor-primaria);
  color: color-mix(in srgb, var(--cor-primaria) 72%, #000000);
}
.sub-aliquota {
  display: block; font-size: 0.72rem; color: var(--cor-suave);
  font-weight: 400;
}
/* O TRAVESSAO E O ZERO NAO SAO A MESMA COISA, e aqui os dois convivem: o
   valor ausente vira travessao (nao ha comissao), e a aliquota vira "0%"
   por decisao do usuario -- ele quis o numero, e nao o travessao, no lugar
   onde a regra diz "voce teria uma aliquota se tivesse batido a meta".
   Os dois em cinza, porque nenhum dos dois e dinheiro que alguem recebeu. */
.ausente { color: var(--cor-suave); }

/* ---- O SELETOR DE SERIE DO GRAFICO ----------------------------------
   Um grafico, duas series. O eixo do tempo e o mesmo e a pergunta e a
   mesma ("esta subindo?"), so muda a unidade -- entao sao dois ESTADOS do
   mesmo grafico, e nao dois graficos empilhados, que dobrariam a altura e
   obrigariam a rolar para comparar. */
.grafico-seletor {
  display: flex; gap: 4px;
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: 999px; padding: 4px;
}
.grafico-seletor a, .grafico-seletor span {
  padding: 7px 16px; border-radius: 999px;
  text-decoration: none; color: var(--cor-suave); font-size: 0.84rem;
}
.grafico-seletor .on {
  background: var(--cor-primaria);
  background: color-mix(in srgb, var(--cor-primaria) 72%, #000000);
  color: #ffffff; font-weight: 600;
}
/* TODAS AS BARRAS NA MESMA COR.
   O redesenho chegou a destacar o mes corrente num tom mais forte, para
   "amarrar" o Historico a tela de Fechamento. RECUSADO pelo usuario em
   2026-08-28: as duas telas nao compartilham estado -- o realce so podia
   apontar para o mes em que o Fechamento ABRE, e nao para o que a pessoa
   estava vendo --, entao ele prometia uma ligacao que nao existia e cobrava
   por isso um segundo peso visual num grafico que tem um assunto so.

   A transicao suave e do JS trocando de serie sem recarregar; ela nao
   existe para enfeitar, e sim para a barra que muda de altura nao dar a
   impressao de que o dado pulou. */
.grafico-col > i {
  background: var(--cor-primaria);
  transition: height 160ms ease-out;
}
/* Quem pediu menos movimento no sistema nao ganha movimento nenhum. */
@media (prefers-reduced-motion: reduce) {
  .grafico-col > i { transition: none; }
}

/* ---- OS DOIS DESTAQUES DO HISTORICO ---------------------------------
   Dinheiro e adesoes respondem perguntas diferentes e igualmente
   importantes. Com um no cartao grande e o outro num dos pequenos, a tela
   dizia que adesoes e nota de rodape. */
.destaques-par {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(var(--gap) * 1.75); margin-bottom: calc(var(--gap) * 2.75);
}
.destaques-par .destaque { margin-bottom: 0; }
.destaques-par .destaque-valor { font-size: 2.6rem; }

@media (max-width: 720px) {
  .topo { padding: calc(var(--gap) * 1.5) calc(var(--gap) * 2) 0; }
  .topo-nome, .topo-nivel { display: none; }
  .aba { padding: var(--gap) calc(var(--gap) * 1.5); font-size: 0.86rem; }
  .destaque { padding: calc(var(--gap) * 2.25) calc(var(--gap) * 2.25); }
  /* 2.3rem e nao 3.1: "R$ 108.240,15" a 3.1rem passa de 375px -- que e a
     largura do iPhone SE, e nao os 390 do modelo seguinte. Medir pelo
     aparelho maior deixa o menor quebrando o valor em duas linhas. */
  .destaque-valor, .destaques-par .destaque-valor,
  .destaque-parcela .destaque-valor { font-size: 2.3rem; }
  .destaque-linha { gap: calc(var(--gap) * 2); }
  .destaque-lado { gap: calc(var(--gap) * 2.5); width: 100%; }
  .destaque-item { text-align: left; }
  .destaque-item-valor { font-size: 1.6rem; }
  /* UMA COLUNA, e nao tres. Tres legendas lado a lado em 375px dao ~110px
     cada, e "Bonus por adesao" sozinho ja quebra em tres linhas. */
  .legenda { grid-template-columns: minmax(0, 1fr); gap: var(--gap); }
  /* Os dois destaques do Historico empilham: dois cartoes lado a lado num
     telefone dariam ~170px cada, e nenhum dos dois numeros caberia. */
  .destaques-par { grid-template-columns: minmax(0, 1fr); }
  /* AS CINCO PILULAS PRECISAM APARECER, e por isso o trilho ocupa a
     largura toda e quebra em duas linhas. Uma fila com rolagem lateral
     esconderia "Adesoes" e "Bonus Adesoes" atras da borda. */
  .sub-abas { width: auto; border-radius: calc(var(--raio) * 2); }
  .sub-abas a { padding: 8px 14px; font-size: 0.84rem; }
}

/* ---- A ARVORE NO CELULAR --------------------------------------------
   O CARTAO PASSA A SER O RAMO, e nao a linha. Um filho virando cartao
   proprio, recuado e com moldura, gastaria metade da largura util em recuo
   e borda -- e sobraria menos espaco para o nome do que a lista plana
   tinha. Aqui ele e uma LINHA dentro do cartao do superior, atras de um
   fio vertical. */
@media (max-width: 720px) {
  .arvore-filho { padding-left: 0; }
  .arvore-filho svg { display: none; }
  .fech-tabela tr.filho {
    border: 0; border-left: 2px solid var(--cor-borda);
    border-radius: 0;
    margin: 0 0 0 calc(var(--gap) * 1.5);
    padding: var(--gap) 0 var(--gap) calc(var(--gap) * 1.5);
  }
  .fech-tabela tr.filho td:first-child { font-size: 0.9rem; font-weight: 600; }
  .fech-tabela tr.ramo-soma {
    border: 0; border-radius: 0;
    margin: 0 0 calc(var(--gap) * 1.5) calc(var(--gap) * 1.5);
    padding: var(--gap) calc(var(--gap) * 1.5);
    background: var(--cor-superficie);
  }
  tr.ramo-inicio > td { padding-top: 2px; }
}

/* O titulo da lista de cooperativas. Ele existia como <h3> nu, herdando o
   tamanho do navegador -- maior que o titulo da propria tela em alguns. */
.titulo-secao {
  margin: 0 0 calc(var(--gap) * 1.5);
  font-size: 1rem; font-weight: 700;
}