/* Inicio de sesión (LOGIN-PREMIUM-02, ajustado en LOGIN-PREMIUM-03): formulario (AGENTE 3). Solo el aspecto de la tarjeta y sus estados (colores,
   bordes, sombras). El tamaño y la ubicación del panel y el ancho máximo de la tarjeta son de public/login.css
   (AGENTE 1); las entradas y los desplazamientos de hover, de login-motion.css (AGENTE 2). Aquí no hay animaciones
   de entrada: la única animación es el giro del indicador de carga del botón, y se apaga con «reducir movimiento».
   Las reglas llevan `.lgn-panel` delante para ganarle a las generales de style.css y sistema.css (botones con
   degradado, inputs de 2,5 rem). */

.lgn-panel { font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; }

.lgn-panel .lgn-card {
  box-sizing: border-box;
  width: 100%;
  padding: 3.5rem 3.5rem 3rem;
  background: var(--surface);
  border: 1px solid rgba(25, 36, 58, .06);
  border-radius: 22px;
  /* Sombra suave y difusa: la tarjeta flota apenas sobre el fondo claro. */
  box-shadow:
    0 1px 2px rgba(16, 24, 40, .03),
    0 12px 32px -16px rgba(25, 36, 58, .10),
    0 40px 90px -40px rgba(25, 36, 58, .20);
}

/* Título y subtítulo */
.lgn-panel .lgn-head { margin: 0 0 2.5rem; }
.lgn-panel .lgn-title {
  margin: 0;
  font-size: 2.75rem; /* 44 px: el título domina la tarjeta */
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--brand-deep);
}
.lgn-panel .lgn-sub {
  margin: 1rem 0 0;
  font-size: 1.0625rem; /* 17 px */
  line-height: 1.55;
  color: var(--muted);
  text-wrap: pretty;
}
.lgn-panel .lgn-sub strong { font-weight: 600; color: var(--brand-deep); }

