/* Estilos para la superposición de carga */
#loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fondo semitransparente */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }
  
  #loading-logo img {
    width: 100px; /* Ajusta el tamaño del logo según tus necesidades */
    height: auto;
    animation: spin 2s linear infinite; /* Agrega una animación de rotación al logo */
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* Ocultar el logo una vez que la página esté completamente cargada */
  #loading-container.hidden {
    display: none;
  }