/* ===========================================================================
   HouseLeads — camada de interface (ui.css)
   ---------------------------------------------------------------------------
   Carregada DEPOIS de theme.css. Terceira camada, mesma regra das anteriores:
   aditiva e reversível — remover o <link> volta ao visual anterior.

   theme.css trouxe os tokens (cor, escala tipográfica, espaçamento). Esta
   camada trata do que os tokens sozinhos não resolvem:

     1. TEXTO DENTRO DO CARD. Nome longo, e-mail sem espaço e valor grande
        estouravam a borda. A causa quase nunca é o texto: é `min-width:auto`,
        que todo item de flex e grid tem por padrão e que se recusa a encolher
        abaixo do conteúdo. Sem `min-width:0` no filho, nenhum `overflow` do
        pai funciona.

     2. PADDING COM UMA REGRA SÓ. Antes cada card tinha o seu, escolhido no dia
        em que foi escrito. Densidade irregular é o que faz uma tela parecer
        montada por pessoas diferentes.

     3. AFFORDANCE. `cursor: pointer` em tudo que responde ao clique, foco
        visível em tudo que recebe teclado, alvo de toque de 44px — que é a
        medida do dedo, não uma preferência de estilo.

     4. O DESKTOP. A barra inferior é um padrão de celular: numa tela de 1440px
        ela desperdiça a largura inteira e deixa o conteúdo espremido no meio.
        A partir de 900px ela vira coluna lateral, sem uma linha de JS — os
        mesmos botões, outra posição.
   =========================================================================== */

:root{
  /* Altura mínima de alvo tocável. 44px é a medida do dedo médio; abaixo disso
     o erro de toque cresce rápido, e o corretor usa o app em pé, andando. */
  --hl-toque: 44px;
  --hl-sidebar: 236px;
  /* Altura da barra de topo. A coluna lateral e fixa a partir do topo da tela,
     entao ela precisa deste vao para o primeiro item nao nascer atras do
     cabecalho. */
  --hl-topbar-h: 68px;
  --hl-card-pad: var(--hl-sp-4);
}

/* ===========================================================================
   1) Texto dentro do card
   =========================================================================== */

/* A raiz do problema, em duas linhas. Todo filho de flex/grid nasce com
   min-width:auto e se recusa a encolher abaixo do próprio conteúdo — por isso
   um e-mail longo empurra a borda do card em vez de quebrar. */
.hl-card > *,
.hl-pipeline-card > *,
.hl-task-card > *,
.hl-metrica-card > *{
  min-width: 0;
}

/* Quebra por palavra quando dá, e no meio da palavra quando não dá. `anywhere`
   em vez de `break-all`: só parte a palavra quando ela sozinha não cabe, então
   o texto normal continua quebrando bonito. */
.hl-card,
.hl-pipeline-card,
.hl-task-card,
.hl-metrica-card{
  overflow-wrap: anywhere;
}

/* O reverso do `anywhere`: rótulo de controle NUNCA quebra.

   `overflow-wrap: anywhere` é herdado por tudo dentro do card, e ele faz o
   min-content de um elemento cair para UM caractere. Num botão-pílula isso
   significa que ele aceita ser espremido até quase nada — e foi o que se viu
   no card do pipeline: o "WhatsApp" da barra de ações quebrado em três linhas,
   "Wha / tsAp / P".

   A regra do `anywhere` está certa para TEXTO — é ela que impede um e-mail
   longo de empurrar a borda. Errada para CONTROLE, que é dimensionado pelo
   próprio rótulo e não tem para onde quebrar. */
.hl-icon-btn,
.hl-tipo-chip,
.hl-etapa-chip,
.hl-task-chip{
  overflow-wrap: normal;
  white-space: nowrap;
}

/* Título de card e nome de lead: uma linha, com reticências. Aqui a truncagem
   é melhor que a quebra — duas linhas de nome desalinham o card inteiro numa
   grade, e o nome completo continua no card aberto. */
