/* ------------------------------------------ */
/* ------------------------------------------ */
/* -------------- ÍNDICE  -------------- */
/* ------------------------------------------ */
/* ------------------------------------------ */
/* 1. COLORES  */
/* 2. RESETS  */

/* Quitar paddings para crear más hueco para el contenido en pantallas estrechas (móviles) EN LOS CURSOS */
@media (max-width: 768px) {
  .personal-curso.container,
  .personal-curso.container-fluid,
  .personal-curso .container,
  .personal-curso .container-fluid {
    /* padding-right: 0 !important;
    padding-left: 0 !important; */
  }
}


/* ---------------------------------- LIROS ----------------------- */
/* 3. LISTADO DE CURSOS (LISTADO DE LIBROS Y CURSOS)  */
/* 4. LISTADO DE LECCIONES (LIBROS, DICCIONARIO Y CURSO DE ESPAÑOL)  -------------- */
/* 4.1 LISTADO DE HISTORIAS/LECCIONES */
/* 4.2 ESTILO ESPECÍFICO PARA EL LISTADO DE LECCIONES DEL DICCIONARIO */
/* 4.3 ESTILO ESPECÍFICO PARA EL LISTADO DE LECCIONES DEL CURSO (español id = learndash_post_8208 // ruso id = learndash_post_xxxx // aleman id = learndash_post_xxxx */
/* 5. CONTENIDO DE UNA LECCIÓN (tantos libros como curso) - ESTO ES UN POCO CAJÓN DESASTRE */
/* ---------------------------------- CURSO DE ESPAÑOL  ----------------------- */
/* 6. ÍNDICE DE LECCIONES DEL CURSO DE ESPAÑOL */

/* ------------------------------------------ */
/* ------------------------------------------ */
/* -------------- 1. COLORES  -------------- */
/* ------------------------------------------ */
/* ------------------------------------------ */




/* --> COLORES Específico nivel básico */
.marco-nivel-basico div#learndash_lessons [id^=post] h4 img,
.marco-nivel-basico div#learndash_lessons [class^=post] h4 img,
.marco-nivel-basico .course-barra-progreso .cbp-02 .ld-progress-bar-percentage.ld-secondary-background,
div#learndash_lessons [id^=post] .learndash-wrapper-leccion.lwl-nivel-basico h4:before,
div#learndash_lessons [class^=post] .learndash-wrapper-leccion.lwl-nivel-basico h4:before {
  background-color: var(--color-learndash-nivel-basico);
}

.marco-nivel-basico .course-barra-progreso .cbp-01 p,
span.learndash-wrapper-leccion.lwl-nivel-basico .leardash-titulo-leccion {
  color: var(--color-learndash-nivel-basico);
}

/* --> COLORES Específico nivel principiante */

.marco-nivel-principiante div#learndash_lessons [id^=post] h4 img,
.marco-nivel-principiante div#learndash_lessons [class^=post] h4 img,
.marco-nivel-principiante .course-barra-progreso .cbp-02 .ld-progress-bar-percentage.ld-secondary-background,
div#learndash_lessons [id^=post] .learndash-wrapper-leccion.lwl-nivel-principiante h4:before,
div#learndash_lessons [class^=post] .learndash-wrapper-leccion.lwl-nivel-principiante h4:before {
  background-color: var(--color-learndash-nivel-principiante);
}

span.learndash-wrapper-leccion.lwl-nivel-principiante .leardash-titulo-leccion,
.marco-nivel-principiante .course-barra-progreso .cbp-01 p {
  color: var(--color-learndash-nivel-principiante);
}

span.learndash-wrapper-leccion.lwl-nivel-a1-a2 .leardash-titulo-leccion,
.marco-nivel-a1-a2 .course-barra-progreso .cbp-01 p {
  color: var(--color-nivel-a1-a2);
}


/* --> COLORES Específico nivel medio */

.marco-nivel-medio div#learndash_lessons [id^=post] h4 img,
.marco-nivel-medio div#learndash_lessons [class^=post] h4 img,
.marco-nivel-medio .course-barra-progreso .cbp-02 .ld-progress-bar-percentage.ld-secondary-background,
div#learndash_lessons [id^=post] .learndash-wrapper-leccion.lwl-nivel-medio h4:before,
div#learndash_lessons [class^=post] .learndash-wrapper-leccion.lwl-nivel-medio h4:before {
  background-color: var(--color-learndash-nivel-medio);
}

span.learndash-wrapper-leccion.lwl-nivel-medio .leardash-titulo-leccion,
.marco-nivel-medio .course-barra-progreso .cbp-01 p {
  color: var(--color-learndash-nivel-medio);
}

/* --> COLORES Específico nivel avanzado */
.marco-nivel-avanzado div#learndash_lessons [id^=post] h4 img,
.marco-nivel-avanzado div#learndash_lessons [class^=post] h4 img,
.marco-nivel-avanzado .course-barra-progreso .cbp-02 .ld-progress-bar-percentage.ld-secondary-background,
div#learndash_lessons [id^=post] .learndash-wrapper-leccion.lwl-nivel-avanzado h4:before,
div#learndash_lessons [class^=post] .learndash-wrapper-leccion.lwl-nivel-avanzado h4:before {
  background-color: var(--color-learndash-nivel-avanzado);
}

span.learndash-wrapper-leccion.lwl-nivel-avanzado .leardash-titulo-leccion,
.marco-nivel-avanzado .course-barra-progreso .cbp-01 p {
  color: var(--color-learndash-nivel-avanzado);
}



/* ------------------------------------------ */
/* ------------------------------------------ */
/* -------------- 2. RESETS  -------------- */
/* ------------------------------------------ */
/* ------------------------------------------ */

.personal-curso p,
.rkpersonalvideoshortdescription p {
  line-height: 1.6em;
}

.personal-curso h1,
.personal-curso h2,
.personal-curso h3,
.personal-curso h4,
.personal-curso h5,
.personal-curso h6,
.rkpersonalvideoshortdescription h1 {
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
}

.personal-curso h2,
.rkpersonalvideoshortdescription h2 {
  font-size: 1.8em;
}

.personal-curso,
.personal-curso input,
.personal-curso textarea {
  color: black;
}


.personal-curso a.btn.btn-default,
.rkpersonalvideorowdescargas a.btn.btn-default {
  background-color: var(--color-01-fondo-claro);
  color: var(--color-01-letra-fondo-claro);
  border: solid 1px var(--color-01-fondo-oscuro) !important;
  transition: opacity 0.2s;
}

.personal-curso a.btn.btn-default:hover,
.rkpersonalvideorowdescargas a.btn.btn-default:hover {
  opacity: 0.8;
}


/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* -------------- 3. LISTADO DE CURSOS (EN NUESTRO CASO, LISTADO DE LIBROS)  -------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

/* Invisibilizar el desplegable con barra de progreso para cada curso en el índice de cursos */
.ld-item-list.ld-course-list .ld-item-list-item-expanded.ld-expanded,
.ld-item-list-item-expanded.ld-expanded {
  display: none;
}

/* Hacer más estrecho el desplegable con barra de progreso para cada curso en el índice de cursos */
/* .learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-expanded .ld-progress {
  padding: 0 5px !important;
} */

/* Quitar un triángulo decorativo en el desplegable con barra de progreso para cada curso en el índice de cursos */
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-expanded:before {
  content: none !important;
}

/* Quitar el botón de "abrir/cerrar" del desplegable con barra de progreso para cada curso en el índice de cursos */
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-details .ld-expand-button {
  display: none !important;
}


/* Elemento con el título de cada curso */
.learndash-wrapper .ld-item-list .ld-item-list-item:not(.ep-contenido  .ld-item-list-item, .contenido-nivel .ld-item-list-item) {
  background-color: #f4f4f4 !important;
  border-radius: 8px !important;
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  margin-bottom: 2em !important;
  transition: 0.3s;
}

/* Para el efecto del hover */
.learndash-wrapper .ld-item-list .ld-item-list-item:hover {
  /* opacity: 0.6;
  color: white !important; */
  background-color: #ededed !important;
}

.learndash-wrapper .ld-item-list .ld-item-list-item a.ld-item-name:hover {
  color: inherit !important;
}

.ld-item-name {
  align-items: center !important;
}

.ld-course-title {
  font-size: 2.5rem;
  padding-right: 0.5em;
}

/* Imagen del curso */
.learndash-wrapper img.imagen-listado-indice-curso {
  width: 7em;
  margin-right: 8px;
}

/* colores del fondo según nivel */
.ld-course-list .ld-item-list-item-preview:has(.imagen-listado-indice-curso.A1) {
  /* background-color: #66bc7221; */
  border: solid 1.5px #66bc72;
}

.ld-course-list .ld-item-list-item-preview:has(.imagen-listado-indice-curso.A1-A2) {
  /* background-color: #238e4521; */
  border: solid 1.5px #238e45;
}

