/* auth.css — Login y registro. Solo lo específico encima de ui.css (.auth-layout / .auth-card).
   Guía: .claude/standards/07-guia-estilos-ui.md */

.auth-card { position: relative; }

/* Cabecera: logo + título */
.auth-header { display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: var(--sp-6); }
.auth-brand { width: 44px; height: 44px; border-radius: var(--radius); margin-bottom: var(--sp-4); }
.auth-brand .icon { width: 22px; height: 22px; }
.auth-title { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; color: var(--text); }
.auth-subtitle { margin-top: var(--sp-1); color: var(--text-2); }

/* Selector de tema (icono según el tema efectivo) */
.auth-theme-toggle { position: absolute; top: var(--sp-3); right: var(--sp-3); }
.auth-theme-toggle__sun { display: none; }
:root[data-theme="dark"] .auth-theme-toggle__sun { display: inline-block; }
:root[data-theme="dark"] .auth-theme-toggle__moon { display: none; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .auth-theme-toggle__sun { display: inline-block; }
    :root:not([data-theme="light"]) .auth-theme-toggle__moon { display: none; }
}

/* Alertas con desvanecido al autocerrarse */
.auth-alert { margin-bottom: var(--sp-5); transition: opacity 200ms var(--ease); }
.auth-alert.is-leaving { opacity: 0; }

/* Formulario */
.auth-input--action { padding-right: 44px; }
.auth-password-toggle { color: var(--text-3); }
.auth-password-toggle__hide { display: none; }
.auth-password-toggle.is-active .auth-password-toggle__show { display: none; }
.auth-password-toggle.is-active .auth-password-toggle__hide { display: inline-block; }

.auth-field-error { display: flex; align-items: center; gap: var(--sp-1); }

.auth-extras { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-5); }

.auth-footer { margin-top: var(--sp-6); text-align: center; font-size: 13px; color: var(--text-2); }

/* v6: aviso de Bloq Mayús y enlace con aspecto de texto (es un <button>, accesible por teclado) */
.auth-caps { display: flex; align-items: center; gap: var(--sp-1); color: var(--warning-text); }
.auth-link { padding-inline: var(--sp-1); font-weight: 500; color: var(--primary); }
.auth-code { letter-spacing: 0.15em; }