/*Hoja de estilo global*/
/*Styles.css*/
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Colores */
:root {
	--color-primary: #003399; /* Azul oscuro original */
	--color-primary-light: #0055cc; /* Variante más clara de Azul */
	--color-primary-dark: #012d5e; /* Variante más oscura de Azul */
	--color-blue-light: #99CCFF;
	--color-secondary: #e60000; /* Rojo del logo original */
	--color-secondary-light: #ff3333; /* Variante más clara de Rojo */
	--color-secondary-dark: #b30000; /* Variante más oscura de Rojo */

	--color-text: #333333; /* Gris oscuro para texto */
	--color-text-light: #DDDDDD; /* Gris medio */
	--color-text-middle: #A9A9A9;
	--color-background: #ffffff; /* Fondo blanco */

	--color-selected-item: #cecece;
	--color-unselected-item: #c1d5eb;
	--color-button-secundary: #6891ca;
	--ancho-tabla-productos: 70rem;
	--heigth-header: 6rem;
	--heigth-header-mobile: 5rem;
	--primary-shadow: 2px 2px 6px 1px gray;
	--secundary-shadow: 0px 0px 5px 0px gray;
	--heigth-nav-tab: 5rem;
	--heigth-button-save-cancel-container: 10rem;
	--button-height: 5.2rem;
	--heigth-logo: 18rem;
	--heigth-logo-mobile: 9rem;
	--color-border-table: #333333;

}


/* Fuentes */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&family=Raleway:wght@400;600;700&family=Roboto:wght@400;500;700&display=swap');

html {
	font-size: 62.5%;
}

body {
	font-family: 'Open Sans', sans-serif;
	font-size: 1.6rem;
	color: var(--color-text);
	background-color: var(--color-background);
	height: 100vh;
	grid-template:
		"messages" 1fr
		"input" auto
		"keyboard" env(keyboard-inset-height, 0px);
}

h1, h2, h3 {
	font-family: 'Raleway', sans-serif;
}

