/* Design System "Visual By Suporte Fitness" (docs/visual/DESIGN-SYSTEM.md), 13/10/2026.
   Camada final de estilo: carregada por último em index.html. Os valores das cores vêm de
   premium-tokens.css e da aparência da unidade (theme.mjs); aqui ficam formas, tipografia
   e os detalhes do padrão (marcador dourado no menu, uma ação dourada por tela). */

@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('/fonts/plus-jakarta-sans-variable.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ds-gold: #f2b705;
  --ds-gold-hover: #f8cd4a;
  --ds-on-gold: #06122a;
  --ds-heading: #0b1e3f;
  --ds-navy-50: #eef2f9;
  --ds-navy-100: #d9e1f0;
  --ds-navy-300: #8299c5;
  --ds-navy-500: #2c4a85;
  --ds-line: #e2e8f0;
  --ds-control-line: #cbd5e1;
  --ds-shadow-card: 0 1px 2px rgba(15, 23, 42, .05);
  /* Páginas avulsas (portal do aluno, administração do portal) */
  --pg-primary: #0b1e3f; --pg-primary-hover: #0f2045; --pg-border: #cbd5e1; --pg-text: #1e293b; --pg-muted: #64748b; --pg-soft: #eef2f9;
}

/* ── Tipografia ─────────────────────────────────────── */
body, button, input, select, textarea { font-family: var(--by-font, 'Plus Jakarta Sans', system-ui, 'Segoe UI', sans-serif); }
body:not(.auth-pending) #title { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; color: var(--ds-heading); }
[data-by-theme="dark"] body:not(.auth-pending) #title { color: var(--by-text); }
body:not(.auth-pending) .section-heading h2 { font-size: 15px; font-weight: 700; color: var(--ds-heading); }
[data-by-theme="dark"] body:not(.auth-pending) .section-heading h2 { color: var(--by-text); }

/* ── Barra superior ─────────────────────────────────── */
body:not(.auth-pending) .topbar { border-bottom: 1px solid var(--nx-topbar-line, var(--ds-line)); box-shadow: none; }

/* Uma ação de destaque por tela, em dourado */
body:not(.auth-pending) #new-student {
  background: var(--ds-gold); color: var(--ds-on-gold); border-color: var(--ds-gold);
  font-weight: 700; border-radius: 12px; box-shadow: 0 1px 2px rgba(176, 127, 0, .2);
}
body:not(.auth-pending) #new-student:hover { background: var(--ds-gold-hover); border-color: var(--ds-gold-hover); }
body:not(.auth-pending) #new-student svg { color: var(--ds-on-gold); stroke: currentColor; }

