fix: actualizar iconos maskable con diseño azul

nuxt4/public/icon-maskable.svg

@@ -1,35 +1,95 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="none">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <!-- Background gradient para maskable (fondo completo sin transparencia) -->
   <defs>
-    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="100%">
+    <!-- Gradiente del fondo -->
-      <stop offset="0%" style="stop-color:#00DC82;stop-opacity:1" />
+    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="100%" style="stop-color:#00A155;stop-opacity:1" />
+      <stop offset="0%" style="stop-color:#b3e0ff"/>
+      <stop offset="100%" style="stop-color:#e6f4ff"/>
     </linearGradient>
-    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="100%">
+    <!-- Gradiente del círculo principal -->
-      <stop offset="0%" style="stop-color:#4A90E2;stop-opacity:1" />
+    <linearGradient id="circleGrad" x1="0%" y1="0%" x2="100%" y2="100%">
-      <stop offset="100%" style="stop-color:#2E5C8A;stop-opacity:1" />
+      <stop offset="0%" style="stop-color:#4da6ff"/>
+      <stop offset="50%" style="stop-color:#1a8cff"/>
+      <stop offset="100%" style="stop-color:#0066cc"/>
     </linearGradient>
+    <!-- Gradiente para la zona de día -->
+    <linearGradient id="dayGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#66b3ff"/>
+      <stop offset="100%" style="stop-color:#3399ff"/>
+    </linearGradient>
+    <!-- Gradiente para la zona de noche -->
+    <linearGradient id="nightGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#1a75cc"/>
+      <stop offset="100%" style="stop-color:#004d99"/>
+    </linearGradient>
+    <!-- Gradiente para los cuadrados de apps -->
+    <linearGradient id="appGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+      <stop offset="0%" style="stop-color:#99d6ff"/>
+      <stop offset="100%" style="stop-color:#66c2ff"/>
+    </linearGradient>
+    <!-- Gradiente del sol -->
+    <radialGradient id="sunGrad" cx="50%" cy="50%" r="50%">
+      <stop offset="0%" style="stop-color:#ffee00"/>
+      <stop offset="100%" style="stop-color:#ffcc00"/>
+    </radialGradient>
   </defs>
 
-  <!-- Fondo completo (sin transparencia para evitar el blanco en Windows) -->
+  <!-- Círculo principal con borde brillante -->
-  <rect width="512" height="512" fill="url(#grad1)"/>
+  <circle cx="256" cy="256" r="230" fill="url(#circleGrad)" stroke="#80ccff" stroke-width="4"/>
 
-  <!-- Contenido en el 80% central (safe zone para maskable icons) -->
+  <!-- Zona de día (arriba izquierda) -->
-  <g transform="translate(256, 256) scale(0.9) translate(-256, -256)">
+  <path d="M256 26 C140 26 46 100 30 200 L256 256 L256 26 Z" fill="url(#dayGrad)" opacity="0.6"/>
-    <!-- Shield shape (Authentik security) -->
-    <path d="M256 80 L380 140 L380 280 Q380 360 256 420 Q132 360 132 280 L132 140 Z"
-          fill="url(#grad2)" opacity="0.3"/>
 
-    <!-- Letter N (Nuxt) -->
+  <!-- Zona de noche (abajo derecha) -->
-    <path d="M180 200 L180 340 L220 340 L220 260 L292 340 L332 340 L332 200 L292 200 L292 280 L220 200 Z"
+  <path d="M256 486 C372 486 466 412 482 312 L256 256 L256 486 Z" fill="url(#nightGrad)" opacity="0.4"/>
-          fill="white" stroke="white" stroke-width="4"/>
 
-    <!-- Lock icon (Authentication) -->
+  <!-- Sol -->
-    <g transform="translate(340, 180)">
+  <circle cx="140" cy="120" r="35" fill="url(#sunGrad)"/>
-      <rect x="-20" y="10" width="40" height="50" rx="5" fill="white" opacity="0.9"/>
+  <!-- Rayos del sol -->
-      <path d="M -15 10 L -15 -5 Q -15 -20 0 -20 Q 15 -20 15 -5 L 15 10"
+  <g fill="#ffcc00" opacity="0.8">
-            stroke="white" stroke-width="6" fill="none" opacity="0.9"/>
+    <ellipse cx="140" cy="65" rx="4" ry="12"/>
-      <circle cx="0" cy="30" r="5" fill="#00DC82"/>
+    <ellipse cx="140" cy="175" rx="4" ry="12"/>
+    <ellipse cx="85" cy="120" rx="12" ry="4"/>
+    <ellipse cx="195" cy="120" rx="12" ry="4"/>
+    <ellipse cx="100" cy="80" rx="4" ry="10" transform="rotate(-45 100 80)"/>
+    <ellipse cx="180" cy="80" rx="4" ry="10" transform="rotate(45 180 80)"/>
+    <ellipse cx="100" cy="160" rx="4" ry="10" transform="rotate(45 100 160)"/>
+    <ellipse cx="180" cy="160" rx="4" ry="10" transform="rotate(-45 180 160)"/>
   </g>
+
+  <!-- Nube -->
+  <g fill="white" opacity="0.95">
+    <ellipse cx="320" cy="110" rx="45" ry="30"/>
+    <ellipse cx="280" cy="120" rx="30" ry="22"/>
+    <ellipse cx="355" cy="115" rx="28" ry="20"/>
   </g>
+
+  <!-- Grid de apps (6 cuadrados 2x3) -->
+  <g fill="url(#appGrad)" stroke="#b3e0ff" stroke-width="2">
+    <rect x="155" y="210" width="55" height="55" rx="10"/>
+    <rect x="225" y="210" width="55" height="55" rx="10"/>
+    <rect x="295" y="210" width="55" height="55" rx="10"/>
+    <rect x="155" y="280" width="55" height="55" rx="10"/>
+    <rect x="225" y="280" width="55" height="55" rx="10"/>
+    <rect x="295" y="280" width="55" height="55" rx="10"/>
+  </g>
+
+  <!-- Luna -->
+  <g transform="translate(380, 380)">
+    <circle cx="0" cy="0" r="28" fill="#b3e0ff"/>
+    <circle cx="12" cy="-8" r="25" fill="url(#nightGrad)"/>
+  </g>
+
+  <!-- Estrellas -->
+  <g fill="white" opacity="0.8">
+    <circle cx="100" cy="350" r="3"/>
+    <circle cx="85" cy="400" r="2"/>
+    <circle cx="130" cy="420" r="2.5"/>
+    <circle cx="420" cy="300" r="2"/>
+    <circle cx="440" cy="340" r="2.5"/>
+    <circle cx="400" cy="420" r="2"/>
+    <circle cx="350" cy="440" r="3"/>
+  </g>
+
+  <!-- Brillo superior del círculo -->
+  <ellipse cx="200" cy="80" rx="80" ry="20" fill="white" opacity="0.2"/>
 </svg>