/* Tokens */
body.layout-admin {
	--dw-blue:      #034D96;
	--dw-blue-600:  #023C77;
	--dw-blue-100:  #E6EEF7;
	--dw-pink:      #E33678;
	--dw-fg-2:      #4A5B6F;
	--dw-line:      #babcbf;

	--dw-aside-w:    200px;
	--dw-aside-riel: 56px;
	--dw-aside-gap:  12px;

	/* una sola animación: todo lo que se mueve al contraer/expandir lee estos dos tokens */
	--dw-dur:  .24s;
	--dw-ease: linear;

	/* medidas del menú: se compactan según el alto de pantalla para que quepa entero */
	--dw-menu-fila:   65px;
	--dw-menu-pad-y:  15px;
	--dw-menu-pad-x:  15px;
	--dw-menu-fuente: 16px;
	--dw-menu-lh:     20px;
	--dw-menu-icono:  20px;
	--dw-menu-logo:   44px;
	--dw-menu-foto:   34px;

	--dw-sub-fuente:  14.625px;
}
@media (max-height: 1248px) {
	body.layout-admin {
		--dw-menu-fila: 58px; --dw-menu-pad-y: 10px; --dw-menu-pad-x: 12px;
		--dw-menu-fuente: 14px; --dw-menu-lh: 18px; --dw-menu-icono: 18px;
		--dw-menu-logo: 38px; --dw-menu-foto: 32px;
	}
}
@media (max-height: 1076px) {
	body.layout-admin {
		--dw-menu-fila: 50px; --dw-menu-pad-y: 8px; --dw-menu-pad-x: 10px;
		--dw-menu-fuente: 13px; --dw-menu-lh: 16px; --dw-menu-icono: 16px;
		--dw-menu-logo: 32px; --dw-menu-foto: 30px;
	}
}
@media (max-height: 926px) {
	body.layout-admin {
		--dw-menu-fila: 44px; --dw-menu-pad-y: 6px; --dw-menu-pad-x: 10px;
		--dw-menu-fuente: 12px; --dw-menu-lh: 15px; --dw-menu-icono: 15px;
		--dw-menu-logo: 28px; --dw-menu-foto: 28px;
	}
}

/* La tarjeta */
aside.dw-sidebar {
	display: flex;
	flex-direction: column;
	background: var(--dw-blue-600);
	box-shadow: 0 1px 2px rgba(3, 77, 150, .06), 0 4px 12px rgba(3, 77, 150, .04);
	overflow: visible;   /* el botón de contraer asoma por el borde derecho */
}

/* Lista */
aside.dw-sidebar ul.dw-menu {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: inherit;
	/* con muchas entradas el menú se desplaza; el submenú es fixed, así que no lo recorta */
	overflow-y: auto;
	overflow-x: hidden;
	scrollbar-width: thin;
	scrollbar-color: rgba(255, 255, 255, .3) transparent;
}
aside.dw-sidebar ul.dw-menu::-webkit-scrollbar { width: 6px; }
aside.dw-sidebar ul.dw-menu::-webkit-scrollbar-track { background: transparent; }
aside.dw-sidebar ul.dw-menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .3); border-radius: 3px; }
aside.dw-sidebar ul.dw-menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .55); }
aside.dw-sidebar ul.dw-menu > li { list-style: none; }

/* Filas de primer nivel: icono + texto */
aside.dw-sidebar ul.dw-menu > li > a {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: var(--dw-menu-fila);   /* misma altura en las dos formas: contraer no mueve nada en vertical */
	padding: var(--dw-menu-pad-y) var(--dw-menu-pad-x);
	border-bottom: 1px solid var(--dw-line);
	background: transparent;
	color: #fff;
	font-size: var(--dw-menu-fuente);
	font-weight: 400;
	text-decoration: none;
	transition: padding var(--dw-dur) var(--dw-ease), background-color .12s ease, color .12s ease;
}
aside.dw-sidebar ul.dw-menu > li > a > i {
	flex: none;
	font-size: var(--dw-menu-icono);
	color: rgba(255, 255, 255, .9);
}

