/* ----------------------------------------
/* ----------------------------------------
/* EJERCICIOS INTERACTIVOS (DESPUÉS DEL TEXTO DE LA HISTORIA)*/
/* ----------------------------------------
/* ----------------------------------------



/* para quitar relative de los col de bootstrap, para que no molesten a los exercicios de arrastrar */
.col-xs-12,
.col-md-8
{
  position: inherit !important;
}


/*--> imagen de la actividad "une las flechas" */
.acti-une-flechas {
    max-width: 400px;
  }
  @media only screen and (max-width: 500px) { 
    .acti-une-flechas {
      max-width: 325px;
    }
  }
  
  /* Elementos generales (párrafos, márgenes, etc.) */
  
  /*--> elementos con etiqueta strong*/
  .personal-curso-ejercicio strong {
    color: #bc7538;
  }
  
  /*--> distancia entre preguntas */
  .personal-curso-ejercicio > p {
      margin-bottom: 1.5em !important;
  }
  
  .test-boton-dropdown {
      margin-bottom: 10px;
  }
  
  /* Eliminar la esquina inverior de "resize" a las cajas de textarea */
  .personal-curso-ejercicios textarea {
    resize: none;
  }
  
  
  /* Fondo tipo libreta */
  @media only screen and (min-width: 768px) { 
  
      .test-super-papa {
        position: relative;
        /* width: 90%; */
        /* max-width: 800px;*/
        /* min-width: 430px;*/
        /* height: 390px; */
        /* margin: 0 auto; */
        background: #fafafa;
        border-radius: 10px;
        box-shadow: 3px 2px 5px rgba(0,0,0,.1);
        overflow: hidden;
        margin-bottom: 3em;
        padding-right: 4em;
        padding-bottom: 4em;
      }
      .test-super-papa:before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 60px;
        border-right: 2px solid #ecaeb0;
        box-sizing: border-box;
        /* background: radial-gradient(#575450 6px, transparent 7px) repeat-y; */
        /* background-size: 30px 30px; */
        background-image: -moz-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0px), -moz-radial-gradient(34% 50%, circle closest-corner, #ffffff, #ffffff 39%, transparent 0%), -moz-radial-gradient(30.9% 46% , circle closest-corner, #CCCCCC, #CCCCCC 43.5%, transparent 0%);
        background-image: -webkit-linear-gradient(top , transparent, transparent 49px,#E7EFF8 0), -webkit-radial-gradient(34% 50%, circle closest-corner, #ffffff, #ffffff 39%, transparent 0%), -webkit-radial-gradient(30.9% 46%, circle closest-corner, #cccccc, #cccccc 43.5%, transparent 0%);
        -webkit-background-size: 100% 50px;
        background-size: 100% 50px;
      }
      .test-super-papa .personal-curso-ejercicio {
        /* position: absolute; */
        top: 30px;
        /* right: 0; */
        /* bottom: 30px; */
        left: 60px;
        background-size: 30px 30px;
      }
  }
  
  /* Mmarcador de resultados */
  /* Aunque veas ".test-marcador-EN" esa "EN" en esidioma.com no se refiere a "English". Es una herencia de SK, donde si significaba "English" */
  
  .test-marcador-EN { 
    background: white;
    border: solid 1px lightgray;
    border-radius: 8px;
    padding: 1em;
  }
  @media only screen and (min-width: 768px) { 
    .test-marcador-EN { 
      width: fit-content;
    }
  }

  .test-marcador-EN span {  
    display: inline-block;  
    /* height: 2em; */  
    /* width: 2em; */ 
    /* padding: 0.5em; */ 
    margin: 0.25em; 
    /* border-radius: 8px; */ 
    font-size: 1.5em; 
    /* text-align: center; */ 
  } 
  .test-marcador-correctas {  
    color: var(--color-correcto-fuente);  
    /* background: var(--color-correcto-fondo); */  
    /* border: solid 1px var(--color-correcto-fuente); */ 
  } 
  .test-marcador-incorrectas {  
    color: var(--color-incorrecto-fuente);  
    /* background: var(--color-incorrecto-fondo); */  
    /* border: solid 1px var(--color-incorrecto-fuente);   */ 
  } 
  .test-marcador-porcentaje { 
  }
  
  /* Envoltorio de opciones y huecos vacíos */
  
  .test-dropdown-hueco-vacio {  
    border: 0px;  
    border-bottom: solid 1px #ccc;  
    width: 10ch;  
    text-align: center; 
    font-size: 1.25em;  
    color: var(--color-correcto-fuente);  
    pointer-events: none;
    background: transparent; 
    height: 2em;
    overflow: hidden;
    resize: none;      
  } 
  
  .test-dropdown-hueco-vacio.tdhv-extracorto {
    width: 3ch;   
  }
  
  .test-dropdown-hueco-vacio.tdhv-largo {  
    width: 15ch;   
  }  
  
  .test-dropdown-hueco-vacio.tdhv-extra-extra-largo { /* Solo (por ahora) para la actividad "ordena la historia". Úsalo con cuidado por da un aspecto muy diferente al "textarea" */ 
    width: 45ch;
    height: 5em; /* reset del estilo para ".test-dropdown-hueco-vacio" */
    border-bottom: 0; /* reset del estilo para ".test-dropdown-hueco-vacio" */
    text-align: left;
  } 
  @media only screen and (max-width: 500px) { 
    .test-dropdown-hueco-vacio {
      max-width: 80% !important; /* Pongo "max-width" para que no se modifique los antes cuando he puesto una width en el html (porque las soluciones son cortas)  */
    }
  }  
  
  .test-boton-hueco-vacio { 
    border: 0px;  
    border-bottom: solid 1px #ccc;  
    width: 10ch;  
    text-align: center; 
    font-size: 1.25em;  
    color: var(--color-correcto-fuente);  
    pointer-events: none; 
    margin-top: -0.5em;
    background: transparent; 
    resize: none;
  }
  
  .test-boton-hueco-vacio.tbhv-corto {  
    width: 5ch;
  }

  
  /* .test-envoltorio-opciones,
  .parrafo-dialogo
  {
    user-select: none;
  } */
  
  
  
  .test-envoltorio-opciones input[type="radio"]{  
    margin: 0.5em 0.5em 1em 2em;
  } 
  
  
  /* Ejercicios interactivos: dictados*/
  
  .test-hueco-inicial {
  }
  
  .test-hueco-correcto {
   background: var(--color-correcto-fondo);
  }
  
  
  .test-hueco-incorrecto {
    background: var(--color-incorrecto-fondo);
  
  }
  
  .test-hueco-final {
    background: yellow;
  
  }
  
  .test-hueco-escritura {
    border: solid 1px lightsteelblue !important; /* Si no pones este "important" habrá inputs donde este estilo no se activa */
    border-radius: 4px;
    padding-left: 0.5em;
    transition: all 0.2s;
    margin-right: 5px;
    line-height: 1.4em;
    vertical-align: middle;
  }
  
  .test-hueco-escritura.test-forzar-margen-derecha.test-hueco-final {
    text-align: right;
  }
  
  .test-boton {
    height: 2em;
    width: auto; /* En Esidioma pongo esto para que la bombilla no salga distorsionada */
    margin: 0 !important; /*ponemos "important!" para pisar un estilo por defecto de margin-bottom*/
    padding: 0;
    transition: transform 0.3s;
    opacity: 0.8;
  }
  
  .test-boton:hover {
    transform: scale(1.2);
    cursor: pointer;
  }
  .test-boton:active {
    transform: scale(1.4);
    cursor: pointer;
  }
  
  .test-boton-final {
    pointer-events:none;
    filter: grayscale(1); 
  }
  
  .input-test-onfocus {
    border-color: solid 1px #4c4c4c !important;
    box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.5);
  }
  
  /* Ejercicios interactivos boton, botón-radio y dropdown */
  
  span.test-boton-opcion {
    box-shadow: 1px 1px 3px 1px rgba(0,0,0,0.25);
    margin: 0 5px 0 5px;
  }
  
  .test-boton-dropdown {
    margin-left: 5px;   
  }
  @media only screen and (max-width: 500px) { 
    .test-boton-dropdown {
      max-width: 80% !important; /* Pongo "max-width" para que no se modifique los antes cuando he puesto una width en el html (porque las soluciones son cortas)  */
    }
  }  
  
  .test-boton-opcion, .test-boton-dropdown {
    /* border: solid 1px gray; */
    padding: 0.3em;
    border-radius: 5px;
    background: #eee;
    transition: all 0.5s;
  }
  
  .test-boton-opcion:hover{
    color: white;
    background: gray;
    cursor: pointer;
  }
  
  .test-boton-dropdown:hover{
     cursor: pointer;
  
  }
  
  .test-boton-opcion.muestra-correcto {
    color: var(--color-correcto-fuente);
    font-weight: 900;
  }
  
  .test-boton-dropdown.correcto, .test-boton-opcion.correcto, .test-boton-opcion.correcto + .test-colorear {
    color: var(--color-correcto-fuente);
    background: var(--color-correcto-fondo);
  }
  
  
  .test-boton-dropdown.incorrecto, .test-boton-opcion.incorrecto, .test-boton-opcion.incorrecto + .test-colorear {
    color: var(--color-incorrecto-fuente);
    background: var(--color-incorrecto-fondo);
  }
  
  
  .test-dropdown-mostrar-icono-resultado, .test-boton-mostrar-icono-resultado {
     text-align: center;
     /* display: inline-block; Esto causaba "saltos" en el momento de aparecer el icono de correcto/incorrecto */
     width: 1em;
     font-size: 1.5em;
  }
  
  .test-dropdown-mostrar-icono-resultado::after, .test-boton-mostrar-icono-resultado::after {
     content: "";
     transition: all 0.4s;
     opacity: 0;   
  }
  
  
  
  .test-boton-mostrar-icono-resultado.correcto::after, .test-dropdown-mostrar-icono-resultado.correcto::after {
    /* content: '✓'; esto, a veces, muesta ✠en lugar del tick, así que lo cambio por lo de abajo */
    content: "\2713"; /* No uses \2714 ("Heavy Check Mark") porque no se ve igual en todos los navegadores*/
    color: var(--color-correcto-fuente);
    /*background: var(--color-correcto-fondo); esto lo elminé porque queda mejor*/
    opacity: 0.8;
    margin-left: 5px;
  }
  
  .test-boton-mostrar-icono-resultado.incorrecto::after, .test-dropdown-mostrar-icono-resultado.incorrecto::after {
    content: "\2717"; /* Este símbolo unicode de se llama "Ballot". No uses \2718 ("Heavy Ballot") porque no se ve igual en todos los navegadores*/
    color: var(--color-incorrecto-fuente);
    /*background: var(--color-incorrecto-fondo); esto lo elminé porque queda mejor*/
    opacity: 0.8;
    margin-left: 5px;    
  }
  
  .test-ejemplo-resuelto {
    color: var(--color-correcto-fuente);
  }
  
  .test-ejemplo-resuelto .tej-icon::after {
    content: "\2713"; /* No uses \2714 ("Heavy Check Mark") porque no se ve igual en todos los navegadores*/ 
    font-size: 2em;
    vertical-align: sub;
  }


  /* ejercicios de textos (Curso Esidioma, Webinarios) */
  
  .pce-respuesta-texto {
    margin-top: 2em;
  }

  .pce-respuesta-texto textarea{
    resize: auto;
  }

  .pce-respuesta-proporcionada {
    max-height: 0;
    overflow: hidden;
    transition:max-height 0.5s;
}

  .pce-ver-proporcionada {
    padding: 10px;
    border-radius: 10px;
    color: white;
    background-color: #fc756f;
    text-align: center;
    width: 30%;
    margin: 0 auto;
    margin-top: 1em;
    cursor: pointer;  
    font-family: Oswald;
}

