.color-line {
  background: #f7f9fa;
  width: 100%;
  height: 6px;
  position: absolute;
  top: 0px;
  left: 0px;
  border-bottom: 0 solid #ebe9f1;
  border-top-left-radius: 0.357rem;
  border-top-right-radius: 0.357rem;
  background-image: -webkit-linear-gradient(left,#34495e,#34495e 25%,#9b59b6 25%,#9b59b6 35%,#3498db 35%,#3498db 45%,#62cb31 45%,#62cb31 55%,#ffb606 55%,#ffb606 65%,#e67e22 65%,#e67e22 75%,#e74c3c 85%,#e74c3c 85%,#c0392b 85%,#c0392b 100%);
  background-image: -moz-linear-gradient(left,#34495e,#34495e 25%,#9b59b6 25%,#9b59b6 35%,#3498db 35%,#3498db 45%,#62cb31 45%,#62cb31 55%,#ffb606 55%,#ffb606 65%,#e67e22 65%,#e67e22 75%,#e74c3c 85%,#e74c3c 85%,#c0392b 85%,#c0392b 100%);
  background-image: -ms-linear-gradient(left,#34495e,#34495e 25%,#9b59b6 25%,#9b59b6 35%,#3498db 35%,#3498db 45%,#62cb31 45%,#62cb31 55%,#ffb606 55%,#ffb606 65%,#e67e22 65%,#e67e22 75%,#e74c3c 85%,#e74c3c 85%,#c0392b 85%,#c0392b 100%);
  background-image: linear-gradient(to right,#34495e,#34495e 25%,#9b59b6 25%,#9b59b6 35%,#3498db 35%,#3498db 45%,#62cb31 45%,#62cb31 55%,#ffb606 55%,#ffb606 65%,#e67e22 65%,#e67e22 75%,#e74c3c 85%,#e74c3c 85%,#c0392b 85%,#c0392b 100%);
  background-size: 100% 6px;
  background-position: 50% 100%;
  background-repeat: no-repeat
}

/* Estilos para el reproductor fijo */
#reproductor-fijo {
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}

#audio-global {
  background: #f8f9fa;
  border-radius: 20px;
  padding: 5px;
}

#cerrar-reproductor {
  color: #6c757d;
}

#cerrar-reproductor:hover {
  color: #dc3545;
}

/* Asegurar que la tabla no quede detrás del reproductor */
#tablaMultimedia {
  margin-bottom: 70px !important;
}




	/* DATATABLE BANCORECURSOS MODAL */
	/* Estilo para el encabezado de la tabla */
  #apps-table thead {
    background-color: #F3F2F7;
}

/* Estilo para las filas de la tabla */
#apps-table tbody tr {
    border-bottom: 1px solid #EBE9F1;
}

.dataTables_length{
	margin-left: 20px;
	margin-right: 0px;
}

.dataTables_filter{
	margin-left: 0px;
	margin-right: 20px;
}

#tablaEstudiantes_wrapper .dataTables_filter{
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: flex-end;
	width: 100%;
	padding-right: 20px;
	margin-right: 0;
}

/* Ajustes de altura para helper cards de resultados */
#modalResultadosEvaluacion .resultados-evaluacion-helper-card .card-header {
    padding: 8px 12px;
    height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

#modalResultadosEvaluacion .resultados-evaluacion-helper-card h2 {
    font-size: 1.1rem;
    line-height: 1.1;
    margin-bottom: 2px;
}

#modalResultadosEvaluacion .resultados-evaluacion-helper-card .card-text {
    font-size: 0.75rem;
    margin-bottom: 0;
}

#modalResultadosEvaluacion .resultados-evaluacion-helper-card .avatar {
    width: 32px;
    height: 32px;
}

#modalResultadosEvaluacion .resultados-evaluacion-helper-card .avatar-content {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dataTables_paginate{
	margin-left: 0px;
	margin-right: 20px !important;
}
.dataTables_info{
	margin-left: 20px;
	margin-right:0px;
}
.bs-stepper.vertical .bs-stepper-content {
    width: 100%;
    padding: 0 !important;
}

/* Estilo específico para la modal de recursos */
.modal-recursos .modal-dialog {
    max-width: 90%; /* Mantener la modal en un tamaño razonable */
    margin: 0.75rem auto; /* Ajustar el margen para evitar que ocupe toda la pantalla */
}

