/* ==========================================================================
   Ecosistema Gestiona — Pantalla de acceso
   --------------------------------------------------------------------------
   La MISMA para los cuatro programas y para todas sus áreas: panel del gestor,
   portal del socio, del club, de la empresa y app del ciudadano. Vive en
   shared/ y no en panel/ porque que las puertas de entrada de la familia se
   vean iguales es lo que hace que parezcan el mismo producto; teniéndola en un
   solo sitio, además, no pueden volver a separarse.

   Lo único que cambia entre programas es el color: todo lo cromático sale de
   `--accent`, que cada uno define en su tokens.css. Nada de valores fijos aquí
   dentro —era lo que obligaba a mantener cuatro copias que se iban separando.

   Composición: columna centrada de 440 px, la marca suelta arriba —símbolo,
   nombre y descriptor— y debajo la tarjeta con el formulario.
   ========================================================================== */

.login-shell {
  min-height: 100vh; padding: 20px;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  background: var(--bg);
}

/* Halo detrás de la tarjeta: da profundidad sin dibujar nada. Al 10 %: más
   arriba, el resplandor se cuela a través de la tarjeta translúcida y le deja
   una mancha de color en el centro. */
.glow-ring {
  position: fixed; width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle,
              color-mix(in srgb, var(--accent) 10%, transparent) 0%,
              transparent 70%);
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  pointer-events: none; z-index: 0;
}

.login-wrap {
  width: 100%; max-width: 440px;
  position: relative; z-index: 1;
  animation: gLoginFadeUp .5s ease both;
}
@keyframes gLoginFadeUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .login-wrap { animation: none; }
}

.login-logo {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 40px; text-align: center;
}
.login-logo-icon {
  width: 72px; height: 72px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 8px 24px color-mix(in srgb, var(--accent) 45%, transparent));
}
.login-logo-icon img,
.login-logo-icon svg { width: 100%; height: 100%; object-fit: contain; }
.login-logo h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; margin: 0; }
.login-logo h1 span { color: var(--accent); }
.login-logo p { color: var(--text-soft); font-size: .9375rem; margin: 4px 0 0; }

.login-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 36px; box-shadow: var(--shadow-lg);
}
.login-card h2 {
  font-size: 1.25rem; font-weight: 700; margin: 0 0 24px; text-align: center;
}
.login-card h2 + .login-ente { margin: -18px 0 24px; }
.login-ente {
  text-align: center; font-size: .8rem; color: var(--text-muted);
  /* Reserva el hueco para que la tarjeta no dé un salto cuando llega el
     nombre del club o del ente. */
  min-height: 1.2em;
}

/* Los campos llevan prefijo distinto en cada programa (gp-, gc-, gcl-), así que
   aquí se apunta al elemento, no a la clase: una sola regla vale para todos. */
.login-card .gp-field,
.login-card .gc-field,
.login-card .gcl-field { margin-bottom: 20px; }
.login-card label:not(.legal-accept) { font-size: .875rem; }
.login-card input[type="text"],
.login-card input[type="email"],
.login-card input[type="password"] { font-size: 1rem; padding: 12px 16px; width: 100%; }

.login-btn { width: 100%; padding: 14px; font-size: 1rem; font-weight: 600; margin-top: 8px; }

/* El error del acceso va DENTRO de la tarjeta, no en un aviso flotante: en un
   formulario el mensaje tiene que quedarse a la vista mientras se corrige. */
.login-error {
  display: none;
  background: var(--danger-soft); border: 1px solid rgba(239, 68, 68, .25);
  border-radius: var(--r-sm); padding: 10px 14px;
  color: #fca5a5; font-size: .875rem; margin-bottom: 16px;
}
html[data-theme="light"] .login-error { color: #b91c1c; }

.login-notice {
  display: none;
  background: var(--warn-soft);
  border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent);
  color: var(--warn); border-radius: var(--r-sm);
  padding: 10px 12px; font-size: .85rem; line-height: 1.4; margin-bottom: 14px;
}

/* Aceptación de las condiciones: letra pequeña bajo el botón. */
.legal-accept {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 16px;
  font-size: .7rem; line-height: 1.45; color: var(--text-muted);
  cursor: pointer; user-select: none;
}
.legal-accept input { margin-top: 2px; flex-shrink: 0; accent-color: var(--accent); cursor: pointer; }
.legal-accept a { color: var(--accent); text-decoration: underline; }

.login-footer {
  text-align: center; margin-top: 24px;
  font-size: .8125rem; color: var(--text-muted); line-height: 1.5;
}

/* En un móvil la tarjeta ocupa casi todo: se le quita el acolchado grande y se
   respeta el área segura de la pantalla. */
@media (max-width: 480px) {
  .login-shell { padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .login-card { padding: 26px 20px; }
  .login-logo { margin-bottom: 28px; }
}