/* ============================================================
   auth-custom.css — Login Split Screen "Zephyr Dark Edition"
   v6.0 · SaaS Ultra-Premium · Zero Spaghetti
   Filosofía: Dramático · Orgánico · Minimalista
   Todos los estilos scoped con .lx-* — cero conflictos con
   el panel de administración (AdminLTE).
   ============================================================ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [1] LAYOUT SPLIT — Estructura base
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

body.lx-split-page.login-page {
    display: block !important;
    height: 100vh;
    overflow: hidden;
}

@media (max-width: 1399.98px) {
    html,
    body.login-page.body_background.lx-split-page {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    body.lx-split-page.login-page {
        height: auto !important;
        min-height: 100vh !important;
        overflow-y: auto !important;
    }

    .lx-split-container {
        height: auto !important;
        min-height: 100vh !important;
        overflow: visible !important;
    }

    .lx-split-row {
        height: auto !important;
        flex-wrap: wrap;
    }

    .lx-form-col {
        height: auto !important;
        min-height: 100vh !important;
        width: 100%;
        align-items: flex-start;
        justify-content: flex-start;
        padding-top: 2rem;
        padding-bottom: 2rem;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .lx-form-inner {
        max-width: 460px;
        margin: 0 auto;
    }
}

body.login-page.body_background {
    background: #ffffff !important;
    background-image: none !important;
}

.image-bg,
#particles-js-container-login {
    display: none !important;
}

.lx-split-container {
    height: 100vh;
    overflow: hidden;
    position: relative;
    z-index: 5;
    background-color: #ffffff; /* fondo blanco puro: el corte diagonal expone blanco limpio */
}

.lx-split-row {
    height: 100%;
    flex-wrap: nowrap;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [2] COLUMNA IZQUIERDA — Formulario ultra-premium
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lx-form-col {
    background: #ffffff;
    height: 100vh;
    overflow: visible; /* permite que ::after salga 100px hacia brand-col sin recortarse */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 10; /* supera a brand-col (z-index:2) → ::after pinta sobre el panel oscuro */
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ONDA DIVISORA — ::after con mask-image SVG
   ─────────────────────────────────────────────────────────
   Técnica: fondo #ffffff + mask-image con S-curve blanca.
   · El pseudo-elemento sale 100px hacia brand-col (left:100%).
   · mask-image recorta el rectángulo blanco en forma de onda.
   · El blanco cubre el gradiente oscuro → fusión perfecta, sin
     inyectar ningún color que deba coincidir con el degradado.
   · Cero HTML extra. Cero scroll (lx-split-container clipa todo).
   ─────────────────────────────────────────────────────────
   Análisis del path SVG (viewBox 0 0 100 1000):
     M0,0 L60,0          top: x=60
     C90,200 30,400 60,500   primera onda: pico en x≈90 (y≈200),
                              valle en x≈30 (y≈400), centro x=60 (y=500)
     C90,600 30,800 60,1000  segunda onda: espeja la primera
     L0,1000 Z           borde izquierdo recto (x=0) cierra
   Área blanca visible: x=0 → límite ondulado [30 – 90 px]
   El lx-split-container (overflow:hidden) garantiza cero scroll.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media (min-width: 1400px) {
    .lx-form-col::after {
        content: '';
        position: absolute;
        top: 0;
        left: 100%; /* ancla su borde izquierdo al borde derecho de form-col */
        width: 180px; /* ancho ampliado: más espacio físico = ondas más dramaticas */
        height: 100%;
        background: #ffffff;
        /* S-curve pronunciada v3:
           Control points en los tercios exactos del segmento → máxima curvatura
           suave (Bézier cúbico en su punto óptimo de inflexión).
           Picos en x=100 (y≈167 / y≈667) — borde extremo derecho del elemento.
           Valles en x=3  (y≈333 / y≈833) — casi al borde izquierdo.
           Amplitud real sobre 180px: ≈171px. Curva muy pronunciada y moderna. */
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0,0 L68,0 C100,167 3,333 68,500 C100,667 3,833 68,1000 L0,1000 Z'/%3E%3C/svg%3E");
                mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 1000' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0,0 L68,0 C100,167 3,333 68,500 C100,667 3,833 68,1000 L0,1000 Z'/%3E%3C/svg%3E");
        -webkit-mask-size: 100% 100%;
                mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
                mask-repeat: no-repeat;
        pointer-events: none;
    }
}

.lx-form-inner {
    width: 100%;
    max-width: 400px;
    padding: 2.5rem 2.25rem;
}


/* ── Logo ── */
.lx-logo { margin-bottom: 2.5rem; }
.lx-logo-img { height: 44px; width: auto; }


/* ── Cloud Icon + nube decorativa ── */
.lx-form-cloud { margin-bottom: 0.9rem; }

.lx-cloud-svg {
    width: 46px;
    height: auto;
    filter: drop-shadow(0 0 12px rgba(99, 102, 241, 0.55))
            drop-shadow(0 0 28px rgba(37, 99, 235, 0.25));
}


/* ── Textos de bienvenida ── */
.lx-welcome-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #080f1e;
    letter-spacing: -0.6px;
    line-height: 1.18;
    margin-bottom: 0.45rem;
}

.lx-welcome-sub {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.62;
    margin-bottom: 0.5rem;
}


/* ── Header Rule (línea shimmer) ── */
.lx-header-rule {
    position: relative;
    width: 100%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(99, 102, 241, 0.38),
        rgba(14, 165, 233, 0.28),
        transparent
    );
    margin-bottom: 1.85rem;
    overflow: hidden;
}

