/* LuJuBO Family 2.0 · Build 035 Etapa 2
   Homologación de layouts sin sustituir la identidad cromática de cada perfil. */

:root{
  --lj-layout-gap: clamp(.75rem, 1.5vw, 1.35rem);
  --lj-layout-pad: clamp(.85rem, 2vw, 1.5rem);
  --lj-header-radius: clamp(16px, 2vw, 24px);
  --lj-touch: 44px;
  --lj-mobile-bar: rgba(2,6,23,.92);
}

html{scroll-behavior:smooth}
body.lujubo-layout{overflow-x:hidden;-webkit-text-size-adjust:100%}
body.lujubo-layout :where(.tablet-container,.shell-alumno,.sec-shell){isolation:isolate}
body.lujubo-layout :where(.nav-admin,.nav-tutor,.nav-docente,.sec-nav,.nav-orientador,.nav-alumno){
  min-height:58px;
  gap:.75rem;
}
body.lujubo-layout :where(.nav-admin-user,.pill-user,.username-pill,.sec-nav-left,.nav-orient-user,.nav-alumno>div:first-child){
  min-width:0;
}
body.lujubo-layout :where(.nav-admin-user span:last-child,.pill-user .u,.username-pill span,.sec-user-text span,.nav-orient-user span:last-child,.nav-alumno-name){
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Disparador móvil compartido */
.lj-mobile-toggle{
  display:none;
  width:var(--lj-touch);height:var(--lj-touch);min-width:var(--lj-touch);
  align-items:center;justify-content:center;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.42);
  background:rgba(15,23,42,.76);
  color:inherit;
  box-shadow:0 10px 28px rgba(0,0,0,.2);
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}
.lj-mobile-toggle:hover{transform:translateY(-1px);background:rgba(30,41,59,.95);border-color:rgba(226,232,240,.65)}
.lj-mobile-toggle:focus-visible{outline:3px solid rgba(56,189,248,.32);outline-offset:2px}
.lj-mobile-toggle i{font-size:1.25rem;line-height:1}

/* Cabeceras institucionales */
body.lujubo-layout :where(.hero-admin,.header-tutor,.header-docente,.sec-hero,.hero-orientador,.header-alumno){
  transition:max-height .3s ease,opacity .24s ease,transform .3s ease,padding .3s ease,margin .3s ease;
}
body.lujubo-layout :where(.hero-title,.school-name,.sec-hero h1,.header-titulos h5){
  text-wrap:balance;
}
body.lujubo-layout :where(.hero-sub,.sec-hero p){max-width:72ch}

/* Acciones con blancos táctiles consistentes */
body.lujubo-layout :where(.btn-logout,.sec-btn-logout,.btn-home,.sec-btn-home,.hero-home,.btn-pill,.header-ciclo a){
  min-height:40px;
  justify-content:center;
}
body.lujubo-layout :where(a,button,input,select,textarea):focus-visible{
  outline:3px solid rgba(56,189,248,.3);outline-offset:2px;
}

/* Contenido y footer */
body.lujubo-layout :where(.contenido,.content-wrap,.docente-content,.sec-main,.contenido-orientador){
  min-width:0;
}
body.lujubo-layout :where(footer,.footer-docente,.sec-footer){
  line-height:1.55;
}

@media (max-width: 991.98px){
  body.lujubo-layout{padding-left:8px!important;padding-right:8px!important}
  body.lujubo-layout :where(.tablet-container,.shell-alumno,.sec-shell){width:100%;max-width:100%;margin-left:auto!important;margin-right:auto!important}
  body.lujubo-layout :where(.hero-admin,.sec-hero-content,.hero-orientador,.header-alumno){gap:1rem}
  body.lujubo-layout :where(.hero-right,.sec-hero-right,.header-ciclo){min-width:0}
  body.lujubo-layout :where(.hero-pill,.header-docente-right,.sec-hero-right){align-items:flex-start}
}