.hl-user-title,
.hl-pipeline-main > strong,
.hl-task-title{
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* E-mail é o pior caso: string longa sem espaço nenhum. */
.hl-user-title{ max-width: 100%; }

/* Números grandes nunca quebram no meio. "R$ 1.250.000,00" partido em duas
   linhas deixa de ser legível como valor. */
.hl-metrica-card,
.hl-pipeline-numeros > span,
.hl-preco__valor{
  font-variant-numeric: tabular-nums;
}
.hl-pipeline-numeros > span,
.hl-barra-valor{ white-space: nowrap; }

/* Tabela do admin: e-mail longo não pode empurrar a largura da tabela. */
.hl-admin-table{ table-layout: fixed; width: 100%; }
.hl-admin-table td,
.hl-admin-table th{ overflow-wrap: anywhere; }

/* ===========================================================================
   2) Padding com uma regra só
   =========================================================================== */

.hl-card{
  padding: var(--hl-card-pad);
  display: flex;
  flex-direction: column;
  gap: var(--hl-sp-3);
}
.hl-card > .hl-section-title{ margin: 0; }

/* Card dentro de card recua um degrau: mesma escala, densidade menor. */
.hl-card .hl-card{ padding: var(--hl-sp-3); }

.hl-metrica-card{
  padding: var(--hl-sp-3);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ===========================================================================
   3) Botões: uma anatomia só
   =========================================================================== */

.hl-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hl-sp-2);
  min-height: var(--hl-toque);
  padding: 0 var(--hl-sp-4);
  border-radius: var(--hl-radius-md);
  font-weight: 650;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .12s ease, background-color .15s ease, border-color .15s ease;
  /* O rótulo do botão nunca quebra em duas linhas: um botão de duas alturas no
     meio de uma fileira desalinha a fileira inteira. */
  white-space: nowrap;
}
.hl-btn:active{ transform: translateY(1px); }
.hl-btn[disabled]{ opacity: .55; cursor: not-allowed; transform: none; }

.hl-btn-sm{ min-height: 36px; padding: 0 var(--hl-sp-3); font-size: var(--hl-fs-xs); }
.hl-btn-block{ width: 100%; }

/* Botão que precisa caber num espaço apertado pode encolher o rótulo, mas o
   ícone fica: ele é o que identifica a ação de relance. */
.hl-btn > .hl-ico{ flex: none; }
.hl-btn > span{ min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ===========================================================================
   4) Affordance: o que responde ao dedo, e o que responde ao teclado
   =========================================================================== */

/* Cursor de mão em TUDO que reage ao clique. Sem isto o usuário testa a tela
   clicando para descobrir o que é botão — que é o oposto de affordance. */
button:not([disabled]),
[role="button"],
summary,
label[for],
select,
.hl-nav-btn,
.hl-icon-btn,
.hl-card-menu-item,
[data-route],
[data-lead-advance],
[data-lead-close],
[data-lead-lost],
[data-card-menu],
[data-arch],
[data-edit],
[data-comissao-lead]{
  cursor: pointer;
}

/* Foco visível, e só para quem navega por teclado. `:focus-visible` não acende
   no clique de mouse, então o anel não vira poluição. */
:where(button, a, select, input, textarea, summary, [tabindex]):focus-visible{
  outline: none;
  box-shadow: var(--hl-ring);
  border-radius: var(--hl-radius-sm);
}

/* Alvo de toque. Um select de 28px de altura é impossível de acertar andando. */
.hl-input,
select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"]{
  min-height: var(--hl-toque);
  padding: 0 var(--hl-sp-3);
  cursor: text;
}
select{ cursor: pointer; }
textarea.hl-input{ min-height: 88px; padding: var(--hl-sp-3); }

/* Data e hora nao podem empurrar o cartao.
 *
 * No WebKit (iPhone) o input[type=date] e o input[type=time] ignoram o
 * width:100% e assumem a largura do proprio miolo nativo. Dentro do modal de
 * lead e de tarefa isso fazia o campo vazar para fora do cartao e a tela
 * inteira ganhar rolagem horizontal. appearance:none tira a caixinha nativa,
 * min-width:0 devolve o direito de encolher e o overflow corta o que sobra.
 */
input[type="date"],
input[type="time"]{
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}
/* O valor vem centralizado e com largura propria no iOS. */
input[type="date"]::-webkit-date-and-time-value,
input[type="time"]::-webkit-date-and-time-value{
  min-width: 0;
  width: 100%;
  margin: 0;
  text-align: left;
}
input[type="date"]::-webkit-datetime-edit,
input[type="time"]::-webkit-datetime-edit{
  min-width: 0;
  padding: 0;
  overflow: hidden;
}
/* O icone do calendario nao entra na conta da largura minima. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator{
  flex: none;
  margin-left: 4px;
  padding: 0;
}

/* ===========================================================================
   5) Ícones
   =========================================================================== */

.hl-ico{
  flex: none;
  display: block;
  /* currentColor no SVG + herança aqui: o ícone acende junto com o texto,
     sem uma regra de cor por estado. */
  color: inherit;
  vertical-align: middle;
}
/* Ícone sozinho num botão quadrado.

   `padding: 0` porque o espaço lateral existia para um rótulo em TEXTO que não
   está mais lá: o botão do WhatsApp no card do pipeline carregava a palavra
   "WhatsApp" inteira, e numa coluna estreita ela vazava para fora do card.

   Ícone não vaza: tem largura fixa, não muda de tamanho com o idioma e não
   depende de nenhuma regra de quebra para se comportar. */
.hl-icon-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  min-width: var(--hl-toque);
  min-height: var(--hl-toque);
  padding: 0;
  cursor: pointer;
}
.hl-icon-btn > svg{ display: block; flex: none; }

/* ===========================================================================
   6) Desktop: a barra vira coluna, e a tela é usada inteira
   =========================================================================== */

