/* ============================================================
   Pantalla de acceso
   ============================================================ */

/* ==================== LOGIN ==================== */
.login-view { min-height: 100dvh; display: grid; place-content: center; gap: 1.1rem; padding: 1.5rem; }
.login-card {
  width: min(380px, 92vw); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 1.9rem 1.7rem;
  display: flex; flex-direction: column; gap: 1.05rem; position: relative; overflow: hidden;
}
.login-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
.login-brand { display: flex; align-items: center; justify-content: center; gap: 1.1rem; }
.login-title { text-align: center; }
.login-title h1 { font-family: var(--font-cond); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.01em; }
.brand-sub { margin: 0.35rem 0 0; color: var(--muted); font-size: 0.82rem; line-height: 1.35; }

.field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.78rem; font-weight: 500; color: var(--muted); }
.field input {
  font: inherit; color: var(--text); padding: 0.62rem 0.7rem; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface-2);
}
.field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }
.login-error {
  margin: 0; color: var(--fault); font-size: 0.82rem;
  background: color-mix(in srgb, var(--fault) 12%, transparent);
  padding: 0.55rem 0.7rem; border-radius: var(--radius-sm);
}
.footnote { text-align: center; color: var(--muted); font-size: 0.78rem; margin: 0; font-family: var(--font-mono); }