/* Paginas de acceso: una sola tarjeta centrada sobre el fondo de la app. */
.auth-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-block: var(--s-6);
}

.auth-card {
	width: 100%;
	max-width: 420px;
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: var(--r-md);
	box-shadow: var(--shadow-1);
	padding: var(--s-6);
}

.auth-card-wide {
	max-width: 520px;
}

/* card.Header y card.Content de templUI traen su propio p-6: el acolchado lo
   pone la tarjeta, no sus piezas. */
.auth-card > div {
	padding: 0;
}

.auth-card h3 {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--navy);
}

.auth-body {
	display: flex;
	flex-direction: column;
	gap: var(--s-5);
	margin-block-start: var(--s-5);
}

.auth-link {
	font-size: var(--fs-sm);
	color: var(--navy);
	text-decoration: none;
}

.auth-link:hover {
	color: var(--accent-hover);
	text-decoration: underline;
}

.auth-links {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-2);
}

/* Particular / agencia como segmented control sobre la tarjeta. */
.register-tabs {
	display: inline-flex;
	gap: var(--s-1);
	padding: var(--s-1);
	margin-block-end: var(--s-4);
	background: var(--surface-2);
	border-radius: var(--r-md);
}

.register-tab {
	padding: var(--s-2) var(--s-4);
	border-radius: var(--r-sm);
	color: var(--ink-soft);
	font-size: var(--fs-sm);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}

.register-tab:hover {
	color: var(--ink);
}

.register-tab-active,
.register-tab-active:hover {
	background: var(--navy);
	color: #ffffff;
}

.notice {
	background: var(--accent-soft);
	color: var(--ink);
	border-radius: var(--r-md);
	padding: var(--s-3);
	margin-bottom: var(--s-4);
}

.account-page .account-section + .account-section {
	margin-top: var(--s-5);
}

.account-email {
	color: var(--ink-soft);
	font-size: var(--fs-sm);
}

.account-avatar-block {
	display: flex;
	align-items: center;
	gap: var(--s-4);
}

.account-avatar-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--surface-2);
	color: var(--ink-soft);
	border: 1px dashed var(--line-strong);
}

.account-avatar-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--s-2);
	max-width: 100%;
	min-width: 0;
}

/* El form global de app.css le da fondo y padding: sin tope acaba mas ancho
   que el viewport movil. */
.account-avatar-form {
	max-width: 100%;
	min-width: 0;
	flex-wrap: wrap;
}

.account-page .account-form {
	gap: var(--s-4);
}

.account-page .account-password-form {
	gap: var(--s-4);
}

.account-page .account-email-form {
	gap: var(--s-4);
}

.account-email-form label {
	display: flex;
	flex-direction: column;
	gap: var(--s-1);
}

.account-email-form input[type="email"] {
	width: 100%;
}

.account-page .account-form > button,
.account-page .account-password-form > button,
.account-page .account-email-form > button {
	align-self: flex-start;
}

.ad-row-delete {
	color: var(--danger);
}

.ad-row-delete:hover {
	background: color-mix(in srgb, var(--danger) 12%, transparent);
	color: var(--danger);
}

@media (prefers-reduced-motion: reduce) {
	.register-tab {
		transition: none;
	}
}