/* styles.css */
.suggestions {
  border: 1px solid #fff;
  max-height: 150px;
  overflow-y: auto;
  position: absolute;
  background: white;
  width: calc(100% - 22px);
  z-index: 1000;
}

.suggestion-item {
  padding: 10px;
  cursor: pointer;
}

.suggestion-item:hover {
  background-color: #f0f0f0;
}

#contenedorWelcome {
  position: relative;
  padding: 0;
  /* Evita que el texto se desplace */
}

#welcomeImage {
  display: block;
  width: 100%;
  height: auto;
}

/* Capa oscura encima de la imagen */
.capaOscura {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Opacidad del 50% */
  z-index: 1;
}

/* Texto sobre la imagen */
.textoBienvenida {
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  color: white;
  text-align: center;
  padding: 1rem;
}

@media (max-width: 600px) {
  .textoBienvenida {
    top: 10%;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    font-size: 1rem;
    padding: 0.5rem;
    box-sizing: border-box;
    word-break: break-word;
  }
  .textoBienvenida h2 {
    font-size: .80rem !important;
  }
  .textoBienvenida p {
    font-size: 0.65rem !important;
  }
}

.textoBienvenida h2 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.textoBienvenida p {
  font-size: 1rem;
}

.card-pregunta {
  margin-bottom: 2rem;
}

.opcion-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.opcion-item input[type="text"] {
  flex: 1;
}

.btn-remove-opcion,
.btn-remove-pregunta {
  border: none;
  background: transparent;
  color: #dc3545;
  font-weight: bold;
  cursor: pointer;
}

.btn-remove-opcion:hover,
.btn-remove-pregunta:hover {
  color: #a71d2a;
}

.card-item {
  margin-bottom: 1rem;
}

.btn-remove {
  color: #dc3545;
  border: none;
  background: none;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
}

.btn-remove:hover {
  color: #a71d2a;
}


/* DROPZONE */

.card-pregunta {
  background: #fff;
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 6px;
  margin-bottom: 1rem;
  position: relative;
}

.btnEliminarPregunta {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  font-size: 1.2rem;
  color: red;
  background: none;
  border: none;
}


.sortable-list .preview-card {
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #fdfdfd;
  padding: 15px;
  cursor: move;
}

.sortable-list .preview-card.dragging {
  opacity: 0.5;
}

.preview-card {
  margin-bottom: 20px;
  cursor: move;
}

.preview-card .card {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s ease;
}

.preview-card .card:hover {
  transform: scale(1.01);
}

.mc-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mc-card:hover {
  transform: scale(1.03);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

/* 2 líneas máx. para descripciones largas */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* opcional: transiciones suaves al pasar el mouse */
.card .progress .progress-bar {
  transition: width .35s ease;
}

.curso-stage {
  max-width: 1100px;
  margin: 0 auto;
}

.curso-imgbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.curso-imgbox img {
  max-width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: .5rem;
}

.curso-texto.card {
  background: #f8f9fc;
  border-radius: .5rem;
  border: 0
}

.curso-bloque {
  margin-bottom: 1.25rem;
}

.code-input {
  padding: 0.75rem 0.5rem;
  font-size: 1.2rem;
  font-weight: bold;
}

/*--------------------------------------TOOLBOX--------------------------------------*/

/* --- ESTILOS PARA EL CONSTRUCTOR DE CURSOS --- */

#constructor-container {
    display: flex;
    gap: 1.5rem;
    min-height: 60vh; /* Altura mínima para el área de trabajo */
    background-color: #f8f9fc;
    padding: 1rem;
    border: 1px solid #e3e6f0;
    border-radius: .35rem;
    height: 120vh;
}

#toolbox {
    flex: 0 0 200px; /* Ancho fijo para la caja de herramientas */
    border-right: 1px solid #e3e6f0;
    padding-right: 1.5rem;
}

#workspace {
    flex: 1; /* Ocupa todo el espacio restante */
    overflow-y: auto; /* ¡Esta es la clave! Añade una barra de scroll vertical solo si es necesario */
    padding: 0 1rem; /* Añade un poco de espacio interno */
}

/* Estilo para los botones deshabilitados */
#toolbox button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

/* Estilos para los bloques de módulo */
.module-block {
    background-color: #fff;
    border: 1px solid #d1d3e2;
    border-left: 5px solid #a9e0a1; /* Borde azul a la izquierda */
    border-radius: 5px;
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    position: relative; /* Necesario para posicionar los controles */
}

.module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.5rem;
}

.module-header h5 {
    margin: 0;
}

/* Controles de edición/eliminación en cada bloque */
.block-controls {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none; /* Ocultos por defecto */
    background: rgba(255, 255, 255, 0.9);
    border-radius: 5px;
    padding: 3px;
    z-index: 10;
}

/* Se muestran al hacer hover sobre cualquier bloque */
.module-block:hover .block-controls {
    display: flex;
    gap: 5px;
}

.block-controls .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}


