/* LuJuBO Family 2.0 · Build 035 · Etapa 4
   Cierre de calidad: accesibilidad, dispositivos extremos, impresión y pulido final.
   Esta capa no sustituye las paletas ni la identidad visual de cada perfil. */

:root{
  --lj-touch-target:44px;
  --lj-focus-ring:0 0 0 3px rgba(56,189,248,.34);
  --lj-safe-top:env(safe-area-inset-top,0px);
  --lj-safe-right:env(safe-area-inset-right,0px);
  --lj-safe-bottom:env(safe-area-inset-bottom,0px);
  --lj-safe-left:env(safe-area-inset-left,0px);
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-behavior:smooth;
  scrollbar-gutter:stable;
}
body.lujubo-layout{
  min-height:100vh;
  min-height:100dvh;
  padding-left:var(--lj-safe-left);
  padding-right:var(--lj-safe-right);
  overflow-x:hidden;
}

/* Enlace accesible para saltar directamente al contenido. */
.lj-skip-link{
  position:fixed;
  top:calc(.5rem + var(--lj-safe-top));
  left:calc(.5rem + var(--lj-safe-left));
  z-index:100000;
  transform:translateY(-180%);
  padding:.72rem 1rem;
  border-radius:12px;
  background:#fff;
  color:#0f172a;
  border:2px solid currentColor;
  font-weight:800;
  text-decoration:none;
  box-shadow:0 12px 30px rgba(2,6,23,.35);
  transition:transform .18s ease;
}
.lj-skip-link:focus{transform:translateY(0)}

/* Foco visible uniforme sin modificar el estilo del ratón. */
body.lujubo-layout :where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid rgba(125,211,252,.95)!important;
  outline-offset:3px!important;
  box-shadow:var(--lj-focus-ring);
}
body.lujubo-layout :where(input,select,textarea):focus-visible{
  outline-offset:1px!important;
}

/* Objetivos táctiles y contenido robusto. */
body.lujubo-layout :where(button,.btn,[role="button"],input[type="button"],input[type="submit"],input[type="reset"]){
  min-height:var(--lj-touch-target);
}
body.lujubo-layout :where(a.btn,.btn-home,.hero-home,.btn-logout,.sec-btn-logout,.lj-mobile-toggle){
  min-height:var(--lj-touch-target);
}
body.lujubo-layout :where(p,li,dd,td,.card-text,.module-description){
  overflow-wrap:anywhere;
}
body.lujubo-layout :where(pre,code){max-width:100%}
body.lujubo-layout pre{overflow:auto;-webkit-overflow-scrolling:touch}
body.lujubo-layout :where(img,svg,video,canvas){height:auto}
body.lujubo-layout iframe{max-width:100%}

/* Contenido principal preparado para navegación por teclado. */
body.lujubo-layout [data-lj-main-content]{scroll-margin-top:1rem}
body.lujubo-layout [data-lj-main-content]:focus{outline:none}

/* Estado actual de navegación, sin imponer una paleta. */
body.lujubo-layout a[aria-current="page"]{
  position:relative;
  font-weight:700;
}
body.lujubo-layout a[aria-current="page"]::after{
  content:"";
  position:absolute;
  left:12%;right:12%;bottom:2px;
  height:2px;border-radius:999px;
  background:currentColor;
  opacity:.65;
}

/* Indicador discreto para tablas desplazables. */
.lj-table-scroll.is-scrollable::after,
.table-responsive.is-scrollable::after,
.table-wrap.is-scrollable::after,
.table-container.is-scrollable::after,
.sec-table-wrap.is-scrollable::after{
  content:"Desliza horizontalmente";
  position:sticky;
  left:50%;
  display:block;
  width:max-content;
  max-width:calc(100% - 1rem);
  margin:.45rem auto .15rem;
  padding:.28rem .65rem;
  border-radius:999px;
  background:rgba(15,23,42,.84);
  color:#e2e8f0;
  border:1px solid rgba(148,163,184,.3);
  font-size:.72rem;
  line-height:1.2;
  pointer-events:none;
  opacity:.82;
}