.lx-header-rule::after {
    content: '';
    position: absolute;
    top: 0;
    left: -70%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.75),
        transparent
    );
    animation: lx-shimmer 3s ease-in-out infinite;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   INPUTS — Floating Labels ultra-premium
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lx-field-float {
    margin-bottom: 0;
    position: relative;
}

/* ── Input base: más padding, radio mayor, fondo muy sutil ── */
.lx-field-float > .form-control {
    border: 1px solid #dde6f3;
    border-radius: 14px;
    background: linear-gradient(180deg, #fbfcfe 0%, #f5f8fc 100%);
    color: #080f1e;
    font-size: 0.95rem;
    padding: 1.34rem 1.1rem 0.54rem;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 rgba(148, 163, 184, 0.04),
        0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition:
        border-color 0.22s ease,
        background   0.22s ease,
        box-shadow   0.22s ease;
}

/* ── Label base ── */
.lx-field-float > label {
    color: #94a3b8;
    font-size: 0.875rem;
    padding: 1.30rem 1.1rem;
    transition:
        opacity   0.18s ease,
        transform 0.18s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.lx-field-float > .form-control::placeholder {
    color: transparent;
    opacity: 0;
}

/* ── Focus: glow azul eléctrico en 3 capas ── */
.lx-field-float > .form-control:focus {
    border-color: #8fb7ff;
    background: #ffffff;
    color: #080f1e;
    outline: none;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 -1px 0 rgba(37, 99, 235, 0.06),
        0 0 0 4px rgba(37, 99, 235, 0.09),
        0 0 0 1px rgba(147, 197, 253, 0.45),
        0 10px 24px rgba(37, 99, 235, 0.08) !important;
}

/* ── Error state ── */
.lx-field-float > .form-control.is-invalid {
    border-color: #fca5a5 !important;
    background: #fff8f8 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08) !important;
}

.lx-field-float .invalid-feedback {
    font-size: 0.78rem;
    color: #ef4444;
    padding-left: 0.25rem;
    margin-top: 0.3rem;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   FIX CRÍTICO: Iconos sin solapamiento con floating labels
   ─────────────────────────────────────────────────────────
   El padding-left del input, el label y la posición del
   ícono deben ser consistentes. Ver commit history para
   el detalle del bug original.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lx-field-email,
.lx-field-password,
.lx-field-user,
.lx-field-password-confirm {
    position: relative;
}

/* Ícono SVG: centrado en la zona de texto del floating label */
.lx-field-email::before,
.lx-field-password::before,
.lx-field-user::before,
.lx-field-password-confirm::before {
    content: '';
    position: absolute;
    left: 1.15rem;
    top: calc(50% + 4px);
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
    pointer-events: none;
    z-index: 10;
    opacity: 0.56;
    transition: opacity 0.20s ease, transform 0.20s ease;
}

/* Sobre minimalista con trazos más finos */
.lx-field-email::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5.5' width='18' height='13' rx='3'/%3E%3Cpath d='m4.5 7 6.52 5.08a1.6 1.6 0 0 0 1.96 0L19.5 7'/%3E%3C/svg%3E");
}

.lx-field-user::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f6ef7' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3C/svg%3E");
}

/* Candado moderno y limpio */
.lx-field-password::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='3'/%3E%3Cpath d='M8 10.5V8a4 4 0 1 1 8 0v2.5'/%3E%3Cpath d='M12 14.4v2.4'/%3E%3C/svg%3E");
}

.lx-field-password-confirm::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233b82f6' stroke-width='1.55' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10.5' width='16' height='10' rx='3'/%3E%3Cpath d='M8 10.5V8a4 4 0 1 1 8 0v2.5'/%3E%3Cpath d='m10.4 15.8 1.2 1.2 2.6-2.6'/%3E%3C/svg%3E");
}

/* padding-left amplio para respetar el ícono */
.lx-field-email .form-control,
.lx-field-password .form-control,
.lx-field-user .form-control,
.lx-field-password-confirm .form-control {
    padding-left: 3.95rem;
}

