/* Complemento do estilo compartilhado (estilo.css) com o que só existe em
   Vendas: a assinatura da marca, o quadro por etapa, a caixa de conversa e o
   editor de automação.

   Todas as cores, raios e espaçamentos vêm dos tokens --porti-* de
   porti-tokens.css, que é cópia da fonte da verdade (/home/deploy/porti-ui,
   publicada em design.porti.digital). Nunca editar a cópia: rodar
   scripts/sync-ui.sh. Nenhum literal de cor aqui — é o que faz o tema escuro
   dos tokens funcionar sem retoque e o que mantém os dois sistemas da Portí
   parecidos de verdade.

   Estados vêm de --porti-success / --porti-warning / --porti-error / --porti-info,
   que são os nomes do design system. */

/* ─── Assinatura da marca ──────────────────────────────────────────────────
   Regra do brandbook: o símbolo (anel + gota) É o "p" de portí — não se separa
   dele nem se escreve "portí" ao lado em fonte comum. Por isso a sidebar usa a
   assinatura oficial como imagem, e o nome do módulo ("vendas") entra como
   rótulo à parte, embaixo, em mono — não como parte do logo.
   Assinatura principal em branco porque a sidebar é Roxo 900 sólido.
   Largura 140 px mantém a reprodução acima do mínimo de 60 px do manual. */

.assinatura {
  padding: 0 var(--porti-sp-6) var(--porti-sp-6);
}
.assinatura img {
  display: block;
  width: 140px;
  height: auto;
}
.assinatura .modulo {
  font-family: var(--porti-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--porti-sidebar-text);
  margin-top: var(--porti-sp-2);
}

/* Na entrada (fundo claro) a assinatura é a índigo. */
.assinatura-entrada {
  margin-bottom: var(--porti-sp-4);
}
.assinatura-entrada img {
  display: block;
  width: 180px;
  height: auto;
}

/* ─── Quadro (kanban) ──────────────────────────────────────────────────────── */

.quadro {
  display: flex;
  gap: var(--porti-sp-3);
  overflow-x: auto;
  padding-bottom: var(--porti-sp-4);
  align-items: flex-start;
}

.coluna {
  flex: 0 0 268px;
  background: var(--porti-surface-alt);
  border: 1px solid var(--porti-border);
  border-radius: var(--porti-radius-md);
  padding: var(--porti-sp-3);
}

.coluna-topo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--porti-sp-2);
  margin-bottom: var(--porti-sp-2);
}
.coluna-topo strong {
  font-size: 13px;
  font-weight: var(--porti-weight-subtitle);
}
.coluna-topo .rotulo { white-space: nowrap; }

.cartao {
  background: var(--porti-surface);
  border: 1px solid var(--porti-border);
  border-radius: var(--porti-radius-sm);
  padding: var(--porti-sp-3);
  margin-bottom: var(--porti-sp-2);
  cursor: pointer;
  box-shadow: var(--porti-shadow-float);
}
.cartao:hover {
  border-color: var(--porti-action);
  box-shadow: var(--porti-shadow-hover);
}
.cartao .nome { font-weight: var(--porti-weight-subtitle); font-size: 13px; }
.cartao .linha-meta {
  display: flex;
  gap: var(--porti-sp-2);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--porti-sp-2);
}

/* A faixa lateral é o sinal mais rápido de leitura no quadro: erro quando o SLA
   estourou, aviso quando a cadência venceu. */
.cartao.sla { border-left: 3px solid var(--porti-error); }
.cartao.atrasada { border-left: 3px solid var(--porti-warning); }

