/* ═══ 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: #12171f; --surface: #1a212b; --surface-2: #212936; --surface-3: #2a3444; --border: #2b3647; --border-strong: #3d4c63;
      --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: #12161f; --surface: #1a202b; --surface-2: #212836; --surface-3: #2a3344; --border: #2b3447; --border-strong: #3d4a63;
      --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="apropriacao"] {
      --bg: #1b1816; --surface: #26221f; --surface-2: #302a27; --surface-3: #3d3631; --border: #3f3833; --border-strong: #594e47;
      --accent: #e09766; --accent-strong: #f6c09c; --accent-soft: #473122; --accent-border: #785238;
      --ink: #1f150e; --ink-2: #332217; --ink-line: #463224; --ink-fg: #c8b2a3; --ink-fg-2: #ad9280; --ink-icon: #f8c9aa;
    }
    :root[data-tema="escuro"][data-modulo="medicoes"] {
      --bg: #161b18; --surface: #1f2622; --surface-2: #27302b; --surface-3: #313d37; --border: #333f39; --border-strong: #475950;
      --accent: #66e0a3; --accent-strong: #9cf6c9; --accent-soft: #224735; --accent-border: #387858;
      --ink: #0e1f16; --ink-2: #173325; --ink-line: #244635; --ink-fg: #a3c8b5; --ink-fg-2: #80ad96; --ink-icon: #aaf8d1;
    }
    :root[data-tema="escuro"][data-modulo="vendor"] {
      --bg: #101a19; --surface: #172423; --surface-2: #1e2f2d; --surface-3: #283d3a; --border: #2a3f3c; --border-strong: #3d5a56;
      --accent: #3fd0bd; --accent-strong: #86e6d9; --accent-soft: #12403b; --accent-border: #22726a;
      --ink: #071a18; --ink-2: #0e2d2a; --ink-line: #17413d; --ink-fg: #a3c9c4; --ink-fg-2: #7fb0aa; --ink-icon: #7fe3d6;
    }
    :root[data-tema="escuro"][data-modulo="mologa"] {
      --bg: #161a1b; --surface: #1f2526; --surface-2: #272f30; --surface-3: #313b3d; --border: #333d3f; --border-strong: #475659;
      --accent: #66cce0; --accent-strong: #9ce7f6; --accent-soft: #224147; --accent-border: #386d78;
      --ink: #0e1c1f; --ink-2: #172e33; --ink-line: #244046; --ink-fg: #a3c2c8; --ink-fg-2: #80a5ad; --ink-icon: #aaebf8;
    }
    :root[data-tema="escuro"][data-modulo="colaboradores"] {
      --bg: #1a1013; --surface: #241419; --surface-2: #2c1820; --surface-3: #3a2028; --border: #3a2028; --border-strong: #5c2140;
      --accent: #e8749f; --accent-strong: #f2a0c0; --accent-soft: #3a2028; --accent-border: #7f2457;
      --ink: #12070c; --ink-2: #1e0f16; --ink-line: #331a24; --ink-fg: #dba9c1; --ink-fg-2: #bd7fa0; --ink-icon: #f2a8cc;
    }
    :root[data-tema="escuro"][data-modulo="plataforma"],
    :root[data-tema="escuro"][data-modulo="empresa"] {
      --bg: #121a1f; --surface: #1a252b; --surface-2: #212f36; --surface-3: #2a3b44; --border: #2b3d47; --border-strong: #3d5563;
      --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; }