:root {
  --act-azul: #0d3b66;
  --act-azul-claro: #145da0;
  --act-fundo: #f4f6f9;
}

html, body {
  height: 100%;
}

body {
  background-color: var(--act-fundo);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

/* ---------- Layout geral (topbar + sidebar + conteúdo + rodapé) ---------- */

.app-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.app-topbar {
  background-color: var(--act-azul);
  min-height: 56px;
}

.app-body {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.app-sidebar {
  width: 240px;
  flex-shrink: 0;
  background-color: #ffffff;
  border-right: 1px solid #e3e6ea;
}

.app-sidebar-offcanvas {
  width: 240px;
  background-color: var(--act-azul);
}

.app-sidebar-offcanvas .offcanvas-header,
.app-sidebar-offcanvas .offcanvas-title {
  color: #fff;
}

.app-content {
  flex: 1 1 auto;
  padding: 1.25rem;
  min-width: 0;
}

.app-footer {
  background-color: #fff;
  border-top: 1px solid #e3e6ea;
}

/* ---------- Navegação lateral ---------- */

.app-nav {
  padding-top: 0.75rem;
}

.app-nav .nav-link {
  color: #333;
  padding: 0.6rem 1.1rem;
  border-left: 3px solid transparent;
}

.app-sidebar-offcanvas .app-nav .nav-link {
  color: #e9eef5;
}

.app-nav .nav-link:hover {
  background-color: #f0f4fa;
}

.app-sidebar-offcanvas .app-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.app-nav .nav-link.active {
  color: var(--act-azul);
  background-color: #e8f0fb;
  border-left-color: var(--act-azul-claro);
  font-weight: 600;
}

.app-sidebar-offcanvas .app-nav .nav-link.active {
  color: #fff;
  background-color: rgba(255, 255, 255, 0.15);
  border-left-color: #fff;
}

.app-nav .nav-divider {
  padding: 0.9rem 1.1rem 0.25rem;
  color: #98a2ad;
  letter-spacing: 0.05em;
}

.app-sidebar-offcanvas .app-nav .nav-divider {
  color: #b7c4d6;
}

/* ---------- Telas de login ---------- */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--act-azul) 0%, var(--act-azul-claro) 100%);
}

.login-card {
  width: 100%;
  max-width: 380px;
}

/* ---------- Utilidades ---------- */

.card-indicador .valor {
  font-size: 1.6rem;
  font-weight: 700;
}

.tabela-responsiva {
  overflow-x: auto;
}

@media (max-width: 767.98px) {
  .app-content {
    padding: 0.85rem;
  }
}