/* =============================================================================
   Opo.Site — barra de navegación en móvil, con forma de app
   =============================================================================
   Las ocho páginas comerciales (index, ALESP, PTESP, STANDARD, PREMIUM, JOY,
   LA PLATAFORMA y METODOLOGÍA) comparten la misma cabecera. Estaba pensada para
   pantalla grande: 80 px de alto con un logo de 48 px, y el menú se abría como
   una lista desplegable empujando la página.

   En un teléfono eso da dos problemas: se come una quinta parte de la pantalla
   —en la portada llegaba a tapar el logo del hero, que es lo primero que se ve—
   y no se parece en nada a lo que la gente espera de una app.

   Aquí se rehace SOLO para móvil y tablet (por debajo de 1024 px, el mismo corte
   `lg:` que ya usaba la cabecera para enseñar u ocultar cosas):

     · barra compacta de 56 px, con el logo a tamaño de app;
     · el menú deja de ser una lista desplegable y pasa a ser un panel que entra
       deslizándose desde la derecha, a pantalla completa, con su botón de cerrar
       y el acceso al campus fijo abajo, al alcance del pulgar.

   No se toca ni un color de cada página: la barra sigue siendo oscura en la
   portada y blanca en el resto, como estaba. Solo cambian tamaño y forma.

   Se aplica sobre el HTML que ya existe (mismas clases, mismos ids), así que las
   ocho páginas solo tienen que enlazar esta hoja y assets/nav-movil.js.
   ============================================================================= */

@media (max-width: 1023px) {

  /* ---------------------------------------------------------------- la barra */

  /* La fila interior de la cabecera: pasa de 80/96 px a 56. El !important es
     necesario porque el alto viene de las clases h-20/md:h-24 de Tailwind. */
  header > div.max-w-7xl {
    height: 56px !important;
    padding-left: .9rem !important;
    padding-right: .9rem !important;
  }

  header > div.max-w-7xl > a img {
    height: 32px !important;
  }

  /* Botón del menú: cuadrado de 44 px, que es el mínimo cómodo para un dedo. */
  #nav-burger {
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    margin-right: -.35rem;
    border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
  }
  #nav-burger:active { background: rgba(127,127,127,.18); }
  #nav-burger i, #nav-burger svg { width: 26px !important; height: 26px !important; }

  /* ------------------------------------------------------------- el panel */

  /* Deja de ser un bloque dentro de la cabecera y pasa a ser una capa propia.
     Se controla con la clase .abierto (la pone assets/nav-movil.js); la clase
     `hidden` de Tailwind que traía el HTML se la quita el propio script, porque
     display:none impediría la animación de entrada. */
  #nav-mobile {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(88vw, 380px);
    z-index: 70;
    display: flex !important;
    flex-direction: column;
    background: #0A192F;
    transform: translateX(101%);
    transition: transform .32s cubic-bezier(.16, 1, .3, 1);
    box-shadow: -18px 0 44px -18px rgba(0, 0, 0, .7);
    padding-top: env(safe-area-inset-top, 0px);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    overscroll-behavior: contain;
  }
  #nav-mobile.abierto { transform: translateX(0); }

  /* Velo oscuro por detrás. Lo crea el script. */
  #nav-velo {
    position: fixed; inset: 0; z-index: 65;
    background: rgba(5, 7, 13, .6);
    opacity: 0; pointer-events: none;
    transition: opacity .28s ease;
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  }
  #nav-velo.abierto { opacity: 1; pointer-events: auto; }

  /* Cabecera del panel (logo + cerrar). La crea el script. */
  #nav-panel-alto {
    display: flex; align-items: center; justify-content: space-between;
    height: 56px; padding: 0 .5rem 0 1.1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    flex-shrink: 0;
  }
  #nav-panel-alto img { height: 30px; width: auto; filter: invert(1); }
  #nav-cerrar {
    width: 44px; height: 44px; border: 0; background: none; color: #fff;
    display: flex; align-items: center; justify-content: center; border-radius: 12px;
    -webkit-tap-highlight-color: transparent;
  }
  #nav-cerrar:active { background: rgba(255, 255, 255, .12); }

  /* ------------------------------------------------------------- las filas */

  #nav-mobile > nav {
    flex: 1; min-height: 0; overflow-y: auto;
    padding: .5rem .75rem 1rem !important;
    display: flex; flex-direction: column;
    font-size: 1rem !important;
  }

  /* Cada entrada de primer nivel: alta, con separador fino y sin mayúsculas
     forzadas — en un panel estrecho las mayúsculas se leen bastante peor. */
  #nav-mobile > nav > a,
  #nav-mobile > nav > button {
    display: flex; align-items: center; gap: .7rem;
    min-height: 52px; padding: .5rem .7rem !important;
    border: 0 !important; border-radius: 12px;
    color: #fff; text-decoration: none;
    font-size: .98rem; font-weight: 700; text-transform: none;
    -webkit-tap-highlight-color: transparent;
  }
  #nav-mobile > nav > a:active,
  #nav-mobile > nav > button:active { background: rgba(255, 255, 255, .1); }

  /* Línea de separación entre filas, salvo tras la última. */
  #nav-mobile > nav > a:not(:last-child),
  #nav-mobile > nav > button {
    position: relative;
  }
  #nav-mobile > nav > a:not(:last-child)::after,
  #nav-mobile > nav > button::after {
    content: ''; position: absolute; left: .7rem; right: .7rem; bottom: 0;
    height: 1px; background: rgba(255, 255, 255, .08);
  }

  #nav-mobile > nav > button { justify-content: space-between; width: 100%; text-align: left; }
  #nav-mobile > nav > button i,
  #nav-mobile > nav > button svg { width: 20px !important; height: 20px !important; opacity: .55; }

  /* Subniveles (Especialidades, Modalidades): sangrados y algo más discretos. */
  #nav-esp-sub, #nav-mod-sub {
    padding-left: .7rem !important;
    margin: .15rem 0 .35rem;
    border-left: 2px solid rgba(255, 255, 255, .15);
    margin-left: 1rem;
  }
  #nav-esp-sub a, #nav-mod-sub a {
    display: flex; align-items: center;
    min-height: 44px; padding: .35rem .7rem !important;
    border-radius: 10px;
    color: rgba(255, 255, 255, .82) !important;
    font-size: .92rem; font-weight: 600; text-decoration: none;
  }
  #nav-esp-sub a:active, #nav-mod-sub a:active { background: rgba(255, 255, 255, .1); }

  /* El acceso al campus deja de ser una fila más y se convierte en el botón
     principal, pegado abajo: es lo que más se pulsa de todo el menú. */
  #nav-mobile > nav > a[href="login.php"] {
    margin-top: auto;
    justify-content: center;
    background: #FF7A00;
    border-radius: 999px !important;
    min-height: 52px;
    font-size: 1rem; font-weight: 800;
    box-shadow: 0 12px 28px -12px rgba(255, 122, 0, .85);
  }
  #nav-mobile > nav > a[href="login.php"]::after { display: none; }
  #nav-mobile > nav > a[href="login.php"]:active { background: #e56d00; }

  /* Mientras el panel está abierto no se mueve la página de detrás. */
  body.nav-abierto { overflow: hidden; }
}

/* Quien pide menos movimiento en su móvil recibe el panel puesto, sin deslizar. */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
  #nav-mobile, #nav-velo { transition: none; }
}