/* ═══ MODO ESCURO ═══════════════════════════════════════════════════════════════════
       html[data-tema="escuro"] (tema.js; a escolha fica no navegador). Tudo no sistema já é feito com estas variáveis, então
       trocar o tema é trocar os valores — e, como são "registradas" (@property), o navegador FUNDE claro→escuro em ~1 s,
       sem corte. Cada módulo tem a sua versão escura (o tom de cada um continua reconhecível). Cor nova? Use variável,
       nunca hexadecimal solto, ou ela não acompanha o tema. */
    :root[data-tema="escuro"] {
      color-scheme: dark;
      --bg: #12131f; --surface: #1a1c2b; --surface-2: #212436; --surface-3: #2a2e44; --border: #2b2f47; --border-strong: #3d4363;
      --text: #eceef8; --text-dim: #b8bdd6; --text-mut: #9298b8; --data: #8b91b3;
      --accent: #7466e0; --accent-strong: #a89cf6; --accent-soft: #252247; --accent-border: #3e3878;
      --ok: #6fdca4; --ok-bg: #13382a; --ok-fill: #2fb578; --ok-soft: #0f2a20;
      --warn: #f2b85a; --warn-bg: #3d2c0b; --warn-fill: #e08a1a; --warn-soft: #2b2009;
      --danger: #ff9990; --danger-bg: #43191a; --danger-fill: #ef5a4f; --danger-soft: #2d1414;
      --info: #92b8ff; --info-bg: #17294f; --info-fill: #4a83f0; --info-soft: #111d38;
      --violet: #c6a9ff; --violet-bg: #2e1f55; --violet-fill: #9a63f0; --violet-soft: #221741;
      --ink: #0f0e1f; --ink-2: #1a1733; --ink-line: #292446; --ink-fg: #a3a9c8; --ink-fg-2: #8087ad; --ink-icon: #b4aaf8;
      --shadow: 0 1px 2px rgba(0, 0, 0, .35);
    }
    :root[data-tema="escuro"][data-modulo="fd"] {
      --bg: #10151d; --surface: #171e29; --surface-2: #1e2734; --surface-3: #263142; --border: #2a3547; --border-strong: #3a4960;
      --accent: #5f86bd; --accent-strong: #98b7e0; --accent-soft: #1a2a40; --accent-border: #34507a;
      --ink: #0b121d; --ink-2: #172234; --ink-line: #243449; --ink-fg: #9dacc4; --ink-fg-2: #7e8fa9; --ink-icon: #a6bddb;
    }
    :root[data-tema="escuro"][data-modulo="custos"] {
      --bg: #071531; --surface: #0d2149; --surface-2: #122a59; --surface-3: #193568; --border: #1f4380; --border-strong: #315fa8;
      --accent: #3b8bea; --accent-strong: #84b9fc; --accent-soft: #10295a; --accent-border: #26599f;
      --ink: #040f30; --ink-2: #0a1c48; --ink-line: #123069; --ink-fg: #9fbdeb; --ink-fg-2: #7c9fd9; --ink-icon: #86bcfb;
    }
    :root[data-tema="escuro"][data-modulo="plataforma"] {
      --bg: #0e171c; --surface: #152029; --surface-2: #1b2a34; --surface-3: #243440; --border: #253843; --border-strong: #35505f;
      --accent: #2f8db5; --accent-strong: #6cc0e3; --accent-soft: #15303d; --accent-border: #2a5670;
      --ink: #08181f; --ink-2: #102a38; --ink-line: #1c3a4b; --ink-fg: #9db8c9; --ink-fg-2: #7d9bb0; --ink-icon: #8fc7e0;
    }
    /* tela de login no escuro: as manchas de fundo escurecem junto */
    html[data-tema="escuro"] .lg-fundo .a { background: #1b4a66; }
    html[data-tema="escuro"] .lg-fundo .b { background: #2a3d78; }
    html[data-tema="escuro"] .lg-fundo i { opacity: .5; }
    /* o e-mail de exemplo continua com cara de e-mail (papel branco) — é o que o destinatário vai ver */
    html[data-tema="escuro"] .me-preview { color-scheme: light; }

    /* modo claro/escuro: interruptor pequeno no rodapé do menu, acima de "Módulos" (a bolinha desliza; sol de um lado, lua do outro) */
    .sidebar-footer { display: flex; flex-direction: column; align-items: stretch; }
    .tema-toggle { align-self: center; margin: 2px 0 4px; padding: 4px; border: 0; background: none; cursor: pointer; border-radius: 999px; }
    .tt-trilho { position: relative; display: block; width: 42px; height: 22px; border-radius: 999px; background: var(--ink-2); box-shadow: inset 0 0 0 1px var(--ink-line); transition: background .6s ease; }
    .tt-trilho svg { position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; color: var(--ink-fg-2); transition: color .5s, opacity .5s; }
    .tt-sol { left: 5px; } .tt-lua { right: 5px; }
    .tt-bola { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ink-fg-hi); box-shadow: 0 1px 3px rgba(0, 0, 0, .4); transition: transform .6s var(--ease); }
    html[data-tema="escuro"] .tt-bola { transform: translateX(20px); }
    .tt-trilho svg { color: var(--ink-icon); opacity: .85; }      /* os dois ícones ficam nas pontas; a bolinha cobre o do tema atual */
    .tema-toggle:hover .tt-trilho { box-shadow: inset 0 0 0 1px var(--ink-icon); }
    .tema-toggle:focus-visible { outline: 2px solid var(--ink-icon); outline-offset: 1px; }