/* ==========================================================================
   SGP — Design System · Camada 22: o painel de MIGRAÇÃO (frente AD2)
   ==========================================================================

   Backoffice é ferramenta de trabalho, não vitrine. Quem abre estas telas está
   procurando um gabinete quebrado no meio de dezenas, e as três decisões de
   desenho saem daí:

   1. DENSIDADE ALTA. Linha compacta, número alinhado à direita, nada de cartão
      gigante com um número no meio. A conferência tem 21 domínios e eles têm de
      caber na tela sem rolagem infinita — porque a pergunta ("bate?") só se
      responde vendo os 21 juntos.

   2. ESTADO EM FORMA, NÃO SÓ EM COR. Todo selo daqui carrega ícone + palavra +
      cor. Uma tabela onde tudo é colorido não comunica nada por cor, e quem não
      distingue verde de vermelho não pode depender dela para saber se pode
      virar a chave de um mandato.

   3. AUSÊNCIA É INFORMAÇÃO. "Nunca conferida" e "nunca rodou" ocupam espaço na
      tela de propósito. O estado vazio silencioso é como a migração parada há
      três semanas passa despercebida.

   Nada aqui redefine componente existente: `.cartao`, `.tabela`, `.etiqueta`,
   `.indicador` e `.barra-progresso` vêm da camada 03 como estão.
   ========================================================================== */

/* ── Fonte do legado (a faixa de disponibilidade) ─────────────────────────── */
.fonte-do-legado__nota { margin-top: var(--esp-2); font-size: var(--texto-sm); }

/* ── Lista de gabinetes ───────────────────────────────────────────────────── */
.tabela-migracoes__sub {
  display: block;
  margin-top: var(--esp-1);
  font-size: var(--texto-xs);
}

.selo-migracao { display: inline-flex; align-items: center; gap: var(--esp-1); }

/* A TRILHA COMPACTA: treze tracinhos, um por rotina, na ordem em que rodam.
   É um sparkline de progresso — dá para varrer a coluna inteira com o olho e
   ver quais gabinetes pararam no meio, o que uma barra de porcentagem esconde
   (30% pode ser "as três primeiras" ou "três espalhadas"). */
.trilha-compacta { display: flex; gap: 2px; align-items: center; }

.trilha-compacta__passo {
  width: 8px;
  height: 14px;
  border-radius: var(--raio-xs);
  background: var(--cor-borda);
}

.trilha-compacta__passo--feito { background: var(--sgp-sucesso); }

/* ── O cabeçalho de estado da ficha ───────────────────────────────────────── */
.migracao-estado__corpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--esp-5);
}

.migracao-estado__selo { margin: var(--esp-2) 0; }
.migracao-estado__de { font-size: var(--texto-lg); color: var(--cor-texto-fraco); }
.migracao-estado__texto { display: block; margin-top: var(--esp-2); font-weight: var(--peso-semi); }

.migracao-ajustes .campo__ajuda code { font-family: var(--fonte-mono); font-size: var(--texto-xs); }

/* ── A rodada em curso ────────────────────────────────────────────────────── */
.rodada-em-curso {
  padding: var(--esp-4);
  margin-bottom: var(--esp-5);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
}

.rodada-em-curso__topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--esp-3);
  margin-bottom: var(--esp-3);
}

.rodada-em-curso__nota { margin-top: var(--esp-2); font-size: var(--texto-xs); }

/* ── A trilha de rotinas ──────────────────────────────────────────────────── */
.trilha-rotinas { display: flex; flex-direction: column; gap: var(--esp-2); }

.rotina {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: start;
  gap: var(--esp-3);
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  cursor: pointer;
  transition: border-color var(--transicao-rapida), background var(--transicao-rapida);
}

.rotina:hover { border-color: var(--cor-borda-forte); background: var(--cor-fundo-sutil); }

/* A rotina que JÁ RODOU não é "desligada": ela continua marcável, porque o ETL
   é idempotente e repetir é o conserto padrão de quase toda pendência. O que a
   faixa verde diz é "isto já passou por aqui", não "não mexa". */
.rotina--feita { border-left: 3px solid var(--sgp-sucesso); }
.rotina--falhou { border-left: 3px solid var(--sgp-perigo); background: var(--sgp-perigo-suave); }

