/* ============================================================================
   login.css — LOGIN-DE-VIDRIO (26-sep). Sólo lo carga login.html.

   Una tarjeta translúcida con desenfoque (glassmorphism) sobre una escena de
   brillos y logos de WeDo flotando. TODOS los colores salen de wedo.css, que
   los copia del brandbook: --wedo-blue, --wedo-sky, --wedo-cyan, --wedo-lilac,
   --wedo-blue-deep, --wedo-ink. Nada inventado.

   Los logos son la máscara con alfa de la marca (static/marca/*-mascara.png)
   con un degradado de fondo: el mismo archivo sirve para cualquier color.
   Se mueven sólo con `transform` —lo único que la GPU anima gratis— y quedan
   quietos con `prefers-reduced-motion`. Dos entran detrás de la tarjeta a
   propósito: el desenfoque se ve sobre ellos, y eso es lo que hace vidrio al
   vidrio. Sin `!important`: todo va por selectores propios.
   ========================================================================== */

/* ── La escena ───────────────────────────────────────────────────────────── */
.login-escena {
  position: relative;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
  overflow: hidden;
  isolation: isolate;
  /* claro: superficie del panel con un lavado azul arriba a la izquierda */
  background:
    radial-gradient(1200px 700px at 12% -10%, color-mix(in srgb, var(--wedo-blue) 22%, transparent), transparent 60%),
    var(--wedo-surface-2);
}
[data-bs-theme="dark"] .login-escena {
  background:
    radial-gradient(1200px 700px at 12% -10%, color-mix(in srgb, var(--wedo-blue) 28%, transparent), transparent 60%),
    var(--wedo-ink);
}
.login-fondo { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

/* ── Brillos: tres manchas de la paleta, muy desenfocadas ────────────────── */
.login-brillo {
  position: absolute; border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
  will-change: transform;
  animation: login-brillar 16s ease-in-out infinite;
}
[data-bs-theme="dark"] .login-brillo { opacity: .7; }
.login-brillo-1 { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; left: -10%; top: -14%;
  background: var(--wedo-blue); }
.login-brillo-2 { width: 38vw; height: 38vw; max-width: 520px; max-height: 520px; right: -8%; bottom: -12%;
  background: var(--wedo-sky); animation-duration: 20s; animation-delay: -9s; animation-name: login-brillar-b; }
.login-brillo-3 { width: 30vw; height: 30vw; max-width: 420px; max-height: 420px; right: 18%; top: 4%;
  background: var(--wedo-lilac); animation-duration: 22s; animation-delay: -17s; opacity: .4; }

/* ── Los logos que flotan ────────────────────────────────────────────────── */
.login-flota {
  position: absolute;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain;     mask-size: contain;
  -webkit-mask-position: center;  mask-position: center;
  will-change: transform;
  /* MOVIMIENTO-QUE-SE-VE (26-sep): la primera versión movía 30px en 22s —un
     píxel por segundo— y el usuario la vio quieta. Ahora cada logo recorre
     entre 90 y 140px en un ciclo de 16 a 30s, con tres puntos de paso para
     que no sea un vaivén, y respira apenas (scale). Sigue siendo lento. */
  animation: login-flotar-a 16s ease-in-out infinite;
}
.login-simbolo { aspect-ratio: 714 / 596;
  -webkit-mask-image: url('/static/marca/symbol-wedo-mascara.png'); mask-image: url('/static/marca/symbol-wedo-mascara.png'); }
.login-palabra { aspect-ratio: 884 / 261;
  -webkit-mask-image: url('/static/marca/logo-wedo-mascara.png');   mask-image: url('/static/marca/logo-wedo-mascara.png'); }

/* Los dos grandes pisan los bordes de la tarjeta, como las hojas del mockup. */
.login-flota-1 { width: clamp(170px, 24vw, 340px); top: 6%; right: 12%;
  background: linear-gradient(135deg, var(--wedo-blue), var(--wedo-sky)); opacity: .9;
  animation-duration: 14s; }
.login-flota-2 { width: clamp(190px, 28vw, 380px); bottom: 8%; left: 9%;
  background: linear-gradient(120deg, var(--wedo-lilac), var(--wedo-blue)); opacity: .85;
  animation-name: login-flotar-b; animation-duration: 17s; animation-delay: -6s; }
/* Los lejanos: más chicos y más tenues, dan profundidad. */
.login-flota-3 { width: clamp(64px, 9vw, 130px); top: 14%; left: 7%;
  background: linear-gradient(135deg, var(--wedo-cyan), var(--wedo-sky)); opacity: .45;
  animation-name: login-flotar-b; animation-duration: 20s; animation-delay: -12s; }
.login-flota-4 { width: clamp(90px, 12vw, 180px); bottom: 12%; right: 7%;
  background: linear-gradient(135deg, var(--wedo-blue-deep), var(--wedo-blue)); opacity: .6;
  animation-duration: 18s; animation-delay: -20s; }
.login-flota-5 { width: clamp(110px, 14vw, 200px); top: 5%; left: 42%;
  background: linear-gradient(90deg, var(--wedo-blue), var(--wedo-lilac)); opacity: .35;
  animation-name: login-flotar-b; animation-duration: 24s; animation-delay: -3s; }
/* En claro, sobre superficie clara, bajan un poco para no pelear con el texto. */
:root:not([data-bs-theme="dark"]) .login-flota-1 { opacity: .7; }
:root:not([data-bs-theme="dark"]) .login-flota-2 { opacity: .6; }

@keyframes login-flotar-a {
  0%   { transform: translate3d(0, 0, 0) rotate(-6deg) scale(1); }
  33%  { transform: translate3d(80px, -90px, 0) rotate(4deg) scale(1.06); }
  66%  { transform: translate3d(-60px, -140px, 0) rotate(11deg) scale(.96); }
  100% { transform: translate3d(0, 0, 0) rotate(-6deg) scale(1); }
}
@keyframes login-flotar-b {
  0%   { transform: translate3d(0, 0, 0) rotate(5deg) scale(1); }
  33%  { transform: translate3d(-100px, 60px, 0) rotate(-5deg) scale(1.05); }
  66%  { transform: translate3d(70px, 130px, 0) rotate(-12deg) scale(.95); }
  100% { transform: translate3d(0, 0, 0) rotate(5deg) scale(1); }
}
@keyframes login-brillar {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(160px, -120px, 0) scale(1.28); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes login-brillar-b {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-150px, 110px, 0) scale(1.22); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}
/* «Reducir movimiento» del sistema: REDUCIDO, no apagado (decisión, 26-sep).
   Brave y Chrome lo activan cuando GNOME tiene las animaciones del escritorio
   apagadas —el caso de la máquina del usuario— y con `animation: none` el
   fondo se veía quieto y parecía roto. Esto es decoración lenta, sin paralaje
   ni destellos: a la mitad de velocidad, sin giro ni escala y con la mitad de
   recorrido queda dentro de lo que la preferencia pide (el usuario la vio
   lenta el 26-sep y se subió: 100px en 28s, siempre más lenta que la normal). Quien lo quiera del
   todo quieto cambia esta regla por `animation: none`. */
@media (prefers-reduced-motion: reduce) {
  .login-flota, .login-brillo { animation-name: login-deriva; animation-duration: 28s; }
}
@keyframes login-deriva {
  0%   { transform: translate3d(0, 0, 0); }
  33%  { transform: translate3d(70px, -60px, 0); }
  66%  { transform: translate3d(-50px, -100px, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* SIN-SCROLL (26-sep, pedido del usuario): la escena mide exactamente el
   viewport y la página no se desplaza. `scrollbar-gutter: auto` saca el
   canal que Tabler reserva en todo el sitio (`html{scrollbar-gutter:stable}`)
   y que acá se veía como una franja vacía. El bloqueo del scroll va sólo con
   alto suficiente: en un teléfono apaisado la tarjeta puede no entrar y hay
   que poder llegar al botón. */
html:has(.login-escena) { scrollbar-gutter: auto; }
@media (min-height: 600px) {
  html:has(.login-escena), body:has(.login-escena) { overflow: hidden; height: 100%; }
  .login-escena { height: 100dvh; }
}

/* ── El vidrio ───────────────────────────────────────────────────────────── */
.login-vidrio {
  position: relative; z-index: 1;
  width: min(440px, 100%);
  padding: 2.25rem 2rem 1.75rem;
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--wedo-white) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--wedo-white) 70%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
          backdrop-filter: blur(18px) saturate(1.4);
  box-shadow:
    var(--sh-3),
    inset 0 1px 0 color-mix(in srgb, var(--wedo-white) 80%, transparent);
}
[data-bs-theme="dark"] .login-vidrio {
  background: color-mix(in srgb, var(--wedo-white) 9%, transparent);
  border-color: color-mix(in srgb, var(--wedo-white) 18%, transparent);
  box-shadow:
    0 24px 60px -20px rgba(0, 0, 0, .6),
    inset 0 1px 0 color-mix(in srgb, var(--wedo-white) 22%, transparent);
}
/* El logo de la tarjeta: la palabra, azul en claro y blanca en oscuro. */
.login-marca {
  width: 132px; aspect-ratio: 884 / 261; margin-bottom: 1.25rem;
  -webkit-mask: url('/static/marca/logo-wedo-mascara.png') center / contain no-repeat;
          mask: url('/static/marca/logo-wedo-mascara.png') center / contain no-repeat;
  background: var(--wedo-blue);
}
[data-bs-theme="dark"] .login-marca { background: linear-gradient(90deg, var(--wedo-white), color-mix(in srgb, var(--wedo-white) 70%, var(--wedo-sky))); }
.login-titulo { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); margin: 0 0 .25rem; }
.login-subtitulo { color: var(--tblr-secondary); margin: 0 0 1.5rem; }

/* Campos: translúcidos, con el borde y el foco de la marca. */
.login-vidrio .form-control {
  background: color-mix(in srgb, var(--wedo-white) 55%, transparent);
  border-color: color-mix(in srgb, var(--wedo-ink) 14%, transparent);
}
[data-bs-theme="dark"] .login-vidrio .form-control {
  background: color-mix(in srgb, var(--wedo-white) 7%, transparent);
  border-color: color-mix(in srgb, var(--wedo-white) 18%, transparent);
  color: var(--tblr-body-color);
}
.login-vidrio .form-control:focus {
  border-color: var(--wedo-blue);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wedo-blue) 30%, transparent);
}
/* El ojo que agrega panel-interaccion.js, del mismo material que el campo. */
[data-bs-theme="dark"] .login-vidrio .input-group .btn {
  background: color-mix(in srgb, var(--wedo-white) 7%, transparent);
  border-color: color-mix(in srgb, var(--wedo-white) 18%, transparent);
  color: var(--tblr-body-color);
}
.login-vidrio .form-hint { color: var(--tblr-secondary); }

.login-boton {
  background: linear-gradient(135deg, var(--wedo-blue), color-mix(in srgb, var(--wedo-blue) 55%, var(--wedo-sky)));
  border: 0;
  padding-block: .7rem;
  box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--wedo-blue) 80%, transparent);
  transition: transform .15s ease, box-shadow .15s ease;
}
.login-boton:hover { transform: translateY(-1px); box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--wedo-blue) 90%, transparent); }
.login-boton:focus-visible { outline: 3px solid color-mix(in srgb, var(--wedo-sky) 70%, transparent); outline-offset: 2px; }
.login-pie { margin: 1.25rem 0 0; text-align: center; font-size: var(--fs-caption); color: var(--tblr-secondary); }

/* En celular la tarjeta ocupa el ancho y los logos grandes se corren a los bordes. */
@media (max-width: 575.98px) {
  .login-vidrio { padding: 1.75rem 1.25rem 1.5rem; }
  .login-flota-1 { right: -12%; top: 2%; }
  .login-flota-2 { left: -14%; bottom: 3%; }
}