body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.75); /* Fondo gris oscuro */
    overflow: hidden;
    position: relative;
    flex-direction: column; /* Alinea el logo y el spinner en una columna */
  }

  /* Imagen del logo de fondo */
  .background-logo {
    width: 5em; /* Tamaño del logo */
    height: auto;
    opacity: 0.5; /* Transparencia del logo */
    margin-top: 1em; /* Espacio entre el logo y el spinner */
  }

  /* Spinner personalizado con fondo ajustado */
  .loader {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: 
      radial-gradient(farthest-side, #076530 95%, #0000) 50% 1px/12px 12px no-repeat,
      radial-gradient(farthest-side, #0000 calc(100% - 14px), #ccc 0); /* Fondo verde */
    animation: l9 2s infinite linear;
  }

/* Animación del spinner */
@keyframes l9 {
to { transform: rotate(1turn); }
}