/*==================================================
CADASTRO
==================================================*/

.cadastro-container{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.cadastro-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

    padding:25px;

    background:#181818;

    border:1px solid #2c2c2c;

    border-radius:18px;

}

.cadastro-header h2{

    font-size:30px;

    font-weight:700;

    margin-bottom:8px;

}

.cadastro-header p{

    color:#9a9a9a;

    line-height:24px;

}

.cadastro-status{

    text-align:right;

}

.cadastro-status span{

    display:block;

    color:#888;

    font-size:13px;

}

.cadastro-status strong{

    font-size:20px;

    color:var(--green);

}

/*==================================================
PROGRESSO
==================================================*/

.progress-box{

    background:#181818;

    border:1px solid #2c2c2c;

    border-radius:18px;

    padding:25px;

}

.progress-info{

    display:flex;

    justify-content:space-between;

    margin-bottom:15px;

}

.progress-info span{

    color:#999;

}

.progress{

    width:100%;

    height:14px;

    background:#0f0f0f;

    border-radius:30px;

    overflow:hidden;

}

.progress-bar{

    height:100%;

    width:0;

    background:linear-gradient(90deg,#00d15a,#6dff7c);

    transition:.35s;

}

/*==================================================
ABAS
==================================================*/

.tabs{

    display:flex;

    gap:8px;

    flex-wrap:wrap;

}

.tab{

    padding:14px 22px;

    background:#181818;

    border:1px solid #2f2f2f;

    border-radius:12px;

    color:#bdbdbd;

    cursor:pointer;

    transition:.25s;

    font-size:14px;

}

.tab:hover{

    background:#222;

}

.tab.active{

    background:var(--green);

    color:#000;

    border-color:var(--green);

    font-weight:700;

}

/*==================================================
CONTEÚDO
==================================================*/

.tab-content{

    background:#181818;

    border:1px solid #2c2c2c;

    border-radius:18px;

    padding:35px;

    min-height:500px;

}

/*==================================================
RODAPÉ
==================================================*/

.cadastro-footer{

    display:flex;

    justify-content:flex-end;

}

.btn-success{

    border:none;

    background:var(--green);

    color:#000;

    padding:14px 34px;

    border-radius:12px;

    cursor:pointer;

    font-size:15px;

    font-weight:700;

    transition:.25s;

}

.btn-success:hover{

    transform:translateY(-2px);

}

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

.form-grid{

    display:grid;

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

    gap:20px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:8px;

}

.form-group.full{

    grid-column:1 / -1;

}

.form-group label{

    color:#9d9d9d;

    font-size:13px;

}

.form-group input,

.form-group select,

.form-group textarea{

    width:100%;

    padding:13px 15px;

    background:#111;

    color:#fff;

    border:1px solid #303030;

    border-radius:12px;

    outline:none;

    transition:.25s;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

    border-color:var(--green);

}

textarea{

    resize:vertical;

    min-height:120px;

}

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

@media(max-width:900px){

    .cadastro-header{

        flex-direction:column;

        align-items:flex-start;

    }

    .cadastro-status{

        text-align:left;

    }

    .form-grid{

        grid-template-columns:1fr;

    }

    .tabs{

        overflow:auto;

        flex-wrap:nowrap;

    }

}

/*==================================================
LGPD
==================================================*/

.lgpd-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:30px;

}

.lgpd-acoes{

    display:flex;

    align-items:center;

    gap:20px;

}

.btn-link{

    color:var(--green);

    text-decoration:none;

    font-weight:600;

}

.btn-link:hover{

    text-decoration:underline;

}

@media(max-width:900px){

    .lgpd-item{

        flex-direction:column;

        align-items:flex-start;

    }

    .lgpd-acoes{

        width:100%;

        justify-content:space-between;

    }

}

/*==================================================
RESUMO
==================================================*/

.tabela-resumo{

    width:100%;

    border-collapse:collapse;

}

