:root {
	/* ------------------------- */
	/* Paleta Original         */
	/* ------------------------- */
	--principal-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
	--principal-background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
	--principal-text-color: #2c3e50;
	--header-background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
	--header-text-color: #ffffff;
	--header-shadow: 0 15px 35px rgba(0,0,0,0.1) --card-header-background: #ffffff;
	--card-text-color-title: #7f8c8d;
	--card-text-color-footer-text: #95a5a6;
	--card-stat-value-text-color-primary: #2c3e50;
	--card-summarize-background: #f8f9fa;
	--card-header-boder: #3498db;
	--cards-background: #ffffff;
	--card-department-border: #ecf0f1;
	--card-department-border-hover: #3498db;
	--card-department-border-hover-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.15);
	--card-department-border-top: linear-gradient(90deg, #3498db, #2ecc71);
	--card-details-label: #6c757d;
	--execute-bar: #ecf0f1;
	--close-button-background: rgba(255, 255, 255, 0.2);
	--comment-background: linear-gradient(135deg, #e3f2fd 0%, #f3e5f5 100%);
	--comment-title-color: #1976d2;
	--total-exectuced-background: #e8f5e8;
	--alert-low: #95a5a6;
	--alert-normal: #27ae60;
	--alert-high: #f39c12;
	--alert-over: #e74c3c;
	--table-department-row-1: 4rem;
	--table-department-row-2: 20rem;
	--table-department-row-all: 12rem;
	/* ------------------------- */
	/* === NUEVOS COLORES ===    */
	/* ------------------------- */
	/* Colores de Acento */
	--acento-principal: #3498db;
	--acento-principal-suave: #d6eaf8;
	--acento-principal-oscuro: #2874a6;
	--card-department-border-top: linear-gradient(90deg, #3498db, #2ecc71);
	--comment-title-color: #1976d2;
	/* Fondos para Alertas y Notificaciones */
	--exito-fondo: #d4efdf;
	--advertencia-fondo: #fcf3cf;
	--peligro-fondo: #fadbd8;
	/* Estados de UI y Accesibilidad */
	--foco-anillo: #85c1e9;
	--deshabilitado-fondo: #e5e7e9;
	--deshabilitado-texto: #abb2b9;
	--close-button-background: rgba(255, 255, 255, 0.2);
	/* Escala de Grises Sistemática */
	--gris-900: #2c3e50; /* Para texto principal oscuro */
	--gris-700: #5D6D7E; /* Para texto secundario y subtítulos */
	--gris-500: #95a5a6; /* Para texto de ayuda, placeholders, iconos inactivos */
	--gris-300: #e5e7e9; /* Para bordes sutiles y divisores */
	--gris-100: #f8f9f9; /* Para fondos de sección y filas de tabla pares */
	--blanco: #ffffff; /* Para texto sobre fondos oscuros y fondos base */
	--tabla-header-fondo: #34495e;
	--tabla-header-texto: var(--blanco);
	--tabla-fila-impar-fondo: var(--blanco);
	--tabla-fila-par-fondo: var(--gris-100);
	--tabla-fila-hover-fondo: var(--acento-principal-suave);
	--tabla-texto-cuerpo: var(--gris-900);
	--tabla-texto-encabezado: var(--gris-700); /* Lo mantenemos separado por si acaso */
	--tabla-borde-color: var(--gris-300);
}

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	font-size: 62.5%;
	/*height: fit-content;*/
	height: 100vh;
}

body {
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	padding: 0;
	background: var(--principal-background);
	color: var(--principal-text-color);
	height: 100vh;
	/*height: 100%;*/
}

#app {
	/*height: 100%;*/
}

.page {
	height: 100%;
}

.main-container {
	/*height: fit-content;*/
	overflow: hidden;
	padding: 2rem;
}

