.btn-action {
    background-color: var(--branco);
    color: var(--text-muted);
    border: none;
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: var(--text);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    text-transform: uppercase;
    box-shadow: var(--shadow);
    gap: 5px;    
    } 
    
    .btn-action i {
    font-size: var(--text-3);
    gap: 5px;
    }

    .btn-action:hover {
    background: var(--text-muted);
    color: var(--branco);
    transition: all 0.2s;
    }

    .btn-action.azul {background: var(--azul); color: var(--branco); border: none; }
    .btn-action.vermelho { background: var(--vermelho); color: var(--branco); border: none;}
    .btn-action.verde { background: var(--verde); color: var(--branco); border: none;}
    .btn-action.cinza { background: var(--cinza-escuro); color: var(--branco); border: none;}
    .btn-action.azul:hover { background: var(--bg-main); color: var(--black); transition: all 0.2s; }
    .btn-action.vermelho:hover { background: var(--bg-main); color: var(--black); transition: all 0.2s; }
    .btn-action.verde:hover { background: var(--bg-main); color: var(--black); transition: all 0.2s; }
    .btn-action.cinza:hover { background: var(--bg-main); color: var(--black); transition: all 0.2s; }

/* Botão de opção (Três pontos) */
.btn-more {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: var(--text-2);
    font-weight: bold;
    line-height: 1;
}