feat(ui): crear e integrar suite de iconos SVG, PNG e ICO para Help Desk y favicon

public/img/favicon.svg

@@ -0,0 +1,120 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
+  <defs>
+    <!-- Background Gradient: Deep Navy to Electric Cyan -->
+    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0b1329" />
+      <stop offset="45%" stop-color="#1e3a8a" />
+      <stop offset="100%" stop-color="#0284c7" />
+    </linearGradient>
+
+    <!-- Headset Gradient -->
+    <linearGradient id="headsetGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ffffff" />
+      <stop offset="60%" stop-color="#f1f5f9" />
+      <stop offset="100%" stop-color="#cbd5e1" />
+    </linearGradient>
+
+    <!-- Cyan Glow Gradient -->
+    <linearGradient id="cyanGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#38bdf8" />
+      <stop offset="100%" stop-color="#0284c7" />
+    </linearGradient>
+
+    <!-- Emerald Online Status -->
+    <linearGradient id="statusGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#4ade80" />
+      <stop offset="100%" stop-color="#10b981" />
+    </linearGradient>
+
+    <!-- Universal Drop Shadow Filter (SVG 1.1) -->
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur" />
+      <feOffset dx="0" dy="12" result="offset" />
+      <feComponentTransfer in="offset" result="shadowAlpha">
+        <feFuncA type="linear" slope="0.4" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode in="shadowAlpha" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+
+    <!-- High-tech Glow Filter -->
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="5" result="blur" />
+      <feMerge>
+        <feMergeNode in="blur" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Modern App Squircle Background -->
+  <rect width="512" height="512" rx="112" fill="url(#bgGrad)" />
+  <rect x="2" y="2" width="508" height="508" rx="110" fill="none" stroke="rgba(255,255,255,0.18)" stroke-width="3" />
+
+  <!-- Ambient Light Reflection on Top Left -->
+  <path d="M 2 112 C 2 51, 51 2, 112 2 L 400 2 C 280 2, 2 280, 2 400 Z" fill="rgba(255,255,255,0.04)" />
+
+  <g filter="url(#shadow)">
+    <!-- Central Shield / Support Badge -->
+    <path d="M 256 160 
+             L 340 195 
+             C 340 280, 295 335, 256 360 
+             C 217 335, 172 280, 172 195 
+             Z" 
+          fill="rgba(15, 23, 42, 0.45)" 
+          stroke="url(#cyanGrad)" 
+          stroke-width="5" />
+
+    <!-- Support Cross / Ticket Symbol in Badge -->
+    <circle cx="256" cy="245" r="32" fill="url(#cyanGrad)" opacity="0.25" />
+    <path d="M 256 222 L 256 268 M 233 245 L 279 245" 
+          stroke="#38bdf8" 
+          stroke-width="8" 
+          stroke-linecap="round" />
+
+    <!-- Headset Band (Ergonomic Arch) -->
+    <path d="M 122 280 
+             C 122 135, 390 135, 390 280" 
+          fill="none" 
+          stroke="url(#headsetGrad)" 
+          stroke-width="26" 
+          stroke-linecap="round" />
+
+    <!-- Headset Inner Cushion Highlight -->
+    <path d="M 160 215 
+             C 195 160, 317 160, 352 215" 
+          fill="none" 
+          stroke="#38bdf8" 
+          stroke-width="6" 
+          stroke-linecap="round" 
+          opacity="0.8" />
+
+    <!-- Left Earpad -->
+    <g transform="translate(100, 240)">
+      <rect width="40" height="82" rx="20" fill="url(#headsetGrad)" />
+      <rect x="14" y="10" width="12" height="62" rx="6" fill="#0284c7" />
+    </g>
+
+    <!-- Right Earpad -->
+    <g transform="translate(372, 240)">
+      <rect width="40" height="82" rx="20" fill="url(#headsetGrad)" />
+      <rect x="14" y="10" width="12" height="62" rx="6" fill="#0284c7" />
+    </g>
+
+    <!-- Microphone Boom with Smooth Organic Arc -->
+    <path d="M 390 300 
+             C 390 385, 305 410, 268 410" 
+          fill="none" 
+          stroke="url(#headsetGrad)" 
+          stroke-width="14" 
+          stroke-linecap="round" />
+
+    <!-- Microphone Capsule -->
+    <rect x="228" y="398" width="42" height="24" rx="12" fill="url(#headsetGrad)" />
+
+    <!-- Online Status LED (Green Pulse) -->
+    <circle cx="239" cy="410" r="5.5" fill="url(#statusGrad)" filter="url(#glow)" />
+  </g>
+</svg>

