/* public/css/style.css — painel do Mamãozinho.
 *
 * Tema escuro da casa (mesmos tokens da TESOURARIA/PANORAMA e do Agente Contador,
 * alinhados em 2026-09-11). Os nomes de classe são os mesmos de antes: as views
 * EJS não mudaram, só a pele.
 */
:root {
  --fundo:#0e1117; --panel:#171b21; --panel2:#1f242c; --raise:#222833;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --txt:#e9eef5; --muted:#9aa6b8; --hint:#67738a;
  --ok:#3fb968; --bad:#e7564f; --warn:#e8a13a; --azul:#4d92e0; --roxo:#a78bfa;
  --r:14px;
}

* { box-sizing:border-box; }

body {
  margin:0;
  background:var(--fundo);
  color:var(--txt);
  font:15px/1.55 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
a { color:var(--azul); text-decoration:none; }
h1,h2,h3 { letter-spacing:-.2px; margin:0 0 12px; }
h1 { font-size:21px; font-weight:600; }

.container { max-width:1100px; margin:0 auto; padding:22px 20px; }

/* ---------- topo: faixa da marca + barra ---------- */
.topo {
  background:var(--panel);
  color:var(--txt);
  padding:11px 20px;
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  border-top:3px solid transparent;
  border-image:linear-gradient(90deg,#2B8FD6 0 50%,#FFD400 50% 100%) 1;
  position:sticky; top:0; z-index:5;
}
.topo .logo { font-weight:600; font-size:16px; display:flex; align-items:center; gap:9px; }
.topo nav { display:flex; gap:4px; flex-wrap:wrap; }
.topo nav a {
  color:var(--muted); margin-right:0; padding:7px 12px;
  border-radius:9px; font-size:14px; font-weight:500; transition:.15s;
}
.topo nav a:hover { background:var(--panel2); color:var(--txt); }
.topo nav a.ativo { background:var(--raise); color:#fff; }
.role { color:var(--hint); font-size:12px; }

/* ---------- login ---------- */
.tela-login { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:20px; }
.form-login {
  background:var(--panel); padding:28px; border-radius:var(--r);
  border:1px solid var(--line); box-shadow:0 20px 60px rgba(0,0,0,.45);
  width:340px; max-width:100%;
}
.form-login h1 { text-align:center; font-size:19px; }
.form-login label { display:block; margin-bottom:14px; font-size:13px; color:var(--muted); }
.form-login input {
  width:100%; margin-top:6px; padding:11px 13px;
  border:1px solid var(--line2); border-radius:10px;
  background:var(--panel2); color:var(--txt); font:inherit;
}
.form-login input:focus { outline:1.5px solid var(--azul); outline-offset:1px; border-color:transparent; }
.form-login button {
  width:100%; padding:12px; background:var(--azul); color:#fff;
  border:none; border-radius:10px; font-size:15px; font-weight:600; cursor:pointer;
}
.form-login button:hover { filter:brightness(1.08); }

.erro {
  background:rgba(231,86,79,.15); color:#f2a09b;
  border:1px solid rgba(231,86,79,.35);
  padding:10px 12px; border-radius:10px; margin-bottom:14px; font-size:13.5px;
}

/* ---------- KPIs ---------- */
.kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin:18px 0; }
.kpi {
  background:var(--panel); padding:16px 18px; border-radius:var(--r);
  border:1px solid var(--line); transition:.18s;
}
.kpi:hover { border-color:var(--line2); transform:translateY(-2px); }
.kpi .num { font-size:27px; font-weight:600; color:#fff; letter-spacing:-.4px; display:block; }
.kpi .lbl { color:var(--muted); font-size:12.5px; }

/* ---------- tabelas ---------- */
table {
  width:100%; border-collapse:collapse; background:var(--panel);
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  font-size:13.5px;
}
th, td { padding:9px 11px; text-align:left; border-bottom:1px solid var(--line); }
th {
  background:var(--panel2); color:var(--muted); font-weight:500;
  font-size:12px; text-transform:uppercase; letter-spacing:.03em;
}
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:rgba(255,255,255,.02); }

.badge {
  display:inline-block; background:rgba(231,86,79,.18); color:#f2a09b;
  border:1px solid rgba(231,86,79,.35);
  border-radius:999px; padding:2px 9px; font-size:11px; font-weight:700; margin-left:4px;
}
.oculto { display:none; }

/* ---------- botões ---------- */
.btn {
  display:inline-block; padding:9px 15px; background:var(--azul); color:#fff;
  border:0; border-radius:9px; font:inherit; font-weight:600; font-size:13.5px;
  cursor:pointer; text-decoration:none; transition:.15s;
}
.btn:hover { filter:brightness(1.08); }
.btn-danger { background:var(--bad); }
.btn-outline { background:var(--panel2); color:var(--txt); border:1px solid var(--line2); }
.btn-outline:hover { border-color:var(--azul); filter:none; }

/* ---------- conversa ---------- */
.thread {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:16px; max-height:60vh; overflow-y:auto;
}
.msg { padding:9px 12px; margin:7px 0; border-radius:12px; max-width:75%; font-size:14px; }
.msg.cliente { background:var(--panel2); margin-right:auto; border:1px solid var(--line); }
.msg.bot     { background:rgba(77,146,224,.16); margin-left:auto; border:1px solid rgba(77,146,224,.3); }
.msg.humano  { background:rgba(167,139,250,.14); margin-left:auto; border:1px dashed rgba(167,139,250,.45); }
.msg .ts { font-size:11px; color:var(--hint); margin-top:3px; }

/* scroll no tom do tema */
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--line2); border-radius:8px; border:2px solid var(--panel); }
::-webkit-scrollbar-thumb:hover { background:var(--hint); }

@media (max-width:600px) {
  .topo { padding:10px 14px; }
  .container { padding:16px 14px; }
  .msg { max-width:90%; }
}