:root{
	/*textos*/
	--rp-pri:#3A3A3A;
	--rp-seg:#117389;
	--rp-ter:#E9EBEE;
	/*botones*/
	--rp-normal:#117389;
	--rp-hover:#29B7D5;
	--rp-active:#015568;

	--size-text:.9rem; 
}
/* tipografia*/
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
h1,h2,h3,span,p,input,label,textarea,button,.btn{
	font-family:  "Ubuntu", sans-serif !important; 
}
.ubuntu-light {
font-family: "Ubuntu", sans-serif;
font-weight: 300;
font-style: normal;
}

.ubuntu-regular {
font-family: "Ubuntu", sans-serif;
font-weight: 400;
font-style: normal;
}

.ubuntu-medium {
font-family: "Ubuntu", sans-serif;
font-weight: 500;
font-style: normal;
}

.ubuntu-bold {
font-family: "Ubuntu", sans-serif;
font-weight: 700;
font-style: normal;
}

.ubuntu-light-italic {
font-family: "Ubuntu", sans-serif;
font-weight: 300;
font-style: italic;
}

.ubuntu-regular-italic {
font-family: "Ubuntu", sans-serif;
font-weight: 400;
font-style: italic;
}

.ubuntu-medium-italic {
font-family: "Ubuntu", sans-serif;
font-weight: 500;
font-style: italic;
}

.ubuntu-bold-italic {
font-family: "Ubuntu", sans-serif;
font-weight: 700;
font-style: italic;
}
/*BOTONES GENERALES*/
/* end tipografia*/
	header {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100px; 
			overflow: hidden; /* Disables scrollbars on the navigation frame. To enable scrollbars, change "hidden" to "scroll" */
			background: #BCCE98;
		}
		main {
			position: fixed;
			/*top: 100px;  Set this to the height of the header */
			left: 0; 
			right: 0;
			bottom: 0;
			overflow: auto; 
			background: #fff;
		}
		h1{
			
			text-align: center;
			width: 100%;
		}
		.body_index{
			height: 100vh;
			background:url("../../images/fondo-rpm.png");
			background-size: cover; /* Escalar la imagen para cubrir el contenedor */
			background-repeat: no-repeat; /* No repetir la imagen */
			background-position: center; /* Centrar la imagen */
			background-blend-mode: screen;
			justify-content: center;
			align-items: center;
		}
		.body_index::before{
			content: ''; /* Crear una capa visual */
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: rgba(233, 235, 238, 0.7); /* Capa de color con transparencia */
			z-index: 1; /* Asegura que la capa esté sobre la imagen */
		}
		.body_index center{
			z-index: 2;
		}
		.box{
			width: 600px;
			min-width: 600px;
			height: 400px;
			background: white;
			border-radius: 5px;
			border:0px solid var(--rp-ter);
			padding:0px;
			box-shadow: 0px 0px 10px 2px rgba(0,0,0,0.5);
			display: flex;
			flex-wrap: wrap;	
			overflow: hidden;
			align-items: center;
		}
		.img_box{
			width: 200px;
			height: auto;
			padding-top: 10px;
			vertical-align: middle;
		}
		.btn_personal{
			background-color: var(--rp-normal);
			border-radius: 20px;
			color:#FFFFFF;
			font-weight: bold;
			width: 100%;
		}
		.btn_personal:hover{
			background-color: var(--rp-hover);
			color: var(--rp-ter);
			border:1px solid var(--rp-hover);
		}
		a{
			text-decoration: none;
			color:#000;
			
		}
		
		.error_image{
			width: 500px;
		}
		.error_message{
			font-weight: 300;
			font-size: 1rem;
			color:#000000;
		}
		.error_enlace a{
			text-decoration: none;
			font-weight: 700;
			font-size: 1.2rem;
			color:var(--rp-hover);
		}
		.formateo{
			display: flex;
			flex-direction: column;
			align-items: center;
		}
		.container-form{
			display: flex;
			flex-direction: row;
			
		}
		.col-image{
			width: 50%;
			padding: 0px;
			display: block;
			justify-content: center;
		}
		.col-form{
			width: 50%;
			padding: 1rem !important;
			display: flex;
			flex-direction: column;
			justify-content: center;
		}
		.col-images img{
			width: 200px !important;

		}
		.swal2-confirm{
			background-color: var(--rp-normal);
		}
		.swal2-confirm:hover{
			background-color: var(--rp-hover);
		}
		@media screen and (max-width:800px ) {
			.title-login{
				padding-top:1rem;
			}
			.body_index{
				width: 100%;
			}
			.box{
				width: 100% !important;
				min-width: 100%;
				height: 100% !important;
				min-height: 400px;
				display: flex;
				flex-direction: column;
			}
			.box .col-image img{
				width: 100%;
				height: 200px !important;
				object-fit: cover;
			}
			.img_box{
				width: 50% !important;
				display: none;
			}
			.col-image{
				width: 50%;
				display: block;
			}
			.col-form{
				width: 100%;
				padding: 1rem;
			}
		}