/* Login (/login): card de vidrio sobre el fondo de cintas (static/js/flu-brand-bg.js).
   Composición medida sobre el diseño de referencia a 1672×941: card 596×450
   centrada 3.5px sobre el centro; las pills aparecen alrededor de la card
   solo cuando hay espacio (≥1300×760). */

body.page-login {
  --login-card-w: 596px;
  --login-card-h: 450px;
  --login-card-lift: 3.5px;
  --login-card-r: 30px;
  /* Reflejo lavanda del canto del vidrio: brillo, no color de marca. */
  --login-edge-rgb: 214, 196, 255;
  --login-ink: var(--text-dark);
  --login-ink-2: rgba(var(--text-dark-rgb), 0.74);
  --login-ink-3: rgba(var(--text-dark-rgb), 0.6);
  --login-accent: var(--brand-color-dark);
  --login-accent-gradient: var(--primary-gradient-dark);
  --login-card-fill: color-mix(in srgb, var(--card-bg-dark) 92%, transparent);
  --login-card-edge: rgba(var(--brand-color-dark-rgb), 0.34);
  --login-card-shadow: 0 40px 90px rgba(0, 0, 0, 0.45);
  --login-glow-rgb: 140, 70, 255;
  --login-pill-fill: rgba(var(--text-dark-rgb), 0.04);
  --login-pill-edge: rgba(var(--text-dark-rgb), 0.12);
  --login-pill-ink: color-mix(in srgb, var(--brand-color-dark) 30%, var(--text-dark));
  --login-pill-icon: var(--brand-color-dark);
  --login-tagline: rgba(var(--text-dark-rgb), 0.45);
  --login-google-shadow: 0 0 26px rgba(var(--brand-color-dark-rgb), 0.16);
}

body.page-login.light-mode {
  --login-ink: var(--text-light);
  --login-ink-2: rgba(var(--text-light-rgb), 0.72);
  --login-ink-3: rgba(var(--text-light-rgb), 0.62);
  --login-accent: #c2185b;
  --login-accent-gradient: var(--primary-gradient-light);
  --login-card-fill: color-mix(in srgb, var(--card-bg-light) 70%, transparent);
  --login-card-edge: rgba(var(--brand-color-light-rgb), 0.22);
  --login-card-shadow: 0 40px 90px rgba(var(--text-light-rgb), 0.12);
  --login-glow-rgb: 247, 119, 55;
  --login-pill-fill: rgba(255, 255, 255, 0.6);
  --login-pill-edge: rgba(var(--brand-color-light-rgb), 0.18);
  --login-pill-ink: var(--text-light);
  --login-pill-icon: var(--brand-color-light);
  --login-tagline: rgba(var(--text-light-rgb), 0.68);
  --login-google-shadow: 0 10px 30px rgba(var(--text-light-rgb), 0.12);
}

/* Sin avisos no hay región que ocupe espacio; con avisos, se muestran y el
   scroll vuelve. El contenedor no necesita el mt-4 global (navbar fijo). */
.page-login #fluFlashRegion:not(:has(.alert)) {
  display: none;
}

.page-login #fluAppMain > .container.mt-4 {
  margin-top: 0 !important;
}

/* El navbar de invitado queda solo con logo y tema: el login es la puerta. */
.page-login #fluAppNav .navbar-mid-links,
.page-login #fluAppNav #guestLoginCta,
.page-login #fluAppNav .flu-mobile-menu-button {
  display: none !important;
}

/* ---------- Fondo ---------- */

.page-login .login-bg {
  position: fixed;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s ease;
}

.page-login .login-bg[data-fl-state='ready'] {
  opacity: 1;
}

/* Sin WebGL2: brillos estáticos de marca; la card usa su relleno CSS. */
.page-login .login-bg:is([data-fl-state='unsupported'], [data-fl-state='error']) {
  opacity: 1;
  background:
    radial-gradient(110px 460px at 27% 50%, rgba(var(--brand-color-dark-rgb), 0.32), transparent 70%),
    radial-gradient(110px 460px at 76% 42%, rgba(var(--brand-color-dark-rgb), 0.28), transparent 70%);
}

