/* Extraído de 06-Login (2026-09-23).html em 25/09/2026. Não editar à mão: é a base visual do Hub. */
/* BPO Class type stack.
   Sora (400–800)          — display: page titles, hero numbers, card titles. The brand's own
                             display face, taken from the Imersão deck.
   Plus Jakarta Sans        — UI: buttons, rows, labels, body. Inherited from the FCS system so
                             every control keeps the same metrics.
   JetBrains Mono           — documents, CNPJ/CPF, timecodes, keys. */

:root {
  --font-display: "Sora", "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-ui: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace;
}

/* BPO Class colour system.
   Brand values sampled from the logo files (navy #001018, slate #7088A8) and the Imersão deck
   (champagne gold #C6A15B). Light theme is the default — Marvee-style cool, airy canvas. */
:root {
  /* Navy — brand core, primary actions, dark surfaces */
  --navy-950: #001018;
  --navy-900: #090D18;
  --navy-800: #111A2E;
  --navy-700: #151C32;
  --navy-600: #1B2440;
  --navy-500: #24304F;

  /* Slate blue — the "BPO" in the wordmark; secondary brand, info, links */
  --slate-700: #4A6285;
  --slate-600: #5A7090;
  --slate-500: #7088A8;
  --slate-400: #8FA3BD;
  --slate-200: #C9D5E3;
  --slate-100: #E3EAF2;
  --slate-50: #F0F4F8;

  /* Champagne gold — THE accent. Replaces every yellow/amber use. */
  --gold-700: #8E7233;
  --gold-600: #A8853F;
  --gold-500: #C6A15B;
  --gold-400: #D6B77A;
  --gold-300: #EBD9A6;
  --gold-100: #F5ECD6;
  --gold-50: #FAF5E8;

  /* Cool neutrals — the canvas */
  --white: #FFFFFF;
  --gray-50: #F6F8FB;
  --gray-100: #EEF2F6;
  --gray-200: #E4E9F0;
  --gray-300: #D9E0E8;
  --gray-400: #C3CCD8;

  /* Ink */
  --ink-900: #0B1220;
  --ink-700: #2A3446;
  --ink-500: #55627A;
  --ink-400: #8391A7;
  --ink-300: #AEB8C8;

  /* Semantic hues */
  --green-600: #2FA56D;
  --green-500: #45B57F;
  --green-100: #D3EFDF;
  --green-50: #E6F6EE;
  --red-600: #D9434B;
  --red-500: #E0525A;
  --red-400: #EA7A80;
  --red-100: #FBE1E2;
  --red-50: #FDF0F0;
  --blue-600: #3F6FC4;
  --blue-500: #4F7FD1;
  --blue-50: #E6EEFA;
  --purple-500: #7A5AF8;
  --purple-50: #EFEBFE;
  --orange-500: #E07A2B;
  --orange-50: #FCF0E3;
  --viz-gray: #B0BAC8;

  /* ---------- semantic aliases: components use ONLY these ---------- */
  --surface-page: var(--gray-50);
  --surface-card: var(--white);
  --surface-rail: var(--white);
  --surface-sidebar: var(--gray-50);
  --surface-sunken: var(--gray-100);
  --surface-track: var(--gray-200);
  --surface-hover: var(--gray-50);
  --surface-selected: var(--gray-100);
  --surface-inverse: var(--navy-900);

  --text-primary: var(--ink-900);
  --text-body: var(--ink-700);
  --text-secondary: var(--ink-500);
  --text-label: var(--ink-400);
  --text-muted: var(--ink-300);
  --text-inverse: var(--white);
  --text-on-inverse-muted: rgba(255, 255, 255, 0.62);
  --text-on-accent: var(--navy-950);
  --text-link: var(--slate-700);
  --text-link-hover: var(--navy-800);

  --border-hairline: var(--gray-200);
  --border-default: var(--gray-300);
  --border-strong: var(--gray-400);
  --border-inverse: rgba(255, 255, 255, 0.12);

  --brand-primary: var(--navy-900);
  --brand-primary-hover: var(--navy-700);
  --brand-accent: var(--gold-500);
  --brand-accent-hover: var(--gold-600);
  --brand-accent-soft: var(--gold-100);
  --brand-accent-border: var(--gold-300);
  --brand-secondary: var(--slate-500);
  --brand-secondary-soft: var(--slate-100);

  --positive: var(--green-600);
  --positive-soft: var(--green-500);
  --positive-surface: var(--green-50);
  --positive-border: var(--green-100);
  --positive-text: #1E7A4F;
  --negative: var(--red-500);
  --negative-strong: var(--red-600);
  --negative-soft: var(--red-400);
  --negative-surface: var(--red-100);
  --negative-surface-soft: var(--red-50);
  --negative-text: #B2343B;
  --pending: var(--gold-500);
  --pending-surface: var(--gold-100);
  --pending-text: var(--gold-700);
  --info: var(--blue-500);
  --info-surface: var(--blue-50);
  --info-text: var(--blue-600);
  --transfer: var(--blue-500);
  --transfer-surface: var(--blue-50);
  --purple: var(--purple-500);
  --purple-surface: var(--purple-50);
  --orange: var(--orange-500);
  --orange-surface: var(--orange-50);

  --focus-ring: 0 0 0 3px rgba(198, 161, 91, 0.28);
  --focus-ring-primary: 0 0 0 3px rgba(9, 13, 24, 0.14);

  /* Chat */
  --bubble-in: var(--white);
  --bubble-in-border: var(--gray-200);
  --bubble-out: var(--gold-100);
  --bubble-out-border: var(--gold-300);

  /* Ambient washes (light) */
  --hub-glow: radial-gradient(900px 520px at 8% -10%, rgba(198, 161, 91, 0.10) 0%, transparent 62%),
    radial-gradient(760px 460px at 100% 20%, rgba(112, 136, 168, 0.12) 0%, transparent 58%); /* @kind color */
  --hero-gradient: linear-gradient(118deg, var(--navy-700) 0%, var(--navy-900) 56%, var(--navy-950) 100%); /* @kind color */
  --gold-gradient: linear-gradient(135deg, var(--gold-300) 0%, var(--gold-500) 60%, var(--gold-700) 100%); /* @kind color */
}

