/*
Cyan #15DDFF
azul claro #0098FF
morado #5518E2
blanco #ffffff
negro #000000
magenta #BC00FF
*/

.cyanColor{
  color:#15DDFF;
}



h3.title{
  color: #fff;
  font-size: 26px;
  font-weight: bold;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
  margin: 0;
  padding: 0;
}
h4.title{
  color: #4FC2EF;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.containerCenter{
  display: flex;
  justify-content: center;
  align-items: center;
}
.contentCenter{
  text-align: center;
}

.btnMision{
  border: none;
  cursor: pointer;
  text-align: center;
  width:190px;
  height:42px;
  color: #fff;
  background-image: url('../images/botonNormal.png');
  background-color: transparent;
  font-size: 20px;
  font-weight: bold;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
}
.btnMision:hover{
  color: #fff;
  background-image: url('../images/botonSelected.png');
}






.btnCuartel{
  display: block;
  cursor: pointer;
  width:100%;
  height:auto;
  padding-bottom: 30px;
}
.btnCuartel img{
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  width:100%;
}





/*NUEVOS BOTONES*/
.btnAzBorde{
  display:inline;
  cursor: pointer;
  width:auto;
  height:auto;
  padding: 10px 60px;
  background: linear-gradient(0deg,rgba(0, 84, 255, 1) 0%, rgba(92, 239, 137, 1) 100%);
  border: 3px solid #fff;
  border-radius:50px;
  font-weight: bold;
  color:#fff;
  font-size: 18px;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
}
.btnAzBorde:hover{
  color:#eee;
  background: linear-gradient(0deg,rgb(35, 107, 252) 0%, rgb(122, 244, 159) 100%);
}

.tituloMagentaBorde{
  display:inline-block;
  width:auto;
  height:auto;
  padding: 10px 30px 10px 60px;
  background: linear-gradient(0deg,rgba(102, 0, 148, 1) 0%, rgba(255, 0, 249, 1) 100%);
  border: 1px solid #00ffff;
  border-radius:50px;
  font-weight: bold;
  color:#fff;
  font-size: 18px;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  position: relative;
  margin: 8px auto;
}
.tituloMagentaBorde img{
  width: 65px;
  height: 65px;
  position: absolute;
  top:-13px;
  left: -10px;
}


.btnNa{
  display:inline;
  cursor: pointer;
  width:auto;
  height:auto;
  padding: 10px 40px;
  background: linear-gradient(0deg,#FF5F29 0%, #FFB000 100%);
  border-radius:50px;
  font-weight: bold;
  color:#fff;
  font-size: 18px;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
}
.btnNa:hover{
  color:#eee;
  background: linear-gradient(0deg,#F9764A 0%, #FFC23F 100%);
}


.burbujaTexto{
  display:inline-block;
  width:auto;
  margin: 0 3%;
  height:auto;
  padding: 30px 40px;
  background: linear-gradient(0deg,rgba(102, 0, 148, 1) 0%, rgba(255, 0, 249, 1) 100%);
  border: 2px solid #00FFFF;
  border-radius:60px;
  font-weight: bold;
  color:#fff;
  font-size: 15px;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
}


.inlineblock{
  display: inline-block !important;
}

.alertaUP{
  overflow: visible;
  padding-top: 290px;
  position:relative;
}
.alertaUPNoPadding{
  padding-top: 40px !important;
}
.alerta{
  width: calc(80% - 8px);
  display:block;
  height:auto;
  padding: 5% 5%;
  margin:0 auto;
  background: linear-gradient(0deg,rgba(102, 0, 148, 1) 0%, rgba(255, 0, 249, 1) 100%);
  border: 4px solid #00FFFF;
  border-radius:150px;
  font-weight: normal;
  color:#fff;
  font-size: 15px;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.7));
  max-width:860px;
}
.alertaNoColor{
  background: linear-gradient(0deg, rgba(62, 24, 112, 0.9) 0%, rgba(91, 55, 185, 0.65) 100%) !important;
  /*background: transparent !important;*/
  border: none !important;
  border: 4px solid #00FFFF;
  border-radius:50px;
}


.alerta a.diploma{
  color:#fff;
}
.alerta a.diploma:hover{
  color:#ddd;
}

.alertaTop{
  width: 100%;
}
.alertaMid{
  width: 80%;
  /*background-image: url('../images/alertBG_mid.png');
  background-repeat: repeat-y;
  background-size: 100% auto;*/
  /*padding: 0 120px 0 80px;*/
  padding: 0 11% 0 9%;
  position: relative;
}
.alertaMidFull{
  width: 84% !important;
  padding: 0 8% 0 8% !important;
}