.selo {
  font-family: var(--porti-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px var(--porti-sp-2);
  border-radius: var(--porti-radius-pill);
  border: 1px solid var(--porti-border);
  color: var(--porti-text-3);
  white-space: nowrap;
}
.selo.grave { color: var(--porti-error); border-color: currentColor; }
.selo.atencao { color: var(--porti-warning); border-color: currentColor; }
.selo.ok { color: var(--porti-success); border-color: currentColor; }
.selo.info { color: var(--porti-info); border-color: currentColor; }

/* ─── Conversa ─────────────────────────────────────────────────────────────── */

.conversa {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: var(--porti-sp-4);
  align-items: start;
}

.lista-conversas { max-height: 72vh; overflow-y: auto; }

.item-conversa {
  padding: var(--porti-sp-3);
  border-bottom: 1px solid var(--porti-border);
  cursor: pointer;
}
.item-conversa:hover { background: var(--porti-surface-alt); }
.item-conversa.ativa {
  background: var(--porti-accent-soft);
  box-shadow: inset 2px 0 0 var(--porti-action);
}
.item-conversa .previa {
  color: var(--porti-text-3);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mensagens {
  display: flex;
  flex-direction: column;
  gap: var(--porti-sp-2);
  max-height: 56vh;
  overflow-y: auto;
  padding: var(--porti-sp-3);
  background: var(--porti-surface-alt);
  border-radius: var(--porti-radius-md);
}

.bolha {
  max-width: 78%;
  padding: var(--porti-sp-3);
  border-radius: var(--porti-radius-md);
  background: var(--porti-surface);
  border: 1px solid var(--porti-border);
  white-space: pre-wrap;
  word-break: break-word;
}
.bolha.saida {
  align-self: flex-end;
  background: var(--porti-accent-soft);
  border-color: var(--porti-action);
}
.bolha .rodape {
  display: flex;
  gap: var(--porti-sp-2);
  flex-wrap: wrap;
  margin-top: var(--porti-sp-1);
  font-family: var(--porti-mono);
  font-size: 10px;
  color: var(--porti-text-3);
}

/* A janela de 24 h decide se dá para escrever texto livre. Deixar isso implícito
   é o que faz a mensagem ser recusada só na hora do envio. */
.janela {
  display: flex;
  justify-content: space-between;
  gap: var(--porti-sp-3);
  flex-wrap: wrap;
  padding: var(--porti-sp-3);
  border: 1px dashed var(--porti-border-strong);
  border-radius: var(--porti-radius-md);
  margin-bottom: var(--porti-sp-3);
  font-size: 12px;
  color: var(--porti-text-2);
}
.janela.fechada {
  border-color: var(--porti-warning);
  color: var(--porti-warning);
}

/* ─── Editor de automação ──────────────────────────────────────────────────── */

.passos { display: flex; flex-direction: column; gap: var(--porti-sp-2); }

.passo {
  display: grid;
  grid-template-columns: 28px 200px 1fr auto;
  gap: var(--porti-sp-2);
  align-items: center;
  background: var(--porti-surface);
  border: 1px solid var(--porti-border);
  border-radius: var(--porti-radius-sm);
  padding: var(--porti-sp-2);
}
.passo .ordem {
  font-family: var(--porti-mono);
  text-align: center;
  color: var(--porti-text-3);
}
.passo input {
  font-family: var(--porti-mono);
  font-size: 12px;
}

.grade-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--porti-sp-3); }
.grade-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--porti-sp-3); }

/* Barra do funil nas métricas: proporção lida de relance, sem biblioteca de
   gráfico — os números exatos ficam na mesma linha da tabela. */
.barra-funil {
  background: var(--porti-surface-alt);
  border-radius: var(--porti-radius-pill);
  height: 6px;
  overflow: hidden;
  margin-top: var(--porti-sp-1);
}
.barra-funil > span {
  display: block;
  height: 100%;
  background: var(--porti-action);
}

/* Faixa de ambiente. Fica em Roxo Vibrante (o "ponto de atenção" do brandbook)
   e não numa cor de alerta: sandbox não é erro, é contexto — e o vermelho fica
   reservado para o que está de fato quebrado. */
.faixa-sandbox {
  background: var(--porti-action);
  color: var(--porti-surface);
  padding: var(--porti-sp-2) var(--porti-sp-6);
  font-family: var(--porti-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  display: flex;
  justify-content: space-between;
  gap: var(--porti-sp-3);
  flex-wrap: wrap;
}
.faixa-sandbox a { color: inherit; text-decoration: underline; }

/* Linha de aviso do painel. */
.linha-aviso {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--porti-sp-3);
  padding: var(--porti-sp-2) 0;
  border-bottom: 1px solid var(--porti-border);
}
.linha-aviso:last-child { border-bottom: 0; }

