/* =========================================================================
   MyCar Launch - Acceso con cuenta Launch ([cas_login])  ·  v3 (2026-10-29)
   Prefijo mclsx-. Layout ancho de dos columnas en escritorio, una columna en móvil.
   Etapas: login -> verificación -> perfil -> listo (data-stage en .mclsx-card).
   ========================================================================= */

.mclsx-wrap {
    --mx-red: #dc143c;
    --mx-red-2: #a40f2b;
    --mx-red-dark: #7a0010;
    --mx-ink: #0f172a;
    --mx-ink-2: #334155;
    --mx-muted: #64748b;
    --mx-line: #e2e8f0;
    --mx-soft: #f1f5f9;
    --mx-ok: #16a34a;
    --mx-ok-bg: #dcfce7;
    --mx-blue: #2563eb;
    --mx-blue-bg: #dbeafe;
    --mx-amber: #b45309;
    --mx-amber-bg: #fef3c7;
    --mx-ease: cubic-bezier(.2, .8, .2, 1);

    box-sizing: border-box;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 70vh;   /* el ajuste fino lo hace mclsx-fit.js: alto visible menos lo que hay encima */
    padding: 28px 20px 28px;
    /* Rojo oscuro degradado con negro (estático: los resplandores no se animan para no costar rendimiento) */
    background:
        radial-gradient(900px 560px at 12% 8%, rgba(190, 18, 52, .42), transparent 62%),
        radial-gradient(800px 520px at 92% 96%, rgba(120, 0, 20, .5), transparent 60%),
        linear-gradient(135deg, #2a0009 0%, #14030a 48%, #050405 100%);
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--mx-ink);
}
.mclsx-wrap *, .mclsx-wrap *::before, .mclsx-wrap *::after { box-sizing: border-box; }

/* Puntos tecnológicos (canvas liviano: ver script; se pausa fuera de pantalla / pestaña oculta) */
.mclsx-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .9; }

/* ---------- Tarjeta (se ensancha en login/perfil y se angosta en verificación/listo) ---------- */
.mclsx-card {
    position: relative;
    width: 100%;
    max-width: 1120px;
    background: rgba(248, 250, 252, .98);
    border-radius: 30px;
    box-shadow: 0 40px 100px -24px rgba(2, 6, 23, .6), 0 0 0 1px rgba(255, 255, 255, .06);
    overflow: hidden;
    transition: max-width .6s var(--mx-ease);
    animation: mclsx-card-in .7s var(--mx-ease) both;
}
.mclsx-card[data-stage="verify"], .mclsx-card[data-stage="done"] { max-width: 540px; }
.mclsx-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; z-index: 3;
    background: linear-gradient(90deg, var(--mx-red), #ff5a78, var(--mx-red-dark));
    background-size: 200% 100%;
    animation: mclsx-bar 6s linear infinite;
}
@keyframes mclsx-card-in { from { opacity: 0; transform: translateY(26px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes mclsx-bar { to { background-position: 200% 0; } }

/* ---------- Marca ---------- */
.mclsx-brand { display: flex; align-items: center; gap: 10px; }
.mclsx-brand svg { width: 38px; height: 38px; flex: none; }
.mclsx-brand-text { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.mclsx-brand-text span { color: var(--mx-red); }

/* ---------- Etapas ---------- */
.mclsx-stage { display: none; }
.mclsx-stage.is-active { display: block; animation: mclsx-in .5s var(--mx-ease) both; }
.mclsx-stage.is-leaving { display: block; animation: mclsx-out .22s ease-in both; pointer-events: none; }
@keyframes mclsx-in  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes mclsx-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); } }
.mclsx-center { padding: 44px 40px 40px; }

.mclsx-title { margin: 0 0 6px; font-size: 27px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--mx-ink); }
.mclsx-title strong { font-weight: 900; color: var(--mx-red); }
.mclsx-sub { margin: 0 0 24px; font-size: 14.5px; line-height: 1.55; color: var(--mx-muted); }
.mclsx-center .mclsx-title, .mclsx-center .mclsx-sub { text-align: center; }
.mclsx-center .mclsx-sub { max-width: 380px; margin-left: auto; margin-right: auto; }

