/* ═════════════ LOGIN · estadio + tarjeta de cristal ═════════════
   Todo acotado a .lg-* para no afectar a otras pantallas.
   Los tokens --lg-* cambian con [data-theme="light"]. */
.lg-wrapper{
    --lg-card:        rgba(7,20,38,.72);
    --lg-card-bd:     rgba(0,245,212,.28);
    --lg-card-glow:   0 0 0 1px rgba(0,245,212,.06), 0 18px 50px rgba(0,0,0,.55), 0 0 40px rgba(0,245,212,.10);
    --lg-title:       #f8fafc;
    --lg-sub:         #b4c3d6;
    --lg-label:       #f1f5f9;
    --lg-accent:      #19f0d8;
    --lg-input-bg:    rgba(30,41,59,.72);
    --lg-input-bd:    rgba(148,163,184,.28);
    --lg-input-fg:    #e2e8f0;
    --lg-ph:          #8a9bb3;
    --lg-pill-bg:     rgba(15,31,52,.85);
    --lg-pill-bd:     rgba(0,245,212,.30);
    --lg-pill-fg:     #f8fafc;
    --lg-line:        rgba(148,163,184,.32);
    --lg-btn-from:    #6ff7e6;
    --lg-btn-to:      #19d3c0;
    --lg-btn-fg:      #052a30;
    --lg-btn-glow:    0 8px 28px rgba(0,245,212,.38), inset 0 1px 0 rgba(255,255,255,.45);
    --lg-check-bg:    #19e6d0;
    --lg-check-fg:    #052a30;
    position:relative;
}
[data-theme="light"] .lg-wrapper{
    --lg-card:        rgba(255,255,255,.82);
    --lg-card-bd:     rgba(0,179,159,.35);
    --lg-card-glow:   0 0 0 1px rgba(255,255,255,.6), 0 18px 44px rgba(15,23,42,.14), 0 0 36px rgba(0,179,159,.14);
    --lg-title:       #0f172a;
    --lg-sub:         #475569;
    --lg-label:       #0f172a;
    --lg-accent:      #00a692;
    --lg-input-bg:    rgba(241,245,249,.95);
    --lg-input-bd:    #cbd5e1;
    --lg-input-fg:    #0f172a;
    --lg-ph:          #64748b;
    --lg-pill-bg:     #ffffff;
    --lg-pill-bd:     rgba(0,179,159,.40);
    --lg-pill-fg:     #0f172a;
    --lg-line:        #cbd5e1;
    --lg-btn-from:    #3de8d3;
    --lg-btn-to:      #00b8a3;
    --lg-btn-fg:      #04302b;
    --lg-btn-glow:    0 8px 24px rgba(0,179,159,.35), inset 0 1px 0 rgba(255,255,255,.55);
    --lg-check-bg:    #00b39f;
    --lg-check-fg:    #ffffff;
}

/* Fondo a pantalla completa: 4 variantes (móvil/PC × oscuro/claro) */
.lg-bg{
    position:fixed; inset:0; z-index:-1;
    background:#171d24 url("/static/img/auth/bg-dark-mobile.jpg") center / cover no-repeat;
}
[data-theme="light"] .lg-bg{
    background:#eef9f8 url("/static/img/auth/bg-light-mobile.jpg") center / cover no-repeat;
}
@media (min-width:768px){
    .lg-bg{ background-image:url("/static/img/auth/bg-dark-desktop.jpg"); }
    [data-theme="light"] .lg-bg{ background-image:url("/static/img/auth/bg-light-desktop.jpg"); }
}

.lg-container{ display:flex; justify-content:center; align-items:flex-start; min-height:85vh; padding-top:.9rem; padding-bottom:1rem; }
@media (min-width:768px){ .lg-container{ padding-top:2rem; } }
.lg-col{ width:100%; max-width:440px; }

/* Logo: versión para fondo oscuro y para fondo claro */
.lg-brand{ margin-bottom:2px; line-height:0; text-align:center; }  /* sin z-index: así el multiply del logo claro mezcla con el fondo */
.lg-logo{ display:inline-block; width:198px; max-width:38vw; height:auto; }
.lg-logo-dark{
    -webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%);
            mask-image:radial-gradient(ellipse 50% 50% at 50% 50%, #000 52%, transparent 100%);
    filter:drop-shadow(0 6px 22px rgba(0,245,212,.30));
}
.lg-logo-light{ display:none; mix-blend-mode:multiply; }  /* multiply: el blanco del JPG desaparece */
[data-theme="light"] .lg-logo-dark{ display:none; }
[data-theme="light"] .lg-logo-light{ display:inline-block; }

