/* ============================================================
   DIVIDENDUS — Design System "PRIVATE WEALTH" (BTG-inspired)
   Marinho profundo + âmbar, serifada nos títulos, profundidade
   em camadas, verde sóbrio só no CTA. Tokens = fonte da verdade.
   Nomes de variáveis legados preservados (templates 127KB herdam).
   Dark = identidade principal (via data-theme). Claro = editorial.
   ============================================================ */

/* ---------- Tokens: CLARO editorial (padrão temporário) ---------- */
:root {
  --bg: #F4F1EA;            /* papel off-white quente */
  --bg-mesh: #F4F1EA;
  --surface-1: #FFFFFF; --bg-card: #FFFFFF; --bg-card-gradient: #FFFFFF;
  --surface-2: #FBFAF6;
  --border: #E4DFD3; --border-strong: #D6CFBE;
  --edge-light: rgba(255,255,255,.7);

  --ink: #0A1220;
  --text-main: #1C2A3A; --text: #34435A;
  --text-muted: #6B7A92; --text-subtle: #93A0B2;

  --accent: #A9822E; --accent-soft: #C8A24B;
  --accent-glow: rgba(169,130,46,.14);
  --primary: #1E5F52; --primary-strong: #24725F; --primary-hover: #24725F;
  --primary-active: #184a40; --primary-soft: rgba(30,95,82,.10);

  --success: #1E7A5A; --success-soft: rgba(30,122,90,.12);
  --danger:  #C0392B; --danger-soft:  rgba(192,57,43,.10);
  --warning: #B7791F; --warning-soft: rgba(183,121,31,.12);
  --info: #2C6EA6;
  --data-1:#6C8CC7; --data-2:#7FB0A0; --data-3:#B98BC4; --data-4:#C8A24B;

  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-num: 'Inter Tight', 'Inter', system-ui, sans-serif;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px; --sp-8:32px; --sp-10:40px; --sp-12:48px; --sp-16:64px;
  --radius-sm:10px; --radius:14px; --radius-md:14px; --radius-lg:18px; --radius-xl:20px; --radius-pill:999px;

  --shadow-sm: 0 1px 2px rgba(10,18,32,.05), 0 1px 3px rgba(10,18,32,.04);
  --shadow: 0 4px 18px rgba(10,18,32,.07);
  --shadow-lg: 0 18px 44px rgba(10,18,32,.12);
  --shadow-1: var(--shadow-sm); --shadow-2: var(--shadow);
  --shadow-glow-accent: 0 0 0 1px var(--accent-glow), 0 8px 30px rgba(169,130,46,.08);

  --ease: cubic-bezier(.2,.8,.2,1);
  --dur-1:120ms; --dur-2:180ms; --dur-3:240ms;
}

/* ---------- Tokens: ESCURO (identidade principal — opt-in) ---------- */
:root[data-theme="dark"] {
  --bg: #0A1220; --bg-mesh: #0C1628;
  --surface-1: #111C2E; --bg-card: #111C2E; --bg-card-gradient: #111C2E;
  --surface-2: #16233A;
  --border: #1E2C42; --border-strong: #2A3B57;
  --edge-light: rgba(255,255,255,.06);

  --ink: #F4F7FB;
  --text-main: #E4EBF4; --text: #C9D4E3;
  --text-muted: #8394AC; --text-subtle: #5A6B85;

  --accent: #C8A24B; --accent-soft: #E3C77E; --accent-glow: rgba(200,162,75,.25);
  --primary: #1E5F52; --primary-strong: #24725F; --primary-hover: #24725F;
  --primary-soft: rgba(63,178,127,.12);

  --success: #3FB27F; --success-soft: rgba(63,178,127,.14);
  --danger: #E0574B; --danger-soft: rgba(224,87,75,.14);
  --warning: #D9A441; --warning-soft: rgba(217,164,65,.14);
  --data-1:#6C8CC7; --data-2:#7FB0A0; --data-3:#B98BC4; --data-4:#C8A24B;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.30);
  --shadow: 0 8px 24px rgba(0,0,0,.28);
  --shadow-lg: 0 24px 50px rgba(0,0,0,.5);
  --shadow-1: 0 1px 2px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.20);
  --shadow-2: 0 2px 4px rgba(0,0,0,.35), 0 16px 40px rgba(0,0,0,.28);
  --shadow-glow-accent: 0 0 0 1px var(--accent-glow), 0 8px 30px rgba(200,162,75,.10);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: hidden; }
