/* ============================================================================
   FORMULÁRIO E FICHA DE CLIENTE

   Duas telas, uma folha: cadastrar/editar (`.frm-*`) e a ficha de leitura
   (`.fic-*`). Elas dividem a casca (`.frm-corpo`, `.frm-voltar`) porque são o
   mesmo assunto visto de dois jeitos, e alternar entre elas não pode parecer
   troca de produto.

   Serve qualquer formulário novo do laboratório — por isso os nomes falam de
   FORMULÁRIO, e não de cliente.
   =========================================================================== */

.frm-corpo {
  padding: var(--e5);
  /* Formulário longo não deve usar a largura toda: uma linha de 1400px faz o
     olho perder o começo da próxima. ~1020px é o limite confortável com dois
     campos lado a lado.
     E o teto vem com `margin-inline: auto`, senão o conteúdo fica encostado
     na esquerda e o vazio todo se acumula de um lado só — o que parece
     página quebrada, não composição. Nas telas de LISTA isso não acontece
     porque elas usam a largura inteira; aqui, sem centralizar, sobrava um
     terço da tela em branco à direita. */
  max-width: 1020px;
  width: 100%;
  margin-inline: auto;
}

/* A volta, colada no título. Alvo de 32px porque é o único jeito de sair
   desta tela sem descer até o Cancelar. */
.frm-voltar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: var(--raio-mini);
  border: 1px solid var(--linha-forte);
  background: var(--papel);
  color: var(--tinta-media);
  text-decoration: none;
  transition: border-color var(--mov-base) ease, color var(--mov-base) ease,
              background var(--mov-base) ease;
}
.frm-voltar:hover { border-color: var(--acento); color: var(--acento); background: var(--acento-fundo); }

/* --- Campos ---------------------------------------------------------------
   Duas colunas em tela larga, uma só quando aperta. O `min(260px, 100%)` no
   `minmax` evita o caso clássico: sem ele, num celular estreito a coluna
   mínima de 260px estoura a grade e a página rola para o lado. */
.frm-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--e4);
  padding: var(--e5);
}
.frm-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.frm-largo { grid-column: 1 / -1; }
.frm-linha { display: flex; gap: var(--e2); align-items: stretch; }
.frm-linha .frm-entrada { flex: 1; min-width: 0; }

/* CAMPO DE TAMANHO CONHECIDO, botão colado nele. O padrão estica a caixa até
   o fim da linha, e num campo de largura fixa como o CNPJ isso só empurra o
   botão para longe: a pessoa digita à esquerda e procura "Consultar" a meia
   tela de distância. `22ch` cabe o CNPJ formatado inteiro com folga. É uma
   VARIANTE, e não uma mudança na regra de cima, porque `.frm-linha` serve
   também os campos que devem mesmo ocupar a linha toda. */
.frm-linha--curta .frm-entrada { flex: 0 1 22ch; }

.frm-rotulo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--txt-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
/* "obrigatório" ESCRITO, e não um asterisco. O asterisco é uma convenção que
   precisa de legenda em algum canto da tela; a palavra não precisa de nada. */
.frm-obrig {
  font-style: normal;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--acento);
  background: var(--acento-fundo);
  border-radius: 3px;
  padding: 1px 5px;
}
.frm-erro {
  font-style: normal;
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--txt-micro);
  font-weight: 600;
  color: var(--alerta);
}

.frm-entrada {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--linha-forte);
  border-radius: var(--raio-mini);
  background: var(--papel);
  color: var(--tinta);
  font-family: inherit;
  font-size: var(--txt-mini);
  font-weight: 500;
  outline: none;
  transition: border-color var(--mov-base) ease, box-shadow var(--mov-base) ease;
}
.frm-entrada:focus { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-fundo); }
.frm-entrada.e-invalido { border-color: var(--alerta); box-shadow: 0 0 0 3px var(--alerta-suave); }
.frm-maiusculo { text-transform: uppercase; }
.frm-numeros { font-variant-numeric: tabular-nums; letter-spacing: .02em; }
select.frm-entrada { cursor: pointer; }

