.modal {
    position: fixed;
    inset: 0;
    z-index: 2000;

    display: grid;
    place-items: center;

    padding: 20px;

    background-color:
        rgba(15, 23, 42, 0.7);
}

.modal-contenido {
    width: min(100%, 520px);

    max-height: calc(100vh - 40px);
    overflow-y: auto;

    padding:
        16px;

    border-radius:
        var(--radio-grande);

    background-color: #ffffff;

    box-shadow:
        var(--sombra-media);

    animation:
        aparecer-modal
        var(--transicion-normal);
}

@keyframes aparecer-modal {
    from {
        opacity: 0;
        transform: scale(0.94);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* =========================
   Modal para salir
========================= */

.modal-salir-contenido {
    text-align: center;
}


.modal-salir-contenido h2 {
    margin: 0;

    font-size: 28px;
}

.modal-salir-contenido p {
    margin: 16px 0 0;

    color:
        var(--color-texto-secundario);

    line-height: 1.65;
}

.acciones-modal-salir {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 14px;

    margin-top: 16px;
}

.btn-continuar-examen,
.btn-confirmar-salida {
    flex: 1;

    min-width: 0;

    padding: 13px 18px;

    border-radius:
        var(--radio-pequeno);

    color: #ffffff;

    font-weight: 700;

    cursor: pointer;

    transition:
        background-color
        var(--transicion-rapida),
        transform
        var(--transicion-rapida);
}

.btn-continuar-examen {
    background-color:
        var(--color-secundario);
}

.btn-continuar-examen:hover {
    background-color:
        var(--color-secundario-hover);

    transform: translateY(-1px);
}

.btn-confirmar-salida {
    background-color:
        var(--color-peligro);
}

.btn-confirmar-salida:hover {
    background-color:
        var(--color-peligro-hover);

    transform: translateY(-1px);
}

/* =========================
   Modal del curso
========================= */

.modal-curso-contenido {
    width: min(100%, 700px);
}

.modal-curso-contenido h2 {
    margin: 0;

    font-size: 28px;

    text-align: center;
}

#cont-info-curso {
    margin-top: 16px;

    color:
        var(--color-texto-secundario);

    line-height: 1.7;
}

#cont-info-curso p {
    margin:
        0 0 1em;
}

#cont-info-curso p:last-child {
    margin-bottom: 0;
}

.btn-cerrar-curso {
    display: block;

    min-width: 180px;

    margin: 30px auto 0;
    padding: 13px 22px;

    border-radius:
        var(--radio-pequeno);

    background-color:
        var(--color-secundario);

    color: #ffffff;

    font-weight: 700;

    cursor: pointer;

    transition:
        background-color
        var(--transicion-rapida),
        transform
        var(--transicion-rapida);
}

.btn-cerrar-curso:hover {
    background-color:
        var(--color-secundario-hover);

    transform: translateY(-1px);
}