/* Identidade visual Data Join: mesma fonte (Inter), cores e estilo do site datajointi.com.br */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("inter.woff2") format("woff2");
}
:root{
  color-scheme:light;
  --navy:#10193a;--azul:#2f5fe0;--teal:#45a99a;--teal-ink:#2a7d70;
  --bg:#f7f9fc;--surface:#ffffff;--text:#10193a;--muted:#5b6478;--border:#e3e8f0;
  --accent:#2f5fe0;--accent-hover:#244fc4;--accent-ink:#ffffff;--accent-soft:#eaf0fd;
  --in:#14793a;--out:#bf3028;--warn:#9a6700;
  --in-bg:#e4f3e9;--out-bg:#fbe9e8;--warn-bg:#fdf1d6;--chip:#eef2f8;
  --err:#bf3028;--err-bg:#fbe9e8;--ok:#14793a;--ok-bg:#e4f3e9;
  --shadow:0 1px 2px rgba(16,25,58,.04),0 6px 20px rgba(16,25,58,.05);
  --header-bg:rgba(255,255,255,.94);
}
/* Tema: claro (padrão), escuro, ou automático (segue o Windows/celular). Escolha salva pelo botão "Tema". */
:root[data-theme="dark"]{
    --bg:#0b1124;--surface:#121a33;--text:#e8ecf6;--muted:#9aa4bd;--border:#243052;
    --accent:#6f93ff;--accent-hover:#87a5ff;--accent-ink:#0b1124;--accent-soft:#1b2750;
    --teal-ink:#6cc9b9;
    --in:#4cc27a;--out:#ff7b72;--warn:#e3b341;
    --in-bg:#15301f;--out-bg:#3a1b1b;--warn-bg:#3a2f12;--chip:#1b2443;
    --err:#ff7b72;--err-bg:#3a1b1b;--ok:#4cc27a;--ok-bg:#15301f;
    --shadow:0 1px 2px rgba(0,0,0,.3);
    --header-bg:rgba(18,26,51,.94);
    color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"]{
    --bg:#0b1124;--surface:#121a33;--text:#e8ecf6;--muted:#9aa4bd;--border:#243052;
    --accent:#6f93ff;--accent-hover:#87a5ff;--accent-ink:#0b1124;--accent-soft:#1b2750;
    --teal-ink:#6cc9b9;
    --in:#4cc27a;--out:#ff7b72;--warn:#e3b341;
    --in-bg:#15301f;--out-bg:#3a1b1b;--warn-bg:#3a2f12;--chip:#1b2443;
    --err:#ff7b72;--err-bg:#3a1b1b;--ok:#4cc27a;--ok-bg:#15301f;
    --shadow:0 1px 2px rgba(0,0,0,.3);
    --header-bg:rgba(18,26,51,.94);
    color-scheme:dark;
  }
}
/* Logo: versão clara ou escura conforme o tema */
.logo-escuro{display:none!important}
:root[data-theme="dark"] .logo-claro{display:none!important}
:root[data-theme="dark"] .logo-escuro{display:block!important}
@media (prefers-color-scheme:dark){
  :root[data-theme="auto"] .logo-claro{display:none!important}
  :root[data-theme="auto"] .logo-escuro{display:block!important}
}
/* Botão de tema */
.tema-btn{display:inline-flex;align-items:center;gap:6px}
.tema-btn svg{width:16px;height:16px;flex:none}
.rodape .tema-btn{margin-left:10px;color:var(--text);background:none;border:1px solid var(--border);border-radius:8px;font:inherit;font-size:13px;padding:4px 10px;cursor:pointer}
.rodape .tema-btn:hover{border-color:var(--accent);color:var(--accent)}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:var(--bg);color:var(--text);
  font:15px/1.5 "Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;display:flex;flex-direction:column;
}
a{color:var(--accent)}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Cabeçalho branco com o logo, como no site */
.topbar{background:var(--header-bg);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5;backdrop-filter:saturate(1.4) blur(8px)}
.topin{max-width:1040px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;justify-content:space-between}
.marca{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;min-width:0}
.marca img{display:block;height:40px;width:auto}
.marca .app{padding-left:14px;border-left:1px solid var(--border);font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-ink);white-space:nowrap}
.who{display:flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.who .user{font-weight:600;color:var(--text);margin-right:6px}
.who a,.who button{color:var(--text);background:none;border:1px solid var(--border);border-radius:8px;font:inherit;font-weight:500;cursor:pointer;text-decoration:none;padding:6px 12px}
.who a:hover,.who button:hover{border-color:var(--accent);color:var(--accent)}
.who form{margin:0}
@media (max-width:520px){.topin{flex-wrap:nowrap}.marca img{height:30px}.marca .app{display:none}.who{flex-wrap:nowrap}.who .user{display:none}.who a,.who button{padding:5px 9px;font-size:13px}.who .tema-btn span{display:none}}

/* Rodapé */
.rodape{border-top:1px solid var(--border);color:var(--muted);font-size:13px;text-align:center;padding:18px 16px;margin-top:auto}
.rodape a{color:inherit}

/* Rótulo pequeno em caixa alta (estilo "CONSULTORIA EM TI" do site) */
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--teal-ink)}

/* Telas de acesso: login, senha, instalação */
body.auth main{flex:1;display:flex;align-items:center;justify-content:center;padding:32px 16px}
.auth-wrap{width:100%;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:22px}
.auth-wrap>.logo-grande img{display:block;height:64px;width:auto;max-width:100%}
.box{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px 26px;box-shadow:var(--shadow);border-top:3px solid var(--teal)}
.box h1{font-size:22px;font-weight:700;letter-spacing:-.01em;margin:4px 0 4px}
.box p.sub{color:var(--muted);margin:0 0 18px;font-size:14px}
.box label{display:block;font-size:13px;font-weight:500;color:var(--muted);margin:14px 0 5px}
.box input{width:100%;font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 12px}
.box input:focus{border-color:var(--accent)}
.box button{margin-top:20px;width:100%;font:inherit;font-weight:600;background:var(--accent);color:var(--accent-ink);border:0;border-radius:8px;padding:12px;cursor:pointer}
.box button:hover{background:var(--accent-hover)}
.msg{margin:0 0 14px;padding:10px 12px;border-radius:8px;font-size:14px}.msg.err{background:var(--err-bg);color:var(--err)}.msg.ok{background:var(--ok-bg);color:var(--ok)}
.hint{font-size:12px;color:var(--muted);margin-top:4px}
code,pre{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px}
pre{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px;overflow:auto;white-space:pre-wrap;word-break:break-all}