/* PROTÓTIPO · Demandas de contrato. Estilos exclusivos do protótipo navegável,
   sobre os tokens do design system (nenhuma cor ou espaçamento cru).
   Some junto com o protótipo: apagar este arquivo e a linha do index.html. */

.pd-aviso, .pd-espera { margin-bottom: var(--space-6); }

/* Linha de demanda no card do contrato: nome, horas, prazo e etiqueta de status,
   separados por espaçamento e alinhamento, sem separadores gráficos.
   As três últimas colunas têm largura fixa de propósito: com largura automática,
   cada etiqueta de status (de "Em análise" a "Aguardando confirmação") empurrava
   as horas e a data para uma posição diferente em cada linha. */
.pd-linha-demanda {
  display: grid;
  grid-template-columns: auto 1fr 5rem 7rem 21rem;
  align-items: center;
  gap: var(--space-4);
}
.pd-demanda-nome { min-width: 0; overflow-wrap: anywhere; }
.pd-demanda-horas,
.pd-demanda-prazo {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.pd-demanda-horas,
.pd-demanda-prazo { text-align: right; }
.pd-demanda-etiqueta {
  justify-self: end;
  display: flex;
  justify-content: flex-end;
  min-width: 0;
}
.pd-demanda-etiqueta > * { max-width: 100%; white-space: nowrap; }

@media (max-width: 720px) {
  .pd-linha-demanda { grid-template-columns: auto 1fr auto; row-gap: var(--space-2); }
  .pd-demanda-nome { grid-column: 2 / -1; }
  .pd-demanda-horas, .pd-demanda-prazo { grid-column: 2; text-align: left; }
  .pd-demanda-etiqueta { grid-column: 3; grid-row: 2; }
}

/* Anexos e documentos */
.pd-linha-anexo {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: var(--space-3);
}
.pd-anexo-nome { min-width: 0; overflow-wrap: anywhere; color: var(--text-strong); }
.pd-anexo-meta {
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

/* Conversa colapsada: o cabeçalho é o botão que abre a thread. */
.pd-conversa-cabecalho {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--text-body);
  font: inherit;
}
.pd-conversa-cabecalho svg { color: var(--bni-red); flex-shrink: 0; }
.pd-conversa-titulo { font-weight: var(--weight-bold); color: var(--text-strong); }
.pd-conversa-dica {
  margin-left: auto;
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}
.pd-conversa-cabecalho:hover .pd-conversa-titulo { color: var(--bni-red); }

.pd-conversa-corpo {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.pd-mensagem {
  padding: var(--space-3) var(--space-4);
  background: var(--grey-50);
  border-left: var(--border-accent) solid var(--border-default);
}
.pd-mensagem-bni { background: var(--bni-red-tint); border-left-color: var(--bni-red); }
.pd-mensagem-topo {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
  flex-wrap: wrap;
}
.pd-mensagem-autor { font-weight: var(--weight-bold); color: var(--text-strong); }
.pd-mensagem-papel {
  font-size: var(--text-overline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
}
.pd-mensagem-data { margin-left: auto; font-size: var(--text-body-sm); color: var(--text-muted); }
/* pre-wrap preserva as quebras digitadas; overflow-wrap corta palavra longa
   sem espaço, que senão vaza da caixa e até da página. */
.pd-mensagem-texto {
  color: var(--text-body);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.pd-conversa-escrever {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  align-items: flex-start;
  padding-top: var(--space-3);
  border-top: var(--border-width) solid var(--border-subtle);
}
.pd-conversa-escrever .campo-cheio { width: 100%; }

/* Trilha de auditoria */
.pd-trilha { display: flex; flex-direction: column; }
.pd-trilha-item {
  display: grid;
  grid-template-columns: 10rem 1fr 1fr;
  gap: var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: var(--border-width) solid var(--border-subtle);
  font-size: var(--text-body-sm);
}
.pd-trilha-item:last-child { border-bottom: none; }
.pd-trilha-data { color: var(--text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pd-trilha-quem { color: var(--text-strong); }
.pd-trilha-papel {
  font-size: var(--text-overline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-muted);
  margin-left: var(--space-2);
}
.pd-trilha-mudanca { color: var(--text-body); display: flex; align-items: center; gap: var(--space-2); }
.pd-trilha-mudanca svg { color: var(--text-muted); }

@media (max-width: 900px) {
  .pd-trilha-item { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* Andaime do protótipo: visualmente separado, para nunca ser confundido com a
   interface de verdade da administração. */
.pd-simulacao {
  border: var(--border-width) dashed var(--border-default);
  padding: var(--space-5);
  background: var(--grey-50);
}
.pd-simulacao-rotulo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-overline);
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps-wide);
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.pd-simulacao .form-grade { margin-top: var(--space-4); }
.pd-simulacao-eco {
  margin-left: var(--space-3);
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

.pd-nota {
  margin: var(--space-3) 0 0;
  font-size: var(--text-body-sm);
  color: var(--text-muted);
}

/* Textarea do protótipo: sem alça de redimensionar, a altura acompanha o texto
   (o ajuste é feito no PdTextarea, em prototipo-demandas.jsx). */
.pd-textarea {
  resize: none;
  overflow: hidden;
  min-height: calc(var(--space-6) * 2);
}

/* Indicador de mensagens ainda não lidas, na thread colapsada. */
.pd-conversa-novas { margin-left: var(--space-2); }

/* Botões do andaime em linha, com espaço entre eles. */
.pd-simulacao-botoes { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }

/* Reforço de quebra onde o texto vem do usuário. A .detalhe-texto do app.css não
   tem overflow-wrap, e no protótipo a descrição da tarefa é digitada livremente. */
.pd-texto-longo { overflow-wrap: anywhere; }

/* O nome da demanda é digitado pelo usuário e vai para o título da página. Sem
   isto, uma palavra longa sem espaço vaza do heading e sai da página. Cobre os
   três níveis porque o componente do design system escolhe a tag. */
.pd-titulo h1,
.pd-titulo h2,
.pd-titulo h3 { overflow-wrap: anywhere; }

/* ===== Página principal: barra de exibição e filtros ===== */
.pd-barra {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-5);
  flex-wrap: wrap;
}
.pd-barra-contagem { margin: 0; }
.pd-barra > :last-child { margin-left: auto; }

.pd-filtros {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-4);
  /* Pelo topo: só o campo de contrato tem texto de ajuda, e com o alinhamento
     pelo fundo o campo de fornecedor descia, abrindo um vão acima dele. */
  align-items: start;
}
/* O botão de limpar só aparece quando há filtro escolhido, situação em que não
   há texto de ajuda, então alinhar pelo fundo o encosta na base dos campos. */
.pd-filtros-acao { align-self: end; }
/* Recorte afirmado em texto, na visão do fornecedor. A célula estica na altura
   da linha e o valor ocupa o espaço que sobra abaixo do rótulo, centralizado:
   assim o texto alinha com o campo vizinho sem depender da altura exata do
   Select, que vem de estilo inline do design system. */
.pd-filtros-fixo {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}
/* Mesmo tamanho e peso do rótulo que o Select do design system gera, para uma
   célula escrita à mão alinhar com uma célula de campo ao lado dela. */
.pd-rotulo-campo,
.pd-filtros-fixo-rotulo {
  font-size: var(--text-body-sm);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}
/* Maior e mais pesado que o texto dos campos, para afirmar o recorte em vez de
   parecer texto corrido da página. */
.pd-filtros-fixo-valor {
  flex: 1;
  display: flex;
  align-items: center;
  font-size: var(--text-body-lg);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
  overflow-wrap: anywhere;
}
@media (max-width: 900px) {
  .pd-filtros { grid-template-columns: 1fr; align-items: stretch; }
}

/* Segunda linha da lista, quando a demanda mostra fornecedor e contrato. */
.pd-demanda-nome { display: flex; flex-direction: column; gap: var(--space-1); }

/* ===== Kanban ===== */
.pd-kanban {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(17rem, 1fr);
  gap: var(--space-4);
  overflow-x: auto;
  padding-bottom: var(--space-3);
  align-items: start;
}
.pd-coluna {
  background: var(--grey-50);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  min-width: 0;
}
.pd-coluna-topo {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-subtle);
  border-top: var(--border-accent) solid var(--border-default);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  background: var(--surface-card);
}
.pd-coluna-titulo {
  font-size: var(--text-overline);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: var(--leading-snug);
}
.pd-coluna-contagem {
  margin-left: auto;
  font-size: var(--text-body-sm);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.pd-coluna-corpo {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  min-height: var(--space-9);
}
.pd-coluna-vazia { margin: 0; font-size: var(--text-caption); color: var(--text-muted); }

.pd-cartao {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--surface-card);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-sm);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
}
.pd-cartao:hover { border-color: var(--bni-red); }
.pd-cartao-nome {
  color: var(--text-strong);
  font-weight: var(--weight-medium);
  overflow-wrap: anywhere;
}
.pd-cartao:hover .pd-cartao-nome { color: var(--bni-red); }
.pd-cartao-origem,
.pd-cartao-dados {
  font-size: var(--text-caption);
  color: var(--text-muted);
  overflow-wrap: anywhere;
}
/* Borda lateral no lugar da etiqueta repetida: vermelha quando a vez é de quem
   está olhando, cinza quando está com o outro lado. */
.pd-cartao { border-left: var(--border-accent) solid var(--border-default); }
.pd-cartao-minha-vez { border-left-color: var(--bni-red); }

/* ===== Andaime da perspectiva ===== */
.pd-simulacao-perspectiva { margin-bottom: var(--space-6); }
.pd-perspectiva-linha {
  display: flex;
  align-items: flex-end;
  gap: var(--space-4);
  flex-wrap: wrap;
}

/* Contrato travado no diálogo de criação aberto pela ficha do contrato. */
.pd-contrato-fixo {
  padding: var(--space-3) var(--space-4);
  background: var(--grey-50);
  border-left: var(--border-accent) solid var(--bni-red);
  margin-bottom: var(--space-4);
}

/* Topo da coluna na mesma cor dos cartões dela. */
.pd-coluna-minha-vez { border-top-color: var(--bni-red); }

/* Espaço entre o grupo de fornecedor e contrato e o grupo de nome e descrição,
   no diálogo de criação: sem isto os dois grupos ficavam encostados. */
.pd-grade-espacada { margin-bottom: var(--space-4); }

/* Nota no topo de um card, sem a margem que ela teria num parágrafo solto. */
.pd-nota-topo { margin-top: 0; }

/* Bloco de anexar: os dois controles têm a largura do próprio conteúdo, então
   ficam lado a lado sem grade de colunas iguais, que era o que deixava sobrando
   um vazio ao lado do botão. */
.pd-anexar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  margin-top: var(--space-4);
}
/* Rótulo em cima e interação embaixo, com o mesmo intervalo que o Select usa. */
.pd-anexar-campo {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  align-items: flex-start;
}
/* Escolha de uma opção entre duas: os botões encostam um no outro para lerem
   como um controle só, e não como duas ações independentes. */
.pd-escolha { display: flex; gap: var(--space-2); flex-wrap: wrap; }