/* ===========================================================================
   HouseLeads — Camada de repaginação (theme.css)
   ---------------------------------------------------------------------------
   Carregada DEPOIS de style.css. Não substitui nada: redefine os tokens
   --hl-* que o style.css já usa e repagina os componentes de maior tráfego.

   Por que assim: style.css tem 340 seletores acumulados por data. Reescrever
   do zero jogaria fora ajuste fino já aprovado (o funil, principalmente).
   Esta camada é aditiva e reversível — remover o <link> volta ao visual antigo.

   Regra de ouro do tema: o dourado é da MARCA e da AÇÃO PRINCIPAL.
   Estado (sucesso, atraso, informação) tem cor própria. Antes o dourado
   carregava todos os significados ao mesmo tempo, então nada se destacava.
   =========================================================================== */

:root{
  /* ---- Superfícies: profundidade real, em vez do mesmo gradiente em tudo ---- */
  --hl-bg:          #060910;
  --hl-surface-1:   #0e1421;   /* cards                        */
  --hl-surface-2:   #151d2e;   /* itens dentro de card         */
  --hl-surface-3:   #1c2537;   /* inputs, estados hover        */

  --hl-border:        rgba(148,163,184,.16);
  --hl-border-strong: rgba(148,163,184,.30);

  /* ---- Texto ---- */
  --hl-text:   #f2f5fa;
  --hl-muted:  #9aa6bb;   /* subiu o contraste: era #9ca3af   */
  --hl-subtle: #717d92;

  /* ---- Marca (inalterada de propósito — é a identidade) ---- */
  --hl-gold:  #facc15;
  --hl-gold2: #fbbf24;
  --hl-gold-soft:   rgba(250,204,21,.12);
  --hl-gold-border: rgba(250,204,21,.34);

  /* ---- Estado: cores próprias, para o dourado parar de significar tudo ---- */
  --hl-success:        #34d399;
  --hl-success-soft:   rgba(52,211,153,.12);
  --hl-success-border: rgba(52,211,153,.36);
  --hl-danger:         #fb7185;
  --hl-danger-soft:    rgba(251,113,133,.12);
  --hl-danger-border:  rgba(251,113,133,.38);
  --hl-info:           #60a5fa;
  --hl-info-soft:      rgba(96,165,250,.12);
  --hl-info-border:    rgba(96,165,250,.36);

  /* ---- Escala tipográfica (antes: 11/12/14/15/16px ad hoc) ---- */
  --hl-fs-2xs: 11px;
  --hl-fs-xs:  12px;
  --hl-fs-sm:  13px;
  --hl-fs-md:  15px;
  --hl-fs-lg:  17px;
  --hl-fs-xl:  21px;

  /* ---- Escala de espaçamento (antes: 6/8/10/12/14px ad hoc) ---- */
  --hl-sp-1: 4px;
  --hl-sp-2: 8px;
  --hl-sp-3: 12px;
  --hl-sp-4: 16px;
  --hl-sp-5: 20px;
  --hl-sp-6: 24px;

  /* ---- Raio ---- */
  --hl-radius-sm: 10px;
  --hl-radius-md: 14px;
  --hl-radius-lg: 18px;
  --hl-radius-xl: 24px;

  /* ---- Elevação: mais leve e em camadas (antes: uma sombra pesada em tudo) ---- */
  --hl-shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --hl-shadow:    0 4px 16px -4px rgba(0,0,0,.50);
  --hl-shadow-lg: 0 16px 40px -12px rgba(0,0,0,.65);
  --hl-glow-gold: 0 8px 22px -8px rgba(250,204,21,.45);

  --hl-nav-h: 68px;
  --hl-ring: 0 0 0 3px rgba(250,204,21,.30);
}

/* ===========================================================================
   Base
   =========================================================================== */