/* CRÍTICO: el label debe tener el mismo padding-left que el input */
.lx-field-email > label,
.lx-field-password > label,
.lx-field-user > label,
.lx-field-password-confirm > label {
    padding-left: 3.95rem;
}

/* Focus: el ícono se intensifica */
.lx-field-email:focus-within::before,
.lx-field-password:focus-within::before,
.lx-field-user:focus-within::before,
.lx-field-password-confirm:focus-within::before {
    opacity: 0.9;
    transform: translateY(-50%) scale(1.02);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   OPCIONES — Recuérdame + ¿Olvidaste?
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lx-opts-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.1rem 0 1.65rem;
}

.lx-opts-row .form-check {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.lx-opts-row .form-check-input {
    border-color: #cbd5e1;
    margin-top: 0;
    transition:
        background     0.18s ease,
        border-color   0.18s ease,
        box-shadow     0.18s ease;
}

.lx-opts-row .form-check-input:checked {
    background-color: #2563eb;
    border-color:     #2563eb;
}

.lx-opts-row .form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10);
    border-color: #bfdbfe;
    outline: none;
}

.lx-check-label {
    font-size: 0.84rem;
    color: #475569;
    cursor: pointer;
    user-select: none;
}

.lx-forgot-link {
    font-size: 0.84rem;
    color: #2563eb;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.18s ease;
    white-space: nowrap;
}

.lx-forgot-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BOTÓN CTA — Glow shadow triple + micro-elevación premium
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lx-btn-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    width: 100%;
    padding: 1.0rem 1.5rem !important;
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%) !important;
    border: none !important;
    border-radius: 14px !important;
    color: #ffffff !important;
    font-size: 0.96rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.15px;
    cursor: pointer;
    margin-bottom: 1.6rem;
    transition:
        background  0.22s ease,
        transform   0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
        box-shadow  0.22s ease !important;
    /* Glow de su propio color — triple capa */
    box-shadow:
        0 4px 18px rgba(79, 70, 229, 0.52),
        0 2px  8px rgba(37, 99, 235, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.17);
}

.lx-btn-cta .fas.fa-arrow-right,
.lx-btn-cta i {
    display: inline-block;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lx-btn-cta:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #4338ca 100%) !important;
    color: #ffffff !important;
    transform: translateY(-3px);
    box-shadow:
        0 10px 36px rgba(79, 70, 229, 0.65),
        0  4px 14px rgba(37, 99, 235, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.19) !important;
}

.lx-btn-cta:hover .fas.fa-arrow-right,
.lx-btn-cta:hover i {
    transform: translateX(5px);
}

.lx-btn-cta:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25) !important;
}

.lx-btn-cta:focus-visible {
    outline: 3px solid rgba(37, 99, 235, 0.40);
    outline-offset: 3px;
}


/* ── Enlace de registro ── */
.lx-register-row {
    text-align: center;
    font-size: 0.875rem;
    color: #64748b;
    margin-bottom: 1.5rem;
}

.lx-register-row a {
    color: #2563eb;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.18s ease;
}

.lx-register-row a:hover {
    color: #1d4ed8;
    text-decoration: underline;
}


/* ── Divisor "o continúa con" ── */
.lx-divider {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.35rem;
}

.lx-divider hr {
    flex: 1;
    border-color: #94a3b8;
    margin: 0;
    opacity: 0.13;
}

.lx-divider span {
    color: #94a3b8;
    font-size: 0.72rem;
    white-space: nowrap;
    font-weight: 500;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   BOTONES SOCIALES — Outline premium · glow hover interior
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lx-social-btn {
    display: flex !important;
    align-items: center;
    width: 100%;
    padding: 0.82rem 1.3rem !important;
    background: #fafbff !important;
    border: 1.5px solid #eaeff8 !important;
    border-radius: 14px !important;
    color: #2d3a52 !important;
    font-size: 0.875rem !important;
    font-weight: 500;
    text-decoration: none;
    margin-bottom: 0.72rem;
    cursor: pointer;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1.00),
        0 1px 4px rgba(0, 0, 0, 0.05),
        0 2px 8px rgba(0, 0, 0, 0.03);
    transition:
        background    0.22s ease,
        border-color  0.22s ease,
        box-shadow    0.22s ease,
        transform     0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
        color         0.22s ease;
}

.lx-social-btn:hover {
    background: #f0f5ff !important;
    border-color: #c2d4f8 !important;
    color: #1a2b6e !important;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 1.00),
        inset 0 0 18px rgba(99, 102, 241, 0.07),
        0 6px 22px rgba(37, 99, 235, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.04);
}

.lx-social-btn:active {
    transform: translateY(0);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 1px 3px rgba(0, 0, 0, 0.07);
}

