/* CSS Document */

.bg-l {
  background-color: #768CE2 !important;
}

.bg-d {
  background-color: #28a745 !important;
}

.bg-r {
  background-color: #F58F24 !important;
}

.bg-t {
  background-color: #D73D38 !important;
}
.bg-j {
  background-color: #F5D22A;
}
.bg-cl {
  background-color: #6F6ABA;
}
.bg-gris { background-color: #e0e0e0; border-radius: 12px; height: 25px; flex-grow: 1; }

.progress-container {
	position: relative;
	width: 100%;
	height: 32px;
	background-color: #e0e0e0;
	border-radius: 32px;
	overflow: hidden;
	
}
.progress-container.jpos {	
	cursor: pointer;
}
.col-1.progjuego {
    padding-right: 0;
    padding-left: 0;
}
.firstPos{
	background-color: #D9BE4C;	
}
.secondPos{
	background-color: #93949B;	
}
.thirdPos{
	background-color: #C07A50;	
}
.progress-container.jpos img {
    width: 20px;
    margin-right: 0.4em;
}
.progress-bar-custom {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #333;
	font-weight: 900;
	border-radius: 32px;
	min-width: 30%;
}
.icono-ojo img {
    width: 20px;
	margin-left: 5px;
}
.col-aula {
    width: 4%;
}
.nombre-estudiante {
	font-weight: bold;
	color: #333;
}
.aulaprogunihead{
	font-weight: 900;
	margin-bottom: 1em;
}
.progresos-uni .numerocurso{
	min-height: 30vh;
}

.nombre-estudiante a{
	text-decoration: none;
	color: #333;	
}
.cont-puntuaciones .row:nth-child(odd), .punTotales {
	background-color: #f0f0f0;
	padding: 0.5em 0;
}
.aulaj {
    margin-left: auto;
	text-align: center;
}

.holdon-message {
	font-size: 14px;
	color: #555;
}
.highlight-row {
	background-color: #f195bf; /* Ajusta el color a tu gusto */
	color: #000; /* Texto oscuro, por contraste */
	font-weight: bold; 
	margin-right: 0px;
}
.container-ranking{
	width: 95%;
	margin: 0 auto;
}
.listadoprogresos {
    max-height: calc(100vh - 20vh);
    overflow: auto;
	background-color: #FFF;
    border-radius: 1em;
}
.cabeceraStatic {
	position: sticky;
	top: 0;
	z-index: 9;           /* para que quede encima del scroll */
	background: #fff;      /* o el color de fondo que necesites */
}
.cont-puntuaciones .row{
	margin-top: .5em;
    margin-right: 0;
    margin-left: 0;
}
.cabeceraStatic .row{
	margin-top: .5em;
    margin-right: 0;
    margin-left: 0;
    margin-bottom: 0;
}
/* Contenedor scrollable */
.scrollable-area {
  max-height: 85vh;  /* Ajusta a tu necesidad */
  overflow-y: auto;
  overflow-x: hidden;
  /* Quita márgenes y padding si es necesario
  margin: 0;
  padding: 0; */
}
.scrollable-area img {
    width: 17px;
    margin: 0 0.2em;
}
.col-auto {
    text-align: center;
}
.aulaprogunihead .col{
	margin-left: .5em;
}
/* Scrollbar en navegadores basados en WebKit (Chrome, Safari, Edge Chromium) */
.scrollable-area::-webkit-scrollbar {
	width: 10px;      /* Grosor total de la barra */
	background: none; /* O un color si quieres que se vea la pista */
	border-radius: 20px;
}

/* Fondo (track) de la barra */
.scrollable-area::-webkit-scrollbar-track {
  background: #d9d9d9; /* Color de la pista, parecido a la imagen */
  border-radius: 25px;  /* Redondeo de las esquinas */
}

/* El thumb: la parte que se desplaza */
.scrollable-area::-webkit-scrollbar-thumb {
  background-color: #b1b1b1; /* Color del thumb */
  border-radius: 30px;       /* Muy redondeado para simular cilindro */
  border: 2px solid #d9d9d9; /* Simula un hueco alrededor */
}

/* Hover sobre el thumb */
.scrollable-area::-webkit-scrollbar-thumb:hover {
  background-color: #a0a0a0; /* Más oscuro al pasar el ratón */
}
.info-icon {
  display: inline-block;
  cursor: pointer;
  font-weight: bold;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  line-height: 15px;
  text-align: center;
  background-color: #eee;
  color: #333;
  margin-left: 5px;
}

.info-text {
  display: none; /* Oculto por defecto */
  position: fixed;
  background-color: #333;
  color: #fff;
  padding: 6px 8px;
  border-radius: 4px;
  margin-left: 5px;
  z-index: 999; 
  white-space: wrap;
  max-width: 26vw;
}
.cabeceraProg {
    display: flex;
    justify-content: space-between;
	padding: .5em;
	background-color: #F0F0F0;
	border-radius: 1em 1em 0 0;
}
.profile-download img{
	max-width: 40px;
}
span.alumnTitle {
	font-size: 2.5em;
    font-weight: 800;
}
.swal2-popup.swal-wide {
	width: 65vw !important;
	max-width: 1320px;
}
.bg-ar {
  background-color: #818181;
  min-width: 40%;
}
.bg-at {
  background-color: #818181;
  min-width: 40%;
}

.profesional .cont-puntuaciones .row, .profesional .aulaprogunihead, .punTotales{
	margin-top: 0 !important;
}
.profesional .progress-bar-custom {
	min-width: 35%;
}
.profesional .bg-at, .profesional .bg-ar, .profesional .col-1 .bg-gris{
	min-width: 50%;
}
.profesional .punTotales{
	padding: .2rem;
	background-color: #9d9999;
}
/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) { 

}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) { 
	.progresos-uni .numerocurso{
		min-height: 65vh;
		margin-bottom :0;
	}
	.swal2-popup.swal-wide {
		width: 95vw !important;
		max-width: 1320px;
	}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
}

/* X-Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) { 
}