/**
 * LM Contable — Pagina de login — Design System v3.0
 * Requiere haber cargado antes styles/index.css.
 */
.auth-screen {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, var(--ds-primary-950), var(--ds-primary-900) 55%, var(--ds-primary-800));
  padding: var(--ds-space-2);
}
.auth-card {
  width: 100%; max-width: 380px; background: var(--ds-card-bg); border-radius: var(--ds-radius-card);
  box-shadow: var(--ds-shadow-lg); padding: var(--ds-space-4) var(--ds-space-3);
}
.auth-logo { display: block; max-width: 180px; height: auto; margin: 0 auto var(--ds-space-2); border-radius: var(--ds-radius-input); box-shadow: var(--ds-shadow-md); }
.auth-card h1 { font-size: 19px; font-weight: var(--ds-fw-bold); margin: 0 0 4px; color: var(--ds-text); text-align: center; }
.auth-card .sub { font-size: 12.5px; color: var(--ds-text-secondary); margin-bottom: var(--ds-space-3); text-align: center; }
.auth-field { margin-bottom: var(--ds-space-2); }
.auth-field label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--ds-text-muted); font-weight: var(--ds-fw-semibold); display: block; margin-bottom: 5px; }
.auth-field input {
  width: 100%; height: 48px; padding: 0 14px; border-radius: var(--ds-radius-input); border: 1px solid #CBD5E1;
  font-size: 14px; background: var(--ds-white); color: var(--ds-text); font-family: var(--ds-font);
  transition: border-color var(--ds-transition-fast), box-shadow var(--ds-transition-fast);
}
.auth-field input:focus { outline: none; border-color: var(--ds-accent); box-shadow: 0 0 0 4px rgba(37,99,235,.15); }
.auth-error { background: var(--ds-danger-bg); color: var(--ds-danger); border-radius: var(--ds-radius-input); padding: 9px 12px; font-size: 12.5px; margin-bottom: var(--ds-space-2); display: none; }
.auth-error.show { display: block; }
.auth-card .ds-btn { width: 100%; justify-content: center; padding: 13px; font-size: 13.5px; margin-top: var(--ds-space-half); }

.hidden { display: none !important; }

/* Mostrar/ocultar contraseña -- mismo patron que .ds-search de forms.css
   (input con icono superpuesto), pero a la derecha y clicable en vez de
   decorativo. */
.auth-password-wrap { position: relative; display: flex; }
.auth-password-wrap input { padding-right: 44px; }
.auth-password-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; border-radius: var(--ds-radius-btn); cursor: pointer;
  color: var(--ds-text-muted); padding: 0;
}
.auth-password-toggle:hover { color: var(--ds-text); background: var(--ds-bg-secondary); }
.auth-password-toggle:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 1px; }
.auth-password-toggle svg,
.auth-password-toggle i { width: 18px; height: 18px; }

.auth-turnstile { margin: var(--ds-space-2) 0; display: flex; justify-content: center; }
.auth-turnstile:empty { display: none; margin: 0; }

.auth-link {
  display: block; text-align: center; margin-top: var(--ds-space-2); font-size: 12.5px;
  color: var(--ds-text-secondary); text-decoration: none;
}
.auth-link:hover { color: var(--ds-accent); text-decoration: underline; }

.auth-forgot-intro { font-size: 12.5px; color: var(--ds-text-secondary); margin: 0 0 var(--ds-space-2); line-height: 1.5; }
.auth-success { background: var(--ds-success-bg); color: var(--ds-success); border-radius: var(--ds-radius-input); padding: 9px 12px; font-size: 12.5px; margin-bottom: var(--ds-space-2); display: none; }
.auth-success.show { display: block; }