:root {
  color-scheme: light;
}

/* Os fallbacks nos estilos preservam a paleta clara de cada componente. */
:root[data-tema="escuro"] {
  color-scheme: dark;
  --bg: #0f1724;
  --bg-deep: #111e30;
  --panel: rgba(24, 36, 54, 0.94);
  --panel-strong: #182436;
  --panel-alt: #203047;
  --surface-2: #203047;
  --ink: #e6edf7;
  --muted: #a7b6cb;
  --line: #34445c;
  --line-strong: #526581;
  --brand: #0E7BE6;
  --brand-dark: #0B66C2;
  --brand-ink: #83c5ff;
  --brand-heading: #a4d4ff;
  --brand-deep: #a4d4ff;
  --brand-soft: #1d3652;
  --brand-soft-2: #172d45;
  --accent-warm-ink: #f4ce79;
  --accent-success-ink: #89dfad;
  --accent-success-soft: #183b30;
  --shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.3);

  --tema-fundo: #0f1724;
  --tema-painel: #182436;
  --tema-painel-translucido: rgba(24, 36, 54, 0.96);
  --tema-superficie: #203047;
  --tema-texto: #e6edf7;
  --tema-suave: #a7b6cb;
  --tema-borda: #34445c;
  --tema-azul-fundo: #1d3652;
  --tema-azul-texto: #a4d4ff;
  --tema-azul-borda: #40678a;
  --tema-verde-fundo: #183b30;
  --tema-verde-texto: #89dfad;
  --tema-verde-borda: #32664d;
  --tema-vermelho-fundo: #44252e;
  --tema-vermelho-texto: #ffaaa9;
  --tema-vermelho-borda: #82444d;
  --tema-amarelo-fundo: #40351f;
  --tema-amarelo-texto: #f4ce79;
  --tema-amarelo-borda: #7a6332;
  --tema-roxo-fundo: #322a4b;
  --tema-roxo-texto: #cdb8ff;
  --tema-roxo-borda: #605084;
  --tema-ciano-fundo: #193943;
  --tema-ciano-texto: #8ad7e7;
  --text-secondary: var(--muted);
  --text-muted: var(--muted);
  --danger: var(--tema-vermelho-texto);
  --error: var(--tema-vermelho-texto);
  --success: var(--tema-verde-texto);
  --warning: var(--tema-amarelo-texto);
}

.tema-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-width: 44px;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-strong);
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.tema-botao:hover { background: var(--brand-soft); }
.tema-botao:focus-visible { outline: 2px solid var(--brand-ink, var(--brand)); outline-offset: 3px; }
.tema-icone { width: 20px; height: 20px; flex-shrink: 0; }
.floating-sidebar > .tema-botao { width: 100%; flex-shrink: 0; }
.floating-sidebar.collapsed > .tema-botao { display: inline-flex !important; padding: 10px 0; }
.floating-sidebar.collapsed .tema-rotulo { display: none; }
.auth-form-panel > .tema-botao { align-self: flex-end; margin-bottom: 16px; }
.mobile-top-bar > .tema-botao { margin-left: auto; margin-right: 8px; border: 0; padding: 10px; }
.mobile-top-bar .tema-rotulo { display: none; }

/* Botões preenchidos e avisos precisam de fundo forte e texto claro. */
:root[data-tema="escuro"] :is(.aviso, .toast, .video-frame) { background: #203047; }
:root[data-tema="escuro"] .aviso-ok { background: #20583c; }
:root[data-tema="escuro"] .aviso-alerta { background: #73531c; }
:root[data-tema="escuro"] .aviso-erro { background: #822e3a; }
:root[data-tema="escuro"] :is(input, textarea, select) { color: var(--ink); }
:root[data-tema="escuro"] ::placeholder { color: var(--muted); opacity: 1; }
:root[data-tema="escuro"] .mobile-hamburger span { background: var(--ink); }
:root[data-tema="escuro"] :is(#sidebar-toggle-btn, .fcv2-toggle) { color: var(--ink); }
:root[data-tema="escuro"] :is(.sidebar-brand-logo, .auth-logo, .mobile-top-bar-logo) { filter: none; }
:root[data-tema="escuro"] .fcv2-shell .study-card {
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2) !important;
}

@media (max-width: 900px) {
  /* Recolher o menu no desktop não pode encolher o conteúdo no celular. */
  .app-shell.sidebar-collapsed { grid-template-columns: minmax(0, 1fr); }
}