/* Index */

.indexBanner{
    height: 20rem;
}

/* Inexistente e proibido e erro */

.imgInexistente,
.imgProibido,
.imgErro{
    width: min(10rem, 100%);
}

.erroSistema{
    display: inline-flex;
    border: 1px solid var(--laranja);
    background-color: var(--laranjacc);
    color: var(--laranja);
    padding: 0.5rem;
    border-radius: 2px;
}

/* Login */

.pagLogin{
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 5%;
    background-image: url("/img/banners/login.webp?v=4");
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-color: var(--azule);
}

.pagLogin .formLogin{
    width: min(40rem, 90%);
    background-color: white;
    padding: 3rem;
    border: var(--bordapadrao);
    border-radius: var(--radiuspadrao);
    transition: padding 0.5s;
}

/* Página painel */

.divisaoModulos{
    display: grid;
    align-items: start;
    grid-template-columns: 24rem auto;
}

/* Página de painel avatares */

.labelAvatar, .linkAddAvatar{
    padding: 0.5rem;
    border: 2px solid var(--corborda);
    transition: transform 0.5s, background 0.5s, border 0.5s;
    cursor: pointer;
    border-radius: var(--radiuspadrao);
}

.linkAddAvatar{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.linkAddAvatar *{
    transition: color 0.5s;
    text-align: center;
}

.labelAvatar:hover, .linkAddAvatar:hover{
    transform: scale(105%);
}

.labelAvatar:has(:checked), .linkAddAvatar:hover{
    border: 2px solid var(--azul);
    background-color: var(--cianocc);
}

.linkAddAvatar:hover *{
    color: var(--azul);
}

.labelAvatar input{
    display: none;
}

.labelAvatar img{
    width: 100%;
    border-radius: 50%;
}

/* Página de Adicionar Avatar */

.areaAddAvatar{
    display: grid;
    grid-template-columns: 25rem auto;
    gap: 1rem;
}

.areaAddAvatar .grupoUploadImagem{
    width: 100%;
    display: grid;
    gap: 0.3rem;
}

.areaAddAvatar .grupoUploadImagem .quadroExibicaoImagem{  
    width: 100%;
    aspect-ratio: 1 / 1;
}

.areaAddAvatar .grupoUploadImagem .divInfo{
    width: 100%;
    display: grid;
    gap: 1rem;
}



/* Mídias */

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

    .divisaoModulos, .areaAddAvatar{
        grid-template-columns: 1fr;
    }    
}

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

    .pagLogin .formLogin{
        padding: 2rem 5%;
    }


}