﻿
/* SIGCP - Layout / Sidebar corporativo v1
   Capa aislada: no altera estilos de formularios, tablas o vistas.
   Paleta: azul institucional, blanco y turquesa. */

:root {
	--sigcp-sidebar-width: 258px;
	--sigcp-sidebar-top: 70px;
	--sigcp-sidebar-ink: #142b46;
	--sigcp-sidebar-teal: #168b91;
}

/* Encabezado fijo visualmente y navegación lateral independiente. */
.sigcp-topbar {
	position: sticky;
	top: 0;
	z-index: 1040;
}

.sigcp-shell {
	align-items: stretch;
}

.sigcp-sidebar {
	position: sticky;
	top: var(--sigcp-sidebar-top);
	align-self: flex-start;
	height: calc(100vh - var(--sigcp-sidebar-top));
	max-height: calc(100vh - var(--sigcp-sidebar-top));
	width: var(--sigcp-sidebar-width);
	flex: 0 0 var(--sigcp-sidebar-width);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: #b9c9d8 transparent;
	padding: 17px 11px 24px;
	background: #fff;
	border-right: 1px solid #dce5ee;
	box-shadow: 3px 0 14px rgba(20,43,70,.035);
}

	.sigcp-sidebar::-webkit-scrollbar {
		width: 6px;
	}

	.sigcp-sidebar::-webkit-scrollbar-thumb {
		background: #b9c9d8;
		border-radius: 10px;
	}

	.sigcp-sidebar::-webkit-scrollbar-track {
		background: transparent;
	}

.sigcp-main {
	min-width: 0;
}

/* Etiquetas de agrupación */

.sigcp-sidebar .sigcp-menu-label {
	margin: 11px 0 5px;
	padding: 12px 11px 6px;
	color: #516b85;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .115em;
	line-height: 1.5;
}

/* Grupos y enlaces principales */

.sigcp-sidebar .sigcp-nav-group {
	margin: 3px 0;
}

.sigcp-sidebar .sigcp-nav-group-title,
.sigcp-sidebar > .sigcp-nav-link {
	display: flex;
	align-items: center;
	gap: 11px;
	min-height: 43px;
	padding: 10px 11px;
	border-radius: 9px;
	color: var(--sigcp-sidebar-ink);
	font-size: 13px;
	font-weight: 650;
	line-height: 1.45;
	transition: background-color .16s ease, color .16s ease;
}

	.sigcp-sidebar .sigcp-nav-group-title:hover,
	.sigcp-sidebar > .sigcp-nav-link:hover {
		background: #e8f4f6;
		color: #075b67;
	}

.sigcp-sidebar .sigcp-nav-group[open] > .sigcp-nav-group-title {
	background: #edf4f8;
	color: #142b46;
}

/* Iconografía */

.sigcp-sidebar .sigcp-nav-icon {
	display: inline-flex;
	flex: 0 0 20px;
	align-items: center;
	justify-content: center;
	width: 20px;
	font-size: 14px;
	color: #284c70;
}

.sigcp-sidebar .sigcp-nav-group-title > span:nth-child(2) {
	flex: 1;
	min-width: 0;
}

.sigcp-sidebar .sigcp-nav-chevron {
	flex: 0 0 8px;
}

/* Submenús */

.sigcp-sidebar .sigcp-nav-submenu {
	margin: 4px 0 10px 18px;
	padding-left: 9px;
	border-left: 1px solid #d8e5ef;
}

	.sigcp-sidebar .sigcp-nav-submenu .sigcp-nav-link {
		min-height: 36px;
		margin: 2px 0;
		padding: 9px 11px;
		border-radius: 8px;
		border-left: 3px solid transparent;
		color: #24435f;
		font-size: 12px;
		font-weight: 550;
	}

		.sigcp-sidebar .sigcp-nav-submenu .sigcp-nav-link:hover {
			background: #e9f5f6;
			color: #075d67;
		}

		/* Opción activa */

		.sigcp-sidebar .sigcp-nav-link.activo,
		.sigcp-sidebar .sigcp-nav-submenu .sigcp-nav-link.activo {
			background: #dff1f2;
			border-left-color: var(--sigcp-sidebar-teal);
			color: #075b66;
			font-weight: 750;
		}

/* Mensajes informativos */

.sigcp-sidebar .sigcp-nav-hint {
	margin: 8px 5px 8px 8px;
	padding: 10px;
	border-radius: 7px;
	background: #f3f6fa;
	color: #647b92;
	font-size: 10px;
	line-height: 1.6;
}

/* Accesibilidad */

