* {
  font-family: 'Nunito', sans-serif;
  font-size: 16px;
  color: #3F3F3F;
}



/* TEXTO */

.texto-fino {
  font-weight: 300 !important;
}

a,
a:hover,
a:focus,
a:active {
  color: #FFC311;
  font-weight: lighter;

}

.palavraImportante {
  color: #FFC311;
  font-weight: 600;
}

.palavraImportante2 {
  color: #3f3f3f;
  font-weight: 600;
}



/* CORES */

.bege {
  color: #FFF19B;
}

.begeBg {
  background-color: #FFF19B;
}

.amarelo {
  color: #FFD321;
}

.amareloBg {
  background-color: #FFD321;
}

.laranja {
  color: #FFC311;
}

.laranjaBg {
  background-color: #FFC311;
}

.azulClaro {
  color: #88CDE4;
}

.azulClaroBg {
  background-color: #88CDE4;
}

.azulEscuro {
  color: #2E5A68;
}

.azulEscuroBg {
  background-color: #2E5A68;
}

.cinza {
  color: #DEDEDE;
}

.cinzaBg {
  background-color: #DEDEDE;
}

.cinzaEscuro {
  color: #3F3F3F;
}

.cinzaEscuroBg {
  background-color: #3F3F3F;
}

.cinzaPlaceholder {
  color: #828282;
}




/* MARGENS */

.margem150 {
  margin-bottom: 150px;
}




/* BOTÕES */

button {
  border: 0;
  outline: 0;
}

