/* Light mode da operação. A escolha nasce em Você e este arquivo só ajusta a
   casca: canvases de criação, vídeo, mapas e prévias continuam com a direção
   própria. Superfícies claras são sólidas, com contraste e sombra discretos. */
body.langris-identidade.produto-operacional[data-op-tema="claro"] {
  --id-bg: #f6f7f9;
  --id-panel: #ffffff;
  --id-surface: #ffffff;
  --id-surface-soft: #eef1f5;
  --id-ink: #17191f;
  --id-muted: #626a79;
  --id-line: #e1e5eb;
  --id-input-line: #7f8998;
  --id-accent: #3155d9;
  --id-accent-hover: #2748bd;
  --id-accent-text: #2748bd;
  --id-soft: #edf1ff;
  --id-shadow: 0 10px 30px rgba(26, 35, 58, .07);
  background: var(--id-bg);
  color: var(--id-ink);
  color-scheme: light;
}

body.produto-operacional[data-op-tema="claro"] .op-sidebar {
  background: rgba(255, 255, 255, .92);
  border-bottom-color: var(--id-line);
  box-shadow: 0 1px 0 rgba(16, 24, 42, .02);
  backdrop-filter: saturate(150%) blur(18px);
}
body.produto-operacional[data-op-tema="claro"] .op-sidebar nav button:hover { background: #f2f4f7; }
body.produto-operacional[data-op-tema="claro"] .op-sidebar nav button.ativo {
  background: var(--id-soft); color: var(--id-accent-text); box-shadow: inset 0 0 0 1px rgba(49, 85, 217, .08);
}

body.produto-operacional[data-op-tema="claro"] :is(
  .op-panel, .op-stat, .op-library-card, .op-company-context, .op-radar-world,
  .op-agenda, .op-voce__cartao, .rp-lateral, .modal__caixa, .op-dialog
) {
  background: var(--id-panel);
  border-color: var(--id-line);
  box-shadow: 0 1px 2px rgba(16, 24, 42, .035);
}
body.produto-operacional[data-op-tema="claro"] :is(.op-panel, .op-dialog, .modal__caixa) :is(input, select, textarea),
body.produto-operacional[data-op-tema="claro"] :is(.op-field, .op-inline-form) :is(input, select, textarea) {
  background: #fff; color: var(--id-ink); border-color: var(--id-input-line);
}
body.produto-operacional[data-op-tema="claro"] :is(.op-primary, .op-btn-primary) {
  background: var(--id-accent); border-color: var(--id-accent); color: #fff;
  box-shadow: none;
}
body.produto-operacional[data-op-tema="claro"] :is(.op-primary, .op-btn-primary):hover:not(:disabled) {
  background: var(--id-accent-hover); border-color: var(--id-accent-hover); transform: none;
}
body.produto-operacional[data-op-tema="claro"] :is(.op-outline, .op-upload, .op-botao-icone) {
  background: #fff; border-color: var(--id-line); color: var(--id-ink);
}
body.produto-operacional[data-op-tema="claro"] :is(.op-outline, .op-upload, .op-botao-icone):hover:not(:disabled) {
  background: #f3f5f8; border-color: #cbd1dc;
}
body.produto-operacional[data-op-tema="claro"] .op-toast {
  background: #fff; color: var(--id-ink); border-color: var(--id-line);
  box-shadow: 0 14px 42px rgba(20, 28, 48, .12);
}

/* Agenda e Pauta usam os mesmos níveis de superfície das demais telas. */
body.produto-operacional[data-op-tema="claro"] .ag-workspace[data-agenda-vista-atual] {
  --ag-surface: #fff; --ag-soft: #f1f3f6; --ag-line: var(--id-line);
  --ag-ink: var(--id-ink); --ag-muted: var(--id-muted); --ag-accent: var(--id-accent);
}
body.produto-operacional[data-op-tema="claro"] .ag-workspace .op-month-panel,
body.produto-operacional[data-op-tema="claro"] .ag-workspace .rp-lateral { background: #fff; }
body.produto-operacional[data-op-tema="claro"] .ag-workspace .op-month-day.hoje {
  background: color-mix(in srgb, var(--id-accent) 4%, #fff);
}
body.produto-operacional[data-op-tema="claro"] .rp-ig-quando input { color-scheme: light; }
body.produto-operacional[data-op-tema="claro"] .rp-lateral :is(
  .rp-texto, .rp-ig-legenda textarea, .rp-ig-quando input, .rp-ig-ajuste__grade input
) {
  background: #fff; color: var(--id-ink); border-color: var(--id-input-line);
}

/* Só o palco da mídia conserva controles nativos escuros. Formulários e o
   chrome ao redor seguem o tema claro, sem afetar a arte do cliente. */
body.produto-operacional[data-op-tema="claro"] :is(
  .op-radar-canvas-wrap, radar-globe, .me-stage,
  .clip-midia, .clip-corte__video, .clip-agendar__mini
) { color-scheme: dark; }

/* Gerar IA é uma bancada imersiva inteira: o módulo contém texto branco e
   chrome preto próprios, então seus tokens também precisam continuar escuros.
   A navegação que o envolve permanece clara. */
body.produto-operacional[data-op-tema="claro"] .mg {
  --mg-bg: #030304;
  --mg-surface: #101012;
  --mg-soft: #19191c;
  --mg-ink: #f7f7f5;
  --mg-muted: #99999f;
  --mg-line: rgba(255, 255, 255, .11);
  --mg-accent: var(--mg-live);
  --mg-accent-text: #d9ff9e;
  --mg-erro: #ff9b8f;
  background: var(--mg-bg); color: var(--mg-ink); color-scheme: dark;
}

@media (max-width: 640px) {
  body.produto-operacional[data-op-tema="claro"] .op-sidebar { background: rgba(255, 255, 255, .96); }
}

@media (prefers-reduced-transparency: reduce) {
  body.produto-operacional[data-op-tema="claro"] .op-sidebar { background: #fff; backdrop-filter: none; }
}