/* Custom Paleta de Colores del Colegio */
:root {
  --primary-dark: #1e3a8a;
  --primary: #3b82f6;
  --primary-light: #93c5fd;
  --cyan: #06b6d4;
  --green: #00bcd4;
  --pink: #ec4899;
  --yellow: #facc15;
  --gray-light: #f1f5f9;
  --white: #ffffff;
  --muted: #6b7280;
  --google: #dd4b39;
}

/* Base Styles */
body, html {
  height: 100%;
  font-family: 'Inter', sans-serif; /* Usar una fuente moderna y limpia */
}

/* Utilidades de Color */
.text-primary-dark { color: var(--primary-dark); }
.text-primary-light { color: var(--primary-light); }
.text-cyan { color: var(--cyan); }
.text-pink { color: var(--pink); }
.text-yellow { color: var(--yellow); }
.text-google { color: var(--google); }
.text-muted { color: var(--muted); }
.text-white { color: var(--white); }
.text-green { color: var(--green); }

.bg-primary-dark { background-color: var(--primary-dark); }
.bg-gray-light { background-color: var(--gray-light); }
.bg-white { background-color: var(--white); }
.bg-cyan { background-color: var(--cyan); }
.bg-pink { background-color: var(--pink); }
.bg-yellow { background-color: var(--yellow); }
.bg-green { background-color: var(--green); }

.badge.bg-green { background-color: var(--green) !important; color: white; }
.badge.bg-blue { background-color: var(--primary) !important; color: white; }
.badge.bg-pink { background-color: var(--pink) !important; color: white; }
.badge.bg-yellow { background-color: var(--yellow) !important; color: var(--primary-dark); }


/* Utilidades de Fuente y Espaciado */
.fs-7 { font-size: 0.875rem; }
.fw-semibold { font-weight: 600; }
.fw-bold { font-weight: 700; }
.cursor-pointer { cursor: pointer; }

/* Botones */
.btn-primary-dark {
  background-color: var(--primary-dark);
  color: white;
  border: none;
}
.btn-primary-dark:hover {
  background-color: color-mix(in srgb, var(--primary-dark) 90%, black);
}

.btn-outline-google {
  background-color: white;
  color: var(--muted);
  border: 1px solid var(--gray-light);
}
.btn-outline-google:hover {
  background-color: var(--gray-light);
}

/* Page Login Specifics */
.login-page {
  background-color: var(--gray-light);
}

.logo-main {
  max-width: 150px;
}

#schoolCarousel {
  position: relative;
}

.carousel-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
}

.carousel-title {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -1px;
}

.carousel-subtitle {
  font-size: 0.8rem;
}

/* Form Styles */
.form-title {
  font-size: 1.75rem;
  font-weight: 700;
}

.form-control {
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 0.8rem 1rem;
}
.form-control:focus {
  border-color: var(--primary-light);
  box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--primary-light) 30%, white);
}

.divider::before,
.divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 30%;
  height: 1px;
  background-color: var(--gray-light);
}
.divider::before { left: 0; }
.divider::after { right: 0; }

/* Page Dashboard Specifics */
.dashboard-page {
  background-color: var(--gray-light);
}

/* Sidebar Specifics */
.sidebar {
  transition: all 0.3s ease-out;
  overflow: hidden;
  position: relative;
  z-index: 100;
}

.sidebar .nav-link {
  transition: all 0.3s ease-out;
}
.sidebar .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.sidebar .nav-link.active {
  background-color: var(--primary);
}

.sidebar.collapsed {
  width: 100px;
}
.sidebar.collapsed .logo-main {
  display: none;
}
.sidebar.collapsed .nav-text {
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease-out;
}

/* Sidebar Expand with Hover */
.sidebar.collapsed:hover {
  width: 250px;
}
.sidebar.collapsed:hover .logo-main {
  display: block;
}
.sidebar.collapsed:hover .nav-text {
  opacity: 1;
  visibility: visible;
  display: inline-block;
  margin-left: 0 !important;
}

/* Header Specifics */
.search-bar .form-control:focus {
  border-color: transparent;
  box-shadow: none;
}

/* Card Summary Gradientes */
.bg-green { background: linear-gradient(135deg, #00bcd4, #1e3a8a); }
.bg-blue { background: linear-gradient(135deg, #3b82f6, #06b6d4); }
.bg-pink { background: linear-gradient(135deg, #ec4899, #facc15); }
.bg-yellow { background: linear-gradient(135deg, #facc15, #ffffff); }

.card-summary, .card-courses, .card-graph-line, .card-students-recent, .card-graph-dona {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

/* course-filters Specifics */
.course-filters .nav-link {
  color: var(--muted);
  border: 1px solid var(--gray-light);
}
.course-filters .nav-link:hover {
  background-color: var(--gray-light);
}
.course-filters .nav-link.active {
  background-color: var(--primary);
  color: white;
  border-color: var(--primary);
}