/* Selector de tema flotante (la barra superior se oculta en estas pantallas) */
.lg-theme{
    position:fixed; top:max(12px, env(safe-area-inset-top)); right:14px; z-index:5;
    width:38px; height:38px; border-radius:50%; cursor:pointer;
    display:grid; place-content:center; font-size:1rem;
    background:var(--lg-pill-bg); color:var(--lg-accent);
    border:1px solid var(--lg-pill-bd);
}

/* Tarjeta */
.lg-card{
    background:var(--lg-card);
    border:1px solid var(--lg-card-bd);
    border-radius:22px;
    box-shadow:var(--lg-card-glow);
    -webkit-backdrop-filter:blur(14px) saturate(1.2);
            backdrop-filter:blur(14px) saturate(1.2);
    padding:1.15rem 1.1rem 1.05rem;
    animation:lgUp .45s ease;
}
@keyframes lgUp{ from{opacity:0; transform:translateY(15px)} to{opacity:1; transform:none} }

.lg-title{
    text-align:center; margin:0 0 .3rem;
    font-size:1.3rem; font-weight:800; letter-spacing:-.01em;
    color:var(--lg-title);
}
.lg-accent{ color:var(--lg-accent); }
.lg-sub{ text-align:center; margin:0 0 .95rem; font-size:.86rem; color:var(--lg-sub); }

/* Botón Google */
.lg-google{
    display:flex; align-items:center; justify-content:center; gap:.7rem; position:relative;
    height:46px; border-radius:999px; text-decoration:none;
    background:var(--lg-pill-bg); color:var(--lg-pill-fg);
    border:1px solid var(--lg-pill-bd);
    font-weight:600; font-size:.92rem;
    transition:transform .2s, box-shadow .2s, border-color .2s;
}
.lg-google:hover{
    color:var(--lg-pill-fg); transform:translateY(-1px);
    border-color:var(--lg-accent); box-shadow:0 6px 20px rgba(0,245,212,.18);
}
.lg-google-arrow{ position:absolute; right:20px; font-size:.95rem; color:var(--lg-sub); }
/* Varios botones sociales seguidos (Google + Microsoft) */
.lg-google + .lg-google{ margin-top:.6rem; }

/* Separador */
.lg-divider{ display:flex; align-items:center; gap:.9rem; margin:.85rem 0; color:var(--lg-sub); font-size:.8rem; }
.lg-divider::before, .lg-divider::after{ content:''; flex:1; height:1px; background:var(--lg-line); }

/* Campos */
.lg-field{ margin-bottom:.8rem; }
.lg-label{ display:flex; align-items:center; gap:.5rem; margin:0 0 .35rem; font-size:.84rem; font-weight:700; color:var(--lg-label); }
.lg-label i{ color:var(--lg-accent); font-size:.9rem; }

.form-control.lg-input{
    display:block; width:100%; box-sizing:border-box;
    height:46px; border-radius:12px; padding:0 .9rem;
    background:var(--lg-input-bg) !important;
    border:1px solid var(--lg-input-bd);
    color:var(--lg-input-fg);
    font-size:.95rem;
}
.form-control.lg-input::placeholder{ color:var(--lg-ph) !important; opacity:1; }
.form-control.lg-input:focus{
    border-color:var(--lg-accent);
    box-shadow:0 0 0 .2rem rgba(0,245,212,.16);
    color:var(--lg-input-fg);
}
/* Evita el fondo amarillo/azul del autocompletado */
.lg-input:-webkit-autofill{
    -webkit-text-fill-color:var(--lg-input-fg);
    transition:background-color 9999s ease-out 0s;
}

.lg-pass{ position:relative; display:flex; }
.lg-pass .lg-input{ padding-right:54px; width:100%; }
.lg-eye{
    position:absolute; top:0; right:0; bottom:0; width:46px;
    background:transparent; border:0; border-left:1px solid var(--lg-input-bd);
    color:var(--lg-accent); font-size:1.15rem; cursor:pointer;
    border-radius:0 14px 14px 0;
}
.lg-eye:hover{ background:rgba(0,245,212,.08); }

.lg-link{ color:var(--lg-accent); font-weight:700; text-decoration:none; }
.lg-link:hover{ color:var(--lg-accent); text-decoration:underline; }
.lg-forgot{ font-size:.8rem; margin-bottom:.35rem; }