.module-content-area {
    min-height: 100px;
    display: flex; /* Habilita Flexbox */
    flex-wrap: wrap; /* Permite que los bloques pasen a la siguiente línea */
    gap: 1rem; /* Espacio entre bloques */
    align-items: flex-start; /* Alinea los bloques en la parte superior */
}

.content-block {
    background-color: #f8f9fc;
    border: 1px dashed #ccc;
    border-radius: 5px;
    padding: 1rem;
    position: relative;
    word-wrap: break-word;
    box-shadow: 0 0.15rem 1.75rem 0 rgba(58, 59, 69, 0.05);
    /* El ancho se controlará por JS, pero podemos darle un mínimo */
    min-width: 200px; 
}

.media-preview {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid #eee;
    padding: 5px;
    border-radius: 4px;
    background-color: #f9f9f9;
}

.media-preview img,
.media-preview video {
    display: block; /* Eliminar espacio extra debajo de imágenes/videos */
    width: 100%; /* Asegurar que ocupen el ancho completo del contenedor */
    max-height: 200px; /* Limitar altura para que no sean gigantes */
    object-fit: contain; /* Asegurar que la imagen/video se ajuste sin cortarse */
}

/* Para embeds de YouTube */
.embed-responsive {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    overflow: hidden;
}
.embed-responsive-16by9::before {
    padding-top: 56.25%; /* 16:9 Aspect Ratio */
    display: block;
    content: "";
}
.embed-responsive .embed-responsive-item {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.title-block {
    padding: 1.5rem;
    width: 100%; /* Ocupa siempre el 100% */
}
.quote-block {
    border-left: 5px solid #ccc;
    padding-left: 1.5rem;
    font-style: italic;
}
.slider-block .carousel-item img {
    max-height: 400px;
    object-fit: contain; /* Para que las imágenes no se deformen */
}
.module-content-area,
.module-resources-area {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* Opcional: mejora el espaciado entre elementos */
}

.resources-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.modulo-seccion-contenido, .recursos-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Estilos para la nueva vista de curso */

/* Contenedores flex para que los anchos de bloque funcionen */
.modulo-seccion-contenido, .recursos-flex-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

/* Estilo para el enlace activo en la barra lateral de módulos */
#curso-modulos-sidebar .list-group-item.active {
    background-color: #a9e0a1; /* Tu color primario */
    border-color: #a9e0a1;
    color: white;
    font-weight: bold;
}

/* Estilos para hacer los videos responsivos */

.video-responsive-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* Proporción 16:9 (9 / 16 = 0.5625) */
  height: 0;
  overflow: hidden;
  width: 100%;
  background-color: #000; /* Fondo negro mientras carga */
  border-radius: .5rem;   /* Bordes redondeados */
}

.video-responsive-wrapper iframe,
.video-responsive-wrapper video,
.video-responsive-wrapper .plyr {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Estilos para el bloque de Frase/Mención */

.curso-bloque .blockquote {
  position: relative; /* Needed for the quote icon */
  padding: 1rem 1.5rem;
  margin: 1rem 0;
  border-left: 5px solid #a9e0a1; /* Your primary color for the left border */
  background-color: #f8f9fa; /* A light background color */
  border-radius: 0 .5rem .5rem 0;
}

/* Style for the main text of the quote */
.curso-bloque .blockquote p {
  font-size: 1.1rem;
  font-style: italic;
  color: #666;
}

/* Style for the author/footer */
.curso-bloque .blockquote .blockquote-footer {
  margin-top: 0.5rem;
  font-style: normal;
  color: #888;
}

/* Adds the large quotation mark icon */
.curso-bloque .blockquote::before {
  content: '“'; /* You can also use an icon font like Font Awesome: content: '\f10d'; font-family: 'Font Awesome 5 Free'; */
  position: absolute;
  left: -10px;
  top: -10px;
  font-size: 4rem;
  color: rgba(0, 0, 0, 0.08);
  font-family: serif;
  line-height: 1;
}

/* --- Estilos para Diseño Responsivo en Móviles --- */

/* Se aplica solo a pantallas con un ancho máximo de 767px (móviles y tablets en vertical) */
@media (max-width: 767px) {

  /* Forzamos a que todos los bloques de contenido y recursos ocupen el 100% del ancho */
  .modulo-seccion-contenido .curso-bloque,
  .recursos-flex-container .curso-bloque {
    flex-basis: 100% !important; /* !important es crucial para sobreescribir el estilo en línea que pone el JS */
  }

  /* Opcional: Ajustar el layout principal para que la barra de módulos se ponga arriba */
  #mis-cursos-contenido .row {
    display: flex;
    flex-direction: column;
  }
}

.preserve-whitespace {
  white-space: pre-wrap;
}

.recurso-imagen-clickable .card {
    cursor: pointer;
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.recurso-imagen-clickable .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15)!important;
}

.modal-personalizado{
  max-width: 90% !important;
}

@media (min-width: 1200px) {
    .modal-personalizado {
        max-width: 90% !important;
    }
}