/* =========================================================
   PROLIFE — TEMA CLARO CINZA + MODO CLARO/ESCURO
   O modo escuro continua usando o visual original do projeto.
   Este arquivo entra por último e redesenha apenas [data-theme="light"].
========================================================= */

/* ---------- CONTROLE DE TEMA ---------- */
.theme-toggle {
  position: fixed;
  z-index: 9999;
  top: 18px;
  right: 20px;
  width: auto;
  min-width: 112px;
  height: 42px;
  margin: 0;
  padding: 5px 10px 5px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgba(148, 163, 184, 0.2);
  border-radius: 999px;
  background: rgba(8, 14, 28, 0.76);
  color: #dbe4f0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  font: 700 10px/1 var(--fonte-texto, "Inter", sans-serif);
  letter-spacing: 0.6px;
  text-transform: uppercase;

  transition:
    transform 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}

.theme-toggle:hover {
  transform: translateY(-2px);
  border-color: rgba(96, 165, 250, 0.5);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
}

.theme-toggle__track {
  position: relative;
  width: 50px;
  height: 28px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  place-items: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.theme-toggle__sun,
.theme-toggle__moon {
  position: relative;
  z-index: 2;
  font-size: 12px;
  line-height: 1;
  opacity: 0.55;
  transition:
    opacity 0.25s ease,
    transform 0.25s ease;
}

.theme-toggle__thumb {
  position: absolute;
  z-index: 1;
  left: 3px;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #eef2f7;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  transition:
    transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1),
    background 0.25s ease;
}

html[data-theme="dark"] .theme-toggle__thumb {
  transform: translateX(22px);
}

html[data-theme="dark"] .theme-toggle__moon,
html[data-theme="light"] .theme-toggle__sun {
  opacity: 1;
  transform: scale(1.08);
}

/* ---------- PALETA CLARA ---------- */
html[data-theme="light"] {
  --light-bg: #dfe3e8;
  --light-bg-soft: #e8ebef;
  --light-panel: rgba(239, 242, 245, 0.82);
  --light-panel-solid: #edf0f3;
  --light-panel-strong: #f3f5f7;
  --light-border: rgba(60, 72, 91, 0.14);
  --light-border-strong: rgba(60, 72, 91, 0.24);
  --light-text: #202734;
  --light-text-soft: #647083;
  --light-muted: #8993a1;
  --light-blue: #2f7dff;
  --light-blue-soft: #69a2ff;
  --light-violet: #7867a5;
  --light-amber: #bc8738;
  --light-green: #4f886c;
  --light-rose: #a75f75;
  --light-shadow: 0 22px 56px rgba(44, 53, 65, 0.12);
  --light-shadow-soft: 0 10px 28px rgba(44, 53, 65, 0.09);
}

html[data-theme="light"] body {
  --cor-fundo-inicio: #e6e9ed;
  --cor-fundo-fim: #d8dde3;
  --cor-card: rgba(239, 242, 245, 0.82);
  --cor-card-hover: rgba(245, 247, 249, 0.94);
  --cor-borda: rgba(60, 72, 91, 0.13);
  --cor-borda-forte: rgba(60, 72, 91, 0.22);
  --cor-primaria: var(--light-blue);
  --cor-primaria-clara: var(--light-blue-soft);
  --cor-primaria-escura: #2f63c0;
  --cor-texto: var(--light-text);
  --cor-texto-claro: #141a24;
  --cor-texto-suave: var(--light-text-soft);
  --cor-saudacao: #4e6b96;
  --sombra-card: var(--light-shadow);
  --sombra-botao: 0 10px 26px rgba(77, 111, 169, 0.22);
  color: var(--light-text);
  background:
    radial-gradient(
      circle at 82% 8%,
      rgba(120, 103, 165, 0.13),
      transparent 24%
    ),
    radial-gradient(
      circle at 13% 18%,
      rgba(77, 111, 169, 0.16),
      transparent 30%
    ),
    linear-gradient(145deg, #e8ebef 0%, #dce1e6 52%, #d5dae0 100%);
}

html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(43, 52, 66, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(43, 52, 66, 0.035) 1px, transparent 1px);
}

html[data-theme="light"] body::after {
  background: radial-gradient(
    circle at 50% 24%,
    rgba(77, 111, 169, 0.08),
    transparent 58%
  );
}

