/* Login de Branding: ciudad 3D animada detras de una tarjeta de vidrio. */
:root {
  --login-orange: #ff4614;
  --login-orange-soft: #ff7a4f;
  --login-ink: #0b1230;
  --login-text: #f4f6fb;
  --login-muted: #aab4cf;
  --login-glass: rgba(11, 17, 44, 0.84);
  --login-glass-border: rgba(255, 255, 255, 0.14);
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body.login-page {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--login-ink);
  color: var(--login-text);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Cielo de la hora azul: tambien es el respaldo si no hay WebGL. */
.login-sky {
  position: fixed;
  inset: 0;
  background:
    radial-gradient(120% 70% at 72% 108%, rgba(255, 110, 64, 0.55) 0%, rgba(255, 110, 64, 0) 55%),
    radial-gradient(80% 60% at 90% 0%, rgba(99, 91, 255, 0.35) 0%, rgba(99, 91, 255, 0) 60%),
    linear-gradient(180deg, #070c22 0%, #111c45 45%, #2b2f66 75%, #6b3f6b 100%);
}

/* El cielo sigue la hora real de Santiago (lo define login-city.js en data-sky). */
body[data-sky="dia"] .login-sky {
  background:
    radial-gradient(60% 40% at 18% 8%, rgba(255, 250, 230, 0.55) 0%, rgba(255, 250, 230, 0) 60%),
    linear-gradient(180deg, #2f73c8 0%, #5d9ae0 38%, #a9cdee 70%, #d8dfe4 100%);
}

body[data-sky="noche"] .login-sky {
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 27% 8%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 41% 26%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(1px 1px at 58% 12%, rgba(255, 255, 255, 0.9) 50%, transparent 51%),
    radial-gradient(2px 2px at 66% 22%, rgba(255, 248, 225, 0.9) 50%, transparent 51%),
    radial-gradient(1px 1px at 74% 6%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 83% 17%, rgba(255, 255, 255, 0.75) 50%, transparent 51%),
    radial-gradient(1px 1px at 91% 30%, rgba(255, 255, 255, 0.8) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 34%, rgba(255, 255, 255, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 52% 4%, rgba(255, 255, 255, 0.7) 50%, transparent 51%),
    radial-gradient(14px 14px at 86% 9%, rgba(244, 241, 226, 0.95) 45%, rgba(244, 241, 226, 0) 70%),
    radial-gradient(90px 90px at 86% 9%, rgba(190, 205, 255, 0.18) 0%, rgba(190, 205, 255, 0) 70%),
    linear-gradient(180deg, #01030c 0%, #060b22 45%, #0d1433 75%, #141b45 100%);
}

.login-city {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.login-city.is-ready { opacity: 1; }

.login-vignette {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(7, 12, 34, 0.78) 0%, rgba(7, 12, 34, 0.25) 38%, rgba(7, 12, 34, 0) 60%),
    linear-gradient(0deg, rgba(7, 12, 34, 0.85) 0%, rgba(7, 12, 34, 0) 26%);
}

/* Clima real de Santiago (data-weather): velo gris con cielo cubierto y destello de relampago. */
.login-sky::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0;
  background: linear-gradient(180deg, rgba(74, 80, 98, 0.85) 0%, rgba(110, 116, 132, 0.7) 60%, rgba(140, 145, 158, 0.6) 100%);
  transition: opacity 0.6s ease;
}

body[data-weather="nublado"] .login-sky::after { opacity: 0.55; }
body[data-weather="neblina"] .login-sky::after { opacity: 0.75; }
body[data-weather="llovizna"] .login-sky::after,
body[data-weather="nieve"] .login-sky::after { opacity: 0.7; }
body[data-weather="lluvia"] .login-sky::after,
body[data-weather="tormenta"] .login-sky::after { opacity: 0.85; }
body[data-sky="noche"] .login-sky::after { filter: brightness(0.25); }
body[data-sky="atardecer"] .login-sky::after { filter: brightness(0.55); }

body.is-lightning .login-sky { filter: brightness(2.2); }

body[data-sky="dia"] .login-vignette {
  background:
    linear-gradient(90deg, rgba(7, 12, 34, 0.6) 0%, rgba(7, 12, 34, 0.18) 38%, rgba(7, 12, 34, 0) 60%),
    linear-gradient(0deg, rgba(7, 12, 34, 0.7) 0%, rgba(7, 12, 34, 0) 24%);
}

/* Letreros con logos anclados a los edificios. */
.login-pins {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.city-pin {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  transform: translate3d(-9999px, -9999px, 0);
  will-change: transform, opacity;
  transition: opacity 0.5s ease;
}

.city-pin-card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 108px;
  height: 52px;
  padding: 8px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 10px 30px rgba(4, 8, 30, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.6) inset;
  transition: transform 0.5s cubic-bezier(.2, .9, .3, 1.3), opacity 0.4s ease;
}

.city-pin-card img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.city-pin.is-swapping .city-pin-card {
  transform: scale(0.6) rotateX(70deg);
  opacity: 0;
}

.city-pin-stem {
  width: 2px;
  height: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 70, 20, 0.9));
}

.city-pin-dot {
  width: 10px;
  height: 10px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--login-orange);
  box-shadow: 0 0 0 4px rgba(255, 70, 20, 0.25), 0 0 16px rgba(255, 70, 20, 0.9);
  animation: pinPulse 2.4s ease-out infinite;
}

@keyframes pinPulse {
  0% { box-shadow: 0 0 0 0 rgba(255, 70, 20, 0.55), 0 0 16px rgba(255, 70, 20, 0.9); }
  70% { box-shadow: 0 0 0 12px rgba(255, 70, 20, 0), 0 0 16px rgba(255, 70, 20, 0.9); }
  100% { box-shadow: 0 0 0 0 rgba(255, 70, 20, 0), 0 0 16px rgba(255, 70, 20, 0.9); }
}

/* Tarjeta de ingreso. */
.login-shell {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 48px clamp(16px, 6vw, 96px) 150px;
}

.login-card {
  width: 100%;
  max-width: 440px;
  padding: 40px 36px 32px;
  border-radius: 28px;
  background: var(--login-glass);
  border: 1px solid var(--login-glass-border);
  box-shadow: 0 30px 80px rgba(2, 6, 24, 0.55), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  animation: cardIn 0.9s cubic-bezier(.2, .8, .2, 1) both 0.2s;
}

@keyframes cardIn {
  from { opacity: 0; transform: translateY(24px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

.login-logo {
  display: block;
  width: 132px;
  height: auto;
  margin-bottom: 36px;
}

.login-title {
  margin: 0 0 12px;
  font-size: clamp(40px, 5vw, 54px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  background: linear-gradient(100deg, #ffffff 30%, #ffc2ad 70%, var(--login-orange-soft));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.login-lead {
  margin: 0 0 28px;
  color: var(--login-muted);
  font-size: 15px;
  line-height: 1.6;
}

.login-alert {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 16px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255, 70, 20, 0.12);
  border: 1px solid rgba(255, 70, 20, 0.4);
  color: #ffd3c5;
  font-size: 14px;
  line-height: 1.45;
}

.login-alert svg { flex: none; margin-top: 1px; color: var(--login-orange-soft); }

.login-google {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 20px;
  border-radius: 16px;
  background: #ffffff;
  color: #1a1f36;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(255, 70, 20, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.login-google::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 70, 20, 0.14) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: googleShine 4.5s ease-in-out infinite 1.5s;
}

@keyframes googleShine {
  0%, 60% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.login-google:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 40px rgba(255, 70, 20, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
}

.login-google:focus-visible {
  outline: 3px solid var(--login-orange-soft);
  outline-offset: 3px;
}

.login-google-arrow {
  color: var(--login-orange);
  transition: transform 0.2s ease;
}

.login-google:hover .login-google-arrow { transform: translateX(4px); }

.login-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 14px 0 0;
  color: var(--login-muted);
  font-size: 13px;
}

.login-hint strong { color: var(--login-text); font-weight: 600; }

.login-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.login-stats div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.login-stats strong {
  font-size: 26px;
  font-weight: 800;
  color: #ffffff;
}

.login-stats span {
  color: var(--login-muted);
  font-size: 12px;
}

/* Cinta de clientes. */
.login-marquee {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: 0 0 18px;
  pointer-events: none;
}

.login-marquee-title {
  margin: 0 0 10px clamp(16px, 6vw, 96px);
  color: var(--login-muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.login-marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 60s linear infinite;
  pointer-events: auto;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.login-marquee:hover .login-marquee-track { animation-play-state: paused; }

.login-marquee-list {
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 0 14px 0 0;
  list-style: none;
}

.login-marquee-list li {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 128px;
  height: 56px;
  padding: 10px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 8px 24px rgba(2, 6, 24, 0.35);
  transition: transform 0.25s ease;
}

.login-marquee-list li:hover { transform: translateY(-4px); }

.login-marquee-list img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (max-width: 991px) {
  .login-vignette {
    background: linear-gradient(0deg, rgba(7, 12, 34, 0.88) 0%, rgba(7, 12, 34, 0.35) 45%, rgba(7, 12, 34, 0.15) 100%);
  }

  body[data-sky="dia"] .login-vignette {
    background: linear-gradient(0deg, rgba(7, 12, 34, 0.82) 0%, rgba(7, 12, 34, 0.3) 45%, rgba(7, 12, 34, 0.08) 100%);
  }

  .login-shell {
    justify-content: center;
    align-items: flex-end;
    padding: 32px 16px 128px;
  }

  .login-card { padding: 32px 24px 26px; }
  .login-logo { margin-bottom: 24px; }
  .login-marquee-list li { width: 104px; height: 46px; }
  .city-pin-card { width: 84px; height: 42px; border-radius: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .login-card,
  .login-google::after,
  .city-pin-dot { animation: none; }
  .login-marquee-track { animation-duration: 240s; }
}