:root {
  /* Tema claro + fundo mais escuro */
  --bg:#e5e7eb;           /* cinza claro (fundo da página) */
  --panel:#f9fafb;        /* cartões/painéis off-white */
  --text:#111827;         /* texto principal */
  --muted:#4b5563;        /* texto secundário */
  --border:#d1d5db;       /* borda suave */
  --primary:#2563eb;      /* azul */
  --primary-600:#1d4ed8;  /* azul hover */

  --nav-bg:#ffffff;
  --nav-link:#334155;
  --nav-link-hover:#0f172a;
  --nav-pill-bg:#f3f4f6;      /* pill normal */
  --nav-pill-border:#e5e7eb;  /* pill bordeado */
  --nav-pill-hover:#e5e7eb;   /* hover */
  --nav-pill-active:#111827;  /* ativo (manual, se usar .active) */
  --nav-pill-active-text:#ffffff;
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:var(--bg);
  color:var(--text);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}

/* Topbar */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 16px;
  background:#2563eb;             /* azul */
  border-bottom:1px solid #1d4ed8; /* azul mais escuro */
  position:sticky; top:0; z-index:5;
}

/* Navegação como pílulas à direita */
.nav{display:flex; gap:8px; flex-wrap:wrap}
.nav a{
  color:var(--nav-link);
  text-decoration:none;
}
.nav a.btn-nav{
  display:inline-block;
  padding:8px 12px;
  background:var(--nav-pill-bg);
  border:1px solid var(--nav-pill-border);
  border-radius:999px;
  box-shadow:0 1px 1px rgba(16,24,40,.04);
  transition:background .2s, color .2s, border-color .2s, transform .06s;
}
.nav a.btn-nav:hover{
  background:var(--nav-pill-hover);
  color:var(--nav-link-hover);
  text-decoration:none;
}
.nav a.btn-nav:active{ transform:translateY(1px) }
/* Se quiser marcar a página atual, adicione class="btn-nav active" no link correspondente */
.nav a.btn-nav.active{
  background:var(--nav-pill-active);
  color:var(--nav-pill-active-text);
  border-color:var(--nav-pill-active);
}

/* Container principal */
.container{
  max-width:1100px; margin:24px auto;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:0 2px 8px rgba(16,24,40,.06);
  padding:16px;
}

h1{margin:0 0 10px; font-size:22px}
p.muted{color:var(--muted); font-size:13px; margin:0 0 10px}

label{display:block; font-size:13px; color:var(--muted); margin:10px 0 6px}

input,select,textarea{
  width:100%; padding:10px 12px;
  background:#fff; color:var(--text);
  border:1px solid var(--border);
  border-radius:10px;
  outline:none;
}
input:focus,select:focus,textarea:focus{
  border-color:#c7d2fe; box-shadow:0 0 0 3px rgba(37,99,235,.15);
}

/* Botões */
.btn{
  display:inline-block;
  padding:10px 12px;
  background:var(--primary);
  border:1px solid var(--primary-600);
  border-radius:10px; color:#fff; cursor:pointer;
  box-shadow:0 1px 1px rgba(16,24,40,.08);
  transition:background .2s, transform .06s;
}
.btn:hover{background:var(--primary-600)}
.btn:active{transform:translateY(1px)}

.btn.gray{
  background:#f3f4f6;
  color:#0f172a;
  border:1px solid var(--border);
}
.btn.gray:hover{background:#e5e7eb}

/* Alertas / info */
.alert{
  background:#f8fafc;
  border:1px solid var(--border);
  padding:10px; border-radius:10px; margin-bottom:10px;
}

/* Tabelas */
.table-wrap{
  overflow:auto;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
}
table{width:100%; border-collapse:collapse; min-width:900px}
th,td{
  padding:12px; border-bottom:1px solid var(--border);
  text-align:left; font-size:14px;
}
th{color:#0f172a; background:#f3f4f6}
.actions a,.actions form{display:inline-block; margin-right:6px}

/* Layout responsivo de colunas */
.row{display:flex; gap:12px; flex-wrap:wrap}
.col-6{width:100%}
@media(min-width:800px){.col-6{width:calc(50% - 6px)}}

/* Cards (home/dashboard) */
.cards{display:grid; grid-template-columns:1fr; gap:12px}
@media(min-width:900px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{
  background:#fff; border:1px solid var(--border); border-radius:12px;
  padding:16px; box-shadow:0 1px 2px rgba(16,24,40,.05);
}
.card h3{margin:0 0 6px; font-size:16px}
.card p{margin:0; color:var(--muted); font-size:13px}

/* Badges de status */
.badge{display:inline-block;padding:6px 10px;border-radius:999px;font-size:13px;border:1px solid var(--border);background:#f8fafc}
.badge-blue {background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8}
.badge-red  {background:#fef2f2;border-color:#fecaca;color:#b91c1c}
.badge-green{background:#ecfdf5;border-color:#bbf7d0;color:#15803d}


/* LOGO-TOPBAR-PATCH */
.topbar { display:flex; align-items:center; justify-content:space-between; }
.topbar .left { display:flex; align-items:center; gap:12px; }
.topbar .logo img { display:block; height:28px; width:auto; }
@media (min-width: 768px){
  .topbar .logo img { height:32px; }
}