.sidebar {
  grid-area: sidebar;
  background-color: rgba(255, 255, 255, 0.2); /* Color blanco con transparencia */
  backdrop-filter: blur(10px); /* Desenfoque del fondo */
  -webkit-backdrop-filter: blur(10px); /* Prefijo para soporte de Safari */
  border: 1px solid rgba(255, 255, 255, 0.18); /* Borde sutil para definir los bordes del sidebar */
}

.sidebar a {
  display: block;
  padding: 10px 0;
  background-color: #1f3c90; /* Color de fondo para los enlaces del sidebar */
  color: white;
  text-decoration: none;
  transition: background-color 0.3s; /* Transición suave para el cambio de color de fondo */
}

.sidebar a:hover {
  background-color: #0e2147; /* Color de fondo al pasar el ratón sobre los enlaces del sidebar */
}

.sidebar a i {
  margin-right: 8px;
  font-size: 1.1em; /* Tamaño de los íconos de FontAwesome u otros */
}

.sidebar ul {
  list-style: none; /* Eliminar estilos de lista */
  padding: 0;
  margin: 0;
}

.sidebar li {
  margin-top: -1px; /* Solapar botones de la lista en el sidebar */
}

/* Estilo para la lista como cintas */
.lista-cintas {
  list-style: none; /* Elimina los bullets de la lista */
  padding: 0; /* Elimina el padding por defecto */
  margin: 0; /* Elimina el margen por defecto */
}

.lista-cintas li {
  background-color: rgba(59, 29, 241, 0.4); /* Color azul con transparencia para el fondo de cada cinta */
  color: white; /* Color de texto */
  padding: 15px 1px; /* Espaciado interno para cada cinta */
  margin-bottom: 1px; /* Espacio entre cintas */
  backdrop-filter: blur(5px); /* Efecto de vidrio esmerilado */
  border-radius: 5px; /* Bordes ligeramente redondeados */
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease; /* Transiciones suaves para efectos */
}

.lista-cintas a {
  color: white; /* Color de los enlaces */
  text-decoration: none; /* Sin subrayado para los enlaces */
  display: block; /* Los enlaces ocupan el ancho completo de la cinta */
}

.lista-cintas li:hover {
  background-color: rgba(59, 29, 241, 0.9); /* Color más sólido al hacer hover */
  backdrop-filter: blur(8px); /* Aumento de desenfoque al hacer hover */
}

.lista-cintas i {
  margin-right: 8px; /* Margen a la derecha de los íconos */
  width: 20px; /* Ancho de los íconos si es necesario */
}