.ld-course-list .ld-item-list-item-preview:has(.imagen-listado-indice-curso.B1-B2) {
  /* background-color: #f78b3021; */
  border: solid 1.5px #f78b30;
}

.ld-course-list .ld-item-list-item-preview:has(.imagen-listado-indice-curso.C1-C2) {
  /* background-color: #b5292d21; */
  border: solid 1.5px #b5292d;
}

/* quitar los indicadores del progreso en el listado de cursos */
.ld-item-list-item-course .ld-item-list-item-preview .ld-status-icon {
  display: none !important;
}

/* colores de los marcos en el listado de cursos */
a.ld-item-name:has(.imagen-listado-indice-curso.A1)+.ld-item-details .ld-status {
  border-radius: 0;
  background-color: #66bc72 !important;
}

a.ld-item-name:has(.imagen-listado-indice-curso.A1-A2)+.ld-item-details .ld-status {
  border-radius: 0;
  background-color: #238e45 !important;
}

a.ld-item-name:has(.imagen-listado-indice-curso.B1-B2)+.ld-item-details .ld-status {
  border-radius: 0;
  background-color: #f78b30 !important;
}

a.ld-item-name:has(.imagen-listado-indice-curso.C1-C2)+.ld-item-details .ld-status {
  border-radius: 0;
  background-color: #b5292d !important;
}

@media (max-width: 640px) {

  .ld-course-list .ld-item-list-item-preview:has(.imagen-listado-indice-curso.C1-C2),
  .ld-course-list .ld-item-list-item-preview:has(.imagen-listado-indice-curso.B1-B2),
  .ld-course-list .ld-item-list-item-preview:has(.imagen-listado-indice-curso.A1-A2),
  .ld-course-list .ld-item-list-item-preview:has(.imagen-listado-indice-curso.A1) {
    align-items: inherit !important;
  }
}




/* Invisibilizar partes de la "ficha" de alumno (con fotografía, certificados obtenidos, puntos,...) */
#ld-profile .ld-profile-avatar,
#ld-profile .ld-profile-stat.ld-profile-stat-certificates,
#ld-profile .ld-profile-stat-points,
#ld-profile .ld-profile-edit-link {
  display: none;
}

/* quitar la alerta "no se encontraron cursos" si un usuario no tiene cursos */
.ld-alert.ld-alert-warning {
  display: none !important;
}
.learndash-wrapper .ld-item-list {
  margin: 0 !important;
}


/* ---------------------------------------------------------------------------------------- */
/* -------------- FIN DE 3. LISTADO DE CURSOS (EN NUESTRO CASO, LISTADO DE LIBROS)  -------------- */
/* ---------------------------------------------------------------------------------------- */




/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* -------------- 4. LISTADO DE LECCIONES (LIBROS, DICCIONARIO Y CURSO DE ESPAÑOL)  -------------- */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */

/* ------------------------------------------------------------------------------ */
/* 4.1 LISTADO DE HISTORIAS/LECCIONES */
/* ------------------------------------------------------------------------------ */



/* Hacer la barra de progreso de cada curso (que tiene un color diferentes según el nivel, tal y como hemos hecho en la sección "COLORES") tenga más grosor */
.course-barra-progreso .ld-progress-bar,
.course-barra-progreso .ld-progress-bar-percentage {
  height: 1.5rem !important;
}

/* Borrar la barra de progreso que viene por defecto (porque nosotros tenemos la nuestra que está más chula) */
.ld-course-status.ld-course-status-enrolled {
  display: none !important;
}

/* ------ Cuadrado/Encabezado encima del índice de historias/lecciones con la imagen de la portada del libro ----- */
.index-course-part-marco {
  box-shadow: 2px 5px 15px 1px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 1em 1.5em 2em 1.5em;
}

div[class*="index-course-description-nivel-"] * {
  font-family: 'Oswald', sans-serif;
}

@media (max-width: 768px) {

  /* En móvil esto por defecto se ve pequeño */
  div[class*="index-course-description-nivel-"] h2 {
    font-size: 1.5em !important;
  }

  div[class*="index-course-description-nivel-"] h2 small {
    font-size: 75% !important;
  }
}

.index-course-description-nivel-basico h2 {
  color: var(--color-learndash-nivel-basico);
}

.index-course-description-nivel-principiante h2 {
  color: var(--color-learndash-nivel-principiante);
}

.index-course-description-nivel-medio h2 {
  color: var(--color-learndash-nivel-medio);
}

.index-course-description-nivel-avanzado h2 {
  color: var(--color-learndash-nivel-avanzado);
}



/* Rectángulo que envuelve cada lección/historia en el listado de leccion y donde hemos insertado una imagen (quitamos el padding y el border) */
.learndash-wrapper .ld-item-list .ld-item-list-item .ld-item-list-item-preview {
  padding: 0 !important;
}

/* envuelto en el listado de cursos */
.learndash-wrapper .ld-course-list .ld-item-list-item {
  border: none !important;
  background: white !important;
  box-shadow: rgba(0, 0, 0, 0.15) 5px 5px 8px 1px;
}

/* Puntito que se rellena cuando la lección está completa */
/* Si no ponemos ".ld-lesson-list", el estilo también se aplicaría a listado de cursos (y solo queremos que se aplique a listado de lecciones) */
/* en not quitamos el margen para los cursos y ejercicios */
.learndash-wrapper .ld-lesson-list a.ld-item-name .ld-status-icon:not(.ep-contenido .ld-status-icon, .contenido-nivel .ld-status-icon) {
  margin-top: 2em !important;
}

/* El título de cada lección/historia en el listado de historias */
/* Si no ponemos ".ld-lesson-list", el estilo también se aplicaría a listado de cursos (y solo queremos que se aplique a listado de lecciones) */
.learndash-wrapper .ld-lesson-list .ld-item-title:not(.ep-contenido .ld-item-title) {
  margin-top: 1em !important;
}



.titulo-acceso-alumnos {
  font-size: 2em;
  font-weight: 800;
  margin: 5px 0;
}

/* titulos del formulario login/logout en student acess */
.mi-esqueleto.woocommerce .u-columns h2 {
  font-size: large;
  color: red;
}

/* --> Invisibilizar Elementos varios (sobre todos títulos) */

div#learndash_lessons .list-count,
#learndash_course_content_title,
#learndash_course_content #lesson_heading,
span#learndash_course_status {
  display: none;
}

/* Invisibilizar datos estadísticos de la barra de progreso de cada libro (porque le damos forma a mano) */
.learndash-wrapper .ld-progress-heading {
  display: none !important;
}

/* Insivibilizar el texto "Course content" */
.learndash-wrapper .ld-section-heading {
  display: none !important;
}

/* Dar formato a las fuentes y párrafos */
div#learndash_lessons [id^=post] a,
div#learndash_lessons [class^=post] a {
  line-height: 2em;
  font-size: 0.85em;
}

.libros-esidioma .titulo-historia {
  font-weight: 600;
}

.libros-esidioma .pce-cuerpo-01,
.curso-esidioma .pce-cuerpo-01
{
  margin-top: 5em;
}

.libros-esidioma .hueco-juego-vocabulario {
  margin-top: 0em !important;
  /* Reseteamos el estilo de SK */
}

span.learndash-descripcion-leccion {
  color: #5a5a5a;
}

span.leardash-titulo-leccion {
  font-size: 1.5em !important;
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
}

span.leardash-titulo-leccion-traduccion {
  color: #323232;
  /* Hay que poner un color (oscuro para que sea legible) para evitar que se ponga de color azul con el mouseover (porque este elemento forma parte de un link) */
  /* font-family: 'Oswald',sans-serif; 28.08.2023 Eliminé el tipo de letra "oswald" para mejorar la legibilidad
    font-weight: normal; */
}

/* --> Barra de progreso */
.course-barra-progreso {
  margin-bottom: 1em;
}

.cbp-generador-numero {
  font-size: inherit !important;
}


.course-barra-progreso .cbp-01 p {
  font-size: 2.5em !important;
  font-family: 'Oswald', sans-serif;
  font-weight: 900;
  text-align: center;
}

.course-barra-progreso dd.course_progress {
  width: 100%;
}

/* fecha expiracion del curso (para los cursos de tiempo limitado) */
.fecha-exp-curso,
.aviso-ampliacion-acceso-curso
{
  display: flex;
  justify-content: flex-end;
}

.aviso-ampliacion-acceso-curso{
  margin-top: 0.2rem;
}

.fecha-exp-curso span,
.aviso-ampliacion-acceso-curso span
{
  margin-right: 5px;
}

.aviso-ampliacion-acceso-curso a {
  background-color: #4590d1;
  padding: 4px;
  border-radius: 4px;
  margin-top: 0rem;
  color: white;
}
.aviso-ampliacion-acceso-curso a:hover,
.aviso-ampliacion-acceso-curso a:visited
{
  color: #dfdede;
}

/* --> Tick de "leccion (historia) completada" */

