/* =====================================================================
   UDI · Painel Interno — tema compartilhado
   Fonte única do tema escuro (cores, base e cabeçalho).
   Mudou uma cor aqui? Vale para todas as páginas que carregam este arquivo.

   Como usar numa página:
     <link rel="stylesheet" href="assets/theme.css">      (home, na raiz)
     <link rel="stylesheet" href="../assets/theme.css">   (páginas em subpasta)
   Coloque o <link> ANTES do <style> inline da página. Assim o estilo
   específico da página (componentes próprios) continua tendo prioridade.
   ===================================================================== */

/* ---- Tokens de cor (paleta oficial do painel) ---- */
:root{
  --bg:#0e1116;
  --surface:#171b22;
  --surface-2:#1f242d;
  --border:#2a303b;
  --text:#e8eaed;
  --text-muted:#9aa2ad;
  --accent:#3b82f6;      --accent-soft:#1e2a44;
  --green:#22c55e;       --green-soft:#14251a;
  --amber:#f59e0b;       --amber-soft:#2a2113;
  --red:#ef4444;         --red-soft:#2a1717;
  --purple:#8b5cf6;      --purple-soft:#211a33;
  --teal:#14b8a6;        --teal-soft:#122a28;
}

/* ---- Tema BRANCO (claro) ---- */
[data-theme="light"]{
  --bg:#f4f6f9;
  --surface:#ffffff;
  --surface-2:#eef1f5;
  --border:#d8dee6;
  --text:#1a1d23;
  --text-muted:#5b6673;
  --accent:#2f6fe0;      --accent-soft:#e5edfb;
  --green:#15a34a;       --green-soft:#e3f6ec;
  --amber:#c97a08;       --amber-soft:#fbeed6;
  --red:#dc2626;         --red-soft:#fbe6e6;
  --purple:#7c3aed;      --purple-soft:#efe9fd;
  --teal:#0d9488;        --teal-soft:#e0f5f2;
}

/* ---- Tema PRETO (OLED) ---- */
[data-theme="black"]{
  --bg:#000000;
  --surface:#0b0d10;
  --surface-2:#14171c;
  --border:#23262d;
  --text:#f2f3f5;
  --text-muted:#8b929c;
  --accent:#3b82f6;      --accent-soft:#16233d;
  --green:#22c55e;       --green-soft:#0f2016;
  --amber:#f59e0b;       --amber-soft:#241c10;
  --red:#ef4444;         --red-soft:#241313;
  --purple:#8b5cf6;      --purple-soft:#1b1530;
  --teal:#14b8a6;        --teal-soft:#0d2422;
}

/* ---- Seletor de tema (injetado por assets/theme-toggle.js) ---- */
.theme-switch{display:flex;justify-content:flex-end;gap:6px;margin-bottom:10px}
.theme-switch .theme-btn{
  background:var(--surface);border:1px solid var(--border);color:var(--text-muted);
  font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
}
.theme-switch .theme-btn:hover{color:var(--text);border-color:var(--text-muted)}
.theme-switch .theme-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}
@media print{ .theme-switch{display:none !important} }

/* ---- Reset ---- */
*{box-sizing:border-box;margin:0;padding:0}

/* ---- Base ---- */
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  padding:40px 20px;
}
.wrap{width:100%;max-width:920px;margin:0 auto}

/* ---- Cabeçalho / marca ---- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--border);
}
.brand{display:flex;align-items:center;gap:12px}
.brand .logo{
  width:46px;height:46px;border-radius:10px;background:#fff;
  display:flex;align-items:center;justify-content:center;padding:5px;flex-shrink:0;
}
.brand .logo img{width:100%;height:100%;object-fit:contain;display:block}
.brand .titles h2{font-size:16px;font-weight:600}
.brand .titles p{font-size:12px;color:var(--text-muted)}

/* ---- Botão "voltar ao painel" ---- */
.back{
  background:var(--surface);border:1px solid var(--border);color:var(--text-muted);
  padding:8px 14px;border-radius:8px;font-size:13px;text-decoration:none;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease,box-shadow .15s ease;
}
.back:hover{
  background:#3b82f6;border-color:#3b82f6;color:#fff;
  transform:translateY(-2px);box-shadow:0 6px 18px rgba(59,130,246,.4);
}