/* BODY */
body {
	margin: 0px;
	font-family: 'Verdana';
	background: url(../web_images/background_fmb.png) no-repeat center center fixed;
    background-size: cover;
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* Menu principal */
.topnav {
  overflow: hidden;
  background-color: #333;
}

.topnav a{
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.logo img {
	width: 200px; 
    display: block;
}

.big_logo {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	justify-items: center;
}

.welcome {
	display: flex;
	justify-content: center;
}

.big_logo_ref {
	display: flex;
	justify-content: center;
	width: 500px;
}

.big_logo img {
	width: 500px; 
    display: block;
    background: #000;
    border: 2px solid yellow;
    border-radius: 10px;
    margin: 10px;
    padding: 20px;
    box-shadow: 0 0 10px yellow;
}

.menus {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-items: center;
}

.menu,
.menu_cg,
.menu_mv,
.menu_mv3,
.menu_cc,
.menu_cs,
.menu_ca,
.menu_cr,
.menu_ci,
.menu_us,
.menu_uss,
.menu_mm,
.menu_tv,
.menu_cu{
    background: #000;
    border-radius: 10px;
    margin: 10px;
    padding: 20px;
    width: 200px;
    text-align: center;
}

.menu_cg{
	border: 1px solid yellow;
    box-shadow: 0 0 10px yellow;
}

.menu_mv{
	border: 1px solid #17B169;
    box-shadow: 0 0 10px #17B169;
}

.menu_mv3{
	border: 1px solid #a552a0;
    box-shadow: 0 0 10px #a552a0;
}

.menu_cc{
	border: 1px solid sienna;
    box-shadow: 0 0 10px sienna;
}

.menu_cs{
	border: 1px solid maroon;
    box-shadow: 0 0 10px maroon;
}

.menu_ca{
	border: 1px solid white;
    box-shadow: 0 0 10px white;
}

.menu_cr{
	border: 1px solid linen;
    box-shadow: 0 0 10px linen;
}

.menu_ci{
	border: 1px solid red;
    box-shadow: 0 0 10px red;
}

.menu_us{
	border: 1px solid #00e5ff;
    box-shadow: 0 0 10px #00e5ff;
}

.menu_uss{
	border: 1px solid #eb8400;
    box-shadow: 0 0 10px #eb8400;
}

.menu_mm{
	border: 1px solid #5499c7;
    box-shadow: 0 0 10px #5499c7;
}

.menu_tv{
	border: 1px solid #d2d500;
    box-shadow: 0 0 10px #d2d500;
}

.menu_cu{
	border: 1px solid white;
    box-shadow: 0 0 10px white;
}

.menu p {
    margin: 10px 0;
}

.cg,
.mv,
.mv3,
.cc,
.cs,
.ca,
.cr,
.ci,
.us,
.uss,
.mm,
.tv,
.cu{
	text-decoration: none;
}

.cg, cg:visited {
	color: yellow;	
}

.mv, mv:visited {
	color: #17B169;	
}

.mv3, mv3:visited {
	color: #a552a0;	
}

.cc, cc:visited {
	color: sienna;	
}

.cs, cs:visited {
	color: maroon;	
}

.ca, ca:visited {
	color: white;	
}

.cr, cr:visited {
	color: linen;	
}

.ci, ci:visited {
	color: red;	
}

.us, us:visited {
	color: #00e5ff;	
}

.uss, uss:visited {
	color: #eb8400;	
}

.mm, mm:visited {
	color: #5499c7;	
}

.tv, tv:visited {
	color: #d2d500;	
}

.cu, cu:visited {
	color: white;	
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

.dropdown:hover .dropdown-content {
  display: block;
}

/* Selector de archivos multimedia */
.media-selector {
    margin-bottom: 20px;
}

.media-selector h2 {
    margin-bottom: 10px;
    font-size: 20px;
    color: #444;
}

.media-selector select {
    padding: 8px;
    font-size: 16px;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
}

/* Contenedor para el reproductor multimedia */
.media-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 20px 0;
    padding: 20px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
}

.media-container video {
    width: 100%;
    max-width: 560px;
    height: auto;
    border: none;
    outline: none;
}

/* Contenedor de letras */
.media-lyrics {
    background-color: #f9f9f9; /* Fondo claro para resaltar la letra */
    border: 1px solid #ddd; /* Borde sutil */
    padding: 10px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    margin-top: 10px; /* Separación del reproductor */
    font-size: 16px; /* Tamaño de fuente */
    color: #333; /* Color de texto */
    text-align: left;
    line-height: 1.6; /* Altura de línea para mejor legibilidad */
}

.media-lyrics p {
    margin: 0;
}

.media-lyrics strong {
    color: #000; /* Resaltar el título */
}

.carrera-container {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas se muevan a una nueva línea si no hay espacio */
    justify-content: center; /* Alinea las tarjetas al inicio de la fila */
    gap: 10px; /* Espacio entre las tarjetas */
    margin: 20px;
}

.carrera-card {
    width: 120px;
    height: 70px;
    cursor: pointer;
    border: 1px solid #ddd;
    border-radius: 10px;
    transition: transform 0.2s;
    background: #f2f2f2;
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    padding: 8px 12px;
    margin: 5px;
    box-shadow: 1px 1px 3px rgba(0,0,0,0.1);
}

.carrera-card:hover {
    background: #ddd;
    transform: scale(1.05);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.carrera-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ocupa todo el espacio dentro de la tarjeta */
    height: 100%;
}

.carrera-logo {
	width: 100%;
    max-height: 60px;
    object-fit: contain;
}

@media screen and (max-width: 600px) {
    .carrera-container {
	    gap: 5px; /* Espacio entre las tarjetas */
	}
	
	.carrera-card {
    	width: 80px; /* Ajusta el tamaño de las tarjetas */
	    height: 60px;
	}
	
	.carrera-logo {
		max-height: 70px;
	}
}

.resumen-card {
    position: relative;
    padding: 20px;
    margin: 20px auto;
    max-width: 700px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    background-image: url('');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: white;
    overflow: hidden;
}

/* Capa oscura semitransparente para mejorar legibilidad del texto */
.resumen-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.70); /* Opacidad ligera */
    border-radius: 12px;
    z-index: 0;
}

