/* Componentes. Todo valor vem de tokens.css. */

/* -------------------------------- Card -------------------------------- */
.card {
  background: var(--cor-superficie-card);
  border-radius: var(--raio-lg);
  border: var(--borda-fina) solid var(--cor-borda);
  box-shadow: var(--sombra-card);
  padding: var(--esp-6);
}

.card__cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-3);
  margin-bottom: var(--esp-4);
}

.card__titulo {
  font-size: var(--texto-xl);
  font-weight: var(--peso-semi);
}

/* ------------------------------- Botao -------------------------------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-2);
  min-height: var(--altura-item-sidebar);
  padding: var(--esp-2) var(--esp-4);
  border: var(--borda-fina) solid transparent;
  border-radius: var(--raio-lg);
  background: var(--cor-superficie-app-botao);
  color: var(--cor-texto-forte);
  font-size: var(--texto-md);
  font-weight: var(--peso-medio);
  cursor: pointer;
  transition: filter var(--transicao-rapida);
}

.botao:hover:not(:disabled) { filter: brightness(0.98); }
.botao:disabled { opacity: 0.5; cursor: not-allowed; }

.botao--primario {
  background: var(--cor-acento-laranja);
  color: var(--cor-texto-invertido);
}

.botao--ambar {
  background: var(--cor-acento-ambar);
  color: var(--cor-superficie-app);
  border-radius: var(--raio-md);
  font-weight: var(--peso-semi);
}

.botao--contorno {
  background: var(--cor-superficie-card);
  color: var(--cor-texto-forte);
  border-color: var(--cor-borda-forte);
  border-radius: var(--raio-md);
}

.botao--texto {
  background: transparent;
  color: var(--cor-texto-link);
  padding-inline: var(--esp-2);
}

/* ------------------------------- Campo -------------------------------- */
.campo {
  display: flex;
  flex-direction: column;
  gap: var(--esp-1);
}

.campo__rotulo {
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-medio);
}

.campo__entrada {
  width: 100%;
  padding: var(--esp-2) var(--esp-3);
  border: var(--borda-fina) solid var(--cor-borda-forte);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie-card);
}

.campo__erro {
  font-size: var(--texto-sm);
  color: var(--cor-estado-erro);
}

.busca {
  width: 100%;
  min-height: var(--altura-item-sidebar);
  padding: var(--esp-2) var(--esp-4);
  border: var(--borda-fina) solid transparent;
  border-radius: var(--raio-lg);
  background: var(--cor-superficie-app-campo);
  color: var(--cor-texto-forte);
}

.busca::placeholder { color: var(--cor-texto-medio); }

/* ------------------------------- Tabela ------------------------------- */
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--texto-md);
}

.tabela th {
  text-align: start;
  font-size: var(--texto-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto-medio);
  padding: var(--esp-2) var(--esp-3);
  border-bottom: var(--borda-fina) solid var(--cor-borda);
  background: var(--cor-superficie-neutra);
}

.tabela td {
  padding: var(--esp-2) var(--esp-3);
  border-bottom: var(--borda-fina) solid var(--cor-borda);
  height: var(--altura-linha-tabela);
}

.tabela tbody tr:hover { background: var(--laranja-95); }

/* Rolagem horizontal sem estourar a pagina. */
.tabela-rolagem { overflow-x: auto; }

/* ------------------------- Etiqueta e estado -------------------------- */
.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  padding: var(--esp-1) var(--esp-2);
  border-radius: var(--raio-md);
  font-size: var(--texto-xs);
  font-weight: var(--peso-medio);
  background: var(--cor-superficie-neutra);
  color: var(--cor-texto-forte);
}

.etiqueta--sucesso { background: var(--cor-estado-sucesso-fundo); color: var(--cor-estado-sucesso); }
.etiqueta--alerta  { background: var(--cor-estado-alerta-fundo);  color: var(--cor-estado-alerta); }
.etiqueta--erro    { background: var(--cor-estado-erro-fundo);    color: var(--cor-estado-erro); }
.etiqueta--info    { background: var(--cor-estado-info-fundo);    color: var(--cor-estado-info); }

