/*
 * EENDA
 * Marketing, Desarrollo & Consulting
 * www.eenda.com
 * © 2026
 */

/*
 * XPanel® — Breakpoints
 *
 * Mobile-first: style.css define el estado pequeño y aquí se amplía con
 * min-width. No se usa max-width para no volver a la cascada inversa.
 *
 * Referencia Bootstrap 5:
 *   sm ≥ 576px · md ≥ 768px · lg ≥ 992px · xl ≥ 1200px · xxl ≥ 1400px
 */


/* ==========================================================================
   sm ≥ 576px
   ========================================================================== */

@media (min-width: 576px){

	.page-wrapper{
		padding: 0 1.5rem;
	}

	.header{
		padding: 0 1.5rem;
	}
}


/* ==========================================================================
   md ≥ 768px
   ========================================================================== */

@media (min-width: 768px){

	.page-body{
		padding: 1.5rem;
	}

	.page-header h2{
		font-size: 1.5rem;
	}
}


/* ==========================================================================
   lg ≥ 992px — el sidebar deja de ser off-canvas y pasa a fijo
   ========================================================================== */

@media (min-width: 992px){

	.sidebar{
		transform: translateX(0);
	}

	/*
	 * A partir de aquí el sidebar ocupa sitio real, así que el contenido se
	 * desplaza. Se usa margin y no padding para que el header sticky quede
	 * alineado con el borde del sidebar.
	 *
	 * Se excluye la pantalla de login: sin sesión, container.tpl no emite el
	 * sidebar, y reservarle el hueco descentraría la tarjeta.
	 */
	body:not(.admin-not-logged-in) .content{
		margin-left: var(--xp-sidebar-width);
		width: calc(100% - var(--xp-sidebar-width));
	}

	/* En escritorio el sidebar es permanente: ni backdrop ni toggler. */
	.sidebar-backdrop{
		display: none;
	}

	.header-toggler,
	.header-brand{
		display: none;
	}

	/* El sidebar ya es visible: el botón de cerrar del panel móvil sobra. */
	.sidebar-brand .btn-close-sidebar{
		display: none;
	}

	.page-wrapper{
		padding: 0 2rem;
	}

	.header{
		padding: 0 2rem;
	}

	/* Las acciones se compactan a icono: el texto pasa a tooltip. */
	.page-header .nav-actions .nav-link{
		width: 2.375rem;
		height: 2.375rem;
		padding: 0;
		justify-content: center;
	}

	.page-header .nav-actions .nav-link > span{
		display: none;
	}
}


/* ==========================================================================
   xl ≥ 1200px
   ========================================================================== */

@media (min-width: 1200px){

	.page-wrapper{
		padding: 0 2.5rem;
	}

	.header{
		padding: 0 2.5rem;
	}
}


/* ==========================================================================
   Preferencias del usuario
   ========================================================================== */

@media (prefers-reduced-motion: reduce){

	.sidebar,
	.sidebar-backdrop,
	.sidebar-nav .nav-link,
	.header-nav .nav-link{
		transition: none;
	}
}