body.hl-body{
  background:
    radial-gradient(1200px 620px at 50% -10%, #16203a 0%, transparent 60%),
    var(--hl-bg);
  background-attachment: fixed;
  color: var(--hl-text);
  font-size: var(--hl-fs-md);
  line-height: 1.5;
  letter-spacing: -0.006em;
}

/* Acessibilidade: o app não tinha nenhum indicador de foco por teclado.
   Sem border-radius aqui de propósito: cada elemento mantém o próprio formato
   (o FAB é redondo, o chip é pílula) e o anel acompanha. */
:where(button, a, input, select, textarea, [tabindex]):focus-visible{
  outline: none;
  box-shadow: var(--hl-ring);
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===========================================================================
   Header
   =========================================================================== */

.hl-header{
  background: rgba(6,9,16,.82);
  backdrop-filter: blur(20px) saturate(140%);
  border-bottom: 1px solid var(--hl-border);
}
.hl-header-inner{ padding: var(--hl-sp-3); }

.hl-logo{
  box-shadow: var(--hl-glow-gold);
}

/* ===========================================================================
   Cards — a mudança de maior impacto visual
   Antes: todo card tinha o mesmo radial-gradient + sombra pesada, então
   nada tinha hierarquia. Agora: superfície chapada, borda fina, sombra leve.
   =========================================================================== */

.hl-card{
  background: var(--hl-surface-1);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-lg);
  box-shadow: var(--hl-shadow);
  padding: var(--hl-sp-4);
  margin-bottom: var(--hl-sp-3);
}

.hl-card-auth{ padding: var(--hl-sp-6) var(--hl-sp-5); }

/* O card do usuário é o único com destaque de "hero" — dá um ponto de entrada
   para o olho, em vez de a tela inteira competir por atenção. */
.hl-card-user{
  background:
    linear-gradient(180deg, rgba(250,204,21,.07), transparent 46%),
    var(--hl-surface-1);
  border-color: rgba(250,204,21,.20);
}

.hl-title{
  font-size: var(--hl-fs-lg);
  font-weight: 650;
  letter-spacing: -0.02em;
  margin: 0 0 var(--hl-sp-3);
}

/* Título de seção vira rótulo: menor, com tracking, hierarquia clara. */
.hl-section-title{
  font-size: var(--hl-fs-xs);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--hl-muted);
  margin: 0 0 var(--hl-sp-3);
  gap: var(--hl-sp-2);
}
.hl-section-title::before{
  width: 5px; height: 5px;
  box-shadow: 0 0 8px rgba(250,204,21,.8);
}

.hl-user-title{
  font-size: var(--hl-fs-xl);
  font-weight: 700;
  letter-spacing: -0.025em;
}

/* ===========================================================================
   Botões
   =========================================================================== */

.hl-btn{
  border-radius: var(--hl-radius-md);
  padding: var(--hl-sp-3) var(--hl-sp-4);
  font-size: var(--hl-fs-sm);
  font-weight: 650;
  letter-spacing: -0.01em;
  min-height: 46px;
  transition: transform .08s ease, background-color .15s ease, border-color .15s ease;
}

.hl-btn-primary{
  background: linear-gradient(135deg, var(--hl-gold), var(--hl-gold2));
  color: #10131c;
  box-shadow: var(--hl-glow-gold);   /* era 0 14px 32px — brilho exagerado */
}

/* Outline transparente some no fundo escuro. Superfície leve dá affordance. */
.hl-btn-outline{
  background: var(--hl-surface-2);
  border: 1px solid var(--hl-border-strong);
  color: var(--hl-text);
}
.hl-btn-outline:hover{ background: var(--hl-surface-3); }

.hl-btn-danger{
  background: var(--hl-danger-soft);
  border: 1px solid var(--hl-danger-border);
  color: #fecdd3;
}

.hl-btn-link{
  color: var(--hl-gold2);
  font-weight: 600;
  min-height: 32px;
  padding: 0 var(--hl-sp-1);
}

.hl-btn-sm{
  min-height: 38px;
  padding: var(--hl-sp-2) var(--hl-sp-3);
  font-size: var(--hl-fs-xs);
  border-radius: var(--hl-radius-sm);
}

.hl-btn:disabled{ opacity: .45; cursor: not-allowed; }

.hl-icon-btn{
  min-width: 38px; min-height: 38px;
  border-radius: var(--hl-radius-sm);
  background: var(--hl-surface-2);
  border: 1px solid var(--hl-border);
  color: var(--hl-muted);
}

/* ===========================================================================
   Formulários
   =========================================================================== */

.hl-form{ gap: var(--hl-sp-3); }
.hl-field{ gap: var(--hl-sp-2); }

.hl-label{
  font-size: var(--hl-fs-xs);
  font-weight: 600;
  color: var(--hl-muted);
  letter-spacing: .01em;
}

