/* Genéricos */

.tag{
    display: inline-flex;
    color: white;
    padding: 0.2rem 0.4rem;
    border-radius: var(--radiuspadrao);
    font-size: 90%;   
}

.tagVerde{
    background-color: var(--verde);
}

.tagLaranja{
    background-color: var(--laranja);
}

.tagVermelha{
    background-color: var(--vermelhoc);
}

/* Topo opções e topo inputs - para a parte superior das páginas do painel */

.containerTopo{
    container: containerTopo / inline-size;
}

.topoLista{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    border-bottom: 1px solid var(--corborda);
    margin: 1.5rem 0;
    padding-bottom: 1rem;
}

.topoLista .esquerda, .topoLista .fila{
    display: flex;
    align-items: center;
    gap: 0.5rem; 
}

.topoLista .esquerda .btnExpandirModulo{
    padding: 0.3rem;
}

.topoLista .esquerda .btnExpandirModulo img{
    height: 1rem;
}

@container containerTopo (max-width: 950px){

    .topoLista{
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;       
    }

    .topoLista .fila{
        width: 100%;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
        
    }

}

.topoInputs{
    display: grid;
    gap: 1rem;
    border: 1px dotted var(--corbase);
    border-radius: var(--radiuspadrao);
    background-color: white;
    padding: 1.5rem;
}

/* Página Painel */

/* Topo de impressão */

.topoPrint{
    display: none;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--corborda);
    padding-bottom: 1rem;
}

.topoPrint .logoPrint{
    width: min(7rem, 100%);
    aspect-ratio: 2 / 1;
}

.topoPrint .dados{
    display: grid;
    gap: 0.2rem;
    border-left: 1px solid var(--corborda);
    padding-left: 1rem;
}

/* Topo painel */

.topoPainel{
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--corborda);
}

.topoPainel .areaImg{
    width: 7rem;
    height: 7rem;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
}

.topoPainel .dados{
    display: grid;
    gap: 0.2rem;
}

.alertaVerificacao{
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
}

.containerModulos{
    container: containerModulos / inline-size;
    margin-top: 1.5rem;
}

.containerModulos .grupoModulos{
    margin-top: 1rem;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem;
}

.containerModulos .modulo{
    border-radius: var(--radiuspadrao);
    background-color: white;
    border: 1px solid var(--cinza230);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--ciano);
    transition: background 0.5s, color 0.5s, border 0.5s, transform 0.5s;
}

.containerModulos .modulo:hover{
    color: var(--cianoc);
    border: 1px solid var(--cianoc);
    background-color: var(--cianocc);
}

.containerModulos .modulo img,
.containerModulos .modulo svg{
    height: 1.5rem;
}

.containerModulos .modulo svg *{
    stroke: var(--cinza128);
}

.containerModulos .modulo:hover svg *{
    stroke: var(--ciano);
}

.nivelsistema{
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--corborda);
}

@container containerModulos (max-width: 950px){

    .containerModulos .grupoModulos{
        grid-template-columns: repeat(2, 1fr);
    }

}

@container containerModulos (max-width: 650px){

    .containerModulos .grupoModulos{
        grid-template-columns: 1fr;
    }

}


/* --------------------------------- */


/* Página Criar Perfil */

.msgerro{
    margin-bottom: 1.5rem;
}

.containerAvatar{
    container: containerAvatar / inline-size;
}

.complemento{
    margin-bottom: 1.5rem;
}

.secAvatar{
    display: flex;
    align-items: center;
    gap: 1rem;
}

.secAvatar .quadroAvatar{
    width: min(14rem, 100%);
    flex-shrink: 0;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 1px solid transparent;
    opacity: 0.9;
    transition: border 0.5s, opacity 0.5s;
}

.secAvatar .quadroAvatar:hover{
    opacity: 1;
    border: 1px solid var(--cianoc);
}

.secAvatar .nota{
    margin-top: 0.5rem;
}

.secAvatar .notificacao{
    margin-top: 0.5rem;
}

@container containerAvatar (max-width: 550px){

    .secAvatar{
        flex-direction: column;
        align-items: flex-start;
    }

}