.alertaMid .tituloFila{
  line-height: 1;
  font-weight: bold;
  border-bottom: 2px solid #8474ff;
  padding-bottom: 1%;
  margin-right: 3%;
  padding-top: 2%;
  margin-bottom: 2%;
  font-size: 1.5em;
  position: relative;
}
.alertaMid .tituloFila img{
  position: absolute;
  display: block;
  width: 5%;
  top: 10px;
}
.alertaMid .tituloFila span{
  display: block;
  padding-left: 5%;
}
.alertaMid .titulo{
  font-size: 30px;
  font-weight: bold;
  line-height: 34px;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}
.alertaMid .tituloAzul{
  font-size: 26px;
  color: #fff;
  font-weight:lighter;
  line-height: 30px;
  padding: 10px 0;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}
.alertaMid .textos{
  font-size: 20px;
  line-height: 26px;
  padding: 10px 0 35px 0;
  text-shadow: 0px 5px 5px rgba(0, 0, 0, 0.5);
}

.alertaBot{
  width: 100%;
}
.alertaUP .imgTituloGralDiv{
  width: 100%;
  text-align: center;
  position: absolute;
  top: 0px;
  left: 0px;
}
.alertaUP .imgTituloGral{
  position: relative;
  top: 0px;
}
.alertaUP .imgPersonajeDiv{
  position: absolute;
  left: -180px;
  top:0px;
}
.alertaUP .imgPersonaje{
  width: 350px;
}

.alertaUP .contenidoAlerta{
  padding-left: 120px;
}


@media only screen and (max-width: 1280px) {
  .alertaUP .imgPersonajeDiv{
    left: -180px;
  }
  .alertaUP .imgPersonaje{
    width: 350px;
  }
  .alertaUP .contenidoAlerta{
    padding-left: 80px;
  }
  
}
@media only screen and (max-width: 980px) {
  .alertaUP{
    padding-top: 180px;
    margin-bottom:40px;
  }
  .alertaUP .imgTituloGral{
    width: 230px;
  }
  .alertaUP .imgTituloGralDiv{
    text-align: left;
  }
  .alertaUP .imgPersonajeDiv{
    position: relative;
    left: 0px;
    top: -30px;
    text-align: center;
    height: 240px;
    overflow: visible;
  }
  .alertaUP .imgPersonaje{
    width: 350px;
  }
  .alertaUP .contenidoAlerta{
    padding-left: 0px;
  }
  .alertaUP .contenidoAlerta{
    text-align: center;
  }
  .alertaMid .titulo{
    
  }
  .alertaMid .titulo{
    font-size: 36px;
  }
  .alertaMid .tituloAzul{
    padding: 15px 0;
  }
  .alertaMid .textos{
    padding: 5px 0 35px 0;
  }
  
  
}
@media only screen and (max-width: 660px) {
  .alertaUP .imgPersonajeDiv{
    top: -20px;
    height: 170px;
  }
  .alertaUP .imgPersonaje{
    width: 250px;
  }
}
@media only screen and (max-width: 560px) {
  .alertaUP .imgPersonajeDiv{
    top: -20px;
    height: 130px;
  }
  .alertaUP .imgPersonaje{
    width: 200px;
  }
}


/*-------------------------------------------------------------------------pictureInside*/

.pictureAvatar{
  width: 100%;
  background-size: cover; /* Scales the image to cover the entire element while preserving aspect ratio */
  background-position: center center; /* Centers the image horizontally and vertically */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  overflow: hidden;
  padding-bottom: 100%;
}
.pictureInsignia{
  width: 100%;
  background-size: cover; /* Scales the image to cover the entire element while preserving aspect ratio */
  background-position: center center; /* Centers the image horizontally and vertically */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  overflow: hidden;
  padding-bottom: 100%;
}
.labelImg{
  cursor: pointer;
}
.radioImg{
  cursor: pointer;
}

/*-------------------------------------------------------------------------avatarPeq y menu*/
menu.full{
  padding:0;
  margin:0;
  
}
menu.full .logoGralPC img{
  width:80%;
  display:block;
  padding-left:5%;
  padding-top:10px;
}

menu.full .avatarPeq img{
  padding-left:5%;
  padding-right:5%;
}