.modal-recursos .modal-content {
    display: flex;
    flex-direction: column;
    height: 95vh; /* Limitar la altura de la modal */
}

.modal-recursos .modal-body {
    flex: 1 1 auto;
    min-height: 0; /* imprescindible: sin esto el hijo con scroll no se encoge */
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ocultar el desbordamiento en el cuerpo de la modal */
}

/* La cadena flex debe poder encogerse en todos sus niveles para que el scroll
   quede dentro del contenido y no desborde el modal. */
.modal-recursos .vertical-wizard,
.modal-recursos #wizard-container {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    margin-bottom: 0;
}
.modal-recursos #wizard-container {
    flex-direction: row; /* menú a la izquierda en escritorio */
}
/* Menú lateral en una sola columna: Vuexy trae flex-wrap:wrap en el header y,
   al faltar altura, los pasos saltaban a una segunda columna dejando un hueco
   blanco abajo. Aquí se mantiene la columna única y, si no caben, el menú
   hace su propio scroll vertical. */
/* El carrusel envuelve el header en .bs-stepper-nav-wrap; ese nivel extra debe
   comportarse igual que el header para no romper el layout flex. */
.modal-recursos .bs-stepper-nav-wrap {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    min-height: 0;
    max-height: 100%;
}
.modal-recursos .bs-stepper-nav-wrap .bs-stepper-header {
    flex: 1 1 auto;
}
/* El loader "Cargando secciones…" se inserta como hermano del header (usa
   header.parentNode), que ahora es este wrapper: debe cubrirlo completo. */
.modal-recursos .bs-stepper-nav-wrap .wizard-menu-loader {
    position: absolute;
    inset: 0;
    z-index: 6;
}
/* Mientras el menú carga no deben verse las flechas */
#wizard-container.menu-loading .bs-stepper-nav-arrow {
    display: none !important;
}

.modal-recursos .bs-stepper-header {
    flex: 0 0 auto;
    flex-wrap: nowrap !important;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    align-content: flex-start;
    padding: .75rem 1rem; /* Vuexy trae 1.5rem: demasiado alto para 6 pasos */
}

/* Pasos más compactos: con el padding original el menú no cabía en pantallas
   de poco alto y se disparaba el salto de columna. */
.modal-recursos .bs-stepper.vertical .bs-stepper-header .step .step-trigger {
    padding: .55rem 0 !important;
}
.modal-recursos .bs-stepper-header .step {
    margin-top: 0;
    margin-bottom: 0;
}

/* Habilitar el desplazamiento solo en el contenido de bs-stepper.
   La altura la reparte flex (min-height:0 permite que el hijo se encoja y
   aparezca su scroll). Antes había un height:85vh fijo que, al apilarse el
   menú arriba en pantallas chicas, desbordaba el modal y dejaba el contenido
   fuera de alcance. */
.modal-recursos .bs-stepper-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.vertical-wizard .content {
    padding: 10px;
}

/* ==========================================================================
   Banco de recursos — responsive bajo 1024px
   El menú lateral pasa a ser una barra horizontal scrolleable arriba y el
   contenido queda debajo, ocupando el alto restante con su propio scroll.
   ========================================================================== */
