form { /* Centrar el formulario en la página */ margin: 0 auto; width: 400px; /* Esquema del formulario */ padding: 1em; border: 3px solid #CCC; border-radius: 1em; } form ul { list-style: none; padding: 0; margin: 0; } form li + li { margin-top: 1em; } form label { display: block; } input, textarea { /* Para asegurarse de que todos los campos de texto tienen la misma configuración de letra Por defecto, las áreas de texto tienen un tipo de letra monoespaciada */ font: 1em sans-serif; /* Tamaño uniforme del campo de texto */ width: 350px; box-sizing: border-box; /* Hacer coincidir los bordes del campo del formulario */ border: 1px solid #999; } input:focus, textarea:focus { /* Destacado adicional para elementos que tienen el cursor */ border-color: #000; } textarea { /* Alinear los campos de texto multilínea con sus etiquetas */ vertical-align: top; /* Proporcionar espacio para escribir texto */ height: 5em; resize: vertical; } .botonFormulario { font: inherit; margin-top: 1em; margin-left: 2em; cursor: pointer; border: #f3f3f3; border-style: outset; border-radius: 5px; padding: 5px; background: #3a7999; color: white; box-sizing: border-box; } .botonFormulario:hover { color: #3a7999; background: #f2f2f2; } .botonFormulario:disabled { background: limegreen; cursor: not-allowed; } .botonFormulario:disabled:hover { color: white; background: limegreen; } .enviandoFormulario { font: inherit; margin-top: 1em; margin-left: 2em; border: #f3f3f3; border-style: outset; border-radius: 5px; padding: 5px; box-sizing: border-box; cursor: wait; background: yellow; color: black; } .errorFormulario { font: inherit; margin-top: 1em; margin-left: 2em; border: #f3f3f3; border-style: outset; border-radius: 5px; padding: 5px; color: white; box-sizing: border-box; cursor: not-allowed; background: red; } .aviso { display: none; margin-top: 5px; color: red; font-weight: bold; } @media screen and (max-width: 768px) { form { /* Centrar el formulario en la página */ margin: 0 auto; /* Menor ancho en móviles */ width: 300px; /* Esquema del formulario */ padding: 10px; border: 1px solid #CCC; border-radius: 1em; } input, textarea { /* Para asegurarse de que todos los campos de texto tienen la misma configuración de letra Por defecto, las áreas de texto tienen un tipo de letra monoespaciada */ font: 1em sans-serif; /* Tamaño uniforme del campo de texto */ width: 270px; box-sizing: border-box; /* Hacer coincidir los bordes del campo del formulario */ border: 1px solid #999; } }