/* ============================================================
   NAVBAR / HEADER - esqueda.edu.mx
   Estilos para el header superior, navbar principal (estilo
   "Agency": transparente arriba, sólido al hacer scroll),
   dropdowns, modo oscuro y responsive.
   ============================================================ */


   /* ========== VARIABLES DE COLOR ========== */
  :root {
    --color-bg-light: #ffffff;
    --color-bg-dark: #1e1e2f;
    --color-text-dark: #1e3d59;
    --color-text-light: #eaf4f4;
    --color-primary: #144a7e;
    --color-accent: #61dafb;
    --color-text-menu: #34675c;
    --color-menus-des: #31855a;
    --color-button: #198754;
    --color-menu-fondo: #375E97;
  }
/* ------------------------------------------------------------
   0. BASE / TRANSICIONES GLOBALES
   ------------------------------------------------------------ */
body {
  transition: background-color 0.3s, color 0.3s;
}

/* El slider queda pegado justo debajo del header (que va en absolute) */
.slider-wrapper {
  margin-top: 0;
}


/* ============================================================
   1. HEADER TOP (barra superior con datos de contacto/redes)
   ============================================================ */
.header-area {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050; /* Por encima del navbar para que siempre sea visible */
}

.nav-top-info {
  font-size: 0.8rem;
  padding: 4px 0;
}

.nav-top-info .info-item {
  color: #ffffff;
  padding: 0;
}

.nav-top-info a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.nav-top-info a:hover {
  color: var(--color-accent);
}

/* Cuando el navbar ya tiene fondo (scrolled), la línea del top info
   se adapta para verse bien sobre fondo blanco */
#mainNav.navbar-scrolled .nav-top-info {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

@media (max-width: 991.98px) {
  .nav-top-info {
    border-bottom-color: rgba(20, 74, 126, 0.15);
  }
  .nav-top-info .info-item {
    color: var(--color-text-dark);
  }
  body.dark .nav-top-info .info-item {
    color: var(--color-text-light);
  }
}


/* ============================================================
   2. NAVBAR - ESTRUCTURA BASE
   ============================================================ */
.navbar {
  background-color: var(--color-bg-light);
  transition: background-color 0.3s, box-shadow 0.3s;
}

.navbar.scrolled {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Estilo de la plantilla "Agency": navbar fijo, transparente al inicio y con
   transición suave de fondo/blur al hacer scroll */
#mainNav {
  background: transparent;
  transition:
    background-color 0.2s ease,
    padding 0.2s ease,
    box-shadow 0.2s ease,
    backdrop-filter 0.2s ease;
}

/* Versión escritorio: navbar fijo arriba de toda la pantalla */
#mainNav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1025;
  padding-top: 8px;
  padding-bottom: 8px;
  max-height: calc(100vh - var(--header-height));
  box-shadow: none;
  background: transparent;
}

/* Estado "scrolled": fondo sólido + blur (efecto glassmorphism) */
#mainNav.navbar-scrolled {
  background: rgba(248, 249, 250, 1); 
  backdrop-filter: blur(4px);
}

/* En móvil el navbar siempre tiene fondo sólido (no hay efecto transparente) */
@media (max-width: 991px) {
  #mainNav {
    background: #ffffff;
  }
  body.dark #mainNav {
    background: #1e1e2f;
  }
}


/* ============================================================
   3. LOGO DEL NAVBAR
   ============================================================ */
.navbar-brand img {
  transition: all 0.45s;
  max-height: 65px;
}

/* El logo crece un poco cuando el navbar está en estado "scrolled" */
#mainNav.navbar-scrolled .navbar-brand img {
  max-height: 100px;
}

@media (max-width: 991.98px) {
  .navbar-brand img {
    max-height: 40px;
    max-width: 100px;
  }
}


/* ============================================================
   4. ENLACES DEL MENÚ (nav-link)
   ============================================================ */

/* Estado inicial: navbar transparente sobre el slider */
#mainNav .nav-link {
  color: var(--color-text-light);
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.1s;
}

#mainNav .nav-link:hover {
  color: var(--color-menu-fondo) !important;
}

/* Estado "scrolled": navbar con fondo claro, texto oscuro */
#mainNav.navbar-scrolled .nav-link {
  color: #144a7e !important;
}

#mainNav.navbar-scrolled .info-item {
  color: #144a7e !important;
}

/* --- Enlace activo (página actual) --- */

/* Sobre fondo transparente: color que contrasta con el slider */
#mainNav .navbar-nav .nav-link.active,
#mainNav .dropdown-menu .dropdown-item.active {
  color: var(--color-primary) !important;
  font-weight: 710 !important;
  /* border-bottom: 2px solid var(--color-primary); */ /* opcional: indicador visual */
}

/* Sobre fondo sólido (scrolled) */
#mainNav.navbar-scrolled .navbar-nav .nav-link.active {
  color: var(--color-primary) !important;
  /* border-bottom: 2px solid var(--color-primary); */
}


/* ============================================================
   5. DROPDOWN (submenús)
   ============================================================ */
.dropdown-menu {
  background-color: var(--color-bg-light);
  border-radius: 8px;
  padding: 0.5rem;
  animation: dropdownFade 0.3s ease both;
}

