/* ─── page-transition.css — transición login → módulo ───────────────────────
   Incluir en login.html (split-screen + salida) y en cada módulo (entrada
   "armado" de header/sidebar/contenido). Ver public/js/page-enter.js. */

/* ── Login split-screen ──────────────────────────────────────────────────── */
.auth-shell{display:flex;min-height:100vh;overflow:hidden}
.auth-brand,.auth-panel{transition:transform .7s cubic-bezier(.65,0,.35,1),opacity .7s ease}
.auth-shell.auth-exit .auth-brand{transform:translateX(-100%);opacity:.35}
.auth-shell.auth-exit .auth-panel{transform:translateX(100%);opacity:.35}

/* ── Entrada "armado" de un módulo ───────────────────────────────────────── */
[data-enter]{opacity:0;transition:transform .9s cubic-bezier(.22,.61,.36,1),opacity .9s ease;will-change:transform,opacity}
[data-enter="left"]{transform:translateX(-46px)}
[data-enter="right"]{transform:translateX(46px)}
[data-enter="top"]{transform:translateY(-34px)}
[data-enter="bottom"]{transform:translateY(34px)}
[data-enter].is-visible{opacity:1;transform:translate(0,0)}

@media (prefers-reduced-motion: reduce){
  .auth-brand,.auth-panel{transition:none}
  [data-enter]{opacity:1!important;transform:none!important;transition:none!important}
}

/* ── Sidebar: grupos colapsables (desplegables) ──────────────────────────────
   Igual que en los cockpits de consultorio: cada sección del menú es un
   <div class="nav-group [open]"> con un .nav-section-title clickeable
   (onclick="toggleNavGroup(this)") y un <ul> que se colapsa. El helper global
   toggleNavGroup y el auto-desplegado del grupo activo viven en public/js/api.js.
   Class names compartidos con la copia inline de consultorio (efecto idéntico). */
.nav-group{margin-bottom:2px}
.nav-group .nav-section-title{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;transition:color .2s}
.nav-group .nav-section-title:hover{color:var(--gray-300,#cbd5e1)}
.nav-group-caret{font-size:10px;color:var(--gray-500,#94a3b8);transition:transform .2s;flex:0 0 auto;margin-left:8px;transform:rotate(-90deg)}
.nav-group.open .nav-group-caret{transform:rotate(0)}
.nav-group > ul{max-height:0;overflow:hidden;transition:max-height .28s ease}
.nav-group.open > ul{max-height:700px}