@media (min-width: 900px){
  .hl-bottom-nav{
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--hl-sidebar);
    height: 100vh;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--hl-sp-1);
    padding: calc(var(--hl-safe-top) + var(--hl-topbar-h) + var(--hl-sp-3)) var(--hl-sp-3) var(--hl-sp-4);
    border-top: 0;
    border-right: 1px solid var(--hl-border);
    overflow-y: auto;
  }

  /* Na vertical o ícone vai ao LADO do rótulo, e não em cima: a leitura passa a
     ser uma lista, que é como se lê um menu lateral. */
  .hl-nav-btn{
    /* Na barra inferior os botoes dividem a largura com flex:1 1 auto. Virando
       coluna, esse mesmo "crescer" passa a dividir a ALTURA da tela: cinco
       botoes espalhados de cima a baixo, com um vao enorme entre eles. Na
       vertical eles ocupam so o proprio tamanho. */
    flex: 0 0 auto;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--hl-sp-3);
    min-height: var(--hl-toque);
    padding: 0 var(--hl-sp-3);
    text-align: left;
  }
  .hl-nav-txt{ font-size: var(--hl-fs-sm); }

  .hl-main{
    /* A largura da tela inteira, menos a coluna. O max-width de 1120px fazia
       uma tela de 1440 desperdiçar 300px de cada lado. */
    max-width: none;
    margin: 0;
    padding: var(--hl-sp-5) var(--hl-sp-6) var(--hl-sp-6);
    padding-left: calc(var(--hl-sidebar) + var(--hl-sp-6));
  }
  .hl-topbar{ padding-left: calc(var(--hl-sidebar) + var(--hl-sp-4)); }

  /* O convite para instalar e uma conversa de celular: "abra mais rapido e use
     como app" nao significa nada em desktop, e a faixa ainda cobria o primeiro
     item da coluna lateral. */
  .hl-install{ display: none !important; }

  /* O FAB é gesto de polegar: no desktop o botão de ação já está no cabeçalho,
     e um círculo flutuante sobre o conteúdo só atrapalha. */
  .hl-fab{ display: none !important; }

  /* Com a largura liberada, as grades respiram em vez de esticar. */
  .hl-dashboard-metricas{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--hl-sp-3);
  }
  .hl-pipeline{
    display: grid;
    grid-template-columns: repeat(6, minmax(240px, 1fr));
    gap: var(--hl-sp-3);
    align-items: start;
  }
}

/* Telas muito largas: a leitura para de esticar, mas o board continua usando o
   espaço. Linha de texto com 200 caracteres não se lê. */
@media (min-width: 1600px){
  .hl-main{ padding-right: var(--hl-sp-6); }
  .hl-view[data-view="dashboard"],
  .hl-view[data-view="admin"]{
    max-width: 1500px;
  }
}

/* ===========================================================================
   7) Celular: o que muda de verdade abaixo de 720px
   =========================================================================== */

@media (max-width: 720px){
  :root{ --hl-card-pad: var(--hl-sp-3); }

  /* Fileira de botões vira coluna quando não cabe, em vez de espremer cada um
     abaixo do tamanho legível. */
  .hl-pipeline-card-footer,
  .hl-cta-row{ flex-wrap: wrap; }
  .hl-pipeline-card-footer > .hl-btn{ flex: 1 1 140px; }
}

/* Movimento é decoração: quem pediu para reduzir não deve recebê-lo. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   Painel de comissões — super_58
   ---------------------------------------------------------------------------
   Substitui o card "Comissão fechada" com o botão críptico dentro. Três blocos
   com legenda, e a pendência como LISTA NOMINAL: cada linha é um negócio, com
   o nome do cliente e um botão só dele.

   "1 fechado sem comissão" não dizia qual. Um contador não é uma tarefa.
   =========================================================================== */

.hl-fin-blocos{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--hl-sp-3);
}