.hl-input, select, input, textarea{
  background: var(--hl-surface-3);
  border: 1px solid var(--hl-border-strong);
  border-radius: var(--hl-radius-md);
  padding: var(--hl-sp-3) var(--hl-sp-3);
  font-size: 16px;              /* mantido: abaixo disso o iOS dá zoom */
  color: var(--hl-text);
}
.hl-input::placeholder{ color: var(--hl-subtle); }

.hl-input:focus, select:focus, textarea:focus{
  border-color: var(--hl-gold-border);
  box-shadow: var(--hl-ring);
}

select option{ background: var(--hl-surface-3); color: var(--hl-text); }

.hl-field-help{ font-size: var(--hl-fs-xs); color: var(--hl-subtle); }
.hl-field-disabled{ opacity: .5; }

/* ===========================================================================
   Chips e badges
   =========================================================================== */

.hl-chip, .hl-task-chip{
  font-size: var(--hl-fs-xs);
  font-weight: 600;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--hl-border);
  background: var(--hl-surface-2);
  color: var(--hl-muted);
  letter-spacing: .01em;
}

.hl-chip-gold,   .hl-task-chip--gold{
  border-color: var(--hl-gold-border);
  background: var(--hl-gold-soft);
  color: var(--hl-gold2);
}
.hl-chip-success, .hl-task-chip--success{
  border-color: var(--hl-success-border);
  background: var(--hl-success-soft);
  color: var(--hl-success);
}
.hl-chip-danger,  .hl-task-chip--danger{
  border-color: var(--hl-danger-border);
  background: var(--hl-danger-soft);
  color: var(--hl-danger);
}
.hl-task-chip--info{
  border-color: var(--hl-info-border);
  background: var(--hl-info-soft);
  color: var(--hl-info);
}

/* ===========================================================================
   Listas, cards de tarefa/ação e pipeline
   Unificados na mesma superfície: eram 4 tons de cinza ligeiramente
   diferentes (rgba(15,23,42,.55/.56) etc) para o mesmo papel visual.
   =========================================================================== */

.hl-list{ gap: var(--hl-sp-3); }

.hl-list-item,
.hl-pipeline-card,
.hl-action-card,
.hl-task-card{
  position: relative;
  background: var(--hl-surface-2);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-md);
  padding: var(--hl-sp-3) var(--hl-sp-3) var(--hl-sp-3) var(--hl-sp-4);
  box-shadow: var(--hl-shadow-sm);
  transition: border-color .15s ease, background-color .15s ease;
}

/* Barra de acento à esquerda: comunica estado sem gastar cor no fundo. */
.hl-action-card::before,
.hl-task-card::before,
.hl-pipeline-card::before{
  content:"";
  position:absolute; left:0; top: 10px; bottom: 10px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--hl-border-strong);
}

.hl-action-card.is-overdue,
.hl-task-card.is-overdue{
  border-color: var(--hl-danger-border);
  box-shadow: none;
}
.hl-action-card.is-overdue::before,
.hl-task-card.is-overdue::before{ background: var(--hl-danger); }

.hl-task-card--archive{ opacity: 1; }
.hl-task-card--archive::before{ background: var(--hl-success); }

.hl-list-title{
  font-size: var(--hl-fs-md);
  font-weight: 600;
  letter-spacing: -0.012em;
}
.hl-list-sub{
  font-size: var(--hl-fs-xs);
  color: var(--hl-muted);
  margin-top: var(--hl-sp-1);
}

.hl-action-card h4, .hl-task-title{
  font-size: var(--hl-fs-md);
  font-weight: 600;
  letter-spacing: -0.012em;
  margin: var(--hl-sp-2) 0 var(--hl-sp-1);
}
.hl-action-card p, .hl-task-meta{
  font-size: var(--hl-fs-xs);
  color: var(--hl-muted);
}
.hl-task-when, .hl-action-when{
  font-size: var(--hl-fs-xs);
  font-weight: 600;
  color: var(--hl-muted);
}

.hl-empty-box{
  border: 1px dashed var(--hl-border-strong);
  border-radius: var(--hl-radius-md);
  background: rgba(21,29,46,.5);
  color: var(--hl-muted);
  font-size: var(--hl-fs-sm);
  padding: var(--hl-sp-5) var(--hl-sp-4);
  text-align: center;
}