.budget-container {
	display: flex;
	flex-direction: column;
	height: fit-content;
	max-height: 100%;
	max-width: 140rem;
	margin: 0 auto;
	background: var(--card-header-background);
	border-radius: 1.5rem;
	padding: 0;
	box-shadow: var(--header-shadow);
	overflow: hidden;
}

.main-article {
	width: 100%;
	padding: 0;
	overflow: auto;
}

.exec-normal {
	background: var(--alert-normal);
}

.exec-low {
	background: var(--alert-low);
}

.exec-high {
	background: var(--alert-high);
}

.exec-over {
	background: var(--alert-over);
}

.exec-normal-text {
	color: var(--alert-normal);
}

.exec-low-text {
	color: var(--alert-low);
}

.exec-high-text {
	color: var(--alert-high);
}

.exec-over-text {
	color: var(--alert-over);
}

.loading-data {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	height: 100%;
	padding: 1rem;
	font-size: 3rem;
}

	.loading-data div {
		height: 4rem;
		width: 4rem;
	}

/*-----------------------------------------------------------------*/
/*----------------------Encabezado---------------------------------*/
/*-----------------------------------------------------------------*/

.header {
	text-align: center;
	background: var(--header-background);
	color: var(--header-text-color);
	padding: 1rem 2rem;
	margin: 0;
}

	.header h1 {
		font-size: 3.5rem;
		font-weight: 700;
		margin: 0 0 1rem 0;
	}

	.header p {
		margin: 0;
		font-size: 1.8rem;
		opacity: 0.9;
	}

	.header section {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 1rem;
	}

/*-----------------------------------------------------------------*/
/*------------------Métricas Resumen-------------------------------*/
/*-----------------------------------------------------------------*/

.summary-stats, .cards-departments {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: 2rem;
	justify-content: center;
	padding: 3rem;
	background: var(--card-summarize-background);
}

.stat-card, .card-department {
	display: flex;
	flex-direction: column;
	background: var(--card-headr-background);
	padding: 2rem;
	border-radius: 1rem;
	text-align: center;
	box-shadow: var(--principal-shadow);
	border-left: 0.4rem solid var(--card-header-boder);
}

.stat-card-body {
	/* === PASO 2: HAZ QUE ESTA SECCIÓN CREZCA === */
	flex-grow: 1;
	/* Opcional pero recomendado: centrar verticalmente el contenido dentro de este espacio */
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
}

	.stat-card-body h2 {
		font-size: 1.5rem;
		color: var(--card-text-color-title);
		font-weight: 600;
		margin: 0;
	}

.stat-card .stat-value {
	font-size: 2.9rem;
	font-weight: bold;
	margin: 0;
}

.stat-card small {
	font-size: 1.3rem;
	color: var(--card-text-color-footer-text);
	margin: 0;
}

/* El footer se alinea automáticamente al final gracias a los pasos anteriores */
.stat-card footer {
	text-align: center;
	margin-top: 1rem; /* Un poco de espacio extra arriba */
}

/*-----------------------------------------------------------------------------*/
/*------------------Presupuesto por departamento-------------------------------*/
/*-----------------------------------------------------------------------------*/

.cards-departments {
	grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
	flex: 1;
	background: var(--cards-background);
	align-content: flex-start;
}