menu.full .menuBots{
  padding:20% 5% 5% 5%;
  background-color: rgba(255,255,255,0.2);
  margin-left:10%;
  margin-right:15%;
  width:65%;
  position: relative;
  top: -45px;
  border: 1px solid #fff;
  border-radius:  25px;
  display: block;
}
menu.full .cadaBtnMenu{
  width:100%;
  position:relative;
}
menu.full .cadaBtnMenu a{
  display:block;
}

.imgIcon{
  position:absolute;
  top: -30%;
  left: -7%;
  width:33%;
}
.imgIcon img{
  width:100%;
}

menu.full .btnMenu{
  cursor: pointer;
  text-align: left;
  width:calc(70% - 6px);
  height:0;
  color: #fff;
  font-weight: bold;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  padding-bottom: 14%;
  padding-left:30%;
  padding-top:6%;
  font-size: 1.2vw;
  
  display:inline-block;
  background: linear-gradient(0deg,rgba(0, 84, 255, 1) 0%, rgba(92, 239, 137, 1) 100%);
  border: 3px solid #fff;
  border-radius:50px;
  margin-bottom: 8%;
}
menu.full .btnMenu:hover{
  color: #fff;
  background: linear-gradient(0deg,#FA6B49 0%, #FEB749 100%);
}
menu.full .cadaBtnMenu .selected{
  color: #fff !important;
  background: linear-gradient(0deg,#FA6B49 0%, #FEB749 100%) !important;
}
menu.full .btnMenuRed{
  background: linear-gradient(0deg,#FF0028 0%, #FF547C 100%) !important;
}
menu.full .btnMenuRed:hover{
  background: linear-gradient(0deg,#FA6B49 0%, #FEB749 100%) !important;
}


menu.full .avatarPeq{
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  background: linear-gradient(0deg,#FA6B49 0%, #FEB749 100%);
  position:relative;
  padding-left:29%;
  line-height:1;
  width:calc(61% - 6px);
  padding-top:3%;
  padding-bottom:20%;
  height:0;
  overflow:visible;
  cursor: pointer;
  border-radius: 200px;
  border: 3px solid #FFE900;
  margin: 5% 5%;
  z-index: 1;
}

menu.full .avatarPeq .tituloAvatar{
  font-weight:bold;
}
menu.full .avatarPeq .miNivel{
  padding:0px 0;
}
menu.full .avatarPeq .miFoto{
  width:40%;
  position:absolute;
  top:-30%;
  left:-7%;
  overflow: hidden;
}
menu.full .avatarPeq .misGotas{
  padding:0px 0;
}
menu.full .avatarPeq .barraDiv{
  background-color: #4D5477;
  border: 2px solid #6E78B3;
  padding: 1%;
  width: calc(90% - 4px);
  border-radius: 20px;
  margin: 1% 0;
}
menu.full .avatarPeq .barraDivIn{
  background-color: #67FF7D;
  border: 2px solid #282844;
  padding-bottom: 2%;
  width: calc(100% - 4px);
  border-radius: 20px;
}


@media screen and (min-width: 1520px) {
  menu.full .btnMenu{
    font-size: 19px;
  }
}

/*-------------------------------------------------------------------------avatarPeq y menu RESPONSIVE*/
menu.menuResp{
  padding:0;
  margin:0;
  overflow: hidden;
  
}
menu.menuResp .logoGralPC{
  width:calc(30% - 3px);
  display:block;
  padding-top:10px;
  float: left;
  border-right:3px solid #15DDFF;
  overflow:hidden;
  margin-top:40px;
  margin-left:5%;
  padding-bottom:17%;
}
menu.menuResp .logoGralPC img{
  width:90%;
  display:block;
}
menu.menuResp .avatarPeq{
  float: left;
  width:calc(50% - 43px);
  line-height:1;
  margin-top:40px;
  padding: 10px 20px;
  border-right:3px solid #15DDFF;
  cursor: pointer;
  position: relative;
}

menu.menuResp .avatarPeq .tituloAvatar{
  font-weight:bold;
}
menu.menuResp .avatarPeq .miNivel{
  padding:5px 0;
}
menu.menuResp .avatarPeq .miFoto{
  width:30%;
  overflow: hidden;
}
menu.menuResp .avatarPeq .misGotas{
  padding:5px 0;
}
menu.menuResp .avatarPeq .barraAvatar{
  width:100%;
}
menu.menuResp .avatarPeq .barraAvatar img{
  width:100%;
}
menu.menuResp .avatarPeq .miInsignia{
  width:12%;
  position:absolute;
  top:5%;
  right:5%;
  overflow: hidden;
}


menu.menuResp .menuBots{
  width:30%;
  float: left;
   background-color: #a60;
}
menu.menuResp .cadaBtnMenu{
  width:60%;
}
menu.menuResp .cadaBtnMenu a{
  display:block;
}
menu.menuResp .btnMenu{
  border: none;
  cursor: pointer;
  text-align: left;
  width:70%;
  height:0;
  color: #fff;
  background-image: url('../images/btnMenuNormal.png');
  background-color: transparent;
  background-size: 100% auto;
  font-weight: bold;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  padding-bottom: 29%;
  padding-left:30%;
  padding-top:3%;
  font-size: 1.2vw;
}
menu.menuResp .btnMenu:hover{
  color: #fff;
  background-image: url('../images/btnMenuSel.png');
}
menu.menuResp .cadaBtnMenu .selected{
  color: #fff !important;
  background-image: url('../images/btnMenuSel.png') !important;
}
menu.menuResp .showMenu{
  width:9%;
  float:left;
  margin-top:40px;
  padding-left:1%;
  padding-top:2%;
  
}
menu.menuResp .showMenu img{
  width:100%;
  display:block;
}
menu.menuResp .showMenu #iconShowMenu{
  cursor:pointer;
}
menu.menuResp .showMenu .iconAyudaMovil{
  padding-top:110%;
}

menu.menuResp .avatarPeq .barraDiv{
  background-color: #4D5477;
  border: 2px solid #6E78B3;
  padding: 1%;
  width: calc(90% - 4px);
  border-radius: 20px;
  margin: 1% 0;
}
menu.menuResp .avatarPeq .barraDivIn{
  background-color: #67FF7D;
  border: 2px solid #282844;
  padding-bottom: 2%;
  width: calc(100% - 4px);
  border-radius: 20px;
}


#sequiadometroSideMovil{
  width:calc(27% - 13px);
  float:left;
  margin-top:40px;
  border-right:3px solid #15DDFF;
  padding:2% 5px 0px 5px;
  position: relative;
}
#sequiadometroSideMovil a{
  display:block;
}
#sequiadometroSideMovil img{
  display:block;
  width:100%;
  padding-top:16px;
}
#sequiadometroSideMovil .seqAguja{
  position: absolute;
  top: 76.3%;
  left: 50%;
  width: 1%;
  height: 1%;
  overflow: visible;
  transform: rotate(0deg);
}
#sequiadometroSideMovil .seqAgujaIn{
  width: 1300%;
  position: relative;
  top: -2250%;
  left: -620%;
}
#sequiadometroSideMovil .seqAgujaIn img{
  width: 100%;
}
#sequiadometroSideMovil .seqEstado{
  font-weight: bold;
  position: absolute;
  bottom:9.5%;
  left:53%;
  color:#000;
  width: 50%;
  line-height: 1;
}