.lx-social-btn .social-logo { width: 18px; height: 18px; flex-shrink: 0; }
.lx-social-btn-text { flex: 1; text-align: center; }


/* ── Badges de apps ── */
.lx-apps-section {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #f1f5f9;
}

.lx-apps-label {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-bottom: 0.6rem;
}

.lx-badge-img {
    height: 36px;
    transition:
        opacity   0.18s ease,
        transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.lx-badge-img:hover {
    opacity: 0.78;
    transform: translateY(-2px);
}


/* ── Copyright ── */
.lx-copyright {
    text-align: center;
    font-size: 0.73rem;
    color: #cbd5e1;
    margin-top: 1.1rem;
    margin-bottom: 0;
}

.lx-copyright a {
    color: #94a3b8;
    text-decoration: none;
    transition: color 0.18s ease;
}

.lx-copyright a:hover { color: #64748b; }

.lx-register-page .lx-form-inner-register {
    max-width: 430px;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    padding-top: 2rem;
    padding-bottom: 2rem;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.lx-register-page .lx-form-inner-register::-webkit-scrollbar {
    display: none;
}

.lx-register-page .lx-btn-cta-register {
    margin-bottom: 1.25rem;
}

.lx-register-page .lx-register-switch {
    margin-bottom: 1.35rem;
}

.lx-register-page .lx-copyright-register {
    margin-top: 1.3rem;
}

.lx-email-page,
.lx-reset-page {
    width: 100vw;
    min-height: 100vh;
    margin: -1.5rem calc(50% - 50vw);
}

body.login-page {
    display: block !important;
    min-height: 100vh;
    height: auto;
}

body.login-page #app,
body.login-page #app > main {
    width: 100%;
}

body.login-page #app > main.py-4 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.lx-email-page .lx-form-inner-email,
.lx-reset-page .lx-form-inner-reset {
    max-width: 400px;
}

.lx-auth-inline-wrap {
    position: relative;
}

.lx-auth-inline-icon {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    z-index: 10;
    color: #64748b;
    pointer-events: none;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.lx-auth-inline-input {
    border: 1px solid #dde6f3 !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #fbfcfe 0%, #f5f8fc 100%) !important;
    color: #080f1e !important;
    font-size: 0.95rem !important;
    height: 56px !important;
    padding-left: 45px !important;
    padding-right: 1rem !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.92),
        inset 0 -1px 0 rgba(148, 163, 184, 0.04),
        0 1px 2px rgba(15, 23, 42, 0.03) !important;
    transition:
        border-color 0.22s ease,
        background 0.22s ease,
        box-shadow 0.22s ease !important;
}

.lx-auth-inline-input::placeholder {
    color: #94a3b8 !important;
    opacity: 1;
}

.lx-auth-inline-wrap:focus-within .lx-auth-inline-icon {
    color: #3b82f6;
}

.lx-auth-inline-input:focus {
    border-color: #8fb7ff !important;
    background: #ffffff !important;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.94),
        inset 0 -1px 0 rgba(37, 99, 235, 0.06),
        0 0 0 4px rgba(37, 99, 235, 0.09),
        0 0 0 1px rgba(147, 197, 253, 0.45),
        0 10px 24px rgba(37, 99, 235, 0.08) !important;
}

.lx-auth-inline-input.is-invalid {
    border-color: #fca5a5 !important;
    background: #fff8f8 !important;
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.08) !important;
}

.lx-email-page .lx-logo-img-email,
.lx-reset-page .lx-logo-img-reset {
    height: 52px;
    width: auto;
    max-width: 240px;
}

.lx-email-page .lx-email-alert {
    border: 1px solid rgba(34, 197, 94, 0.22);
    border-radius: 14px;
    background: rgba(34, 197, 94, 0.08);
    color: #166534;
    margin-bottom: 1rem;
}

.lx-email-page .lx-btn-cta-email {
    margin-bottom: 1.25rem;
}

.lx-reset-page .lx-btn-cta-reset {
    margin-bottom: 1.25rem;
}

.lx-email-page .lx-email-links-primary {
    margin-bottom: 0.55rem;
}

.lx-reset-page .lx-reset-links-primary {
    margin-bottom: 1.25rem;
}

.lx-email-page .lx-email-links-secondary {
    margin-bottom: 1.25rem;
}

.lx-email-page .lx-copyright-email,
.lx-reset-page .lx-copyright-reset {
    margin-top: 0;
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [3] KEYFRAMES
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Dot verde "live" — ring expansivo */
@keyframes lx-ring-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0.75); }
    65%  { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(34, 197, 94, 0);    }
}