.rotina__marca { margin-top: 2px; }

.rotina__ordem {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--raio-pilula);
  background: var(--cor-fundo-afundado);
  color: var(--cor-texto-fraco);
  font-size: var(--texto-xs);
  font-weight: var(--peso-semi);
}

.rotina__miolo { min-width: 0; }

.rotina__titulo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-2);
  font-weight: var(--peso-semi);
}

.rotina__descricao,
.rotina__resultado {
  display: block;
  margin-top: var(--esp-1);
  font-size: var(--texto-sm);
  color: var(--cor-texto-fraco);
  line-height: var(--altura-normal);
}

.rotina__resultado { font-family: var(--fonte-mono); font-size: var(--texto-xs); }

.trilha-rotinas__acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-4);
}

.trilha-rotinas__nota { font-size: var(--texto-xs); max-width: 46ch; }

/* ── A conferência ────────────────────────────────────────────────────────── */
.conferencia__cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--esp-4);
  flex-wrap: wrap;
}

.tabela-conferencia { font-size: var(--texto-sm); }
.tabela-conferencia td { vertical-align: top; }

.linha-conferencia--diverge { background: var(--sgp-perigo-suave); }

.linha-conferencia__porque {
  max-width: 52ch;
  font-size: var(--texto-xs);
  color: var(--cor-texto-fraco);
  line-height: var(--altura-normal);
}

.linha-conferencia__variacao { display: block; font-size: var(--texto-2xs); }

.numero-diferenca { font-family: var(--fonte-mono); font-weight: var(--peso-semi); }
.numero-diferenca--zero { color: var(--cor-texto-fraco); font-weight: var(--peso-normal); }
.numero-diferenca--falta { color: var(--sgp-perigo); }
.numero-diferenca--sobra { color: var(--sgp-atencao); }

/* ── As pendências ────────────────────────────────────────────────────────── */
/* A CAUSA RAIZ VEM ANTES DA LISTA. Quarenta e nove linhas iguais não são
   quarenta e nove problemas: são um. Estes cartões existem para que o operador
   leia UM parágrafo e saiba o que fazer, em vez de rolar a tabela até desistir. */
.pendencias-causas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--esp-3);
  margin-bottom: var(--esp-5);
}

.pendencia-causa {
  padding: var(--esp-4);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-md);
  background: var(--cor-fundo-sutil);
}

.pendencia-causa__topo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-bottom: var(--esp-2);
}

.pendencia-causa__acao {
  margin: 0;
  font-size: var(--texto-sm);
  color: var(--cor-texto-suave);
  line-height: var(--altura-normal);
}

.tabela-pendencias { font-size: var(--texto-sm); }
.tabela-pendencias td { vertical-align: top; }

.linha-pendencia__frase code {
  display: inline-block;
  max-width: 44ch;
  font-family: var(--fonte-mono);
  font-size: var(--texto-xs);
  word-break: break-word;
}

.linha-pendencia--fechada { opacity: 0.62; }

.linha-pendencia__decisao {
  display: flex;
  gap: var(--esp-2);
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
}

.linha-pendencia__aceite { display: flex; gap: var(--esp-2); align-items: center; }

.linha-pendencia__aceite .campo__controle { min-width: 0; width: 20ch; font-size: var(--texto-xs); }

/* ── Histórico de rodadas ─────────────────────────────────────────────────── */
.historico__contagens { font-family: var(--fonte-mono); font-size: var(--texto-xs); }
.historico__erro { display: block; margin-top: var(--esp-1); font-size: var(--texto-xs); }

@media (max-width: 900px) {
  .rotina { grid-template-columns: auto auto minmax(0, 1fr); }
  .linha-pendencia__aceite { flex-direction: column; }
  .linha-pendencia__aceite .campo__controle { width: 100%; }
}

.linha-conferencia__pista { display: block; margin-top: var(--esp-1); }

/* ==========================================================================
   O RECORTE — indicador que é link (e não enfeite)
   ==========================================================================
   O `.indicador` da camada 03 é um bloco de leitura. Aqui ele vira ALVO: cada
   número do topo abre as linhas que o produziram. Nada do componente é
   redefinido — o que entra é só o que um alvo precisa e um bloco de leitura
   não tem: cursor, foco visível, e a marca de qual recorte está ligado. */
