@import url('assets/fonts/fonts.css');

:root {
	--navy: #001c34;
	--navy-mid: #0a3a5c;
	--orange: #ff8c00;
	--orange-dark: #e67e00;
}

html { background: var(--navy) !important; }

body.login {
	background-color: var(--navy);
	background-image:
		linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px),
		radial-gradient(ellipse at 70% 20%, rgba(255,140,0,0.10) 0%, transparent 60%);
	background-size: 64px 64px, 64px 64px, 100% 100%;
	font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Logo */
body.login #login h1 a {
	background-image: url('images/logo-negative.svg');
	width: 200px;
	height: 60px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-bottom: 1.5rem;
}

/* Card del formulario */
body.login #loginform {
	background: rgba(255,255,255,0.05);
	border: 1px solid rgba(255,255,255,0.08);
	border-radius: 20px;
	padding: 2.5rem 2rem 1.5rem;
	box-shadow: 0 20px 50px rgba(0,0,0,0.35);
	backdrop-filter: blur(6px);
}

#login { width: 380px; }

/* Labels */
body.login label {
	color: rgba(255,255,255,0.7);
	font-size: 0.85rem;
	font-weight: 600;
}

/* Inputs */
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	background: rgba(255,255,255,0.06);
	border: 1px solid rgba(255,255,255,0.12);
	border-radius: 10px;
	color: white;
	font-size: 0.9rem;
	padding: 0.7rem 0.9rem;
	height: auto;
	box-shadow: none;
	transition: all 0.2s ease;
}
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: var(--orange);
	box-shadow: 0 0 0 3px rgba(255,140,0,0.15);
}
body.login input[type="text"]::placeholder,
body.login input[type="password"]::placeholder {
	color: rgba(255,255,255,0.3);
}

/* Checkbox "Recordarme" */
body.login .forgetmenot label {
	color: rgba(255,255,255,0.55);
	font-size: 0.8rem;
}

/* Botón principal */
body.login .wp-core-ui .button-primary {
	background: var(--orange);
	border: none;
	border-radius: 10px;
	color: white;
	font-weight: 700;
	font-size: 0.9rem;
	padding: 0.7rem 1.5rem;
	height: auto;
	width: 100%;
	text-shadow: none;
	box-shadow: 0 6px 16px rgba(255,140,0,0.3);
	transition: all 0.2s ease;
}
body.login .wp-core-ui .button-primary:hover,
body.login .wp-core-ui .button-primary:focus {
	background: var(--orange-dark);
	box-shadow: 0 8px 20px rgba(255,140,0,0.4);
	transform: translateY(-1px);
}

/* Links inferiores (¿Olvidaste tu contraseña? / volver al sitio) */
body.login #nav,
body.login #backtoblog {
	text-align: center;
}
body.login #nav a,
body.login #backtoblog a {
	color: rgba(255,255,255,0.55);
	font-size: 0.82rem;
	text-decoration: none;
	transition: color 0.2s ease;
}
body.login #nav a:hover,
body.login #backtoblog a:hover {
	color: var(--orange);
}

/* Mensajes de error */
body.login #login_error {
	background: rgba(255,80,80,0.12);
	border-left: 4px solid #ff5050;
	border-radius: 8px;
	color: white;
}

/* Mensajes informativos (ej: "registro exitoso") */
body.login .message {
	background: rgba(255,140,0,0.12);
	border-left: 4px solid var(--orange);
	border-radius: 8px;
	color: white;
}

/* Responsive */
@media (max-width: 480px) {
	#login { width: 90%; max-width: 340px; }
	body.login #loginform { padding: 2rem 1.25rem 1rem; }
}