/**
 * O dossie de documentos da etapa II, e a fila de conferencia.
 *
 * Os slots ficam DENTRO do painel da aba II do modal da esteira, que ja e um
 * flex em coluna (`.esteira-fluxo-painel::part(base)`) - por isso nao ha
 * `display` nem `gap` no container de cima: ele herdaria do painel e a duplicata
 * so criaria uma segunda medida para alguem ajustar pela metade.
 */

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

.dossie-titulo {
  margin: 0;
  font-size: var(--txt-rotulo);
  font-weight: 600;
  color: var(--cor-titulo);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.dossie-placar {
  margin: 0;
}

/* ------------------------------------------------------------------ */
/* Os slots                                                            */
/* ------------------------------------------------------------------ */

.dossie-slots {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.dossie-slot {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
}

/*
 * O slot VAZIO fica com a borda tracejada, e nao apagado.
 *
 * Ele e uma pendencia - algo a fazer -, e nao um campo desabilitado. Cinza, se
 * leria como "ainda nao disponivel"; tracejado se le como "falta preencher", que
 * e a mesma convencao de area de upload que toda gente ja viu.
 */
.dossie-slot--vazio {
  border-style: dashed;
}

.dossie-slot-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--esp-3);
}

.dossie-slot-topo > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dossie-slot-nome {
  color: var(--cor-titulo);
}

/* De onde veio o socio, quando nao foi da planilha. Mesma forma do alerta, sem a cor. */
.dossie-origem-socio {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--txt-corpo-p);
}

.dossie-alerta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--cor-alerta-texto);
  font-size: var(--txt-corpo-p);
}

/* ------------------------------------------------------------------ */
/* O arquivo                                                           */
/* ------------------------------------------------------------------ */

.dossie-arquivo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
}

/*
 * BOTAO e nao link: o endereco nao existe ate ser pedido - a URL assinada e
 * criada no clique e vale minutos. Um <a href> aqui precisaria de um endereco
 * falso no atributo, e ele apareceria na barra de status do navegador
 * prometendo um destino que nao leva a lugar nenhum.
 */
.dossie-abrir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 4px 8px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-superficie);
  color: var(--cor-primaria);
  font: inherit;
  cursor: pointer;
  min-width: 0;
}

.dossie-abrir:hover {
  border-color: var(--cor-primaria);
}

.dossie-abrir:focus-visible {
  outline: 2px solid var(--cor-primaria);
  outline-offset: 2px;
}

/* ------------------------------------------------------------------ */
/* Parecer e comentario                                                */
/* ------------------------------------------------------------------ */

.dossie-parecer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: flex-end;
}

.dossie-parecer .parecer-comentario {
  flex: 1 1 240px;
  min-width: 0;
}

/*
 * O comentario da REPROVACAO e a instrucao do que reenviar, e por isso ele tem
 * cor e borda - um paragrafo cinza no meio do slot seria lido como legenda.
 */
.dossie-comentario {
  margin: 0;
  padding: var(--esp-2);
  border-left: 3px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-superficie-baixa);
  font-size: var(--txt-corpo-p);
}

.dossie-comentario--reprovado {
  border-left-color: var(--cor-erro);
  background: var(--cor-erro-tint);
}

.dossie-comentario--aprovado {
  border-left-color: var(--cor-sucesso);
  background: var(--cor-sucesso-tint);
}

/* ------------------------------------------------------------------ */
/* As acoes do slot                                                    */
/* ------------------------------------------------------------------ */

/*
 * Enviar fica a ESQUERDA e tirar do dossie na ponta oposta.
 *
 * Nao e simetria: o gesto comum e o da esquerda, e o destrutivo e o unico que
 * nao se quer acertar por engano ao mirar no outro. So o aditivo tem os dois.
 */
.dossie-acoes {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-2);
}

/* O campo de arquivo e invisivel; quem se ve e o rotulo. */
.dossie-enviar {
  align-self: flex-start;
  cursor: pointer;
}

/*
 * A pergunta OCUPA O LUGAR das acoes, em vez de aparecer ao lado delas: enquanto
 * ela esta na tela nao ha outra coisa a fazer no slot, e deixar o campo de envio
 * ali convidaria a responder duas perguntas ao mesmo tempo.
 */
.dossie-confirmar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2);
}

/* ------------------------------------------------------------------ */
/* A fila de conferencia                                               */
/* ------------------------------------------------------------------ */

.conferencia-vazia {
  margin: 0;
}

/*
 * A fila reaproveita `.leads-tabela`. Aqui so o que e proprio dela: a coluna da
 * espera, que e por onde o validador prioriza.
 */
.conferencia-espera {
  white-space: nowrap;
}

.conferencia-espera--velha {
  color: var(--cor-alerta-texto);
  font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* O envio ao Bradesco (aba DA)                                        */
/* ------------------------------------------------------------------ */

.envio-previa {
  display: flex;
  flex-direction: column;
  gap: var(--esp-3);
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-superficie-baixa);
}

.envio-previa wa-callout ul {
  margin: var(--esp-2) 0 0;
  padding-left: var(--esp-4);
}

.envio-contatos {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

/* Nome, e-mail e o botao numa linha; no celular, um embaixo do outro. */
.envio-incluir {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--esp-2);
  margin-top: var(--esp-2);
}

.envio-incluir wa-input {
  flex: 1 1 12rem;
  min-width: 0;
}

.envio-cabecalho {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--esp-2) var(--esp-3);
  margin: 0;
}

.envio-cabecalho dd {
  margin: 0;
  overflow-wrap: anywhere;
}

/* O texto como vai sair: quebras de linha do e-mail preservadas, sem rolar de lado. */
.envio-texto {
  margin: 0;
  padding: var(--esp-3);
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-controle);
  background: var(--cor-superficie);
  font-family: var(--fonte);
  font-size: var(--txt-corpo-p);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 16rem;
  overflow-y: auto;
}

.envio-anexos ul,
.envio-historico {
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
  margin: var(--esp-2) 0 0;
  padding: 0;
  list-style: none;
}

.envio-anexos li,
.envio-historico li {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  min-width: 0;
}

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

.envio-acoes .fraco {
  margin-right: auto;
}

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