/* ---------------------------------
 *	José Luis Rodriguez
 *	jrodriguez@bincodex.com
 *	https://bincodex.com
 *	2025-05-26 15:44:11
 * ------------------------------------ */



html, body {
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	font-size: 12px;
	overflow: hidden;
}


body {
	background-color: var(--fondo);
	color: var(--texto-principal);
	font-family: helvetica, sans-serif;
	transition: background-color 0.3s, color 0.3s;
}



/*CAORGADOR ESPERA*/
#core-cargador-espera {
	background: rgba(0, 0, 0, 0.9);
	width: 100%;
	height: 100%;
	position: fixed;
	display: flex;
	justify-content: center;
	align-items: center;
	display: flex;
	z-index: 9;
	font-size: 1.5em;
	color: #3e3b3b;
	flex-direction: column;
	gap: 10px;
	user-select: none;
	opacity: 0;
    pointer-events: none;
	transition: opacity 0.5s ease;
}

#core-cargador-espera.mostrar {
	opacity: 1;
	pointer-events: auto;
}

.loader {
	width: 50px;
	height: 50px;
	border: 4px solid #ccc;
	border-top: 4px solid #3498db;
	border-radius: 50%;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0%   { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}



.loader2 {
	position: relative;
	width: 300px;
	height: 20px;
	background-color: #555;
	overflow: hidden;
	border-radius: 10px;
}

.loader2::before {
	content: '';
	position: absolute;
	top: 0;
	left: -50%;
	width: 50%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255,255,255,0.8), transparent);
	animation: slide 2s infinite;
}

@keyframes slide {
	0% { left: -50%; }
	100% { left: 100%; }
}


.pdf-viewer {
	width: 99%;
	height: calc(100vh - 150px);
}


.def-grid-1_2 {
	display: grid;
	grid-template-columns: 1fr 2fr; /* La segunda columna es el doble que la primera */
	gap: 10px;
}


/*MODAL WINDOWS*/
.core-modalwin-bloqueador {
	background: rgba(0,0,0,0.9);
	width: 100%;
	height: 100%;
	position: fixed;
	border: 0px solid red;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 3;
	opacity: 0;
    pointer-events: none;
	transition: opacity 0.5s ease;
}

.core-modalwin-bloqueador.mostrar {
	opacity: 1;
	pointer-events: auto;
}

.core-modalwin-contenedor {
	width: 400px;
	height: 300px;
	border: 0px solid red;
	background: #fff;
	border-radius: 12px;
	padding: 0px;
	position: relative;
	max-height: 100vh;
}

.core-modalwin-header {
	background: var(--color-navbar);
	text-align: center;
	border-radius: 12px 12px 0px 0px;
	padding: 10px;
	height: 20px;
	font-weight: bold;
	font-size: 1.3em;
}

.core-modalwin-data {
	background: var(--color-sidebar);
	color: var(--texto-principal);
	padding: 10px;
	border-bottom: 1px solid red;
	height: 200px;
	overflow-y: scroll;
}

.core-modalwin-actions {
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	background: var(--color-sidebar);
	border-radius: 0px 0px 12px 12px;
	position: absolute;
	bottom: 0px;
}

.core-modalwin-boton {
	border: 0px;
	border-radius: 6px;
	padding: 7px;
	color: #fff;
	font-weight: bold;
	font-size: 1.2em;
	min-width: 170px;

}