.page-login.light-mode .login-bg:is([data-fl-state='unsupported'], [data-fl-state='error']) {
  background:
    radial-gradient(110px 460px at 27% 50%, rgba(var(--brand-color-light-rgb), 0.16), transparent 70%),
    radial-gradient(110px 460px at 76% 42%, rgba(247, 119, 55, 0.14), transparent 70%);
}

/* ---------- Card ---------- */

.page-login .login-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* La caja del container cubre casi todo el viewport y quedaría por encima de
     las piedritas (z-index 2 > 1), robándoles el puntero: el contenedor deja
     pasar y cada superficie real (la card) recupera sus clicks. */
  pointer-events: none;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: 2.5rem 1rem;
}

.page-login .login-box {
  position: relative;
  width: min(var(--login-card-w), 100%);
  min-height: var(--login-card-h);
  margin-bottom: calc(var(--login-card-lift) * 2);
  pointer-events: auto;
  padding: 101.5px 57px 40px;
  border: 1px solid var(--login-card-edge);
  border-radius: var(--login-card-r);
  background:
    linear-gradient(180deg, rgba(var(--brand-color-dark-rgb), 0.05), transparent 45%),
    var(--login-card-fill);
  box-shadow: var(--login-card-shadow), inset 0 0 24px rgba(var(--login-glow-rgb), 0.05);
  color: var(--login-ink);
  text-align: center;
  transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
}

/* Con el fondo WebGL listo, el vidrio (tinte + desenfoque) lo pinta el shader;
   queda solo la luz que entra por el canto inferior. */
.page-login .login-box.fl-glass-live {
  background:
    radial-gradient(260px 60px at 92% 100%, rgba(var(--login-glow-rgb), 0.2), rgba(var(--login-glow-rgb), 0) 70%),
    linear-gradient(to top, rgba(var(--login-glow-rgb), 0.08), rgba(var(--login-glow-rgb), 0) 36px);
}

.page-login.light-mode .login-box.fl-glass-live {
  background:
    radial-gradient(260px 60px at 92% 100%, rgba(var(--login-glow-rgb), 0.1), rgba(var(--login-glow-rgb), 0) 70%);
}

/* Canto del vidrio: reflejo fijo calibrado sobre la referencia (arriba a la
   izquierda, abajo a la derecha). ::before es la línea de 1px; ::after, un
   anillo de 3px más tenue que la suaviza. */
.page-login .login-box {
  --login-edge-spec: conic-gradient(from 0deg,
    rgba(var(--login-edge-rgb), 0) 0deg,
    rgba(var(--login-edge-rgb), 0) 30deg,
    rgba(var(--login-edge-rgb), 0.061) 40deg,
    rgba(var(--login-edge-rgb), 0.147) 50deg,
    rgba(var(--login-edge-rgb), 0.132) 60deg,
    rgba(var(--login-edge-rgb), 0.182) 70deg,
    rgba(var(--login-edge-rgb), 0.311) 80deg,
    rgba(var(--login-edge-rgb), 0.151) 90deg,
    rgba(var(--login-edge-rgb), 0.052) 100deg,
    rgba(var(--login-edge-rgb), 0) 110deg,
    rgba(var(--login-edge-rgb), 0.109) 120deg,
    rgba(var(--login-edge-rgb), 0.576) 130deg,
    rgba(var(--login-edge-rgb), 0.575) 140deg,
    rgba(var(--login-edge-rgb), 0.315) 150deg,
    rgba(var(--login-edge-rgb), 0.235) 160deg,
    rgba(var(--login-edge-rgb), 0.15) 170deg,
    rgba(var(--login-edge-rgb), 0.053) 180deg,
    rgba(var(--login-edge-rgb), 0.057) 190deg,
    rgba(var(--login-edge-rgb), 0.077) 200deg,
    rgba(var(--login-edge-rgb), 0.111) 210deg,
    rgba(var(--login-edge-rgb), 0.126) 220deg,
    rgba(var(--login-edge-rgb), 0.192) 230deg,
    rgba(var(--login-edge-rgb), 0.173) 240deg,
    rgba(var(--login-edge-rgb), 0.004) 250deg,
    rgba(var(--login-edge-rgb), 0) 260deg,
    rgba(var(--login-edge-rgb), 0.131) 270deg,
    rgba(var(--login-edge-rgb), 0.617) 280deg,
    rgba(var(--login-edge-rgb), 0.56) 290deg,
    rgba(var(--login-edge-rgb), 0.296) 300deg,
    rgba(var(--login-edge-rgb), 0.359) 310deg,
    rgba(var(--login-edge-rgb), 0.636) 320deg,
    rgba(var(--login-edge-rgb), 0.411) 330deg,
    rgba(var(--login-edge-rgb), 0.174) 340deg,
    rgba(var(--login-edge-rgb), 0.028) 350deg,
    rgba(var(--login-edge-rgb), 0) 360deg);
}

