/* Sistema ConectaOn
   =================

   Um livro-caixa, não um painel. Oito pessoas leem isto para responder três
   perguntas: quanto entrou, quanto saiu, e o que falta fazer. Então o número
   é o que tem de saltar, e todo o resto se apaga.

   A folha tinha DOZE tamanhos de fonte (11, 11.5, 12, 12.5, 13, 13.5, 14,
   15, 17, 21, 24, 25) e TRINTA valores de espaçamento distintos para trinta
   e dois usos: cada regra inventava o seu. Isso é exatamente o que faz uma
   tela parecer montada por partes em vez de desenhada. Aqui há uma escala de
   sete tamanhos e um espaçamento de base quatro, e nada fora deles.

   Cor: a marca é a da ConectaOn (brandbook), ver o bloco de cor abaixo; dos arquivos
   oficiais do logo, não da landing page. Mas cor demais vira ruído: verde,
   roxo, vermelho e amarelo ao mesmo tempo, cada um com clara e escura, era
   um semáforo em cada tela. Aqui a cor tem TRÊS empregos, e só três:
   o roxo é interação (link, foco, o que se pode clicar), o vermelho é
   dinheiro que falta, o âmbar é o que precisa de você. O verde é a marca e o
   dinheiro que entrou. Fora disso, cinza. */

:root {
  /* ---------------------------------------------------------- tipografia
     Sete degraus. O corpo é 15px porque é tabela lida de perto; o número do
     cartão é o único grande, porque é o que se veio ver. */
  --t-marca:   11px;   /* rótulo de cartão, cabeçalho de tabela, maiúsculas */
  --t-mini:    12px;   /* apoio, dentro de célula */
  --t-menor:   13px;   /* rótulo de campo, texto secundário */
  --t-corpo:   14px;   /* TODO o resto: tabela, botão, campo, parágrafo */
  --t-titulo:  17px;   /* título de painel */
  --t-numero:  21px;   /* o número do cartão, o único grande */
  --t-pagina:  27px;   /* título da página, um por tela */

  --p-normal: 400;
  --p-medio:  500;
  --p-forte:  600;
  --p-maximo: 700;

  /* ------------------------------------------------------- espaçamento
     Base quatro. Um valor fora desta lista é erro, não escolha. */
  --e1:  4px;
  --e2:  8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 24px;
  --e6: 32px;
  --e7: 48px;

  /* ------------------------------------------------------------- forma */
  --raio-p: 4px;    /* marcador, campo, botão */
  --raio:   8px;    /* painel, cartão */
  /* Uma elevação só, e fraca. Sombra em tudo achata a hierarquia: quando
     todo mundo flutua, ninguém flutua. */
  --sombra: 0 1px 2px rgba(12, 0, 71, .05);
  --sombra-alta: 0 8px 24px rgba(12, 0, 71, .12);

  /* -------------------------------------------------------------- cor
     Brandbook ConectaOn: roxo escuro #0C0047, violeta #A24CFF, laranja
     #E77642, cinza claro #EFEFEF e cinza médio #D3D3D3. */
  --papel:       #FFFFFF;
  --fundo:       #EFEFEF;
  --superficie:  #F8F8FA;
  --borda:       #E2E2E8;
  /* Linha de tabela e moldura de painel são DECORAÇÃO e não precisam de
     contraste mínimo; contorno de campo e de botão é componente de
     interface e precisa de 3:1. São dois papéis, e por isso duas cores. */
  --borda-forte: #D3D3D3;
  --borda-campo: #6E6E78;   /* 5,0:1 no papel */

  --tinta:       #1B1830;   /* texto */
  --tinta-fraca: #5E5A6E;   /* apoio, 6,6:1 no papel */
  --tinta-tenue: #8C889A;   /* ausência, 3,4:1: só onde não se lê nada */

  /* A marca */
  --marca:          #0C0047;   /* roxo escuro: títulos */
  --marca-destaque: #E77642;   /* laranja: faixa do topo, decorativo */

  /* Situação boa (pago, vigente, sobra). Não é cor da marca: é o sinal. */
  --verde:          #3FA46A;
  --verde-escuro:   #2E8050;
  --verde-contorno: #1F6B3E;   /* 6,5:1 com branco */
  --verde-texto:    #1F6B3E;
  --verde-claro:    #E7F5EC;

  /* Interação. Um acento só: o violeta, na variante de contraste. */
  --roxo:        #A24CFF;
  --roxo-escuro: #7B2FF7;   /* 5,85:1 com branco */
  --roxo-claro:  #F3EBFF;

  /* Estado. Cada um com um emprego, e nenhum decorativo. */
  --alerta:       #A8342A;   /* falta dinheiro, ou apaga alguma coisa */
  --alerta-claro: #FCEEEC;
  --aviso:        #7C5A06;   /* precisa de você */
  --aviso-claro:  #FBF4E0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: var(--t-corpo);
  line-height: 1.5;
  color: var(--tinta);
  background: var(--fundo);
}