.indicador--recorte {
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transicao-rapida), transform var(--transicao-rapida);
}

/* O sublinhado de link do `02_base` não serve num cartão: ele risca as três
   linhas do indicador de uma vez. Aqui quem responde ao passar do mouse é a
   BORDA — o cartão inteiro é o alvo, não a palavra. */
.indicador--recorte:hover,
.indicador--recorte:hover * { text-decoration: none; }
.indicador--recorte:hover { border-color: var(--sgp-ciano-500); color: inherit; }
.indicador--recorte:focus-visible { outline: 2px solid var(--sgp-ciano-500); outline-offset: 2px; }

/* O RECORTE LIGADO PRECISA SER VISÍVEL SEM COR: a barra lateral responde
   "qual está ligado?" para quem não distingue o realce cromático — e, numa
   faixa onde todo cartão já é colorido, responde melhor até para quem
   distingue. */
.indicador--ligado {
  border-color: var(--sgp-ciano-500);
  box-shadow: inset 3px 0 0 0 var(--sgp-ciano-500);
}

.indicador--enxuto { padding: var(--esp-3) var(--esp-4); }
.indicador--enxuto .indicador__valor { font-size: var(--texto-2xl); }
.indicador--enxuto .indicador__variacao { font-size: var(--texto-xs); }

/* ── A faixa da carteira ──────────────────────────────────────────────────── */
.faixa-carteira__corpo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-5);
  align-items: center;
  justify-content: space-between;
}

.faixa-carteira__titulo { flex: 1 1 26ch; min-width: 0; }

.faixa-carteira__numeros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--esp-3);
  flex: 2 1 34rem;
}

/* ── A ficha: o contrato deste gabinete ───────────────────────────────────── */
.cartao-contrato { border-left: 3px solid var(--cor-borda); }
.cartao-contrato--sucesso  { border-left-color: var(--sgp-sucesso); }
.cartao-contrato--atencao  { border-left-color: var(--sgp-atencao); }
.cartao-contrato--perigo   { border-left-color: var(--sgp-perigo); }
.cartao-contrato--info     { border-left-color: var(--sgp-info); }

.cartao-contrato__corpo { display: flex; flex-direction: column; gap: var(--esp-4); }

.cartao-contrato__veredito {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--esp-3);
}

.cartao-contrato__frase { font-weight: var(--peso-medio); }

/* OS DOIS LADOS, LADO A LADO. A pergunta é sempre comparativa ("bate?"), e
   comparação em duas linhas empilhadas obriga o olho a guardar a primeira. */
.cartao-contrato__lados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(28ch, 100%), 1fr));
  gap: var(--esp-4);
  margin: 0;
}

.cartao-contrato__lado dt {
  font-size: var(--texto-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: var(--peso-semi);
  color: var(--cor-texto-fraco);
  margin-bottom: var(--esp-1);
}

.cartao-contrato__lado dd { margin: 0; font-size: var(--texto-sm); }

.cartao-contrato__nota { font-size: var(--texto-xs); max-width: 84ch; }

.celula-contrato { min-width: 16ch; max-width: 26ch; }

/* O NOME DO GABINETE É A PORTA DA FICHA. Sublinha só no hover: numa coluna de
   23 nomes, 23 sublinhados permanentes viram ruído e o olho para de usar o
   sublinhado como sinal de "clicável" justamente onde ele precisaria. */
.tabela-migracoes__nome { color: inherit; text-decoration: none; }
.tabela-migracoes__nome:hover { color: var(--cor-acao); text-decoration: underline; }
.tabela-migracoes__nome:focus-visible { outline: 2px solid var(--sgp-ciano-500); outline-offset: 2px; }

/* O RECORTE LIGADO PRECISA VENCER O DESTAQUE. `.indicador--destaque` pinta o
   cartão inteiro com o gradiente da marca, e o `inset box-shadow` do ligado
   desaparece dentro dele — o cartão mais importante da faixa era justamente o
   que não conseguia dizer se estava ligado. O anel por FORA resolve nos dois
   fundos. */
.indicador--ligado.indicador--destaque {
  box-shadow: 0 0 0 3px var(--cor-fundo), 0 0 0 5px var(--sgp-ciano-500);
}