/* ===============================
   CONTAINER
================================ */

.alertas-container{

    max-width:1200px;
    margin:auto;
    padding:40px 20px;

}


/* ===============================
   TOPO
================================ */

.topo{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    margin-bottom:35px;
    flex-wrap:wrap;

}


.topo h1{

    margin:0;
    font-size:36px;
    color:#2d3748;

}


.topo p{

    margin-top:8px;
    color:#777;
    font-size:16px;

}



/* ===============================
   LISTA
================================ */


#listaAlertas{

    display:grid;
    gap:22px;

}



/* ===============================
   CARD ALERTA
================================ */


.card-alerta{

    background:#fff;

    border-radius:20px;

    padding:24px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:25px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

    transition:.25s;

}


.card-alerta:hover{

    transform:translateY(-4px);

    box-shadow:
    0 18px 40px rgba(0,0,0,.14);

}


.info{

    flex:1;

}


.info h3{

    margin:0 0 8px;

    font-size:24px;

    color:#2d3748;

}


.info p{

    color:#666;

    margin-bottom:18px;

}



/* ===============================
   TAGS
================================ */


.tags{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

}



.tag{

    background:#f6f7fb;

    color:#555;

    padding:8px 16px;

    border-radius:40px;

    font-size:14px;

    font-weight:600;

}



/* ===============================
   AÇÕES
================================ */


.acoes{

    display:flex;

    gap:10px;

    flex-wrap:wrap;

}


.acoes .btn{

    width:48px;

    height:48px;

    padding:0;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:12px;

}



/* ===============================
   LOADING
================================ */


.loading{

    background:#fff;

    padding:60px;

    border-radius:20px;

    text-align:center;

    font-size:22px;

    color:#666;

    box-shadow:
    0 10px 30px rgba(0,0,0,.08);

}



/* ===============================
   MODAIS
================================ */

.modal{

    position:fixed;

    inset:0;

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

    display:none;

    justify-content:center;

    align-items:center;

    overflow-y:auto;

    z-index:9999;

    backdrop-filter:blur(4px);

    padding:20px;

}



.modal.ativo{

    display:flex;

}


.modal-box{

    width:100%;
    max-width:520px;

    background:#fff;

    border-radius:20px;

    max-height:96vh;

    overflow:visible;
	
	animation:modalEntrada .25s ease;

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

}



@keyframes modalEntrada{


from{

    opacity:0;

    transform:
    translateY(20px);

}


to{

    opacity:1;

    transform:
    translateY(0);

}


}



.modal-header{

    padding:14px 22px;

    border-bottom:
    1px solid #eee;
	 flex-shrink:0;
}



.modal-header h2{
	
	 font-size:34px;

    margin:0;

    display:flex;

    align-items:center;

    gap:10px;

}



.modal-body{

     padding:16px 22px;

    color:#555;

    line-height:1.5;

    overflow-y:visible;

}



.modal-footer{

    display:flex;

    justify-content:flex-end;

    gap:12px;

    padding:14px 22px;

    border-top:
    1px solid #eee;
	 flex-shrink:0;

}





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


.campo-modal{

    display:flex;

    flex-direction:column;

    gap:4px;

    margin-bottom:8px;

}



.campo-modal label{
	
    font-weight:600;
	
	margin-bottom:4px;
    color:#374151;

}



.campo-modal input,
.campo-modal select{


    width:100%;


    padding:10px 14px;


    border:
    1px solid #ddd;


    border-radius:12px;


    font-size:15px;


    font-family:Poppins,sans-serif;


    background:#fff;


}



.campo-modal input:focus,
.campo-modal select:focus{


    outline:none;


    border-color:#ff6b00;


    box-shadow:
    0 0 0 3px rgba(255,107,0,.15);


}





/* ===============================
   TOAST
================================ */


.toast{


    position:fixed;


    top:25px;


    right:25px;


    background:#16a34a;


    color:#fff;


    padding:16px 22px;


    border-radius:14px;


    font-weight:600;


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


    opacity:0;


    transform:
    translateX(40px);


    transition:.30s;


    z-index:10000;


    pointer-events:none;


}



.toast.mostrar{


    opacity:1;


    transform:
    translateX(0);


}



/* ===============================
   RESPONSIVO
================================ */


@media(max-width:768px){


    .alertas-container{

        padding:25px 15px;

    }


    .topo{

        flex-direction:column;

        align-items:flex-start;

    }


    .topo h1{

        font-size:28px;

    }



    .card-alerta{


        flex-direction:column;

        align-items:flex-start;


    }



    .acoes{


        width:100%;


    }



    .acoes .btn{


        flex:1;


    }


.modal{

    padding:15px;

}

.modal-box{

    max-width:100%;

    max-height:96vh;

}



    .modal-footer{


        flex-direction:column-reverse;


    }



    .modal-footer .btn{


        width:100%;


    }


}
/* ================================
   AVISO DE NOVAS OPORTUNIDADES
================================ */

.aviso-notificacoes div{

    display:flex;

    align-items:center;

    gap:12px;

    font-size:16px;

    color:#263238;

}



.aviso-notificacoes i{

    font-size:28px;

    color:#ff7a00;

}



.aviso-notificacoes strong{

    color:#ff7a00;

}



.aviso-notificacoes button{

    white-space:nowrap;

}





@media(max-width:768px){


.aviso-notificacoes{


    flex-direction:column;

    align-items:flex-start;


}



.aviso-notificacoes button{


    width:100%;


}



}

