* {
	box-sizing: border-box;
}

body {
	font-family: 'Montserrat', sans-serif;
	background: #ffffff;
}

main {

	width: 95%;
	margin: auto;
	padding: 40px;
}

.formulario {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.formulario__label {
	display: block;
	font-weight: 700;
	color: rgb(103, 95, 95);
	padding: 10px;
	cursor: pointer;
}

.formulario__grupo-input {
	position: relative;
}

.boolean-field {
	display: inline-block;
	vertical-align: middle;
	margin-right: 10px;
	text-align: left;

}

.boolean-checkbox {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-right: 5px;
	border: 1px solid #ccc;
	border-radius: 3px;
	cursor: pointer;
}

.boolean-label {
	display: inline-block;
	margin-right: 10px;
	vertical-align: middle;
	font-weight: 700;
	color: rgb(103, 95, 95);
	padding: 10px;
	cursor: pointer;
}

.formulario__input {
	width: 100%;
	background: rgb(225, 224, 238);
	border: 3px solid transparent;
	border-radius: 5px;
	height: 40px;
	line-height: 45px;
	padding: 0 40px 0 10px;
	transition: 0.6s ease all;
}

.formulario__input:is(textarea) {
	line-height: 1.2;
	height: 160px;
	/* Ajusta este valor para cambiar la altura del textarea */
}

.formulario__input[type="file"] {
    /* Reglas para centrar verticalmente el contenido de tipo "file" */
    height: auto;
    padding: 10px 40px 10px 10px;
    line-height: normal;
}

.formulario__input-2 {
	width: 100%;
	border: 3px solid transparent;
	border-radius: 10px;
	height: 10px;
	line-height: 20px;
	padding: 0 20px 0 10px;
	transition: 0.3s ease all;
	list-style: none;
}

.formulario__input-3 {
	width: 100%;
	/*background: #fff;*/
	border: 3px solid transparent;
	border-radius: 10px;
	height: 15px;
	line-height: 20px;
	padding: 0 20px 0 10px;
	transition: 0.3s ease all;
	list-style: none;
}


.formulario__label__izquierda {
	float: left;
	width: 100%;
	/*background: #fff;*/
	border: 3px solid transparent;
	border-radius: 10px;
	height: 15px;
	line-height: 20px;
	padding: 0 20px 0 10px;
	transition: 0.3s ease all;
	list-style: none;

}

.formulario__input:focus {
	border: 3px solid #d4d6d8;
	outline: none;
	box-shadow: 3px 0px 30px rgba(163, 163, 163, 0.4);
	border-radius: 5px;
}

.formulario__input-error {
	font-size: 12px;
	margin-bottom: 0;
	display: none;
	color: #F66060;
}

.formulario__input-error-activo {
	display: block;
}

.formulario__validacion-estado {
	position: absolute;
	right: 20px;
	bottom: 12px;
	z-index: 100;
	font-size: 16px;
	opacity: 0;
}

.formulario__columnadoble,
.formulario__grupo-btn-enviar {
	grid-column: span 2;
}

.formulario__mensaje {

	height: 100%;
	line-height: 30px;
	background: #F66060;
	padding: 12px 12px 12px 12px;
	border-radius: 3px;
	display: none;
}

.formulario__mensaje p {
	margin: 0;
}

.formulario__mensaje-activo {
	display: block;
}

.formulario__grupo-btn-enviar {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 25px 25px 25px 25px;
}

.formulario__btn {
	height: 45px;
	line-height: 45px;
	width: 30%;
	background: rgb(0, 52, 107);
	color: #ffffff;
	font-weight: bold;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	transition: .1s ease all;
}

.formulario__btn:hover {
	box-shadow: 3px 0px 30px rgba(163, 163, 163, 1);
}

.formulario__mensaje-exito {
	font-size: 14px;
	color: #119200;
	display: none;
}

.formulario__mensaje-exito-activo {
	display: block;
}

.btn_redaccion {
	height: 30px;
	/* Ajusta este valor para cambiar la altura del botón */
}

/* ----- -----  Estilos para Validacion ----- ----- */
.formulario__grupo-correcto .formulario__validacion-estado {
	color: #1ed12d;
	opacity: 1;
}

.formulario__grupo-incorrecto .formulario__label {
	color: #f04c4c;
}

.formulario__grupo-incorrecto .formulario__validacion-estado {
	color: #f04c4c;
	opacity: 1;
}

.formulario__grupo-incorrecto .formulario__input {
	border: 3px solid #f04c4c;
}

.formulario__oculto {
	visibility: hidden;
}

.formulario__visible {
	visibility: visible;
}

#logo {
	position: fixed;
	top: 2vw;
	right: 3vw;
	width: 8vw;
	height: 2vw;
}

#errorMensaje {
	text-align: center;
	padding: 10px;
}

h3 {
	text-align: center;
	padding: 10px;
}

/* ----- -----  Mediaqueries ----- ----- */
@media screen and (max-width: 700px) {

	.formulario,
	.formulario__columnadoble,
	.formulario__grupo-btn-enviar,
	.formulario__columnatriple {
		grid-template-columns: 1fr;
	}

	.formulario__columnadoble,
	.formulario__grupo-btn-enviar,
	.formulario__columnatriple {
		grid-column: 1;
	}

	.formulario__btn {
		width: 100%;
	}
}