/* ── Reset & Base ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

:root {
  --azul-escuro:  #003366;
  --azul-medio:   #005599;
  --azul-claro:   #e8f0fe;
  --verde:        #198754;
  --vermelho:     #dc3545;
  --amarelo:      #ffc107;
  --cinza-fundo:  #f0f4f8;
  --branco:       #ffffff;
  --sombra:       0 2px 12px rgba(0,0,0,.12);
  --raio:         10px;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--cinza-fundo);
  margin: 0;
  color: #222;
  min-height: 100vh;
}

/* ── Navbar ───────────────────────────────────────────────── */
.navbar-app {
  background: var(--azul-escuro);
  padding: 0 1.5rem;
  height: 62px;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  position: sticky;
  top: 0;
  z-index: 1000;
}
.navbar-app .brand {
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.navbar-app .brand small {
  font-size: .72rem;
  font-weight: 400;
  opacity: .75;
  display: block;
}
.navbar-app .nav-tabs-app {
  display: flex;
  gap: .25rem;
  margin-left: auto;
}
.navbar-app .nav-tabs-app .tab-btn {
  border: none;
  background: transparent;
  color: rgba(255,255,255,.7);
  padding: .45rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: .85rem;
  transition: background .2s, color .2s;
}
.navbar-app .nav-tabs-app .tab-btn:hover,
.navbar-app .nav-tabs-app .tab-btn.active {
  background: rgba(255,255,255,.15);
  color: #fff;
}

/* ── Layout Principal ─────────────────────────────────────── */
.main-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

/* ── Seletor de Semana ────────────────────────────────────── */
.semana-selector {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1rem 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.semana-selector label {
  font-weight: 600;
  color: var(--azul-escuro);
  white-space: nowrap;
}
.semana-selector select {
  flex: 1;
  min-width: 220px;
  max-width: 400px;
  padding: .45rem .75rem;
  border: 1px solid #ccd;
  border-radius: 6px;
  font-size: .95rem;
}
.semana-selector .btn-nova-semana {
  margin-left: auto;
  white-space: nowrap;
}

/* ── Cards KPI ────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.kpi-card {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  border-top: 4px solid var(--azul-medio);
  transition: transform .15s;
}
.kpi-card:hover { transform: translateY(-2px); }
.kpi-card.verde  { border-top-color: var(--verde);    }
.kpi-card.verm   { border-top-color: var(--vermelho); }
.kpi-card.amar   { border-top-color: var(--amarelo);  }
.kpi-card .kpi-label {
  font-size: .78rem;
  color: #666;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.kpi-card .kpi-valor {
  font-size: 2rem;
  font-weight: 700;
  color: var(--azul-escuro);
  line-height: 1;
}
.kpi-card .kpi-icon {
  font-size: 1.4rem;
  opacity: .18;
  align-self: flex-end;
  margin-top: -2.5rem;
}

/* ── Grid 2 Colunas ───────────────────────────────────────── */
.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  .charts-grid { grid-template-columns: 1fr; }
}

/* ── Painel genérico ─────────────────────────────────────── */
.painel {
  background: var(--branco);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  padding: 1.25rem;
}
.painel .painel-titulo {
  font-size: .92rem;
  font-weight: 700;
  color: var(--azul-escuro);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.painel .painel-titulo i { color: var(--azul-medio); }

/* ── Abas internas ────────────────────────────────────────── */
.tab-section { display: none; }
.tab-section.active { display: block; }

/* ── Formulários ─────────────────────────────────────────── */
.form-inline-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: flex-end;
}
.form-inline-row .form-group {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.form-inline-row .form-group label {
  font-size: .78rem;
  font-weight: 600;
  color: #555;
}
.form-inline-row .form-group input,
.form-inline-row .form-group select,
.form-inline-row .form-group textarea {
  padding: .4rem .65rem;
  border: 1px solid #ccd;
  border-radius: 6px;
  font-size: .9rem;
}

/* ── Tabelas ─────────────────────────────────────────────── */
.tabela-app {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  margin-top: .5rem;
}
.tabela-app thead tr {
  background: var(--azul-escuro);
  color: #fff;
}
.tabela-app thead th {
  padding: .55rem .75rem;
  text-align: left;
  font-weight: 600;
}
.tabela-app tbody tr:nth-child(even) { background: var(--azul-claro); }
.tabela-app tbody td {
  padding: .5rem .75rem;
  border-bottom: 1px solid #e0e4ea;
}
.tabela-app tbody tr:hover { background: #d0e3ff; }
.tabela-app .btn-del {
  border: none;
  background: var(--vermelho);
  color: #fff;
  border-radius: 5px;
  padding: .2rem .55rem;
  cursor: pointer;
  font-size: .8rem;
}

/* ── Botões ──────────────────────────────────────────────── */
.btn-app {
  padding: .45rem 1.1rem;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  transition: opacity .15s, transform .1s;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.btn-app:hover  { opacity: .88; transform: translateY(-1px); }
.btn-app:active { transform: translateY(0); }
.btn-app.prim   { background: var(--azul-medio);  color: #fff; }
.btn-app.suc    { background: var(--verde);        color: #fff; }
.btn-app.peri   { background: var(--amarelo);      color: #222; }
.btn-app.dang   { background: var(--vermelho);     color: #fff; }
.btn-app.sm     { padding: .3rem .7rem; font-size: .8rem; }

/* ── Toast ───────────────────────────────────────────────── */
#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.toast-msg {
  background: var(--azul-escuro);
  color: #fff;
  padding: .65rem 1.1rem;
  border-radius: 8px;
  font-size: .88rem;
  box-shadow: var(--sombra);
  animation: fadeInUp .25s ease;
}
.toast-msg.erro { background: var(--vermelho); }
.toast-msg.suc  { background: var(--verde);    }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ── Gráficos ─────────────────────────────────────────────── */
.chart-wrap { position: relative; min-height: 220px; }

/* ── Badges ───────────────────────────────────────────────── */
.badge-ativo   { background: #d1fadf; color: #155724; padding: .2rem .55rem; border-radius: 20px; font-size:.78rem; font-weight:600; }
.badge-inativo { background: #fde8e8; color: #7a1c1c; padding: .2rem .55rem; border-radius: 20px; font-size:.78rem; font-weight:600; }

/* ── Responsivo navbar ────────────────────────────────────── */
@media (max-width: 600px) {
  .navbar-app .nav-tabs-app .tab-btn span { display: none; }
  .semana-selector { flex-direction: column; align-items: stretch; }
  .semana-selector .btn-nova-semana { margin-left: 0; }
}