/* ============================
   LOGIN – Estilo Institucional Pro
   ============================ */
/* Paleta neutra con acento azul (cámbialo si lo necesitas) */
.login-container {
    
    --card: #ffffff;
    --text: #0f172a;
    --muted: #637085;
    --line: #e6e9f1;
    --ring: #1259d6;
    --brand: #1551c1;
    --brand-2: #0f47a6;
    --error: #c0342b;
    --radius: 14px;
    --shadow-1: 0 12px 28px rgba(16,24,40,.10);
    --shadow-2: 0 2px 6px rgba(16,24,40,.06);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(900px 500px at 10% -10%, rgba(18,89,214,.06), transparent 60%), radial-gradient(900px 500px at 110% 110%, rgba(18,89,214,.06), transparent 60%), var(--bg);
    padding: 24px;
    box-sizing: border-box;
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* TARJETA */
.login-container .loginform-wrapper {
    width: 100%;
    max-width: 100%;
}

.login-container .loginwrapper {
    padding: 0;
    background: transparent;
    width: 30% !important;

}

.login-container .loginform {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-1);
    padding: 48px 46px 42px;
    width: 100%;
}

/* Línea superior sutil */
.login-container .loginform::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--brand), #5aa0ff);
    border-top-left-radius: var(--radius);
    border-top-right-radius: var(--radius);
}

/* LOGO/SELLO */
.login-container .logologin {
    width: 82px;
    height: 82px;
    margin: 2px auto 12px;
    border-radius: 14px;

    border: 1px solid var(--line);
    box-shadow: var(--shadow-2);
}

/* MENSAJE DE ERROR */
.login-container .errorlogin {
    display: none;
    margin: 8px 0 12px;
    background: #fff3f2;
    color: #8e1e17;
    border: 1px solid rgba(192,52,43,.35);
    border-radius: 10px;
    padding: 10px 12px;
    font-weight: 600;
}

/* CAMPOS */
.login-container .input-field-login {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fbfdff;
    padding: 12px 12px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    margin-bottom: 12px;
    width: 100%;
}

.login-container .input-field-login:focus-within {
    border-color: var(--ring);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(18,89,214,.16);
}

.login-container .input-field-login > label {
    width: 34px;
    height: 34px;
    min-width: 34px;
    display: grid;
    place-items: center;
    color: #184a96;
    background: #ecf2ff;
    border-radius: 9px;
    font-size: 16px;
}

.login-container .input-field-login input[type="text"],
.login-container .input-field-login input[type="password"] {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 15.5px;
    color: var(--text);
    padding: 6px 4px;
}

/* OJO CONTRASEÑA */
.login-container .field-icon.toggle-password {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: var(--muted);
    padding: 6px;
    border-radius: 8px;
    cursor: pointer;
}

.login-container .field-icon.toggle-password:hover {
    background: #f0f5ff;
    color: var(--ring);
}

/* BOTÓN PRINCIPAL */
.login-container .boton360.btnLogin {
    background: var(--brand);
    color: #fff !important;
    text-align: center;
    border: none;
    border-radius: 12px;
    padding: 13px 16px;
    font-weight: 700;
    letter-spacing: .2px;
    width: 100%;
    box-shadow: 0 10px 22px rgba(21,81,193,.16);
    transition: transform .08s ease, filter .15s ease, box-shadow .2s ease;
    margin-top: 6px;
}

.login-container .boton360.btnLogin:hover {
    background: var(--brand-2);
    filter: brightness(1.02);
}

.login-container .boton360.btnLogin:active {
    transform: translateY(1px);
}

.login-container .boton360.btnLogin:focus-visible {
    outline: 2px solid #2f6de0;
    outline-offset: 3px;
}

/* ENLACE SECUNDARIO */
.login-container .boton360link {
    margin-top: 10px;
    display: inline-block;
    text-align: center;
    color: var(--brand-2);
    font-weight: 600;
    padding: 8px 6px;
    border-radius: 10px;
}