.learndash a.completed[href*="abook_a1"] {
  /* El estilo para "básico" y "principiante" pueden pisarse entre sí poner tener URLs similares. Ten cuidado y haz tests */
  background: url(/wp-content/uploads/completed-basico.png) no-repeat;
  background-position: 97.9% center;
}

.learndash a.completed[href*="abook_a1_a2"] {
  /* El estilo para "básico" y "principiante" pueden pisarse entre sí poner tener URLs similares. Ten cuidado y haz tests */
  background: url(/wp-content/uploads/completed-basico.png) no-repeat;
  background-position: 97.9% center;
}

.learndash a.completed[href*="abook_b1_b2"] {
  background: url(/wp-content/uploads/completed-medio.png) no-repeat;
  background-position: 97.9% center;
}

.learndash a.completed[href*="abook_c1_c2"] {
  background: url(/wp-content/uploads/completed-avanzado.png) no-repeat;
  background-position: 97.9% center;
}

/* --> Dar formato a la tabla que contiene el listado de lecciones */
div#learndash_lessons,
div#learndash_lessons * {
  border: none !important;
}

/* --> Generar imágenes / thumbnails de cada lección */

div#learndash_lessons [id^=post] h4 img,
div#learndash_lessons [class^=post] h4 img {
  float: left;
  margin-right: 1em;
  border-radius: 10px;
  box-shadow: 2px -2px 5px 0px #666;
  margin-top: 1em;
  height: 5em;
}

.etiqueta-audio-titulo-historia {
  font-family: 'Oswald', sans-serif;
  background: var(--color-01-fondo-claro);
  display: inline-block;
  padding: 8px;
  font-size: 1.5em;
  color: white;
  border-radius: 5px;
}

/* ------------------------------------------------------------------------------ */
/* 4.2 ESTILO ESPECÍFICO PARA EL LISTADO DE LECCIONES DEL DICCIONARIO */
/* ------------------------------------------------------------------------------ */
/*
Estos son los IDs por idioma
- Inglés: 4556
- Alemán: 5781
- Ruso: 6319
- Inglés en la versión en español: 6834
- Alemán en la versión en español: 6832
- Ruso en la versión en español: 6830

*/


div#ld-item-list-4556,
div#ld-item-list-5781,
div#ld-item-list-6319,
div#ld-item-list-6834,
div#ld-item-list-6832,
div#ld-item-list-6830 {
  display: flex;
  flex-wrap: wrap;
}

div#ld-item-list-4556 .ld-item-list-section-heading,
div#ld-item-list-5781 .ld-item-list-section-heading,
div#ld-item-list-6319 .ld-item-list-section-heading,
div#ld-item-list-6834 .ld-item-list-section-heading,
div#ld-item-list-6832 .ld-item-list-section-heading,
div#ld-item-list-6830 .ld-item-list-section-heading {
  width: 100%;
  background: var(--color-01-fondo-clarosuave);
  color: white;
  padding-left: 1em;
  border-radius: 5px;
}

div#ld-item-list-4556 .ld-item-list-item.ld-item-lesson-item,
div#ld-item-list-5781 .ld-item-list-item.ld-item-lesson-item,
div#ld-item-list-6319 .ld-item-list-item.ld-item-lesson-item,
div#ld-item-list-6834 .ld-item-list-item.ld-item-lesson-item,
div#ld-item-list-6832 .ld-item-list-item.ld-item-lesson-item,
div#ld-item-list-6830 .ld-item-list-item.ld-item-lesson-item {
  margin-right: 2em;
  width: 40ch;
}

/* 4.3 ESTILO ESPECÍFICO PARA EL LISTADO DE LECCIONES DEL CURSO */

.portada-curso-leccion {
  background: #6dc07f;
  padding: 1em;
  position: relative;
  padding: 0;
  transform: skew(5deg, 0deg);
  width: fit-content;
}

.portada-curso-leccion p {
  margin-top: 2em;
  font-size: 3em !important;
  color: #ffffff !important;
  color: #6dc07f;
  text-align: left;
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
  margin-bottom: 0;
  margin-left: 0;
  border-bottom: none;
  padding: 0em 1em 0em 0em;
}

@media (max-width: 768px) {
  .portada-curso-leccion p {
    font-size: 2em !important;
  }
}

.pcl-numero-de-leccion {
  font-family: 'Oswald';
  font-size: inherit !important;
  padding: 10px;
  margin-right: 1em;
  color: #6dc07f;
  background: white;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  display: inline-block;
  /* Esto sirve para que la parte de arriba del fondo del número de lección se ajuste perfectamente al fonde del título de la lección  */
}

.pcl-segundo-titulo {
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
  color: #8f8f8f;
  font-size: 3em !important;
  display: inline-block;
  padding: 0.75em 0em 0.5em 0.5em;
  margin-top: -0.5em;
}

@media (max-width: 768px) {
  .pcl-segundo-titulo {
    font-size: 2em !important;
  }
}

/* Cada uno de los títulos (vocabulario, diálogos, textos,...) de sección de la portada del curso en inglés (post 8208) */
#learndash_post_8208 .ld-lesson-section-heading {
  color: #8f8f8f;
  padding: 0.25em;
  border-bottom: solid #b9f3b4;
}

/* ------------------------------------------------------------------------------ */
/* -------  ESTILOS ESPECIFICOS PARA EL CURSO DE LOS EJERCICIOS  -------------- */
/* ------------------------------------------------------------------------------ */

/* listado de lecciones */
.contenido-nivel {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
}

 .contenido-nivel .ld-item-list-item {
   width: 18em;
   margin: 0 !IMPORTANT;
   display: flex;
   align-items: center;
   animation: fadeInR 1s ease-out forwards;
   transition: background-color 0.3s ease;
 }

 @media (max-width: 600px) {
  .contenido-nivel .ld-item-list-item {
    width:100%;
  }
}

.contenido-nivel .ld-item-list-item.ld-item-lesson-item.learndash-incomplete:hover,
.contenido-nivel .ld-item-list-item.ld-item-lesson-item.learndash-complete:hover {
  background-color: unset !important;
}

.contenido-nivel .ld-item-list-item.ld-item-lesson-item.learndash-incomplete {
  background-color: #00ff502e;
}

/* leccion incompleta  */
/* A1-A2  */
.nivel-A1-A2 .contenido-nivel .ld-item-list-item.ld-item-lesson-item.learndash-incomplete {
  background-color: color-mix(in srgb, var(--color-learndash-nivel-principiante) 12%, transparent);
}
/* B1-B2  */
.nivel-B1-B2 .contenido-nivel .ld-item-list-item.ld-item-lesson-item.learndash-incomplete {
  background-color: color-mix(in srgb, var(--color-learndash-nivel-medio) 12%, transparent);
}
/* C1-C2  */
.nivel-C1-C2 .contenido-nivel .ld-item-list-item.ld-item-lesson-item.learndash-incomplete {
  background-color: color-mix(in srgb, var(--color-learndash-nivel-avanzado) 12%, transparent);
}

/* leccion completa  */
/* A1-A2  */
.nivel-A1-A2 .contenido-nivel .ld-item-list-item.ld-item-lesson-item.learndash-complete {
  background-color: color-mix(in srgb, var(--color-learndash-nivel-principiante) 40%, transparent);
}
.contenido-nivel.nivel-A1-A2 .ld-status-icon.ld-status-complete {
    background-color: aquamarine;
}
/* B1-B2  */
.nivel-B1-B2 .contenido-nivel .ld-item-list-item.ld-item-lesson-item.learndash-complete {
  background-color: color-mix(in srgb, var(--color-learndash-nivel-medio) 40%, transparent);
}
.contenido-nivel.nivel-B1-B2 .ld-status-icon.ld-status-complete {
    background-color: aquamarine;
}
/* C1-C2  */
.nivel-C1-C2 .contenido-nivel .ld-item-list-item.ld-item-lesson-item.learndash-complete {
  background-color: color-mix(in srgb, var(--color-learndash-nivel-avanzado) 40%, transparent);
}
.contenido-nivel.nivel-C1-C2 .ld-status-icon.ld-status-complete {
    background-color: aquamarine;
}

/* traducciones dentro de los ejercicios */
span.ce-traduccion {
    color: var(--color-titulo-consejo-consejo);
    font-style: italic;
    /* font-weight: bold; */
}


/* ------------------------------------------------------------------------------ */
/* ------- FIN DE ESTILOS ESPECIFICOS PARA EL CURSO DE LOS EJERCICIOS   -------------- */
/* ------------------------------------------------------------------------------ */



/* ------------------------------------------------------------------------------ */
/* ------- FIN DE 4. LISTADO DE LECCIONES (EN NUESTRO CASO, LISTADO DE HISTORIAS)  -------------- */
/* ------------------------------------------------------------------------------ */



/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */
/* 5. CONTENIDO DE UNA LECCIÓN (tantos libros como curso) - ESTO ES UN POCO CAJÓN DESASTRE */
/* ---------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------- */


/* Invisibilizar una especie de navegador que aparece en la parte inferior de cada lección */
.sfwd-lessons-template-default .navigation.post-navigation {
  display: none;
}