button:active {
  transform: scale(0.97);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

button:focus {
  outline: none;
}

.botaoCurtoLaranja {
  width: 50%;
  height: 49px;
  background-color: #FFC311;
  color: white;
  border-radius: 20px;
  border: none;
  font-weight: bold;
}

.botaoCurtoPreto {
  width: 50%;
  height: 49px;
  background-color: #3F3F3F;
  color: white;
  border-radius: 20px;
  border: none;
}

.botaoLongoLaranja {
  width: 75%;
  height: 49px;
  background-color: #FFC311;
  color: white;
  border-radius: 20px;
  border: none;
}

.botaoLongoBege {
  width: 75%;
  height: 49px;
  background-color: #FFF19B;
  color: #3F3F3F;
  border-radius: 20px;
  border: none;
}

.botaoLongoPreto {
  width: 75%;
  height: 49px;
  background-color: #3F3F3F;
  color: white;
  border-radius: 20px;
  border: none;
}

.botaoAltoBege {
  width: 75%;
  height: 88px;
  background-color: #FFF19B;
  color: #3F3F3F;
  border-radius: 20px;
  border: none;
}

.botaoAltoLaranja {
  width: 75%;
  height: 88px;
  background-color: #FFC311;
  color: #3F3F3F;
  border-radius: 20px;
  border: none;
}

.botaoRedondoLaranja {
  width: 50px;
  height: 50px;
  background-color: #FFC311;
  padding: 0;
  border: none;
}

.botaoRedondoLaranja img {
  width: 80%;
  height: 80%;
  border-radius: 50%;
}

.botaoRedondoCinza {
  width: 50px;
  height: 50px;
  background-color: #DEDEDE;
  padding: 0;
  border: none;
}

.botaoDropdown {
  width: 100%;
  height: 49px;
  background-color: white;
  color: #3F3F3F;
  border: none;
  border-radius: 18px;
  padding: 10px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}


.botaoConcluido {
  width: 75%;
  height: 49px;
  color: #FFC311;
  background-color: transparent;
  border-radius: 20px;
  border: 2px solid #FFC311;
  font-weight: bold;
}


.botaoExtraLongoLaranja {
  width: 100%;
  height: 49px;
  background-color: #FFC311;
  color: white;
  border-radius: 20px;
  border: none;
}


/* Transição suave para todas as mudanças */
.botaoLongoLaranja,
.botaoConcluido {
  transition: all 0.3s ease-in-out;
}


/* BARRA DE NAVEGAÇÃO */

.footerBackground {
  background-image: url('images/formaNavbar.svg');
  background-size: auto;
  background-position: bottom center;
  background-repeat: no-repeat;
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
}

.footerHomebutton {
  display: inline-block;
  transform: translateY(-27px);
  padding: 10px;
}

.footerIcones {
  display: inline-block;
  transform: translateY(10px);
}




/* PADRÕES */

.padraoLoading {
  background-image: url('images/padrao_loading.svg');
  background-position: bottom center;
  background-size: 100%;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
}

.padraoLogin {
  background-image: url('images/padrao_login.svg');
  background-position: bottom center;
  background-size: 100%;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
}

.padraoHomePage {
  background-image: url('images/Padrao_Home_Page.svg');
}

.padraoSobrenos {
  background-image: url('images/padraoSobrenos.svg');
  background-position: bottom center;
  background-size: 100%;
  background-repeat: no-repeat;
  min-height: 100vh;
  width: 100%;
}

.padraoPreparar {
  background-image: url('images/padrao321.svg');
  background-position: bottom center;
  background-size: 100%;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
}












/* INPUTS */

.inputLongo {
  width: 75%;
  height: 49px;
  background-color: white;
  color: #3F3F3F;
  border-radius: 20px;
  border: 1px solid #DEDEDE;
}

input::placeholder {
  font-weight: lighter;
}




/* BIBLIOTECA - BARRA DE PESQUISA */

.barraPesquisa {
  position: relative;
}

.inputPesquisa {
  width: 100%;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  border: 0;
  border-radius: 20px;
  font-size: 16px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.botaoPesquisa {
  position: absolute;
  top: 50%;
  right: 20px; 
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  background-color: #FFC311;
  border: none;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.lupaPesquisa {
  color: white;
  font-size: 18px;
}


.fundoDica1 {
  background-image: url(images/dica1.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  max-width: 100%;
}

.fundoDica2 {
  background-image: url(images/dica2.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  max-width: 100%;
}

.fundoDica3 {
  background-image: url(images/dica3.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  max-width: 100%;
}

.fundoDica4 {
  background-image: url(images/dica4.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  max-width: 100%;
}









/* BIBLIOTECA - SWIPER */

.swiper {
  width: 100%;
  padding-top: 20px;
  padding-bottom: 40px;
}

.swiper-wrapper {
  display: flex;
}

.swiper-slide {
  width: 200px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.swiper-slide img {
  width: 100%;
  border-radius: 12px;
}

.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: white;
  opacity: 1;
  margin: 0 6px;
  border-radius: 50%;
  transition: background-color 0.3s, transform 0.3s;
}

.swiper-pagination-bullet-active {
  background-color: #FFC311;
  transform: scale(1.3);
}




/* MENU DROPDOWN */

.opcoesDropdown {
  border: none;
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.dropdown .dropdown-menu .dropdown-item:hover {
  background-color: #FFD321;
  color: #3F3F3F;
  border: none;
}




/* FAVOS DAS MISSÕES DIÁRIAS */

.favos {
    margin-bottom: 20px;
    width: 100%;
    height: 300px;
}

.hexagono {
  position: absolute;
  width: 90px;
  height: auto;
}

#hex7 {
  top: -75px;
  left: 15px;
}

#hex6 {
  top: 8px;
  left: 63px;
}

#hex5 {
  top: 8px;
  left: 157px;
}

#hex4 {
  top: 92px;
  left: 15px;
}

#hex3 {
  top: 92px;
  left: 110px;
}

#hex2 {
  top: 173px;
  left: 160px;
}

#hex1 {
  top: 173px;
  left: 255px;
}







.cardMissao {
  margin-top: 20px;
  padding: 20px;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  position: static;             
  width: 100%;
  box-sizing: border-box;
}

.cardMissao .row.mb-2 {
  margin-bottom: 15px;      
}

.cardMissao .card-title {
  font-weight: 700;
  font-size: 1.25rem;         
  color: #333333;
}

.cardMissao .card-text {
  font-size: 1rem;
  color: #555555;
  margin-bottom: 20px;
}

















/* Contagem Decrescente */

.contagemNumeros {
  color: #FFD321;
  font-size: 200px;
  font-weight: lighter;
}




.cardBg {
  background-color: rgba(255, 253, 238, 0.5);
  border-radius: 1.5rem !important;
}

.gif-mais-cima {
  margin-top: -40px;
}



/* Acessórios */

/* Wrapper do hexágono */
.hexagon {
  width: 140px;
  height: 140px;
  background-color: #a78bfa;
  clip-path: polygon(25% 6.7%, 75% 6.7%,
      100% 50%, 75% 93.3%,
      25% 93.3%, 0% 50%);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hexagon img {
  width: 80%;
  height: auto;
}

/* Separadores */
.tab-btn {
  background-color: #f8f8f8;
  border: none;
  border-radius: 50px;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  color: #888;
  cursor: pointer;
  transition: all 0.3s ease;
}

.tab-btn.active,
.tab-btn:hover {
  background-color: #facc15;
  color: #000;
}

/* Círculos de cor */
/* Estilos para a paleta de cores */
.color-palette {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  /* Espaçamento entre os círculos */
}

/* Círculos de cor */
.color-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: transform 0.2s ease;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}

.color-circle:hover {
  transform: scale(1.1);
}

.color-circle.selected {
  box-shadow: 0 0 0 3px #facc15;
}








/* SARA */

.mood-option.selected {
  border: 1px solid #facc15;
  transform: scale(1);
  box-shadow: 0 0 0 2px #facc15;
}

.mood-option {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); 
  background-color: #fff;
  position: relative;
  overflow: visible;
  border-radius: 20px;
  min-height: 90px; 
  padding-top: 40px; 
  padding-bottom: 20px;
  display: flex;
  align-items: flex-end; 
  justify-content: center;
  font-weight: 600;
}

