/* Timeline Section Styles */

.timestamp {
	border-radius:19px;
}
.timestamp::after {
  content: "";
  border-top: 20px solid #ffffff;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  position: absolute;
  left: 42% !important;
  bottom: calc(0% + var(--triangle-offset,-15px))!important;

}
.timeline-section {
  padding: 8rem 0;
  background-color: var(--section-bg-color);
}
.timeline-section .title-wrapper {
  margin-bottom: 2rem;
  color:  var(--section-bg-color); 
}
.timeline-section .timeline-wrapper {
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}
.timeline-section .timeline-wrapper:hover {
  cursor: pointer;
}
.timeline-section .timeline-wrapper .timeline {
  list-style-type: none;
  display: inline-flex;
  align-items: center;
  margin: 20px 0;
}
.timeline-section .timeline-wrapper .timeline .li {
  transition: all 200ms ease-in;
}
.timeline-section .timeline-wrapper .timeline .timestamp {
  background-color: white;
  margin: 0px 90px;
  padding: 31px 40px;
  margin-bottom: 36px;
  display: flex;
  flex-direction: column;
  position: relative;
	white-space: pre-wrap !important;
	justify-content: center !important; 
}
.timeline-section .timeline-wrapper .timeline .timestamp::after {
  content: "";
  border-top: 20px solid #ffffff;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  position: absolute;
  left: 42%;
  bottom: -27%;
}
.timeline-section .timeline-wrapper .timeline .timestamp .bodytext {
  align-items: center;
  font-weight: 300;
  font-size: 20px;
	display: flex;
	flex-direction:column;
	text-align:center;
	color:#666;
	    justify-content: center;
	line-height: 1.2;
}
.timeline-section .timeline-wrapper .timeline .status {
  padding: 20px 40px;
  display: flex;
  justify-content: center;
  border-top: 16px solid var(--timeline-line-color);
  position: relative;
  transition: all 200ms ease-in;
}
.timeline-section .timeline-wrapper .timeline .status::before {
  content: "";
  width: 30px;
  height: 30px;
  background-color:  var(--circle-color);
  border-radius: 25px;
  border: 4px solid  var(--text-color);
  position: absolute;
  top: -22px;
  left: 46%;
  transition: all 200ms ease-in;
}
.timeline-section .timeline-wrapper .timeline .status h4 {
  font-weight: 600;
  font-size: 32px;
  color: var(--text-color);
}
.timeline-section .timeline-wrapper .timeline .status.active::before {
  background-color:  var(--accent-color);
}
.timeline-section .timeline-wrapper .timeline li:first-child .timestamp, .timeline-section .timeline-wrapper .timeline li:last-child .timestamp {
  visibility: hidden;
  padding: 16px 30rem;
  margin: 33px 42%;
}
.timeline-section .timeline-wrapper .timeline li:first-child .status, .timeline-section .timeline-wrapper .timeline li:last-child .status {
  border-top: 16px dashed var(--timeline-line-color);
}
.timeline-section .timeline-wrapper .timeline li:first-child .status h4, .timeline-section .timeline-wrapper .timeline li:last-child .status h4 {
  visibility: hidden;
}
.timeline-section .timeline-wrapper .timeline li:first-child .status::before, .timeline-section .timeline-wrapper .timeline li:last-child .status::before {
  display: none;
}
.timeline-section .timeline-wrapper {
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
	    justify-content: center;
}
.timeline-section .timeline-wrapper::-webkit-scrollbar {
  display: none;
}
.timeline-section .btn-wrapper-jecr {
  margin-top: 6rem;
  text-align: center;
}
.btn-wrapper-jecr {
	display:flex;
	text-align: center;
   justify-content: center;
	
}

/* Button Styles */
.btn-jecr {
  padding: 1rem 3.4rem;
  text-decoration: none;
  font-weight: 600;
	border-radius:9px;
	font-size:18px;
}
.btn-primary {
  background-color: var(--accent-color);
  transition: all 0.3s ease;
  cursor: pointer;
  color:var(--text-color) !important;
  border: 3px solid var(--section-bg-color);
}
.btn-primary:hover {
  background:  var(--section-bg-color);
  border: 3px solid  var(--section-bg-color);
transform: translate(0, -5px);
	 color:var(--text-color) !important;

}

.btn-wrapper-jecr .btn-primary:hover

{margin-bottom:0px;
 }
.btn-primary:focus {
  background: var(--section-bg-color);
}
@keyframes heartbeat {
  0%, 100% { 
    transform: scale(1); 
  }
  50% { 
    transform: scale(1.3); 
  }
}


/* Añadir estilos para cuando se resalta un evento futuro */
.status.highlight-future::before {
	background-color: var( --accent-color) !important; /* Cambia el color del círculo */
      animation: heartbeat 1.5s infinite ease-in-out;
}