#fondoTransp{
  width:100%;
  position:fixed;
  background-color:rgba(0,0,0,0.95);
  top:0;
  left:0;
  bottom:0;
  display:none;
}
#menuBotsMovil{
  width:80%;
  position:absolute;
  top:0;
  left:10%;
  bottom:0;
  display:none;
}

#menuBotsMovil #iconCerrarMenu{
  overflow:hidden;
}
#menuBotsMovil .iconCerrarMenuIn{
  float:right;
  padding: 3% 1% 0 0;
  width:15%;
  cursor:pointer;
}
#menuBotsMovil .iconCerrarMenuIn img{
  width:100%;
}

@media screen and (min-width: 1520px) {
  menu.menuResp .btnMenu{
    font-size: 19px;
  }
}



#menuBotsMovil .cadaBtnMenu{
  width:100%;
}
#menuBotsMovil .cadaBtnMenu a{
  display:block;
}
#menuBotsMovil .btnMenu{
  border: none;
  cursor: pointer;
  text-align: left;
  width:calc(70% - 6px);
  height:0;
  color: #fff;
  font-weight: bold;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  padding-bottom: 15%;
  padding-left:30%;
  padding-top:3%;
  font-size: 5.3vw;
  
  
  display:inline-block;
  background: linear-gradient(0deg,rgba(0, 84, 255, 1) 0%, rgba(92, 239, 137, 1) 100%);
  border: 3px solid #fff;
  border-radius:50px;
  margin-bottom:12%;
  
}
#menuBotsMovil .btnMenu:hover{
  color: #fff;
  background: linear-gradient(0deg,rgba(0, 84, 255, 1) 0%, rgba(92, 239, 137, 1) 100%);
}
#menuBotsMovil .cadaBtnMenu .selected{
  color: #fff !important;
  background: linear-gradient(0deg,rgba(0, 84, 255, 1) 0%, rgba(92, 239, 137, 1) 100%) !important;
}

