.formulario { background-color: #e4e4df; max-width: 100%; margin: 0 auto; padding: 1%; } .formulario h2 { text-align: center; font-size: 40px; font-style: Jockey One; color: #000000; padding: 10px; } .formulario h4{ font-size: 20px; font-style: Jockey One; color: #000000; padding: 10px; } .form { margin-top: 20px; /* Espacio entre el h5 y el formulario */ padding: 10px; display: flex; flex-wrap: wrap; /* Permite que los elementos se envuelvan si no caben en una sola línea */ } .form { margin-top: 20px; /* Espacio entre el h5 y el formulario */ padding: 10px; display: flex; flex-wrap: wrap; /* Permitir que los elementos se envuelvan en filas */ justify-content: space-between; /* Distribuir los elementos en tres columnas */ } .campo { width: calc(33.33% - 10px); /* Ancho de cada campo (menos el espacio entre ellos) */ margin-bottom: 20px; /* Espacio entre campos */ display: flex; flex-direction: column; /* Cambiar la dirección del flujo a vertical */ overflow: hidden; /* Oculta cualquier contenido que se desborde del área del input */ } .campo label { padding: 2%; font-weight: bold; } .campo input[type="text"], .campo input[type="number"], .campo select, .campo input[type="password"], .campo input[type="date"], .campo input[type="email"] { width: 100%; /* Ocupar todo el ancho disponible */ padding: 5px; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; font-size: 16px; transition: border-color 0.3s ease; margin-top: 5px; /* Espacio entre el label y el input */ } .btnenviar{ text-align: center; /* Centra horizontalmente el contenido */ } .boton { text-align: center; background-color: #007bff; color: white; border: none; padding: 15px 30px; cursor: pointer; border-radius: 5px; font-weight: bold; /* Hace que el texto esté en negrita */ } .boton:hover { background-color: #0056b3; }