/* Evita animaciones de hover pegadas en pantallas táctiles. */
@media (hover:none){
  body.lujubo-layout :where(.card,.menu-card,.module-card,.quick-card,.btn,a){
    transition-duration:.12s!important;
  }
  body.lujubo-layout :where(.card,.menu-card,.module-card,.quick-card):hover{
    transform:none!important;
  }
}

/* Teléfonos muy pequeños y zoom elevado. */
@media (max-width:389.98px){
  :root{--lj-touch-target:42px}
  body.lujubo-layout :where(.tablet-container,.app-shell,.main-shell,.layout-shell){
    margin-left:4px!important;
    margin-right:4px!important;
    width:auto!important;
  }
  body.lujubo-layout :where(.docente-content,.secretaria-content,.tutor-content,.alumno-content,.orientador-content,.admin-content,.main-content,.content){
    padding-left:10px!important;
    padding-right:10px!important;
  }
  body.lujubo-layout :where(.username-pill,.user-pill,.profile-pill){
    min-width:0!important;
    max-width:calc(100vw - 116px)!important;
  }
  body.lujubo-layout :where(.username-pill,.user-pill,.profile-pill) span{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
  body.lujubo-layout :where(h1,.page-title,.hero-title){font-size:clamp(1.45rem,8vw,2rem)!important}
}

/* Móviles en orientación horizontal: prioridad al contenido útil. */
@media (max-height:520px) and (orientation:landscape){
  body.lujubo-layout :where(.tablet-container,.app-shell,.main-shell){
    margin-top:4px!important;
    margin-bottom:4px!important;
  }
  body.lujubo-layout :where(.header-docente,.header-secretaria,.header-tutor,.header-alumno,.header-orientador,.institution-header){
    padding-top:8px!important;
    padding-bottom:8px!important;
  }
  body.lujubo-layout .modal-content{max-height:calc(100dvh - 8px)!important}
}

/* Contraste reforzado solicitado por el sistema operativo. */
@media (prefers-contrast:more){
  body.lujubo-layout :where(.card,.panel,.menu-card,.module-card,.table-responsive,.lj-table-scroll){
    border-width:2px!important;
  }
  body.lujubo-layout :where(.text-muted,small,.subtitle){opacity:1!important}
}

/* Movimiento y transparencias reducidas. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
}
@media (prefers-reduced-transparency:reduce){
  body.lujubo-layout :where(.tablet-container,.card,.panel,.modal-content,.nav-docente){
    -webkit-backdrop-filter:none!important;
    backdrop-filter:none!important;
  }
}

/* Compatibilidad con modos de alto contraste de Windows. */
@media (forced-colors:active){
  body.lujubo-layout :where(.card,.panel,.menu-card,.module-card,.btn,.badge,.modal-content){
    forced-color-adjust:auto;
    border:1px solid CanvasText!important;
  }
  body.lujubo-layout a[aria-current="page"]{text-decoration:underline}
}

/* Impresión limpia de reportes y formularios. */
@media print{
  @page{margin:12mm}
  html,body.lujubo-layout{background:#fff!important;color:#000!important}
  body.lujubo-layout{padding:0!important;overflow:visible!important}
  body.lujubo-layout :where(.nav-docente,.nav-secretaria,.nav-tutor,.nav-alumno,.nav-orientador,.topbar,.navbar,.lj-mobile-toggle,.btn-logout,.sec-btn-logout,.footer-docente,.footer-secretaria,.footer-tutor,.footer-alumno,.footer-orientador,.lj-skip-link){display:none!important}
  body.lujubo-layout :where(.tablet-container,.app-shell,.main-shell,.card,.panel,.modal-content){
    width:100%!important;max-width:none!important;margin:0!important;
    background:#fff!important;color:#000!important;
    box-shadow:none!important;filter:none!important;
    border-color:#aaa!important;
  }
  body.lujubo-layout :where(.lj-table-scroll,.table-responsive,.table-wrap,.table-container,.sec-table-wrap){overflow:visible!important}
  body.lujubo-layout table{min-width:0!important;width:100%!important;font-size:9pt!important}
  body.lujubo-layout a{color:#000!important;text-decoration:none!important}
  body.lujubo-layout .lj-table-scroll::after{display:none!important}
  body.lujubo-layout tr,body.lujubo-layout img,body.lujubo-layout .card{break-inside:avoid}
}