/**
 * JCC Login — Estilos auto-contenidos.
 *
 * Diseño alineado al JCC Design System (tokens, paleta, tipografía DM Sans /
 * DM Serif Display, radios, sombras multi-capa, focus rings). Sin
 * backdrop-filter en componentes scroll-críticos (lección v1.4 del DS).
 *
 * Estados controlados por [data-state] en .jcc-l:
 *   select-type     → muestra paso 1
 *   credentials     → muestra paso 2
 *   submitting      → bloquea form, muestra spinner en CTA
 *   error           → overlay rojo full-screen + acciones
 *   success         → overlay verde full-screen
 *   success-first   → overlay verde + confetti
 *   change-pw       → pantalla de cambio de contraseña
 */

/* ═══ Tokens locales (espejo del DS, sin depender de él) ═══ */
.jcc-l {
    --jl-bg-base: #F4EDF1;
    --jl-bg-1:    #FBDFC4;
    --jl-bg-2:    #C9DCF2;
    --jl-bg-3:    #DBC9EC;

    --jl-glass:        rgba(255, 255, 255, 0.92);
    --jl-glass-hover:  rgba(255, 255, 255, 0.96);
    --jl-bd-flat:      rgba(255, 255, 255, 0.85);
    --jl-bd-strong:    rgba(240, 238, 235, 0.95);

    --jl-red:        #A30000;
    --jl-red-dark:   #7A0000;
    --jl-red-bg:     rgba(163, 0, 0, 0.07);
    --jl-green:      #2E9964;
    --jl-green-dark: #1F6B45;

    --jl-t1: #1A1218;
    --jl-t2: #5C5466;
    --jl-t3: #9A93A2;
    --jl-tw: #FFFFFF;

    --jl-shadow-md:
        0 1px 0 rgba(255, 255, 255, 0.7) inset,
        0 2px 4px rgba(120, 40, 50, 0.06),
        0 8px 20px -4px rgba(120, 40, 50, 0.12),
        0 24px 48px -12px rgba(163, 0, 0, 0.10);
    --jl-shadow-lg:
        0 1px 0 rgba(255, 255, 255, 0.9) inset,
        0 -1px 0 rgba(163, 0, 0, 0.04) inset,
        0 4px 10px rgba(120, 40, 50, 0.08),
        0 16px 32px -8px rgba(120, 40, 50, 0.16),
        0 40px 80px -16px rgba(163, 0, 0, 0.18);
    --jl-shadow-cta:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 -2px 0 rgba(0, 0, 0, 0.15) inset,
        0 2px 4px rgba(163, 0, 0, 0.25),
        0 8px 20px -4px rgba(163, 0, 0, 0.35);
    --jl-shadow-cta-hover:
        0 1px 0 rgba(255, 255, 255, 0.3) inset,
        0 -2px 0 rgba(0, 0, 0, 0.20) inset,
        0 4px 8px rgba(163, 0, 0, 0.30),
        0 14px 28px -4px rgba(163, 0, 0, 0.45);

    --jl-r-sm:   6px;
    --jl-r-md:   8px;
    --jl-r-lg:   10px;
    --jl-r-pill: 8px;   /* deprecated semantically; mantenemos var para no romper refs */

    --jl-font-body:    'DM Sans', system-ui, -apple-system, sans-serif;
    --jl-font-display: 'DM Serif Display', Georgia, serif;

    --jl-ts:        0.3s cubic-bezier(0.22, 1, 0.36, 1);
    --jl-ts-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    position: relative;
    min-height: 100vh;       /* fallback navegadores viejos */
    min-height: 100dvh;      /* dynamic viewport: se ajusta con teclado en mobile */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    font-family: var(--jl-font-body);
    color: var(--jl-t1);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;       /* permitir scroll vertical si el contenido excede */
    isolation: isolate;
}
.jcc-l *,
.jcc-l *::before,
.jcc-l *::after { box-sizing: border-box; }