a { color: var(--roxo-escuro); }

/* ------------------------------------------------------------- estrutura */

.topo {
  background: var(--papel);
  border-bottom: 3px solid var(--marca-destaque);
  padding: 0 var(--e5);
  display: flex;
  align-items: center;
  gap: var(--e5);
  box-shadow: var(--sombra);
  position: sticky;
  top: 0;
  z-index: 10;
}

/* O logo é o arquivo oficial da marca, não texto imitando o logo. A altura
   manda e a largura acompanha, para a proporção nunca distorcer. */
.marca {
  display: flex; align-items: center;
  padding: var(--e2) 0;
  text-decoration: none;
  flex-shrink: 0;
}
.marca img { height: 38px; width: auto; display: block; }

.marca-grande {
  display: block; margin: 0 auto var(--e1);
  height: 84px; width: auto; max-width: 100%;
}

/* Navegação em dois níveis. Os onze itens lado a lado não cabiam em 1280px:
   "E-mails" quebrava em duas linhas e "Auditoria" era cortado para "Aud".
   Em cima fica o uso diário; administração abre numa gaveta. */
/* Com wrap. Sem isto, o item que não coubesse saía por baixo do bloco do
   usuário em vez de descer uma linha, que foi como "E-mails" quebrou em
   duas e "Auditoria" virou "Aud" na largura de 1280. */
.menu { display: flex; gap: 0; flex: 1; align-items: stretch; flex-wrap: wrap; }
.menu > a, .mais > summary {
  display: flex;
  align-items: center;
  padding: 0 var(--e3);
  min-height: 52px;
  text-decoration: none;
  color: var(--tinta-fraca);
  font-weight: var(--p-medio);
  font-size: var(--t-corpo);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  list-style: none;
}
.menu > a:hover, .mais > summary:hover { color: var(--roxo-escuro); background: var(--roxo-claro); }
.menu > a.ativo, .mais > summary.ativo { color: var(--roxo-escuro); border-bottom-color: var(--roxo); }

/* A gaveta usa <details>, então funciona sem JavaScript nenhum. */
.mais { position: relative; }
.mais > summary::-webkit-details-marker { display: none; }
.mais > summary::after {
  content: "▾"; margin-left: 6px; font-size: var(--t-marca); opacity: .55;
}
.mais[open] > summary::after { content: "▴"; }
.mais > .gaveta {
  position: absolute; top: 100%; left: 0; z-index: 30;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: 0 0 var(--raio) var(--raio);
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  min-width: 190px; padding: var(--e1) 0;
}
.mais > .gaveta a {
  display: block; padding: var(--e2) var(--e4); text-decoration: none;
  color: var(--tinta); font-size: var(--t-corpo);
}
.mais > .gaveta a:hover { background: var(--roxo-claro); color: var(--roxo-escuro); }
.mais > .gaveta a.ativo { color: var(--roxo-escuro); font-weight: var(--p-forte); background: var(--roxo-claro); }

