/*
 * La pantalla de acceso con el aspecto de la consola de Atenea (tema Eléctrico/Neón):
 * fondo oscuro con rejilla, tarjeta con el logotipo redondo de Faro I+D, el nombre
 * del sitio como título y el botón cian. Sin webfonts externas ni peticiones de red:
 * fuentes del sistema y el logotipo del propio plugin.
 *
 * Solo se aplica cuando el plugin está vinculado (`body.atenea-tema`); en modo
 * Atenea (`body.atenea-sso`) el formulario de usuario y contraseña queda oculto y
 * un enlace al pie da paso a él.
 */

:root {
	--atenea-bg: #0f1216;
	--atenea-bg: oklch(0.13 0.018 255);
	--atenea-fg: #e7eaee;
	--atenea-fg: oklch(0.93 0.012 220);
	--atenea-card: rgba(23, 27, 33, 0.5);
	--atenea-card: oklch(0.17 0.022 255 / 50%);
	--atenea-muted: #8b959f;
	--atenea-muted: oklch(0.64 0.02 235);
	--atenea-border: rgba(138, 182, 220, 0.14);
	--atenea-border: oklch(0.85 0.09 210 / 14%);
	--atenea-input: rgba(138, 182, 220, 0.18);
	--atenea-input: oklch(0.85 0.09 210 / 18%);
	--atenea-primary: #4fe0e0;
	--atenea-primary: oklch(0.85 0.132 195);
	--atenea-primary-fg: #0d1524;
	--atenea-primary-fg: oklch(0.15 0.03 240);
	--atenea-primary-glow: rgba(79, 224, 224, 0.35);
	--atenea-primary-glow: oklch(0.85 0.132 195 / 35%);
	--atenea-voltage: #8b5cf6;
	--atenea-voltage: oklch(0.62 0.22 290);
	--atenea-destructive: #f08a8f;
	--atenea-destructive: oklch(0.75 0.16 25);
	--atenea-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--atenea-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, monospace;
}

/* ── Botón en cualquier pantalla (también sin tema, y en el shortcode) ── */

.atenea-login-boton {
	margin: 0 0 16px;
}

.atenea-login-enlace {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 0.7em 1em;
	background: #1d2327;
	border-radius: 4px;
	color: #fff !important;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
}

.atenea-login-enlace:hover,
.atenea-login-enlace:focus {
	background: #2c3338;
	color: #fff;
}

/* ── El tema de la consola en wp-login.php ── */

body.login.atenea-tema {
	background-color: var(--atenea-bg);
	background-image:
		linear-gradient(to right, rgba(138, 182, 220, 0.05) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(138, 182, 220, 0.05) 1px, transparent 1px);
	background-size: 48px 48px;
	color: var(--atenea-fg);
	font-family: var(--atenea-font);
	-webkit-font-smoothing: antialiased;
}

body.login.atenea-tema #login {
	width: 380px;
	max-width: calc(100% - 32px);
	padding: 6vh 0 96px;
}

/* El logotipo redondo, el kicker y el nombre del sitio, en ese orden. */
body.login.atenea-tema h1 {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 6px;
}

body.login.atenea-tema h1::before {
	content: "";
	order: 1;
	display: block;
	width: 112px;
	height: 112px;
	margin: 0 auto 14px;
	background: var(--atenea-logo) center / contain no-repeat;
	filter: drop-shadow(0 0 28px var(--atenea-primary-glow));
}

body.login.atenea-tema h1::after {
	content: "Grupo Faro";
	order: 2;
	font-family: var(--atenea-mono);
	font-size: 0.7rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--atenea-muted);
	margin-bottom: 6px;
}

body.login.atenea-tema h1 a {
	order: 3;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background-image: none;
	text-indent: 0;
	overflow: visible;
	font-family: var(--atenea-font);
	font-size: 2.1rem;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-decoration: none;
	color: var(--atenea-primary);
	background: linear-gradient(100deg, #f7f9fb 20%, var(--atenea-primary) 50%, var(--atenea-voltage) 85%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: none;
	filter: drop-shadow(0 0 12px var(--atenea-primary-glow));
}

body.login.atenea-tema h1 a:focus {
	box-shadow: none;
	outline: 2px solid var(--atenea-primary);
	outline-offset: 4px;
}

/* La tarjeta: el formulario de acceso y los de contraseña. */
body.login.atenea-tema #loginform,
body.login.atenea-tema #lostpasswordform,
body.login.atenea-tema #resetpassform,
body.login.atenea-tema #registerform {
	margin-top: 24px;
	padding: 26px 28px;
	background: var(--atenea-card);
	border: 1px solid var(--atenea-border);
	border-radius: 0.5rem;
	box-shadow: none;
	text-align: center;
}

body.login.atenea-tema .atenea-login-solo {
	margin-top: 18px;
	font-family: var(--atenea-mono);
	font-size: 0.62rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--atenea-muted);
}

body.login.atenea-tema form label {
	color: var(--atenea-fg);
	text-align: left;
}

