/* ------------------------------------------------------------------------ barra de estado */

.barra-de-estado {
  margin-top: auto;
  position: sticky; bottom: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px var(--f4);
  display: flex; align-items: center; gap: var(--f2);
  font-size: 12.5px;
}
.barra-de-estado .ponto { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); flex: none; }

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

.recado { border-left: 4px solid; padding: 11px var(--f4); border-radius: 0 8px 8px 0; font-size: 13px; }
.recado.ruim { background: var(--ruim-soft); border-color: var(--ruim); color: var(--ruim); }
.recado.aviso { background: var(--aviso-soft); border-color: var(--aviso); color: var(--aviso); }
.recado.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
/* SÓ EXPLICA, não alerta: o âmbar fica para o que pede atenção (05/11/2026). */
.recado.neutro { background: var(--soft); border-color: var(--line); color: var(--ink); }
.recado[hidden] { display: none; }

/* -------------------------------------------------------------------------- estado vazio */

/* NUNCA UM <p> SOLTO dentro da moldura de uma tabela: o texto encosta na borda. Bloco proprio,
 * com titulo, uma linha de explicacao e A SAIDA correspondente. */
/* A FOLGA E DE BLOCO VAZIO, e nao de tela cheia. Cada um tinha 183px de altura, e a tela de
 * Chaves de IA tem TRES: eram 549px anunciando ausencia. Continua com simbolo, titulo,
 * explicacao e a saida -- so para de ocupar o espaco de uma tabela. */
.vazio { text-align: center; padding: var(--f5) var(--f4); color: var(--muted); }
.vazio .simbolo { font-size: 24px; opacity: .35; line-height: 1; }
.vazio b {
  display: block; color: var(--ink); font-size: var(--texto-m);
  margin: var(--f2) 0 var(--f1);
}
/* SEM MARGEM EMBAIXO QUANDO NAO HA BOTAO: os 16px existiam para separar a explicacao da saida,
 * e a maioria dos blocos vazios nao tem saida nenhuma. */
.vazio p { margin: 0; font-size: var(--texto-p); }
.vazio p:not(:last-child) { margin-bottom: var(--f4); }

/* ------------------------------------------------------------------- tabelas e listas */

/* CABECALHO E LINHAS COMPARTILHAM A MESMA VARIAVEL DE COLUNAS. Declarar as colunas duas
 * vezes e o jeito garantido de elas sairem de registro no dia em que alguem acrescentar
 * uma — e o Henrique percebe coluna fora de registro. */
.tabela { display: flex; flex-direction: column; }
.linha {
  display: grid;
  grid-template-columns: var(--cols);
  gap: var(--f3);
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}
.linha:first-child { border-top: 0; }
.linha.cabecalho {
  border-top: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  color: var(--muted); text-transform: uppercase;
  padding-bottom: var(--f2);
  border-bottom: 1px solid var(--line-forte);
}
/* NUMERO A DIREITA, com algarismo de largura fixa: sem isso as colunas de dinheiro dancam
 * a cada linha e o olho perde a referencia. */
.dir { text-align: right; font-variant-numeric: tabular-nums; }

.selo {
  font-size: 10.5px; font-weight: 700; border-radius: 20px; padding: 2px 9px;
  display: inline-block; font-style: normal;
  /* PASTILHA NAO QUEBRA LINHA. Na ponta de um cabecalho estreito, "conta desligada" virava
   * duas linhas empilhadas fora do cartao — visto na prova viva das Redes, em 21/08. */
  white-space: nowrap;
}
.selo.ok { background: var(--ok-soft); color: var(--ok); }
/* O SELO QUE SE CLICA (17/09/2026) — o numero da coluna "Comprov." leva ao arquivo.
   Nao e' um `.btn`: um botao de verdade ali dentro brigaria com a altura da linha e roubaria
   a atencao da coluna Situacao, que fica ao lado. E' o MESMO selo, com o cursor e o realce
   que dizem "isto responde". A moldura do botao some; o desenho continua sendo o do selo. */
.selo.selo-botao { border: 0; font-family: inherit; cursor: pointer; }
.selo.selo-botao:hover { filter: brightness(.93); }
.selo.selo-botao:focus-visible { outline: 2px solid var(--roxo); outline-offset: 2px; }
/* A ETIQUETA DE CANAL da caixa unica (item 199): o mesmo selo, com a cor da rede. */
.selo.canal-whatsapp { background: var(--canal-whatsapp-soft); color: var(--canal-whatsapp); }
.selo.canal-direct { background: var(--canal-direct-soft); color: var(--canal-direct); }
.selo.canal-messenger { background: var(--canal-messenger-soft); color: var(--canal-messenger); }