/* ---- Pipeline ---- */

.hl-pipeline{ gap: var(--hl-sp-3); }

.hl-pipeline-column{
  background: var(--hl-surface-1);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-lg);
  padding: var(--hl-sp-3);
}
.hl-pipeline-title{
  font-size: var(--hl-fs-2xs);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--hl-subtle);
}
.hl-pipeline-badge{
  font-size: var(--hl-fs-2xs);
  font-weight: 700;
  background: var(--hl-surface-3);
  border: 1px solid var(--hl-border-strong);
  color: var(--hl-muted);
}

/* ---- Foco / timer ---- */

.hl-focus-card{
  background: var(--hl-surface-2);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-lg);
  padding: var(--hl-sp-4);
}
.hl-focus-time{
  font-size: 44px;
  font-weight: 750;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;  /* o cronômetro para de "tremer" */
  color: var(--hl-text);
}

/* ===========================================================================
   Navegação inferior + FAB
   =========================================================================== */

.hl-bottom-nav{
  background: rgba(6,9,16,.88);
  backdrop-filter: blur(20px) saturate(140%);
  border-top: 1px solid var(--hl-border);
  gap: var(--hl-sp-1);
  padding: var(--hl-sp-2) var(--hl-sp-2) calc(var(--hl-sp-2) + var(--hl-safe-bottom));
}

/* Correção de layout: .hl-nav-btn tinha border:none e .hl-nav-btn-active
   adicionava 1px de borda, então a aba ativa ficava 2px maior que as irmãs
   e a barra "pulava" a cada troca de aba. Borda transparente reserva o espaço. */
.hl-nav-btn{
  border: 1px solid transparent;
  border-radius: var(--hl-radius-md);
  color: var(--hl-subtle);
  gap: 3px;
  padding: var(--hl-sp-2) var(--hl-sp-1);
  min-height: 52px;
  transition: color .15s ease, background-color .15s ease;
}
.hl-nav-ico{ font-size: 19px; }
.hl-nav-txt{ font-size: var(--hl-fs-2xs); font-weight: 600; letter-spacing: -0.01em; }

.hl-nav-btn-active{
  color: var(--hl-gold2);
  background: var(--hl-gold-soft);
  border-color: var(--hl-gold-border);
}

/* O FAB fica no meio da barra: a aba central perde o rótulo embaixo dele.
   Reservar o vão evita o texto encostando no botão. */
.hl-fab{
  width: 58px; height: 58px;
  bottom: calc(var(--hl-nav-h) + var(--hl-sp-3) + var(--hl-safe-bottom));
  font-size: 26px;
  box-shadow: var(--hl-glow-gold), var(--hl-shadow-lg);
  border: 2px solid rgba(6,9,16,.9);
  transition: transform .12s ease;
}
.hl-fab:active{ transform: translateX(-50%) scale(.94); }

/* ===========================================================================
   Modais
   =========================================================================== */

.hl-modal-backdrop{
  background: rgba(3,5,10,.72);
  backdrop-filter: blur(6px);
}
.hl-modal-dialog, .hl-modal-sheet{
  background: var(--hl-surface-1);
  border: 1px solid var(--hl-border-strong);
  border-radius: var(--hl-radius-xl);
  box-shadow: var(--hl-shadow-lg);
}
.hl-modal-head{
  padding: var(--hl-sp-4) var(--hl-sp-4) var(--hl-sp-3);
  border-bottom: 1px solid var(--hl-border);
}
.hl-modal-title{
  font-size: var(--hl-fs-lg);
  font-weight: 650;
  letter-spacing: -0.02em;
}
.hl-modal-body{ padding: var(--hl-sp-4); }

/* ===========================================================================
   Toast
   =========================================================================== */

.hl-toast{
  background: var(--hl-surface-3);
  border: 1px solid var(--hl-border-strong);
  border-radius: var(--hl-radius-md);
  box-shadow: var(--hl-shadow-lg);
  font-size: var(--hl-fs-sm);
  font-weight: 550;
  padding: var(--hl-sp-3) var(--hl-sp-4);
}

/* ===========================================================================
   Plano / cotas
   =========================================================================== */

