/*
 * Piel visual de wp-login.php con los tokens del tema iead-panel. No toca
 * la logica del formulario: solo colores, tipografia y layout.
 *
 * Clonado de assets/css/login.css de ace-commerce (sitio ace-an-retail),
 * que ya tenia resueltas -con meses de ajustes reales, documentados en cada
 * comentario- las peleas de especificidad contra los estilos de fabrica de
 * WordPress (`wp-admin/css/login.css`, `wp-admin/css/forms.css`) para esta
 * pantalla puntual. `auth-shell.css` (encolado antes que este archivo) pone
 * el cascaron compartido (icono+nombre, titulo, ilustracion, tarjeta,
 * campos, boton); aca solo queda lo que WordPress core dibuja con su propio
 * marcado fijo y lo que hace falta para ganarle donde compiten por el mismo
 * elemento.
 */

body.login {
	background: var(--wp--preset--color--base);
}

/*
 * `body.login .auth-shell` (no `.auth-shell` sola): mismo motivo que en
 * ace-commerce, un margen propio arriba de la pantalla -sin este valor la
 * pantalla quedaba pegada contra el borde superior del navegador.
 */
body.login .auth-shell {
	margin-top: clamp(1.5rem, 8vh, var(--wp--preset--spacing--70));
}

/*
 * `body.login #login` (no `#login` solo): WordPress core
 * (`wp-admin/css/login.css`) trae `#login{width:320px;margin:auto}` -un ID
 * contra otro ID empata en especificidad, y sin sumar un selector mas la
 * tarjeta quedaba fija en 320px, centrada sola dentro de su columna en vez
 * de pegada al borde izquierdo como el resto de `.auth-panel`.
 */
body.login #login {
	width: 100%;
	max-width: 440px;
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/*
 * WordPress core trae `.login h1{text-align:center}` (wp-admin/css/login.css)
 * -esa regla no distingue el `<h1 class="wp-login-logo">` del propio
 * `<h1 class="auth-title">` que arma login-illustration.php, asi que el
 * titulo ("Ingresar", "Recuperar contraseña") quedaba centrado en su
 * columna en vez de pegado al borde izquierdo. `.login .auth-title` suma
 * una clase mas que la regla de WordPress (que es clase+elemento), asi que
 * gana sin depender del orden de carga.
 */
.login .auth-title {
	text-align: left;
}

/*
 * WordPress core trae `.login form{background:#fff;border:1px solid #c3c4c7}`
 * (wp-admin/css/login.css) SIN border-radius -esa regla se aplica al
 * formulario real (`#loginform`), no a la clase `.auth-card` que pensamos
 * usar para la tarjeta: como wp-login.php arma ese `<form>` con su propio
 * marcado fijo, no hay forma de agregarle la clase `.auth-card`. Se repiten
 * aca los mismos valores que esa clase (auth-shell.css) apuntando
 * directamente a `.login form`.
 */
.login form {
	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);
}

/*
 * WordPress core trae `.login h1 a{display:block}` -2 elementos + 1 clase
 * le gana a la clase compartida sola (`.auth-brand`, auth-shell.css), asi
 * que el icono y el nombre quedaban en bloque, uno arriba del otro, en vez
 * de en fila. Mismos valores que `.auth-brand`, repetidos aca solo para
 * juntar la especificidad que hace falta.
 */
body.login h1.wp-login-logo a.auth-brand {
	display: flex;
	align-items: center;
	gap: 10px;
}

/*
 * Alto explicito (no `auto`) en los tres tipos de envoltorio de campo: sin
 * esto el alto termina siendo mayor al del input (WordPress reserva espacio
 * de mas para el aviso de "Bloqueo de mayusculas" y el medidor de fuerza
 * dentro de `.wp-pwd`), y el 50% de la etiqueta se centra contra ESE alto
 * mas grande, no contra el campo real.
 *
 * `.user-pass1-wrap` (pantalla "Contraseña nueva") es distinta: no es una
 * sola fila, trae ADEMAS la casilla "Confirmar uso de contraseña debil"
 * debajo -por eso no lleva altura fija aca, solo `position:relative`.
 */
body.login form p:has(> label[for]):has(> input[type="text"]),
body.login form p:has(> label[for]):has(> input[type="password"]),
body.login form .user-pass-wrap,
body.login form .user-pass1-wrap {
	position: relative;
}