/* Blob A — zafiro superior-izquierdo */
@keyframes lx-blob-a {
    0%, 100% { transform: translate(  0px,   0px) scale(1.00); }
    40%      { transform: translate( 68px, -78px) scale(1.20); }
    70%      { transform: translate(-48px,  42px) scale(0.86); }
}

/* Blob B — cian inferior-derecho */
@keyframes lx-blob-b {
    0%, 100% { transform: translate(  0px,   0px) scale(1.00); }
    35%      { transform: translate(-68px,  52px) scale(1.16); }
    68%      { transform: translate( 52px, -58px) scale(0.90); }
}

/* Blob C — indigo central */
@keyframes lx-blob-c {
    0%, 100% { transform: translate(  0px,   0px) scale(1.00); }
    30%      { transform: translate( 50px,  40px) scale(1.14); }
    65%      { transform: translate(-40px, -50px) scale(0.90); }
}

/* Shimmer de la línea decorativa */
@keyframes lx-shimmer {
    0%   { left: -70%; }
    100% { left: 130%; }
}

/* Entrada del bento wrapper */
@keyframes lx-bento-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Flotación de stat cards legacy */
@keyframes lx-card-float {
    0%, 100% { transform: translateY(0px);  }
    50%      { transform: translateY(-6px); }
}

/* Marquee scroll vertical infinito */
@keyframes lx-marquee-up {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [4] COLUMNA DERECHA — Aurora profunda · Mesh Constellation
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* ── Fondo: #030B1A (navy más profundo) + 3-layer aurora + constelación ── */
.lx-brand-col {
    height: 100vh;
    background-color: #030b1a;
    background-image:
        /* Aurora 1: zafiro eléctrico superior-izquierdo — foco primario */
        radial-gradient(ellipse at 18% 0%,    rgba(37,  99, 235, 0.75) 0%, transparent 44%),
        /* Aurora 2: cian profundo inferior-derecho */
        radial-gradient(ellipse at 92% 94%,   rgba(6,  182, 212, 0.30) 0%, transparent 42%),
        /* Aurora 3: indigo central derecho */
        radial-gradient(ellipse at 82% 52%,   rgba(99, 102, 241, 0.24) 0%, transparent 46%),
        /* Aurora 4: azul sapphire superior-derecho */
        radial-gradient(ellipse at 74% 7%,    rgba(30,  64, 175, 0.38) 0%, transparent 42%),
        /* Aurora 5: bloom violeta sutil centro-bajo */
        radial-gradient(ellipse at 45% 74%,   rgba(139, 92, 246, 0.11) 0%, transparent 52%),
        /* Aurora 6: cabecera global soft */
        radial-gradient(ellipse at 50% 50%,   rgba(79,  70, 229, 0.05) 0%, transparent 72%),
        /* Constelación capa 1: puntos finos */
        radial-gradient(circle, rgba(255, 255, 255, 0.058) 1px, transparent 1px),
        /* Constelación capa 2: nodos medianos */
        radial-gradient(circle, rgba(255, 255, 255, 0.098) 1px, transparent 1px),
        /* Constelación capa 3: nodos guía con tinte azul */
        radial-gradient(circle, rgba(147, 197, 253, 0.155) 1.5px, transparent 1.5px);
    background-size:
        auto, auto, auto, auto, auto, auto,
        28px  28px,
        73px  73px,
        117px 117px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

/* Blob A — zafiro superior-izquierdo */
.lx-brand-col::before {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(30, 58, 138, 0.38) 0%, transparent 70%);
    top: -12%;
    left: -3%;
    animation: lx-blob-a 22s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* Blob B — cian inferior-derecho */
.lx-brand-col::after {
    content: '';
    position: absolute;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.18) 0%, transparent 70%);
    bottom: -5%;
    right: -4%;
    animation: lx-blob-b 28s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

/* ── Wrapper principal del contenido ── */
.lx-bento-wrapper {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    gap: 2.6rem;
    padding: 2.5rem 3rem;
    width: 100%;
    max-width: 540px;
    animation: lx-bento-in 0.80s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Blob C — indigo suave, renderizado en el wrapper */
.lx-bento-wrapper::before {
    content: '';
    position: absolute;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(99, 102, 241, 0.14) 0%, transparent 70%);
    top: -15%;
    right: -22%;
    animation: lx-blob-c 24s ease-in-out infinite;
    pointer-events: none;
    z-index: -1;
}

/* ── Header: badge + headline ── */
.lx-bento-header {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Badge "live" pill */
.lx-live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    background: rgba(3, 11, 26, 0.78);
    border: 1px solid rgba(99, 102, 241, 0.36);
    border-radius: 100px;
    padding: 0.44rem 1.0rem 0.44rem 0.65rem;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    width: fit-content;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.07),
        0 0 18px rgba(34, 197, 94, 0.14);
}

/* Punto verde pulsante */
.lx-badge-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: lx-ring-pulse 2.2s ease-out infinite;
}