.hl-pro-box{
  background: linear-gradient(180deg, rgba(250,204,21,.09), transparent 55%), var(--hl-surface-2);
  border: 1px solid var(--hl-gold-border);
  border-radius: var(--hl-radius-lg);
  padding: var(--hl-sp-4);
}

/* Barra de progresso da meta e do consumo do plano */
.hl-progress{
  background: var(--hl-surface-3);
  border-radius: 999px;
  overflow: hidden;
}
.hl-progress-bar{
  background: linear-gradient(90deg, var(--hl-gold), var(--hl-gold2));
  border-radius: 999px;
}

/* ===========================================================================
   Métricas do dashboard
   =========================================================================== */

.hl-metrica-card{
  background: var(--hl-surface-2);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-md);
  padding: var(--hl-sp-3);
}

/* ===========================================================================
   Arquivo / histórico
   =========================================================================== */

.hl-archive-group{
  background: var(--hl-surface-1);
  border: 1px solid var(--hl-border);
  border-radius: var(--hl-radius-lg);
  padding: var(--hl-sp-3);
}
.hl-archive-group-head{
  font-size: var(--hl-fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color: var(--hl-subtle);
}

/* ===========================================================================
   Admin
   =========================================================================== */

.hl-admin-table th{
  font-size: var(--hl-fs-2xs);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--hl-subtle);
  font-weight: 700;
}
.hl-admin-table td{ font-size: var(--hl-fs-xs); }

/* ===========================================================================
   Telas maiores: o app é mobile-first, mas roda em desktop no localhost
   e em tablet. Sem isso os cards esticam a largura toda e a leitura sofre.
   =========================================================================== */

@media (min-width: 900px){
  .hl-card{ padding: var(--hl-sp-5); }
  .hl-focus-time{ font-size: 52px; }
}

/* ===========================================================================
   Follow-up e lead esfriando (super_33)
   O próximo passo é o dado mais importante do card: sem ele, o lead depende
   da memória do corretor — que é o que o app deveria substituir.
   =========================================================================== */

/* Bloco de próximo contato no formulário de lead */
.hl-followup-block{
  background: var(--hl-surface-2);
  border: 1px solid var(--hl-gold-border);
  border-radius: var(--hl-radius-md);
  padding: var(--hl-sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--hl-sp-2);
}
.hl-followup-block__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--hl-sp-2);
}
.hl-followup-block .hl-field-help{ margin: 0; }

/* Linha de próximo passo dentro do card do pipeline */
.hl-followup-line{
  font-size: var(--hl-fs-xs);
  font-weight: 600;
  color: var(--hl-info);
  background: var(--hl-info-soft);
  border: 1px solid var(--hl-info-border);
  border-radius: var(--hl-radius-sm);
  padding: 6px 9px;
  margin-bottom: var(--hl-sp-2);
  line-height: 1.4;
}
.hl-followup-line.is-late{
  color: var(--hl-danger);
  background: var(--hl-danger-soft);
  border-color: var(--hl-danger-border);
}
/* Ausência de próximo passo é um alerta, não um vazio silencioso. */
.hl-followup-line.is-missing{
  color: var(--hl-gold2);
  background: var(--hl-gold-soft);
  border-color: var(--hl-gold-border);
  border-style: dashed;
}

/* Estado do card no pipeline */
.hl-pipeline-card.is-followup-late::before{ background: var(--hl-danger); }
.hl-pipeline-card.is-cold::before{ background: var(--hl-gold); }
.hl-pipeline-card.is-cold{ border-color: var(--hl-gold-border); }

/* Card de lead dentro de "Próximas ações" */
.hl-action-card--lead::before{ background: var(--hl-info); }
.hl-action-card--lead.is-overdue::before{ background: var(--hl-danger); }

/* O WhatsApp deixa de ser um link discreto e vira ação de verdade:
   e o corretor usa isso dezenas de vezes por dia. */
.hl-link-whatsapp{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--hl-fs-2xs);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 999px;
  color: #25d366;
  background: rgba(37,211,102,.12);
  border: 1px solid rgba(37,211,102,.38);
}
.hl-link-whatsapp::before{ content: "💬"; font-size: 11px; }
.hl-link-whatsapp:active{ transform: translateY(1px); }

