/* Tokens + design system + shell (sidebar/topbar/mobile nav/user menu)
   compartilhado por toda página logada. */

:root {
  /* Cor — paleta viva (repaginação 2026-08-05), nada apagado. */
  --bg: #ffffff; --bg-alt: #F4F7F8; --border: #E7ECEF; --border-strong: #d7dee2;
  --ink: #111827; --ink-soft: #6B7280; --muted: #6e737c;
  --primary: #00B368; --primary-dark: #00985A; --primary-tint: #e3f8ee;
  --success: #14C97B; --success-tint: rgba(20,201,123,0.14);
  --blue: #3B82F6; --blue-tint: rgba(59,130,246,0.12);
  --orange: #FF9F1C; --orange-tint: rgba(255,159,28,0.14);
  --purple: #8B5CF6; --purple-tint: rgba(139,92,246,0.12);
  --danger: #EF4444; --danger-tint: rgba(239,68,68,0.12);
  --gold: #b8842a; --gold-ink: #7a5717; --gold-tint: #fbf1de;
  --alert: #EF4444; --good: #14C97B;

  /* Espaço — grid de 4px. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px;

  /* Raio. */
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px;

  /* Movimento — 120-220ms, ease-out (nunca linear, nunca "salta"). */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 220ms;

  /* Elevação. */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05);
  --shadow-md: 0 8px 24px -8px rgba(17, 24, 39, 0.14);
  --shadow-lg: 0 16px 40px -12px rgba(17, 24, 39, 0.22);
  --shadow-focus: 0 0 0 3px rgba(0, 179, 104, 0.25);

  --font-display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;

  --sidebar-w: 232px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161a; --bg-alt: #0c0f12; --border: #232a30; --border-strong: #2c343b;
    --ink: #eef1f4; --ink-soft: #9aa4ae; --muted: #808b96;
    --primary: #1fd47f; --primary-dark: #17b56c; --primary-tint: rgba(31,212,127,0.14);
    --success: #22e08c; --success-tint: rgba(34,224,140,0.16);
    --blue: #5b9bff; --blue-tint: rgba(91,155,255,0.16);
    --orange: #ffb04d; --orange-tint: rgba(255,176,77,0.16);
    --purple: #a78bfa; --purple-tint: rgba(167,139,250,0.16);
    --danger: #f97066; --danger-tint: rgba(249,112,102,0.16);
    --gold: #e0ab52; --gold-ink: #f4d9a6; --gold-tint: rgba(224,171,82,0.14);
    --alert: #f97066; --good: #22e08c;
  }
}
:root[data-theme="dark"] {
  --bg: #12161a; --bg-alt: #0c0f12; --border: #232a30; --border-strong: #2c343b;
  --ink: #eef1f4; --ink-soft: #9aa4ae; --muted: #808b96;
  --primary: #1fd47f; --primary-dark: #17b56c; --primary-tint: rgba(31,212,127,0.14);
  --success: #22e08c; --success-tint: rgba(34,224,140,0.16);
  --blue: #5b9bff; --blue-tint: rgba(91,155,255,0.16);
  --orange: #ffb04d; --orange-tint: rgba(255,176,77,0.16);
  --purple: #a78bfa; --purple-tint: rgba(167,139,250,0.16);
  --danger: #f97066; --danger-tint: rgba(249,112,102,0.16);
  --gold: #e0ab52; --gold-ink: #f4d9a6; --gold-tint: rgba(224,171,82,0.14);
  --alert: #f97066; --good: #22e08c;
}
:root[data-theme="light"] {
  --bg: #ffffff; --bg-alt: #F4F7F8; --border: #E7ECEF; --border-strong: #d7dee2;
  --ink: #111827; --ink-soft: #6B7280; --muted: #6e737c;
  --primary: #00B368; --primary-dark: #00985A; --primary-tint: #e3f8ee;
  --success: #14C97B; --success-tint: rgba(20,201,123,0.14);
  --blue: #3B82F6; --blue-tint: rgba(59,130,246,0.12);
  --orange: #FF9F1C; --orange-tint: rgba(255,159,28,0.14);
  --purple: #8B5CF6; --purple-tint: rgba(139,92,246,0.12);
  --danger: #EF4444; --danger-tint: rgba(239,68,68,0.12);
  --gold: #b8842a; --gold-ink: #7a5717; --gold-tint: #fbf1de;
  --alert: #EF4444; --good: #14C97B;
}

