body.no-scroll {
      overflow: hidden !important;
    }

    .login-wrapper {
      perspective: 1500px;
      width: 100%;
      max-width: 1000px;
      height: 600px;
    }

    .login-container {
      width: 100%;
      height: 100%;
      position: relative;
      transform-style: preserve-3d;
      transition: transform 0.8s;
    }

    .login-container.flipped {
      transform: rotateY(180deg);
    }

    .login-panel {
      position: absolute;
      width: 100%;
      height: 100%;
      backface-visibility: hidden;
      display: flex;
      flex-direction: row;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
      background: white;
    }

    .login-left,
    .login-right {
      padding: 3rem;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }

    .login-left {
      background: #7f007b;
      color: white;
    }

    .login-panel.personal {
      transform: rotateY(0deg);
      z-index: 2;
    }

    .login-panel.socios {
      transform: rotateY(180deg);
    }

    .btn-purple {
      background-color: #7f007b;
      color: white;
    }

    .btn-purple:hover {
      background-color: #6b006a;
      color: white;
    }

    @media (max-width: 768px) {
      .login-panel {
        flex-direction: column;
      }

      .login-left {
        display: none;
      }
    }

    .invert-img {
      filter: invert(1);
    }

    #btn-login {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 999;
      white-space: nowrap;
    }

    @media (max-width: 768px) {
      #btn-login {
        font-size: 0.8rem;
        padding: 0.3rem 0.6rem;
        top: 5px;
        right: 5px;
      }
    }