/*
@media screen and (min-width: 600px) {
  #menuBotsMovil .btnMenu{
    font-size: 6vw;
  }
}
@media screen and (min-width: 650px) {
  #menuBotsMovil .btnMenu{
    font-size: 5.3vw;
  }
  #menuBotsMovil .cadaBtnMenu{
    width:70%;
  }
}
*/


/*-------------------------------------------------------------------------sidebar right*/


#imagenPersSide{
  width:100%;
  margin-top: 50%;
}
#imagenPersSide img{
  width:90%;
  display:block;
  margin:0 auto;
}



/*-------------------------------------------------------------------------IndexIndex*/
#IndexIndex {
  
}

  
#IndexIndex .imagenInicio{
  display: block;
  margin: 0 auto;
  position: relative;
  max-width: 1065px;
  width: 94%;
  padding-top: 3%;
}

/*-------------------------------------------------------------------------MisionEntrar*/
#MisionEntrar{
  text-align: center;
  font-size: 18px;
}
#MisionEntrar .imagenInicio{
  display: block;
  margin: 0 auto;
  max-width: 300px;
}
#MisionEntrar .titulo{
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  width: 350px;
  text-align: center;
  margin: 5px auto 0 auto;
}
#MisionEntrar form .inputs{
  border: 2px solid #00FFFF;
  background-color: #261972;
  width: calc(94% - 20px);
  max-width: 350px;
  padding: 8px 10px;
  height: 20px;
  font-size: 16px;
  color: #fff;
  border-radius: 15px;
  margin:3px 3% 3px 3%;
}
#MisionEntrar form .inputs:focus{
  border: 2px solid #00FFFF;
  background-color: #261972;
  outline: none;
}

#MisionEntrar .olvidaste{
  color: #ffffff;
}
#MisionEntrar .recuperar{
  display: inline;
  cursor: pointer;
  width:auto;
  height:auto;
  padding: 4px 15px;
  background: linear-gradient(0deg,rgba(102, 0, 148, 1) 0%, rgba(255, 0, 249, 1) 100%);
  border: 2px solid #fff;
  border-radius:25px;
  font-weight: bold;
  color:#fff;
  font-size: 15px;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
}
#MisionEntrar .recuperar:hover{
  color:#eee;
  background: linear-gradient(0deg,rgb(120, 18, 168) 0%, rgb(255, 56, 248) 100%);
}
/*-------------------------------------------------------------------------MisionIndex*/

/*-------------------------------------------------------------------------MisionCuartel*/
#MisionCuartel {
  padding:60px 40px 40px 40px;
  overflow:hidden;
}

#MisionCuartel .divMision{
  width:50%;
  float:left;
  position: relative;
  font-size: clamp(20px, 5vw, 32px);
}


#MisionCuartel .imgFondo{
  
}
#MisionCuartel .imgFondo img, #MisionCuartel .logoMision img{
  width: 100%;
  display: block;
}
#MisionCuartel .logoMision{
  position: absolute;
  top:17%;
  left: 5%;
  width: 43%;
}
#MisionCuartel .numMision{
  position: absolute;
  top:20%;
  left: 6%;
  font-weight: bold;
  width: 40%;
  line-height: 1;
}
#MisionCuartel .titulo{
  position: absolute;
  top:32%;
  right: 10%;
  font-weight: bold;
  width: 40%;
  line-height: 1;
}

#MisionCuartel .btnComenzar{
  position: absolute;
  bottom:15%;
  left: 8%;
  width:40%;
}
#MisionCuartel .first{
  width:90% !important;
}
#MisionCuartel .first a{
  height:14% !important;
  padding: 1% 5% 2% 5% !important;
}
#MisionCuartel .btnComenzar a{
  display: block;
  cursor: pointer;
  width:calc(80% - 6px);
  height:30%;
  padding: 5% 10%;
  background: linear-gradient(0deg,rgba(0, 84, 255, 1) 0%, rgba(92, 239, 137, 1) 100%);
  border: 3px solid #fff;
  border-radius:50px;
  font-weight: bold;
  color:#fff;
  font-size: 18px;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  text-align: center;
}
#MisionCuartel .btnComenzar a:hover{
  background: linear-gradient(0deg,rgb(35, 107, 252) 0%, rgb(122, 244, 159) 100%);
}
#MisionCuartel .btnComenzar a .textoIn{
  text-align: center;
  padding-top: 2.3%;
}
#MisionCuartel .btnComenzar a.orange{
  background: linear-gradient(0deg,#FF5F29 0%, #FFB000 100%);
}
#MisionCuartel .btnComenzar a.orange:hover{
  background: linear-gradient(0deg,#F9764A 0%, #FFC23F 100%);
}