@media only screen and (max-width: 1200px){
  .pce-ver-proporcionada {
    width: 35%;
  }
}
@media only screen and (max-width: 768px){
  .pce-ver-proporcionada {
    width: 85%;
  }
}

.pce-visible{
  max-height: 1080px;
  transition:max-height 1s ease-in;
}

.envuelto-formulario-curso .pce-paper,
.pce-envuelto-ejercicio-texto .pce-paper {
  width: 85%;
  height: auto;
  position: relative;
  margin: 20px auto;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: white;
  box-shadow: 0px 0px 5px 0px #888;
}

.envuelto-formulario-curso .pce-paper{
  width: 100%;
}

.pce-envuelto-ejercicio-texto .pce-respuesta-proporcionada .pce-paper{
  background-color: #fffdf5;
}

/* styling red vertical line */
.envuelto-formulario-curso .pce-paper::before,
.pce-paper::before {
  content: '';
  width: 2px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 40px;
  background-color: rgba(255,0,0,0.6);
  z-index: 100;
}


/* styling blue horizontal lines */

.pce-envuelto-ejercicio-texto .pce-pattern {
  height: 100%;
  background-image: repeating-linear-gradient(white 0px, white 25px, teal 26px);
}

.envuelto-formulario-curso textarea{
  background-image: repeating-linear-gradient(white 0px, white 25px, teal 26px);
  padding-left: 47px;
  font-family: 'Caveat';
  font-size: 26px;
  letter-spacing: 1px;
  word-spacing: 5px;
  resize: none;
  overflow: visible;
  border: none;
  font-weight: normal;
  line-height: 26px;
  color: #3d6a99 !important;
}

