*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family: Arial, Helvetica, sans-serif; background:#f5f7fb; color:#222; }
/* Sidebar base e layout principal definidos no bloco premium final */
.container { display:flex; min-height:100vh; align-items:flex-start; }

.main-content {
  flex:1;
  padding:24px 32px 32px;
}
/* Cabeçalho principal (card) */
.main-header-card {
  display:flex;
  align-items:center; /* centraliza verticalmente o conteúdo */
  justify-content:space-between;
  gap:20px;
  margin-bottom:18px;         /* antes 24px */
  padding:10px 18px;          /* antes 16px 20px */
  background: rgba(255,255,255,0.75);
  backdrop-filter: blur(14px);
  border:1px solid var(--bdr);
  border-radius:16px;
  box-shadow: 0 12px 28px rgba(15,23,42,0.08);
  backdrop-filter:blur(10px);
}

.main-header-left {
  display:flex;
  flex-direction:column;
  gap:4px;
}

.app-tagline {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-weight:700;
  color:var(--muted); /* cinza-azulado mais discreto */
  opacity:0.85;
}

.main-header-title {
  margin:0;
  font-size:20px;
  color:var(--ink);
}

.main-header-subtitle {
  margin:2px 0 0;
  font-size:13px;
  color:var(--muted);
}

.main-header-right {
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.empresa-selector {
  min-width:220px;
}

.empresa-selector label {
  font-size:12px;
  font-weight:600;        /* mais forte */
  color:var(--ink);       /* um pouco mais escuro */
  margin-bottom:4px;
  display:block;
}

/* Select de empresa com estilo mais “premium” */
#selectEmpresa {
  width:100%;
  padding:9px 12px;                            /* leve aumento na sensação de “pill” */
  border-radius:999px;
  border:1px solid var(--blue-300);
  font-size:13px;
  background:#ffffff;
  color:var(--ink);
}

/* Botão Sair no topo (visual) */
#btnLogout.btn-logout {
  width:auto;
  padding:8px 16px;
  border-radius:999px;
  border:none;
  background:linear-gradient(135deg, #1e4a6c, #3b82f6);
  color:#fff;
  font-size:13px;
  font-weight:600;
  box-shadow:0 10px 26px rgba(15,23,42,0.35);
  transition:transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}

#btnLogout.btn-logout:hover {
  transform:translateY(-1px);
  box-shadow:0 14px 32px rgba(15,23,42,0.4);
  filter:brightness(1.03);
}
.page { display:none; }
.page.active { display:block; }
/* legacy .login-section removed: replaced by a scoped block at the end of the file
   (uses #loginSection and .login-layout/.login-panel). */
label { display:block; margin:8px 0 4px; }
input, select, textarea, button { width:100%; padding:10px; border:1px solid #ccc; border-radius:6px; }

/* Corrigir radios e checkboxes (não devem ocupar 100% da largura) */
input[type="radio"],
input[type="checkbox"] {
  width: auto;
  padding: 0;
  margin: 0;
}
button { background:#1e4a6c; color:#fff; cursor:pointer; }
button:hover { filter:brightness(1.05); }




/* ===== Base do app ===== */
:root {
  --ink: #0f172a;
  --muted: #6b7280;

  --blue-50:  #eff6ff;
  --blue-100: #dbeafe;
  --blue-300: #93c5fd;
  --blue-600: #2563eb;
  --blue-800: #1e40af;

  --blue:     var(--blue-600);

  --red-100:    #fee2e2;
  --red-300:    #fca5a5;
  --red-800:    #991b1b;
  --orange-100: #ffedd5;
  --orange-300: #fdba74;
  --orange-800: #9a3412;

  --bdr: rgba(148,163,184,0.45);
}
h1,h2,h3,h4{ margin:0 0 10px; }
.muted{ color:var(--muted); }
.app-header{
  position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; background:#fff; border-bottom:1px solid var(--bdr);
}
.pages{ padding:16px; }