/* ------------------------------------------------- */
/* ------------------------------------------------- */
/* ESTILOS GENERALES DE CADA LECCIÓN */
/* ------------------------------------------------- */
/* ------------------------------------------------- */



.rkpersonalvideoshortdescription h1 {
  font-size: 4em;
  color: var(--color-01-fondo-clarosuave);
}

.rk-curso-imagen-principal {
  padding: 5px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 5px 4px 7px 0px rgba(0, 0, 0, 0.5);
  transform: rotate(-5deg);
  margin-bottom: 2em;
}

.texto-sobre-curso-imagen-principal {
  position: absolute;
  left: 0px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  transform: rotate(-3deg);
}

@media (max-width: 768px) {
  .rk-curso-imagen-principal {
    display: none;
  }

  .texto-sobre-curso-imagen-principal {
    position: initial !important;
    /* Al estar por debajo de la max-width que hemos puestos, la imagen desaparece, así que tenemos que cambiar la "position" del texto para que no tape otros elementos */
  }
}

.texto-sobre-curso-imagen-principal span {
  margin-bottom: 5px;
  padding: 5px;
  font-size: 3em !important;
  font-family: 'Oswald', sans-serif;
}

span.tscip-01 {
  background-color: var(--color-01-fondo-clarosuave);
  color: white;
}

span.tscip-02 {
  color: var(--color-01-fondo-clarosuave);
  background-color: white;
}


span.rk-espacio:after {
  content: "________";
  color: var(--color-01-fondo-claro);
}

.personal-curso-ejercicio p {
  line-height: 2.5em;
}

.personal-curso-ejercicio hr {
  color: var(--color-01-fondo-superclaro);
  border: solid 0.5px !important;
  margin-top: -0.5em !important;
}

.personal-curso-ejercicio small {
  font-family: sans-serif;
  color: var(--color-01-fondo-superclaro);
}

.col-xs-12.personal-curso-ejercicio h2 {
  font-family: sans-serif;
  color: var(--color-01-fondo-clarosuave);
}

/* Hacer el audio sticky */
div.container-fluid.personal-curso.personal-curso-stage-1.libros-esidioma>div.row.pct-cuerpo-02>div:nth-child(1),
div.container-fluid.personal-curso.personal-curso-stage-1.libros-esidioma div.row.pcd-cuerpo-02>div:nth-child(1) {
  position: sticky !important;
  top: 0em;
  background: #f3f5f7;
  /* background: black; */
  z-index: 1;
  padding-bottom: 1em;
}

@media (max-width: 992px) {

  div.container-fluid.personal-curso.personal-curso-stage-1.libros-esidioma>div.row.pct-cuerpo-02>div:nth-child(1),
  div.container-fluid.personal-curso.personal-curso-stage-1.libros-esidioma div.row.pcd-cuerpo-02>div:nth-child(1) {
    padding-top: 2em;
  }
}

/* ------------------------------------------------- */
/* Vídeo curso
  /* ------------------------------------------------- */
.pequeno-centrado {
  max-width: 65em;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}

.rkpersonalvideorow {
  border: 0.5em solid !important;
  box-shadow: 6px 5px 20px 2px #000000;
}

.rkpersonalvideorow {
  margin-left: -15px;
  margin-right: -15px;
  border: 1px dotted #333;
  margin-top: 30px;
  margin-bottom: 30px;
  background-color: #000;
  color: #fff;
}