.eu { display: flex; align-items: center; gap: var(--e3); font-size: var(--t-menor); color: var(--tinta-fraca); }
.eu strong { color: var(--tinta); display: block; font-size: var(--t-corpo); }

.corpo { max-width: 1400px; margin: 0 auto; padding: var(--e5); }

h1 { font-size: var(--t-pagina); margin: 0 0 var(--e1); font-weight: var(--p-maximo); letter-spacing: -.4px; }
h2 { font-size: var(--t-titulo); margin: var(--e5) 0 var(--e3); font-weight: var(--p-forte); }
.subtitulo { color: var(--tinta-fraca); margin: 0 0 var(--e5); font-size: var(--t-corpo); }

/* ---------------------------------------------------------------- cartões */

/* Os números do período.

   A barra colorida de 4px na lateral esquerda saiu. Ela era o único recurso
   de significado do sistema e estava em toda parte: verde, roxo e vermelho
   lado a lado em oito cartões, sem que a cor quisesse dizer a mesma coisa em
   dois cartões seguidos. Cor que aparece em tudo não distingue nada, e essa
   listrinha é a assinatura visual mais reconhecível de tela montada às
   pressas.

   No lugar dela: uma faixa só, contínua, e a hierarquia feita por tamanho.
   O cartão que importa é maior; o resto se apaga. */
.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 1px;
  background: var(--borda);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  margin-bottom: var(--e5);
}
.cartao {
  background: var(--papel);
  padding: var(--e3) var(--e4) var(--e4);
  display: flex;
  flex-direction: column;
  gap: var(--e1);
}
.cartao .rotulo {
  font-size: var(--t-marca);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--tinta-fraca);
  font-weight: var(--p-forte);
}
.cartao .numero {
  font-size: var(--t-numero);
  font-weight: var(--p-forte);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.cartao .nota { font-size: var(--t-mini); color: var(--tinta-fraca); line-height: 1.35; }

/* A cor no número, e não em moldura: quem procura dinheiro que falta acha
   pelo vermelho do próprio valor. Verde não pinta nada, porque "está tudo
   certo" não precisa de aviso. */
.cartao.alerta .numero { color: var(--alerta); }
.cartao.roxo .numero { color: var(--roxo-escuro); }

/* Painel: moldura, sem sombra. Treze caixas brancas flutuando na mesma tela
   é o mesmo que nenhuma flutuando. A sombra fica reservada para o que
   realmente sai do plano, que é a gaveta do menu. */
.painel {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: var(--e5);
  overflow: hidden;
}
.painel > h2 {
  margin: 0;
  padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--borda);
  background: var(--superficie);
  font-size: var(--t-menor);
  font-weight: var(--p-forte);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-fraca);
}
.painel .conteudo { padding: var(--e4); }

/* ---------------------------------------------------------------- tabelas */

.rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: var(--t-corpo); }
th {
  text-align: left;
  padding: var(--e2) var(--e3);
  font-size: var(--t-marca);
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--tinta-fraca);
  border-bottom: 2px solid var(--borda);
  white-space: nowrap;
  font-weight: var(--p-forte);
}
td { padding: var(--e3) var(--e3); border-bottom: 1px solid var(--borda); vertical-align: middle; }
tbody tr:hover { background: var(--superficie); }
td.numero, th.numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
tfoot td { font-weight: var(--p-maximo); border-top: 2px solid var(--borda); background: var(--superficie); }

.vazio { padding: var(--e6) var(--e4); text-align: center; color: var(--tinta-fraca); }

/* ---------------------------------------------------------------- marcas */

.marcador {
  display: inline-block;
  padding: var(--e1) var(--e2);
  border-radius: 999px;
  font-size: var(--t-marca);
  font-weight: var(--p-forte);
  white-space: nowrap;
}
.marcador.cinza { background: var(--fundo); color: var(--tinta-fraca); }
.marcador.verde { background: var(--verde-claro); color: var(--verde-texto); }
.marcador.roxo { background: var(--roxo-claro); color: var(--roxo-escuro); }
.marcador.alerta { background: var(--alerta-claro); color: var(--alerta); }
.marcador.aviso { background: var(--aviso-claro); color: var(--aviso); }

