.modal {
    position: fixed;
    color: var(--negro);
    min-height: 280px;
    width: 328px;
    height: fit-content;
    left: 50%;
    background-color: var(--blanco);
    border-radius: 8px;
    overflow: hidden;
    z-index: 4;
    transition: top 0.5s;
}

.modal.mostrar {
    top: 50%;
    animation: slideIn 0.3s ease-out forwards;
}

.modal.ocultar {
    top: 0%;
    animation: slideOut 0.3s ease-out forwards;
}

.modal > div:first-child {
    padding: 48px 60px 20px 36px;
}

.modal .titulo {
    font-size: 24px;
    font-family: NovaBold;
    line-height: 26px;
    max-width: 17ch;
    letter-spacing: -0.5px;
}

.modal .leyenda {
    font-size: 18px;
    line-height: 20px;
}

.modal .control {
    border-top: 1px solid var(--gris-600);
    padding: 20px;
}

.modal .control .btn {
    width: 103px;
    height: 40px;
}

.modal ::deep .cargando .spinner {
    height: 50px;
    width: 50px;
}