/* ==========================================================================
   pages-auth.css — Páginas de autenticación (login.php y registro.php)
   --------------------------------------------------------------------------
   Capa de presentación exclusiva del layout partido "Modern Atelier".
   Reutiliza las clases ya portadas en theme.css y shop.css (split-layout,
   split-visual, split-content, form-container, marandre-field,
   password-wrapper, form-divider, ...) y solo añade lo que esas hojas
   no cubren o lo que hay que ajustar por el header propio de este frontend.

   Reglas de la casa:
   - Ningún color literal de marca: todo sale de los tokens de brand_css_vars().
   - Nada de lógica: aquí no se define comportamiento, solo estilo.
   ========================================================================== */

/* ---------- Alto del lienzo ----------
   El header de includes/header.php es sticky y mide 80px (h-20 de Tailwind).
   shop.css deja los paneles a 100svh, así que hay que descontar el header
   para que la página no desborde el viewport ni empuje el footer. */

.auth-page {
	--auth-header-offset: 80px;
	min-height: calc(100vh - var(--auth-header-offset));
	min-height: calc(100svh - var(--auth-header-offset));
}

.auth-page .split-layout,
.auth-page .split-visual,
.auth-page .split-content {
	min-height: calc(100vh - var(--auth-header-offset));
	min-height: calc(100svh - var(--auth-header-offset));
}

/* ---------- Panel visual ----------
   Si el branding no aporta imagen, el panel cae a un degradado de marca.
   Cuando sí la hay, la página inyecta background-image en línea y este
   degradado queda como color de respaldo mientras la imagen carga. */

.auth-visual {
	background-color: var(--color-primary);
	background-image: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-container) 100%);
}

.auth-visual .visual-content p {
	max-width: 42ch;
	margin: 0;
	color: var(--color-on-primary);
	font-size: var(--text-base);
	line-height: 1.6;
	opacity: 0.88;
}

/* Chips de beneficios sobre el panel (registro). */
.auth-benefits {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-bottom: var(--space-6);
	padding: 0;
	list-style: none;
}

/* ---------- Cabecera del formulario ---------- */

.auth-page .login-logo {
	display: inline-block;
	line-height: 0;
}

.auth-page .login-logo img {
	height: auto;
}

.auth-page .form-title {
	font-family: var(--font-display);
	color: var(--color-on-surface);
}

.auth-page .form-subtitle {
	margin: 0;
	font-size: var(--text-sm);
	line-height: 1.6;
}

/* ---------- Campos ---------- */

/* theme.js marca el contenedor con .marandre-floating; theme.css solo cubre
   el caso :not(:placeholder-shown). Se replica aquí para que ambos coincidan. */
.auth-page .marandre-field.marandre-floating label {
	top: calc(var(--space-3) * -1);
	font-size: var(--text-xs);
	color: var(--color-primary);
	transform: translateY(-4px);
}

.auth-page .marandre-field.is-invalid input {
	border-bottom-color: var(--color-error);
}

.auth-page .marandre-field.is-valid input {
	border-bottom-color: var(--color-success);
}

.auth-field-hint {
	margin: var(--space-2) 0 0;
	font-size: var(--text-xs);
	color: var(--color-on-surface-muted);
}

.auth-field-feedback {
	margin: var(--space-2) 0 0;
	font-size: var(--text-xs);
	color: var(--color-on-surface-muted);
}

.auth-field-feedback.is-invalid {
	color: var(--color-error);
}

.auth-field-feedback.is-valid {
	color: var(--color-success);
}

/* No depender de la utilidad `hidden` del CDN de Tailwind para ocultarlo. */
.auth-field-feedback.hidden {
	display: none;
}

/* ---------- Mostrar/ocultar contraseña ----------
   shop.css posiciona el botón a 24px, pensado para campos con etiqueta
   externa. Con .marandre-field la etiqueta flota sobre el propio input,
   así que el botón se recoloca sobre la línea del campo. */

.auth-page .password-wrapper .password-toggle {
	top: 6px;
	right: 0;
	line-height: 1;
	border-radius: var(--radius-pill);
	transition: color var(--transition);
}

.auth-page .password-wrapper .password-toggle:hover,
.auth-page .password-wrapper .password-toggle:focus-visible {
	color: var(--color-primary);
}

/* Reservar sitio para el botón: el texto no debe pasar por debajo. */
.auth-page .marandre-field.password-wrapper input {
	padding-right: var(--space-10);
}

/* ---------- Acciones secundarias ---------- */

.auth-page .form-footer-actions {
	color: var(--color-on-surface-muted);
}

.auth-page .remember-me {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	cursor: pointer;
	user-select: none;
}

.auth-page .remember-me input[type="checkbox"] {
	width: 16px;
	height: 16px;
	accent-color: var(--color-primary);
	cursor: pointer;
}

.auth-page .lost-password {
	color: var(--color-secondary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--transition);
}

.auth-page .lost-password:hover,
.auth-page .lost-password:focus-visible {
	border-bottom-color: currentColor;
}

/* ---------- Botones a ancho completo ---------- */

.auth-block {
	display: flex;
	width: 100%;
}

.auth-block + .auth-block {
	margin-top: var(--space-3);
}

.auth-block:disabled,
.auth-block[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
	box-shadow: none;
}

/* ---------- reCAPTCHA ---------- */

.auth-recaptcha {
	display: flex;
	justify-content: center;
	margin: var(--space-6) 0;
}

/* ---------- Nota legal / pie del formulario ---------- */

.auth-note {
	margin: var(--space-6) 0 0;
	font-size: var(--text-xs);
	line-height: 1.6;
	color: var(--color-on-surface-faint);
}

/* ---------- Estado de registro correcto ---------- */

.auth-success__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: var(--space-6);
	border-radius: var(--radius-pill);
	background: var(--color-success-container);
	color: var(--color-success);
	font-size: var(--text-xl);
}

.auth-success__text {
	margin: 0 0 var(--space-6);
	color: var(--color-on-surface-muted);
	line-height: 1.7;
}

/* ---------- Responsive ----------
   shop.css ya oculta .split-visual bajo 991px; aquí solo se libera el alto
   fijo para que la columna del formulario respire en móvil. */

@media (max-width: 991px) {
	.auth-page,
	.auth-page .split-layout,
	.auth-page .split-content {
		min-height: auto;
	}

	.auth-page .split-content {
		padding: var(--space-10) var(--space-6) var(--space-16);
	}

	.auth-page .form-header {
		margin-bottom: var(--space-8);
	}
}