@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@400;600;700&display=swap');

:root {
  --left-initial-dg: 180deg;
  --right-initial-dg: 180deg;
  --left-time: 30s;
  --right-time: 30s;
}

/* BODY */
body {font-family: 'Fira Sans', sans-serif; font-weight: 400; }
html, body {position: relative; height: 100%}

/* LOADING */
/* Estilos para el contenedor del loader */
.loader-container {
  position: fixed; /* Posición fija en toda la pantalla */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2D59E6; /* Fondo semi-transparente */
  display: flex; /* Utiliza flexbox para centrar el contenido */
  justify-content: center; /* Centra horizontalmente */
  align-items: center; /* Centra verticalmente */
  z-index: 100000; /* Asegura que esté sobre otros elementos */
}

/* Estilos para el loader */
.custom-loader {
  width: 100px;  /* Aumentado de 50px a 100px */
  height: 48px;  /* Aumentado de 24px a 48px */
  background: 
    radial-gradient(circle closest-side, #FFFFFF 90%, #0000) 0% 50%,
    radial-gradient(circle closest-side, #FFFFFF 90%, #0000) 50% 50%,
    radial-gradient(circle closest-side, #FFFFFF 90%, #0000) 100% 50%;
  background-size: calc(100% / 3) 24px;  /* Ajustado para mantener la proporción de los círculos */
  background-repeat: no-repeat;
  animation: d3 1s infinite linear;
}



/* Animación del loader */
@keyframes d3 {
  20% { background-position: 0% 0%, 50% 50%, 100% 50% }
  40% { background-position: 0% 100%, 50% 0%, 100% 50% }
  60% { background-position: 0% 50%, 50% 100%, 100% 0% }
  80% { background-position: 0% 50%, 50% 50%, 100% 100% }
}


/* TEXTO */
h1 {font-size: 39px; line-height: 44px; color: #FFFFFF; font-weight: 600;}
.w700 {font-weight: 700;}
.w600 {font-weight: 600;}
.white {color: #FFFFFF;}
.txt-small {font-size: 12px; line-height: 18px;}
.mt-35 {margin-top: 35%;}
.font23 {font-size: 23px; line-height: 29px;}
p {font-size: 18px; line-height: 27px;}
.font20 {
  font-size: 20px;
  line-height: 26px;
}
.font18 {
  font-size: 18px;
  line-height: 24px;
}
/* TIMER */
.top-timer {z-index: 999; position: absolute;left: 0; right: 0; top: 40px;}
.progress{border: 1px solid #555555; width: 95px; height: 95px; line-height:95px; background: none; background: #FFFFFF; margin: 0 auto; border-radius: 50%; box-shadow: none; position: relative;}
.progress:after{content: ""; width: 100%; height: 100%; border-radius: 50%; border: 5px solid #CBCBCB;
  position: absolute; top: 0; left: 0;}
.progress > span{width: 50%; height: 100%; overflow: hidden; position: absolute; top: 0;
  z-index: 1;}
.progress .progress-left{left: 0;}
.progress .progress-bar{width: 100%; height: 100%; background: none; border-width: 5px;
  border-style: solid; position: absolute; top: 0; color: #3A3A3A;}
.progress .progress-left .progress-bar{
  left: 100%;
  border-top-right-radius: 80px;
  border-bottom-right-radius: 80px;
  border-left: 0;
  -webkit-transform-origin: center left;
  transform-origin: center left;
}
.progress .progress-right{
  right: 0;
}
.progress .progress-right .progress-bar{
  left: -100%;
  border-top-left-radius: 80px;
  border-bottom-left-radius: 80px;
  border-right: 0;
  -webkit-transform-origin: center right;
  transform-origin: center right;
  animation: loading-1 var(--right-time) linear forwards var(--left-time);
  -webkit-transform: rotate(var(--right-initial-dg));
  transform: rotate(var(--right-initial-dg));
}
.progress .progress-value{
  width: 90%;
  height: 90%;
  border-radius: 50%;
  font-size: 38px;
  font-weight: 700;
  color: #3a3a3a;
  line-height: 88px;
  text-align: center;
  position: absolute;
  top: 5%;
  left: 5%;
}

.progress .progress-left .progress-bar{
  animation: loading-1 var(--left-time) linear forwards;
  -webkit-transform: rotate(var(--left-initial-dg));
  transform: rotate(var(--left-initial-dg));
}

@keyframes loading-1{
  0%{
      -webkit-transform: rotate(var(--left-initial-dg));
      transform: rotate(var(--left-initial-dg));
  }
  100%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
}
@keyframes loading-2{
  0%{
      -webkit-transform: rotate(var(--right-initial-dg));
      transform: rotate(var(--right-initial-dg));
  }
  100%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
}
@keyframes loading-3{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
  }
}
@keyframes loading-4{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(36deg);
      transform: rotate(36deg);
  }
}
@keyframes loading-5{
  0%{
      -webkit-transform: rotate(0deg);
      transform: rotate(0deg);
  }
  100%{
      -webkit-transform: rotate(126deg);
      transform: rotate(126deg);
  }
}
.border-violeta {border-color: rgb(143 32 243);}
.top-box-violeta {top: 5px; left: 160px;}
.box-pregunta p {font-size: 13px;}
.top-timer-violeta {right: 180px; top: 0px;}

/* MODAL */
.modal-content {border-radius: 27px;}
.modal-content p {font-size: 17px;}
.img-modal {width: 120px; line-height: 120px; height: 120px; margin: 0 auto; margin-top: -80px; background-color: #FFFFFF; border-radius: 50%; border: 1px solid #555555;}

/* JUEGO */
.card.active-green {background-color: #6BC8CD; border: 0;}
.card.active-blue {background-color: #2D59E6; border: 0;}
.card.active-blue2 {background-color: #007EFF; border: 0;}
.card.active-orange {background-color: #FF5400; border: 0;}

.active-green h2.card-title {color: #FFFFFF;}
.active-blue h2.card-title {color: #FFFFFF;}
.active-blue2 h2.card-title {color: #FFFFFF;}
.active-orange h2.card-title {color: #FFFFFF;}
.btn-volver {z-index: 999; position: absolute; top: 65px; left: 30px; background-color: #FFFFFF; border-radius: 50%; width: 40px;
  height: 40px; line-height: 38px; text-align: center; border: 1px solid #555555;}
.box-puntos {background-color: #FFFFFF; border-radius: 27px; border: 1px solid #333333;}
.box-puntos h1 {font-size: 90px; line-height: 90px; color: #000000; font-weight: 700;}
.box-puntos h3 {font-weight: 700; font-size: 26px; color: #000000;}
.box-mejor-puntaje {border-radius: 20px; border: 1px solid #555555;}
.box-mejor-puntaje p {font-size: 19px; font-weight: 700;}
.font25 {font-size: 25px !important; line-height: 25px !important;}
.font22 {font-size: 22px !important; line-height: 30px !important;}
.border-black {border-color: #000000 !important;}
.border-white {border-color: #FFFFFF !important;}
.icon-circle {border: 1px solid #000000; border-radius: 50%; width: 90px; height: 90px; line-height: 90px; margin: 0 auto; margin-top: -90px;
  background-color: #FFFFFF;}
.bg-green {background-color: #6BC8CD;}
.card {border-radius: 27px; min-height: 255px; border: 1px solid #555555;}
h2.card-title {font-size: 21px; font-weight: 700;}
.circle-icon {background-color: #F2F2F2; border-radius: 50%; min-width: 63px; min-height: 63px; text-align: center; line-height: 63px;}
.border-left-green {box-shadow: -12px 0px 0px 0px #6BC8CD; -webkit-box-shadow: -12px 0px 0px 0px #6BC8CD; -moz-box-shadow: -12px 0px 0px 0px #6BC8CD;}
.border-left-blue {box-shadow: -12px 0px 0px 0px #2D59E6; -webkit-box-shadow: -12px 0px 0px 0px #2D59E6; -moz-box-shadow: -12px 0px 0px 0px #2D59E6;}
.btn-play.play-blue {background-color: #2D59E6;}
.btn-play.play-green {background-color: #80c4c9;}
.border-left-blue2 {box-shadow: -12px 0px 0px 0px #007EFF; -webkit-box-shadow: -12px 0px 0px 0px #007EFF; -moz-box-shadow: -12px 0px 0px 0px #007EFF;}
.btn-play.play-blue2 {background-color: #007EFF;}
.border-left-orange {box-shadow: -12px 0px 0px 0px #FF5400; -webkit-box-shadow: -12px 0px 0px 0px #FF5400; -moz-box-shadow: -12px 0px 0px 0px #FF5400;}
.btn-play.play-orange {background-color: #FF5400;}
.btn-play {
  animation: myAnim 2s ease 0s 1 alternate forwards;
  border-radius: 50%;
  width: 56px;
  height: 56px;
  line-height: 54px;
  text-align: center;
  position: absolute;
  bottom: 1px;
  right: 0;
}
.btn-footer {position: absolute; left: 10px; right: 15px; bottom: 25px;}

.icon-bg-grey {
  background-color: #f2f2f2;
  border-radius: 35px;
  padding: 14px 20px;
}

@keyframes myAnim {
	0% {
		transform: scale(0.2);
    opacity: 0
	}

	100% {
		transform: scale(1);
    opacity: 1
	}
}


 @-webkit-keyframes animate-svg-fill-1{0%{fill:transparent}100%{fill:rgb(58,58,58)}}@keyframes animate-svg-fill-1{0%{fill:transparent}100%{fill:rgb(58,58,58)}}.svg-elem-1{-webkit-animation:animate-svg-fill-1 1s cubic-bezier(0.68,-0.55,0.265,1.55) 0.3s both;animation:animate-svg-fill-1 1s cubic-bezier(0.68,-0.55,0.265,1.55) 0.3s both}@-webkit-keyframes animate-svg-fill-2{0%{fill:transparent}100%{fill:rgb(58,58,58)}}@keyframes animate-svg-fill-2{0%{fill:transparent}100%{fill:rgb(58,58,58)}}.svg-elem-2{-webkit-animation:animate-svg-fill-2 1s cubic-bezier(0.68,-0.55,0.265,1.55) 0.5s both;animation:animate-svg-fill-2 1s cubic-bezier(0.68,-0.55,0.265,1.55) 0.5s both}@-webkit-keyframes animate-svg-fill-3{0%{fill:transparent}100%{fill:rgb(58,58,58)}}@keyframes animate-svg-fill-3{0%{fill:transparent}100%{fill:rgb(58,58,58)}}.svg-elem-3{-webkit-animation:animate-svg-fill-3 1s cubic-bezier(0.68,-0.55,0.265,1.55) 0.7s both;animation:animate-svg-fill-3 1s cubic-bezier(0.68,-0.55,0.265,1.55) 0.7s both}@-webkit-keyframes animate-svg-fill-4{0%{fill:transparent}100%{fill:rgb(58,58,58)}}@keyframes animate-svg-fill-4{0%{fill:transparent}100%{fill:rgb(58,58,58)}}.svg-elem-4{-webkit-animation:animate-svg-fill-4 1s cubic-bezier(0.68,-0.55,0.265,1.55) 0.9000000000000001s both;animation:animate-svg-fill-4 1s cubic-bezier(0.68,-0.55,0.265,1.55) 0.9000000000000001s both}@-webkit-keyframes animate-svg-fill-5{0%{fill:transparent}100%{fill:rgb(255,255,255)}}@keyframes animate-svg-fill-5{0%{fill:transparent}100%{fill:rgb(255,255,255)}}.svg-elem-5{-webkit-animation:animate-svg-fill-5 1s cubic-bezier(0.68,-0.55,0.265,1.55) 1.1s both;animation:animate-svg-fill-5 1s cubic-bezier(0.68,-0.55,0.265,1.55) 1.1s both}

/* REGISTRO */
.bg-grey {background-color: #3A3A3A;}
.form-control {border-radius: 30px; border: 1px solid #555555; color: #B2C4FF; font-size: 16px; min-height: 44px; padding: 0px 15px;}
.form-control::placeholder {color: #B2C4FF}

/* HOME */
.border-qr {border-radius: 10px; border: 1px solid #555555;}
.bg-blue {background-color: #2D59E6}
.white {color: #FFFFFF}
.mx-logo {max-width: 210px;}
.animated-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #000000;
    color: #fff;
    border: none;
    border-radius: 35px;
    font-weight: 600;
    font-size: 18px;
    cursor: pointer;
    outline: none;
    min-width: 80px;
    transition: background-color 0.3s ease;
  }
  
.animated-button.clicked {
    background-color: #202020;
}
  
@keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
}
  
/* PUNTO DE PARTIDA */
.blue {color: #2D59E6;}
.orange {color: #FF5400;}
.bg-orange {background-color: #FF5400;}
.blue2 {color: #007EFF;}
.bg-blue2 {background-color: #007EFF;}
.green {color: #6BC8CD;}
.objeto {background-color: #FFFFFF; border-radius: 50%; width: 110px; height: 110px; line-height: 110px; border: 1px solid #555555;}
.btn-white {background: #FFFFFF; color: #000000;}

::selection {color: #FFFFFF; background-color: #365CDA;}

select, input {
  color: black !important; /* Color por defecto para el texto de los selects e inputs */
}

/* Estilo específico para los placeholders de los inputs */
input::placeholder {
  color: black !important; /* Color por defecto para los placeholders */
}

.a-enter-vr-button {
  display: none !important;
}

@media (max-width: 576px) {

  .circle-icon{
    min-height: 50px;
    min-width: 50px;
    line-height: 50px;
  }
}

@media (max-width: 480px) {

  .circle-icon{
    min-height: 45px;
    min-width: 45px;
    line-height: 45px;
  }

  .mt-35 {
    margin-top: 25%;
}
  h1 {
    font-size: 32px;
    line-height: 37px; 
  }
  .card {
    min-height: 230px;
}
.card-body {
  padding-top: 5px;
}
.font20 {
  font-size: 18px;
  line-height: 24px;
}
p {
  font-size: 14px;
  line-height: 20px;
}
.objeto {
  width: 90px;
  height: 90px;
  line-height: 90px;
}
h2.card-title {
  font-size: 19px;
}
.txt-intro {
  font-size: 14px;
  line-height: 22px;
}
.box-mejor-puntaje p {
  font-size: 16px;
}
}

@media (max-width: 330px) {
  .font20 {
    font-size: 16px;
    line-height: 20px;
}
.txt-intro {
  font-size: 13px;
  line-height: 21px;
}
.box-puntos.p-4 {
  padding-left: 7% !important;
  padding-right: 7% !important;
}
.animated-button {
  padding: 5px 10px;
}
.font22 {
  font-size: 20px !important;
  line-height: 28px !important;
}
.objeto {
  width: 80px;
  height: 80px;
  line-height: 80px;
}
 }

/* Añadido desde el archivo PHP */
.modal {
    z-index: 9999 !important; /* Valor por defecto de Bootstrap para modales */
}

a-scene {
    z-index: 1 !important; /* Un valor menor que el del modal */
}

.interactive {
    z-index: 20000 !important; /* Un valor menor que el del modal */
    pointer-events: auto;
}

a-box {
  background-color: rgba(0, 255, 0, 0.5); /* Verde semi-transparente */
}