/*
 * `!important` en `margin-bottom`, solo aca: WordPress trae un reset muy
 * agresivo por ID (`#login form p{margin-bottom:0}`,
 * wp-admin/css/login.css). Un ID le gana a cualquier cantidad de clases sin
 * importar cuantas se junten -sin esto los campos quedaban pegados, sin
 * espacio entre uno y otro.
 */
body.login form p:has(> label[for]):has(> input[type="text"]),
body.login form p:has(> label[for]):has(> input[type="password"]),
body.login form .user-pass-wrap {
	height: 48px;
	margin-bottom: 18px !important;
}

body.login form .user-pass1-wrap {
	margin-bottom: 18px !important;
}

/*
 * `top:24px` fijo (la mitad del alto del input, 48px), no `top:50%`: un
 * porcentaje se calcula contra el alto del CONTENEDOR completo, y
 * `.wp-pwd` en "Contraseña nueva" es mas alto que el input solo (tambien
 * esta el medidor de fuerza) -calcularlo ahi corria la etiqueta hacia
 * abajo. Un valor fijo siempre cae en el medio del input.
 *
 * El selector repite la misma condicion `:has()` que la regla de arriba a
 * proposito: un selector mas amplio (`p:has(> label[for])` solo) tambien
 * agarraba el `<p class="forgetmenot">` de "Recuerdame" -que tambien es un
 * `<p>` con un `<label for>` adentro, pero sin `position:relative`- y el
 * label terminaba posicionado contra el ancestro posicionado mas cercano
 * en vez de su propia casilla.
 */
body.login form p:has(> label[for]):has(> input[type="text"]) > label,
body.login form p:has(> label[for]):has(> input[type="password"]) > label,
body.login form .user-pass-wrap > label,
body.login form .wp-pwd > label {
	position: absolute;
	left: 14px;
	top: 24px;
	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--base);
	color: var(--wp--preset--color--contrast-alt);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
	pointer-events: none;
	transform-origin: left center;
	transition: top 0.15s ease-out, transform 0.15s ease-out, color 0.15s ease-out;
}

body.login form p:has(> label[for] + input:focus) > label,
body.login form p:has(> label[for] + input:not(:placeholder-shown)) > label,
body.login form .user-pass-wrap:has(input:focus) > label,
body.login form .user-pass-wrap:has(input:not(:placeholder-shown)) > label,
body.login form .wp-pwd:has(input:focus) > label,
body.login form .wp-pwd:has(input:not(:placeholder-shown)) > label {
	top: 0;
	transform: translateY(-50%) scale(0.85);
}

body.login form p:has(> label[for] + input:focus) > label,
body.login form .user-pass-wrap:has(input:focus) > label,
body.login form .wp-pwd:has(input:focus) > label {
	color: var(--wp--preset--color--accent);
}

body.login form input[type="text"],
body.login form input[type="password"] {
	width: 100%;
	height: 48px;
	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);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	box-shadow: none;
}

/*
 * WordPress envuelve el input de contraseña en `.wp-pwd` (junto al boton
 * "Mostrar" y, en "Contraseña nueva", el medidor de fuerza debajo) -ese
 * wrapper tiene su propio `position:relative` en el core y quedaba pintado
 * ENCIMA de la etiqueta, mismo bug en las tres pantallas. SIN alto fijo a
 * proposito: en "Contraseña nueva" el medidor de fuerza vive DENTRO de este
 * mismo `.wp-pwd`, forzarle 48px lo tapaba -la etiqueta ya no depende del
 * alto del contenedor porque usa `top` fijo, no porcentaje.
 */
body.login form .wp-pwd {
	position: relative;
}

body.login form input:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 var(--wp--custom--focus--width) var(--wp--preset--color--accent-surface);
}

/*
 * `wp-admin/css/forms.css` (que WordPress tambien encola en esta pantalla)
 * trae reglas por ID -`#user_pass`/`#pass1` con fondo blanco puro, distinto
 * del resto de los campos-. Un ID le gana a cualquier cantidad de clases
 * sin importar el orden de carga. Repetir los mismos IDs aca empata esa
 * cuenta, en los dos estados (normal y foco).
 */
#user_login,
#user_pass,
#pass1,
#pass1-text,
#pass2 {
	background: var(--wp--preset--color--base);
}

#user_login:focus,
#user_pass:focus,
#pass1:focus,
#pass1-text:focus,
#pass2:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 var(--wp--custom--focus--width) var(--wp--preset--color--accent-surface);
}

body.login form .wp-hide-pw {
	color: var(--wp--preset--color--contrast-alt);
}