html[data-theme="light"] h1 {
  background: linear-gradient(90deg, #202734, #526f9d);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

html[data-theme="light"] h3 {
  color: #495568;
}

html[data-theme="light"] p {
  color: var(--light-text-soft);
  opacity: 1;
}

html[data-theme="light"] .theme-toggle {
  border-color: rgba(60, 72, 91, 0.15);
  background: rgba(236, 239, 243, 0.88);
  color: #445064;
  box-shadow: 0 10px 26px rgba(55, 65, 78, 0.12);
}

html[data-theme="light"] .theme-toggle:hover {
  border-color: rgba(77, 111, 169, 0.45);
  background: rgba(244, 246, 248, 0.94);
  box-shadow: 0 14px 34px rgba(55, 65, 78, 0.16);
}

html[data-theme="light"] .theme-toggle__track {
  background: rgba(99, 111, 127, 0.09);
  border-color: rgba(60, 72, 91, 0.09);
}

html[data-theme="light"] .theme-toggle__thumb {
  background: #536f9d;
  box-shadow: 0 3px 8px rgba(48, 66, 95, 0.24);
}

/* =========================================================
   LOGIN / CADASTRO
========================================================= */
html[data-theme="light"] .pagina-autenticacao {
  background:
    linear-gradient(115deg, rgba(77, 111, 169, 0.1), transparent 34%),
    radial-gradient(
      circle at 88% 15%,
      rgba(120, 103, 165, 0.13),
      transparent 26%
    ),
    linear-gradient(145deg, #e7eaee, #d9dee4);
}

html[data-theme="light"] .pagina-autenticacao::before {
  opacity: 0.7;
  background-image:
    linear-gradient(rgba(55, 67, 83, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 67, 83, 0.035) 1px, transparent 1px);
}

html[data-theme="light"] .pagina-autenticacao::after {
  background: radial-gradient(
    circle at 36% 48%,
    rgba(77, 111, 169, 0.1),
    transparent 36%
  );
}

html[data-theme="light"] .auth-shell {
  filter: drop-shadow(0 24px 44px rgba(49, 58, 72, 0.08));
}

html[data-theme="light"] .auth-showcase {
  background:
    linear-gradient(
      160deg,
      rgba(225, 230, 236, 0.72),
      rgba(213, 219, 226, 0.56)
    ),
    radial-gradient(
      circle at 25% 20%,
      rgba(77, 111, 169, 0.17),
      transparent 34%
    );
  border-color: rgba(67, 80, 98, 0.14);
  box-shadow: inset -1px 0 rgba(255, 255, 255, 0.45);
}

html[data-theme="light"] .auth-showcase::after {
  border-color: rgba(77, 111, 169, 0.1);
}

html[data-theme="light"] .brand-logo {
  background: rgba(217, 223, 229, 0.18);
  border-color: rgba(58, 120, 224, 0.22);
  box-shadow: none;
}

html[data-theme="light"] .brand-logo::before {
  border-color: rgba(58, 120, 224, 0.62);
  box-shadow: 0 0 16px rgba(58, 120, 224, 0.16);
}

html[data-theme="light"] .brand-logo img {
  filter: drop-shadow(0 7px 14px rgba(58, 120, 224, 0.34));
}

html[data-theme="light"] .brand-lockup h1 {
  color: #1f2734;
}

html[data-theme="light"] .eyebrow,
html[data-theme="light"] .etapa {
  color: #3a78e0;
}

html[data-theme="light"] .status-pill {
  color: #53647b;
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="light"] .status-pill > span {
  background: #3a78e0;
  box-shadow: 0 0 10px rgba(58, 120, 224, 0.45);
}

html[data-theme="light"] .showcase-copy h2 {
  color: #252d3a;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.16);
}

html[data-theme="light"] .showcase-copy p {
  color: #687486;
}

html[data-theme="light"] .orbit {
  border-color: #3a78e0;
  box-shadow: 0 0 24px rgba(58, 120, 224, 0.08);
}

html[data-theme="light"] .orbit--two {
  border-color: #3a78e0;
  box-shadow: 0 0 24px rgba(92, 125, 191, 0.06);
}

html[data-theme="light"] .orbit-core {
  background: radial-gradient(
    circle,
    rgba(58, 120, 224, 0.14),
    rgba(223, 228, 234, 0.95) 72%
  );
  border: 2px solid #2f7dff;
  box-shadow:
    0 12px 30px rgba(61, 74, 93, 0.1),
    0 0 0 6px rgba(47, 125, 255, 0.08),
    0 0 26px rgba(47, 125, 255, 0.22);
}

html[data-theme="light"] .orbit-core img {
  filter: drop-shadow(0 0 12px rgba(58, 120, 224, 0.58));
}

html[data-theme="light"] .skill-node {
  color: #526074;
  background: rgba(231, 235, 240, 0.8);
  border-color: rgba(77, 111, 169, 0.14);
  box-shadow: 0 8px 20px rgba(54, 65, 80, 0.07);
}

html[data-theme="light"] .auth-panel {
  background: rgba(229, 234, 239, 0.86);
  border-color: rgba(167, 176, 187, 0.24);
  box-shadow:
    0 26px 70px rgba(52, 61, 74, 0.12),
    inset 0 1px rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(24px);
}

html[data-theme="light"] .auth-panel::before {
  background: none;
  color: rgba(128, 136, 148, 0.16);
}

html[data-theme="light"] .auth-card__header h2 {
  color: #202734;
}

html[data-theme="light"] .auth-card__header .etapa {
  color: #3a78e0;
}

html[data-theme="light"] .auth-card__header p,
html[data-theme="light"] .auth-switch,
html[data-theme="light"] .termo {
  color: #687486;
}

html[data-theme="light"] .input-wrap:hover {
  border-color: rgba(58, 120, 224, 0.32);
}

html[data-theme="light"] .auth-switch a,
html[data-theme="light"] .termo a {
  color: #3a78e0;
  font-weight: 700;
}

html[data-theme="light"] .campo label {
  color: #465268;
}

html[data-theme="light"] .input-wrap {
  background: rgba(226, 230, 235, 0.88);
  border-color: rgba(65, 77, 94, 0.16);
  box-shadow: inset 0 1px 2px rgba(54, 65, 80, 0.04);
}

html[data-theme="light"] .input-wrap:focus-within {
  background: rgba(241, 243, 246, 0.96);
  border-color: rgba(77, 111, 169, 0.52);
  box-shadow: 0 0 0 4px rgba(77, 111, 169, 0.1);
}

html[data-theme="light"] .input-icon {
  color: #778397;
}

html[data-theme="light"] .input-wrap input {
  color: #202734;
}

html[data-theme="light"] .input-wrap input::placeholder {
  color: #929ba8;
}

html[data-theme="light"] .toggle-senha {
  color: #627087;
}

html[data-theme="light"] .icone-olho {
  stroke: currentColor;
}

html[data-theme="light"] .auth-actions .btn-main {
  color: #f7f9fb;
  background: linear-gradient(135deg, #4a84ec, #356dd8);
  box-shadow: 0 14px 28px rgba(58, 120, 224, 0.28);
}

html[data-theme="light"] .auth-actions .btn-main:hover {
  box-shadow: 0 18px 38px rgba(58, 120, 224, 0.34);
}

html[data-theme="light"] .auth-actions .btn-sec {
  color: #566377;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

html[data-theme="light"] .auth-actions .btn-sec:hover {
  background: rgba(221, 226, 232, 0.96);
  color: #303b4c;
  border-color: rgba(168, 177, 187, 0.95);
}

html[data-theme="light"] .termo-texto {
  background: rgba(221, 226, 232, 0.72);
  border-color: rgba(67, 80, 98, 0.14);
}

html[data-theme="light"] .termo-texto p {
  color: #667285;
}

/* =========================================================
   MENU
========================================================= */
html[data-theme="light"] .menu-page {
  background:
    radial-gradient(
      circle at 74% 44%,
      rgba(77, 111, 169, 0.1),
      transparent 31%
    ),
    radial-gradient(
      circle at 14% 14%,
      rgba(120, 103, 165, 0.07),
      transparent 25%
    ),
    linear-gradient(145deg, #e5e8ec, #d9dee4);
}

html[data-theme="light"] .menu-page::after {
  color: rgba(90, 100, 115, 0.055);
  background: transparent !important;
  opacity: 1;
}

html[data-theme="light"] .menu-page::after {
  color: rgba(45, 56, 72, 0.026);
}

html[data-theme="light"] .menu-intro {
  border-right-color: rgba(77, 111, 169, 0.16);
}

html[data-theme="light"] .menu-intro::after {
  background: linear-gradient(transparent, #6f8fc5, transparent);
  box-shadow: 0 0 14px rgba(77, 111, 169, 0.3);
}

html[data-theme="light"] .brand-symbol::before {
  border-color: rgba(77, 111, 169, 0.42);
}

html[data-theme="light"] .brand-symbol img {
  filter: drop-shadow(0 6px 12px rgba(77, 111, 169, 0.26));
}

html[data-theme="light"] .brand-copy small,
html[data-theme="light"] .menu-label {
  color: #5a78a9;
}

html[data-theme="light"] .brand-copy strong {
  color: #202734;
}

html[data-theme="light"] .menu-message h1 {
  color: #202734;
}

html[data-theme="light"] .menu-message h1 span {
  color: #5778ad;
}

html[data-theme="light"] .menu-message > p {
  color: #687487;
}

html[data-theme="light"] .greeting {
  color: #4f5f75;
}

html[data-theme="light"] .greeting::before {
  background: #5c9174;
  box-shadow: 0 0 9px rgba(79, 136, 108, 0.4);
}

html[data-theme="light"] .menu-status {
  color: #7d8796;
  border-top-color: rgba(65, 77, 94, 0.11);
}

html[data-theme="light"] .menu-status span:last-child {
  color: #697588;
}

html[data-theme="light"] .route-panel {
  background: transparent !important;
}

html[data-theme="light"] .route-panel::before {
  border-color: rgba(77, 111, 169, 0.12);
}

html[data-theme="light"] .route-panel::after {
  border-color: rgba(120, 103, 165, 0.11);
}

html[data-theme="light"] .route-heading small {
  color: #687487;
}

html[data-theme="light"] .route-heading p {
  color: #7d8796;
}

html[data-theme="light"] .menu-route {
  border-color: rgba(66, 78, 95, 0.14);
  background: rgba(232, 235, 239, 0.62);
  box-shadow: 0 10px 26px rgba(54, 64, 78, 0.07);
}

html[data-theme="light"] .menu-route::before {
  opacity: 0.78;
}

html[data-theme="light"] .menu-route:hover {
  background: rgba(242, 244, 246, 0.86);
  border-color: rgba(77, 111, 169, 0.3);
  box-shadow: 0 18px 42px rgba(54, 64, 78, 0.12);
}

html[data-theme="light"] .route-number {
  color: #7a8798;
}

html[data-theme="light"] .route-copy small {
  color: #6f7d90;
}

html[data-theme="light"] .route-copy strong {
  color: #242d3a;
}

html[data-theme="light"] .route-copy p {
  color: #748092;
}

html[data-theme="light"] .route-arrow {
  color: #506e9d;
  border-color: rgba(77, 111, 169, 0.22);
  background: rgba(220, 225, 231, 0.72);
}

html[data-theme="light"] .route-start {
  --route-color: #4d6fa9;
}

html[data-theme="light"] .route-achievements {
  --route-color: #7867a5;
}

/* =========================================================
   CARREIRAS
========================================================= */
html[data-theme="light"] .career-page {
  color: var(--light-text);
  background:
    radial-gradient(
      circle at 50% 48%,
      rgba(77, 111, 169, 0.13),
      transparent 30%
    ),
    radial-gradient(circle at 8% 8%, rgba(120, 103, 165, 0.1), transparent 24%),
    linear-gradient(145deg, #e6e9ed, #d9dee4);
}

html[data-theme="light"] .career-page::before {
  background-image:
    linear-gradient(rgba(63, 84, 112, 0.075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(57, 72, 90, 0.04) 1px, transparent 1px);
}

html[data-theme="light"] .career-header .btn-voltar {
  color: #435065;
  border-color: rgba(65, 77, 94, 0.16);
  background: rgba(232, 235, 239, 0.72);
  box-shadow: 0 8px 20px rgba(54, 64, 78, 0.07);
}

html[data-theme="light"] .career-header .btn-voltar:hover {
  border-color: #617eae;
  background: rgba(239, 242, 245, 0.92);
}

html[data-theme="light"] .career-kicker {
  color: #5a78a8;
}

html[data-theme="light"] .career-kicker::before,
html[data-theme="light"] .career-kicker::after {
  background: linear-gradient(90deg, transparent, #6684b5);
}

html[data-theme="light"] .career-heading h1 {
  color: #202734;
  background: none;
  -webkit-text-fill-color: initial;
}

html[data-theme="light"] .career-heading h1 span {
  color: #5677ac;
}

html[data-theme="light"] .career-counter {
  color: #778293;
}

html[data-theme="light"] .career-counter strong {
  color: #39465a;
}

html[data-theme="light"] .career-map::before {
  border-color: rgba(77, 111, 169, 0.15);
  box-shadow: 0 0 55px rgba(77, 111, 169, 0.06);
}

html[data-theme="light"] .career-map::after {
  border-color: rgba(120, 103, 165, 0.14);
}

html[data-theme="light"] .map-axis {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(77, 111, 169, 0.23),
    transparent
  );
}

html[data-theme="light"] .career-core::before,
html[data-theme="light"] .career-core::after {
  border-color: rgba(47, 125, 255, 0.38) !important;
}

html[data-theme="light"] .core-content {
  background: rgba(230, 234, 239, 0.9);
  border-color: rgba(77, 111, 169, 0.18);
  box-shadow: 0 14px 34px rgba(53, 64, 78, 0.12);
}

html[data-theme="light"] .core-content img {
  filter: drop-shadow(0 6px 12px rgba(77, 111, 169, 0.2));
}

html[data-theme="light"] .core-content span {
  color: #596a82;
}

html[data-theme="light"] .career-node.card {
  background: rgba(232, 235, 239, 0.76);
  border-color: rgba(66, 78, 95, 0.14);
  box-shadow: 0 12px 28px rgba(54, 64, 78, 0.08);
  backdrop-filter: blur(14px);
}

html[data-theme="light"] .career-node.card:hover {
  background: rgba(242, 244, 246, 0.93);
  border-color: color-mix(in srgb, var(--accent) 40%, rgba(66, 78, 95, 0.2));
  box-shadow:
    0 18px 38px rgba(54, 64, 78, 0.13),
    0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent) inset;
}

html[data-theme="light"] .career-node.card h2 {
  color: #27303e;
}

html[data-theme="light"] .career-node.card p {
  color: #707c8e;
}

html[data-theme="light"] .node-index {
  color: color-mix(in srgb, var(--accent) 80%, #4e5b6d);
}

html[data-theme="light"] .node-icon {
  background: color-mix(in srgb, var(--accent) 10%, #e7ebef);
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  box-shadow: 0 7px 16px rgba(55, 65, 80, 0.08);
}

html[data-theme="light"] .node-copy {
  border-bottom-color: color-mix(in srgb, var(--accent) 28%, transparent);
}

html[data-theme="light"] .corporativo {
  --accent: #708091;
}

html[data-theme="light"] .tecnologia {
  --accent: #4d75ad;
}

html[data-theme="light"] .empreendedor {
  --accent: #b8873e;
}

html[data-theme="light"] .criativo {
  --accent: #7967a4;
}

html[data-theme="light"] .saude {
  --accent: #4f886c;
}

html[data-theme="light"] .influenciador {
  --accent: #a55f74;
}

html[data-theme="light"] .career-page .modal {
  background: rgba(62, 70, 82, 0.32);
  backdrop-filter: blur(9px);
}

html[data-theme="light"] .career-page .modal-box {
  background: #e9edf1;
  border-color: color-mix(
    in srgb,
    var(--accent, #4d6fa9) 28%,
    rgba(60, 72, 91, 0.18)
  );
  box-shadow: 0 28px 70px rgba(46, 55, 68, 0.22);
}

html[data-theme="light"] .career-page .modal-box h2 {
  color: #202734;
}

html[data-theme="light"] .career-page .modal-box p,
html[data-theme="light"] .career-page #caminho {
  color: #667286;
}

html[data-theme="light"] .modal-close.fechar {
  color: #59667a;
  background: rgba(216, 221, 227, 0.72);
  border-color: rgba(66, 78, 95, 0.14);
}

html[data-theme="light"] .career-page #btn-escolher {
  color: #f7f8fa;
  box-shadow: 0 12px 28px
    color-mix(in srgb, var(--accent, #4d6fa9) 22%, transparent);
}

/* =========================================================
   JOGO — CORES ADAPTADAS AO CINZA
========================================================= */
html[data-theme="light"] body.corporativo {
  --cor: #708091;
  --cor-rgb: 112, 128, 145;
}

html[data-theme="light"] body.tecnologia {
  --cor: #4d75ad;
  --cor-rgb: 77, 117, 173;
}

html[data-theme="light"] body.empreendedor {
  --cor: #b8873e;
  --cor-rgb: 184, 135, 62;
}

html[data-theme="light"] body.criativo {
  --cor: #7967a4;
  --cor-rgb: 121, 103, 164;
}

html[data-theme="light"] body.saude {
  --cor: #4f886c;
  --cor-rgb: 79, 136, 108;
}

html[data-theme="light"] body.influenciador {
  --cor: #a55f74;
  --cor-rgb: 165, 95, 116;
}

html[data-theme="light"] body:has(.game-shell) {
  color: var(--light-text);
  background:
    radial-gradient(
      circle at 18% 18%,
      color-mix(in srgb, var(--cor) 13%, transparent),
      transparent 34%
    ),
    radial-gradient(
      circle at 80% 75%,
      color-mix(in srgb, var(--cor) 8%, transparent),
      transparent 38%
    ),
    linear-gradient(145deg, #e5e8ec, #d8dde3);
}

html[data-theme="light"] body:has(.game-shell)::after {
  background: radial-gradient(
    circle at 50% 20%,
    color-mix(in srgb, var(--cor) 8%, transparent),
    transparent 58%
  );
}

html[data-theme="light"] .game-shell::before {
  background-image:
    linear-gradient(rgba(58, 70, 87, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(58, 70, 87, 0.035) 1px, transparent 1px);
}

html[data-theme="light"] .game-topbar {
  border-bottom-color: rgba(65, 77, 94, 0.12);
}

html[data-theme="light"] .back-careers {
  color: #48566a;
  border-color: rgba(65, 77, 94, 0.16);
  background: rgba(232, 235, 239, 0.72);
  box-shadow: 0 8px 18px rgba(54, 64, 78, 0.06);
}

html[data-theme="light"] .back-careers:hover {
  color: #202734;
  background: color-mix(in srgb, var(--cor) 8%, #edf0f3);
}

html[data-theme="light"] .session-brand,
html[data-theme="light"] .day-chip {
  color: #738092;
}

html[data-theme="light"] .day-chip strong {
  color: #25303e;
}

html[data-theme="light"] .game-zone {
  border-right-color: rgba(65, 77, 94, 0.12);
}

html[data-theme="light"] #cargo {
  color: #202734;
}

html[data-theme="light"] .greeting {
  color: #687487;
}

html[data-theme="light"] .orbit-a {
  border-color: color-mix(in srgb, var(--cor) 25%, transparent);
  border-top-color: var(--cor);
}

html[data-theme="light"] .orbit-b {
  border-color: color-mix(in srgb, var(--cor) 28%, transparent);
}

html[data-theme="light"] .orbit-core {
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--cor) 18%, transparent),
    rgba(228, 232, 237, 0.94) 68%
  );
  border-color: color-mix(in srgb, var(--cor) 34%, transparent);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--cor) 15%, transparent);
}

html[data-theme="light"] .journey-strip {
  border-color: rgba(65, 77, 94, 0.11);
}

html[data-theme="light"] .strip-label,
html[data-theme="light"] .live-badge,
html[data-theme="light"] .decision-state,
html[data-theme="light"] .status-hint {
  color: #758091;
}

html[data-theme="light"] .journey-strip strong {
  color: #455166;
}

html[data-theme="light"] .section-heading h2,
html[data-theme="light"] .decision-head h2 {
  color: #26303e;
}

html[data-theme="light"] #eventoTexto {
  color: #4b586c;
}

html[data-theme="light"] .event-line::before {
  opacity: 0.32;
}

html[data-theme="light"] .status-nome {
  color: #687487;
}

html[data-theme="light"] .status-bar {
  background: rgba(75, 87, 105, 0.12);
}

html[data-theme="light"] .status-fill::after {
  opacity: 0.38;
}

html[data-theme="light"] #btnDia {
  color: #f7f8fa;
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cor) 92%, #32435d),
    color-mix(in srgb, var(--cor) 78%, #2e3c52)
  );
  box-shadow: 0 12px 28px color-mix(in srgb, var(--cor) 20%, transparent);
}

html[data-theme="light"] .day-actions > p {
  color: #7b8594;
}

html[data-theme="light"] .decision-zone {
  background: linear-gradient(
    160deg,
    rgba(232, 235, 239, 0.28),
    rgba(218, 223, 229, 0.08)
  );
}

html[data-theme="light"] .decision-idle,
html[data-theme="light"] .question-panel {
  color: var(--light-text);
}

html[data-theme="light"] .scanner {
  filter: drop-shadow(
    0 10px 28px color-mix(in srgb, var(--cor) 13%, transparent)
  );
}

html[data-theme="light"] .scanner::before,
html[data-theme="light"] .scanner::after,
html[data-theme="light"] .ring-1,
html[data-theme="light"] .ring-2,
html[data-theme="light"] .ring-3 {
  border-color: color-mix(in srgb, var(--cor) 22%, transparent);
}

html[data-theme="light"] .scanner-core {
  background: color-mix(in srgb, var(--cor) 10%, #e2e6eb);
  border-color: color-mix(in srgb, var(--cor) 27%, transparent);
}

html[data-theme="light"] .idle-code {
  color: color-mix(in srgb, var(--cor) 72%, #566377);
}

html[data-theme="light"] .idle-copy h3 {
  color: #303b4b;
}

html[data-theme="light"] .idle-copy p,
html[data-theme="light"] .idle-footer {
  color: #748093;
}

html[data-theme="light"] .question-number {
  color: var(--cor);
}

html[data-theme="light"] #tituloPergunta {
  color: #27313f;
}

html[data-theme="light"] #descricaoPergunta {
  color: #657184;
}

html[data-theme="light"] .opcao-jogo {
  color: #3d495c;
  background: rgba(230, 234, 238, 0.78);
  border-color: rgba(65, 77, 94, 0.14);
  box-shadow: 0 7px 16px rgba(54, 64, 78, 0.055);
}

html[data-theme="light"] .opcao-jogo:hover {
  color: #1f2734;
  background: color-mix(in srgb, var(--cor) 8%, #eef1f4);
  border-color: color-mix(in srgb, var(--cor) 38%, rgba(65, 77, 94, 0.18));
  box-shadow: 0 12px 24px rgba(54, 64, 78, 0.09);
}

html[data-theme="light"] .result-overlay,
html[data-theme="light"] .popup-overlay {
  background: rgba(66, 75, 88, 0.34);
  backdrop-filter: blur(10px);
}

html[data-theme="light"] .result-panel,
html[data-theme="light"] .popup-box {
  background: #e9edf1;
  border-color: color-mix(in srgb, var(--cor) 24%, rgba(65, 77, 94, 0.18));
  box-shadow: 0 28px 70px rgba(48, 58, 72, 0.22);
}

html[data-theme="light"] .result-panel h3,
html[data-theme="light"] .popup-box h1 {
  color: #202734;
}

html[data-theme="light"] .result-panel > p,
html[data-theme="light"] .popup-box p {
  color: #687487;
}

html[data-theme="light"] #listaResultado li {
  color: #4d596c;
  border-color: rgba(65, 77, 94, 0.1);
}

html[data-theme="light"] #btnContinuar {
  color: #f8fafc;
  background: var(--cor);
}

/* =========================================================
   CONQUISTAS — MODO CLARO REFINADO
========================================================= */

html[data-theme="light"] body:has(.barra-conquistas) {
  background:
    radial-gradient(
      circle at 50% 22%,
      rgba(47, 125, 255, 0.09),
      transparent 34%
    ),
    linear-gradient(145deg, #e6e9ed 0%, #dce1e6 52%, #d7dce2 100%);
}

/* mantém a grade visível, mas suave */
html[data-theme="light"] body:has(.barra-conquistas)::before {
  opacity: 0.72;
  background-image:
    linear-gradient(rgba(61, 78, 101, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(61, 78, 101, 0.055) 1px, transparent 1px);
}

/* container sem bloco branco sólido */
html[data-theme="light"] body:has(.barra-conquistas) .container {
  color: var(--light-text);
  background: transparent !important;
}

/* título */
html[data-theme="light"] body:has(.barra-conquistas) .topo h1 {
  color: #202734;
  background: none;
  -webkit-text-fill-color: initial;
}

/* detalhe luminoso embaixo do título */
html[data-theme="light"] body:has(.barra-conquistas) .topo h1::after {
  background: linear-gradient(90deg, transparent, #2f7dff, transparent);
  box-shadow: 0 0 12px rgba(47, 125, 255, 0.35);
}

/* botão voltar */
html[data-theme="light"] body:has(.barra-conquistas) .btn-voltar {
  color: #47556a;
  border: 1px solid rgba(79, 94, 114, 0.18);
  background: rgba(232, 236, 241, 0.74);
  box-shadow: 0 8px 20px rgba(54, 64, 78, 0.06);
}

html[data-theme="light"] body:has(.barra-conquistas) .btn-voltar:hover {
  color: #202734;
  border-color: rgba(47, 125, 255, 0.32);
  background: rgba(241, 244, 247, 0.9);
}

/* textos auxiliares */
html[data-theme="light"] .container > h3 {
  color: #5f6d80;
}

/* barra de progresso */
html[data-theme="light"] .barra-conquistas {
  background: rgba(87, 101, 119, 0.12);
  border-color: rgba(65, 77, 94, 0.1);
  box-shadow: inset 0 1px 2px rgba(53, 65, 81, 0.05);
}

/* =========================================================
   ITENS — sem "retângulo branco cortado"
========================================================= */

/* hover suave, sem virar um card branco */
html[data-theme="light"] .conquista:hover {
  background: linear-gradient(
    90deg,
    rgba(238, 242, 246, 0.72) 0%,
    rgba(234, 239, 244, 0.46) 60%,
    rgba(234, 239, 244, 0.14) 84%,
    transparent 100%
  ) !important;

  box-shadow: none !important;
}

/* textos */
html[data-theme="light"] .conquista h2 {
  color: #293443;
}

html[data-theme="light"] .conquista p {
  color: #6d798b;
}

/* =========================================================
   ÍCONE / ANEL DA CONQUISTA
========================================================= */

html[data-theme="light"] .icone {
  position: relative;

  background: radial-gradient(
    circle,
    rgba(247, 249, 251, 0.98) 0%,
    rgba(232, 237, 242, 0.96) 72%
  ) !important;

  border: 1px solid rgba(47, 125, 255, 0.3) !important;

  box-shadow:
    0 0 0 5px rgba(47, 125, 255, 0.06),
    0 0 18px rgba(47, 125, 255, 0.1) !important;

  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease;
}

/* anel externo delicado */
html[data-theme="light"] .icone::before {
  content: "";
  position: absolute;

  inset: -7px;

  border-radius: 50%;

  border: 1px dashed rgba(47, 125, 255, 0.2);

  transition:
    border-color 0.28s ease,
    transform 0.5s ease,
    opacity 0.28s ease;

  pointer-events: none;
}

/* pequeno ponto luminoso como no escuro */
html[data-theme="light"] .icone::after {
  content: "";
  position: absolute;

  right: -5px;
  top: 50%;

  width: 6px;
  height: 6px;

  border-radius: 50%;

  background: #2f7dff;

  box-shadow:
    0 0 6px rgba(47, 125, 255, 0.7),
    0 0 12px rgba(47, 125, 255, 0.35);

  transform: translateY(-50%);

  pointer-events: none;
}

/* interação */
html[data-theme="light"] .conquista:hover .icone {
  border-color: #2f7dff !important;

  box-shadow:
    0 0 0 5px rgba(47, 125, 255, 0.09),
    0 0 22px rgba(47, 125, 255, 0.18) !important;

  transform: scale(1.035);
}

html[data-theme="light"] .conquista:hover .icone::before {
  border-color: rgba(47, 125, 255, 0.48);
  transform: rotate(35deg);
}

/* =========================================================
   FINAL
========================================================= */
html[data-theme="light"] body:has(.final-screen) {
  background:
    radial-gradient(
      circle at 22% 25%,
      color-mix(in srgb, var(--cor, #4d6fa9) 12%, transparent),
      transparent 30%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(120, 103, 165, 0.08),
      transparent 34%
    ),
    linear-gradient(145deg, #e4e8ec, #d7dce2);
  color: var(--light-text);
}

html[data-theme="light"] body:has(.final-screen)::before {
  opacity: 0.4;
}

html[data-theme="light"] .ambient-grid {
  opacity: 0.18;
}

html[data-theme="light"] .brand-lockup strong,
html[data-theme="light"] #titulo,
html[data-theme="light"] .performance-head h2 {
  color: #202734;
}

html[data-theme="light"] .brand-lockup small,
html[data-theme="light"] .topbar-center,
html[data-theme="light"] .completion-line,
html[data-theme="light"] #texto,
html[data-theme="light"] .performance-footer p {
  color: #687487;
}

html[data-theme="light"] .final-topbar {
  border-color: rgba(65, 77, 94, 0.12);
}

html[data-theme="light"] .outcome-zone {
  border-right-color: rgba(65, 77, 94, 0.12);
}

html[data-theme="light"] .performance-zone {
  background: rgba(227, 231, 236, 0.26);
}

html[data-theme="light"] .score-ring {
  border-color: color-mix(in srgb, var(--cor, #4d6fa9) 24%, transparent);
}

html[data-theme="light"] .score-core {
  background: rgba(232, 235, 239, 0.86);
  border-color: color-mix(in srgb, var(--cor, #4d6fa9) 25%, transparent);
  box-shadow: 0 16px 38px rgba(54, 64, 78, 0.1);
}

html[data-theme="light"] .score-core strong {
  color: #202734;
}

html[data-theme="light"] .score-core span,
html[data-theme="light"] .score-core small {
  color: #6d798b;
}

html[data-theme="light"] .stat-row {
  border-color: rgba(65, 77, 94, 0.1);
}

html[data-theme="light"] .stat-name {
  color: #536075;
}

html[data-theme="light"] .stat-value {
  color: #2e3949;
}

html[data-theme="light"] .stat-track {
  background: rgba(70, 82, 99, 0.12);
}

html[data-theme="light"] .action-primary {
  color: #f8fafc;
  box-shadow: 0 13px 30px
    color-mix(in srgb, var(--cor, #4d6fa9) 20%, transparent);
}

/* =========================================================
   PÁGINA LEGADA DE PERGUNTAS
========================================================= */
html[data-theme="light"] body:has(.opcao) .card {
  background: rgba(237, 240, 243, 0.88);
  border-color: rgba(65, 77, 94, 0.14);
  box-shadow: var(--light-shadow);
}

html[data-theme="light"] body:has(.opcao) .card h2 {
  color: #202734;
}

html[data-theme="light"] body:has(.opcao) .card p {
  color: #687487;
}

html[data-theme="light"] .opcao {
  color: #3f4b5e;
  background: #dfe4e9;
  border: 1px solid rgba(65, 77, 94, 0.14);
}

html[data-theme="light"] .opcao:hover {
  background: #e9edf1;
  color: #202734;
}

html[data-theme="light"] .modal-content {
  background: #e9edf1;
  border: 1px solid rgba(65, 77, 94, 0.16);
  box-shadow: 0 24px 60px rgba(48, 58, 72, 0.2);
}

html[data-theme="light"] .modal-content h3 {
  color: #26303e;
}

html[data-theme="light"] .modal-content li {
  color: #536075;
}

/* =========================================================
   RESPONSIVIDADE DO TEMA
========================================================= */
@media (max-width: 900px) {
  .theme-toggle {
    top: 12px;
    right: 12px;
    min-width: 44px;
    width: 44px;
    height: 38px;
    padding: 5px;
  }

  .theme-toggle__label {
    display: none;
  }

  .theme-toggle__track {
    width: 34px;
    height: 24px;
  }

  .theme-toggle__thumb {
    width: 16px;
    height: 16px;
  }

  html[data-theme="dark"] .theme-toggle__thumb {
    transform: translateX(10px);
  }

  .theme-toggle__sun,
  .theme-toggle__moon {
    font-size: 9px;
  }

  html[data-theme="light"] .career-map::before,
  html[data-theme="light"] .career-map::after,
  html[data-theme="light"] .map-axis {
    opacity: 0.55;
  }
}

@media (max-width: 700px) {
  html[data-theme="light"] .pagina-autenticacao::before,
  html[data-theme="light"] .menu-page::before,
  html[data-theme="light"] .career-page::before,
  html[data-theme="light"] .game-shell::before {
    opacity: 0.46;
  }

  /* Elementos puramente decorativos podem sumir no mobile para priorizar leitura */
  html[data-theme="light"] .auth-showcase .career-orbit,
  html[data-theme="light"] .menu-page::after,
  html[data-theme="light"] .career-map::before,
  html[data-theme="light"] .career-map::after,
  html[data-theme="light"] .map-axis,
  html[data-theme="light"] .game-zone .career-orbit {
    display: none;
  }

  html[data-theme="light"] .auth-panel,
  html[data-theme="light"] .career-node.card,
  html[data-theme="light"] .menu-route {
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .theme-toggle *,
  html[data-theme="light"] * {
    scroll-behavior: auto;
  }
}

/* Círculo central da logo - LOGIN E CADASTRO */
html[data-theme="light"] .pagina-autenticacao .orbit-core {
  border: 2px solid #3a78e0 !important;

  background: radial-gradient(
    circle,
    rgba(47, 125, 255, 0.12),
    rgba(223, 228, 234, 0.95) 72%
  ) !important;

  box-shadow:
    0 0 0 5px rgba(47, 125, 255, 0.07),
    0 0 24px rgba(47, 125, 255, 0.18) !important;
}

/* =========================================================
   AJUSTES FINOS — MENU MODO CLARO
========================================================= */
html[data-theme="light"] .menu-page::after {
  color: rgba(97, 107, 120, 0.08);
}

html[data-theme="light"] .route-panel {
  background:
    linear-gradient(
      90deg,
      rgba(233, 237, 242, 0.02) 0%,
      rgba(210, 216, 224, 0.28) 100%
    ),
    radial-gradient(
      circle at 28% 46%,
      rgba(58, 120, 224, 0.06),
      transparent 30%
    );
}

html[data-theme="light"] .route-heading small {
  color: #6d7888;
}

html[data-theme="light"] .route-heading p {
  color: #6f7b8c;
}

html[data-theme="light"] .menu-status {
  color: #7a8595;
  border-top-color: rgba(86, 98, 114, 0.16);
}

html[data-theme="light"] .menu-status span:last-child {
  color: #677385;
}

html[data-theme="light"] .greeting {
  color: #5c687d;
}

html[data-theme="light"] .greeting::before {
  background: #1fd46b;
  box-shadow: 0 0 12px rgba(31, 212, 107, 0.55);
}

html[data-theme="light"] .menu-route {
  border-color: rgba(102, 115, 133, 0.12);
  background: linear-gradient(
    90deg,
    rgba(234, 238, 243, 0.58),
    rgba(234, 238, 243, 0.36) 68%,
    rgba(234, 238, 243, 0.2) 100%
  );
  box-shadow: none;
}

html[data-theme="light"] .menu-route:last-child {
  border-bottom-color: rgba(102, 115, 133, 0.12);
}

html[data-theme="light"] .menu-route:hover {
  background: linear-gradient(
    90deg,
    rgba(242, 245, 248, 0.88),
    rgba(240, 243, 247, 0.68) 70%,
    rgba(240, 243, 247, 0.38) 100%
  );
  border-color: rgba(58, 120, 224, 0.2);
  box-shadow: none;
}

html[data-theme="light"] .route-number {
  color: var(--route-color);
  border: 2px solid color-mix(in srgb, var(--route-color) 68%, white 6%);
  background: color-mix(in srgb, var(--route-color) 5%, #eef3f9);
  box-shadow: 0 0 0 6px
    color-mix(in srgb, var(--route-color) 28%, rgba(219, 225, 232, 0.96));
}

html[data-theme="light"] .route-start {
  --route-color: #3a78e0;
}

html[data-theme="light"] .route-achievements {
  --route-color: #8a63db;
}

html[data-theme="light"] .route-copy small {
  color: var(--route-color);
}

html[data-theme="light"] .route-copy p {
  color: #728093;
}

html[data-theme="light"] .route-arrow {
  color: var(--route-color);
  border-color: color-mix(
    in srgb,
    var(--route-color) 30%,
    rgba(112, 124, 142, 0.18)
  );
  background: rgba(236, 240, 245, 0.55);
}

html[data-theme="light"] .route-trail {
  background: linear-gradient(#3a78e0, #8a63db);
  opacity: 0.34;
}

html[data-theme="light"] .route-trail::after {
  background: #4d8cff;
  box-shadow: 0 0 14px rgba(58, 120, 224, 0.4);
}

/* =========================================================
   REFINO 2 — MENU CLARO: sem divisórias duras + azul vivo
========================================================= */

html[data-theme="light"] .brand-symbol::before {
  border-color: rgba(47, 125, 255, 0.58) !important;
}

html[data-theme="light"] .brand-symbol img {
  filter: drop-shadow(0 5px 12px rgba(47, 125, 255, 0.32)) !important;
}

html[data-theme="light"] .brand-copy small,
html[data-theme="light"] .menu-label {
  color: #2f7dff !important;
}

html[data-theme="light"] .menu-label::before {
  background: #2f7dff !important;
  box-shadow: 0 0 8px rgba(47, 125, 255, 0.28) !important;
}

html[data-theme="light"] .menu-message h1 span {
  color: #2f7dff !important;
}

html[data-theme="light"] .route-panel {
  background: transparent !important;
}

html[data-theme="light"] .menu-route,
html[data-theme="light"] .menu-route:last-child {
  border-top-color: transparent !important;
  border-bottom-color: transparent !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  background: linear-gradient(
    90deg,
    rgba(232, 237, 243, 0.72) 0%,
    rgba(232, 237, 243, 0.48) 58%,
    rgba(232, 237, 243, 0.18) 82%,
    transparent 100%
  ) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .menu-route::before {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--route-color) 10%, transparent),
    color-mix(in srgb, var(--route-color) 4%, transparent) 56%,
    transparent 100%
  ) !important;
}

html[data-theme="light"] .menu-route:hover,
html[data-theme="light"] .menu-route:focus-visible {
  border-color: transparent !important;
  background: linear-gradient(
    90deg,
    rgba(241, 245, 249, 0.92) 0%,
    rgba(239, 243, 248, 0.64) 62%,
    transparent 100%
  ) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .route-start {
  --route-color: #2f7dff !important;
}

html[data-theme="light"] .route-achievements {
  --route-color: #8b5cf6 !important;
}

html[data-theme="light"] .route-number {
  border-color: var(--route-color) !important;
  background: color-mix(in srgb, var(--route-color) 7%, #eef3f8) !important;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--route-color) 18%, transparent) !important;
}

html[data-theme="light"] .route-copy small,
html[data-theme="light"] .route-arrow {
  color: var(--route-color) !important;
}

html[data-theme="light"] .route-arrow {
  border-color: color-mix(
    in srgb,
    var(--route-color) 30%,
    transparent
  ) !important;
  background: color-mix(
    in srgb,
    var(--route-color) 4%,
    rgba(239, 243, 247, 0.72)
  ) !important;
}

html[data-theme="light"] .route-trail {
  background: linear-gradient(#2f7dff, #8b5cf6) !important;
  opacity: 0.38 !important;
}

html[data-theme="light"] .route-heading small,
html[data-theme="light"] .route-heading p,
html[data-theme="light"] .menu-status,
html[data-theme="light"] .menu-status span:last-child {
  color: #596779 !important;
}

html[data-theme="light"] .menu-status {
  border-top-color: rgba(88, 101, 119, 0.12) !important;
}

html[data-theme="light"] .greeting::before {
  background: #18d96b !important;
  box-shadow: 0 0 10px rgba(24, 217, 107, 0.52) !important;
}

/* ==========================================
   DIVISÓRIA DO MENU - MODO CLARO
========================================== */

html[data-theme="light"] .menu-intro {
  position: relative;
  border-right: none !important;
}

/* LINHA INTEIRA FIXA */
html[data-theme="light"] .menu-intro::before {
  content: "";
  position: absolute;

  top: 0;
  right: 0;

  width: 1px;
  height: 100%;

  background: rgba(143, 149, 158, 0.42);

  z-index: 2;
  pointer-events: none;
}

/* LUZ AZUL QUE PASSA POR CIMA */
html[data-theme="light"] .menu-intro::after {
  content: "";
  position: absolute;

  right: 0;
  top: 3%;

  width: 1px;
  height: 22%;

  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(47, 125, 255, 0.25) 20%,
    #2f7dff 50%,
    rgba(47, 125, 255, 0.25) 80%,
    transparent 100%
  );

  box-shadow:
    0 0 4px rgba(47, 125, 255, 0.75),
    0 0 10px rgba(47, 125, 255, 0.35);

  z-index: 3;

  animation: lightDividerMove 5s ease-in-out infinite;

  pointer-events: none;
}

@keyframes lightDividerMove {
  0% {
    top: 2%;
  }

  50% {
    top: 76%;
  }

  100% {
    top: 2%;
  }
}

/* ==========================================
   CARREIRAS - REFINO DO MODO CLARO
========================================== */

/* Azul principal mais vivo */
html[data-theme="light"] .career-page {
  --career-blue: #2f7dff;
  --career-blue-soft: #73a6ff;
}

/* Título */
html[data-theme="light"] .career-heading h1 span {
  color: #2f7dff !important;
}

html[data-theme="light"] .career-kicker {
  color: #3a78e0 !important;
}

html[data-theme="light"] .career-kicker::before,
html[data-theme="light"] .career-kicker::after {
  background: linear-gradient(
    90deg,
    transparent,
    #2f7dff,
    transparent
  ) !important;
}

/* ==========================================
   ÓRBITAS / GALÁXIA CENTRAL
========================================== */

html[data-theme="light"] .career-map::before {
  border-color: rgba(47, 125, 255, 0.34) !important;

  box-shadow:
    0 0 50px rgba(47, 125, 255, 0.08),
    inset 0 0 40px rgba(47, 125, 255, 0.025) !important;
}

html[data-theme="light"] .career-map::after {
  border-color: rgba(47, 125, 255, 0.2) !important;
}

/* Linhas que atravessam o mapa */
html[data-theme="light"] .map-axis {
  background: linear-gradient(
    90deg,
    transparent,
    rgba(47, 125, 255, 0.32),
    transparent
  ) !important;
}

/* Anéis em volta da logo central */
html[data-theme="light"] .career-core::before {
  border-color: rgba(47, 125, 255, 0.34) !important;
}

html[data-theme="light"] .career-core::after {
  border-color: rgba(47, 125, 255, 0.2) !important;
}

/* Círculo central */
html[data-theme="light"] .core-content {
  background: radial-gradient(
    circle,
    rgba(47, 125, 255, 0.08),
    rgba(239, 243, 248, 0.98) 68%
  ) !important;

  border: 1px solid rgba(47, 125, 255, 0.28) !important;

  box-shadow:
    0 0 0 7px rgba(47, 125, 255, 0.07),
    0 0 0 15px rgba(47, 125, 255, 0.035),
    0 16px 38px rgba(54, 64, 78, 0.12) !important;
}

html[data-theme="light"] .core-content img {
  filter: drop-shadow(0 0 8px rgba(47, 125, 255, 0.45)) !important;
}

/* ==========================================
   CARDS DAS CARREIRAS
========================================== */

html[data-theme="light"] .career-node.card {
  background: linear-gradient(
    135deg,
    rgba(218, 224, 231, 0.97),
    rgba(232, 236, 241, 0.94)
  ) !important;

  border: 1px solid rgba(84, 96, 112, 0.12) !important;

  box-shadow: 0 12px 28px rgba(54, 64, 78, 0.08) !important;
}

/* Remove aquele azul forte de dentro do card */
html[data-theme="light"] .career-node.card::before {
  background: linear-gradient(
    90deg,
    rgba(199, 207, 217, 0.74),
    rgba(209, 215, 221, 0.349),
    transparent
  ) !important;
}

/* Área circular do ícone */
html[data-theme="light"] .node-icon {
  /* branco levemente acinzentado */
  background: #f1f3f6 !important;

  border: 1px solid
    color-mix(in srgb, var(--accent) 58%, rgba(160, 170, 184, 0.28)) !important;

  /* anel externo suave no estado normal */
  box-shadow:
    0 0 0 8px rgba(232, 236, 241, 0.88),
    0 8px 18px rgba(54, 64, 78, 0.08) !important;

  transition:
    background 0.3s ease,
    box-shadow 0.3s ease;
}

/* Linha inferior da carreira */
html[data-theme="light"] .node-copy {
  border-bottom-color: color-mix(
    in srgb,
    var(--accent) 55%,
    transparent
  ) !important;
}

/* Hover */
html[data-theme="light"] .career-node.card:hover {
  background: linear-gradient(
    135deg,
    rgba(230, 235, 240, 0.98),
    rgba(241, 244, 247, 0.96)
  ) !important;

  border-color: color-mix(
    in srgb,
    var(--accent) 30%,
    rgba(80, 92, 108, 0.14)
  ) !important;

  box-shadow: 0 18px 38px rgba(54, 64, 78, 0.12) !important;
}

html[data-theme="light"] .career-node.card:hover .node-icon {
  background: #f1f3f6 !important;

  box-shadow: 0 8px 18px rgba(54, 64, 78, 0.08) !important;
}

/* =========================================================
   PROLIFE f1.2.4 — MODO CLARO DAS NOVAS ROTAS
   Mantém o tema claro existente e acrescenta somente o que
   não existia na versão anterior: Minhas Jornadas/Progresso
   e Relatório Comportamental.
========================================================= */

/* ---------- ROTA 03: PROGRESSO / MINHAS JORNADAS ---------- */
html[data-theme="light"] .route-journeys {
  --route-color: #168eac !important;
}

html[data-theme="light"] .route-trail {
  background: linear-gradient(#2f7dff, #8b5cf6, #168eac) !important;
}

/* ---------- PÁGINA MINHAS JORNADAS / PROGRESSO ---------- */
html[data-theme="light"] body:has(.jornadas-page) {
  --bg: #dce1e6;
  --surface: rgba(235, 239, 243, 0.88);
  --surface-hover: rgba(244, 246, 248, 0.96);
  --border: rgba(69, 82, 100, 0.16);
  --text: #202734;
  --muted: #667487;
  --accent: #168eac;
  --accent-light: #2fa8c4;
  --success: #18b965;

  color: #202734;
  background:
    radial-gradient(
      circle at 84% 10%,
      rgba(22, 142, 172, 0.1),
      transparent 27%
    ),
    radial-gradient(
      circle at 13% 18%,
      rgba(47, 125, 255, 0.08),
      transparent 31%
    ),
    linear-gradient(145deg, #e7eaee 0%, #dde2e7 52%, #d6dce2 100%);
}

html[data-theme="light"] body:has(.jornadas-page)::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(55, 67, 83, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(55, 67, 83, 0.028) 1px, transparent 1px);
  background-size: 58px 58px;
  mask-image: linear-gradient(to bottom, #000, transparent 95%);
}

html[data-theme="light"] .jornadas-page {
  position: relative;
  z-index: 1;
}

html[data-theme="light"] .jornadas-header .btn-voltar {
  color: #425168;
  background: rgba(238, 241, 244, 0.82);
  border-color: rgba(65, 78, 96, 0.16);
  box-shadow: 0 8px 20px rgba(54, 64, 78, 0.07);
}

html[data-theme="light"] .jornadas-header .btn-voltar:hover {
  color: #202734;
  background: #f4f6f8;
  border-color: rgba(22, 142, 172, 0.5);
}

html[data-theme="light"] .jornadas-header .eyebrow {
  color: #168eac;
}

html[data-theme="light"] .jornadas-header h1 {
  color: #202734;
}

html[data-theme="light"] .jornadas-header p {
  color: #667487;
}

html[data-theme="light"] .jornada-card {
  background: linear-gradient(
    135deg,
    rgba(232, 236, 241, 0.92),
    rgba(242, 244, 247, 0.88)
  );
  border-color: rgba(69, 82, 100, 0.14);
  box-shadow: 0 12px 28px rgba(54, 64, 78, 0.08);
}

html[data-theme="light"] .jornada-card:hover {
  background: rgba(246, 248, 250, 0.96);
  border-color: rgba(22, 142, 172, 0.34);
  box-shadow: 0 18px 38px rgba(54, 64, 78, 0.12);
}

html[data-theme="light"] .jornada-card::before {
  background: #168eac;
}

html[data-theme="light"] .jornada-numero {
  color: #778596;
}

html[data-theme="light"] .jornada-carreira,
html[data-theme="light"] .jornada-perfil {
  color: #25303e;
}

html[data-theme="light"] .jornada-perfil span {
  color: #168eac;
}

html[data-theme="light"] .jornada-meta {
  color: #6d798b;
}

html[data-theme="light"] .jornada-status.finalizada {
  color: #14884d;
  background: rgba(24, 185, 101, 0.08);
  border-color: rgba(24, 185, 101, 0.22);
}

html[data-theme="light"] .jornada-status.andamento {
  color: #168eac;
  background: rgba(22, 142, 172, 0.08);
  border-color: rgba(22, 142, 172, 0.22);
}

html[data-theme="light"] .btn-relatorio {
  color: #334155;
  background: rgba(247, 249, 251, 0.58);
  border-color: rgba(69, 82, 100, 0.16);
}

html[data-theme="light"] .btn-relatorio:hover {
  color: #fff;
  background: #168eac;
  border-color: #168eac;
}

html[data-theme="light"] body:has(.jornadas-page) .estado {
  color: #667487;
  background: rgba(233, 237, 241, 0.42);
  border-color: rgba(69, 82, 100, 0.2);
}

html[data-theme="light"] body:has(.jornadas-page) .estado h2 {
  color: #25303e;
}

html[data-theme="light"] body:has(.jornadas-page) .numero-vazio {
  color: rgba(75, 89, 108, 0.26);
}

html[data-theme="light"] body:has(.jornadas-page) .spinner {
  border-color: rgba(69, 82, 100, 0.16);
  border-top-color: #168eac;
}

html[data-theme="light"] body:has(.jornadas-page) .estado button {
  background: #168eac;
  color: #fff;
}

/* ---------- RELATÓRIO COMPORTAMENTAL ---------- */
html[data-theme="light"] body:has(.relatorio-page) {
  --bg: #dce1e6;
  --surface: rgba(235, 239, 243, 0.9);
  --surface-2: rgba(226, 232, 238, 0.92);
  --border: rgba(69, 82, 100, 0.16);
  --text: #202734;
  --muted: #667487;
  --accent: #168eac;
  --accent-light: #2fa8c4;
  --success: #18b965;

  color: #202734;
  background:
    radial-gradient(circle at 84% 8%, rgba(22, 142, 172, 0.1), transparent 26%),
    radial-gradient(
      circle at 12% 18%,
      rgba(47, 125, 255, 0.07),
      transparent 30%
    ),
    linear-gradient(145deg, #e7eaee 0%, #dde2e7 52%, #d6dce2 100%);
}

html[data-theme="light"] .relatorio-page .btn-voltar {
  color: #425168;
  background: rgba(238, 241, 244, 0.84);
  border-color: rgba(65, 78, 96, 0.16);
  box-shadow: 0 8px 20px rgba(54, 64, 78, 0.07);
}

html[data-theme="light"] .relatorio-page .btn-voltar:hover {
  border-color: rgba(22, 142, 172, 0.5);
}

html[data-theme="light"] .relatorio-page .eyebrow,
html[data-theme="light"] .relatorio-page .label,
html[data-theme="light"] .relatorio-page .bloco-label {
  color: #168eac;
}

html[data-theme="light"] .relatorio-page .topo h1,
html[data-theme="light"] .relatorio-page h2,
html[data-theme="light"] .relatorio-page .perfil-secundario strong {
  color: #202734;
}

html[data-theme="light"] .relatorio-page .topo p,
html[data-theme="light"] .relatorio-page .secao-titulo p,
html[data-theme="light"] .relatorio-page .compatibilidade span,
html[data-theme="light"] .relatorio-page .legenda-caracteristicas {
  color: #667487;
}

html[data-theme="light"] .perfil-hero {
  background:
    linear-gradient(135deg, rgba(22, 142, 172, 0.09), transparent 55%),
    rgba(235, 239, 243, 0.9);
  border-color: rgba(69, 82, 100, 0.15);
  box-shadow: 0 16px 38px rgba(54, 64, 78, 0.08);
}

html[data-theme="light"] .perfil-hero::after {
  border-color: rgba(22, 142, 172, 0.2);
}

html[data-theme="light"] .perfil-principal p {
  color: #59677a;
}

html[data-theme="light"] .compatibilidade strong,
html[data-theme="light"] .perfil-secundario span,
html[data-theme="light"] .caracteristica-topo span:last-child {
  color: #168eac;
}

html[data-theme="light"] .relatorio-page .secao,
html[data-theme="light"] .relatorio-page .duas-colunas {
  border-color: rgba(69, 82, 100, 0.14);
}

html[data-theme="light"] .relatorio-page .secao-titulo > span {
  color: rgba(67, 82, 103, 0.44);
}

html[data-theme="light"] .perfil-secundario,
html[data-theme="light"] .relatorio-page .bloco,
html[data-theme="light"] .relatorio-page .analise-card,
html[data-theme="light"] .relatorio-page .areas-container,
html[data-theme="light"] .relatorio-page .resumo-jornada {
  background: rgba(235, 239, 243, 0.84);
  border-color: rgba(69, 82, 100, 0.14);
  box-shadow: 0 10px 24px rgba(54, 64, 78, 0.06);
}

html[data-theme="light"] .relatorio-page .analise-card p,
html[data-theme="light"] .relatorio-page .bloco p,
html[data-theme="light"] .relatorio-page .resumo-jornada p {
  color: #5f6d80;
}

html[data-theme="light"] .relatorio-page .barra {
  background: rgba(70, 83, 101, 0.13);
}

html[data-theme="light"] .relatorio-page .barra-preenchimento {
  background: linear-gradient(90deg, #168eac, #46b7cf);
}

html[data-theme="light"] .relatorio-page .btn-pdf {
  color: #fff;
  background: linear-gradient(135deg, #1997b5, #127f9b);
  border-color: transparent;
  box-shadow: 0 12px 28px rgba(22, 142, 172, 0.24);
}

html[data-theme="light"] .relatorio-page .btn-pdf:hover {
  box-shadow: 0 16px 34px rgba(22, 142, 172, 0.3);
}

html[data-theme="light"] .relatorio-page .btn-pdf span {
  background: rgba(255, 255, 255, 0.16);
}

html[data-theme="light"] body:has(.relatorio-page) .estado {
  color: #667487;
  background: rgba(233, 237, 241, 0.42);
  border-color: rgba(69, 82, 100, 0.2);
}

html[data-theme="light"] body:has(.relatorio-page) .estado h2 {
  color: #25303e;
}

html[data-theme="light"] body:has(.relatorio-page) .spinner {
  border-color: rgba(69, 82, 100, 0.16);
  border-top-color: #168eac;
}

html[data-theme="light"] body:has(.relatorio-page) .estado button {
  background: #168eac;
  color: #fff;
}
/* =========================================================
   JOGO — MODO CLARO REFINADO
   Azul mais vibrante + textos mais escuros
========================================================= */

html[data-theme="light"] body:has(.game-shell) {
  --prolife-blue: #2f7dff;
  --prolife-blue-rgb: 47, 125, 255;

  --light-text-strong: #202936;
  --light-text: #3f4b5c;
  --light-text-muted: #667386;

  color: var(--light-text-strong);
}

/* =========================================================
   AZUL PRINCIPAL
========================================================= */

/* Pequenos detalhes que usam a cor principal */
html[data-theme="light"] body:has(.game-shell) .eyebrow,
html[data-theme="light"] body:has(.game-shell) .section-kicker,
html[data-theme="light"] body:has(.game-shell) .question-number {
  color: var(--prolife-blue);
}

/* Ponto de atividade */
html[data-theme="light"] body:has(.game-shell) .session-dot {
  background: var(--prolife-blue);
  box-shadow:
    0 0 8px rgba(var(--prolife-blue-rgb), 0.75),
    0 0 16px rgba(var(--prolife-blue-rgb), 0.3);
}

/* =========================================================
   TÍTULOS E TEXTOS
========================================================= */

html[data-theme="light"] body:has(.game-shell) #cargo {
  color: #202936;
}

html[data-theme="light"] body:has(.game-shell) .greeting {
  color: #5f6d80;
}

html[data-theme="light"] body:has(.game-shell) .section-heading h2,
html[data-theme="light"] body:has(.game-shell) .decision-head h2 {
  color: #273241;
}

html[data-theme="light"] body:has(.game-shell) #eventoTexto {
  color: #465366;
}

html[data-theme="light"] body:has(.game-shell) .status-nome {
  color: #536176;
}

html[data-theme="light"] body:has(.game-shell) .day-actions > p {
  color: #687588;
}

/* =========================================================
   DIA NO LUGAR DA ANTIGA ÓRBITA
========================================================= */

html[data-theme="light"] .career-day-display {
  position: relative;

  display: flex;
  align-items: baseline;
  justify-content: center;

  width: 126px;
  min-width: 126px;

  gap: 4px;

  padding: 18px 16px;

  border-top: 1px solid rgba(47, 125, 255, 0.28);
  border-bottom: 1px solid rgba(47, 125, 255, 0.28);

  background: linear-gradient(
    135deg,
    rgba(47, 125, 255, 0.08),
    rgba(47, 125, 255, 0.025)
  );

  box-shadow: 0 12px 28px rgba(47, 125, 255, 0.07);

  overflow: hidden;
}

/* Pequeno brilho passando pelo bloco */
html[data-theme="light"] .career-day-display::before {
  content: "";

  position: absolute;

  left: -40%;
  top: 0;

  width: 40%;
  height: 100%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.45),
    transparent
  );

  transform: skewX(-18deg);

  animation: dayDisplayLight 4s ease-in-out infinite;
}

html[data-theme="light"] .career-day-label {
  position: relative;
  z-index: 1;

  color: #68778a;

  font-family: var(--fonte-destaque);
  font-size: 9px;
  font-weight: 700;

  letter-spacing: 1.8px;
}

html[data-theme="light"] .career-day-display strong {
  position: relative;
  z-index: 1;

  color: var(--prolife-blue);

  font-family: var(--fonte-destaque);
  font-size: 42px;
  line-height: 0.9;

  letter-spacing: -1px;

  text-shadow: 0 0 18px rgba(47, 125, 255, 0.18);
}

html[data-theme="light"] .career-day-display small {
  position: relative;
  z-index: 1;

  color: #718096;

  font-family: var(--fonte-destaque);
  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1px;
}

@keyframes dayDisplayLight {
  0%,
  55% {
    left: -45%;
  }

  100% {
    left: 120%;
  }
}

/* =========================================================
   RADAR — AZUL PROLIFE
========================================================= */

/* Linhas do radar */
html[data-theme="light"] body:has(.game-shell) .scanner::before {
  background:
    linear-gradient(
      90deg,
      transparent 49.6%,
      rgba(47, 125, 255, 0.18) 50%,
      transparent 50.4%
    ),
    linear-gradient(
      transparent 49.6%,
      rgba(47, 125, 255, 0.18) 50%,
      transparent 50.4%
    );
}

/* Anéis */
html[data-theme="light"] body:has(.game-shell) .scanner .ring-1 {
  border-color: rgba(47, 125, 255, 0.18);
}

html[data-theme="light"] body:has(.game-shell) .scanner .ring-2 {
  border-color: rgba(47, 125, 255, 0.25);
}

html[data-theme="light"] body:has(.game-shell) .scanner .ring-3 {
  border-color: rgba(47, 125, 255, 0.32);
}

/* =========================================================
   BOLINHA CENTRAL DO RADAR
========================================================= */

html[data-theme="light"] body:has(.game-shell) .scanner-core {
  background: var(--prolife-blue);

  border: none;

  box-shadow:
    0 0 10px rgba(47, 125, 255, 0.75),
    0 0 24px rgba(47, 125, 255, 0.4),
    0 0 45px rgba(47, 125, 255, 0.18);
}

/* Feixe do radar */
html[data-theme="light"] body:has(.game-shell) .scanner-sweep {
  background: linear-gradient(
    to top,
    var(--prolife-blue),
    rgba(47, 125, 255, 0.48),
    transparent
  );

  box-shadow: 0 0 8px rgba(47, 125, 255, 0.65);
}

/* =========================================================
   BARRAS DE STATUS
========================================================= */

html[data-theme="light"] body:has(.game-shell) .status-fill {
  background: linear-gradient(90deg, #5b9cff, #2f7dff);

  box-shadow: 0 0 10px rgba(47, 125, 255, 0.3);
}

html[data-theme="light"] body:has(.game-shell) .status-valor {
  color: var(--prolife-blue);
}

/* =========================================================
   BOTÃO PRÓXIMO DIA
========================================================= */

html[data-theme="light"] body:has(.game-shell) #btnDia {
  background: linear-gradient(135deg, #3d88ff, #2f7dff);

  border-color: #2f7dff;

  box-shadow: 0 12px 30px rgba(47, 125, 255, 0.22);
}

html[data-theme="light"] body:has(.game-shell) #btnDia:hover {
  background: linear-gradient(135deg, #5598ff, #2f7dff);

  box-shadow: 0 16px 34px rgba(47, 125, 255, 0.3);
}

/* =========================================================
   LINHA DO ACONTECIMENTO
========================================================= */

html[data-theme="light"] body:has(.game-shell) .event-line::before {
  background: linear-gradient(
    90deg,
    rgba(47, 125, 255, 0.72),
    rgba(47, 125, 255, 0.2),
    transparent
  );

  opacity: 0.55;
}

html[data-theme="light"] body:has(.game-shell) .event-marker {
  border-color: var(--prolife-blue);

  box-shadow: 0 0 12px rgba(47, 125, 255, 0.35);
}

/* =========================================================
   PULSE DA JORNADA
========================================================= */

html[data-theme="light"] body:has(.game-shell) .journey-pulse {
  background: var(--prolife-blue);

  box-shadow: 0 0 10px rgba(47, 125, 255, 0.6);
}

html[data-theme="light"] body:has(.game-shell) .journey-pulse::after {
  border-color: var(--prolife-blue);
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {
  html[data-theme="light"] .career-day-display {
    width: 96px;
    min-width: 96px;

    padding: 13px 10px;
  }

  html[data-theme="light"] .career-day-display strong {
    font-size: 31px;
  }

  html[data-theme="light"] .career-day-label {
    font-size: 8px;
  }

  html[data-theme="light"] .career-day-display small {
    font-size: 9px;
  }
}
/* =========================================================
   PERGUNTAS — TEMA CLARO
   Replica a linguagem visual clara usada no restante do ProLife:
   cinza frio, superfícies translúcidas, bordas azul-acinzentadas
   e azul como cor de ação.
   ========================================================= */

html[data-theme="light"] body:has(> .card #titulo) {
  color: var(--light-text);
}

html[data-theme="light"] body:has(> .card #titulo) > .card {
  background: rgba(239, 242, 245, 0.88);
  border-color: var(--light-border);
  box-shadow: var(--light-shadow);
  backdrop-filter: blur(18px);
}

html[data-theme="light"] body:has(> .card #titulo) > .card::before {
  background: linear-gradient(
    135deg,
    rgba(58, 120, 224, 0.24),
    rgba(120, 103, 165, 0.08) 48%,
    transparent 72%
  );
}

html[data-theme="light"] body:has(> .card #titulo) .card h2 {
  color: var(--light-text);
}

html[data-theme="light"] body:has(> .card #titulo) .card p {
  color: var(--light-text-soft);
}

html[data-theme="light"] body:has(> .card #titulo) .opcao {
  color: var(--light-text);
  background: rgba(247, 249, 251, 0.78);
  border-color: var(--light-border);
  box-shadow: 0 7px 18px rgba(44, 53, 65, 0.055);
}

html[data-theme="light"] body:has(> .card #titulo) .opcao:hover {
  color: #244f91;
  background: rgba(230, 237, 248, 0.96);
  border-color: rgba(58, 120, 224, 0.38);
  box-shadow: 0 12px 28px rgba(77, 111, 169, 0.14);
}

html[data-theme="light"] body:has(> .card #titulo) .opcao:disabled {
  color: var(--light-muted);
  background: rgba(230, 233, 237, 0.72);
  border-color: rgba(60, 72, 91, 0.09);
}

html[data-theme="light"] body:has(> .card #titulo) .modal {
  background: rgba(40, 48, 60, 0.34);
  backdrop-filter: blur(5px);
}

html[data-theme="light"] body:has(> .card #titulo) .modal-content {
  color: var(--light-text);
  background: rgba(243, 245, 247, 0.97);
  border-color: var(--light-border-strong);
  box-shadow: 0 24px 64px rgba(44, 53, 65, 0.2);
}

html[data-theme="light"] body:has(> .card #titulo) .modal-content h3 {
  color: var(--light-text);
}

html[data-theme="light"] body:has(> .card #titulo) .modal-content p,
html[data-theme="light"] body:has(> .card #titulo) .modal-content li {
  color: var(--light-text-soft);
}

html[data-theme="light"] body:has(> .card #titulo) .modal-content button {
  color: #fff;
  background: linear-gradient(135deg, var(--light-blue), #2f63c0);
  box-shadow: 0 10px 24px rgba(58, 120, 224, 0.2);
}

html[data-theme="light"] body:has(> .card #titulo) .modal-content button:hover {
  box-shadow: 0 14px 30px rgba(58, 120, 224, 0.28);
}

html[data-theme="light"] body:has(> .card #titulo) .ganho {
  color: var(--light-green);
}

html[data-theme="light"] body:has(> .card #titulo) .perda {
  color: #b95058;
}

html[data-theme="light"] body:has(> .card #titulo) .transicao-dia {
  color: var(--light-text);
  background:
    radial-gradient(
      circle at 50% 45%,
      rgba(58, 120, 224, 0.12),
      transparent 34%
    ),
    linear-gradient(145deg, #e8ebef 0%, #dce1e6 52%, #d5dae0 100%);
}

/* =========================================================
   AJUSTES FINAIS DO MODO CLARO
========================================================= */

/* Mensagens de autenticação / senha continuam sendo erro no tema claro. */
html[data-theme="light"] .auth-mensagem,
html[data-theme="light"] .auth-mensagem.ativo {
  color: #c93f55;
}

/* O hover do seletor de tema não pode herdar hover dos botões das páginas. */
html[data-theme="light"] button.theme-toggle:hover,
html[data-theme="light"] .theme-toggle:hover {
  color: #344156 !important;
  border-color: rgba(58, 120, 224, 0.34) !important;
  background: rgba(244, 246, 248, 0.96) !important;
  box-shadow: 0 14px 34px rgba(55, 65, 78, 0.16) !important;
  transform: translateY(-2px) !important;
}

html[data-theme="light"] button.theme-toggle:hover .theme-toggle__track,
html[data-theme="light"] .theme-toggle:hover .theme-toggle__track {
  background: rgba(99, 111, 127, 0.1) !important;
  border-color: rgba(60, 72, 91, 0.12) !important;
}

/* =========================================================
   JOGO — MODAL ABANDONAR CARREIRA
========================================================= */
html[data-theme="light"] .abandon-overlay {
  background: rgba(72, 82, 96, 0.32);
  backdrop-filter: blur(16px);
}

html[data-theme="light"] .abandon-panel {
  border-color: rgba(60, 72, 91, 0.16);
  background:
    radial-gradient(
      circle at 100% 0%,
      color-mix(in srgb, var(--cor) 10%, transparent),
      transparent 38%
    ),
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--cor) 5%, transparent),
      transparent 45%
    ),
    rgba(241, 243, 246, 0.98);
  box-shadow:
    0 30px 80px rgba(44, 53, 65, 0.2),
    0 0 44px color-mix(in srgb, var(--cor) 8%, transparent);
}

html[data-theme="light"] .abandon-panel h2 {
  color: #202734;
}

html[data-theme="light"] .abandon-panel > p {
  color: #647083;
}

html[data-theme="light"] .abandon-icon {
  background: color-mix(in srgb, var(--cor) 8%, #edf0f3);
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--cor) 5%, transparent);
}

html[data-theme="light"] .abandon-icon span {
  text-shadow: none;
}

html[data-theme="light"] .abandon-warning {
  border-color: color-mix(in srgb, var(--cor) 18%, rgba(60, 72, 91, 0.12));
  background: color-mix(in srgb, var(--cor) 5%, #e8ebef);
}

html[data-theme="light"] .abandon-warning strong {
  color: #3c485a;
}

html[data-theme="light"] .abandon-warning small {
  color: #748094;
}

html[data-theme="light"] #btnCancelarAbandono {
  color: #58667a;
  border-color: rgba(60, 72, 91, 0.15);
  background: rgba(226, 230, 235, 0.86);
}

html[data-theme="light"] #btnCancelarAbandono:hover {
  color: #273244;
  border-color: rgba(60, 72, 91, 0.25);
  background: #f3f5f7;
}

html[data-theme="light"] #btnConfirmarAbandono {
  color: #fff;
  background: linear-gradient(
    105deg,
    rgba(var(--cor-rgb), 0.92),
    rgba(var(--cor-rgb), 0.66)
  );
  box-shadow: 0 10px 26px rgba(var(--cor-rgb), 0.18);
}

/* =========================================================
   FINAL — TEMA CLARO COMPLETO
========================================================= */
html[data-theme="light"] .final-topbar {
  background: linear-gradient(
    to bottom,
    rgba(238, 241, 244, 0.96),
    rgba(226, 230, 235, 0.88)
  );
  border-bottom-color: rgba(60, 72, 91, 0.13);
  box-shadow: 0 8px 26px rgba(44, 53, 65, 0.06);
}

html[data-theme="light"] .brand-mark {
  background: color-mix(in srgb, var(--cor) 7%, #edf0f3);
  box-shadow: 0 0 22px color-mix(in srgb, var(--cor) 10%, transparent);
}

html[data-theme="light"] .topbar-center small,
html[data-theme="light"] .section-kicker,
html[data-theme="light"] #cargoFinal,
html[data-theme="light"] .completion-line strong {
  color: var(--cor);
}

html[data-theme="light"] .career-signature {
  color: #647083;
}

html[data-theme="light"] .result-index {
  color: #718095;
}

html[data-theme="light"] .outcome-zone::after {
  opacity: 0.28;
}

html[data-theme="light"] .performance-zone {
  background: linear-gradient(
    180deg,
    rgba(236, 239, 243, 0.62),
    rgba(220, 225, 231, 0.34)
  );
}

html[data-theme="light"] .performance-head {
  border-bottom-color: rgba(60, 72, 91, 0.12);
}

html[data-theme="light"] .system-state {
  background: color-mix(in srgb, var(--cor) 8%, #edf0f3);
  box-shadow: none;
}

html[data-theme="light"] .ring-one,
html[data-theme="light"] .ring-two,
html[data-theme="light"] .ring-three {
  border-color: color-mix(in srgb, var(--cor) 20%, transparent);
}

html[data-theme="light"] .ring-one {
  border-top-color: var(--cor);
}

html[data-theme="light"] .score-core {
  background: rgba(243, 245, 247, 0.94);
  box-shadow: 0 18px 42px rgba(44, 53, 65, 0.12);
}

html[data-theme="light"] .stat-track {
  background: rgba(60, 72, 91, 0.11);
}

html[data-theme="light"] .action-primary {
  color: #fff;
  background: linear-gradient(
    105deg,
    rgba(var(--cor-rgb), 0.92) 0%,
    rgba(var(--cor-rgb), 0.72) 56%,
    rgba(var(--cor-rgb), 0.56) 100%
  );
  border-color: color-mix(in srgb, var(--cor) 72%, #8aa3c9);
  box-shadow: 0 12px 28px rgba(var(--cor-rgb), 0.18);
}

html[data-theme="light"] .action-primary span,
html[data-theme="light"] .action-primary strong {
  color: #fff;
}

html[data-theme="light"] .action-primary:hover {
  border-color: color-mix(in srgb, var(--cor) 84%, #ffffff);
  background: linear-gradient(
    105deg,
    rgba(var(--cor-rgb), 1) 0%,
    rgba(var(--cor-rgb), 0.82) 58%,
    rgba(var(--cor-rgb), 0.65) 100%
  );
  box-shadow: 0 16px 38px rgba(var(--cor-rgb), 0.26);
}

html[data-theme="light"] .performance-footer p,
html[data-theme="light"] .scroll-cue {
  color: #6f7b8e;
}

/* =========================================================
   AJUSTES FINAIS — MODO CLARO V3
   Toggle global, azul mais vibrante, média final e deltas.
========================================================= */

/* Azul principal mais vivo, alinhado ao CTA de avançar dia. */
html[data-theme="light"] body {
  --cor-primaria: #2f7dff;
  --cor-primaria-clara: #69a2ff;
  --cor-primaria-escura: #1f63db;
}

/*
   O toggle precisa ser independente dos estilos genéricos de button:hover
   de cada página. Reaplicamos o estado completo com especificidade alta.
*/
button.theme-toggle,
html[data-theme="dark"] button.theme-toggle,
html[data-theme="light"] button.theme-toggle {
  width: auto !important;
  min-width: 112px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 5px 10px 5px 6px !important;
  border-radius: 999px !important;
  font: 700 10px/1 var(--fonte-texto, "Inter", sans-serif) !important;
  letter-spacing: 0.6px !important;
  text-transform: uppercase !important;
}

button.theme-toggle:hover,
html[data-theme="dark"] button.theme-toggle:hover {
  color: #dbe4f0 !important;
  background: rgba(8, 14, 28, 0.88) !important;
  border-color: rgba(47, 125, 255, 0.58) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
  transform: translateY(-2px) !important;
}

html[data-theme="light"] button.theme-toggle:hover {
  color: #344156 !important;
  background: rgba(244, 247, 250, 0.98) !important;
  border-color: rgba(47, 125, 255, 0.48) !important;
  box-shadow: 0 14px 34px rgba(55, 65, 78, 0.16) !important;
  transform: translateY(-2px) !important;
}

button.theme-toggle:hover::before,
button.theme-toggle:hover::after {
  content: none !important;
  display: none !important;
}

button.theme-toggle:hover .theme-toggle__track {
  transform: none !important;
}

html[data-theme="light"] .theme-toggle__thumb {
  background: #2f7dff;
  box-shadow: 0 3px 10px rgba(47, 125, 255, 0.28);
}

/* FINAL — leitura da média sem o aspecto de caixa apagada. */
html[data-theme="light"] .score-core {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

html[data-theme="light"] .score-core span {
  color: #536075;
  font-weight: 700;
  letter-spacing: 2px;
}

html[data-theme="light"] .score-core strong {
  color: #202734;
  text-shadow: 0 0 28px rgba(47, 125, 255, 0.1);
}

html[data-theme="light"] .score-core small {
  color: #2f7dff;
  font-weight: 700;
}

/* FINAL — azul da interface mais vivo no tema claro. */
html[data-theme="light"] body:has(.final-screen).tecnologia,
html[data-theme="light"]
  body:has(.final-screen):not(.corporativo):not(.empreendedor):not(
    .criativo
  ):not(.saude):not(.influenciador) {
  --cor: #2f7dff;
  --cor-rgb: 47, 125, 255;
}

/* Mudanças de status: contraste claro e sem tons lavados. */
html[data-theme="light"] #listaResultado .ganho,
html[data-theme="light"] .result-panel .ganho,
html[data-theme="light"] .modal-content .ganho,
html[data-theme="light"] body:has(> .card #titulo) .ganho {
  color: #168a4a !important;
}

html[data-theme="light"] #listaResultado .perda,
html[data-theme="light"] .result-panel .perda,
html[data-theme="light"] .modal-content .perda,
html[data-theme="light"] body:has(> .card #titulo) .perda {
  color: #d43d4f !important;
}

html[data-theme="light"] #listaResultado li.ganho {
  border-bottom-color: rgba(22, 138, 74, 0.16);
}

html[data-theme="light"] #listaResultado li.perda {
  border-bottom-color: rgba(212, 61, 79, 0.16);
}

/* =========================================================
   V4 — IDENTIDADE DE COR POR CARREIRA NO MODO CLARO
   O light mode muda superfícies/contraste, não a cor da carreira.
========================================================= */

/* Mesmas cores usadas no modo escuro. */
html[data-theme="light"] .corporativo,
html[data-theme="light"] body.corporativo {
  --accent: #94a3b8;
  --cor: #94a3b8;
  --cor-rgb: 148, 163, 184;
}

html[data-theme="light"] .tecnologia,
html[data-theme="light"] body.tecnologia {
  --accent: #3b82f6;
  --cor: #3b82f6;
  --cor-rgb: 59, 130, 246;
}

html[data-theme="light"] .empreendedor,
html[data-theme="light"] body.empreendedor {
  --accent: #f59e0b;
  --cor: #f59e0b;
  --cor-rgb: 245, 158, 11;
}

html[data-theme="light"] .criativo,
html[data-theme="light"] body.criativo {
  --accent: #a855f7;
  --cor: #a855f7;
  --cor-rgb: 168, 85, 247;
}

html[data-theme="light"] .saude,
html[data-theme="light"] body.saude {
  --accent: #22c55e;
  --cor: #22c55e;
  --cor-rgb: 34, 197, 94;
}

html[data-theme="light"] .influenciador,
html[data-theme="light"] body.influenciador {
  --accent: #f43f5e;
  --cor: #f43f5e;
  --cor-rgb: 244, 63, 94;
}

/* Tela de jogo: todos os acentos acompanham a carreira. */
html[data-theme="light"] body:has(.game-shell) .section-kicker,
html[data-theme="light"] body:has(.game-shell) .career-name,
html[data-theme="light"] body:has(.game-shell) .status-value,
html[data-theme="light"] body:has(.game-shell) .day-current,
html[data-theme="light"] body:has(.game-shell) .live-label {
  color: var(--cor) !important;
}

html[data-theme="light"] body:has(.game-shell) .status-fill,
html[data-theme="light"] body:has(.game-shell) .status-bar span {
  background: var(--cor) !important;
}

/* Perguntas: a página recebe a classe da carreira via perguntas.js. */
html[data-theme="light"] body:has(> .card #titulo) .opcao:hover {
  background: rgba(var(--cor-rgb), 0.12) !important;
  border-color: rgba(var(--cor-rgb), 0.48) !important;
  box-shadow: 0 10px 26px rgba(var(--cor-rgb), 0.16) !important;
}

html[data-theme="light"] body:has(> .card #titulo) .modal-content button {
  background: linear-gradient(
    135deg,
    var(--cor),
    color-mix(in srgb, var(--cor) 78%, #172033)
  ) !important;
  box-shadow: 0 10px 24px rgba(var(--cor-rgb), 0.2) !important;
}

html[data-theme="light"] body:has(> .card #titulo) .modal-content button:hover {
  box-shadow: 0 14px 30px rgba(var(--cor-rgb), 0.3) !important;
}

/* Final: remove a exceção que forçava azul e usa a carreira atual. */
html[data-theme="light"] body:has(.final-screen) {
  --cor-primaria: var(--cor);
  --cor-primaria-clara: color-mix(in srgb, var(--cor) 72%, white);
  --cor-primaria-escura: color-mix(in srgb, var(--cor) 78%, #172033);
}

html[data-theme="light"] body:has(.final-screen) .score-core small,
html[data-theme="light"] body:has(.final-screen) .final-eyebrow,
html[data-theme="light"] body:has(.final-screen) .career-label {
  color: var(--cor) !important;
}

/* =========================================================
   V5 — COR DA CARREIRA EM TODO O MODO CLARO
   Corrige os últimos elementos que ainda ficavam azuis no
   jogo/perguntas/final. A cor agora acompanha --cor.
========================================================= */

/* Faz os aliases antigos do jogo apontarem para a carreira atual. */
html[data-theme="light"] body:has(.game-shell) {
  --prolife-blue: var(--cor) !important;
  --prolife-blue-rgb: var(--cor-rgb) !important;
  --cor-primaria: var(--cor) !important;
  --cor-primaria-clara: color-mix(in srgb, var(--cor) 72%, white) !important;
  --cor-primaria-escura: color-mix(in srgb, var(--cor) 78%, #172033) !important;
}

/* Textos e indicadores */
html[data-theme="light"] body:has(.game-shell) .eyebrow,
html[data-theme="light"] body:has(.game-shell) .section-kicker,
html[data-theme="light"] body:has(.game-shell) .question-number,
html[data-theme="light"] body:has(.game-shell) .career-name,
html[data-theme="light"] body:has(.game-shell) .status-value,
html[data-theme="light"] body:has(.game-shell) .status-valor,
html[data-theme="light"] body:has(.game-shell) .day-current,
html[data-theme="light"] body:has(.game-shell) .live-label,
html[data-theme="light"] body:has(.game-shell) .career-day-display strong {
  color: var(--cor) !important;
}

/* Dia */
html[data-theme="light"] body:has(.game-shell) .career-day-display {
  border-top-color: rgba(var(--cor-rgb), 0.28) !important;
  border-bottom-color: rgba(var(--cor-rgb), 0.28) !important;
  background: linear-gradient(
    135deg,
    rgba(var(--cor-rgb), 0.08),
    rgba(var(--cor-rgb), 0.025)
  ) !important;
  box-shadow: 0 12px 28px rgba(var(--cor-rgb), 0.07) !important;
}

html[data-theme="light"] body:has(.game-shell) .career-day-display strong {
  text-shadow: 0 0 18px rgba(var(--cor-rgb), 0.18) !important;
}

/* Sessão / radar */
html[data-theme="light"] body:has(.game-shell) .session-dot {
  background: var(--cor) !important;
  box-shadow:
    0 0 8px rgba(var(--cor-rgb), 0.75),
    0 0 16px rgba(var(--cor-rgb), 0.3) !important;
}

html[data-theme="light"] body:has(.game-shell) .scanner::before {
  background:
    linear-gradient(
      90deg,
      transparent 49.6%,
      rgba(var(--cor-rgb), 0.18) 50%,
      transparent 50.4%
    ),
    linear-gradient(
      transparent 49.6%,
      rgba(var(--cor-rgb), 0.18) 50%,
      transparent 50.4%
    ) !important;
}

html[data-theme="light"] body:has(.game-shell) .scanner .ring-1 {
  border-color: rgba(var(--cor-rgb), 0.18) !important;
}
html[data-theme="light"] body:has(.game-shell) .scanner .ring-2 {
  border-color: rgba(var(--cor-rgb), 0.25) !important;
}
html[data-theme="light"] body:has(.game-shell) .scanner .ring-3 {
  border-color: rgba(var(--cor-rgb), 0.32) !important;
}

html[data-theme="light"] body:has(.game-shell) .scanner-core {
  background: var(--cor) !important;
  box-shadow:
    0 0 10px rgba(var(--cor-rgb), 0.75),
    0 0 24px rgba(var(--cor-rgb), 0.4),
    0 0 45px rgba(var(--cor-rgb), 0.18) !important;
}

html[data-theme="light"] body:has(.game-shell) .scanner-sweep {
  background: linear-gradient(
    to top,
    var(--cor),
    rgba(var(--cor-rgb), 0.48),
    transparent
  ) !important;
  box-shadow: 0 0 8px rgba(var(--cor-rgb), 0.65) !important;
}

/* Barras */
html[data-theme="light"] body:has(.game-shell) .status-fill,
html[data-theme="light"] body:has(.game-shell) .status-bar span {
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--cor) 68%, white),
    var(--cor)
  ) !important;
  box-shadow: 0 0 10px rgba(var(--cor-rgb), 0.3) !important;
}

/* Botão próximo dia */
html[data-theme="light"] body:has(.game-shell) #btnDia {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cor) 82%, white),
    var(--cor)
  ) !important;
  border-color: var(--cor) !important;
  box-shadow: 0 12px 30px rgba(var(--cor-rgb), 0.22) !important;
}

html[data-theme="light"] body:has(.game-shell) #btnDia:hover {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--cor) 70%, white),
    var(--cor)
  ) !important;
  box-shadow: 0 16px 34px rgba(var(--cor-rgb), 0.3) !important;
}

/* Evento / jornada */
html[data-theme="light"] body:has(.game-shell) .event-line::before {
  background: linear-gradient(
    90deg,
    rgba(var(--cor-rgb), 0.72),
    rgba(var(--cor-rgb), 0.2),
    transparent
  ) !important;
}

html[data-theme="light"] body:has(.game-shell) .event-marker {
  border-color: var(--cor) !important;
  box-shadow: 0 0 12px rgba(var(--cor-rgb), 0.35) !important;
}

html[data-theme="light"] body:has(.game-shell) .journey-pulse {
  background: var(--cor) !important;
  box-shadow: 0 0 10px rgba(var(--cor-rgb), 0.6) !important;
}
html[data-theme="light"] body:has(.game-shell) .journey-pulse::after {
  border-color: var(--cor) !important;
}

/* Perguntas */
html[data-theme="light"] body:has(> .card #titulo) > .card::before {
  background: linear-gradient(
    135deg,
    rgba(var(--cor-rgb), 0.24),
    rgba(var(--cor-rgb), 0.08) 48%,
    transparent 72%
  ) !important;
}

html[data-theme="light"] body:has(> .card #titulo) .opcao:hover {
  color: color-mix(in srgb, var(--cor) 72%, #172033) !important;
  background: rgba(var(--cor-rgb), 0.1) !important;
  border-color: rgba(var(--cor-rgb), 0.38) !important;
  box-shadow: 0 12px 28px rgba(var(--cor-rgb), 0.14) !important;
}

/* Final */
html[data-theme="light"] body:has(.final-screen) {
  --prolife-blue: var(--cor) !important;
  --prolife-blue-rgb: var(--cor-rgb) !important;
}

html[data-theme="light"] body:has(.final-screen) .score-core,
html[data-theme="light"] body:has(.final-screen) .score-ring,
html[data-theme="light"] body:has(.final-screen) .final-card,
html[data-theme="light"] body:has(.final-screen) .career-signature {
  border-color: rgba(var(--cor-rgb), 0.28) !important;
}

html[data-theme="light"] body:has(.final-screen) .score-core small,
html[data-theme="light"] body:has(.final-screen) .final-eyebrow,
html[data-theme="light"] body:has(.final-screen) .career-label,
html[data-theme="light"] body:has(.final-screen) .career-signature {
  color: var(--cor) !important;
}
\n\n/* ÚLTIMOS ACONTECIMENTOS — LIGHT */\nhtml[data-theme="light"] .recent-events {\n  border-top-color: rgba(74, 85, 104, .16);\n}\nhtml[data-theme="light"] .recent-events-head > span { color: #647083; }\nhtml[data-theme="light"] .recent-events-head small,\nhtml[data-theme="light"] .recent-events-empty,\nhtml[data-theme="light"] .recent-event-day { color: #8792a3; }\nhtml[data-theme="light"] .recent-event {\n  border-color: rgba(74, 85, 104, .13);\n  background: rgba(255, 255, 255, .42);\n  box-shadow: 0 7px 20px rgba(31, 41, 55, .045);\n}\nhtml[data-theme="light"] .recent-event-copy strong { color: #202734; }\nhtml[data-theme="light"] .recent-event-copy small { color: #718096; }\n
/* ÚLTIMOS ACONTECIMENTOS — PAINEL PRINCIPAL / LIGHT */
html[data-theme="light"] .recent-stage {
  border-color: rgba(74, 85, 104, .13);
}
html[data-theme="light"] .recent-stage .recent-events-empty {
  border-color: rgba(74, 85, 104, .15);
  background: linear-gradient(110deg, rgba(var(--cor-rgb), .06), rgba(255,255,255,.36));
}
html[data-theme="light"] .recent-stage .recent-events-empty strong { color: #283241; }
html[data-theme="light"] .recent-stage .recent-events-empty p,
html[data-theme="light"] .recent-count { color: #7a8698; }
html[data-theme="light"] .recent-stage .recent-event {
  border-color: rgba(74, 85, 104, .13);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--event-color) 7%, transparent), transparent 60%),
    rgba(255,255,255,.48);
  box-shadow: 0 8px 22px rgba(31,41,55,.045);
}
html[data-theme="light"] .recent-stage .recent-event-copy strong { color: #202734; }
html[data-theme="light"] .recent-stage .recent-event-copy small { color: #718096; }
html[data-theme="light"] .recent-stage .recent-event-day { color: #8b96a6; }


/* ===== CONTADOR DE DIA / LIGHT MODE ===== */
html[data-theme="light"] .career-day-counter {
  filter: drop-shadow(0 14px 26px rgba(54, 64, 78, .12));
}
html[data-theme="light"] .career-day-counter::before {
  background: radial-gradient(circle, color-mix(in srgb, var(--cor) 13%, #f8fafc) 0%, #eef1f5 64%, #e3e7ec 100%);
  border-color: color-mix(in srgb, var(--cor) 34%, transparent);
  box-shadow: inset 0 0 24px rgba(75, 88, 106, .08), 0 0 30px color-mix(in srgb, var(--cor) 10%, transparent);
}
html[data-theme="light"] .day-counter-core {
  background: linear-gradient(145deg, #f7f9fb, #e8ecf1);
  border-color: color-mix(in srgb, var(--cor) 42%, transparent);
  box-shadow: inset 0 0 20px color-mix(in srgb, var(--cor) 7%, transparent), 0 0 22px rgba(54,64,78,.08);
}
html[data-theme="light"] .day-counter-core strong { color: #202734; }
html[data-theme="light"] .day-counter-total { color: #748094; }
html[data-theme="light"] .day-counter-caption {
  color: color-mix(in srgb, var(--cor) 82%, #202734);
  background: #e9edf2;
  border-color: color-mix(in srgb, var(--cor) 30%, transparent);
  box-shadow: 0 5px 14px rgba(54,64,78,.10);
}


/* SOBRE — integração com o menu e tema claro */
html[data-theme="light"] .route-about {
  --route-color: #159b75 !important;
}