body {
  margin: 0; font-family: var(--font); overflow-x: hidden; max-width: 100vw;
  background-color: var(--bg);
  background-image: radial-gradient(1100px 560px at 50% -8%, var(--bg-mesh), transparent 70%);
  color: var(--text-main); line-height: 1.6; font-size: 16px;
  font-variant-numeric: tabular-nums;
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
/* grão fino ~2% */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
h1,h2,h3,h4 { font-family: var(--font-display); color: var(--text-main); margin: 0 0 .4em; line-height: 1.15; letter-spacing: -0.005em; text-wrap: balance; font-weight: 600; }
h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.25rem; font-weight: 500; }
small { font-size: .875rem; }
img { max-width: 100%; height: auto; }
::selection { background: var(--accent-glow); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }

/* números protagonistas */
.num, .value, .private-val, td.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }

/* ---------- Header / nav ---------- */
header {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-6); background: color-mix(in srgb, var(--bg-card) 82%, transparent);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; flex-wrap: wrap;
}
.logo { display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--text-main); letter-spacing: -0.01em; }
.logo:hover { text-decoration: none; }
.logo i { color: var(--accent); }
header nav { display: flex; align-items: center; gap: var(--sp-1); flex-wrap: wrap; }
header nav a { padding: var(--sp-2) var(--sp-3); border-radius: 10px; color: var(--text-muted); font-weight: 500; font-size: .93rem; transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
header nav a:hover { background: var(--surface-2); color: var(--text-main); text-decoration: none; }
header nav a.active { color: var(--accent); }
.nav-muted { color: var(--text-muted); }
.nav-danger { color: var(--text-muted) !important; } .nav-danger:hover { color: var(--danger) !important; background: var(--danger-soft) !important; }
.nav-feature { color: var(--text-main) !important; font-weight: 600; }

.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); cursor: pointer; transition: all var(--dur-1) var(--ease); }
.theme-toggle:hover { color: var(--accent); border-color: var(--accent); }
.theme-toggle .icon-dark { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-dark { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle .icon-light { display: none; }

/* hambúrguer (só mobile) */
.nav-toggle { display: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-main); cursor: pointer; }
.nav-toggle:hover { background: var(--surface-2); }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: 1280px; margin: 0 auto; padding: var(--sp-8) var(--sp-6) var(--sp-16); flex: 1 0 auto; }
.grid-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: var(--sp-5); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.page-head h1, .page-head h2 { margin: 0; }

/* ---------- Cards (profundidade em camadas) ---------- */
.card {
  position: relative; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  padding: var(--sp-5); margin-bottom: var(--sp-5);
}
.card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--edge-light); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.card-header h2, .card-header h3 { margin: 0; font-size: 1.15rem; }
.card-body { color: var(--text); }

