/* Elementos reutilizaveis: trilha, cards, pills de status, metricas. */

/* ---------- trilha de navegacao ---------- */
.trilha {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  flex-wrap: wrap;
  font-size: var(--txt-rotulo);
  color: var(--cor-texto-fraco);
}

.trilha-link {
  color: var(--cor-texto-fraco);
  text-decoration: none;
}

.trilha-link:hover {
  color: var(--cor-primaria);
  text-decoration: none;
}

.trilha-atual {
  color: var(--cor-titulo);
  font-weight: 600;
}

.trilha-sep {
  font-size: 14px;
  color: var(--cor-borda-forte);
}

/* ---------- cards ---------- */
.card {
  background: var(--cor-superficie);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-container);
  box-shadow: var(--sombra-1);
}

.card--interativo {
  transition: box-shadow 140ms ease, border-color 140ms ease;
}

.card--interativo:hover {
  box-shadow: var(--sombra-2);
  border-color: var(--cor-borda-forte);
}

.card-cabecalho {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-3);
  padding: var(--esp-4) var(--esp-5);
  border-bottom: 1px solid var(--cor-borda);
}

.card-icone {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--raio-container);
  background: var(--cor-primaria-tint);
  color: var(--cor-primaria);
}

.card-titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-titulo-p);
  font-weight: 600;
  color: var(--cor-titulo);
  line-height: 1.3;
}

.card-subtitulo {
  font-size: var(--txt-corpo-p);
  color: var(--cor-texto-fraco);
}

.card-corpo {
  padding: var(--esp-5);
}

.card-cabecalho + .card-corpo {
  padding-top: var(--esp-4);
}

/* ---------- pills de status ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  height: 22px;
  padding-inline: var(--esp-2);
  border-radius: var(--raio-pill);
  border: 1px solid transparent;
  font-size: var(--txt-rotulo-p);
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.pill-ponto {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.pill--sucesso {
  background: var(--cor-sucesso-tint);
  border-color: var(--cor-sucesso-borda);
  color: #047857;
}

.pill--sucesso .pill-ponto {
  background: var(--cor-sucesso);
  animation: pulsar 2s ease-in-out infinite;
}

.pill--alerta {
  background: var(--cor-alerta-tint);
  border-color: var(--cor-alerta-borda);
  color: #92400e;
}

.pill--erro {
  background: var(--cor-erro-tint);
  border-color: var(--cor-erro-borda);
  color: #b91c1c;
}

.pill--info {
  background: var(--cor-info-tint);
  border-color: var(--cor-info-borda);
  color: #1d4ed8;
}

.pill--neutro {
  background: var(--cor-superficie-baixa);
  border-color: var(--cor-borda);
  color: var(--cor-texto-fraco);
}

/* ---------- metricas ---------- */
.metrica {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-5);
}

.metrica-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
}

.metrica-rotulo {
  font-size: var(--txt-rotulo);
  font-weight: 500;
  color: var(--cor-texto-fraco);
}

.metrica-valor {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-display);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--cor-titulo);
  font-variant-numeric: tabular-nums slashed-zero;
}

.metrica-nota {
  font-size: var(--txt-rotulo);
  color: var(--cor-texto-fraco);
}

/* ---------- estado vazio ---------- */
.vazio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-2);
  padding: var(--esp-12) var(--esp-5);
  text-align: center;
  color: var(--cor-texto-fraco);
}

.vazio .icone {
  font-size: 40px;
  color: var(--cor-borda-forte);
}

.vazio-titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--txt-titulo-p);
  font-weight: 600;
  color: var(--cor-titulo);
}

/* ---------- lista de linhas (fila de trabalho) ---------- */
.linhas {
  display: flex;
  flex-direction: column;
}

.linha {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  min-height: var(--altura-linha-compacta);
  padding: var(--esp-2) var(--esp-5);
  border-top: 1px solid var(--cor-borda);
  font-size: var(--txt-corpo-p);
}

.linha:first-child {
  border-top: 0;
}

.linha:hover {
  background: var(--cor-superficie-baixa);
}

.linha-principal {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.linha-titulo {
  font-weight: 600;
  color: var(--cor-titulo);
}

.linha-meta {
  font-size: var(--txt-rotulo);
  color: var(--cor-texto-fraco);
}

/* ---------- etapas do fluxo (stepper vertical) ---------- */
.etapas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.etapa {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding-block: var(--esp-2);
  position: relative;
}

/* Conector entre os marcadores. */
.etapa:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: -4px;
  width: 2px;
  background: var(--cor-borda);
}

.etapa--concluida:not(:last-child)::before {
  background: var(--cor-sucesso);
}

.etapa-marca {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px solid var(--cor-borda);
  background: var(--cor-superficie);
  font-size: var(--txt-rotulo);
  font-weight: 700;
  color: var(--cor-texto-fraco);
  position: relative;
  z-index: 1;
}

.etapa-nome {
  font-size: var(--txt-corpo-p);
  color: var(--cor-texto-fraco);
}

.etapa--concluida .etapa-marca {
  background: var(--cor-sucesso);
  border-color: var(--cor-sucesso);
  color: #fff;
}

.etapa--concluida .etapa-nome {
  color: var(--cor-texto);
}

.etapa--ativa .etapa-marca {
  background: var(--cor-primaria);
  border-color: var(--cor-primaria);
  color: var(--cor-primaria-contraste);
  box-shadow: 0 0 0 4px var(--cor-primaria-tint);
}

.etapa--ativa .etapa-nome {
  color: var(--cor-titulo);
  font-weight: 600;
}

/* ---------- assinatura "powered by" ---------- */
/*
 * Aparece no rodape da navegacao lateral e no rodape da tela de login.
 * O logotipo e marca de terceiro: entra na cor original, sem recolorir.
 */
.powered {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
}

.powered-rotulo {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cor-texto-fraco);
  white-space: nowrap;
}

.powered-logo {
  display: block;
  width: auto;
  height: 18px;
}

/*
 * O roxo profundo do logotipo perde contraste sobre a superficie escura.
 * Como a marca de terceiro nao pode ser recolorida, ela ganha uma plaqueta
 * clara - a leitura fica correta nos dois temas.
 */
.wa-dark .powered-logo {
  padding: 3px var(--esp-2);
  border-radius: var(--raio-controle);
  background: #fff;
}