/*************************************************************************************PRINCIPAL*******************************************************************************************************************/

/*///////////////////////////////////////////FUENTES///////////////////////////////////////////*/



/*-------------------------------------ROBOTO-------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/*-------------------------------------COURGETTE-------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Courgette&display=swap');

/*-------------------------------------LOBSTER-------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Lobster+Two:wght@700&display=swap');

/*-------------------------------------POPPINS-------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600&display=swap');

/*-------------------------------------Amatic SC-------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap');

/*-------------------------------------SOBERANA-------------------------------------

@font-face {
    font-family: "Soberana";
    src: url("../fonts/SoberanaSans-Regular.otf"); 
}

@font-face {
    font-family: "Soberana-B";
    src: url("../fonts/SoberanaSans-Bold.otf"); 
}

@font-face {
    font-family: "Soberana-I";
    src: url("../fonts/SoberanaSans-Italic.otf"); 
}

@font-face {
    font-family: "Soberana-L";
    src: url("../fonts/SoberanaSans-Light.otf"); 
}

@font-face {
    font-family: "Soberana-U";
    src: url("../fonts/SoberanaSans-Ultra.otf"); 
}

@font-face {
    font-family: "Soberana-T";
    src: url("../fonts/SoberanaTitular-Regular.otf"); 
}*/

/*///////////////////////////////////////////VARIABLES///////////////////////////////////////////*/

:root {

	/*-------------------------------------Modo Luz-------------------------------------*/

	--luz-principal-bg-color: #ffffff; /***BLANCO***/
	--luz-secundario-bg-color: #f1f1f1; /***GRIS BAJO***/

	--luz-tercer-bg-color: #002F6C; /***AZUL FUERTE***/
	--luz-cuarto-bg-color: #212529; /***NEGRO BAJO***/
	--luz-quinto-bg-color: #EBEBEB; /***GRIS FUERTE***/

	--luz-sexto-bg-color: #38d39f; /***VERDE BAJO***/
	--luz-septimo-bg-color: #1B396A; /***AZUL MBAJO**/

	/*-------------------------------------Modo Nocturno-------------------------------------*/

	--nocturno-principal-bg-color: #212529; 
	--nocturno-secundario-bg-color: #181818; 

	--nocturno-tercer-bg-color: #ccc; 
	--nocturno-cuarto-bg-color: #f1f1f1 ; 
	--nocturno-quinto-bg-color: #3e3e3e; 

	--nocturno-sexto-bg-color: #eb4d4b; 
	--nocturno-septimo-bg-color: #999; 

	/*-------------------------------------Colores Alertas-------------------------------------*/

	--success-bg-color: #38d39f;
	--error-bg-color: #eb4d4b;

	/*-------------------------------------SOMBRAS PRINCIPALES-------------------------------------*/

	--sombra-ligth-abajo-y-derecha: 0px 8px 16px 0px rgba(255,255,255,0.2);
	--sombra-ligth-abajo-derecha-arriba: 0 1px 2px rgba(255, 255, 255, 0.2);

	--sombra-ligth-abajo: 0px 1px 4px 1px rgba(255,255,255,0.2);

	--sombra-ligth-derecha: 0px 1px 4px 1px rgba(255,255,255,0.2);


	/*-------------------------------------CCOLORES PRIMARIOS-------------------------------------*/


	--primario-color: #ffffff;
	--success-color: #6ab04c;
	--warning-color: #f0932b;
	--danger-color: #eb4d4b;
	--advertencia-color: #ff4040;
	--neutro-color: #ff8000;


	--blue-dark: #002F6C;
	--blue-light: #1B396A;
	--green-light: #38d39f;
	--grey-light: #999;
	--grey-medium: #dee2e6;
	--grey-dark-medium: #ccc;

	--blue-dark-opacity: rgba(0, 47, 108, 0.5);
}

/*///////////////////////////////////////////TEMAS///////////////////////////////////////////*/

.light {

	--principal-bg-color: var(--luz-principal-bg-color);
	--secundario-bg-color: var(--luz-secundario-bg-color);

	--tercer-bg-color: var(--luz-tercer-bg-color);
	--cuarto-bg-color: var(--luz-cuarto-bg-color);
	--quinto-bg-color: var(--luz-quinto-bg-color);

	--sexto-bg-color: var(--luz-sexto-bg-color);

	--septimo-bg-color: var(--luz-septimo-bg-color);
}

