/* HEBRAC CAPITAL — design tokens (única fonte de cores, espaçamento, raios, tipografia, movimento, camadas).
   Todo o CSS da área autenticada e do acesso consome estas variáveis; nada de valores soltos nos componentes.
   Tema: dark sóbrio — preto, cinza e branco; o azul institucional da marca (#15305A, do símbolo) entra como
   acento com moderação. Hierarquia vem de fundo, espaço e raio, não de borda. */
:root {
  /* ---- cor: fundo e superfícies ---- */
  --background: #111111;         /* fundo da aplicação */
  --surface: #1B1B1B;            /* cards */
  --surface-elevated: #202020;   /* cards em destaque, menus, folhas, tooltips */
  --surface-muted: #252525;      /* superfícies secundárias: pills, trilhos, campos */
  --surface-hover: #242424;      /* hover de card */
  --surface-press: #2A2A2A;      /* toque/pressão */

  /* ---- cor: texto ---- */
  --text-primary: #F5F5F5;
  --text-secondary: #A8A8A8;
  --text-muted: #707070;
  --text-inverse: #111111;

  /* ---- cor: bordas (quase invisíveis; usar só quando necessário) ---- */
  --border: rgba(255,255,255,.06);
  --border-strong: rgba(255,255,255,.10);
  --border-focus: rgba(255,255,255,.24);

  /* ---- cor: marca (azul institucional) ---- */
  --brand-deep: #15305A;         /* cor do símbolo */
  --brand: #7C92BD;              /* acento: mesmo matiz do #16223A, clareado para leitura (2026-09-27, a pedido; antes #16223A, #2E5BFF, #8EA7D2) */
  --brand-rgb: 124,146,189;
  --brand-soft: rgba(124,146,189,.14);
  --brand-line: rgba(124,146,189,.4);
  --brand-glow: 0 0 6px rgba(124,146,189,.75);   /* brilho neon dos detalhes em azul */

  /* ---- cor: semântica ---- */
  --positive: #4FBF8B;  --positive-rgb: 79,191,139;  --positive-soft: rgba(79,191,139,.12);
  --negative: #E07A72;  --negative-rgb: 224,122,114; --negative-soft: rgba(224,122,114,.12);
  --warning: #D9B25F;   --warning-soft: rgba(217,178,95,.12);

  /* ---- gráficos: uma cor por classe de ativo (ordem de CLASSES) — tons sóbrios, sem verde/vermelho ---- */
  --chart-1: #16223A; --chart-2: #8FA6FF; --chart-3: #1D3BB8; /* classes (Renda Fixa, Renda Variável, Fundos) em tons do azul-marinho neon (2026-09-27) */ --chart-4: #B8A47C; --chart-5: #8A8A8A; --chart-6: #555555;
  --chart-line: #E6E2DA;

  /* ---- cor: detalhes que antes eram valores soltos no app.css (mesmos valores do tema escuro) ---- */
  --tint-rgb: 255,255,255;        /* véus/overlays sobre as superfícies (hover, trilhos, grades de gráfico, skeleton) */
  --backdrop: rgba(0,0,0,.6);     /* fundo de folhas, modais e paleta de busca */
  --hover-strong: #2E2E2E;        /* hover de botão e dos atalhos */
  --field-hover: #2A2A2A;         /* campo em hover/foco */
  --seg-on: #383838; --seg-on-shadow: none; /* opção selecionada do seletor de período */
  --inverse-hover: #FFFFFF;       /* hover do botão primário (fundo claro) */
  --knob-on: #FFFFFF;             /* bolinha do interruptor ligado */
  --skel-mid: #222222;
  --console-bg: #000000;          /* console da página API */
  --highlight-bg: linear-gradient(140deg, #16233B 0%, #1A1D24 55%, var(--surface) 100%); /* banner da Início */
  --hl-h-a: #FFFFFF; --hl-h-a-o: .55; --hl-h-b: #8EA7D2; --hl-h-b-o: .28; /* degradê do H grande do banner */
  --logo-ink: #FFFFFF;            /* marca HEBRAC CAPITAL (menu/topo) e letras do voo da logo */
  --card-shadow: none;            /* cards: no escuro a hierarquia vem só do fundo */
  --focus-glow: 0 0 10px rgba(var(--brand-rgb), .45);
  --nav-text-glow: 0 0 8px rgba(var(--brand-rgb), .55);
  --donut-glow: drop-shadow(0 0 5px rgba(var(--brand-rgb), .55));
  --heat-pos-rgb: 244,241,234; --heat-neg-rgb: 221,107,107; /* matriz de correlação (API) */

  /* ---- tipografia ---- */
  --font-sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Cormorant Garamond", "Times New Roman", Times, Georgia, serif; /* só no wordmark */
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-caption: .75rem;   /* 12 */
  --fs-small: .8125rem;   /* 13 */
  --fs-body: .9375rem;    /* 15 */
  --fs-card-title: 1.0625rem; /* 17 */
  --fs-section: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);     /* 20–24 */
  --fs-balance: clamp(2.5rem, 2rem + 2vw, 3.25rem);        /* ~38–49px (raiz 15px) */
  --fs-stat: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --lh-tight: 1.15; --lh-base: 1.5;

  /* ---- espaçamento (escala 4) ---- */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-7: 28px; --space-8: 32px; --space-9: 36px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --page-x: 20px;          /* gutter lateral do celular */
  --section-gap: 32px;     /* entre grandes seções */
  --card-pad: 20px;        /* dentro dos cards */

  /* ---- raios ---- */
  --radius-sm: 10px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 24px; --radius-pill: 9999px;

  /* ---- sombras (só em camadas flutuantes) ---- */
  --shadow-float: 0 16px 48px rgba(0,0,0,.5);

  /* ---- movimento ---- */
  --t-fast: 150ms; --t: 200ms; --t-slow: 250ms;
  --ease: cubic-bezier(.2,.6,.2,1);

  /* ---- camadas ---- */
  --z-sticky: 10; --z-dropdown: 20; --z-nav: 30; --z-sheet: 40; --z-modal: 50; --z-toast: 60;

  /* ---- layout ---- */
  --side-w: 240px;
  --content-max: 1400px;
  --bottom-nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  /* ---- aliases de compatibilidade (auth.css, seção API q-*, brand.css e CSS legado) ---- */
  --bg-0: var(--background); --bg-1: var(--background); --bg-2: var(--surface-muted);
  --surface-1: var(--surface); --surface-2: var(--surface-elevated); --surface-3: var(--surface-muted);
  --text-1: var(--text-primary); --text-2: var(--text-secondary); --text-3: var(--text-muted);
  --border-1: var(--border); --border-2: var(--border-strong); --border-3: var(--border-focus);
  --brand-400: var(--brand); --brand-500: var(--brand); --brand-600: var(--brand-deep);
  --up: var(--positive); --up-rgb: var(--positive-rgb); --up-soft: var(--positive-soft);
  --down: var(--negative); --down-rgb: var(--negative-rgb); --down-soft: var(--negative-soft);
  --warn: var(--warning); --warn-soft: var(--warning-soft);
  --sp-1: var(--space-1); --sp-2: var(--space-2); --sp-3: var(--space-3); --sp-4: var(--space-4); --sp-5: var(--space-5);
  --sp-6: var(--space-6); --sp-8: var(--space-8); --sp-10: var(--space-10); --sp-12: var(--space-12); --sp-16: var(--space-16);
  --r-sm: var(--radius-sm); --r-md: var(--radius-md); --r-lg: var(--radius-lg); --r-xl: var(--radius-lg); --r-2xl: var(--radius-xl); --r-pill: var(--radius-pill);
  --fs-xs: var(--fs-caption); --fs-sm: var(--fs-small); --fs-md: var(--fs-body); --fs-lg: var(--fs-card-title); --fs-xl: 1.25rem; --fs-2xl: 1.5rem;
  --shadow-1: none; --shadow-2: var(--shadow-float); --shadow-3: var(--shadow-float);
  --ring-brand: 0 0 0 3px rgba(var(--brand-rgb),.3), 0 0 12px rgba(var(--brand-rgb),.35);
  --gutter: var(--page-x);
  --bg: var(--background); --bg-side: var(--background); --card: var(--surface); --card-2: var(--surface-elevated);
  --fg: var(--text-primary); --fg-2: var(--text-secondary); --fg-3: var(--text-muted);
  --line: var(--border-strong); --line-2: var(--border-focus); --line-focus: var(--border-focus);
  --navy: var(--background); --black: #000; --white: var(--text-primary); --white-pure: #fff;
  --serif: var(--font-serif); --sans: var(--font-sans); --mono: var(--font-mono);
  --radius: var(--radius-sm);
  --neon: var(--brand-rgb); --glow: var(--ring-brand);
}
@media (min-width: 1024px) {
  :root { --page-x: clamp(32px, 2.5vw, 48px); --section-gap: 40px; --card-pad: 24px; }
}
@media (max-width: 374px) {
  :root { --page-x: 16px; --card-pad: 18px; }
}

