/* ------------------------------------------------------------------
   Login (diseno Stitch). Colores siempre desde los tokens de stitch.css.
   El panel de marca es oscuro en ambos temas: usa solo tokens "fixed",
   que no cambian entre modo claro y oscuro.
   ------------------------------------------------------------------ */

/* Base minima: la pagina no carga Bootstrap ni el preflight de Tailwind */
.login-page, .login-page *, .login-page ::before, .login-page ::after { box-sizing: border-box; }
html, body.login-page { margin: 0; padding: 0; min-height: 100%; }
body.login-page { overflow-x: hidden; }
.login-page img { max-width: 100%; display: block; }

/* ---------------- Panel de marca ---------------- */
.login-hero {
    background:
        radial-gradient(120% 90% at 0% 0%, rgb(var(--c-on-primary-fixed-variant) / .55), transparent 60%),
        linear-gradient(135deg, rgb(var(--c-on-primary-fixed)) 0%, rgb(var(--c-on-primary-fixed)) 45%, rgb(var(--c-on-primary-fixed-variant) / .9) 100%);
    color: rgb(var(--c-primary-fixed));
    border-bottom: 1px solid rgb(var(--c-primary-fixed-dim) / .12);
}
@media (min-width: 1024px) {
    .login-hero { border-bottom: 0; border-right: 1px solid rgb(var(--c-primary-fixed-dim) / .12); min-height: 100vh; }
}

.login-hero-glow { position: absolute; border-radius: 9999px; pointer-events: none; filter: blur(100px); }
.login-hero-glow--a { top: -8rem; left: -8rem; width: 24rem; height: 24rem; background: rgb(var(--c-primary-fixed-dim) / .22); animation: login-glow 6s ease-in-out infinite; }
.login-hero-glow--b { bottom: 2.5rem; right: 2.5rem; width: 26rem; height: 26rem; background: rgb(var(--c-primary-fixed-dim) / .12); filter: blur(120px); }
.login-hero-grid {
    position: absolute; inset: 0; pointer-events: none; opacity: .08;
    background-image: radial-gradient(rgb(var(--c-primary-fixed-dim)) 1px, transparent 1px);
    background-size: 28px 28px;
}

