body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #f4f4f9;
    color: #333;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    margin: 0;
}

header{
    margin: 0;
    background-color:blue;
    color: rgb(241, 220, 220); 
    text-align: center;
    padding : 20px;
}

header h1{
    font-size: 29px;
    font-family: 'Arial', sans-serif;
    color: white;
}

nav ul{

    list-style: none;
    display: flex;
    gap: 20px;
    justify-content: center;
}

nav a{
    color: white;
    text-decoration: none;
    font-weight: bold;
    padding: 5px;
}

main {
    flex: 1; /* Hace que el main ocupe el espacio disponible */
    display: flex;
    justify-content: center; /* Centra el formulario horizontalmente */
    align-items: center; /* Centra el formulario verticalmente (si hay poco contenido) */
    padding: 2em 1em; /* Añade espacio en los lados */
}


form {
    background-color: #ffffff;
    max-width: 500px; /* Un poco más ancho */
    width: 100%;
    padding: 25px 40px; /* Más espacio interno */
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border: 1px solid #e0e0e0;
}

/* Títulos dentro del formulario */
form h3 {
    text-align: center;
    font-size: 1.8em;
    color: #2c3e50;
    margin-bottom: 10px;
}

form p {
    text-align: center;
    font-size: 0.95em;
    color: #7f8c8d;
    margin-bottom: 25px;
}

/* Estilo para todas las etiquetas (labels) */
form label {
    display: block; /* Hace que la etiqueta ocupe su propia línea */
    margin-top: 15px; /* Espacio *antes* de cada etiqueta */
    margin-bottom: 5px; /* Espacio *después* de la etiqueta, antes del input */
    font-weight: 600; /* Texto un poco más grueso */
    color: #34495e;
}

/* Estilo para todos los campos de entrada (inputs) y el select */
form input[type="text"],
form input[type="tel"],
form input[type="email"],
form input[type="password"],
form input[type="date"],
form select {
    width: 100%; /* Ocupan todo el ancho del formulario */
    padding: 12px; /* Más espacio interno para que sea fácil de leer */
    border: 1px solid #bdc3c7;
    border-radius: 5px;
    box-sizing: border-box; /* IMPORTANTE: para que el padding no afecte el ancho */
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Efecto al hacer clic en un campo (foco) */
form input:focus,
form select:focus {
    border-color: #3498db; /* Borde azul */
    box-shadow: 0 0 5px rgba(52,152,219,0.5); /* Sombra azul suave */
    outline: none; /* Quita el borde feo por defecto */
}

/* --- ESTILO DE LOS BOTONES --- */

/* Contenedor para los botones (opcional, para alinearlos) */
.form-buttons {
    display: flex;
    gap: 10px; /* Espacio entre los botones */
    margin-top: 30px;
}

/* Estilo base para ambos botones */
form input[type="submit"],
form input[type="reset"] {
    flex: 1; /* Hace que ambos botones compartan el espacio */
    padding: 14px;
    border: none;
    border-radius: 5px;
    font-size: 1em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.1s;
}

/* Botón de Enviar (Principal) */
form input[type="submit"] {
    background-color: #3498db; /* Azul principal */
    color: white;
}

form input[type="submit"]:hover {
    background-color: #2980b9; /* Azul más oscuro al pasar el ratón */
    transform: translateY(-2px); /* Efecto de "levantar" */
}

/* Botón de Borrar (Secundario) */
form input[type="reset"] {
    background-color: #ecf0f1; /* Gris claro */
    color: #7f8c8d; /* Texto gris oscuro */
    border: 1px solid #bdc3c7;
}

form input[type="reset"]:hover {
    background-color: #e0e6e8;
    transform: translateY(-2px);
}