/* Pantalla de acceso común (templates/auth/base.html): foto a la izquierda, formulario a la derecha. */

.auth-body { background: var(--hueso); }
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1fr 1fr; }

.auth-art {
  position: relative; display: flex; align-items: flex-end; padding: 48px;
  background: var(--encina-800) 40% center / cover no-repeat; color: var(--hueso);
}
.auth-art::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 29, 23, .05), rgba(20, 29, 23, .85)); }
.auth-art p { position: relative; font-family: var(--font-display); font-weight: var(--fw-display); font-variation-settings: "wdth" var(--wdth-display); letter-spacing: var(--ls-display); font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1.1; max-width: 16ch; }

.auth-panel { position: relative; display: grid; place-items: center; padding: 72px 24px 40px; background: var(--hueso); }
.auth-back {
  position: absolute; top: 24px; left: 28px;
  font-size: var(--fs-sm); color: var(--text-muted); text-decoration: none;
}
.auth-back::before { content: "‹"; margin-right: 6px; }
.auth-back:hover { color: var(--text); }
.auth-inner { width: min(380px, 100%); display: grid; gap: 22px; }
.auth-logo { justify-self: start; }
.auth-logo img { display: block; height: 84px; width: auto; }

/* La tarjeta de cuenta.css pierde el fondo: aquí el panel ya es la superficie. */
.auth-card .ac-card, .auth-card { display: grid; gap: 22px; }
.auth .ac-title { font-size: var(--fs-xl); }
.auth .ac-alt { padding: 0; }
.auth .flash { margin: 0; }

.auth-demo {
  display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--r-md);
  background: var(--surface-2); border: 1px solid var(--border-soft);
  font-size: var(--fs-xs); color: var(--text-muted);
}
.auth-demo strong { color: var(--text); font-weight: 600; }

@media (max-width: 860px) {
  .auth { grid-template-columns: 1fr; }
  .auth-art { display: none; }
  .auth-panel { place-items: start center; padding-top: 64px; }
  .auth-logo img { height: 64px; }
}