/* ===========================================================================
   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); }