/*
 * Pantalla de acceso de Password Protected.
 *
 * El plugin carga esta hoja el solo si existe en el tema -lo hace con
 * locate_template(), asi que vale en el tema hijo-, y la encola DESPUES de la
 * suya: por eso aqui basta con redefinir, sin pelearse a base de !important
 * mas que en lo que el plugin marca en linea.
 *
 * La pantalla es la primera impresion de quien llega al Club mientras esta
 * cerrado, y de serie se ve como un wp-login cualquiera. Aqui se le pone el
 * logo, el aviso y los colores de la casa.
 *
 * El logo se referencia en relativo (images/) para que funcione en cualquier
 * entorno. Una URL absoluta guardada en base de datos es justo lo que rompio
 * en su dia la fuente de iconos: cuando el dominio del entorno no coincide,
 * el navegador bloquea el archivo y no se dibuja nada.
 */

:root {
	--helios-rojo: #f22e36;
	--helios-rojo-oscuro: #d41f27;
	--helios-texto: #2b2b2b;
	--helios-suave: #6b7280;
	--helios-borde: #e5e7eb;
}

body.login-password-protected {
	/* WordPress pinta el boton y los aros de foco con la variable de su esquema
	   de color (aqui, el azul de "moderno"). Redefinirla de una vez deja toda
	   la pantalla coherente, en lugar de ir persiguiendo regla por regla. */
	--wp-admin-theme-color: #f22e36;
	--wp-admin-theme-color-darker-10: #d41f27;
	--wp-admin-theme-color-darker-20: #b71a21;

	background: #f3f4f6;
	font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
	color: var(--helios-texto);
	/* Centrado vertical: el plugin deja el bloque arriba del todo. */
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	margin: 0;
	padding: 24px 16px;
	box-sizing: border-box;
}

body.login-password-protected #login {
	width: 100%;
	max-width: 420px;
	padding: 0;
	margin: 0;
}

/* --- El logo, en lugar del nombre del sitio ------------------------------ */

body.login-password-protected h1#password-protected-logo {
	margin: 0 0 22px;
	text-align: center;
}

body.login-password-protected h1#password-protected-logo a {
	display: block;
	width: 190px;
	height: 70px;
	margin: 0 auto;
	background-image: url("images/logo-club-helios.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	/* El enlace lleva dentro el nombre del sitio: se aparta de la vista sin
	   quitarlo del documento, que es lo que leen los lectores de pantalla. */
	text-indent: -9999px;
	overflow: hidden;
	outline-offset: 6px;
}

/* --- El aviso ------------------------------------------------------------ */

body.login-password-protected .helios-pp__aviso {
	margin: 0 0 18px;
	text-align: center;
	font-size: 17px;
	line-height: 1.45;
	color: var(--helios-suave);
	background: none;
	border: 0;
	box-shadow: none;
	padding: 0;
}

/* --- La tarjeta ---------------------------------------------------------- */

body.login-password-protected form {
	margin: 0;
	padding: 28px 26px 24px;
	background: #ffffff;
	border: 1px solid var(--helios-borde);
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba(17, 24, 39, 0.07);
	overflow: visible;
}

body.login-password-protected label {
	display: block;
	margin-bottom: 7px;
	font-size: 14px;
	font-weight: 600;
	color: var(--helios-texto);
}

body.login-password-protected .user-pass-wrap {
	margin-bottom: 18px;
}

body.login-password-protected .wp-pwd {
	position: relative;
}

body.login-password-protected input[type="password"],
body.login-password-protected input[type="text"] {
	width: 100%;
	padding: 12px 44px 12px 14px;
	border: 1px solid var(--helios-borde);
	border-radius: 8px;
	background: #fff;
	/* 16px para que iOS no haga zoom al enfocar el campo. */
	font-size: 16px;
	line-height: 1.4;
	box-shadow: none;
	box-sizing: border-box;
}

body.login-password-protected input[type="password"]:focus,
body.login-password-protected input[type="text"]:focus {
	border-color: var(--helios-rojo);
	box-shadow: 0 0 0 3px rgba(242, 46, 54, 0.15);
	outline: 2px solid transparent;
}

/* El ojo de ver la contrasena: el plugin lo pinta como boton de WordPress. */
body.login-password-protected .wp-pwd .button.wp-hide-pw {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--helios-suave);
	cursor: pointer;
}

body.login-password-protected .wp-pwd .button.wp-hide-pw:hover {
	color: var(--helios-rojo);
}

body.login-password-protected .wp-pwd .button.wp-hide-pw .dashicons {
	width: 20px;
	height: 20px;
	font-size: 20px;
	line-height: 1;
	vertical-align: middle;
}

/* --- Recuerdame y boton -------------------------------------------------- */

body.login-password-protected .forgetmenot {
	float: none;
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.4;
}

body.login-password-protected .forgetmenot label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-weight: 400;
	color: var(--helios-suave);
}

body.login-password-protected .forgetmenot input[type="checkbox"] {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin: 0;
}

body.login-password-protected .submit {
	margin: 0;
	padding: 0;
	float: none;
}

body.login-password-protected #wp-submit {
	display: block;
	width: 100%;
	height: auto;
	padding: 13px 18px;
	border: 0;
	border-radius: 8px;
	background: var(--helios-rojo);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-shadow: none;
	box-shadow: none;
	cursor: pointer;
}

body.login-password-protected #wp-submit:hover,
body.login-password-protected #wp-submit:focus {
	background: var(--helios-rojo-oscuro);
	transition: background-color 0.15s ease;
}

body.login-password-protected #wp-submit:focus {
	box-shadow: 0 0 0 3px rgba(242, 46, 54, 0.25);
	outline: 2px solid transparent;
}

/* --- Avisos de error ----------------------------------------------------- */

body.login-password-protected #login_error,
body.login-password-protected .message {
	margin: 0 0 16px;
	padding: 12px 14px;
	border: 1px solid var(--helios-borde);
	border-left: 4px solid var(--helios-rojo);
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	line-height: 1.45;
	box-shadow: none;
}

/* --- Pie ----------------------------------------------------------------- */

body.login-password-protected #backtoblog,
body.login-password-protected #nav {
	margin: 16px 0 0;
	text-align: center;
	font-size: 13px;
}

body.login-password-protected #backtoblog a,
body.login-password-protected #nav a {
	color: var(--helios-suave);
	text-decoration: none;
}

body.login-password-protected #backtoblog a:hover,
body.login-password-protected #nav a:hover {
	color: var(--helios-rojo);
	text-decoration: underline;
}

@media (max-width: 480px) {
	body.login-password-protected form {
		padding: 22px 18px 20px;
	}

	body.login-password-protected h1#password-protected-logo a {
		width: 160px;
		height: 60px;
	}
}