.surface-hero {
  position: relative; background: linear-gradient(150deg, #0C1A2E, #12263F);
  color: #F4F7FB; border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: var(--sp-6); box-shadow: var(--shadow-2); margin-bottom: var(--sp-6); overflow: hidden;
}
.surface-hero::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: rgba(255,255,255,.08); }
.surface-hero h1, .surface-hero h2, .surface-hero h3 { color: #F4F7FB; }

/* StatCard / KPI */
.surface-kpi, .stat-card {
  position: relative; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: var(--sp-5); box-shadow: var(--shadow-1);
  display: flex; flex-direction: column; gap: 6px; overflow: hidden;
}
.surface-kpi::before, .stat-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--edge-light); }
.stat-card[data-accent]::before { height: 2px; background: var(--accent); }
.stat-card[data-accent="blue"]::before { background: var(--data-1); }
.stat-card[data-accent="green"]::before { background: var(--primary); }
.surface-kpi .label, .surface-kpi .tech-label, .stat-card .label { color: var(--text-subtle); font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; }
.surface-kpi .value, .stat-card .value { font-family: var(--font-num); font-size: 2rem; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1.05; }
.stat-card .delta { font-size: .85rem; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-num); }
.stat-card .delta.up { color: var(--success); } .stat-card .delta.down { color: var(--danger); }
.stat-card .sub { color: var(--text-muted); font-size: .8rem; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 11px var(--sp-4); border-radius: var(--radius-md); border: 1px solid var(--border-strong);
  background: transparent; color: var(--text-main); font-family: var(--font); font-weight: 600; font-size: .93rem; line-height: 1.2;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease);
}
.btn:hover { text-decoration: none; border-color: var(--text-subtle); }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: not-allowed; }
.btn-primary { background: var(--accent-soft); border-color: var(--accent-soft); color: #0A1220; font-weight: 700; }
.btn-primary:hover { background: var(--accent); border-color: var(--accent); color: #0A1220; box-shadow: var(--shadow-glow-accent); }
.btn-accent { background: transparent; border-color: var(--accent); color: var(--accent-soft); box-shadow: var(--shadow-glow-accent); }
.btn-accent:hover { background: var(--accent); color: #0A1220; border-color: var(--accent); }
.btn-secondary { background: transparent; color: var(--text-main); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
.btn-ghost:hover { background: var(--surface-2); color: var(--text-main); }
.btn-delete, .btn-danger { background: transparent; border-color: var(--danger); color: var(--danger); }
.btn-delete:hover, .btn-danger:hover { background: var(--danger); color: #fff; }
.btn-success { background: var(--success); border-color: var(--success); color: #fff; }
.btn-block { width: 100%; }
.btn-sm { padding: 7px 12px; font-size: .85rem; border-radius: 10px; }
.btn-lg { padding: 14px 24px; font-size: 1rem; }
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid rgba(244,247,251,.4); border-top-color: #F4F7FB; border-radius: 50%; animation: spin .6s linear infinite; }

/* ---------- Formulários ---------- */
.input, input[type=text], input[type=password], input[type=email], input[type=number], select, textarea {
  width: 100%; padding: 11px var(--sp-3); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface-1); color: var(--text-main);
  font-family: var(--font); font-size: .95rem; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.input:focus, input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.tech-label { font-size: .72rem; font-weight: 700; color: var(--text-subtle); text-transform: uppercase; letter-spacing: .12em; }
.form-group { margin-bottom: var(--sp-4); }
.form-hint { font-size: .82rem; color: var(--text-subtle); margin-top: 6px; }

/* ---------- Auth ---------- */
.auth-layout { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--sp-8) var(--sp-4); min-height: 70vh; }
.auth-panel { position: relative; width: 100%; max-width: 400px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--sp-10) var(--sp-8); }
.auth-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--edge-light); border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.auth-error { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger); border-radius: 10px; padding: 11px 14px; font-size: .88rem; font-weight: 600; margin-bottom: var(--sp-4); text-align: center; }
.auth-ok { background: var(--success-soft); color: var(--success); border: 1px solid var(--success); border-radius: 10px; padding: 11px 14px; font-size: .88rem; font-weight: 600; margin-bottom: var(--sp-4); text-align: center; }
.auth-links { margin-top: var(--sp-5); text-align: center; font-size: .9rem; color: var(--text-muted); }
.auth-links a { font-weight: 700; color: var(--accent); }

/* ---------- Tabelas ---------- */
.table-scroll-wrapper, .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table, .table-premium { width: 100%; border-collapse: collapse; font-size: .9rem; }
.table-premium th, table th { text-align: left; padding: 11px 14px; color: var(--text-subtle); font-weight: 700; text-transform: uppercase; font-size: .68rem; letter-spacing: .1em; white-space: nowrap; border-bottom: 1px solid var(--border-strong); position: sticky; top: 0; background: var(--bg-card); z-index: 1; }
.table-premium td, table td { padding: 13px 14px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table-premium tbody tr { transition: background var(--dur-1) var(--ease); }
.table-premium tbody tr:hover { background: var(--surface-2); }
.table-premium td.num, table td.num, .num { text-align: right; }
/* tabela densa: cabe mais coluna no desktop */
.table-premium.dense th, .table-premium.dense td { padding: 9px 9px; font-size: .82rem; }
.table-premium.dense th { font-size: .64rem; }

/* FIX 3: no mobile esconde a tabela e mostra lista de cards em <div> */
.mobile-cards { display: none; }
.m-asset-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.m-asset-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.m-asset-head .m-name { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; }
.m-asset-head .m-name strong { font-size: 1rem; }
.m-asset-head .m-name .m-sub { font-size: .72rem; color: var(--text-muted); }
.m-asset-head .m-rank { font-family: var(--font-num); font-size: .72rem; font-weight: 700; color: var(--text-muted); background: var(--bg-card); border: 1px solid var(--border); border-radius: 7px; padding: 2px 7px; }
.m-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .9rem; }
.m-row > span { color: var(--text-subtle); font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.m-row > b { font-family: var(--font-num); color: var(--ink); }
.m-actions { display: flex; gap: 6px; margin-top: 10px; }
.m-actions > * { flex: 1; }
@media (max-width: 768px) {
  .wrap-cards { display: none; }
  .mobile-cards { display: block; }
  /* rede de segurança: tabela larga sem card-list rola DENTRO do card (não quebra a página) */
  main .card { overflow-x: auto; }
}
/* mini-avatar de ticker */
.ticker-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: var(--surface-2); border: 1px solid var(--border); font-family: var(--font-num); font-size: .62rem; font-weight: 700; color: var(--text-muted); margin-right: 8px; }

/* ---------- Tabs ---------- */
.tab-navigation-container { display: flex; gap: var(--sp-1); flex-wrap: wrap; margin-bottom: var(--sp-5); border-bottom: 1px solid var(--border); }
.tab-btn { padding: 10px var(--sp-4); border: none; background: transparent; color: var(--text-muted); font-family: var(--font); font-weight: 600; font-size: .93rem; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease); }
.tab-btn:hover { color: var(--text-main); }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
/* Painéis de aba: o display é controlado inline pelo switchTab() dos templates.
   A aba padrão (sem display inline) fica visível no load — não forçar none aqui. */

/* ---------- Badges / Pills ---------- */
.badge, .badge-sector, .badge-category, .badge-essencial, .badge-ciclico { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: .72rem; font-weight: 600; background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); }
.badge-strategy, .badge-primary { background: transparent; border: 1px solid var(--accent); color: var(--accent-soft); box-shadow: var(--shadow-glow-accent); }
.badge-info, .badge-sector, .badge-category { color: var(--data-1); }
.badge-success, .badge-essencial { color: var(--success); border-color: var(--success); }
.badge-warning, .badge-ciclico { color: var(--warning); border-color: var(--warning); }
.badge-danger { color: var(--danger); border-color: var(--danger); }