/* =====================================================================================================
   TEMAS. O :root acima é o tema ESCURO (padrão, intocado). Os outros dois só redefinem as variáveis de cor;
   layout, espaçamento, raios, tipografia e componentes são os mesmos. Ativação: <html data-theme="blue|light">
   (public/js/ui/theme.js; aplicado antes do 1º paint pelo script do <head> do index.html). O login não usa tema.
   ===================================================================================================== */

/* ---- AZUL: azul-marinho quase preto, cards navy muito escuros, acento azul controlado, sem neon ---- */
html[data-theme="blue"] {
  color-scheme: dark;
  --background: #060B15;
  --surface: #0B1424;
  --surface-elevated: #0F1A2E;
  --surface-muted: #142039;
  --surface-hover: #101C32;
  --surface-press: #172641;

  --text-primary: #F2F5FA;
  --text-secondary: #9AA7BD;
  --text-muted: #66738A;
  --text-inverse: #060B15;

  --border: rgba(150,172,212,.08);
  --border-strong: rgba(150,172,212,.13);
  --border-focus: rgba(150,172,212,.30);

  --brand-deep: #15305A;
  --brand: #5B86D6;
  --brand-rgb: 91,134,214;
  --brand-soft: rgba(91,134,214,.14);
  --brand-line: rgba(91,134,214,.4);
  --brand-glow: 0 0 0 transparent;

  --positive: #4FBF8B;  --positive-rgb: 79,191,139;  --positive-soft: rgba(79,191,139,.12);
  --negative: #E07A72;  --negative-rgb: 224,122,114; --negative-soft: rgba(224,122,114,.12);
  --warning: #D9B25F;   --warning-soft: rgba(217,178,95,.12);

  --chart-1: #3F6FC9; --chart-2: #9DB3DC; --chart-3: #24427E; --chart-4: #B8A47C; --chart-5: #7A8599; --chart-6: #3E4A60;
  --chart-line: #DDE4EF;

  --tint-rgb: 190,208,240;
  --backdrop: rgba(2,6,14,.66);
  --hover-strong: #1A2A47;
  --field-hover: #182843;
  --seg-on: #22365A; --seg-on-shadow: none;
  --inverse-hover: #FFFFFF;
  --knob-on: #FFFFFF;
  --skel-mid: #13203A;
  --console-bg: #03070F;
  --highlight-bg: linear-gradient(140deg, #12284D 0%, #0D1A31 55%, var(--surface) 100%);
  --hl-h-a: #FFFFFF; --hl-h-a-o: .5; --hl-h-b: #5B86D6; --hl-h-b-o: .26;
  --logo-ink: #FFFFFF;
  --card-shadow: none;
  --focus-glow: none;
  --nav-text-glow: none;
  --donut-glow: none;
  --heat-pos-rgb: 214,226,245; --heat-neg-rgb: 221,107,107;
  --shadow-float: 0 16px 48px rgba(0,0,0,.55);
}

/* ---- CLARO: off-white, cards brancos, bordas cinza suaves, grafite, azul institucional, sombras sutis ---- */
html[data-theme="light"] {
  color-scheme: light;
  --background: #F5F6F8;
  --surface: #FFFFFF;
  --surface-elevated: #FFFFFF;
  --surface-muted: #EEF0F3;
  --surface-hover: #F8F9FB;
  --surface-press: #E9ECF0;

  --text-primary: #111827;
  --text-secondary: #525C6B;
  --text-muted: #8A93A1;
  --text-inverse: #FFFFFF;

  --border: rgba(17,24,39,.07);
  --border-strong: rgba(17,24,39,.11);
  --border-focus: rgba(17,24,39,.26);

  --brand-deep: #15305A;
  --brand: #1F4E9E;
  --brand-rgb: 31,78,158;
  --brand-soft: rgba(31,78,158,.10);
  --brand-line: rgba(31,78,158,.35);
  --brand-glow: 0 0 0 transparent;

  --positive: #13845A;  --positive-rgb: 19,132,90;  --positive-soft: rgba(19,132,90,.10);
  --negative: #C0443A;  --negative-rgb: 192,68,58;  --negative-soft: rgba(192,68,58,.09);
  --warning: #A7771A;   --warning-soft: rgba(167,119,26,.10);

  --chart-1: #16223A; --chart-2: #6F8FCB; --chart-3: #1F4E9E; --chart-4: #B09658; --chart-5: #9AA2AE; --chart-6: #CDD3DC;
  --chart-line: #1B2A44;

  --tint-rgb: 17,24,39;
  --backdrop: rgba(17,24,39,.32);
  --hover-strong: #E4E7EC;
  --field-hover: #E9ECF0;
  --seg-on: #FFFFFF; --seg-on-shadow: 0 1px 2px rgba(17,24,39,.10), 0 0 0 1px rgba(17,24,39,.05);
  --inverse-hover: #1F2A3C;
  --knob-on: #FFFFFF;
  --skel-mid: #EEF0F3;
  --console-bg: #F3F5F8;
  --highlight-bg: linear-gradient(140deg, #E7EDF7 0%, #F3F5F9 55%, var(--surface) 100%);
  --hl-h-a: #1F4E9E; --hl-h-a-o: .30; --hl-h-b: #1F4E9E; --hl-h-b-o: .12;
  --logo-ink: #111827;
  --card-shadow: 0 1px 2px rgba(17,24,39,.04), 0 0 0 1px rgba(17,24,39,.06);
  --focus-glow: none;
  --nav-text-glow: none;
  --donut-glow: none;
  --heat-pos-rgb: 31,78,158; --heat-neg-rgb: 192,68,58;
  --shadow-float: 0 12px 36px rgba(17,24,39,.12), 0 0 0 1px rgba(17,24,39,.05);
}
/* troca de tema sem piscar: só cores, só durante a troca (theme.js põe/tira a classe) */
html.theme-switching, html.theme-switching * { transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease, fill 220ms ease, stroke 220ms ease !important; }

/* Fundo em degradê entre login e painel: uma camada atrás do conteúdo (z-index:-1, abaixo do
   voo da logo) começa com um gradiente da cor da tela anterior e some, revelando o fundo do tema.
   O script pré-paint de cada página injeta a camada; o de fim de página a dissolve. */
.bg-wash { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: 1; will-change: opacity; }
.bg-wash.out { opacity: 0; transition: opacity 900ms ease; }
@media (prefers-reduced-motion: reduce) { .bg-wash { display: none !important; } }