Login GRH, marca de agua tipo membretado y logo en PNG sin fondo

src/components/layout/common/Watermark.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import grhWatermark from "../../../assets/images/grhWatermark.png";
+
+export default function Watermark({
+  opacity = 0.08,
+  size = 520,
+}: {
+  opacity?: number;
+  size?: number;
+}) {
+  return (
+    <div className="pointer-events-none fixed inset-0 z-20 overflow-hidden">
+      {/* Marca centrada (SIN rotación) */}
+      <div
+        className="absolute left-1/2 top-1/2"
+        style={{
+          transform: "translate(-50%, -50%)",
+          opacity,
+        }}
+      >
+        <img
+          src={grhWatermark}
+          alt="GRH Watermark"
+          width={size}
+          height={size}
+          className="select-none object-contain"
+          draggable={false}
+          style={{ filter: "grayscale(100%)" }} // opcional
+        />
+      </div>
+
+      {/* Marca secundaria (SIN rotación) */}
+      <div
+        className="absolute right-[-140px] bottom-[-180px]"
+        style={{
+          opacity: Math.max(0.04, opacity * 0.55),
+        }}
+      >
+        <img
+          src={grhWatermark}
+          alt="GRH Watermark"
+          width={Math.round(size * 0.75)}
+          height={Math.round(size * 0.75)}
+          className="select-none object-contain"
+          draggable={false}
+          style={{ filter: "grayscale(100%)" }} // opcional
+        />
+      </div>
+    </div>
+  );
+}