/* ════════ Pantallas de auth (login / register) — dark + coral ════════
   Independiente del theme (siempre oscuro). Fuente única compartida por
   /login y /register. El robot y las burbujas viven acá para no duplicar.
   Onboarding usa el mismo LoginLayout pero NO estas clases, así que no se
   ve afectado (solo carga este archivo si la página lo linkea). */

.lg-page {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    position: relative;
    overflow: hidden;
    background: #0b1120;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Glows de fondo (mismo lenguaje visual que el hero de la landing) */
.lg-bg {
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
}
.lg-bg::before {
    content: ""; position: absolute; top: -240px; right: -180px;
    width: 640px; height: 640px; border-radius: 50%;
    background: radial-gradient(circle, rgba(224,113,78,.20), transparent 62%);
}
.lg-bg::after {
    content: ""; position: absolute; bottom: -220px; left: -200px;
    width: 560px; height: 560px; border-radius: 50%;
    background: radial-gradient(circle, rgba(99,102,241,.12), transparent 62%);
}

/* ── Burbujas difuminadas (flotan + siguen el mouse, controladas por JS) ── */
.lg-orb {
    position: absolute; border-radius: 50%;
    filter: blur(58px);
    opacity: .55;
    mix-blend-mode: screen;
    will-change: transform;
}
.lg-orb--coral {
    top: -12%; right: 2%; width: 520px; height: 520px;
    background: radial-gradient(circle at 50% 50%, rgba(224,113,78,.85), rgba(224,113,78,0) 68%);
}
.lg-orb--indigo {
    bottom: -16%; left: -8%; width: 480px; height: 480px;
    background: radial-gradient(circle at 50% 50%, rgba(99,102,241,.70), rgba(99,102,241,0) 68%);
}
.lg-orb--violet {
    top: 26%; left: 18%; width: 360px; height: 360px;
    background: radial-gradient(circle at 50% 50%, rgba(139,92,246,.55), rgba(139,92,246,0) 70%);
}
.lg-orb--teal {
    bottom: 8%; right: 20%; width: 300px; height: 300px;
    background: radial-gradient(circle at 50% 50%, rgba(45,212,191,.45), rgba(45,212,191,0) 70%);
}
.lg-orb--amber {
    top: -18%; left: 38%; width: 300px; height: 300px;
    background: radial-gradient(circle at 50% 50%, rgba(242,146,110,.55), rgba(242,146,110,0) 70%);
}
@media (max-width: 480px) {
    .lg-orb { filter: blur(44px); opacity: .5; }
    .lg-orb--coral  { width: 360px; height: 360px; }
    .lg-orb--indigo { width: 340px; height: 340px; }
    .lg-orb--violet, .lg-orb--teal, .lg-orb--amber { width: 240px; height: 240px; }
}
@media (prefers-reduced-motion: reduce) {
    .lg-orb { will-change: auto; }
}

/* ── Robot que cruza la pantalla, saluda y se va ──
   Recorrido: entra por la izquierda (con rebote), saluda, cruza hasta la
   derecha, saluda de nuevo y se desvanece EN EL LUGAR sobre el borde derecho
   (8px de aire), para volver invisible al punto de partida y repetir.
   Clave del fix: el robot nunca se desvanece mientras el borde de la pantalla
   lo recorta — entre 56% y 80% queda quieto en la pausa derecha (rightEdge =
   100vw - 8px, siempre visible completo) y recién ahí baja la opacidad. */
.login-bot {
    position: fixed; left: 8px; bottom: -14px;
    width: 230px; height: 304px; z-index: 3;
    pointer-events: none;
    filter: drop-shadow(0 18px 28px rgba(0,0,0,.55));
    transform: translateX(-145%); opacity: 0;
    animation: robotJourney 9.5s ease-in-out .8s infinite;
}
@keyframes robotJourney {
    0%   { transform: translateX(-145%); opacity: 0; animation-timing-function: cubic-bezier(.34,1.4,.64,1); }
    8%   { transform: translateX(0);                   opacity: 1; animation-timing-function: linear; }
    24%  { transform: translateX(0);                   opacity: 1; animation-timing-function: ease-in-out; }
    56%  { transform: translateX(calc(100vw - 246px)); opacity: 1; animation-timing-function: linear; }
    70%  { transform: translateX(calc(100vw - 246px)); opacity: 1; animation-timing-function: ease; }
    80%  { transform: translateX(calc(100vw - 246px)); opacity: 0; animation-timing-function: ease-in; }
    100% { transform: translateX(-145%);               opacity: 0; }
}
@media (max-width: 880px) { .login-bot { display: none } }
@media (prefers-reduced-motion: reduce) {
    .login-bot { animation: none; opacity: 0; }
}

/* ── Card ── */
.lg-card {
    position: relative; z-index: 1;
    width: 100%; max-width: 432px;
    background: #131c31;
    border: 1px solid #233048;
    border-radius: 22px;
    padding: 2.4rem 2.1rem 1.6rem;
    box-shadow: 0 24px 60px rgba(0,0,0,.55);
    animation: lgIn .5s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes lgIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ── Marca ── */
.lg-brand { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.1rem; }
.lg-logo {
    width: 46px; height: 46px; flex-shrink: 0;
    filter: drop-shadow(0 6px 16px rgba(224,113,78,.35));
}
.lg-brandtxt { display: flex; flex-direction: column; gap: .28rem; }
.lg-name {
    font-size: 1.32rem; font-weight: 800; letter-spacing: -.02em;
    line-height: 1; color: #f8fafc; text-transform: uppercase;
}
.lg-name span { color: #E0714E; }
.lg-badge {
    align-self: flex-start;
    font-size: .66rem; font-weight: 700; letter-spacing: .06em;
    color: #F2926E; background: rgba(224,113,78,.14);
    padding: .18rem .5rem; border-radius: 100px;
}

.lg-pitch {
    font-size: .9rem; line-height: 1.5; color: #94a3b8;
    margin: 0 0 1rem;
}
.lg-pitch b { color: #e2e8f0; font-weight: 600; }

.lg-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.5rem; }
.lg-chip {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .74rem; font-weight: 600; color: #cbd5e1;
    background: rgba(255,255,255,.05); border: 1px solid #233048;
    padding: .3rem .6rem; border-radius: 100px;
}
.lg-chip i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ── Error ── */
.lg-error {
    display: flex; gap: .5rem; align-items: flex-start;
    background: rgba(239,68,68,.14); border: 1px solid rgba(239,68,68,.35);
    color: #fca5a5; border-radius: 10px;
    padding: .7rem .9rem; font-size: .85rem; margin-bottom: 1.1rem;
}

/* ── Form ── */
.lg-form { display: flex; flex-direction: column; gap: 1rem; }
.lg-field { display: flex; flex-direction: column; gap: .4rem; }
.lg-field label, .lg-labelrow label {
    font-size: .82rem; font-weight: 600; color: #cbd5e1;
}
.lg-labelrow { display: flex; align-items: baseline; justify-content: space-between; }
.lg-forgot {
    font-size: .78rem; font-weight: 500; color: #F2926E; text-decoration: none;
}
.lg-forgot:hover { text-decoration: underline; }

.lg-field input[type=text],
.lg-field input[type=email],
.lg-field input[type=password] {
    width: 100%; box-sizing: border-box;
    background: #0e1728; border: 1px solid #233048; border-radius: 11px;
    padding: .72rem .9rem; font-size: .95rem; color: #f8fafc;
    outline: none; transition: border-color .15s, box-shadow .15s;
    font-family: inherit;
}
.lg-field input::placeholder { color: #64748b; }
.lg-field input:focus {
    border-color: #E0714E;
    box-shadow: 0 0 0 3px rgba(224,113,78,.28);
}
.lg-field input[readonly] {
    background: #0a1120; color: #64748b; cursor: not-allowed;
}
.lg-hint { font-size: .76rem; color: #64748b; }
/* autofill en oscuro */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
    -webkit-text-fill-color: #f8fafc;
    -webkit-box-shadow: 0 0 0 1000px #0e1728 inset;
    caret-color: #f8fafc;
}

.lg-remember {
    display: flex; align-items: center; gap: .5rem;
    font-size: .82rem; color: #94a3b8; cursor: pointer; user-select: none;
}
.lg-remember input { accent-color: #E0714E; width: 15px; height: 15px; }

.lg-btn {
    margin-top: .2rem;
    border: none; border-radius: 11px; cursor: pointer;
    padding: .82rem; font-size: .98rem; font-weight: 700; color: #fff;
    font-family: inherit;
    background: linear-gradient(120deg, #E0714E, #F2926E);
    box-shadow: 0 12px 26px rgba(224,113,78,.32);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.lg-btn:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(224,113,78,.4); }
.lg-btn:active { transform: translateY(0); filter: brightness(.96); }

/* ── Divider ── */
.lg-divider {
    display: flex; align-items: center; gap: .8rem;
    margin: 1.3rem 0 1rem; color: #64748b; font-size: .78rem;
}
.lg-divider::before, .lg-divider::after {
    content: ''; flex: 1; height: 1px; background: #233048;
}

/* ── Google ── */
.lg-google {
    display: flex; align-items: center; justify-content: center; gap: .6rem;
    width: 100%; box-sizing: border-box;
    padding: .72rem; border-radius: 11px; border: none;
    background: #f8fafc; color: #1e293b;
    font-size: .92rem; font-weight: 600; text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.lg-google:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.4); }

.lg-signup {
    text-align: center; font-size: .85rem; color: #94a3b8; margin: 1.1rem 0 1.3rem;
}
.lg-signup a { color: #F2926E; font-weight: 600; text-decoration: none; }
.lg-signup a:hover { text-decoration: underline; }

/* ── Footer ── */
.lg-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .35rem; padding-top: 1.1rem; border-top: 1px solid #233048;
    font-size: .72rem; color: #64748b;
}
.lg-dot { opacity: .6; }

@media (max-width: 480px) {
    .lg-card { padding: 1.8rem 1.4rem 1.3rem; border-radius: 18px; }
    .lg-name { font-size: 1.18rem; }
}