:root {
  /* sizes — inherited from the FCS system, measured at 1920px */
  --text-eyebrow: 11px;
  --text-2xs: 11px;
  --text-xs: 12px;
  --text-sm: 13px;
  --text-body-sm: 14px;
  --text-base: 15px;
  --text-md: 16px;
  --text-lg: 18px;
  --text-xl: 22px;
  --text-2xl: 26px;
  --text-3xl: 30px;
  --text-4xl: 44px;
  --text-hero: 56px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  --leading-tight: 1.06;
  --leading-snug: 1.18;
  --leading-normal: 1.45;
  --leading-relaxed: 1.55;

  --tracking-eyebrow: 0.13em;
  --tracking-caps: 0.08em;
  --tracking-normal: 0;
  --tracking-tight: -0.015em;
  --tracking-tighter: -0.03em;

  /* composed roles */
  --type-eyebrow: var(--weight-bold) var(--text-eyebrow) / 1.2 var(--font-ui);
  --type-h1: var(--weight-black) var(--text-3xl) / var(--leading-snug) var(--font-display);
  --type-h2: var(--weight-bold) var(--text-lg) / 1.3 var(--font-display);
  --type-h3: var(--weight-bold) var(--text-md) / 1.35 var(--font-display);
  --type-subtitle: var(--weight-regular) var(--text-base) / var(--leading-normal) var(--font-ui);
  --type-body: var(--weight-medium) var(--text-body-sm) / var(--leading-normal) var(--font-ui);
  --type-meta: var(--weight-medium) var(--text-xs) / 1.4 var(--font-ui);
  --type-kpi: var(--weight-bold) var(--text-xl) / 1.15 var(--font-display);
  --type-balance: var(--weight-black) var(--text-4xl) / 1.05 var(--font-display);
  --type-button: var(--weight-semibold) var(--text-body-sm) / 1 var(--font-ui);
  --type-th: var(--weight-bold) var(--text-2xs) / 1.2 var(--font-ui);
  --type-mono: var(--weight-regular) var(--text-2xs) / 1.3 var(--font-mono);
}

:root {
  /* 4px base; 20px is the workhorse card padding in FCS */
  --space-0: 0px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 28px;
  --space-10: 32px;
  --space-12: 40px;
  --space-14: 48px;
  --space-16: 56px;
  --space-20: 72px;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-3xl: 20px;
  --radius-pill: 999px;

  /* layout constants */
  --rail-width: 64px;
  --rail-item: 40px;
  --content-max: 1356px;
  --page-gutter: 32px;
  --sidebar-width: 264px;
  --topbar-height: 52px;
  --card-padding: 20px;
  --row-height: 70px;
  --field-height: 40px;
  --control-height: 38px;
  --icon-tile: 32px;
  --hairline: 1px;
}