.card-notificacao{

    background:#fff;

    border-radius:18px;

    margin-bottom:18px;

    border:1px solid #ececec;

    overflow:hidden;

    box-shadow:
        0 10px 25px rgba(0,0,0,.06);

    transition:.25s;

}

.card-notificacao:hover{

    transform:translateY(-2px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.10);

}

.cabecalho-notificacao{

    cursor:pointer;

    list-style:none;

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:22px 24px;

    gap:20px;

}

.cabecalho-notificacao::-webkit-details-marker{
    display:none;
}

.cabecalho-notificacao h2{
    margin:0;
}

.cabecalho-notificacao p{
    margin-top:5px;
    color:#777;
}

.conteudo-notificacao{

    border-top:1px solid #f1f1f1;

    padding:24px;

}

.card-notificacao summary i{
    transition:.3s;
    color:#ff6b00;
}

.card-notificacao[open] summary i{
    transform:rotate(180deg);
}

.filtros-regras{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin:20px 0 30px;
}

.filtro-regra{
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px 18px;
    border-radius:999px;
    background:#fff;
    border:1px solid #e8e8e8;
    cursor:pointer;
    font-weight:600;
    transition:.2s;
}

.filtro-regra:hover{
    border-color:#ff6b00;
    color:#ff6b00;
}

.filtro-regra.ativo{
    background:#ff6b00;
    color:#fff;
}

.filtro-regra span{
    background:rgba(0,0,0,.08);
    border-radius:999px;
    padding:2px 8px;
    font-size:12px;
}

.filtro-regra.ativo span{
    background:rgba(255,255,255,.25);
}

.aviso-notificacoes{

    display:flex;
    justify-content:space-between;
    align-items:center;

    gap:25px;

    background:#fff8f2;

    border:2px solid #ff7a00;

    border-radius:18px;

    padding:24px;

    margin-bottom:35px;

    box-shadow:0 10px 25px rgba(0,0,0,.06);

}

.aviso-info{

    display:flex;
    align-items:center;
    gap:20px;

}

.icone-aviso{

    width:60px;
    height:60px;

    border-radius:50%;

    background:#ff7a00;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;

}

.titulo-aviso{

    font-size:22px;

    font-weight:700;

    color:#1f3558;

    margin-bottom:6px;

}

#textoNotificacoes{

    font-size:17px;

    color:#666;

}

#textoNotificacoes strong{

    color:#ff7a00;

    font-size:30px;

    margin:0 4px;

}

/* ===============================
   BOTÕES DAS NOTIFICAÇÕES
================================ */

.acoes-notificacao{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;

    margin-top:22px;

}

.acoes-notificacao .btn{

    height:54px;

    border-radius:12px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    font-size:15px;

    font-weight:600;

    transition:.25s;

    box-shadow:0 8px 18px rgba(0,0,0,.08);

}

.acoes-notificacao .btn:hover{

    transform:translateY(-3px);

    box-shadow:0 15px 30px rgba(0,0,0,.14);

}

.acoes-notificacao .btn i{

    font-size:15px;

}

/* Botão verde */

.btn-success{

    background:#16a34a;

    color:#fff;

    border:1px solid #16a34a;

}

.btn-success:hover{

    background:#15803d;

    border-color:#15803d;

}

/* Responsivo */

@media(max-width:768px){

    .acoes-notificacao{

        grid-template-columns:1fr;

    }

}

.filtro-conferido{

    background:#374151;

    color:#fff;

    border-color:#374151;

}

.filtro-conferido span{

    background:rgba(255,255,255,.20);

}

.filtro-conferido:hover{

    background:#1f2937;

    border-color:#1f2937;

    color:#fff;

}


.info-imovel{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:8px;

    margin-top:8px;

    font-size:15px;

    color:#6b7280;

    font-weight:500;

}

.info-imovel i{

    color:var(--cor-principal);

}

.divisor{

    color:#d1d5db;

    margin:0 4px;

    font-weight:400;

}

/* ===============================
   TÍTULO DO IMÓVEL
================================ */

.titulo-imovel{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:12px;

}

.titulo-imovel div{

    flex:1;

}


/* ===============================
   BADGE NOVA
================================ */

.badge-nova{

    background:linear-gradient(135deg,#ff6b00,#ff8f1f);

    color:#fff;

    padding:5px 12px;

    border-radius:999px;

    font-size:11px;

    font-weight:700;

    letter-spacing:.5px;

    white-space:nowrap;

    flex-shrink:0;

    box-shadow:0 6px 14px rgba(255,107,0,.25);

}


.campo-cidade-alerta{

    position:relative;

}


.sugestoes-cidade-alerta{

    position:absolute;
    z-index:20;
    top:100%;
    left:0;
    right:0;
    max-height:220px;
    overflow-y:auto;
    margin-top:4px;
    padding:6px;
    border:1px solid #e5e7eb;
    border-radius:12px;
    background:#fff;
    box-shadow:0 12px 26px rgba(15, 23, 42, .14);

}


.sugestao-cidade-alerta{

    display:flex;
    width:100%;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:10px 12px;
    border:0;
    border-radius:8px;
    background:transparent;
    color:#374151;
    font:inherit;
    text-align:left;
    cursor:pointer;

}


.sugestao-cidade-alerta:hover,
.sugestao-cidade-alerta:focus{

    outline:0;
    background:#fff3e8;
    color:#c2410c;

}


.sugestao-cidade-alerta small{

    flex:none;
    color:#6b7280;
    font-size:12px;

}


.topo-acoes{

    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:12px;
    flex-wrap:wrap;

}