.login-hero-eyebrow { color: rgb(var(--c-primary-fixed-dim) / .75); }
.login-hero-title, .login-hero-heading { color: rgb(var(--c-primary-fixed)); }
.login-hero-text { color: rgb(var(--c-primary-fixed) / .85); max-width: 36rem; }
.login-hero-muted { color: rgb(var(--c-primary-fixed-dim) / .75); }
.login-hero-gradient {
    background: linear-gradient(90deg, rgb(var(--c-primary-fixed-dim)), rgb(var(--c-secondary-fixed-dim)));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.login-hero-pill {
    color: rgb(var(--c-primary-fixed-dim));
    background: rgb(var(--c-primary-fixed-dim) / .1);
    border: 1px solid rgb(var(--c-primary-fixed-dim) / .3);
}
.login-hero-features { border-top: 1px solid rgb(var(--c-primary-fixed-dim) / .14); }
.login-feature {
    background: rgb(var(--c-on-primary-fixed) / .55);
    border: 1px solid rgb(var(--c-primary-fixed-dim) / .14);
    backdrop-filter: blur(6px);
}
.login-feature-icon {
    color: rgb(var(--c-primary-fixed-dim));
    background: rgb(var(--c-primary-fixed-dim) / .1);
    border: 1px solid rgb(var(--c-primary-fixed-dim) / .3);
}
.login-feature-icon--success {
    color: rgb(var(--c-secondary-fixed-dim));
    background: rgb(var(--c-secondary-fixed-dim) / .1);
    border-color: rgb(var(--c-secondary-fixed-dim) / .3);
}

/* ---------------- Escenario de etiquetas ESL ---------------- */
.login-stage { pointer-events: none; user-select: none; }
#electronic-tags { position: absolute; inset: 0; }

.login-rf { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.login-rf span {
    position: absolute; left: 50%; top: 50%; border-radius: 9999px;
    border: 1px solid rgb(var(--c-primary-fixed-dim) / .3);
    animation: login-rf 2.8s cubic-bezier(0, .2, .8, 1) infinite;
}
.login-rf span:nth-child(1) { width: 6rem; height: 6rem; margin: -3rem 0 0 -3rem; }
.login-rf span:nth-child(2) { width: 11rem; height: 11rem; margin: -5.5rem 0 0 -5.5rem; animation-delay: .9s; border-color: rgb(var(--c-primary-fixed-dim) / .2); }
.login-rf span:nth-child(3) { width: 16rem; height: 16rem; margin: -8rem 0 0 -8rem; animation-delay: 1.8s; border-color: rgb(var(--c-primary-fixed-dim) / .1); }

.electronic-tag {
    position: absolute;
    width: 15rem;
    padding: .75rem;
    border-radius: .75rem;
    background: rgb(var(--c-primary-fixed));
    border: 2px solid rgb(var(--c-primary-fixed-dim) / .8);
    box-shadow: 0 25px 50px -12px rgb(var(--c-on-primary-fixed) / .8);
    display: flex; flex-direction: column; gap: .4rem;
}
.electronic-tag .tag-head {
    display: flex; align-items: center; gap: .4rem;
    padding-bottom: .4rem; border-bottom: 1px solid rgb(var(--c-on-primary-fixed) / .15);
}
.electronic-tag .tag-dot { width: .4rem; height: .4rem; border-radius: 9999px; background: rgb(var(--c-secondary-fixed-dim)); flex-shrink: 0; }
.electronic-tag .tag-bar, .electronic-tag .tag-line { height: .4rem; border-radius: 9999px; background: rgb(var(--c-on-primary-fixed) / .25); }
.electronic-tag .tag-bar { width: 45%; }
.electronic-tag .tag-badge { margin-left: auto; width: 1.75rem; height: .75rem; border-radius: .2rem; background: rgb(var(--c-tertiary-fixed-dim)); }
.electronic-tag .tag-line--title { width: 85%; height: .55rem; background: rgb(var(--c-on-primary-fixed) / .7); }
.electronic-tag .tag-line--sub { width: 60%; }
.electronic-tag .tag-foot {
    display: flex; align-items: flex-end; justify-content: space-between; gap: .5rem;
    margin-top: .2rem; padding-top: .4rem; border-top: 1px dashed rgb(var(--c-on-primary-fixed) / .2);
}
.electronic-tag .tag-foot .tag-line { width: 30%; }
.electronic-tag .tag-price { width: 4.5rem; height: 1.5rem; border-radius: .3rem; background: rgb(var(--c-on-primary-fixed)); }
.electronic-tag.tag--offer .tag-price { background: rgb(var(--c-on-tertiary-fixed-variant)); }

.electronic-tag.tag--a { left: .5rem; top: .5rem; animation: login-float-1 7s ease-in-out infinite; }
.electronic-tag.tag--b { right: .5rem; bottom: 0; z-index: 2; animation: login-float-2 5.5s ease-in-out infinite; }

.login-chip {
    position: absolute; left: 33%; top: 50%; z-index: 1; transform: translateY(-50%);
    display: flex; align-items: center; gap: .6rem; padding: .6rem .75rem;
    border-radius: .5rem;
    background: rgb(var(--c-on-primary-fixed) / .92);
    border: 1px solid rgb(var(--c-primary-fixed-dim) / .45);
    color: rgb(var(--c-primary-fixed));
    animation: login-float-3 6.2s ease-in-out infinite;
}
.login-chip-icon {
    width: 2rem; height: 2rem; border-radius: .5rem;
    display: flex; align-items: center; justify-content: center;
    color: rgb(var(--c-primary-fixed-dim));
    background: rgb(var(--c-primary-fixed-dim) / .15);
    border: 1px solid rgb(var(--c-primary-fixed-dim) / .35);
}
.login-chip-text { font-size: .75rem; font-weight: 600; line-height: 1.1; }
.login-chip-text small { display: block; font-weight: 500; font-size: .65rem; color: rgb(var(--c-primary-fixed-dim) / .8); }

@media (min-width: 640px) {
    .electronic-tag { width: 16rem; }
    .electronic-tag.tag--a { left: 1.5rem; }
    .electronic-tag.tag--b { right: 2.5rem; }
}

/* ---------------- Formulario ---------------- */
.login-input { font-size: .875rem; }
.login-submit { box-shadow: 0 10px 20px -8px rgb(var(--c-primary) / .45); }
.login-submit:hover { transform: translateY(-1px); }
.login-submit[disabled] { cursor: progress; }

/* ---------------- Animaciones ---------------- */
@keyframes login-float-1 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(1.5deg); } }
@keyframes login-float-2 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-20px) rotate(-2deg); } }
@keyframes login-float-3 { 0%, 100% { transform: translateY(-50%); } 50% { transform: translateY(calc(-50% - 12px)); } }
@keyframes login-glow { 0%, 100% { opacity: .4; transform: scale(1); } 50% { opacity: .75; transform: scale(1.08); } }
@keyframes login-rf { 0% { transform: scale(.8); opacity: .8; } 100% { transform: scale(2.2); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
    .electronic-tag, .login-chip, .login-hero-glow, .login-rf span { animation: none !important; }
    .login-submit:hover { transform: none; }
}