:root{
  --bg:#f5f7fb; --card:#ffffff; --muted:#475569;
  --text:#0f172a; --accent:#06b6d4; --accent2:#7c3aed;
  --good:#10b981; --warn:#f59e0b; --bad:#ef4444;
  /* usado para compensar o header fixo; o JS em partials.php ajusta isso */
  --container-pt:160px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);
  background:linear-gradient(180deg,#eef2ff, #fafbff 45%, #f5f7fb);
  overflow-x:hidden;
}

/* fundo “tech” */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(1000px 600px at 5% -10%, rgba(124,58,237,.12), transparent 60%),
    radial-gradient(800px 500px at 95% 10%, rgba(6,182,212,.10), transparent 60%),
    linear-gradient(#ffffff80,#ffffff80),
    repeating-linear-gradient(90deg, rgba(124,58,237,.06) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg, rgba(6,182,212,.06) 0 1px, transparent 1px 120px);
  backdrop-filter:saturate(1.15);
  animation:bgShift 18s ease-in-out infinite alternate;
}
@keyframes bgShift{ 0%{transform:translateY(0)} 100%{transform:translateY(-12px)} }

/* usa variável para não deixar o header sobrepor o conteúdo */
.container{
  max-width:1240px;
  margin:0 auto;
  padding: var(--container-pt) 24px 24px;
}

.card{
  background:var(--card);
  border:1px solid #e5e7eb;border-radius:18px;padding:20px;
  box-shadow:0 10px 30px rgba(2,6,23,.06), 0 1px 0 rgba(2,6,23,.04);
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.card:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 50px rgba(2,6,23,.12), 0 4px 0 rgba(2,6,23,.06);
  border-color:#dbeafe;
}

.row{display:flex;gap:16px;flex-wrap:wrap}
.col{flex:1 1 300px;min-width:300px}

h1,h2,h3{margin:0 0 12px;color:#0b1220}
label,p,table{color:var(--text)}

a{color:var(--accent);text-decoration:none}
a.btn, button{
  background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;border:none;
  padding:10px 16px;border-radius:12px;cursor:pointer;font-weight:700;
  box-shadow:0 8px 20px rgba(124,58,237,.25);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
a.btn:hover,button:hover{transform:translateY(-1px);filter:saturate(1.1)}
a.btn.secondary,button.secondary{ background:#0ea5e9; box-shadow:0 8px 20px rgba(14,165,233,.2) }

input,select{
  background:#fff;border:1px solid #e2e8f0;color:#0f172a;border-radius:10px;padding:10px;width:100%;
  box-shadow:0 1px 0 rgba(2,6,23,.04);
}
.filters{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}

.kpi{display:flex;align-items:center;justify-content:space-between}
.kpi .value{font-size:28px;font-weight:800}
.kpi .label{color:var(--muted)}

table{width:100%;border-collapse:collapse;border-radius:12px;overflow:hidden}
th,td{padding:10px;border-bottom:1px solid #eef2f7}
th{text-align:left;color:#1f2937;background:#f6f7fb}
tr:hover{background:#f9fafc}

nav.menu{display:flex;gap:10px;margin:12px 0 0}
footer{color:#64748b;font-size:12px;margin-top:24px;text-align:center}
.login{max-width:440px;margin:10vh auto}

/* Branding (login) */
.brand{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.brand .logo{
  width:72px;height:72px;object-fit:contain;border-radius:12px;
  background:#fff;border:1px solid #e5e7eb;box-shadow:0 10px 28px rgba(2,6,23,.10);
  image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;
}
.brand .title{font-weight:900;letter-spacing:.2px;font-size:26px}
.brand .subtitle{font-size:12px;color:#64748b;margin-top:2px}

/* Header fixo com glass */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:999;
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.7));
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom:1px solid #e2e8f0;
}
.topbar-inner{
  max-width:1240px;margin:0 auto;padding:12px 24px;
  display:flex;align-items:center;justify-content:space-between
}
.topbar-title{
  display:flex;align-items:center;gap:12px;color:#0b1220;
  font-weight:800;letter-spacing:.2px
}
.topbar-title .logo{
  width:48px;height:48px;object-fit:contain;border-radius:10px;
  background:#fff;border:1px solid #e5e7eb;box-shadow:0 6px 18px rgba(2,6,23,.08);
  image-rendering:-webkit-optimize-contrast;image-rendering:crisp-edges;
}
.topbar-right{display:flex;align-items:center;gap:8px}
.badge{padding:6px 10px;border-radius:999px;background:#ecfeff;color:#155e75;font-weight:700;font-size:12px;border:1px solid #cffafe}

/* Gráficos */
.chart-box{position:relative;height:380px}
.chart-box.small{height:260px}
.chart-box canvas{position:absolute;inset:0;width:100% !important;height:100% !important}

/* Responsivo */
@media (max-width:900px){
  .topbar-title .logo{width:38px;height:38px}
}
@media (max-width:640px){
  .brand .logo{width:56px;height:56px}
  /* fallback maior em telas muito pequenas caso o JS não rode */
  :root{ --container-pt: 190px; }
}