public/img/logo.svg

@@ -0,0 +1,120 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="100%" height="100%">
+  <defs>
+    <!-- Background Gradient: Deep Navy to Electric Cyan -->
+    <linearGradient id="bgGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#0b1329" />
+      <stop offset="45%" stop-color="#1e3a8a" />
+      <stop offset="100%" stop-color="#0284c7" />
+    </linearGradient>
+
+    <!-- Headset Gradient -->
+    <linearGradient id="headsetGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#ffffff" />
+      <stop offset="60%" stop-color="#f1f5f9" />
+      <stop offset="100%" stop-color="#cbd5e1" />
+    </linearGradient>
+
+    <!-- Cyan Glow Gradient -->
+    <linearGradient id="cyanGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#38bdf8" />
+      <stop offset="100%" stop-color="#0284c7" />
+    </linearGradient>
+
+    <!-- Emerald Online Status -->
+    <linearGradient id="statusGrad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#4ade80" />
+      <stop offset="100%" stop-color="#10b981" />
+    </linearGradient>
+
+    <!-- Universal Drop Shadow Filter (SVG 1.1) -->
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur" />
+      <feOffset dx="0" dy="12" result="offset" />
+      <feComponentTransfer in="offset" result="shadowAlpha">
+        <feFuncA type="linear" slope="0.4" />
+      </feComponentTransfer>
+      <feMerge>
+        <feMergeNode in="shadowAlpha" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+
+    <!-- High-tech Glow Filter -->
+    <filter id="glow" x="-30%" y="-30%" width="160%" height="160%">
+      <feGaussianBlur stdDeviation="5" result="blur" />
+      <feMerge>
+        <feMergeNode in="blur" />
+        <feMergeNode in="SourceGraphic" />
+      </feMerge>
+    </filter>
+  </defs>
+
+  <!-- Modern App Squircle Background -->
+  <rect width="512" height="512" rx="112" fill="url(#bgGrad)" />
+  <rect x="2" y="2" width="508" height="508" rx="110" fill="none" stroke="rgba(255,255,255,0.18)" stroke-width="3" />
+
+  <!-- Ambient Light Reflection on Top Left -->
+  <path d="M 2 112 C 2 51, 51 2, 112 2 L 400 2 C 280 2, 2 280, 2 400 Z" fill="rgba(255,255,255,0.04)" />
+
+  <g filter="url(#shadow)">
+    <!-- Central Shield / Support Badge -->
+    <path d="M 256 160 
+             L 340 195 
+             C 340 280, 295 335, 256 360 
+             C 217 335, 172 280, 172 195 
+             Z" 
+          fill="rgba(15, 23, 42, 0.45)" 
+          stroke="url(#cyanGrad)" 
+          stroke-width="5" />
+
+    <!-- Support Cross / Ticket Symbol in Badge -->
+    <circle cx="256" cy="245" r="32" fill="url(#cyanGrad)" opacity="0.25" />
+    <path d="M 256 222 L 256 268 M 233 245 L 279 245" 
+          stroke="#38bdf8" 
+          stroke-width="8" 
+          stroke-linecap="round" />
+
+    <!-- Headset Band (Ergonomic Arch) -->
+    <path d="M 122 280 
+             C 122 135, 390 135, 390 280" 
+          fill="none" 
+          stroke="url(#headsetGrad)" 
+          stroke-width="26" 
+          stroke-linecap="round" />
+
+    <!-- Headset Inner Cushion Highlight -->
+    <path d="M 160 215 
+             C 195 160, 317 160, 352 215" 
+          fill="none" 
+          stroke="#38bdf8" 
+          stroke-width="6" 
+          stroke-linecap="round" 
+          opacity="0.8" />
+
+    <!-- Left Earpad -->
+    <g transform="translate(100, 240)">
+      <rect width="40" height="82" rx="20" fill="url(#headsetGrad)" />
+      <rect x="14" y="10" width="12" height="62" rx="6" fill="#0284c7" />
+    </g>
+
+    <!-- Right Earpad -->
+    <g transform="translate(372, 240)">
+      <rect width="40" height="82" rx="20" fill="url(#headsetGrad)" />
+      <rect x="14" y="10" width="12" height="62" rx="6" fill="#0284c7" />
+    </g>
+
+    <!-- Microphone Boom with Smooth Organic Arc -->
+    <path d="M 390 300 
+             C 390 385, 305 410, 268 410" 
+          fill="none" 
+          stroke="url(#headsetGrad)" 
+          stroke-width="14" 
+          stroke-linecap="round" />
+
+    <!-- Microphone Capsule -->
+    <rect x="228" y="398" width="42" height="24" rx="12" fill="url(#headsetGrad)" />
+
+    <!-- Online Status LED (Green Pulse) -->
+    <circle cx="239" cy="410" r="5.5" fill="url(#statusGrad)" filter="url(#glow)" />
+  </g>
+</svg>

