/*
 * Entrada (wp-login.php): entrar, recuperar la contraseña y el segundo paso de Two Factor, con los colores, las letras
 * y el logo de la web. WordPress no carga theme.json ni tema.css en esa pantalla, así que aquí van a mano los valores
 * de theme.json (paleta, letras y botón) y las letras se declaran desde el propio tema. Solo marcado de wp-login.php.
 */

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 100 1000;
	font-display: swap;
	src: url("../fonts/dm-sans-latin-wght-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Playfair Display";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/playfair-display-latin-wght-normal.woff2") format("woff2");
}

/* Paleta de theme.json. */
body.login {
	--jl-negro: #0d0b0e;
	--jl-ciruela: #1b141b;
	--jl-borde: #4b2b3c;
	--jl-vino: #5a253e;
	--jl-rosa: #e7a4bd;
	--jl-blanco-roto: #f5e9ef;
	--jl-texto-suave: #d0bec8;
	--jl-tinta: #1a1017;
	--jl-borde-campo: #8d6f80;
	--jl-error: #ff8a95;

	background: radial-gradient(circle at 85% 20%, var(--jl-vino) 0%, #130d13 45%, var(--jl-negro) 75%) fixed var(--jl-negro);
	color: var(--jl-blanco-roto);
	font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
}

/* Logo de la web en lugar del de WordPress (el texto del enlace sigue para el lector de pantalla). */
.login h1.wp-login-logo a {
	background: url("../img/logo.svg") no-repeat center / contain;
	width: 100%;
	max-width: 280px;
	height: 120px;
	margin: 0 auto 24px;
}

/* Tarjeta del formulario, como las tarjetas de la web: ciruela, borde y esquinas rectas. */
.login form {
	background: var(--jl-ciruela);
	border: 1px solid var(--jl-borde);
	border-radius: 0;
	box-shadow: none;
	color: var(--jl-texto-suave);
}

.login label,
.login .forgetmenot label {
	color: var(--jl-texto-suave);
	font-size: 15px;
}

/* Campos: fondo negro, letra clara y borde de campo de la web (3:1 o más sobre el fondo). */
.login input[type="text"],
.login input[type="email"],
.login input[type="password"],
.login input[type="number"],
.login input[type="tel"] {
	background: var(--jl-negro);
	border: 1px solid var(--jl-borde-campo);
	border-radius: 0;
	color: var(--jl-blanco-roto);
	font-family: inherit;
	font-size: 18px;
}

.login input[type="checkbox"] {
	background: var(--jl-negro);
	border-color: var(--jl-borde-campo);
	border-radius: 0;
}

/* Casilla marcada: rosa con la marca en tinta (la de WordPress es un icono azul). */
.login input[type="checkbox"]:checked {
	background: var(--jl-rosa);
	border-color: var(--jl-rosa);
}

.login input[type="checkbox"]:checked::before {
	content: "";
	display: block;
	width: 5px;
	height: 9px;
	margin: 1px auto 0;
	border: solid var(--jl-tinta);
	border-width: 0 2px 2px 0;
	background: none;
	transform: rotate(45deg);
}

/* Foco visible en rosa en todo lo que se puede pulsar o escribir. */
.login input:focus,
.login input:focus-visible,
.login .button:focus,
.login .button:focus-visible,
.login a:focus,
.login a:focus-visible {
	border-color: var(--jl-rosa);
	box-shadow: 0 0 0 2px var(--jl-rosa);
	outline: 2px solid transparent;
}

/* Ojo de «Mostrar contraseña»: claro sobre el campo negro y de 44 px para el dedo. */
.login .wp-pwd .button.wp-hide-pw {
	color: var(--jl-texto-suave);
	min-width: 44px;
	min-height: 44px;
}

.login .wp-pwd .button.wp-hide-pw:hover {
	color: var(--jl-rosa);
}

/* Botón principal como el de la web: rosa, letra tinta (9:1), recto y en mayúsculas. */
.login .button-primary,
.wp-core-ui.login .button-primary {
	background: var(--jl-rosa);
	border: 1px solid var(--jl-rosa);
	border-radius: 0;
	box-shadow: none;
	color: var(--jl-tinta);
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.04em;
	min-height: 44px;
	padding: 0 22px;
	text-shadow: none;
	text-transform: uppercase;
}

.login .button-primary:hover,
.wp-core-ui.login .button-primary:hover {
	background: var(--jl-blanco-roto);
	border-color: var(--jl-blanco-roto);
	color: var(--jl-tinta);
}

/* Las reglas del núcleo para el ojo y Ayuda, y la del botón principal de arriba,
   ganan al foco genérico. Contorno separado: sigue visible junto al botón rosa. */
body.login :is(#wp-submit, .wp-pwd .button.wp-hide-pw, .wp-tooltip__toggle, .wp-tooltip__close):focus-visible {
	outline: 2px solid var(--jl-rosa);
	outline-offset: 3px;
	box-shadow: none;
	border-color: var(--jl-rosa);
}

/* Botones secundarios (Two Factor, «Generar contraseña»…): contorno rosa. */
.login .button:not(.button-primary):not(.wp-hide-pw),
.wp-core-ui.login .button:not(.button-primary):not(.wp-hide-pw) {
	background: transparent;
	border: 1px solid var(--jl-rosa);
	border-radius: 0;
	color: var(--jl-rosa);
}

/* Avisos (también el de «se ha cerrado tu sesión» del plugin): oscuros, con la raya de la marca. */
.login .message,
.login .notice,
.login .success,
.login #login_error {
	background: var(--jl-ciruela);
	border: 1px solid var(--jl-borde);
	border-left: 4px solid var(--jl-rosa);
	box-shadow: none;
	color: var(--jl-blanco-roto);
}

.login #login_error,
.login .notice-error {
	border-left-color: var(--jl-error);
}

.login .message a,
.login .notice a,
.login #login_error a {
	color: var(--jl-rosa);
}

/* Enlaces de debajo: «¿Has olvidado tu contraseña?», «Ir a Jessi Lashes» y privacidad. */
.login #nav,
.login #backtoblog,
.login .privacy-policy-page-link {
	font-size: 15px;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
	color: var(--jl-texto-suave);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover {
	color: var(--jl-rosa);
}

/* Titulares que pinta WordPress en algunas pantallas (Two Factor, contraseña nueva), en Playfair. */
.login h1:not(.wp-login-logo),
.login h2,
.login .admin-email__heading {
	color: var(--jl-blanco-roto);
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 400;
}

.login .description,
.login .indicator-hint {
	color: var(--jl-texto-suave);
}