.dark {

	--principal-bg-color: var(--nocturno-principal-bg-color);
	--secundario-bg-color: var(--nocturno-secundario-bg-color);

	--tercer-bg-color: var(--nocturno-tercer-bg-color);
	--cuarto-bg-color: var(--nocturno-cuarto-bg-color);
	--quinto-bg-color: var(--nocturno-quinto-bg-color);

	--sexto-bg-color: var(--nocturno-sexto-bg-color);

	--septimo-bg-color: var(--nocturno-septimo-bg-color);

}

.light .logo-dark, .light .light-icon {
	display: none;
}

.dark .logo-light, .dark .dark-icon {
	display: none;
}

.bg-primary {
  background: var(--grey-light);
}

.bg-success {
  background: var(--success-color);
}

.bg-warning {
  background: var(--warning-color);
}

.bg-danger {
  background: var(--danger-color);
}




.txt-color-verde {
	color: var(--sexto-bg-color);
}

/*///////////////////////////////////////////VARIABLES COLORES///////////////////////////////////////////*/

.color-advertencia {
	background-color: var(--advertencia-color);
}

.color-neutro {
	background-color: var(--neutro-color);
}

/*///////////////////////////////////////////SCROLL-MAIN///////////////////////////////////////////*/

.scroll-scrollbar::-webkit-scrollbar {
	width: 9px;
	height: 9px;
}

.scrollbar-hover::-webkit-scrollbar {
	display: none;
}

.scrollbar-hover:hover::-webkit-scrollbar {
	display: block;
}

.scroll-scrollbar::-webkit-scrollbar-thumb {
	background-color: var(--tercer-bg-color);
	border: 1px solid var(--principal-bg-color);
}

.scroll-scrollbar::-webkit-scrollbar-track-piece:start {
	background: transparent;
}

.scroll-scrollbar::-webkit-scrollbar-track-piece:end {
	background: transparent;
}

/*///////////////////////////////////////////SCROLL - X///////////////////////////////////////////*/

.scrollX::-webkit-scrollbar {
	width: 4px;
	height: 4px;
	cursor: pointer;
}

.scrollX::-webkit-scrollbar-thumb {
	background-color: var(--tercer-bg-color);
	border: 1px solid var(--principal-bg-color);
	
	/*-webkit-border-bottom-right-radius: 10px;
	-webkit-border-bottom-left-radius: 10px;
	-moz-border-radius-bottomright: 10px;
	-moz-border-radius-bottomleft: 10px;
	border-bottom-right-radius: 10px;
	border-bottom-left-radius: 10px;*/

}

/*.scrollX::-webkit-scrollbar {
	display: none;
}

.scrollX:hover::-webkit-scrollbar {
	display: block;
}*/

.scrollX::-webkit-scrollbar-track-piece:start {
	background: transparent;
}

.scrollX::-webkit-scrollbar-track-piece:end {
	background: transparent;
}

.scroll-tabla {
	overflow-x: auto;
}


/*///////////////////////////////////////////ELEMENTOS HTML///////////////////////////////////////////*/

button:focus {
  outline: 0;
}

small {

	font-size: 80%;
    font-weight: 400;
}

h3 {
  font-size: 18px;
  font-weight: 400;
  margin: 5px 0 6px;
}

h2 {
	font-size: 20px;
	margin: 5px 0 6px;
}

p {
	font-size:  14px;
	margin: 5px 0 6px;
}

/*///////////////////////////////////////////CURSOR///////////////////////////////////////////*/

.cursor-prohibido {
	cursor: not-allowed;
}


/*///////////////////////////////////////////FILAS///////////////////////////////////////////*/

.fila {
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
}

.fila:after, .fila:before {
	box-sizing: border-box;
}

/*///////////////////////////////////////////COLUMNAS///////////////////////////////////////////*/


[class*="col-"] {
	padding: 10px;
}

/*///////////////////////////////////////////POSICIONES///////////////////////////////////////////*/

.contenedor-centrado {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: 100%;
}

