/* Fondo del modal */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0,0,0,.6);
}

/* Contenedor */
.modal-content {
    background: #2F2F2F;
    width: 90%;
    max-width: 400px;
    margin: 10% auto;
    padding: 30px;
    border-radius: 12px;
    position: relative;
    animation: aparecer .3s;
}

/* Botón cerrar */
.close {
    position: absolute;
    right: 20px;
    top: 10px;
    font-size: 30px;
    cursor: pointer;
}

.modal input{
    width:100%;
    padding:12px;
    margin:10px 0;
    border:1px solid #ddd;
    border-radius:8px;
    box-sizing:border-box;
}

.modal button{
    width:100%;
}

@keyframes aparecer{
    from{
        transform:translateY(-30px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}