.asideTermos .topo{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.asideTermos .topo .tituloRet{
    margin: 0;
}

.asideTermos h3{
    margin: 1.5rem 0;
    border-bottom: 1px solid var(--corborda);
    padding-bottom: 1.5rem;
}

.asideTermos .elementosDireita{
    border-top: 1px solid var(--corborda);
    margin-top: 1.5rem;
    padding-top: 1.5rem;
}


/* --------------------------------- */

/* Página Meus eventos */

.containerEventos{
    container: eventos / inline-size;
}

.compEventos{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

.compEventos .componente{
    background-color: white;
    box-shadow: var(--shadowpadrao);
    padding: 1.5rem;
}

.compEventos .tituloEvento{
    margin: 0.3rem 0;
}

.compEventos .dataEvento{
    margin-top: 0.3rem;
}

.compEventos .botoes{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--corborda);
}

.compEventos .botao{
    transition: color 0.5s, border 0.5s, transform 0.5s, background 0.5s;
}

.compEventos .botao:hover{
    transform: translateY(-0.1rem);
}

@container eventos (max-width: 950px){
    
    .compEventos{ 
        grid-template-columns: 1fr;
    }

}


/* --------------------------------- */


/* Página de presenças do painel */

.pagPresencasEvento .descFiltros{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    border-bottom: 1px solid var(--corborda);
    border-top: 1px solid var(--corborda);
    padding: 1rem 0;
}

.pagPresencasEvento .estatisticas{
    margin-bottom: 2rem;
}

.pagPresencasEvento .tabelaPresencas .nota{
    margin-bottom: 2rem;
}

.editarLugar .nomeConvidado,
.editarOrdem .nomeConvidado{
    margin: 1rem 0;    
}

.editarLugar .elementosDireita,
.editarOrdem .elementosDireita{
    margin-top: 1.5rem;
}

/* Página Visão de lugares */

.atencaoLugar{
    margin: 1.5rem 0;
}

.componentesLugar{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
    gap: 1rem;
}

.componentesLugar .componente{
    border: 1px solid var(--corborda);
    border-radius: var(--radiuspadrao);
    overflow: hidden;
    background-color: var(--cinza240);
    transition: background 0.5s, border 0.5s;
}

.componentesLugar .componente.destacado{
    background-color: var(--cianocc);
    border: 1px solid var(--ciano);
}

.componentesLugar .componente .topo{
    background-color: var(--ciano);
    padding: 0.3rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.componentesLugar .topo h4{
    color: white;
}

.componentesLugar .componente .tagnovo{
    display: none;
    color: white;
    background-color: var(--douradoc);
    padding: 0.2rem 0.4rem;
    border-radius: var(--radiuspadrao);
}

.componentesLugar .componente ul{
    list-style: none;
    display: grid;
    gap: 0.5rem;
    padding: 0.5rem;    
}

.liconvidado{
    border: 1px solid var(--corborda);
    border-radius: var(--radiuspadrao);
    padding: 0.3rem 0.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    background-color: white;
    cursor: grab;
    touch-action: none; /* para evitar scrool durante o arraste */
    user-select: none;   /* impede seleção de texto */
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE/Edge antigo */
    transition: opacity 0.5s, border 0.5s, background 0.5s;
    
}

.liconvidado:hover{
    border: 1px solid var(--cianoc);
    background-color: var(--cianocc);
}

.liconvidado .nomeconvidado{
    transition: color 0.5s;
}

.liconvidado .nomeconvidado::before{
    content: "⋮ ";
    transition: color 0.5s;
}

.liconvidado:hover .nomeconvidado,
.liconvidado:hover .nomeconvidado::before{
    color: var(--ciano);
}

.liconvidado .checkprint{
    display: none;
    width: 1.5rem;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--corborda);
    border-radius: var(--radiuspadrao);
    flex-shrink: 0;
}

.liconvidado.arrastando{
  opacity: 0.5;
  cursor: grabbing;
}

.desativarhover:hover{
    border: 1px solid var(--corborda) !important;
    background-color: white !important;
}

.desativarhover:hover .nomeconvidado,
.desativarhover:hover .nomeconvidado::before{
    color: var(--cinza128) !important;
}

.litemp{
    border: 1px solid var(--ciano);
}

.litemp .nomeconvidado{
    color: var(--ciano);    
}

/* -------------------------  */

/* Componente de upload de imagem com recomendações */

.componenteUploadImg{
    container: uploadImg /  inline-size;
}

.componenteUploadImg .divisao{
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    border-bottom: 1px solid var(--corborda);
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
}

.componenteUploadImg .grupoImagem,
.componenteUploadImg .instrucoes{
    width: 50%;
}

.componenteUploadImg .divisao.vertical .grupoImagem{
    width: 35%;
}

.componenteUploadImg .divisao.vertical .instrucoes{
    width: 65%;
}

.componenteUploadImg .quadroimg{
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    border: 1px solid var(--ciano);
    border-radius: var(--radiuspadrao);
    overflow: hidden;
    margin-bottom: 1rem;
    cursor: pointer;
    position: relative;
    transition: border 0.5s;
    user-select: none;
}

.componenteUploadImg .quadroimg:hover{
    border: 1px solid var(--cianoc);
}

.componenteUploadImg .divisao.vertical .quadroimg{
    aspect-ratio: 1 / 1.2;
}

.componenteUploadImg .quadroimg .botao{
    position: absolute;
}

@container uploadImg (max-width: 950px){

    .componenteUploadImg .divisao{
        flex-direction: column;
    }

    .componenteUploadImg .grupoImagem,
    .componenteUploadImg .instrucoes{
        width: 100% !important;
    }
}


/* Página Painel Carrosséis Imagens */

.pagPainelCarrosseisFotos .componente .linha{
    border-top: 1px solid var(--corborda);
    padding-top: 1rem;
}

/* --------------------------------- */

/* Grupos de mídias */

@media screen and (max-width: 950px){

    .topoLista .esquerda .btnExpandirModulo img{
        height: 0.9rem;
    }

}


@media screen and (max-width: 450px){

    .topoPainel{
        flex-direction: column;
        align-items: flex-start;
    }

    .topoPainel .areaImg{
        width: 5.5rem;
        height: 5.5rem;  
    } 

    .topoLista{
        flex-direction: column;
        align-items: flex-start;
    }    

}