.lx-badge-text {
    font-size: 0.70rem;
    font-weight: 600;
    color: #93c5fd;
    letter-spacing: 0.9px;
    text-transform: uppercase;
}

/* ── Stat cards legacy (para compatibilidad) ── */
.lx-stat-cards {
    display: flex;
    flex-direction: column;
    gap: 0.90rem;
}

.lx-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.15rem 1.35rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.044);
    border-top:    1px solid rgba(255, 255, 255, 0.22);
    border-left:   1px solid rgba(255, 255, 255, 0.14);
    border-right:  1px solid rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    position: relative;
    overflow: hidden;
    animation: lx-card-float 5.5s ease-in-out infinite;
    transition:
        background  0.30s ease,
        box-shadow  0.30s ease,
        transform   0.30s ease;
    box-shadow:
        0 4px 24px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.lx-card-volume  { animation-delay: 0.0s; }
.lx-card-uptime  { animation-delay: 0.9s; }
.lx-card-sync    { animation-delay: 1.8s; }

.lx-stat-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.42),
        transparent
    );
    pointer-events: none;
}

.lx-card-volume::after {
    content: '';
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 2.5px;
    background: linear-gradient(to bottom, transparent, rgba(6, 182, 212, 0.92), transparent);
    border-radius: 2px;
}

.lx-card-uptime::after {
    content: '';
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 2.5px;
    background: linear-gradient(to bottom, transparent, rgba(34, 197, 94, 0.92), transparent);
    border-radius: 2px;
}

.lx-card-sync::after {
    content: '';
    position: absolute;
    left: 0; top: 18%; bottom: 18%;
    width: 2.5px;
    background: linear-gradient(to bottom, transparent, rgba(99, 102, 241, 0.92), transparent);
    border-radius: 2px;
}

.lx-stat-card:hover {
    background: rgba(255, 255, 255, 0.082);
    border-top-color: rgba(255, 255, 255, 0.36);
    transform: translateY(-4px) scale(1.012);
    box-shadow:
        0 20px 56px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Stat card icon ── */
.lx-card-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.lx-icon-cyan {
    background: rgba(6, 182, 212, 0.14);
    border: 1px solid rgba(6, 182, 212, 0.40);
    box-shadow: 0 0 22px rgba(6, 182, 212, 0.28), inset 0 1px 0 rgba(6, 182, 212, 0.18);
}

.lx-icon-green {
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.40);
    box-shadow: 0 0 22px rgba(34, 197, 94, 0.28), inset 0 1px 0 rgba(34, 197, 94, 0.18);
}

.lx-icon-indigo {
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.40);
    box-shadow: 0 0 22px rgba(99, 102, 241, 0.28), inset 0 1px 0 rgba(99, 102, 241, 0.18);
}

/* ── Stat card body ── */
.lx-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lx-card-label {
    font-size: 0.70rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.50);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin: 0;
}

.lx-card-stat {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 1.40rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.5px;
    line-height: 1;
    margin: 0;
}

.lx-card-unit {
    font-size: 0.72rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.1px;
}

/* ── Glow blobs por tarjeta ── */
.lx-card-glow {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(28px);
    opacity: 0.52;
    transition: opacity 0.30s ease;
}

.lx-glow-cyan   { background: rgba(6,  182, 212, 0.80); }
.lx-glow-green  { background: rgba(34, 197,  94, 0.80); }
.lx-glow-indigo { background: rgba(99, 102, 241, 0.80); }