.rkpersonalvideotitle {
  margin-top: 22px;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.media {
  position: relative;
  margin: 0 0 15px 0;
  padding-bottom: 51%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  /*border: 1px solid #ccc;*/
}

.media iframe,
.media object,
.media embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ------------------------------------------------- */
/* Lista de vocabulario (para el diccionario)
  /* ------------------------------------------------- */

.mi-enunciado-lista-traducible {
  margin-top: 1em;
}

.lt-hueco-imagen {
  text-align: center;
}

.lt-hueco-imagen img {
  border-radius: 20px;

}

.lt-hueco-imagen p,
.ld-generando-vocabulario,
.mg-generando-cartas {
  padding-top: 1em;
  font-size: 3em !important;
  /* Este "important" es necesario para pantallas pequeñas*/
  font-weight: 600;
  text-align: center;
  font-family: 'Oswald', sans-serif;
  color: #525252;
}

@media (max-width: 1200px) {
  .lt-hueco-imagen p {
    font-size: 2em !important;
    /* Este "important" es necesario para pantallas pequeñas*/
  }
}


@media (max-width: 1200px) {
  .lt-hueco-imagen img {
    height: 200px;
  }

}

.aviso-lista-traduccion {
  margin-top: 0.5em;
}

.lista-traducible li {
  list-style-type: none;
  /* Esto se añadió después de poner los mini botones de player junto a cada palabra (para quitar la numeración automátia de cada <li>) */
  padding-left: 0;
}

.list-type2 {
  margin: 0 auto;
}

.list-type2 li {
  position: relative;
  padding: 0 0.5em;
  background: #d2edfd;
  color: #000000;
  transition: background-color .2s ease-in-out;
  width: 100%;
  display: flex;
  align-items: center;
}

@media (max-width: 1200px) {
  .list-type2 li {
    padding: 00 0.5em;
  }

  .lt-wrapper-listado {
    padding: 0 0.1em;
  }
}

.list-type2 li:hover {
  background-color: #c7ffc7;
  font-weight: 600;
}

/* --> Dentro de la lista de vocabulario hay este reproductor de audio (mini player) */
.mi-mini-player-audiofile {
  font-size: 1.25em;
  background: var(--color-01-fondo-clarosuave);
  color: white;
  padding: 0.4em;
  width: 1.75em;
  border-bottom-left-radius: 6px;
  border-top-left-radius: 6px;
  /* margin: 0.5em 0; */
  /* transform: scale(1.25, 1); */
  /* Esto se usó cuando el botón de play era "\23F8" (que no funciona en móviles) */
}

.mi-mini-player-audiofile:hover {
  background-color: #c7ffc7 !important;
  color: black !important;
}

.mi-mini-player-audiofile:before {
  font-family: 'Font Awesome 5 Free'; 
  content: "\f04b";
  font-weight: 900;
  font-size: small;
  margin-left: 2px;
  /* font-family: "Material Icons"; */
  /* content: "\e037"; */
}

.mi-mini-player-audiofile.paused:before {
  font-family: 'Font Awesome 5 Free'; 
  content: "\f04c";
  font-weight: 900;
  font-size: small;
  /* font-family: "Material Icons"; */
  /* content: "\e034"; */
}

.mi-mini-player-audiofile.stop:before {
  /* content: "\23F8"; este unicode queda feo en algunos navegadores */
  /* content: "\f04c";
    font-family: FontAwesome; Dejamos de usar Font Awesome el 22.08.2022 porque tiene un límite de 10.000 pageviews/mes */
  font-family: "Material Icons";
  content: "\e047";

}

.mi-mini-player-audiofile:hover {
  opacity: 0.8;
}

.lt-item {
  display: flex;
  /* Esto es fundamental para que se vea el botón de player y la palabra en la misma línea */
  margin: .75em 0;
  line-height: 1.25;
  cursor: pointer;
}

.lt-item li.lt-con-traduccion{
  background-color: #c7ffc7;
  font-weight: 600;
}

.lt-item .genero-en-dict {
  font-style: italic;
}

span.genero-en-dict {
  margin-left: 0.3rem;
}

.genero-en-dict .masc,
.genero-en-dict .fem,
.genero-en-dict .neutro
{
  font-weight: bold;
}

.genero-en-dict .masc {
  color: var(--color-titulo-consejo-consejo);
}

.genero-en-dict .fem {
  color: var(--color-01-fondo-clarosuave);;
}

.genero-en-dict .neutro {
  color: grey;
}

/* ------------------------------------------------- */
/* Find de Lista de vocabulario (para el diccionario)
  /* ------------------------------------------------- */

/* ------------------------------------------------- */
/* Memory game (cartas que giran) 
  /* ------------------------------------------------- */

.mi-memory-game {
  width: 99%;
  height: 640px;
  margin: auto;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  perspective: 1000px;
  display: flex;
  flex-direction: row;
  align-content: start;
  /* align-content: center; 07.03.2024 Comenté esta propiedad (y lo sustituí por "align-content: start") porque hace que no se vea el switch de quitar el sonido en pantallas pequeñas y parece que no afecta a nada si la quito */
}

.mi-memory-game-container.juego-en-curso .mi-memory-game{
  height: auto;
}

.memory-card {
  width: calc(25% - 10px);
  height: calc(33.333% - 10px);
  margin: 5px;
  position: relative;
  /* box-shadow: 0px 2px 5px rgb(0 0 0 / 50%); */
  transition: all .5s;
  transform-style: preserve-3d;
  transform: scale(1);
}

.mi-memory-game-container.juego-en-curso .memory-card{
  width: 15em;
  height: 21em;
  /* height: calc(50% - 10px); */
}

.memory-card.girar-carta {
  transform: rotateY(180deg);
}

.memory-card:active {
  transform: scale(0.97);
  transition: transform .2s;
}

.front-face p {
  padding: 2em 3px 0em 3px;
  font-size: 1.25em;
  font-weight: 900;
  font-family: sans-serif;
  text-transform: uppercase;
  text-align: center;
  color: white;
}

.front-face,
.back-face {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.front-face {
  transform: rotateY(180deg);
  /* background-image: linear-gradient(#ee3134, var(--color-01-fondo-clarosuave)); */
  background-color: #f35a53
}

.front-face.front-face-traduccion {
  background-color: #226db1
}

.back-face {
  background: #e6e6e6;
  border: solid 7px #226db1;
}

@media screen and (max-width: 1200px){
  .mi-memory-game-container.juego-en-curso .memory-card {
    height: 19em;
    width: 12em;
    margin: 4px;
  }

  .back-face{
    border: solid 3px #226db1;
  }

  .front-face p {
    padding: 1em 2px;
    font-size: 12px !important;
    text-transform: none;
    font-weight: 300;
  }
}

@media screen and (max-width: 1024px){
  .mi-memory-game-container.juego-en-curso .memory-card {
    height: 16em;
    width: 9em;
  }
}


@media screen and (max-width: 600px) {
  .mi-memory-game {
    height: 25em;
    padding: 1px !important;
    margin-bottom: 1em;
    /* Esto sirve para que el memory game no tape los botones de "marcar como comlpetado" */
  }
  
  .mi-memory-game-container.juego-en-curso .memory-card,
  .memory-card{
    height: 9em;
    width: 5em;
  }

  .mi-memory-game-container.juego-en-curso .memory-card{
    /* height: calc(28%); */
  }

  .mi-memory-game-container.juego-en-curso .mi-memory-game{
    /* margin-bottom: unset; */
  }


}

/* ------------------------------------------------- */
/* Fin de Memory game (cartas que giran) 
  /* ------------------------------------------------- */


/* ------------------------------------------------- */
/* Cuadros de consejos para el curso
  /* ------------------------------------------------- */




.generico-consejo
{
  /* box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset; */
  padding: 1em 2em 2em 2em;
  margin-top: 7em;
  margin-bottom: 3em;
  border-radius: 20% 20% 8% 4% / 75% 100% 25% 10%;
}


.generico-consejo hr {
  border-top: solid 0px black;
}

.generico-consejo.gc-tipo-2 {
  background: var(--color-01-fondo-clarosuave);
  background: #f75f58;
  /* Un poco más oscuro que el rojo del curso (fondo-clarosuave), para mejorar la legibilidad */
  color: white;
}


p.generico-consejo-titulo span:nth-child(1) {
  font-size: 2.5em;
  color: white;
  font-family: 'Oswald';
  padding: 1em 1em 1em;
  border-radius: 15% 50% 20% 25% / 90% 50% 100% 60%;
}

p.generico-consejo-titulo span:last-of-type {
  margin-left: 3em;
  color: yellow;
  font-size: 1.25em;
}

.generico-consejo:before {
  content: "";
  display: block;
  background-size: 10em !important;
  width: 10em;
  height: 10em;
  margin-top: -4em;
  margin-left: -2em;
  float: left;
}

p.generico-consejo-titulo {
  transform: rotate(-3deg);
}

/* --> consejo */
.consejo-consejo:before {
  background: url(/wp-content/uploads/consejo-consejo.) no-repeat;
}
.consejo-consejo p.generico-consejo-titulo span:nth-child(1) {
  background-color: #6e60b8;
}
.generico-consejo.consejo-consejo {
  /* background-color: #ddd7ff; */
  background-color: #f1effd;
}

/* --> costumbres */
.consejo-costumbres:before {
  background: url(/wp-content/uploads/consejo-costumbres.png) no-repeat;
}
.consejo-costumbres p.generico-consejo-titulo span:nth-child(1) {
  background-color: #d17c31;
}
.generico-consejo.consejo-costumbres {
  background-color: #ffd1a8;
}

/* --> atencion */
.consejo-atencion:before {
  background: url(/wp-content/uploads/consejo-atencion.png) no-repeat;
}
.consejo-atencion p.generico-consejo-titulo span:nth-child(1) {
  background-color: #145eff;
}
.generico-consejo.consejo-atencion {
  background-color: #9ef0ff;
}

/* --> stop */
.consejo-stop:before {
  background: url(/wp-content/uploads/consejo-stop.png) no-repeat;
}
.consejo-stop p.generico-consejo-titulo span:nth-child(1) {
  background-color: #ff3434;
}
.generico-consejo.consejo-stop{
  background-color: #ffa1a1;
}



/* prueba de CONSEJO nuevo */
.consejo-en-general
{
  padding: 1em 0em 0em 0em;
  margin-top: 7em;
  margin-bottom: 3em;
  border-radius: 20px
}

/* personalizaciones según tipo de consejo: */

/* color del encabezado según tipo de consejo */
:root {
  --color-titulo-consejo-consejo: #558fee;
  --color-titulo-consejo-costumbres:  #dfa897;
  --color-titulo-consejo-atencion:  #ff9f1b;
  --color-titulo-consejo-stop:  #f15b5b;
}

/* imagen según tipo de consejo */
.consejo-consejo .encabezado-consejo-img{
  background-image: url(/wp-content/uploads/consejo-consejo.png);
}

/* imagen según tipo de consejo */
.consejo-costumbres .encabezado-consejo-img{
  background-image: url(/wp-content/uploads/consejo-costumbres-sevillana.png);
}

/* imagen según tipo de consejo */
.consejo-atencion .encabezado-consejo-img{
  background-image: url(/wp-content/uploads/consejo-atencion-senal.png);
}

/* imagen según tipo de consejo */
.consejo-stop .encabezado-consejo-img{
  background-image: url(/wp-content/uploads/consejo-stop-senal.png);
}

/* fondo del cuerpo de consejo degún tipo */
.consejo-en-general.consejo-consejo{
  background-color: #fffadd;
}

.consejo-en-general.consejo-costumbres{
  background-color: #ffefe4;
}

.consejo-en-general.consejo-atencion{
  background-color: #ffefda;
}

.consejo-en-general.consejo-stop{
  background-color: #ffefe4;
}

/* fondo del titulo del consejo segun tipo */
.consejo-consejo .consejo-titulo {
  background-color: var(--color-titulo-consejo-consejo);
}

.consejo-costumbres .consejo-titulo {
  background-color: var(--color-titulo-consejo-costumbres);
}

.consejo-atencion .consejo-titulo {
  background-color: var(--color-titulo-consejo-atencion);
}

.consejo-stop .consejo-titulo {
  background-color: var(--color-titulo-consejo-stop);
}



/* decoracinoes del titulo del consejo según tipo */
/* CONSEJO-CONSEJO */
.consejo-consejo .consejo-titulo:before,
.consejo-consejo .consejo-titulo:after{
  background-color:var(--color-titulo-consejo-consejo);
}
.consejo-consejo .consejo-titulo:before {
  box-shadow:-50px 30px 0 -12px var(--color-titulo-consejo-consejo);
}
.consejo-consejo .consejo-titulo:after {
  box-shadow: 40px -34px 0 0 #ff7a51, 
              -28px -6px 0 -2px white, 
              -24px 17px 0 -6px #eebc93, 
              -5px 25px 0 -10px #88331d;
}

/* CONSEJO-COSTUMBRES */
.consejo-costumbres .consejo-titulo:before,
.consejo-costumbres .consejo-titulo:after{
  background-color:var(--color-titulo-consejo-costumbres);
}
.consejo-costumbres .consejo-titulo:before {
  box-shadow:-50px 30px 0 -12px var(--color-titulo-consejo-costumbres);
}
.consejo-costumbres .consejo-titulo:after {
  box-shadow:40px -34px 0 0 #f2a5ba,
             -28px -6px 0 -2px white,
             -24px 17px 0 -6px #ffab89,
             -5px 25px 0 -10px #f2a5ba;
}

/* CONSEJO-ATENCION */
.consejo-atencion .consejo-titulo:before,
.consejo-atencion .consejo-titulo:after{
  background-color:var(--color-titulo-consejo-atencion);
}
.consejo-atencion .consejo-titulo:before {
  box-shadow:-50px 30px 0 -12px var(--color-titulo-consejo-atencion);
}
.consejo-atencion .consejo-titulo:after {
  box-shadow:40px -34px 0 0 #ff8215,
             -28px -6px 0 -2px white,
             -24px 17px 0 -6px #c85511,
             -5px 25px 0 -10px var(--color-titulo-consejo-atencion);
}

/* CONSEJO-STOP */
.consejo-stop .consejo-titulo:before,
.consejo-stop .consejo-titulo:after{
  background-color:var(--color-titulo-consejo-stop);
}
.consejo-stop .consejo-titulo:before {
  box-shadow:-50px 30px 0 -12px var(--color-titulo-consejo-stop);
}
.consejo-stop .consejo-titulo:after {
  box-shadow:40px -34px 0 0 #f02222,
             -28px -6px 0 -2px white,
             -24px 17px 0 -6px #fbc6a2,
             -5px 25px 0 -10px var(--color-titulo-consejo-stop);
}

/* segunda línea del titulo del consejo segun tipo */
.consejo-consejo .ct-linea-dos,
.consejo-stop .ct-linea-dos
 {
  color: yellow;
}

.consejo-costumbres .ct-linea-dos,
.consejo-atencion .ct-linea-dos
{
  color: #5c2d3a;
}

.encabezado-consejo-img {
  width: 10em;
  height: 10em;
  min-width: 10em;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.encabezado-consejo {
  display: flex;
  margin-top: -4em;
}

.consejo-titulo {
  display: flex;
  flex-direction: column;
  justify-content:center;
  text-align:center;
  align-items: flex-start;
  transform: rotate(-3deg);
  padding:20px;
  border-radius:30px;
  min-width:40px;
  min-height:40px;
  margin:1em;
  position:relative;
  z-index: 1;
}

.consejo-titulo:before,
.consejo-titulo:after {
  content:"";

  border-radius:50%;
  display:block;
  position:absolute;
  z-index:0;
}
.consejo-titulo:before {
  width:44px;
  height:44px;
  top:-12px;
  left:28px;
  z-index:-1;
}
.consejo-titulo:after {
  bottom:-10px;
  right:26px;
  width:30px;
  height:30px;
}

.ct-linea-uno {
  font-size: 2.5em;
  color: white;
  font-family: 'Oswald';
}

.ct-linea-dos {
  font-size: 1.25em;
}

.consejo-cuerpo {
  padding: 1em 2em;
}




/* ------------------------------------------------- */
/* Fin de cuadros de consejos para el curso
  /* ------------------------------------------------- */

  /* ------------------------------------------------- */
/* Zona de explicaciones en cualquier sección (vocabulario, gramática, diálogos o texto) */
  /* ------------------------------------------------- */

  .curso-terminacion,
  .fe-destacar
  {
    color: #ce2f38;
    font-weight: 600;
  }  

  .pcg-consejo-frases-ejemplo,
  .pcg-frases-ejemplo {
    background: #f3f5f7;
    margin: 0 -15px;
    padding: 5px 15px;
    margin-bottom: 2em;
  }
  .pcg-consejo-frases-ejemplo p,
.pcg-frases-ejemplo p {
  font-style: italic;
  color: var(--color-01-fondo-superclaro);;
}

  /* ------------------------------------------------- */
/* Fin de zona de explicaciones en cualquier sección (vocabulario, gramática, diálogos o texto) */
  /* ------------------------------------------------- */

/* ------------------------------------------------- */
/* Tablas de gramática
  /* ------------------------------------------------- */

.pcg-envoltorio-titulo-tabla-y-audio table {
  margin-bottom: 0px; /* Reset de "margin-bottom" que tiene bootstrap por defecto para las tablas */
}

.pcg-titulo-tabla {
  text-align: center;
}

.pcg-titulo-tabla p {
  margin: 0;
}

.pcg-titulo-tabla {
  color: var(--color-01-fondo-superclaro);
  padding-top: 0.5em;
}

.pcg-envoltorio-tabla-y-audio {
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
  border-radius: 8px;
  margin: 0 -15px;
  margin-top: 2em !important; /* Por alguna razón, tuve que poner aquí "important" */
  margin-bottom: 3em;
  background: #f3f5f7;
}

.pcg-envoltorio-tabla-y-audio table.pcg-tabla-primera-columna-resaltada tbody tr td:first-of-type {
  background: var(--color-01-fondo-superclaro);
  color: white;
  font-weight: 600;
}

.mi-tabla th,
.mi-tabla td,
.mi-tabla-colores th,
.mi-tabla-colores td {
  text-align: center !important;
  vertical-align: middle !important;
}

.mi-tabla thead,
.mi-tabla th,
.titulos-laterales {
  background-color: var(--color-01-fondo-superclaro) !important;
  color: #fff;
  font-weight: 600;
  border-color: var(--color-01-fondo-superclaro) !important;
}

.mi-tabla-colores thead,
.mi-tabla-colores th {
  background-color: #444;
  color: #fff;
  font-weight: 600;
  border-color: #ccc !important;
}

.mi-tabla .mi-tabla-colores caption {
  font-size: 3em;
  color: red;
}

.mi-borde {
  border: 0.25em;
  border-style: solid;
  border-color: var(--color-01-fondo-oscuro);
}

.mi-tabla-colores .mi-borde {
  border: 0.25em;
  border-style: solid;
  border-color: #444;
}


.mi-tabla-colores .grupo-1 .titulos-laterales {
  background-color: #a6d1ff;
  color: #333;
  font-weight: 600;
  border-color: #7bb0eb !important;
}

.mi-tabla-colores .grupo-1 td {
  background-color: #b4deff;
  border-color: #7bb0eb !important;
}

.mi-tabla-colores .grupo-2 .titulos-laterales {
  background-color: #f5cedb;
  color: #333;
  font-weight: 600;
  border-color: #dab6c8 !important;
}

.mi-tabla-colores .grupo-2 td {
  background-color: #ffdce9;
  border-color: #dab6c8 !important;
}

.mi-tabla-colores .grupo-3 .titulos-laterales {
  background-color: #c2e0e7;
  color: #333;
  font-weight: 600;
  border-color: #a3d0b5 !important;
}

.mi-tabla-colores .grupo-3 td {
  background-color: #d4e9ee;
  border-color: #a3d0b5 !important;
}

.mi-tabla-colores .grupo-4 .titulos-laterales {
  background-color: #ccc;
  color: #333;
  font-weight: 600;
  border-color: #bbb !important;
}

.mi-tabla-colores .grupo-4 td {
  background-color: #ddd;
  border-color: #bbb !important;
}

.mi-tabla tbody tr:nth-of-type(odd) {
  background-color: #e5e5e5;
}
.mi-tabla tbody tr:nth-of-type(even) {
  background-color: #ffffff;
}

.tabla-strong {
  color: #cc0000;
}


/* ------------------------------------------------- */
/* Fin de tablas de gramática
  /* ------------------------------------------------- */


/* ------------------------------------------------- */
/* Player del plubing "Clean player"
/* ------------------------------------------------- */

/* --> El player del plugin "Clean Html Audio Video Player By Mediatec Software" tiene un conflicto con el style.css de nuestro tema Sparkling. El estilo de abajo lo arregla */
.plyr__controls button:focus,
.plyr__controls .button:focus {
  /* background-color: #1aafff !important; */
  background-color: initial !important;
  color: #4f5b5f !important;
  /* Color de textos y los símbolos de play/pause */
}

/* Hacer que el botón de "Audio speed" tenga un color destacado (es un color que usa el player en el control de audio) */
.personal-curso .plyr__menu button[aria-haspopup="true"] {
  border-radius: 5px !important;
  background: #1aafff !important;
  color: white;
  font-weight: 600;
}
.personal-curso .pcg-envoltorio-titulo-tabla-y-audio .plyr__menu button[aria-haspopup="true"] {
  background: var(--color-01-fondo-superclaro) !important; /* Player en tabla de gramática del curso */
}


/* --> El siguiente estilo con @media sirve para corregir el hecho de que si hay dos players uno junto al otro, en pantallas estrechas (entre 768px y 992px) no se puede subir y bajar el audio */
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .personal-curso button.plyr__control {
    width: 8ch;
    padding: 0;
    font-size: 12px;
  }

  .personal-curso .plyr--audio .plyr__controls {
    padding: 20px 3px;
  }

  .personal-curso .plyr__volume button.plyr__control.plyr__control,
  .personal-curso .plyr__control button.plyr__control.plyr__control {
    width: 2em;
  }

  .personal-curso .plyr__controls>button.plyr__control {
    width: 1em;
  }
}

/* para los ejemplos, que vienen despues de las tablas, al .cleanPlayer le damos una clase adicional para evitar margin 0 que viene para las tablas dentro del .personal-curso-gramatica */
.cleanPlayer.ejemplos-despues-de-la-tabla {
  margin: -15px -15px 15px!important;
}

/* --> Ponemos unos margenes para toda la web y, después, lo quitamos en las páginas de gramática (esto es un poco chapucero, pero funciona) */
.cleanPlayer {
  margin-left: -15px;
  margin-right: -15px;
}


.personal-curso-gramatica .cleanPlayer {
  margin: 0;
}

/* --> en las páginas de gramática ponemos un player encima de cada tabla. Aquí quitamos un poco de padding para que quede más estrecho */
/* .personal-curso-gramatica .chp .plyr--audio .plyr__controls {
  padding: 10px 5px;
} */


/* ------------------------------------------------- */
/* Fin de Player del plubing "Clean player"
/* ------------------------------------------------- */



/* 03.10.2023 Esto lo comento porque no hace falta en Esid (en SK, al haber diálogos monolingües en el curso, se hacía para evitar que algún diálogo "saltara" de row */
/* .personal-curso-dialogos,
.personal-curso-vocabulario,
.personal-curso-textos,
.personal-curso-dialogos,
.personal-curso-ejercicios,
.personal-curso-gramatica {
  display: flex;
  flex-wrap: wrap;
} */



.pcd-dialogo,
.pct-texto,
.pce-ejercicio {
  margin-bottom: 1em;
  width: 100%;
}



@media (min-width: 768px) {

  .pcd-dialogo,
  .pct-texto {
    width: 49% !important;
    margin: 0 5px 5px 0;

  }
}



/* El cuerpo 01 es el encabezado en rojo con un fondo en forma de franja. Están añadidas las clases 02, pero a día de hoy (16/12/2019) no tienen dada forma.*/
.pcd-cuerpo-01 h2 small {
  color: #333;
  font-size: 0.75em;
  font-family: inherit;
}

/* Después del título de una sección de gramática a veces hay un <p>. Es necesario poner un margin-bottom para crear un hueco */
.pcg-cuerpo-01 {
  margin-top: 2em;
  margin-bottom: 2em;
}

/* Separación entre diálogos */
.pcd-cuerpo-01 {
  margin-top: 5em;
}

.pcd-cuerpo-01,
.pcg-cuerpo-01,
.pcv-cuerpo-01,
.pct-cuerpo-01,
.pce-cuerpo-01 {
  background-color: var(--color-01-fondo-clarosuave);

  min-height: 5em;
}

.pcd-cuerpo-01 h2,
.pcv-cuerpo-01 h2,
.pcg-cuerpo-01 h2,
.pct-cuerpo-01 h2,
.pce-cuerpo-01 h2 {
  color: #ffffff;
}

.personal-curso .texto-dos-colores:nth-of-type(odd) {
  background-color: #ffffff;
  padding-top: 1em;
}

.personal-curso .texto-dos-colores:nth-of-type(even) {
  background-color: #F2F2F2;
  padding-top: 1em;

}

.parrafo-dialogo {
  margin-top: -5px;
  text-indent: -0.6em;
}

.parrafo-dialogo:before {
  content: "- ";
}


.pequeno-centrado {
  max-width: 65em;
  margin-left: auto !important;
  margin-right: auto !important;
  display: block;
}

.personal-curso-fullwidth {
  margin-top: 5em;
  background: var(--color-01-fondo-claro);
  width: 100vw !important;
  border-radius: 8px;
  position: relative;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
}


.personal-curso-fullwidth img {
  float: left;
  width: 9vw;
  min-width: 100px;
  margin-top: -3em;
  margin-right: 3em;
  border-radius: 50%;
  padding: 0.5vw;
  background: var(--color-01-fondo-claro);
  box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.75);
}

.personal-curso-fullwidth h2 {
  text-shadow: 3px 3px 0 rgba(0, 0, 0, 0.2);
  font-size: 4vw;
  color: #ffffff;
  text-align: left;
  margin-left: 15vw;
  font-family: 'Oswald', sans-serif;
  font-weight: normal;
}

.personal-curso-seccion-descripcion {
  margin-top: 4em;
}

/* Boton de descarga de material en los webinarios */

.descarga-en-webinario {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2em;
}

.descarga-en-webinario .wpdm-download-link.btn.btn-primary {
  font-size: 3rem !important;
  padding: 2rem;
  border-radius: 50%;
}

.descarga-en-webinario .w3eden a:before {
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  content: "\f0ed";
}




/* ------------------------------------------ */
/* ------------------------------------------ */
/* -------- FIN DE CONTENIDO DE UNA LECCIÓN-------------- */
/* ------------------------------------------ */
/* ------------------------------------------ */



/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */
/* -------------- ESTILOS GENERALES SECCIONES (mi-seccion)  -------------- */
/* ------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------ */

.mi-seccion h1,
.mi-seccion h2,
.mi-seccion h3,
.mi-seccion h4,
.mi-seccion h5,
.mi-seccion #learndash_profile a {
  font-family: 'Oswald', sans-serif;
}