.jcc-l :is(a, button, input, [tabindex]):focus-visible {
    outline: 2px solid var(--jl-red);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Defensa global: el atributo [hidden] DEBE ocultar. Sin !important,
   cualquier regla con display:flex/grid/block lo pisa por especificidad. */
.jcc-l [hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .jcc-l { --jl-ts: 0s; --jl-ts-spring: 0s; }
    .jcc-l * { animation: none !important; transition: none !important; }
}

/* ═══ Fondo mesh ═══ */
.jcc-l-bg {
    position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(ellipse 80% 60% at 5% 12%,  var(--jl-bg-1) 0%, transparent 60%),
        radial-gradient(ellipse 70% 50% at 95% 15%, var(--jl-bg-2) 0%, transparent 60%),
        radial-gradient(ellipse 90% 60% at 50% 95%, var(--jl-bg-3) 0%, transparent 55%),
        var(--jl-bg-base);
    transition: background var(--jl-ts);
}

/* ═══ Tarjeta principal ═══ */
.jcc-l-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    background: var(--jl-glass);
    border: 1px solid var(--jl-bd-flat);
    border-radius: var(--jl-r-lg);
    box-shadow: var(--jl-shadow-lg);
    padding: 36px 32px 32px;
    overflow: hidden;
    isolation: isolate;
    animation: jl-card-in 0.6s var(--jl-ts-spring) both;
}
@keyframes jl-card-in {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: none; }
}
.jcc-l-card::before {
    content: '';
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 50%),
        radial-gradient(ellipse 100% 60% at 50% 0%, rgba(163, 0, 0, 0.04) 0%, transparent 60%);
    pointer-events: none;
    z-index: 0;
}
/* Línea sutil de acento institucional en el borde superior */
.jcc-l-card::after {
    content: '';
    position: absolute;
    top: 0; left: 20%; right: 20%;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--jl-red) 50%, transparent 100%);
    opacity: 0.4;
    pointer-events: none;
}
.jcc-l-card > * { position: relative; z-index: 1; }

