/* ==========================================================================
   Aline 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,
  body #main.de-v2-main,
  .de-home-container,
  .de-home-bottom {
    padding-bottom: 92px !important;
  }
}

/* Espaço para o botão flutuante Suporte não cobrir o fim da página (desktop). */
#main,
body #main.de-v2-main {
  padding-bottom: 80px !important;
}
@media (max-width: 767px) {
  #main,
  body #main.de-v2-main { padding-bottom: 148px !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: rgba(255,118,23,.4);
  box-shadow: 0 0 6px rgba(255,118,23,.25);
  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, rgba(255,118,23,.42) 0, rgba(255,118,23,.2) 34%, rgba(255,118,23,.05) 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:focus-visible {
  color: var(--de-orange, #FF7617);
  text-decoration: none;
}

/* Só onde existe mouse: no toque o :hover gruda no último botão tocado e marcava o item errado em outra tela. */
@media (hover: hover) {
  .de-bottom-item:hover {
    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). A marca não usa verde: laranja escuro da marca com texto branco (contraste AA). */
.de-suporte-whats { position: fixed; right: 16px; bottom: 16px; z-index: 35; height: 44px; padding: 0 18px; border: 0; border-radius: var(--de-raio-pilula); background: var(--de-laranja-escuro); color: var(--de-branco, #fff); font-family: inherit; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--de-sombra-menu); cursor: pointer; }
.de-suporte-whats:focus-visible { outline: 3px solid var(--de-laranja-principal); outline-offset: 2px; }
@media (max-width: 767px) { .de-suporte-whats { bottom: 76px; } }
/* No Fórum o botão de "+ Nova publicação" ocupa o canto: o Suporte sobe para não cobri-lo. */
body:has(.forum-wrap) .de-suporte-whats { bottom: 92px; }
@media (max-width: 767px) { body:has(.forum-wrap) .de-suporte-whats { bottom: 150px; } }
/* Micro Crédito: no celular a barra Voltar/Avançar fica em cima da barra de baixo (58 px + até 122 px na J9, onde o
   "Concluir e ver meus links" quebra em 2 linhas); o Suporte sobe acima dela. */
@media (max-width: 767px) { body:has(.mc-nav) .de-suporte-whats, body:has(.mc-rodape) .de-suporte-whats { bottom: 192px; } }
/* Tablet (sem barra de baixo): a barra da jornada gruda no fundo (81 px em 834, 89 px a partir de 1024) e o Suporte cobria a
   ponta direita do Avançar em 834 px; sobe acima dela. */
@media (min-width: 768px) and (max-width: 1279px) { body:has(.mc-nav) .de-suporte-whats, body:has(.mc-rodape) .de-suporte-whats { bottom: 105px; } }
body:has(#dialog.popup-travado[open]) .de-suporte-whats, body:has(#tablet-sheet-backdrop[style*="flex"]) .de-suporte-whats { display: none; }
/* Popup do Suporte: uma linha por assunto, botão embaixo em telas estreitas. */
.suporte-lista { display: grid; gap: 12px; margin-top: 16px; }
.suporte-linha { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--de-borda, #e5e5e5); }
.suporte-assunto { font-weight: 600; }
@media (min-width: 768px) { .suporte-linha { flex-direction: row; align-items: center; justify-content: space-between; } }

/* QA 19/10: de 1280 a 1439 px o menu do administrador (com TOP LÍDERES, Crefaz etc.) passava por baixo do botão da conta e
   "Administração" ficava inclicável. Só nesse caso (menu com Administração): conta só com o avatar (o nome continua no menu da
   conta), logo menor, vão e letra menores, e o menu nunca invade a área da conta (min-width:0, sem quebra de linha). */
@media (min-width: 1280px) and (max-width: 1439px) {
  .de-shell-nav { min-width: 0 !important; }
  .de-shell-nav .de-nav-link, .de-shell-nav button.de-tools-trigger { white-space: nowrap; }
  .de-shell-inner:has(.de-shell-nav a[href="#admin"]) .de-account-name { display: none; }
  .de-shell-inner:has(.de-shell-nav a[href="#admin"]) .de-shell-logo { width: 104px; }
  .de-shell-nav:has(a[href="#admin"]) { gap: 4px 5px !important; }
  .de-shell-nav:has(a[href="#admin"]) .de-nav-link, .de-shell-nav:has(a[href="#admin"]) button.de-tools-trigger { font-size: 12.5px !important; }
  .de-shell-nav:has(a[href="#admin"]) button.de-tools-trigger { padding-left: 8px !important; padding-right: 8px !important; }
}
/* Micro Crédito (B-2, 21/10): com o item "Micro Crédito" o menu passava por baixo do botão da conta de 1280 a 1599 px (afiliado
   −29 px em 1280, −20 em 1440; administrador −148 em 1440). Só com o item no menu (`:has`): conta só com o avatar, vão menor e,
   para o administrador, logo menor e Ferramentas mais estreito. A letra não muda (no administrador de 1280 a 1439 já é 12.5px pelo
   bloco acima). Depois do bloco acima de propósito: mesmos !important, a ordem decide. */
@media (min-width: 1280px) and (max-width: 1599px) {
  .de-shell-nav:has(a[href="#micro-credito"]) { min-width: 0 !important; gap: 4px 6px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]) .de-nav-link, .de-shell-nav:has(a[href="#micro-credito"]) button.de-tools-trigger { white-space: nowrap; }
  .de-shell-inner:has(.de-shell-nav a[href="#micro-credito"]) .de-account-name { display: none; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#admin"]) { gap: 4px 4px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#admin"]) button.de-tools-trigger { padding-left: 8px !important; padding-right: 8px !important; }
  .de-shell-inner:has(.de-shell-nav a[href="#micro-credito"]):has(.de-shell-nav a[href="#admin"]) .de-shell-logo { width: 104px; }
}
/* Micro Crédito (B-2, continuação 21/10): de 1600 em diante (sem teto; 1920 também quebrava) o item também empurrava o menu para baixo da conta (afiliado −41 em 1600;
   administrador −182 em 1600, −142 em 1800) e, com a Líder VIP ligada (item TOP LÍDERES), estourava de 1280 a 1599 (afiliado −81
   e administrador −68 em 1280). Mesma receita, faixa por faixa: conta só com o avatar, vão menor, letra só onde a medida pediu
   (piso 12.5px). As combinações com Líder VIP e Administração vão por extenso: `:has()` soma a especificidade do argumento e a
   regra Líder VIP + Administração lá de cima ganharia de uma regra só com o item. Em 1280–1365 com Líder VIP e Administração
   (14 itens) é o limite: vão 2px, logo 80px, conta e Ferramentas com 6/4px de lado. */
@media (min-width: 1280px) and (max-width: 1365px) {
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]) { gap: 4px 4px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]) .de-nav-link, .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]) button.de-tools-trigger { font-size: 12.5px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]) button.de-tools-trigger { padding-left: 8px !important; padding-right: 8px !important; }
  .de-shell-inner:has(.de-shell-nav a[href="#micro-credito"]):has(.de-shell-nav a[href="#lider-vip"]) .de-shell-logo { width: 104px; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]):has(a[href="#admin"]) { gap: 4px 2px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]):has(a[href="#admin"]) button.de-tools-trigger { padding-left: 4px !important; padding-right: 4px !important; }
  .de-shell-inner:has(.de-shell-nav a[href="#micro-credito"]):has(.de-shell-nav a[href="#lider-vip"]) { padding-left: 12px !important; padding-right: 12px !important; gap: 12px 8px !important; }
  .de-shell-inner:has(.de-shell-nav a[href="#micro-credito"]):has(.de-shell-nav a[href="#lider-vip"]):has(.de-shell-nav a[href="#admin"]) .de-shell-account button.de-account-trigger { padding-left: 6px !important; padding-right: 6px !important; }
  .de-shell-inner:has(.de-shell-nav a[href="#micro-credito"]):has(.de-shell-nav a[href="#lider-vip"]):has(.de-shell-nav a[href="#admin"]) .de-shell-logo { width: 80px; }
}
@media (min-width: 1366px) and (max-width: 1439px) {
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]) { gap: 4px 4px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]) .de-nav-link, .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]) button.de-tools-trigger { font-size: 13px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]):has(a[href="#admin"]) .de-nav-link, .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]):has(a[href="#admin"]) button.de-tools-trigger { font-size: 12.5px !important; }
}
@media (min-width: 1440px) and (max-width: 1599px) {
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]) { gap: 4px 4px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]) .de-nav-link, .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]) button.de-tools-trigger { font-size: 13.5px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]):has(a[href="#admin"]) .de-nav-link, .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]):has(a[href="#admin"]) button.de-tools-trigger { font-size: 13px !important; }
}
@media (min-width: 1600px) {
  .de-shell-nav:has(a[href="#micro-credito"]) { min-width: 0 !important; }
  .de-shell-nav:has(a[href="#micro-credito"]) .de-nav-link, .de-shell-nav:has(a[href="#micro-credito"]) button.de-tools-trigger { white-space: nowrap; }
  .de-shell-inner:has(.de-shell-nav a[href="#micro-credito"]) .de-account-name { display: none; }
}
@media (min-width: 1600px) and (max-width: 1799px) {
  .de-shell-nav:has(a[href="#micro-credito"]) { gap: 4px 14px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#admin"]) { gap: 4px 8px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]) { gap: 4px 6px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]):has(a[href="#admin"]) { gap: 4px 5px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]):has(a[href="#admin"]) .de-nav-link, .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]):has(a[href="#admin"]) button.de-tools-trigger { font-size: 14px !important; }
}
@media (min-width: 1800px) {
  .de-shell-nav:has(a[href="#micro-credito"]) { gap: 4px 20px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#admin"]) { gap: 4px 12px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]) { gap: 4px 12px !important; }
  .de-shell-nav:has(a[href="#micro-credito"]):has(a[href="#lider-vip"]):has(a[href="#admin"]) { gap: 4px 8px !important; }
}

/* Item Suporte da gaveta é botão: mesmo visual dos links. */
button.de-sheet-link { width: 100%; font-family: inherit; }

/* Suporte (reconferência): botões em foco mantêm texto branco sobre o marrom, com contorno visível. */
.suporte-linha .button, .suporte-linha .button * { color: #fff !important; }
.suporte-linha .button:hover, .suporte-linha .button:focus { color: #fff !important; }
.suporte-linha .button:focus-visible { outline: 3px solid var(--de-laranja-principal, #f28c28); outline-offset: 2px; }
/* Popup do Suporte (#dialog): ao abrir, liquidifyActions (app.js) põe liquid-button-primary no "Chamar no WhatsApp", que pintava
   laranja claro (rgb 255,118,23) com texto branco (2,67:1). Aqui: fundo laranja escuro da marca (#A6410A, branco 6,2:1), também em hover/foco. */
#dialog .suporte-linha a.button, #dialog .suporte-linha a.button.liquid-button-primary { background: var(--de-laranja-escuro, #A6410A) !important; background-image: none !important; color: #fff !important; }
#dialog .suporte-linha a.button *, #dialog .suporte-linha a.button.liquid-button-primary * { color: #fff !important; }
#dialog .suporte-linha a.button:hover, #dialog .suporte-linha a.button:focus, #dialog .suporte-linha a.button:focus-visible,
#dialog .suporte-linha a.button.liquid-button-primary:hover, #dialog .suporte-linha a.button.liquid-button-primary:focus, #dialog .suporte-linha a.button.liquid-button-primary:focus-visible { background: #8a3508 !important; color: #fff !important; }
#dialog .suporte-linha a.button:hover *, #dialog .suporte-linha a.button:focus *, #dialog .suporte-linha a.button:focus-visible *,
#dialog .suporte-linha a.button.liquid-button-primary:hover *, #dialog .suporte-linha a.button.liquid-button-primary:focus *, #dialog .suporte-linha a.button.liquid-button-primary:focus-visible * { color: #fff !important; }
/* 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; }
}