/* Estilos de texto */
h1 {
	font-size: 3.6rem;
	font-weight: 700;
	color: var(--color-primary);
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

h2 {
	font-size: 3rem;
	font-weight: 600;
	color: var(--color-primary);
}

h3 {
	font-size: 2.4rem;
	font-weight: 600;
	color: var(--color-primary);
}

p, span {
	font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.6;
	color: var(--color-text);
}

small {
	font-size: 1.4rem;
	color: var(--color-text-light);
}

a {
	font-size: 1.6rem;
	font-weight: 400;
	text-decoration: none; /* Removemos el subrayado para un look más limpio */
	/*color: var(--color-secondary);*/
	padding: 0.2em 0.5em; /* Agregamos un poco de padding para el efecto de hover */
	border-radius: 5px; /* Esquinas redondeadas */
	transition: background-color 0.3s; /* Transición suave */
	display: inline-block;
}

	a:hover {
		/*background-color: var(--color-secondary-light);*/ /* Usamos el tono más claro del rojo */
		text-decoration: none;
	}
.home-container {
	height: 100vh;
	width: 100%;
	display: inline-block;
	position: relative;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

.imagen-bienvenida {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0; /* para garantizar que la imagen esté detrás del texto y del botón */
	object-fit: cover;
	opacity: 0.4; /* para atenuar la imagen */
}

.welcome-text {
	position: absolute;
	top: 5%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.home-button-container .button-login {	
	width: 18rem;
	height: 6rem;
	font-size: 2.4rem;
	background-color: var(--color-secondary-light);
	border: none;
	border-radius: 5px;
	padding: 0.5rem 1.5rem;
	transition: background-color 0.3s;
	align-content: center;
	color: var(--color-text-light);
	font-weight: normal;
}

	.home-button-container .button-login:hover {
		background-color: #FFA07A; /* Coral claro */
	}

.loading-progress {
	position: relative;
	display: block;
	width: 12.8rem;
	height: 12.8rem;
	margin: 20vh auto 1.2rem auto;
}

	.loading-progress circle {
		fill: none;
		stroke: #e0e0e0;
		stroke-width: 0.8rem;
		transform-origin: 50% 50%;
		transform: rotate(-90deg);
	}

		.loading-progress circle:last-child {
			stroke: #1b6ec2;
			stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
			transition: stroke-dasharray 0.05s ease-in-out;
		}

.loading-progress-text {
	position: absolute;
	text-align: center;
	font-weight: bolder;
	font-size: larger;
	inset: calc(20vh + 5rem) 0 auto 0.2rem;
}

	.loading-progress-text:after {
		content: var(--blazor-load-percentage-text, "Cargando");
	}

.left-container {
	width: 20rem;
	min-width: 20rem;
}

button {
	background-color: var(--color-primary);
	color: #fff; /* Texto blanco */
	/*font-weight: bold;*/ /* Texto en negrita */
	font-size: 16px; /* Tamaño de fuente */
	border: none;
	border-radius: 5px; /* Bordes redondeados */
	padding: 0.4rem;
	width: 15rem; /* Ancho fijo */
	height: var(--button-height); /* Alto fijo */
	cursor: pointer; /* Cambia el cursor al pasar el mouse */
	box-shadow: var(--primary-shadow);
	transition: background-color 0.3s ease-in-out; /* Transición suave de color */
}

	button:hover {
		background-color: #0056b3; /* Cambia de color al pasar el mouse */
	}

.btn-svg {
	height: 48px;
	width: 48px;
	display: flex;
	justify-content: center;
	align-items: center;
}

/*Total de la página*/
#app {
	width: 100%;
	/*height: calc(var(--vh, 1vh) * 100);*/
	height: 100%;
}

.page {
	display: flex;
	overflow: hidden;
	/*height: calc(var(--vh, 1vh) * 100);*/
	height: 100%;
}

main {
	/*flex: 1;*/
	display: flex;
	flex-direction: column;
	/*height: calc(var(--vh, 1vh) * 100);*/
	height: 100%;
	width: calc(100% - 20rem);
}

.main-content {
	padding: 0;
	flex: 1;
}

.top-row{
	height: var(--heigth-header);
	margin-bottom: 0;
	/*padding-bottom: 2rem;*/
	display: flex;
	justify-content: end;
	align-items: center;
	background: var(--color-primary-dark);
}

.top-row-side {
	height: var(--heigth-logo);
}

.navegation-menu {
	/*height: calc(100vh - var(--heigth-logo));*/
	height: calc(100% - var(--heigth-logo));
}

.column-items-menu {
	height: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
}

.espaciador {
	flex-grow: 1;
}

/* Sidebar */
.sidebar {
	width: 100%;
	background-image: linear-gradient(to bottom, var(--color-primary-dark) 70%, #b8d0e5);
	/*height: calc(var(--vh, 1vh) * 100);*/
	height: 100%;
	position: sticky;
	top: 0;
	display: block;
}

.page .main-background-invisible {
	position:fixed;
	display: none;
	height: 100%;
	width: 100%;
	z-index: 19;
}

.user-authenticated .sidebar {
	display: block;
}


.container-fluid {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1rem;
}
/* Logo */
.website-logo {
	width: 100%;
	height: auto;
	max-width: 200px;
	/*margin-right: 1rem;*/
	background: linear-gradient(45deg, var(--color-secondary-light), var(--color-secondary-dark));
	border-radius: 1rem;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 10px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s, box-shadow 0.2s;
}

	.website-logo:hover {
		transform: scale(1.05);
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.7), 0 0 15px rgba(0, 0, 0, 0.5);
	}


.navbar-dark .navbar-toggler-icon {
	background-color: var(--color-text-light);
}

.navbar-toggler-authorized {
	display: none;
}

.navbar-brand, .navbar-brand-header {
	color: whitesmoke;
}

.menu-button {
	width: 44px;
	height: 44px;
	margin-left: 1.2rem;
}

/* Nav Items */
/* Estilos para los enlaces en el menú de navegación */
.nav-link, .menu-item {
	color: var(--color-text-light);
	padding: 1rem; /* Espaciado de los enlaces */
	text-decoration: none;
}

	.menu-item a {
		color: darkgray;
	}

	/* Estilos para los enlaces en el menú de navegación al pasar el cursor */
	.nav-link:hover {
		color: var(--color-secondary);
		background-color: var(--color-primary-light);
	}

.nav-link-side {
	width: 100%;
}

	.nav-link-side:hover {
		color: var(--color-background);
	}

.option-privacy {
	font-size: 1.4rem;
}

.menu-item-privacy {
	padding-top: 4.8rem;
}

.logo-container {
	width: 100%; /* O el tamaño que prefieras para el logo */
	height: auto;
	margin: 1rem;
}

	.logo-container a {
		display: flex;
		justify-content: center;
		width: 100%;
		background-color: transparent;
	}

.user-info h3 {
	display: inline-block;
	margin-right: 1rem;
	color: var(--color-text-light);
}

.sidebar .collapse {
	display: block;
}

/* Estilos para el menú de navegación en la franja izquierda */
nav-scrollable {
	overflow: auto;
	display: none;
}

.navbar-toggler {
	display: none;
}

/*Estilo LoginDisplay*/

.login-header {
	position: sticky;
	top: 0;
	display: flex;
	justify-content: flex-end; /* Alinea el contenido a la derecha */
	align-items: center;
	padding: 1rem 2rem;
	background-color: var(--color-primary);
	height: var(--heigth-header);
	z-index: 15;
}

.navbar-brand-header {
	display: none;
}

.login-bar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: end;
	padding: 0.5rem;
	height: var(--heigth-header);
}

/* Estilos para el texto de login */
.login-text {
	color: var(--color-secondary); /* Color azul para coincidir con el botón */
	cursor: pointer;
	transition: color 0.3s;
}

	.login-text:hover {
		color: #0056b3; /* Color azul más oscuro en hover */
	}

.user-greeting {
	font-weight: 500;
	margin-right: 1rem;
	color: var(--color-text-light);
}

.container-politicas {
	padding: 5rem;
	display: flex;
	flex-direction: column;
}

	.container-politicas h1, .container-politicas h2, .container-politicas h3 {
		padding: 3rem 0 2rem;
	}

	.container-politicas h6, .container-politicas p {
		padding-bottom: 2rem;
	}

	.container-politicas h6 {
		font-size: 2rem
	}

	.container-politicas ul {
		padding-left: 2rem;
	}

	.container-politicas button {
		margin-top: 3.2rem;
	}

.container-construction {
	padding: 4rem;
}

.content-construction {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.img-zona-construction {
	height: 16rem;
}

.horizontal-tab-container{
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
}

/*Estilos para la pagina de relaciones de roles con aplicaciones y subaplicaciones*/

.nav-tabs {
	height: var(--heigth-nav-tab);
}

.nav-tabs a {
	height: var(--heigth-nav-tab);
}

nav-pills a {
	font-size: 1.2rem;
}

.admin-tab-container {
	height: 100%;
}

	.admin-tab-container .tab-pane {
		height: 100%;
	}

.roles-tab-container .tab-pane {
	height: 100%;
}

.rolapp-container {
	width: 50rem;
}

.relaciones-container {
	display: flex;
	flex-direction: column;
}

.paginacion-content {
	box-shadow: var(--secundary-shadow);
	border-radius: 2.3rem;
	border: 1px solid var(--border-table-color);
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 5rem;
	width: 30rem;
	overflow: hidden;
}

	.paginacion-content > div {
		height: 100%;
		place-content: center;
	}
	
		.paginacion-content > div:hover {
			background: var(--color-unselected-item);
		}

		.paginacion-content > div:active {
			background: var(--color-button-secundary);
		}

	.paginacion-content > span {
		text-align: center;
		font-weight: 400;
	}

		.paginacion-content > span > input {
			width: 5rem;
			text-align: center;

		}

	.paginacion-content .desktop-info {
		display: block;
	}

	.paginacion-content .mobile-info {
		display: none;
	}

	.paginacion-content > div > a {
		display: flex;
	}

.paginacion2-content {
	width: 40rem;
}

.mfe-iframe, .iframe-container, iframe {
	width: 100%;
	height: 100%;
	border-width: 0;
}

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

.main-tab-pane {
	display: none;
}

.main-tab-pane.active {
	display: block;
}

.yes-no-dialog {
	background-color: white;
	border: 1px solid #ccc;
	padding: 20px;
	width: 300px;
	text-align: center;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 1000; /* Asegura que el diálogo esté por encima de otros elementos */
	display: none;
}

.yes-no-dialog.visible {
	display: block;
}

.yes-no-dialog button {
	margin: 5px;
}

/* Animación para el círculo giratorio */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}

	to {
		transform: rotate(360deg);
	}
}

