/* =====================================================================
   Academiq · Pantallas de acceso
   ===================================================================== */

.auth-body { background: var(--bg); }

.auth {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

.auth__panel {
  display: flex; flex-direction: column;
  padding: var(--sp-8) var(--sp-6);
  max-width: 100%;
}
.auth__brand {
  display: inline-flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; color: var(--text-strong);
  align-self: flex-start;
}
.auth__brand-name {
  display: block;
  font-size: var(--text-md);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
}
.auth__brand-sub { display: block; font-size: var(--text-xs); color: var(--text-muted); }

.auth__form {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  width: 100%; max-width: 400px;
  margin: 0 auto;
  padding: var(--sp-10) 0;
}
.auth__title {
  font-size: var(--text-2xl);
  letter-spacing: var(--tracking-tighter);
  margin-bottom: var(--sp-2);
}
.auth__subtitle {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-bottom: var(--sp-7);
}
.auth__legal {
  font-size: var(--text-xs);
  color: var(--text-subtle);
  text-align: center;
  margin: 0;
}
.auth__legal a { color: var(--text-muted); }
.auth__legal a:hover { color: var(--brand-text); }

.auth__footer-link {
  margin-top: var(--sp-6);
  font-size: var(--text-sm);
  color: var(--text-muted);
  text-align: center;
}

.auth__divider {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: var(--sp-6) 0;
  font-size: var(--text-xs);
  color: var(--text-subtle);
}
.auth__divider::before, .auth__divider::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

.auth__demo {
  padding: var(--sp-4);
  margin-bottom: var(--sp-6);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  background: var(--info-50);
  border: 1px solid var(--info-100);
  border-radius: var(--r-md);
  color: var(--info-700);
}
:root[data-theme="dark"] .auth__demo { color: #a9c9fd; }
.auth__demo strong { display: block; margin-bottom: var(--sp-2); color: inherit; }
.auth__demo-grid { display: grid; gap: 3px; font-family: var(--font-mono); font-size: var(--text-2xs); }
.auth__demo button {
  border: 0; background: transparent; padding: 0; cursor: pointer;
  color: inherit; font: inherit; text-align: left; text-decoration: underline;
  text-decoration-style: dotted; text-underline-offset: 2px;
}

/* ---------------------------------------------------------------------
   Columna ilustrada (solo escritorio)
   --------------------------------------------------------------------- */
.auth__aside { display: none; }

@media (min-width: 1000px) {
  .auth { grid-template-columns: minmax(0, 480px) minmax(0, 1fr); }
  .auth__panel { padding: var(--sp-8); }
  .auth__aside {
    display: block;
    position: relative;
    overflow: hidden;
    background:
      radial-gradient(1000px 500px at 80% -10%, #6d5fe8 0%, transparent 60%),
      radial-gradient(800px 600px at 10% 110%, #3d35a3 0%, transparent 60%),
      linear-gradient(150deg, #241f5e 0%, #14142b 60%, #101020 100%);
  }
  .auth__aside-inner {
    position: relative;
    height: 100%;
    display: flex; flex-direction: column; justify-content: center;
    padding: var(--sp-12) var(--sp-10);
    color: #fff;
  }
  .auth__glow {
    position: absolute;
    width: 620px; height: 620px;
    right: -180px; top: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle, rgba(245,165,36,.16) 0%, transparent 62%);
    pointer-events: none;
  }
  .auth__quote {
    position: relative;
    font-size: var(--text-2xl);
    font-weight: var(--weight-semi);
    letter-spacing: var(--tracking-tighter);
    line-height: 1.25;
    max-width: 15ch;
    margin-bottom: var(--sp-10);
    color: #fff;
  }

  /* Composicion de tarjetas flotantes */
  .auth__preview { position: relative; height: 320px; max-width: 460px; }
  .preview-card {
    position: absolute;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: var(--r-lg);
    backdrop-filter: blur(14px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .3);
    padding: var(--sp-4);
    animation: float-in 900ms var(--ease-out) backwards;
  }
  .preview-card--main {
    left: 0; top: 0; width: 290px;
    animation-delay: 120ms;
  }
  .preview-card--student {
    right: 0; top: 118px; width: 250px;
    animation-delay: 300ms;
  }
  .preview-card--pay {
    left: 44px; bottom: 0; width: 230px;
    display: flex; flex-direction: column; gap: 3px;
    animation-delay: 460ms;
  }
  @keyframes float-in {
    from { opacity: 0; transform: translateY(22px) scale(.97); }
    to   { opacity: 1; transform: none; }
  }

  .preview-card__head {
    display: flex; align-items: center; gap: var(--sp-2);
    padding-bottom: var(--sp-3);
    margin-bottom: var(--sp-3);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
  }
  .preview-dot { width: 7px; height: 7px; border-radius: 50%; background: #17a673; }
  .preview-card__title { font-size: var(--text-xs); font-weight: var(--weight-semi); color: rgba(255,255,255,.85); }

  .preview-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }
  .preview-kpi__label { display: block; font-size: 10px; color: rgba(255,255,255,.55); }
  .preview-kpi__value {
    display: block; font-size: var(--text-lg); font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-tight); color: #fff;
  }
  .preview-bars { display: flex; align-items: flex-end; gap: 5px; height: 54px; }
  .preview-bars span {
    flex: 1;
    background: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.14));
    border-radius: 3px 3px 0 0;
    animation: bar-grow 800ms var(--ease-out) backwards;
  }
  .preview-bars span:nth-child(1) { animation-delay: 400ms; }
  .preview-bars span:nth-child(2) { animation-delay: 470ms; }
  .preview-bars span:nth-child(3) { animation-delay: 540ms; }
  .preview-bars span:nth-child(4) { animation-delay: 610ms; }
  .preview-bars span:nth-child(5) { animation-delay: 680ms; }
  .preview-bars span:nth-child(6) { animation-delay: 750ms; }
  @keyframes bar-grow { from { height: 0 !important; opacity: 0; } }

  .preview-row { display: flex; align-items: center; gap: var(--sp-3); }
  .preview-row strong { display: block; font-size: var(--text-sm); color: #fff; }
  .preview-row small { display: block; font-size: 10.5px; color: rgba(255,255,255,.55); }
  .preview-avatar {
    display: grid; place-items: center;
    width: 34px; height: 34px; border-radius: 50%;
    background: rgba(255,255,255,.16);
    font-size: var(--text-xs); font-weight: var(--weight-semi); color: #fff;
    flex: 0 0 auto;
  }
  .preview-belt {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    margin-top: var(--sp-3);
    padding: 0.2em 0.6em;
    font-size: 10.5px;
    background: rgba(255,255,255,.1);
    border-radius: var(--r-full);
    color: rgba(255,255,255,.85);
  }
  .preview-belt__swatch { width: 10px; height: 10px; border-radius: 3px; background: #17a673; }

  .preview-pay__label { font-size: 10.5px; color: rgba(255,255,255,.55); }
  .preview-pay__value { font-size: var(--text-lg); font-weight: var(--weight-bold); color: #fff; }
  .preview-pay__state {
    align-self: flex-start;
    margin-top: 3px;
    padding: 0.15em 0.5em;
    font-size: 10px; font-weight: var(--weight-semi);
    background: rgba(23,166,115,.22);
    color: #6ee7b7;
    border-radius: var(--r-xs);
  }

  .auth__points {
    position: relative;
    list-style: none;
    margin: var(--sp-10) 0 0;
    padding: 0;
    display: grid; gap: var(--sp-3);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, .78);
  }
  .auth__points li { display: flex; align-items: center; gap: var(--sp-3); }
  .auth__points .icon { color: #6ee7b7; flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  .preview-card, .preview-bars span { animation: none; opacity: 1; }
}