/**
 * Pantalla de acceso.
 *
 * Se apoya en el marcado del login de WordPress y solo cambia el aspecto: así se
 * conserva intacto todo lo que ese formulario hace bien —intentos, recuperación
 * de contraseña, accesibilidad— y se cambia lo único que sobraba, que era parecer
 * de WordPress y no de la federación.
 */

body.login {
	background: var(--bg, #f4f5f7);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.login::before {
	/* Una banda de color arriba: es lo primero que se ve y lo que dice de quién
	   es esta puerta antes incluso de leer nada. */
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--primary, #004694) 0%, var(--primary, #004694) 62%, var(--accent, #f09104) 62%, var(--accent, #f09104) 100%);
}

#login {
	width: min(400px, calc(100vw - 32px));
	padding: 48px 0 24px;
}

#login h1 a {
	width: 100%;
	max-width: 250px;
	height: 84px;
	background-size: contain;
	background-position: center;
	margin: 0 auto 14px;
	text-indent: -9999px;
}

.selectrack-intro {
	margin: 0 0 16px;
	text-align: center;
	font-size: 13px;
	line-height: 1.5;
	color: #5a6476;
}

/* El contacto de la federación va pegado a la frase de arriba y con su mismo
   tono: suelto encima del formulario parecía un campo rellenado. */
.selectrack-atencion {
	margin: -10px 0 16px;
	text-align: center;
	font-size: 12px;
	line-height: 1.5;
	color: #5a6476;
}

.login form {
	background: #fff;
	border: 1px solid #eef0f3;
	border-radius: 10px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
	padding: 22px 22px 18px;
	margin-top: 0;
}

/* ── Con fotografía de fondo ───────────────────────────────────────────────
   La foto la elige la federación y puede ser cualquier cosa: una cancha con el
   parqué claro, una grada a contraluz, una foto de equipo con el cielo detrás.
   Sobre eso, un texto gris de 12 px no se lee. Así que en cuanto hay foto, todo
   lo que es texto suelto se pone blanco sobre un velo oscuro, y lo que es
   formulario se queda sobre una tarjeta opaca, que es donde se escribe.

   El velo es fijo y va en `::after` porque el `::before` ya lo ocupa la banda de
   color de arriba, que sigue mandando por encima de los dos. */
body.login.selectrack-con-fondo {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
	background-attachment: fixed;
}

body.login.selectrack-con-fondo::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: 0;
	background: linear-gradient(180deg, rgba(12, 18, 28, .62) 0%, rgba(12, 18, 28, .74) 100%);
}

body.login.selectrack-con-fondo #login,
body.login.selectrack-con-fondo .selectrack-temporada {
	position: relative;
	z-index: 1;
}

body.login.selectrack-con-fondo .selectrack-intro,
body.login.selectrack-con-fondo .selectrack-atencion {
	color: #fff;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

body.login.selectrack-con-fondo .selectrack-temporada,
body.login.selectrack-con-fondo #login #nav a,
body.login.selectrack-con-fondo .login .privacy-policy-page-link a {
	color: rgba(255, 255, 255, .82);
	text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

body.login.selectrack-con-fondo #login #nav a:hover {
	color: #fff;
}

body.login.selectrack-con-fondo form {
	border-color: rgba(255, 255, 255, .5);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .32);
}

/* El logotipo, sobre foto, con una sombra suave: muchos escudos son azul marino
   y sobre una grada oscura desaparecían. */
body.login.selectrack-con-fondo #login h1 a {
	filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .5));
}

.login label {
	font-size: 12px;
	font-weight: 600;
	color: #5a6476;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.4;
	padding: 9px 11px;
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: 6px;
	background: #fff;
	box-shadow: none;
	margin: 4px 0 0;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--primary, #004694);
	box-shadow: 0 0 0 3px rgba(0, 70, 148, .18);
	outline: none;
}

.login .button-primary,
.wp-core-ui .button-primary {
	width: 100%;
	height: 44px;
	float: none;
	display: block;
	font-size: 15px;
	font-weight: 600;
	border-radius: 6px;
	background: var(--primary, #004694);
	border-color: var(--primary, #004694);
	box-shadow: none;
	text-shadow: none;
}

.login .button-primary:hover,
.wp-core-ui .button-primary:hover,
.login .button-primary:focus,
.wp-core-ui .button-primary:focus {
	background: var(--primary-h, #003a7d);
	border-color: var(--primary-h, #003a7d);
	box-shadow: none;
}

.login .submit {
	margin-top: 6px;
}

.login .forgetmenot {
	float: none;
	margin: 12px 0 4px;
	font-size: 12.5px;
	line-height: 1.4;
}

.login .forgetmenot label {
	font-weight: 400;
	color: #5a6476;
}

.selectrack-temporada {
	margin: 18px 0 0;
	font-size: 11.5px;
	color: #9aa0aa;
	text-align: center;
}

#login #nav,
#login #backtoblog {
	text-align: center;
	opacity: .8;
	padding: 0;
	margin: 14px 0 0;
	font-size: 12.5px;
}

#login #nav a,
#login #backtoblog a,
.login .privacy-policy-page-link a {
	color: #5a6476;
	text-decoration: none;
}

#login #nav a:hover,
#login #backtoblog a:hover {
	color: var(--primary, #004694);
	text-decoration: underline;
}

.login .privacy-policy-page-link {
	margin: 18px 0 0;
}

.login .message,
.login .success,
.login #login_error {
	border-radius: 6px;
	border-left-width: 3px;
	font-size: 13px;
	line-height: 1.5;
	padding: 11px 13px;
	box-shadow: none;
}

.login #login_error {
	border-left-color: #d62828;
	background: #fde8e8;
}

@media (max-width: 560px) {
	#login { padding-top: 32px; }
	#login h1 a { height: 62px; }
}

/* La firma del pie, en la puerta. La hoja del portal no se carga en la pantalla
   de acceso de WordPress, así que las reglas viven también aquí — y con los
   valores escritos, porque tampoco llegan los tokens. */
.login .cvc-creditos-sep { display: none; }
.login .cvc-creditos {
	margin: 14px 0 0;
	font-size: 11px;
	color: #6b7280;
	text-align: center;
}
.login .cvc-creditos a { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, .18); }
.login .cvc-creditos a:hover { color: #1c2330; }

/* Sobre una fotografía manda el velo: el gris de siempre desaparece y hay que
   ir a blanco, igual que hace el resto del texto de esta pantalla. */
body.login.selectrack-con-fondo .cvc-creditos { color: rgba(255, 255, 255, .82); }
body.login.selectrack-con-fondo .cvc-creditos a { border-bottom-color: rgba(255, 255, 255, .45); }
body.login.selectrack-con-fondo .cvc-creditos a:hover { color: #fff; }