Identidade visual e padrões de interface
para escala e precisão.

<!-- Estrutura padrão de cabeçalho de página com botões alinhados à direita -->
<div class="page-header">
  <h1 class="page-title">Gestão de Leads CRM</h1>
  
  <div class="section-actions">
    <button type="button" class="btn-sys btn-sys-secondary" id="btnToggleFilters">
      <i class="icon-filter"></i> Filtros
    </button>
    
    <button type="button" class="btn-sys btn-sys-primary" id="btnOpenCreateDrawer">
      <i class="icon-plus"></i> + Novo Registro
    </button>
  </div>
</div>

<style>
.section-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  justify-content: flex-end;
}
.btn-sys {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 38px;
  min-width: 130px;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  border: 1px solid transparent;
  transition: all 0.18s ease-in-out;
  cursor: pointer;
}
.btn-sys-primary {
  background: #F08000;
  color: #FFFFFF;
  box-shadow: 0 2px 6px rgba(240, 128, 0, 0.28);
}
.btn-sys-primary:hover { background: #D96A00; }
.btn-sys-secondary {
  background: #FFFFFF;
  color: #0D1B33;
  border-color: #CBD5E1;
}
.btn-sys-secondary:hover { background: #F8FAFC; border-color: #94A3B8; }
</style>

<!-- Backdrop com efeito Blur -->
<div id="customerDrawerBackdrop" class="brandbook-drawer-backdrop">
  <aside class="brandbook-drawer" role="dialog" aria-modal="true">
    <!-- Cabeçalho Fixo -->
    <div class="drawer-head">
      <div>
        <h3>Novo Cadastro de Cliente</h3>
        <p>Preencha os dados cadastrais do cliente no tenant.</p>
      </div>
      <button type="button" class="drawer-close-btn js-close-drawer" aria-label="Fechar">&times;</button>
    </div>

    <!-- Corpo com Rolagem Independente -->
    <form id="customerForm" class="drawer-scroll-body">
      <div class="bb-form-grid">
        <div class="bb-form-group full">
          <label for="lead_name">Razão Social / Nome Completo *</label>
          <input type="text" id="lead_name" class="bb-form-control" placeholder="Ex: Lumos Soluções Tecnológicas" required>
        </div>
        <div class="bb-form-group">
          <label for="lead_email">E-mail Corporativo</label>
          <input type="email" id="lead_email" class="bb-form-control" placeholder="contato@empresa.com">
        </div>
        <div class="bb-form-group">
          <label for="lead_phone">WhatsApp / Telefone *</label>
          <input type="tel" id="lead_phone" class="bb-form-control" placeholder="(11) 98765-4321" required>
        </div>
      </div>
    </form>

    <!-- Rodapé Fixo com Ações Alinhadas à Direita -->
    <div class="drawer-foot">
      <button type="button" class="btn-sys btn-sys-secondary js-close-drawer">Cancelar</button>
      <button type="submit" form="customerForm" class="btn-sys btn-sys-primary">Salvar Cliente</button>
    </div>
  </aside>
</div>

<article class="ticket-card">
  <div class="ticket-card-header">
    <span class="channel-badge channel-whatsapp">WhatsApp</span>
    <span class="score-badge score-hot">Quente • 95pts</span>
  </div>

  <h4 class="ticket-card-title">Razão Social / Nome da Oportunidade</h4>
  <div class="ticket-card-meta">Nome do Contato Principal</div>

  <div class="ticket-card-footer">
    <b class="ticket-value">R$ 14.800,00</b>
    <span class="cadence-chip">Próxima Ação: Hoje 16:30</span>
  </div>
</article>