/* ============================================================
   LOGIN.CSS — JELI Agenda
   Diseño alineado con la landing page (paleta azul + verde)
   NO modifica styles_clasico.css ni afecta el resto del ERP
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500&display=swap');

/* ── Tokens de la landing ────────────────────────────────── */
:root {
    --jl-blue-deep: #0a2a6e;
    --jl-blue-mid: #1565c0;
    --jl-blue-login: #021831;
    --jl-blue-bright: #1e9af5;
    --jl-green: #2db04b;
    --jl-green-dark: #1d8a37;
    --jl-green-glow: rgba(45,176,75,.40);
    --jl-white: #ffffff;
    --jl-white-dim: rgba(255,255,255,.70);
    --jl-white-ghost: rgba(255,255,255,.12);
    --jl-border: rgba(255,255,255,.16);
    --jl-card-radius: 16px;
    --jl-input-radius: 8px;
    --jl-transition: .2s cubic-bezier(.4,0,.2,1);
}
.logo-img-login {
    height: 125px;
    width: auto;
}

/* ── Página completa ─────────────────────────────────────── */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    position: relative;
    overflow: hidden;
    /* Gradiente idéntico al hero de la landing */
    background: linear-gradient(155deg, var(--jl-blue-deep) 0%, #0d4fa0 45%, #0b3d8a 100%);
}

    /* Malla de puntos decorativa (igual que la landing) */
    .login-page::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
        background-size: 32px 32px;
        pointer-events: none;
    }

    /* Halos de color */
    .login-page::after {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(ellipse 60% 55% at 85% 15%, rgba(30,154,245,.22) 0%, transparent 70%), radial-gradient(ellipse 45% 45% at 15% 85%, rgba(45,176,75,.16) 0%, transparent 65%);
        pointer-events: none;
    }

/* ── Caja de login ───────────────────────────────────────── */
.login-box {
    max-width: 420px;
    width: 100%;
    position: relative;
    z-index: 1;
}

/* ── Card principal ──────────────────────────────────────── */
.login-card {
    background: rgba(255,255,255,.96);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-radius: var(--jl-card-radius);
    border: 1px solid rgba(255,255,255,.80);
    box-shadow: 0 32px 80px rgba(10,42,110,.30), 0 0 0 1px rgba(255,255,255,.08);
    overflow: hidden;
}

/* ── Header de la card ───────────────────────────────────── */
.login-header {
    background: linear-gradient(140deg, var(--jl-blue-deep), var(--jl-blue-login));
    padding: 32px 28px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    border-bottom: none;
}

    /* Halo sutil dentro del header */
    .login-header::before {
        content: '';
        position: absolute;
        top: -40px;
        right: -40px;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(45,176,75,.18) 0%, transparent 70%);
        pointer-events: none;
    }

    .login-header .login-logo {
        width: 86px;
        height: 86px;
        background: rgba(255,255,255,.14);
        border: 2px solid rgba(255,255,255,.28);
        border-radius: 14px;
        margin: 0 auto 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 26px;
        color: #fff;
        backdrop-filter: blur(8px);
        overflow: hidden;
    }

    .login-header h1 {
        font-family: 'DM Sans', sans-serif; 
        font-weight: 800;
        font-size: 18px;
        color: var(--jl-white);
        margin: 0;
        letter-spacing: -.015em;
        line-height: 1.1;
    }

    .login-header p {
        font-family: 'DM Sans', sans-serif;
        font-size: 11.5px;
        color: rgba(255,255,255,.60);
        letter-spacing: .06em;
        text-transform: uppercase;
        margin: 6px 0 0;
    }

/* ── Cuerpo del formulario ───────────────────────────────── */
.login-body {
    padding: 26px 28px 22px;
}