.timeline-wrapper {
  white-space: nowrap;
  overflow-x: scroll;
  scrollbar-width: thin; 
}

.timeline-controls {
  display: flex;
	    margin-right: 10px;
  justify-content: center; 
  margin-top: 10px; 
	flex-direction: rows;
}
¿
.timeline-wrapper::-webkit-scrollbar {
  display: none;
}

.timeline-wrapper {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


@media screen and (max-width: 768px) {
  .timeline-section {
    padding: 4rem 0;
  }

  .timeline-controls {
    flex-direction: rows;
  }

  .timeline-controls button {
    width: 100%;
    margin: 10px 0;
  }
}

/* Oculta los botones por defecto 
.timeline-controls {
  display: none;
}
 */
/* Media query para pantallas pequeñas (dispositivos móviles) */
@media screen and (max-width: 768px) {
  .timeline-controls {
    display: flex; /* Muestra los botones solo en pantallas pequeñas */
    justify-content: space-between; /* Asegura que los botones estén separados */
    padding: 10px 0; /* Añade algo de padding arriba y abajo de los botones para mejor accesibilidad */
  }
}


@media screen and (max-width: 768px) {
  .timeline-controls {
    flex-direction: rows;
    align-items: center; /* Centra los botones en dispositivos móviles */
  }

  .timeline-controls button {
    margin: 10px; /* Espaciado entre los botones en dispositivos móviles */
    width: 100%; /* Ocupa todo el ancho disponible */
  }
	.timeline-controls{
		padding-left:10px;
		padding-right: 10px;
	}
}


.timeline-controls {
  display: flex;
  justify-content: center; /* Alinea los botones horizontalmente al centro */
  gap: 10px; /* Añade espacio entre los botones */
}
.timeline-controls button {
  background-color: #fff; /* Color de fondo blanco */
  color: var(--section-bg-color) ; /* Color del texto azul oscuro para contrastar con el fondo */
  border: 2px solid var(--section-bg-color) ; /* Borde azul oscuro */
  border-radius: 50%; /* Botones redondos */
  padding: 0.5em; /* Espaciado interno */
  width: 60px; /* Ancho fijo */
  height: 60px; /* Altura fija */
  font-size: 2em; /* Tamaño del icono del botón */
  cursor: pointer; /* Cursor en forma de mano para indicar clic */
  outline: none; /* Remueve el contorno que aparece al hacer foco */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave para dar profundidad */
  transition: background-color 0.3s, color 0.3s, box-shadow 0.3s; /* Transición suave para interacción */
  position: relative; /* Para posicionar los pseudo-elementos */
  overflow: hidden; /* Oculta cualquier cosa que se desborde del radio del borde */
}

/* Estilos para los botones en estado hover */
.timeline-controls button:hover {
  background-color: var(--accent-color); /* Cambia el fondo al color azul oscuro */
  color: #fff; /* Cambia el color del texto a blanco */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); /* Sombra más profunda para efecto al pasar el mouse */
}

/* Estilos para los botones deshabilitados */
.timeline-controls button:disabled {
  background-color: #e0e0e0 !important; /* Fondo gris para indicar que está deshabilitado */
  color: #a0a0a0 !important; /* Texto gris para indicar que está deshabilitado */
  cursor: default; /* Cursor por defecto */
  box-shadow: none; /* Sin sombra */
}

/* Estilos para el ícono 'Anterior' dentro del botón */
.timeline-controls #scrollLeft::before {
  content: '\2190'; /* Carácter Unicode para la flecha izquierda */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Estilos para el ícono 'Siguiente' dentro del botón */
.timeline-controls #scrollRight::before {
  content: '\2192'; /* Carácter Unicode para la flecha derecha */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Ocultar los botones en pantallas más grandes que móviles */
@media screen and (min-width: 3200px) {
  .timeline-controls {
    display: none;
  }
}
/* Sobrescribir para la carta */
.card {
  cursor: default; /* Restablece el cursor a su valor predeterminado */
}

/* Sobrescribir para el círculo del timeline */
.timeline .status::before {
  cursor: default; /* Restablece el cursor a su valor predeterminado */
}

/* O, si la clase para los círculos es diferente, ajusta el selector correctamente */
.timeline .circle {
  cursor: default; /* Restablece el cursor a su valor predeterminado */
}
.timeline-item{
  cursor: default; /* Restablece el cursor a su valor predeterminado */
min-width: 9%;
}

.timestamp:hover{
	scale:1.1;}


.timestamp:hover > span:after{
	display:flex;
	flex-direction: column;
	font-size:16px;
	color: #666666 !important;
	content: attr(data-hover-content);
	  white-space: pre-wrap; 
	line-height: 1.5:

	}

.timestamp:hover > span{
	color: black !important
}