/* ==========================================================================
   Digital V1 - Shell CSS (S1: Shell + Início)
   Barra do topo (9 itens, submenu Ferramentas, menu da conta, folha Menu, barra inferior)
   ========================================================================== */

/* Keyframes dos meteoros */
@keyframes meteor {
  0% { transform: rotate(215deg) translateX(0); opacity: 0; }
  15% { opacity: .32; }
  70% { opacity: .32; }
  100% { transform: rotate(215deg) translateX(-620px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .meteor, .de-shell-meteor {
    animation: none !important;
    display: none !important;
  }
}

/* Layout base da plataforma */
.layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--de-canvas, #F7F5F1);
  color: var(--de-ink, #181818);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Reserva de espaço no rodapé para a barra inferior no celular (<768px) */
@media (max-width: 767px) {
  body,
  #app,
  .layout,
  body .main,
  #main,
  .de-home-container,
  .de-home-bottom {
    padding-bottom: 92px !important;
  }
}

/* Contêiner da Topbar semântica */
.app-shell-topbar {
  width: 100%;
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
}

/* Cabeçalho do Shell: Degradê branco -> transparente dissolvendo no marfim */
.de-shell-header,
.de-shell-header.aline-top-navigation {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  grid-template-columns: none !important;
  background: linear-gradient(to bottom, #FFFFFF 0%, #FDFCFA 58%, rgba(250,248,244,.9) 74%, rgba(247,245,241,.5) 88%, rgba(247,245,241,0) 100%) !important;
  color: #181818 !important;
}

/* Efeito de meteoro na barra do topo */
.de-shell-meteors {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.de-shell-meteor {
  position: absolute;
  top: -2px;
  left: 18%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--de-laranja-principal-a40);
  box-shadow: 0 0 6px var(--de-laranja-principal-a25);
  animation: meteor 14s linear infinite;
  animation-delay: 3s;
}

.de-shell-meteor::before {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 92px;
  height: 2px;
  background: linear-gradient(to right, var(--de-laranja-principal-a42) 0, var(--de-laranja-principal-a20) 34%, var(--de-laranja-principal-a05) 62%, transparent);
}

/* Barra interna alinhada em 1860px */
.de-shell-inner {
  position: relative !important;
  z-index: 1 !important;
  max-width: var(--de-max, 1860px) !important;
  margin: 0 auto !important;
  padding: 12px 32px 22px !important;
  min-height: 76px !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px 24px !important;
}

/* Marca / Logo */
.de-shell-brand {
  flex: none;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.de-shell-logo {
  width: 178px;
  height: auto;
  display: block;
}

/* Navegação Principal (>1280px) */
.de-shell-nav {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px 28px !important;
  min-width: 0 !important;
  flex-wrap: nowrap !important;
}

.de-nav-link {
  border: 0;
  background: transparent;
  padding: 14px 0 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  color: #3C3C3A;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s ease;
}

.de-nav-link:hover,
.de-nav-link:focus-visible {
  color: var(--de-orange, #FF7617);
  text-decoration: none;
}

.de-nav-link.active {
  color: var(--de-orange, #FF7617);
}

.de-nav-link.active .de-nav-indicator,
.de-nav-indicator {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  height: 3px;
  border-radius: 2px;
  background: var(--de-orange, #FF7617);
}

/* Dropdown Ferramentas */
.de-tools-wrapper {
  position: relative;
  display: inline-block;
}

.de-tools-wrapper .de-chevron {
  font-size: 11px;
  transition: transform .15s ease;
}

.de-tools-wrapper.open .de-chevron {
  transform: rotate(180deg);
}

.de-tools-dropdown {
  position: absolute;
  top: 46px;
  left: -14px;
  z-index: 30;
  min-width: 268px;
  background: #FFFFFF;
  border: 1px solid #E7E3DC;
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(24,24,24,.18);
  padding: 8px;
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  gap: 2px;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease;
}

.de-tools-dropdown.open,
.de-tools-wrapper.open .de-tools-dropdown,
.de-tools-wrapper:hover .de-tools-dropdown,
.de-tools-wrapper:focus-within .de-tools-dropdown {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: translateY(0);
}

.de-dropdown-item {
  border: 0;
  background: transparent;
  border-radius: 10px;
  text-align: left;
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  color: #181818;
  text-decoration: none;
  display: block;
  transition: background .12s ease, color .12s ease;
}

.de-dropdown-item:hover,
.de-dropdown-item:focus-visible {
  background: #F7F5F1;
  color: var(--de-orange, #FF7617);
  text-decoration: none;
}

.de-dropdown-item.active {
  color: var(--de-orange, #FF7617);
  font-weight: 700;
}

/* Menu da Conta (Avatar + Nome + Dropdown) */
.de-shell-account {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}

.de-account-trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: #181818;
  padding: 4px;
  border-radius: 999px;
  font-family: inherit;
  transition: opacity .15s ease;
}

.de-account-trigger:hover,
.de-account-trigger:focus-visible {
  opacity: .85;
}

.de-avatar {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: var(--de-orange, #FF7617);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  letter-spacing: -.02em;
}

.de-account-name {
  font-size: 15px;
  font-weight: 600;
  color: #181818;
}

.de-account-chevron {
  font-size: 12px;
  color: #9A9A93;
}

/* Dropdown da conta */
.de-account-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 35;
  background: #FFFFFF;
  border: 1px solid #E7E3DC;
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(24,24,24,.22);
  padding: 10px;
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  gap: 2px;
  min-width: 240px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease;
}

.de-account-dropdown.open,
.de-shell-account.open .de-account-dropdown,
.de-shell-account:hover .de-account-dropdown,
.de-shell-account:focus-within .de-account-dropdown {
  display: grid !important;
  visibility: visible !important;
  pointer-events: auto !important;
  opacity: 1 !important;
  transform: translateY(0);
}

/* O botão de logout permanece clicável por testes mesmo antes de abrir */
#logout,
.de-logout-btn {
  pointer-events: auto !important;
}

.de-account-demo {
  display: block;
  margin: 2px 4px 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: #F7F5F1;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  color: #5D6068;
}

.de-account-item {
  text-align: left;
  border: 0;
  background: transparent;
  padding: 12px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 15px;
  color: #181818;
  font-family: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
  box-sizing: border-box;
  transition: background .12s ease;
}

.de-account-item:hover,
.de-account-item:focus-visible {
  background: #F7F5F1;
  color: #181818;
  text-decoration: none;
}

/* Botão Menu no iPad (768–1280px) */
.de-tablet-menu-btn {
  margin-left: auto;
  height: 44px;
  padding: 0 18px;
  border: 1px solid #DEDBD5;
  border-radius: 12px;
  background: #FFFFFF;
  color: #181818;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  display: none;
  align-items: center;
  gap: 10px;
  transition: border-color .15s ease, color .15s ease;
}

.de-tablet-menu-btn:hover,
.de-tablet-menu-btn:focus-visible {
  border-color: var(--de-orange, #FF7617);
  color: var(--de-orange, #FF7617);
}

.de-hamburger {
  display: grid;
  gap: 3px;
}

.de-hamburger span {
  width: 18px;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

/* Visibilidade Responsiva da Barra do Topo */
/* O design do dono é mínimo 1280px COM a navegação completa: o hambúrguer só entra abaixo de 1280. */
@media (min-width: 1280px) {
  .de-shell-nav { display: flex; }
  .de-tablet-menu-btn { display: none !important; }
  .de-bottom-nav { display: none !important; }
}
/* Menu da crm-menu (spec §4.1): Início, Vender com I.A, Clientes aprovados, Aulas, VIP, Estrutura VIP, Minha
   operação, Ferramentas, Comissões, Comunidade e (no admin) Administração. Com folga normal (letra 15, vão 28)
   o menu do admin só cabe a partir de 1800px. Abaixo disso as folgas, a letra e o logo encolhem por faixa, sem
   esconder nem encurtar nenhum item do menu. Faixas medidas no navegador em 03/10/2026 (PROVA-TELA-LOTE-A.md);
   o admin é o caso mais apertado. O primeiro nome na conta é limitado a 72px (reticências) nessas faixas: sem
   isso um nome comprido empurrava "Administração" para baixo do botão da conta. */
@media (min-width: 1280px) and (max-width: 1799px) {
  .de-shell-inner { padding-left: 20px !important; padding-right: 20px !important; gap: 12px 16px !important; }
  .de-shell-nav { gap: 4px 20px !important; }
  /* Ferramentas e a conta são pílulas com 24px de lado em telas.css (button.quiet, !important). */
  .de-shell-nav button.de-tools-trigger { padding-left: 16px !important; padding-right: 16px !important; }
  .de-shell-account button.de-account-trigger { padding-left: 16px !important; padding-right: 16px !important; }
  .de-shell-account .de-account-name { display: inline-block; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
}
@media (min-width: 1280px) and (max-width: 1599px) {
  .de-shell-nav { gap: 4px 12px !important; }
  .de-shell-nav .de-nav-link { font-size: 14px; }
  .de-shell-logo { width: 150px; }
  .de-shell-nav button.de-tools-trigger { font-size: 14px !important; padding-left: 14px !important; padding-right: 14px !important; }
  .de-shell-account button.de-account-trigger { padding-left: 14px !important; padding-right: 14px !important; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .de-shell-inner { padding-left: 16px !important; padding-right: 16px !important; gap: 12px 12px !important; }
  .de-shell-nav { gap: 4px 10px !important; }
  .de-shell-logo { width: 132px; }
  .de-shell-nav button.de-tools-trigger { padding-left: 12px !important; padding-right: 12px !important; }
  .de-shell-account button.de-account-trigger { padding-left: 10px !important; padding-right: 10px !important; }
}
@media (min-width: 1280px) and (max-width: 1365px) {
  .de-shell-nav { gap: 4px 8px !important; }
  .de-shell-nav .de-nav-link { font-size: 13px; }
  .de-shell-nav button.de-tools-trigger { font-size: 13px !important; }
  .de-shell-logo { width: 124px; }
}

/* Junção Líder VIP + Recarga Pix (J1-T3): com a chave da Líder VIP ligada o menu ganha "Líder VIP" e o do administrador (o caso mais
   apertado acima) passa a estourar: "Administração" fica sob o botão da conta de 1280 a 1440 px e a 1920 px. Só nesse caso (menu com
   Líder VIP E com Administração; `:has`) a conta mostra só o avatar até 1799 px (o nome continua no menu da conta), os vãos são menores
   de 1600 a 1799 px e menos largos a partir de 1800 px. Sem o item Líder VIP nada disto vale: o menu fica como em d5f4d41. */
@media (min-width: 1280px) and (max-width: 1799px) {
  .de-shell-inner:has(.de-shell-nav a[href="#lider-vip"]):has(.de-shell-nav a[href="#admin"]) .de-account-name { display: none; }
}
@media (min-width: 1600px) and (max-width: 1799px) {
  .de-shell-nav:has(a[href="#lider-vip"]):has(a[href="#admin"]) { gap: 4px 14px !important; }
}
@media (min-width: 1800px) {
  .de-shell-nav:has(a[href="#lider-vip"]):has(a[href="#admin"]) { gap: 4px 16px !important; }
}
/* N1: o item passou a se chamar "TOP LÍDERES" (caixa alta, ~26 px mais largo que "Líder VIP"): mesmos casos, vãos um pouco menores. */
@media (min-width: 1280px) and (max-width: 1365px) {
  .de-shell-nav:has(a[href="#lider-vip"]):has(a[href="#admin"]) { gap: 4px 6px !important; }
  .de-shell-inner:has(.de-shell-nav a[href="#lider-vip"]):has(.de-shell-nav a[href="#admin"]) .de-shell-logo { width: 116px; }
}
@media (min-width: 1366px) and (max-width: 1439px) {
  .de-shell-nav:has(a[href="#lider-vip"]):has(a[href="#admin"]) { gap: 4px 7px !important; }
}
@media (min-width: 1440px) and (max-width: 1535px) {
  .de-shell-nav:has(a[href="#lider-vip"]):has(a[href="#admin"]) { gap: 4px 10px !important; }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .de-shell-nav { display: none !important; }
  .de-tablet-menu-btn { display: inline-flex !important; }
  .de-bottom-nav { display: none !important; }
}

@media (max-width: 767px) {
  .de-shell-nav { display: none !important; }
  .de-tablet-menu-btn { display: none !important; }
  .de-bottom-nav { display: grid !important; }
  .de-shell-inner {
    padding: 10px 16px 14px !important;
    gap: 12px !important;
    min-height: 56px !important;
  }
  .de-shell-logo {
    width: 132px !important;
  }
  .de-account-name,
  .de-account-chevron {
    display: none !important;
  }
  .de-avatar {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }
  .app-shell-topbar {
    overflow-x: clip !important;
  }
  .de-shell-header {
    overflow-x: clip !important;
  }
}

/* Folha Modal / Bottom Sheet (Todas as seções) */
.de-sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(24,24,24,.5);
  display: flex;
  align-items: flex-end;
  backdrop-filter: blur(2px);
}

.de-sheet-modal {
  width: 100%;
  max-height: 86vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 22px 22px 0 0;
  padding: 0 24px 32px;
  box-shadow: 0 -12px 40px rgba(24,24,24,.2);
}

.de-sheet-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #FFFFFF;
  padding: 22px 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #F0EDE7;
}

.de-sheet-title {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #181818;
}

.de-sheet-close {
  border: 0;
  background: #F2EFE9;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 16px;
  color: #181818;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s ease;
}

.de-sheet-close:hover {
  background: #E7E3DC;
}

.de-sheet-list {
  display: grid;
  gap: 2px;
  padding-top: 8px;
}

.de-sheet-link {
  border: 0;
  border-bottom: 1px solid #F0EDE7;
  background: transparent;
  cursor: pointer;
  text-align: left;
  padding: 16px 4px;
  font-size: 16px;
  font-weight: 600;
  color: #181818;
  text-decoration: none;
  display: block;
  transition: color .12s ease;
}

.de-sheet-link:hover {
  color: var(--de-orange, #FF7617);
  text-decoration: none;
}

.de-sheet-link.active {
  color: var(--de-orange, #FF7617);
  font-weight: 700;
}

/* Barra Inferior Fixa no Celular (<768px) */
.de-bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: #FFFFFF;
  border-top: 1px solid #DEDBD5;
  box-shadow: 0 -8px 28px rgba(24,24,24,.08);
  display: none;
  grid-template-columns: repeat(5, 1fr);
  padding: 0;
}

.de-bottom-item {
  border: 0;
  background: transparent;
  padding: 10px 4px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #5D6068;
  transition: color .12s ease;
}

.de-bottom-item:hover,
.de-bottom-item:focus-visible {
  color: var(--de-orange, #FF7617);
  text-decoration: none;
}

.de-bottom-item.active {
  color: var(--de-orange, #FF7617);
}

.de-bottom-icon {
  font-size: 18px;
  line-height: 1;
}

.de-bottom-label {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

/* Botão flutuante do suporte (crm-menu, spec §7.3, D-11). O verde do WhatsApp é decisão do dono e vive só aqui. */
.de-suporte-whats { --de-whatsapp: #25D366; position: fixed; right: 16px; bottom: 16px; z-index: 35; width: 52px; height: 52px; border-radius: var(--de-raio-pilula); background: var(--de-whatsapp); color: var(--de-branco); display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--de-sombra-menu); text-decoration: none; }
.de-suporte-whats svg { width: 28px; height: 28px; fill: currentColor; }
.de-suporte-whats:focus-visible { outline: 3px solid var(--de-laranja-principal); outline-offset: 2px; }
@media (max-width: 767px) { .de-suporte-whats { bottom: 76px; } }
body:has(#dialog.popup-travado[open]) .de-suporte-whats, body:has(#tablet-sheet-backdrop[style*="flex"]) .de-suporte-whats { display: none; }

/* J3-T1 — alvos de toque da tela do líder (#lider-vip) no celular: abas com 43 px, "Copiar telefone" com 24 × 24 px e botões de destino
   com 36 px (achado do J1). A tela reaproveita as classes da lista de "Clientes aprovados" (.lc-*), então tudo vem escopado à seção
   `.lc-shell[data-area="lider-vip"]`: aquela tela não muda, e com a chave da Líder VIP desligada esta tela nem existe. Só no celular. */
@media (max-width: 767px) {
  .lc-shell[data-area="lider-vip"] .lc-tabs .lc-tab { min-height: 44px !important; }
  .lc-shell[data-area="lider-vip"] .lc-c-tel .lc-copy { min-width: 44px !important; min-height: 44px !important; }
  .lc-shell[data-area="lider-vip"] .lc-acoes-mine .btn-outcome { min-height: 44px !important; }
}