/*
=====================================================
BOTÕES BASE
=====================================================
*/

.btn{

min-height:54px;

padding:0 24px;

border:none;

border-radius:16px;

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

font-size:14px;

font-weight:700;

cursor:pointer;

transition:.3s;

text-decoration:none;

white-space:nowrap;

}


/*
=====================================================
BOTÃO PRIMÁRIO
=====================================================
*/

.btn-primario{

background:linear-gradient(
135deg,
#4f7cff,
#315efb
);

color:#fff;

}

.btn-primario:hover{

transform:translateY(-2px);

box-shadow:
0 14px 30px rgba(
79,
124,
255,
.35
);

}


/*
=====================================================
BOTÃO SECUNDÁRIO
=====================================================
*/

.btn-secundario{

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

color:#fff;

}

.btn-secundario:hover{

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

}


/*
=====================================================
BOTÕES DE AÇÃO
=====================================================
*/

.btn-acao{

width:46px;

height:46px;

min-width:46px;

display:flex;

align-items:center;

justify-content:center;

border-radius:14px;

font-size:16px;

transition:.3s;

flex:none;

overflow:hidden;

text-decoration:none;

cursor:pointer;

}

.btn-acao:hover{

transform:translateY(-2px);

}

.btn-acao i{

font-size:18px;

display:flex;

align-items:center;

justify-content:center;

line-height:1;

}


/*
=====================================================
EDITAR
=====================================================
*/

.btn-editar{

background:rgba(
59,
130,
246,
.15
);

color:#60a5fa;

}

.btn-editar:hover{

background:rgba(
59,
130,
246,
.25
);

}


/*
=====================================================
EXCLUIR
=====================================================
*/

.btn-excluir{

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

color:#f87171;

}

.btn-excluir:hover{

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

}


/*
=====================================================
BLOQUEAR
=====================================================
*/

.btn-bloquear{

background:rgba(
245,
158,
11,
.15
);

color:#f59e0b;

}

.btn-bloquear:hover{

background:rgba(
245,
158,
11,
.25
);

}


/*
=====================================================
QRCODE
=====================================================
*/

.btn-qrcode{

background:rgba(
139,
92,
246,
.15
);

color:#a78bfa;

}

.btn-qrcode:hover{

background:rgba(
139,
92,
246,
.25
);

}


/*
=====================================================
REINICIAR
=====================================================
*/

.btn-reiniciar{

background:rgba(
16,
185,
129,
.15
);

color:#34d399;

}

.btn-reiniciar:hover{

background:rgba(
16,
185,
129,
.25
);

}


/*
=====================================================
BOTÃO PAGAMENTO
=====================================================
*/

.btn-pagamento{

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

color:#4ade80;

border:1px solid rgba(
34,
197,
94,
.15
);

}

.btn-pagamento:hover{

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

border-color:#4ade80;

box-shadow:
0 8px 18px rgba(
34,
197,
94,
.15
);

}


/*
=====================================================
BOTÃO HISTÓRICO
=====================================================
*/

.btn-historico{

background:rgba(
168,
85,
247,
.10
);

color:#c084fc;

border:1px solid rgba(
168,
85,
247,
.15
);

}

.btn-historico:hover{

background:rgba(
168,
85,
247,
.18
);

border-color:#c084fc;

box-shadow:
0 8px 18px rgba(
168,
85,
247,
.15
);

}


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

.acoes{

display:flex;

align-items:center;

justify-content:center;

gap:12px;

flex-wrap:nowrap;

}