views/auth/login.ejs

@@ -22,9 +22,10 @@
 <div class="row justify-content-center mt-5">
     <div class="col-md-5">
         <div class="card shadow">
-            <div class="card-header bg-primary text-white text-center">
+            <div class="card-header bg-primary text-white text-center py-3">
-                <h4><i class="fas fa-headset"></i> Help Desk</h4>
+                <img src="/img/logo.svg" alt="Help Desk" width="48" height="48" class="mb-2 shadow-sm rounded-3">
-                <span>Iniciar Sesión</span>
+                <h4 class="mb-0 fw-bold">Help Desk</h4>
+                <small class="text-white-50">Iniciar Sesión</small>
             </div>
             <div class="card-body">
                 <form action="/login" method="POST">

views/auth/register.ejs

@@ -15,9 +15,10 @@
 <div class="row justify-content-center mt-5">
     <div class="col-md-5">
         <div class="card shadow">
-            <div class="card-header bg-success text-white text-center">
+            <div class="card-header bg-success text-white text-center py-3">
-                <h4><i class="fas fa-user-plus"></i> Crear Cuenta</h4>
+                <img src="/img/logo.svg" alt="Help Desk" width="48" height="48" class="mb-2 shadow-sm rounded-3">
-                <small>Registra tu empresa</small>
+                <h4 class="mb-0 fw-bold">Crear Cuenta</h4>
+                <small class="text-white-50">Registra tu empresa en Help Desk</small>
             </div>
             <div class="card-body">
                 <form action="/register" method="POST">

views/partials/header.ejs

@@ -4,6 +4,11 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Help Desk - <%= typeof title !== 'undefined' ? title : 'Sistema de Tickets' %></title>
+    <link rel="icon" type="image/svg+xml" href="/img/favicon.svg">
+    <link rel="icon" type="image/png" sizes="32x32" href="/img/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon-16x16.png">
+    <link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon.png">
+    <link rel="shortcut icon" href="/favicon.ico">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
     <link href="/css/style.css" rel="stylesheet">

views/partials/navbar.ejs

@@ -1,7 +1,8 @@
 <nav class="navbar navbar-dark bg-dark sticky-top">
     <div class="container-fluid">
-        <a class="navbar-brand" href="/">
+        <a class="navbar-brand d-flex align-items-center gap-2" href="/">
-            <i class="fas fa-headset"></i> Help Desk
+            <img src="/img/logo.svg" alt="Help Desk Logo" width="28" height="28" class="d-inline-block align-text-top rounded-1">
+            <span>Help Desk</span>
         </a>
         <% if (user) { %>
         <div class="d-flex align-items-center">