/* & Tokens del tema (M3): índigo con acento rosa. Claro por defecto, oscuro por preferencia del sistema. */
:root {
  --primary: #4b4fc9;
  --on-primary: #ffffff;
  --primary-container: #e0e0ff;
  --on-primary-container: #0e0f6b;
  --tertiary-container: #ffd9e2;
  --on-tertiary-container: #3e0021;
  --surface: #fbf8ff;
  --surface-container-low: rgb(245 242 252 / 0.82);
  --surface-container-high: #eae7f1;
  --on-surface: #1b1b21;
  --on-surface-variant: #46464f;
  --outline: #777680;
  --outline-variant: #c7c5d0;
  --error: #ba1a1a;
  --symbol-grade: 0;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --emphasized: cubic-bezier(0.2, 0, 0, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #bfc2ff;
    --on-primary: #1c2094;
    --primary-container: #3337af;
    --on-primary-container: #e0e0ff;
    --tertiary-container: #8f2a52;
    --on-tertiary-container: #ffd9e2;
    --surface: #121318;
    --surface-container-low: rgb(27 27 33 / 0.78);
    --surface-container-high: #292a2f;
    --on-surface: #e4e1e9;
    --on-surface-variant: #c7c5d0;
    --outline: #918f9a;
    --outline-variant: #46464f;
    --error: #ffb4ab;
    --symbol-grade: -25;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--surface);
}

body {
  font-family: 'Roboto Flex', system-ui, sans-serif;
  color: var(--on-surface);
  -webkit-font-smoothing: antialiased;
}

/* & La página: el fondo son dos manchas de color que derivan lento detrás de la tarjeta. */
auth-page {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 100dvh;
  padding: 24px 16px;
  overflow: hidden;
  isolation: isolate;
}

auth-page::before,
auth-page::after {
  content: '';
  position: absolute;
  z-index: -1;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.55;
}

auth-page::before {
  top: -25vmax;
  left: -15vmax;
  background: var(--primary-container);
}

auth-page::after {
  right: -20vmax;
  bottom: -30vmax;
  background: var(--tertiary-container);
}

@media (prefers-reduced-motion: no-preference) {
  auth-page::before {
    animation: drift 22s ease-in-out infinite alternate;
  }

  auth-page::after {
    animation: drift 28s ease-in-out infinite alternate-reverse;
  }
}

@keyframes drift {
  to {
    transform: translate(8vmax, 6vmax) scale(1.08);
  }
}

page-footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--on-surface-variant);
}