body.login form .wp-hide-pw:hover {
	color: var(--wp--preset--color--contrast);
}

/*
 * Espaciado entre filas del formulario: WordPress trae un reset muy
 * agresivo (`.login *{margin:0;padding:0}`, wp-admin/css/login.css) que
 * vacia el margen de cualquier elemento sin una regla propia mas
 * especifica en el core -sin `!important` aca todo quedaba pegado.
 */
body.login form .forgetmenot {
	margin-bottom: 18px !important;
	color: var(--wp--preset--color--contrast-muted);
}

body.login form p.submit {
	margin-top: 4px !important;
}

body.login form p.description.indicator-hint {
	margin-top: 10px !important;
	margin-bottom: 18px !important;
}

body.login form .pw-weak {
	margin-top: 10px !important;
}

body.login form .pw-weak label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--contrast-alt);
}

/*
 * El boton principal ("Acceder"/"Obtener una contraseña nueva") no puede
 * usar la clase compartida `.auth-btn` -wp-login.php lo dibuja con su
 * propio marcado (`#wp-submit.button-primary`), sin forma de agregarle una
 * clase-, asi que se repiten aca los mismos valores, con la especificidad
 * que hace falta para ganarle a `login.min.css` (que WordPress encola en el
 * mismo enganche `login_enqueue_scripts`).
 *
 * `display:inline-flex` + centrado por flexbox, no `line-height`: el boton
 * de fabrica calcula el alto del texto con su propio `line-height` (pensado
 * para SU alto por defecto); al fijarle un alto propio sin resetear eso, el
 * texto queda corrido. Centrando con flexbox el texto queda en el medio sin
 * importar el alto que se le ponga a la caja.
 */
#wp-submit.button-primary,
.reset-pass-submit #wp-submit.button-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--wp--custom--target--min);
	padding: 0 var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	border-radius: var(--wp--preset--border-radius--medium);
	color: var(--wp--preset--color--accent-contrast);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	line-height: normal;
	text-shadow: none;
	box-shadow: none;
}

#wp-submit.button-primary:hover,
#wp-submit.button-primary:focus {
	background: var(--wp--preset--color--accent-strong);
	border-color: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--accent-contrast);
	box-shadow: none;
}

/*
 * "Contraseña nueva" trae un segundo boton ("Generar contraseña") al lado
 * del principal.
 */
.reset-pass-submit {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.reset-pass-submit .wp-generate-pw {
	height: var(--wp--custom--target--min);
	border-radius: var(--wp--preset--border-radius--medium);
	border-color: var(--wp--preset--color--hairline);
	background: var(--wp--preset--color--base-alt);
	color: var(--wp--preset--color--contrast-alt);
	box-shadow: none;
}

.reset-pass-submit .wp-generate-pw:hover {
	background: var(--wp--preset--color--hairline);
	border-color: var(--wp--preset--color--hairline);
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
	color: var(--wp--preset--color--contrast-alt);
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

/*
 * WordPress de fabrica centra `#nav` ("¿Has olvidado tu contraseña?" /
 * "Acceder") y el enlace de politica de privacidad, cada uno en su propia
 * linea. Se alinean contra el mismo borde izquierdo que la tarjeta
 * (`.auth-card`/`#login`, 440px) en vez de quedar centrados sueltos; cuando
 * los dos existen, `.auth-links-row` (armada por JS en inc/login.php) los
 * junta en un mismo renglon -aca solo queda el caso SIN esa fila.
 */
.login #nav,
.login #backtoblog,
.login .privacy-policy-page-link {
	width: 100%;
	max-width: 440px;
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}

.login .auth-links-row #nav,
.login .auth-links-row .privacy-policy-page-link {
	width: auto;
	margin: 0;
}

body.login #login_error,
body.login .message,
body.login .success {
	max-width: 440px;
	border: none;
	border-radius: var(--wp--preset--border-radius--small);
	box-shadow: none;
}

body.login #login_error {
	background: var(--wp--preset--color--danger-surface);
	color: var(--wp--preset--color--danger);
	border-left: 3px solid var(--wp--preset--color--danger);
}

body.login .message,
body.login .success {
	background: var(--wp--preset--color--success-surface);
	color: var(--wp--preset--color--success);
	border-left: 3px solid var(--wp--preset--color--success);
}

/* Selector de idioma: de fabrica de WordPress, no hace falta en un sitio
   de un solo idioma. */
body.login .language-switcher,
body.login #language-switcher {
	display: none;
}