.mi-seccion h1,
.mi-seccion h2,
.mi-seccion h3,
.mi-seccion h4,
.mi-seccion h5 {
  color: #444;
}



/* ------------------------------------------- */
/* STUDENT ACCESS (listado de libros)
/* ------------------------------------------- */

/* Textos que aparecen en la ficha de alumno (donde sale el nombre del alumno y los libros/cursos que tiene */
.ld-profile-summary * {
  color: #444444;
}

.mi-container-my-account {
  /* background: #efefef; */
  padding: 2em 1em;
  margin: 3em 0em;
  border-radius: 8px;
}

.mi-container-my-account>.row {
  margin: 1em 1em 3em 1em;
}

.thumbnail.thumbnail-home {
  box-shadow: inset 2px 2px 6px rgba(0, 0, 0, 0.9);
}

.thumbnail.thumbnail-home img {
  padding: 0.25em;
}


/* --> invisibilizar todos tipo de botones y links en el listado de libros */
#learndash_profile .flip .right,
#learndash_profile .learndash-course-certificate,
#learndash_profile .ld_profile_certificate,
#learndash_profile .expand_collapse,
#learndash_profile .learndash_profile_heading,
#learndash_profile .list_arrow .flippable,
#learndash_profile .profile_info {
  display: none !important
}

