/* Design system GVC Pack — estilo "DFF" adaptado pro azul da marca.
   Carregado DEPOIS do <style> de cada página, então sobrepõe os estilos comuns
   (nav, box, btn, badge, inputs, tabs…) sem mexer no que é específico de cada tela. */
:root{
  --bg:#f6f7fb;--surface:#fff;--surface-soft:#fafbfd;--border:#e7eaf0;
  --ink:#0b1426;--muted:#64748b;--subtle:#94a3b8;
  --brand:#1d4ed8;--brand-2:#1e40af;--accent:#0ea5e9;--accent-soft:#e0f2fe;
  --ok:#10b981;--warn:#f59e0b;--danger:#ef4444;--danger-soft:#fee2e2;
  --grad:linear-gradient(135deg,#1d4ed8 0%,#1e40af 100%);
  --sh-sm:0 1px 2px rgba(11,20,38,.04),0 1px 3px rgba(11,20,38,.03);
  --sh-md:0 4px 6px -1px rgba(11,20,38,.06),0 2px 4px -2px rgba(11,20,38,.04);
  --sh-lg:0 10px 25px -5px rgba(11,20,38,.10);
}
body{background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}

/* Topo vira um cartão */
.topbar{padding:14px 18px;background:var(--surface);border:1px solid var(--border);border-radius:16px;box-shadow:var(--sh-sm);margin-bottom:16px}

/* Menu em pílulas, ativa com gradiente */
.nav a{font-weight:600;font-size:13.5px;padding:9px 14px;border-radius:10px;border:1px solid var(--border);color:var(--muted);background:var(--surface);transition:all .15s}
.nav a:hover{color:var(--ink);background:#fff}
.nav a.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(29,78,216,.22)}
.out{background:var(--surface-soft);border:1px solid var(--border);color:var(--muted);border-radius:10px;padding:8px 14px}
.out:hover{background:#fff;color:var(--ink)}

/* Cartões arredondados com sombra */
.box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:20px 22px;box-shadow:var(--sh-sm)}

/* Inputs com foco azul-claro */
input,select,textarea{border:1px solid var(--border);border-radius:8px;font-size:14px;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(14,165,233,.14)}
label{font-weight:500;color:var(--muted)}

/* Botões com gradiente + hover */
.btn{border-radius:10px;font-weight:600;background:var(--grad);color:#fff;transition:all .15s}
.btn:hover{transform:translateY(-1px);box-shadow:var(--sh-md)}
.btn.ghost{background:var(--surface-soft);border:1px solid var(--border);color:var(--ink)}
.btn.ghost:hover{background:#fff;transform:none;box-shadow:none}
.btn:disabled{opacity:.5;transform:none;box-shadow:none}

/* Tabelas */
th{background:var(--surface-soft);font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);font-weight:600}
tr:hover td{background:#fafbfd}

/* Pílulas, KPIs, abas, toast, modais */
.badge{border-radius:99px;font-weight:600}
.stat,.kpi{border-radius:14px;box-shadow:var(--sh-sm)}
.tab{transition:all .15s}
.tab.on{background:var(--grad);color:#fff;border-color:transparent;box-shadow:0 2px 8px rgba(29,78,216,.18)}
.act{border-radius:8px;font-weight:600}
.modal-card,.modal{border-radius:16px}
.modal-card{box-shadow:var(--sh-lg)}
.toast{box-shadow:var(--sh-lg)}
.empty{color:var(--muted)}