.page-login .login-box::before,
.page-login .login-box::after {
  content: '';
  position: absolute;
  border-radius: inherit;
  background: var(--login-edge-spec);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.page-login .login-box::before {
  inset: -1px;
  padding: 1px;
}

.page-login .login-box::after {
  inset: -2px;
  padding: 3px;
  border-radius: calc(var(--login-card-r) + 1px);
  background: var(--login-edge-spec), linear-gradient(rgba(var(--brand-color-dark-rgb), 0.14) 0 0);
  opacity: 0.42;
}

.page-login.light-mode .login-box::before,
.page-login.light-mode .login-box::after {
  opacity: 0.35;
}

.page-login .back-link {
  position: absolute;
  left: 31.5px;
  top: 40.5px;
  display: inline-flex;
  align-items: center;
  gap: 8.5px;
  color: var(--login-ink);
  opacity: 0.84;
  font-size: 21px;
  font-weight: 500;
  line-height: 24px;
  text-decoration: none;
  border-radius: 8px;
  transition: opacity 0.2s ease;
}

.page-login .back-link:hover {
  color: var(--login-ink);
  opacity: 1;
}

.page-login .back-link .hgi-svg {
  width: 24px;
  height: 24px;
  vertical-align: 0;
  transition: transform 0.2s ease;
}

.page-login .back-link:hover .hgi-svg {
  transform: translateX(-2px);
}

.page-login .login-title {
  margin: 0;
  color: var(--login-ink);
  font-size: 46px;
  font-weight: 800;
  line-height: 52px;
  letter-spacing: -0.025em;
  text-shadow: 0 0 22px rgba(var(--text-dark-rgb), 0.1);
}

.page-login.light-mode .login-title {
  text-shadow: none;
}

.page-login .login-title-brand {
  background: var(--login-accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.page-login .login-subtitle {
  margin: 22px 0 0;
  color: var(--login-ink-2);
  font-size: 20.6px;
  font-weight: 500;
  line-height: 28px;
}

.page-login .google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17.5px;
  width: 100%;
  height: 67px;
  margin-top: 45.5px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: #fff;
  color: var(--text-light);
  font-size: 19.3px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: var(--login-google-shadow);
  transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.page-login .google-btn:hover {
  color: var(--text-light);
  transform: translateY(-1px);
  box-shadow: 0 0 34px rgba(var(--brand-color-dark-rgb), 0.28);
}

.page-login.light-mode .google-btn:hover {
  box-shadow: 0 14px 34px rgba(var(--text-light-rgb), 0.16);
}

.page-login .google-btn:active {
  transform: translateY(0);
}

.page-login .google-btn span {
  padding-top: 1.5px;
}

.page-login .google-logo {
  width: 35px;
  height: 35px;
  flex: none;
}

.page-login .google-btn.oauth-provider-unavailable,
.page-login .google-btn.oauth-provider-unavailable:hover,
.page-login .google-btn:disabled {
  border: 1px solid var(--login-pill-edge);
  background: var(--login-pill-fill);
  box-shadow: none;
  color: var(--login-ink-3);
  cursor: not-allowed;
  transform: none;
}

.page-login .terms-text {
  margin: 34.5px 0 0;
  color: var(--login-ink-3);
  font-size: 15.6px;
  font-weight: 500;
  line-height: 22.5px;
}

.page-login .terms-text a {
  color: var(--login-accent);
  text-decoration: none;
}

.page-login .terms-text a:hover {
  text-decoration: underline;
}

.page-login .terms-break {
  display: block;
}

/* ---------- Decoración (solo con espacio) ---------- */

.page-login .login-decor {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.page-login .login-pill {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 51px;
  padding: 0 12px 0 16.5px;
  border: 1px solid var(--login-pill-edge);
  border-radius: 999px;
  background: var(--login-pill-fill);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--login-pill-ink);
  font-size: 16.6px;
  font-weight: 500;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  /* Piedritas agarrables (login-pebbles.js): el contenedor es pointer-events:
     none, así que cada píldora recupera el puntero y se arrastra sin scrollear
     ni seleccionar texto. */
  pointer-events: auto;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}

.page-login .login-pill.is-dragging {
  cursor: grabbing;
}

.page-login .login-pill svg {
  width: 26px;
  height: 26px;
  flex: none;
  fill: var(--login-pill-icon);
}

.page-login .login-pill svg.is-stroke {
  fill: none;
  stroke: var(--login-pill-icon);
  stroke-width: 1.9;
  stroke-linecap: round;
}

.page-login .login-pill--posts {
  left: calc((50% - 298px) * 0.62732);
  top: calc((50% - 228.5px) * 0.76653);
  width: 215px;
}

.page-login .login-pill--engagement {
  left: calc(100% - (50% - 298px) * 0.81227);
  top: calc((50% - 228.5px) * 0.66942);
  width: 198px;
  height: 56px;
  gap: 11.5px;
  padding-left: 19.5px;
}

.page-login .login-pill--time {
  left: calc(100% - (50% - 298px) * 0.30112);
  top: calc(50% - 228.5px + 235.5px);
  width: 198px;
  height: 53px;
  gap: 12.5px;
  padding-left: 18.5px;
}

.page-login .login-pill--consistency {
  left: calc((50% - 298px) * 0.38104);
  top: calc(50% + 221.5px + (50% - 221.5px) * 0.0281);
  width: 228px;
  height: 62px;
  gap: 14.6px;
  padding-left: 24.6px;
  font-size: 17.3px;
}

.page-login .login-tagline {
  position: absolute;
  left: 50%;
  top: calc(50% + 221.5px + (50% - 221.5px) * 0.6426 + 1px);
  margin: 0;
  color: var(--login-tagline);
  font-size: 10px;
  font-weight: 700;
  line-height: 12px;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.page-login .login-tagline span {
  margin: 0 1.25em 0 0.85em;
}

@media (max-width: 1299.98px), (max-height: 759.98px) {
  .page-login .login-decor {
    display: none;
  }

  .page-login .login-tagline {
    position: static;
    margin-top: 28px;
    transform: none;
  }
}

@media (max-width: 767.98px) {
  /* 16px de margen lateral en total (el .container ya aporta 12px). */
  .page-login .login-container {
    padding: 96px 4px 56px;
  }

  .page-login .login-box {
    min-height: 0;
    margin-bottom: 0;
    padding: 76px 22px 30px;
    border-radius: 26px;
  }

  .page-login .back-link {
    left: 16px;
    top: 20px;
    font-size: 17px;
  }

  .page-login .login-title {
    font-size: 34px;
    line-height: 42px;
  }

  .page-login .login-subtitle {
    margin-top: 12px;
    font-size: 17px;
    line-height: 24px;
  }

  .page-login .google-btn {
    height: 58px;
    margin-top: 32px;
    gap: 14px;
    font-size: 17px;
  }

  .page-login .google-logo {
    width: 28px;
    height: 28px;
  }

  .page-login .terms-text {
    margin-top: 24px;
    font-size: 14px;
  }

  .page-login .terms-break {
    display: inline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-login .login-bg,
  .page-login .login-box,
  .page-login .back-link .hgi-svg,
  .page-login .google-btn {
    transition: none;
  }
}