.bgBlue {
	background: linear-gradient(to bottom, #04759e 0%,#0583c6 100%);
}

.bgRed {
	background: linear-gradient(to bottom, #a90329 0%,#8f0222 44%,#6d0019 100%);
}

.bgGreen {
	background: linear-gradient(to bottom, #006e2e 0%,#146d39 100%);
}

.link {
	user-select: none;
	color: blue !important;
	cursor: pointer;
}

.error {
	color: #780000 !important;
	font-weight: bold;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}


.buttons {
	display: flex;
	gap: 10px;
	padding: 10px;
}
.buttons button {
	padding: 10px 15px;
	cursor: pointer;
}


.hidden{
	display: none !important;
}


main {
	width: 100%;
	height: 100%;
}


.center-content {
	display: flex;
	justify-content: center;
	align-items: center;
}



/*login*/
#def-img-app-login {
	background-position: center !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
}

.init-login {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}


.def-login-content {
	width: 320px;
	height: 420px;
	background: linear-gradient(to bottom, #7d7e7d 0%,#0e0e0e 100%);
	border-radius: 12px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.def-item-form {
/* 	background: rgba(255,255,255, 0.4); */
	width: 300px;
	height: 80px;
	margin: 10px 0px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.def-input-txt {
	font-size: 1.3em;
	padding: 12px;
	text-align: center;
	border: 1px solid var(--color-sidebar);
	border-radius: 7px;
	width: 90%;
}

.def-input-btn {
	font-size: 1.3em;
	padding: 12px;
	text-align: center;
	border: 1px solid var(--color-sidebar);
	border-radius: 7px;
	width: 98%;
	background: var(--color-red);
	color: var(--texto-principal);
}


















/*estructura base*/
#def-header {
	border: 0px solid red;
	background: var(--color-navbar);
	width:100%;
	height: 30px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 5px;
	position: relative;
}

	.def-info-app-header{
		border: 0px solid yellow;
		background: var(--color-sidebar);
		position: absolute;
		left: 0px;
		display: flex;
		gap: 0px;
		height: 40px;
		width: 300px;
		background-position: center !important;
		background-size: 34% !important;
		background-repeat: no-repeat !important;
	}

	#def-tools-header {
		border: 0px solid #00aaff;
		position: absolute;
		/*left: 50%;
		transform: translateX(-50%);*/
		left: 0px;
		transform: translateX(311px);
		display: flex;
		gap: 0px;
		height: 40px;
		min-width: 50px;
	}

	.def-tit-tools-module {
		display: flex;
		justify-content: center;
		align-items: center;
		font-weight: bold;
		font-size: 1.3em;
		margin-right: 10px;
	}

	.def-acciones-header{
		position: absolute;
		right: 11px;
		display: flex;
		gap: 0px;
	}

	.def-header-tool-buscar-paginacion {
		border: 0px solid yellow;
		display: flex;
		justify-content: center;
		align-items: center;
		gap: 16px;
	}

	.def-btn-accion-header {
		border: 0px solid yellow;
		height: 40px;
		width: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
		user-select: none;
		cursor: pointer;
	}

	.def-btn-accion-header:hover {
		background: rgba(255,255,255,0.3);
		color: #fff;
	}

	.def-btn-accion-header span {
		font-size: 2em;
	}

#def-panel-principal {
	border: 0px solid yellow;
	background: var(--color-sidebar);
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	position: fixed;
	width: 300px;
	height: 100%;
	left: 0px;
	transition: all 1s;
}

#def-tit-menu-movil {
	border: 0px solid red;
	width: 300px;
	height: 45px;
	display: none;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -40px;
	right: 0px;
	cursor: pointer;
	font-size: 1.7em;
	background: var(--color-sidebar);
	box-shadow: 1px -4px 3px #000;
	background-position: center !important;
	background-size: 34% !important;
	background-repeat: no-repeat !important;
}

#def-menu-toggle {
	border: 0px solid red;
	width: 40px;
	height: 40px;
	display: none;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -40px;
	right: -40px;
	cursor: pointer;
	font-size: 2.5em;
	background: var(--color-sidebar);
}



	#def-info-usuario {
		border: 0px solid orange;
		width: 300px;
		height: 300px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		z-index: 1;
	}

	#def-img-usuario {
		border: 3px solid var(--elemento-destacado);
		width: 200px;
		height: 200px;
		border-radius: 50%;
		background-position: center !important;
		background-size: contain !important;
		background-repeat: no-repeat !important;
	}

	#def-nav-principal{
		border: 0px solid yellow;
		width: 300px;
		height: calc(100vh - 380px);
		overflow-y: scroll;
	}

	#def-nav-principal ul {
		border: 0px solid red;
		list-style-type: disclosure-closed;
		padding-inline-start: 17px;
	}

	.def-item-menu {
		border: 0px solid blue;
		user-select: none;
		cursor: pointer;
		padding: 7px;
	}

	.def-item-menu:hover {
		background: rgba( 255,255,255, 0.3 );
	}

#def-contenido-principal {
	border: 0px solid green;
	margin-left: 300px;
	height: calc(100vh - 94px);
	width: calc(100vw - 320px);
	padding: 7px;
	overflow-y: scroll;
}

#def-panel-notificaciones {
	border: 0px solid blue;
	background: var(--elemento-destacado);
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	width: 300px;
	height: 100%;
	right: -300px;
	z-index: 4;
	top: 0px;
}

#def-footer {
	border: 0px solid silver;
	background: var(--color-navbar);
	display: flex;
	justify-content: center;
	align-items: center;
	width:100%;
	height: 30px;
	position: fixed;
	bottom: 0px;
	padding: 5px;
}





/* Para navegadores WebKit (Chrome, Edge, Safari) */
.scroll-style::-webkit-scrollbar {
  width: 6px; /* Cambia a la anchura deseada */
  height: 6px; /* Scroll horizontal */
}

.scroll-style::-webkit-scrollbar-track {
  background: var(--color-sidebar); /* #f1f1f1; */  /* Color del track (fondo) */
}

.scroll-style::-webkit-scrollbar-thumb {
  background-color: #888; /* Color del thumb (barra) */
  border-radius: 3px; /* Bordes redondeados */
}

.scroll-style::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Color al pasar el mouse */
}

/* Para Firefox */
.scroll-style {
  scrollbar-width: thin; /* Estilo más delgado */
  scrollbar-color: #888 var(--color-sidebar); /* thumb y track */
}



#debug {
	z-index: 9;
	position: fixed;
	top: 0px;
	left: 0px;
	background: rgba(0,0,0,0.7);
	color: #fff;
	padding: 20px;
	width: 100vw;
	height: 100vh;
	overflow: auto;
	display: none;
}

#close-debug {
	position: fixed;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 3em;
	user-select: none;
	border: 3px solid #fff;
	top: 20px;
	right: 20px;
	cursor: pointer;
}


.msg-error {
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	font-size: 3em;
	height: calc( 100vh - 200px );
	color: red;
	background: var(--fondo);
}


.def-list-soportes-registro {

}


.def-tit-soportes-registro {

}

.def-item-soporte-registro {
	cursor: pointer;
	user-select: none;
	padding: 4px;
}