.tabela-resumo th{

    text-align:left;

    padding:14px;

    background:#111;

    border-bottom:1px solid #2c2c2c;

}

.tabela-resumo td{

    padding:14px;

    border-bottom:1px solid #2c2c2c;

}
/* =========================================================
   REDES SOCIAIS
   ========================================================= */

.redes-toolbar {
    display: flex;
    justify-content: flex-end;
    margin: 20px 0;
}

.redes-toolbar .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    padding: 10px 18px;

    border: 0;
    border-radius: 8px;

    background: #39d11d;
    color: #000;

    font-weight: 600;
    font-size: 14px;

    cursor: pointer;

    transition:
        transform 0.15s ease,
        opacity 0.15s ease;
}

.redes-toolbar .btn-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}


/* =========================================================
   ITEM DE REDE
   ========================================================= */

.rede-item {
    position: relative;

    padding: 18px 0;

    border: 0;
}


/*
Não queremos aquela linha horizontal
*/

.rede-item::after {
    display: none !important;
}


/* =========================================================
   BOTÃO REMOVER
   ========================================================= */

.rede-remover {
    display: flex;
    flex-direction: column;
}

.btnRemoverRede {
    width: 42px;
    height: 42px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #555;
    border-radius: 8px;

    background: #2a2a2a;
    color: #ff5c5c;

    cursor: pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}

.btnRemoverRede:hover {
    background: #ff5c5c;
    border-color: #ff5c5c;
    color: #fff;
}


/* =========================================================
   RODAPÉ DAS REDES
   ========================================================= */

.redes-footer {
    display: flex;

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

    gap: 20px;

    margin-top: 20px;
    padding-top: 20px;

    border-top: 0;
}

.redes-footer .text-muted {
    flex: 1;
}

.redes-footer .btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    white-space: nowrap;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .redes-toolbar {
        justify-content: flex-start;
    }

    .redes-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .redes-footer .btn-success {
        width: 100%;
    }

}

/* =========================================================
     CSS DA ABA REDES
   ========================================================= */


.redes-toolbar {

    display: flex;

    justify-content: flex-end;

    margin: 20px 0;

}


.redes-toolbar .btn-primary {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    padding: 10px 18px;

    border: 0;

    border-radius: 8px;

    background: #39d11d;

    color: #000;

    font-weight: 600;

    font-size: 14px;

    cursor: pointer;

    transition:
        transform .15s ease,
        opacity .15s ease;

}


.redes-toolbar .btn-primary:hover {

    opacity: .9;

    transform: translateY(-1px);

}


/* =========================================================
   ITEM DA REDE
   ========================================================= */

.rede-item {

    position: relative;

    padding: 12px 0;

    border: 0;

}


/* =========================================================
   REMOVE LINHAS
   ========================================================= */

.rede-item::before,
.rede-item::after {

    display: none !important;

}


/* =========================================================
   BOTÃO REMOVER
   ========================================================= */

.rede-remover {

    display: flex;

    flex-direction: column;

}


.btnRemoverRede {

    width: 42px;

    height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border: 1px solid #555;

    border-radius: 8px;

    background: #2a2a2a;

    color: #ff5c5c;

    cursor: pointer;

    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease;

}


.btnRemoverRede:hover {

    background: #ff5c5c;

    border-color: #ff5c5c;

    color: #fff;

}


/* =========================================================
   RODAPÉ
   ========================================================= */

.redes-footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 20px;

    margin-top: 20px;

    padding-top: 20px;

    border-top: 0;

}


.redes-footer .text-muted {

    flex: 1;

}


.redes-footer .btn-success {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 8px;

    white-space: nowrap;

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .redes-toolbar {

        justify-content: flex-start;

    }


    .redes-footer {

        flex-direction: column;

        align-items: stretch;

    }


    .redes-footer .btn-success {

        width: 100%;

    }

}