/* ========================= REVISÃO DE CALLS, RODADA 1 (public/juiz.js — SPEC-JUIZ-R1, 02/10/2026) =========================
   Só as variáveis de tema que já existem (claro e escuro de graça). A janela do próximo passo é a da casa (.jc-*, styles.css,
   e a folha do celular em mobile/20-folha.css). ⚠️ OS NÚMEROS DA CONVERSA NÃO TÊM COR DE "BOM/RUIM" (a SPEC): cinza e texto.
   Nenhuma largura fixa acima dos 343 px úteis do celular mais estreito; a tabela da saúde rola DENTRO do quadro dela (a
   página não ganha rolagem lateral). A peça do celular fica AQUI, com a MESMA condição da camada mobile (mobile.js, MQ). */

/* a janela: as três opções, e o campo de cada uma logo abaixo dela */
.jz-opcoes{display:flex;flex-direction:column;gap:4px}
.jz-opcao{padding:6px 0}
.jz-extra{padding:0 0 4px 26px}
.jz-extra[hidden]{display:none}
.jz-extra .jc-campo{max-width:260px}

/* (SPEC-DATA-DA-CALL) o bloco "Quando foi a call?" no topo da janela do "📞 Call realizada": a lista curta, a escolhida já marcada */
.jz-quando{border:1px solid var(--border);border-radius:11px;background:var(--surface-2);padding:8px 12px 6px;margin:0 0 12px;min-width:0}
.jz-quando-tit{font-weight:800;font-size:13.5px;padding:0 4px;margin-bottom:2px}
fieldset.jz-quando legend.jz-quando-tit{float:none;width:auto}
.jz-quando .jz-opcao{padding:5px 0;overflow-wrap:anywhere}
.jz-quando-carregando{font-size:12.5px;padding:4px 0 6px}
/* (conferência, T5c) o lead que entrou hoje: a linha que explica por que não há "Outro dia" */
.jz-quando-nota{font-size:12.5px;padding:4px 0 6px}
/* (conferência, T4) a data da call escolhida, numa linha, no PÉ da janela — só no celular (no computador o "Vai acontecer:" está à vista) */
.jz-pe-quando{display:none;flex:1 1 100%;font-size:13.5px;line-height:1.35;overflow-wrap:anywhere}

/* a ficha: o próximo passo e o tipo de entrada */
.jz-passo{margin-top:8px;display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.45}
.jz-passo-ok{overflow-wrap:anywhere}
.jz-pendente{border-radius:10px;background:var(--amber-soft);border:1px solid var(--amber);padding:8px 10px;overflow-wrap:anywhere}
.jz-pendente .chip-btn{margin-top:4px}
.jz-tipo{margin-top:8px;border:1px solid var(--border);border-radius:11px;background:var(--surface-2);padding:9px 11px;display:flex;flex-direction:column;gap:4px;font-size:12.5px;line-height:1.45}
.jz-tipo-tit{font-weight:700}
.jz-tipo-linha{overflow-wrap:anywhere}
.jz-rot{color:var(--muted);font-weight:600}
.jz-st{font-weight:600}
.jz-decisao{display:flex;flex-direction:column;gap:4px;font-weight:600;margin-top:4px}
.jz-decisao .jc-campo{max-width:220px;font-weight:500}

/* os números da conversa (em cada call de "🎙️ Calls gravadas") — neutros */
.jz-numeros{margin-top:6px;border-top:1px dashed var(--border);padding-top:6px;font-size:12px;color:var(--text)}
.jz-num-tit{font-weight:700;margin-bottom:2px}
.jz-num{display:flex;flex-wrap:wrap;gap:4px 12px;color:var(--muted)}
.jz-num b{color:var(--text)}

/* a saúde das gravações (no #drawer) */
.jz-explica{margin:0;font-size:12px;line-height:1.5}
.jz-vend{border:1px solid var(--border);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;min-width:0}
.jz-vend + .jz-vend{margin-top:12px}
.jz-vend-tit{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:14px}
.jz-tabela-wrap{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}
/* ⚠️ DESFAZ o `thead th` e o `tbody tr` globais de styles.css (o sticky a 60 px da lista de leads, o cursor de linha
   clicável, o hover): aqui a tabela é pequena, dentro da folha, e quem é clicável é o NÚMERO, não a linha */
.jz-tabela{border-collapse:collapse;width:100%;font-size:12.5px;font-variant-numeric:tabular-nums}
.jz-tabela th,.jz-tabela td{padding:4px 4px;text-align:center;border-bottom:1px solid var(--border);white-space:nowrap}
.jz-tabela thead th{position:static;top:auto;z-index:auto;background:transparent;cursor:default;user-select:auto;
  font-size:11px;font-weight:700;color:var(--muted);text-transform:none;letter-spacing:0;padding:4px 6px}
.jz-tabela tbody td{padding:4px 6px;font-size:12.5px}
.jz-tabela tbody tr{cursor:default}
.jz-tabela tbody tr:hover{background:transparent}
.jz-tabela tbody tr:last-child td{border-bottom:1px solid var(--border)}
.jz-tabela tbody th{text-align:left;font-weight:600}
.jz-tabela tr.jz-total th,.jz-tabela tr.jz-total td{font-weight:800;background:var(--surface-2)}
.jz-n{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:7px;padding:1px 6px;font:inherit;font-weight:700;cursor:pointer;min-width:26px}
.jz-n:hover{border-color:var(--accent)}
.jz-zero{color:var(--muted-2)}
.jz-motivos{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px}
.jz-passo-pct{font-size:12px}
.jz-detalhe{border-top:1px dashed var(--border);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.jz-detalhe[hidden]{display:none}
.jz-det-tit{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px}

/* o 🔔: a linha da call feita sem próximo passo usa a .ag-aviso da casa */

@media (max-width:780px), (max-height:520px) and (pointer:coarse){
  .jz-extra{padding-left:30px}
  .jz-quando .jz-opcao{min-height:var(--m-tap)}
  .jz-quando{padding:6px 10px 4px}
  .jz-pe-quando{display:block}
  .jz-extra .jc-campo{max-width:100%}
  .jz-decisao .jc-campo{max-width:100%;font-size:16px;min-height:var(--m-tap)}
  .jz-pendente .chip-btn,.jz-passo-ok .chip-btn{min-height:var(--m-tap)}
  .jz-motivos .chip-btn,.jz-det-tit .chip-btn,.jz-call .chip-btn{min-height:var(--m-tap)}
  /* (revisão da R1, as capturas de 390 px) AS OITO COLUNAS CABEM na folha do celular (~330 px úteis): antes, "Não aval." saía
     cortada e o "Passo" escondido, à direita, sem nada dizendo que a tabela rolava. Cabeçalho em duas linhas, células sem folga,
     o número com 32 px de largura e os 36 px de altura do toque */
  .jz-tabela{font-size:12px}
  .jz-tabela th,.jz-tabela td{padding:3px 1px}
  .jz-tabela thead th{white-space:normal;font-size:10.5px;line-height:1.15;padding:3px 1px;vertical-align:bottom}
  .jz-tabela tbody th{white-space:normal;line-height:1.2;padding-right:4px}
  .jz-tabela tbody td{padding:3px 1px}
  .jz-n{min-height:36px;min-width:32px;padding:1px 4px}
}