@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


@import url("../css/variables.css");
@import url("../css/columnas.css");
@import url("../css/check.css");
body {
    width: 100%;
    min-height: 100vh;
    padding: 40px 0;
    background: #FDFBF6;
    font-family: 'Roboto', sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fondo__contenedor__formulario{
    width: 100%;
    max-width: 950px;
    margin: 40px 20px;
    background: transparent;
}

.contenedor__formulario{
    width: 100%;
    padding: 35px;
    background: #fff;
    border-radius: 22px;
    border: none;
    box-shadow: 0 25px 60px rgba(9,47,109,.12);
    position: relative;
    margin-top: -80px;
    z-index: 10;
}

.contenedor__formulario .separador {
	width: 100%;
	height: 1px;
	margin: 5px 0;
	background: var(--color10);
}

.formBx {
	width: 100%;
}
.formBx h2{
    color:#092F6D;
    font-size:18px;
    font-weight:700;
}

.formBx form {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 20px;
}

.contenedor__formulario form button {
	padding: 10px 40px;
	/* margin-top: 10px; */
	border: none;
	font-size: 14px;
	background: var(--color1);
	font-weight: 600;
	cursor: pointer;
	color: var(--color4);
	outline: none;
	transition: all 300ms;
	border-radius: 20px;
	border: 1px solid var(--color9);
	display: inline-block;
	margin: 0 auto;

}

.contenedor__formulario form button:hover {
	background-color: var(--color9);
	color: var(--color1);

}

.formBx form p {
	color: var(--color6);
	font-size: 12px;
	font-weight: 300;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 0;
	/*margin-top: -20px;*/
}

.formBx form .inputBox {
	position: relative;
	margin-bottom: 5px;
}

.formBx form .inputBox:last-child {
	margin-bottom: 0;
}

.formBx form .inputBox input,
.formBx form .inputBox input[type="email"],
.formBx form .inputBox textarea {
	/* position: relative; */
	background: transparent;
	font-family: var(--font-textos);
	outline: none;
	border: none;
	width: 100%;
	color: var(--color1);
	padding-bottom: 10px;
	font-size: 13px;
	letter-spacing: 1px;
	font-weight: 300;
	border-bottom: 1px solid var(--color1);
	resize: none;
}

.formBx form .inputBox textarea {
	width: 100%;
	height: 50px;
}


.formBx form .inputBox span {
	position: absolute;
	left: 0;
	font-size: 12px;
	font-weight: 300;
	display: inline-block;
	pointer-events: none;
	letter-spacing: 1px;
	color: var(--color1);
	transition: all .2s;
	text-transform: uppercase;
}

.formBx form .inputBox input[type="email"]:focus~span,
.formBx form .inputBox input:focus~span,
.formBx form .inputBox textarea:focus~span,
.formBx form .inputBox input:valid~span,
.formBx form .inputBox textarea:valid~span,
.formBx form .inputBox input:hover~span,
.formBx form .inputBox textarea:hover~span {
	transform: translateY(-24px);
	color: var(--color2);
}

.formBx form .inputBox input[type="email"]:focus,
.formBx form .inputBox input:focus,
.formBx form .inputBox textarea:focus,
.formBx form .inputBox input:valid,
.formBx form .inputBox textarea:valid,
.formBx form .inputBox input:hover,
.formBx form .inputBox textarea:hover {
	border-bottom-color: var(--color5);
}
.apoyo__grafico {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
/* INPUT SUBIR ARCHIVOS PERSONALIZADO */
.formBx form .fancy-file {
	display: none;
}

.formBx form .fancy-file+label {
	display: flex;
	flex: 1;
}

.formBx form .fancy-file__fancy-file-name,
.formBx form .fancy-file__fancy-file-button {
	padding: 5px 10px;
}

.formBx form .fancy-file__fancy-file-name {
	background: var(--color4);
	border: 1px solid var(--color6);
	flex: 1;
	border-radius: 4px 0 0 4px;
	font-size: 12px;
	width: 100%;
}

.formBx form .fancy-file__fancy-file-name span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 0px;
	display: block;
}

.formBx form .fancy-file__fancy-file-button {
	background: var(--color1) url(../images/carpeta.png) 4px center/25px no-repeat;
	border: 1px solid var(--color2);
	color: var(--color4);
	white-space: nowrap;
	border-radius: 0 4px 4px 0;
	padding-left: 33px;
	cursor: pointer;
}

/* .fancy-file.red+label>.fancy-file__fancy-file-button {
	background-color: #D9534F;
	border-color: #D64641;
} */

/* .fancy-file.green+label>.fancy-file__fancy-file-button {
	background-color: #5CB85C;
	border-color: #4FB04F;
} */

/*  HASTA ACA INPUT SUBIR ARCHIVOS */

.formBx .btn_agregar,
.formBx .btn_eliminar {
	background: var(--color1);
	border-radius: 0;
	padding: 5px 10px;
}
.formBx .btn_eliminar {
	background: var(--color2);
}
.textarea {
	width: 100%;
	height: 40px;
	outline: 0;
	/* background: transparent; */
	font-family: var(--font-textos);
	outline: none;
	border: none;
	color: var(--color1);
	padding: 5px 10px;
	font-size: 13px;
	letter-spacing: 1px;
	font-weight: 300;
	border: 1px solid var(--color1);
	resize: none;
	margin-left: 5px;
	/* border: none; */
}




/**fernando estylos /
/* Estilo base del select */
.custom-select {
  appearance: none; /* Oculta el estilo nativo del navegador */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #f8f9fa;
  border: 2px solid var(--color5);
  
  border-radius: 8px;
  padding: 10px 40px 10px 15px;
  font-size: 12px;
  color: var(--color1);
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
  width: 100%;
}

/* Agregar icono de flecha personalizada */
.custom-select {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="black"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>');
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}

/* Efecto al pasar el cursor */
.custom-select:hover {
  border-color: var(--color5);
}

/* Efecto al hacer foco */
.custom-select:focus {
  border-color:var(--color5);
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

/* Estilos para cuando el select está deshabilitado */
.custom-select:disabled {
  background-color: #e9ecef;
  cursor: not-allowed;
  opacity: 0.6;
}

.descripcion{
    color:#092F6D !important;
}

.descripcion-secundaria{
    color:#5566FF;
}

.descripcion-ok{
    color:#05C08A;
}

.formBx p{
    color:#5566FF;
}
.formBx form .inputBox input,
.formBx form .inputBox textarea{

    border:none;
    border-bottom:2px solid #d9d9d9;
    color:#092F6D;
    font-size:14px;
    transition:.3s;
}

.formBx form .inputBox input:focus,
.formBx form .inputBox textarea:focus{

    border-bottom-color:#5566FF;
}
.formBx form .inputBox span{
    color:#092F6D;
    font-weight:500;
}

.formBx form .inputBox input:focus~span,
.formBx form .inputBox textarea:focus~span,
.formBx form .inputBox input:valid~span,
.formBx form .inputBox textarea:valid~span{

    color:#5566FF;
}
.contenedor__formulario form button{

    background:#092F6D;
    color:#fff;
    border:none;
    border-radius:12px;
    padding:14px 45px;
    font-size:15px;
    font-weight:600;
    transition:.3s;
}

.contenedor__formulario form button:hover{

    background:#05C08A;
    transform:translateY(-2px);
}
.custom-select{

    background:#fff;
    border:2px solid #E2E8F0;
    color:#092F6D;
}

.custom-select:hover{
    border-color:#5566FF;
}

.custom-select:focus{

    border-color:#5566FF;
    box-shadow:0 0 0 4px rgba(85,102,255,.15);
}

.formBx form .fancy-file__fancy-file-name{

    background:#fff;
    border:1px solid #d8dee8;
    color:#092F6D;
}

.formBx form .fancy-file__fancy-file-button{

    background:#5566FF url(../images/carpeta.png) 6px center/22px no-repeat;
    color:#fff;
    border:none;
}

.formBx form .fancy-file__fancy-file-button:hover{

    background-color:#05C08A;
}

/* ==========================
   HEADER DEL FORMULARIO
========================== */

.form-header{
    display:flex;
    align-items:center;
    gap:20px;
    padding-bottom:20px;
    margin-bottom:25px;
    border-bottom:2px solid #ECECEC;
}

.logo-imed{
    width:80px;
    height:auto;
    object-fit:contain;
}

.header-texto{
    flex:1;
}

.header-texto h1{
    margin:0;
    font-size:28px;
    font-weight:700;
    color:#092F6D;
}

.header-texto p{
    margin-top:6px;
    font-size:15px;
    color:#5566FF;
    font-weight:400;
}



/* hasta */
@media (max-width: 850px) {
	body {
		background-image: url(../images/fondo-formulario-s.png);
		background-position: top;
	}

	.formBx h2 {
		font-size: 12px;
		font-weight: 500;
		color: var(--color6);
		text-transform: uppercase;
		margin: 0 0 5px 0;
}


	.formBx form {
		width: 100%;
		max-width: 500px;
		padding-left: 0;
	}
	.formBx form .inputBox textarea {
		height: 50px;
	}
	.formBx form #src-file2::before {
		content: 'Apoyo Gráfico';
	}

	 .form-header{
        flex-direction:column;
        text-align:center;
    }

    .logo-imed{
        width:65px;
    }

    .header-texto h1{
        font-size:22px;
    }

    .header-texto p{
        font-size:14px;
    }


}