:root {
    --bs-primary: #000000e8; /* Cambia este valor al color que desees */
}

.navbar {
    background-color: var(--bs-primary) !important; /* Aplica el color a la barra de navegación */
}

.card-header {
    background-color: var(--bs-primary) !important;
    color:#ffffff /* Aplica el color a la barra de navegación */
}

.nav-link {
    color: #ffffff !important; /* Cambia el color del texto de los enlaces */
}

.nav-link:hover {
    color: #f8f9fa !important; /* Cambia el color del texto al pasar el mouse */
}

.btn-primary {
    background-color: var(--bs-primary) !important; /* Cambia el color de fondo del botón */
    border-color: var(--bs-primary) !important; /* Cambia el color del borde del botón */
}

.btn-primary:hover {
    background-color: #000000e8 !important; /* Cambia el color de fondo al pasar el mouse */
    border-color: #000000e8 !important; /* Cambia el color del borde al pasar el mouse */
}

body {
  font-family: 'Open Sans', sans-serif;
}

/* Cambiar color de texto y borde cuando NO está seleccionado */
.btn-outline-primary {
    color: #6c757d !important; /* Gris oscuro */
    border-color: #000000e8 !important; /* Gris oscuro */
}

/* Cambiar colores cuando están seleccionados */
#btnradio1:checked + .btn-outline-primary {
    background-color: #207c35 !important; /* Verde */
    border-color: #207c35 !important;
    color: white !important;
}

#btnradio2:checked + .btn-outline-primary {
    background-color: #f3bd1a !important; /* Amarillo */
    border-color: #f3bd1a !important;
    color: white !important;
}

#btnradio3:checked + .btn-outline-primary {
    background-color: #dc3545 !important; /* Rojo */
    border-color: #dc3545 !important;
    color: white !important;
}

/* Cambiar color en hover (cuando el usuario pasa el ratón) */
.btn-outline-primary:hover {
    background-color: #000000e8 !important; /* Azul */
    border-color: #000000e8 !important;
    color: white !important;
}

/* Asegura que el contenedor principal tenga suficiente espacio en pantallas pequeñas */
.container {
    max-width: 100%;
    padding: 15px;
  }
  
  #reader {
    width: 250px !important;
    height: 250px !important;
    overflow: hidden;
    position: relative;
  }

  @media (max-width: 768px) {
    #reader {
      width: 90vw !important;
      height: 90vw !important;
    }
  }

  .timeline {
    max-height: 50vh; /* No supera el 50% de la altura del viewport */
    overflow-y: auto;
    padding-right: 10px;
  }

  .timeline::-webkit-scrollbar {
    width: 6px; /* Ancho de la barra */
  }
  
  .timeline::-webkit-scrollbar-thumb {
    background: #888; /* Color del thumb (barra desplazable) */
    border-radius: 3px;
  }
  
  .timeline::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color cuando el usuario pasa el mouse */
  }