/* ---------- Progress ---------- */
.progress-wrap, .progress-bg, .score-bar-bg, .score-bar-wrap { width: 100%; height: 7px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-pill); overflow: hidden; }
.score-bar-fill, .progress-fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-soft)); border-radius: var(--radius-pill); transition: width var(--dur-3) var(--ease); }

/* ---------- Skeleton / Empty / Toast ---------- */
.skeleton { background: linear-gradient(90deg, var(--surface-2) 25%, var(--border) 37%, var(--surface-2) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: 8px; }
@keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.empty-state { text-align: center; padding: var(--sp-10) var(--sp-4); color: var(--text-muted); }
.empty-state .icon { width: 42px; height: 42px; color: var(--text-subtle); margin: 0 auto var(--sp-3); }
.empty-state h3 { color: var(--text-main); margin-bottom: 6px; }
.toast-container { position: fixed; bottom: var(--sp-5); right: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 200; }
.toast { background: var(--surface-2); border: 1px solid var(--border-strong); border-left: 3px solid var(--accent); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 12px 16px; font-size: .9rem; min-width: 240px; animation: toastin var(--dur-3) var(--ease); }
.toast.success { border-left-color: var(--success); } .toast.danger { border-left-color: var(--danger); }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Disclaimer ---------- */
.disclaimer-bar { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); background: var(--surface-2); color: var(--text-muted); font-size: .76rem; padding: 6px var(--sp-4); border-bottom: 1px solid var(--border); }
/* FIX 4a: select de estratégia sempre exibe o texto completo no desktop */
.strategy-form select { min-width: 138px; }
.disclaimer-bar a { color: var(--text-muted); text-decoration: underline; }
.disclaimer-bar .dismiss { background: none; border: none; color: var(--text-subtle); cursor: pointer; padding: 2px 6px; font-size: 1rem; line-height: 1; }
.disclaimer-bar .dismiss:hover { color: var(--text-main); }

/* ---------- Rodapé ---------- */
.site-footer { flex-shrink: 0; text-align: center; padding: var(--sp-6) var(--sp-4); color: var(--text-muted); font-size: .85rem; border-top: 1px solid var(--border); background: var(--bg-card); }
.site-footer a { color: var(--text-muted); }
.footer-legal { margin-top: 6px; display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }

/* ---------- Utilidades / animações ---------- */
.fade-in { animation: fadeIn var(--dur-3) var(--ease) both; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.spinner { width: 20px; height: 20px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.text-muted { color: var(--text-muted); } .text-subtle { color: var(--text-subtle); }
.text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-accent { color: var(--accent); }
.section-rule { height: 1px; background: var(--border); margin: var(--sp-8) 0; border: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 720px) {
  body { font-size: 15px; }
  header { padding: 10px var(--sp-4); }
  .nav-toggle { display: inline-flex; }
  /* nav vira drawer deslizante */
  header nav {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px;
    background: var(--bg-card); border-bottom: 1px solid var(--border);
    padding: var(--sp-2); box-shadow: var(--shadow-lg);
  }
  header nav.open { display: flex; }
  header nav a { padding: 12px 14px; font-size: .95rem; border-radius: 10px; }
  header nav .theme-toggle { align-self: flex-start; margin-top: 4px; }
  .container { padding: var(--sp-5) var(--sp-4) var(--sp-12); }
  .auth-panel { padding: var(--sp-8) var(--sp-5); }
  .page-head { flex-direction: column; align-items: flex-start; }
  h1 { font-size: 1.7rem; } h2 { font-size: 1.35rem; }
  /* cartões e grids empilham com folga (inclui grids com colunas fixas inline) */
  .grid-layout { grid-template-columns: 1fr !important; }
  main [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .surface-hero { padding: var(--sp-5); flex-direction: column; }
  .hide-mobile { display: none !important; }
  /* nenhum estouro horizontal: conteúdo largo rola no próprio wrapper */
  .container { overflow-x: hidden; }
  .disclaimer-bar { flex-wrap: nowrap; text-align: center; font-size: .68rem; padding: 5px 10px; gap: 6px; }
  .disclaimer-bar span { overflow: hidden; text-overflow: ellipsis; }
  .table-scroll-wrapper, .table-scroll { max-width: 100%; }
  /* FIX 2: toolbar de estratégia empilha, controles full-width e tocáveis */
  .dash-toolbar { flex-direction: column; align-items: stretch; }
  .dash-controls { flex-direction: column; align-items: stretch; width: 100%; }
  .dash-controls > * { width: 100%; }
  .dash-controls .btn { justify-content: center; min-height: 46px; }
  .strategy-form { flex-wrap: wrap; row-gap: 4px; min-height: 46px; }
  .strategy-form select, .strategy-form input { flex: 1 1 auto; min-width: 0; text-align: left !important; }
  .strategy-form .tb-divider { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

/* Dark: legado da tabela da carteira (cabecalho/badges pastel) */
:root[data-theme="dark"] .table-premium th { background: var(--surface-2); }
:root[data-theme="dark"] .table-premium th.decision-header { color: var(--text-main) !important; }

/* ---------- Logo Aureo (troca por tema) ---------- */
.logo-word { height: 30px; width: auto; display: block; }
.logo-word-dark { display: none; }
:root[data-theme="dark"] .logo-word-light { display: none; }
:root[data-theme="dark"] .logo-word-dark { display: block; }
.logo-full { height: 116px; width: auto; display: block; margin: 0 auto; }
.logo-full-dark { display: none; }
:root[data-theme="dark"] .logo-full-light { display: none; }
:root[data-theme="dark"] .logo-full-dark { display: block; }
@media (max-width: 720px){ .logo-word { height: 26px; } .logo-full { height: 132px; } }

/* ---------- Aprender: hero ilustrado + capas dos cards ---------- */
.aprender-hero {
  position: relative; min-height: 210px; display: flex; align-items: center;
  border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--sp-6);
  background-image: linear-gradient(90deg, rgba(10,18,32,.78), rgba(10,18,32,.25) 58%, rgba(10,18,32,.05)), url('/static/aprender-hero.svg?v=1');
  background-size: cover; background-position: center;
}
.aprender-hero-content { position: relative; z-index: 1; padding: var(--sp-8); max-width: 620px; }
.aprender-hero-content h1 { color: #F4F7FB; font-size: 2.1rem; margin: 0 0 .4rem; text-shadow: 0 1px 14px rgba(0,0,0,.35); }
.aprender-hero-content p { color: rgba(244,247,251,.92); margin: 0; font-size: 1rem; }

.card-cover {
  height: 92px; margin: calc(-1 * var(--sp-5)) calc(-1 * var(--sp-5)) var(--sp-4);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden;
}
.card-cover::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130px 70px at 82% 18%, rgba(255,255,255,.14), transparent 70%); }
.card-cover i { width: 34px; height: 34px; color: rgba(255,255,255,.92); position: relative; }
.cover-blue { background: linear-gradient(135deg, #16273F, #33578A); }
.cover-teal { background: linear-gradient(135deg, #15293C, #2C6E5E); }
.cover-gold { background: linear-gradient(135deg, #1A2436, #9A7B36); }
@media (max-width: 720px){ .aprender-hero-content h1 { font-size: 1.7rem; } .card-cover { height: 78px; } }