/* Recorte de dado sensível e blocos de leitura técnica (regras de segmento,
   payload de automação): mono, fundo alternativo, sem cor própria. */
.detalhe-json {
  font-family: var(--porti-mono);
  font-size: 12px;
  background: var(--porti-surface-alt);
  border: 1px solid var(--porti-border);
  border-radius: var(--porti-radius-sm);
  padding: var(--porti-sp-3);
  overflow-x: auto;
  color: var(--porti-text-2);
}

/* ─── Entrada (login e definição de senha) ─────────────────────────────────
   estilo.css cobre o miolo do sistema, mas não a porta de entrada: quem chega
   aqui ainda não tem sidebar nem cabeçalho. Card estreito e centrado, no mesmo
   material dos painéis. */

.entrada {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--porti-sp-6);
  background: var(--porti-bg);
}
.entrada .painel {
  width: 100%;
  max-width: 380px;
  margin-bottom: 0;
  padding: var(--porti-sp-8);
}
.entrada .painel .rotulo { margin-bottom: var(--porti-sp-6); }
.entrada .botao { width: 100%; margin-top: var(--porti-sp-2); }
.entrada .aviso { margin-bottom: var(--porti-sp-4); }

/* ─── Ação destrutiva ──────────────────────────────────────────────────────
   Contorno em vez de preenchimento: apagar tag, marcar perdido e pausar não
   são a ação principal de tela nenhuma, e um botão vermelho sólido competiria
   com o roxo de ação em toda página onde aparece. */

.botao.perigo,
.mini.perigo {
  background: transparent;
  color: var(--porti-error);
  border: 1px solid currentColor;
}
.botao.perigo:hover,
.mini.perigo:hover {
  background: var(--porti-error);
  color: var(--porti-surface);
}

/* Botões de um painel alinhados ao texto, e não à direita como nas ações de linha de tabela. */
.acoes-linha.esquerda { justify-content: flex-start; }

/* Campo que ocupa a linha inteira da grade (endereço). */
.inteira { grid-column: 1 / -1; }

/* Onboarding — mesmo componente do porti-marketing. */
.progresso {
  height: 8px;
  border-radius: var(--porti-radius-pill);
  background: var(--porti-surface-alt);
  overflow: hidden;
}
.progresso-barra {
  height: 100%;
  background: var(--porti-action);
  border-radius: var(--porti-radius-pill);
  transition: width 0.3s ease;
}

.passo-onb {
  display: flex;
  gap: var(--porti-sp-3);
  align-items: flex-start;
  padding: var(--porti-sp-3);
  border: 1px solid var(--porti-border);
  border-radius: var(--porti-radius-sm);
  margin-bottom: var(--porti-sp-2);
  cursor: pointer;
}
.passo-onb:hover { border-color: var(--porti-border-strong); }
.passo-onb input[type="checkbox"] { width: auto; flex: none; margin-top: 2px; }
.passo-onb > span { display: flex; flex-direction: column; gap: 3px; }
.passo-onb strong { font-size: 14px; }
.passo-fazer { font-size: 13px; color: var(--porti-text-2); }

/* Feito perde o destaque para o que falta ficar em evidência, mas continua
   legível: a pessoa ainda quer reler o porquê. */
.passo-onb.feito { background: var(--porti-bg); border-color: var(--porti-border); }
.passo-onb.feito strong { text-decoration: line-through; color: var(--porti-text-3); }
.passo-onb .sub { margin-top: 0; }

/* Aba que navega (link) em vez de trocar painel (botão): sem o sublinhado de link. */
a.aba { text-decoration: none; }

/* Em Integrações, o que cada opção de um campo de escolha faz, logo abaixo dele. */
.opcoes-explicadas { display: flex; flex-direction: column; gap: 2px; margin-top: var(--porti-sp-1); color: var(--porti-text-3); }

/* Regras de segmento do CRM, uma por linha. */
.regras-crm { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }

/* O atributo hidden precisa vencer classes que definem display (.consentimento é
   flex): sem isto, "hidden" num rótulo não escondia nada. */
[hidden] { display: none !important; }