/* O seletor de arquivo do navegador é feio e diferente em cada um. Estilizar
   só o botão interno (`::file-selector-button`) resolve sem esconder o campo
   atrás de um <label> falso — truque comum que quebra teclado e leitor de
   tela. */
.frm-arquivo {
  width: 100%;
  padding: 7px;
  border: 1px dashed var(--linha-forte);
  border-radius: var(--raio-mini);
  background: var(--papel-sutil);
  font-family: inherit;
  font-size: var(--txt-mini);
  color: var(--tinta-media);
  cursor: pointer;
}
.frm-arquivo::file-selector-button {
  margin-right: 10px;
  padding: 6px 12px;
  border: none;
  border-radius: var(--raio-mini);
  background: var(--acento);
  color: var(--papel);
  font-family: inherit;
  font-size: var(--txt-mini);
  font-weight: 600;
  cursor: pointer;
}
.frm-arquivo:hover { border-color: var(--acento); }

.frm-certificado-atual {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--e3);
  padding: 10px 12px;
  border: 1px solid var(--ok-linha);
  border-radius: var(--raio-mini);
  background: var(--ok-suave);
}
.frm-certificado-atual i { font-size: 16px; color: var(--ok); }
.frm-certificado-atual strong { display: block; font-size: var(--txt-mini); color: var(--tinta); }
.frm-certificado-atual span { font-size: var(--txt-micro); color: var(--tinta-media); }

.frm-aviso {
  margin-top: var(--e3);
  padding: 9px 11px;
  border-radius: var(--raio-mini);
  border: 1px solid var(--linha);
  background: var(--papel-sutil);
  font-size: var(--txt-mini);
  font-weight: 500;
  color: var(--tinta-media);
}
.frm-aviso.e-ok { border-color: var(--ok-linha); background: var(--ok-suave); color: var(--ok); }
.frm-aviso.e-erro { border-color: var(--alerta-linha); background: var(--alerta-suave); color: var(--alerta); }

/* --- Rodapé ---------------------------------------------------------------
   Excluir na ponta ESQUERDA, salvar na direita, com a folga empurrando um
   para longe do outro. Botão destrutivo vizinho do botão que se aperta o
   tempo todo é como se apaga cliente sem querer. */
.frm-rodape {
  display: flex;
  align-items: center;
  gap: var(--e2);
  padding: var(--e4) 0 var(--e5);
}
.frm-rodape-folga { flex: 1; }
.b-btn--perigo { border-color: var(--alerta-linha); color: var(--alerta); }
.b-btn--perigo:hover { border-color: var(--alerta); background: var(--alerta-suave); color: var(--alerta); }

/* --- Pacotes em duas etapas ----------------------------------------------- */
.pac-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--e5);
  padding: var(--e5);
}
@media (max-width: 860px) { .pac-grade { grid-template-columns: 1fr; } }

.pac-escolha { display: flex; flex-direction: column; gap: var(--e4); min-width: 0; }
.pac-etapa { display: flex; flex-direction: column; gap: var(--e3); overflow: hidden; }
.pac-linha { display: flex; gap: var(--e2); }
.pac-linha .frm-entrada { flex: 1; min-width: 0; }

/* O número do passo. Pequeno e redondo: ele não é decoração, é o que diz que
   existe uma ORDEM — primeiro o setor, depois o pacote. */
.pac-passo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px; height: 16px;
  border-radius: 999px;
  background: var(--acento);
  color: var(--papel);
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
}

.pac-previa {
  min-height: 96px;
  max-height: 220px;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-mini);
  background: var(--papel-sutil);
  font-size: var(--txt-mini);
  color: var(--tinta-media);
}
.pac-resumo {
  margin: 0 0 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linha);
  font-size: var(--txt-micro);
  font-weight: 600;
  color: var(--tinta-media);
}
.pac-previa-lista { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 3px; }
/* Tarefa que não se aplica à unidade continua na lista, apagada. Escondê-la
   sumiria justamente com a informação que evita a surpresa depois. */
