/* ══════════════════════════════════════════════════════════════════════
   tema.css — MODO ESCURO DO TORIX
   ══════════════════════════════════════════════════════════════════════ */

/* ── Botão Lua/Sol (vale nos dois temas) ─────────────────────────────── */
.tema-btn {
  width: 32px; height: 30px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; border: 1px solid var(--border, #dce4ee);
  background: var(--white, #ffffff); color: var(--text2, #4a5568);
  cursor: pointer; padding: 0;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
.tema-btn:hover { border-color: var(--text3, #8896a5); color: var(--text, #0a1628); }
.tema-btn:active { transform: scale(.94); }
.tema-btn:focus-visible { outline: 2px solid var(--blue, #1a6fdb); outline-offset: 2px; }

/* ── Paleta escura ───────────────────────────────────────────────────── */
/* Só no sistema principal: o index.html marca a raiz com .tema-app. As
   páginas de fora (entrar, assinatura, esqueci a senha) ficam no claro. */
html[data-tema="escuro"] { color-scheme: dark; }
html[data-tema="escuro"].tema-app {
  --blue: #3b82f6;
  --blue-dark: #2563eb;
  --blue-light: #15284a;
  --navy: #0a1628;
  --navy2: #13284d;
  --text: #e8edf5;
  --text2: #b3bfd1;
  --text3: #7f8da3;
  --border: #26344c;
  --border2: #1c283e;
  --bg: #0b1322;
  --bg2: #101a2c;
  --white: #141f33;
  --red: #e24b4a;
  --red-bg: #3a1b21;
  --red-text: #f4a6a6;
  --amber: #ef9f27;
  --amber-bg: #3a2b14;
  --amber-text: #f3c983;
  --green: #639922;
  --green-bg: #1b2f1a;
  --green-text: #a6d987;
  --gray-bg: #222a36;
  --gray-text: #c2c0b8;
  --muted: #7f8da3;
  --shadow: 0 2px 14px rgba(0,0,0,0.45);
}
html[data-tema="escuro"].tema-app body { background: var(--bg); color: var(--text); }

/* Troca suave só no momento do clique (tema.js liga por 320 ms). */
html.tema-trocando, html.tema-trocando body, html.tema-trocando .sidebar,
html.tema-trocando .barra-topo, html.tema-trocando .topbar,
html.tema-trocando .main, html.tema-trocando .page-content {
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}

/* ── Botão no escuro: o sol em dourado ───────────────────────────────── */
html[data-tema="escuro"] .tema-btn { color: #e6c65a; background: #101a2c; border-color: #26344c; }
html[data-tema="escuro"] .tema-btn:hover { color: #f3d77a; border-color: #5a4a1c; }

/* ══════════════════════════════════════════════════════════════════════
   AJUSTES FINOS DO MODO ESCURO
   O grosso das cores é convertido pelo tema.js (folhas e style="…").
   Aqui fica o que pede decisão de desenho, não conversão automática.
   ══════════════════════════════════════════════════════════════════════ */

/* Campos sem cor própria: o navegador, no escuro, pinta cinza-chumbo.
   Ficam no tom das superfícies (:where = não briga com nada mais específico). */
html[data-tema="escuro"].tema-app :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]), select, textarea) {
  background-color: var(--bg2); color: var(--text); border-color: var(--border);
}
html[data-tema="escuro"] ::placeholder { color: var(--text3); opacity: 1; }
html[data-tema="escuro"] input:disabled, html[data-tema="escuro"] select:disabled,
html[data-tema="escuro"] textarea:disabled { opacity: .6; }

/* Menu lateral: separado da área de trabalho por uma linha discreta. */
html[data-tema="escuro"] .sidebar { border-right: 1px solid var(--border2); }

/* Janelas: borda fina e fundo de trás mais fechado — no escuro a sombra
   sozinha não separa a janela da tela. */
html[data-tema="escuro"] .modal-overlay { background: rgba(2, 6, 14, 0.72); }
html[data-tema="escuro"] .modal { border: 1px solid var(--border); box-shadow: 0 24px 70px rgba(0,0,0,.6); }

/* Barras de rolagem desenhadas pelo sistema. */
html[data-tema="escuro"] .intim-rolagem { scrollbar-color: #3a4a66 #101a2c; }

/* Avisos (toast) no canto. */
html[data-tema="escuro"] .toast { box-shadow: 0 10px 30px rgba(0,0,0,.5); }

/* ── Zonas que continuam claras: o papel do Gerador de Documentos ── */
html[data-tema="escuro"] #doc-prev, html[data-tema="escuro"] .tema-papel {
  color-scheme: light;
  --white: #ffffff; --bg: #f0f4f8; --bg2: #f7f9fc; --text: #0a1628; --text2: #4a5568;
  --text3: #8896a5; --border: #dce4ee; --border2: #edf2f7; --blue: #1a6fdb;
}