.hl-fin-bloco{
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "ico rotulo"
    "valor valor"
    "nota nota";
  align-items: center;
  gap: 2px var(--hl-sp-2);
  padding: var(--hl-sp-3) var(--hl-sp-4);
  border-radius: var(--hl-radius-md);
  border: 1px solid var(--hl-border);
  background: var(--hl-surface-2);
  min-width: 0;
}
.hl-fin-ico{ grid-area: ico; display: flex; color: var(--hl-subtle); }
.hl-fin-rotulo{
  grid-area: rotulo;
  font-size: var(--hl-fs-2xs);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hl-subtle);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hl-fin-valor{
  grid-area: valor;
  margin-top: 6px;
  font-size: var(--hl-fs-xl);
  font-weight: 750;
  letter-spacing: -.02em;
  /* Tabular para os três blocos alinharem a vírgula entre si, e para o número
     não "tremer" quando muda. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hl-fin-nota{
  grid-area: nota;
  margin-top: 2px;
  font-size: var(--hl-fs-2xs);
  line-height: 1.35;
  color: var(--hl-subtle);
}

/* O único bloco em cor é o dinheiro que JÁ entrou. Se os três brilhassem, o
   olho não teria onde pousar — e o que importa aqui é o realizado. */
.hl-fin-bloco--ok{
  border-color: var(--hl-success-border);
  background: var(--hl-success-soft);
}
.hl-fin-bloco--ok .hl-fin-ico,
.hl-fin-bloco--ok .hl-fin-valor{ color: var(--hl-success); }

/* O aviso de que os três números são previsão, e não caixa.

   Discreto por escolha: é uma ressalva permanente, não um alerta. Se ele
   tivesse a cor do aviso de pendência, competiria com a tarefa que está logo
   abaixo — e a tarefa é a única coisa ali que pede ação. */
.hl-fin-aviso{
  margin: var(--hl-sp-3) 0 0;
  font-size: var(--hl-fs-2xs);
  line-height: 1.45;
  color: var(--hl-subtle);
}
.hl-fin-aviso strong{ color: var(--hl-muted); font-weight: 700; }

/* ---- Pendências ---- */

.hl-fin-pendencias{
  margin-top: var(--hl-sp-3);
  padding: var(--hl-sp-3);
  border-radius: var(--hl-radius-md);
  border: 1px solid var(--hl-gold-border);
  background: var(--hl-gold-soft);
}
.hl-fin-pend-head{
  display: flex;
  align-items: flex-start;
  gap: var(--hl-sp-2);
  color: var(--hl-gold2);
  margin-bottom: var(--hl-sp-3);
}
.hl-fin-pend-head strong{ display: block; font-size: var(--hl-fs-sm); line-height: 1.35; }
.hl-fin-pend-head small{
  display: block;
  margin-top: 2px;
  font-size: var(--hl-fs-2xs);
  line-height: 1.4;
  color: var(--hl-muted);
}

/* `minmax(0, 1fr)`, e não o `1fr` implícito.

   Item de grid nasce com min-width:auto e se recusa a encolher abaixo do
   conteúdo. Com um nome de cliente longo a linha inteira estourava o card e o
   botão "Informar" saía pela borda direita — visto no navegador, a 330px.

   É a mesma causa do texto que empurrava o card no super_57. Lá quem não
   encolhia era o filho do flex; aqui é o <li> dentro do grid. */
.hl-fin-pend-lista{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hl-sp-2);
}
.hl-fin-pend{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hl-sp-3);
  padding: var(--hl-sp-2) var(--hl-sp-3);
  border-radius: var(--hl-radius-sm);
  background: var(--hl-surface-1);
  border: 1px solid var(--hl-border);
  min-width: 0;
}
.hl-fin-pend-txt{ min-width: 0; }
.hl-fin-pend-txt strong{
  display: block;
  font-size: var(--hl-fs-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hl-fin-pend-txt small{
  display: block;
  font-size: var(--hl-fs-2xs);
  color: var(--hl-subtle);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hl-fin-pend .hl-btn{ flex: none; }

/* ===========================================================================
   Painel do admin e sparkline — super_58
   =========================================================================== */

.hl-admin-sec + .hl-admin-sec{ margin-top: var(--hl-sp-5); }
.hl-admin-sec-titulo{
  display: flex;
  align-items: center;
  gap: var(--hl-sp-2);
  margin: 0 0 var(--hl-sp-3);
  font-size: var(--hl-fs-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hl-subtle);
}

/* O sparkline estica para a largura do card. `preserveAspectRatio="none"` no
   SVG + altura fixa aqui: o desenho não precisa saber quanto o card mede. */
.hl-spark-wrap{ margin-top: var(--hl-sp-3); }
.hl-spark{ display: block; width: 100%; height: 56px; }
.hl-spark-legenda{
  display: flex;
  justify-content: space-between;
  gap: var(--hl-sp-2);
  margin-top: 4px;
  font-size: var(--hl-fs-2xs);
  color: var(--hl-subtle);
}
.hl-spark-legenda > span:nth-child(2){ color: var(--hl-muted); }

/* O gráfico do dashboard precisa de altura própria: com
   maintainAspectRatio:false o canvas colapsa sem um container que o segure. */
.hl-chart-wrapper{ position: relative; height: 300px; }
@media (max-width: 720px){
  .hl-chart-wrapper{ height: 240px; }
}

/* ===========================================================================
   A finalidade da visita — super_58
   ---------------------------------------------------------------------------
   Aparece só nas duas etapas de visita. Fica discreta de propósito: é contexto
   para quem está aprendendo o funil, não um aviso — e aviso demais no card faz
   o corretor parar de ler o card inteiro.
   =========================================================================== */

.hl-negocio-visita{
  display: flex;
  align-items: center;
  gap: var(--hl-sp-2);
  font-size: var(--hl-fs-2xs);
  line-height: 1.4;
  color: var(--hl-subtle);
  min-width: 0;
  overflow-wrap: anywhere;
}
.hl-negocio-visita::before{
  content: "";
  flex: none;
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: var(--hl-border);
}

/* ===========================================================================
   Primeiros passos — super_58
   ---------------------------------------------------------------------------
   Um passo aberto por vez. Cinco instruções simultâneas é uma lista de
   tarefas, e lista de tarefas é exatamente o que o novato ainda não sabe
   priorizar. Os já feitos continuam visíveis, marcados: são a prova de
   progresso, e é ela que faz alguém querer terminar.
   =========================================================================== */

.hl-passos-head{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--hl-sp-3);
}
.hl-passos-tit{ display: block; font-size: var(--hl-fs-md); line-height: 1.3; }
.hl-passos-sub{
  display: block;
  margin-top: 2px;
  font-size: var(--hl-fs-2xs);
  line-height: 1.4;
  color: var(--hl-subtle);
}
.hl-passos-placar{
  flex: none;
  font-size: var(--hl-fs-sm);
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  color: var(--hl-gold2);
}

.hl-passos-trilho{
  margin-top: var(--hl-sp-3);
  height: 6px;
  border-radius: 999px;
  background: var(--hl-surface-2);
  overflow: hidden;
}
.hl-passos-barra{
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--hl-gold2);
  transition: width .3s ease;
}

.hl-passos-lista{
  list-style: none;
  margin: var(--hl-sp-4) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hl-sp-2);
}
.hl-passos-item{
  display: flex;
  align-items: flex-start;
  gap: var(--hl-sp-3);
  min-width: 0;
}
.hl-passos-corpo{ display: flex; flex-direction: column; gap: 4px; align-items: flex-start; min-width: 0; }