@keyframes dropdownFade {
  0% {
    opacity: 0;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-menu .dropdown-item {
  color: var(--color-menus-des);
  background: none;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.dropdown-menu .dropdown-item:hover {
  background-color: rgba(20, 74, 126, 0.08);
  color: var(--color-text-menu);
}

/* Item activo dentro de un dropdown */
.dropdown-menu .dropdown-item.active {
  background-color: rgba(20, 74, 126, 0.15) !important;
  color: var(--color-primary) !important;
  border-bottom: none !important;
}

/* Animación al desplegar el menú colapsable (móvil) */
.navbar-collapse {
  animation: slideDown 0.4s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-15px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   6. BOTÓN DE CAMBIO DE TEMA (claro/oscuro)
   ============================================================ */
.theme-toggle {
  background: none;
  border: none;
  color: var(--color-text-dark);
  font-size: 1.2rem;
  cursor: pointer;
  transition: color 0.3s, background-color 0.3s;
}

.theme-toggle:hover {
  background-color: rgba(0, 0, 0, 0.05);
  color: var(--color-accent);
}


/* ============================================================
   7. MODO OSCURO
   ============================================================ */
body.dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-light);
}

body.dark .navbar,
body.dark .navbar-collapse {
  background-color: var(--color-bg-dark);
}

body.dark .navbar-nav .nav-link,
body.dark .navbar-nav .dropdown-item {
  color: var(--color-text-light) !important;
}

body.dark .navbar-nav .nav-link.active,
body.dark .navbar-nav {
  color: var(--color-accent) !important;
  background: none;
}

body.dark .dropdown-menu {
  background-color: #2c2f4a;
}


/* ============================================================
   8. LOGOS INSTITUCIONALES (Microsoft 365, HIGEO, Moodle, etc.)
   ============================================================ */
.logos-institucionales .logo-extra {
  width: 60px;
  height: 40px;
  object-fit: contain;
  transition: transform 0.3s;
}

.logos-institucionales .logo-extra:hover {
  transform: scale(1.05);
}

@media (max-width: 991.98px) {
  .logos-institucionales {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
  }
  .logos-institucionales.hidden-on-menu {
    display: none !important;
  }
  .logos-institucionales .logo-extra {
    max-height: 28px;
    width: auto;
  }
  .logos-institucionales {
    gap: 8px; /* menos espacio entre íconos en pantallas chicas */
  }
}


/* ============================================================
   9. INFO ITEM / TEXTO DE LA INSTITUCIÓN (barra superior)
   ============================================================ */
.info-item {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  width: 100%;
  font-size: clamp(0.75rem, 2vw, 1rem);
  white-space: nowrap;
  overflow-x: auto;
  box-sizing: border-box;
}

.institution-wrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.institution-text {
  font-size: clamp(10px, 3vw, 13px);
  font-weight: 700;
}

@media (max-width: 500px) {
  .institution-text {
    font-size: 10px;
  }
}


/* ============================================================
   10. ORDEN DE ELEMENTOS DENTRO DEL NAVBAR (flex order)
   ============================================================ */

/* Por defecto (pantallas pequeñas): el orden sigue el HTML tal cual */
.navbar .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* En pantallas grandes/medianas: logo -> menú -> logos institucionales */
@media (min-width: 992px) {
  .navbar-brand {
    order: 0; /* Logo de la escuela al inicio */
  }
  .navbar-nav {
    order: 1; /* Menú después del logo */
  }
  .logos-institucionales {
    order: 2; /* Logos institucionales al final */
    margin-left: 0.5rem;
  }
}


/* ============================================================
   11. RESPONSIVE - MENÚ MÓVIL (< 992px)
   ============================================================ */
@media (max-width: 991.98px) {

  /* Ícono hamburguesa: color azul institucional en vez de blanco */
  #mainNav .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23144a7e' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
  }

  #mainNav .navbar-toggler {
    border-color: rgba(20, 74, 126, 0.3);
  }

  /* Aseguramos que header y navbar no compitan en z-index en móvil */
  .header-area,
  #mainNav {
    position: relative !important;
    z-index: 1020 !important;
  }

  /* Panel del menú desplegable */
  .navbar-collapse {
    padding: 0.3rem 1rem;
    background-color: #ffffff;
    position: fixed;
    top: var(--header-height);
    left: 0;
    width: 100%;
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    z-index: 1010;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  }

  body.dark .navbar-collapse {
    background-color: #1e1e2f;
  }

  /* Centrado del contenido del menú */
  #mainNav .navbar-collapse {
    text-align: center;
    padding: 1rem;
  }

  #mainNav .navbar-nav {
    width: 100%;
    align-items: center;
  }

  #mainNav .navbar-nav .nav-item {
    width: 100%;
    margin-bottom: 0.4rem;
  }

  .navbar-nav .nav-item {
    margin-bottom: 0.2rem;
    font-size: 10px;
  }

  /* Enlaces principales: más grandes y centrados */
  #mainNav .navbar-nav .nav-link {
    text-align: center !important;
    font-size: 1.01rem !important;
    font-weight: 600;
    padding: 0.75rem 1rem !important;
    color: var(--color-primary) !important;
  }

  .navbar-nav .nav-link {
    text-align: left;
  }

  /* Submenús (dropdowns) dentro del menú móvil */
  #mainNav .dropdown-menu {
    text-align: center;
    border: none;
    box-shadow: none;
    background-color: rgba(20, 74, 126, 0.05);
    margin-top: 0.25rem;
  }

  #mainNav .dropdown-menu .dropdown-item {
    text-align: center !important;
    font-size: 1rem !important;
    padding: 0.6rem 1rem;
  }

  /* Modo oscuro en menú móvil */
  body.dark #mainNav .navbar-nav .nav-link,
  body.dark #mainNav .dropdown-menu .dropdown-item {
    color: var(--color-text-light) !important;
  }

  body.dark #mainNav .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.05);
  }
}