/* =========================
   LOCKER MODAL - FINAL
   ========================= */

/* Backdrop */
.lkModal .modal-backdropx {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.65);
    backdrop-filter: blur(6px);
    z-index: 9998;
}

/* Wrapper centrado */
.lkModal .modalx-wrap {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Modal */
.lkModal .modalx {
    width: 520px;
    max-width: 92vw;
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient( 180deg, rgba(24, 34, 56, .97), rgba(12, 18, 32, .97) );
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 50px 120px rgba(0,0,0,.75), 0 20px 50px rgba(0,0,0,.45);
    animation: modalPop .25s ease;
}

/* Animación */
@keyframes modalPop {
    from {
        opacity: 0;
        transform: translateY(20px) scale(.96);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Header */
.lkModal .modalx__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Body */
.lkModal .modalx__body {
    padding: 24px;
}

/* Footer */
.lkModal .modalx__foot {
    padding: 18px 24px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    border-top: 1px solid rgba(255,255,255,.08);
}

/* =========================
   CAMPO NOMBRE LOCKER
   ========================= */

.lkModal .field {
    padding: 22px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.02);
}

    /* Label */
    .lkModal .field label {
        display: block;
        font-weight: 900;
        margin-bottom: 14px;
        color: rgba(255,255,255,.86);
        font-size: 14px;
    }

/* 🔥 INPUT PERFECTAMENTE CENTRADO */
.lkModal .inputx {
    display: block;
    width: 80%; /* controla ancho */
    max-width: 420px; /* mantiene proporción */
    margin: 0 auto; /* 🔥 centra horizontalmente */

    height: 48px;
    padding: 0 18px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(0,0,0,.30);
    color: rgba(255,255,255,.92);
    outline: none;
    transition: all .18s ease;
}

    .lkModal .inputx::placeholder {
        color: rgba(255,255,255,.45);
    }

    .lkModal .inputx:focus {
        border-color: rgba(78,161,255,.65);
        box-shadow: 0 0 0 4px rgba(78,161,255,.18);
        background: rgba(0,0,0,.40);
    }

/* Hint */
.lkModal .hint {
    margin-top: 14px;
    font-size: 12px;
    color: rgba(255,255,255,.55);
    text-align: center;
}

/* Responsive */
@media (max-width: 600px) {
    .lkModal .modalx {
        width: 95vw;
    }

    .lkModal .modalx__foot {
        flex-direction: column;
    }

        .lkModal .modalx__foot .btnx {
            width: 100%;
        }

    .lkModal .inputx {
        width: 90%;
    }
}