/* © 2026 Jose Carvalho. Intel Ceasa. Ver LICENSE. */
/* ============================================================
   As quatro telas do permissionário — Chamados, Vistorias, Comunicados e Pesquisa
   (assets/js/telas/{chamados,vistorias,comunicados,pesquisa}.js, com o kit em telas/cadastro.js).
   Arquivo próprio, e TODA regra daqui começa com `.cad`. Não é capricho: regra de tela que vaza
   para a camada compartilhada (`telas.css`, `componentes.css`) é o defeito que outra sessão está
   limpando neste exato momento. Se um seletor daqui não começar com `.cad`, ele está no arquivo
   errado.
   Cor, fonte, raio, sombra e curva de movimento: SEMPRE de `tokens.css`. Nenhuma COR em hex aqui.

   POR QUE ESTE ARQUIVO É PEQUENO, e isso é o ponto: quase tudo o que estas quatro telas desenham
   já existe no painel — `cartao`, `tabela`, `selo`, `botao`, `indicador` e a janela de detalhe
   (`abrirFicha`) vêm de assets/js/ui.js e são estilados por `componentes.css`. O que faltava era
   só o formulário, o estado vazio e três larguras de leitura. Escrever CSS novo para o que já
   tinha classe pronta é como uma tela passa a divergir das outras 37 sem ninguém decidir isso.
   ============================================================ */

/* ---------- a fileira de botões do topo (e a do pé da janela de detalhe) ---------- */
.cad-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}
/* no PÉ da janela de detalhe o `margin-bottom` de 16 px viraria um vão morto contra a borda de
   baixo da janela: ali a fileira é a última coisa. */
.ficha-pe .cad-acoes {
  margin-bottom: 0;
}

/* ---------- o formulário de quem escreve ---------- */
.cad-form {
  display: grid;
  gap: 12px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--sombra-sm);
}
/* DUAS COLUNAS SÓ QUANDO CABEM, e o `cad-largo` atravessa as duas. Abaixo de 760 px tudo empilha
   sozinho, sem uma segunda regra dizendo isso — a grade de uma coluna é o padrão. */
@media (min-width: 760px) {
  .cad-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cad-form .cad-largo {
    grid-column: 1 / -1;
  }
}
/* `align-self: start` é o que impede o eco da data de deformar o campo AO LADO: sem ele o rótulo é
   item de grade e estica para a altura da linha inteira, então digitar numa data faz o vizinho de
   linha crescer junto. O mesmo defeito já foi medido e consertado em `.proj-form label`. */
.cad-form label {
  display: grid;
  gap: 4px;
  align-self: start;
  font-weight: 500;
  min-width: 0;
}
.cad-form .cad-dica {
  font-weight: 400;
  color: var(--muted-foreground);
  font-size: 13px;
}
.cad-form input,
.cad-form select,
.cad-form textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--input);
  border-radius: var(--radius-sm);
  background: var(--background);
  color: var(--foreground);
  font-family: inherit;
  /* 16px NO DEDO não é gosto, é mecânica do iPhone: o Safari do iOS dá zoom sozinho na página
     quando o dedo toca um campo com fonte menor que 16 px, e NÃO desfaz o zoom depois, e o painel
     fica torto. Quem garante os 16 px no dedo é a regra compartilhada de `componentes.css`, com um
     seletor mais pesado desde a r38: até ali esta linha, com dois pontos de especificidade, GANHAVA
     dela e os campos deste formulário ficavam com 14 px no celular (medido em 27/09/2026). Aqui fica
     só o tamanho do computador, herdado do corpo da página. */
  font-size: inherit;
}
.cad-form textarea {
  resize: vertical;
  min-height: 88px;
}
/* a caixa de marcar é o único campo em que o rótulo fica AO LADO e não em cima: a caixa é pequena
   e o texto é a área de clique dela. */
.cad-form .cad-marcar {
  display: flex;
  align-items: center;
  gap: 8px;
  align-self: center;
  font-weight: 500;
}
.cad-form .cad-marcar input {
  width: 18px;
  height: 18px;
  padding: 0;
  flex: none;
}
.cad-erro {
  color: var(--perigo);
  background: var(--perigo-fundo);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
/* o eco por extenso da data. `:not(:empty)` para o vão não existir quando o campo está vazio —
   caixa vazia reservando altura empurra o formulário inteiro sem motivo. */
.cad-eco-data:not(:empty) {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted-foreground);
}

/* ---------- o estado vazio: o que a tela mostra ENQUANTO ninguém cadastrou nada ----------
   Não diz "em implantação" e nunca vai dizer: essa frase é justamente a que faz o dono achar que o
   sistema está pela metade. Diz o que É — a lista está vazia — e como se sai disso. */