/* "+N leads pedindo ação": os 5 cards do Hoje são um recorte, não a lista. */
.hl-acoes-mais{
  padding:10px 12px;
  border:1px dashed var(--hl-border);
  border-radius:var(--hl-radius-md);
  color:var(--hl-muted);
  font-size:12px;
}

/* Captação — o código gerado e o bloco recolhido de detalhes.
   O formulário tem duas velocidades: seis campos para preencher em pé no
   portão, e o resto atrás de um toque. */
.hl-captacao-codigo{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:4px;
}
.hl-captacao-detalhes{
  display:flex;
  flex-direction:column;
  gap:var(--hl-space-3, 12px);
  padding:12px;
  margin-top:4px;
  border:1px dashed var(--hl-border);
  border-radius:var(--hl-radius-md);
  background:var(--hl-surface-2);
}

/* ===========================================================================
   Board do funil — super_50
   ---------------------------------------------------------------------------
   O card deixou de ser um formulário empilhado e passou a ter três zonas:
   QUEM é (cabeça), ONDE está (corpo + passo a passo) e PARA ONDE vai (rodapé).

   O que saiu daqui, e por quê:
     - o <select> de nove opções no rodapé — escolher etapa numa lista é o
       corretor fazendo o trabalho que o app deveria fazer. Foi para o menu;
     - o "Arquivar" vermelho sempre visível — botão destrutivo em destaque
       permanente é como uma venda fechada acabou arquivada e fora da métrica.

   Sobra um botão primário por card, e ele é sempre o movimento para a frente.
   =========================================================================== */

/* ---- Coluna: cabeçalho que ensina o objetivo, não só o nome ---- */

.hl-pipeline-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--hl-sp-2);
  margin-bottom:var(--hl-sp-3);
}
.hl-pipeline-title-main{ min-width:0; }
.hl-pipeline-resumo{
  margin:2px 0 0;
  font-size:var(--hl-fs-2xs);
  line-height:1.35;
  color:var(--hl-subtle);
  letter-spacing:0;
  text-transform:none;
}
.hl-pipeline-badge{
  flex:none;
  min-width:24px;
  padding:2px 8px;
  border-radius:999px;
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.hl-pipeline-empty{
  padding:var(--hl-sp-4) var(--hl-sp-3);
  border:1px dashed var(--hl-border);
  border-radius:var(--hl-radius-md);
  font-size:var(--hl-fs-xs);
  color:var(--hl-subtle);
  text-align:center;
}

/* A coluna de desfecho é arquivo, não trabalho: fica visualmente recuada para
   não competir com as cinco onde o corretor age. */
.hl-col-desfecho{ opacity:.82; }
.hl-col-desfecho .hl-pipeline-card{ background:var(--hl-surface-1); }

/* ---- Card: cabeça ---- */

.hl-pipeline-card{
  display:flex;
  flex-direction:column;
  gap:var(--hl-sp-3);
  position:relative;
}
.hl-pipeline-card-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:var(--hl-sp-2);
}
.hl-pipeline-main{ min-width:0; display:flex; flex-direction:column; gap:6px; }
.hl-pipeline-main > strong{
  font-size:var(--hl-fs-md);
  font-weight:650;
  line-height:1.25;
  color:var(--hl-text);
  overflow-wrap:anywhere;
}
.hl-pipeline-chips{ display:flex; flex-wrap:wrap; gap:6px; }

/* O sub-estado dentro da coluna: é ele que diz se a visita já aconteceu. */
.hl-etapa-chip{
  display:inline-flex;
  align-items:center;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--hl-border);
  background:var(--hl-surface-3);
  font-size:var(--hl-fs-2xs);
  font-weight:600;
  color:var(--hl-muted);
  white-space:nowrap;
}

.hl-pipeline-head-acoes{ display:flex; align-items:center; gap:6px; flex:none; }

/* WhatsApp e o menu viram alvos de toque de 36px, sem virar botão de texto
   competindo com a ação principal. */
.hl-icon-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:36px;
  height:36px;
  padding:0 10px;
  border-radius:var(--hl-radius-sm);
  border:1px solid var(--hl-border);
  background:var(--hl-surface-3);
  color:var(--hl-muted);
  font-size:var(--hl-fs-2xs);
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
  line-height:1;
}
.hl-icon-btn:hover{ border-color:var(--hl-border-strong); color:var(--hl-text); }
.hl-icon-btn:focus-visible{ outline:none; box-shadow:var(--hl-ring); }
.hl-icon-btn--wa{
  border-color:var(--hl-success-border);
  background:var(--hl-success-soft);
  color:var(--hl-success);
}
.hl-card-menu-btn{ font-size:18px; letter-spacing:1px; padding:0; }