#MisionCuartel .insignia{
  display: block;
  position: absolute;
  width: 6%;
  height: 0;
  padding-bottom: 6%;
  background-image: url('../images/avance.png');
  background-size: 100% auto;
  top: 17.8%;
  
}
#MisionCuartel .insignia1{
  left: 23.38%;
}
#MisionCuartel .insignia2{
  left: 30.8%;
}
#MisionCuartel .insignia3{
  left: 38.2%;
}
#MisionCuartel .imgFondoCompletada{
  position: absolute;
  top: 1.8%;
  left: 2%;
  width: 96%;
  height: 96%;
}
#MisionCuartel .imgFondoCompletada img{
  width: 100%;
}

@media (max-width: 1280px) {
  #MisionCuartel .divMision{
    width:100%;
  }
}

/*-------------------------------------------------------------------------MisionInventario*/

#MisionInventario .cadaFila{
  position: relative;
  overflow: hidden;
}
#MisionInventario .cadaInsignia{
  width: 31%;
  padding: 1% 1% 1% 1%;
  float: left;
  overflow: visible;
}
#MisionInventario .brresponsive{
  width: 100%;
  height: 1px;
  float: left;
}
#MisionInventario .imagen{
  
}
#MisionInventario .imagen img{
  width: 100%;
}
#MisionInventario .titulo{
  text-align: center;
  line-height: 1.1em;
  font-size: 18px;
  font-weight: bold;
  
  display:inline-block;
  width:calc(90%);
  height:calc(2 * 1.1em);
  padding: 3% 5% 3% 5%;
  background: linear-gradient(0deg,rgba(0, 84, 255, 1) 0%, rgba(92, 239, 137, 1) 100%);
  border-radius:50px;
  font-weight: bold;
  color:#fff;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  margin-bottom: 6%;
  overflow: hidden;
}
#MisionInventario .tituloIn{
  height:  100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center; 
}

#MisionInventario .texto{
  text-align: center;
  line-height: 1.2;
  color:#fff;
}

@media (min-width: 1550px) {
  #MisionInventario .cadaInsignia{
    width: 14%;
    padding: 1%;
    float: left;
  }
  #MisionInventario .brresponsive{
    display: none;
  }
}

/*-------------------------------------------------------------------------MisionPosiciones*/


#MisionPosiciones .submenu{
  width: 100%;
  height:auto;
  padding: 2% 0%;
  border-radius:150px;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.7));
  background: linear-gradient(0deg, rgba(62, 24, 112, 0.9) 0%, rgba(91, 55, 185, 0.65) 100%);
  display:flex;
  flex-direction: row;
  margin-bottom: 5%;
}
#MisionPosiciones .submenu a{
  display: inline-block;
  cursor: pointer;
  width:auto;
  height:auto;
  padding: 2% 10%;
  background: linear-gradient(0deg,rgba(0, 84, 255, 1) 0%, rgba(92, 239, 137, 1) 100%);
  border-radius:50px;
  font-weight: normal;
  color:#fff;
  font-size: 18px;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
}
#MisionPosiciones .submenu a:hover{
  background: linear-gradient(0deg,rgb(56, 122, 255) 0%, rgb(143, 247, 174) 100%);
}
#MisionPosiciones .submenuGlobal{
  flex-grow: 1;
  text-align:center;
}
#MisionPosiciones .submenuEscuela{
  flex-grow: 1;
  text-align:center;
}
#MisionPosiciones .submenuSelected a{
  background: linear-gradient(0deg,#FF5F29 0%, #FFB000 100%);
}
#MisionPosiciones .respTextMenu{
  display: block;
  padding-left: 3%;
}



#MisionPosiciones .posiciones{
  line-height: 1;
}

