/* =========================================================================
   Sonar Fibra — Talkline
   Paleta petróleo/teal herdada do painel Fechamento (mesma família visual),
   mas layout próprio: esta tela é um instrumento de acompanhamento, não um
   dashboard. Sem CDN, sem fonte externa — o container não tem saída.
   Comentários em pt-BR com acentos.
   ========================================================================= */

:root {
  /* --- herdado do Fechamento Talkline --- */
  --fundo:        #0b2e34;
  --painel:       #114550;
  --painel-2:     #0f3d47;   /* faixa/cabeçalho de tabela, um degrau abaixo */
  --texto:        #F3F2EF;
  --dim:          #9fcdd7;
  --teal:         #1B606E;
  --teal-hover:   #247780;
  --ok:           #1E8C99;
  --neutro:       #25555d;
  --campo:        #0c3840;
  --linha:        rgba(159, 205, 215, 0.14);
  --linha-forte:  rgba(159, 205, 215, 0.26);

  /* --- vocabulário de estado desta ferramenta --- */
  --verde:        #4fd2c0;   /* vivo / gravada */
  --amarelo:      #e8c95a;   /* precisa de gente */
  --vermelho:     #e08585;   /* marca de falha (só preenchimento) */
  --vermelho-txt: #f0a8a8;   /* falha como TEXTO: 5.4:1 no painel */
  --muted:        #7fa9b3;   /* placeholder: 4.9:1 no campo */
  --foco:         #9fcdd7;

  --radius:    10px;
  --radius-sm: 7px;

  --fonte: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  /* voz de máquina: só para CÓDIGOS (CPF, ordem). Alinha a máscara do CPF e
     deixa comparar dígito a dígito. Não é estética de terminal. */
  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas,
          "Liberation Mono", monospace;

  /* escala z semântica */
  --z-sticky: 10;
  --z-toast:  30;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  background: var(--fundo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  color-scheme: dark;
}

[hidden] { display: none !important; }

:focus-visible {
  outline: 2px solid var(--foco);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================== CABEÇALHO ============================== */

.topo {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 20px clamp(16px, 3vw, 32px) 16px;
  border-bottom: 1px solid var(--linha);
}
.marca { display: inline-flex; align-items: center; gap: 7px; }
.marca-ico { display: block; }
.marca-nome {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.4px;
}
.topo-sep {
  width: 1px;
  height: 16px;
  background: var(--linha-forte);
  align-self: center;
}
.topo-titulo {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  color: var(--dim);
}
.topo-desc {
  flex: 1 1 340px;
  margin: 0 0 0 auto;
  font-size: 13px;
  color: var(--dim);
  text-align: right;
  max-width: 72ch;
}

/* ================================ TELA ================================ */

.tela {
  max-width: 1180px;
  margin: 0 auto;
  padding: 22px clamp(16px, 3vw, 32px) 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ============================= CONTROLES ============================== */

.controles {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.campo { display: flex; flex-direction: column; gap: 5px; }
.campo-rot {
  font-size: 12px;
  font-weight: 600;
  color: var(--dim);
}
.entrada {
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--radius-sm);
  color: var(--texto);
  font-family: inherit;
  font-size: 15px;
  padding: 10px 12px;
  transition: border-color 0.15s;
}
.entrada:hover:not(:disabled) { border-color: var(--dim); }
.entrada::placeholder { color: var(--muted); }
.entrada:disabled { opacity: 0.5; cursor: not-allowed; }

.btn {
  border: none;
  border-radius: var(--radius-sm);
  color: var(--texto);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-ok { background: var(--ok); }
.btn-ok:hover:not(:disabled) { background: #25a3b0; }
.btn-neutro { background: var(--neutro); }
.btn-neutro:hover:not(:disabled) { background: #2e565d; }

/* =============================== FAROL ================================
   Uma linha, sempre no mesmo lugar: o que a máquina está fazendo agora.
   A cor mora numa variável local (--luz) trocada por [data-estado]. */

.farol {
  --luz: var(--dim);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "luz titulo" "luz sub";
  align-items: center;
  column-gap: 12px;
  padding: 14px 18px;
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
}
/* Lâmpada, não controle: brilho difuso. Um anel sólido em volta do ponto
   parecia radio button desmarcado — afordância que esta tela não tem. */
.farol-luz {
  grid-area: luz;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--luz);
  box-shadow: 0 0 11px 1px color-mix(in srgb, var(--luz) 55%, transparent);
}
.farol-titulo {
  grid-area: titulo;
  margin: 0;
  font-size: 17px;
  font-weight: 600;
}
.farol-sub {
  grid-area: sub;
  margin: 0;
  font-size: 13.5px;
  color: var(--dim);
}
.farol-sub:empty { display: none; }

.farol[data-estado="preparando"],
.farol[data-estado="rodando"]        { --luz: var(--verde); }
.farol[data-estado="aguardando_2fa"] { --luz: var(--amarelo); }
.farol[data-estado="concluida"]      { --luz: var(--verde); }
.farol[data-estado="atencao"]        { --luz: var(--amarelo); }
.farol[data-estado="erro"]           { --luz: var(--vermelho); }

/* pulso = "estou viva". Se ele parar, alguma coisa travou. */
.farol[data-estado="preparando"] .farol-luz,
.farol[data-estado="rodando"] .farol-luz,
.farol[data-estado="aguardando_2fa"] .farol-luz {
  animation: bater 1.6s ease-in-out infinite;
}
.farol[data-estado="aguardando_2fa"] {
  border-color: color-mix(in srgb, var(--amarelo) 45%, transparent);
}

@keyframes bater {
  0%, 100% { box-shadow: 0 0 11px 1px color-mix(in srgb, var(--luz) 55%, transparent); }
  50%      { box-shadow: 0 0 22px 5px color-mix(in srgb, var(--luz) 22%, transparent); }
}

/* =============================== PAINEL =============================== */

.painel {
  background: var(--painel);
  border: 1px solid var(--linha);
  border-radius: var(--radius);
  padding: 16px 18px;
}
.painel-cabeca {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}
.painel-titulo {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.contagem {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.contagem-alerta { color: var(--amarelo); }

/* ============================= ANDAMENTO ==============================
   Compasso, não porcentagem: 1 marca = 1 CPF que o robô tem que procurar.
   Cada marca leva ~3 s, então dá para SENTIR se travou — coisa que uma
   barra contínua nunca conta. */

.andamento { display: flex; flex-direction: column; gap: 13px; }

.and-contador {
  margin: 0;
  font-size: 15px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}
.and-contador b {
  font-size: 30px;
  font-weight: 700;
  color: var(--texto);
  line-height: 1;
  margin-right: 2px;
}

/* As marcas ocupam a largura toda: um bloco de compassos parado no canto
   esquerdo lia como "quebrou", não como "12 unidades de trabalho". */
.trilha {
  display: flex;
  gap: 4px;
  min-height: 14px;
}
.passo {
  flex: 1 1 6px;
  min-width: 3px;
  height: 14px;
  border-radius: 3px;
  background: rgba(159, 205, 215, 0.16);
}
.passo-feito { background: var(--ok); }
.passo-atual {
  background: var(--verde);
  animation: pulsar 1.6s ease-in-out infinite;
}
@keyframes pulsar {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.34; }
}

/* muitos CPFs: marca individual viraria fiapo — vira barra contínua */
.trilha-solida {
  display: block;
  height: 14px;
  border-radius: 3px;
  background: rgba(159, 205, 215, 0.16);
  overflow: hidden;
}
.trilha-solida > i {
  display: block;
  height: 100%;
  background: var(--ok);
  transition: width 0.4s ease;
}

.and-cpf {
  margin: 0;
  font-size: 14px;
  color: var(--dim);
}
.and-cpf b {
  font-family: var(--mono);
  font-weight: 600;
  color: var(--texto);
  letter-spacing: 0.04em;
}

/* ================================ 2FA =================================
   Sem faixa lateral: borda inteira + fundo tingido. A run está PARADA
   esperando uma pessoa — é o único bloco que pode gritar. */

/* É o único bloco da tela que pode gritar: a run está PARADA esperando gente,
   e se ninguém vir, ela morre no timeout. Borda inteira + fundo tingido —
   faixa lateral colorida nunca. */
.bloco-otp {
  border: 2px solid color-mix(in srgb, var(--amarelo) 78%, transparent);
  background:
    linear-gradient(0deg, rgba(232, 201, 90, 0.13), rgba(232, 201, 90, 0.13)),
    var(--painel);
  box-shadow: 0 0 0 5px rgba(232, 201, 90, 0.07);
  animation: surgir 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes surgir {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.otp-titulo {
  margin: 0 0 5px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.otp-texto {
  margin: 0 0 15px;
  font-size: 14px;
  color: var(--texto);
  max-width: 68ch;
}
.otp-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
/* Sem placeholder: "000000" em mono 26px passava por conteúdo digitado. */
.entrada-otp {
  width: 11ch;
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-indent: 0.34em;   /* compensa o espaço que o tracking joga à direita */
  padding: 8px 12px;
  text-align: center;
  border-color: color-mix(in srgb, var(--amarelo) 45%, transparent);
}

/* =============================== ERRO ================================= */

.bloco-erro {
  border-color: color-mix(in srgb, var(--vermelho) 48%, transparent);
  background:
    linear-gradient(0deg, rgba(224, 133, 133, 0.07), rgba(224, 133, 133, 0.07)),
    var(--painel);
}
.erro-titulo { margin: 0 0 4px; font-size: 16px; font-weight: 600; }
.erro-texto {
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--vermelho-txt);
  word-break: break-word;
}

/* ============================== TABELAS =============================== */

.tab-wrap {
  border: 1px solid var(--linha);
  border-radius: var(--radius-sm);
  overflow: auto;
  max-height: 46vh;
}
.tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tab th {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background: var(--painel-2);
  text-align: left;
  padding: 9px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--dim);
  white-space: nowrap;
  border-bottom: 1px solid var(--linha-forte);
}
.tab td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--linha);
  vertical-align: top;
}
.tab tbody tr:last-child td { border-bottom: none; }
.tab tbody tr:hover td { background: rgba(159, 205, 215, 0.05); }

.mono {
  font-family: var(--mono);
  font-size: 12.5px;
  white-space: nowrap;
}
.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tab .larga { min-width: 26ch; }

/* candidatos de uma pendência ambígua: a informação para decidir na mão */
.cands { margin-top: 7px; }
.cands > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--dim);
}
.cand {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  padding: 5px 0 0;
  font-size: 12.5px;
  color: var(--dim);
}
.cand + .cand { border-top: 1px dashed var(--linha); margin-top: 5px; }
.cand b { font-family: var(--mono); font-weight: 600; color: var(--texto); }

/* ================================ LOG ==================================
   Diário da run: um marco por linha, mais recente embaixo, rolagem própria.
   Reaproveita .painel/.painel-cabeca/.painel-titulo — só a lista é nova. */

.log-lista {
  max-height: 32vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.55;
}
.log-linha {
  margin: 0;
  padding: 3px 6px;
  border-radius: 4px;
  color: var(--texto);
  white-space: pre-wrap;
  word-break: break-word;
}
.log-linha:hover { background: rgba(159, 205, 215, 0.05); }
.log-hora {
  color: var(--muted);
  margin-right: 8px;
}
.log-aviso { color: var(--amarelo); }
.log-erro  { color: var(--vermelho-txt); }

/* ============================ VAZIO / CARGA =========================== */

.vazio {
  padding: 26px 14px;
  text-align: center;
  color: var(--dim);
  font-size: 13.5px;
}
.vazio b {
  display: block;
  margin-bottom: 3px;
  color: var(--texto);
  font-size: 15px;
  font-weight: 600;
}

/* a ponte gravou menos linhas do que a run resolveu: nunca esconder */
.aviso-divergencia {
  margin: 0 0 10px;
  font-size: 12.5px;
  color: var(--amarelo);
}
.aviso-divergencia b { font-variant-numeric: tabular-nums; }

.resultado { display: flex; flex-direction: column; gap: 16px; }

/* =============================== TOAST ================================ */

.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: var(--z-toast);
  max-width: 80vw;
  padding: 12px 22px;
  background: var(--painel);
  border: 1px solid var(--linha-forte);
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-size: 14px;
}
.toast-erro {
  border-color: color-mix(in srgb, var(--vermelho) 55%, transparent);
  color: var(--vermelho-txt);
}

/* ============================ RESPONSIVO ============================== */

@media (max-width: 760px) {
  .topo-desc { text-align: left; margin-left: 0; }
  .controles > .campo { flex: 1 1 100%; }
  .controles .btn { flex: 1 1 auto; }
  .and-contador b { font-size: 26px; }
  .tab-wrap { max-height: none; }
  /* o peso do mês desce para a segunda linha: encostado à direita, sozinho
     numa linha, ele parecia pertencer ao mês de baixo */
  .mes-peso { margin-left: 0; }
  .periodo { justify-content: space-between; }
}

/* ========================== MOVIMENTO REDUZIDO ========================
   O pulso é informação ("está viva"), então some sem deixar buraco: a
   marca atual fica mais clara e com anel fixo. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .passo-atual {
    opacity: 1;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--verde) 45%, transparent);
  }
  .farol-luz { box-shadow: 0 0 0 4px color-mix(in srgb, var(--luz) 22%, transparent); }
}

/* ============================== PERÍODO ===============================
   Os dois campos moram dentro de UMA casca, com uma seta entre eles e o
   tamanho do período na ponta. É um controle, não duas linhas de formulário:
   a borda é da casca, não de cada campo, então o olho lê "de tal a tal" como
   uma coisa só. Um dia é o caso em que as duas datas são iguais — nada
   aparece nem some quando se passa de um dia para um mês. */

.periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 3px 4px;
  background: var(--campo);
  border: 1px solid var(--linha-forte);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s;
}
.periodo:hover { border-color: var(--dim); }
.periodo:focus-within { border-color: var(--foco); }

.entrada-data {
  background: none;
  border: none;
  padding: 7px 8px;
  font-variant-numeric: tabular-nums;
}

.periodo-seta {
  color: var(--muted);
  font-size: 14px;
  padding: 0 3px;
}

/* Os meses com trabalho, colados nos dois campos. É a MESMA pílula dos dias
   (mesma borda, mesmo anel de escolhido) de propósito: é o mesmo gesto, e um
   componente novo aqui faria a tela parecer dois produtos. Menor que a do dia
   porque mora dentro de um controle, não numa lista. */
.meses-rapido {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.mes-rapido {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--campo);
  color: var(--dim);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.mes-rapido:hover {
  border-color: var(--dim);
  background: var(--painel-2);
  color: var(--texto);
}
.mes-rapido:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

.mes-rapido-ativo {
  border-color: var(--dim);
  box-shadow: 0 0 0 1px var(--dim) inset;
  color: var(--texto);
}

.mes-rapido-n {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* O tamanho do período, sempre visível: é o que diz na cara que "01/07 a
   31/07" são 31 dias de venda, e não uma data digitada errado. */
.periodo-dias {
  margin: 0 3px 0 5px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--painel-2);
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* =============================== PESO =================================
   O preço da escolha, antes do clique. A barra mede a seleção contra TODA a
   pendência que existe — o mesmo preenchimento da trilha da run, de
   propósito: o que você escolheu e o que o robô já andou são a mesma
   substância, medida em dois momentos. */

/* A coluna de ESCOLHA é mais estreita que a de LEITURA: peso e lista de meses
   param aqui, as tabelas seguem usando a largura toda. Solto em 1180px, o mês
   ficava com o nome numa ponta e a contagem na outra, e o olho tinha que
   atravessar meio monitor para juntar as duas metades da mesma frase. */
.peso, .dias { max-width: 880px; }

.peso {
  display: grid;
  gap: 7px;
  margin: -8px 0 0;
  font-size: 13.5px;
  color: var(--dim);
}
.peso-barra {
  display: block;
  height: 4px;
  border-radius: 2px;
  background: rgba(159, 205, 215, 0.14);
  overflow: hidden;
}
.peso-barra > i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--ok);
  transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.peso-texto b {
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.peso-fatia { color: var(--muted); }
.peso-nota { font-size: 12.5px; color: var(--dim); }
/* a duração é o único número que muda de cor, e só quando passa de 5 minutos:
   é a diferença entre "espera aí" e "vai fazer outra coisa" */
.peso-longa .peso-tempo { color: var(--amarelo); }
.peso-ruim .peso-texto { color: var(--vermelho-txt); }

/* ---------------------------------------------------------------- dias
   A lista de trabalho, agrupada por mês. O número é o que o olho procura
   primeiro — quantas vendas faltam — então ele ganha a voz de máquina e o
   peso; a data fica em segundo plano. Chips em vez de <select> porque a
   contagem precisa aparecer junto, e porque um dia só some da lista quando é
   resolvido: a lista encurtando é o feedback de progresso.

   Lista, não cartões: cada mês é uma linha separada por um fio. Sete caixas
   com borda e sombra pesariam mais que os 130 dias que elas guardam. */
.dias { margin-bottom: 22px; }

.dias-cabeca { margin-bottom: 10px; }

.dias-titulo {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
  letter-spacing: 0.01em;
}

.dias-dica {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--muted);
  max-width: 74ch;
}

.meses { display: flex; flex-direction: column; }
.mes + .mes { border-top: 1px solid var(--linha); }

.mes-linha { display: flex; align-items: stretch; }

/* O cabeçalho do mês É o botão que pega o mês inteiro — não um rótulo com um
   botão pendurado do lado. Era o pedido: "do dia 01 ao 30", em um clique. */
.mes-pegar {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
  padding: 11px 12px;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--texto);
  font-family: inherit;
  font-size: 14.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease, box-shadow 0.12s ease;
}
.mes-pegar:hover { background: rgba(159, 205, 215, 0.05); }
.mes-nome { font-weight: 600; }
.mes-peso {
  margin-left: auto;
  color: var(--dim);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.mes-peso b {
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
}

/* mesmo vocabulário de "escolhido" do chip de dia: anel por dentro, e aqui
   também um fundo tingido com a cor de seleção — sem isso, clicar num mês e
   ver a lista igualzinha faz o clique parecer que não pegou */
.mes-pegar-ativo {
  background: color-mix(in srgb, var(--ok) 20%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ok) 60%, transparent) inset;
}
.mes-pegar-ativo:hover { background: color-mix(in srgb, var(--ok) 27%, transparent); }
.mes-pegar-ativo .mes-peso { color: var(--texto); }

.mes-abrir {
  flex: 0 0 auto;
  width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--dim);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.mes-abrir:hover { background: rgba(159, 205, 215, 0.06); color: var(--texto); }

/* seta desenhada com dois lados de uma caixa: sem ícone, sem fonte externa */
.mes-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform 0.16s cubic-bezier(0.22, 1, 0.36, 1);
}
.mes-abrir[aria-expanded="true"] .mes-chevron { transform: rotate(45deg); }

.mes-dias {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 2px 12px 14px;
}

.dia-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--linha-forte);
  border-radius: 999px;
  background: var(--campo);
  color: var(--texto);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.dia-chip:hover { border-color: var(--dim); background: var(--painel-2); }
.dia-chip:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* o escolhido não muda de cor de fundo (isso brigaria com o farol): ganha
   borda e um anel, que lê como "selecionado" sem virar mais um estado */
.dia-chip-ativo {
  border-color: var(--dim);
  box-shadow: 0 0 0 1px var(--dim) inset;
}

.dia-chip-data { color: var(--dim); }
.dia-chip-ativo .dia-chip-data { color: var(--texto); }

.dia-chip-n {
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
}

.dias-zerado {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  max-width: 74ch;
}

/* ============================ FILTRO DO LOG ===========================
   Uma run de intervalo escreve 200 linhas das quais 197 são rotina. O filtro
   só aparece quando há o que filtrar — a run de 3 CPFs continua sendo três
   linhas e nenhum controle a mais. */

.log-filtro {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--dim);
  cursor: pointer;
  user-select: none;
}
.log-filtro:hover { color: var(--texto); }
.log-filtro input {
  width: 14px;
  height: 14px;
  accent-color: var(--ok);
  cursor: pointer;
}

.contagem-erro { color: var(--vermelho-txt); }

/* o que falta, em minutos, ao lado do contador de CPFs */
.and-restante {
  margin-left: 8px;
  font-size: 13.5px;
  color: var(--muted);
}

/* ====================== ATIVAÇÃO E CONFLITO ===========================
   Quatro campos novos vieram do robô e nenhum virou coluna. Uma coluna
   cobra largura de TODAS as linhas para servir a poucas: "Ativação"
   ficaria vazia na maioria delas, e "Confere" diria CONFERE quatrocentas
   vezes seguidas. Os dois viram segunda linha da célula cujo sentido
   estendem — a ativação embaixo do Status, a divergência embaixo da
   Ordem — e só a divergência recebe cor, porque é a única das três
   respostas que manda alguém fazer alguma coisa. Nenhum token novo: o
   --amarelo já é o "precisa de gente" desta tela (farol, contagem,
   diário), e reusá-lo é o que faz a linha ser lida sem legenda. */

.linha-ativacao,
.linha-marcada,
.linha-fora,
.linha-empate,
.linha-cancelada {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.35;
  white-space: normal;
}
.linha-ativacao { color: var(--dim); }

/* mora dentro de uma célula .mono: o rótulo volta para a fonte de texto e
   só o número da outra ordem fica em voz de máquina, para dar para comparar
   dígito a dígito com o que está na linha de cima */
.linha-marcada {
  color: var(--amarelo);
  font-family: var(--fonte);
}
.linha-marcada b {
  margin-left: 5px;
  font-family: var(--mono);
  font-weight: 600;
  color: var(--texto);
  white-space: nowrap;
}

/* A distância deixou de recusar em 05/08: a regra grava a ordem da Talkline
   mais próxima da venda a qualquer distância, e "Dias" passa a poder trazer 11,
   26, 200 — que sozinhos leem como conta errada. A segunda linha diz que aquilo
   é esperado e de onde veio a confiança (`quantos_candidatos`, em app.js); o
   visual é um só para os dois níveis, porque o que a pessoa faz com a linha é o
   mesmo: nada. Mora dentro de uma célula .num, que é nowrap, tabular e alinhada
   à direita: desfaz as duas primeiras e mantém a terceira, para a frase ficar
   encostada no número que explica. Cor de leitura (--dim, a mesma da ativação),
   nunca o --amarelo: a ordem FOI gravada, e emprestar a cor da divergência
   apagaria a diferença entre "confira isto" e "está certo, só é longe". O teto
   de largura é o que impede uma frase de UMA linha de alargar a coluna Dias em
   todas as outras. */
.linha-fora {
  max-width: 17ch;
  margin-left: auto;
  color: var(--dim);
  font-family: var(--fonte);
  font-variant-numeric: normal;
}

/* Divide a célula .num com a de cima e é o contrário dela, de propósito. A
   distância virou rotina; ter havido DUAS ordens à mesma distância não é — até
   07/08 esse caso nem gravava, ia para a lista de baixo para uma pessoa
   escolher à mão. O --amarelo aqui é o mesmo "precisa de gente" da cancelada
   distante, e é ele que impede a linha decidida pelo robô de sair idêntica à de
   um CPF que só tinha uma ordem possível. Herda tudo o que a .num precisa
   desfazer, e não puxa banho de cor — DIVERGE continua sendo o único que pinta
   a linha inteira.

   19/08, achado da revisão final: até `textoSubstituiu` (app.js) reusar esta
   mesma classe, a frase daqui era sempre curta ("empate desfeito — ...") e o
   comentário dizia que ela não pedia teto de largura, ao contrário da
   `.linha-fora`. Deixou de ser verdade: "substitui a ordem cancelada
   1-1844495394546" embute um número de ordem de até 15 caracteres sem ponto
   de quebra, dentro da coluna estreita "Dias" — sem `max-width` ele alarga a
   coluna inteira, a mesma distorção que o `max-width: 17ch` da `.linha-fora`
   existe para impedir. Mesmo valor, mesmo motivo. */
.linha-empate {
  max-width: 17ch;
  margin-left: auto;
  color: var(--amarelo);
  font-family: var(--fonte);
  font-variant-numeric: normal;
}

/* O contrário da .linha-fora, e de propósito. Uma ordem cancelada é rotina e
   uma ordem distante virou rotina; as duas na MESMA linha não são — é uma ordem
   cancelada de julho gravada numa venda de agosto, e a leitura provável é que
   a ordem certa ainda não apareceu no portal. Aqui o --amarelo é honesto: junto
   com a .linha-empate, são as duas gravadas que pedem um par de olhos, e é o
   mesmo amarelo do farol, da contagem e do diário. Mora embaixo do Status
   (célula de texto comum, sem nada a desfazer) e não puxa banho de cor: DIVERGE
   continua sendo o único que pinta a linha inteira, porque só ele manda
   corrigir algo. */
.linha-cancelada { color: var(--amarelo); }

/* A linha inteira recebe um banho — nada de faixa lateral, que é decoração
   fingindo de hierarquia. Vem depois da regra de :hover de propósito: com a
   mesma especificidade, quem está escrito por último ganha, e um hover não
   pode apagar a única marca de exceção da tabela. */
.tab tbody tr.linha-conflito td {
  background: color-mix(in srgb, var(--amarelo) 13%, transparent);
}
.tab tbody tr.linha-conflito:hover td {
  background: color-mix(in srgb, var(--amarelo) 20%, transparent);
}

/* A tabela rola dentro de 46vh. Numa run de intervalo são centenas de linhas
   e a única divergente pode nascer trezentas linhas abaixo da dobra — o banho
   de cor não serve de nada se ele começa fora da tela. Daí a contagem subir
   para cima da tabela, com um botão que caminha até cada uma. */
.conflito-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 0 0 12px;
  padding: 10px 13px;
  border: 1px solid color-mix(in srgb, var(--amarelo) 40%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--amarelo) 9%, transparent);
  font-size: 12.5px;
  color: var(--texto);
}
.conflito-aviso b {
  color: var(--amarelo);
  font-variant-numeric: tabular-nums;
}

.conflito-ir {
  margin-left: auto;
  padding: 5px 13px;
  border: 1px solid color-mix(in srgb, var(--amarelo) 45%, transparent);
  border-radius: 999px;
  background: transparent;
  color: var(--amarelo);
  font-family: inherit;
  font-size: 12.5px;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.conflito-ir:hover {
  background: color-mix(in srgb, var(--amarelo) 18%, transparent);
  border-color: var(--amarelo);
  color: var(--texto);
}
.conflito-ir:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* A MESMA segunda linha da divergência, na cor de leitura: é o caso em que a
   busca por aquele número falhou e ninguém sabe se ele presta. O --amarelo
   desta tela significa "precisa de gente", e emprestá-lo aqui prometeria um
   defeito que o robô não chegou a ver — o oposto do que a linha diz. O número
   em si continua na cor de texto (regra de .linha-marcada b, acima): quem for
   conferir na mão precisa dele legível, é a única coisa aproveitável da linha. */
.linha-marcada-fraca { color: var(--dim); }