/* LuJuBO Family 2.0 · Build 035 · Etapa 5
   Estabilización visual y corrección de regresiones.
   Mantiene intacta la identidad cromática de cada perfil. */

/* El acceso rápido permanece totalmente fuera de la interfaz hasta que
   la navegación por teclado lo solicita de forma intencional. */
.lj-skip-link{
  position:fixed!important;
  top:calc(.55rem + env(safe-area-inset-top,0px))!important;
  left:calc(.55rem + env(safe-area-inset-left,0px))!important;
  width:1px!important;
  height:1px!important;
  margin:-1px!important;
  padding:0!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
  transform:none!important;
}
.lj-skip-link:focus,
.lj-skip-link:focus-visible,
.lj-skip-link.is-keyboard-visible{
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:.72rem 1rem!important;
  overflow:visible!important;
  clip:auto!important;
  clip-path:none!important;
  white-space:normal!important;
  border:2px solid currentColor!important;
  opacity:1!important;
  pointer-events:auto!important;
  background:#fff!important;
  color:#0f172a!important;
  border-radius:12px!important;
  box-shadow:0 12px 30px rgba(2,6,23,.35)!important;
  z-index:100000!important;
}

/* No debe existir una franja, desplazamiento o reserva superior causada
   por elementos técnicos de accesibilidad. */
body.lujubo-layout{
  margin-top:0!important;
  inset-block-start:auto;
}
body.lujubo-layout > .lj-skip-link:not(:focus):not(:focus-visible):not(.is-keyboard-visible){
  display:block!important;
}

/* Barra superior estable: escritorio conserva usuario y salida; el botón
   hamburguesa sólo pertenece a resoluciones móviles. */
@media (min-width:768px){
  body.lujubo-layout .lj-mobile-toggle{
    display:none!important;
  }
  body.lujubo-layout :where(.nav-docente,.nav-secretaria,.nav-tutor,.nav-alumno,.nav-orientador,.topbar,.navbar){
    min-height:64px;
  }
  body.lujubo-layout :where(.btn-logout,.sec-btn-logout){
    display:inline-flex!important;
    align-items:center;
    justify-content:center;
    visibility:visible!important;
    opacity:1!important;
  }
}

/* En móvil se preservan los tres controles sin solapamientos. */
@media (max-width:767.98px){
  body.lujubo-layout :where(.nav-docente,.nav-secretaria,.nav-tutor,.nav-alumno,.nav-orientador,.topbar,.navbar){
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto auto!important;
    align-items:center!important;
    gap:10px!important;
  }
  body.lujubo-layout :where(.username-pill,.user-pill,.profile-pill){
    min-width:0!important;
    max-width:none!important;
  }
  body.lujubo-layout :where(.btn-logout,.sec-btn-logout){
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    visibility:visible!important;
    opacity:1!important;
    flex:0 0 auto!important;
  }
  body.lujubo-layout .lj-mobile-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    flex:0 0 auto!important;
  }
}

/* Evita que una regla heredada coloque controles por encima del viewport. */
body.lujubo-layout :where(.tablet-container,.app-shell,.main-shell,.layout-shell){
  translate:none!important;
}

/* Pequeño saneamiento para zoom y textos largos. */
body.lujubo-layout :where(.username-pill,.user-pill,.profile-pill) span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}