.web-login-left-panel {
    background: linear-gradient(155deg,
            /* black to 20% */
            #070808 0%,
            #070808 20%,
            /* grey from 20% to 50% */
            #838383 50%,
            /* back to black from 50% */
            #070809 75%,
            #070809 100%);
}

.bottom-left-button {
    position: absolute;
    bottom: 16px;
    left: 16px;
    background: none;
    border: none;
    padding: 0;
    color: #ffffff;
    font-size: 0.9rem;
    cursor: pointer;
}

@media (max-width: 600px) {
    .bottom-left-button {
        color: #070808;
    }
}


.bottom-left-button:focus {
    outline: none;
}

.web-login-left-panel img {
    -ms-interpolation-mode: bicubic;
    image-rendering: optimizeQuality;
    image-rendering: crisp-edges;
    image-rendering: auto;
    height: auto;
    width: 260px;
}

.web-login-title {
    font-size: 20px;
    font-weight: bold;
}

.wave-container {
    height: 40vh;
    padding: 0;
    margin: 0;
    background: linear-gradient(145deg,
            #070808 0%,
            #070808 20%,
            #070809 60%,
            #070808 100%);

    /* Clip path generated with 100 points */
    clip-path: polygon(100% 0%, 0% 0%, 0.00% 57.92%, 1.00% 58.02%, 2.00% 58.13%, 3.00% 58.24%, 4.00% 58.37%, 5.00% 58.51%, 6.00% 58.66%, 7.00% 58.81%, 8.00% 58.97%, 9.00% 59.14%, 10.00% 59.31%, 11.00% 59.48%, 12.00% 59.66%, 13.00% 59.84%, 14.00% 60.02%, 15.00% 60.20%, 16.00% 60.38%, 17.00% 60.56%, 18.00% 60.73%, 19.00% 60.90%, 20.00% 61.07%, 21.00% 61.23%, 22.00% 61.38%, 23.00% 61.52%, 24.00% 61.66%, 25.00% 61.78%, 26.00% 61.90%, 27.00% 62.00%, 28.00% 62.10%, 29.00% 62.18%, 30.00% 62.25%, 31.00% 62.31%, 32.00% 62.35%, 33.00% 62.38%, 34.00% 62.40%, 35.00% 62.40%, 36.00% 62.39%, 37.00% 62.36%, 38.00% 62.33%, 39.00% 62.28%, 40.00% 62.21%, 41.00% 62.14%, 42.00% 62.05%, 43.00% 61.95%, 44.00% 61.84%, 45.00% 61.71%, 46.00% 61.58%, 47.00% 61.44%, 48.00% 61.29%, 49.00% 61.14%, 50.00% 60.98%, 51.00% 60.81%, 52.00% 60.64%, 53.00% 60.46%, 54.00% 60.28%, 55.00% 60.10%, 56.00% 59.92%, 57.00% 59.74%, 58.00% 59.56%, 59.00% 59.38%, 60.00% 59.21%, 61.00% 59.04%, 62.00% 58.88%, 63.00% 58.72%, 64.00% 58.57%, 65.00% 58.43%, 66.00% 58.30%, 67.00% 58.18%, 68.00% 58.06%, 69.00% 57.96%, 70.00% 57.87%, 71.00% 57.80%, 72.00% 57.73%, 73.00% 57.68%, 74.00% 57.64%, 75.00% 57.61%, 76.00% 57.60%, 77.00% 57.60%, 78.00% 57.62%, 79.00% 57.65%, 80.00% 57.69%, 81.00% 57.74%, 82.00% 57.81%, 83.00% 57.89%, 84.00% 57.98%, 85.00% 58.09%, 86.00% 58.20%, 87.00% 58.33%, 88.00% 58.46%, 89.00% 58.61%, 90.00% 58.76%, 91.00% 58.91%, 92.00% 59.08%, 93.00% 59.25%, 94.00% 59.42%, 95.00% 59.60%, 96.00% 59.78%, 97.00% 59.96%, 98.00% 60.14%, 99.00% 60.32%, 100.00% 60.50%);
}


.wave-container img {
    -ms-interpolation-mode: bicubic;
    image-rendering: optimizeQuality;
    image-rendering: crisp-edges;
    image-rendering: auto;
    height: auto;
    margin-top: 8%;
    width: clamp(150px, 40vw, 250px);
}

.login-mobile-form-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: env(safe-area-inset);
    padding-bottom: 2rem;
    width: 100vw;
}

.login-mobile-form-button {
    display: flex;
    justify-content: center;
    padding: 1rem 0;
    width: 100%;
}

/* Capa oscura de fondo */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

/* Caja de diálogo centrada */
.dialog-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    z-index: 1001;
    min-width: 300px;
}

/* Título */
.dialog-title {
    margin: 0 0 1rem;
    font-size: 1rem;
}

/* Cuerpo */
.dialog-body {
    margin-bottom: 1.5rem;
}

/* Acciones */
.dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

.password-container {
    position: relative;
}

.toggle-password-visibility {
    position: absolute;
    top: 50%;
    right: 0px;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    outline: none;
}

.toggle-password-visibility:focus {
    outline: none;
}

.icon-mask {
    display: inline-block;
    width: 24px;
    height: 24px;
    color: #0aaffe;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
}

.icon-show {
    mask-image: url('assets/icons/visibility.png');
    -webkit-mask-image: url('assets/icons/visibility.png');
}

.icon-hide {
    mask-image: url('assets/icons/visibility_off.png');
    -webkit-mask-image: url('assets/icons/visibility_off.png');
}