/* ---------- ACCESO: panel de bienvenida + formulario ---------- */
.mclsx-login-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); min-height: 600px; }
.mclsx-welcome {
    position: relative; overflow: hidden; color: #fff; padding: 46px 42px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
    background: linear-gradient(155deg, #e0153f 0%, #a40f2b 55%, #6b000f 100%);
}
.mclsx-welcome::before, .mclsx-welcome::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.mclsx-welcome::before { width: 380px; height: 380px; right: -150px; top: -130px; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 68%); animation: mclsx-float-b 14s ease-in-out infinite alternate; }
.mclsx-welcome::after  { width: 300px; height: 300px; left: -120px; bottom: -110px; background: radial-gradient(circle, rgba(0, 0, 0, .3), transparent 68%); }
.mclsx-welcome > * { position: relative; z-index: 1; }
.mclsx-welcome .mclsx-brand-text { color: #fff; }
.mclsx-welcome .mclsx-brand-text span { color: #ffd1da; }
.mclsx-welcome h2 { color: #fff; margin: 0 0 10px; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; }
.mclsx-welcome > div > p { margin: 0; font-size: 14.5px; line-height: 1.6; color: rgba(255, 255, 255, .85); max-width: 340px; }
.mclsx-perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.mclsx-perks li { display: flex; gap: 14px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .92); }
.mclsx-perks i { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: rgba(255, 255, 255, .16); backdrop-filter: blur(4px); }
.mclsx-perks svg { width: 18px; height: 18px; stroke: #fff; fill: none; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mclsx-perks b { display: block; color: #fff; font-size: 14px; margin-bottom: 1px; }
.mclsx-secure { font-size: 12px; color: rgba(255, 255, 255, .7); display: flex; align-items: center; gap: 8px; }
.mclsx-secure svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }

.mclsx-login-main { padding: 46px 52px; display: flex; flex-direction: column; justify-content: center; }
.mclsx-login-main .mclsx-form-wrap { width: 100%; max-width: 420px; margin: 0 auto; }

/* ---------- Selector de modo (deslizante) ---------- */
.mclsx-seg {
    position: relative; display: grid; grid-template-columns: 1fr 1fr;
    background: #e8edf3; border-radius: 14px; padding: 4px; margin-bottom: 22px;
}
.mclsx-seg-thumb {
    position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px);
    background: #fff; border-radius: 11px; box-shadow: 0 4px 14px rgba(15, 23, 42, .12);
    transition: transform .38s var(--mx-ease);
}
.mclsx-seg[data-mode="email"] .mclsx-seg-thumb { transform: translateX(100%); }
.mclsx-seg button {
    position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer;
    padding: 10px 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--mx-muted);
    border-radius: 11px; transition: color .25s;
}
.mclsx-seg button[aria-selected="true"] { color: var(--mx-ink); }

/* ---------- Campos ---------- */
.mclsx-panel { display: none; }
.mclsx-panel.is-active { display: block; animation: mclsx-in .4s var(--mx-ease) both; }

.mclsx-field { position: relative; margin-bottom: 14px; }
.mclsx-field > svg.mclsx-ico {
    position: absolute; left: 15px; top: 50%; width: 19px; height: 19px; transform: translateY(-50%);
    color: #94a3b8; pointer-events: none; transition: color .25s;
}
.mclsx-input {
    width: 100%; height: 54px; padding: 18px 46px 4px 46px;
    background: #fff; border: 1.5px solid var(--mx-line); border-radius: 14px;
    font: inherit; font-size: 15px; color: var(--mx-ink); outline: none;
    transition: border-color .25s, box-shadow .25s, background .25s;
}
.mclsx-input:hover { border-color: #cbd5e1; }
.mclsx-input:focus { border-color: var(--mx-red); box-shadow: 0 0 0 4px rgba(220, 20, 60, .12); }
.mclsx-field:focus-within > svg.mclsx-ico { color: var(--mx-red); }
.mclsx-label {
    position: absolute; left: 46px; top: 17px; font-size: 15px; color: #94a3b8; pointer-events: none;
    transform-origin: left top; transition: transform .22s var(--mx-ease), color .22s;
}
.mclsx-input:focus + .mclsx-label,
.mclsx-input:not(:placeholder-shown) + .mclsx-label { transform: translateY(-11px) scale(.76); color: var(--mx-muted); }
.mclsx-input:focus + .mclsx-label { color: var(--mx-red); }
.mclsx-eye {
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px;
    border: 0; background: transparent; cursor: pointer; color: #94a3b8; border-radius: 10px;
    display: grid; place-items: center; transition: background .2s, color .2s;
}
.mclsx-eye:hover { background: var(--mx-soft); color: var(--mx-ink); }
.mclsx-eye svg { width: 20px; height: 20px; }
.mclsx-hint { margin: -6px 2px 14px; font-size: 12px; color: var(--mx-muted); line-height: 1.5; }

/* ---------- Botones ---------- */
.mclsx-btn {
    position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 10px;
    width: 100%; height: 54px; border: 0; border-radius: 14px; cursor: pointer;
    background: linear-gradient(135deg, var(--mx-red) 0%, var(--mx-red-2) 55%, var(--mx-red-dark) 100%);
    color: #fff; font: inherit; font-size: 15px; font-weight: 700; letter-spacing: .01em;
    box-shadow: 0 10px 24px -8px rgba(220, 20, 60, .65);
    transition: transform .2s var(--mx-ease), box-shadow .25s, filter .2s;
}
.mclsx-btn::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg); transition: left .7s var(--mx-ease);
}
.mclsx-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -10px rgba(220, 20, 60, .7); }
.mclsx-btn:hover::after { left: 130%; }
.mclsx-btn:active { transform: translateY(0) scale(.985); }
.mclsx-btn:disabled { cursor: not-allowed; filter: grayscale(.35) brightness(.95); transform: none; box-shadow: none; }
.mclsx-btn svg { width: 19px; height: 19px; }
.mclsx-btn--ghost {
    background: #fff; color: var(--mx-ink); border: 1.5px solid var(--mx-line); box-shadow: none; height: 46px; font-size: 14px; font-weight: 600;
}
.mclsx-btn--ghost:hover { border-color: var(--mx-red); color: var(--mx-red); box-shadow: 0 8px 18px -10px rgba(220, 20, 60, .45); }
.mclsx-btn--ghost::after { display: none; }
.mclsx-spin {
    width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid rgba(255, 255, 255, .4); border-top-color: #fff;
    animation: mclsx-rot .7s linear infinite; flex: none;
}
.mclsx-btn--ghost .mclsx-spin { border-color: rgba(220, 20, 60, .25); border-top-color: var(--mx-red); }
@keyframes mclsx-rot { to { transform: rotate(360deg); } }

.mclsx-link { background: none; border: 0; padding: 0; font: inherit; color: var(--mx-red); font-weight: 600; cursor: pointer; text-decoration: none; }
.mclsx-link:hover { text-decoration: underline; }
.mclsx-foot { margin: 22px 0 0; text-align: center; font-size: 12.5px; color: var(--mx-muted); line-height: 1.6; }
.mclsx-foot a { color: var(--mx-red); font-weight: 600; text-decoration: none; }

/* ---------- Avisos ---------- */
.mclsx-alert {
    display: none; margin: 0 0 16px; padding: 12px 14px; border-radius: 12px; font-size: 13.5px; line-height: 1.5;
    background: #fee2e2; color: #991b1b; border: 1px solid #fecaca;
}
.mclsx-alert.is-on { display: block; animation: mclsx-in .3s var(--mx-ease) both, mclsx-shake .45s .05s; }
.mclsx-alert--ok { background: var(--mx-ok-bg); color: #166534; border-color: #bbf7d0; }
@keyframes mclsx-shake { 0%,100% { translate: 0; } 20% { translate: -7px; } 40% { translate: 6px; } 60% { translate: -4px; } 80% { translate: 3px; } }

/* ---------- Verificación (checklist) ---------- */
.mclsx-verify-ring {
    width: 74px; height: 74px; margin: 4px auto 18px; border-radius: 50%; display: grid; place-items: center;
    background: radial-gradient(circle, #fff 55%, transparent 56%), conic-gradient(var(--mx-red), #ff8ea3, var(--mx-red));
    animation: mclsx-rot 1.4s linear infinite;
}
.mclsx-verify-ring.is-done { animation: none; background: var(--mx-ok); }
.mclsx-verify-ring.is-done::after { content: ""; width: 26px; height: 14px; border-left: 5px solid #fff; border-bottom: 5px solid #fff; transform: rotate(-45deg) translate(2px, -3px); }
.mclsx-steps { list-style: none; margin: 8px 0 4px; padding: 0; display: grid; gap: 10px; }
.mclsx-steps li {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--mx-line);
    font-size: 14px; color: var(--mx-ink-2); opacity: 0; transform: translateX(-14px);
    transition: opacity .4s var(--mx-ease), transform .4s var(--mx-ease), border-color .3s, background .3s;
}
.mclsx-steps li.is-on { opacity: 1; transform: none; }
.mclsx-steps li.is-ok { border-color: #bbf7d0; background: #f0fdf4; }
.mclsx-step-dot { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--mx-soft); }
.mclsx-steps li.is-ok .mclsx-step-dot { background: var(--mx-ok); }
.mclsx-step-dot svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3; fill: none; stroke-dasharray: 24; stroke-dashoffset: 24; }
.mclsx-steps li.is-ok .mclsx-step-dot svg { animation: mclsx-draw .5s .1s var(--mx-ease) forwards; }
@keyframes mclsx-draw { to { stroke-dashoffset: 0; } }
.mclsx-step-text b { color: var(--mx-ink); }

/* ---------- PERFIL: dos columnas ---------- */
.mclsx-profile-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.mclsx-profile-left { padding: 40px 40px 36px; }
.mclsx-profile-right {
    padding: 40px 44px; background: #fff; border-left: 1px solid var(--mx-line);
    display: flex; flex-direction: column; justify-content: center;
}
.mclsx-profile-right > div { width: 100%; max-width: 420px; margin: 0 auto; }

.mclsx-hero { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.mclsx-avatar {
    position: relative; flex: none; width: 76px; height: 76px; border-radius: 24px; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--mx-red), var(--mx-red-dark)); color: #fff; font-size: 28px; font-weight: 800; letter-spacing: -.02em;
    box-shadow: 0 14px 30px -10px rgba(220, 20, 60, .6); animation: mclsx-pop .6s var(--mx-ease) both;
}
.mclsx-avatar-badge {
    position: absolute; right: -6px; bottom: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--mx-ok);
    border: 3px solid #f8fafc; display: grid; place-items: center; animation: mclsx-pop .5s .35s var(--mx-ease) both;
}
.mclsx-avatar-badge svg { width: 14px; height: 14px; stroke: #fff; stroke-width: 3.2; fill: none; }
@keyframes mclsx-pop { 0% { transform: scale(.3); opacity: 0; } 70% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); } }
.mclsx-hero-text { min-width: 0; }
.mclsx-hero h2 { margin: 0; font-size: 24px; font-weight: 800; letter-spacing: -.02em; overflow-wrap: anywhere; }
.mclsx-hero p { margin: 3px 0 0; font-size: 13.5px; color: var(--mx-muted); overflow-wrap: anywhere; }
.mclsx-verified { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 5px 12px; border-radius: 999px; background: var(--mx-ok-bg); color: #166534; font-size: 12px; font-weight: 700; }

.mclsx-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
.mclsx-fact { padding: 12px 14px; border-radius: 14px; background: #fff; border: 1px solid var(--mx-line); min-width: 0; animation: mclsx-in .5s var(--mx-ease) both; }
.mclsx-fact:nth-child(2) { animation-delay: .06s; } .mclsx-fact:nth-child(3) { animation-delay: .12s; } .mclsx-fact:nth-child(4) { animation-delay: .18s; }
.mclsx-fact small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mx-muted); margin-bottom: 4px; }
.mclsx-fact > span { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--mx-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mclsx-fact img { width: 22px; height: 16px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(15, 23, 42, .12); flex: none; }

.mclsx-section { margin: 22px 0 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mclsx-section h3 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--mx-ink-2); }
.mclsx-section small { font-size: 12px; color: var(--mx-muted); }

/* Equipos */
.mclsx-serials { display: grid; gap: 10px; }
.mclsx-serial {
    position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 14px 14px 16px; border-radius: 16px; background: #fff;
    border: 1.5px solid var(--mx-line); text-align: left; font: inherit; color: inherit; width: 100%;
    animation: mclsx-in .55s var(--mx-ease) both; transition: border-color .25s, box-shadow .25s, transform .2s, background .25s;
}
.mclsx-serial:nth-child(2) { animation-delay: .07s; } .mclsx-serial:nth-child(3) { animation-delay: .14s; } .mclsx-serial:nth-child(n+4) { animation-delay: .2s; }
.mclsx-serial[role="radio"] { cursor: pointer; }
.mclsx-serial[role="radio"]:hover { border-color: #cbd5e1; transform: translateY(-1px); box-shadow: 0 10px 22px -14px rgba(15, 23, 42, .35); }
.mclsx-serial.is-selected { border-color: var(--mx-red); background: #fff5f7; box-shadow: 0 0 0 4px rgba(220, 20, 60, .1); }
.mclsx-serial-ico { width: 44px; height: 44px; flex: none; border-radius: 13px; display: grid; place-items: center; background: var(--mx-soft); color: var(--mx-ink-2); transition: background .25s, color .25s; }
.mclsx-serial.is-selected .mclsx-serial-ico { background: var(--mx-red); color: #fff; }
.mclsx-serial-ico svg { width: 22px; height: 22px; }
.mclsx-serial-body { min-width: 0; flex: 1; }
.mclsx-serial-sn { font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 15px; font-weight: 700; letter-spacing: .02em; }
.mclsx-serial-meta { margin-top: 3px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; color: var(--mx-muted); }
.mclsx-serial-conf { flex: 0 0 100%; font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--mx-ink-2); }
.mclsx-serial-check { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid #cbd5e1; display: grid; place-items: center; transition: all .25s var(--mx-ease); }
.mclsx-serial-check svg { width: 13px; height: 13px; stroke: #fff; stroke-width: 3.4; fill: none; transform: scale(0); transition: transform .3s var(--mx-ease); }
.mclsx-serial.is-selected .mclsx-serial-check { background: var(--mx-red); border-color: var(--mx-red); }
.mclsx-serial.is-selected .mclsx-serial-check svg { transform: scale(1); }
.mclsx-tag-main { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: var(--mx-red); color: #fff; }

.mclsx-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; line-height: 1.4; animation: mclsx-pop .45s var(--mx-ease) both; }
.mclsx-chip i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.mclsx-chip--latam { background: var(--mx-ok-bg); color: #166534; }
.mclsx-chip--ecommerce { background: var(--mx-blue-bg); color: #1d4ed8; }
.mclsx-chip--other { background: #e2e8f0; color: #475569; }
.mclsx-chip--model { background: var(--mx-soft); color: var(--mx-ink-2); font-weight: 600; }
.mclsx-chip--loading {
    min-width: 92px; height: 21px; color: transparent;
    background: linear-gradient(100deg, #e2e8f0 30%, #f8fafc 50%, #e2e8f0 70%); background-size: 220% 100%;
    animation: mclsx-shimmer 1.3s linear infinite;
}
@keyframes mclsx-shimmer { to { background-position: -220% 0; } }

.mclsx-note { display: none; margin-top: 12px; padding: 12px 14px; border-radius: 12px; font-size: 13px; line-height: 1.55; background: var(--mx-amber-bg); color: #92400e; border: 1px solid #fde68a; }
.mclsx-note.is-on { display: block; animation: mclsx-in .4s var(--mx-ease) both; }
.mclsx-note--info { background: #eff6ff; color: #1e40af; border-color: #bfdbfe; }

/* Formulario de datos */
.mclsx-form-title { margin: 0 0 4px; font-size: 21px; font-weight: 800; letter-spacing: -.02em; }
.mclsx-form-sub { margin: 0 0 22px; font-size: 13.5px; color: var(--mx-muted); line-height: 1.55; }
.mclsx-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mclsx-label-s { display: block; margin: 0 0 8px 2px; font-size: 12px; font-weight: 700; color: var(--mx-ink-2); letter-spacing: .02em; }

/* Teléfono con banderas (selector propio: un <select> no puede mostrar imágenes) */
.mclsx-phone { display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 10px; margin-bottom: 18px; position: relative; }
.mclsx-phone .mclsx-field { margin: 0; }
.mclsx-dial { position: relative; }
.mclsx-dial-btn {
    width: 100%; height: 54px; padding: 0 10px 0 12px; display: flex; align-items: center; gap: 8px; cursor: pointer;
    background: #fff; border: 1.5px solid var(--mx-line); border-radius: 14px; font: inherit; font-size: 14.5px; font-weight: 600; color: var(--mx-ink);
    transition: border-color .25s, box-shadow .25s;
}
.mclsx-dial-btn:hover { border-color: #cbd5e1; }
.mclsx-dial-btn:focus-visible, .mclsx-dial.is-open .mclsx-dial-btn { outline: none; border-color: var(--mx-red); box-shadow: 0 0 0 4px rgba(220, 20, 60, .12); }
.mclsx-dial-btn img, .mclsx-dial-list img { width: 24px; height: 17px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(15, 23, 42, .15); flex: none; }
.mclsx-flag-ph { display: inline-grid; place-items: center; width: 24px; height: 17px; border-radius: 3px; background: var(--mx-soft); font-size: 9px; font-weight: 800; color: var(--mx-muted); flex: none; }
.mclsx-dial-btn svg { width: 14px; height: 14px; margin-left: auto; stroke: #94a3b8; fill: none; stroke-width: 2.4; transition: transform .25s var(--mx-ease); }
.mclsx-dial.is-open .mclsx-dial-btn svg { transform: rotate(180deg); }
.mclsx-dial-pop {
    display: none; position: absolute; z-index: 20; top: calc(100% + 8px); left: 0; width: 320px; max-width: calc(100vw - 48px);
    background: #fff; border: 1px solid var(--mx-line); border-radius: 16px; box-shadow: 0 24px 50px -16px rgba(15, 23, 42, .35); overflow: hidden;
}
.mclsx-dial.is-open .mclsx-dial-pop { display: block; animation: mclsx-in .22s var(--mx-ease) both; }
.mclsx-dial.is-up .mclsx-dial-pop { top: auto; bottom: calc(100% + 8px); }
.mclsx-dial.is-up .mclsx-dial-search { order: 2; border-bottom: 0; border-top: 1px solid var(--mx-line); }
.mclsx-dial.is-up .mclsx-dial-pop { display: none; }
.mclsx-dial.is-open.is-up .mclsx-dial-pop { display: flex; flex-direction: column; }
.mclsx-dial-search { width: 100%; height: 46px; padding: 0 16px; border: 0; border-bottom: 1px solid var(--mx-line); font: inherit; font-size: 14px; outline: none; background: #f8fafc; }
.mclsx-dial-list { list-style: none; margin: 0; padding: 6px; max-height: 260px; overflow-y: auto; }
.mclsx-dial-list li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; cursor: pointer; font-size: 14px; color: var(--mx-ink-2); }
.mclsx-dial-list li:hover, .mclsx-dial-list li.is-hl { background: #fff1f3; color: var(--mx-ink); }
.mclsx-dial-list li.is-sel { background: var(--mx-soft); font-weight: 700; }
.mclsx-dial-list li em { margin-left: auto; font-style: normal; color: var(--mx-muted); font-variant-numeric: tabular-nums; }
.mclsx-dial-empty { padding: 16px; text-align: center; font-size: 13px; color: var(--mx-muted); }

/* ---------- Listo ---------- */
.mclsx-done { text-align: center; padding: 8px 0 4px; }
.mclsx-done-ring { width: 92px; height: 92px; margin: 0 auto 18px; }
.mclsx-done-ring circle { fill: none; stroke: var(--mx-ok); stroke-width: 5; stroke-dasharray: 289; stroke-dashoffset: 289; transform: rotate(-90deg); transform-origin: center; animation: mclsx-draw-c .7s var(--mx-ease) forwards; }
.mclsx-done-ring path { fill: none; stroke: var(--mx-ok); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: mclsx-draw .5s .55s var(--mx-ease) forwards; }
@keyframes mclsx-draw-c { to { stroke-dashoffset: 0; } }
.mclsx-done h2 { margin: 0 0 6px; font-size: 24px; font-weight: 800; letter-spacing: -.02em; }
.mclsx-done p { margin: 0; color: var(--mx-muted); font-size: 14px; }
.mclsx-bar { height: 4px; border-radius: 4px; margin: 22px auto 0; max-width: 220px; background: var(--mx-line); overflow: hidden; }
.mclsx-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mx-red), #ff5a78); animation: mclsx-fill 1.4s .3s linear forwards; }
@keyframes mclsx-fill { to { width: 100%; } }

/* ---------- Tablet / móvil: una sola columna (vertical) ---------- */
@media (max-width: 900px) {
    .mclsx-wrap { padding: 16px 12px 24px; align-items: flex-start; }
    .mclsx-card { border-radius: 24px; }
    .mclsx-login-grid, .mclsx-profile-grid { grid-template-columns: 1fr; min-height: 0; }
    .mclsx-welcome { padding: 26px 24px; gap: 0; }
    .mclsx-welcome h2 { font-size: 22px; margin-bottom: 6px; }
    .mclsx-welcome > div > p { font-size: 13.5px; }
    .mclsx-perks, .mclsx-secure { display: none; }
    .mclsx-login-main { padding: 28px 22px 30px; }
    .mclsx-title { font-size: 23px; }
    .mclsx-profile-left { padding: 28px 22px 8px; }
    .mclsx-profile-right { padding: 8px 22px 30px; background: transparent; border-left: 0; }
    .mclsx-center { padding: 34px 22px 30px; }
}
@media (max-width: 520px) {
    .mclsx-hero { flex-direction: column; text-align: center; gap: 12px; }
    .mclsx-row { grid-template-columns: 1fr; gap: 0; }
    .mclsx-phone { grid-template-columns: 112px minmax(0, 1fr); }
    .mclsx-dial-pop { position: fixed; left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-width: none; }
    .mclsx-dial-list { max-height: 46vh; }
}

/* ---------- Menos movimiento ---------- */
@media (prefers-reduced-motion: reduce) {
    .mclsx-wrap *, .mclsx-wrap *::before, .mclsx-wrap *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .mclsx-steps li { opacity: 1; transform: none; }
}

/* ---------- Blindaje contra el tema: BuddyBoss estiliza button:hover/:focus (fondo rojo, mayúsculas...) ---------- */
.mclsx-wrap button { text-transform: none; letter-spacing: normal; }
.mclsx-wrap .mclsx-btn,
.mclsx-wrap .mclsx-btn:hover, .mclsx-wrap .mclsx-btn:focus, .mclsx-wrap .mclsx-btn:active {
    background: linear-gradient(135deg, var(--mx-red) 0%, var(--mx-red-2) 55%, var(--mx-red-dark) 100%); color: #fff; border: 0;
}
.mclsx-wrap .mclsx-btn--ghost,
.mclsx-wrap .mclsx-btn--ghost:hover, .mclsx-wrap .mclsx-btn--ghost:focus, .mclsx-wrap .mclsx-btn--ghost:active { background: #fff; color: var(--mx-ink); border: 1.5px solid var(--mx-line); }
.mclsx-wrap .mclsx-btn--ghost:hover { color: var(--mx-red); border-color: var(--mx-red); }
.mclsx-wrap .mclsx-dial-btn,
.mclsx-wrap .mclsx-dial-btn:hover, .mclsx-wrap .mclsx-dial-btn:focus, .mclsx-wrap .mclsx-dial-btn:active { background: #fff; color: var(--mx-ink); }
.mclsx-wrap .mclsx-seg button,
.mclsx-wrap .mclsx-seg button:hover, .mclsx-wrap .mclsx-seg button:focus, .mclsx-wrap .mclsx-seg button:active { background: transparent; color: var(--mx-muted); box-shadow: none; }
.mclsx-wrap .mclsx-seg button[aria-selected="true"] { color: var(--mx-ink); }
.mclsx-wrap .mclsx-eye, .mclsx-wrap .mclsx-eye:focus, .mclsx-wrap .mclsx-eye:active, .mclsx-wrap .mclsx-eye:hover {
    position: absolute; right: 8px; top: calc(50% - 19px); transform: none; margin: 0; padding: 0;
    width: 38px; height: 38px; min-width: 0; min-height: 0; border: 0; border-radius: 10px;
    box-shadow: none; outline: 0; background: transparent; color: #94a3b8; line-height: 1;
}
.mclsx-wrap .mclsx-eye:hover { background: var(--mx-soft); color: var(--mx-ink); }
.mclsx-wrap .mclsx-eye:focus-visible { box-shadow: 0 0 0 2px rgba(196,18,48,.35); }
.mclsx-wrap .mclsx-link, .mclsx-wrap .mclsx-link:hover, .mclsx-wrap .mclsx-link:focus, .mclsx-wrap .mclsx-link:active { background: none; color: var(--mx-red); box-shadow: none; }
.mclsx-wrap .mclsx-serial, .mclsx-wrap .mclsx-serial:hover, .mclsx-wrap .mclsx-serial:focus, .mclsx-wrap .mclsx-serial:active { background: #fff; color: var(--mx-ink); }
.mclsx-wrap .mclsx-serial.is-selected, .mclsx-wrap .mclsx-serial.is-selected:hover, .mclsx-wrap .mclsx-serial.is-selected:focus { background: #fff5f7; }

/* ---------- Login deshabilitado + acceso interno (views/cas-login-disabled.php) ---------- */
.mclsx-pill {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 14px;
    border-radius: 999px; background: #fff5f7; color: var(--mx-red); font-size: 11.5px; font-weight: 800;
    letter-spacing: .08em; text-transform: uppercase; border: 1px solid rgba(220, 20, 60, .18);
}
.mclsx-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--mx-red); animation: mclsx-pulse 1.6s ease-in-out infinite; }
@keyframes mclsx-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
.mclsx-progress { position: relative; height: 6px; margin-top: 26px; border-radius: 999px; background: var(--mx-line); overflow: hidden; }
.mclsx-progress span {
    position: absolute; top: 0; bottom: 0; width: 38%; border-radius: 999px;
    background: linear-gradient(90deg, var(--mx-red-2), var(--mx-red)); animation: mclsx-slide 2.2s var(--mx-ease) infinite;
}
@keyframes mclsx-slide { 0% { left: -40%; } 100% { left: 102%; } }
.mclsx-check { display: flex; align-items: center; gap: 8px; margin: 2px 2px 16px; font-size: 13px; color: var(--mx-muted); cursor: pointer; }
.mclsx-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--mx-red); }
/* Botón invisible en la esquina inferior derecha de la tarjeta: abre el acceso interno */
.mclsx-wrap .mclsx-secret,
.mclsx-wrap .mclsx-secret:hover, .mclsx-wrap .mclsx-secret:focus, .mclsx-wrap .mclsx-secret:active {
    position: absolute; right: 0; bottom: 0; z-index: 5; width: 56px; height: 56px; margin: 0; padding: 0;
    border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: 0; opacity: 0; cursor: default;
    -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) { .mclsx-pill i, .mclsx-progress span { animation: none; } .mclsx-progress span { left: 0; width: 100%; } }

/* ---------- Registro de cuenta por pasos (views/uc-register.php) ---------- */
.mclsx-card[data-stage="creating"] { max-width: 540px; }
.mclsx-card[data-stage="done"] { max-width: 560px; }
.mclsx-stepper { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin: 4px 0 26px; padding-bottom: 18px; }
.mclsx-st { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.mclsx-st i {
    position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-style: normal;
    background: #fff; border: 2px solid var(--mx-line); color: var(--mx-muted); font-size: 13px; font-weight: 800;
    transition: background .35s var(--mx-ease), border-color .35s, color .35s, transform .35s var(--mx-ease), box-shadow .35s;
}
.mclsx-st i svg { position: absolute; width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s var(--mx-ease); }
.mclsx-st span { font-size: 11.5px; font-weight: 600; color: var(--mx-muted); transition: color .3s; }
.mclsx-st.is-now i { border-color: var(--mx-red); color: var(--mx-red); transform: scale(1.1); box-shadow: 0 0 0 5px rgba(220, 20, 60, .12); }
.mclsx-st.is-now span { color: var(--mx-ink); }
.mclsx-st.is-done i { background: var(--mx-red); border-color: var(--mx-red); }
.mclsx-st.is-done i b { opacity: 0; }
.mclsx-st.is-done i svg { opacity: 1; transform: scale(1); }
.mclsx-st.is-done span { color: var(--mx-ink-2); }
.mclsx-st-bar { position: absolute; left: 12.5%; right: 12.5%; top: 15px; height: 3px; border-radius: 3px; background: var(--mx-line); overflow: hidden; z-index: 0; font-style: normal; }
.mclsx-st-bar u { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mx-red-2), var(--mx-red)); transition: width .5s var(--mx-ease); }

.mclsx-wstep { display: none; }
.mclsx-wstep.is-active { display: block; animation: mclsx-in .45s var(--mx-ease) both; }
.mclsx-wtitle { margin: 0 0 4px; font-size: 19px; font-weight: 800; letter-spacing: -.02em; color: var(--mx-ink); }
.mclsx-wtitle small { font-size: 13px; font-weight: 600; color: var(--mx-muted); letter-spacing: 0; }
.mclsx-wsub { margin: 0 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--mx-muted); }
.mclsx-wnav { display: flex; gap: 10px; margin-top: 6px; }
.mclsx-wnav .mclsx-btn { flex: 1; }
.mclsx-wnav .mclsx-btn--ghost { flex: 0 0 34%; }

.mclsx-hint--field { margin: -6px 2px 14px; }
.mclsx-hint.is-ok { color: var(--mx-ok); font-weight: 600; }
.mclsx-hint.is-err { color: #be123c; font-weight: 600; }
.mclsx-input.is-ok { border-color: #86efac; }
.mclsx-input.is-err { border-color: #fda4af; }
.mclsx-input--plain { padding-left: 16px; padding-right: 14px; }
.mclsx-label--plain { left: 16px; }

.mclsx-sel { margin-bottom: 14px; min-width: 0; }
.mclsx-sel select {
    width: 100%; height: 48px; padding: 0 38px 0 14px; border: 1.5px solid var(--mx-line); border-radius: 14px; background: #fff;
    font: inherit; font-size: 14px; color: var(--mx-ink); outline: none; cursor: pointer; appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 18px;
    transition: border-color .25s, box-shadow .25s;
}
.mclsx-sel select:focus { border-color: var(--mx-red); box-shadow: 0 0 0 4px rgba(220, 20, 60, .12); }
.mclsx-sel select:disabled { background-color: var(--mx-soft); color: #94a3b8; cursor: not-allowed; }

.mclsx-captcha { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; padding: 10px; background: #fff; border: 1.5px solid var(--mx-line); border-radius: 14px; }
.mclsx-captcha img { height: 46px; border-radius: 8px; background: var(--mx-soft); min-width: 120px; object-fit: contain; }

/* Credenciales mostradas al terminar */
.mclsx-cred { margin-top: 18px; border: 1.5px solid var(--mx-line); border-radius: 16px; background: #fff; overflow: hidden; }
.mclsx-cred-row { position: relative; display: grid; grid-template-columns: 96px 1fr auto; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--mx-line); animation: mclsx-in .5s var(--mx-ease) both; }
.mclsx-cred-row:last-child { border-bottom: 0; }
.mclsx-cred-row:nth-child(2) { animation-delay: .08s; } .mclsx-cred-row:nth-child(3) { animation-delay: .16s; }
.mclsx-cred-row small { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mx-muted); }
.mclsx-cred-row > span { min-width: 0; overflow-wrap: anywhere; font-size: 15.5px; font-weight: 700; color: var(--mx-ink); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.mclsx-wrap .mclsx-eye.mclsx-eye--inline,
.mclsx-wrap .mclsx-eye.mclsx-eye--inline:hover, .mclsx-wrap .mclsx-eye.mclsx-eye--inline:focus, .mclsx-wrap .mclsx-eye.mclsx-eye--inline:active { position: static; top: auto; right: auto; }
@media (max-width: 860px) {
    .mclsx-st span { font-size: 10.5px; }
    .mclsx-wnav .mclsx-btn--ghost { flex-basis: 38%; }
    .mclsx-cred-row { grid-template-columns: 1fr auto; }
    .mclsx-cred-row small { grid-column: 1 / -1; }
}

/* Etiquetas (placeholders) centradas verticalmente: antes quedaban ~2px más abajo que el icono */
.mclsx-wrap .mclsx-label {
    top: 0; height: 54px; display: flex; align-items: center; margin: 0; padding: 0; line-height: 1; white-space: nowrap;
}
.mclsx-wrap .mclsx-input:focus + .mclsx-label,
.mclsx-wrap .mclsx-input:not(:placeholder-shown) + .mclsx-label { transform: translateY(-11px) scale(.76); }
.mclsx-wrap .mclsx-eye { margin: 0; }

/* Requisitos de contraseña en vivo */
.mclsx-rules { list-style: none; margin: 2px 0 12px; padding: 12px 14px; border: 1.5px solid var(--mx-line); border-radius: 14px; background: #fff; display: grid; gap: 7px; }
.mclsx-rules li { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; line-height: 1.4; color: var(--mx-muted); transition: color .25s; }
.mclsx-rules li i { flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; border: 2px solid #cbd5e1; background: #fff; position: relative; transition: background .25s, border-color .25s; }
.mclsx-rules li.is-ok { color: #166534; }
.mclsx-rules li.is-ok i { background: var(--mx-ok); border-color: var(--mx-ok); }
.mclsx-rules li.is-ok i::after { content: ""; position: absolute; left: 3.5px; top: 1px; width: 4px; height: 7px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.mclsx-rules li.is-bad { color: #9f1239; }
.mclsx-rules li.is-bad i { border-color: #fda4af; }

/* Si queda algún resto del área del tema bajo el fondo (p. ej. celular con barra del navegador), que sea del mismo tono */
.mclsx-page #content, .mclsx-page .site-content, .mclsx-page #page { background-color: #070406; min-height: 0 !important; }

/* Tipografía: Roboto (parecida a Arial y disponible en Android). El tema suele fijar su propia fuente en títulos y controles. */
.mclsx-wrap, .mclsx-wrap h1, .mclsx-wrap h2, .mclsx-wrap h3, .mclsx-wrap p, .mclsx-wrap span, .mclsx-wrap label, .mclsx-wrap li, .mclsx-wrap a,
.mclsx-wrap input, .mclsx-wrap select, .mclsx-wrap button, .mclsx-wrap small, .mclsx-wrap b, .mclsx-wrap strong, .mclsx-wrap em {
    font-family: Roboto, "Helvetica Neue", Arial, sans-serif !important;
}
.mclsx-wrap .mclsx-serial-sn, .mclsx-wrap .mclsx-cred-row > span {
    font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace !important;   /* se distinguen mejor l/1/O/0 en datos */
}

/* Marca LAUNCH (mayúsculas y negrita; si ya estaba en negrita se mantiene) */
.mclsx-wrap .mclsx-brand { font-weight: 800; letter-spacing: .01em; }
.mclsx-wrap b.mclsx-brand, .mclsx-wrap .mclsx-perks b.mclsx-brand, .mclsx-wrap .mclsx-step-text b.mclsx-brand { display: inline !important; margin: 0 !important; padding: 0 !important; font-size: inherit !important; color: inherit; }

/* Página 404 */
.mclsx-404-num {
    font-size: clamp(84px, 14vw, 132px); line-height: 1; font-weight: 900; letter-spacing: -.04em; margin: 0 0 6px;
    background: linear-gradient(135deg, var(--mx-red), var(--mx-red-dark)); -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-fill-color: transparent;
}
.mclsx-wrap a.mclsx-btn, .mclsx-wrap a.mclsx-btn:hover, .mclsx-wrap a.mclsx-btn:focus { color: #fff; }