.service-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* Estilo base para cada ítem de la lista */
.service-list li {
  position: relative;  /* Para usar posicionamiento absoluto en ::before */
  padding-left: 25px;  /* Espacio para la línea a la izquierda */
  margin-bottom: 10px; /* Separación entre ítems */
  color: #999;         /* Color de texto por defecto */
  font-size: 16px;
  cursor: pointer;
}
/* La línea vertical a la izquierda */
.service-list li::before {
  content: "";
  position: absolute;
  left: -10px;                 /* Alineado al inicio del li */
  top: 6px;               /* Ajusta para centrar con el texto */
  width: 3px;             /* Grosor de la línea */
  height: 20px;           /* Largo de la línea */
  background-color: #ccc; /* Color gris por defecto */
}
/* El ítem activo se ve diferente: color de texto negro y la línea verde */
.service-list li.active {
  color: #000;
  font-weight: bold;       /* Resalta el texto */
}
.service-list li.active::before {
  background-color: #28a745; /* Verde para el ítem activo */
}
/* Efecto hover opcional */
.service-list li:hover {
  color: #555;
}
#calendar {
  background-color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 5px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2);
  padding: 5px;
  a{
    color: #000000;
  }
}
#evento_actual{
  background-color:   rgb(255, 255, 255);
  box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
}
#calendar-wrapper {
  transform: scale(0.95);
  transform-origin: top left;
  /* Ajustamos el ancho para que el contenedor envuelto se reduzca proporcionalmente */
  width: 50%;
  
}
@media (max-width: 768px) {
  #calendar-wrapper {
    transform: none;
    width: 100%;
  }
}
/* Personalización de la barra de herramientas del calendario */
.fc-toolbar {
  margin-bottom: 20px;
}
.fc-toolbar-title {
  font-size: 1.5rem;
  font-weight: bold;
}
/* Estilos para los eventos en el calendario */
.fc-daygrid-event {
  background-color: #08903a !important;
  border: none !important;
  color: #067a2c !important;
  padding: 2px 5px;
  border-radius: 3px;
}
.fc-daygrid-event:hover {
  background-color: #067b17 !important;
}
/* Estilos para la tarjeta de eventos de la izquierda */
.card {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.event-list .list-group-item {
  cursor: pointer;
  transition: background-color 0.3s;
}
.event-list .list-group-item:hover {
  background-color: #047533;
  color: #ffffff;
}
 /* Opcional: Limitar el alto de la lista de eventos */
 .event-list {
  max-height: 500px;
  overflow-y: auto;
}
#eventDescription {
  white-space: pre-wrap;
}