/* Para que el contenido esté encima del fondo oscuro */
.resumen-card > * {
    position: relative;
    z-index: 1;
}


.resumen-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 15px;
}

.resumen-images {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
}

.resumen-logo,
.resumen-trofeo {
    width: 120px; /* o el tamaño que prefieras */
    height: auto;
    object-fit: contain;
    border-radius: 8px;
    background: white;
    padding: 5px;
}

.resumen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px;
    font-size: 16px;
}

/* MEDIA QUERY para pantallas de menos de 500px */
@media (max-width: 500px) {
    .resumen-card {
        padding: 15px;
    }

    .resumen-title {
        font-size: 20px;
    }

    .resumen-logo,
    .resumen-trofeo {
        height: 80px;
    }

    .resumen-grid {
        grid-template-columns: 1fr;
        font-size: 15px;
    }

    .resumen-images {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
}

.palmares-card {
    background-color: #aaa;
    border-radius: 1rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    padding: 1.5rem;
    margin-bottom: 2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.palmares-title {
    text-align: center;
    margin-bottom: 1rem;
    font-size: 1.8rem;
}

.tabla-palmares {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
}

.tabla-palmares th, .tabla-palmares td {
    padding: 0.5rem;
    border: 1px solid #ddd;
    text-align: center;
}

.tabla-palmares tr:nth-child(even) {
    background-color: #f9f9f9;
}

@media (max-width: 600px) {
    .tabla-palmares th, .tabla-palmares td {
        font-size: 0.85rem;
        padding: 0.3rem;
    }

    .palmares-title {
        font-size: 1.4rem;
    }
}

@media screen and (max-width: 600px) {
  .big_logo img, .big_logo_ref {
  	width: 200px;
  }
  
  h1{
	font-size: 1.3em;
  }
  
  /* Selector de archivos multimedia */
  .media-selector {
    margin-bottom: 2px;
  }

  .media-selector h2 {
    margin-bottom: 1px;
    font-size: 8px;
  }

  .media-selector select {
    padding: 4px;
    font-size: 7px;
 }

  /* Contenedor para el reproductor multimedia */
  .media-container {
    margin: 2px 0;
    padding: 2px;
    font-size: 8px;
  }

  .media-container video {
    max-width: 280px;
  }

  /* Contenedor de letras */
  .media-lyrics {
    padding: 1px; /* Espaciado interno */
    border-radius: 5px; /* Bordes redondeados */
    margin-top: 1px; /* Separación del reproductor */
    font-size: 8px; /* Tamaño de fuente */
    line-height: 1.3; /* Altura de línea para mejor legibilidad */
  }
  
  .menus {
    grid-template-columns: repeat(1, 1fr);
  }
  
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
  
  .topnav.responsive {
  	position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a, .topnav.responsive .dropdown {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown-content {
  	position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }  
}

/* FOOTER */
#footer {
  bottom: 0px;
  width: 100%;
  background-color: #333;
  font-size: 10px;
  color: white;
  text-align: center;
  height: 15px;
  position: fixed;
}

/* informacin del equipo en Ciclistas */
.team {
  font-size: 18px;
  display: flex;
  text-align: center; /* Centra horizontalmente */
  margin: 5px;
  align-items: center;
}

.teams, .cyclists {
	overflow-x:auto;
	height:600px;
	overflow:scroll;
}

.stage_profile {
	font-size: 18px;	
}

.profile {
	width:70%;
}

.content {
	margin: 40px;
	background-color: #333;
	border: 1px solid black;
	/*opacity: 0.9;*/
	padding: 20px;
	height:inherit;
	flex: 1;
	border-radius: 15px;
	box-shadow: 0 0 10px #fffff0;
	justify-content: center;
}

/* TO BE REMOVE */
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-item-left {
  background-color: #aaa;
  padding: 10px;
  flex: 30%;
  border-radius: 10px;
  box-shadow: 0 0 10px #ffffff;
}

.flex-item-right {
  background-color:#ccc;
  padding: 10px;
  flex: 70%;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 0 10px #ffffff;
}

.content2 {
  background-color: #aaa;
  padding: 10px;
  position: relative;
  border-radius: 10px;
  box-shadow: 0 0 10px #ffffff;
}

.content3 {
  width: 50%;
  flex: 100%;
  padding: 2px;
  margin: 0 auto;
  box-sizing: border-box;
  margin-bottom: 20px;
  position: relative;
}

.tab {
    display: inline-block;
    padding: 4px;
    background-color: #838383;
    cursor: pointer;
	border-radius: 10px;
}

.tab.active {
    background-color: #333;
    color: white;
}

.tab-content {
    display: none;
    padding: 20px;
    margin-top: 10px;
}

.tab-content.active {
    display: block;
}

table {
  font-family: "Trebuchet MS", Helvetica, sans-serif;
  background-color: #EEEEEE;
  width: 100%;
  text-align: center;
  border-collapse: separate; /* Cambiado a 'separate' para permitir el redondeo */
  border-spacing: 0; /* Eliminar el espacio entre las celdas */
  border-radius: 15px; /* Ajusta el radio según tus necesidades */
  overflow: hidden; /* Asegura que los bordes sean visibles */
}


table tr:nth-child(even) {
  background: #b6b6b6;
}

table th,
table td,
table tbody {
  padding: 3px 2px;
  font-size: 15px;
  position: relative;
}

table th {
  background: #FFFF00;
  font-weight: bold;
}

table th:first-child,
table td:first-child {
  border-left: none; /* Elimina el borde izquierdo en la primera columna */
}

table td.user_tr {
	font-size: 15px;
	align-items: center;
}

table tfoot td {
  font-size: 14px;
}

table tfoot .links {
  text-align: right;
}

table tfoot .links a{
  display: inline-block;
  background: #1C6EA4;
  color: #FFFFFF;
  padding: 2px 8px;
  border-radius: 5px;
}

table.totalpoints th {
  background: #FFFF00;
  border: 1px solid #FFFF00;
}

table.totalpointscc th {
  background: #808000;
  border: 1px solid #808000;
}

table.totalpointsmv1 th {
  background: #16c900;
  border: 1px solid #16c900;
}

table.totalpointsmv3 th {
  background: #a552a0;
  border: 1px solid #a552a0;
}


table.totalpointscs th {
  background: #A52A2A;
  border: 1px solid #A52A2A;
}

/* TO BE CHANGED*/
.user_selections_info, .users_table_info {
    width: 100%;
    overflow-x: auto; /* Agrega scroll horizontal si el contenido es más grande */
}

table {
    width: 100%;
    border-collapse: collapse;
}

table.user_selections tbody td th {
  font-size: 10px;
}

table.races_table th,
table.users_table th,
table.user_records th,
table.user_selections th,
table.stages_table th, 
table.cyclists_table th {
  background: #000000;
  border: 2px solid #000000;
  color: #FFFFFF;
}


.maillot-wrap,
.image-wrap,
.image-wrap-mv,
.image-wrap-cg,
.image-wrap-mv3,
.image-wrap-cc,
.image-wrap-cs,
.image-wrap-jjoo,
.flag{
  width: 60px;
  aspect-ratio: 1 /1;
  margin-right: 5px;
}

.user_info_image,
.user_info_image_cg,
.user_info_image_mv,
.user_info_image_mv3,
.user_info_image_cc,
.user_info_image_cs,
.user_info_image_jjoo,
.user_info_maillot{
  width: 100px;
  aspect-ratio: 1 /1;
}

.medal {
  width: 40px;
  aspect-ratio: 1 /1;
  margin-right: 1px;
}

.race_logo {
  width: 40px;
  margin-right: 5px;
}

.maillot-wrap img {
	background: linear-gradient(to bottom, #000, #888);
	border-radius: 50%; /* Hace que la imagen sea redonda */
	object-fit: cover; /* Asegura que la imagen se ajuste dentro del contenedor redondo */	
}

/* Aplicar regla especfica si la imagen es ms alta que ancha */
.trophy2:is([height*="auto"], [height*="auto"] > [width*="auto"]) {
  max-height: none;
  max-width: 100%;
}

.trophy2 {
  max-height: 100px; /* Altura mxima de 60px */
  width: auto; /* Ancho ajustado automticamente */
  max-width: 100%; /* Ancho mximo del 100% del contenedor */
}

.table-trophies {
    display: flex; /* Utiliza flexbox para alinear las tablas */
    flex-wrap: wrap; /* Permite que las tablas se envuelvan en lneas */
    gap: 10px; /* Espacio entre las tablas */
}

.trophies {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-items: center;
}

.user_info_div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-items: center;
}

.table-trophy {
    display: inline-block; /* Muestra las tablas en lnea */
    width: calc(35% - 10px); /* Calcula el ancho para mostrar dos tablas una al lado de la otra */
    border: 3px solid grey; /* Borde para visualizacin */
}

.trophy-wrap {
  margin-left: 5px;
  display: flex; /* Utilizamos flexbox para controlar el diseo */
  align-items: center; /* Las imgenes se alinearn verticalmente */
  justify-content: center;
}

.trophy-wrap img {
  width: auto;
  height: 40px;
  object-fit: cover;
  margin-left: 1px;
}

.trophy {
	background: linear-gradient(to bottom, #000, #888);
}

.trophyless {
	filter: grayscale(100%) blur(2px);
}

.info_square {
	display: grid;
    background: #949494;
    border: 2px solid #000;
    border-radius: 10px;
    margin: 10px;
    padding: 20px;
    width: 200px;
    text-align: center;
    justify-items: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.info_square img {
    max-width: 100%;
    height: 100px;
}

.info_square p {
	display: grid;
    margin: 10px 0;
}

.trophy_square {
    background: #ffffff78;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin: 10px;
    padding: 20px;
    width: 200px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.trophy_square img {
    max-width: 100%;
    height: 100px;
}

.trophy_square p {
    margin: 10px 0;
}

.user_info_image img,
.user_info_image_cg img,
.user_info_image_mv3 img,
.user_info_image_cc img,
.user_info_image_cs img,
.user_info_image_jjoo img,
.image-wrap img,
.image-wrap-mv img,
.image-wrap-cg img,
.image-wrap-mv3 img,
.image-wrap-cc img,
.image-wrap-cs img,
.image-wrap-jjoo img,
.image-wrap-mini img,
.image-wrap-mini-cg img,
.image-wrap-mini-mv img,
.image-wrap-mini-mv3 img,
.image-wrap-mini-cc img,
.image-wrap-mini-cs img,
.image-wrap-mini-jjoo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.image-wrap-mini,
.image-wrap-mini-cg,
.image-wrap-mini-mv,
.image-wrap-mini-mv3,
.image-wrap-mini-cc,
.image-wrap-mini-cs,
.image-wrap-mini-jjoo{
  width: 50px;
  aspect-ratio: 1 /1;
  margin-right: 10px;
}

.user_info_image img,
.image-wrap img,
.image-wrap-mini img {
  border: 2px solid black;
  box-shadow: 0 0 5px black;
}

.user_info_image_mv img,
.image-wrap-mv img,
.image-wrap-mini-mv img {
  border: 2px solid #17B169;
  box-shadow: 0 0 5px #17B169;
}

.user_info_image_cg img,
.image-wrap-cg img,
.image-wrap-mini-cg img {
  border: 2px solid yellow;
  box-shadow: 0 0 5px yellow;
}

.user_info_image_mv3 img,
.image-wrap-mv3 img,
.image-wrap-mini-mv3 img {
  border: 2px solid #a552a0;
  box-shadow: 0 0 5px #a552a0;
}

.user_info_image_cc img,
.image-wrap-cc img,
.image-wrap-mini-cc img {
  border: 2px solid sienna;
  box-shadow: 0 0 5px sienna;
}

.user_info_image_cs img,
.image-wrap-cs img,
.image-wrap-mini-cs img {
  border: 2px solid maroon;
  box-shadow: 0 0 5px maroon;
}

.user_info_image_jjoo img,
.image-wrap-jjoo img,
.image-wrap-mini-jjoo img {
  border: 2px solid gold;
  box-shadow: 0 0 5px gold;
}

.user_row,
.race_row {
	margin: 2px;
	display:flex;
	align-items: center;
    justify-content: center;
    gap: 5px;
}

.user_row img {
	width: 50px;
	height: 50px;
}

.medal img,
.race_logo img,
.maillot-wrap img,
.flag img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.maillot-2d, .maillot-welcome {
	background: linear-gradient(to bottom, #000, #888);
	border-radius: 50%; /* Hace que la imagen sea redonda */
	object-fit: cover; /* Asegura que la imagen se ajuste dentro del contenedor redondo */	
}


.maillot-welcome{
  width: 80px;
  height: 80px;
  margin-left: 8px;
}

.small-text {
	font-size: 12px;	
}

.texto-encima {
    position: absolute;
    font-size: 16px;
    background-color: #fcff7d;
    right: 0;
}

.podium_cs {
  display: none; /* Mostrar el div */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding-top: 56.2%; /* Aspect ratio 313:176 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.podium_cs {
    background-image: url('../web_images/podium.png'); /* Imagen de fondo de la montaa */
}

.pista_cg,
.pista_c,
.pista_cc,
.pista_cs,
.pista_mv{
	display: block;
    position: absolute;
    left: 0;
    width: 100%;
    height: 300px;
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}

.pista_cg {
    background-image: url('../web_images/bg_gc.png'); /* Imagen de fondo de la montaa */
}

.pista_c {
	display: none;
    background-image: url('../web_images/bg_c.gif'); /* Imagen de fondo de la montaa */
}

.pista_cc {
    background-image: url('../web_images/bg_cc.png'); /* Imagen de fondo de la montaa */
}

.pista_cs {
    background-image: url('../web_images/bg_cs.png'); /* Imagen de fondo de la montaa */
}

.pista_mv {
    background-image: url('../web_images/bg_mv.png'); /* Imagen de fondo de la montaa */
}

.cyclist {
    position: absolute;
    width: auto;
    height: 100%;
    left: 0; /* Cambiar para ajustar la posicin horizontal */
}

.cyclist-wrapper {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: auto;
    height: 20%;
    bottom: 10px; /* Cambiar para ajustar la posicin vertical */
    left: 0; /* Cambiar para ajustar la posicin horizontal */
    z-index: 5; /* Cambiar si necesitas que el ciclista est detrs o delante de otros elementos */
    animation-duration: 10s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

.arrow-label {
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 5px;
    position: absolute;
    top: -30px; /* Ubica el nombre sobre el ciclista */
    text-align: center;
    white-space: nowrap;
}

.cyclist_podium {
    position: absolute;
    width: 23%;
    height: 40%;
}

/* Aplicar regla especfica si la imagen es ms alta que ancha */
.trophy_podium:is([height*="auto"], [height*="auto"] > [width*="auto"]) {
  max-height: none;
  max-width: 100%;
}

.trophy_podium {
	position: absolute;
  max-height: 12%; /* Altura mxima de 60px */
  width: auto; /* Ancho ajustado automticamente */
  max-width: 100%; /* Ancho mximo del 100% del contenedor */
}

.contenedor-imagen {
  position: relative;
  display: inline-block;
}

.imagen-grande {
  position: fixed;
  display: none;
  overflow: visible;
}

.imagen-grande img{
  width: 600px;
  height: 300px;
}

.contenedor-imagen:hover .imagen-grande {
  display: block;
  top: 0;
  left: 0;
  background-color: white;
  border: 1px solid #ccc;
  padding: 10px;
  z-index: 9999;
}

/* Responsive layout - makes a one column-layout instead of a two-column layout */
@media screen and (max-width: 600px) {
  .table-trophies {
    display: flex; /* Utiliza flexbox para alinear las tablas */
    flex-wrap: wrap; /* Permite que las tablas se envuelvan en lneas */
    gap: 10px; /* Espacio entre las tablas */
  }
  
  .trophies, 
  .user_info_div {
    grid-template-columns: repeat(1, 1fr);
  }
	
  .table-trophy {
    display: inline-block; /* Muestra las tablas en lnea */
    width: calc(100% - 10px); /* Calcula el ancho para mostrar dos tablas una al lado de la otra */
    border: 3px solid grey; /* Borde para visualizacin */
  }
  
  .content3 {
	  width: 70%;
	  margin-bottom: 5px;
	}
  
  .pista_cg,
  .pista_c,
  .pista_cc,
  .pista_cs,
  .pista_mv {
	height: 100px;
	background-size: 100% 100%;
	margin-bottom: 20px;
  }
  
  .podium_cs {	
	background-size: 100% 100%;
  }
  
  .trophy-wrap img:is([height*="auto"], [height*="auto"] > [width*="auto"]) {
	max-height: none;
	max-width: 100%;
  }
  
  .trophy-wrap img{
	height: 30px;
  }	
  
  .cyclist {
        width: 25px;
        height: 25px;
    }

    .cyclist-wrapper {
        height: 15%; /* Reducir el tamaño general */
        bottom: 10px; /* Ajustar la posición vertical */
    }

    .arrow-label {
        font-size: 12px; /* Hacer el texto más pequeño */
        top: -25px; /* Ajustar la posición de la etiqueta */
    }
  
  .texto-encima {
  	font-size: 10px;  	
  }
  
  .user_row img {
	width: 40px;
	height: 40px;
  }
  	
  .content {
	margin: 2px;	
  }

  .flex-item-right,
  .flex-item-left,
  .content2,
  .content1 {
    flex: 100%;
  }
   
  .imagen-grande img{
    width: 360px;
    height: 180px;
  }
  
  table {
    width: 100%; /* Permite que la tabla se ajuste al contenido en lugar del 100% */
  }
  
  table th {
    font-size: 10px;
  }

  table td,
  table td.user_tr {
	font-size: 8px;	
  }

  table tfoot td {
    font-size: 7px;
  }

  .flag {
    width: 25px;
  }

  .image-wrap-mini,
  .image-wrap-mini-cg,
  .image-wrap-mini-mv,
  .image-wrap-mini-mv3,
  .image-wrap-mini-cc,
  .image-wrap-mini-cs,
  .image-wrap-mini-jjoo,
  .image-wrap,
  .image-wrap-cg,
  .image-wrap-mv,
  .image-wrap-mv3,
  .image-wrap-cc,
  .image-wrap-cs,
  .image-wrap-jjoo,
  .maillot-wrap{
    width: 40px;
  }

  .teams {
    height:200px;
  }

  .cyclists {
    width: 100%;
    font-size: 8px;
  }
  
  .small-text {
	font-size: 6px;	
  }
  
  .maillot-welcome {
  	width: 50px;
  	height: 50px;
  	margin-left: 1px;
  }

}