@media (max-width: 1024px) {
    .modal-recursos .modal-dialog {
        max-width: 100%;
        margin: 0.5rem auto;
    }
    .modal-recursos .modal-content {
        height: calc(100vh - 1rem); /* aprovecha el alto disponible */
    }

    /* Menú arriba, contenido abajo. Los min-width:0 evitan que la cadena flex
       se estire al ancho del contenido en vez de al del modal. */
    .modal-recursos #wizard-container {
        flex-direction: column;
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }
    .modal-recursos .vertical-wizard,
    .modal-recursos .modal-body {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Barra horizontal: los pasos se desplazan lateralmente si no caben */
    /* Barra horizontal scrolleable. El padding lateral reserva el canal para
       las flechas del carrusel (se activa por JS al no caber los pasos). */
    .modal-recursos .bs-stepper-header {
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: center; /* centrados mientras quepan todos */
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden !important;
        border-right: none !important;
        border-bottom: 1px solid #ebe9f1 !important;
        padding: 0 .25rem !important;
        gap: .15rem;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
        -ms-overflow-style: none;
        -webkit-overflow-scrolling: touch;
    }
    .modal-recursos .bs-stepper-header::-webkit-scrollbar { display: none; }

    /* Los conectores entre pasos no aportan nada en modo barra horizontal y
       roban ancho (el JS les pone display:block inline). */
    .modal-recursos #wizard-container .bs-stepper-header .bs-stepper-line,
    .modal-recursos #wizard-container .bs-stepper-header .line {
        display: none !important;
    }

    /* Ancho fijo por paso: garantiza que el texto no se comprima y que, cuando
       no caben todos, el header desborde de verdad y se active el carrusel.
       Sin esto los pasos se encogían para caber y scrollWidth nunca superaba
       al clientWidth, por lo que las flechas no llegaban a mostrarse. */
    /* banco_recursos.js aplica display:flex INLINE a cada paso visible, lo que
       gana sobre el CSS: por eso los pasos se encogían para caber y el header
       nunca desbordaba. Con !important en el ancho se impone la medida fija y
       el carrusel puede activarse. */
    .modal-recursos #wizard-container .bs-stepper-header .step {
        flex: 0 0 104px !important;
        width: 104px !important;
        min-width: 104px !important;
        max-width: 104px !important;
        scroll-snap-align: start;
    }

    /* Icono arriba, texto abajo, ambos centrados entre sí y en su espacio */
    .modal-recursos #wizard-container .bs-stepper-header .step .step-trigger,
    .modal-recursos #wizard-container .bs-stepper.vertical .bs-stepper-header .step .step-trigger {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center;
        width: 100%;
        height: 100%;
        padding: .55rem .25rem !important;
        gap: .3rem;
    }

    /* El avatar del paso no debe deformarse ni desalinearse */
    .modal-recursos .bs-stepper-header .bs-stepper-box {
        margin: 0 !important;
        flex: 0 0 auto;
    }

    /* Etiqueta compacta bajo el icono. Se usa #wizard-container para ganarle a
       las reglas por ID del propio modal (Apps Educativas fija min-width:120px
       en su label, lo que descentraba el texto respecto al icono). */
    .modal-recursos #wizard-container .bs-stepper-header .bs-stepper-label,
    .modal-recursos #wizard-container .step[data-target="#apps"] .bs-stepper-label {
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        width: 100%;
        text-align: center !important;
        display: block;
    }
    /* El texto puede ocupar dos líneas dentro del ancho del paso ("Apps
       Educativas"); nowrap lo desbordaría fuera de su caja. */
    .modal-recursos #wizard-container .bs-stepper-header .bs-stepper-title,
    .modal-recursos #wizard-container .step[data-target="#apps"] .bs-stepper-title {
        display: block !important;
        font-size: .68rem;
        line-height: 1.15;
        white-space: normal !important;
        text-align: center !important;
        word-break: break-word;
    }

    /* --- Carrusel: flechas laterales cuando los pasos no caben --- */
    /* En horizontal el wrapper ocupa el ancho completo y no crece en alto.
       min-width:0 es imprescindible: sin él, un item flex se estira hasta el
       ancho de su contenido (748px con 7 pasos) y el header nunca desborda,
       por lo que no aparece scroll ni flechas. */
    .modal-recursos .bs-stepper-nav-wrap {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        max-height: none;
        flex: 0 0 auto;
    }
    .modal-recursos .bs-stepper-nav-wrap .bs-stepper-header {
        max-width: 100%;
        min-width: 0;
    }
    /* El JS del banco inyecta min-height:64px por ID; aquí sobra */
    .modal-recursos #wizard-container .bs-stepper-header {
        min-height: 0 !important;
    }
    .modal-recursos .bs-stepper-nav-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 0;
        background: #fff;
        color: #7367f0;
        cursor: pointer;
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 3;
        font-size: 21px;
        font-weight: 600;
        line-height: 1;
        box-shadow: 0 2px 6px rgba(34, 41, 47, .18);
        animation: bancoArrowParpadeo 1.4s ease-in-out infinite;
    }
    @keyframes bancoArrowParpadeo {
        0%, 100% { opacity: 1; }
        50% { opacity: .35; }
    }
    .modal-recursos .bs-stepper-nav-arrow--prev { left: 2px; }
    .modal-recursos .bs-stepper-nav-arrow--next { right: 2px; }
    /* Con scroll activo se reserva el canal lateral y los pasos se alinean
       al inicio (centrarlos haría saltar la posición al desplazar) */
    .modal-recursos .bs-stepper-nav-wrap.has-scroll .bs-stepper-header {
        padding: 0 28px !important;
        justify-content: flex-start;
    }

    /* Sin el padding-top de escritorio, que aquí solo roba altura útil */
    .modal-recursos .bs-stepper-content,
    .modal-recursos .bs-stepper.vertical .bs-stepper-content {
        padding-top: .5rem !important;
    }

    /* Las tablas anchas se desplazan dentro de su contenedor, no del modal */
    .modal-recursos .dataTables_wrapper {
        overflow-x: auto;
    }
}


