/* ---- El original es hpm ---------- */


/* ------------------------------- */
/* ----------- COLORES ----------- */
/* ------------------------------- */

:root {
  /* --- COLOR RESPUESTAS EJERCICIOS --- */
      --color-correcto-fuente: darkgreen;
      --color-correcto-fondo: #ccffcc;
      --color-incorrecto-fuente: darkred;
      --color-incorrecto-fondo: #ffc4c4;  
  }
      
     
  
  /* ----------------------------------------
  /* ----------------------------------------
  /* EJERCICIOS INTERACTIVOS */
  /* ----------------------------------------
  /* ----------------------------------------
  
  /* 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 (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-top: 2em;
          margin-bottom: 1em;
          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 */
    
    .test-marcador-EN, .test-marcador-ES { 
      background: white;
      border: solid 1px lightgray;
      border-radius: 8px;
      padding: 1em;
      width: -moz-fit-content;
      width: -webkit-fit-content;
      width: fit-content;
    }
    
    .test-marcador-EN span, .test-marcador-ES span {  
      display: inline-block;  
      /* height: 2em; */  
      /* width: 2em; */ 
      /* padding: 0.5em; */ 
      margin: 10px; 
      /* 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: 15ch; /* Esto es el ancho que tendrá el "hueco vacío" en caso de que el elemento no tenga un estilo en el HTML como por ejemplo style="width: 25ch" */  
      text-align: center; 
      font-size: 1.25em;  
      color: var(--color-correcto-fuente);  
      pointer-events: none;
      background: transparent; 
      height: 2em;
      overflow: hidden;      
    } 
    
    .test-dropdown-hueco-vacio.tdhv-extracorto {
      width: 3ch;   
    }
    
    .test-dropdown-hueco-vacio.tdhv-largo {  
      width: 15ch;   
    }  
    
    
    .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; 
    }
    
    .test-boton-hueco-vacio.tbhv-corto {  
      width: 5ch;
    }
    
    
    
    .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;
      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.3);
      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;   
    }
    
    
    .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);
    }
    
    .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" al mostar 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:"✔";
      color: var(--color-correcto-fuente);
      /*background: var(--color-correcto-fondo); esto lo elminé porque queda mejor*/
      opacity: 0.8;
    }
    
    .test-boton-mostrar-icono-resultado.incorrecto::after, .test-dropdown-mostrar-icono-resultado.incorrecto::after {
      content:"✘";
      color: var(--color-incorrecto-fuente);
      /*background: var(--color-incorrecto-fondo); esto lo elminé porque queda mejor*/
      opacity: 0.8;
    }
    
    .test-ejemplo-resuelto {
      color: var(--color-correcto-fuente);
    }
    
    .test-ejemplo-resuelto .tej-icon::after {
      content:"✔";  
      font-size: 2em;
      vertical-align: sub;
    }