/* ============================================================
   Estilos propios del sitio
   Complementan a Tailwind. Aquí vive todo lo que Tailwind no
   puede hacer solo: menús desplegables, barras de scroll y
   ajustes del encabezado fijo.
   ============================================================ */

/* ---------- Encabezado fijo: que no tape las secciones ---------- */
/* El header mide 72px; damos margen para que el título quede visible
   al llegar por un enlace del menú. */
section[id],
div[id^="periodo"] {
  scroll-margin-top: 96px;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Menús desplegables del escritorio ---------- */
.nav-dropdown {
  padding-bottom: 4px; /* puente invisible: evita que el menú se cierre al bajar el mouse */
}

.nav-dropdown > button {
  cursor: pointer;
}

.nav-dropdown .dropdown-menu {
  display: none;
  border-radius: 0 0 8px 8px;
  overflow: hidden;
  animation: desplegar 0.16s ease-out;
}

/* Se abre al pasar el mouse, al enfocar con teclado (Tab) o al tocar en pantallas táctiles */
.nav-dropdown:hover .dropdown-menu,
.nav-dropdown:focus-within .dropdown-menu,
.nav-dropdown.abierto .dropdown-menu {
  display: block;
}

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

/* El submenú de grados es largo: que no se salga de la pantalla */
.nav-dropdown .dropdown-menu {
  max-height: 70vh;
  overflow-y: auto;
}

/* Flecha que gira cuando el menú está abierto */
.nav-dropdown > button .material-symbols-outlined {
  transition: transform 0.2s ease;
}

.nav-dropdown:hover > button .material-symbols-outlined,
.nav-dropdown.abierto > button .material-symbols-outlined {
  transform: rotate(180deg);
}

/* ---------- Enlace activo del menú ---------- */
.nav-activo {
  color: #735c00 !important;
  font-weight: 600;
}

/* ---------- Menú de celular ---------- */
#menu-movil {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

#menu-movil.abierto {
  max-height: 85vh;
  overflow-y: auto;
}

#btn-menu-movil .barra {
  transition: transform 0.25s ease, opacity 0.2s ease;
}

#btn-menu-movil.abierto .barra-1 { transform: translateY(7px) rotate(45deg); }
#btn-menu-movil.abierto .barra-2 { opacity: 0; }
#btn-menu-movil.abierto .barra-3 { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Barras de scroll de las tarjetas de grupo ---------- */
.group-card-scroll {
  scrollbar-width: thin;
  scrollbar-color: #c4c6cf transparent;
}

.group-card-scroll::-webkit-scrollbar {
  width: 6px;
}

.group-card-scroll::-webkit-scrollbar-thumb {
  background: #c4c6cf;
  border-radius: 3px;
}

.group-card-scroll::-webkit-scrollbar-thumb:hover {
  background: #74777f;
}

/* ---------- Imagen de respaldo ---------- */
.img-respaldo {
  object-fit: cover;
  background: #002045;
}

/* ---------- Foco visible para accesibilidad ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid #fed65b;
  outline-offset: 2px;
}