/* OS FILTROS DA CAIXA: uma fileira de botoes P, com o ativo em principal. */
.filtros-da-caixa { display: flex; gap: var(--f2); margin: 0 0 var(--f4); flex-wrap: wrap; }
/* OS FILTROS DA ABA CONTAS (15/09/2026) — os tres em UMA fileira, e nao empilhados: eles
   respondem a mesma pergunta ("quais contas eu quero ver agora?") e se leem juntos. */
.filtros-das-contas {
  display: flex; gap: var(--f5); align-items: flex-end; flex-wrap: wrap;
  margin: 0 0 var(--f4);
}

/* A busca da aba Contas: borda e largura; a altura vem de `.barra-de-controles` (V.1). */
.filtros-das-contas input[type="search"] {
  border: 1px solid var(--line); border-radius: var(--raio-botao);
  padding: 0 var(--f3); font: inherit; font-size: var(--texto-p);
  background: var(--surface); color: var(--ink); min-width: 220px;
}
.selo.aviso { background: var(--aviso-soft); color: var(--aviso); }
.selo.ruim { background: var(--ruim-soft); color: var(--ruim); }
.selo.neutro { background: var(--soft); color: var(--muted); border: 1px solid var(--line); }

.numero { font-size: 26px; font-weight: 800; line-height: 1.15; }
.rotulo { font-size: 11.5px; color: var(--muted); }
.sobe { color: var(--ok); font-weight: 700; }
.desce { color: var(--ruim); font-weight: 700; }
.sem { color: var(--muted); }

select {
  display: block; width: 100%; margin-top: var(--f2); height: 40px; padding: 0 var(--f3);
  border: 1px solid var(--line-forte); border-radius: var(--raio-botao);
  background: var(--soft); font: 400 14px Manrope, system-ui, sans-serif; color: var(--ink);
}
/* A BARRA DE CONTROLES (V.1, 16/10): campo, select e botão na MESMA altura, sem a margem
 * de cima do formulário. Quem precisa crescer usa `flex: 1`. `.media` (38px) é só a caixa
 * do Atendimento. */
