/* CATASTRO — la piel de `wp-login.php`.
 *
 * FICHERO APARTE Y NO UN BLOQUE DE `catastro.css`, y la razón es de alcance:
 * todo lo de aquí son ANULACIONES de la hoja del núcleo, escritas contra
 * selectores que no son nuestros (`#login`, `.login h1 a`, `#wp-submit`). Esa
 * clase de regla envejece con WordPress y no con el registro, así que vive
 * donde se pueda revisar entera el día que una actualización la mueva.
 *
 * DEPENDE DE `catastro.css`, QUE SE CARGA ANTES Y NO SE DUPLICA: de allí salen
 * los tokens de la paleta D1 (`--marron`, `--papel`, `--linea`, `--realce`…) y
 * los `@font-face` de IBM Plex. Aquí no se redeclara ni un color ni una fuente
 * — una paleta definida dos veces es una paleta que se separa.
 *
 * LO QUE ESTA HOJA NO HACE, y es la frontera del paquete: no toca el
 * formulario, ni sus campos, ni los nonces, ni «Recuérdame», ni el
 * restablecimiento de contraseña, ni el selector de idioma. Cambia cómo se ven,
 * nunca qué hacen. Esa pantalla la mantiene el núcleo y la audita todo el
 * mundo; lo único que se corrige aquí es que no parecía este sitio.
 */

/* --- La página ---------------------------------------------------------- */
body.login {
	background: var(--papel);
	color: var(--tinta);
	font-family: var(--sans);
}

#login {
	width: 340px;
	padding: 5% 0 0;
}

/* --- EL LOGO, QUE ERA UNA W --------------------------------------------
 * El marcado siempre dijo CATASTRO —`login_headertext` ya lo ponía—, y la
 * pantalla pintaba la W de WordPress: el núcleo esconde el texto con
 * `text-indent: -9999px` sobre una caja de 84×84 y dibuja el logo como
 * `background-image`. Es el caso exacto de la familia de fallos del proyecto:
 * el HTML servido decía una cosa y la pantalla otra, y ninguna comprobación
 * sobre el marcado lo habría visto.
 *
 * Las cinco propiedades se anulan JUNTAS o no sirve de nada: quitar solo la
 * imagen deja una caja vacía de 84 px, y quitar solo el `text-indent` saca el
 * texto de debajo del logo pero lo recorta contra el alto fijo.
 *
 * La palabra se lee como en la cabecera del sitio: marrón de marca, semibold,
 * sin subrayado. Es el mismo enlace a la portada que hay allí.
 */
body.login h1 { margin: 0 0 1.5rem; }

body.login h1 a {
	background-image: none;
	width: auto;
	height: auto;
	text-indent: 0;
	overflow: visible;
	display: block;
	margin: 0;
	padding: 0;
	font-family: var(--sans);
	font-size: 30px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--marron);
	text-decoration: none;
}

body.login h1 a:hover,
body.login h1 a:focus {
	color: var(--marron);
	text-decoration: underline;
	box-shadow: none;
	outline: 0;
}

body.login h1 a:focus-visible { outline: 2px solid var(--marron); outline-offset: 3px; }

/* --- La caja del formulario --------------------------------------------
 * Mismo tratamiento que las tarjetas del sitio: borde de línea, radio 3, fondo
 * de realce. Fuera la sombra y el borde azulado del núcleo — no son de esta
 * paleta, y la sombra es lo que hacía que la caja flotara sobre el papel en
 * vez de apoyarse en él.
 */
.login form {
	background: var(--realce);
	border: 1px solid var(--linea);
	border-radius: 3px;
	box-shadow: none;
	margin-top: 0;
	padding: 1.5rem 1.4rem;
}

.login label,
.login form .forgetmenot label {
	color: var(--tinta);
	font-size: 15px;
}

/* --- Los campos, con el mismo cuerpo y el mismo foco que los del sitio ---
 * El núcleo los pinta a 24px —tamaño de pantalla de administración— y marca el
 * foco con borde y sombra azules. Aquí van al cuerpo del sitio y el foco es el
 * mismo contorno marrón que en el buscador y en el formulario de alta: un solo
 * indicador de foco en todo el sitio, o el visitante aprende dos.
 */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