/* --------------------------------------------------------------- botões */

.botao, button, input[type=submit] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 32px de altura mínima. O mínimo da WCAG 2.2 AA é 24x24; 32 dá folga
     para quem toca na tela sem inchar uma interface cheia de tabela. */
  min-height: 32px;
  padding: var(--e2) var(--e4);
  border-radius: var(--raio-p);
  border: 1px solid var(--borda-campo);
  background: var(--papel);
  color: var(--tinta);
  font-size: var(--t-corpo);
  font-weight: var(--p-medio);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  line-height: 1.3;
}
.botao:hover, button:hover { border-color: var(--roxo); color: var(--roxo-escuro); }
/* A ação principal é o violeta da ConectaOn na variante de contraste:
   branco sobre #7B2FF7 dá 5,85:1. O violeta puro, #A24CFF, dá 4,19:1 e
   reprova para texto. No hover, o roxo escuro da marca: 18,98:1. */
.botao.principal, button.principal {
  background: var(--roxo-escuro); border-color: var(--roxo-escuro); color: var(--papel); font-weight: var(--p-forte);
}
.botao.principal:hover, button.principal:hover {
  background: var(--marca); border-color: var(--marca); color: var(--papel);
}
/* Branco sobre o roxo da marca dá 3,77:1 e reprova. Sobre o roxo escuro
   dá 5,80:1. O roxo claro continua sendo usado como fundo de área. */
.botao.roxo, button.roxo { background: var(--roxo-escuro); border-color: var(--roxo-escuro); color: var(--papel); font-weight: var(--p-forte); }
.botao.roxo:hover, button.roxo:hover { background: var(--roxo-escuro); color: var(--papel); }
.botao.pequeno { padding: var(--e1) var(--e2); font-size: var(--t-mini); min-height: 28px; }
.botao.perigo:hover { border-color: var(--alerta); color: var(--alerta); }
button:disabled { opacity: .45; cursor: not-allowed; }

.acoes { display: flex; gap: var(--e2); flex-wrap: wrap; align-items: center; }
.barra { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--e4); margin-bottom: 18px; flex-wrap: wrap; }

/* -------------------------------------------------------------- formulário */

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: var(--t-menor); font-weight: var(--p-forte); margin-bottom: 5px; color: var(--tinta-fraca); }
.campo .ajuda { font-size: var(--t-mini); color: var(--tinta-fraca); margin-top: 4px; line-height: 1.4; }
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
  width: 100%;
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borda-campo);
  border-radius: var(--raio-p);
  font-size: var(--t-corpo);
  font-family: inherit;
  background: var(--papel);
  color: var(--tinta);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--roxo-escuro); box-shadow: 0 0 0 3px var(--roxo-claro);
}

/* Navegar por teclado não mostrava NADA: nem link nem botão tinham marca de
   foco, e quem não usa mouse ficava sem saber onde estava. */
a:focus-visible, button:focus-visible, .botao:focus-visible,
summary:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--roxo-escuro);
  outline-offset: 2px;
  border-radius: var(--raio-p);
}

/* Pular para o conteúdo: aparece só ao chegar nele pelo teclado. Sem isso,
   quem usa teclado atravessa os onze links do topo em toda página. */
.pular {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--roxo-escuro); color: var(--papel);
  padding: var(--e2) var(--e4); border-radius: 0 0 var(--raio) 0;
  font-weight: var(--p-forte); text-decoration: none;
}
.pular:focus { left: 0; }
textarea { min-height: 90px; resize: vertical; }
.grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 var(--e4); }
.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0 var(--e4); }
.linha-form { display: flex; gap: var(--e2); align-items: flex-end; flex-wrap: wrap; }
.linha-form .campo { margin-bottom: 0; }

/* ---------------------------------------------------------------- avisos */