/* --> celda lateral que muestra una flecha para expander/contraer el contenido del curso */
#learndash_profile .list_arrow {
  /* background: url(https://www.esidioma.com/wp-content/uploads/SABOOK_A1_A2_01_ES_EN_ebook-100x100.jpg) no-repeat;
      background-size: contain; */
  background: none;
}

/* --> Después de invisibilizar ".flip .right" (un número que indica el porcetaje de progreso), estiramos la barra de progreso */
#learndash_profile .course_progress {
  float: none;
  width: 96.5%;
  margin-bottom: 4em;
}

/* --> Damos forma al texto con el título de libro */
#learndash_profile .learndash-course-link a {
  font-size: 18px;
}

#learndash_profile {
  /* border: none;
  box-shadow: none; */
}

#learndash_profile .learndash-course-link a,
#course_list>div h4,
#course_list>div>div {
  border-top: none;
  border-right: none
}

#learndash_profile .learndash-course-link a {
  line-height: initial;
  /* Para mejorar la visión en móvil */
}

#course_list>div:nth-of-type(odd) {
  /* background: #efefef; */
}


/* ------------------------------- */
/* ----------- CURSOS ----------- */
/* ------------------------------- */

#learndash_mark_complete_button {
  color: green;
  background: lightblue;
  border: solid 1px;
}

#sfwd-mark-complete {
  text-align: center;
}

/* --> botones de "next lesson" "previous lessons" y "list of lessons" Y TAMBIÉN EL DE "Mark a complete" */

div[class*='learndash-shortcode-wrap-ld_navigation'] {
  font-size: 1.25em;
}

.ld-course-step-back {
  background: black;
  padding: 1em;
  margin-top: 5px !important;
  border-radius: 20px;
  font-weight: 600;
}

.ld-icon.ld-icon-arrow-left,
.ld-icon.ld-icon-arrow-right {
  font-size: 2em !important;
  color: white !important;
}

.learndash-wrapper>.ld-content-actions>.ld-content-action>.ld-button .ld-text {
  color: white;
}

/*Borrar en la vista de "mi cuenta" lo siguiente: el "course grid" y el curso que hemos llamado "Todo junto"*/
#course-14-562,
#ld-course-list-content-b07b95f87a4c2d0ce4a6a3473c6095ac {
  display: none !important;
}






/* Nuevos estilos para el curso de español */
/* tener en cuenta, que la estructura del curso se modifica por shortcode */ 
/* se pone abajo para poder pisar nuestros importants */

/* Página de feedback en el curso */
.explicaciones-formulario-curso li {
  font-family: 'Caveat';
  font-size: 28px !important;
  color: #3d6a99;
}

.explicaciones-formulario-curso ol,
.explicaciones-formulario-curso ul
{
  background-color: #f8ffff;
  box-shadow: -1px 2px 6px 0px #888;
  padding: 1em 2em 1em 5em;
  width: fit-content;
  position: relative;
  margin-top: 2em;
}

.explicaciones-formulario-curso ol::after,
.explicaciones-formulario-curso ul::after
{
  position: absolute;
  top: -14px;
  left: 4px;
  font-family: 'Font Awesome 5 Free' !important;
  font-weight: 900 !important;
  content: "\f276";
  font-size: 35px !important;
  transform: rotate(339deg);
  color: #fc756f;
}

/* Portada del curso */
:root {
  --color-impar-1: #c9e1d8;
  --color-impar-2: #e7edec;
  --color-par-1: #edc9c9;
  --color-par-2: #d9afaf;
}

