body {
        background-image: url('../img/wallpaper.jpg');
        background-size: cover;
        background-position: center;
        height: 100vh; /* Para que la imagen de fondo cubra toda la pantalla */
        margin: 0;
        padding: 0;
        position: relative;
        display: flex;
        justify-content: center; /* Centrar horizontalmente */
        align-items: center; /* Centrar verticalmente */
      }
      /* Superposición semi-transparente */
      .overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.85); /* Opacidad del 50% */
        z-index: 1; /* Ajuste de la capa */
      }
      .login-container {
        background:rgba(255,255,255,0.8);
        padding: 45px 60px 46px;
        padding: 20px;
        border-radius: 3px;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Sombra suave */
        position: relative; /* Asegurar que el z-index funcione */
        z-index: 2; /* Ajuste de la capa */
      }
      .logo {
          height: 45%;
          margin-bottom: 20px; /* Espacio entre el logo y el login box */
          position: relative; /* Asegurar que el z-index funcione */
          z-index: 2;
      }
      .loading-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.9);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 9999;
      }
      
      .loading-overlay.show {
        display: flex;
      }
      .loguito{
        margin:20px 0 25px 0px;
        display:inline-block;
        z-index:2;
        position:relative; 
      }
      .loguito img{
        height:100px;
        width:100px;
        position:relative;
        border-radius:50px;
      }
  
      .form-control {
        min-height: 50px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid rgb(72 200 255);
        padding: 10px 15px;
        background-color: transparent;
        color: #161616;
        margin:10px 0px;
    }
    
    .input-group-text{
        min-height: 50px;
        -webkit-box-shadow: none;
        box-shadow: none;
        border: 1px solid rgba(255, 255, 255, 0.3);
        padding: 10px 15px;
        background-color: #48c8ff;
        color: rgba(255, 255, 255, 0.8);;
        margin:10px 0px;
    }
    
    .btn-login{
        background-color: #8ee121;
        border-color: #aedf6e;
    }
    
    .btn-login:hover{
        background-color: #48c8ff;
        border-color: #65d1ff;
    }
    
    .loading-image {
        animation: rotateLeft 2s linear infinite; /* 2 segundos de duración, animación lineal infinita */
      }

  @keyframes rotateLeft {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(-360deg);
    }
  }