* { box-sizing: border-box; }
html { color-scheme: light dark; background: var(--bg-alt); }
/* Evita o "double-tap to zoom" acidental do Safari/Chrome mobile ao tocar
   rápido em botões/pills/filtros muito próximos um do outro (ficava
   "dando zoom e folgando a tela" ao usar os filtros) — `manipulation`
   remove só o double-tap-zoom e o delay de 300ms, sem desligar o
   pinch-zoom de verdade (acessibilidade continua intacta). */
html { touch-action: manipulation; }
body {
  margin: 0; background: var(--bg-alt); color: var(--ink);
  font-family: var(--font-body); line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.tabular { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* main é item flex de .app-main (column). `margin:0 auto` (pro centering
   de sempre em telas largas) desativa o stretch automático do flexbox nos
   itens — sem `width:100%` explícito, main volta a se dimensionar pelo
   próprio conteúdo (min-content) em vez do espaço disponível, e qualquer
   componente largo o bastante (ex: o hero animado de dashboard.html)
   esticava a PÁGINA INTEIRA horizontalmente no mobile. `min-width:0` sozinho
   não resolve isso — o culpado é especificamente a combinação
   margin:auto + stretch, não um min-content preso. */
main { width: 100%; max-width: 1100px; margin: 0 auto; padding: var(--space-8) var(--space-6); min-width: 0; }

/* iOS Safari zooms the whole page in on focus when a field's font-size is
   under 16px — trava o zoom deixando tudo >=16px nesses tamanhos de tela. */
@media (max-width: 640px) {
  input, select, textarea { font-size: 16px !important; }
  main { padding: var(--space-4); }
}
@media (max-width: 430px) {
  main { padding: var(--space-3); }
}

/* ---------- Botões ---------- */
.btn {
  font-family: var(--font-body); font-weight: 600; font-size: 0.85rem;
  padding: 0.6em 1.1em; border-radius: var(--radius-md); border: 1.5px solid var(--border-strong);
  background: var(--bg); color: var(--ink); cursor: pointer; text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.5em;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.btn[hidden] { display: none; }
.btn:hover { background: var(--bg-alt); }
.btn:active { transform: scale(0.97); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.btn:disabled { opacity: 0.5; cursor: default; pointer-events: none; }
.btn-solid { background: var(--primary); color: #fff; border-color: transparent; }
.btn-solid:hover { background: var(--primary-dark); }
.btn-ghost { background: none; border-color: transparent; }
.btn-ghost:hover { background: var(--bg-alt); }
.btn-sm { padding: 0.42em 0.85em; font-size: 0.78rem; border-radius: var(--radius-sm); }

/* ---------- Badge / pill genérico ---------- */
.badge-pill {
  display: inline-flex; align-items: center; gap: 0.4em;
  font-size: 0.72rem; font-weight: 700; padding: 0.3em 0.75em; border-radius: var(--radius-full);
  white-space: nowrap; line-height: 1.3;
}
.badge-pill svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.badge-pill-blue { background: var(--blue-tint); color: var(--blue); }
.badge-pill-neutral { background: var(--bg-alt); color: var(--ink-soft); border: 1px solid var(--border); }

/* ---------- Card genérico ---------- */
.card {
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-5);
}

/* ---------- Checkbox customizado ---------- */
input[type="checkbox"] {
  accent-color: var(--primary); width: 16px; height: 16px; cursor: pointer;
}

/* ---------- Tooltip centralizado (era duplicado em cotacoes.html/dashboard.html) ---------- */
[data-tooltip] { position: relative; }
[data-tooltip]:hover::after, [data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute; bottom: calc(100% + 6px); right: 0;
  background: var(--ink); color: var(--bg); font-size: 0.72rem; font-weight: 600; white-space: nowrap;
  padding: 4px 8px; border-radius: var(--radius-sm); pointer-events: none; z-index: 60;
  opacity: 0; animation: tooltip-in var(--dur-fast) var(--ease-out) forwards;
}
@keyframes tooltip-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Toast ---------- */
.toast-stack {
  position: fixed; top: var(--space-5); right: var(--space-5); z-index: 500;
  display: flex; flex-direction: column; gap: var(--space-2); max-width: min(360px, calc(100vw - 32px));
}
@media (max-width: 640px) { .toast-stack { left: var(--space-3); right: var(--space-3); top: var(--space-3); max-width: none; } }
.toast {
  display: flex; align-items: flex-start; gap: var(--space-2);
  background: var(--bg); border: 1px solid var(--border); border-left: 3px solid var(--primary);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: var(--space-3) var(--space-4);
  font-size: 0.85rem; font-weight: 600; color: var(--ink);
  animation: toast-in var(--dur-slow) var(--ease-out) forwards;
}
.toast.leaving { animation: toast-out var(--dur-base) var(--ease-out) forwards; }
.toast.success { border-left-color: var(--success); }
.toast.danger { border-left-color: var(--danger); }
.toast.info { border-left-color: var(--blue); }
@keyframes toast-in { from { opacity: 0; transform: translateX(16px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(16px) scale(0.98); } }

/* Paginação — usada em produtos.html, fornecedores.html e a tabela
   tradicional de cotacoes.html (mesmo id/classe nas 3 páginas). */
.pagination-bar {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: var(--space-3); margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--border);
}
.pagination-bar[hidden] { display: none; }
.pagination-size { display: flex; align-items: center; gap: var(--space-2); font-size: 0.85rem; color: var(--ink-soft); }
.pagination-size select {
  padding: 0.4em 0.6em; border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--ink); font-size: 0.85rem;
}
.pagination-size select:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--shadow-focus); }
.pagination-nav { display: flex; align-items: center; gap: var(--space-3); }
#pagination-info { font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; }

/* =====================================================================
   SHELL — sidebar (desktop) + topbar + drawer de navegação (mobile, hambúrguer).
   ===================================================================== */

.app-shell { display: flex; min-height: 100vh; align-items: stretch; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 100vh; }

/* ---------- Sidebar (desktop, ≥861px) ---------- */
.sidebar {
  width: var(--sidebar-w); flex: none; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  background: var(--bg); border-right: 1px solid var(--border);
  display: none; flex-direction: column; padding: var(--space-5) var(--space-3);
}
.sidebar-logo { display: flex; align-items: center; padding: 0 var(--space-2); margin-bottom: var(--space-4); }
.sidebar-logo .logo-img { height: 58px; }
@media (prefers-color-scheme: dark) { .sidebar-logo .logo-img { filter: brightness(0) invert(1); } }
:root[data-theme="dark"] .sidebar-logo .logo-img { filter: brightness(0) invert(1); }
:root[data-theme="light"] .sidebar-logo .logo-img { filter: none; }

/* Cabeçalho simples acima da navegação (pedido do usuário: "sem card, sem
   arte", só um pouco de contexto antes da lista de links) — sem coluna de
   nome no sistema (retomada.md), a saudação fica sempre genérica; a
   segunda linha (plano/dias) só aparece pra quem tem assinatura de
   verdade, populada por populateShell() em app-nav.js. Existe em DUAS
   cópias no DOM ao mesmo tempo (sidebar desktop + drawer mobile) — por
   isso nunca tem id, só classe (mesma lição da seção 5.37 do retomada). */
.sidebar-greeting { padding: 0 var(--space-2); margin-bottom: var(--space-4); }
.sidebar-greeting-title { margin: 0; font-size: 0.85rem; font-weight: 700; color: var(--ink); }
.sidebar-greeting-plano { margin: 4px 0 0; font-size: 0.78rem; font-weight: 600; color: var(--ink-soft); }
.sidebar-greeting-dias { margin: 1px 0 0; font-size: 0.72rem; color: var(--muted); }
.sidebar-greeting-plano[hidden], .sidebar-greeting-dias[hidden] { display: none; }
.sidebar-divider { height: 1px; background: var(--border); border: none; margin: 0 var(--space-2) var(--space-4); }

/* Indicador discreto de status da assinatura, junto ao item "Assinatura"
   do menu — mesma lição de duas cópias no DOM (sidebar + drawer). */
.sidebar-link-badge {
  margin-left: auto; flex: none; font-size: 0.66rem; font-weight: 700; white-space: nowrap;
  padding: 0.22em 0.6em; border-radius: 999px;
  background: var(--bg-alt); color: var(--ink-soft);
}
.sidebar-link-badge[hidden] { display: none; }
/* O rótulo do link (não o badge) é quem cede espaço/trunca se precisar —
   badge de status precisa continuar sempre legível por inteiro. */
.sidebar-link span:not(.sidebar-link-badge), .menu-link span:not(.sidebar-link-badge) {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.sidebar-link-badge.dourado { background: var(--gold-tint); color: var(--gold-ink); }
.sidebar-link-badge.laranja { background: var(--orange-tint); color: var(--orange); }
.sidebar-link-badge.vermelho { background: var(--danger-tint); color: var(--danger); }

.sidebar-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.sidebar-link {
  display: flex; align-items: center; gap: var(--space-3);
  font-family: inherit; font-size: 0.87rem; font-weight: 600; color: var(--ink-soft); text-decoration: none;
  background: none; border: none; text-align: left; width: 100%; cursor: pointer;
  padding: 0.68em var(--space-3); border-radius: var(--radius-md); position: relative;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.sidebar-link[hidden] { display: none; }
.sidebar-link svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; flex: none; }
.sidebar-link:hover { background: var(--bg-alt); color: var(--ink); }
.sidebar-link.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; font-weight: 700;
  box-shadow: 0 4px 14px -4px rgba(0,179,104,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
}
/* Card sempre em tema escuro fixo, mesma técnica "premium futurista" de
   pagamento.html/login.html/dashboard.html (retomada.md seção 6) — texto
   hardcoded pra claro de propósito, nunca var(--ink). */
.sidebar-referral {
  margin-top: var(--space-4); padding: var(--space-5) var(--space-3); border-radius: var(--radius-lg);
  background: radial-gradient(130% 160% at 25% -20%, #12291c 0%, #0a2b1c 55%, #051b11 100%);
  border: none; text-decoration: none;
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,0.4);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.sidebar-referral:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -12px rgba(0,0,0,0.5); }
.sidebar-referral-icon {
  width: 36px; height: 36px; border-radius: 10px; margin-bottom: 6px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  box-shadow: 0 3px 10px -3px rgba(0,179,104,0.6);
}
.sidebar-referral-icon svg { width: 18px; height: 18px; stroke: none; fill: #fff; }
.sidebar-referral-title { font-family: var(--font-body); font-weight: 700; font-size: 0.82rem; color: #f3f6f4; }
.sidebar-referral-value { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; color: #7CF2B4; line-height: 1.3; }
.sidebar-referral-sub { font-size: 0.68rem; color: #9aa6a0; margin-bottom: 8px; }
.sidebar-referral-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px; width: 100%;
  background: var(--primary); color: #fff; font-weight: 700; font-size: 0.76rem;
  padding: 0.55em 0.8em; border-radius: var(--radius-full);
}
.sidebar-referral-cta svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.6; }

/* Indicações/Pagamento/Configurações/Sair — antes eram um flyout separado
   no avatar do topbar, agora são só mais itens da mesma lista de
   navegação (sidebar desktop + drawer mobile), sem nenhuma divisória
   visual. .sidebar-link (sidebar) / .menu-link (drawer) cobrem o visual
   normal; só o item de sair precisa de cor própria (vermelho). */
.sidebar-logout { color: var(--danger); margin-top: var(--space-3); }
.sidebar-logout:hover { background: var(--danger-tint); color: var(--danger); }

@media (min-width: 861px) {
  .sidebar { display: flex; }
}

/* ---------- Topbar (mobile: hambúrguer esq / logo centro / ações dir —
   desktop: título ou busca / ações dir) — mesmo elemento nos dois, muda por
   CSS (order/display), evita duplicar markup mobile vs desktop. ---------- */
.topbar {
  background: var(--bg); border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--space-3);
  height: 64px; padding: 0 var(--space-5); flex: none;
}
.topbar-hamburger { display: none; }
.topbar-mobile-logo { display: none; }
.topbar-title { flex: 1; min-width: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; flex: none; position: relative; }

@media (max-width: 860px) {
  .topbar { padding: 0 var(--space-3); gap: var(--space-2); height: 66px; }
  .topbar-hamburger { display: flex; order: 1; }
  .topbar-mobile-logo { display: flex; order: 2; flex: 1; justify-content: center; align-items: center; }
  .topbar-mobile-logo img { height: 54px; }
  @media (prefers-color-scheme: dark) { .topbar-mobile-logo img { filter: brightness(0) invert(1); } }
  :root[data-theme="dark"] .topbar-mobile-logo img { filter: brightness(0) invert(1); }
  :root[data-theme="light"] .topbar-mobile-logo img { filter: none; }
  .topbar-title { display: none; }
  .topbar-actions { order: 3; margin-left: 0; }
}

/* Estilo "Minimalista" (configuracoes.html) — zoom 0.8 no site inteiro,
   só no mobile (pedido explícito do usuário, testado por um amigo dele
   manualmente no zoom do navegador e aprovado). `zoom` (não
   `transform:scale`) de propósito: mantém `position:fixed`/`sticky`
   (drawer, topbar, modais) se comportando igual a um zoom de navegador de
   verdade, sem os problemas de contexto de empilhamento que
   `transform:scale` teria no html/body. Padrão (sem `data-density` ou
   `data-density="normal"`) não muda nada. */
@media (max-width: 860px) {
  html[data-density="minimalista"] { zoom: 0.8; }
  /* Campos de texto ficam "des-encolhidos" dentro do zoom 0.8: 0.8 * 1.25 =
     1.0, então o campo volta a renderizar no tamanho real (16px+) mesmo com
     o resto da página em miniatura. Sem isso, um <input> com font-size:16px
     na declaração renderiza a 12.8px na tela (16 * 0.8) — abaixo do limiar
     de 16px que o Safari mobile usa pra decidir se dá zoom automático ao
     focar o campo (bug real reportado: "pesquisar dá zoom", reproduzia no
     modo Minimalista mesmo com o CSS já declarando 16px). `zoom` composto
     (filho dentro de pai já com zoom) multiplica, não substitui — por isso
     1.25 aqui cancela exatamente o 0.8 do html. Cobre todo campo de texto
     (não só busca) pra qualquer modal/formulário novo já nascer protegido. */
  html[data-density="minimalista"] input[type="search"],
  html[data-density="minimalista"] input[type="text"],
  html[data-density="minimalista"] input[type="email"],
  html[data-density="minimalista"] input[type="tel"],
  html[data-density="minimalista"] input[type="number"],
  html[data-density="minimalista"] input[type="password"],
  html[data-density="minimalista"] textarea { zoom: 1.25; }
}
@media (max-width: 430px) { .topbar-actions { gap: 4px; } }

.plan-badge {
  display: flex; align-items: center; gap: 6px;
  background: var(--primary-tint); color: var(--primary-dark);
  font-size: 0.78rem; font-weight: 600; padding: 0.45em 0.8em; border-radius: var(--radius-full);
  white-space: nowrap; flex: none;
}
.plan-badge[hidden] { display: none; }
.plan-badge svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.plan-badge.low { background: var(--gold-tint); color: var(--gold-ink); }
.plan-badge.expired { background: var(--danger-tint); color: var(--danger); }
@media (max-width: 640px) { .plan-badge .plan-label { display: none; } }
@media (max-width: 430px) { .plan-badge { display: none; } }

.icon-btn {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border-strong); background: var(--bg); color: var(--ink-soft);
  cursor: pointer; flex: none; position: relative;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--bg-alt); }
.icon-btn:active { transform: scale(0.94); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.icon-btn[aria-expanded="true"] { border-color: var(--primary); color: var(--primary-dark); }
.icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.icon-btn .icon-moon { display: none; }
:root[data-theme="dark"] .icon-btn .icon-sun { display: none; }
:root[data-theme="dark"] .icon-btn .icon-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-btn .icon-sun { display: none; }
  :root:not([data-theme="light"]) .icon-btn .icon-moon { display: block; }
}

.notif-dot {
  position: absolute; top: 7px; right: 7px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--danger); border: 1.5px solid var(--bg);
}
.notif-dot[hidden] { display: none; }

