/* ===========================================================================
   BARRA LATERAL
   =========================================================================== */

.lateral{
	position: sticky;
	top: 0;
	display: flex;
	flex-direction: column;
	height: 100vh;
	min-width: 0;
	border-right: 1px solid var(--linea);
	background:
		linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015) 40%, transparent),
		rgba(6,10,20,.55);
	backdrop-filter: blur(22px);
	box-shadow: 1px 0 0 rgba(255,255,255,.03), 18px 0 50px rgba(0,0,0,.30);
	z-index: 40;
}

/* --- Marca. --- */
.lateral-marca{
	display: flex;
	align-items: center;
	gap: 12px;
	height: var(--superior-alto);
	padding: 0 20px;
	flex: 0 0 auto;
	border-bottom: 1px solid var(--linea);
}
.marca-sello{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px; height: 40px;
	flex: 0 0 auto;
	border-radius: var(--radio-sm);
	background:
		linear-gradient(180deg, rgba(255,255,255,.22), transparent 60%),
		linear-gradient(135deg, var(--marca-1), var(--marca-2));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.3), var(--sombra-marca);
	color: #fff;
	font-size: 16px;
	font-weight: 900;
	letter-spacing: -.04em;
}
.marca-copia{ min-width:0; overflow:hidden; }
.marca-nombre{
	display:block;
	font-size: 15px;
	font-weight: 800;
	letter-spacing: -.02em;
	white-space: nowrap;
}
.marca-bajada{
	display:block;
	font-size: 11.5px;
	color: var(--texto-tenue);
	white-space: nowrap;
}

/* --- Navegación. --- */
.lateral-nav{
	flex: 1 1 auto;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 16px 12px;
}
.lateral-nav::-webkit-scrollbar{ width: 6px; }

.nav-grupo{ margin-bottom: 20px; }
.nav-grupo:last-child{ margin-bottom: 0; }
.nav-grupo-titulo{
	padding: 0 10px 8px;
	font-size: 10.5px;
	font-weight: 750;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: var(--texto-tenue);
	white-space: nowrap;
}

.nav-enlace{
	position: relative;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 42px;
	padding: 0 12px;
	margin-bottom: 2px;
	border-radius: var(--radio-sm);
	color: var(--texto-suave);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	transition: all var(--transicion);
}
.nav-enlace .icono{ color: var(--texto-tenue); transition: color var(--transicion); }
.nav-enlace:hover{
	color: var(--texto);
	background: var(--superficie-2);
	box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.nav-enlace:hover .icono{ color: var(--texto); }

.nav-enlace.esta-activo{
	color: var(--texto);
	background:
		linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)),
		linear-gradient(100deg, rgba(var(--marca-1-rgb), .22), rgba(var(--marca-2-rgb), .10));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 6px 18px rgba(0,0,0,.26);
}
.nav-enlace.esta-activo .icono{ color: var(--marca-1); }
/* Guía luminosa a la izquierda del elemento activo. */
.nav-enlace.esta-activo::before{
	content:"";
	position:absolute;
	left: -12px;
	top: 50%;
	transform: translateY(-50%);
	width: 3px;
	height: 22px;
	border-radius: 0 3px 3px 0;
	background: linear-gradient(180deg, var(--marca-1), var(--marca-2));
	box-shadow: 0 0 14px rgba(var(--marca-1-rgb), .8);
}

.nav-contador{
	margin-left: auto;
	min-width: 22px;
	height: 20px;
	padding: 0 7px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radio-pil);
	background: rgba(var(--peligro-rgb), .16);
	border: 1px solid rgba(var(--peligro-rgb), .3);
	color: var(--peligro);
	font-size: 11px;
	font-weight: 750;
}

/* --- Pie: usuario. --- */
.lateral-pie{
	flex: 0 0 auto;
	padding: 12px;
	border-top: 1px solid var(--linea);
}

.tarjeta-usuario{
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 10px;
	border: 1px solid var(--linea);
	border-radius: var(--radio-md);
	background: var(--superficie);
	box-shadow: var(--sombra-interior), var(--sombra-1);
	margin-bottom: 0;
	min-width: 0;
}
.usuario-avatar{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px; height: 36px;
	flex: 0 0 auto;
	border-radius: var(--radio-sm);
	background:
		linear-gradient(180deg, rgba(255,255,255,.2), transparent 60%),
		linear-gradient(135deg, var(--marca-2), var(--marca-1));
	box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 4px 12px rgba(0,0,0,.3);
	color: #fff;
	font-size: 12.5px;
	font-weight: 750;
}
.usuario-copia{ min-width:0; overflow:hidden; }
.usuario-nombre{
	display:block;
	font-size: 13.5px;
	font-weight: 700;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.usuario-rol{
	display:block;
	font-size: 11.5px;
	color: var(--texto-tenue);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.btn-plegar{
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	height: 38px;
	padding: 0 12px;
	border-radius: var(--radio-sm);
	color: var(--texto-tenue);
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	transition: all var(--transicion);
}
.btn-plegar:hover{ color: var(--texto); background: var(--superficie-2); }
.btn-plegar .icono{ transition: transform var(--transicion-lenta); }

/* El cajón móvil conserva siempre los rótulos completos. */
@media (min-width: 1025px){
/* --- Estado plegado. --- */
.esta-plegado .marca-copia,
.esta-plegado .nav-enlace > span,
.esta-plegado .usuario-copia,
.esta-plegado .btn-plegar > span{ display: none; }
.esta-plegado .nav-grupo-titulo{ visibility: hidden; }
.esta-plegado .lateral-marca,
.esta-plegado .nav-enlace,
.esta-plegado .tarjeta-usuario,
.esta-plegado .btn-plegar{ justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
.esta-plegado .nav-grupo-titulo{ height: 10px; padding: 0; }
.esta-plegado .btn-plegar .icono{ transform: rotate(180deg); }

/* Rótulo flotante al pasar el puntero con la barra plegada. */
.esta-plegado .nav-enlace{ position: relative; }
.esta-plegado .nav-enlace::after{
	content: attr(data-rotulo);
	position: absolute;
	left: calc(100% + 12px);
	top: 50%;
	transform: translateY(-50%) scale(.94);
	padding: 7px 12px;
	border: 1px solid var(--linea-fuerte);
	border-radius: var(--radio-xs);
	background: var(--fondo-4);
	box-shadow: var(--sombra-2);
	font-size: 12.5px;
	font-weight: 600;
	color: var(--texto);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: all var(--transicion);
	z-index: 60;
}
.esta-plegado .nav-enlace:hover::after{ opacity:1; visibility:visible; transform: translateY(-50%) scale(1); }

}

.lateral-control{ flex: 0 0 auto; padding: 8px 12px; border-bottom: 1px solid var(--linea); }
.lateral-nav{ min-height: 0; }
@media (max-width: 1024px){ .lateral-control{ display: none; } }