.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;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Ocultar el desbordamiento en el cuerpo de la modal */
}

/* Habilitar el desplazamiento solo en el contenido de bs-stepper */
.modal-recursos .bs-stepper-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(85vh); /* Limitar la altura para habilitar el scroll dentro de esta sección */
}

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


#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;
}
.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;
}