body {
    font-family: sans-serif;
    margin: 0;
    padding: 20px;
    background-color: #f0f8ff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    box-sizing: border-box;
}

.container {
    text-align: center;
    padding: 2rem;
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 600px;
    box-sizing: border-box;
    display: flex; /* Convertimos el contenedor en un flex container */
    flex-direction: column; /* Alineamos los elementos internos verticalmente */
    justify-content: space-between; /* Espaciamos los elementos verticalmente */
    align-items: center; /* Centramos los elementos horizontalmente */
    min-height: 300px; /* Aseguramos una altura mínima para el espaciado */
}

.logo {
    max-width: 150px;
    height: auto;
    margin-bottom: 1rem;
}

h1 {
    color: #191970;
    margin-bottom: 1.5rem;
    font-size: 1.6rem;
}

.botones-principales { /* Contenedor para "Inscribirse" y "Consultar" */
    display: flex; /* Alinea los botones horizontalmente */
    gap: 1rem; /* Espacio entre los botones */
}

button,
.button-atras,
.button-verificar {
    padding: 0.7rem 1.2rem;
    margin: 0.3rem;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    display: inline-block;
    min-width: 80px;
    box-sizing: border-box;
}

button:hover,
.button-atras:hover,
.button-verificar:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.button-inscribir {
    background-color: #add8e6;
    color: #191970;
}

.button-consultar {
    background-color: #191970;
    color: white;
}

.button-atras { /* Botón "Volver a la Página principal" */
    background-color: #5cb85c; /* Color verde */
    color: white;
    /* Puedes añadir margin-top: auto; si es necesario */
}

.button-verificar {
    background-color: #f0f0f0;
    color: #333;
}

.button-inscribir:hover {
    background-color: #87ceeb;
}

.button-consultar:hover {
    background-color: #000080;
}

.button-atras:hover {
    background-color: #4cae4c;
}

.button-verificar:hover {
    background-color: #e0e0e0;
}

/* Estilos para pantallas pequeñas */
@media (max-width: 768px) {
    h1 {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }

    .botones-principales {
        flex-direction: row; /* Vuelve a la disposición horizontal en pantallas pequeñas */
        justify-content: center; /* Centra los botones en pantallas pequeñas */
        gap: 0.5rem;
    }

    button,
    .button-atras,
    .button-verificar {
        font-size: 0.8rem;
        padding: 0.6rem 1rem;
        margin: 0.2rem;
        min-width: 70px;
    }
}

@media (max-width: 600px) {
    h1 {
        font-size: 1.3rem;
    }

    .botones-principales {
        flex-direction: column; /* Apila los botones en pantallas muy pequeñas */
        align-items: center;
        gap: 0.5rem;
    }

    button,
    .button-atras,
    .button-verificar {
        font-size: 0.75rem;
        padding: 0.5rem 0.8rem;
        min-width: 60px;
        width: 80%; /* Ocupan más ancho en pantallas muy pequeñas */
    }
}