/* =========================================================================
   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; }
}

/* ========================== 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); }
}