#apps-table th:nth-child(2), #apps-table td:nth-child(2) {
    min-width: 180px !important;
    max-width: 180px !important;
    text-align: center;
}


.dataTables_info, .dataTables_paginate {
    margin-bottom: 20px !important; /* Ajusta el margen inferior */
}

/* Fondo azul oscuro SOLO para el body de la modal de video */
.modal-vimeo .modal-body {
    background-color: rgb(46, 55, 84) !important; /* Fuerza el color si hay otras reglas */
    padding: 0; /* Elimina padding para que el iframe ocupe todo el espacio */
}

/* Estilos para el iframe de Vimeo dentro de esta modal */
.modal-vimeo iframe {
    width: 100%;
    height: 100%;
    border: none;
    background-color: rgb(46, 55, 84); /* Mismo color de fondo por si el video no carga */
}

/* Padding izquierdo en la tabla de recursos Genially (modal Mis recursos) */
#preview-resources-genially-table th.table-resource-col {
    padding-left: 12px !important;
}
#preview-resources-genially-table td.table-resource-cell {
    padding-left: 12px !important;
}

/* Padding izquierdo en la tabla de recursos YouTube (modal Mis recursos) */
#preview-resources-youtube-table th.table-resource-col {
    padding-left: 12px !important;
}
#preview-resources-youtube-table td.table-resource-cell {
    padding-left: 12px !important;
}

/* Padding izquierdo en la tabla de recursos Google Drive (modal Mis recursos) */
#preview-resources-gdrive-table th.table-resource-col {
    padding-left: 12px !important;
}
#preview-resources-gdrive-table td.table-resource-cell {
    padding-left: 12px !important;
}

/* Padding izquierdo en la tabla de recursos GeoGebra (modal Mis recursos) */
#preview-resources-geogebra-table th.table-resource-col {
    padding-left: 12px !important;
}
#preview-resources-geogebra-table td.table-resource-cell {
    padding-left: 12px !important;
}

/* Padding izquierdo en la tabla de recursos Canva (modal Mis recursos) */
#preview-resources-canva-table th.table-resource-col {
    padding-left: 12px !important;
}
#preview-resources-canva-table td.table-resource-cell {
    padding-left: 12px !important;
}

/* Padding izquierdo en la tabla de recursos Padlet (modal Mis recursos) */
#preview-resources-padlet-table th.table-resource-col {
    padding-left: 12px !important;
}
#preview-resources-padlet-table td.table-resource-cell {
    padding-left: 12px !important;
}

/* Padding izquierdo en la tabla de recursos Mentimeter (modal Mis recursos) */
#preview-resources-mentimeter-table th.table-resource-col {
    padding-left: 12px !important;
}
#preview-resources-mentimeter-table td.table-resource-cell {
    padding-left: 12px !important;
}

/* Padding izquierdo en la tabla de recursos Spotify (modal Mis recursos) */
#preview-resources-spotify-table th.table-resource-col {
    padding-left: 12px !important;
}
#preview-resources-spotify-table td.table-resource-cell {
    padding-left: 12px !important;
}

/* MODAL INTERACTIVOS */
/* Contenedor del iframe */
#modal-interactivo .iframe-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
}
#modal-interactivo .modal-dialog {
  max-width: 1000px;
  width: 995px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