/* A marca: um círculo vazio para o que ainda não aconteceu, o ícone de ok para
   o que aconteceu. O passo atual ganha o anel dourado — é o único ponto da
   lista que pede o olho. */
.hl-passos-marca{
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  border-radius: 999px;
  border: 1.5px solid var(--hl-border);
  color: var(--hl-subtle);
}
.hl-passos-marca--agora{
  border-color: var(--hl-gold2);
  box-shadow: 0 0 0 3px var(--hl-gold-soft);
}

.hl-passos-titulo{ font-size: var(--hl-fs-sm); line-height: 1.4; min-width: 0; }
.hl-passos-porque{
  font-size: var(--hl-fs-2xs);
  line-height: 1.45;
  color: var(--hl-subtle);
}

.hl-passos-item.is-feito .hl-passos-marca{
  border-color: var(--hl-success-border);
  background: var(--hl-success-soft);
  color: var(--hl-success);
}
/* Riscado, e não apagado: o passo feito precisa continuar legível para contar
   como progresso. */
.hl-passos-item.is-feito .hl-passos-titulo{
  color: var(--hl-subtle);
  text-decoration: line-through;
  text-decoration-color: var(--hl-border-strong);
}
.hl-passos-item.is-atual .hl-passos-titulo{ font-weight: 700; }
.hl-passos-item.is-futuro .hl-passos-titulo{ color: var(--hl-subtle); }

.hl-passos-item .hl-btn{ margin-top: 4px; }

/* ---------------------------------------------------------------------------
   Estado vazio que ensina
   ---------------------------------------------------------------------------
   "Nenhum lead nesta etapa." informava que nada existe e não dizia como fazer
   existir. A frase agora nomeia a coluna de onde o lead vem. */
.hl-pipeline-empty{
  line-height: 1.5;
  text-wrap: pretty;
}

/* ===========================================================================
   Lista vazia que ensina — super_58
   ---------------------------------------------------------------------------
   Centralizado e com ar em volta de propósito: é o único conteúdo da tela, e
   uma frase encostada à esquerda numa área grande e escura parece sobra de
   carregamento, não mensagem.
   =========================================================================== */

.hl-vazio{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--hl-sp-2);
  padding: var(--hl-sp-6) var(--hl-sp-4);
  text-align: center;
}
.hl-vazio-ico{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-bottom: var(--hl-sp-1);
  border-radius: 999px;
  background: var(--hl-surface-2);
  border: 1px solid var(--hl-border);
  color: var(--hl-subtle);
}
/* A frase tem largura máxima: linha longa demais some no meio de uma tela
   larga, e o olho perde o começo da próxima. */
.hl-vazio-txt{
  margin: 0;
  max-width: 46ch;
  font-size: var(--hl-fs-sm);
  line-height: 1.5;
  color: var(--hl-muted);
  text-wrap: pretty;
}
.hl-vazio-txt strong{ color: var(--hl-text); }
.hl-vazio-dica{
  font-size: var(--hl-fs-2xs);
  line-height: 1.45;
  color: var(--hl-subtle);
}
.hl-vazio .hl-btn{ margin-top: var(--hl-sp-2); }