body.login.atenea-tema input[type="text"],
body.login.atenea-tema input[type="password"],
body.login.atenea-tema input[type="email"] {
	background: rgba(15, 18, 22, 0.6);
	border: 1px solid var(--atenea-input);
	border-radius: 0.5rem;
	color: var(--atenea-fg);
	box-shadow: none;
}

body.login.atenea-tema input[type="text"]:focus,
body.login.atenea-tema input[type="password"]:focus,
body.login.atenea-tema input[type="email"]:focus {
	border-color: var(--atenea-primary);
	box-shadow: 0 0 0 2px var(--atenea-primary-glow);
	outline: none;
}

body.login.atenea-tema .wp-pwd .button,
body.login.atenea-tema .wp-hide-pw {
	color: var(--atenea-muted);
}

body.login.atenea-tema input[type="checkbox"] {
	background: rgba(15, 18, 22, 0.6);
	border-color: var(--atenea-input);
}

/* Los botones, cian como en la consola: el de Atenea y el primario de WordPress. */
body.login.atenea-tema .atenea-login-enlace,
body.login.atenea-tema .button-primary {
	display: block;
	width: 100%;
	box-sizing: border-box;
	min-height: 0;
	padding: 0.7em 1em;
	background: var(--atenea-primary);
	border: 1px solid transparent;
	border-radius: 0.5rem;
	color: var(--atenea-primary-fg) !important;
	font-family: var(--atenea-font);
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.4;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	box-shadow: 0 0 24px var(--atenea-primary-glow);
	transition: filter 0.3s;
}

body.login.atenea-tema .atenea-login-enlace:hover,
body.login.atenea-tema .atenea-login-enlace:focus,
body.login.atenea-tema .button-primary:hover,
body.login.atenea-tema .button-primary:focus {
	background: var(--atenea-primary);
	filter: brightness(1.08);
	outline: none;
}

body.login.atenea-tema .atenea-login-enlace:focus-visible,
body.login.atenea-tema .button-primary:focus-visible {
	outline: 2px solid var(--atenea-fg);
	outline-offset: 2px;
}

body.login.atenea-tema .atenea-login-boton {
	margin: 0;
}

/* Avisos: el error en rojo bajo el título, como en la consola; el resto discreto. */
body.login.atenea-tema #login_error,
body.login.atenea-tema .login .message,
body.login.atenea-tema .login .success,
body.login.atenea-tema .notice {
	background: var(--atenea-card);
	border: 1px solid var(--atenea-border);
	border-left-width: 3px;
	border-radius: 0.5rem;
	box-shadow: none;
	color: var(--atenea-fg);
	text-align: center;
}

body.login.atenea-tema #login_error {
	border-left-color: var(--atenea-destructive);
	color: var(--atenea-destructive);
	font-size: 0.9rem;
}

body.login.atenea-tema .login .message,
body.login.atenea-tema .login .success {
	border-left-color: var(--atenea-primary);
}

body.login.atenea-tema #login_error a,
body.login.atenea-tema .message a {
	color: var(--atenea-primary);
}

/* Enlaces bajo la tarjeta. */
body.login.atenea-tema #nav,
body.login.atenea-tema #backtoblog {
	text-align: center;
}

body.login.atenea-tema #nav a,
body.login.atenea-tema #backtoblog a,
body.login.atenea-tema .privacy-policy-page-link a,
body.login.atenea-tema .language-switcher label {
	color: var(--atenea-muted);
	text-decoration: none;
}

body.login.atenea-tema #nav a:hover,
body.login.atenea-tema #backtoblog a:hover,
body.login.atenea-tema .privacy-policy-page-link a:hover {
	color: var(--atenea-primary);
}

body.login.atenea-tema .language-switcher {
	color: var(--atenea-muted);
}

body.login.atenea-tema .language-switcher select {
	background: rgba(15, 18, 22, 0.6);
	border: 1px solid var(--atenea-input);
	color: var(--atenea-fg);
}

/* El enlace flotante al pie, pegado al borde inferior. */
.atenea-login-pie {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 20px;
	z-index: 5;
	text-align: center;
	font-family: var(--atenea-mono);
	font-size: 0.68rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

.atenea-login-pie a {
	color: var(--atenea-muted);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	padding-bottom: 2px;
	transition: color 0.3s, border-color 0.3s;
}

.atenea-login-pie a:hover,
.atenea-login-pie a:focus {
	color: var(--atenea-primary);
	border-bottom-color: var(--atenea-primary);
	outline: none;
}

/* Modo Atenea: solo el botón. El formulario clásico sigue en el DOM, oculto,
   hasta que se pide con el enlace del pie. */
body.login.atenea-sso #loginform > p,
body.login.atenea-sso #loginform .user-pass-wrap,
body.login.atenea-sso #loginform .forgetmenot,
body.login.atenea-sso #loginform .submit,
body.login.atenea-sso #nav {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	body.login.atenea-tema * {
		transition: none !important;
	}
}