/*
=====================================================
CARDS
=====================================================
*/

.card{

    width:100%;

    background:linear-gradient(
        145deg,
        var(--card),
        var(--card2)
    );

    border:1px solid var(--borda);

    border-radius:28px;
}

/*
=====================================================
CARD FORMULÁRIO
=====================================================
*/

.card-formulario{

    width:100%;

    background:linear-gradient(
        145deg,
        var(--card),
        var(--card2)
    );

    border:1px solid var(--borda);

    border-radius:32px;

    padding:36px;

    display:block;
}

.card-formulario + .card-formulario{

    margin-top:32px;
}

.card-formulario h2{

    color:#ffffff;

    font-size:22px;

    font-weight:800;

    margin-bottom:26px;
}

/*
=====================================================
CARD TABELA
=====================================================
*/

.card-tabela{

    width:100%;

    background:linear-gradient(
        145deg,
        var(--card),
        var(--card2)
    );

    border:1px solid var(--borda);

    border-radius:28px;

    overflow:hidden;
}

/*
=====================================================
BADGES
=====================================================
*/

.badge-status{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 14px;

    border-radius:14px;

    font-size:13px;

    font-weight:700;
}

.ativo-status{

    background:rgba(34,197,94,.15);

    color:#4ade80;
}

.inativo-status{

    background:rgba(239,68,68,.15);

    color:#f87171;
}


/*
=====================================================
CHECK CARD
=====================================================
*/

.check-card{

display:flex;

align-items:center;

gap:14px;

padding:16px;

border-radius:18px;

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

border:1px solid rgba(
255,
255,
255,
.05
);

cursor:pointer;

transition:.3s;

position:relative;

overflow:hidden;

}

.check-card:hover{

transform:translateY(-2px);

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

border-color:rgba(
79,
124,
255,
.20
);

}


/*
=====================================================
INPUT
=====================================================
*/

.check-input{

display:none;

}


/*
=====================================================
BOLINHA
=====================================================
*/

.check-bolinha{

width:18px;

height:18px;

border-radius:50%;

border:2px solid rgba(
255,
255,
255,
.25
);

transition:.3s;

flex:none;

}


/*
=====================================================
CHECK MARCADO
=====================================================
*/

.check-input:checked
+
.check-bolinha{

background:#4f7cff;

border-color:#4f7cff;

box-shadow:
0 0 10px rgba(
79,
124,
255,
.50
);

}


/*
=====================================================
TEXTO
=====================================================
*/

.check-info{

display:flex;

flex-direction:column;

}

.check-titulo{

font-size:14px;

font-weight:700;

color:#fff;

}

.check-subtitulo{

font-size:12px;

margin-top:4px;

color:#8ca0d7;

}


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

.lista-checks{

display:grid;

grid-template-columns:
repeat(
auto-fill,
minmax(
280px,
1fr
)
);

gap:14px;

margin-top:16px;

}