/* Estilos generales del cuerpo */
body {
    font-family: sans-serif; /* Una fuente simple y legible */
    line-height: 1.6;       /* Espaciado entre líneas */
    margin: 0;              /* Quita márgenes por defecto del navegador */
    padding: 0;
    background-color: #f4f4f4; /* Un fondo gris claro */
    color: #333;            /* Color de texto principal oscuro */
}

/* Contenedor principal para centrar contenido (opcional) */
header, main, footer {
    max-width: 800px;       /* Ancho máximo del contenido */
    margin: 20px auto;      /* Centra el contenido y añade espacio arriba/abajo */
    padding: 20px;          /* Espacio interno */
    background-color: #fff; /* Fondo blanco para el contenido */
    border-radius: 5px;     /* Bordes redondeados */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Sombra suave */
}

/* Estilo del encabezado principal */
h1 {
    color: #0056b3; /* Un color azul para el título */
    text-align: center;
}

/* Estilo del botón */
button {
    display: block; /* Hace que el botón ocupe su propia línea */
    margin: 20px auto; /* Centra el botón y añade espacio */
    padding: 10px 20px; /* Espacio interno del botón */
    background-color: #007bff; /* Azul primario */
    color: white;           /* Texto blanco */
    border: none;           /* Sin borde */
    border-radius: 5px;     /* Bordes redondeados */
    cursor: pointer;        /* Cambia el cursor al pasar por encima */
    font-size: 1em;
}

/* Estilo al pasar el ratón sobre el botón */
button:hover {
    background-color: #0056b3; /* Un azul más oscuro */
}

/* Estilo para el pie de página */
footer {
    text-align: center;
    margin-top: 40px;
    padding: 10px;
    font-size: 0.9em;
    color: #777;
    background-color: transparent; /* Sin fondo blanco */
    box-shadow: none; /* Sin sombra */
}

/* Estilo para el div donde mostraremos mensajes (opcional) */
#mensaje {
    margin-top: 15px;
    padding: 10px;
    text-align: center;
    font-weight: bold;
}