/* ===========================================================================
   Duas fontes, dois papéis — super_58
   ---------------------------------------------------------------------------
   Roboto na interface: é a face mais estreita das duas, foi desenhada para
   tela densa e é a que o corretor já lê no Android o dia inteiro. Ela cobre o
   corpo, os rótulos e os botões — tudo que é muito e pequeno.

   Open Sans no que precisa de presença: título de seção, nome de card e os
   números grandes. Ela tem contraforma mais aberta e olho maior, então segura
   melhor um "R$ 36.300,00" em corpo grande do que a Roboto.

   Duas famílias só se justificam se cada uma tiver um trabalho. Usar as duas
   misturadas na mesma frase seria trocar de fonte sem trocar de função — que é
   o que faz uma tela parecer montada por pessoas diferentes.

   Esta camada é aditiva como as anteriores: tirar o bloco devolve tudo para a
   --hl-font. Inverter os papéis é trocar um token de lugar.
   =========================================================================== */

h1, h2, h3, h4,
.hl-title,
.hl-section-title,
.hl-user-title,
.hl-pipeline-title,
.hl-passos-tit,
.hl-barra-titulo,
.hl-admin-sec-titulo{
  font-family: var(--hl-font-titulo);
}

/* Os números que o corretor olha de relance. Ficam com a Open Sans pelo mesmo
   motivo dos títulos — e mantêm o numeral tabular, que é o que impede a linha
   de "tremer" entre recarregamentos. */
.hl-fin-valor,
.hl-metrica-card strong,
.hl-funnel-count,
.hl-passos-placar{
  font-family: var(--hl-font-titulo);
  font-variant-numeric: tabular-nums;
}

/* ===========================================================================
   Vencimento da assinatura no painel do admin — super_58
   ---------------------------------------------------------------------------
   A cobrança é manual e nada rebaixa ninguém sozinho: o app decide quem é Pro
   olhando só o campo `plan`. Quem vence continua Pro até alguém reparar — e
   "alguém reparar" não pode depender de ler uma data pequena em cinza numa
   tabela de trinta linhas.
   =========================================================================== */

