/* layout.css: estructura, contenedores principales, navegación y layout responsive */

/*MENÚ IMSS-BIENESTAR*/
#menuIzq{
  position: sticky;
  top: var(--gmx-h);
  left: 0;

  width: var(--menu-w);
  height: calc(100vh - var(--gmx-h));
  max-height: calc(100vh - var(--gmx-h));
  display: flex;
  flex-direction: column;

  background: #fff;
  box-shadow: 0 0 5px #000;
  z-index: 30;
}
#templateDer{
	width: calc(100% - 260px);
	height: calc(100vh - var(--gmx-h));
	overflow-y: scroll;
	overflow-x: hidden;
	float: left;
	transition: width 0.3s ease-in-out;
}
#templateGral{
	width: 100%;
	padding: 15px 50px;
}
.bodyMenu::-webkit-scrollbar, #templateDer::-webkit-scrollbar {
	width: 12px;
}
.bodyMenu::-webkit-scrollbar-thumb, #templateDer::-webkit-scrollbar-thumb {
	background-color: #666666;
	border-radius: 20px;
	border: 3px solid #F2F2F2;
}
/*ESTILOS GENERALES*/
.pleca-tit{
	position: relative;
	height: 60px;
	background: #005046;
	padding: 10px;
	color: #fff;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
}
.pf{
	width: 100%;
	position: fixed;
	z-index: 30;
}
.logo-pleca{
	height: 40px;
	position: absolute;
	top: 50%;
}
.a-cnt{
	transform: translate(-50%, -50%);
	left: 42%;
}
.a-lft{
	transform: translateY(-50%);
	left: 20px;
}
.a-rgt{
	transform: translateY(-50%);
	right: 20px;
}
.fondoMX{
	background-image: url(../img/fondoGobmx.svg);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: top left;
}
.cabezalGral{
	position: relative;
	z-index: 2;
	height: 70px;
	text-align: center;
	padding: 10px;
	background: #235B4E;
	border-bottom: 5px solid #BB965C;
}
.banner{
	height: 45px;
}
#menuWrap{
  position: relative;
}
/***/
/* =========================================
   FLEX LAYOUT SIN DEPENDER DE #templateDer
   ========================================= */
/* El shell es una fila flex: menú (sticky) + contenido, y es la página
   completa (body) la que hace scroll — un solo scroll, no dos. */
#appShell{
  display: flex;
  min-height: calc(100vh - var(--gmx-h));
}
/* Contenido: fluye normal, crece con la tabla/paginado; el scroll lo
   maneja el body, igual para cualquier resolución/zoom del navegador. */
#appShell #appContent{
  flex: 1;
  min-width: 0;
  padding: 0;
  display: flex;
  flex-direction: column;

  margin-top: 0 !important;
  padding-top: 0 !important;

}
/* Contenedor interno del contenido */
.app-inner {
  padding: 25px 40px;
  box-sizing: border-box;
}
/* Evita que el contenido se pegue al banner */
.app-inner > *:first-child {
  margin-top: 0;
}

#appShell #templateDer{
  width: 100% !important;
  height: auto !important;
  float: none !important;
  overflow: visible !important;  
}

.gmx.gmx-scope{
  display: contents;
}
/*usuarios**/
/* =========================
   HEADER PRO (overlay) - NO se rompe con menú lateral
========================= */
#templateDer{
  --admin-btn-reserve: clamp(210px, 18vw, 270px);
}

#templateDer #NuevoUsuarioButton,
#templateDer #NuevoUsuarioButton p{
  white-space: nowrap;
}
#templateDer #NuevoUsuarioButton p{
  margin: 0;
}
/* Responsive: en pantallas chicas apila */



/**nuevo */


.page-actions{
  display:flex;
  justify-content:flex-end;
  min-width: 210px;
}

/* =========================================
   RESPONSIVE DEL SHELL (menú + contenido)
   El diseño fue pensado para 1920×1080; estas reglas lo adaptan a
   resoluciones más chicas (laptops, monitores 1366/1440, etc.) sin
   depender de que el usuario haga zoom out.
   ========================================= */

/* Pantallas medianas: el menú se angosta un poco, gana espacio el contenido */
@media (max-width: 1600px){
  :root{ --menu-w: 230px; }
}
@media (max-width: 1366px){
  :root{ --menu-w: 210px; }
  .app-inner{ padding: 20px 24px; }
}

/* Pantallas chicas (tablet / laptop pequeña): el menú se colapsa por
   default y se abre con el botón flotante — mismo mecanismo que ya
   usa el botón de "colapsar" manual (menuResponsivoVista.ejs). Cuando
   se abre, se muestra como overlay encima del contenido (no lo empuja). */
@media (max-width: 992px){
  #menuIzq{
    display: none; /* estado inicial; body.menu-collapsed lo refuerza con !important */
    position: fixed;
    top: var(--gmx-h);
    height: calc(100vh - var(--gmx-h));
    box-shadow: 2px 0 10px rgba(0,0,0,.3);
  }
  .btnCollapseMovil{
    display: block;
  }
  .app-inner{ padding: 16px; }
  #appShell{ min-height: 0; }
}