:root{
	--color-blue: #0A3871;
	--color-grey: #495057;
	--color-greyDark: #343A40;
	--color-blanco: #F4F4F4 ;
	--color-lightBlue2: #D8DFE8;    
}

* {
    padding: 0;
    margin: 0;
}

header{
    padding: 40px 0 0 40px;
    
}

body {
    /*Cuerpo*/
    background-color: white;
}

.contenedor{
	margin: auto 40px auto auto;
	align-items: end;
	min-height: calc(100vh - 80px - 56px);
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 1.5rem;    
}

.izquierda{
	width: auto;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
    padding-left: 80px;
}

.texto{
	min-height: 50px;
	border: none;
	outline: none;
	resize: none;
	font-size: 2rem; /*32px*/
	color: var(--color-blue);
	font-family: 'Inter';
    height: 100%;
    background-color: var(--color-lightBlue2);
}

.texto::placeholder{
    color: var(--color-blue);
}

.info {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: center;
	font-size: 1rem; /*16 px*/
	color: var(--color-grey);
}

.botones{
	display: flex;
	justify-content: space-evenly;
	padding: .8rem;
	flex-wrap: nowrap;
	gap: .8rem;    
}

.btn-encriptar{
    color: var(--color-blanco);
    background-color: var(--color-blue);
	width: 45%;
	max-width: 328px;
	min-width: 160px;
	height: 67px;
	font-size: 16px;
	font-weight: bold;
	border-radius: 24px;
	border: none;
	outline: 1px solid var(--color-blue);    
}

.btn-desencriptar{
    color: var(--color-blue);
    background-color: var(--color-blanco);
	width: 45%;
	max-width: 328px;
	min-width: 160px;
	height: 67px;
	font-size: 16px;
	font-weight: bold;
	border-radius: 24px;
	border: none;
	outline: 1px solid var(--color-blue);        
}

.derecha{
    background-color: white;
	align-items: center;
	width: 100%;
	height: calc(100% + 60px);
	border-radius: 32px;
	display: flex;
	flex-direction: column;
	/* justify-content: center; */ /*Default Desktop*/
	justify-content: flex-start;/*OnEncriptar()*/
	padding: 16px;
	gap: 32px;
	box-shadow: 0px 24px 32px -8px rgba(0, 0, 0, 0.08);    
}

#munheco{
	width: 70%;
}
.textoRespuesta{
    font-family: "Inter";
    font-weight: bold;
    font-size: 1.5rem; /* 16 px*/
    line-height: 120%; /*Default Desktop*/
	/*line-height: 150%; *//*On Encriptar*/
    text-align: center;
	width: 100%;
	height: 100%;
    color: var(--color-greyDark); /*Default Desktop*/
	/*color: var(--color-grey);*/ /*On Encriptar*/
    /*border-color: white;*/
	background-color: var(--color-lightBlue2);
	border: none;
}

.textoInfo{
    font-family: "Inter";
    font-weight: 400;
    font-size: 1rem; /* 16 px*/
    line-height: 1.5;
    text-align: center;   
    color: var(--color-grey); 
}

.btn-copiar, .btn-reset{
    color: var(--color-blue);
    background-color: var(--color-blanco);
	width: 45%;
	max-width: 328px;
	min-width: 160px;
	height: 67px;
	font-size: 1rem;
	font-weight: bold;
	border-radius: 24px;
	border: none;
	outline: 1px solid var(--color-blue);        
}

footer{
	font-size: 1.rem;
	text-align: center;
}



/* Estilos para Tablets (768x1174) */
@media (max-width: 1440px) and (min-width: 769px) {
	.contenedor{
		margin: auto 40px auto auto;
		align-items: end;
		flex-wrap: wrap;
	}

}


/* Estilos para Tablets (específicamente 768px de ancho) */
@media (max-width: 768px) {
	.contenedor{
		display: grid;
		/* grid-template-rows: 2fr; */
		grid-template-columns: 1fr;
	}

	.derecha{
		width: 100%;
		height: 100%;
		flex-wrap: nowrap;
	}

	#munheco{
		display: none;
	}

	.textoRespuesta{
		width: 100%;
		resize: vertical; /* Permite que el usuario redimensione verticalmente */
		min-height: 50px; /* Establece una altura mínima */
		max-height: 300px; /* Establece una altura máxima si es necesario */
	}
}






/* Estilos para Smartphones (375x933) */
@media (max-width: 375px) {
	.contenedor{
		display: grid;
		grid-template-rows: 2fr;
		grid-template-columns: 1fr;
	}

	#munheco{
		display: none;
	}

	.derecha{
		flex-wrap: nowrap;
	}

	.textoRespuesta{
		width: 100%;
		resize: vertical; /* Permite que el usuario redimensione verticalmente */
	}

	.botones{
		display: flex;
		justify-content: space-evenly;
		padding: .8rem;
		flex-wrap: wrap;
		gap: .8rem;    
	}	

	footer{
		text-align: center;
	}	
}