/* Avisos: el de contraseña creada y el de error, dentro de la tarjeta (no flotan). */
.lgn-panel .lgn-alert {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  margin: 0 0 1.5rem;
  padding: .8rem 1rem;
  font-size: .92rem;
  line-height: 1.45;
  font-weight: 500;
  border-radius: 12px;
  border: 1px solid transparent;
}
.lgn-panel .lgn-alert svg.icon { flex: none; width: 1.15rem; height: 1.15rem; margin-top: .06rem; }
.lgn-panel .lgn-alert.notice { background: #ecfaf8; border-color: #b7e6df; color: #0b655e; }
.lgn-panel .lgn-alert.error { background: #fdf1f0; border-color: #f3c4bf; color: #c53a3a; }

/* Campos */
.lgn-panel .lgn-form { display: grid; gap: 1.6rem; margin: 0; }
.lgn-panel .lgn-field { display: grid; gap: .6rem; min-width: 0; }
.lgn-panel .lgn-label { display: block; font-size: 1.0625rem; line-height: 1.3; font-weight: 500; color: var(--ink); } /* 17 px */

.lgn-panel .lgn-control { position: relative; display: flex; align-items: center; }
.lgn-panel .lgn-control > svg.icon {
  position: absolute;
  left: 1.05rem;
  width: 1.2rem;
  height: 1.2rem;
  color: #8a93a3;
  pointer-events: none;
}
.lgn-panel .lgn-control:focus-within > svg.icon { color: var(--brand); }
.lgn-panel .lgn-control:has(.lgn-input[aria-invalid="true"]) > svg.icon { color: #c53a3a; }

.lgn-panel .lgn-input {
  box-sizing: border-box;
  width: 100%;
  height: 3.375rem;
  padding: 0 1rem 0 3rem;
  font: inherit;
  font-size: 1rem; /* 16 px: el iPhone no acerca la pantalla al tocar el campo */
  color: var(--ink);
  background-color: var(--surface);
  border: 1px solid #d5dbe5;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  outline: none;
}
/* style.css fija 2,5 rem a todo input de texto con un selector más pesado; este lo iguala y gana por orden. */
.lgn-panel .lgn-control input.lgn-input:not([type="checkbox"]) { height: 3.375rem; }
.lgn-panel .has-toggle .lgn-input { padding-right: 3.25rem; }
.lgn-panel .lgn-input::placeholder { color: #6b7484; opacity: 1; } /* 4,7:1 sobre blanco */
.lgn-panel .lgn-input:hover { border-color: #b9c0cc; }
.lgn-panel .lgn-input:focus,
.lgn-panel .lgn-input:focus-visible {
  outline: none;
  border-color: var(--brand-focus);
  box-shadow: 0 0 0 4px rgba(79, 70, 229, .15);
}
.lgn-panel .lgn-input[aria-invalid="true"] { border-color: #e48a82; background-color: #fffbfa; }
.lgn-panel .lgn-input[aria-invalid="true"]:focus { border-color: #d14343; box-shadow: 0 0 0 4px rgba(209, 67, 67, .14); }
.lgn-panel .lgn-input:disabled { color: var(--muted); background-color: #f3f5f8; border-color: #e4eaf1; box-shadow: none; cursor: not-allowed; }
.lgn-panel .lgn-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 40px #f4f5ff inset; -webkit-text-fill-color: var(--ink); }
.lgn-panel .lgn-input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 40px #f4f5ff inset, 0 0 0 4px rgba(79, 70, 229, .15); }

/* Mostrar u ocultar la contraseña */
.lgn-panel button.lgn-toggle {
  position: absolute;
  right: .45rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  margin: 0;
  padding: 0;
  color: #6b7484;
  background: transparent;
  border: 0;
  border-radius: 10px;
  box-shadow: none;
  text-shadow: none;
  filter: none;
  transform: none;
}
.lgn-panel button.lgn-toggle[hidden] { display: none; }
.lgn-panel button.lgn-toggle svg.icon { width: 1.2rem; height: 1.2rem; }
.lgn-panel button.lgn-toggle:hover { color: var(--brand); background: var(--brand-soft); box-shadow: none; transform: none; filter: none; }
.lgn-panel button.lgn-toggle:focus-visible { outline: none; color: var(--brand); box-shadow: 0 0 0 2px var(--brand-focus, #4F46E5); } /* anillo pleno: contraste ≥ 3:1 sobre blanco (QA) */
.lgn-panel button.lgn-toggle[aria-pressed="true"] { color: var(--brand); }

/* Aviso de Bloq Mayús: ocupa lugar solo cuando aparece */
.lgn-panel .lgn-caps { margin: 0; font-size: .82rem; font-weight: 500; color: #9a6a1a; }
.lgn-panel .lgn-caps:empty { display: none; }

/* Botón Entrar */
.lgn-panel .lgn-actions { margin: 1rem 0 0; }
.lgn-panel button.lgn-submit {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  width: 100%;
  height: 3.5rem;
  margin: 0;
  padding: 0 1.25rem;
  font: inherit;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: .005em;
  color: #fff;
  background: linear-gradient(180deg, #4b41d6 0%, var(--brand) 55%, #3b31bb 100%);
  border: 1px solid #3a30b6;
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 1px 2px rgba(16, 24, 40, .10),
    0 10px 22px -10px rgba(67, 56, 202, .6);
  text-shadow: none;
  filter: none;
  transform: none;
  cursor: pointer;
}
.lgn-panel button.lgn-submit:hover {
  color: #fff;
  background: linear-gradient(180deg, #4238c4 0%, var(--brand-strong) 60%, #312a96 100%);
  border-color: #312a96;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 1px 2px rgba(16, 24, 40, .10),
    0 14px 28px -12px rgba(55, 48, 163, .65);
  filter: none;
}
.lgn-panel button.lgn-submit:active {
  background: var(--brand-strong);
  box-shadow: inset 0 2px 4px rgba(16, 24, 40, .28);
}
.lgn-panel button.lgn-submit:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 0 0 3px var(--surface),
    0 0 0 6px var(--brand-focus);
}
.lgn-panel .lgn-submit-arrow { flex: none; width: 1.2rem; height: 1.2rem; }

/* Enviando: el texto pasa a «Entrando…» (login-form.js), aparece el giro y se va la flecha. */
.lgn-panel .lgn-submit-spin { display: none; }
.lgn-panel button.lgn-submit.is-loading { cursor: progress; }
.lgn-panel button.lgn-submit.is-loading,
.lgn-panel button.lgn-submit.is-loading:hover,
.lgn-panel button.lgn-submit.is-loading:disabled {
  color: #fff;
  background: linear-gradient(180deg, #4238c4 0%, var(--brand-strong) 100%);
  border-color: #312a96;
  opacity: 1;
}
.lgn-panel .lgn-submit.is-loading .lgn-submit-arrow { display: none; }
.lgn-panel .lgn-submit.is-loading .lgn-submit-spin {
  display: block;
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  box-sizing: border-box;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: lgn-spin .8s linear infinite;
}
@keyframes lgn-spin { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) {
  .lgn-panel .lgn-submit.is-loading .lgn-submit-spin { animation: none; border-color: #fff; border-right-color: rgba(255, 255, 255, .35); }
}
.mo-reduced .lgn-panel .lgn-submit.is-loading .lgn-submit-spin { animation: none; }

/* Pie: cómo recuperar la contraseña (no hay autoservicio: la administración envía un enlace de un solo uso). */
.lgn-panel .lgn-foot {
  margin: 2.25rem 0 0;
  padding-top: 1.6rem;
  border-top: 1px solid #e8ecf3;
  text-align: center;
  text-wrap: pretty;
}
.lgn-panel .lgn-foot p { margin: 0; font-size: .9375rem; line-height: 1.55; color: var(--muted); }
.lgn-panel .lgn-foot .lgn-foot-q { font-weight: 600; color: var(--ink); }
.lgn-panel .lgn-foot .lgn-foot-a { margin-top: .2rem; }

/* Pantallas intermedias: algo menos de aire. */
@media (max-width: 1100px) {
  .lgn-panel .lgn-card { padding: 2.75rem 2.25rem 2.25rem; }
  .lgn-panel .lgn-title { font-size: 2.25rem; }
  .lgn-panel .lgn-head { margin-bottom: 2rem; }
  .lgn-panel .lgn-form { gap: 1.35rem; }
}

/* Escritorio bajo (≤ 820 px de alto, más de 1100 de ancho): menos aire vertical para que la tarjeta quepa sin desplazar; la letra no cambia. */
@media (min-width: 1101px) and (max-height: 820px) {
  .lgn-panel .lgn-card { padding: 2.75rem 3rem 2.25rem; }
  .lgn-panel .lgn-title { font-size: 2.5rem; }
  .lgn-panel .lgn-head { margin-bottom: 1.85rem; }
  .lgn-panel .lgn-form { gap: 1.25rem; }
  .lgn-panel .lgn-foot { margin-top: 1.6rem; padding-top: 1.25rem; }
}

/* Tableta horizontal baja (1024 × 768): igual, con el padding de tableta. */
@media (min-width: 901px) and (max-width: 1100px) and (max-height: 820px) {
  .lgn-panel .lgn-card { padding: 2.25rem 2.25rem 1.85rem; }
  .lgn-panel .lgn-head { margin-bottom: 1.6rem; }
  .lgn-panel .lgn-form { gap: 1.15rem; }
  .lgn-panel .lgn-foot { margin-top: 1.5rem; padding-top: 1.2rem; }
}

/* Teléfono: la tarjeta pierde sombra y borde y ocupa el ancho; campos de 16 px. */
@media (max-width: 560px) {
  .lgn-panel .lgn-card { max-width: none; padding: 1.25rem .5rem 1rem; border-color: transparent; border-radius: 0; box-shadow: none; background: transparent; }
  .lgn-panel .lgn-head { margin-bottom: 1.5rem; }
  .lgn-panel .lgn-title { font-size: 1.85rem; }
  .lgn-panel .lgn-sub { font-size: .95rem; }
  .lgn-panel .lgn-form { gap: 1.15rem; }
  .lgn-panel .lgn-foot { margin-top: 1.5rem; padding-top: 1.25rem; }
}