.sigcp-sidebar .sigcp-nav-group-title:focus-visible,
.sigcp-sidebar .sigcp-nav-link:focus-visible {
	outline: 2px solid var(--sigcp-sidebar-teal);
	outline-offset: 2px;
}

/* Adaptación a dispositivos móviles */

@media (max-width: 850px) {
	.sigcp-sidebar {
		display: none;
		position: fixed;
		top: var(--sigcp-sidebar-top);
		left: 0;
		bottom: 0;
		z-index: 1035;
		height: calc(100dvh - var(--sigcp-sidebar-top));
		max-height: calc(100dvh - var(--sigcp-sidebar-top));
		width: min(290px, 88vw);
		flex: none;
		box-shadow: 6px 12px 30px rgba(20,43,70,.20);
	}

		.sigcp-sidebar.sigcp-open {
			display: block;
		}
}

/* Accesibilidad: movimiento reducido */

@media (prefers-reduced-motion: reduce) {
	.sigcp-sidebar .sigcp-nav-group-title,
	.sigcp-sidebar .sigcp-nav-link {
		transition: none;
	}
}

/* ============================================
   SIGCP - ICONOGRAFÍA DEL MENÚ LATERAL
   ============================================ */

.sigcp-sidebar .sigcp-nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	color: #284c70;
}

	.sigcp-sidebar .sigcp-nav-icon .bi {
		display: inline-block;
		font-size: 15px;
		line-height: 1;
	}

.sigcp-sidebar .sigcp-nav-group-title {
	display: flex;
	align-items: center;
	gap: 11px;
}

	.sigcp-sidebar .sigcp-nav-group-title > span:nth-child(2) {
		flex: 1;
		min-width: 0;
	}

/* Grupo expandido */

.sigcp-sidebar .sigcp-nav-group[open]
.sigcp-nav-icon {
	color: #173b5c;
}

/* Opción activa */

.sigcp-sidebar .sigcp-nav-link.activo
.sigcp-nav-icon {
	color: #087e87;
}

/* Indicador de expansión */

.sigcp-sidebar .sigcp-nav-chevron {
	margin-left: auto;
	color: #66819a;
	font-size: 12px;
	transition: transform .18s ease;
}

.sigcp-sidebar .sigcp-nav-group[open]
.sigcp-nav-chevron {
	transform: rotate(180deg);
}
/* ======================================================
   SIGCP - RECUPERACIÓN DE ICONOGRAFÍA DEL MENÚ LATERAL
   ====================================================== */

.sigcp-sidebar .sigcp-nav-icon.glyphicon {
	display: inline-block;
	flex: 0 0 18px;
	width: 18px;
	min-width: 18px;
	font-family: "Glyphicons Halflings" !important;
	font-size: 14px;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	text-align: center;
	color: #284c70;
	visibility: visible;
	opacity: 1;
}

	.sigcp-sidebar .sigcp-nav-icon.glyphicon::before {
		display: inline-block;
		font-family: "Glyphicons Halflings" !important;
		font-style: normal;
		font-weight: normal;
		visibility: visible;
		opacity: 1;
	}

	.sigcp-sidebar .sigcp-nav-icon.glyphicon + span {
		min-width: 0;
	}
/* ==================================================
   SIGCP - ICONOGRAFÍA CORPORATIVA BOOTSTRAP 5
   ================================================== */

.sigcp-sidebar .sigcp-nav-icon.bi {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	font-family: "bootstrap-icons" !important;
	font-size: 15px;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	color: #284c70;
	opacity: 1;
	visibility: visible;
}

	.sigcp-sidebar .sigcp-nav-icon.bi::before {
		display: inline-block;
		line-height: 1;
	}

.sigcp-sidebar .sigcp-nav-link:hover .sigcp-nav-icon.bi,
.sigcp-sidebar .sigcp-nav-link.active .sigcp-nav-icon.bi {
	color: #087e8b;
}
/* SIGCP - Iconografía del sidebar - Bootstrap 5 */

.sigcp-sidebar .sigcp-nav-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	min-width: 20px;
	height: 20px;
	margin-right: 10px;
	font-size: 15px;
	line-height: 1;
	color: #173456;
	flex-shrink: 0;
}

	.sigcp-sidebar .sigcp-nav-icon.bi::before {
		display: inline-block;
		font-family: "bootstrap-icons" !important;
		font-style: normal;
		font-weight: normal !important;
		line-height: 1;
	}

.sigcp-sidebar .active .sigcp-nav-icon,
.sigcp-sidebar .sigcp-nav-link.active .sigcp-nav-icon {
	color: #087f91;
}