.card-department {
	flex: 1 1 25rem;
	border-left: none;
	cursor: pointer;
	border: 0.2rem solid var(--card-department-border);
	transition: all 0.3s ease;
	position: relative;
	overflow: hidden;
	box-shadow: none;
	max-height: 20rem;
	gap: 0.5rem;
}

	.card-department::before {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 0.4rem;
		background: var(--card-department-border-top);
	}

	.card-department:hover {
		border-color: var(--card-department-border-hover);
		transform: translateY(-0.5rem);
		box-shadow: var(--card-department-border-hover-shadow);
	}

	.card-department h3 {
		margin: 0;
		color: var(--card-stat-value-text-color-primary);
		font-size: medium;
		font-weight: 600;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.card-department .card-actions {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}

		.card-department .card-actions > * {
			width: 8rem;
		}

		.card-department .card-actions .btn-card-actions,
		.card-department .card-actions .btn-get-details,
		.card-department .card-actions .dropdown-label,
		.card-department .card-actions .dropdown-item-informe {
			font-size: small;
		}

		.card-department .card-actions .btn-card-actions {
			background: var(--alert-normal);
			color: var(--gris-100);
		}

		.card-department .card-actions .dropdown-item-informe {
			display: block;
			text-wrap: auto;
			width: 20rem;
		}

	.card-department .budget {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		font-size: medium;
		font-weight: bold;
		color: var(--alert-normal);
		margin: 0;
		align-self: self-start;
	}

.card-informes-list {
	position: absolute;
	top: 0;
	left: 0;
	/*height: 100%;
	width: 100%;*/
	z-index: 10;
	display: flex;
	flex-direction: column;
}

.background-informes-list {
	position: fixed;
	top: 50%;
	left: 50%;
	background: rgba(0, 0, 0, 0.7);
	height: 100%;
	width: 100%;
	transform: translate(-50%, -50%);
}

.informes-container {
	background: var(--cards-background);
	z-index: 2;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 1.5rem;
	/*box-shadow: var(--principal-shadow);*/
	max-width: 90vh;
	max-height: 90vh;
	overflow: auto;
	padding: 2rem;
	border-top: 1.5rem solid var(--card-header-boder);
}

	.informes-container .btn-cerrar {
		background: var(--alert-low);
		font-size: medium;
		padding: 0.4rem 2rem;
		color: var(--gris-100);
	}

		.informes-container .btn-cerrar:hover {
			background: var(--gris-300);
			color: var(--gris-900);
			/*border: 1px solid var(--gris-900);*/
		}

	.informes-container .informe-item {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		font-size: large;
		padding: 0.5rem;
		border-radius: 0.5rem;
		transition: background 0.3s ease, color 0.3s ease;
	}

		.informes-container .informe-item:hover {
			background: var(--acento-principal-suave);
		}

	.informes-container .fecha-informe {
		font-size: small;
		color: var(--gris-700);
	}

.informes-list ul {
	background: var(--card-summarize-background);
	border-radius: 1rem;
	padding: 1rem;
}

.informes-container li {
	/*margin-left: 3rem;*/
	/*margin-bottom: 1rem;*/
}

.card-department .execution {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	font-size: small;
	color: var(--card-text-color-title);
}

.card-department .execution-fill {
	height: 100%;
	border-radius: 0.3rem;
	transition: width 0.3s ease;
}

.card-department .execution-bar {
	width: 100%;
	height: 0.6rem;
	background: var(--execute-bar);
	border-radius: 0.3rem;
	margin: 1rem 0 0.5rem 0;
	overflow: hidden;
}

/*-----------------------------------------------------------------------------*/
/*----------------------Detalle del departamento-------------------------------*/
/*-----------------------------------------------------------------------------*/
.details-deparment-container {
	display: block;
	position: fixed;
	z-index: 10;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.7);
}