:root {
  /* BPO Class elevation is almost imperceptible — a hairline border does the work,
     shadow only separates floating things (active pills, modals, FABs). */
  --shadow-none: none;
  --shadow-xs: 0 1px 2px rgba(11, 18, 32, 0.04);
  --shadow-sm: 0 1px 2px rgba(11, 18, 32, 0.05), 0 1px 1px rgba(11, 18, 32, 0.03);
  --shadow-pill: 0 1px 2px rgba(11, 18, 32, 0.10), 0 0 0 1px rgba(11, 18, 32, 0.03);
  --shadow-md: 0 4px 14px rgba(11, 18, 32, 0.07);
  --shadow-lg: 0 12px 30px rgba(11, 18, 32, 0.10);
  --shadow-modal: 0 32px 80px rgba(9, 13, 24, 0.30);
  --shadow-fab: 0 6px 18px rgba(9, 13, 24, 0.26);
  --shadow-accent-fab: 0 6px 18px rgba(198, 161, 91, 0.34);
  --shadow-inverse-card: 0 10px 28px rgba(9, 13, 24, 0.24);

  /* dark */
  --shadow-dark-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
  --glow-gold: 0 8px 24px rgba(198, 161, 91, 0.26);
}

:root {
  --dur-instant: 80ms; /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur-base: 180ms; /* @kind other */
  --dur-slow: 280ms; /* @kind other */
  --ease-out: cubic-bezier(0.2, 0.8, 0.3, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --transition-control: background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
  --press-scale: 0.985; /* @kind other */
}

/* Dark theme — the Imersão/telão look: navy canvas, champagne gold accent.
   Scope with data-theme="dark" on any subtree (Mentor IA, Academy player, presentations). */
[data-theme="dark"] {
  --surface-page: var(--navy-900);
  --surface-card: var(--navy-700);
  --surface-rail: var(--navy-900);
  --surface-sidebar: var(--navy-800);
  --surface-sunken: var(--navy-800);
  --surface-track: rgba(255, 255, 255, 0.10);
  --surface-hover: rgba(255, 255, 255, 0.05);
  --surface-selected: rgba(255, 255, 255, 0.08);
  --surface-inverse: var(--white);

  --text-primary: #F5F6FA;
  --text-body: rgba(245, 246, 250, 0.84);
  --text-secondary: #8A93A8;
  --text-label: rgba(245, 246, 250, 0.48);
  --text-muted: rgba(245, 246, 250, 0.34);
  --text-inverse: var(--navy-950);
  --text-link: var(--gold-400);
  --text-link-hover: var(--gold-300);

  --border-hairline: rgba(255, 255, 255, 0.08);
  --border-default: rgba(255, 255, 255, 0.12);
  --border-strong: rgba(255, 255, 255, 0.20);

  --brand-primary: var(--gold-500);
  --brand-primary-hover: var(--gold-400);
  --brand-accent-soft: rgba(198, 161, 91, 0.14);
  --brand-accent-border: rgba(198, 161, 91, 0.45);
  --brand-secondary-soft: rgba(112, 136, 168, 0.18);

  --positive: #37C26E;
  --positive-surface: rgba(55, 194, 110, 0.14);
  --positive-border: rgba(55, 194, 110, 0.30);
  --positive-text: #8FE0A8;
  --negative: #EF5E63;
  --negative-surface: rgba(239, 94, 99, 0.16);
  --negative-surface-soft: rgba(239, 94, 99, 0.10);
  --negative-text: #F5A0A3;
  --pending-surface: rgba(198, 161, 91, 0.16);
  --pending-text: var(--gold-300);
  --info: #7E97C9;
  --info-surface: rgba(126, 151, 201, 0.16);
  --info-text: #A9BCE0;
  --purple-surface: rgba(122, 90, 248, 0.20);
  --orange-surface: rgba(224, 122, 43, 0.18);

  --bubble-in: var(--navy-700);
  --bubble-in-border: rgba(255, 255, 255, 0.08);
  --bubble-out: rgba(198, 161, 91, 0.22);
  --bubble-out-border: rgba(198, 161, 91, 0.55);

  --hub-glow: radial-gradient(900px 600px at 80% 16%, rgba(198, 161, 91, 0.10) 0%, transparent 60%),
    radial-gradient(760px 540px at 10% 90%, rgba(110, 141, 208, 0.12) 0%, transparent 62%); /* @kind color */
  --hero-gradient: linear-gradient(118deg, #1B2440 0%, #151C32 56%, #090D18 100%); /* @kind color */
}


/* base da página */
*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:var(--surface-page);font-family:var(--font-ui);color:var(--text-primary);-webkit-font-smoothing:antialiased}a{color:var(--text-link)}#boot{padding:40px;font:600 13px/1.6 var(--font-ui);color:var(--text-secondary)}

/* A órbita da tela de acesso. No arquivo original este CSS era injetado por JavaScript
   (<style id="lg-estilo">); com a CSP 'self' ele precisa morar num arquivo. */
[hidden]{display:none!important}
.lg-grid{display:grid;grid-template-columns:minmax(0,46fr) minmax(0,54fr);min-height:100vh}
/* o palco fica com o espaço que sobra entre o topo e o título; a órbita (lg-sistema, 520x520)
   é encolhida pelo login.jsx até caber nele, e não empurra nada porque não ocupa layout */
.lg-palco{position:relative;flex:1 1 0;min-height:220px}
.lg-sistema{position:absolute;left:50%;top:50%;width:520px;height:520px;margin:-260px 0 0 -260px;display:grid;place-items:center;transform-origin:center}
.lg-acesso{display:flex;align-items:center;justify-content:center;padding:40px 36px}
@media (max-width: 480px){.lg-acesso{padding:28px 20px}}
/* tela baixa: o parágrafo sai e a órbita fica com o espaço */
@media (max-height: 760px){.lg-descricao{display:none}}
.lg-anel{position:absolute;border-radius:50%;pointer-events:none}
.lg-anel-1{width:236px;height:236px;border:1px solid rgba(255,255,255,.10)}
.lg-anel-2{width:404px;height:404px;border:1px dashed rgba(212,175,55,.22)}
.lg-anel-3{width:580px;height:580px;border:1px solid rgba(255,255,255,.05)}
.lg-orbita{position:absolute;width:0;height:0;animation:lg-gira 46s linear infinite}
.lg-orbita-2{animation-duration:74s;animation-direction:reverse}
.lg-orb{position:absolute;left:0;top:0}
.lg-pino{display:flex;flex-direction:column;align-items:center;gap:5px;width:78px;margin:-39px 0 0 -39px;animation:lg-gira 46s linear infinite reverse}
.lg-orbita-2 .lg-pino{animation-duration:74s;animation-direction:normal}
.lg-tile{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(6px)}
.lg-tile-ouro{background:rgba(212,175,55,.16);border-color:rgba(212,175,55,.42)}
.lg-rotulo{font:600 10px/1.2 var(--font-ui);color:rgba(255,255,255,.62);text-align:center;letter-spacing:.01em}
.lg-nucleo{position:relative;width:128px;height:128px;border-radius:38px;display:grid;place-items:center;background:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.04));border:1px solid rgba(212,175,55,.5);box-shadow:0 22px 60px rgba(0,0,0,.45)}
.lg-halo{position:absolute;inset:-26px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,55,.38) 0%,rgba(212,175,55,0) 70%);animation:lg-pulsa 5.5s ease-in-out infinite}
.lg-brilho{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none}
.lg-brilho-a{width:380px;height:380px;top:-90px;right:-70px;background:rgba(212,175,55,.20)}
.lg-brilho-b{width:320px;height:320px;bottom:-110px;left:-60px;background:rgba(80,120,255,.14)}
@keyframes lg-gira{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes lg-pulsa{0%,100%{opacity:.55;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}}
@media (prefers-reduced-motion: reduce){.lg-orbita,.lg-pino,.lg-halo{animation:none!important}}
/* o display:none precisa do !important: a coluna tem display no style da própria tag */
@media (max-width: 980px){.lg-grid{grid-template-columns:1fr}.lg-eco{display:none!important}}
#root > p{padding:40px;font:600 13px/1.6 var(--font-ui);color:var(--text-secondary)}
/* selo da marca no topo do acesso: a marca branca sobre o fundo escuro do Hub */
.lg-selo{width:58px;height:58px;margin-bottom:4px;border-radius:17px;display:grid;place-items:center;background:var(--hero-gradient,#0B1220);border:1px solid rgba(212,175,55,.5);box-shadow:0 10px 26px rgba(11,18,32,.22)}