.hl-assin-cel{ display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.hl-assin{
  font-size: var(--hl-fs-2xs);
  font-weight: 700;
  line-height: 1.3;
  color: var(--hl-subtle);
}
.hl-assin-data{ font-size: var(--hl-fs-2xs); color: var(--hl-subtle); opacity: .75; }

/* Vermelho é ação para HOJE: venceu, ou é Pro sem data nenhuma — este último é
   o pior dos dois, porque nunca vai vencer. */
.hl-assin--perigo{ color: var(--hl-danger); }
/* Amarelo é ação para a semana. */
.hl-assin--aviso{ color: var(--hl-gold2); }

/* ===========================================================================
   Tabela de comissões e origens — super_59
   ---------------------------------------------------------------------------
   O painel de cima responde "quanto"; estas duas seções respondem "quais" e
   "de onde". São perguntas diferentes e por isso ficam separadas, com título
   próprio, em vez de virarem mais números soltos no mesmo bloco.
   =========================================================================== */

.hl-fin-sec{ margin-top: var(--hl-sp-5); }
.hl-fin-sec-titulo{
  display: flex;
  align-items: center;
  gap: var(--hl-sp-2);
  margin: 0 0 var(--hl-sp-3);
  font-size: var(--hl-fs-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--hl-subtle);
}

/* ---- De onde veio o dinheiro ---- */

.hl-orig{ display: grid; gap: var(--hl-sp-2); }
.hl-orig-linha{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 2fr auto;
  grid-template-areas: "nome trilho valor" "nome trilho qtd";
  align-items: center;
  gap: 0 var(--hl-sp-3);
}
.hl-orig-nome{
  grid-area: nome;
  font-size: var(--hl-fs-sm);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hl-orig-trilho{
  grid-area: trilho;
  height: 8px;
  border-radius: 999px;
  background: var(--hl-surface-2);
  overflow: hidden;
}
.hl-orig-barra{ display: block; height: 100%; border-radius: 999px; background: var(--hl-success); }
.hl-orig-valor{
  grid-area: valor;
  text-align: right;
  font-size: var(--hl-fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hl-orig-qtd{ grid-area: qtd; text-align: right; font-size: var(--hl-fs-2xs); color: var(--hl-subtle); white-space: nowrap; }

/* ---- Negócios fechados ---- */

/* A rolagem é da TABELA, não da página: numa tela estreita o corpo inteiro
   deslizaria de lado, e isso é o que faz o app parecer quebrado. */
.hl-tab-rolagem{ overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hl-tab-com{ width: 100%; border-collapse: collapse; font-size: var(--hl-fs-sm); }
.hl-tab-com th{
  text-align: left;
  padding: var(--hl-sp-2) var(--hl-sp-3);
  font-size: var(--hl-fs-2xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--hl-subtle);
  border-bottom: 1px solid var(--hl-border);
  white-space: nowrap;
}
.hl-tab-com td{ padding: var(--hl-sp-3); border-bottom: 1px solid var(--hl-border); vertical-align: top; }
.hl-tab-com td small{ display: block; margin-top: 2px; font-size: var(--hl-fs-2xs); color: var(--hl-subtle); }
.hl-tab-num{ text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

.hl-tab-linha{ cursor: pointer; }
.hl-tab-linha:hover{ background: var(--hl-surface-2); }
.hl-tab-linha:focus-visible{ outline: none; box-shadow: var(--hl-ring); }
/* A linha sem valor informado é a única que pede ação, e diz qual. */
.hl-tab-linha.is-sem-valor{ background: var(--hl-gold-soft); }
.hl-tab-falta{ color: var(--hl-gold2); font-weight: 700; }

.hl-tab-com tfoot td{
  border-bottom: 0;
  padding-top: var(--hl-sp-3);
  font-weight: 750;
  color: var(--hl-text);
}

/* ---- Filtro e busca da tabela ---- */

.hl-tab-filtros{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--hl-sp-3);
  margin-top: var(--hl-sp-5);
}
/* A busca cresce e os períodos ficam inteiros: espremer os botões faria o
   rótulo quebrar, e "Semana" em duas linhas some no meio da tela. */
.hl-tab-filtros .hl-input{ flex: 1 1 220px; min-width: 0; }
.hl-tab-periodos{ display: flex; flex: none; gap: 2px; padding: 3px; border-radius: 999px; background: var(--hl-surface-2); }
.hl-tab-periodo{
  padding: 8px var(--hl-sp-3);
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--hl-subtle);
  font-family: inherit;
  font-size: var(--hl-fs-2xs);
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.hl-tab-periodo:hover{ color: var(--hl-text); }
.hl-tab-periodo:focus-visible{ outline: none; box-shadow: var(--hl-ring); }
.hl-tab-periodo.is-ativo{ background: var(--hl-gold2); color: #0b1020; }

.hl-tab-data{ white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--hl-subtle); }
.hl-tab-acao{ width: 1%; white-space: nowrap; }
/* O excluir fica apagado até o dedo chegar: é destrutivo e não pode competir
   com a linha, que é o gesto comum. */
.hl-tab-excluir{ min-width: 34px; min-height: 34px; opacity: .45; }
.hl-tab-linha:hover .hl-tab-excluir,
.hl-tab-excluir:focus-visible{ opacity: 1; border-color: var(--hl-danger-border); color: var(--hl-danger); }

/* Só para leitor de tela: o cabeçalho da coluna de ações não precisa ocupar
   espaço, mas precisa existir para a tabela ter significado. */
.hl-sr{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ===========================================================================
   Mobile first: nada empurra a página de lado — super_59
   ---------------------------------------------------------------------------
   Barra de rolagem horizontal é o defeito que faz um PWA parecer site quebrado:
   a tela "escorrega" no polegar e o conteúdo nunca fica alinhado. Medido num
   viewport de 371px, o dashboard vazava 153px, e o formulário aberto por cima
   herdava a barra — parecia bug do formulário, e era da tela debaixo.
   =========================================================================== */

/* 1. A saudação. `.hl-user-row` é flex, e o filho nasce com min-width:auto —
      com o e-mail em `nowrap`, o min-content é a linha inteira e o item se
      recusa a encolher. Vazava 27px. É a mesma causa do card do super_57, num
      elemento que ele não alcançou. */
.hl-user-row > *{ min-width: 0; }

/* 2. A tabela de comissões. Sete colunas não cabem em 371px, e rolar de lado
      dentro de um card é gesto que ninguém descobre. Abaixo de 720px a tabela
      deixa de ser tabela: cada negócio vira um cartão, e cada valor carrega o
      nome da coluna consigo. Zero rolagem horizontal. */
@media (max-width: 719px){
  .hl-tab-rolagem{ overflow-x: visible; }
  .hl-tab-com,
  .hl-tab-com tbody,
  .hl-tab-com tfoot,
  .hl-tab-com tr,
  .hl-tab-com td{ display: block; width: auto; }

  /* O cabeçalho some: cada célula passa a dizer o próprio nome. */
  .hl-tab-com thead{ display: none; }

  .hl-tab-com tbody tr{
    position: relative;
    margin-bottom: var(--hl-sp-3);
    padding: var(--hl-sp-3);
    border: 1px solid var(--hl-border);
    border-radius: var(--hl-radius-md);
    background: var(--hl-surface-2);
  }
  .hl-tab-com td{
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--hl-sp-3);
    padding: 4px 0;
    border-bottom: 0;
    text-align: left;
  }
  .hl-tab-com td::before{
    content: attr(data-rotulo);
    flex: none;
    font-size: var(--hl-fs-2xs);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--hl-subtle);
  }
  /* A célula sem rótulo é a do botão: ela vira o canto do cartão. */
  .hl-tab-com td:not([data-rotulo]){ padding: 0; }
  .hl-tab-com .hl-tab-acao{ position: absolute; top: var(--hl-sp-2); right: var(--hl-sp-2); width: auto; }
  .hl-tab-com .hl-tab-num{ text-align: right; }

  /* O total deixa de ser linha de rodapé e vira o fecho da lista. */
  .hl-tab-com tfoot tr{ display: flex; justify-content: space-between; gap: var(--hl-sp-3); padding-top: var(--hl-sp-2); }
  .hl-tab-com tfoot td{ padding: 0; border: 0; }
  .hl-tab-com tfoot td:empty{ display: none; }
}

/* A barra de rolagem reserva o lugar dela.
   Sem isto, abrir um modal trava a rolagem do corpo, a barra some, a viewport
   ganha ~15px e a tela inteira dá um salto lateral. Medido: clientWidth vai de
   371 para 386 no instante em que o formulário abre. */
html{ scrollbar-gutter: stable; }

/* ===========================================================================
   Agenda — "Próximos dias"
   ===========================================================================
   A faixa é a ÚNICA coisa da tela autorizada a rolar na horizontal, e rola
   dentro de si mesma: `overflow-x:auto` aqui, e nunca no corpo da página. Sete
   pílulas de 60px não cabem em 320px, e a alternativa (encolher até caber)
   devolveria alvo de toque menor que o mínimo. */

.hl-agenda-faixa{
  display: flex;
  gap: 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 2px 0 8px;
  margin: 0 0 4px;
}
.hl-agenda-faixa::-webkit-scrollbar{ display: none; }

.hl-agenda-dia{
  /* Cresce para ocupar a linha, encolhe ate 38px. Em 360px os sete dias cabem
     de uma vez, que e a razao de existir da faixa; abaixo disso ela rola dentro
     de si mesma, e nunca na pagina. */
  flex: 1 1 38px;
  min-width: 38px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 2px;
  border-radius: 12px;
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(2,6,23,.55);
  color: var(--hl-text);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.hl-agenda-dia-rot{ font-size: 11px; color: var(--hl-muted); }
.hl-agenda-dia-num{ font-size: 16px; font-weight: 700; line-height: 1.1; }
.hl-agenda-dia-n{
  font-size: 11px;
  font-weight: 700;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(250,204,21,.16);
  color: var(--hl-gold2, #facc15);
}
/* Dia vazio não compete por atenção: o traço fica apagado de propósito. */
.hl-agenda-dia-n--vazio{ background: transparent; color: rgba(148,163,184,.5); font-weight: 400; }

/* Hoje é uma pista de orientação; selecionado é o que a lista abaixo mostra.
   São coisas diferentes e podem não ser o mesmo dia — por isso duas marcas. */
.hl-agenda-dia.is-hoje .hl-agenda-dia-rot{ color: var(--hl-gold2, #facc15); }
.hl-agenda-dia.is-ativo{
  border-color: rgba(250,204,21,.85);
  background: rgba(250,204,21,.10);
}
.hl-agenda-dia.is-atrasado .hl-agenda-dia-n{
  background: rgba(248,113,113,.18);
  color: #fca5a5;
}

.hl-agenda-lista{ display: flex; flex-direction: column; gap: 8px; }

.hl-agenda-item{
  display: flex;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid rgba(148,163,184,.18);
  background: rgba(2,6,23,.5);
}
.hl-agenda-item.is-atrasado{ border-color: rgba(248,113,113,.45); }

/* A hora é a âncora da leitura: largura fixa para as linhas alinharem numa
   coluna só, em vez de dançar conforme "09:00" ou "dia todo". */
.hl-agenda-hora{
  flex: none;
  width: 56px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 700;
  color: var(--hl-gold2, #facc15);
  padding-top: 2px;
}
/* O dia de origem de quem venceu: menor que a hora, porque a hora continua
   sendo o dado principal da linha. */
.hl-agenda-venceu{ font-size: 10px; font-weight: 700; color: #fca5a5; }
.hl-agenda-hora-h{ line-height: 1.2; }
.hl-agenda-item.is-atrasado .hl-agenda-hora{ color: #fca5a5; }

/* min-width:0 em toda a coluna de texto: sem isso um título longo sem espaço
   define o mínimo do flex e empurra o cartão para fora da tela. */
.hl-agenda-corpo{ flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.hl-agenda-topo{ display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.hl-agenda-titulo{ font-size: 14px; min-width: 0; overflow-wrap: anywhere; }
.hl-agenda-tag{
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--hl-muted);
  border: 1px solid rgba(148,163,184,.25);
  border-radius: 999px;
  padding: 1px 7px;
}
.hl-agenda-ctx{
  margin: 0;
  font-size: 12px;
  color: var(--hl-muted);
  overflow-wrap: anywhere;
}
.hl-agenda-acoes{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }