/*Hoja de estilo general*/
body{
	font-family: Arial, sans-serif;/*Define la letra de la pagina*/
	background-color: #8FFADF;/*Color de fondo*/
	height: 100vh;/*ocupa toda altura visible del navegador*/
	justify-content: center;/*centra el contenido horizontalmente*/
	align-items: center;/*Centra el contenido Verticalmente*/
	display: flex;
}
/*Contenedor Principal*/
.contenedor{
	background-color: white; /*fondo del contenedor principal*/
	padding: 40px; /*Espacio interno*/
	border-radius: 10px; /*Bordes redondeados*/
	box-shadow: 0 0 10px rgba(0,0,0,1); /*Sombra suave alrededor*/
	width: 300px; /*Ancho fijo del contenedor*/
}
.formulario-login h2{
	text-align: center; /*Centra el titulo dentro del formulario*/
	margin-bottom: 20px; /*Espacio inferior al titulo*/
	color: #823016; /*color del texto del titulo*/
}
.formulario-login input{
	display:block; /*funcion parar que el objeto se muestre*/
	width: 100%;
	padding: 10px;
	margin-bottom: 15px; /*espacio entre campos*/
	border: 1px solid #ccc; /*espacio entre campos, #ccc borede gris claro*/
	border-radius: 5px; /*bordes redondeados*/
	box-sizing: border-box; /*incluye el orde y el pading en el ancho total*/
}
.formulario-login button{
	width: 100%;
	padding: 10px;
	background-color: #007bff; /*fondo azul*/
	color: white;
	border: none; /*sin borde*/
	border-radius: 5px; /*bordes redondeados*/
	cursor: pointer; /*cambia el cursor a una mano al pasar el mouse*/
	font-weight: bold; /*texto del boton en negrita*/
	transition: background-color 0.3s ease; /*suabisar el cambio de color al pasar el mouse*/
}
.formulario-login button:hover{
	background-color: #0056b3; /*azul oscuro al pasar el mouse*/
}
@media (max-width: 480px) {
    .contenedor {
        padding: 20px;   /* menos padding en pantallas pequeñas */
		position: fixed;  
    }
    .formulario-login h2 {
        font-size: 1.2rem;
    }
}