/* ── Campos ──────────────────────────────────────────────── */
.login-field {
    margin-bottom: 16px;
}

    .login-field label {
        display: block;
        font-family: 'DM Sans', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: #2e3a5c;
        margin-bottom: 6px;
        letter-spacing: .01em;
    }

    .login-field .input-group-icon {
        position: relative;
    }

        .login-field .input-group-icon i {
            position: absolute;
            left: 11px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ba5be;
            font-size: 15px;
            z-index: 2;
            transition: color var(--jl-transition);
        }

    /* El input hereda .erp-form-control de styles_clasico — solo override visual */
    .login-field .erp-form-control {
        padding-left: 36px;
        height: 42px;
        font-family: 'DM Sans', sans-serif;
        font-size: 13.5px;
        border-radius: var(--jl-input-radius) !important;
        border: 1.5px solid #dde2ee !important;
        background: #f8f9fc !important;
        color: #0e1726 !important;
        transition: border-color var(--jl-transition), box-shadow var(--jl-transition), background var(--jl-transition) !important;
    }

        .login-field .erp-form-control:focus {
            border-color: var(--jl-blue-bright) !important;
            box-shadow: 0 0 0 3px rgba(30,154,245,.15) !important;
            background: #fff !important;
            outline: none;
        }

            .login-field .erp-form-control:focus + i,
            .login-field .input-group-icon:focus-within i {
                color: var(--jl-blue-mid);
            }

/* ── Toggle contraseña ───────────────────────────────────── */
.btn-toggle-pass {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #9ba5be;
    cursor: pointer;
    font-size: 15px;
    padding: 0;
    line-height: 1;
    transition: color var(--jl-transition);
    z-index: 3;
}

    .btn-toggle-pass:hover {
        color: var(--jl-blue-mid);
    }

/* ── Fila "Recordar sesión" ──────────────────────────────── */
.remember-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
    font-size: 12px;
}

    .remember-row label {
        font-family: 'DM Sans', sans-serif;
        color: #6b7694;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 6px;
    }

/* ── Botón principal de Login ────────────────────────────── */
.login-btn {
    width: 100%;
    padding: 12px;
    background: linear-gradient(135deg, var(--jl-green), var(--jl-green-dark));
    border: none;
    border-radius: 50px;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    letter-spacing: .01em;
    transition: transform var(--jl-transition), box-shadow var(--jl-transition);
    margin-top: 4px;
    box-shadow: 0 4px 18px var(--jl-green-glow);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .login-btn:hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px var(--jl-green-glow);
    }

    .login-btn:disabled {
        opacity: .65;
        cursor: not-allowed;
        transform: none;
    }

/* ── Enlace "¿Olvidaste tu contraseña?" ──────────────────── */
#btnAbrirRecuperar {
    font-family: 'DM Sans', sans-serif;
    font-size: 12px;
    color: #6b7694;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    padding: 0;
    transition: color var(--jl-transition);
}

    #btnAbrirRecuperar:hover {
        color: var(--jl-blue-mid);
        text-decoration: underline;
    }

/* ── Separador "¿Primera vez?" ───────────────────────────── */
.registro-sep {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 18px 0 12px;
    font-family: 'DM Sans', sans-serif;
    font-size: 11.5px;
    color: #9ba5be;
}

    .registro-sep::before,
    .registro-sep::after {
        content: '';
        flex: 1;
        height: 1px;
        background: #e4e8f0;
    }