.cad-vazio {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 6px;
  padding: 48px 24px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--muted);
}
.cad-vazio svg {
  width: 32px;
  height: 32px;
  color: var(--muted-foreground);
}
.cad-vazio h3 {
  font-size: 18px;
  font-weight: 700;
}
.cad-vazio p {
  color: var(--muted-foreground);
  max-width: 52ch;
}
.cad-vazio-como {
  font-weight: 500;
}

/* ---------- larguras de leitura e recados ----------
   Linha muito comprida cansa e faz o olho perder a volta: 62 caracteres é a mesma medida que o
   resto do painel usa (ver `.proj-medida`). */
.cad-medida {
  max-width: 62ch;
}
.cad-medida + .cad-medida {
  margin-top: 10px;
}
/* a frase crua que o servidor devolveu: visível porque é o único fio de quem vai consertar, mas
   recuada e em monoespaçada, para ler como "recado de máquina" e não como instrução ao dono. */
.cad-recado {
  font-family: var(--fonte-mono, ui-monospace, monospace);
  font-size: 13px;
  color: var(--muted-foreground);
  padding: 8px 12px;
  border-left: 2px solid var(--border);
  background: var(--muted);
  border-radius: var(--radius-sm);
  overflow-wrap: anywhere;
}
/* UMA FRASE POR LINHA NO PÉ DO CARTÃO, e isto foi medido num navegador em 15/09/2026: o
   `.cartao-pe` compartilhado é `display: flex` com `space-between`, então três frases curtas ficam
   lado a lado. As destas telas não são curtas — são três AFIRMAÇÕES DIFERENTES ("só aparece o que
   alguém digitou", "o painel não envia", "não vem do Sankhya"), e emendadas na mesma linha elas se
   leem como um parágrafo só, em que a segunda parece continuar a primeira. `flex-basis: 100%` faz
   cada uma ocupar a fileira inteira sem tocar na regra compartilhada.
   `text-wrap: pretty` evita a linha final com uma palavra sozinha — a mesma correção de viúva que
   projetos.css já usa, e a única que se sustenta em texto que reflui. */
.cad-rodape {
  flex: 1 1 100%;
  color: var(--muted-foreground);
  text-wrap: pretty;
}

/* ---------- a janela de detalhe: o texto inteiro do que foi escrito ----------
   `pre-wrap` porque o aviso e a resposta guardam as quebras de linha que a pessoa digitou — e as
   alternativas de uma pesquisa são UMA POR LINHA. Sem isto o navegador junta tudo num parágrafo só
   e três alternativas viram uma frase sem sentido. */
.cad-texto {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 62ch;
}
.cad-texto + .cad-texto {
  margin-top: 10px;
}
/* a lista de fatos da janela de detalhe: rótulo curto na esquerda, valor na direita. Mesma forma
   de `.proj-fatos`, com a mesma coluna de 96 px — rótulo que não couber nela VAZA POR CIMA do
   próprio valor, e foi assim que "Quem mexeu por último" virou "Quem mexeu" em Projetos. */
.cad-fatos {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 4px 12px;
  margin-top: 12px;
}
.cad-fatos dt {
  color: var(--muted-foreground);
  font-size: 13px;
}
.cad-fatos dd {
  margin: 0;
  overflow-wrap: anywhere;
}
/* campo que o dono precisa ver VAZIO (o "o que encontrou" de uma vistoria com pendência, por
   exemplo) sai em cinza dizendo que ninguém escreveu — não pode simplesmente sumir da lista. */
.cad-fatos dd.cad-sem {
  color: var(--muted-foreground);
  font-style: italic;
}

/* ---------- o cartão de alcance da tela de Pesquisa ----------
   Ele aparece ANTES de o dono montar qualquer coisa, e não depois de ele escrever a pergunta
   inteira: saber que mais da metade do entreposto não é alcançável muda a pergunta que ele faz.
   Borda de alerta e não de perigo: não é erro, é limite. */
.cad-alcance {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--alerta);
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  background: var(--alerta-fundo);
}
/* r81 (03/10/2026): no escuro o aviso de alcance leva o grafite do painel, com a borda e o texto em ambar. Com o ambar de
   fundo ele virava um bloco marrom grande no celular (a regra `croma` da auditoria de tela so aceita o tom de assunto
   em bloco pequeno). No claro nada mudou. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .cad-alcance {
    background: var(--superficie-2);
  }
}
:root[data-tema="escuro"] .cad-alcance {
  background: var(--superficie-2);
}
.cad-alcance svg {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  color: var(--alerta);
}
.cad-alcance p {
  max-width: 68ch;
}
.cad-alcance .cad-alcance-conta {
  display: block;
  margin-top: 4px;
  font-weight: 600;
}