/* Alerta de pendencia de verificacao: amarelo, como manda a SPEC. */
.aviso-pendencia {
  display: flex;
  gap: var(--esp-2);
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-lg);
  border-inline-start: var(--esp-1) solid var(--cor-estado-alerta);
  background: var(--cor-estado-alerta-fundo);
  color: var(--cor-estado-alerta);
  font-size: var(--texto-sm);
}

/* ------------------------------ Timeline ------------------------------ */
.timeline { display: flex; flex-direction: column; gap: var(--esp-5); }

.timeline__fase {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
  color: var(--cor-texto-medio);
  text-transform: uppercase;
  letter-spacing: 0;
}

.timeline__itens {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.timeline__item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--esp-3);
  padding-block: var(--esp-3);
  position: relative;
}

/* Linha vertical entre os marcadores. */
.timeline__item:not(:last-child)::before {
  content: "";
  position: absolute;
  inset-block-start: var(--esp-8);
  inset-block-end: 0;
  inset-inline-start: var(--esp-3);
  width: var(--borda-fina);
  background: var(--cor-borda);
}

.timeline__marcador {
  width: var(--esp-6);
  height: var(--esp-6);
  border-radius: var(--raio-lg);
  border: var(--borda-media) solid var(--cor-borda-forte);
  background: var(--cor-superficie-card);
  display: grid;
  place-items: center;
  font-size: var(--texto-xs);
}

.timeline__item[data-status="em_andamento"] .timeline__marcador {
  border-color: var(--cor-estado-info);
  background: var(--cor-estado-info-fundo);
}

.timeline__item[data-status="concluido"] .timeline__marcador {
  border-color: var(--cor-estado-sucesso);
  background: var(--cor-estado-sucesso-fundo);
  color: var(--cor-estado-sucesso);
}

.timeline__item[data-status="atrasado"] .timeline__marcador {
  border-color: var(--cor-estado-erro);
  background: var(--cor-estado-erro-fundo);
  color: var(--cor-estado-erro);
}

.timeline__item[data-status="bloqueado"] .timeline__marcador {
  border-style: dashed;
  color: var(--cor-texto-mudo);
}

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

.timeline__meta {
  font-size: var(--texto-sm);
  color: var(--cor-texto-mudo);
}

.timeline__acoes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  margin-top: var(--esp-1);
}

/* ------------------------------- Modal -------------------------------- */
.modal {
  border: none;
  border-radius: var(--raio-lg);
  padding: var(--esp-6);
  max-width: 44rem;
  width: calc(100% - var(--esp-8));
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: var(--sombra-flutuante);
}

.modal > * + * { margin-top: var(--esp-4); }

/* Minuta gerada pela IA: texto longo, precisa quebrar e rolar. */
.minuta {
  max-height: 24rem;
  overflow: auto;
  padding: var(--esp-4);
  border-radius: var(--raio-md);
  background: var(--cor-superficie-neutra);
  font-family: var(--fonte-mono);
  font-size: var(--texto-sm);
  white-space: pre-wrap;
  word-break: break-word;
}

.modal::backdrop {
  background: var(--cor-backdrop);
}

/* ------------------------------- Toast -------------------------------- */
.toasts {
  position: fixed;
  inset-block-end: var(--esp-4);
  inset-inline-end: var(--esp-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.toast {
  padding: var(--esp-3) var(--esp-4);
  border-radius: var(--raio-md);
  background: var(--cor-superficie-app);
  color: var(--cor-texto-invertido);
  box-shadow: var(--sombra-flutuante);
  font-size: var(--texto-md);
}

.toast--sucesso { background: var(--cor-estado-sucesso); }
.toast--erro    { background: var(--cor-estado-erro); }

/* ------------------------------- Upload ------------------------------- */
.upload {
  display: grid;
  place-items: center;
  gap: var(--esp-2);
  padding: var(--esp-8);
  border: var(--borda-media) dashed var(--cor-borda-forte);
  border-radius: var(--raio-lg);
  background: var(--cor-superficie-card);
  text-align: center;
}

.upload[data-arrastando="true"] {
  border-color: var(--cor-borda-foco);
  background: var(--cor-estado-info-fundo);
}

/* ------------------------------- Vazio -------------------------------- */
.vazio {
  padding: var(--esp-8);
  text-align: center;
  color: var(--cor-texto-mudo);
}