/* ── Botón "Registrar mi Empresa" ────────────────────────── */
.btn-registro {
    width: 100%;
    padding: 11px 0;
    background: transparent;
    border: 1.5px solid var(--jl-blue-mid);
    border-radius: 50px;
    color: var(--jl-blue-mid);
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--jl-transition), color var(--jl-transition), transform var(--jl-transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

    .btn-registro:hover {
        background: var(--jl-blue-mid);
        color: #fff;
        transform: translateY(-1px);
    }

/* ── Etiqueta de versión ─────────────────────────────────── */
.version-tag {
    font-family: 'DM Sans', sans-serif;
    font-size: 10px;
    color: rgba(255,255,255,.32);
    margin-top: 18px;
    text-align: center;
    letter-spacing: .04em;
}

/* ── Grid de sucursales ──────────────────────────────────── */
.suc-hint {
    font-family: 'DM Sans', sans-serif;
    font-size: 13px;
    color: #5a6473;
    margin-bottom: 12px;
}

.suc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.suc-card {
    border: 1.5px solid #dde2ee;
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: border-color var(--jl-transition), background var(--jl-transition), box-shadow var(--jl-transition);
    background: #f8f9fc;
}

    .suc-card:hover {
        border-color: var(--jl-blue-bright);
        background: #eef5fd;
        box-shadow: 0 2px 10px rgba(30,154,245,.12);
    }

    .suc-card.selected {
        border-color: var(--jl-blue-mid);
        background: #e4f0fb;
        box-shadow: 0 0 0 3px rgba(21,101,192,.12);
    }

    .suc-card .suc-nombre {
        font-family: 'Syne', sans-serif;
        font-weight: 700;
        font-size: 13px;
        color: var(--jl-blue-deep);
    }

    .suc-card .suc-resp {
        font-family: 'DM Sans', sans-serif;
        font-size: 11px;
        color: #6b7694;
        margin-top: 3px;
    }

    .suc-card .suc-tel {
        font-family: 'DM Sans', sans-serif;
        font-size: 11px;
        color: #9ba5be;
        margin-top: 2px;
    }

/* ── Cabeceras de modales ────────────────────────────────── */
.reg-modal-header {
    background: linear-gradient(135deg, var(--jl-blue-deep), var(--jl-blue-mid));
    color: #fff;
    padding: 16px 20px;
    border-radius: 10px 10px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .reg-modal-header h5 {
        margin: 0;
        font-family: 'Syne', sans-serif;
        font-weight: 700;
        font-size: 15px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .reg-modal-header .btn-close-reg {
        background: none;
        border: none;
        color: rgba(255,255,255,.65);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        transition: color var(--jl-transition);
    }

        .reg-modal-header .btn-close-reg:hover {
            color: #fff;
        }

/* ── Secciones del formulario de registro ────────────────── */
.reg-section-label {
    font-family: 'DM Sans', sans-serif;
    font-size: 10.5px;
    font-weight: 700;
    color: #9ba5be;
    text-transform: uppercase;
    letter-spacing: .5px;
    margin: 16px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid #edf0f7;
    display: flex;
    align-items: center;
    gap: 6px;
}

.reg-form-group {
    margin-bottom: 12px;
}

    .reg-form-group label {
        display: block;
        font-family: 'DM Sans', sans-serif;
        font-size: 12px;
        font-weight: 600;
        color: #2e3a5c;
        margin-bottom: 5px;
    }

    .reg-form-group .erp-form-control {
        font-family: 'DM Sans', sans-serif;
        font-size: 13px;
        border-radius: var(--jl-input-radius) !important;
        border: 1.5px solid #dde2ee !important;
        background: #f8f9fc !important;
        height: 38px;
        transition: border-color var(--jl-transition), box-shadow var(--jl-transition) !important;
    }

        .reg-form-group .erp-form-control:focus {
            border-color: var(--jl-blue-bright) !important;
            box-shadow: 0 0 0 3px rgba(30,154,245,.13) !important;
            background: #fff !important;
        }

.reg-row {
    display: flex;
    gap: 12px;
}

    .reg-row .reg-form-group {
        flex: 1;
    }

/* ── Footer de modales ───────────────────────────────────── */
.reg-footer {
    padding: 14px 20px;
    border-top: 1px solid #edf0f7;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: #f8f9fc;
    border-radius: 0 0 10px 10px;
}

/* ── Barra de fuerza de contraseña ───────────────────────── */
.pwd-strength {
    height: 3px;
    border-radius: 2px;
    margin-top: 5px;
    transition: all .35s;
    background: #e4e8f0;
    width: 0%;
}

    .pwd-strength.weak {
        background: #dc3545;
        width: 33%;
    }

    .pwd-strength.medium {
        background: #fd7e14;
        width: 66%;
    }

    .pwd-strength.strong {
        background: var(--jl-green);
        width: 100%;
    }

/* ── Inputs con ícono en modales ─────────────────────────── */
.reg-form-group .input-group-icon {
    position: relative;
}

    .reg-form-group .input-group-icon i {
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ba5be;
        font-size: 14px;
        z-index: 2;
    }

    .reg-form-group .input-group-icon .erp-form-control {
        padding-left: 34px !important;
    }