/* ============================================================
   M.E.T.A.S · La barra de secciones vive ARRIBA y no se va
   ------------------------------------------------------------
   Medido en las 74 misiones con un teléfono de 360×640: la barra
   quedaba fuera de la primera pantalla en las 74, con una mediana
   de 3 156 px —4,9 pantallas— y una peor de 6 180 px. Ninguna era
   pegajosa.

   Y lo que de verdad costaba no era la distancia, era que la barra
   y el contenido se peleaban: go() termina en scrollTo({top:0}),
   así que se bajaba 2,2 pantallas hasta ella, se tocaba
   «Evaluación», la página saltaba arriba y la barra pasaba a estar
   a 7,7 pantallas. Usarla dos veces seguidas eran dos viajes, y la
   distancia cambiaba en cada uno.

   Dentro de cada sección solo hay una flecha hacia adelante, de una
   en una: no había «atrás», ni salto, ni forma de ver dónde se está
   ni cuánto falta. Cuando el maestro dice «abran Evaluación», eso
   eran catorce toques.

   ⚠️ Esto va COMPARTIDO y no copiado en las 74 —como el andamio de
   los juegos 3D y el aparato de videos—, y por la misma razón: una
   corrección copiada 74 veces se arregla en una y se queda rota en
   las demás.

   ⚠️ El <link> va DESPUÉS del CSS de la misión, que es de donde
   sale su color (--pri, --sec, --nav-bg). Así gana sin un solo
   !important: la misión declara position:static y aquí se
   sobrescribe por orden, no a la fuerza.
   ============================================================ */

.nav{
  /* Pegajosa: no basta con subirla. En una sección de catorce
     pantallas, una barra fija arriba del documento se pierde igual
     en cuanto el alumno empieza a trabajar. */
  position: sticky;
  top: 0;
  z-index: 60;

  /* UNA fila que se desliza de lado. Eran hasta siete filas de
     chips: en un teléfono eso es media pantalla de barra antes de
     llegar a lo suyo, y es la misma lección que la barra de grupos
     de Mi aula. */
  flex-wrap: nowrap;
  justify-content: flex-start;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  /* Deslizar la barra no puede llevarse la página por delante: el
     alumno busca una pestaña, no quiere perder dónde iba leyendo. */
  overscroll-behavior-x: contain;

  /* El aire de arriba no es de adorno: la ⭐ de la sección hecha va
     con top:-6px y sin este hueco la corta el desplazamiento. */
  padding: 0.55rem 0.6rem;
  gap: 0.4rem;
}
.nav::-webkit-scrollbar{ display: none; }

/* Los chips no se encogen: con veinte pestañas apretadas en una
   fila, «Evaluación» sale de tres letras y no se lee. */
.nav > *{ flex: 0 0 auto; }

/* 44 px de blanco de toque, la misma regla de los juegos 3D: es lo
   que un dedo acierta sin mirar. Y aquí equivocarse de pestaña es
   perder el sitio en una misión de catorce pantallas. */
.nav-t{
  min-height: 44px;
  padding: 0.35rem 0.8rem;
}

/* El chip activo va RELLENO —ya lo estaba— y además se le marca el
   borde: en la pantalla de un teléfono al sol, un degradado sin
   contorno se confunde con el de al lado. Misma razón que en la
   barra de grupos. */
.nav-t.active{ box-shadow: 0 0 0 2px var(--card, #fff), 0 0 0 4px var(--pri, #1565c0); }

/* ⚠️ El fondo del marco es el paracaídas de las 8 misiones del maestro,
   que traen la barra SIN fondo. Quieta al final del documento eso no se
   notaba; pegada arriba, el contenido se vería pasar por debajo. El JS
   mide el de la página y lo pone aquí, y solo en esas: las 66 del alumno
   pintan el suyo encima con --nav-bg, y su modo oscuro lo cambia solo. */
.bs-marco{ position: sticky; top: 0; z-index: 60; background: var(--bs-fondo, transparent); }
/* Que se pueda deslizar hay que DECIRLO —regla 8 de los juegos 3D:
   «se podía deslizar desde siempre; lo que faltaba era decirlo»—.
   Las sombras de los extremos se apagan al llegar a cada punta. */
.bs-marco::before,
.bs-marco::after{
  content: '';
  position: absolute; top: 0; bottom: 0; width: 28px;
  pointer-events: none; z-index: 2;
  opacity: 0; transition: opacity .18s;
}
/* Se tiñen de --nav-bg, que es de donde saca su fondo la barra en las 66
   del alumno y cambia solo con el tema oscuro; y de --bs-fondo, el medido,
   en las 8 del maestro que no traen ninguno. */
.bs-marco::before{ left: 0;  background: linear-gradient(90deg, var(--nav-bg, var(--bs-fondo, #fff)), transparent); }
.bs-marco::after { right: 0; background: linear-gradient(270deg, var(--nav-bg, var(--bs-fondo, #fff)), transparent); }
.bs-marco.bs-izq::before{ opacity: 1; }
.bs-marco.bs-der::after { opacity: 1; }
.bs-marco > .nav{ position: static; }

/* El hover que levanta el chip es de ratón; en la barra que se desliza
   con el dedo, ese salto de 2 px la hace temblar.
   ⚠️ Y va con :not(.active): en un teléfono el hover se queda PEGADO al
   chip que se acaba de tocar —que es justo el activo—, así que sin esto
   le borraba el anillo al único chip que tiene que distinguirse. */
@media (hover: none){
  .nav-t:not(.active):hover{ transform: none; box-shadow: none; }
}
@media (prefers-reduced-motion: reduce){
  .bs-marco::before, .bs-marco::after{ transition: none; }
}