.login-container .boton360link:hover {
    background: #eef3ff;
}

/* FOOTER – fijo, limpio y pegado a esquina inferior derecha */
.login-container .lfw-footer {
    position: fixed;
    right: 20px;
    bottom: 18px;
    display: flex;
    gap: 10px;
    align-items: center;
    background: transparent;
    box-shadow: none;
    border: none;
    color: var(--muted);
    font-size: 14px;
}

.login-container .lfwf-left {
    display: none;
}

.login-container .lfwf-right {
    display: flex;
    gap: 10px;
}

.login-container .lfwf-button {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--text);
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: var(--shadow-2);
}

.login-container .lfwf-button:hover {
    box-shadow: 0 6px 18px rgba(16,24,40,.08);
}

.login-container .lfwf-separator {
    display: none;
}

/* ACCESIBILIDAD */
.login-container a, .login-container button,
.login-container .lfwf-button, .login-container .boton360link,
.login-container .boton360.btnLogin, .login-container .field-icon.toggle-password {
    outline: none;
}

.login-container a:focus-visible, .login-container button:focus-visible,
.login-container .lfwf-button:focus-visible, .login-container .boton360link:focus-visible,
.login-container .boton360.btnLogin:focus-visible, .login-container .field-icon.toggle-password:focus-visible {
    box-shadow: 0 0 0 3px rgba(18,89,214,.22);
}

/* MÓVIL */
@media (max-width:480px) {
    .login-container {
        padding: 16px;
    }

    .login-container .loginform {
        padding: 22px 18px 18px;
    }

    .login-container .logologin {
        width: 64px;
        height: 64px;
    }

    .login-container .lfw-footer {
        right: 12px;
        bottom: 12px;
    }
}


/* =============================
   Estilo Moderno – jQuery Confirm
   ============================= */

.jconfirm.jconfirm-modern .jconfirm-box {
    border-radius: 14px !important;
    border: 1px solid #e0e6f0 !important;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 3px 12px rgba(15, 23, 42, 0.1) !important;
    padding: 28px 26px 24px !important;
    background: #ffffff !important;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif !important;
    width: 50%;
}

/* Cabecera (título) */
.jconfirm.jconfirm-modern .jconfirm-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    margin-bottom: 10px !important;
}

/* Texto del contenido */
.jconfirm.jconfirm-modern .jconfirm-content {
    font-size: 15.5px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
    padding-top: 4px !important;
}

/* Línea superior decorativa */
.jconfirm.jconfirm-modern .jconfirm-box::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 4px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    background: linear-gradient(90deg, #1551c1, #5aa0ff);
}

/* Fondo semitransparente detrás del modal */
.jconfirm-bg {
    background: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(3px);
}

/* Botón principal */
.jconfirm.jconfirm-modern .jconfirm-buttons button.btn-blue {
    background: linear-gradient(180deg, #1551c1, #0f47a6) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    padding: 10px 22px !important;
    box-shadow: 0 6px 16px rgba(21, 81, 193, 0.25) !important;
    transition: filter .15s ease, transform .08s ease;
}

.jconfirm.jconfirm-modern .jconfirm-buttons button.btn-blue:hover {
    filter: brightness(1.05);
}

.jconfirm.jconfirm-modern .jconfirm-buttons button.btn-blue:active {
    transform: translateY(1px);
}

/* Botón secundario (por si lo usas) */
.jconfirm.jconfirm-modern .jconfirm-buttons button.btn-default {
    background: #f3f6fa !important;
    color: #334155 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 10px !important;
    font-weight: 500 !important;
}

/* Animación de entrada */
.jconfirm.jconfirm-modern .jconfirm-box {
    animation: modalFadeIn 0.35s ease;
}

@keyframes modalFadeIn {
    from {
        transform: translateY(-10px);
        opacity: 0;
    }

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