.lx-stat-card:hover .lx-card-glow { opacity: 0.88; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [5b] RESPONSIVE — lg-xl (992px–1399px): layout split bloqueado
   El max-width:1399.98px override abre el scroll global, pero
   en este rango el panel derecho ya es visible. Solución: replicar
   el locked-viewport del desktop (≥1400px) — el contenedor queda
   en 100vh/overflow:hidden y SOLO la columna izquierda scrollea
   internamente con overflow-y:auto.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (min-width: 992px) and (max-width: 1399.98px) {
    html,
    body.lx-split-page.login-page {
        height: 100vh !important;
        overflow: hidden !important;
    }

    .lx-split-container {
        height: 100vh !important;
        overflow: hidden !important;
    }

    .lx-split-row {
        height: 100% !important;
        flex-wrap: nowrap !important;
    }

    .lx-form-col {
        height: 100vh !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
        align-items: flex-start !important;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .lx-brand-col {
        height: 100vh !important;
        overflow: hidden !important;
    }
}

/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [5] RESPONSIVE — Móvil: columna derecha desaparece
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

@media (max-width: 991.98px) {
    html,
    body.login-page,
    body.lx-split-page.login-page,
    body.login-page #app,
    body.login-page #app > main,
    .lx-split-container,
    .lx-split-row,
    .lx-form-col {
        overflow-x: hidden !important;
    }

    body.lx-split-page.login-page {
        overflow-y: auto;
        height: auto;
    }

    .lx-split-container {
        height: auto;
        min-height: 100vh;
        overflow: visible;
    }

    .lx-split-row {
        height: auto;
        flex-wrap: wrap;
    }

    .lx-form-col {
        height: auto;
        min-height: 100vh;
        width: 100%;
        align-items: center;
        justify-content: center;
        padding-top: 0;
        padding-bottom: 0;
    }

    .lx-form-col::after {
        display: none;
    }

    .lx-form-inner {
        padding: 1.5rem 1.25rem;
        max-width: 460px;
        margin: 0 auto;
    }

    .lx-register-page .lx-form-col-register {
        padding: 0;
    }

    .lx-register-page .lx-form-inner-register {
        max-height: none;
        overflow: visible;
    }

    .lx-email-page,
    .lx-reset-page {
        width: auto;
        min-height: 100vh;
        margin: 0;
    }

}

@media (max-width: 480px) {
    .lx-form-inner { padding: 1.25rem 1rem; }
    .lx-welcome-title { font-size: 1.45rem; }
    .lx-field-float > .form-control,
    .lx-auth-inline-input {
        font-size: 16px !important;
    }
    .lx-email-page,
    .lx-reset-page {
        margin: 0;
    }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [6] BENTO HEADER — Headline ultra-impactante v6.0
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Headline: más grande, peso 900, tracking más apretado,
   degradado 4-stop: blanco → azul cielo → lavanda */
.lx-bento-headline {
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(2.0rem, 3.5vw, 3.2rem);
    font-weight: 900;
    letter-spacing: -1.8px;
    line-height: 1.08;
    background: linear-gradient(
        145deg,
        #ffffff      12%,
        #dde9ff      45%,
        #bdd3ff      72%,
        #c4b5fd     100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0;
}

/* Acento: cyan → azul cielo → violeta suave */
.lx-headline-accent {
    background: linear-gradient(
        to right,
        #22d3ee,
        #06b6d4,
        #818cf8
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Subtítulo descriptivo */
.lx-bento-sub {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.44);
    line-height: 1.72;
    margin: 0;
    font-weight: 400;
    letter-spacing: 0.1px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [7] VERTICAL MARQUEE — CSS puro · Loop infinito seamless
   ─────────────────────────────────────────────────────────
   TÉCNICA SEAMLESS:
   · 12 tarjetas en el DOM (Set A + Set B idénticos)
   · Cada tarjeta: margin-bottom: 16px — incluido en las 12
   · Slot = altura_carta + 16px → uniforme
   · translateY(-50%) = exactamente 6 tarjetas → cero saltos
   · Duración 28s → lectura cómoda (~4.7s por tarjeta visible)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* Contenedor enmascarado:
   Altura 420px: muestra ~3.5 tarjetas a la vez.
   Máscara 15%/85%: fundido suave con el fondo oscuro. */
.lx-marquee-outer {
    height: 420px;
    overflow: hidden;
    position: relative;
    -webkit-mask-image: linear-gradient(
        to bottom,
        transparent   0%,
        black        15%,
        black        85%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        transparent   0%,
        black        15%,
        black        85%,
        transparent 100%
    );
}

/* Pista animada */
.lx-marquee-track {
    display: flex;
    flex-direction: column;
    animation: lx-marquee-up 28s linear infinite;
    will-change: transform;
}

/* Pausa al hover: permite leer sin perder la tarjeta */
.lx-marquee-outer:hover .lx-marquee-track {
    animation-play-state: paused;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [8] MARQUEE CARDS — Glassmorphism 3D premium v6.0
   ─────────────────────────────────────────────────────────
   Mejoras v6.0 vs v5.0:
   · blur: 22px → 32px (más profundidad de vidrio)
   · background: ligeramente más visible
   · box-shadow: sombra de profundidad añadida
   · border reflejo superior: más brillante
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lx-mq-card {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    padding: 1.1rem 1.45rem 1.1rem 1.35rem;
    border-radius: 18px;
    /* Vidrio oscuro — fondo sutil con más opacidad */
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.068) 0%,
        rgba(255, 255, 255, 0.022) 100%
    );
    /* Bordes asimétricos: luz en aristas top/left */
    border-top:    1px solid rgba(255, 255, 255, 0.20);
    border-left:   1px solid rgba(255, 255, 255, 0.12);
    border-right:  1px solid rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.03);
    /* blur 32px: más efecto glassmorphism */
    backdrop-filter: blur(32px);
    -webkit-backdrop-filter: blur(32px);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
    /* CRÍTICO: margin-bottom fijo en las 12 tarjetas → loop -50% exacto */
    margin-bottom: 16px;
    /* Sombra de profundidad */
    /*box-shadow:
        0 4px 20px rgba(0, 0, 0, 0.20),
        0 1px 0   rgba(255, 255, 255, 0.06) inset;*/
    transition:
        background   0.30s ease,
        border-color 0.30s ease,
        box-shadow   0.30s ease,
        transform    0.30s ease;
}

/* Reflejo de luz superior */
.lx-mq-card::before {
    content: '';
    position: absolute;
    top: 0; left: 10%; right: 10%;
    height: 1px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(255, 255, 255, 0.34),
        transparent
    );
    pointer-events: none;
}

/* Hover: se ilumina y desplaza lateralmente */
.lx-mq-card:hover {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.105) 0%,
        rgba(255, 255, 255, 0.044) 100%
    );
    border-top-color: rgba(255, 255, 255, 0.34);
    transform: translateX(4px);
    box-shadow:
        0 16px 44px rgba(0, 0, 0, 0.34),
        0  2px  8px rgba(0, 0, 0, 0.18),
        0 1px 0 rgba(255, 255, 255, 0.08) inset;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   ICON WRAPS — Badge cromático por tarjeta (7 variantes)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lx-mq-icon-wrap {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lx-mqi-cyan {
    background: rgba(6, 182, 212, 0.14);
    border: 1px solid rgba(6, 182, 212, 0.42);
    box-shadow: 0 0 22px rgba(6, 182, 212, 0.28), inset 0 1px 0 rgba(6, 182, 212, 0.20);
}

.lx-mqi-violet {
    background: rgba(139, 92, 246, 0.14);
    border: 1px solid rgba(139, 92, 246, 0.42);
    box-shadow: 0 0 22px rgba(139, 92, 246, 0.28), inset 0 1px 0 rgba(139, 92, 246, 0.20);
}

.lx-mqi-blue {
    background: rgba(59, 130, 246, 0.14);
    border: 1px solid rgba(59, 130, 246, 0.42);
    box-shadow: 0 0 22px rgba(59, 130, 246, 0.28), inset 0 1px 0 rgba(59, 130, 246, 0.20);
}

.lx-mqi-indigo {
    background: rgba(99, 102, 241, 0.14);
    border: 1px solid rgba(99, 102, 241, 0.42);
    box-shadow: 0 0 22px rgba(99, 102, 241, 0.28), inset 0 1px 0 rgba(99, 102, 241, 0.20);
}

.lx-mqi-green {
    background: rgba(34, 197, 94, 0.14);
    border: 1px solid rgba(34, 197, 94, 0.42);
    box-shadow: 0 0 22px rgba(34, 197, 94, 0.28), inset 0 1px 0 rgba(34, 197, 94, 0.20);
}

/* Amber — Rayo / Velocidad */
.lx-mqi-amber {
    background: rgba(245, 158, 11, 0.13);
    border: 1px solid rgba(245, 158, 11, 0.40);
    box-shadow: 0 0 22px rgba(245, 158, 11, 0.24), inset 0 1px 0 rgba(245, 158, 11, 0.18);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   CARD BODY — Título + Descripción
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lx-mq-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.28rem;
    min-width: 0;
}

.lx-mq-title {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 0.940rem;
    font-weight: 650;
    color: #ffffff;
    letter-spacing: -0.2px;
    line-height: 1.25;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lx-mq-desc {
    font-size: 0.780rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.50);
    line-height: 1.52;
    margin: 0;
    letter-spacing: 0.05px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   STRIPE — Línea de luz lateral izquierda (1 clase por color)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

.lx-mq-stripe {
    position: absolute;
    left: 0;
    top: 16%;
    bottom: 16%;
    width: 2.5px;
    border-radius: 2px;
    pointer-events: none;
}

.lx-mqs-cyan   { background: linear-gradient(to bottom, transparent, rgba(6,   182, 212, 0.92), transparent); }
.lx-mqs-violet { background: linear-gradient(to bottom, transparent, rgba(139,  92, 246, 0.92), transparent); }
.lx-mqs-blue   { background: linear-gradient(to bottom, transparent, rgba(59,  130, 246, 0.92), transparent); }
.lx-mqs-indigo { background: linear-gradient(to bottom, transparent, rgba(99,  102, 241, 0.92), transparent); }
.lx-mqs-green  { background: linear-gradient(to bottom, transparent, rgba(34,  197,  94, 0.92), transparent); }
.lx-mqs-amber  { background: linear-gradient(to bottom, transparent, rgba(245, 158,  11, 0.92), transparent); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [9] CURVA ORGÁNICA — clip-path en .lx-brand-col
   La curva se declara directamente en .lx-brand-col arriba.
   No existe ningún div/SVG separado; CSS puro, cero markup.
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */