fix(ui): optimización responsiva y mobile-first de la pantalla de login

public/css/style.css

@@ -363,4 +363,185 @@ main {
     font-weight: 600;
 }
 
+.social-auth-wrapper {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.social-auth-wrapper .g_id_signin {
+    max-width: 100%;
+}
+
+.social-auth-wrapper .g_id_signin iframe {
+    max-width: 100% !important;
+}
+
+/* ==============================================================================
+   Mobile & Responsive Optimization for Login Page
+   ============================================================================== */
+
+@media (max-width: 991.98px) {
+    .login-container {
+        padding: 1.25rem 0.5rem;
+        min-height: auto;
+    }
+
+    .login-card-wrapper {
+        border-radius: 20px;
+        max-width: 620px;
+        margin: 0 auto;
+        box-shadow: 0 12px 30px -8px rgba(15, 23, 42, 0.15);
+    }
+
+    .login-hero-side {
+        padding: 1.5rem 1.5rem;
+        flex-direction: row;
+        align-items: center;
+        justify-content: space-between;
+        gap: 1rem;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    }
+
+    .login-hero-brand {
+        flex: 1;
+    }
+
+    .hero-title {
+        font-size: 1.35rem;
+    }
+
+    .bot-avatar-wrapper {
+        margin: 0;
+        flex-shrink: 0;
+    }
+
+    .bot-avatar-img {
+        width: 72px;
+        height: 72px;
+        margin-bottom: 0 !important;
+    }
+
+    .login-form-side {
+        padding: 2.25rem 2rem;
+    }
+}
+
+@media (max-width: 575.98px) {
+    .login-container {
+        padding: 0.6rem 0.2rem;
+    }
+
+    .login-card-wrapper {
+        border-radius: 16px;
+        border: 1px solid #e2e8f0;
+    }
+
+    .login-hero-side {
+        padding: 1.15rem 1rem;
+        gap: 0.75rem;
+    }
+
+    .hero-badge {
+        font-size: 0.68rem !important;
+        padding: 0.2rem 0.5rem !important;
+    }
+
+    .hero-title {
+        font-size: 1.15rem;
+        margin-bottom: 0 !important;
+    }
+
+    .bot-avatar-img {
+        width: 58px;
+        height: 58px;
+    }
+
+    .login-form-side {
+        padding: 1.35rem 0.95rem;
+    }
+
+    .form-title {
+        font-size: 1.2rem;
+    }
+
+    .form-subtitle {
+        font-size: 0.8rem;
+    }
+
+    .login-segmented-tabs {
+        border-radius: 10px;
+        padding: 3px;
+        margin-bottom: 1rem;
+        gap: 3px;
+    }
+
+    .login-tab-btn {
+        padding: 0.5rem 0.35rem;
+        font-size: 0.78rem;
+        gap: 5px;
+        border-radius: 8px;
+    }
+
+    .tab-label-text {
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .login-input-group .form-control {
+        font-size: 0.9rem;
+        padding: 0.65rem 0.75rem;
+    }
+
+    .login-input-group .input-group-text {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+    }
+
+    .password-toggle-btn {
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+    }
+
+    .btn-login {
+        padding: 0.75rem 0.85rem;
+        font-size: 0.92rem;
+    }
+
+    .btn-social-fb {
+        padding: 0.6rem 0.75rem;
+        font-size: 0.84rem;
+    }
+
+    .demo-account-chip {
+        padding: 0.35rem 0.55rem;
+        font-size: 0.72rem;
+    }
+
+    .login-divider {
+        margin: 1.15rem 0 0.85rem;
+        font-size: 0.7rem;
+    }
+}
+
+@media (max-width: 360px) {
+    .login-tab-btn {
+        font-size: 0.72rem;
+        padding: 0.45rem 0.2rem;
+        gap: 3px;
+    }
+
+    .hero-title {
+        font-size: 1.05rem;
+    }
+
+    .bot-avatar-img {
+        width: 48px;
+        height: 48px;
+    }
+}
+
+
 

views/auth/login.ejs

@@ -9,22 +9,24 @@
         
         <!-- ========================================== -->
         <!-- Columna Izquierda: Hero & Bot de Soporte   -->
+        <!-- En Desktop: Panel lateral vertical con robot y features -->
+        <!-- En Móvil: Header banner compacto y estilizado -->
         <!-- ========================================== -->
         <div class="col-lg-5 login-hero-side">
-            <div>
+            <div class="login-hero-brand">
-                <div class="d-flex align-items-center gap-2 mb-3">
+                <div class="d-flex align-items-center gap-2 mb-2 mb-lg-3">
-                    <span class="badge bg-primary bg-opacity-25 text-info border border-info border-opacity-25 px-2.5 py-1.5 rounded-pill">
+                    <span class="badge bg-primary bg-opacity-25 text-info border border-info border-opacity-25 px-2.5 py-1.5 rounded-pill hero-badge">
                         <i class="fas fa-shield-alt me-1"></i> Ecosistema Telcotronics
                     </span>
                 </div>
-                <h3 class="fw-bold text-white mb-2">Help Desk & FSM</h3>
+                <h3 class="fw-bold text-white mb-1 mb-lg-2 hero-title">Help Desk & FSM</h3>
-                <p class="text-white-50 small mb-0">Gestión centralizada de soporte, incidencias y operaciones de campo.</p>
+                <p class="text-white-50 small mb-0 d-none d-sm-block hero-desc">Gestión centralizada de soporte, incidencias y operaciones de campo.</p>
             </div>
 
             <!-- Mascota Bot de Soporte con Animación Flotante -->
-            <div class="bot-avatar-wrapper text-center my-4">
+            <div class="bot-avatar-wrapper text-center my-2 my-lg-4">
-                <img src="/img/bot-soporte.svg" alt="Bot de Soporte Help Desk" class="bot-avatar-img mb-3">
+                <img src="/img/bot-soporte.svg" alt="Bot de Soporte Help Desk" class="bot-avatar-img mb-1 mb-lg-3">
-                <div>
+                <div class="d-none d-lg-block">
                     <div class="bot-status-pill">
                         <span class="bot-status-dot"></span>
                         <span>Asistente Activo • 24/7 en línea</span>
@@ -32,8 +34,8 @@
                 </div>
             </div>
 
-            <!-- Características Clave del Sistema -->
+            <!-- Características Clave del Sistema (visibles en desktop >= lg) -->
-            <div>
+            <div class="d-none d-lg-block">
                 <div class="login-feature-item">
                     <div class="login-feature-icon">
                         <i class="fas fa-bolt"></i>
@@ -68,7 +70,7 @@
             <!-- Mensajes Flash de Notificación -->
             <% if (success_msg && success_msg.length > 0) { %>
                 <% success_msg.forEach(msg => { %>
-                    <div class="alert alert-success alert-dismissible fade show rounded-3 shadow-sm border-0 mb-4" role="alert">
+                    <div class="alert alert-success alert-dismissible fade show rounded-3 shadow-sm border-0 mb-3" role="alert">
                         <div class="d-flex align-items-center">
                             <i class="fas fa-check-circle me-2 fs-5"></i>
                             <div><%= msg %></div>
@@ -80,7 +82,7 @@
 
             <% if (error_msg && error_msg.length > 0) { %>
                 <% error_msg.forEach(msg => { %>
-                    <div class="alert alert-danger alert-dismissible fade show rounded-3 shadow-sm border-0 mb-4" role="alert">
+                    <div class="alert alert-danger alert-dismissible fade show rounded-3 shadow-sm border-0 mb-3" role="alert">
                         <div class="d-flex align-items-center">
                             <i class="fas fa-exclamation-triangle me-2 fs-5"></i>
                             <div><%= msg %></div>
@@ -93,21 +95,21 @@
             <!-- Cabecera de Bienvenida -->
             <div class="mb-3">
                 <div class="d-flex align-items-center gap-2 mb-1">
-                    <img src="/img/logo.svg" alt="Help Desk" width="30" height="30" class="rounded-2 shadow-sm">
+                    <img src="/img/logo.svg" alt="Help Desk" width="28" height="28" class="rounded-2 shadow-sm">
-                    <h4 class="fw-bold text-dark mb-0">Acceso al Sistema</h4>
+                    <h4 class="fw-bold text-dark mb-0 form-title">Acceso al Sistema</h4>
                 </div>
-                <p class="text-muted small mb-0">Selecciona tu perfil de usuario para ingresar a la plataforma correspondiente.</p>
+                <p class="text-muted small mb-0 form-subtitle">Selecciona tu perfil de usuario para ingresar.</p>
             </div>
 
             <!-- Segmented Control / Tabs de Selección de Perfil -->
             <div class="login-segmented-tabs">
                 <button type="button" class="login-tab-btn <%= tab !== 'staff' ? 'active' : '' %>" id="tabBtnClient" onclick="switchLoginTab('client')">
                     <i class="fas fa-user-tag text-primary"></i>
-                    <span>Clientes & Empresas</span>
+                    <span class="tab-label-text">Clientes SIGMA</span>
                 </button>
                 <button type="button" class="login-tab-btn <%= tab === 'staff' ? 'active staff-active' : '' %>" id="tabBtnStaff" onclick="switchLoginTab('staff')">
                     <i class="fas fa-user-shield text-indigo" style="color: #4f46e5;"></i>
-                    <span>Personal Técnico</span>
+                    <span class="tab-label-text">Personal Técnico</span>
                 </button>
             </div>
 
@@ -115,11 +117,11 @@
             <!-- PESTAÑA 1: CLIENTES & EMPRESAS (WebControl + Redes Sociales)  -->
             <!-- ============================================================= -->
             <div id="sectionClient" style="<%= tab === 'staff' ? 'display: none;' : '' %>">
-                <div class="d-flex align-items-center justify-content-between mb-3 p-2.5 rounded-3 bg-light border border-slate-200">
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3 p-2 rounded-3 bg-light border border-slate-200">
                     <div class="client-badge-pill">
                         <i class="fas fa-building"></i> Clientes SIGMA
                     </div>
-                    <small class="text-muted" style="font-size: 0.75rem;">Autenticación vía <strong>SIGMA WebControl</strong></small>
+                    <small class="text-muted" style="font-size: 0.73rem;">Vía <strong>SIGMA WebControl</strong></small>
                 </div>
 
                 <form action="/login" method="POST" id="clientLoginForm">
@@ -144,7 +146,7 @@
                         </div>
                     </div>
 
-                    <div class="d-flex justify-content-between align-items-center mb-3">
+                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                         <div class="form-check">
                             <input class="form-check-input" type="checkbox" id="clientRememberMe">
                             <label class="form-check-label text-muted small" for="clientRememberMe">Recordarme</label>
@@ -166,7 +168,7 @@
                 </div>
 
                 <!-- Google Identity Services Button -->
-                <div class="mb-2">
+                <div class="social-auth-wrapper">
                     <div id="g_id_onload"
                          data-client_id="<%= googleClientId %>"
                          data-context="signin"
@@ -180,17 +182,16 @@
                          data-theme="outline"
                          data-text="continue_with"
                          data-size="large"
-                         data-logo_alignment="left"
+                         data-logo_alignment="left">
-                         data-width="360">
                     </div>
-                </div>
 
-                <!-- Botón de Facebook OAuth -->
+                    <!-- Botón de Facebook OAuth -->
-                <div class="mt-2">
+                    <div class="mt-2">
-                    <button type="button" class="btn btn-social-fb w-100 d-flex align-items-center justify-content-center gap-2 shadow-sm" onclick="handleFacebookLogin()">
+                        <button type="button" class="btn btn-social-fb w-100 d-flex align-items-center justify-content-center gap-2 shadow-sm" onclick="handleFacebookLogin()">
-                        <i class="fab fa-facebook fs-5"></i>
+                            <i class="fab fa-facebook fs-5"></i>
-                        <span>Continuar con Facebook</span>
+                            <span>Continuar con Facebook</span>
-                    </button>
+                        </button>
+                    </div>
                 </div>
 
                 <div class="text-center mt-3 pt-2">
@@ -203,18 +204,18 @@
             <!-- PESTAÑA 2: PERSONAL TÉCNICO & STAFF (Consola Local MariaDB)   -->
             <!-- ============================================================= -->
             <div id="sectionStaff" style="<%= tab !== 'staff' ? 'display: none;' : '' %>">
-                <div class="d-flex align-items-center justify-content-between mb-3 p-2.5 rounded-3 bg-light border border-slate-200">
+                <div class="d-flex flex-wrap align-items-center justify-content-between gap-2 mb-3 p-2 rounded-3 bg-light border border-slate-200">
                     <div class="staff-badge-pill">
                         <i class="fas fa-shield-alt"></i> Consola Operativa
                     </div>
-                    <small class="text-muted" style="font-size: 0.75rem;">Exclusivo <strong>Agentes & Técnicos</strong></small>
+                    <small class="text-muted" style="font-size: 0.73rem;">Exclusivo <strong>Agentes & Staff</strong></small>
                 </div>
 
                 <form action="/login" method="POST" id="staffLoginForm">
                     <input type="hidden" name="login_type" value="staff">
 
                     <div class="mb-3">
-                        <label class="form-label text-secondary small fw-semibold">Correo Corporativo de Operaciones</label>
+                        <label class="form-label text-secondary small fw-semibold">Correo de Operaciones</label>
                         <div class="input-group login-input-group">
                             <span class="input-group-text"><i class="fas fa-id-badge"></i></span>
                             <input type="email" name="email" id="staffEmail" class="form-control" placeholder="agente@helpdesk.com" required autocomplete="email">
@@ -222,7 +223,7 @@
                     </div>
 
                     <div class="mb-3">
-                        <label class="form-label text-secondary small fw-semibold">Contraseña de Acceso Interno</label>
+                        <label class="form-label text-secondary small fw-semibold">Contraseña Interna</label>
                         <div class="input-group login-input-group">
                             <span class="input-group-text"><i class="fas fa-key"></i></span>
                             <input type="password" name="password" id="staffPassword" class="form-control" placeholder="••••••••" required autocomplete="current-password" style="border-top-right-radius: 0; border-bottom-right-radius: 0;">
@@ -232,12 +233,12 @@
                         </div>
                     </div>
 
-                    <div class="d-flex justify-content-between align-items-center mb-3">
+                    <div class="d-flex flex-wrap justify-content-between align-items-center gap-2 mb-3">
                         <div class="form-check">
                             <input class="form-check-input" type="checkbox" id="staffRememberMe">
-                            <label class="form-check-label text-muted small" for="staffRememberMe">Mantener sesión técnica</label>
+                            <label class="form-check-label text-muted small" for="staffRememberMe">Recordarme</label>
                         </div>
-                        <span class="text-muted small">help_desk.users DB</span>
+                        <span class="text-muted small" style="font-size: 0.75rem;">help_desk.users DB</span>
                     </div>
 
                     <button type="submit" class="btn btn-login w-100 d-flex justify-content-center align-items-center shadow-sm" style="background: linear-gradient(135deg, #4f46e5 0%, #2563eb 100%);">
@@ -247,12 +248,12 @@
                 </form>
 
                 <!-- Acceso Rápido / Credenciales Demo Exclusivas para Personal Técnico -->
-                <div class="mt-4 pt-3 border-top">
+                <div class="mt-3 pt-3 border-top">
                     <div class="d-flex align-items-center justify-content-between mb-2">
-                        <span class="text-muted fw-semibold" style="font-size: 0.76rem;">
+                        <span class="text-muted fw-semibold" style="font-size: 0.75rem;">
-                            <i class="fas fa-bolt me-1 text-primary"></i> Acceso Rápido Personal de Guardia:
+                            <i class="fas fa-bolt me-1 text-primary"></i> Acceso Rápido Demo:
                         </span>
-                        <small class="text-muted" style="font-size: 0.72rem;">(1 clic para autocompletar)</small>
+                        <small class="text-muted" style="font-size: 0.70rem;">(1 clic para autocompletar)</small>
                     </div>
                     <div class="d-flex flex-wrap gap-2">
                         <span class="demo-account-chip" onclick="fillStaffCredentials('super@helpdesk.com', '123456')">
@@ -262,16 +263,16 @@
                             <i class="fas fa-user-shield text-info me-1"></i> Admin
                         </span>
                         <span class="demo-account-chip" onclick="fillStaffCredentials('agent@helpdesk.com', '123456')">
-                            <i class="fas fa-headset text-primary me-1"></i> Agente Técnico
+                            <i class="fas fa-headset text-primary me-1"></i> Agente
                         </span>
                     </div>
                 </div>
             </div>
 
             <!-- Pie de Soporte -->
-            <div class="text-center mt-4 pt-2">
+            <div class="text-center mt-3 pt-2">
-                <small class="text-muted">
+                <small class="text-muted" style="font-size: 0.78rem;">
-                    ¿Problemas de conectividad? Contacta a <a href="mailto:soporte@telcotronics.com" class="text-decoration-none text-secondary fw-semibold">NOC Telcotronics</a>
+                    ¿Problemas de conectividad? <a href="mailto:soporte@telcotronics.com" class="text-decoration-none text-secondary fw-semibold">NOC Telcotronics</a>
                 </small>
             </div>
 
@@ -358,7 +359,6 @@
 
     // Callback de Facebook Login
     window.handleFacebookLogin = function() {
-        // Si el SDK de Facebook está cargado, invocarlo, o guiar al usuario
         if (typeof FB !== 'undefined') {
             FB.login(function(response) {
                 if (response.authResponse && response.authResponse.accessToken) {
@@ -382,8 +382,7 @@
                 }
             }, { scope: 'public_profile,email' });
         } else {
-            // Mensaje amigable si FB SDK aún no tiene APP_ID público configurado
+            const email = prompt('Inicio con Facebook:\nIngresa tu correo para simular el acceso social o usa Google Sign-In:');
-            const email = prompt('Inicio con Facebook:\nIngresa tu correo de cuenta para simular el acceso social o usa Google Sign-In:');
             if (email && email.includes('@')) {
                 fetch('/auth/facebook', {
                     method: 'POST',
@@ -395,7 +394,6 @@
                     if (data.success) {
                         window.location.href = data.redirect || '/client/dashboard';
                     } else {
-                        // Si falla la verificación con Graph API real, informar
                         alert('Para inicio social directo en este entorno, por favor utiliza "Continuar con Google".');
                     }
                 })

views/partials/header.ejs

@@ -21,5 +21,5 @@
                 <%- include('sidebar') %>
                 <main class="col-md-9 ms-sm-auto col-lg-10 px-4">
             <% } else { %>
-                <main class="col-12 px-4">
+                <main class="col-12 px-2 px-sm-3 px-md-4">
             <% } %>