.barra-de-controles {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.barra-de-controles.media { --alto-barra: var(--alto-m); }
/* SELETORES SEPARADOS, e não uma `:is()` com tudo: a `:is()` pega a especificidade do
 * argumento mais forte (o `input:not():not()`), e aí nenhuma exceção abaixo (abas, pílula)
 * conseguia vencer. Letra pela escala (`--texto-p`), como cobra o catálogo de medidas. */

.barra-de-controles select, .barra-de-controles .btn, .barra-de-controles button,
.barra-de-controles .pilula-de-busca,
.barra-de-controles input:not([type="checkbox"]):not([type="radio"]) {
  height: var(--alto-barra); margin: 0; box-sizing: border-box; font-size: var(--texto-p);
}

.barra-de-controles input:not([type="checkbox"]):not([type="radio"]) { width: auto; }

.barra-de-controles select { width: auto; }

/* O CAMPO DENTRO DA PÍLULA DE BUSCA ocupa a pílula (que já tem a borda), e não 32 px por
 * cima da borda — senão vaza 2 px. A caixinha de marcar fica do tamanho dela. */

.barra-de-controles .pilula-de-busca input:not([type="checkbox"]) { height: 100%; flex: 1; min-width: 0; }

/* Pastilhas de seção / rótulo: continuam na altura de aba — não são o campo da barra. */

.barra-de-controles .gg-secoes button,
.barra-de-controles .grupo-de-opcoes .opcoes button {
  height: var(--alto-aba);
}
/* A fileira do Financeiro (`.linha.filtros`) guarda a grade `--cols`; a classe só alinha a altura. */
.linha.barra-de-controles { display: grid; }
/* Contas do Admin: rótulo em cima da pastilha — alinha pelo pé, não pelo meio. */
.filtros-das-contas.barra-de-controles { align-items: flex-end; }
input[type="month"] {
  display: block; width: 100%; margin-top: var(--f2); height: 40px; padding: 0 var(--f3);
  border: 1px solid var(--line-forte); border-radius: var(--raio-botao);
  background: var(--soft); font: 400 14px Manrope, system-ui, sans-serif; color: var(--ink);
}

/* ------------------------------------------------------------------------------ diálogo */

/* NUNCA `confirm()` NEM `alert()`: estampam o endereco do site, ancoram no topo da janela e
 * ignoram o desenho. Este fica CENTRADO, e responde a Enter e Esc. */
.cortina {
  position: fixed; inset: 0; background: rgba(21, 23, 43, .45);
  display: grid; place-items: center; z-index: 100; padding: var(--f5);
}
.dialogo {
  background: var(--surface); border-radius: var(--raio); padding: var(--f5);
  max-width: 460px; width: 100%; box-shadow: 0 20px 50px rgba(21, 23, 43, .25);
}
.dialogo h2 { margin: 0 0 var(--f2); font-size: 16px; }
.dialogo p { margin: 0 0 var(--f5); color: var(--muted); font-size: 13px; }
.dialogo .acoes { display: flex; gap: var(--f2); justify-content: flex-end; }
.btn.perigo { background: var(--ruim); border-color: var(--ruim); color: #fff; }
/* O HOVER GERAL do botão clareia o fundo: aqui a letra branca sumia e o botão ficava mudo. */
.btn.perigo:hover:not(:disabled) { background: var(--ruim); border-color: var(--ruim); color: #fff; filter: brightness(.92); }
/* O MODO DO ENVIO REAL (Seus numeros, "O envio real"): a cor diz o risco, o cheio diz o
 * que esta valendo — desligado e branco com a letra na cor; ligado e cheio, com o ✓.
 * Cinza = nada sai; ambar = so para a lista; verde = para todos. O vermelho fica SO para o
 * "Parar todos os envios": o Henrique leu o "Para todos" vermelho como "parar" (15/10). */
.btn.modo-de-envio { background: var(--surface); }
.btn.modo-de-envio.modo-ensaio { color: var(--muted); border-color: var(--line); }
.btn.modo-de-envio.modo-lista { color: var(--aviso); border-color: var(--aviso); }
.btn.modo-de-envio.modo-todos { color: var(--ok); border-color: var(--ok); }
.btn.modo-de-envio.ligado { color: var(--surface); cursor: default; }
.btn.modo-de-envio.modo-ensaio.ligado { background: var(--muted); border-color: var(--muted); }
.btn.modo-de-envio.modo-lista.ligado { background: var(--aviso); border-color: var(--aviso); }
.btn.modo-de-envio.modo-todos.ligado { background: var(--ok); border-color: var(--ok); }

/* -------------------------------------------------------------------------------- gaveta */

/* A GAVETA E O UNICO DESENHO DE FORMULARIO. Criar e editar usam esta mesma peca — se cada
 * tela desenhasse o seu, o produto voltaria a ter um formato por tela.
 *
 * Ela ENCOSTA NA DIREITA: a cortina do dialogo centra o filho, e centrar a gaveta deixaria
 * uma faixa de fundo entre ela e a borda, que le como desalinhamento. */
/* `grid-template-rows: 100%` PRENDE A LINHA NA ALTURA DA TELA. Sem isso a linha e `auto`: ela
 * cresce ate caber o conteudo, a gaveta fica MAIS ALTA QUE A JANELA e o rodape com o botao de
 * gravar sai do campo de visao. Medido em 16/08: 797px numa tela de 720. */
.cortina.para-o-lado { padding: 0; place-items: stretch end; grid-template-rows: 100%; }

.gaveta {
  background: var(--surface);
  width: min(460px, 100vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--line);
  box-shadow: -18px 0 40px rgba(21, 23, 43, .16);
}
.gv-topo {
  padding: 18px var(--f5);
  border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
}
.gv-topo b { font-size: 15px; }
.gv-topo .x {
  border: 0; background: none; font-size: 20px; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 var(--f1);
}
/* `min-height: 0` NAO E ENFEITE. O padrao de um item flexivel e `min-height: auto`, e com
 * ele o corpo se recusa a encolher abaixo do proprio conteudo — o `overflow: auto` nunca
 * chega a rolar, e quem cresce e a gaveta inteira. */
.gv-corpo { padding: 18px var(--f5); overflow: auto; flex: 1; min-height: 0; }
.gv-pe {
  padding: 14px var(--f5);
  border-top: 1px solid var(--line);
  display: flex; gap: var(--f2); align-items: center; justify-content: flex-end;
}
/* O RODAPE NAO ROLA JUNTO: a acao primaria fica no mesmo lugar em todas as gavetas, e quem
 * preencheu ate o fim nao precisa procurar o botao. */
.gv-pe .rotulo { margin-right: auto; }

/* TITULO DE SECAO COM TRACO ROXO da hierarquia sem pesar. O formulario de lancamento tem
 * seis campos, e sem secao ele vira uma pilha. */
.gaveta .secao {
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--muted); border-left: 3px solid var(--roxo); padding-left: 9px;
  margin: var(--f5) 0 var(--f3);
}
.gaveta .secao:first-child { margin-top: 0; }

/* O CAMPO SUBIU DA GAVETA em 21/08/2026 (item 202): ele e' um componente do catalogo, e nao
 * um morador da gaveta. As regras valem em QUALQUER tela; a gaveta continua funcionando
 * porque os seletores sem `.gaveta` pegam o mesmo HTML. O `.gaveta .dica` fica no par
 * porque a dica da CAIXA e' escrita fora do `.campo` (logo depois do label). */
.campo { margin-bottom: var(--f4); }
.campo > label { display: block; font-size: 12.5px; font-weight: 600; }
.campo .opcional, .gaveta .opcional { font-weight: 400; color: var(--muted); }
.campo .dica, .gaveta .dica { margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }

/* A recusa aparece ONDE DOI: no campo quando e de um campo, na faixa quando e do conjunto. */
.campo.errado input,
.campo.errado select,
.campo.errado textarea { border-color: var(--ruim); background: var(--surface); }
.campo .erro-do-campo { margin: 6px 0 0; font-size: 11.5px; font-weight: 600; color: var(--ruim); }
.campo .erro-do-campo[hidden] { display: none !important; }
.gaveta .faixa-erro {
  background: var(--ruim-soft); color: var(--ruim); border: 1px solid #f3d3d8;
  border-radius: var(--raio-botao); padding: 10px var(--f3); font-size: 12.5px;
  margin-bottom: var(--f4);
}
.gaveta .faixa-erro[hidden] { display: none !important; }
.gaveta .recado { margin-bottom: var(--f4); }

/* CAIXA E RADIO PRECISAM DE RESET PROPRIO, senao herdam o recheio dos campos de texto. */
.campo.marca { display: flex; align-items: center; gap: var(--f2); }
.campo.marca input[type="checkbox"] {
  width: auto; height: auto; margin: 0; padding: 0; border: 0;
  background: none; box-shadow: none; border-radius: 0; accent-color: var(--roxo);
}
.campo.marca span { font-size: 12.5px; font-weight: 600; }
/* O CONTADOR DO CODIGO — 16/09/2026, ideia dele.
 *
 * O NUMERO E GRANDE porque ele e' a informacao: quem esta digitando um codigo de seis
 * digitos com o olho no celular precisa enxergar o prazo pelo canto da vista. */
.campo.relogio { display: flex; align-items: center; gap: var(--f3); flex-wrap: wrap; }
.campo.relogio > .rotulo { font-size: var(--texto-p); font-weight: 600; }
.campo.relogio .conta {
  font-variant-numeric: tabular-nums; font-size: var(--texto-contador); font-weight: 700;
  color: var(--roxo); line-height: 1;
}
.campo.relogio .unidade { font-size: var(--texto-p); font-weight: 600; margin-left: 2px; }
.campo.relogio .trilho-do-tempo {
  flex: 1 1 80px; height: 6px; border-radius: 99px;
  background: var(--line); overflow: hidden;
}
.campo.relogio .trilho-do-tempo i {
  display: block; height: 100%; background: var(--roxo); transition: width .25s linear;
}
/* OS CINCO SEGUNDOS FINAIS mudam de cor: e' o aviso de esperar o proximo em vez de correr
 * para digitar -- a corrida que fez a Tatiana enviar um codigo ja vencido. */

.campo.relogio.apertado .conta,

.campo.relogio.apertado .trilho-do-tempo i { color: var(--ruim); background: var(--ruim); }

.campo.relogio.apertado .conta { background: none; }

/* A FIGURA DENTRO DO FORMULARIO — o QR dos dois fatores, 16/09/2026.
 *
 * O FUNDO E BRANCO SEMPRE, e nao a cor da superficie: o leitor de QR precisa do contraste
 * entre o quadrado escuro e o claro, e no tema escuro um SVG preto sobre fundo escuro vira
 * um borrao que nenhuma camera le. */
.campo.figura { display: flex; flex-direction: column; align-items: flex-start; gap: var(--f2); }
.campo.figura > .rotulo { font-size: var(--texto-p); font-weight: 600; }
.campo.figura img {
  background: #fff; padding: var(--f2); border-radius: var(--raio-botao);
  border: 1px solid var(--line); max-width: 100%; height: auto;
}

/* AVISO FLUTUANTE, e nao faixa de mensagem: a faixa empurra o layout, e a lista danca
 * justamente quando a pessoa quer conferir a linha que acabou de criar. */
/* 🔴 NO MEIO DA TELA, e nao no rodape — decisao dele em 15/09/2026. A Tatiana trocou a
 * senha num monitor grande e nao viu a confirmacao: ela nascia preta, a 60cm de onde o
 * olho estava. A regra que ficou: **a acao mora onde o olho esta**. */
.aviso-flutuante {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: #fff; padding: 14px var(--f5); max-width: min(520px, 88vw);
  border-radius: 999px; font-size: var(--texto-m); font-weight: 500; text-align: center;
  z-index: 200; box-shadow: 0 12px 34px rgba(21, 23, 43, .35);
}

/* A COR DIZ O QUE ACONTECEU antes de a pessoa ler a frase. */
.aviso-flutuante.certo { background: var(--aviso-certo); }
.aviso-flutuante.erro { background: var(--aviso-erro); }
.aviso-flutuante.neutro { background: var(--menu); }

/* AVISO NO CANTO (item 4.7): cartão flutuante embaixo à direita — não empurra o layout.
 * Âmbar = atenção. Empilha para cima. No celular, largura toda menos 16 px de cada lado. */

.aviso-no-canto-pilha {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 210;
  display: flex;
  flex-direction: column-reverse;
  gap: 12px;
  width: 360px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}

/* COM A GAVETA ABERTA o aviso some e volta ao fechar: ele cobria o Cancelar e o Salvar
 * (Henrique, 04/11/2026). `.grp-fundo` é a gaveta da tela de Grupos. */
body:has(.cortina.para-o-lado, .grp-fundo) .aviso-no-canto-pilha { display: none; }

/* AS ABAS DA AUTOMAÇÃO (04/11/2026): a primeira seção de cada aba encosta no mesmo espaço. */
.aut-painel { margin-top: var(--f4); }
.aut-painel > .acima { margin-top: 0; }
/* OS BOTÕES DA LINHA DO DISPARO não ficam colados um no outro. */
[data-disparo] + [data-disparo] { margin-left: 6px; }

.aviso-no-canto {
  pointer-events: auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  width: 100%;
  padding: 14px 12px 14px 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 34px rgba(21, 23, 43, .18);
  color: var(--ink);
}

.aviso-no-canto .aviso-no-canto-sinal {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--aviso);
  color: #fff;
  font-size: var(--texto-m);
  font-weight: 800;
  line-height: 1;
}

.aviso-no-canto-atencao .aviso-no-canto-sinal {
  background: var(--aviso);
}

.aviso-no-canto-ruim .aviso-no-canto-sinal {
  background: var(--ruim);
}

.aviso-no-canto-ruim .aviso-no-canto-botao {
  color: var(--ruim);
}

.aviso-no-canto-corpo {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.aviso-no-canto .aviso-no-canto-titulo {
  font-size: var(--texto-m);
  font-weight: 800;
  line-height: 1.3;
  color: var(--ink);
}

.aviso-no-canto .aviso-no-canto-frase {
  margin: 0;
  font-size: var(--texto-pp);
  line-height: 1.4;
  color: var(--muted);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.aviso-no-canto .aviso-no-canto-botao {
  justify-self: start;
  margin-top: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--aviso);
  font: inherit;
  font-size: var(--texto-pp);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.aviso-no-canto .aviso-no-canto-fechar {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: var(--texto-g);
  line-height: 1;
  cursor: pointer;
}

.aviso-no-canto .aviso-no-canto-fechar:hover {
  background: var(--soft);
  color: var(--ink);
}

@media (max-width: 520px) {
  .aviso-no-canto-pilha {
    left: 16px;
    right: 16px;
    bottom: 16px;
    width: auto;
    max-width: none;
  }
}

/* A BARRA DE ACOES do topo de cada tela. Uma acao primaria por tela, no maximo. */
.acoes-da-tela { display: flex; gap: var(--f2); justify-content: flex-end; margin-bottom: var(--f4); }

/* A LINHA QUE ABRE ALGUMA COISA PRECISA PARECER QUE ABRE. Sem o cursor e o realce, ninguem
 * descobre que da para clicar — e a acao existe sem existir. */
.tabela.clicavel .linha:not(.cabecalho) { cursor: pointer; }
.tabela.clicavel .linha:not(.cabecalho):hover { background: var(--soft); }
.tabela.clicavel .linha:not(.cabecalho):hover .abre { color: var(--roxo); }
.abre { font-size: 11px; color: var(--muted); }

/* Botao sem contorno ate o hover. Serve para a acao SECUNDARIA que nao pode competir com a
 * primaria — "esqueci minha senha" ao lado de "entrar". */
.btn.btn-sutil { border-color: transparent; background: none; color: var(--muted); }
.btn.btn-sutil:hover:not(:disabled) { background: var(--soft); color: var(--ink); }