#MisionPosiciones .cadaPosicion{
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  background: linear-gradient(0deg, rgba(102, 0, 148, 1) 0%, rgba(255, 0, 249, 1) 100%);
  position:relative;
  padding: 1% 0 1% 20%;
  line-height:1;
  width:calc(80% - 6px);
  height:auto;
  overflow:visible;
  cursor: pointer;
  border-radius: 200px;
  border: 2px solid #00ffff;
  margin-bottom:5%;
}
#MisionPosiciones .cadaPosicionEsc{
  padding: 1% 0 1% 7%;
  width:calc(93% - 6px);
}

#MisionPosiciones .foto{
  position:absolute;
  top: -40%;
  left: -3%;
  overflow:hidden;
  width:15%;
}

#MisionPosiciones .Der{
  width: 90%;
}
#MisionPosiciones .DerEscuela{
  width: 90% !important;
  padding-left: 5%;
}

#MisionPosiciones .Top{
  overflow: hidden;
  font-weight: bold;
  display:flex;
}
#MisionPosiciones .Bottom{
  overflow: hidden;
  padding-top:1.5%;
  display:flex;
}


#MisionPosiciones .num{
  border-right: 2px solid #15DDFF;
  flex-basis: 15%;
}
#MisionPosiciones .nombre{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  flex-grow: 1;
  padding-left:2%;
}
#MisionPosiciones .insignias{
  flex-basis: 30%;
}
#MisionPosiciones .misiones{
  flex-grow: 1;
}
#MisionPosiciones .nivel{
  text-align: right;
  flex-basis: 20%;
}


#MisionPosiciones .numEsc{
  
}
#MisionPosiciones .nombreEsc{
  
}

#MisionPosiciones .insigniasEsc{
  flex-basis: 50% !important;
}
#MisionPosiciones .misionesEsc{
  flex-grow: 1;
}


#MisionPosiciones .miPosicion{
  background: linear-gradient(0deg,#FA6B49 0%, #FEB749 100%);
  border: 2px solid #FFE900;
}


/*-------------------------------------------------------------------------MisionPosiciones*/
#MisionSequiadometro .seqAll{
  overflow: hidden;
}
#MisionSequiadometro .seqIzq{
  width: 40%;
  float: left;
}
#MisionSequiadometro .seqDer{
  width: 60%;
  float: left;
  line-height: 1;
}

#MisionSequiadometro .seqLogo img{
  width: 100%;
}
#MisionSequiadometro .seqPersonaje{
  position: relative;
}
#MisionSequiadometro .seqPersonaje img{
  width: 100%;
  position: relative;
  top:-25px;
  display: block;
}



#MisionSequiadometro .seqTitulo{
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  text-align: center;
  font-weight: bold;
  padding-top: 5%;
  padding-bottom: 5%;
}
#MisionSequiadometro .seqImagenFondo img{
  width: 100%;
}
#MisionSequiadometro .seqImagen{
  position: relative;
}
#MisionSequiadometro .seqCarita{
  position: absolute;
  top: 59%;
  left: 32.8%;
  width: 35%;
  overflow: visible;
}
#MisionSequiadometro .seqCarita img{
  width: 100%;
}
#MisionSequiadometro .seqAguja{
  position: absolute;
  top: 49%;
  left: 50%;
  width: 1%;
  height: 1%;
  overflow: visible;
  transform: rotate(0deg);
}
#MisionSequiadometro .seqAgujaIn{
  width: 1950%;
  position: relative;
  top: -3000%;
  left: -1000%;
}
#MisionSequiadometro .seqAgujaIn img{
  width: 100%;
}
#MisionSequiadometro .seqEstado{
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  text-align: center;
  font-weight: bold;
  padding-top: 5%;
}

@media (max-width: 980px) {
  #MisionSequiadometro .seqIzq{
    display: none;
  }
  #MisionSequiadometro .seqDer{
    width: 100%;
  }
}

/*-------------------------------------------------------------------------MisionAvatar*/




#MisionAvatar .imagenes{
  display: flex;
  flex-wrap: wrap;
}
#MisionAvatar .imagenes .cadaFila{
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: 33.3333%;
  padding-bottom: 2%;
}

#MisionAvatar .miFoto{
  width:70%;
  display: block;
  margin: 0 auto;
  overflow: hidden;
}
#MisionAvatar .boton{
  display:flex;
  cursor: pointer;
  width:auto;
  height:auto;
  padding: 5px 0;
  background: linear-gradient(0deg,rgba(0, 84, 255, 1) 0%, rgba(92, 239, 137, 1) 100%);
  border-radius:50px;
  font-weight: bold;
  color:#fff;
  font-size: 18px;
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  position: relative;
  top:-10px;
}
#MisionAvatar .boton .input{
  flex-grow: 0;
  flex-shrink: 0;
  flex-basis: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
