/* Estilos de la pantalla de entrada (login y olvide mi contrasena). Antes estaban dentro de partials/login.html. */
    /* ============================================================
       LOGIN PAGE — Modern Professional Design
       ============================================================ */

    * { box-sizing: border-box; }

    .login-wrapper {
        position: relative;
        z-index: 1;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }

    /* ---- Video Background ---- */
    .fullscreen-video {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        object-fit: cover;
        z-index: 0;
        pointer-events: none;
    }

    .video-overlay {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 1;
        pointer-events: none !important;
        background: rgba(10, 15, 30, 0.68);
        /* NO backdrop-filter here — it creates a stacking context that blocks clicks */
    }

    /* ---- Slider (festive images) ---- */
    .slider {
        position: absolute;
        top: 0; left: 0;
        width: 100%; height: 100%;
        z-index: 0;
    }
    .slider img {
        width: 100%; height: 100%;
        object-fit: cover;
    }

    /* ---- Login Card Container ---- */
    .login-center {
        position: relative;
        z-index: 3;
        width: 100%;
        max-width: 420px;
        padding: 20px;
        pointer-events: auto;
    }

    /* ---- Glass Card ---- */
    .login-card {
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 24px;
        padding: 40px 36px 32px;
        box-shadow:
            0 32px 64px rgba(0, 0, 0, 0.45),
            0 0 0 1px rgba(255,255,255,0.04) inset;
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        position: relative;
        z-index: 4;
        pointer-events: auto;
    }

    /* ---- Logo ---- */
    .login-logo {
        text-align: center;
        margin-bottom: 28px;
    }
    .login-logo img {
        max-width: 160px;
        max-height: 70px;
        object-fit: contain;
        filter: drop-shadow(0 4px 12px rgba(0,0,0,0.4));
    }

    /* ---- Title ---- */
    .login-title {
        text-align: center;
        color: rgba(255,255,255,0.9);
        font-size: 22px;
        font-weight: 700;
        letter-spacing: -0.3px;
        margin-bottom: 6px;
    }
    .login-subtitle {
        text-align: center;
        color: rgba(255,255,255,0.45);
        font-size: 13px;
        margin-bottom: 28px;
    }

        .login-capture-box {
            margin-bottom: 24px;
            padding: 18px;
            border-radius: 18px;
            background: rgba(255,255,255,0.07);
            border: 1px solid rgba(255,255,255,0.10);
        }

        .login-capture-title {
            color: #fff;
            font-size: 17px;
            font-weight: 700;
            margin-bottom: 6px;
            text-align: center;
        }

        .login-capture-subtitle {
            color: rgba(255,255,255,0.68);
            font-size: 13px;
            line-height: 1.5;
            text-align: center;
            margin-bottom: 16px;
        }

        .login-capture-toggle {
            width: 100%;
            border: 1px solid rgba(255,255,255,0.18);
            background: rgba(255,255,255,0.06);
            color: rgba(255,255,255,0.82);
            border-radius: 14px;
            height: 44px;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: 0.04em;
            text-transform: uppercase;
            transition: all 0.2s ease;
            margin-bottom: 16px;
        }

        .login-capture-toggle:hover,
        .login-capture-toggle:focus {
            color: #fff;
            background: rgba(255,255,255,0.12);
            outline: none;
        }

        .login-capture-toggle.active {
            border-color: rgba(255,255,255,0.34);
            background: linear-gradient(135deg, rgba(255,255,255,0.22), rgba(255,255,255,0.10));
            color: #fff;
            box-shadow: 0 10px 24px rgba(0,0,0,0.18);
        }

    /* ---- Input Fields ---- */
    .login-field {
        position: relative;
        margin-bottom: 14px;
    }
    .login-field-icon {
        position: absolute;
        left: 14px;
        top: 50%;
        transform: translateY(-50%);
        color: rgba(255,255,255,0.35);
        font-size: 14px;
        pointer-events: none;
        z-index: 1;
    }
    .login-input {
        width: 100%;
        background: rgba(255,255,255,0.08) !important;
        border: 1px solid rgba(255,255,255,0.12) !important;
        border-radius: 12px !important;
        color: #f1f5f9 !important;
        font-size: 14px !important;
        padding: 13px 16px 13px 42px !important;
        height: auto !important;
        transition: all 0.2s ease;
        outline: none !important;
        box-shadow: none !important;
        position: relative;
        z-index: 2;
        pointer-events: auto !important;
    }
    .login-input::placeholder { color: rgba(255,255,255,0.35) !important; }
    .login-input:focus {
        background: rgba(255,255,255,0.12) !important;
        border-color: rgba(99,102,241,0.7) !important;
        box-shadow: 0 0 0 3px rgba(99,102,241,0.18) !important;
    }

    /* ---- Captcha ---- */
    .login-captcha-wrap {
        display: flex;
        justify-content: center;
        margin: 16px 0;
    }
    .g-recaptcha {
        transform: scale(0.88);
        transform-origin: center;
        display: inline-block;
    }
    @media (max-width: 400px) {
        .g-recaptcha { transform: scale(0.75); }
    }

    /* ---- Login Button ---- */
    .login-demo-btn {
        width: 100%;
        padding: 12px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px;
        border: 1.5px solid rgba(129,140,248,0.7) !important;
        background: rgba(99,102,241,0.08) !important;
        color: #c7d2fe !important;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-bottom: 10px !important;
        display: block;
        text-align: center;
        position: relative;
        z-index: 2;
    }
    .login-demo-btn:hover { background: rgba(99,102,241,0.2) !important; color: #fff !important; }
    .login-demo-btn[disabled] { opacity: .55; cursor: not-allowed; }
    .login-btn {
        width: 100%;
        padding: 13px !important;
        border-radius: 12px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        letter-spacing: 0.3px;
        border: none !important;
        background: linear-gradient(135deg, #6366f1, #4f46e5) !important;
        color: #fff !important;
        cursor: pointer;
        transition: all 0.2s ease;
        box-shadow: 0 4px 20px rgba(99,102,241,0.4);
        margin-bottom: 10px !important;
        display: block;
        text-align: center;
        text-decoration: none !important;
        position: relative;
        z-index: 2;
        pointer-events: auto !important;
    }
    .login-btn:hover {
        background: linear-gradient(135deg, #818cf8, #6366f1) !important;
        box-shadow: 0 6px 28px rgba(99,102,241,0.55);
        transform: translateY(-1px);
        color: #fff !important;
    }
    .login-btn:active { transform: translateY(0); }
    .login-btn[disabled] {
        opacity: 0.7;
        cursor: not-allowed;
        box-shadow: none;
        transform: none;
    }
    .login-btn-spinner {
        display: inline-block;
        width: 14px;
        height: 14px;
        margin-right: 8px;
        border: 2px solid rgba(255,255,255,0.35);
        border-top-color: #fff;
        border-radius: 50%;
        animation: login-spin 0.7s linear infinite;
        vertical-align: -2px;
    }
    @keyframes login-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }

    /* ---- Forgot Password ---- */
    .login-forgot {
        display: block;
        text-align: center;
        color: rgba(255,255,255,0.45) !important;
        font-size: 13px;
        text-decoration: none !important;
        transition: color 0.18s;
        padding: 6px 0;
    }
    .login-forgot:hover { color: rgba(255,255,255,0.75) !important; }

    /* ---- Error Message ---- */
    .login-error {
        color: #f87171;
        font-size: 13px;
        font-weight: 600;
        text-align: center;
        margin-top: 10px;
        min-height: 20px;
    }

    /* ---- Divider ---- */
    .login-divider {
        border: none;
        border-top: 1px solid rgba(255,255,255,0.08);
        margin: 22px 0 18px;
    }

    /* ---- Social Icons ---- */
    .login-social {
        display: flex;
        justify-content: center;
        gap: 14px;
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .login-social li a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: rgba(255,255,255,0.07);
        border: 1px solid rgba(255,255,255,0.1);
        color: rgba(255,255,255,0.55) !important;
        font-size: 15px;
        text-decoration: none !important;
        transition: all 0.18s ease;
    }
    .login-social li a:hover {
        background: rgba(255,255,255,0.14);
        color: #fff !important;
        transform: translateY(-2px);
    }
    .login-social li a.facebook:hover  { background: rgba(24,119,242,0.3); border-color: rgba(24,119,242,0.5); }
    .login-social li a.youtube:hover   { background: rgba(255,0,0,0.25); border-color: rgba(255,0,0,0.4); }
    .login-social li a.tiktok:hover    { background: rgba(0,0,0,0.4); border-color: rgba(255,255,255,0.3); }
    .login-social li a.website:hover   { background: rgba(99,102,241,0.3); border-color: rgba(99,102,241,0.5); }

    /* ---- Promo Accordion ---- */
    #promoAccordion {
        margin-top: 16px;
    }
    #promoAccordion .panel {
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.1) !important;
        border-radius: 14px !important;
        overflow: hidden;
    }
    #promoAccordion .panel-heading {
        background: rgba(100,116,139,0.25) !important;
        border: none !important;
        padding: 12px 16px;
    }
    #promoAccordion .panel-title a {
        color: rgba(255,255,255,0.85) !important;
        font-size: 13px;
        font-weight: 600;
        text-decoration: none !important;
    }
    #promoAccordion .panel-body {
        background: rgba(255,255,255,0.04) !important;
        color: rgba(255,255,255,0.7);
        font-size: 12px;
        border: none !important;
    }
    .promo-link { color: #818cf8 !important; }
    .promo-link:hover { color: #a5b4fc !important; }

    /* ---- Mobile adjustments ---- */
    @media (max-width: 480px) {
        .login-card { padding: 30px 22px 24px; border-radius: 20px; }
        .login-title { font-size: 20px; }
    }

/* ===== Olvide mi contrasena (2026-10-06): misma tarjeta que el login, con un icono animado y un estado "enviado" ===== */
.forgot-step { animation: forgotFadeUp .45s ease both; }
@keyframes forgotFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.forgot-icon {
    position: relative; width: 64px; height: 64px; margin: 4px auto 14px;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #6366f1, #4f46e5); color: #fff; font-size: 26px;
    box-shadow: 0 8px 26px rgba(99, 102, 241, .45);
}
.forgot-icon i { animation: forgotKey 2.6s ease-in-out infinite; }
.forgot-icon-ring {
    position: absolute; inset: -6px; border-radius: 50%; border: 2px solid rgba(129, 140, 248, .55);
    animation: forgotPulse 2.2s ease-out infinite;
}
@keyframes forgotPulse { 0% { transform: scale(.85); opacity: .9; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes forgotKey { 0%, 70%, 100% { transform: rotate(0); } 80% { transform: rotate(-18deg); } 90% { transform: rotate(12deg); } }

.forgot-field-error .login-input { border-color: rgba(248, 113, 113, .8) !important; }

.forgot-sent-art { position: relative; width: 84px; height: 84px; margin: 4px auto 14px; }
.forgot-plane {
    position: absolute; left: 50%; top: 50%; font-size: 30px; color: #a5b4fc;
    animation: forgotFly 1.1s cubic-bezier(.5, 0, .75, .4) forwards;
}
@keyframes forgotFly {
    0% { transform: translate(-50%, -50%) rotate(0) scale(1); opacity: 1; }
    100% { transform: translate(90px, -110px) rotate(-12deg) scale(.4); opacity: 0; }
}
.forgot-check { width: 84px; height: 84px; opacity: 0; animation: forgotShow .2s ease .85s forwards; }
.forgot-check-circle {
    stroke: #34d399; stroke-width: 3; stroke-dasharray: 151; stroke-dashoffset: 151;
    animation: forgotDraw .6s ease .9s forwards;
}
.forgot-check-mark {
    stroke: #34d399; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 40; stroke-dashoffset: 40; animation: forgotDraw .35s ease 1.4s forwards;
}
@keyframes forgotDraw { to { stroke-dashoffset: 0; } }
@keyframes forgotShow { to { opacity: 1; } }

.forgot-email { color: #e0e7ff; word-break: break-all; }
.forgot-tip {
    margin: 4px 0 16px; padding: 9px 12px; border-radius: 10px; font-size: 13px;
    background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .75); text-align: left;
}
.forgot-tip i { color: #fbbf24; margin-right: 6px; }
.forgot-link-btn {
    display: block; width: 100%; background: none; border: none; color: rgba(199, 210, 254, .85);
    font-size: 13px; font-weight: 600; padding: 6px; cursor: pointer; margin-bottom: 4px;
}
.forgot-link-btn:hover { color: #fff; text-decoration: underline; }
@media (prefers-reduced-motion: reduce) {
    .forgot-step, .forgot-icon i, .forgot-icon-ring, .forgot-plane, .forgot-check, .forgot-check-circle, .forgot-check-mark { animation: none !important; }
    .forgot-check { opacity: 1; }
    .forgot-check-circle, .forgot-check-mark { stroke-dashoffset: 0; }
    .forgot-plane { display: none; }
}

/* ===== Cambiar contrasena (2026-10-06): ojo para ver, medidor de fuerza y estados ===== */
.cp-field { position: relative; }
.cp-eye {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%); z-index: 3;
    background: none; border: none; color: rgba(255, 255, 255, .55); cursor: pointer; padding: 4px 6px;
}
.cp-eye:hover { color: #fff; }
.cp-strength { display: flex; align-items: center; gap: 10px; margin: -4px 0 12px; }
.cp-strength-bars { display: flex; gap: 5px; flex: 1; }
.cp-bar { flex: 1; height: 5px; border-radius: 99px; background: rgba(255, 255, 255, .14); transition: background .25s; }
.cp-bar.on.cp-level-1 { background: #f87171; }
.cp-bar.on.cp-level-2 { background: #fbbf24; }
.cp-bar.on.cp-level-3 { background: #60a5fa; }
.cp-bar.on.cp-level-4 { background: #34d399; }
.cp-strength-label { font-size: 12px; font-weight: 700; min-width: 54px; text-align: right; color: rgba(255, 255, 255, .6); }
.cp-strength-label.cp-level-1 { color: #fca5a5; }
.cp-strength-label.cp-level-2 { color: #fcd34d; }
.cp-strength-label.cp-level-3 { color: #93c5fd; }
.cp-strength-label.cp-level-4 { color: #6ee7b7; }
.cp-match { color: #34d399 !important; }
.cp-check-now { animation-delay: 0s !important; }
.cp-check-now .forgot-check-circle { animation-delay: .05s !important; }
.cp-check-now .forgot-check-mark { animation-delay: .55s !important; }
.cp-icon-warn { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 8px 26px rgba(245, 158, 11, .4); }
a.login-btn { line-height: 1.4; }