diff --git a/public/css/style.css b/public/css/style.css
index d1e09e7..6e6c7a4 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -54,3 +54,198 @@ main {
padding-top: 0;
}
}
+
+/* ==============================================================================
+ Login Page Modern Styling & Support Bot Mascot
+ ============================================================================== */
+.login-container {
+ min-height: calc(100vh - 120px);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 2.5rem 1rem;
+}
+
+.login-card-wrapper {
+ background: #ffffff;
+ border-radius: 24px;
+ overflow: hidden;
+ box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.18), 0 0 0 1px rgba(226, 232, 240, 0.8);
+ max-width: 980px;
+ width: 100%;
+}
+
+.login-hero-side {
+ background: linear-gradient(135deg, #070e20 0%, #0f2b6b 45%, #0284c7 100%);
+ color: #ffffff;
+ padding: 3rem 2.5rem;
+ position: relative;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+}
+
+.login-hero-side::before {
+ content: '';
+ position: absolute;
+ top: -20%;
+ left: -20%;
+ width: 140%;
+ height: 140%;
+ background: radial-gradient(circle at 30% 30%, rgba(56, 189, 248, 0.16) 0%, transparent 60%);
+ pointer-events: none;
+}
+
+.bot-avatar-wrapper {
+ position: relative;
+ display: inline-block;
+ margin: 1.25rem 0;
+ text-align: center;
+}
+
+.bot-avatar-img {
+ width: 145px;
+ height: 145px;
+ filter: drop-shadow(0 16px 24px rgba(2, 6, 23, 0.5));
+ animation: floatBot 4s ease-in-out infinite;
+ transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+
+.bot-avatar-img:hover {
+ transform: scale(1.08) rotate(-3deg);
+}
+
+@keyframes floatBot {
+ 0%, 100% {
+ transform: translateY(0);
+ }
+ 50% {
+ transform: translateY(-8px);
+ }
+}
+
+.bot-status-pill {
+ display: inline-flex;
+ align-items: center;
+ gap: 6px;
+ background: rgba(15, 23, 42, 0.65);
+ backdrop-filter: blur(8px);
+ border: 1px solid rgba(56, 189, 248, 0.3);
+ border-radius: 9999px;
+ padding: 0.35rem 0.85rem;
+ font-size: 0.78rem;
+ font-weight: 500;
+ color: #e2e8f0;
+}
+
+.bot-status-dot {
+ width: 8px;
+ height: 8px;
+ background-color: #10b981;
+ border-radius: 50%;
+ box-shadow: 0 0 10px #10b981;
+}
+
+.login-feature-item {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ font-size: 0.9rem;
+ color: #cbd5e1;
+ margin-bottom: 0.75rem;
+}
+
+.login-feature-icon {
+ width: 28px;
+ height: 28px;
+ border-radius: 8px;
+ background: rgba(56, 189, 248, 0.15);
+ border: 1px solid rgba(56, 189, 248, 0.3);
+ color: #38bdf8;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 0.8rem;
+ flex-shrink: 0;
+}
+
+.login-form-side {
+ padding: 3.5rem 3rem;
+ background: #ffffff;
+}
+
+.login-input-group .input-group-text {
+ background-color: #f8fafc;
+ border-color: #cbd5e1;
+ color: #64748b;
+ border-top-left-radius: 12px;
+ border-bottom-left-radius: 12px;
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+.login-input-group .form-control {
+ border-color: #cbd5e1;
+ border-top-right-radius: 12px;
+ border-bottom-right-radius: 12px;
+ padding: 0.75rem 1rem;
+ font-size: 0.95rem;
+}
+
+.login-input-group .form-control:focus {
+ border-color: #0284c7;
+ box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
+}
+
+.password-toggle-btn {
+ border-color: #cbd5e1;
+ background-color: #f8fafc;
+ color: #64748b;
+ border-top-right-radius: 12px;
+ border-bottom-right-radius: 12px;
+ cursor: pointer;
+}
+
+.password-toggle-btn:hover {
+ color: #0f172a;
+ background-color: #e2e8f0;
+}
+
+.btn-login {
+ background: linear-gradient(135deg, #0284c7 0%, #2563eb 100%);
+ border: none;
+ border-radius: 12px;
+ padding: 0.85rem;
+ font-weight: 600;
+ font-size: 1rem;
+ color: #ffffff;
+ transition: all 0.25s ease;
+}
+
+.btn-login:hover {
+ background: linear-gradient(135deg, #0369a1 0%, #1d4ed8 100%);
+ box-shadow: 0 10px 20px -5px rgba(37, 99, 235, 0.4);
+ transform: translateY(-1px);
+ color: #ffffff;
+}
+
+.demo-account-chip {
+ cursor: pointer;
+ border: 1px solid #e2e8f0;
+ background: #f8fafc;
+ border-radius: 8px;
+ padding: 0.4rem 0.75rem;
+ font-size: 0.78rem;
+ font-weight: 500;
+ color: #475569;
+ transition: all 0.2s ease;
+ user-select: none;
+}
+
+.demo-account-chip:hover {
+ background: #e0f2fe;
+ border-color: #bae6fd;
+ color: #0369a1;
+ transform: translateY(-1px);
+}
+
diff --git a/public/img/bot-soporte-512.png b/public/img/bot-soporte-512.png
new file mode 100644
index 0000000..468ae6a
Binary files /dev/null and b/public/img/bot-soporte-512.png differ
diff --git a/public/img/bot-soporte.png b/public/img/bot-soporte.png
new file mode 100644
index 0000000..09d0281
Binary files /dev/null and b/public/img/bot-soporte.png differ
diff --git a/public/img/bot-soporte.svg b/public/img/bot-soporte.svg
new file mode 100644
index 0000000..1b778c1
--- /dev/null
+++ b/public/img/bot-soporte.svg
@@ -0,0 +1,165 @@
+
diff --git a/views/auth/login.ejs b/views/auth/login.ejs
index 2b38ce2..8ce2cdf 100644
--- a/views/auth/login.ejs
+++ b/views/auth/login.ejs
@@ -1,50 +1,213 @@
<%- include('../partials/header') %>
<% title = 'Iniciar Sesión'; %>
-<% if (success_msg && success_msg.length > 0) { %>
- <% success_msg.forEach(msg => { %>
-
- <%= msg %>
-
-
- <% }) %>
-<% } %>
-
-<% if (error_msg && error_msg.length > 0) { %>
- <% error_msg.forEach(msg => { %>
-
- <%= msg %>
-
-
- <% }) %>
-<% } %>
-
-
-