/* ============================================================================
   coleta.css — o coletor: colar um link e ver o que ele achou, e por onde.
   Uma coluna, na mesma casca da caixa (base.css). Sem herança.
   ========================================================================= */

.folha { max-width: 980px; margin: 0 auto; padding: 22px 16px 80px; }

.cartao-colar {
  background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-g);
  box-shadow: var(--sombra); padding: 22px 22px 20px; margin: 0 0 22px;
}
.cartao-colar h1 { font-size: 24px; margin: 0 0 6px; }
.cartao-colar .explica { color: var(--tinta-2); margin: 0 0 16px; }
.linha-colar { display: flex; gap: 10px; flex-wrap: wrap; }
.linha-colar .campo { flex: 1 1 320px; width: auto; font-family: var(--mono); }
.opcional { display: block; margin: 14px 0 6px; color: var(--tinta-2); }
.opcional small { color: var(--tinta-3); }
.campo.pequeno { width: 300px; max-width: 100%; font-family: var(--mono); }

.resultado { margin: 0 0 22px; }
.uma-frase { font-size: 20px; font-weight: 600; color: var(--tinta); margin: 0 0 14px; }

.escada { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.degrau {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid var(--borda); background: var(--branco); color: var(--tinta-2);
}
.degrau b { color: var(--tinta); }
.degrau.respondeu { border-color: var(--azul); background: var(--azul-fundo); }
.degrau .quanto { color: var(--tinta-3); font-variant-numeric: tabular-nums; }

.placar-coleta { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: 0 0 22px; }
.placar-coleta .cartao { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 12px 14px; }
.placar-coleta .n { display: block; font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--azul); font-variant-numeric: tabular-nums; }
.placar-coleta .rot { color: var(--tinta-2); }
.placar-coleta .cartao.atencao .n { color: var(--ambar); }

.bloco { margin: 0 0 26px; }
.bloco h2 { font-size: 20px; margin: 0 0 4px; }
.bloco .explica { color: var(--tinta-2); margin: 0 0 12px; }
.bloco.alerta h2 { color: var(--vermelho); }
.bloco.alerta ul { margin: 0; padding-left: 22px; }
.bloco.alerta li { line-height: 1.6; margin-bottom: 8px; }
.bloco.alerta li .onde { color: var(--tinta-3); font-family: var(--mono); }

.tabela-caixa { overflow-x: auto; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); }
.tabela-emp { width: 100%; border-collapse: collapse; }
.tabela-emp th, .tabela-emp td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: top; }
.tabela-emp th { color: var(--tinta-3); font-weight: 600; background: var(--fundo); }
.tabela-emp td .valor { cursor: pointer; border-bottom: 1px dotted var(--borda-2); }
.tabela-emp td .valor:hover { background: var(--ambar-fundo); }
.tabela-emp .via { color: var(--tinta-3); }
.linha-procedencia td { background: var(--fundo); color: var(--tinta-2); line-height: 1.6; }
.linha-procedencia .campo-nome { font-weight: 700; color: var(--azul); }
.linha-procedencia .discorda { color: var(--vermelho); }

.caixa-confirmar { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio-g); padding: 18px 20px; }
.caixa-confirmar .explica { margin: 10px 0 0; color: var(--tinta-2); }

.grafo .passos-grafo { display: flex; flex-wrap: wrap; gap: 8px; }
.no-grafo { flex: 1 1 150px; min-width: 150px; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 10px 12px; }
.no-grafo .rot { font-weight: 700; display: block; margin-bottom: 2px; }
.no-grafo .txt { color: var(--tinta-2); }
.no-grafo.controle { border-color: var(--ambar-borda); background: #fffbeb; }
.no-grafo.saida { border-color: #22c55e; }

.linha-coletor { display: flex; flex-wrap: wrap; gap: 12px; align-items: baseline; padding: 10px 0; border-bottom: 1px solid var(--borda); }
.linha-coletor .quem { font-family: var(--mono); color: var(--azul); font-weight: 600; }
.linha-coletor .conta { color: var(--tinta-2); }

@media (max-width: 720px) {
  .cartao-colar { padding: 16px; }
  .campo.pequeno { width: 100%; }
}