.mascote-mini {
  width: 85px;
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
}



/* SARA 15 maio --------------------------------------------------------------------------------------*/
 
 
/* acessórios */
.botaoRedondoCinza img {
  width: 80%;
  height: 80%;
  border-radius: 50%;
}
 
.zha-img {
  width: 100%;
  height: auto;
}
 
/* rankings */
 
.rank-banner {
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  width: 431px;
  height: 427.5px;
  margin: 0;
  padding: 0;
}
 
.rank1 {
  background-image: url('images/rank_1.svg');
}
.rank2 {
  background-image: url('images/rank_2.svg');
}
.rank3 {
  background-image: url('images/rank_3.svg');
}
.rank4 {
  background-image: url('images/rank_4.svg');
}
.rank5 {
  background-image: url('images/rank_5.svg');
}
.rank6 {
  background-image: url('images/rank_6.svg');
}
 
.podio {
  margin: 0 auto;
  display: block;
  height: 350px;
  background-image: url('images/podio_1.svg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
 
 
.caixa_ranks {
  border: 1px solid #FFC311;  
  border-radius: 20px;
  width: 100%;        
  height: 100%;              
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;    
  font-weight: 600;
  text-align: center;
}
 
 
.numero-circulo {
  width: 40px;
  height: 40px;
  border: 3px solid #FFC311;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}
 
.utiliz-img {
  height: 45px;
  width: 45px;
  object-fit: cover;
}
 
 
.hexagonoutilizadores { 
    position: absolute;
    width: 90px; 
    height: 78px; 
    display: flex; 
    justify-content: center;
    align-items: center;
}


#uti1 { top: 475px; left: 170px; z-index: 3; } 
#uti2 { top: 510px; left: 63px;  z-index: 2; }
#uti3 { top: 535px; left: 280px; z-index: 1; }


.avatar-hexagon-container-podio {
    width: 100%;  
    height: 100%; 
    position: relative;
    background-color: #B0B0B0; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.mood-image-podio {
    max-width: 70%; 
    max-height: 70%;
    object-fit: contain;
}

.hexagonoutilizadores.podio-slot-vazio .avatar-hexagon-container-podio {
    background-color: rgba(224, 224, 224, 0.7) !important;
    border: 1px dashed #BDBDBD;
}
.hexagonoutilizadores.podio-slot-vazio .mood-image-podio {
    display: none;
}
.mood-image-rank {
    max-width: 75%; 
    max-height: 75%;
    object-fit: contain;
}
 
.utilizador-nome {
  position: absolute;
  font-size: 14px;
  font-weight: 600;
  width: 100px;
  text-align: center;
}
 
#util1 {
  top: 565px;
  left: 165px;
}
 
#util2 {
  top: 600px;
  left: 58px;
}
 
#util3 {
  top: 625px;
  left: 275px;
}
 
.utilizador-pontos {
  position: absolute;
  background-color: white;
  border-radius: 7px;
  padding: 5px;
  font-size: 14px;
  font-weight: 400;
  text-align: center;
}
 
#pont1 {
  top: 695px;
  left: 185px;
}
 
#pont2 {
  top: 735px;
  left: 80px;
}
 
#pont3 {
  top: 745px;
  left: 290px;
}
 
.Castanho {
color: #CAA985;
}
 