/* ---- Card: corpo ---- */

.hl-pipeline-card-body{ display:flex; flex-direction:column; gap:var(--hl-sp-2); }
.hl-pipeline-interesse{
  font-size:var(--hl-fs-sm);
  color:var(--hl-muted);
  line-height:1.4;
  overflow-wrap:anywhere;
}

/* Valor e comissão eram dois <div> soltos com o rótulo colado no número, e
   pareciam formulário. Agora são um par rotulado, alinhado e tabular. */
.hl-pipeline-numeros{
  display:flex;
  flex-wrap:wrap;
  gap:var(--hl-sp-4);
  padding:var(--hl-sp-2) var(--hl-sp-3);
  border-radius:var(--hl-radius-sm);
  background:var(--hl-surface-2);
  border:1px solid var(--hl-border);
}
.hl-pipeline-numeros > span{
  display:flex;
  flex-direction:column;
  gap:1px;
  font-size:var(--hl-fs-sm);
  font-weight:650;
  color:var(--hl-text);
  font-variant-numeric:tabular-nums;
}
.hl-pipeline-numeros small{
  font-size:var(--hl-fs-2xs);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--hl-subtle);
}

/* ---- O passo a passo ---- */

.hl-passo{
  border:1px solid var(--hl-border);
  border-radius:var(--hl-radius-sm);
  background:var(--hl-surface-2);
  padding:var(--hl-sp-2) var(--hl-sp-3) var(--hl-sp-3);
}
.hl-passo.is-completo{
  border-color:var(--hl-success-border);
  background:var(--hl-success-soft);
}
.hl-passo-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--hl-sp-2);
  margin-bottom:var(--hl-sp-2);
}
.hl-passo-titulo{
  font-size:var(--hl-fs-2xs);
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--hl-subtle);
}
.hl-passo-placar{
  font-size:var(--hl-fs-2xs);
  font-weight:700;
  color:var(--hl-muted);
  font-variant-numeric:tabular-nums;
}
.hl-passo.is-completo .hl-passo-placar{ color:var(--hl-success); }

.hl-passo-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.hl-passo-item{
  display:flex;
  align-items:center;
  gap:var(--hl-sp-2);
  font-size:var(--hl-fs-xs);
  line-height:1.35;
  color:var(--hl-muted);
}

/* A marca é desenhada em CSS: um anel vazio que vira disco com o "tique"
   quando o dado existe. Sem fonte de ícone, sem SVG externo — o CSP do app
   não carrega nada de fora, e um caractere de fonte muda de largura entre
   Android e iPhone, desalinhando a lista inteira. */