.curso-titulo{
  border-radius: 10px;
  box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.25);
  margin: 1em 15px;
  padding: 1.2em;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

img.curso-titulo-imagen{
  width: 23em;
  height: auto;
  padding: 0.5em;
}

html{
  scroll-timeline: --page-scroll block;
}


.curso-titulo-imagen-fondo{
  animation: adjust-image linear both;
  animation-timeline: --page-scroll;
  animation-range: exit;
  opacity: 0;
  position: absolute;
  width: 1em;
  pointer-events: none
}

.curso-titulo-texto-static {
  text-align: center;
  color: red;
  width: 100%;
  font-size: 12px !important;
}

.curso-titulo-texto-static div{
  font-family: 'Oswald';
  text-transform: uppercase;
  font-size: 7em !important;
  line-height: 1em;
  font-weight: 900;
} 

.ct-linea2{
  color: orange;
}

@media (max-width: 1200px) {
  .curso-titulo-texto-static div{
    font-size: 5em !important;
  } 
}
@media (max-width: 900px) {
  .curso-titulo-texto-static div{
    font-size: 3em !important;
  } 
}


@keyframes adjust-image{
  0%{
    zoom: 1;
  }
  5%, 100% {
    /* display: block;
    position: fixed;
    scale: 2.5;
    opacity: 0.055;
    rotate: -10deg;
    left:0; */
    position: fixed;
    opacity: 0.055;
    scale: 2.5;
    left: 11em;
    top: 33em;
    rotate: -10deg;
    width: auto;
  }
}

/* para invisibilizar listado de lecciones del curso cuando lo cargamos para evitar parpadeos(luego se visibiliaza por js) */
/* cursos A1A2 */
.ld-item-list-items.ld-item-list-8208,
.ld-item-list-items.ld-item-list-21210,
.ld-item-list-items.ld-item-list-22195,
/* cursos verbosA1A2 */
.ld-item-list-items.ld-item-list-24063,
.ld-item-list-items.ld-item-list-24715,
.ld-item-list-items.ld-item-list-25172,
/* curso de ejercicios */
.ld-item-list-items.ld-item-list-28165
{
  display: none;
}

.envoltorio-parte {
  display: flex;
  justify-content: space-between;
  /* flex-direction: column-reverse; */
  gap: 1em;
  margin: 3em 15px;
  box-shadow: 1px 1px 6px 1px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  position: relative;
  /* overflow: hidden; */
  min-height: 10em;
}

.envoltorio-parte.par{
  animation: fadeInL 0.5s ease-out;
}

.envoltorio-parte.impar{
  animation: fadeInR 0.5s ease-out;
}

.ep-contenido {
  width: 50%;
  padding: 15px;
}

.ep-decoracion {
  position: relative;
  width: 65%;
  /* overflow: hidden; */
}

/* corregir el listado de lecciones (lessons) SOLO EN EL CURSO */
/* .ep-contenido  .ld-item-list-item{
  margin: 0!important;
  margin-bottom: 0!important;
}

.ep-contenido .ld-status-icon{
  margin-top: 0 !important;
} */

.ep-contenido  .ld-item-list-item{
  border: unset!important;
  margin: 0.5em !important;
  background-color: transparent !important;
}

.ep-deco-curso-img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
  position: relative;
  top: 0;
  object-position: right;
}

.ep-deco-left, .ep-deco-right {
  position: absolute;
  z-index: 1;
}

/* .ep-decoracion-impar .ep-deco-left, .ep-decoracion-impar .ep-deco-right{
  transform: rotate(352deg);
} */

.ep-decoracion-impar .ep-deco-left {
  /* height: 137%; */
  background-color: var(--color-impar-1);
  /* width: 150px;
  left: 0;
  top: -83px; */
  left: 0;
}

.ep-decoracion-impar .ep-deco-right {
  /* height: 124%; */
  background-color: var(--color-impar-2);
  right: 0;
  /* width: 180px;
  right: -50px;
  top: -15%; */
}

.ep-decoracion-par .ep-deco-left {
  background-color: var(--color-par-1);
  left: 0;
  /* width: 150px; */
  /* left: -20px; */
  /* top: -80px; */
}

.ep-decoracion-par .ep-deco-right {
  background-color: var(--color-par-2);
  /* width: 130px; */
  /* right: 25px; */
  /* top: -15%; */
  right: 0;
}

.ep-decoracion-par .ep-deco-right,  
.ep-decoracion-par .ep-deco-left,
.ep-decoracion-impar .ep-deco-right,
.ep-decoracion-impar .ep-deco-left
{
  width: 120px;
  height: 100%;
  top: 0;
}

.ep-decoracion-impar .ep-deco-leccion,
.ep-decoracion-par .ep-deco-leccion
{
  position: absolute;
  z-index: 5;
  top: 0;
  right: 0;
  padding: 10px;
  font-size: 2.5em !important;
  font-family: 'Oswald';
  color: #6dc07f;
  background: white;
  /* box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 8px 1px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px; */
  /* transform: skew(8deg, 0deg); */
}

/* .ep-deco-left, */
.ep-deco-left
 {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.ep-deco-nombre {
  position: absolute;
  z-index: 5;
  bottom: 19px;
  left: 0;
  padding: 0 0 0 2em;
  font-size: 3em !important;
  font-family: 'Oswald';
  color: #4e5050;
  background: #ffffffc7;
  width: 100%;
}

/* en la tabla de descripcion del producto para el curso de verbos (C-VE-01) corregimos el tamaño del texto */
.partes-curso-en-producto.c-ve-01 .ep-deco-nombre{
  font-size: 1.7em !important;
  width: unset;
  padding: 0 1em;
}

.partes-curso-en-producto.c-ve-01 .pcep-grammar{
  font-size: 1.7em !important;
}



@media (max-width: 1200px) {
  .envoltorio-parte.par, .envoltorio-parte.impar{
    flex-direction: column;
  }
  .ep-decoracion{
    /* overflow: hidden; */
    width: 100%;
  }
  .ep-decoracion-impar {
    background: linear-gradient(to left, var(--color-impar-1), var(--color-impar-2));
   }

   .ep-decoracion-par {
    background: linear-gradient(to left, var(--color-par-1), var(--color-par-2));
   }

  .ep-contenido{
    width: 100%;
  }

  .ep-deco-curso-img {
    height: 240px;
  }
  .ep-deco-left{
    display: none;
  }
  .ep-deco-right{
    display: none;
  }

  .ep-deco-leccion{
    transform: unset;
  }

  .ep-deco-nombre {
    font-size: 2em !important;
  }
}

@media (max-width: 648px) {
/* solo en curso de verbos ID=24063 porque leccion tapa los imagenes de verbos*/
  .ld-item-list-24063 .ep-deco-leccion{
    z-index: 5;
    top: -24px;
    right: 0;
    padding: 0 10px;
    font-size: 2rem !important;
    transform: rotate(5deg);
    border-radius: 10px;
  }
}

/* //animacion para las partes del curso */
@keyframes fadeInL {
  from {
    opacity: 0;
    transform: scale(0.85);
    transform-origin: left;
  }
  to {
    opacity: 1;
    transform: scale(1);
    transform-origin: left;
  }
}

@keyframes fadeInR {
  from {
    opacity: 0;
    transform: scale(0.85);
    transform-origin: right;
  }
  to {
    opacity: 1;
    transform: scale(1);
    transform-origin: right;
  }
}


/*aviso contacto tutor en todas lecciones del curso */
.tu-tutor-aqui {
  color: #fc756f;
  font-family: 'Oswald';
  font-size: x-large !important;
}

/* Tabla de lecciones en el producto del curso */
.partes-curso-en-producto h3.penp-titulo {
  font-size: 50px;
  font-family: 'Oswald';
  color: #ff7700 !important;
}

.partes-curso-en-producto .envoltorio-parte{
  margin: 1.5em 0;
}

.partes-curso-en-producto .ep-contenido{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1em;
  font-size: large!important;
}

.partes-curso-en-producto .ep-contenido div{
  margin-bottom: 0;
}

.partes-curso-en-producto .ep-contenido div p{
  margin-bottom: 0;
  font-family: Oswald;
  color: grey;
}

.partes-curso-en-producto .ep-contenido div p.pcep-grammar{
  color: #ff7600;
}

.partes-curso-en-producto .ep-contenido div p.pcep-vocabulary{
  color: #69b3e2;
}



.partes-curso-en-producto .ep-decoracion{
  width: 50%;
}

@media (max-width: 1200px) {
  .partes-curso-en-producto .ep-decoracion{
    width: 100%;
  }

  .partes-curso-en-producto h3.penp-titulo {
    font-size: 30px!important;
  }
}

.partes-curso-en-producto .ep-decoracion-par .ep-deco-right,
.partes-curso-en-producto .ep-decoracion-par .ep-deco-left,
.partes-curso-en-producto .ep-decoracion-impar .ep-deco-right,
.partes-curso-en-producto .ep-decoracion-impar .ep-deco-left{
  width: 173px;
}