/* ===========================================================================
HouseLeads — camada de interface (ui.css)
---------------------------------------------------------------------------
Carregada DEPOIS de theme.css. Terceira camada, mesma regra das anteriores:
aditiva e reversível — remover o 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); font-family: var(--hl-font); resize: vertical; }
/* 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
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; }
/* Interface 2026: superfícies neutras, hierarquia e espaço de trabalho. */
:root { --hl-card-pad: 24px; --hl-sidebar: 224px; --hl-topbar-h: 76px; }
html { scrollbar-color: #4b515b transparent; }
body.hl-body { background: var(--hl-bg); }
.hl-header { background: rgba(16,18,20,.95); border-color: var(--hl-border); z-index: 80; }
.hl-splash { background: var(--hl-bg); }
.hl-header-inner { max-width: none; min-height: var(--hl-topbar-h); padding: 14px 28px; }
.hl-header .hl-logo-img { width: 170px; height: auto; max-height: 42px; object-fit: contain; }
.hl-header-actions { display: flex; align-items: center; gap: 16px; }
.hl-workspace-label { color: var(--hl-subtle); font-size: 13px; }
.hl-eyebrow { display: block; color: var(--hl-gold2); font-size: 10px; font-weight: 650; letter-spacing: .14em; line-height: 1.5; }
.hl-page-description, .hl-modal-description, .hl-auth-description { color: var(--hl-muted); font-size: 13px; line-height: 1.6; margin: 6px 0 0; }
.hl-skip-link { position: fixed; top: -80px; left: 16px; z-index: 300; padding: 12px 20px; background: var(--hl-gold); color: #181a1e; border-radius: 8px; }
.hl-skip-link:focus { top: 12px; }
.hl-main { padding-top: 28px; }
.hl-card { background: var(--hl-surface-1); border-color: var(--hl-border); box-shadow: none; margin-bottom: 20px; gap: 18px; }
.hl-card .hl-card { background: var(--hl-surface-2); }
.hl-section-title { font-size: 16px; letter-spacing: -.025em; font-weight: 650; }
.hl-card-header-row { gap: 14px; flex-wrap: wrap; align-items: center; }
.hl-card-header-row > div:first-child { flex: 1 1 180px; min-width: 0; }
.hl-view > .hl-card:first-child .hl-card-header-row h2 { font-size: clamp(22px, 2.5vw, 28px); margin: 4px 0 0; }
.hl-card-user { border: 0; background: transparent; padding: 6px 0 12px; }
.hl-user-row { display: block; }
.hl-user-row > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; align-items: center; width: 100%; }
.hl-user-row .hl-eyebrow, .hl-user-title, .hl-user-subtitle, #hl-plano-info { grid-column: 1; }
.hl-user-title { font-size: clamp(24px, 3vw, 32px); font-weight: 650; line-height: 1.3; letter-spacing: -.04em; margin: 4px 0; }
.hl-user-subtitle { margin: 0; color: var(--hl-muted); font-size: 14px; }
.hl-dashboard-quick { grid-column: 2; grid-row: 1 / 5; margin: 0; align-self: center; }
.hl-btn { font-size: 13px; font-weight: 600; border-radius: 9px; }
.hl-btn-primary { background: var(--hl-gold); color: #191b1e; border: 1px solid transparent; box-shadow: none; }
.hl-btn-primary:hover { background: var(--hl-gold2); box-shadow: none; }
.hl-btn-outline, .hl-btn-ghost { background: transparent; border-color: var(--hl-border-strong); color: var(--hl-text); box-shadow: none; }
.hl-btn-outline:hover, .hl-btn-ghost:hover { background: var(--hl-surface-3); border-color: var(--hl-border-strong); }
.hl-icon-btn { background: transparent; }
.hl-btn-danger { background: var(--hl-danger-soft); color: #fecdd3; }
.hl-input, select, input:not([type="checkbox"]):not([type="radio"]), textarea { background: var(--hl-bg); border-color: var(--hl-border-strong); border-radius: 9px; }
.hl-input:hover, select:hover, textarea:hover { border-color: #68707b; }
.hl-input:focus, select:focus, textarea:focus { border-color: var(--hl-gold); }
.hl-label { color: #c8ccd1; font-weight: 500; font-size: 12px; }
.hl-field-help { line-height: 1.6; }
.hl-form { gap: 20px; }
.hl-chip, .hl-task-chip, .hl-tipo-chip { border-radius: 6px; font-weight: 500; }
.hl-tipo-chip { margin-bottom: 0; }
.hl-toolbar { background: transparent; padding: 0; border: 0; gap: 12px; }
.hl-toolbar-meta { background: var(--hl-surface-3); color: var(--hl-muted); border-radius: 8px; min-width: 44px; text-align: center; padding: 12px; }
.hl-list-item, .hl-action-card, .hl-task-card { background: var(--hl-surface-2); padding: 18px; border-radius: 12px; box-shadow: none; }
.hl-list-item:hover { border-color: var(--hl-border-strong); }
.hl-list-title { font-size: 16px; font-weight: 600; }
.hl-list-sub { font-size: 13px; line-height: 1.65; }
.hl-list-top { gap: 12px; }
.hl-list-top > div:first-child { min-width: 0; }
.hl-pagination { border-top: 1px solid var(--hl-border); padding-top: 18px; margin-top: 6px; }
.hl-resumo-list { display: grid; gap: 6px; }
.hl-resumo-list li { display: flex; align-items: baseline; gap: 6px; font-size: 13px; border-bottom: 1px solid var(--hl-border); padding: 10px 0; }
.hl-resumo-list li:last-child { border-bottom: 0; }
.hl-progress { height: 6px; background: var(--hl-surface-3); }
.hl-progress-bar { background: var(--hl-gold); box-shadow: none; }
.hl-plan-cta-box { background: var(--hl-gold-soft); border-color: var(--hl-gold-border); border-radius: 12px; }
.hl-focus-card, .hl-focus-builder { background: transparent; border-color: var(--hl-border); }
.hl-focus-time { font-size: clamp(40px, 5vw, 56px); font-weight: 500; letter-spacing: -.05em; color: var(--hl-text); font-variant-numeric: tabular-nums; }
.hl-agenda-dia { background: var(--hl-surface-2); border-color: transparent; }
.hl-agenda-dia.is-ativo { background: var(--hl-gold-soft); border-color: var(--hl-gold-border); }
.hl-agenda-item { background: var(--hl-surface-2); border-radius: 10px; padding: 16px; }
.hl-pipeline { scrollbar-width: thin; padding-bottom: 16px; }
.hl-pipeline-column { background: #15181b; border: 1px solid var(--hl-border); border-radius: 12px; padding: 14px; }
.hl-pipeline-title { color: var(--hl-text); font-size: 13px; }
.hl-pipeline-resumo { color: var(--hl-muted); font-size: 12px; line-height: 1.5; }
.hl-pipeline-card { background: var(--hl-surface-2); border-radius: 10px; box-shadow: var(--hl-shadow-sm); padding: 16px; }
.hl-pipeline-card-head { flex-wrap: wrap; }
.hl-pipeline-head-acoes { margin-left: auto; }
.hl-pipeline-card-body { gap: 12px; }
.hl-pipeline-numeros, .hl-passo { background: var(--hl-surface-1); }
.hl-pipeline-card-footer { gap: 8px; flex-wrap: wrap; }
.hl-pipeline-card-footer > .hl-btn { flex: 1 1 120px; }
.hl-passo.is-completo { background: var(--hl-success-soft); }
.hl-metrica-card { background: var(--hl-surface-2); padding: 20px; border-radius: 12px; }
.hl-bottom-nav { background: #15181b; border-color: var(--hl-border); gap: 6px; }
.hl-nav-btn { color: var(--hl-muted); border: 1px solid transparent; border-radius: 9px; }
.hl-nav-btn:hover { color: var(--hl-text); background: var(--hl-surface-2); }
.hl-nav-btn-active { background: var(--hl-gold-soft); color: var(--hl-gold2); border-color: transparent; }
.hl-nav-btn-active:hover { background: var(--hl-gold-soft); }
.hl-nav-caption { display: none; }
.hl-fab { background: var(--hl-gold); color: #191b1e; border-radius: 18px; box-shadow: 0 6px 22px rgba(0,0,0,.3); }
.hl-modal-backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(8px); }
.hl-modal-dialog { background: var(--hl-surface-1); border: 1px solid var(--hl-border-strong); border-radius: 18px; box-shadow: var(--hl-shadow-lg); width: min(600px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); }
.hl-modal-head { flex: none; padding: 22px 24px; gap: 20px; align-items: flex-start; background: var(--hl-surface-1); }
.hl-modal-title { font-size: 20px; font-weight: 650; letter-spacing: -.035em; }
.hl-modal-head .hl-eyebrow { margin-bottom: 6px; }
.hl-modal-body { padding: 24px; min-height: 0; scrollbar-width: thin; }
.hl-modal-body > * { flex-shrink: 0; }
.hl-modal-body .hl-grid-2, .hl-modal-body .hl-form-inline-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hl-modal-captacao { width: min(660px, calc(100vw - 32px)); }
.hl-captacao-codigo { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding-bottom: 4px; }
.hl-form-section-title { display: flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; color: var(--hl-text); margin: 8px 0 0; }
.hl-form-section-title > span { font-size: 11px; color: var(--hl-gold2); font-variant-numeric: tabular-nums; }
.hl-captacao-detalhes { display: flex; flex-direction: column; gap: 20px; background: var(--hl-surface-2); padding: 20px; border: 1px solid var(--hl-border); border-radius: 12px; }
.hl-captacao-detalhes .hl-form-section-title { margin-top: 0; }
#imovel-toggle-detalhes { justify-content: flex-start; border-style: dashed; color: var(--hl-gold2); min-height: 48px; white-space: normal; text-align: left; }
.hl-modal-actions { position: sticky; bottom: -24px; margin: 4px -24px -24px; padding: 18px 24px max(18px, var(--hl-safe-bottom)); background: var(--hl-surface-1); border-top: 1px solid var(--hl-border); z-index: 2; }
.hl-modal-actions-row { display: flex; gap: 12px; justify-content: flex-end; }
.hl-modal-actions-row > .hl-btn-primary { min-width: 180px; }
.hl-form-error { margin: 0 0 14px; padding: 12px 14px; border: 1px solid var(--hl-danger-border); border-radius: 9px; background: var(--hl-danger-soft); color: #ffd0d8; font-size: 13px; line-height: 1.6; }
.hl-toast { background: var(--hl-surface-3); border-color: var(--hl-border-strong); box-shadow: var(--hl-shadow-lg); border-radius: 12px; padding: 16px 20px; }
.hl-body:has(.hl-modal.is-open) .hl-toast { top: 20px; bottom: auto; }
.hl-auth { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; width: min(1040px, calc(100% - 40px)); max-width: 1040px; padding: 48px 0; margin: 0 auto; align-items: center; }
.hl-auth-intro { display: none; }
.hl-auth .hl-card-auth { width: 100%; max-width: 440px; margin: 0 auto; padding: 36px; border-color: var(--hl-border-strong); }
.hl-auth .hl-title { font-size: 28px; font-weight: 650; letter-spacing: -.04em; margin: 10px 0 0; }
.hl-auth-description { margin-bottom: 28px; }
.hl-auth-extra { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; margin: 24px 0 0; border-top: 1px solid var(--hl-border); padding-top: 16px; }
.hl-auth-extra > span { flex-basis: 100%; color: var(--hl-muted); }
.hl-auth-preview { padding: 28px; border: 1px solid var(--hl-border-strong); border-radius: 16px; background: var(--hl-surface-1); margin-top: 36px; max-width: 380px; transform: rotate(-2deg); }
.hl-auth-preview strong { display: block; font-size: 23px; line-height: 1.5; font-weight: 500; margin: 20px 0; }
.hl-auth-preview small { color: var(--hl-muted); }
.hl-auth-progress { display: flex; gap: 5px; margin: 20px 0; }
.hl-auth-progress span { width: 34px; height: 5px; border-radius: 4px; background: var(--hl-surface-3); }
.hl-auth-progress span:nth-child(-n+4) { background: var(--hl-gold); }
.hl-property-card { display: flex; flex-direction: column; gap: 14px; }
.hl-property-heading { display: flex; align-items: center; gap: 12px; }
.hl-property-symbol { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 10px; background: var(--hl-gold-soft); color: var(--hl-gold2); }
.hl-property-heading small { display: block; color: var(--hl-subtle); margin-bottom: 2px; font-size: 11px; }
.hl-property-card .hl-list-title { margin: 0; line-height: 1.4; }
.hl-property-price { font-size: 23px; font-weight: 600; letter-spacing: -.03em; margin: 0; }
.hl-property-price small { font-size: 12px; color: var(--hl-muted); font-weight: 400; letter-spacing: 0; }
.hl-property-details { color: var(--hl-muted); font-size: 13px; margin: 0; line-height: 1.6; }
.hl-property-footer { display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--hl-border); padding-top: 14px; margin-top: auto; }
.hl-funnel-stack { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 12px 0; width: 100%; max-width: 920px; margin: 0 auto; counter-reset: hl-fase; }
.hl-funnel-step { --fase: #738bff; --w: 100%; width: var(--w); min-width: 0; min-height: 88px; padding: 13px 32px; clip-path: polygon(2.5% 0,100% 0,97.5% 100%,0 100%); border-radius: 12px; background: linear-gradient(115deg, color-mix(in srgb,var(--fase) 42%,#151b30), color-mix(in srgb,var(--fase) 86%,#151b30)); border: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.28), inset 0 -1px 0 rgba(0,0,0,.22); position: relative; isolation: isolate; counter-increment: hl-fase; transition: transform .2s ease; }
.hl-funnel-step:hover { transform: translateY(-2px); }
.hl-funnel-step::after { content: "0" counter(hl-fase); position: absolute; left: 6%; top: 50%; transform: translateY(-50%); font-size: 78px; font-weight: 800; letter-spacing: -.08em; line-height: 1; color: rgba(255,255,255,.11); pointer-events: none; z-index: -1; }
.hl-funnel-step--1 { --fase: #637df8; --w: 100%; }
.hl-funnel-step--2 { --fase: #7d6aef; --w: 94%; }
.hl-funnel-step--3 { --fase: #9c6bdd; --w: 88%; }
.hl-funnel-step--4 { --fase: #c88385; --w: 82%; }
.hl-funnel-step--5 { --fase: #dba557; --w: 76%; }
.hl-funnel-step--6 { --fase: #51b499; --w: 70%; }
.hl-funnel-step__copy { align-items: center; text-align: center; gap: 4px; }
.hl-funnel-step__macro { color: #fff; opacity: .7; font-size: 9px; letter-spacing: .15em; font-weight: 500; }
.hl-funnel-step__headline { display: inline-flex; width: auto; align-items: center; justify-content: center; gap: 12px; flex-wrap: nowrap; }
.hl-funnel-step__label { color: #fff; font-size: 22px; font-weight: 650; line-height: 1.3; letter-spacing: -.03em; white-space: nowrap; overflow-wrap: normal; }
.hl-funnel-step__count { width: auto; min-width: 36px; height: 36px; padding: 0 8px; color: #fff; background: rgba(13,19,35,.22); border: 1px solid rgba(255,255,255,.2); border-radius: 11px; box-shadow: none; font-size: 17px; font-weight: 650; }
.hl-funnel-step__detail { color: #fff; font-size: 11px; line-height: 1.5; opacity: .82; }
#lista-imoveis { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
#lista-imoveis > .hl-vazio { grid-column: 1 / -1; }
@media (min-width: 900px) {
.hl-main { padding: 32px 32px 40px calc(var(--hl-sidebar) + 32px); }
.hl-bottom-nav { padding: calc(var(--hl-topbar-h) + 30px) 16px 24px; }
.hl-nav-caption { display: block; font-size: 9px; letter-spacing: .12em; color: var(--hl-subtle); padding: 0 12px 16px; }
.hl-nav-btn { min-height: 46px; padding: 0 14px; gap: 12px; }
.hl-nav-txt { font-size: 13px; }
.hl-auth { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); min-height: calc(100dvh - var(--hl-topbar-h)); gap: 70px; }
.hl-auth-intro { display: block; }
.hl-auth-intro h1 { font-size: clamp(40px, 4.5vw, 58px); font-weight: 600; line-height: 1.12; letter-spacing: -.055em; margin: 18px 0; }
.hl-auth-intro > p { max-width: 42ch; color: var(--hl-muted); line-height: 1.8; }
#lista-imoveis { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.hl-pipeline { display: flex; gap: 16px; overflow-x: auto; align-items: stretch; }
.hl-pipeline-column { flex: 1 0 290px; min-width: 290px; }
.hl-toast { left: auto; right: 28px; bottom: 28px; transform: none; width: min(420px, calc(100vw - 48px)); }
.hl-body:has(.hl-modal.is-open) .hl-toast { top: 20px; }
}
@media (min-width: 1800px) { .hl-pipeline-column { flex-basis: 260px; min-width: 260px; } }
@media (max-width: 899px) {
:root { --hl-card-pad: 20px; }
.hl-header-inner { min-height: 64px; padding: 12px 20px; }
.hl-main { padding-top: 22px; }
.hl-workspace-label { display: none; }
.hl-user-row > div { display: block; }
.hl-dashboard-quick { margin-top: 18px; }
.hl-bottom-nav { gap: 2px; padding-inline: 8px; }
.hl-nav-btn { padding-inline: 3px; }
.hl-nav-txt { font-size: 10px; }
.hl-card-user { padding: 0; }
}
@media (max-width: 540px) {
:root { --hl-card-pad: 16px; }
.hl-main { padding-inline: 14px; }
.hl-card { margin-bottom: 16px; gap: 16px; }
.hl-modal-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); border-radius: 14px; }
.hl-modal-head { padding: 18px; }
.hl-modal-body { padding: 18px; }
.hl-modal-description { max-width: 32ch; font-size: 12px; }
.hl-modal-body .hl-grid-2 { gap: 12px; }
.hl-captacao-detalhes { padding: 14px; }
.hl-modal-actions { margin: 0 -18px -18px; bottom: -18px; padding: 14px 18px max(14px, var(--hl-safe-bottom)); }
.hl-modal-actions-row > .hl-btn-primary { min-width: 0; flex: 1; }
.hl-modal-actions-row { gap: 10px; }
.hl-auth { width: calc(100% - 28px); padding: 30px 0; }
.hl-auth .hl-card-auth { padding: 26px 22px; }
.hl-header .hl-logo-img { width: 145px; }
.hl-card-header-row > .hl-btn { flex: 1 1 auto; }
.hl-funnel-step { min-height: 80px; padding: 10px 22px; }
.hl-funnel-step__label { font-size: 17px; }
.hl-funnel-step__count { min-width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
.hl-funnel-step__detail { font-size: 10px; max-width: 26ch; }
}
@media (max-width: 359px) {
.hl-modal-body .hl-grid-2, .hl-modal-body .hl-form-inline-2 { grid-template-columns: minmax(0, 1fr); }
.hl-modal-head .hl-modal-description { display: none; }
}
/* CRM de atendimento: fila comercial, filtros e ficha lateral. */
.hl-op-views { display: flex; flex-wrap: wrap; gap: 6px; border: 1px solid var(--hl-border); border-radius: 12px; padding: 5px; width: fit-content; margin: 4px 0 18px; background: var(--hl-bg); }
.hl-op-views button { border: 0; background: transparent; color: var(--hl-muted); border-radius: 8px; padding: 10px 16px; min-height: 40px; cursor: pointer; font: 500 13px var(--hl-font); }
.hl-op-views button[aria-pressed="true"] { color: #1b1d20; background: var(--hl-gold); }
.hl-op-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.hl-op-head h3 { margin: 6px 0; font-size: 19px; }
.hl-op-form { padding: 20px; border: 1px solid var(--hl-border); border-radius: 12px; background: var(--hl-surface-2); margin: 16px 0 24px; }
.hl-op-fieldset { border: 1px solid var(--hl-border-strong); border-radius: 10px; padding: 16px; display: grid; gap: 14px; min-width: 0; margin: 0; }
.hl-op-fieldset legend { padding: 0 6px; color: var(--hl-muted); font-size: 12px; }
.hl-op-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.7; cursor: pointer; }
.hl-op-check input { flex: none; margin: 5px 0 0; accent-color: var(--hl-gold); width: 17px; height: 17px; }
.hl-op-records { display: grid; gap: 12px; margin: 18px 0 26px; }
.hl-op-record { border: 1px solid var(--hl-border); border-radius: 12px; padding: 18px; min-width: 0; background: var(--hl-surface-2); color: var(--hl-text); }
.hl-op-record p { font-size: 13px; color: var(--hl-muted); line-height: 1.7; margin: 8px 0; overflow-wrap: anywhere; }
.hl-op-record > button { margin-top: 12px; }
.hl-op-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.hl-op-record details { border-top: 1px solid var(--hl-border); margin-top: 16px; padding-top: 14px; }
.hl-op-record summary, .hl-op-details summary { cursor: pointer; color: var(--hl-gold2); font-size: 13px; line-height: 1.7; padding: 6px 0; }
.hl-op-version { border-left: 2px solid var(--hl-border-strong); padding: 10px 14px; margin-top: 14px; }
.hl-op-version strong { font-size: 13px; }
.hl-op-checklist { list-style: none; padding: 14px; display: flex; flex-wrap: wrap; gap: 10px 16px; border: 1px solid var(--hl-border); border-radius: 10px; background: var(--hl-bg); }
.hl-op-checklist li { font-size: 12px; color: var(--hl-muted); }
.hl-op-checklist li.is-ok { color: var(--hl-success); }
.hl-op-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.hl-op-price-history { list-style: none; padding: 0; }
.hl-op-price-history li { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--hl-border); font-size: 13px; }
.hl-op-price-history span, .hl-op-price-history small { color: var(--hl-muted); line-height: 1.6; }
.hl-op-person-counts { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.hl-op-person-counts strong { font-size: 12px; padding: 10px 12px; background: var(--hl-gold-soft); border: 1px solid var(--hl-gold-border); border-radius: 9px; }
.hl-op-person-deal { text-align: left; display: grid; gap: 8px; cursor: pointer; font: inherit; width: 100%; }
.hl-op-person-deal:hover { border-color: var(--hl-gold); }
.hl-op-person-deal strong { font-size: 14px; overflow-wrap: anywhere; }
.hl-op-person-deal span { font-size: 12px; color: var(--hl-muted); line-height: 1.6; overflow-wrap: anywhere; }
.hl-op-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.hl-op-metrics > div { display: grid; gap: 7px; border: 1px solid var(--hl-border); border-radius: 12px; padding: 20px; background: var(--hl-surface-2); }
.hl-op-metrics strong { font-size: 30px; font-weight: 500; color: var(--hl-gold2); }
.hl-op-metrics span { font-size: 13px; }
.hl-op-metrics small { font-size: 11px; color: var(--hl-muted); line-height: 1.6; }
.hl-op-details { border-top: 1px solid var(--hl-border); padding-top: 10px; }
.hl-op-reminder { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.hl-op-reminder > :first-child { flex: 1; min-width: 140px; white-space: normal; text-align: left; }
.hl-property-footer { flex-wrap: wrap; }
@media (max-width: 640px) {
.hl-op-metrics { grid-template-columns: minmax(0,1fr); }
.hl-op-metrics > div { grid-template-columns: auto minmax(0,1fr); gap: 5px 16px; padding: 16px; }
.hl-op-metrics strong { grid-row: 1/3; align-self: center; }
.hl-op-form { padding: 14px; }
.hl-op-views { width: 100%; }
.hl-op-views button { flex: 1; padding: 9px 10px; font-size: 12px; }
.hl-op-fieldset { padding: 12px; }
.hl-op-record { padding: 14px; }
.hl-op-actions > button { flex: 1 1 180px; }
}
.hl-inline-notice { display: block; padding: 12px 14px; border: 1px solid var(--hl-gold-border); border-radius: 10px; background: var(--hl-gold-soft); color: var(--hl-muted); font-size: 12px; line-height: 1.6; }
.hl-commercial-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.hl-commercial-head h3 { font-size: 19px; font-weight: 600; letter-spacing: -.035em; margin: 5px 0 0; }
.hl-commercial-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.hl-commercial-kpi { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 5px 8px; text-align: left; padding: 20px; background: var(--hl-surface-2); color: var(--hl-text); border: 1px solid var(--hl-border); border-radius: 12px; cursor: pointer; min-width: 0; }
.hl-commercial-kpi > span { font-size: 12px; color: var(--hl-muted); grid-column: 1/-1; }
.hl-commercial-kpi > strong { font: 500 34px/1.4 var(--hl-font-titulo); letter-spacing: -.04em; }
.hl-commercial-kpi > small { grid-column: 1/-1; color: var(--hl-subtle); font-size: 11px; line-height: 1.5; }
.hl-commercial-kpi > .hl-ico { grid-column: 2; grid-row: 2; align-self: center; color: var(--hl-subtle); }
.hl-commercial-kpi:hover { border-color: var(--hl-border-strong); background: var(--hl-surface-3); }
.hl-commercial-kpi--danger > strong { color: var(--hl-danger); }
.hl-commercial-kpi--info > strong { color: var(--hl-info); }
.hl-commercial-kpi--gold > strong { color: var(--hl-gold2); }
.hl-commercial-kpi--success > strong { color: var(--hl-success); }
.hl-sync-button { font-size: 12px; color: var(--hl-success); }
.hl-sync-button.is-pending { color: var(--hl-gold2); background: var(--hl-gold-soft); }
.hl-pipeline-toolbar { display: flex; align-items: end; gap: 16px; flex-wrap: wrap; }
.hl-pipeline-search { display: flex; flex-direction: column; gap: 7px; flex: 1 1 300px; }
.hl-pipeline-filters { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.hl-pipeline-filters .hl-input { font-size: 13px; min-height: 44px; }
.hl-pipeline-results { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--hl-muted); padding-bottom: 4px; border-bottom: 1px solid var(--hl-border); }
.hl-property-filters { display: grid; grid-template-columns: repeat(2,minmax(0,220px)); gap: 12px; }
.hl-lead-open { border: 0; background: transparent; color: inherit; font: inherit; text-align: left; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; }
.hl-lead-open:hover { text-decoration-color: var(--hl-gold); color: var(--hl-gold2); }
.hl-temperature { padding: 3px 7px; border: 1px solid var(--hl-border); border-radius: 6px; color: var(--hl-muted); font-size: 10px; white-space: nowrap; }
.hl-temperature--quente { color: #f8ae86; background: rgba(248,174,134,.08); border-color: rgba(248,174,134,.22); }
.hl-temperature--morno { color: var(--hl-gold2); background: var(--hl-gold-soft); }
.hl-temperature--frio { color: var(--hl-info); background: var(--hl-info-soft); }
.hl-modal-ficha { position: absolute; left: auto; right: 0; top: 0; bottom: 0; transform: none; width: min(840px,calc(100vw - 40px)); height: 100dvh; max-height: 100dvh; border-radius: 18px 0 0 18px; }
.hl-modal-ficha .hl-modal-body { padding: 28px; }
@media (min-width: 1100px) {
.hl-body:is(:has(#modal-ficha-lead.is-open),:has(#modal-operacao.is-open)) .hl-toast { left: 24px; right: auto; top: auto; bottom: 24px; transform: none; width: min(420px,calc(100vw - 888px)); }
}
.hl-dossier-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; min-width: 0; }
.hl-dossier-hero > div { min-width: 0; }
.hl-dossier-avatar { width: 64px; height: 64px; display: grid; place-items: center; flex: none; border-radius: 18px; background: linear-gradient(140deg,#5d5039,#282d33); color: var(--hl-gold2); font-size: 26px; font-weight: 500; border: 1px solid var(--hl-gold-border); }
.hl-dossier-hero h2 { font-size: clamp(23px,3vw,30px); font-weight: 600; letter-spacing: -.04em; line-height: 1.3; margin: 4px 0 6px; overflow-wrap: anywhere; }
.hl-dossier-hero p { color: var(--hl-muted); font-size: 13px; margin: 0; overflow-wrap: anywhere; }
.hl-dossier-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.hl-dossier-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: thin; border-bottom: 1px solid var(--hl-border); margin: 0 -28px 24px; padding: 0 20px; }
.hl-dossier-tabs > button { flex: 0 0 auto; min-height: 48px; padding: 10px 12px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--hl-muted); font: 500 13px var(--hl-font); cursor: pointer; white-space: nowrap; }
.hl-dossier-tabs > button[aria-selected="true"] { color: var(--hl-gold2); border-bottom-color: var(--hl-gold); }
.hl-dossier-panel { min-width: 0; }
.hl-dossier-next { padding: 20px; border: 1px solid var(--hl-gold-border); border-radius: 12px; background: var(--hl-gold-soft); margin-bottom: 22px; }
.hl-dossier-next > strong { display: block; font-size: 19px; margin-top: 8px; font-weight: 600; }
.hl-dossier-next p { margin: 8px 0 0; font-size: 13px; line-height: 1.7; color: var(--hl-muted); }
.hl-dossier-facts { margin: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.hl-dossier-facts > div { min-width: 0; padding-bottom: 16px; border-bottom: 1px solid var(--hl-border); }
.hl-dossier-facts dt { color: var(--hl-muted); font-size: 11px; margin-bottom: 6px; }
.hl-dossier-facts dd { margin: 0; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.hl-dossier-note { margin: 20px 0; padding: 18px; border: 1px solid var(--hl-border); border-radius: 12px; background: var(--hl-surface-2); }
.hl-dossier-note h3 { font-size: 13px; margin: 0 0 8px; font-weight: 600; }
.hl-dossier-note p, .hl-timeline p { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--hl-muted); font-size: 13px; line-height: 1.7; margin: 0; }
.hl-activity-form { background: var(--hl-surface-2); border: 1px solid var(--hl-border); border-radius: 12px; padding: 20px; margin-bottom: 28px; }
.hl-activity-form > .hl-btn { align-self: flex-end; }
.hl-timeline { list-style: none; padding: 0; margin: 20px 0 0; }
.hl-timeline > li { display: grid; grid-template-columns: 16px minmax(0,1fr); gap: 14px; padding: 0 0 24px; position: relative; }
.hl-timeline > li:not(:last-child)::before { content: ""; position: absolute; left: 7px; top: 15px; bottom: 0; width: 1px; background: var(--hl-border-strong); }
.hl-timeline-dot { width: 9px; height: 9px; margin: 5px 0 0 3px; border-radius: 50%; background: var(--hl-gold); box-shadow: 0 0 0 4px var(--hl-gold-soft); }
.hl-timeline-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.hl-timeline-head strong { font-size: 13px; font-weight: 600; }
.hl-timeline-head time { font-size: 11px; color: var(--hl-subtle); }
.hl-sync-pending { color: var(--hl-gold2); font-size: 11px; }
.hl-match-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.hl-match-card { min-width: 0; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--hl-border); padding: 18px; border-radius: 12px; background: var(--hl-surface-2); }
.hl-match-card h3 { font-size: 16px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
.hl-match-card > strong { font-size: 21px; font-weight: 500; }
.hl-match-card p { font-size: 12px; color: var(--hl-muted); margin: 0; line-height: 1.5; }
.hl-match-card p.hl-match-reasons { color: var(--hl-success); font-size: 11px; }
.hl-match-card > button { width: 100%; white-space: normal; margin-top: auto; }
@media (max-width: 1100px) { .hl-commercial-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .hl-pipeline-filters { grid-template-columns: repeat(3,minmax(0,1fr)); } .hl-workspace-label { display: none; } }
@media (max-width: 640px) {
.hl-header-inner { padding-inline: 14px; gap: 8px; }
.hl-header-actions { gap: 4px; }
.hl-header-actions .hl-btn { padding-inline: 10px; font-size: 12px; }
.hl-sync-button > span { display: none; }
.hl-body:is(:has(#modal-ficha-lead.is-open),:has(#modal-operacao.is-open)) .hl-toast { top: auto; bottom: 18px; }
.hl-header .hl-logo-img { width: 116px; }
.hl-commercial-kpi { padding: 14px; }
.hl-commercial-kpi > strong { font-size: 29px; }
.hl-pipeline-filters { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.hl-pipeline-filters .hl-input { font-size: 16px; }
.hl-modal-dialog.hl-modal-ficha { width: 100%; left: auto; right: 0; top: 0; bottom: 0; transform: none; border-radius: 0; border: 0; max-height: 100dvh; }
.hl-modal-ficha .hl-modal-body { padding: 20px; }
.hl-dossier-tabs { margin-inline: -20px; padding-inline: 10px; }
.hl-dossier-hero { gap: 12px; }
.hl-dossier-avatar { width: 48px; height: 48px; font-size: 23px; border-radius: 12px; }
.hl-dossier-actions .hl-btn { flex: 1 1 120px; }
.hl-dossier-facts { gap: 16px; }
.hl-match-list { grid-template-columns: minmax(0,1fr); }
.hl-property-filters { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 359px) { .hl-header .hl-logo-img { width: 98px; } .hl-header-actions .hl-btn { padding-inline: 7px; } .hl-dossier-facts { grid-template-columns: minmax(0,1fr); } }
.hl-import-body { display: grid; grid-template-columns: minmax(0,1fr); gap: 18px; min-width: 0; }
.hl-import-body > * { min-width: 0; max-width: 100%; }
.hl-import-steps { display: grid; grid-template-columns: minmax(0,1fr); gap: 20px; margin: 0; padding-left: 22px; }
.hl-import-steps li { min-width: 0; overflow-wrap: anywhere; }
.hl-import-steps li::marker { color: var(--hl-gold); font-weight: 700; }
.hl-import-steps p { color: var(--hl-muted); font-size: 13px; line-height: 1.6; margin: 7px 0; }
.hl-import-steps small { display: block; color: var(--hl-subtle); line-height: 1.6; margin-top: 8px; }
.hl-import-steps a { margin: 4px 6px 4px 0; white-space: normal; }
.hl-import-guide { border: 1px solid var(--hl-border); border-radius: 12px; padding: 16px; min-width: 0; }
.hl-import-guide summary { cursor: pointer; font-weight: 600; }
.hl-import-table-wrap { overflow-x: auto; max-width: 100%; border: 1px solid var(--hl-border); border-radius: 10px; margin: 12px 0; }
.hl-import-table { border-collapse: collapse; min-width: 580px; width: 100%; font-size: 12px; text-align: left; }
.hl-import-table th, .hl-import-table td { padding: 12px; border-bottom: 1px solid var(--hl-border); vertical-align: top; }
.hl-import-table th { color: var(--hl-text); font-weight: 600; }
.hl-import-table thead { background: var(--hl-surface-2); }
.hl-import-table td { color: var(--hl-muted); overflow-wrap: anywhere; }
.hl-import-table small { display: block; margin-top: 4px; }
.hl-import-counts { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 12px 0; color: var(--hl-muted); }
.hl-import-counts strong { color: var(--hl-text); }
.hl-import-file { overflow-wrap: anywhere; color: var(--hl-subtle); font-size: 12px; }
#importacao-resultado { min-width: 0; }
#importacao-resultado .hl-form-error { margin: 14px 0; }
.hl-body:has(#modal-importacao.is-open) .hl-toast { top: auto; bottom: 18px; }
.hl-owner-field { min-width: 0; }
.hl-owner-results { max-height: 250px; overflow-y: auto; border: 1px solid var(--hl-border); border-radius: 10px; background: var(--hl-surface-2); }
.hl-owner-results[hidden] { display: none; }
.hl-owner-results > button { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; width: 100%; min-height: 54px; padding: 12px; border: 0; border-bottom: 1px solid var(--hl-border); background: transparent; color: var(--hl-text); text-align: left; cursor: pointer; overflow-wrap: anywhere; font: inherit; }
.hl-owner-results > button:last-child { border-bottom: 0; }
.hl-owner-results > button:hover, .hl-owner-results > button[aria-selected="true"] { background: var(--hl-surface-3, var(--hl-bg)); outline: 1px solid var(--hl-gold); outline-offset: -1px; }
.hl-owner-results > button span, .hl-owner-results > button small { color: var(--hl-muted); font-size: 11px; line-height: 1.5; }
@media (max-width: 540px) { .hl-modal-body #imovel-bloco-dono { grid-template-columns: minmax(0,1fr); } }
.hl-property-location { margin: 0; min-width: 0; }
.hl-map-link { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 5px; min-height: 44px; max-width: 100%; padding-block: 5px; color: var(--hl-text); text-decoration: none; overflow-wrap: anywhere; }
.hl-map-link > span { text-decoration: underline; text-underline-offset: 3px; }
.hl-map-link small { color: var(--hl-gold); font-size: 12px; line-height: 1.5; }
.hl-map-link:hover > span { color: var(--hl-gold); }
.hl-map-link:focus-visible { outline: 2px solid var(--hl-gold); outline-offset: 4px; border-radius: 4px; }
/* Busca de vínculos: a lista ocupa o fluxo do modal também no celular. */
.hl-task-relations { align-items: start; }
.hl-relation-field { min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hl-relation-field > small { line-height: 1.5; min-height: 2.8em; }
.hl-relation-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.hl-relation-actions [hidden] { display: none; }
.hl-relation-field input { width: 100%; min-width: 0; }