/*
 * Cascaron de la pantalla de acceso de WordPress (wp-login.php): icono +
 * nombre del sitio, titulo, ilustracion, tarjeta con el formulario.
 *
 * Clonado de assets/css/auth-shell.css de ace-commerce (sitio ace-an-retail)
 * -esa version comparte este mismo cascaron entre 3 pantallas (login, Mi
 * cuenta, Seguimiento de WooCommerce). iead-panel no tiene comercio ni esas
 * otras dos pantallas (P01 saco WooCommerce por completo), asi que aca solo
 * se usa para wp-login.php, pero se mantiene el mismo nombre de clases
 * `.auth-*` por si en algun momento hace falta en otra pantalla de acceso.
 *
 * A diferencia del original (colores fijos en hexadecimal, porque
 * wp-login.php no trae los tokens del tema por defecto): aca se usan
 * variables de theme.json (`var(--wp--preset--...)`) porque
 * inc/login.php ya las inyecta a mano con wp_get_global_stylesheet().
 */

.auth-shell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--40);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	font-family: var(--wp--preset--font-family--base);
}

/* Orden en movil (una sola columna): icono+nombre y titulo primero, el
   formulario despues, la ilustracion al final. */
.auth-head {
	order: 1;
	width: 100%;
}

.auth-panel {
	order: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
}

.auth-illustration {
	order: 3;
	width: min(280px, 70vw);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.auth-illustration svg {
	width: 100%;
	height: auto;
	color: var(--wp--preset--color--accent);
	display: block;
}

.auth-illustration-credit {
	margin: var(--wp--preset--spacing--10) 0 0;
	font-size: 0.6875rem;
	color: var(--wp--preset--color--contrast-muted);
	text-align: center;
}

.auth-illustration-credit a {
	color: inherit;
}

.auth-brand {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.auth-brand-icon {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	color: var(--wp--preset--color--accent);
}

.auth-brand-name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
}

.auth-title {
	margin: 0 0 var(--wp--preset--spacing--20);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--tight);
	letter-spacing: var(--wp--custom--letter-spacing--tight);
	color: var(--wp--preset--color--contrast);
}

/* ============ Tarjeta (formulario) ============ */

.auth-card {
	box-sizing: border-box;
	max-width: 440px;
	width: 100%;
	margin: 0;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--preset--border-radius--large);
	box-shadow: var(--wp--preset--shadow--card);
	padding: var(--wp--preset--spacing--40);
}

/* ============ Campo con etiqueta flotante ============ */

.auth-field {
	position: relative;
	margin-bottom: var(--wp--preset--spacing--20);
}

.auth-field label {
	position: absolute;
	left: 14px;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%);
	margin: 0;
	padding: 0 4px;
	max-width: calc(100% - 28px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast-alt);
	font-size: var(--wp--preset--font-size--medium);
	pointer-events: none;
	transform-origin: left center;
	transition: top 0.15s ease-out, transform 0.15s ease-out, color 0.15s ease-out;
}

.auth-field input {
	width: 100%;
	height: var(--wp--custom--target--min);
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--hairline);
	border-radius: var(--wp--preset--border-radius--small);
	font-size: var(--wp--preset--font-size--medium);
	font-family: inherit;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	box-sizing: border-box;
}

.auth-field input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
}

.auth-field:has(input:focus) label,
.auth-field:has(input:not(:placeholder-shown)) label {
	top: 0;
	transform: translateY(-50%) scale(0.85);
}

.auth-field:has(input:focus) label {
	color: var(--wp--preset--color--accent);
}

/* ============ Boton ============ */

.auth-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: var(--wp--custom--target--min);
	padding: 12px var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--preset--border-radius--medium);
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent-contrast);
	font-weight: 500;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--medium);
	cursor: pointer;
	text-decoration: none;
	text-align: center;
	box-sizing: border-box;
}

.auth-btn:hover,
.auth-btn:focus {
	background: var(--wp--preset--color--accent-strong);
	border-color: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--accent-contrast);
	text-decoration: none;
}

.auth-links-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--30);
	flex-wrap: wrap;
	width: 100%;
	max-width: 440px;
	margin: 0;
}

@media (min-width: 62rem) {
	/*
	 * Columna izquierda arriba (icono + nombre + titulo), columna izquierda
	 * abajo (ilustracion), columna derecha ocupando las dos filas (la
	 * tarjeta), alineada arriba contra el titulo.
	 */
	.auth-shell {
		display: grid;
		grid-template-columns: minmax(320px, 40%) 1fr;
		grid-template-rows: auto 1fr;
		grid-template-areas: "head panel" "illustration panel";
		column-gap: var(--wp--preset--spacing--60);
		row-gap: var(--wp--preset--spacing--40);
		max-width: 1100px;
		margin: 0 auto;
		padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
	}

	.auth-head {
		grid-area: head;
	}

	.auth-illustration {
		grid-area: illustration;
		width: 100%;
		max-width: 340px;
		align-self: start;
	}

	.auth-panel {
		grid-area: panel;
		align-self: start;
		align-items: flex-start;
	}

	.auth-panel .auth-card,
	.auth-panel .auth-links-row {
		margin-left: 0;
		margin-right: 0;
	}
}