/* ------------------------------------------------------------------
   Personalización de wp-login.php con la identidad de marca Vittarial.
   Variables --vit-* definidas también aquí porque wp-login.php no
   carga blocks-mwm.css.
------------------------------------------------------------------ */
:root {
	--vit-dark:         #102e3e;
	--vit-slate:        #415c6b;
	--vit-teal:         #25dbbf;
	--vit-mint:         #aae3db;
	--vit-bg:           #f8f7f6;
	--vit-font-heading: 'Outfit', sans-serif;
	--vit-font-body:    'Urbanist', sans-serif;
}

body.login {
	background-color: var(--vit-bg);
	background-image: radial-gradient(circle at 50% 0%, rgba(37, 219, 191, 0.18), transparent 60%);
	font-family: var(--vit-font-body);
}

body.login #login {
	width: 100%;
	max-width: 400px;
	padding: 40px 20px;
}

/* Logo / nombre del sitio ------------------------------------------------ */

body.login #login h1 {
	margin: 0 0 24px;
}

body.login #login h1 a {
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	max-width: 220px;
	height: 84px;
	margin: 0 auto;
	padding: 0;
}

/* Sin logo asignado en el personalizador: mostramos el nombre del sitio */
body.login.mwm-login--no-logo #login h1 a {
	background-image: none;
	height: auto;
	max-width: none;
	overflow: visible;
	text-indent: 0;
	color: var(--vit-dark);
	font-family: var(--vit-font-heading);
	font-size: 28px;
	font-weight: 600;
}

/* Formulario -------------------------------------------------------------- */

body.login #login form {
	background: #fff;
	border: 1px solid rgba(16, 46, 62, 0.08);
	border-radius: 16px;
	box-shadow: 0 24px 48px rgba(16, 46, 62, 0.12);
	padding: 32px 32px 24px;
}

/* Registro: texto de aviso bajo los campos ("Se te enviará un enlace…") */
body.login #reg_passmail {
	color: var(--vit-slate);
	font-family: var(--vit-font-body);
	font-size: 13px;
	line-height: 1.4;
	margin: 0 0 20px;
}

body.login label {
	color: var(--vit-dark);
	font-family: var(--vit-font-body);
	font-size: 14px;
	font-weight: 600;
}

body.login input[type=text],
body.login input[type=password],
body.login input[type=email] {
	background: #fff;
	border: 1px solid rgba(16, 46, 62, 0.15);
	border-radius: 8px;
	box-shadow: none;
	color: var(--vit-dark);
	font-family: var(--vit-font-body);
	font-size: 15px;
	padding: 10px 14px;
}

body.login input[type=text]:focus,
body.login input[type=password]:focus,
body.login input[type=email]:focus {
	border-color: var(--vit-teal);
	box-shadow: 0 0 0 3px rgba(37, 219, 191, 0.25);
	outline: none;
}

body.login input[type=checkbox] {
	accent-color: var(--vit-teal);
}

body.login .forgetmenot label {
	color: var(--vit-dark);
	font-weight: 400;
}

/* Botón principal ----------------------------------------------------------
   Especificidad + !important porque el esquema de color de wp-admin
   aplica sus propios estilos a .button-primary con la misma técnica. */

body.login .wp-core-ui .button-primary,
body.login #wp-submit {
	background: var(--vit-teal) !important;
	border: none !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	color: var(--vit-dark) !important;
	font-family: var(--vit-font-heading) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	height: auto !important;
	line-height: normal !important;
	padding: 10px 20px !important;
	text-shadow: none !important;
	text-transform: none !important;
	transition: opacity .2s ease !important;
}

body.login .wp-core-ui .button-primary:hover,
body.login .wp-core-ui .button-primary:focus,
body.login #wp-submit:hover,
body.login #wp-submit:focus {
	background: var(--vit-teal) !important;
	color: var(--vit-dark) !important;
	opacity: .85;
}

/* Enlaces y mensajes -------------------------------------------------------- */

body.login #nav,
body.login #backtoblog {
	text-align: center;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
	color: var(--vit-slate);
	font-family: var(--vit-font-body);
	font-size: 14px;
	text-decoration: none;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover {
	color: var(--vit-teal);
	text-decoration: underline;
}

body.login #login_error,
body.login .message,
body.login .success {
	background: #fff;
	border: none;
	border-left: 4px solid var(--vit-teal);
	border-radius: 8px;
	box-shadow: 0 8px 20px rgba(16, 46, 62, 0.15);
	color: var(--vit-dark);
	font-family: var(--vit-font-body);
	margin-bottom: 20px;
}

body.login #login_error {
	border-left-color: #d63638;
}

body.login .privacy-policy-page-link {
	margin-top: 16px;
	text-align: center;
}

body.login p#nav {
	margin-top: 20px;
}