/*
 * Pantalla de acceso (wp-login.php): entrar, registro, contraseña olvidada y
 * el código del doble factor, que usan el mismo marcado. Como los campos del
 * formulario del tema (blocks/formulario/style.css) y su botón.
 *
 * wp-login.php no carga theme.json: las variables --wp--preset--* y las
 * fuentes se las pasa functions.php. Se encola después de las hojas del core,
 * así que con el mismo peso gana esta.
 */

/* El core pinta foco, casilla, enlaces y botones con estas tres variables: con
   el verde aquí, todo eso ya sale de la marca sin una regla por pieza. */
body.login {
	--wp-admin-theme-color: var(--wp--preset--color--primary);
	--wp-admin-theme-color-darker-10: var(--wp--preset--color--primary-dark);
	--wp-admin-theme-color-darker-20: var(--wp--preset--color--primary-dark);
	background-color: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--work-sans);
	font-size: var(--wp--preset--font-size--medium);
}

/* 400 de formulario más el relleno lateral global a cada lado. */
#login {
	box-sizing: border-box;
	max-width: calc(400px + 2 * var(--wp--preset--spacing--40));
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--40) 0;
	width: 100%;
}

/* El logo verde de la cabecera; el enlace va a la portada (functions.php). */
.login h1 a {
	background-image: url(../images/greenpeace-logo-verde.svg);
	background-size: contain;
	height: 29px;
	margin-bottom: var(--wp--preset--spacing--60);
	width: 184px;
}

/* Tarjeta del design system: blanca, sin radio, sin borde, sin sombra. */
.login form {
	border: 0;
	box-shadow: none;
	padding: var(--wp--preset--spacing--60);
}

.login label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	margin-bottom: var(--wp--preset--spacing--20);
}

.login .forgetmenot label,
.login .pw-weak label {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 400;
}

/* --- campos ---------------------------------------------------------------- */

.login form .input,
.login input[type="text"],
.login input[type="password"] {
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 0;
	box-sizing: border-box;
	font-family: inherit;
	font-size: var(--wp--preset--font-size--large);
	margin: 0 0 var(--wp--preset--spacing--50);
	min-height: 48px;
	padding: var(--wp--preset--spacing--30);
}

.login input:focus {
	border-color: var(--wp--preset--color--muted);
	box-shadow: none;
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 1px;
}

/* El ojo de la contraseña, a la altura del campo. */
.login .button.wp-hide-pw {
	color: var(--wp--preset--color--contrast);
	height: 48px;
}

/* "Recuérdame" encima del botón, que va a todo el ancho. */
#login form .forgetmenot {
	float: none;
	margin-bottom: var(--wp--preset--spacing--50);
}

/* --- botones --------------------------------------------------------------- */

.login .button {
	border-radius: 0;
}

/* El botón del tema (theme.json → elements.button). Clase doblada: el core
   pone el tamaño con .button.button-large. */
.login .button.button-primary {
	background-color: var(--wp--preset--color--primary);
	border: 0;
	float: none;
	font-family: var(--wp--preset--font-family--rubik);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 700;
	line-height: normal;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	text-transform: uppercase;
	width: 100%;
}

.login .button.button-primary:hover {
	background-color: var(--wp--preset--color--contrast);
}

/* --- avisos y enlaces ------------------------------------------------------ */

/* Raya a la izquierda y fondo blanco, como el aviso de error de los campos. */
.login .message,
.login .notice,
.login .success,
.login .notice-error {
	background-color: var(--wp--preset--color--base);
	border-left: 3px solid var(--wp--preset--color--primary);
	padding: var(--wp--preset--spacing--40);
}

.login .notice-error {
	border-left-color: var(--wp--preset--color--secondary);
}

.login .message p,
.login .notice p,
.login .success p {
	font-size: var(--wp--preset--font-size--medium);
	margin: 0;
}

.login #nav,
.login #backtoblog {
	font-size: var(--wp--preset--font-size--medium);
	padding: 0 var(--wp--preset--spacing--60);
}

.login #nav a,
.login #backtoblog a {
	color: var(--wp--preset--color--contrast);
}