/* Estilos para el modal de Articulate */
/* MODAL ARTICULATE FULLSCREEN */
#modal-interactivo-articulate .modal-dialog {
  width: 100vw;
  height: 100vh;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
}

/* Ajuste del modal-body (espacio real disponible) */
#modal-interactivo-articulate .modal-body {
  width: 100%; /* Ocupa todo el ancho disponible */
  height: calc(100vh - 56px); /* Altura total menos el header (ajusta según el tamaño del header) */
  display: flex;
  justify-content: center;
  align-items: top;
  overflow-x: hidden;
  overflow-y: auto;
  position: relative;
  padding: 0;
}

#iframe-interactivo-articulate{
  display: block; 
  margin: 0 auto;
}

/* MODAL BANCO DE RECURSOS */
.rotulo {
  font-size: 0.85rem; /* tamaño ligeramente menor que el texto principal */
  font-weight: 800;
  color: #BCBCBC;    /* color por defecto (gris) */
  margin: 0;         /* sin margen por defecto */
  line-height: 1;    /* compacta */
}

/* Variante para temas oscuros */
.dark-layout .rotulo {
  color: #b9bcc2;
}

.badge-subcategoria {
  display: inline-block;
  padding: 0.25rem 0.85rem;
  border-radius: 999px;
  background-color: #ff8855;
  color: #fff;
  font-weight: 600;
  font-size: 0.78rem;
  white-space: nowrap;
}

.dark-layout .badge-subcategoria {
  color: #fff;
}

/* Datatable Banco de Recursos (Documentos): filas de agrupación */
#tablaDocumentos tr.group,
#tablaDocumentos tr.group:hover {
  background-color: #f3f4f7 !important;
}

#tablaDocumentos tr.group td {
  background-color: #f3f4f7 !important;
  color: #5e5873 !important;
  font-weight: 600;
}

/* Datatable Banco de Recursos (Evaluaciones): filas de agrupación */
#tablaEvaluaciones tr.group,
#tablaEvaluaciones tr.group:hover {
  background-color: #f3f4f7 !important;
}

#tablaEvaluaciones tr.group td {
  background-color: #f3f4f7 !important;
  color: #5e5873 !important;
  font-weight: 600;
}

/* Datatable Banco de Recursos (Interactivos): filas de agrupación */
#tablaInteractivos tr.group,
#tablaInteractivos tr.group:hover {
  background-color: #f3f4f7 !important;
}

#tablaInteractivos tr.group td {
  background-color: #f3f4f7 !important;
  color: #5e5873 !important;
  font-weight: 600;
}
.modal .modal-header {
    background-color: #485883 !important;
}

h5#modalToggleLabel {
    color: white;
}

small#modal-libro {
    color: #a5d9ff;
}

.capaDocenteModal .modal-body{
  padding: 0px !important;
}



.btn-close-capa {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0.5rem;
  opacity: 0.8;
  transition: opacity 0.15s ease;
  filter: invert(1);
}
.btn-close-capa:hover {
  opacity: 1;
}
.btn-close-capa:focus {
  outline: 0;
  box-shadow: none;
}

/* Google Picker z-index override */
.picker-dialog{z-index:99999999 !important;position:fixed !important;}
.picker-dialog-bg,.picker-modal-bg{z-index:99999998 !important;position:fixed !important;}

/* Google Picker positioning tweaks */
.picker-dialog {
  top: 5vh !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  max-height: 90vh !important;
  max-width: 90vw !important;
  overflow: auto !important;
}
.picker-dialog-bg,
.picker-modal-bg {
  width: 100vw !important;
  height: 100vh !important;
}

/* Fix global Select2 arrow rendering (evita flecha deformada) */
.select2-container--default .select2-selection--single {
  min-height: 2.714rem;
  display: flex;
  align-items: center;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 2.714rem;
  padding-right: 2rem;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 2.714rem !important;
  width: 1.75rem !important;
  right: 0.35rem !important;
  top: 0 !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
  display: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid #6e6b7b;
  border-bottom: 2px solid #6e6b7b;
  transform: translate(-50%, -65%) rotate(45deg);
  pointer-events: none;
}

.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow::after {
  transform: translate(-50%, -35%) rotate(-135deg);
}