/* PROYECOM V4.9.125 · Personal auto-adaptable al espacio real de la barra lateral
   Alcance: personal.html + editor de empleado. No toca datos ni lógica de negocio. */

:root{--pe-sidebar-current:0px;--pe-gap:10px}

/* La página Personal ocupa SIEMPRE el espacio útil que queda después del menú. */
body.shared-admin-page{
  min-width:0!important;
  overflow-x:hidden!important;
}
body.shared-admin-page > header,
body.shared-admin-page > main{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin-left:0!important;
  margin-right:0!important;
}
body.shared-admin-page > main{
  padding:clamp(12px,1.35vw,24px)!important;
}
body.shared-admin-page .panel,
body.shared-admin-page .tableWrap,
body.shared-admin-page .toolbar,
body.shared-admin-page .stats,
body.shared-admin-page .cards,
body.shared-admin-page .cards.compact{
  min-width:0!important;
  max-width:100%!important;
}
body.shared-admin-page .tableWrap{overflow:auto!important}

/* Rejillas fluidas: reaccionan al ancho DISPONIBLE, no al ancho total del monitor. */
body.shared-admin-page .stats{
  grid-template-columns:repeat(auto-fit,minmax(min(175px,100%),1fr))!important;
}
body.shared-admin-page .cards,
body.shared-admin-page .cards.compact{
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr))!important;
}
body.shared-admin-page .profileMetrics{
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr))!important;
}
body.shared-admin-page .coopSummary{
  grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))!important;
}

/* Toolbar también se compacta sin salirse debajo de la barra lateral. */
body.shared-admin-page .toolbar{
  grid-template-columns:minmax(220px,2fr) repeat(3,minmax(150px,1fr)) auto!important;
}
@media(max-width:1250px){
  body.shared-admin-page .toolbar{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.shared-admin-page .toolbar #q,
  body.shared-admin-page .toolbar .primary{grid-column:1/-1!important}
}
@media(max-width:720px){
  body.shared-admin-page .toolbar{grid-template-columns:1fr!important}
  body.shared-admin-page .toolbar>*{grid-column:1!important}
}

/* ============================================================
   EDITAR / NUEVO EMPLEADO
   El drawer se alinea al borde real del sidebar (abierto/cerrado).
   ============================================================ */
.drawer.employeeFull{
  position:fixed!important;
  top:8px!important;
  bottom:8px!important;
  left:calc(var(--pe-sidebar-current,0px) + var(--pe-gap))!important;
  right:8px!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  max-height:calc(100dvh - 16px)!important;
  overflow:hidden!important;
  border-radius:14px!important;
  display:flex!important;
  flex-direction:column!important;
  transition:left .22s ease,right .22s ease,width .22s ease!important;
}
.drawer.employeeFull.open{
  left:calc(var(--pe-sidebar-current,0px) + var(--pe-gap))!important;
  right:8px!important;
}
.drawer.employeeFull .drawerHead{
  flex:0 0 auto!important;
  position:relative!important;
  z-index:80!important;
  background:#fff!important;
  min-height:44px!important;
}

/* Scroll seguro: se desplaza TODO el contenido del editor. Esto no depende
   de que .formPane sea hijo directo de #empForm. */
.drawer.employeeFull .drawerBody{
  flex:1 1 auto!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  overscroll-behavior:contain!important;
  scrollbar-gutter:stable!important;
  -webkit-overflow-scrolling:touch!important;
  padding:10px 16px 0!important;
}
.drawer.employeeFull #empForm{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  min-height:100%!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
  display:block!important;
}
.drawer.employeeFull .employeeHero{margin:0!important;padding:4px 0 8px!important}

/* Pestañas siempre accesibles; si no caben, scroll horizontal. */
.drawer.employeeFull .formTabs{
  position:sticky!important;
  top:0!important;
  z-index:50!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:4px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:thin!important;
  background:#fff!important;
  margin:0 0 7px!important;
  padding:3px 0 6px!important;
}
.drawer.employeeFull .formTabs button{flex:0 0 auto!important;white-space:nowrap!important}

/* La pestaña visible ya no encierra su propio alto fijo: deja que el drawerBody
   controle el scroll vertical de manera consistente a 100% de zoom. */
.drawer.employeeFull .formPane:not([hidden]){
  display:block!important;
  width:100%!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
  padding:6px 2px 18px!important;
}
.drawer.employeeFull .formPane[hidden]{display:none!important}

/* Campos auto-ajustables dentro del ancho útil. */
.drawer.employeeFull .grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr))!important;
  gap:12px 14px!important;
  min-width:0!important;
}
.drawer.employeeFull .grid>*{min-width:0!important}
.drawer.employeeFull .grid .wide{grid-column:1/-1!important}

/* Permisos: columnas automáticas según el ancho REAL del editor. */
.drawer.employeeFull .permissionExpanded,
.drawer.employeeFull .permissionExpanded #permissionGroups{
  min-width:0!important;
  max-width:100%!important;
}
.drawer.employeeFull .permissionExpanded #permissionGroups{
  display:grid!important;
  grid-template-columns:repeat(auto-fit,minmax(min(265px,100%),1fr))!important;
  gap:8px!important;
  align-items:start!important;
}
.drawer.employeeFull .permissionExpanded .permGroup{min-width:0!important;margin:0!important}
.drawer.employeeFull .permissionExpanded .permGrid{display:grid!important;grid-template-columns:1fr!important;gap:4px!important}
.drawer.employeeFull .permissionExpanded .permItem{min-width:0!important}
.drawer.employeeFull .permissionExpanded .permissionToolbar,
.drawer.employeeFull .permissionToolbar,
.drawer.employeeFull .portalActions{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  max-width:100%!important;
}

/* Acciones: siempre visibles al final del viewport mientras se desplaza. */
.drawer.employeeFull .drawerFoot,
.drawer.employeeFull #empForm > .drawerFoot{
  position:sticky!important;
  left:0!important;
  right:0!important;
  bottom:0!important;
  z-index:70!important;
  display:flex!important;
  justify-content:flex-end!important;
  align-items:center!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  min-width:0!important;
  margin:0!important;
  padding:9px 2px!important;
  background:#fff!important;
  border-top:1px solid #dce6f2!important;
  box-shadow:0 -5px 14px rgba(20,45,75,.07)!important;
}
.drawer.employeeFull .drawerFoot button{min-height:36px!important;margin:0!important}

/* Cuando el menú lateral está oculto en móvil, el editor usa todo el ancho. */
@media(max-width:760px){
  :root{--pe-sidebar-current:0px;--pe-gap:0px}
  body.shared-admin-page,
  body.shared-admin-page.sidebar-collapsed{padding-left:0!important}
  .drawer.employeeFull,
  .drawer.employeeFull.open{
    inset:0!important;
    left:0!important;
    right:0!important;
    width:100vw!important;
    height:100svh!important;
    max-height:100svh!important;
    border-radius:0!important;
  }
  .drawer.employeeFull .drawerBody{padding:6px 10px 0!important}
  .drawer.employeeFull .grid{grid-template-columns:1fr!important}
  .drawer.employeeFull .grid .wide{grid-column:1!important}
  .drawer.employeeFull .permissionExpanded #permissionGroups{grid-template-columns:1fr!important}
  .drawer.employeeFull .drawerFoot button{flex:1 1 calc(50% - 6px)!important;min-width:130px!important}
}