/* ── Menu lateral ───────────────────────────────────── */
body:not(.auth-pending) > aside nav .nav-group { color: var(--ds-navy-300); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
body:not(.auth-pending) > aside nav .nav-items button {
  position: relative; border-radius: 12px; font-weight: 600; color: var(--by-nav-text); background: transparent; box-shadow: none;
}
body:not(.auth-pending) > aside nav .nav-items button svg { color: var(--ds-navy-300); }
body:not(.auth-pending) > aside nav .nav-items button:hover { background: rgba(255, 255, 255, .06); color: #fff; }
body:not(.auth-pending) > aside nav .nav-items button:hover svg { color: #fff; }
body:not(.auth-pending) > aside nav .nav-items button.selected { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }
body:not(.auth-pending) > aside nav .nav-items button.selected svg { color: var(--ds-gold); }
body:not(.auth-pending) > aside nav .nav-items button.selected::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 20px; transform: translateY(-50%);
  border-radius: 0 9999px 9999px 0; background: var(--ds-gold);
}

/* ── Cartões e lista de alunos ──────────────────────── */
body:not(.auth-pending) main .card { border-radius: 16px; border: 1px solid var(--by-border); box-shadow: var(--ds-shadow-card); }
body:not(.auth-pending) main table thead th {
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--by-text-muted); background: var(--by-surface-muted);
}
body:not(.auth-pending) main table tbody tr:hover { background: var(--ds-navy-50); }
[data-by-theme="dark"] body:not(.auth-pending) main table tbody tr:hover { background: var(--by-surface-muted); }
body:not(.auth-pending) .premium-student-list .text-button { color: var(--ds-heading); font-weight: 600; }
[data-by-theme="dark"] body:not(.auth-pending) .premium-student-list .text-button { color: var(--by-text); }
body:not(.auth-pending) .premium-list-avatar { background: linear-gradient(135deg, #152a52, #0b1e3f); color: #fff; font-weight: 700; }

/* Botões secundários da lista ("Ver ficha", "Atualizar lista") */
body:not(.auth-pending) .premium-student-list td button[data-student-view],
body:not(.auth-pending) #refresh-students {
  border-radius: 12px; border: 1px solid var(--ds-control-line); background: var(--by-surface); color: var(--ds-heading); font-weight: 600;
}
body:not(.auth-pending) .premium-student-list td button[data-student-view]:hover,
body:not(.auth-pending) #refresh-students:hover { background: var(--ds-navy-50); border-color: var(--ds-navy-300); }
[data-by-theme="dark"] body:not(.auth-pending) .premium-student-list td button[data-student-view],
[data-by-theme="dark"] body:not(.auth-pending) #refresh-students { color: var(--by-text); }

/* Filtros: o selecionado mantém o padrão existente (fundo navy-50, borda azul-marinho) */
body:not(.auth-pending) .filter-chip { border-radius: 12px; font-weight: 600; }

/* Campos */
body:not(.auth-pending) .premium-student-search input,
body:not(.auth-pending) .student-filters select { border-radius: 12px; border-color: var(--ds-control-line); background: var(--by-surface); }
body:not(.auth-pending) .premium-student-search input:focus,
body:not(.auth-pending) .student-filters select:focus { border-color: var(--ds-navy-500); box-shadow: 0 0 0 4px var(--ds-navy-100); }

/* Selos de situação: pílula com palavra */
body:not(.auth-pending) main .badge { border-radius: 9999px; font-size: 12px; font-weight: 600; padding: 2px 10px; }

/* ── Assistente Prime ───────────────────────────────── */
body:not(.auth-pending) .prime-launcher { background: var(--by-primary); color: #fff; }
body:not(.auth-pending) .prime-launcher span[aria-hidden="true"] { color: var(--ds-gold); }

/* ── Ação principal de cada tela em dourado ─────────────
   Onde a barra superior não mostra "Novo aluno", a ação de criação da própria tela é a única dourada. */
body:not(.auth-pending) main :is(#new-session, [data-agenda-create], [data-sale-open], #new-plan, [data-cash-action="open"], [data-payable-action="create"], #new-device, #create-unit).primary:not(:disabled) {
  background: var(--ds-gold) !important; border-color: var(--ds-gold) !important; color: var(--ds-on-gold) !important; font-weight: 700;
}
body:not(.auth-pending) main :is(#new-session, [data-agenda-create], [data-sale-open], #new-plan, [data-cash-action="open"], [data-payable-action="create"], #new-device, #create-unit).primary:not(:disabled):hover {
  background: var(--ds-gold-hover) !important; border-color: var(--ds-gold-hover) !important;
}

/* ── Indicadores ───────────────────────────────────── */
body:not(.auth-pending) .dashboard-kpi strong { font-size: 24px; font-weight: 800; letter-spacing: -.01em; line-height: 1.2; color: var(--ds-heading); }
[data-by-theme="dark"] body:not(.auth-pending) .dashboard-kpi strong { color: var(--by-text); }
/* Violeta não faz parte do padrão: indicador neutro usa o azul-marinho claro */
.dashboard-kpi.violet .kpi-ico { background: var(--ds-navy-50); color: #152a52; }
[data-by-theme="dark"] .dashboard-kpi.violet .kpi-ico { background: var(--by-surface-muted); color: var(--ds-navy-300); }

/* ── Gráficos: dado principal em azul-marinho ───────── */
.chart-stop-top { stop-color: #2c4a85; }
.chart-stop-bottom { stop-color: #0b1e3f; }
[data-by-theme="dark"] .chart-stop-top { stop-color: #b3c2df; }
[data-by-theme="dark"] .chart-stop-bottom { stop-color: #8299c5; }
.chart-grid { stroke: var(--by-border); }

/* ── Login ─────────────────────────────────────────── */
.login-introduction h2 span, .login-environment strong { color: var(--ds-gold); }
.login-highlights span { background: rgba(11, 30, 63, .72); color: #e2e8f0; border: 1px solid rgba(242, 183, 5, .45); }
.login-introduction::after { border-color: rgba(242, 183, 5, .05); }
#login-form h1 { font-weight: 800; letter-spacing: -.02em; color: var(--ds-heading); }
#login-form input { border-radius: 12px; }
#login-form button.primary { border-radius: 12px; height: 48px; font-weight: 700; }

/* ── Páginas de administração e rede dentro do app ──── */
html.embedded .premium-admin-header { background: transparent !important; color: var(--ds-heading) !important; box-shadow: none !important; padding: 0 0 8px !important; border: 0 !important; }
html.embedded .premium-admin-header small { color: var(--by-text-muted) !important; }
html.embedded .premium-admin-header h1 { color: var(--ds-heading) !important; font-size: 20px !important; font-weight: 800; }
html.embedded[data-by-theme="dark"] .premium-admin-header h1 { color: var(--by-text) !important; }

/* ── Portal do aluno ───────────────────────────────── */
.portal-page :is(.portal-pay-button, .portal-pay-create) { background: #0b1e3f; border-radius: 12px; }
.portal-page :is(.portal-pay-button, .portal-pay-create):hover { background: #0f2045; }
.portal-page :is(button, a, input, select, textarea):focus-visible, .portal-page #portal-student-name:focus { outline-color: #152a52; }
.portal-jump a[aria-current="location"] { background: #0b1e3f; box-shadow: 0 4px 12px rgba(11, 30, 63, .2); }
.portal-jump a:focus-visible { outline-color: #152a52; }
.portal-page .portal-section-heading h2, .portal-page .training-exercise h4 { color: var(--ds-heading); }

/* ── Modo escuro: marcas de dado e ícones que usam a cor principal ──
   O azul-marinho some sobre as superfícies escuras; nesses casos usamos o tom claro legível (--by-link). */
[data-by-theme="dark"] :is(.dashboard-kpi .kpi-ico, .student-workspace-header .student-avatar, .help-guide summary, .biometrics-step.wait .biometrics-mark, .header-actions .unit-chip .ico, .topbar-icon:hover, .topbar-icon[aria-expanded=true]) { color: var(--by-link) !important; }
[data-by-theme="dark"] :is(.heat-4, .lead-fill, .entries-dot.ok, .history-dot.tone-blue, .dot) { background: #8299c5 !important; }
[data-by-theme="dark"] .heat-3 { background: #4f6ca3 !important; }
[data-by-theme="dark"] .entries-line-ok { stroke: #8299c5 !important; }
[data-by-theme="dark"] .help-guide summary::after { color: var(--by-link); }
.topbar .unit-chip .ico { color: currentColor; }