body.login {
  background-color: #ededed; /* Fondo general */
}

/* ─── Ajustar ancho y estilo del contenedor del formulario ─── */
.login form {
  width: 360px; /* ancho fijo (puedes cambiarlo) */
  max-width: 90%;
  background: #ffffff; /* Formulario sobre fondo claro */
  border: 1px solid #ededed; /* Borde suave en gris claro */
  padding: 26px 24px 46px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra más suave y elevada */
  border-radius: 8px; /* Esquinas un poco más redondeadas */
  margin: 40px auto; /* centrar vertical/horizontal */
}

/* ─── Reemplazar el logo de WP por tu propio logo ─── */
.login h1 a,
.login h1 a:hover {
  background-image: url("https://control.connect.reparadores.es/wp-content/uploads/2025/06/logo-pga.jpg");
  background-size: contain;
  width: 100%;
  max-width: 300px; /* ajustar según proporción */
  height: 80px; /* ajustar para mantener proporción */
}

/* ─── Etiquetas de los inputs ─── */
.login label {
  color: #00102e; /* Azul oscuro */
  font-weight: 600;
  font-size: 14px;
}

/* ─── Campos de texto y contraseña ─── */
.login input[type="text"],
.login input[type="password"] {
  width: 100%;
  margin-top: 4px;
  margin-bottom: 20px;
  padding: 10px 12px;
  border: 1px solid #00102e; /* Bordes en azul oscuro */
  border-radius: 4px;
  font-size: 14px;
  background-color: #ffffff; /* Fondo blanco para los campos */
  color: #00102e; /* Texto en azul oscuro */
}

/* Cambiar color del borde al enfocar */
.login input[type="text"]:focus,
.login input[type="password"]:focus {
  border-color: #d65050; /* Rojo brillante al focus */
  outline: none;
  box-shadow: 0 0 0 2px rgba(214, 80, 80, 0.25);
}

/* ─── Botón "Acceder" ─── */
.login input[type="submit"] {
  background-color: #d65050; /* Rojo principal */
  border: none;
  color: #ffffff; /* Texto blanco */
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
}
.login input[type="submit"]:hover {
  background-color: #b84343; /* Un tono ligeramente más oscuro del rojo */
  transform: translateY(-1px);
}
.login input[type="submit"]:active {
  background-color: #8f3232; /* Aún más oscuro al hacer clic */
  transform: translateY(0);
}

/* ─── Enlaces “¿Has olvidado tu contraseña?” y “Volver a…” ─── */
.login #nav a,
.login #backtoblog a {
  color: #00102e; /* Azul oscuro */
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}
.login #nav a:hover,
.login #backtoblog a:hover {
  color: #d65050; /* Rojo al pasar el ratón */
  text-decoration: underline;
}

/* ─── Mensajes de error/aviso ─── */
.login .message,
.login .error {
  background-color: #fff5f5; /* Fondo muy suave rosado claro */
  border-left: 4px solid #d65050; /* Barra roja */
  color: #00102e; /* Texto en azul oscuro */
  padding: 12px 16px;
  margin-bottom: 20px;
  border-radius: 4px;
}

/* ─── Enlaces secundarios (si los hubiera) ─── */
.login form .forgetmenot label {
  color: #00102e; /* Azul oscuro */
}
.login form .forgetmenot input[type="checkbox"] {
  accent-color: #d65050; /* Casilla roja */
}