/* ==========================================================================
   GestionaPública — Pantalla de acceso
   --------------------------------------------------------------------------
   La MISMA para todas las áreas: panel del gestor, portal de contratistas,
   app del personal 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.
   ========================================================================== */

/* Composición: columna centrada de 440 px, la marca suelta arriba —símbolo,
   nombre y descriptor— y debajo la tarjeta con el formulario. Es la misma que
   usa GestionaFitness, a propósito. */

.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 */
.glow-ring {
  position: fixed; width: 600px; height: 600px; border-radius: 50%;
  /* Misma intensidad que el halo de GestionaFitness (.10). Más arriba el
     resplandor se cuela a través de la tarjeta translúcida y le deja una
     mancha cálida en el centro. */
  background: radial-gradient(circle, rgba(252,169,5,.10) 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: gpFadeUp .5s ease both;
}
@keyframes gpFadeUp { from { opacity: 0; transform: translateY(16px) } to { opacity: 1; transform: 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 rgba(252, 169, 5, .45));
}
.login-logo h1 { font-size: 1.75rem; font-weight: 800; letter-spacing: -.03em; }
.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-bottom: 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);
  min-height: 1.2em;   /* reserva el hueco para que la tarjeta no dé un salto
                          cuando llega el nombre del ente */
}
.login-card .gp-field { margin-bottom: 20px; }
.login-card .gp-label { font-size: .875rem; }
.login-card .gp-input { font-size: 1rem; padding: 12px 16px; }
.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 toast: en un
   formulario el aviso 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; }
}