/* ---------- Painéis flutuantes (notificações) ---------- */
.flyout-panel {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 60;
  width: 280px; max-width: calc(100vw - 24px);
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: var(--space-2);
  transform-origin: top right;
  animation: flyout-in var(--dur-base) var(--ease-out);
}
.flyout-panel[hidden] { display: none; }
@keyframes flyout-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.menu-link {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-size: 0.86rem; font-weight: 600; color: var(--ink);
  text-decoration: none; background: none; border: none; text-align: left; width: 100%;
  padding: 0.65em 0.7em; border-radius: var(--radius-sm); cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out);
}
.menu-link[hidden] { display: none; }
.menu-link:hover { background: var(--bg-alt); }
.menu-link svg { width: 16px; height: 16px; stroke: var(--ink-soft); fill: none; stroke-width: 1.8; flex: none; }
.menu-link.active {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color: #fff; font-weight: 700;
  box-shadow: 0 4px 14px -4px rgba(0,179,104,0.55), inset 0 1px 0 rgba(255,255,255,0.18);
}
.menu-link.active svg { stroke: #fff; }

.notif-empty { padding: var(--space-6) var(--space-3); text-align: center; }
.notif-empty svg { width: 30px; height: 30px; stroke: var(--muted); fill: none; stroke-width: 1.5; margin-bottom: var(--space-2); }
.notif-empty p { margin: 0; font-size: 0.82rem; color: var(--ink-soft); font-weight: 600; }
.notif-panel-title { font-size: 0.78rem; font-weight: 700; color: var(--ink); padding: var(--space-2) var(--space-2) var(--space-1); }

/* ---------- Nav drawer (mobile — abre pelo hambúrguer, só links de página) ---------- */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 90; background: rgba(15,20,17,0.45);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-base) var(--ease-out);
}
.drawer-scrim.open { opacity: 1; pointer-events: auto; }
.nav-drawer {
  position: fixed; top: 0; bottom: 0; left: 0; z-index: 95;
  width: min(280px, 80vw); background: var(--bg); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; padding: var(--space-5) var(--space-3);
  transform: translateX(-100%); transition: transform var(--dur-slow) var(--ease-out);
  overflow-y: auto;
}
.nav-drawer.open { transform: translateX(0); }
/* Ocupa o espaço que sobra entre o último link e o "Sair" — centraliza o
   card verticalmente ali (nunca colado num dos dois), e como consequência
   empurra o "Sair" pro fim do drawer (mesma altura fixa via
   position:fixed;top:0;bottom:0 no próprio .nav-drawer). */