.pce-envuelto-ejercicio-texto .pce-respuesta-proporcionada .pce-pattern{
  background-image: repeating-linear-gradient(#fffdf5 0px, #fffdf5 25px, teal 26px);
}

/* styling text content */
.pce-envuelto-ejercicio-texto #respuesta-proporcionada,
.pce-envuelto-ejercicio-texto #respuesta-texto
{
  padding-top: 6px;
  padding-left: 56px;
  padding-right: 16px;
  line-height: 25px;
  font-family: 'Comic-sans', cursive;
  font-size: 19px;
  letter-spacing: 1px;
  word-spacing: 5px;
  background: transparent;
  resize: none;
  overflow: visible;
  border: none;
  color:#3d6a99;
}

.pce-envuelto-ejercicio-texto #respuesta-proporcionada{
  color:#932a03;
}

.pce-envuelto-ejercicio-texto #respuesta-proporcionada:focus,
.pce-envuelto-ejercicio-texto #respuesta-texto:focus{
  outline:none
}

.col-xs-12.formulario-curso {
  padding-right: unset;
  padding-left: unset;
}

.envuelto-formulario-curso .wpcf7{
  padding: unset!important;
}

.envuelto-formulario-curso textarea:focus-visible,
.envuelto-formulario-curso .email-en-curso span:focus-visible{
  border: unset;
  outline: none;
}

.envuelto-formulario-curso .email-en-curso input{
  background-color: #f2f2f2;
  font-weight: normal;
}

.envuelto-formulario-curso .email-en-curso input:focus-visible{
  outline: none;
}

.envuelto-formulario-curso .wpcf7{
  background-color: inherit;
  box-shadow: unset;
}

.explicaciones-formulario-curso{
  background: white !important;
}


@media only screen and (max-width: 768px){
  .envuelto-formulario-curso .email-en-curso input{
    width: 100%;
  }
}

/* juego de palabras (vocabulario) */

.juego-de-palabras{
  background-color: #ffefe4;
  /* border-radius: 20px; */
  margin-top: 3em;
  padding-bottom: 2em;
  margin-bottom: 3em;
}

.jdp-panel-servicios {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1em;
  align-items: center;
}

.jdp-panel-servicios, .jdp-zona-juego, .jdp-reiniciar{
  margin-top: 1em;
}

.jdp-inerruptores .switch{
  margin: 0!important;
}

.jdp-contadores, .jdp-inerruptores {
  display: flex;
  gap: 1em;
}

.jdp-contadores{
  width: 20%;
  /* color: white; */
  justify-content: center;
  align-items: center;
  flex-direction: column;
  border-radius: 10px;
  background: #ffefe4;
  box-shadow: 3px 3px 3px #f7dcca, -3px -3px 3px #ffeadc;
  padding: 10px;
}

.jdp-interruptor-soloAudio, .jdp-interruptor-soloTexto, .jdp-interruptor-AudioYTexto {
  display: flex;
  align-items: center;
}

.jdp-inerruptores-titulo {
  line-height: 0.8em;
  margin-right: 4px;
  text-align: right;
}

.jdp-envuelto-zona-juego {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.jdp-reiniciar {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  /* width: 30%; */
  border-radius: 5px;
  background-color: #fc756f;
  color: white;
  text-align: center;
  font-family: 'Oswald';
  text-transform: uppercase;
  font-size: larger !important;
}

.as-titulo, .tp-titulo {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.5em;
  color: #626262;
}

.as-aciertos{
  font-size: 3em!important;
  font-weight: bold;
  line-height: 1em;
}

/* .as-aciertos, .tp-cantidad {
  color: white;
  height: 26px;
  width: 56px;
  margin-right: 4px;
  text-align: center;
  font-weight: bold;
} */

.as-titulo label, .tp-titulo label {
  font-weight: normal;
  line-height: 1em;
  margin-bottom: 0;
  font-size: 1.5em;
  text-align: center;
}

.jdp-zona-juego {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95% !important;
  /* padding: 2em; */
  /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px; */
}

.jdp-audio-boton {
  padding: 10px;
}

.jdp-palabra {
  width: 50%;
  display: flex;
  justify-content: center;
}

.jdp-palabra-jugada {
  min-width: 60%;
  font-size: 2em !important;
  font-weight: bold;
  /* border: solid 1px grey; */
  padding: 7px;
  margin: 10px;
  text-align: center;
  border-radius: 5px;
  /* background: white; */
  color: #fc756f;
}

.jdp-respuestas {
  width: 40%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.jdp-respuesta {
  font-size: 1.5em;
  background-color: #edcbb5;
  width: 100%;
  text-align: center;
  margin: 5px;
  border-radius: 7px;
  padding: 7px 0;

}

.jdp-respuesta.respuesta-correcta {
  background-color: #baebba;
}

.jdp-respuesta.respuesta-incorrecta {
  background-color: #f78c91;
}

.jdp-audio-boton i.far.fa-play-circle {
  font-size: 7em !important;
  color: #fc756f;
  transition: 0.5s;
}

.jdp-audio-boton i.far.fa-play-circle:hover {
  transform: scale(1.1);
}

.jdp-audio-boton,
.jdp-respuesta,
.jdp-reiniciar
{
  cursor:pointer;
  transition: 0.3s;
}

.jdp-respuesta:hover,
.jdp-reiniciar:hover{
  transform: scale(1.1);
}

.jdp-aviso-fin {
  position: absolute;
  opacity: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #fc756f;
  top: 0;
  left: 0;
  font-size: 5em;
  color: white;
  transition: 0.5s;
}

.blureado{
  filter: blur(5px);
}

@media only screen and (max-width: 768px){
  .jdp-panel-servicios{
    flex-direction: row;
  }

  .jdp-zona-juego{
    padding: 0!important;
  }
 .jdp-contadores{
  flex-direction: column;
  width: 40%;
  }
 .jdp-inerruptores{
  flex-direction: column;
  align-items: flex-end;
  }
 .jdp-audio-boton i.far.fa-play-circle {
  font-size: 5.5em !important;
  padding: 0;
  }
.jdp-inerruptores-titulo {
  font-size: small!important;
  }
.as-titulo label, .tp-titulo label {
  font-size: small!important;
  }
.jdp-palabra-jugada {
  font-size: 2em !important;
  }
  .jdp-respuestas{
    width: 70%;
  }
  .jdp-respuesta:hover,
  .jdp-reiniciar:hover{
    transform: unset;
  }
}


/* --------------------------------------------------- */
/* --------------------------------------------------- */
/* --------------------------------------------------- */
/* //Juegos de arrastrar */
/* --------------------------------------------------- */
/* --------------------------------------------------- */
/* --------------------------------------------------- */


/* CSS EN GENERAL */
.juego {
  margin-bottom: 3rem;
}

.super-papa{
  background: #fafafa;
  border-radius: 10px;
  box-shadow: 3px 2px 5px rgba(0, 0, 0, .1);
  padding-bottom: 4em;
}

.elemento-drag{
  cursor: move;
}

@media only screen and (min-width: 768px){
  .super-papa .personal-curso-ejercicio h2,
  .notificaciones-durante-eljuego p
  {
    padding-left: 65px;
  }
  .super-papa .personal-curso-ejercicio hr{
    margin-left: 65px;
  }
}

.area-botones {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1em;
}

.area-botones div
{
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-01-fondo-superclaro);
  border-radius: 10px;
  width: fit-content;
  min-width: 8em;
  color: whitesmoke;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  padding: 3px;
}


.resultados-juego {
  display: flex;
  align-items: center;
  margin: 0 10%;
  font-size: 1.3rem;
}

.result {
  display: flex;
  justify-content: center;
  min-width: 40px;
  background-color: rgb(246, 246, 246);
  padding: 3px;
  border-radius: 5px;
  border: solid 2px rgb(0, 0, 0);
  color: green;
  margin-left: 10px;
  min-height: 20px;
}

/* JUEGO UNIR COLUMNAS */
.juego-unir-columnas{
  user-select: none;
}

.juego-unir-columnas .contenedor-huecos-drop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 1em 1em 1em 5em;
}

.juego-unir-columnas .elemento-drag {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 5px;
  font-weight: bold;
  margin: 0;
  touch-action: none;
  /* cursor: pointer; */
  user-select: none;
  padding: 0 5px;
}

.juego-unir-columnas .hueco-drag .elemento-drag{
  width: 100%;
}

.juego-unir-columnas .hueco-drag {
  display: flex;
  border: solid 1px #000000;
  margin: 3px;
  justify-content: center;
  min-height: 1.8em;
  max-height: 1.8em;
  min-width: 9em;
  background-color: #e7e4e4;
  border-radius: 5px;
}

.juego-unir-columnas .hueco-envuelto:has(.elemento-drag.drag-bloqueado)::after{
  content: "\2713";
  font-size: 1.5em;
  vertical-align: sub;
  color: green;
}

.juego-unir-columnas .hueco-envuelto {
  display: flex;
  justify-content: space-between;
  margin: 3px;
  width: 45%;
  align-items: flex-end;
}

.juego-unir-columnas .line {
  flex-grow: 1;
  border-bottom: 1px dotted #d5d2d2;
  margin: 0px 15px;
}

@media only screen and (max-width: 768px) {
  .juego-unir-columnas .contenedor-huecos-drop{
    margin: 1em 1em 1em 0em !important;
  }
  .juego-unir-columnas .hueco-envuelto {
    width: 100%;
  }
}


/* JUEGO COMPLETA FRASES */

.juego-completa-frases .contenedor-elementos-drag {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 5em;
  flex-wrap: wrap;
}

.juego-completa-frases .contenedor-huecos-drop {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 1em 1em 1em 5em;
}

.juego-completa-frases .elemento-drag {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  font-weight: bold;
  margin: 0;
  touch-action: none;
  /* cursor: pointer; */
  user-select: none;
  padding: 0 5px;
  /* background-color: #e4f1ff; */
}



.juego-completa-frases .hueco-frase {
  display: flex;
  align-items: flex-end;
  margin: 0.4em;
  flex-wrap: wrap;
  user-select: none;
}

.juego-completa-frases .hueco-frase:has(.elemento-drag.drag-bloqueado)::after{
  content: "\2713";
  font-size: 1.5em;
  vertical-align: sub;
  color: green;
}

.juego-completa-frases .hueco-drop, 
.juego-completa-frases .hueco-drag 
{
  display: flex;
  margin: 3px;
  justify-content: center;
  min-height: 1.8em;
  max-height: 1.8em;
  min-width: 9em;
  background-color: #e7e4e4;
  border-radius: 5px;
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.25);
}
.juego-completa-frases .hueco-drop {
  border: dashed 1px #000000;
}



.juego-completa-frases .hueco-drag .elemento-drag,
.juego-completa-frases .hueco-drop .elemento-drag {
  width: 100%;
}

.juego-completa-frases .hueco-drag .elemento-drag {
  background-color: #e4f1ff !important;
}

@media only screen and (max-width: 768px) {
  .juego-completa-frases .contenedor-elementos-drag{
    margin-left: 0;
  }
  .juego-completa-frases .contenedor-huecos-drop{
    margin: 1em 1em 1em 0em !important;
  }
}

/* JUEGO Ordenafraces */
.juego-ordena-frases .drag-n-drop-elements {
  display: flex;
  flex-direction: column;
}

.juego-ordena-frases .contenedor-elementos-drag {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: center;
  margin: 1em 1em 1em 5em;
}

.juego-ordena-frases .elemento-drag {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: rgb(231,228,228);
  padding: 5px;
  border-radius: 5px;
  color: #000;
  text-align: left;
  box-sizing: border-box;
  margin: 0;
  touch-action: none;
  user-select: none;
  /* cursor: pointer; */
  font-size: 14px;
  transition: transform 0.5s ease-in-out;
}

.juego-ordena-frases .elemento-drag::after,
/* .juego-completa-frases .elemento-drag::after, */
.juego-unir-columnas .elemento-drag::after
{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: "\f0dc";
}

.juego-ordena-frases .elemento-drag i,
.juego-ordena-frases .elemento-drag div
{
  touch-action: none;
  user-select: none;
}

.juego-ordena-frases .hueco-envuelto{
  width: 100%;
  display: inline-flex;
  align-items: center;
}

.juego-ordena-frases .hueco-envuelto:has(.elemento-drag.drag-bloqueado)::after {
  content: "\2713";
  font-size: 2em;
  vertical-align: sub;
  color: green;
}

.juego-ordena-frases .hueco-drag {
  margin: 14px;
  min-height: 30px;
  max-height: 30px;
  width: 90%;
  box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.25);
  border-radius: 5px;
}

.juego-ordena-frases .ndj-contenido {
  display: none;
  font-size: larger;
  text-align: end;
  background-color: beige;
  width: fit-content;
  padding: 0.5em 1em;
  border-radius: 8px;
}

@media only screen and (max-width: 768px) {
  .juego-ordena-frases .contenedor-elementos-drag{
    margin: 1em 1em 1em 0em !important;
  }
}

/* CSS AUXILIARES */
.arrastrando {
  opacity: 0.4;
  /* transform: scale(0.9); */
  transition: opacity 0.5s ease transform 0.5s ease;
  position: absolute;
  pointer-events: none;
  color: black;
  z-index: 120;
  cursor: pointer;
}

.marcar-target,
.hueco-drop:has(.elemento-drag.marcar-target) {
  border: dotted 1px red !important;
  background-color: #cdc5c5 !important;
  transition: background-color 0.5s ease;
}

.elemento-drag.marcar-target {
  border: inherit;
  background-color: inherit;
}

.correcta {
  background-color: #d9f4d8 !important;
}

.incorrecta {
  background-color: #ffdedd !important;
}

.elemento-drag {
  animation: show 400ms 100ms cubic-bezier(0.38, 0.97, 0.56, 0.76) forwards;
}

@keyframes show {
  10% {
    transform: scale(0.93);
  }
  30% {
    transform: scale(0.94);
  }
  60% {
    transform: scale(0.95);
  }
  80% {
    transform: scale(0.96);
  }
  100% {
    transform: none;
  }
}