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

src/components/layout/common/ProfileModal.tsx

@@ -54,12 +54,17 @@ export default function ProfileModal({
   // Limpieza de object URLs
   useEffect(() => {
     return () => {
-      if (lastPreviewUrlRef.current) URL.revokeObjectURL(lastPreviewUrlRef.current);
+      if (lastPreviewUrlRef.current) {
+        URL.revokeObjectURL(lastPreviewUrlRef.current);
+      }
     };
   }, []);
 
   const initials = useMemo(() => {
-    const parts = (name || "").trim().split(/\s+/).filter(Boolean);
+    const parts = (name || "")
+      .trim()
+      .split(/\s+/)
+      .filter(Boolean);
     const a = parts[0]?.[0] ?? "U";
     const b = parts[1]?.[0] ?? "";
     return (a + b).toUpperCase();
@@ -148,7 +153,9 @@ export default function ProfileModal({
         <div className="rounded-2xl bg-white shadow-xl border border-slate-200 overflow-hidden">
           {/* Header */}
           <div className="px-6 py-4 border-b border-slate-200">
-            <div className="text-base font-semibold text-slate-900">Editar perfil</div>
+            <div className="text-base font-semibold text-slate-900">
+              Editar perfil
+            </div>
           </div>
 
           {/* Body */}
@@ -206,7 +213,6 @@ export default function ProfileModal({
 
               {/* RIGHT: Form */}
               <div className="rounded-2xl border border-slate-200 p-5">
-                {/* “correo electronico” como en tu dibujo */}
                 <div className="text-xs font-semibold text-slate-500 uppercase tracking-wide">
                   correo electrónico
                 </div>
@@ -253,20 +259,20 @@ export default function ProfileModal({
             >
               Cancelar
             </button>
-            <button
-  type="button"
-  onClick={handleSubmit}
-  disabled={loading}
-  className={[
-    "rounded-xl px-4 py-2 text-sm font-semibold",
-    "bg-blue-600 text-white hover:bg-blue-700",
-    "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
-    loading ? "opacity-60 cursor-not-allowed" : "",
-  ].join(" ")}
->
-  {loading ? "Guardando..." : "Guardar"}
-</button>
 
+            <button
+              type="button"
+              onClick={handleSubmit}
+              disabled={loading}
+              className={[
+                "rounded-xl px-4 py-2 text-sm font-semibold",
+                "bg-blue-600 text-white hover:bg-blue-700",
+                "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2",
+                loading ? "opacity-60 cursor-not-allowed" : "",
+              ].join(" ")}
+            >
+              {loading ? "Guardando..." : "Guardar"}
+            </button>
           </div>
         </div>
       </div>

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>
+  );
+}