.nav-drawer-referral-wrap { flex: 1; min-height: var(--space-6); display: flex; flex-direction: column; justify-content: center; }
@media (min-width: 861px) { .nav-drawer, .drawer-scrim, .topbar-hamburger { display: none !important; } }

/* Faixa de falha de sessão — usada só quando app-nav.js não consegue
   carregar o perfil e a página fica sem dado nenhum. Diferente do toast,
   esta NÃO some sozinha: sem ela o usuário ficaria olhando uma tela vazia
   sem saber o motivo. */
.falha-sessao-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  flex-wrap: wrap; padding: var(--space-3) var(--space-4);
  background: var(--danger); color: #fff;
  font-size: 0.9rem; font-weight: 600; text-align: center;
  box-shadow: 0 -4px 18px rgba(0,0,0,0.18);
}
.falha-sessao-btn {
  border: none; border-radius: var(--radius-md); cursor: pointer;
  background: rgba(255,255,255,0.95); color: var(--danger);
  font-family: inherit; font-size: 0.85rem; font-weight: 700;
  padding: 0.5em 1.1em;
}
.falha-sessao-btn:hover { background: #fff; }

/* ---------------------------------------------------------------------
   Menu de admin sem flash

   Os itens [data-admin-only] nascem com `hidden` no HTML pra ninguém que
   não é admin vê-los enquanto o perfil carrega. O efeito colateral era o
   contrário: o admin via o menu crescer em toda navegação, porque a
   revelação só acontecia depois de duas idas à rede.

   shell/guard.html marca <html class="mf-admin"> a partir do papel em
   cache, antes da primeira pintura. Estas regras usam essa marca pra já
   pintar o menu completo — sem esperar rede nenhuma.
   --------------------------------------------------------------------- */
html.mf-admin a.sidebar-link[data-admin-only][hidden],
html.mf-admin a.menu-link[data-admin-only][hidden] { display: flex; }
/* O grupo "Marketing" é uma <div>, não um <a> — precisa da própria regra,
   e com `display: block`, senão a sanfona vira linha. */
html.mf-admin .sidebar-grupo[data-admin-only][hidden],
html.mf-admin .sidebar-secao[data-admin-only][hidden] { display: block; }

/* O outro sentido do mesmo flash, e o que continuava aparecendo:
   "Indicações", "Assinatura" e o card "Indique e ganhe" são do ASSINANTE
   e nascem VISÍVEIS no HTML (é o caso comum). Pro admin o app-nav.js os
   tira do DOM — mas só depois de getSession() + consulta do perfil, e até
   lá ele via os três pintarem e sumirem em TODA navegação.

   `display:none` aqui só evita a pintura enquanto o papel em cache diz
   que é admin. Quem manda continua sendo o remove() do app-nav.js: o que
   não está no DOM ninguém reexibe pelo inspetor. */
html.mf-admin [data-sem-admin] { display: none !important; }

/* Mesma ideia pro vendedor (Comunidade Oficial some pra ele). */
html.mf-papel-vendedor [data-sem-vendedor] { display: none !important; }

/* E pro lado de quem TEM "Margens" (lojista e sócio): o item nasce
   `hidden`, então sem isto o menu deles "crescia" a cada página, igual
   acontecia com o do admin antes da 5.60. */
html.mf-papel-usuario a.sidebar-link[data-equipe-only][hidden],
html.mf-papel-usuario a.menu-link[data-equipe-only][hidden],
html.mf-papel-socio a.sidebar-link[data-equipe-only][hidden],
html.mf-papel-socio a.menu-link[data-equipe-only][hidden] { display: flex; }

/* `[hidden]` PRECISA do reforço redundante nestes dois containers.
   `.sidebar-secao` e `.sidebar-grupo` declaram `display: block` numa regra
   de CLASSE, e regra de autor vence a do navegador (`[hidden]{display:none}`)
   independente de especificidade. Sem isto, os dois pintavam pra quem NÃO é
   admin até o app-nav.js removê-los: o usuário comum via "Marketing" e a
   seção "Dashboard" (com Analytics embaixo) piscarem em toda navegação.
   Medido em 3 frames pintados antes desta regra existir.

   Os `<a>` do menu (`.sidebar-link`, `.menu-link`) já têm o mesmo reforço
   mais acima — eram só estes dois que faltavam. As regras de `html.mf-admin`
   continuam vencendo por especificidade (0,4,1 contra 0,2,0), então o admin
   segue vendo tudo sem esperar rede. */
.sidebar-secao[hidden],
.sidebar-grupo[hidden] { display: none; }

/* ---------- Seção: um link normal com filhos que aparecem ---------- */
/* Diferente do .sidebar-grupo: aqui o item de cima É uma página. Clicar
   nele NAVEGA (não abre sanfona) e os filhos aparecem quando você já está
   naquela área. */
.sidebar-secao { display: block; }
.sidebar-filhos { display: none; }
.sidebar-filhos.visivel { display: block; }

/* ---------- Grupo com submenu na sidebar ---------- */
.sidebar-grupo { display: block; }
.sidebar-grupo-btn {
  width: 100%; background: none; border: none; font-family: inherit; cursor: pointer;
  text-align: left;
}
.sidebar-grupo-seta {
  margin-left: auto; width: 15px; height: 15px; flex: none;
  transition: transform var(--dur-fast, 0.15s) ease;
}
.sidebar-grupo-btn[aria-expanded="true"] .sidebar-grupo-seta { transform: rotate(90deg); }

/* Fechado por padrão. `grid-template-rows` em vez de `height` porque a
   altura do conteúdo é desconhecida — assim a transição funciona sem
   precisar medir nada no JavaScript.

   EXIGE UM FILHO DIRETO SÓ (`.sidebar-grupo-lista`). `grid-template-rows:
   0fr` define apenas a primeira linha: qualquer filho a mais cai numa
   linha implícita `auto` e continua visível com o grupo fechado. Foi o
   bug de "Marketing nunca fica recolhido" — os dois links estavam soltos
   aqui dentro, e o segundo nunca colapsava. */
.sidebar-grupo-itens {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base, 0.22s) ease;
}
.sidebar-grupo-itens > * { overflow: hidden; min-height: 0; }
.sidebar-grupo.aberto .sidebar-grupo-itens { grid-template-rows: 1fr; }
.sidebar-grupo-itens { overflow: hidden; }
.sidebar-sublink { padding-left: 34px; font-size: 0.86rem; }
.sidebar-sublink svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------------
   Transição suave entre páginas

   Cada página aqui é um carregamento completo (não há SPA), então trocar
   de item no menu dava um corte seco: a tela antiga sumia, aparecia o
   fundo do navegador e a nova pintava de uma vez.

   O @view-transition resolve isso no próprio navegador — ele guarda um
   retrato da página que sai e faz o cruzamento com a que entra. Sem
   JavaScript, sem biblioteca e sem custo de carregamento: quem não
   suporta (Firefox hoje) simplesmente navega como antes.

   Duração curta de propósito. Acima de ~250ms a navegação começa a
   PARECER lenta, que é o oposto do objetivo.
   --------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 220ms;
  animation-timing-function: cubic-bezier(0.2, 0, 0.2, 1);
}

/* Quem pediu menos movimento no sistema não recebe animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ---------------------------------------------------------------------
   Sino do topo com contagem

   A bolinha do sino (.notif-dot) era só um ponto de 8px sem texto. Pra
   mostrar quantas pendências existem ela vira uma pílula que cresce com
   o número — mesma cor e mesma posição de sempre, pra continuar sendo
   "a bolinha do sino" e não um elemento novo.
   --------------------------------------------------------------------- */
.notif-dot.com-numero {
  width: auto; height: auto; min-width: 16px; top: 3px; right: 3px;
  padding: 0 4px; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; line-height: 16px;
  color: #fff; text-align: center;
}

/* Itens de notificação dentro do painel do sino. */
.notif-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 4px; border-top: 1px solid var(--border);
  font-size: 0.84rem; color: var(--ink); text-decoration: none; line-height: 1.45;
}
.notif-item:first-of-type { border-top: none; }
.notif-item:hover { color: var(--primary-dark); }
.notif-item-ponto {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: var(--primary); margin-top: 6px;
}
.notif-item-ponto.alerta { background: var(--danger); }