/* CSS Document */
/* CSS Document */


  .contenedor_calendario_eventos {
            width: 100%;
            overflow-x: auto;
        }
        .calendario table {
            width: 100%;
            border: solid 0.1rem var(--grisclaro);

    border-radius: 0rem 0rem 1rem 1rem;
    border-collapse: separate;

        }
    .dias-semana{
        background: var(--secundario);
    }
        .calendario .dias-semana th{
            text-align: center;
           font-weight: 500;
            
        }
    .calendario td {
            text-align: center;
           
            
        }
        .mes_anio_flechas {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .dia_numero span {
             display: inline-block;
            width: 4rem;
            padding: 1rem;
    
        }
    .dia_con_evento  {
     background: var(--primario);
    color: var(--blanco);
    font-weight: 600;
    border-radius: 1rem;
        }
        
        .datos_evento {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
            border: 0.1rem solid var(--grisclaro);
            padding: 1rem;
            border-radius: 0.5rem;
        }
        .fecha_evento {
            margin-right: 1rem;
            text-align: center;
        }
        .nombre_evento {
            flex: 1;
        }
   
#calendario_eventos table a:hover {
    text-decoration: underline;
    color: #000;
}
#calendario_eventos table tr.menu_meses td {
    background-color: #FFFFFF;
}
#calendario_eventos td {
    margin: 0rem;
  
    font-size: 1.6rem;
}

#calendario_eventos td.dia_numero {
    color: #000;
    text-align: center;
    border: none;
}
.menu_meses {
    background: var(--primario);
    color: var(--blanco);
    font-weight: 600;
    font-size: 2rem; border-radius: 1rem 1rem 0rem 0rem;
}
.mes_anio_flechas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2rem;
 
}
    .mes_anio_flechas a i{
    color: var(--blanco);
 
}
#calendario_eventos table table {
    border-style: none;
    width: 100%;
}
.contenedor_mes_anio_flechas {
    padding: 0rem !important;
}
.contenedor_calendario_eventos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
    .lista-eventos{
       
    }
     @media (max-width: 768px) {
           .lista-eventos {
            margin-top: 2rem;
        }
          .listado {
    height: 25rem; /* Fija el alto deseado */
              
}
         .iframe-calendar{
    min-height: 40rem;
}
        }
    
     @media (min-width: 768px) {
         .listado {
    height: 34rem; /* Fija el alto deseado */
    }
         .iframe-calendar{
    min-height: 40rem;
}
         
}
         .listado {
    
    overflow-y: auto; /* Habilita el scroll vertical si es necesario */
    border: none; /* Añade un borde opcional para visualizar el contenedor */
    padding-right: 1rem; /* Añade padding para espaciar el contenido dentro del contenedor */
} 
         
    
    /* Estilos para la barra de desplazamiento */
.listado::-webkit-scrollbar {
    width: 1.2rem; /* Ancho de la barra de desplazamiento */
}

.listado::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color del fondo de la barra de desplazamiento */
    border-radius: 1rem; /* Radio del borde del track */
}

.listado::-webkit-scrollbar-thumb {
    background: #888; /* Color del pulgar de la barra de desplazamiento */
    border-radius: 1rem; /* Radio del borde del pulgar */
    border: 0.3rem solid #f1f1f1; /* Espacio entre el pulgar y el track */
}

.listado::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color del pulgar cuando se pasa el ratón por encima */
}
    
    .lista-eventos .datos_evento{
        padding-bottom: 1rem; 
    }
  
   .hovered  {
    background: var(--secundario); /* Cambia esto por el color que prefieras */
} 
    
   #calendario_eventos .datos_evento {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
    border-radius: 1rem;
    }
   #calendario_eventos .datos_evento {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1.5rem;
}
    a .datos_evento{
        color: var(--negro);
    }
    a:hover .datos_evento{
        background: var(--secundario);
    }

.mes-sin-eventos{
 
}
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 1rem;
}


.datos_evento {
	display: flex;
	justify-content: flex-start;
	align-items:flex-start;
	gap: 1.5rem;	
}
.texto_principal_evento{
	font-size: 1.8rem;
    font-weight: 500;
}
.texto_secundario_evento{
	font-size: 1.5rem;
    font-weight: 400;
}
.fecha_evento{
	border-radius: 0.5rem;
	background-color:var(--primario);
	color:var(--blanco);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 1rem 1.5rem;
}
.dia_evento{
	font-weight: 500;
	font-size: 1.8rem;
	line-height: 1.8rem;
}
.mes_evento{
	font-size: 1.3rem;
	text-transform: uppercase;
}

/* Estilos para la barra de desplazamiento */
.listado::-webkit-scrollbar {
    width: 1.2rem; /* Ancho de la barra de desplazamiento */
}

.listado::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color del fondo de la barra de desplazamiento */
    border-radius: 1rem; /* Radio del borde del track */
}

.listado::-webkit-scrollbar-thumb {
    background: #888; /* Color del pulgar de la barra de desplazamiento */
    border-radius: 1rem; /* Radio del borde del pulgar */
    border: 0.3rem solid #f1f1f1; /* Espacio entre el pulgar y el track */
}

.listado::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color del pulgar cuando se pasa el ratón por encima */
}
    
    .lista-eventos .datos_evento{
        padding-bottom: 1rem; 
    }
  
   .hovered  {
    background: var(--secundario); /* Cambia esto por el color que prefieras */
} 
    
   #calendario_eventos .datos_evento {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
    border-radius: 1rem;
    }
   #calendario_eventos .datos_evento {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	gap: 1.5rem;
}
    a .datos_evento{
        color: var(--negro);
    }
    a:hover .datos_evento{
        background: var(--secundario);
    }

.mes-sin-eventos{
 
}
.alert {
    position: relative;
    padding: .75rem 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid transparent;
    border-radius: 1rem;
}

.alert p{
    font-size: 1.4rem;
}