.centrado{
  align-items: center;
}

.centrado-lineal{
  justify-content: center;
}

.posicion-fila{
  display: flex;
  flex-direction: row;
  align-items: center;
}

.posicion-columna{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.abajo{
  display: flex;
  align-items: flex-end;
}

.derecha {
	display: flex;
	justify-content: flex-end;
}

/*-------------------------------------TXT ALINEADO-------------------------------------*/

.txt-align-izquierda {
	text-align: left;
}

.txt-align-centrado {
	text-align: center;
}

.txt-align-derecha {
	text-align: right;
}

.txt-lineal {
	white-space: nowrap;
}

/*-------------------------------------TXT TRANSFORM-------------------------------------*/

.txt-minusculas {
	text-transform: lowercase;
}

.txt-capitalize {
	text-transform: capitalize; 
}

/*///////////////////////////////////////////ALERTAS///////////////////////////////////////////*/

#luz-des-activado {

	color: var(--error-bg-color);

}

.alerta-tablas {
	width: 100%;
	padding: 10px;
	font-weight: bold;
	/*border-radius: 5px;*/
	background: var(--secundario-bg-color);
	color: var(--tercer-bg-color);
	animation: fadeInDown .5s ease-in; 
}

.alerta-verde {
	padding: 10px;
	border-radius: 5px;
	background: var(--green-light);
	color: var(--primario-color);
	/*animation: slideInLeft .5s ease-in;*/
	animation: fadeInDown .5s ease-in; 

	font-size: .9rem;
 
}

.alerta-roja {
	padding: 10px;
	border-radius: 5px;
	background: rgba(217, 92, 92);
	color: var(--primario-color);
	animation: fadeInDown .5s ease-in; 

	font-size: .9rem;
}

.alerta-naranja {
	padding: 10px;
	border-radius: 5px;
	background: var(--neutro-color);
	color: var(--primario-color);
	animation: fadeInDown .5s ease-in; 

	font-size: .9rem;
}

.error-login {
	margin: 0;
	animation: fadeInDown .5s ease-in;
	background: var(--advertencia-color);
	width: 100%;
	border-radius: 5px;

	font-size: .9rem;
}

.error-login .invalido {
	color: var(--primario-color);
	height: 45px;
	display: flex;
	align-items: center;
	justify-content: center;

	font-size: .9rem;
}

/*///////////////////////////////////////////MARGENES ELEMENTOS///////////////////////////////////////////*/

/*******************************MARGEN IZQUIERDA*****************************************/

.mg-izquierda-big {
	margin-left: 10px;
}

.mg-izquierda-small {
	margin-left: 5px;
}


/*******************************MARGEN ARRIBA*****************************************/

.mg-arriba-big {
  	margin-top: 10px;
}

.mg-arriba-top {
  	margin-bottom: 5px;
}

/*******************************MARGEN DERECHA*****************************************/

.mg-derecha-big {
	margin-right: 10px;
}

.mg-derecha-small {
	margin-right: 5px;
}


/*******************************MARGEN ABAJO*****************************************/

.mg-abajo-big {
  	margin-bottom: 10px;
}

.mg-abajo-small {
  	margin-bottom: 5px;
}

/*///////////////////////////////////////////BORDE ELEMENTOS///////////////////////////////////////////*/

.borde-abajo {

	border-bottom: 2px solid var(--green-light);

}

.borde-abajo-dash {

	border-bottom: 1px dashed var(--tercer-bg-color);

}

/*///////////////////////////////////////////PAGINACIÓN///////////////////////////////////////////*/

.pagination {
	/*font-family: 'Poppins', sans-serif;*/
	font-family: 'Courgette', cursive;
  	display: -ms-flexbox;
  	display: flex;
  	padding-left: 0;
  	list-style: none;
  	border-radius: 0.25rem;
}

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: var(--second-color);
  background-color: var(--principal-bg-color);
  border: 1px solid var(--secundario-bg-color);
  text-decoration: none;
  /*border-radius: 0 20px;*/
}

.page-link:hover {
  z-index: 2;
  color: var(--principal-bg-color);
  /*text-decoration: none;*/
  background-color: var(--tercer-bg-color);
  border-color: var(--secundario-bg-color);
}