.login .input {
	font-family: var(--sans);
	font-size: 17px;
	color: var(--tinta);
	background: var(--papel);
	border: 1px solid var(--linea);
	border-radius: 2px;
	box-shadow: none;
	padding: 0.5rem 0.7rem;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus,
.login .input:focus {
	border-color: var(--linea);
	box-shadow: none;
	outline: 2px solid var(--marron);
	outline-offset: 1px;
}

.login input[type="checkbox"] { border-color: var(--linea); }
.login input[type="checkbox"]:checked::before { filter: none; }
.login input[type="checkbox"]:focus {
	border-color: var(--linea);
	box-shadow: none;
	outline: 2px solid var(--marron);
	outline-offset: 1px;
}

/* El ojo que enseña la contraseña: es del núcleo y sigue funcionando igual;
 * solo deja de ser azul. */
.login .button.wp-hide-pw,
.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw:focus {
	color: var(--tinta-suave);
	background: transparent;
	border: 0;
	box-shadow: none;
}
.login .button.wp-hide-pw:focus-visible { outline: 2px solid var(--marron); outline-offset: 1px; }

/* --- Los botones --------------------------------------------------------
 * `#wp-submit` es exactamente `.c-boton`, que es el botón con el que el
 * formulario de alta manda «Crear la cuenta». Son las dos mitades de la misma
 * puerta y tienen que verse iguales: si entrar y crear cuenta se pintaran
 * distinto, parecerían dos sitios.
 *
 * Por `#id` y no por `.button-primary` a propósito: la regla del núcleo es
 * `.wp-core-ui .button-primary`, así que una clase sola perdería la
 * especificidad y el azul volvería sin que nadie tocara nada.
 */
.login #wp-submit,
.login .button-primary,
.login .button-secondary,
.login .language-switcher .button {
	font-family: var(--sans);
	font-size: 16px;
	font-weight: 400;
	text-shadow: none;
	color: var(--marron);
	background: transparent;
	border: 1px solid var(--marron);
	border-radius: 2px;
	box-shadow: none;
	padding: 0.4rem 0.9rem;
	height: auto;
	line-height: 1.4;
}

.login #wp-submit:hover,
.login .button-primary:hover,
.login .button-secondary:hover,
.login .language-switcher .button:hover {
	color: var(--marron);
	background: var(--realce);
	border-color: var(--marron);
}

.login #wp-submit:focus-visible,
.login .button-primary:focus-visible,
.login .button-secondary:focus-visible,
.login .language-switcher .button:focus-visible {
	outline: 2px solid var(--marron);
	outline-offset: 1px;
	box-shadow: none;
}

/* --- Los enlaces de debajo ---------------------------------------------
 * `#nav` es «¿Has olvidado tu contraseña?» y `#backtoblog` la vuelta al sitio,
 * los dos del núcleo. Iban en gris apagado, que en esta paleta no es un color
 * de enlace: aquí el marrón es el color de enlace y de nada más, así que un
 * enlace que no lo lleva no parece pulsable.
 */
.login #nav,
.login #backtoblog {
	padding: 0;
	font-size: 15px;
}

.login #nav { margin: 1.25rem 0 0; }
.login #backtoblog { margin: 0.5rem 0 0; }

.login #nav a,
.login #backtoblog a {
	color: var(--marron);
	text-underline-offset: 0.15em;
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--marron);
	text-decoration-thickness: 2px;
}

.login #nav a:focus-visible,
.login #backtoblog a:focus-visible {
	outline: 2px solid var(--marron);
	outline-offset: 2px;
	box-shadow: none;
}

/* El selector de idioma del núcleo: se queda entero y funcionando; solo toma
 * el borde y el cuerpo del sitio. */
.login .language-switcher { margin-top: 1.5rem; }
.login .language-switcher select {
	font-family: var(--sans);
	font-size: 16px;
	color: var(--tinta);
	background-color: var(--papel);
	border-color: var(--linea);
	box-shadow: none;
}
.login .language-switcher select:focus {
	border-color: var(--linea);
	box-shadow: none;
	outline: 2px solid var(--marron);
	outline-offset: 1px;
}

/* --- Avisos y errores ---------------------------------------------------
 * Mismo tratamiento que el error del formulario de aviso: filete a la
 * izquierda y fondo de realce, sin gritar. El rojo y el naranja del núcleo no
 * están en la paleta D1, y el verde de aquí está reservado a «verificado».
 */
.login .notice,
.login #login_error,
.login .message,
.login .success {
	background: var(--realce);
	border: 0;
	border-left: 3px solid var(--marron);
	border-radius: 0;
	box-shadow: none;
	color: var(--tinta);
	font-size: 16px;
	padding: 0.8rem 1rem;
	margin: 0 0 1.25rem;
}

/* --- La salida hacia el alta -------------------------------------------
 * Lo único que este tema IMPRIME en esta pantalla; el resto de esta hoja solo
 * repinta lo que ya estaba. Va debajo de todo porque es la salida de quien no
 * puede usar el formulario de arriba.
 */
.c-login__alta {
	margin: 1.75rem auto 0;
	max-width: 340px;
	text-align: center;
	font-size: 15px;
}