.modalEditarMusica {
    display: none;
    position: fixed;
    z-index: 9999;

    left: 0;
    top: 0;

    width: 100%;
    height: 100%;

    background: rgba(0,0,0,0.6);
}

.modalEditarMusica-content {

    background: #fff;

    width: 390px;   /* LARGURA */
    height: 600px;  /* ALTURA */

    margin: 100px auto;

    border-radius: 10px;

    padding: 15px;

}

.modalEditarMusica-header {

    display: flex;

    justify-content: space-between;

    margin-bottom: 10px;
}

.modalEditarMusica-close {
	
	margin-top: -10px;
    margin-right: -10px;

    font-size: 25px;

    cursor: pointer;
}

/* GRID — 2 horizontal */

.modalEditarMusica-grid {

    display: grid;

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

    row-gap: 20px;
    column-gap: 8px;

}

/* CARD MENOR */

.modalEditarMusica-card {

    background: #f7f7f7;

    border-radius: 8px;

    padding: 6px;

    text-align: center;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    height: 130px;   /* ALTURA */
    width: 100px;   /* LARGURA */

}

/* FOTO - WRAPPER COM OVERLAY */

.modalEditarMusica-foto-wrapper {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 20%;
    overflow: hidden;
    cursor: pointer;
    margin-bottom: 5px;
}

.modalEditarMusica-foto {
    width: 100%;
    height: 100%;
    border-radius: 20%;
    object-fit: cover;
    display: block;
}

/* Overlay escuro */
.modalEditarMusica-foto-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.25s ease;
}

/* Ícone do overlay */
.modalEditarMusica-foto-overlay img {
    width: 22px;
    height: 22px;
    transform: scale(0.8);
    transition: 0.25s ease;
    cursor: pointer;
}

/* Hover - aparecer overlay */
.modalEditarMusica-foto-wrapper:hover .modalEditarMusica-foto-overlay {
    opacity: 1;
}

.modalEditarMusica-foto-wrapper:hover .modalEditarMusica-foto-overlay img {
    transform: scale(1);
}

/* NOME */

.modalEditarMusica-nome {

    font-size: 11px;

    max-width: 90px;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

    margin-bottom: 5px;
}

/* AÇÕES */

.modalEditarMusica-acoes {

    display: flex;

    gap: 10px;
}

.modalEditarMusica-btn {

    cursor: pointer;

    font-size: 14px;

    color: #444;
}

.modalEditarMusica-btn:hover {

    color: #000;
}

/* PAGINAÇÃO */

.modalEditarMusica-paginacao {

    margin-top: 35px; /* ALTURA */

    text-align: center;
}







.modalEditarMusica-pagina {

    padding: 4px 8px;

    border: 1px solid #ccc;

    cursor: pointer;

    background: #f5f5f5;

    font-size: 12px;

}

/* 🎯 Página ativa */
.modalEditarMusica-pagina.ativa {

    background: #444;

    color: #fff;

    border-color: #444;

}






.modalEditarMusica-pagina:hover {

    background: #ddd;
}


.modalEditarMusica-avancar {

    background: #59a9ff;

    color: white;

    border-color: #007bff;

}


.modalEditarMusica-avancar:hover {

    background: #007bff;

    color: white;

    border-color: #007bff;

}


.modalEditarMusica-content h2 {

    font-size: 18px;  /* tamanho do título */

    margin-bottom: 10px;

    font-weight: 600;

}





/* checkbox no canto do card */
.modalEditarMusica-card {
    position: relative;
}

.checkMusica {
    position: absolute;
    top: 5px;
    left: 5px;
    transform: scale(1.2);
    cursor: pointer;
}






























/* container direita */
.acoes-topo {
    display: flex;
    justify-content: flex-end;

    gap: 8px;

    margin-top: -10px;
    margin-bottom: 15px; /* 🔥 ESSA LINHA RESOLVE */

    width: 100%;
}
/* botão com icone + texto */
.btnTopo {
    display: flex;
    align-items: center;
    gap: 6px;

    padding: 5px 10px;

    border-radius: 6px;
    border: none;

    font-size: 12px;

    cursor: pointer;

    white-space: nowrap;
}

/* icone */
.btnTopo i {
    font-size: 13px;
}

/* verde */
.btnSelecionar {
    background: linear-gradient(180deg, #f2f2f2, #d6d6d6);
    color: #333;

    border: 1px solid #bfbfbf;

    padding: 5px 10px;
    border-radius: 6px;

    cursor: pointer;
}

.btnSelecionar:hover {
    background: linear-gradient(180deg, #e0e0e0, #c2c2c2);
}

/* vermelho */
.btnDeletar {
    background: linear-gradient(180deg, #f28b8b, #d9534f);
    color: #fff;

    border: 1px solid #c94440;

    padding: 5px 10px;
    border-radius: 6px;

    cursor: pointer;
}

.btnDeletar:hover {
    background: linear-gradient(180deg, #e57373, #c9302c);
}