.recado { padding: var(--e3) var(--e4); border-radius: var(--raio); margin-bottom: 18px; font-size: var(--t-corpo); }
.recado.ok { background: var(--verde-claro); border-left: 4px solid var(--verde); }
.recado.erro { background: var(--alerta-claro); border-left: 4px solid var(--alerta); color: var(--alerta); }
.recado.aviso { background: var(--aviso-claro); border-left: 4px solid var(--aviso); }
.recado.info { background: var(--roxo-claro); border-left: 4px solid var(--roxo); }
.recado ul { margin: var(--e2) 0 0; padding-left: 20px; }

/* ---------------------------------------------------------------- entrar */

.entrada {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, var(--roxo-claro) 0%, var(--fundo) 55%, #FCEEE7 100%);
  padding: var(--e4);
}
.cartao-entrada {
  background: var(--papel); padding: var(--e6); border-radius: var(--raio);
  box-shadow: 0 12px 40px rgba(0,0,0,.10); width: 100%; max-width: 400px;
}
.cartao-entrada .marca { text-align: center; padding: 0 0 var(--e1); }
.cartao-entrada .sub { text-align: center; color: var(--tinta-fraca); font-size: var(--t-menor); margin-bottom: 26px; }
.cartao-entrada button { width: 100%; padding: var(--e3); margin-top: 8px; font-size: var(--t-corpo); }

/* --------------------------------------------------------------- diversos */

.dica { font-size: var(--t-mini); color: var(--tinta-fraca); }
.abas { display: flex; gap: var(--e1); border-bottom: 1px solid var(--borda); margin-bottom: 18px; flex-wrap: wrap; }
.abas a {
  padding: var(--e2) var(--e4); text-decoration: none; color: var(--tinta-fraca);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-size: var(--t-corpo); font-weight: var(--p-medio);
}
.abas a.ativo { color: var(--roxo-escuro); border-bottom-color: var(--roxo); }
.pequeno { font-size: var(--t-mini); color: var(--tinta-fraca); }
.cartao .nota, .campo .ajuda, .dica { color: var(--tinta-fraca); }
.direita { text-align: right; }
/* Texto de AUSÊNCIA, e não decoração: "não consta do contrato", "a
   faturar", o traço das colunas vazias. Era var(--borda), 1,25:1, ilegível para
   quem enxerga bem. O cinza médio do sistema dá 5,10:1. */
.nada { color: var(--tinta-fraca); font-style: italic; }

@media (max-width: 720px) {
  .topo { flex-wrap: wrap; gap: 0 var(--e4); padding: 0 var(--e3); }
  .menu { order: 3; width: 100%; overflow-x: auto; }
  .menu a { padding: var(--e3) var(--e2); }
  .corpo { padding: var(--e4) var(--e3); }
}


/* ------------------------------------------------- estrutura de tela

   Toda tela segue a mesma ordem, e isso não é gosto: o título vem antes
   do filtro. Antes o bloco de filtros ficava no canto superior direito,
   mais alto que o <h1>, e a página parecia começar pelos controles. */

.cabecalho { margin-bottom: 18px; }
.cabecalho h1 { margin-bottom: 2px; }
.cabecalho .subtitulo { margin-bottom: 0; }

/* O recorte do período. Fica claro que é controle e não conteúdo por ser a
   única superfície acinzentada da página. */
.filtros {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); align-items: flex-end;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e3) var(--e4);
  margin-bottom: var(--e5);
}
.filtros form { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: flex-end; }
.filtros .campo { margin-bottom: 0; }
.filtros select, .filtros input { width: auto; min-width: 132px; max-width: 220px; }
.filtros .separador { width: 1px; align-self: stretch; background: var(--borda); }

/* Um cartão que conta coisas não é um cartão que mostra dinheiro. Sem
   isso, "3" e "R$ 3.852,00" apareciam com o mesmo peso visual. */
.cartao.contagem .numero { font-size: var(--t-numero); color: var(--tinta-fraca); }

.formulario-recolhido { display: none; }
.formulario-recolhido:target { display: block; }