.hl-passo-marca{
  flex:none;
  width:16px;
  height:16px;
  border-radius:50%;
  border:1.5px solid var(--hl-border-strong);
  background:transparent;
  position:relative;
}
.hl-passo-item.is-ok{ color:var(--hl-text); }
.hl-passo-item.is-ok .hl-passo-marca{
  border-color:var(--hl-success);
  background:var(--hl-success);
}
.hl-passo-item.is-ok .hl-passo-marca::after{
  content:"";
  position:absolute;
  left:5px;
  top:2px;
  width:4px;
  height:8px;
  border:solid #06210f;
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.hl-passo-label{ overflow-wrap:anywhere; }

.hl-passo-dica{
  margin:var(--hl-sp-2) 0 0;
  padding-top:var(--hl-sp-2);
  border-top:1px solid var(--hl-border);
  font-size:var(--hl-fs-xs);
  line-height:1.4;
  color:var(--hl-gold2);
}

/* ---- Card: rodapé ---- */

.hl-pipeline-card-footer{
  display:flex;
  flex-wrap:wrap;
  gap:var(--hl-sp-2);
  align-items:center;
}
.hl-btn-avancar{ flex:1 1 auto; min-width:0; justify-content:center; }

/* Avanço com pendência não é bloqueado — o corretor manda no funil dele. Ele
   só perde o brilho: fica sólido, sem o gradiente que puxa o olho. Bloquear
   faria o corretor mentir no cadastro para destravar a tela. */
.hl-btn-avancar.is-pendente{
  background:var(--hl-surface-3);
  border:1px solid var(--hl-gold-border);
  color:var(--hl-gold2);
  box-shadow:none;
}

/* ---- Menu do card ---- */

.hl-card-menu{
  position:absolute;
  top:44px;
  right:var(--hl-sp-3);
  z-index:20;
  min-width:200px;
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:6px;
  border-radius:var(--hl-radius-md);
  border:1px solid var(--hl-border-strong);
  background:var(--hl-surface-3);
  box-shadow:var(--hl-shadow-lg);
}
.hl-card-menu-item{
  display:block;
  width:100%;
  text-align:left;
  padding:10px var(--hl-sp-3);
  border:0;
  border-radius:var(--hl-radius-sm);
  background:transparent;
  color:var(--hl-text);
  font-size:var(--hl-fs-sm);
  font-family:inherit;
  cursor:pointer;
}
.hl-card-menu-item:hover{ background:var(--hl-surface-2); }
.hl-card-menu-item:focus-visible{ outline:none; box-shadow:var(--hl-ring); }
.hl-card-menu-item--danger{ color:var(--hl-danger); }
.hl-card-menu-item--danger:hover{ background:var(--hl-danger-soft); }

.hl-card-menu-etapa{
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:8px var(--hl-sp-3);
  border-top:1px solid var(--hl-border);
  border-bottom:1px solid var(--hl-border);
  margin:2px 0;
}
.hl-card-menu-etapa > span{
  font-size:var(--hl-fs-2xs);
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--hl-subtle);
}
.hl-card-menu-etapa .hl-select-estagio{
  width:100%;
  padding:8px 10px;
  border-radius:var(--hl-radius-sm);
  border:1px solid var(--hl-border);
  background:var(--hl-surface-1);
  color:var(--hl-text);
  font-size:var(--hl-fs-sm);
  font-family:inherit;
}

/* ---- Celular: uma coluna por vez ---- */

/* Sete colunas lado a lado num celular era rolagem horizontal sem fim, e o
   corretor perdia de vista em qual etapa estava. Aqui cada coluna ocupa 88% da
   tela e o scroll trava nela: dá para deslizar entre etapas como se folheasse,
   e a próxima aparece pela borda mostrando que existe. */
@media (max-width: 720px){
  .hl-pipeline{
    display:flex;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    scroll-padding-left:var(--hl-sp-3);
    -webkit-overflow-scrolling:touch;
    padding-bottom:var(--hl-sp-2);
  }
  .hl-pipeline-column{
    flex:0 0 88%;
    scroll-snap-align:start;
  }
  .hl-card-menu{ left:var(--hl-sp-3); right:var(--hl-sp-3); min-width:0; }
}

/* ===========================================================================
   Painel admin — barras de proporção (super_51)
   ---------------------------------------------------------------------------
   Os cards de número deste painel viraram `.hl-fin-bloco` no super_58, e as
   regras que sobraram sem HTML saíram junto. As barras continuam: são o
   desenho de plataforma e navegador dentro do painel novo.
   =========================================================================== */

.hl-barra-grupo{ display:flex; flex-direction:column; gap:6px; }
.hl-barra-titulo{
  margin:0 0 2px;
  font-size:var(--hl-fs-2xs);
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--hl-subtle);
}
.hl-barra-linha{
  display:grid;
  grid-template-columns:96px 1fr 40px;
  align-items:center;
  gap:var(--hl-sp-2);
  font-size:var(--hl-fs-xs);
}
.hl-barra-nome{
  color:var(--hl-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.hl-barra-trilho{
  height:8px;
  border-radius:999px;
  background:var(--hl-surface-3);
  overflow:hidden;
}
.hl-barra-preenchimento{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg, var(--hl-gold), var(--hl-gold2));
  /* Largura mínima para a barra de valor 1 não sumir e parecer zero. */
  min-width:3px;
}
.hl-barra-valor{
  text-align:right;
  font-weight:650;
  color:var(--hl-text);
  font-variant-numeric:tabular-nums;
}

@media (max-width: 480px){
  .hl-barra-linha{ grid-template-columns:80px 1fr 34px; }
}