/* dist/css/portal_maestros.css
 * ───────────────────────────────────────────────────────────────────
 * Estilos específicos del Portal Maestros
 * Se carga DESPUÉS de adminlte.css y custom.css
 * ───────────────────────────────────────────────────────────────────
 */

:root {
  --primary-purple: #6f42c1;
  --primary-purple-dark: #5a2fb0; /* para activo */
  --ink: #1f2937;
}

body {
  min-height: 100vh;
  background: linear-gradient(180deg, #faf7ff 0%, #ffffff 60%);
}

/* === Layout === */
#main-content {
  padding: 90px 15px 30px 15px; /* deja espacio para topbar fijo */
  min-height: calc(100vh - 120px);
}

/* === Componentes UI: Tarjetas y KPIs === */
.pm-card {
  border: none;
  border-radius: 18px;
  box-shadow: 0 10px 28px rgba(31, 41, 55, .08);
}

.pm-kpi {
  background: rgba(255, 255, 255, 0.85);
  transition: transform .12s ease, box-shadow .12s ease;
}

.pm-kpi:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(31, 41, 55, .10);
}

.pm-kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: rgba(111, 66, 193, 0.12);
  border: 1px solid rgba(111, 66, 193, 0.18);
  color: var(--primary-purple);
  font-size: 18px;
  flex: 0 0 auto;
}

/* === Topbar (Navegación) === */
#pmTopbar {
  background: var(--primary-purple) !important;
  box-shadow: 0px 4px 15px rgba(111, 66, 193, 0.35) !important;
  z-index: 1050 !important;
}

#pmTopbar .navbar-brand,
#pmTopbar .nav-link {
  color: #ffffff !important;
  opacity: .92;
  font-weight: 700 !important;
  border-radius: 18px;
  padding: .45rem .75rem;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .08);
  transition: background .12s ease, border-color .12s ease;
}

#pmTopbar .nav-link:hover,
#pmTopbar .nav-link:focus,
#pmTopbar .nav-item.show > .nav-link {
  opacity: 1 !important;
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.14) !important;
}

/* Estado Activo (Pill limpio) */
#pmTopbar .pm-active,
#pmTopbar .nav-link.active,
#pmTopbar .nav-item.active > .nav-link {
  opacity: 1 !important;
  color: #ffffff !important;
  /* Fondo más sutil para "activo" en lugar de sólido oscuro, se ve mejor */
  background: rgba(255, 255, 255, 0.20) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

/* Corrección visual para dropdown toggle activo */
#pmTopbar .dropdown-toggle.pm-active {
  background: rgba(255, 255, 255, 0.20) !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
}

/* Dropdown Menu */
#pmTopbar .dropdown-menu {
  border-radius: 14px;
  border: 1px solid rgba(111, 66, 193, .18);
  box-shadow: 0 14px 34px rgba(31, 41, 55, .14);
  padding: 8px;
  overflow: hidden;
}

#pmTopbar .dropdown-item {
  color: #111827;
  font-weight: 600;
  border-radius: 12px;
  padding: 10px 12px;
}

#pmTopbar .dropdown-item:hover,
#pmTopbar .dropdown-item:focus {
  background: rgba(111, 66, 193, .14);
  color: var(--primary-purple);
}

#pmTopbar .dropdown-item.active,
#pmTopbar .dropdown-item:active {
  background: rgba(111, 66, 193, .22);
  color: var(--primary-purple);
}