.acoes-lote {
  display: flex; flex-wrap: wrap; gap: var(--e2) var(--e3); align-items: center;
  padding: var(--e3) var(--e4);
}
.acoes-lote form { display: flex; gap: var(--e2); align-items: center; margin: 0; }
.acoes-lote input[type=text] { width: 118px; }

/* Nome do cliente na listagem: o fantasia em destaque e a razão social
   embaixo, em corpo menor. "COMERCIAL DE ALIMENTOS FERREIRA SOUZA LTDA."
   ocupava três linhas numa tabela de onze colunas. */
.cliente strong { display: block; }
.cliente .razao { font-size: var(--t-marca); color: var(--tinta-fraca); }

/* Linha em conferência. A cor sozinha não pode ser o recado, e aquele roxo
   claro dava 1,16:1 sobre o branco: praticamente invisível também para quem
   enxerga. Agora leva barra lateral e um rótulo de texto. */
.destaque { background: var(--roxo-claro); box-shadow: inset 4px 0 0 var(--roxo-escuro); }
.destaque td:first-child::before {
  content: "conferir "; font-size: var(--t-marca); font-weight: var(--p-maximo);
  color: var(--roxo-escuro); text-transform: uppercase; letter-spacing: .04em;
}
.largura-p { width: 110px; }
.largura-m { width: 150px; }
.coluna-marca { width: 30px; }
.limite-texto { max-width: 340px; }
.sem-quebra { white-space: nowrap; }
.topo-zero { margin-top: 0; }

@media (max-width: 980px) {
  .menu { overflow-x: auto; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .mais > .gaveta { position: static; box-shadow: none; border: none; }
}


/* Painel que abre e fecha. Formulário de cadastro ocupava a melhor parte
   da tela e empurrava a tabela para baixo da dobra; agora ele espera. */
details.painel > summary {
  padding: var(--e3) var(--e4);
  background: var(--superficie);
  border-bottom: 1px solid transparent;
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: var(--e2);
  font-size: var(--t-corpo); font-weight: var(--p-forte);
}
details.painel > summary::-webkit-details-marker { display: none; }
details.painel > summary::before {
  content: "+"; font-weight: var(--p-maximo); color: var(--roxo-escuro);
  width: 18px; text-align: center;
}
details.painel[open] > summary::before { content: "−"; }
details.painel[open] > summary { border-bottom-color: var(--borda); }
details.painel > summary:hover { background: var(--roxo-claro); }
details.painel > summary h2 { font-size: var(--t-corpo); margin: 0; font-weight: var(--p-forte); }

/* Valor em aberto dentro de uma tabela. A cor sozinha não pode ser o
   recado: quem não distingue vermelho ainda lê "a receber" no cabeçalho da
   coluna, e o negrito dá o destaque que a cor daria. */
.devendo { color: var(--alerta); font-weight: var(--p-forte); }

/* Nome de cliente que leva ao extrato. Sublinhado sempre, porque dentro de
   uma tabela cheia de números um link só colorido passa despercebido. */
td.cliente a { color: var(--roxo-escuro); text-decoration: underline; }
td.cliente a:hover { color: var(--marca); }

/* Cartão que filtra. É um link, então precisa parecer clicável e mostrar
   foco pelo teclado; o cartão escolhido fica com anel, não só com cor,
   porque cor sozinha não é recado para quem não a distingue. */
a.cartao { text-decoration: none; color: inherit; display: block; transition: box-shadow .12s, transform .12s; }
a.cartao:hover { box-shadow: 0 4px 10px rgba(0,0,0,.10); transform: translateY(-1px); }
a.cartao:focus-visible { outline: 3px solid var(--roxo-escuro); outline-offset: 2px; }
.cartao.focado { box-shadow: 0 0 0 2px var(--roxo-escuro); }
.cartao.focado .rotulo::after { content: " (filtrando)"; font-weight: var(--p-normal); text-transform: none; }

/* Caixas de seleção da consulta: alvo grande e rótulo clicável inteiro. */
.caixas { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.caixas .caixa {
  display: flex; align-items: center; gap: var(--e2);
  min-height: 44px; padding: 0 var(--e1); cursor: pointer; font-weight: var(--p-medio);
}
.caixas input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--roxo-escuro); }
fieldset.regra {
  border: 1px solid var(--borda); border-radius: var(--raio);
  padding: var(--e3) var(--e4) var(--e3); margin: var(--e1) 0 var(--e4);
}
fieldset.regra > legend { padding: 0 var(--e1); font-weight: var(--p-forte); font-size: var(--t-menor); color: var(--tinta-fraca); }