.details-deparment {
	/*display: block;*/
	display: flex;
	flex-direction: column;
	width: fit-content;
	max-width: 100%;
	height: 90vh;
	max-height: 90vh;
	position: fixed;
	background: var(--cards-background);
	padding: 0;
	padding-left: 0;
	padding-right: 0;
	border-radius: 1.5rem;
	overflow: hidden;
	z-index: 20;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

	.details-deparment header h3 {
		font-size: 2.6rem;
		font-weight: 700;
		margin: 0;
	}

	.details-deparment > .header {
		flex: 0 0 auto;
	}

	.details-deparment .header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

.btn-cerrar, .btn-reload {
	border-radius: 50%;
	background: var(--close-button-background);
	padding: 0.8rem;
	align-self: center;
	fill: var(--close-button-background);
}

	.btn-cerrar svg {
	}

	.btn-cerrar:hover, .btn-reload:hover {
		background: rgba(255,255,255,0.3);
	}

.details-main-content {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 2rem;
	max-height: 100%;
	/*overflow-y: auto;*/
	overflow: hidden;
}

.details-main-content > div {
	height: 100%;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
}

.details-main-content > div nav button {
	font-size: 1.6rem;
}

.details-main-content > div .tab-content {
	overflow: hidden; /* Habilita scroll cuando el contenido excede la altura */
	height: 100%; /* Ocupa toda la altura disponible del contenedor */
	flex: 1; /* Permite crecer y ocupar el espacio disponible */
	min-height: 0; /* Importante para que flex pueda reducir el tamaño si es necesario */
	display: flex;
	flex-direction: column;
}

.details-main-content > div .tab-content .tab-pane {
	height: 100%;
}

.details-main-content .table-container {
	overflow: hidden;
	border-radius: 1rem;
	height: 100%;
	flex-shrink: 0;
	/*flex-grow: 0;*/
	/*flex: 1;*/
	/*max-height: 70%;*/
	display: flex;
}

/*Color del scroll bar*/
.department-details-table {
	overflow: auto;
	/*border-top: 1rem solid var(--tabla-header-fondo);
	border-bottom: 1rem solid var(--tabla-header-fondo);*/
	height: 100%;
	width: 100%;
	max-width: fit-content;
	/* Para Firefox */
	/*scrollbar-width: thin;*/
	scrollbar-color: var(--gris-100) var(--tabla-header-fondo);
}

	/* Para navegadores basados en WebKit (Chrome, Edge, Safari) */
	.department-details-table::-webkit-scrollbar {
		height: 10px;
		background: var(--tabla-header-fondo);
	}

	.department-details-table::-webkit-scrollbar-thumb {
		background: var(--gris-100);
		border-radius: 8px;
	}

		.department-details-table::-webkit-scrollbar-thumb:hover {
			background: var(--gris-100);
		}

	.department-details-table table {
		height: 100%;
		table-layout: fixed;
		font-size: small;
		border-collapse: separate;
		border-spacing: 0;
	}

	.department-details-table th button,
	.department-details-table th button:hover,
	.department-details-table th button:active {
		border: none;
		box-shadow: none;
		color: white;
		margin: 0;
		padding: 0;
	}

	.department-details-table thead tr {
		position: sticky;
		top: 0;
		background: var(--tabla-header-fondo);
		color: var(--tabla-header-texto);
		z-index: 5;
	}

	.department-details-table thead th {
		width: var(--table-department-row-all);
		min-width: var(--table-department-row-all);
		max-width: var(--table-department-row-all);
		padding: 0.8rem;
	}

	.department-details-table th > div {
		display: flex;
		justify-content: right;
		gap: 0.4rem;
		min-width: 0;
		max-width: 100%;
		text-overflow: ellipsis;
		/*white-space: nowrap;*/
		overflow: hidden;
	}

		.department-details-table th > div span {
			text-overflow: ellipsis;
			/*white-space: nowrap;*/
			overflow: hidden;
		}

	.department-details-table th:first-child {
		width: var(--table-department-row-1);
		min-width: var(--table-department-row-1);
		max-width: var(--table-department-row-1);
	}

	.department-details-table th:nth-child(2) {
		width: var(--table-department-row-2);
		min-width: var(--table-department-row-2);
		max-width: var(--table-department-row-2);
	}

	.department-details-table td:nth-child(1) {
		text-align: center;
	}

	.department-details-table td:nth-child(2) {
		text-align: start;
	}

	.department-details-table tbody tr {
		background: var(--tabla-fila-impar-fondo);
	}

		.department-details-table tbody tr:hover {
			background: var(--tabla-fila-hover-fondo);
		}

	.department-details-table td {
		text-align: end;
		align-content: center;
		padding: 0.4rem;
		border-bottom: 1px solid var(--gris-300);
	}

	.department-details-table .total-col {
		position: sticky;
		right: 0;
		background: inherit;
		display: flex;
		flex-direction: row;
		gap: 0.8rem;
		align-items: center;
		justify-content: end;
	}

	.department-details-table .total-col small {
		width: 5rem;
	}

	.department-details-table th:nth-child(1),
	.department-details-table td:nth-child(1) {
		position: sticky;
		left: 0;
		background: inherit;
	}

	.department-details-table th:nth-child(2),
	.department-details-table td:nth-child(2) {
		position: sticky;
		left: var(--table-department-row-1);
		background: inherit;
	}

	.department-details-table th:nth-child(3),
	.department-details-table td:nth-child(3) {
		position: sticky;
		left: calc(var(--table-department-row-1) + var(--table-department-row-2));
		background: inherit;
		box-shadow: 5px 0 5px -5px rgba(0, 0, 0, .12);
		border-inline-end: 1px solid #dfe5ec;
	}

	.department-details-table th:nth-child(3), 
	.department-details-table tfoot td:nth-child(3) {
		border-inline-end-color: rgba(255, 255, 255, 0.2);
	}

	

	.department-details-table th:last-child,
	.department-details-table td:last-child {
		position: sticky;
		right: 0;
		background: inherit;
		box-shadow: -5px 0 5px -5px rgba(0, 0, 0, .12);
		border-inline-start: 1px solid #dfe5ec;
	}

	.department-details-table th:last-child,
	.department-details-table tfoot td:last-child {
		border-inline-start-color: rgba(255, 255, 255, 0.2);
	}

	.department-details-table tfoot tr {
		background: var(--tabla-header-fondo);
		color: var(--tabla-header-texto);
		position: sticky;
		bottom: 0;
	}

	.department-details-table tfoot td {
		padding: 1rem;
	}

	.department-details-table tbody td span.max-2-lines {
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: normal;
		line-height: 1.1;
	}

	.department-details-table tbody .expanded-detail-row {
		background: var(--tabla-fila-par-fondo);
	}

		.department-details-table tbody .expanded-detail-row td {
			font-style: italic;
			color: var(--gris-500);
			font-size: 1.2rem
		}

	.department-details-table .col-presupuesto-mes {
		display: flex;
		flex-direction: row-reverse;
		gap: 0.8rem;
		align-items: center;
	}

		.department-details-table .col-presupuesto-mes strong {
			width: 5rem;
		}

		.department-details-table .col-presupuesto-mes small {
			color: var(--acento-principal-oscuro);
		}

.details-summary-and-analysis {
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
	/*max-height: 15rem;*/
	overflow: auto;
	/*min-height: 15rem;*/
	/*flex: 1 1 15rem;*/
	/*flex-shrink: 0;*/
	flex-grow: 1;
	min-height: 0;
}

.details-summary {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.5rem
}

	.details-summary .metric {
		background: var(--card-summarize-background);
		padding: 1.5rem;
		border-radius: 1rem;
		text-align: center;
		border-left: 0.4rem solid var(--card-header-boder);
	}

	.details-summary .metric-label {
		color: var(--card-text-color-title);
		font-size: small;
		margin: 0;
	}

	.details-summary .metric-value {
		font-size: x-large;
		font-weight: bold;
	}

.comment-analisis {
	background: var(--comment-background);
	padding: 2rem;
	border-radius: 1rem;
	border-left: 0.4rem solid var(--card-header-boder);
}

	.comment-analisis .comment-title {
		color: var(--comment-title-color);
		font-weight: bold;
		margin-bottom: 1rem;
		font-size: 1.6rem;
	}

	.comment-analisis p {
		margin: 0;
		font-size: 1.6rem;
	}

/*+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/

/*estilos para formato celular*/
@media (max-width: 768px) {
	.details-main-content {
		padding: 3rem 0;
	}

	.department-details-table th:nth-child(1) {
		width: 12rem;
	}

	.informes-container {
		left: 0;
		top: 0;
		transform: translate(0, 0);
	}
}