/* Estilo para pantallas pequeñas (móviles) */
@media (max-width: 768px) {
	.page {
		flex-direction: column;
	}

	a {
		font-size: 1.2rem;
	}

	.left-container {
		/* Estilo cuando está oculto (fuera de la vista) */
		position: absolute;
		top: 0;
		left: -300px; /* Desplázalo fuera de la pantalla hacia la izquierda */
		width: 10rem;
		height: 100%;
		z-index: 5;
		transition: 0.5s;
		/* Estilo cuando está visible */
		/* Cuando se abre el menú, puedes cambiar left a 0 para mostrarlo */
	}

	/* Añade un estilo para mostrar el left-container cuando se abre el menú */
	.menu-open {
		/*Estilo cuando está oculto (fuera de la vista) */
		position: absolute;
		top: 0;
		left: 0; /*Desplázalo fuera de la pantalla hacia la izquierda */
		width: 10rem;
		height: 100%;
		z-index: 20;
		transition: 0.5s;
		/*Estilo cuando está visible 
		 Cuando se abre el menú, puedes cambiar left a 0 para mostrarlo */
	}

	/* Cambia el ancho de la franja izquierda en dispositivos móviles */
	.sidebar {
		/*width: 100%;*/ /* O el ancho que desees para dispositivos móviles */
		/*height: var(--heigth-header-mobile);*/ /* Elimina la altura fija en dispositivos móviles */
		/*background-color: var(--color-primary);*/
		/*background-image: none;*/
		/*position: relative;*/ /* Elimina la posición pegajosa en dispositivos móviles */
		/*display: flex;*/ /* Muestra la franja en dispositivos móviles */
	}

	.website-logo {
		max-width: 100%; /* El logo se ajustará al ancho de su contenedor */
		height: auto;
	}

	/* Mostrar el botón de hamburguesa en dispositivos móviles */
	.navbar-toggler {
		font-size: 1.5rem;
		color: var(--color-text-light);
		cursor: pointer;
	}

	.login-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 1rem 2rem;
	}

	.navbar-brand-header {
		display: contents;
	}

	.navbar-brand-hide {
		display: none;
	}

	.navbar-toggler-authorized {
		width: 44px;
		height: 44px;
		background-color: transparent;
		border: none;
		cursor: pointer;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.menu-hamburguesa {
		width: 30px; /* Tamaño original del icono */
		height: 30px; /* Tamaño original del icono */
		fill: #000; /* Color del icono */
		transition: fill 0.3s; /* Transición de color suave */
	}

	.main-background-invisible {
		
	}

	.main-background-invisible.menu-open {
		display: block;
	}

	.nav-tabs {
		height: calc(var(--heigth-nav-tab) * 2);
	}

	.menu-open {
		/*Estilo cuando está oculto (fuera de la vista) */
		position: absolute;
		top: 0;
		left: 0; /*Desplázalo fuera de la pantalla hacia la izquierda */
		width: 10rem;
		height: 100%;
		z-index: 20;
		transition: 0.5s;
		/*Estilo cuando está visible 
		 Cuando se abre el menú, puedes cambiar left a 0 para mostrarlo */
	}

	.menu-hamburguesa {
		width: 30px; /* Tamaño original del icono */
		height: 30px; /* Tamaño original del icono */
		fill: #000; /* Color del icono */
		transition: fill 0.3s; /* Transición de color suave */
	}

	.navbar-icon {
		width: 44px;
		height: 44px;
	}

	.navbar-brand {
		/*padding-left: 3rem;*/
	}

	/* Alineación y espaciado en la franja superior */
	.login-header {
		/*justify-content: space-between;*/
		padding: 1rem 2rem;
		height: 6rem;
	}

	/* Ocultar el logo en dispositivos móviles */
	.logo-container {
		/*display: none;*/
		width: 10rem;
	}

	.imagen-bienvenida {
		opacity: 0.2; /* Reduce la opacidad de la imagen de fondo */
	}

	.titulo-bienvenida {
		font-size: 1.8rem;
	}

	.texto-bienvenida {
		display: flex;
		flex-direction: column;
		top: calc(var(--heigth-header-mobile) * 4);
	}

	.top-row {
		justify-content: space-between;
	}

	.top-row-side{
		height: var(--heigth-logo-mobile);
	}

	.navegation-menu {
		height: calc(100vh - var(--heigth-logo-mobile));
	}

	main { 
		width: 100%;
	}

	.paginacion-content .desktop-info {
		display: none;
	}

	.paginacion-content .mobile-info {
		display: block;
	}
}