#MisionAvatar .boton .titulo{
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#MisionAvatar input[type="radio"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 16px; /* Desired width */
  height: 16px; /* Desired height */
  border: 2px solid #ccc; /* Border for the circle */
  border-radius: 50%; /* Makes it a circle */
  background-color: #fff; /* Background color when unchecked */
  /* Add other styles like margin, position, etc., as needed */
  margin: 0 0 0 5px;
}

#MisionAvatar input[type="radio"]:checked {
  background-color: #561287; /* Background color when checked */
  border-color: #FFFFFF; /* Border color when checked */
  /* Add styles for the inner dot/fill if desired, e.g., using a pseudo-element */
}

#MisionAvatar .mensaje{
  font-size: 2em;
  color: #D36BF9;
  line-height: 1;
  text-align: center;
}
#MisionAvatar .fotoAvatar{
  width: 100%;
  background-size: cover; /* Scales the image to cover the entire element while preserving aspect ratio */
  background-position: center center; /* Centers the image horizontally and vertically */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  overflow: hidden;
  padding-bottom: 100%;
}



/*-------------------------------------------------------------------------MisionPersonajes*/

/* Container for the 3D space */
#personajes  {
  width: 100%;
  overflow: hidden;
}

/* Container for the 3D space */
#personajes .flip-card {
  width: 30%;
  height: 0px;
  padding-bottom: 41%;
  perspective: 1000px; /* Essential for 3D depth */
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.5));
  float: left;
  margin-left: 1.66%;
  margin-right: 1.66%;
}

/* Inner wrapper that actually rotates */
#personajes .flip-card-inner {
  position: relative;
  width: 100%;
  height: 0px;
  padding-bottom: 137%;
  transition: transform 0.6s;
  transform-style: preserve-3d; /* Allows child elements to exist in 3D space */
}

/* Add this class via JS (or use :hover) to flip */
#personajes .flip-card.is-flipped .flip-card-inner {
  transform: rotateY(180deg);
}

/* Front and Back common styles */
#personajes .flip-card-front, #personajes .flip-card-back {
  position: absolute;
  backface-visibility: hidden; /* Hides the reverse side when flipped */
  display: flex;
  flex-direction:column;
  align-items: flex-start;
  justify-content: flex-start;
}

/* Front styling */
#personajes .flip-card-front {
  background-color: transparent;
  color: black;
  width: 100%;
  height: 100%;
}

/* Back styling (rotated 180 degrees initially) */
#personajes .flip-card-back {
  background: linear-gradient(0deg, #1536ad 0%, #2aaeff 100%);
  color: white;
  transform: rotateY(180deg);
  border-radius: 5%;
  width: 80%;
  height: 70%;
  padding: 15% 10%;
  overflow: hidden;
}

#personajes .flip-card-front img  {
  width: 100%;
  height: 100%;
  display: block;
}
#personajes .flip-card-back .titulo{
  font-weight: bold;
}
#personajes .flip-card-back .subtitulo{
  padding-bottom: 5%;
}
#personajes .flip-card-back .texto{
  font-weight: lighter;
}


@media (max-width: 1480px) {
  #personajes .flip-card {
    width: 46%;
    padding-bottom: 65%;
    margin-left: 2%;
    margin-right: 2%;
  }
}

@media (max-width: 580px) {
  #personajes .flip-card {
    width: 94%;
    padding-bottom: 130%;
    margin-left: 3%;
    margin-right: 3%;
  }
}

/*-------------------------------------------------------------------------MisionAyuda*/
#MisionAyuda .alerta{
 font-weight: lighter !important; 
}

/*-------------------------------------------------------------------------MisionConfiguracion*/
#MisionConfiguracion form .inputs{
  border: 2px solid #00FFFF;
  background-color: #261972;
  width: calc(100% - 20px);
  padding: 8px 10px;
  height: 20px;
  font-size: 16px;
  color: #fff;
  border-radius: 15px;
  margin:3px 0 3px 0;
}

#MisionConfiguracion input[type="checkbox"] {
  width: 20px; /* Desired width */
  height: 20px; /* Desired height */
  border: 2px solid #ccc; /* Border for the circle */
  border-radius: 50%; /* Makes it a circle */
  background-color: #fff; /* Background color when unchecked */
  /* Add other styles like margin, position, etc., as needed */
  margin: 0 0 0 5px;
  position: relative;
  top:4px;
}