/* Mantener sesión */
.lg-remember{ display:flex; align-items:center; gap:.8rem; margin:.1rem 0 1rem; }
.lg-remember label{ display:flex; align-items:center; gap:.55rem; margin:0; cursor:pointer; font-size:.88rem; font-weight:500; color:var(--lg-label); }
.lg-remember label i{ color:var(--lg-accent); }
.lg-check{
    -webkit-appearance:none; appearance:none; flex:0 0 auto;
    width:22px; height:22px; margin:0; border-radius:6px; cursor:pointer;
    background:var(--lg-input-bg); border:1px solid var(--lg-input-bd);
    display:grid; place-content:center; transition:.15s;
}
.lg-check::after{
    content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900; font-size:.8rem;
    color:var(--lg-check-fg); transform:scale(0); transition:transform .15s;
}
.lg-check:checked{ background:var(--lg-check-bg); border-color:var(--lg-check-bg); }
.lg-check:checked::after{ transform:scale(1); }
.lg-check:focus-visible{ outline:2px solid var(--lg-accent); outline-offset:2px; }

/* Botón Entrar */
.lg-submit{
    display:flex; align-items:center; justify-content:center; gap:.7rem;
    width:100%; height:50px; border:0; border-radius:999px; cursor:pointer;
    background:linear-gradient(180deg, var(--lg-btn-from), var(--lg-btn-to));
    color:var(--lg-btn-fg);
    font-weight:800; font-size:1rem; letter-spacing:.1em; text-transform:uppercase;
    box-shadow:var(--lg-btn-glow);
    transition:transform .2s, box-shadow .2s, filter .2s;
}
.lg-submit:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.05); }
.lg-submit:disabled{ opacity:.55; cursor:not-allowed; box-shadow:none; }

.lg-new{ text-align:center; margin:.9rem 0 0; font-size:.86rem; color:var(--lg-sub); }
.lg-new .lg-link{ margin-left:.3rem; }

@media (max-width:380px){
    .lg-card{ padding:1.3rem 1rem 1.2rem; }
    .lg-title{ font-size:1.2rem; }
}
@media (prefers-reduced-motion:reduce){
    .lg-card{ animation:none; }
    .lg-google, .lg-submit{ transition:none; }
}

/* ── Extras para registro / recuperar contraseña ── */
.lg-col-wide{ max-width:600px; }
.lg-grid2{ display:grid; grid-template-columns:1fr 1fr; gap:0 .75rem; }
.lg-grid2 .lg-label{ font-size:.8rem; }
.lg-grid2 .lg-pass .lg-input{ padding-right:46px; }
.lg-grid2 .lg-eye{ width:40px; }
.lg-section{
    display:flex; align-items:center; gap:.45rem; margin:.2rem 0 .55rem;
    font-size:.7rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--lg-accent);
}
.lg-badge{
    display:inline-block; margin-left:.4rem; padding:.15rem .5rem; border-radius:999px;
    font-size:.68rem; font-weight:700; letter-spacing:0; text-transform:none;
    background:rgba(0,245,212,.12); color:var(--lg-accent); border:1px solid rgba(0,245,212,.3);
}
.lg-badge-req{ background:rgba(239,68,68,.12); color:#ef4444; border-color:rgba(239,68,68,.3); }
.lg-terms{ display:flex; align-items:flex-start; gap:.7rem; margin:.1rem 0 1rem; font-size:.82rem; color:var(--lg-sub); }
.lg-terms label{ margin:0; cursor:pointer; line-height:1.4; }
.lg-terms .lg-check{ margin-top:1px; }
.lg-back{ display:block; text-align:center; margin-top:1rem; font-size:.86rem; color:var(--lg-sub); text-decoration:none; }
.lg-back:hover{ color:var(--lg-accent); }
@media (max-width:359px){ .lg-grid2{ grid-template-columns:1fr; } }
/* Parejas con textos largos (correo, contraseña): apiladas en móvil para que se lea el placeholder */
@media (max-width:575px){ .lg-grid2-stack{ grid-template-columns:1fr; } }
.lg-hint{ margin:-.35rem 0 .8rem; font-size:.76rem; color:var(--lg-sub); line-height:1.35; }
.lg-hint i{ color:var(--lg-accent); margin-right:.3rem; }
/* Aviso legal bajo el botón de entrar */
.lg-legal{ margin:.8rem 0 0; text-align:center; font-size:.74rem; line-height:1.45; color:var(--lg-sub); }
.lg-legal a{ color:var(--lg-accent); font-weight:600; text-decoration:none; }
.lg-legal a:hover{ text-decoration:underline; }
.lg-row{ display:flex; justify-content:space-between; align-items:center; }