.pac-previa-lista .e-fora { color: var(--tinta-fraca); text-decoration: line-through; }
.pac-vazio { margin: 0; font-style: italic; color: var(--tinta-fraca); }
.pac-vazio.e-erro { color: var(--alerta); font-style: normal; }

/* Explica por que a lista de setores encolheu. Fica logo abaixo do seletor,
   onde a pergunta nasce: um setor que some sem explicação faz a pessoa achar
   que o cadastro se perdeu. */
.pac-nota { margin: 6px 0 0; font-size: 12px; line-height: 1.4; color: var(--tinta-fraca); }
/* O aviso de que SEM PACOTE NADA É GERADO: âmbar, e não vermelho, porque
   nada está errado ainda; e em faixa, porque a frase decide se o cadastro
   inteiro serve para alguma coisa. Cores por token, para o modo noturno. */
.pac-nota--alerta {
  margin: var(--e4) var(--e5) 0;
  padding: 9px 12px;
  border: 1px solid var(--atencao-linha, var(--linha));
  border-radius: var(--raio-mini);
  background: var(--atencao-suave);
  color: var(--atencao);
  font-weight: 600;
}
.lab-rotulo.e-alerta { color: var(--atencao); }
.lab-rotulo.e-alerta i { margin-right: 3px; }

.pac-incluidos {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  min-width: 0;
  padding: var(--e4);
  border: 1px solid var(--linha);
  border-radius: var(--raio);
  background: var(--papel-sutil);
}
.pac-titulo {
  margin: 0;
  font-size: var(--txt-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.pac-lista { display: flex; flex-direction: column; gap: 6px; }

/* Linha, e não etiqueta que quebra: a lista mistura pacotes de setores
   diferentes, e empilhado o setor e o nome ficam alinhados em coluna — dá
   para varrer de cima a baixo. */
.pac-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 8px 7px 10px;
  border: 1px solid var(--linha);
  border-radius: var(--raio-mini);
  background: var(--papel);
  font-size: var(--txt-mini);
}
.pac-item-setor {
  flex-shrink: 0;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--acento-fundo);
  color: var(--acento);
  font-size: var(--txt-micro);
  font-weight: 700;
}
.pac-item-nome {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--tinta);
  font-weight: 500;
}
.pac-item-x {
  flex-shrink: 0;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--raio-mini);
  background: none;
  color: var(--tinta-fraca);
  font-size: 11px;
  cursor: pointer;
  transition: background var(--mov-rapido) ease, color var(--mov-rapido) ease;
}
.pac-item-x:hover { background: var(--alerta-suave); color: var(--alerta); }

/* ===========================================================================
   FICHA (só leitura)
   =========================================================================== */
.fic-inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  flex-shrink: 0;
  border-radius: var(--raio-mini);
  background: var(--acento-fundo);
  border: 1px solid var(--acento-linha);
  color: var(--acento);
  font-size: var(--txt-base);
  font-weight: 700;
}
.fic-nome {
  margin: 0;
  font-size: var(--txt-medio);
  font-weight: 700;
  color: var(--tinta);
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fic-copiavel {
  cursor: pointer;
  border-radius: 3px;
  padding: 0 2px;
  transition: background var(--mov-rapido) ease, color var(--mov-rapido) ease;
}
.fic-copiavel:hover { background: var(--acento-fundo); color: var(--acento); }

/* O ÍCONE DE COPIAR é inserido pelo `copiar_clipboard.js` DENTRO do elemento,
   e sem regra ele herda o tamanho do texto — no título, 15px de ícone preto
   colado na última letra, competindo com o nome da empresa.
   Aqui ele fica pequeno, cinza, com folga, e só aparece no hover: quem não
   está copiando não precisa vê-lo, e quem está já tem o cursor em cima. */
.fic-copiavel .icone-copiar,
.fic-nome .icone-copiar {
  margin-left: 6px;
  font-size: 10px;
  color: var(--tinta-fraca);
  opacity: 0;
  vertical-align: middle;
  transition: opacity var(--mov-rapido) ease;
}
.fic-copiavel:hover .icone-copiar,
.fic-nome:hover .icone-copiar { opacity: .65; }
/* O retorno de "copiei" precisa aparecer mesmo sem o mouse em cima — é ele
   que responde se o clique funcionou. */
.fic-copiavel.copiado-feedback,
.fic-nome.copiado-feedback { color: var(--ok); background: var(--ok-suave); }
.fic-copiavel.copiado-feedback .icone-copiar,
.fic-nome.copiado-feedback .icone-copiar { opacity: 1; color: var(--ok); }
.fic-copiavel.copiado-erro,
.fic-nome.copiado-erro { color: var(--alerta); background: var(--alerta-suave); }
.fic-copiavel.copiado-erro .icone-copiar,
.fic-nome.copiado-erro .icone-copiar { opacity: 1; color: var(--alerta); }

.fic-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: var(--e4) var(--e5);
  padding: var(--e5);
}
.fic-corpo { padding: var(--e5); }
.fic-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.fic-dado { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fic-rotulo {
  font-size: var(--txt-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
}
.fic-valor { font-size: var(--txt-mini); font-weight: 600; color: var(--tinta); }
.fic-mono { font-variant-numeric: tabular-nums; }
.fic-nada { margin: 0; font-size: var(--txt-mini); color: var(--tinta-fraca); font-style: italic; }

.fic-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--linha-forte);
  background: var(--papel-sutil);
  font-size: var(--txt-micro);
  font-weight: 600;
  color: var(--tinta-media);
}
.fic-chip i { font-size: 10px; }
.fic-chip.e-acento { border-color: var(--acento-linha); background: var(--acento-fundo); color: var(--acento); }
.fic-chip.e-ok { border-color: var(--ok-linha); background: var(--ok-suave); color: var(--ok); }
.fic-chip.e-atencao { border-color: var(--atencao-linha); background: var(--atencao-suave); color: var(--atencao); }
.fic-chip.e-erro { border-color: var(--alerta-linha); background: var(--alerta-suave); color: var(--alerta); }

.fic-cert { display: flex; align-items: center; gap: var(--e3); flex-wrap: wrap; }
.fic-arquivo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--txt-mini);
  font-weight: 600;
  color: var(--acento);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.fic-arquivo:hover { border-bottom-color: var(--acento); }

/* QUANDO ELA VESTE UM `<button>`, O RESET TEM DE SER INTEIRO.
   A regra acima muda UM lado (`border-bottom`) — num `<a>` isso basta, porque
   link não tem moldura. Num botão sobram os outros três lados, o fundo cinza
   e a fonte do sistema, e o resultado é uma caixinha torta no meio da ficha.
   Foi exatamente o que aconteceu quando o download do certificado virou botão
   no modo suporte; é o mesmo erro que as abas do BackOffice já tinham dado. */
button.fic-arquivo {
  border: none;
  border-bottom: 1px solid transparent;
  background: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
}
/* Cadeado em vez de seta, e cor de aviso em vez de acento: o botão não leva a
   lugar nenhum, e prometer o download com a mesma cara do link que funciona é
   o que faz a pessoa clicar duas vezes achando que travou. */
button.fic-arquivo[data-suporte-bloqueado] { color: var(--tinta-fraca); }
button.fic-arquivo[data-suporte-bloqueado]:hover {
  color: var(--alerta);
  border-bottom-color: var(--alerta);
}

/* --- Histórico recolhido --------------------------------------------------- */
.fic-hist-botao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  width: 100%;
  padding: var(--e3) var(--e5);
  border: none;
  background: none;
  font-family: inherit;
  font-size: var(--txt-base);
  font-weight: 700;
  color: var(--tinta);
  cursor: pointer;
  transition: background var(--mov-rapido) ease;
}
.fic-hist-botao:hover { background: var(--papel-sutil); }
.fic-hist-botao > span:first-child { display: inline-flex; align-items: center; gap: var(--e2); }
.fic-hist-conta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: var(--txt-micro);
  font-weight: 600;
  color: var(--tinta-fraca);
}
.fic-hist-conta i { transition: transform var(--mov-base) var(--mov-curva); }
.fic-hist-botao.e-aberto .fic-hist-conta i { transform: rotate(180deg); }

.fic-hist { overflow: hidden; border-top: 1px solid var(--linha); }
.fic-tabela { width: 100%; border-collapse: collapse; font-size: var(--txt-mini); }
.fic-tabela th {
  padding: 8px var(--e4);
  background: var(--papel-sutil);
  border-bottom: 1px solid var(--linha);
  font-size: var(--txt-micro);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tinta-fraca);
  text-align: left;
}
.fic-tabela td {
  padding: 8px var(--e4);
  border-bottom: 1px solid var(--linha);
  color: var(--tinta-media);
  vertical-align: top;
}
.fic-tabela tr:last-child td { border-bottom: none; }
.fic-nowrap { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fic-quem { font-weight: 700; color: var(--acento); }
/* O valor ANTIGO fica riscado: numa tabela de "de / para", ler as duas
   colunas como texto igual obriga a comparar palavra por palavra. */
.fic-de { color: var(--tinta-fraca); text-decoration: line-through; }

/* AS COLUNAS "DE" E "PARA" QUEBRAM LINHA, e isso não é estética.
   O nome de um certificado tem sublinhados, e o navegador NÃO quebra linha
   neles: uma célula de 90 caracteres virava uma linha só, esticava a tabela
   além da largura do card e empurrava a coluna "Para" para fora da tela. A
   mudança aparecia pela metade, e a metade que sumia era a que interessa.

   `table-layout: fixed` é o que faz as larguras abaixo valerem; sem ele o
   navegador ignora e volta a dimensionar pelo conteúdo mais longo. */
.fic-tabela { table-layout: fixed; }
.fic-tabela th:nth-child(1), .fic-tabela td:nth-child(1) { width: 130px; }
.fic-tabela th:nth-child(2), .fic-tabela td:nth-child(2) { width: 170px; }
.fic-tabela th:nth-child(3), .fic-tabela td:nth-child(3) { width: 150px; }
.fic-tabela td:nth-child(4), .fic-tabela td:nth-child(5) { overflow-wrap: anywhere; }

/* ==========================================================================
   CADASTRO COMPLETO — a parte opcional do formulario, recolhida.

   Endereco, atividade economica e enquadramento nao sao obrigatorios para
   cadastrar um cliente, e mostra-los sempre fazia a tela parecer o dobro do
   trabalho que e. Recolhido, o formulario volta a ter tres campos obrigatorios
   a vista; quem quiser o resto abre, e a consulta de CNPJ abre sozinha para
   mostrar o que trouxe.

   `<details>` NATIVO em vez de JS: funciona sem script, o teclado ja navega
   nele, e o navegador cuida de abrir e fechar. Mesmo caminho ja usado nos
   lembretes (`.lem-obr`).
   ========================================================================== */
.frm-extra > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  padding: var(--e3) var(--e5);
  /* Os mesmos 10% do cabeçalho de card (`dashboard-b.css`), e o porquê está
     escrito lá. Aqui pesa ainda um pouco mais: este cabeçalho ABRE e FECHA, e
     faixa que quase não aparece esconde que há algo para clicar. */
  /* QUATRO POR CENTO, e eram dez, desde 22/08/2026.
     A dez a faixa era um bloco cinza atras do titulo. No painel sao sete
     cartoes na tela, e sete faixas dessas pesavam mais que o conteudo que
     elas anunciavam. A quatro ela ainda separa, e quem faz o trabalho de
     dizer onde uma coisa comeca passou a ser a LINHA DE BAIXO, que continua
     em `--linha-forte`.

     O MESMO VALOR NOS QUATRO CABECALHOS do laboratorio: este, o do painel de
     controle (`painel.css`), o do bloco de formulario (`formulario.css`) e o
     da janelinha (`tokens-sobrio.css`). Mudar um e deixar os outros e como o
     produto passa a ter duas intensidades de cabecalho, e ninguem sabe qual
     e a certa. Foi por isso que os quatro desceram juntos. */
  background: rgba(var(--rgb-tinta), .04);
  cursor: pointer;
  list-style: none;
  transition: background var(--mov-rapido) ease;
}
/* Some com o triangulo padrao nos dois motores. Sem as DUAS regras ele
   reaparece em um dos navegadores, e o cartao fica com duas setas. */