@media (max-width: 767.98px){
  .lj-mobile-toggle{display:inline-flex}

  body.lujubo-layout :where(.nav-admin,.nav-tutor,.nav-docente,.sec-nav,.nav-orientador,.nav-alumno){
    position:sticky;top:0;z-index:1040;
    padding:10px 12px!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    background-color:var(--lj-mobile-bar);
    backdrop-filter:blur(18px);
  }
  body.lujubo-layout :where(.nav-admin-user,.pill-user,.username-pill,.sec-nav-left,.nav-orient-user,.nav-alumno>div:first-child){
    flex:1;max-width:calc(100% - 104px);
  }
  body.lujubo-layout .clock-pill{display:none!important}
  body.lujubo-layout :where(.btn-logout,.sec-btn-logout,.nav-actions){display:none!important}

  /* El botón abre o cierra la cabecera institucional, que funciona como menú contextual. */
  body.lujubo-layout :where(.hero-admin,.header-tutor,.header-docente,.sec-hero,.hero-orientador,.header-alumno){
    max-height:0;opacity:0;overflow:hidden;pointer-events:none;
    transform:translateY(-10px);
    padding-top:0!important;padding-bottom:0!important;
    margin-top:0!important;margin-bottom:0!important;
    border-bottom-width:0!important;
  }
  body.lujubo-layout.lj-menu-open :where(.hero-admin,.header-tutor,.header-docente,.sec-hero,.hero-orientador,.header-alumno){
    max-height:720px;opacity:1;pointer-events:auto;transform:none;
    padding-top:var(--lj-layout-pad)!important;padding-bottom:var(--lj-layout-pad)!important;
    margin-bottom:.75rem!important;
    border-bottom-width:1px!important;
  }
  body.lujubo-layout.lj-menu-open .sec-hero{margin-left:.65rem!important;margin-right:.65rem!important}

  body.lujubo-layout :where(.hero-admin,.sec-hero-content,.hero-orientador,.header-alumno,.header-docente){
    flex-direction:column!important;align-items:stretch!important;
  }
  body.lujubo-layout :where(.hero-right,.sec-hero-right,.header-ciclo,.header-docente-right){
    width:100%;text-align:left!important;align-items:flex-start!important;
  }
  body.lujubo-layout :where(.hero-pill,.header-tutor>div,.nav-actions){width:100%}
  body.lujubo-layout :where(.hero-home,.btn-home,.sec-btn-home,.header-ciclo a,.btn-pill){
    min-height:var(--lj-touch);padding:.65rem .9rem;
  }
  body.lujubo-layout :where(.contenido,.content-wrap,.docente-content,.sec-main,.contenido-orientador){
    padding:clamp(.75rem,3vw,1rem)!important;
  }
  body.lujubo-layout :where(footer,.footer-docente,.sec-footer){
    padding:1rem!important;text-align:center!important;
  }
  body.lujubo-layout .sec-footer{flex-direction:column;gap:.35rem}
}

@media (max-width: 479.98px){
  body.lujubo-layout{padding:0!important}
  body.lujubo-layout :where(.tablet-container,.shell-alumno,.sec-shell,.shell-inner,.tablet-inner){
    margin:0!important;border-radius:0!important;border-left:0!important;border-right:0!important;
  }
  body.lujubo-layout :where(.nav-admin-user span:last-child,.pill-user .u,.username-pill span,.sec-user-text span,.nav-orient-user span:last-child,.nav-alumno-name){max-width:56vw}
  body.lujubo-layout :where(.hero-title,.sec-hero h1){font-size:clamp(1.35rem,7vw,1.9rem)!important}
  body.lujubo-layout .school-name{font-size:clamp(1.15rem,6vw,1.55rem)!important}
  body.lujubo-layout :where(.chip,.hero-pill,.sec-pill-ciclo,.badge-ciclo){white-space:normal!important;width:100%;line-height:1.35}
}

@media (prefers-reduced-motion:reduce){
  .lj-mobile-toggle,body.lujubo-layout :where(.hero-admin,.header-tutor,.header-docente,.sec-hero,.hero-orientador,.header-alumno){transition:none!important}
}

/* =========================================================
   Build 035 · Etapa 3 · Acciones móviles persistentes
   El cierre de sesión nunca desaparece en pantallas pequeñas.
========================================================= */
@media (max-width: 767.98px){
  body.lujubo-layout :where(.nav-admin,.nav-tutor,.nav-docente,.sec-nav,.nav-orientador,.nav-alumno){
    display:grid!important;
    grid-template-columns:minmax(0,1fr) var(--lj-touch) var(--lj-touch);
    align-items:center!important;
  }
  body.lujubo-layout :where(.nav-admin-user,.pill-user,.username-pill,.sec-nav-left,.nav-orient-user,.nav-alumno>div:first-child){
    max-width:none!important;width:auto!important;min-width:0;
  }
  body.lujubo-layout :where(.btn-logout,.sec-btn-logout){
    display:inline-flex!important;
    width:var(--lj-touch)!important;
    min-width:var(--lj-touch)!important;
    height:var(--lj-touch)!important;
    min-height:var(--lj-touch)!important;
    padding:0!important;
    margin:0!important;
    align-items:center!important;
    justify-content:center!important;
    border-radius:14px!important;
    overflow:hidden;
    white-space:nowrap;
    font-size:0!important;
    line-height:1;
  }
  body.lujubo-layout :where(.btn-logout,.sec-btn-logout) i{
    margin:0!important;font-size:1.15rem!important;line-height:1;
  }
  body.lujubo-layout .sec-btn-logout span{display:none!important}
  body.lujubo-layout .lj-mobile-toggle{grid-column:3}
  body.lujubo-layout :where(.btn-logout,.sec-btn-logout){grid-column:2;grid-row:1}
  body.lujubo-layout :where(.nav-admin-user,.pill-user,.username-pill,.sec-nav-left,.nav-orient-user,.nav-alumno>div:first-child){grid-column:1;grid-row:1}
}

@media (max-width: 379.98px){
  body.lujubo-layout :where(.nav-admin,.nav-tutor,.nav-docente,.sec-nav,.nav-orientador,.nav-alumno){
    grid-template-columns:minmax(0,1fr) 42px 42px;
    gap:.45rem!important;
  }
  body.lujubo-layout :where(.btn-logout,.sec-btn-logout,.lj-mobile-toggle){
    width:42px!important;min-width:42px!important;height:42px!important;min-height:42px!important;
  }
}