aside.dw-sidebar ul.dw-menu > li > a:hover,
aside.dw-sidebar ul.dw-menu > li > a:focus-visible,
aside.dw-sidebar ul.dw-menu > li.active > a,
aside.dw-sidebar ul.dw-menu > li.dw-sub:hover > a,
aside.dw-sidebar ul.dw-menu > li.dw-sub:focus-within > a {
	background: rgb(227 54 120 / 64%);
	color: #fff;
}

aside.dw-sidebar .dw-menu-extra {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 200px;
	line-height: var(--dw-menu-lh);
	transition: max-width var(--dw-dur) var(--dw-ease), opacity var(--dw-dur) var(--dw-ease);
}
aside.dw-sidebar .dw-menu-arrow {
	margin-left: auto;
	padding-left: 6px;
	font-size: 11px;
	opacity: .8;
}

aside.dw-sidebar a.disabled {
	opacity: .45;
	pointer-events: none;
}

/* Logo */
aside.dw-sidebar ul.dw-menu > li.dw-menu-logo > a.dw-logo-link {
	justify-content: center;
	min-height: 0;
	padding: calc(var(--dw-menu-pad-y) - 5px) 20px;   /* 20px a los lados: la pastilla de contraer no pisa el logo */
	background: transparent;
}
aside.dw-sidebar .dw-logo-link img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: var(--dw-menu-logo);
}
aside.dw-sidebar .dw-logo-link .dw-logo-full { display: block; }
aside.dw-sidebar .dw-logo-link .dw-logo-compact { display: none; }

/* Usuario: siempre al fondo */
aside.dw-sidebar ul.dw-menu > li.dw-menu-user {
	margin-top: auto;
	border-top: 1px solid var(--dw-line);
}
aside.dw-sidebar ul.dw-menu > li.dw-menu-user > a {
	border-bottom: 0;
	min-height: 0;
}
.dw-avatar {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: var(--dw-menu-foto);
	height: var(--dw-menu-foto);
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	color: #fff;
	font-size: calc(var(--dw-menu-foto) * .4);
	font-weight: 700;
	text-transform: uppercase;
}

aside.dw-sidebar ul.dw-menu > li.dw-menu-logo > a:hover,
aside.dw-sidebar ul.dw-menu > li.dw-menu-user > a:hover {
	background: transparent;
}
aside.dw-sidebar ul.dw-menu > li.dw-menu-user:hover > a,
aside.dw-sidebar ul.dw-menu > li.dw-menu-user:focus-within > a {
	background: transparent;
}

/* Submenús: position:fixed (los coloca el JS de barra_lateral.tpl) para que el scroll del menú no los recorte */
aside.dw-sidebar li.dw-sub { position: relative; }
aside.dw-sidebar li.dw-sub > ul {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1003;
	min-width: 210px;
	max-height: calc(100vh - 24px);
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--dw-blue-100);
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(3, 77, 150, .15);
}
aside.dw-sidebar li.dw-sub:hover > ul,
aside.dw-sidebar li.dw-sub:focus-within > ul {
	display: block;
}
aside.dw-sidebar li.dw-sub > ul > li { list-style: none; }
aside.dw-sidebar li.dw-sub > ul > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 15px;
	background: #fff;
	color: var(--dw-fg-2);
	font-size: var(--dw-sub-fuente);
	font-weight: 400;
	white-space: nowrap;
	text-decoration: none;
}
aside.dw-sidebar li.dw-sub > ul > li > a > i {
	flex: none;
	padding-right: 6px;
	font-size: var(--dw-menu-icono);
	color: var(--dw-blue);
}
aside.dw-sidebar li.dw-sub > ul > li > a:hover,
aside.dw-sidebar li.dw-sub > ul > li > a:focus-visible,
aside.dw-sidebar li.dw-sub > ul > li.active > a {
	background: var(--dw-blue);
	color: #fff;
}
aside.dw-sidebar li.dw-sub > ul > li > a:hover > i,
aside.dw-sidebar li.dw-sub > ul > li > a:focus-visible > i,
aside.dw-sidebar li.dw-sub > ul > li.active > a > i {
	color: #fff;
}

/* Botón redondo de contraer */
aside.dw-sidebar > .dw-sidebar-toggle {
	--dw-toggle: 28px;
	position: absolute;
	right: calc(var(--dw-toggle) / -2);
	/* a la altura de la fila del logo (mismos tokens que le dan su alto) */
	top: calc((var(--dw-menu-logo) + 3 * (var(--dw-menu-pad-y) - 5px) - var(--dw-toggle)) / 2);
	z-index: 21;
	display: none;
	align-items: center;
	justify-content: center;
	width: var(--dw-toggle);
	height: var(--dw-toggle);
	padding: 0;
	border: 3px solid #f1f6fa;
	border-radius: 50%;
	background: var(--dw-blue-600);
	box-shadow: 0 2px 6px rgba(3, 77, 150, .18);
	color: #fff;
	font-size: 12px;
	line-height: 1;
	cursor: pointer;
}
aside.dw-sidebar > .dw-sidebar-toggle i {
	transition: transform var(--dw-dur) var(--dw-ease);
}

/* Escritorio */
@media only screen and (min-width: 992px) {

	body.aside-sticky:not(.aside-compact) aside.dw-sidebar {
		top: var(--dw-aside-gap);
		bottom: var(--dw-aside-gap);
		left: var(--dw-aside-gap);
		height: auto;
		width: var(--dw-aside-w);
		border-radius: 12px;
		transition: width var(--dw-dur) var(--dw-ease);
	}

	body.aside-sticky:not(.aside-compact) #wrapper_content,
	body.aside-sticky:not(.aside-compact) #header,
	body.aside-sticky:not(.aside-compact) #js_header_spacer {
		margin-left: calc(var(--dw-aside-w) + 2 * var(--dw-aside-gap));
		transition: margin-left var(--dw-dur) var(--dw-ease);
	}
	/* el tema aparta el pie con padding-left; aquí es una tarjeta (docuwow-shell.css) y se aparta con margen */
	body:not(.aside-compact).layout-admin #footer {
		padding-left: 0;
		margin-left: calc(var(--dw-aside-w) + 2 * var(--dw-aside-gap));
		transition: margin-left var(--dw-dur) var(--dw-ease);
	}

	aside.dw-sidebar > .dw-sidebar-toggle { display: flex; }

	/* Contraída: solo iconos */
	body.layout-admin.sidebar-fluido { --dw-aside-w: var(--dw-aside-riel); }

	body.sidebar-fluido aside.dw-sidebar > .dw-sidebar-toggle i { transform: rotate(180deg); }

	body.sidebar-fluido aside.dw-sidebar .dw-menu-extra {
		max-width: 0;
		opacity: 0;
		overflow: hidden;
		white-space: nowrap;
	}
	body.sidebar-fluido aside.dw-sidebar .dw-logo-link .dw-logo-full { display: none; }
	body.sidebar-fluido aside.dw-sidebar .dw-logo-link .dw-logo-compact { display: block; max-width: 32px; }

	/* el icono se centra con padding (animable) para llegar a la vez que la columna */
	body.sidebar-fluido aside.dw-sidebar ul.dw-menu > li > a {
		gap: 0;
		padding-left: calc((var(--dw-aside-riel) - 1.25 * var(--dw-menu-icono)) / 2);
		padding-right: 0;
	}
	body.sidebar-fluido aside.dw-sidebar ul.dw-menu > li.dw-menu-user > a {
		padding-left: calc((var(--dw-aside-riel) - var(--dw-menu-foto)) / 2);
	}
	body.sidebar-fluido aside.dw-sidebar ul.dw-menu > li.dw-menu-logo > a.dw-logo-link {
		justify-content: center;
		padding-left: 0;
	}

	/* durante la animación el texto se mantiene en una línea y recortado */
	body.dw-anim aside.dw-sidebar .dw-menu-extra {
		overflow: hidden;
		white-space: nowrap;
	}
}

/* Móvil */
@media only screen and (max-width: 991px) {
	aside.dw-sidebar { width: 240px; }
}