/* =============================================================
   CRM Renato Expert — theme.css
   Identidade do renatoexpert.com.br: azul-marinho, azul e dourado,
   tipografia única Albert Sans.
   ============================================================= */

@font-face{
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/albertsans-variable.woff2') format('woff2');
}

[x-cloak]{ display: none !important; }

:root{
  --vf-brand-50:  #eaf2fb;
  --vf-brand-100: #d2e3f6;
  --vf-brand-200: #a6c7ec;
  --vf-brand-300: #74a6df;
  --vf-brand-400: #3f82cc;
  --vf-brand-500: #1A5FA8;
  --vf-brand-600: #154e8b;
  --vf-brand-700: #103d6d;
  --vf-brand-800: #0d2c4f;
  --vf-brand-900: #0B1922;
  --vf-gold: #C9AB63;

  --tblr-primary: var(--vf-brand-500);
  --tblr-primary-rgb: 26, 95, 168;
  --tblr-primary-fg: #fff;
  --tblr-link-color: var(--vf-brand-600);
  --tblr-link-color-rgb: 21, 78, 139;

  /* ---- Prioridade ---- */
  --vf-prio-a: #d63939;
  --vf-prio-b: #f59f00;
  --vf-prio-c: #6c7a89;

  /* ---- Status do lead (seção 5 do SPEC) ---- */
  --vf-st-novo: #1A5FA8;
  --vf-st-validacao: #7048e8;
  --vf-st-pronto: #0ca678;
  --vf-st-enviado: #2fb344;
  --vf-st-falha: #d63939;
  --vf-st-bot: #868e96;
  --vf-st-conversa: #f76707;
  --vf-st-agendada: #ae3ec9;
  --vf-st-proposta: #C9AB63;
  --vf-st-ganho: #2b8a3e;
  --vf-st-perdido: #868e96;
  --vf-st-semwpp: #495057;
  --vf-st-bloqueado: #212529;

  /* compatibilidade com o núcleo herdado */
  --vf-status-scheduled: #6c757d;
  --vf-status-paid: #2fb344;
  --vf-status-overdue: #d63939;
  --vf-status-approval: #f59f00;

  --vf-sidebar-width: 15rem;
  --tblr-font-sans-serif: "Albert Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

[data-bs-theme="dark"]{
  --tblr-primary: var(--vf-brand-400);
  --tblr-primary-rgb: 63, 130, 204;
  --tblr-link-color: var(--vf-brand-300);
}

/* Sidebar no azul-marinho da marca */
.navbar-vertical[data-bs-theme="dark"]{ background: var(--vf-brand-900) !important; }
.vf-gold{ color: var(--vf-gold) !important; }
.vf-brand-mark{ background: var(--vf-gold); color: var(--vf-brand-900); }

/* ---- Etiquetas de prioridade e porte ---- */
.vf-prio{ display:inline-flex; align-items:center; justify-content:center; min-width:1.6rem; height:1.6rem; padding:0 .4rem; border-radius:.4rem; font-weight:700; font-size:.8rem; color:#fff; }
.vf-prio--A{ background: var(--vf-prio-a); }
.vf-prio--B{ background: var(--vf-prio-b); }
.vf-prio--C{ background: var(--vf-prio-c); }
.vf-porte{ font-size:.72rem; font-weight:600; padding:.15rem .45rem; border-radius:.35rem; border:1px solid var(--tblr-border-color); color: var(--tblr-secondary-color); white-space:nowrap; }

/* ---- Status do lead ---- */
.vf-st{ display:inline-flex; align-items:center; gap:.375rem; font-weight:600; font-size:.75rem; padding:.28rem .6rem; border-radius:999px; white-space:nowrap; color: var(--c); background: color-mix(in srgb, var(--c) 13%, transparent); }
.vf-st::before{ content:""; width:.45rem; height:.45rem; border-radius:50%; background: currentColor; }

/* ---- Sinais (ícones) ---- */
.vf-signals{ display:inline-flex; gap:.25rem; }
.vf-signal{ width:1.55rem; height:1.55rem; border-radius:.4rem; display:inline-flex; align-items:center; justify-content:center; font-size:.95rem; background: var(--tblr-bg-surface-secondary, #f1f3f6); color: #b8bfc8; }
.vf-signal.is-on{ background: color-mix(in srgb, var(--vf-prio-a) 14%, transparent); color: var(--vf-prio-a); }

/* ---- Prévia de WhatsApp ---- */
.vf-wpp{ background:#e7f8ee; border:1px solid #bfe8cf; border-radius:.75rem; padding:.9rem 1rem; font-size:.92rem; white-space:pre-wrap; line-height:1.45; }
[data-bs-theme="dark"] .vf-wpp{ background:#0f2a1c; border-color:#1d4430; }

/* ---- Checklist de validação ---- */
.vf-check{ display:flex; gap:.6rem; align-items:flex-start; padding:.55rem .25rem; border-bottom:1px dashed var(--tblr-border-color); }
.vf-check:last-child{ border-bottom:0; }
/* ---- Status badges utilitários ---- */
.badge-status{
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-weight: 600;
  font-size: .75rem;
  padding: .3rem .6rem;
  border-radius: 999px;
  white-space: nowrap;
}
.badge-status::before{
  content: "";
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.badge-status--scheduled{ color: var(--vf-status-scheduled); background: color-mix(in srgb, var(--vf-status-scheduled) 14%, transparent); }
.badge-status--awaiting{  color: var(--vf-status-awaiting);  background: color-mix(in srgb, var(--vf-status-awaiting) 14%, transparent); }
.badge-status--issued{    color: var(--vf-status-issued);    background: color-mix(in srgb, var(--vf-status-issued) 14%, transparent); }
.badge-status--paid{      color: var(--vf-status-paid);      background: color-mix(in srgb, var(--vf-status-paid) 14%, transparent); }
.badge-status--overdue{   color: var(--vf-status-overdue);   background: color-mix(in srgb, var(--vf-status-overdue) 14%, transparent); }
.badge-status--cancelled{ color: var(--vf-status-cancelled); background: color-mix(in srgb, var(--vf-status-cancelled) 14%, transparent); text-decoration: line-through; }
.badge-status--renegotiated{ color: var(--vf-status-renegotiated); background: color-mix(in srgb, var(--vf-status-renegotiated) 14%, transparent); }
.badge-status--approval{  color: var(--vf-status-approval);  background: color-mix(in srgb, var(--vf-status-approval) 14%, transparent); }

/* ---- Ajuda contextual (ícone "?") ---- */
.vf-help{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--tblr-secondary-bg, rgba(0,0,0,.06));
  color: var(--tblr-secondary-color, #6c757d);
  font-size: .68rem;
  font-weight: 700;
  cursor: help;
  vertical-align: middle;
}

/* ---- Estado vazio ---- */
.vf-empty{
  text-align: center;
  padding: 3rem 1.5rem;
}
.vf-empty .vf-empty-icon{
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1rem;
  color: var(--tblr-primary);
  opacity: .5;
}

/* ---- Saldo projetado negativo em destaque ---- */
.vf-negative-month{
  fill: rgba(214, 57, 57, .12) !important;
}

/* ---- Sino de notificações ---- */
.vf-notif-dot{
  position: absolute;
  top: .4rem;
  right: .4rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--vf-status-overdue);
  border: 2px solid var(--tblr-body-bg, #fff);
}

/* ---- Passos do wizard (cadastro de contrato) ---- */
.vf-steps{
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.vf-step{
  flex: 1;
  text-align: center;
  padding: .6rem .5rem;
  border-radius: .5rem;
  background: var(--tblr-secondary-bg, #f4f6fb);
  color: var(--tblr-secondary-color, #6c757d);
  font-size: .8rem;
  font-weight: 600;
  border: 1px solid transparent;
}
.vf-step.is-active{
  background: color-mix(in srgb, var(--tblr-primary) 12%, transparent);
  color: var(--tblr-primary);
  border-color: color-mix(in srgb, var(--tblr-primary) 30%, transparent);
}
.vf-step.is-done{
  color: var(--vf-status-paid);
}

/* ---- Login ---- */
.vf-login-wrap{
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(120% 90% at 100% 0%, var(--vf-brand-700) 0%, var(--vf-brand-900) 60%);
  padding: 1.5rem;
}
[data-bs-theme="dark"] .vf-login-wrap{
  background: linear-gradient(160deg, #0b0e1a, #12162a);
}
.vf-login-card{
  width: 100%;
  max-width: 420px;
}

/* ---- Tabela responsiva vira cards no mobile ---- */
@media (max-width: 767.98px){
  .vf-table-cards thead{ display:none; }
  .vf-table-cards tbody tr{
    display: block;
    border: 1px solid var(--tblr-border-color);
    border-radius: .5rem;
    margin-bottom: .75rem;
    padding: .75rem;
  }
  .vf-table-cards tbody td{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    border: 0;
    padding: .3rem 0;
  }
  .vf-table-cards tbody td::before{
    content: attr(data-label);
    font-size: .72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--tblr-secondary-color, #6c757d);
  }
}

/* ---- Modal próprio (Alpine controla display, não depende de .modal/.show do Bootstrap) ---- */
.vf-modal-overlay{
  position: fixed;
  inset: 0;
  z-index: 1055;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.5);
  padding: 1rem;
}

/* ---- Pré-visualização de mensagem (régua) ---- */
.vf-msg-preview{
  background: #e7f8ee;
  border: 1px solid #bfe8cf;
  border-radius: .75rem;
  padding: .9rem 1rem;
  font-size: .9rem;
  white-space: pre-wrap;
  position: relative;
}
[data-bs-theme="dark"] .vf-msg-preview{
  background: #0f2a1c;
  border-color: #1d4430;
}