.page-link:focus {
  z-index: 2;
  outline: 0;
  box-shadow: 0 0 0 0.2rem var(--blue-dark-opacity);
}

.page-link:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.page-item.active .page-link {
  z-index: 1;
  color: var(--tercer-bg--color);
  background-color: var(--secundario-bg-color);
  border-color: var(--secundario-bg-color);
}

.page-item.disabled .page-link {
  color: var(--grey-light);
  pointer-events: none;
  cursor: auto;
  background-color: var(--principal-bg-color);
  border-color: var(--secundario-bg-color);
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.5;
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1.5;
}

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.2rem;
  border-bottom-left-radius: 0.2rem;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.2rem;
  border-bottom-right-radius: 0.2rem;
}

/*-------------------------------------RESPONSIVO-COLUMNAS-------------------------------------*/


/*|||||||||||||||||||||DISPOSITIVOS EXTRA CHICOS <= 650px|||||||||||||||||||||*/

@media only screen and (max-width: 650px) {

	[class*="col-"] {
		width: 100%
	}
}

/*|||||||||||||||||||||DISPOSITIVOS CHICOS >= 650px|||||||||||||||||||||*/

@media only screen and (min-width: 650px) {
	.col-sm-1 {width: 8.33%;}
	.col-sm-2 {width: 16.66%;}
	.col-sm-3 {width: 25%;}
	.col-sm-4 {width: 33.33%;}
	.col-sm-5 {width: 41.66%;}
	.col-sm-6 {width: 50%;}
	.col-sm-7 {width: 58.33%;}
	.col-sm-8 {width: 66.66%;}
	.col-sm-9 {width: 75%;}
	.col-sm-10 {width: 83.33%;}
	.col-sm-11 {width: 91.66%;}
	.col-sm-12 {width: 100%;}
}

/*|||||||||||||||||||||DISPOSITIVOS MEDIANOS >= 768px|||||||||||||||||||||*/

@media only screen and (min-width: 768px) {
	.col-m-1 {width: 8.33%;}
	.col-m-2 {width: 16.66%;}
	.col-m-3 {width: 25%;}
	.col-m-4 {width: 33.33%;}
	.col-m-5 {width: 41.66%;}
	.col-m-6 {width: 50%;}
	.col-m-7 {width: 58.33%;}
	.col-m-8 {width: 66.66%;}
	.col-m-9 {width: 75%;}
	.col-m-10 {width: 83.33%;}
	.col-m-11 {width: 91.66%;}
	.col-m-12 {width: 100%;}
}

/*|||||||||||||||||||||DISPOSITIVOS GRANDES >= 992px|||||||||||||||||||||*/

@media only screen and (min-width: 992px) {
	.col-1 {width: 8.33%;}
	.col-2 {width: 16.66%;}
	.col-3 {width: 25%;}
	.col-4 {width: 33.33%;}
	.col-5 {width: 41.66%;}
	.col-6 {width: 50%;}
	.col-7 {width: 58.33%;}
	.col-8 {width: 66.66%;}
	.col-9 {width: 75%;}
	.col-10 {width: 83.33%;}
	.col-11 {width: 91.66%;}
	.col-12 {width: 100%;}
}

/*|||||||||||||||||||||DISPOSITIVOS EXTRA GRANDES >= 1200px|||||||||||||||||||||*/

@media only screen and (min-width: 1200px) {
	.col-xl-1 {width: 8.33%;}
	.col-xl-2 {width: 16.66%;}
	.col-xl-3 {width: 25%;}
	.col-xl-4 {width: 33.33%;}
	.col-xl-5 {width: 41.66%;}
	.col-xl-6 {width: 50%;}
	.col-xl-7 {width: 58.33%;}
	.col-xl-8 {width: 66.66%;}
	.col-xl-9 {width: 75%;}
	.col-xl-10 {width: 83.33%;}
	.col-xl-11 {width: 91.66%;}
	.col-xl-12 {width: 100%;}
}

/*-------------------------------------RESPONSIVO-ELEMENTOS-GRAL-------------------------------------*/

@media only screen and (max-width: 720px) {

	.derecha {
		
		justify-content: flex-start;
	}
}