/* O TIPO de um lançamento é classificação, não estado: fica como palavra
   discreta na sua coluna. Estado continua sendo pílula, porque estado muda e
   é o que se procura de relance. */
td.tipo { color: var(--tinta-fraca); white-space: nowrap; }

/* Um ponteiro para outra tela, quando o número pertence a ela. Não é aviso
   nem erro: é uma frase de ligação, e por isso não vira caixa colorida. */
.atalho {
  margin: calc(-1 * var(--e3)) 0 var(--e5);
  font-size: var(--t-menor);
  color: var(--tinta-fraca);
}
.atalho strong { color: var(--tinta); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------- o que estava na marcação

   Trinta e seis atributos style= espalhados pelos modelos, com 10px, 12px,
   13px, 16px, 19px, 34px e 2px: valores que não existem em escala nenhuma,
   escritos um a um no meio do HTML. É o resto do "montado às pressas", e a
   escala não vale de nada enquanto houver uma saída de emergência assim. */

/* Linha que está sendo editada dentro da tabela. */
.editando { background: var(--roxo-claro); }

/* Título de um grupo dentro de um bloco maior, como o nome do recurso na
   grade de permissões. */
.rotulo-grupo {
  font-size: var(--t-marca);
  font-weight: var(--p-forte);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tinta-fraca);
  margin-bottom: var(--e1);
}

/* Uma permissão marcável, empilhada. */
.permissao {
  display: block;
  font-weight: var(--p-normal);
  font-size: var(--t-menor);
  margin-bottom: var(--e1);
}

/* Divisão dentro de um painel, quando o assunto muda mas o painel é o mesmo. */
.secao {
  margin-top: var(--e4);
  border-top: 1px solid var(--borda);
  padding-top: var(--e4);
}

/* Caixa de "crie um novo", que é convite e não conteúdo. */
.caixa-nova {
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
  padding: var(--e4);
  margin-bottom: var(--e3);
}
.caixa-cheia {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: var(--e4);
  margin-bottom: var(--e3);
}

/* A situação do contrato no cartão: número menor, porque é palavra e não
   valor, e palavra em corpo de dinheiro fica desproporcional. */
.cartao .numero.situacao { font-size: var(--t-titulo); }

.direita-form { justify-content: flex-end; }
.amostra-de-cor {
  display: inline-block; width: 32px; height: 32px;
  border-radius: var(--raio-p); border: 1px solid var(--borda-forte);
  vertical-align: middle;
}
.espaco-abaixo { margin-bottom: var(--e3); }
.largura-g { max-width: 460px; }

.cresce { flex: 1; }
.espaco-acima { margin-top: var(--e2); }
.peso-normal { font-weight: var(--p-normal); }

/* Perfis de um usuário: acumulam, então são caixas e não lista. */
.perfis { border: 1px solid var(--borda); border-radius: var(--raio-p);
          padding: var(--e2) var(--e3) var(--e3); margin: 0 0 var(--e2); }
.perfis legend { padding: 0 var(--e1); color: var(--tinta-fraca); }
.perfis .marca { display: flex; align-items: center; gap: var(--e2);
                 padding: var(--e1) 0; white-space: nowrap; }


/* ----------------------------------------------------------- marca ConectaOn
   Inter ExtraBold é a letra do logotipo; nos títulos ela carrega a marca.
   O texto corrido continua em Poppins, que é a de apoio. */
h1 { font-family: "Inter", "Poppins", sans-serif; font-weight: 800; color: var(--marca); }