#rank-navigation {
  position: absolute;
  top: 160px;
  left: 0;
  width: 100%;
  height: 200px;
  z-index: 10;
  display: flex;
  justify-content: space-between;
}
 
#rank-navigation div {
  width: 50%;
  height: 100%;
  cursor: pointer;
}
 
#nav-left {
  left: 0;
}
 
#nav-right {
  right: 0;
}
 
 
.margem240top {
  margin-top: 240px;
}

.custom-progress {
  height: 8px;
  background-color: #ffe5b2;
  border-radius: 4px;
  overflow: hidden;
}
.custom-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, #FFF19B, #FFC311);
  border-radius: 4px 0 0 4px;
  transition: width 0.6s ease;
}
.semUnderline {
    text-decoration: none !important;
}
.respostaBtn.selecionada {
    background-color: #FFD321;
}


.fundoBiblioteca {
    background-color: #FFE087 !important;
    border: 0 !important;
}

.fundoDicas {
    background-color:  #FFF19B !important; 
    border: 0 !important;
}




/* Marta 15maio */


.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: #ffcc00; /* amarelo suave */
  font-weight: bold;
  font-family: sans-serif;
}

.spinner {
  width: 40px;
  height: 40px;
  border: 5px solid #ffec99;
  border-top: 5px solid #ffcc00;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}


/* MENSAGENS DE SUCESSO/ERRO */

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.conteudoModal {
  background: white;
  padding: 2rem;
  border-radius: 40px;
  width: 90%;
  max-width: 400px;
  text-align: center;
}


/* HENRIQUE 27 Maio*/

conquistaBg {
  background-image: url('images/novoRanking.svg');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;

}

.circle-container {
position: relative; 
width: 270px; 
height: 270px;
margin-left: auto;  
margin-right: auto; 
display: flex; 
align-items: center;
justify-content: center;
}

.circle-background-image {
position: absolute; 
top: 0;
width: 100%; 
 height: 100%; 
 z-index: 1; 
 }

.circle-content {
 position: relative; 
 z-index: 2; 
 padding: 20px; 
 width: 80%; 
 text-align: center; 
}

#rankDisplayContainer p,
 #novoRankingTexto {
color: #333; 
 margin-bottom: 0.5rem; 
}


/* PERFIL */

.buttonAddAvatar{
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    position: absolute;
    top: 140px;
    left: 250px;
}


/* HENRIQUEEE - Avatar */



.hexagon-inner img.zha-img {
    max-width: 70%; 
    max-height: 70%;
}


.mascote-mini {
    max-width: 100%;
    height: auto;
}


.avatar-tab-button img {
    width: 24px; 
    height: 24px;
    vertical-align: middle;
}


.d-none {
  display: none !important;
}

.avatar-hexagon-container-rank {
    width: 70px;  
    height: 60px;
    position: relative;
    background-color: #CCCCCC;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; 

    clip-path: polygon(
        25% 0%,  
        75% 0%,
        100% 50%, 
        75% 100%,
        25% 100%, 
        0% 50%    
    );
}

.mood-image-rank {
    max-width: 75%;  
    max-height: 75%;
    object-fit: contain;
}

.numero-circulo {
    background-color: #e0e0e0; 
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    color: #333;
}

.mood-image-rank {
    max-width: 70%;  
    max-height: 70%;
    object-fit: contain; 
}

.numero-circulo {
    background-color: transparent;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}

.caixa_ranks_utilizador_logado {
    background-color: #FFF8cd !important; 
    border: 1px solid #FFD321; 
}

#avatarPerfilContainer {
    width: 130px; 
    height: 115px; 
    margin-left: auto;  
    margin-right: auto; 
    margin-bottom: 0.25rem; 
}

.avatar-hexagon-perfil {
    width: 100%; 
    height: 100%;
    position: relative;
    background-color: #CCCCCC; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); 
}

.mood-image-perfil {
    max-width: 70%; 
    max-height: 70%;
    object-fit: contain;
}

#avatarRegistoPreviewContainer {
    width: 130px; 
    height: 115px;

    display: flex; 
    justify-content: center;
    align-items: center;
}

.avatar-hexagon-registo {
    width: 100%; 
    height: 100%;
    position: relative;
    background-color: #FFD321; 
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}

.mood-image-registo {
    max-width: 70%; 
    max-height: 70%;
    object-fit: contain;
}

.fundoNotificacao {
 background-image: url('../images/notificacoes-visual.svg');
    background-position: center center; 
    background-size: auto;                     
}