/* ========================= */
/* MODAL                     */
/* ========================= */

.modal{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.45);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:999;

    backdrop-filter:blur(3px);

}


.oculto{

    display:none;

}


.modal-content{

    width:500px;

    background:white;

    border-radius:18px;

    overflow:hidden;

    box-shadow:0 20px 60px rgba(0,0,0,.20);

    animation:modal .20s ease;

}


@keyframes modal{

    from{

        transform:translateY(25px);

        opacity:0;

    }

    to{

        transform:translateY(0);

        opacity:1;

    }

}


.modal-header{

    padding:22px 28px;

    border-bottom:1px solid #ECECEC;

}


.modal-header h2{

    font-size:22px;

    color:#1F2937;

}


.modal-body{

    padding:28px;

}


.campo{

    display:flex;

    flex-direction:column;

    margin-bottom:20px;

}


.campo label{

    margin-bottom:8px;

    font-size:14px;

    color:#6B7280;

    font-weight:600;

}


.campo select{

    padding:14px;

    border-radius:10px;

    border:1px solid #D6D6D6;

    outline:none;

    font-size:15px;

    transition:.2s;

}


.campo select:focus{

    border-color:#2563EB;

}


.modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:22px 28px;

    border-top:1px solid #ECECEC;

}


#btnCancelar{

    background:#E5E7EB;

    color:#374151;

    padding:12px 22px;

    border-radius:10px;

    font-weight:600;

}


#btnCancelar:hover{

    background:#D1D5DB;

}


#btnGerar{

    background:#2563EB;

    color:white;

    padding:12px 22px;

    border-radius:10px;

    font-weight:600;

}


#btnGerar:hover{

    background:#1D4ED8;

}


.resultado{

    text-align:center;

}


.resultado h1{

    font-size:54px;

    color:#2563EB;

    margin-bottom:15px;

}


.resultado p{

    color:#6B7280;

    font-size:16px;

}


#btnFecharResultado{

    background:#E5E7EB;

    color:#374151;

    padding:12px 22px;

    border-radius:10px;

}


#btnNovoNovamente{

    background:#16A34A;

    color:white;

    padding:12px 22px;

    border-radius:10px;

}


#btnNovoNovamente:hover{

    background:#15803D;

}