/* ═══════════════════════════════════════════════════════════════════
   Pantalla de acceso — parche corporativo.
   Carga tras tokens.css y fonts.css del tema (punto único de verdad).

   Composición: el mismo lenguaje del documento de la guía — raíl
   lateral con el panal sobre Lila 100 (§08), isotipo en plana lila
   (§01), tarjeta con línea y radio de la marca, etiquetas en mono, y
   UNA sola acción amarilla: «Acceder» (§09).
   ═══════════════════════════════════════════════════════════════════ */

body.login {
	background: var(--marca-blanco);
	font-family: var(--tipo-titular);
	color: var(--marca-negro);
	padding-left: 64px;
}

/* Raíl lateral: panal a trazo 1 px sobre Lila 100, recortado por una
   forma con sentido (la banda), nunca a página completa — guía §08. */
body.login::before {
	content: '';
	position: fixed;
	inset: 0 auto 0 0;
	width: 62px;
	background-color: var(--lila-100);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31.18' height='53.32'%3E%3Cg fill='none' stroke='%237A4DB8' stroke-width='1'%3E%3Cpath d='M0 0V53.32M15.59 0V53.32'/%3E%3Cpath d='M0-17.66l15.59 8.66v18L0 17.66l-15.59-8.66v-18z'/%3E%3Cpath d='M31.18-17.66l15.59 8.66v18l-15.59 8.66-15.59-8.66v-18z'/%3E%3Cpath d='M15.59 8.99l15.59 8.67v18l-15.59 8.66L0 35.66v-18z'/%3E%3Cpath d='M0 35.66l15.59 8.66v18L0 71l-15.59-8.68v-18z'/%3E%3Cpath d='M31.18 35.66l15.59 8.66v18L31.18 71l-15.59-8.68v-18z'/%3E%3C/g%3E%3C/svg%3E");
	border-right: 1px solid var(--linea);
}

#login {
	width: 384px;
	padding: 9vh 0 40px;
}

/* ── Isotipo: plana lila, geometría exacta de §01 ── */
.login h1 a,
.login .wp-login-logo a {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cg fill='%237A4DB8'%3E%3Cpath d='M100 0 L150 50 L100 100 Z'/%3E%3Cpath d='M200 100 L150 150 L100 100 Z'/%3E%3Cpath d='M100 200 L50 150 L100 100 Z'/%3E%3Cpath d='M0 100 L50 50 L100 100 Z'/%3E%3C/g%3E%3C/svg%3E");
	background-size: 56px;
	background-position: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 16px;
}

/* ── Cabecera de la tarjeta (la inyecta el parche vía login_message) ── */
.aula-login-cabecera {
	text-align: center;
	margin: 0 0 26px;
}

.aula-login-titulo {
	font-size: 24px;
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
	color: var(--marca-negro);
}

.aula-login-sub {
	font-family: var(--tipo-dato);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--lila-600);
	margin: 7px 0 0;
}

/* ── La tarjeta ── */
.login form {
	background: #fff;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	box-shadow: none;
	padding: 28px 26px 26px;
	margin-top: 0;
}

/* Etiquetas de campo: mono en versalitas, como en la guía. */
.login form p > label,
.login .user-pass-wrap > label {
	font-family: var(--tipo-dato);
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lila-600);
}

.login form .input,
.login input[type='text'],
.login input[type='password'] {
	font-family: var(--tipo-titular);
	font-size: 15px;
	padding: 10px 12px;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	box-shadow: none;
	margin: 6px 0 18px;
	background: #fff;
	color: var(--marca-negro);
}

.login form .input:focus,
.login input[type='text']:focus,
.login input[type='password']:focus {
	border-color: var(--marca-lila);
	box-shadow: 0 0 0 1px var(--marca-lila);
	outline: none;
}

/* Botón del ojo (mostrar contraseña) */
.login .button.wp-hide-pw {
	color: var(--lila-600);
	margin-top: 3px;
}

.login .button.wp-hide-pw:hover { color: var(--marca-lila); }

.login .button.wp-hide-pw:focus {
	border-color: var(--marca-lila);
	box-shadow: 0 0 0 1px var(--marca-lila);
	color: var(--marca-lila);
}

/* «Recuérdame»: interfaz normal, no etiqueta de campo. */
.login .forgetmenot {
	float: none;
	margin: 0 0 8px;
}

.login .forgetmenot label {
	font-family: var(--tipo-titular);
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--gris-texto);
}

.login input[type='checkbox'] {
	border: 1px solid var(--linea);
	border-radius: 4px;
	box-shadow: none;
}

.login input[type='checkbox']:focus {
	border-color: var(--marca-lila);
	box-shadow: 0 0 0 1px var(--marca-lila);
}

.login input[type='checkbox']:checked {
	background: var(--marca-lila);
	border-color: var(--marca-lila);
}

.login input[type='checkbox']:checked::before {
	filter: brightness(0) invert(1);   /* la marca de verificación, en blanco */
}

/* ── La única acción amarilla de la pantalla — §09 ── */
.login .submit { float: none; }

.login .button-primary,
.wp-core-ui .button-primary {
	display: block;
	width: 100%;
	float: none;
	background: var(--marca-amarillo);
	border: none;
	color: var(--amarillo-900);
	font-family: var(--tipo-titular);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	padding: 13px 18px;
	border-radius: var(--radio);
	text-shadow: none;
	box-shadow: none;
	margin-top: 8px;
}

.login .button-primary:hover,
.login .button-primary:active {
	background: var(--marca-amarillo);
	color: var(--amarillo-900);
	filter: brightness(0.97);
}

.login .button-primary:focus {
	background: var(--marca-amarillo);
	color: var(--amarillo-900);
	outline: 2px solid var(--marca-lila);
	outline-offset: 3px;
	box-shadow: none;
}

/* ── Bajo la tarjeta ── */
.login #nav {
	text-align: center;
	font-size: 14px;
	color: var(--gris-texto);
}

.login #nav a { color: var(--lila-600); }
.login #nav a:hover { color: var(--marca-lila); }

/* El aula es privada: la portada devuelve aquí, y a la portada ya
   enlaza el isotipo. El «← Ir a…» sólo delata el WordPress. */
.login #backtoblog { display: none; }

/* ── Avisos ── */
.login .message,
.login .success {
	border-left: 3px solid var(--marca-amarillo);
	background: #fffbf0;
	color: var(--amarillo-900);
	border-radius: 0;
	box-shadow: none;
}

/* #A32D2D es el rojo «falla» de la guía §06: único color funcional
   que no sale de tokens.css, documentado aquí a propósito. */
.login #login_error {
	border-left: 3px solid #a32d2d;
	background: #fcf1f1;
	color: #7a2222;
	border-radius: 0;
	box-shadow: none;
}

.login #login_error a { color: #7a2222; }

/* ── Móvil: el raíl pasa a banda superior, como en la guía ── */
@media (max-width: 600px) {
	body.login { padding-left: 0; padding-top: 10px; }

	body.login::before {
		inset: 0 0 auto 0;
		width: 100%;
		height: 10px;
		border-right: 0;
		border-bottom: 1px solid var(--linea);
	}

	#login {
		width: auto;
		max-width: 384px;
		padding: 40px 20px 32px;
		margin: 0 auto;
	}
}