/* ═══ Header ═══ */
.jcc-l-head {
    text-align: center;
    margin-bottom: 28px;
}
.jcc-l-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 6px 14px rgba(163, 0, 0, 0.14));
}
.jcc-l-logo-img {
    max-height: 96px;
    max-width: 280px;
    height: auto;
    width: auto;
    display: block;
}
.jcc-l-logo-mono {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: linear-gradient(135deg, #B81515 0%, var(--jl-red) 50%, #7A0000 100%);
    color: var(--jl-tw);
    display: flex; align-items: center; justify-content: center;
    font-family: var(--jl-font-display);
    font-size: 26px;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 -2px 0 rgba(0, 0, 0, 0.18) inset,
        0 6px 18px rgba(163, 0, 0, 0.35);
}
.jcc-l-eyebrow { /* deprecated en v1.1.8: el logo ya no necesita texto debajo */ display: none; }

/* ═══ Screens ═══ */
/* ═══ Screens — visibilidad controlada por data-state ═══
   Cada pantalla muestra/oculta según el estado actual del host .jcc-l.
   No dependemos del atributo [hidden] porque el JS no lo sincronizaba.
   Default: todas ocultas. Reglas específicas muestran la activa. */
.jcc-l-screen { display: none; }

.jcc-l[data-state="select-type"]      .jcc-l-screen[data-screen="select-type"]      { display: block; animation: jl-slide-in 0.4s var(--jl-ts-spring) both; }
.jcc-l[data-state="credentials"]      .jcc-l-screen[data-screen="credentials"]      { display: block; animation: jl-slide-in 0.4s var(--jl-ts-spring) both; }
.jcc-l[data-state="submitting"]       .jcc-l-screen[data-screen="credentials"]      { display: block; }
.jcc-l[data-state="suggest-change-pw"] .jcc-l-screen[data-screen="suggest-change-pw"] { display: block; animation: jl-slide-in 0.4s var(--jl-ts-spring) both; }
.jcc-l[data-state="change-pw"]        .jcc-l-screen[data-screen="change-pw"]        { display: block; animation: jl-slide-in 0.4s var(--jl-ts-spring) both; }

/* En estados de feedback (error/success) seguimos mostrando la pantalla previa
   detrás del overlay. Por defecto, credentials (donde estaba el form). */
.jcc-l[data-state="error"]         .jcc-l-screen[data-screen="credentials"] { display: block; }
.jcc-l[data-state="success"]       .jcc-l-screen[data-screen="credentials"] { display: block; }
.jcc-l[data-state="success-first"] .jcc-l-screen[data-screen="credentials"] { display: block; }

@keyframes jl-slide-in {
    from { opacity: 0; transform: translateX(12px); }
    to   { opacity: 1; transform: none; }
}

@keyframes jl-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.jcc-l-title {
    font-family: var(--jl-font-display);
    font-size: 22px;
    color: var(--jl-t1);
    margin: 0 0 4px;
    line-height: 1.2;
    text-align: center;
}
.jcc-l-sub {
    color: var(--jl-t2);
    font-size: 13px;
    margin: 0 0 18px;
    text-align: center;
}

/* ═══ Botones de tipo (Paso 1) ═══ */
.jcc-l-types {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.jcc-l-type {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    text-align: left;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.82) 100%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: var(--jl-r-md);
    padding: 16px 18px;
    cursor: pointer;
    font-family: inherit;
    color: inherit;
    overflow: hidden;
    isolation: isolate;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.6) inset,
        0 2px 4px rgba(120, 40, 50, 0.04),
        0 6px 14px -4px rgba(120, 40, 50, 0.08);
    transition:
        background var(--jl-ts),
        transform var(--jl-ts-spring),
        border-color var(--jl-ts),
        box-shadow var(--jl-ts);
}
/* Glow rojo que aparece en hover, contenido por overflow:hidden */
.jcc-l-type::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(163, 0, 0, 0.10) 0%, transparent 50%);
    opacity: 0;
    transition: opacity var(--jl-ts);
    pointer-events: none;
    z-index: -1;
}
.jcc-l-type:hover {
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(255, 248, 248, 0.95) 100%);
    transform: translateY(-2px);
    border-color: rgba(163, 0, 0, 0.30);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.8) inset,
        0 4px 8px rgba(163, 0, 0, 0.08),
        0 12px 24px -4px rgba(163, 0, 0, 0.18);
}
.jcc-l-type:hover::before { opacity: 1; }
.jcc-l-type:active { transform: translateY(0) scale(0.99); }

.jcc-l-type-ico {
    width: 44px; height: 44px;
    border-radius: var(--jl-r-md);
    background: linear-gradient(135deg, rgba(163, 0, 0, 0.10) 0%, rgba(163, 0, 0, 0.05) 100%);
    color: var(--jl-red);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset;
    transition: transform var(--jl-ts-spring), background var(--jl-ts);
}
.jcc-l-type:hover .jcc-l-type-ico {
    background: linear-gradient(135deg, rgba(163, 0, 0, 0.15) 0%, rgba(163, 0, 0, 0.08) 100%);
    transform: scale(1.06) rotate(-3deg);
}
.jcc-l-type-txt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 14px;
}
.jcc-l-type-txt b {
    font-size: 15px;
    font-weight: 600;
    color: var(--jl-t1);
    letter-spacing: -0.01em;
}
.jcc-l-type-txt span {
    color: var(--jl-t2);
    font-size: 12.5px;
}
.jcc-l-type-arrow {
    color: var(--jl-t3);
    font-size: 20px;
    line-height: 1;
    transition: transform var(--jl-ts-spring), color var(--jl-ts);
}
.jcc-l-type:hover .jcc-l-type-arrow {
    color: var(--jl-red);
    transform: translateX(4px);
}

/* ═══ Paso 2: back link sutil, centrado ═══ */
.jcc-l-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0 auto 16px;
    background: none;
    border: none;
    color: var(--jl-t2);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: var(--jl-r-sm);
    transition: color var(--jl-ts), background var(--jl-ts), transform var(--jl-ts);
}
.jcc-l-back > span[aria-hidden] {
    display: inline-block;
    font-size: 15px;
    line-height: 1;
    transition: transform var(--jl-ts);
}
.jcc-l-back:hover {
    color: var(--jl-red);
    background: rgba(163, 0, 0, 0.04);
}
.jcc-l-back:hover > span[aria-hidden] { transform: translateX(-3px); }
.jcc-l-back:active { transform: scale(0.97); }

/* ═══ Forms ═══ */
.jcc-l-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.jcc-l-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--jl-t2);
    margin: 10px 0 4px;
}
.jcc-l-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: var(--jl-r-sm);
    box-shadow: 0 1px 2px rgba(0,0,0,0.03) inset;
    transition: border-color var(--jl-ts), box-shadow var(--jl-ts-spring), transform var(--jl-ts);
}
.jcc-l-input-wrap:hover { border-color: rgba(0,0,0,0.18); }
.jcc-l-input-wrap:focus-within {
    border-color: var(--jl-red);
    box-shadow:
        0 0 0 4px rgba(163, 0, 0, 0.12),
        0 1px 2px rgba(0,0,0,0.03) inset;
    transform: translateY(-1px);
}
.jcc-l-input-wrap input,
.jcc-l .jcc-l-form > input {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: transparent;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 15px;
    color: var(--jl-t1);
}
.jcc-l .jcc-l-form > input {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: var(--jl-r-sm);
    margin-bottom: 4px;
}
.jcc-l .jcc-l-form > input:focus-within,
.jcc-l .jcc-l-form > input:focus {
    border-color: var(--jl-red);
    box-shadow: 0 0 0 3px rgba(163, 0, 0, 0.10);
}
.jcc-l-suffix {
    display: flex;
    align-items: center;
    padding: 0 14px;
    background: linear-gradient(180deg, rgba(163, 0, 0, 0.10) 0%, rgba(163, 0, 0, 0.06) 100%);
    color: var(--jl-red);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.02em;
    border-left: 1px solid rgba(163, 0, 0, 0.15);
    border-top-right-radius: var(--jl-r-sm);
    border-bottom-right-radius: var(--jl-r-sm);
    box-shadow: 0 1px 0 rgba(255,255,255,0.4) inset;
    animation: jl-suffix-pulse 0.6s var(--jl-ts-spring) both;
}
@keyframes jl-suffix-pulse {
    0%   { opacity: 0; transform: translateX(8px) scale(0.92); }
    60%  { transform: translateX(0) scale(1.04); }
    100% { opacity: 1; transform: translateX(0) scale(1); }
}
.jcc-l-pw-toggle {
    background: none;
    border: none;
    color: var(--jl-t3);
    cursor: pointer;
    padding: 0 12px;
    display: flex;
    align-items: center;
    transition: color var(--jl-ts);
}
.jcc-l-pw-toggle:hover { color: var(--jl-red); }

.jcc-l-hint {
    font-size: 11.5px;
    color: var(--jl-t3);
    margin: 4px 2px 0;
}
.jcc-l-capslock {
    font-size: 11.5px;
    color: var(--jl-red);
    margin: 4px 2px 0;
    font-weight: 500;
}

.jcc-l-remember {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 4px;
    font-size: 12.5px;
    color: var(--jl-t2);
    cursor: pointer;
}
.jcc-l-remember input { accent-color: var(--jl-red); }

/* ═══ CTA principal ═══ */
.jcc-l-cta {
    position: relative;
    width: 100%;
    padding: 14px 16px;
    background: linear-gradient(180deg, #B81515 0%, var(--jl-red) 60%, #8D0000 100%);
    color: var(--jl-tw);
    border: none;
    border-radius: var(--jl-r-pill);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    margin-top: 20px;
    box-shadow: var(--jl-shadow-cta);
    transition:
        background var(--jl-ts),
        transform var(--jl-ts-spring),
        box-shadow var(--jl-ts),
        filter var(--jl-ts);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    overflow: hidden;
    isolation: isolate;
}
/* Sheen sutil que recorre el botón en hover */
.jcc-l-cta::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -40%;
    width: 30%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.20) 50%, transparent 100%);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
.jcc-l-cta:hover {
    transform: translateY(-1px);
    box-shadow: var(--jl-shadow-cta-hover);
    filter: brightness(1.05);
}
.jcc-l-cta:hover::after { left: 130%; }
.jcc-l-cta:active {
    transform: translateY(1px) scale(0.99);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.15) inset,
        0 1px 2px rgba(163, 0, 0, 0.30),
        0 2px 4px rgba(163, 0, 0, 0.20);
}
/* ═══ Pantalla suggest-change-pw (opción B): acciones ═══ */
.jcc-l-suggest-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 24px;
}

/* ═══ Password meter (D3) ═══ */
.jcc-l-pwmeter {
    margin: 6px 2px 12px;
}
.jcc-l-pwmeter-bar {
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.06);
    border-radius: 4px;
    overflow: hidden;
}
.jcc-l-pwmeter-bar > span {
    display: block;
    height: 100%;
    width: 0%;
    background: #d33;
    border-radius: 4px;
    transition: width var(--jl-ts), background var(--jl-ts);
}
.jcc-l-pwmeter[data-level="1"] .jcc-l-pwmeter-bar > span { background: #dc3545; }
.jcc-l-pwmeter[data-level="2"] .jcc-l-pwmeter-bar > span { background: #f0ad4e; }
.jcc-l-pwmeter[data-level="3"] .jcc-l-pwmeter-bar > span { background: #5cb85c; }
.jcc-l-pwmeter[data-level="4"] .jcc-l-pwmeter-bar > span { background: #2e7d32; }

.jcc-l-pwmeter-label {
    margin: 4px 0 0;
    font-size: 11.5px;
    color: var(--jl-t3);
    transition: color var(--jl-ts);
}
.jcc-l-pwmeter[data-level="1"] .jcc-l-pwmeter-label { color: #c0392b; }
.jcc-l-pwmeter[data-level="2"] .jcc-l-pwmeter-label { color: #d68910; }
.jcc-l-pwmeter[data-level="3"] .jcc-l-pwmeter-label { color: #1e8449; }
.jcc-l-pwmeter[data-level="4"] .jcc-l-pwmeter-label { color: #145a32; font-weight: 600; }

/* ═══ Error inline para change-pw ═══ */
.jcc-l-pw-error {
    margin: 8px 2px 0;
    padding: 8px 12px;
    background: rgba(220, 53, 69, 0.08);
    border: 1px solid rgba(220, 53, 69, 0.25);
    border-radius: var(--jl-r-sm);
    color: #a01b2a;
    font-size: 12.5px;
    font-weight: 500;
    animation: jl-fade 0.2s ease-out both;
}

/* ═══ Secondary link en change-pw (Cerrar sesión) ═══ */
.jcc-l-secondary-link {
    display: block;
    margin: 14px auto 0;
    padding: 6px 10px;
    background: none;
    border: none;
    color: var(--jl-t3);
    font-family: inherit;
    font-size: 12.5px;
    cursor: pointer;
    transition: color var(--jl-ts);
}
.jcc-l-secondary-link:hover { color: var(--jl-red); text-decoration: underline; }

/* ═══ Spinner ═══ */
.jcc-l-spinner {
    width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: jl-spin 0.7s linear infinite;
    display: none; /* solo visible en submitting */
    flex-shrink: 0;
}
@keyframes jl-spin { to { transform: rotate(360deg); } }

/* ═══ Estado "submitting": feedback visual de procesamiento ═══ */
.jcc-l[data-state="submitting"] .jcc-l-spinner {
    display: inline-block;
}
/* CTA: desactivar interacción + sutil pulse del background */
.jcc-l[data-state="submitting"] .jcc-l-cta {
    pointer-events: none;
    filter: saturate(0.8);
    animation: jl-cta-pulse 1.4s ease-in-out infinite;
}
.jcc-l[data-state="submitting"] .jcc-l-cta::after {
    /* Apagar el sheen estático durante submit */
    display: none;
}
@keyframes jl-cta-pulse {
    0%, 100% { box-shadow: var(--jl-shadow-cta); }
    50%      { box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.25) inset,
        0 -2px 0 rgba(0, 0, 0, 0.15) inset,
        0 4px 12px rgba(163, 0, 0, 0.35),
        0 12px 32px -4px rgba(163, 0, 0, 0.55); }
}

/* Inputs y demás controles: atenuados + bloqueados */
.jcc-l[data-state="submitting"] .jcc-l-input-wrap,
.jcc-l[data-state="submitting"] .jcc-l-remember,
.jcc-l[data-state="submitting"] .jcc-l-back,
.jcc-l[data-state="submitting"] .jcc-l-links {
    pointer-events: none;
    opacity: 0.55;
    transition: opacity var(--jl-ts);
}

/* Restablecer cuando volvemos de submitting (al estado credentials) */
.jcc-l[data-state="credentials"] .jcc-l-input-wrap,
.jcc-l[data-state="credentials"] .jcc-l-remember,
.jcc-l[data-state="credentials"] .jcc-l-back,
.jcc-l[data-state="credentials"] .jcc-l-links {
    opacity: 1;
}

.jcc-l-cta:disabled { opacity: 0.6; cursor: not-allowed; }

.jcc-l-links {
    text-align: center;
    margin-top: 14px;
}
.jcc-l-links a {
    font-size: 12.5px;
    color: var(--jl-red);
    text-decoration: none;
}
.jcc-l-links a:hover { text-decoration: underline; }

/* ═══ Feedback overlay (error/success full-screen) ═══ */
.jcc-l-feedback {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--jl-ts), background var(--jl-ts);
    background: transparent;
    color: var(--jl-tw);
    overflow: hidden;
}
.jcc-l[data-state="error"]         .jcc-l-feedback,
.jcc-l[data-state="success"]       .jcc-l-feedback,
.jcc-l[data-state="success-first"] .jcc-l-feedback {
    opacity: 1;
    pointer-events: auto;
}
.jcc-l[data-state="error"]         .jcc-l-feedback { background: var(--jl-red); }
.jcc-l[data-state="success"]       .jcc-l-feedback,
.jcc-l[data-state="success-first"] .jcc-l-feedback { background: var(--jl-green); }

.jcc-l-feedback[aria-hidden="true"] { /* visible cuando JS lo flipa */ }

.jcc-l-feedback-inner {
    text-align: center;
    max-width: 480px;
    width: 100%;
    animation: jl-pop 0.4s var(--jl-ts-spring) both;
}
@keyframes jl-pop {
    from { opacity: 0; transform: scale(0.85); }
    to   { opacity: 1; transform: scale(1); }
}

.jcc-l-feedback-icon {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 20px;
    color: #fff;
}
.jcc-l-icon-ok,
.jcc-l-icon-err { display: none; }
.jcc-l[data-state="success"]       .jcc-l-icon-ok,
.jcc-l[data-state="success-first"] .jcc-l-icon-ok { display: block; }
.jcc-l[data-state="error"]         .jcc-l-icon-err { display: block; }

.jcc-l-feedback-title {
    font-family: var(--jl-font-display);
    font-size: clamp(28px, 5vw, 40px);
    line-height: 1.15;
    margin: 0 0 8px;
    color: #fff;
}
.jcc-l-feedback-msg {
    font-size: 15px;
    margin: 0 0 18px;
    color: rgba(255,255,255,0.9);
}

.jcc-l-feedback-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 18px;
}
.jcc-l-feedback-btn {
    padding: 11px 22px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff;
    border-radius: var(--jl-r-pill);
    font-size: 13.5px;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition:
        background var(--jl-ts),
        transform var(--jl-ts),
        box-shadow var(--jl-ts);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.jcc-l-feedback-btn:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}
.jcc-l-feedback-btn:active { transform: translateY(0) scale(0.98); }

/* Variante primaria: Reintentar. Fondo blanco lleno, texto rojo,
   destaca como CTA principal del overlay de error. */
.jcc-l-feedback-btn--primary {
    background: #fff;
    color: var(--jl-red);
    border-color: #fff;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.4) inset,
        0 -2px 0 rgba(0, 0, 0, 0.08) inset,
        0 4px 12px rgba(0, 0, 0, 0.18);
}
.jcc-l-feedback-btn--primary:hover {
    background: #fff;
    color: var(--jl-red-dark);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.5) inset,
        0 -2px 0 rgba(0, 0, 0, 0.10) inset,
        0 6px 16px rgba(0, 0, 0, 0.25);
}

/* ═══ Confetti (CSS-only, solo en success-first) ═══ */
.jcc-l-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    display: none;
}
.jcc-l[data-state="success-first"] .jcc-l-confetti { display: block; }
.jcc-l-confetti span {
    position: absolute;
    top: -20px;
    width: 8px; height: 14px;
    opacity: 0.95;
    animation: jl-fall 3s linear infinite;
}
@keyframes jl-fall {
    to {
        transform: translateY(110vh) rotate(720deg);
        opacity: 0;
    }
}

/* ═══ "Ya logueado" ═══ */
.jcc-l-already {
    max-width: 440px;
    margin: 48px auto;
    text-align: center;
    padding: 24px;
    background: var(--jl-glass, rgba(255,255,255,0.92));
    border-radius: var(--jl-r-lg);
    font-family: 'DM Sans', system-ui, sans-serif;
}
.jcc-l-already a {
    color: #A30000;
    font-weight: 600;
    margin-left: 6px;
}

/* ═══ Mobile ═══
   En mobile, el teclado virtual ocupa hasta el 50% del viewport. Con el
   centrado vertical de desktop, los inputs de abajo (Contraseña, CTA)
   quedan tapados al hacer foco. Solución:
   - Alineamos arriba (flex-start) con padding-top reducido.
   - Reducimos tamaños (logo, paddings, font sizes).
   - 100dvh ya está aplicado en el host (se ajusta con el teclado en navegadores modernos).
   - JS hace scroll-into-view al hacer focus en un input (defensa adicional). */
@media (max-width: 600px) {
    .jcc-l {
        align-items: flex-start;
        padding: 16px 12px;
    }
    /* Paso 1 (selección de tipo): centrado vertical en mobile. Como no hay
       inputs, el teclado virtual nunca aparece en esta pantalla y queda
       mejor balanceado. El resto de pasos (con inputs) sigue top-aligned
       para no colisionar con el teclado. */
    .jcc-l[data-state="select-type"] {
        align-items: center;
    }
    .jcc-l-card {
        padding: 22px 18px 24px;
        max-width: 100%;
        border-radius: var(--jl-r-lg);
    }
    .jcc-l-head {
        margin-bottom: 18px;
    }
    .jcc-l-logo-img {
        max-height: 64px;
        max-width: 200px;
    }
    .jcc-l-logo-mono {
        width: 60px; height: 60px;
        font-size: 22px;
    }
    .jcc-l-title {
        font-size: 18px;
    }
    .jcc-l-sub {
        font-size: 12.5px;
        margin-bottom: 14px;
    }
    .jcc-l-type {
        padding: 12px 14px;
        gap: 12px;
    }
    .jcc-l-type-ico {
        width: 38px; height: 38px;
    }
    .jcc-l-input-wrap input,
    .jcc-l .jcc-l-form > input {
        padding: 11px 12px;
        font-size: 15px;  /* ≥16px en algunos casos para evitar zoom auto en iOS;
                              16px aquí ya provoca zoom, 15px es el sweet spot moderno */
    }
    .jcc-l-cta {
        padding: 12px 16px;
        font-size: 14.5px;
        margin-top: 16px;
    }
    .jcc-l-back {
        margin-bottom: 12px;
    }
    /* Reducir el espacio interno del form */
    .jcc-l-label {
        margin-top: 8px;
    }
    /* Feedback overlay: títulos más chicos para no romper en pantallas chicas */
    .jcc-l-feedback-title {
        font-size: 24px;
    }
}

/* iOS hack adicional: input[font-size] >= 16px no dispara auto-zoom. */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 600px) {
        .jcc-l-input-wrap input,
        .jcc-l .jcc-l-form > input {
            font-size: 16px;
        }
    }
}