.frm-extra > summary::-webkit-details-marker { display: none; }
.frm-extra > summary::marker { content: ''; }

/* O HOVER ACOMPANHA A FAIXA, e precisou subir junto. Ele era .11 contra um
   repouso de .07: quatro pontos de diferença, que é o que se enxerga. Com o
   repouso em .10 e o hover parado em .11, passar o mouse deixaria de mostrar
   qualquer coisa — e este cabeçalho é clicável, então o hover é o que diz
   isso. Os mesmos quatro pontos, agora a partir do novo repouso. */
.frm-extra > summary:hover { background: rgba(var(--rgb-tinta), .14); }
.frm-extra[open] > summary { border-bottom: 1px solid var(--linha); }
.frm-extra[open] > summary .frm-extra-seta { rotate: 90deg; }

.frm-extra-seta {
  color: var(--tinta-fraca);
  transition: rotate var(--mov-medio, .2s) ease;
}
.frm-extra-dica {
  margin-left: auto;
  margin-right: var(--e2);
  font-size: var(--txt-micro);
  color: var(--tinta-fraca);
}
/* Some no estreito: o titulo e a seta bastam, e a dica empurraria a seta
   para fora da tela. */
@media (max-width: 640px) { .frm-extra-dica { display: none; } }

/* O (i) ao lado do rotulo, para campo cuja consequencia nao esta no nome.
   Discreto em repouso e da marca no hover: quem ja sabe o que o campo faz nao
   e interrompido, e quem nao sabe encontra. */
.frm-info {
  color: var(--tinta-fraca);
  cursor: help;
  transition: color var(--mov-rapido) ease;
}
.frm-info:hover { color: var(--acento); }

/* CAMPO TRAVADO. `readonly` sozinho nao muda nada na tela: o campo continua
   com fundo branco e borda de campo editavel, entao a pessoa clica, digita, e
   nada acontece -- o que parece defeito, nao regra.

   Aqui ele fica com a cara do que e: fundo apagado, texto mais fraco e o
   cursor dizendo que nao ha o que fazer ali. O `title` do elemento explica o
   porque no hover.

   NAO USA `disabled`: campo desabilitado NAO E ENVIADO no POST, e o
   `EmpresaForm` precisa receber o CNPJ para o `clean_cnpj` devolver o valor
   gravado. `readonly` envia; `disabled` some. */
.frm-entrada[readonly] {
  background: var(--papel-sutil, #f5f5f6);
  color: var(--tinta-media, #56565f);
  border-style: dashed;
  cursor: not-allowed;
}
.frm-entrada[readonly]:focus {
  border-color: var(--linha-forte);
  box-shadow: none;
}

/* NOTA DE CAMPO: uma linha abaixo do campo, sem caixa.

   E irma do `.frm-aviso`, e a diferenca e de PESO. O aviso e uma caixa com
   borda e fundo, do tamanho do campo -- certo para o que interrompe o
   trabalho. Isto aqui e para o que so acompanha: "10 campos preenchidos",
   "este CNPJ ja e cliente". Numa tela com quinze campos, cada aviso em caixa
   compete com o proximo campo pela atencao, e a tela vira uma sequencia de
   alarmes.

   A COR CARREGA a diferenca entre os tons, e nao a moldura. */
.frm-nota {
  display: block;
  margin-top: 5px;
  font-size: var(--txt-micro);
  line-height: 1.5;
  color: var(--tinta-fraca);
}
.frm-nota.e-ok { color: var(--ok); }
.frm-nota.e-erro { color: var(--alerta); font-weight: 600; }