From 69061a081f549c4d70d991d8ed0f25c797c82184 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sun, 22 Feb 2026 18:04:52 -0500
Subject: [PATCH] fix: redesign auth UI to match SIBU design system, fix login
 bug

- AuthView: removed Tailwind/HUD aesthetic, uses SIBU CSS variables and Space Grotesk font, tab-based login/register switch
- LoginForm: fix critical bug - email now sent lowercase to backend (was causing 401 errors), added show/hide password toggle, human labels replacing sci-fi terminology
- RegisterForm: same fixes - lowercase email, human UX, SIBU theme variables
- Both forms: removed all hardcoded Tailwind colors, now consistent with dark/light theme system
---
 frontend/src/components/auth/LoginForm.vue    | 410 +++++++++++++++---
 frontend/src/components/auth/RegisterForm.vue | 349 ++++++++++++---
 frontend/src/views/AuthView.vue               | 254 ++++++-----
 3 files changed, 766 insertions(+), 247 deletions(-)

diff --git a/frontend/src/components/auth/LoginForm.vue b/frontend/src/components/auth/LoginForm.vue
index d0bb6ec..9d25151 100644
--- a/frontend/src/components/auth/LoginForm.vue
+++ b/frontend/src/components/auth/LoginForm.vue
@@ -12,34 +12,35 @@ const password = ref('')
 const keepSession = ref(false)
 const isLoading = ref(false)
 const errorMessage = ref('')
+const showPassword = ref(false)
 const router = useRouter()
 const authStore = useAuthStore()
 
 const handleLogin = async () => {
   isLoading.value = true
   errorMessage.value = ''
-  
+
   try {
     const response = await authService.login({
-      email: email.value,
+      // CRÍTICO: enviar email en minúsculas para evitar mismatch con el backend
+      email: email.value.trim().toLowerCase(),
       password: password.value,
       keep_session: keepSession.value
     })
-    
+
     authStore.login(response.access_token, response.role, response.full_name)
-    
-    // Redirect based on role or home
+
     const role = response.role.toUpperCase()
     if (role === 'ADMIN') router.push('/admin')
     else if (role === 'DRIVER') router.push('/driver')
     else if (role === 'PROMOTER') router.push('/promoter')
     else router.push('/map')
-    
+
   } catch (error: any) {
     if (!error.response) {
       errorMessage.value = 'Error de conexión. Verifica tu internet.'
     } else if (error.response.status === 401) {
-      errorMessage.value = 'Credenciales inválidas.'
+      errorMessage.value = 'Correo o contraseña incorrectos.'
     } else {
       errorMessage.value = error.response?.data?.detail || 'Error en el servidor.'
     }
@@ -51,19 +52,19 @@ const handleLogin = async () => {
 const handleGoogleLogin = async () => {
   isLoading.value = true
   errorMessage.value = ''
-  
+
   try {
     const { token } = await signInWithGoogle()
     const response = await authService.googleLogin(token)
-    
+
     authStore.login(response.access_token, response.role, response.full_name)
-    
+
     const role = response.role.toUpperCase()
     if (role === 'ADMIN') router.push('/admin')
     else if (role === 'DRIVER') router.push('/driver')
     else if (role === 'PROMOTER') router.push('/promoter')
     else router.push('/map')
-    
+
   } catch (error: any) {
     errorMessage.value = 'Error al iniciar sesión con Google.'
     console.error(error)
@@ -74,84 +75,349 @@ const handleGoogleLogin = async () => {
 </script>
 
 <template>
-  <div class="login-hud">
-    <!-- Google Login Button (Featured) -->
-    <button 
+  <div class="login-form">
+    <!-- Google -->
+    <button
+      type="button"
+      class="google-btn"
+      :disabled="isLoading"
       @click="handleGoogleLogin"
-      class="w-full mb-8 h-14 bg-white dark:bg-zinc-800 rounded-2xl flex items-center justify-center gap-3 border border-slate-200 dark:border-white/10 shadow-sm active:scale-95 transition-all group"
     >
-      <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" class="size-6" alt="Google">
-      <span class="text-sm font-black text-slate-700 dark:text-gray-200 uppercase tracking-tight">Continuar con Google</span>
-      <div class="absolute inset-0 rounded-2xl border-2 border-primary opacity-0 group-hover:opacity-100 transition-opacity"></div>
+      <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" width="20" height="20" alt="Google" />
+      <span>Continuar con Google</span>
     </button>
 
-    <div class="flex items-center gap-4 mb-8">
-      <div class="h-px flex-1 bg-white/5"></div>
-      <span class="text-[10px] font-black text-slate-500 uppercase tracking-widest">O entrar con email</span>
-      <div class="h-px flex-1 bg-white/5"></div>
+    <div class="divider">
+      <span class="divider-line"></span>
+      <span class="divider-text">o con correo</span>
+      <span class="divider-line"></span>
     </div>
 
-    <form @submit.prevent="handleLogin" class="space-y-4">
-      <div class="space-y-1.5">
-        <label class="text-[10px] font-black text-primary uppercase tracking-widest ml-1">Terminal de Correo</label>
-        <div class="relative group">
-          <span class="material-icons absolute left-4 top-1/2 -translate-y-1/2 text-primary/40 text-sm">alternate_email</span>
-          <input 
-            type="email" 
-            v-model="email" 
-            placeholder="ACCESS_ID@SIBU.COM" 
-            required 
-            class="w-full pl-12 pr-4 h-14 bg-white/5 border border-white/10 rounded-2xl text-white font-bold placeholder:text-slate-600 focus:border-primary focus:ring-0 transition-all uppercase text-sm"
+    <!-- Formulario -->
+    <form @submit.prevent="handleLogin">
+      <!-- Email -->
+      <div class="field">
+        <label class="field-label" for="login-email">Correo electrónico</label>
+        <div class="input-wrap">
+          <span class="material-icons input-icon">alternate_email</span>
+          <input
+            id="login-email"
+            type="email"
+            v-model="email"
+            placeholder="tu@correo.com"
+            required
+            autocomplete="email"
+            class="field-input"
           />
         </div>
       </div>
-      
-      <div class="space-y-1.5">
-        <label class="text-[10px] font-black text-primary uppercase tracking-widest ml-1">Código de Acceso</label>
-        <div class="relative group">
-          <span class="material-icons absolute left-4 top-1/2 -translate-y-1/2 text-primary/40 text-sm">lock_open</span>
-          <input 
-            type="password" 
-            v-model="password" 
-            placeholder="••••••••" 
-            required 
-            class="w-full pl-12 pr-4 h-14 bg-white/5 border border-white/10 rounded-2xl text-white font-bold focus:border-primary focus:ring-0 transition-all text-sm"
+
+      <!-- Contraseña -->
+      <div class="field">
+        <label class="field-label" for="login-password">Contraseña</label>
+        <div class="input-wrap">
+          <span class="material-icons input-icon">lock</span>
+          <input
+            id="login-password"
+            :type="showPassword ? 'text' : 'password'"
+            v-model="password"
+            placeholder="••••••••"
+            required
+            autocomplete="current-password"
+            class="field-input"
           />
+          <button
+            type="button"
+            class="toggle-pw"
+            @click="showPassword = !showPassword"
+            tabindex="-1"
+          >
+            <span class="material-icons">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
+          </button>
         </div>
       </div>
-      
-      <div class="flex items-center justify-between pt-2">
-        <label class="flex items-center gap-2 cursor-pointer group">
-          <input type="checkbox" v-model="keepSession" class="hidden" />
-          <div class="size-5 rounded-lg border-2 border-white/10 flex items-center justify-center transition-colors" :class="keepSession ? 'bg-primary border-primary' : ''">
-            <span class="material-icons text-slate-900 text-xs" v-if="keepSession">check</span>
-          </div>
-          <span class="text-[10px] font-bold text-slate-500 uppercase">Mantener sesión</span>
-        </label>
-      </div>
-      
-      <p v-if="errorMessage" class="text-xs font-bold text-red-500 uppercase tracking-tight text-center">{{ errorMessage }}</p>
-      
-      <button 
-        type="submit" 
-        class="w-full h-14 bg-primary text-slate-900 rounded-2xl font-black uppercase tracking-[0.2em] text-xs shadow-xl shadow-primary/20 active:scale-95 transition-all mt-4"
-        :disabled="isLoading"
-      >
-        {{ isLoading ? 'Validando...' : 'Acceder al Sistema' }}
+
+      <!-- Mantener sesión -->
+      <label class="keep-session">
+        <input type="checkbox" v-model="keepSession" class="keep-checkbox" />
+        <span class="keep-box" :class="{ 'keep-box--on': keepSession }">
+          <span v-if="keepSession" class="material-icons keep-check">check</span>
+        </span>
+        <span class="keep-label">Mantener sesión iniciada</span>
+      </label>
+
+      <!-- Error -->
+      <p v-if="errorMessage" class="error-msg">
+        <span class="material-icons error-icon">error_outline</span>
+        {{ errorMessage }}
+      </p>
+
+      <!-- Botón enviar -->
+      <button type="submit" class="submit-btn" :disabled="isLoading">
+        <span v-if="isLoading" class="btn-spinner"></span>
+        <span>{{ isLoading ? 'Ingresando...' : 'Iniciar Sesión' }}</span>
       </button>
     </form>
-    
-    <div class="mt-8 text-center">
-      <p class="text-[11px] font-bold text-slate-500 uppercase">
-        ¿Nuevo en la red? 
-        <button @click="emit('toggle')" class="text-primary hover:underline ml-1">Crear Registro</button>
-      </p>
-    </div>
+
+    <!-- Switch a registro -->
+    <p class="switch-text">
+      ¿No tienes cuenta?
+      <button type="button" class="switch-link" @click="emit('toggle')">Regístrate aquí</button>
+    </p>
   </div>
 </template>
 
 <style scoped>
-input::placeholder {
-  letter-spacing: 0.1em;
+.login-form {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* ─── Google ─── */
+.google-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.75rem;
+  padding: 0.875rem;
+  background: var(--bg-primary);
+  border: 1.5px solid var(--border-color);
+  border-radius: 0.875rem;
+  color: var(--text-primary);
+  font-size: 0.9375rem;
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  transition: border-color 0.2s, background 0.2s;
+}
+
+.google-btn:hover:not(:disabled) {
+  border-color: var(--active-color);
+}
+
+.google-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* ─── Divider ─── */
+.divider {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.divider-line {
+  flex: 1;
+  height: 1px;
+  background: var(--border-color);
+}
+
+.divider-text {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  white-space: nowrap;
+}
+
+/* ─── Campos ─── */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.field + .field {
+  margin-top: 0.875rem;
+}
+
+.field-label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+  padding-left: 0.25rem;
+}
+
+.input-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-icon {
+  position: absolute;
+  left: 0.875rem;
+  font-size: 1.125rem;
+  color: var(--text-secondary);
+  pointer-events: none;
+}
+
+.field-input {
+  width: 100%;
+  padding: 0.875rem 0.875rem 0.875rem 2.75rem;
+  background: var(--bg-primary);
+  border: 1.5px solid var(--border-color);
+  border-radius: 0.875rem;
+  color: var(--text-primary);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.field-input::placeholder {
+  color: var(--text-secondary);
+  opacity: 0.5;
+}
+
+.field-input:focus {
+  border-color: var(--active-color);
+}
+
+.toggle-pw {
+  position: absolute;
+  right: 0.875rem;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 0;
+}
+
+.toggle-pw .material-icons {
+  font-size: 1.125rem;
+}
+
+/* ─── Mantener sesión ─── */
+.keep-session {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  cursor: pointer;
+  margin-top: 0.25rem;
+}
+
+.keep-checkbox {
+  display: none;
+}
+
+.keep-box {
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 1.5px solid var(--border-color);
+  border-radius: 0.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.keep-box--on {
+  background: var(--active-color);
+  border-color: var(--active-color);
+}
+
+.keep-check {
+  font-size: 0.875rem;
+  color: #101820;
+}
+
+.keep-label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
+
+/* ─── Error ─── */
+.error-msg {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  border-radius: 0.75rem;
+  padding: 0.75rem 1rem;
+  color: #ef4444;
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0;
+  margin-top: 0.5rem;
+}
+
+.error-icon {
+  font-size: 1.125rem;
+  flex-shrink: 0;
+}
+
+/* ─── Botón enviar ─── */
+.submit-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: var(--active-color);
+  color: #101820;
+  border: none;
+  border-radius: 0.875rem;
+  font-size: 0.9375rem;
+  font-weight: 800;
+  font-family: inherit;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.15s;
+  margin-top: 1rem;
+}
+
+.submit-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.submit-btn:not(:disabled):active {
+  transform: scale(0.98);
+}
+
+.btn-spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid rgba(16, 24, 32, 0.3);
+  border-top-color: #101820;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ─── Switch ─── */
+.switch-text {
+  text-align: center;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.switch-link {
+  background: none;
+  border: none;
+  color: var(--active-color);
+  font-size: inherit;
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 0.25rem;
+  text-decoration: underline;
+  text-underline-offset: 2px;
 }
 </style>
diff --git a/frontend/src/components/auth/RegisterForm.vue b/frontend/src/components/auth/RegisterForm.vue
index 79c5506..8e43864 100644
--- a/frontend/src/components/auth/RegisterForm.vue
+++ b/frontend/src/components/auth/RegisterForm.vue
@@ -11,27 +11,26 @@ const password = ref('')
 const isLoading = ref(false)
 const errorMessage = ref('')
 const successMessage = ref('')
+const showPassword = ref(false)
 
 const handleRegister = async () => {
   isLoading.value = true
   errorMessage.value = ''
-  
+
   try {
     await authService.registerPassenger({
-      full_name: fullName.value,
-      email: email.value,
+      full_name: fullName.value.trim(),
+      email: email.value.trim().toLowerCase(),
       password: password.value
     })
-    
-    analyticsService.logEvent({ 
-      event_name: 'sign_up', 
-      properties: { method: 'email' } 
+
+    analyticsService.logEvent({
+      event_name: 'sign_up',
+      properties: { method: 'email' }
     })
-    
-    successMessage.value = 'Registro exitoso. Ahora puedes entrar.'
-    setTimeout(() => {
-      emit('success')
-    }, 2000)
+
+    successMessage.value = '¡Cuenta creada! Ahora puedes iniciar sesión.'
+    setTimeout(() => { emit('success') }, 2000)
   } catch (error: any) {
     errorMessage.value = error.response?.data?.detail || 'Error al crear la cuenta.'
   } finally {
@@ -41,73 +40,293 @@ const handleRegister = async () => {
 </script>
 
 <template>
-  <div class="register-hud">
-    <div v-if="successMessage" class="bg-primary/10 border border-primary/50 p-6 rounded-3xl text-center mb-6">
-      <span class="material-icons text-primary text-4xl mb-2">verified_user</span>
-      <h3 class="text-white font-black uppercase text-sm mb-1">Acceso Concedido</h3>
-      <p class="text-xs text-primary/80 font-bold uppercase">{{ successMessage }}</p>
+  <div class="register-form">
+
+    <!-- Éxito -->
+    <div v-if="successMessage" class="success-card">
+      <span class="material-icons success-icon">check_circle</span>
+      <h3 class="success-title">¡Registro exitoso!</h3>
+      <p class="success-desc">{{ successMessage }}</p>
     </div>
 
-    <form v-else @submit.prevent="handleRegister" class="space-y-4">
-      <div class="space-y-1.5">
-        <label class="text-[10px] font-black text-primary uppercase tracking-widest ml-1">Identidad de Usuario</label>
-        <div class="relative group">
-          <span class="material-icons absolute left-4 top-1/2 -translate-y-1/2 text-primary/40 text-sm">badge</span>
-          <input 
-            type="text" 
-            v-model="fullName" 
-            placeholder="NOMBRE COMPLETO" 
-            required 
-            class="w-full pl-12 pr-4 h-14 bg-white/5 border border-white/10 rounded-2xl text-white font-bold placeholder:text-slate-600 focus:border-primary focus:ring-0 transition-all uppercase text-sm"
+    <!-- Formulario -->
+    <form v-else @submit.prevent="handleRegister">
+
+      <!-- Nombre -->
+      <div class="field">
+        <label class="field-label" for="reg-name">Nombre completo</label>
+        <div class="input-wrap">
+          <span class="material-icons input-icon">person</span>
+          <input
+            id="reg-name"
+            type="text"
+            v-model="fullName"
+            placeholder="Tu nombre"
+            required
+            autocomplete="name"
+            class="field-input"
           />
         </div>
       </div>
 
-      <div class="space-y-1.5">
-        <label class="text-[10px] font-black text-primary uppercase tracking-widest ml-1">Terminal de Correo</label>
-        <div class="relative group">
-          <span class="material-icons absolute left-4 top-1/2 -translate-y-1/2 text-primary/40 text-sm">alternate_email</span>
-          <input 
-            type="email" 
-            v-model="email" 
-            placeholder="USUARIO@SIBU.COM" 
-            required 
-            class="w-full pl-12 pr-4 h-14 bg-white/5 border border-white/10 rounded-2xl text-white font-bold placeholder:text-slate-600 focus:border-primary focus:ring-0 transition-all uppercase text-sm"
+      <!-- Email -->
+      <div class="field">
+        <label class="field-label" for="reg-email">Correo electrónico</label>
+        <div class="input-wrap">
+          <span class="material-icons input-icon">alternate_email</span>
+          <input
+            id="reg-email"
+            type="email"
+            v-model="email"
+            placeholder="tu@correo.com"
+            required
+            autocomplete="email"
+            class="field-input"
           />
         </div>
       </div>
-      
-      <div class="space-y-1.5">
-        <label class="text-[10px] font-black text-primary uppercase tracking-widest ml-1">Definir Código de Acceso</label>
-        <div class="relative group">
-          <span class="material-icons absolute left-4 top-1/2 -translate-y-1/2 text-primary/40 text-sm">security</span>
-          <input 
-            type="password" 
-            v-model="password" 
-            placeholder="MÍNIMO 8 CARACTERES" 
-            required 
+
+      <!-- Contraseña -->
+      <div class="field">
+        <label class="field-label" for="reg-password">Contraseña</label>
+        <div class="input-wrap">
+          <span class="material-icons input-icon">lock</span>
+          <input
+            id="reg-password"
+            :type="showPassword ? 'text' : 'password'"
+            v-model="password"
+            placeholder="Mínimo 8 caracteres"
+            required
             minlength="8"
-            class="w-full pl-12 pr-4 h-14 bg-white/5 border border-white/10 rounded-2xl text-white font-bold placeholder:text-slate-600 focus:border-primary focus:ring-0 transition-all text-sm"
+            autocomplete="new-password"
+            class="field-input"
           />
+          <button
+            type="button"
+            class="toggle-pw"
+            @click="showPassword = !showPassword"
+            tabindex="-1"
+          >
+            <span class="material-icons">{{ showPassword ? 'visibility_off' : 'visibility' }}</span>
+          </button>
         </div>
       </div>
-      
-      <p v-if="errorMessage" class="text-xs font-bold text-red-500 uppercase tracking-tight text-center">{{ errorMessage }}</p>
-      
-      <button 
-        type="submit" 
-        class="w-full h-14 bg-primary text-slate-900 rounded-2xl font-black uppercase tracking-[0.2em] text-xs shadow-xl shadow-primary/20 active:scale-95 transition-all mt-6"
-        :disabled="isLoading"
-      >
-        {{ isLoading ? 'Procesando Datos...' : 'Registrar Credenciales' }}
+
+      <!-- Error -->
+      <p v-if="errorMessage" class="error-msg">
+        <span class="material-icons error-icon">error_outline</span>
+        {{ errorMessage }}
+      </p>
+
+      <!-- Botón enviar -->
+      <button type="submit" class="submit-btn" :disabled="isLoading">
+        <span v-if="isLoading" class="btn-spinner"></span>
+        <span>{{ isLoading ? 'Creando cuenta...' : 'Crear Cuenta' }}</span>
       </button>
     </form>
-    
-    <div class="mt-8 text-center">
-      <p class="text-[11px] font-bold text-slate-500 uppercase">
-        ¿Ya tienes autorización? 
-        <button @click="emit('toggle')" class="text-primary hover:underline ml-1">Regresar al Login</button>
-      </p>
-    </div>
+
+    <!-- Switch a login -->
+    <p class="switch-text">
+      ¿Ya tienes cuenta?
+      <button type="button" class="switch-link" @click="emit('toggle')">Inicia sesión</button>
+    </p>
   </div>
 </template>
+
+<style scoped>
+.register-form {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+/* ─── Éxito ─── */
+.success-card {
+  background: rgba(74, 222, 128, 0.08);
+  border: 1px solid rgba(74, 222, 128, 0.2);
+  border-radius: 1rem;
+  padding: 2rem 1.5rem;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.success-icon {
+  font-size: 3rem;
+  color: #4ade80;
+  margin-bottom: 0.25rem;
+}
+
+.success-title {
+  font-size: 1.125rem;
+  font-weight: 800;
+  color: var(--text-primary);
+  margin: 0;
+}
+
+.success-desc {
+  font-size: 0.875rem;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+/* ─── Campos ─── */
+.field {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.field + .field {
+  margin-top: 0.875rem;
+}
+
+.field-label {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+  padding-left: 0.25rem;
+}
+
+.input-wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.input-icon {
+  position: absolute;
+  left: 0.875rem;
+  font-size: 1.125rem;
+  color: var(--text-secondary);
+  pointer-events: none;
+}
+
+.field-input {
+  width: 100%;
+  padding: 0.875rem 0.875rem 0.875rem 2.75rem;
+  background: var(--bg-primary);
+  border: 1.5px solid var(--border-color);
+  border-radius: 0.875rem;
+  color: var(--text-primary);
+  font-size: 0.9375rem;
+  font-weight: 500;
+  font-family: inherit;
+  outline: none;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+
+.field-input::placeholder {
+  color: var(--text-secondary);
+  opacity: 0.5;
+}
+
+.field-input:focus {
+  border-color: var(--active-color);
+}
+
+.toggle-pw {
+  position: absolute;
+  right: 0.875rem;
+  background: none;
+  border: none;
+  color: var(--text-secondary);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  padding: 0;
+}
+
+.toggle-pw .material-icons {
+  font-size: 1.125rem;
+}
+
+/* ─── Error ─── */
+.error-msg {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  background: rgba(239, 68, 68, 0.1);
+  border: 1px solid rgba(239, 68, 68, 0.2);
+  border-radius: 0.75rem;
+  padding: 0.75rem 1rem;
+  color: #ef4444;
+  font-size: 0.875rem;
+  font-weight: 600;
+  margin: 0;
+  margin-top: 0.5rem;
+}
+
+.error-icon {
+  font-size: 1.125rem;
+  flex-shrink: 0;
+}
+
+/* ─── Botón ─── */
+.submit-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 1rem;
+  background: var(--active-color);
+  color: #101820;
+  border: none;
+  border-radius: 0.875rem;
+  font-size: 0.9375rem;
+  font-weight: 800;
+  font-family: inherit;
+  cursor: pointer;
+  transition: opacity 0.2s, transform 0.15s;
+  margin-top: 1rem;
+}
+
+.submit-btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+}
+
+.submit-btn:not(:disabled):active {
+  transform: scale(0.98);
+}
+
+.btn-spinner {
+  width: 1rem;
+  height: 1rem;
+  border: 2px solid rgba(16, 24, 32, 0.3);
+  border-top-color: #101820;
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  flex-shrink: 0;
+}
+
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* ─── Switch ─── */
+.switch-text {
+  text-align: center;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin: 0;
+}
+
+.switch-link {
+  background: none;
+  border: none;
+  color: var(--active-color);
+  font-size: inherit;
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  padding: 0;
+  margin-left: 0.25rem;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+</style>
diff --git a/frontend/src/views/AuthView.vue b/frontend/src/views/AuthView.vue
index fb1c702..a97ce8c 100644
--- a/frontend/src/views/AuthView.vue
+++ b/frontend/src/views/AuthView.vue
@@ -4,141 +4,175 @@ import LoginForm from '@/components/auth/LoginForm.vue'
 import RegisterForm from '@/components/auth/RegisterForm.vue'
 
 const isLogin = ref(true)
-
-const toggleAuth = () => {
-  isLogin.value = !isLogin.value
-}
+const toggleAuth = () => { isLogin.value = !isLogin.value }
 </script>
 
 <template>
-  <div class="auth-view-hud bg-[#0F1115] min-h-screen flex items-center justify-center p-6 relative overflow-hidden">
-    <!-- HUD Background Elements -->
-    <div class="absolute inset-0 pointer-events-none">
-      <div class="scanning-lines"></div>
-      <div class="hud-corner top-left"></div>
-      <div class="hud-corner top-right"></div>
-      <div class="hud-corner bottom-left"></div>
-      <div class="hud-corner bottom-right"></div>
-      
-      <!-- Animated HUD Circles -->
-      <div class="hud-circle opacity-10"></div>
-      <div class="hud-circle-inner opacity-5"></div>
-    </div>
+  <div class="auth-page">
+    <!-- Fondo con glow SIBU -->
+    <div class="auth-glow" aria-hidden="true"></div>
 
-    <div class="auth-container relative z-10 w-full max-w-md">
-      <!-- SIBU Branding -->
-      <div class="text-center mb-10">
-        <h1 class="text-5xl font-black italic tracking-tighter text-primary mb-2">SIBU</h1>
-        <div class="flex items-center justify-center gap-2">
-          <span class="h-px w-8 bg-primary/30"></span>
-          <p class="text-[10px] font-bold text-primary tracking-[0.3em] uppercase">Auth System v2.0</p>
-          <span class="h-px w-8 bg-primary/30"></span>
+    <div class="auth-wrapper">
+      <!-- Branding -->
+      <div class="auth-brand">
+        <h1 class="brand-title">SIBU</h1>
+        <p class="brand-subtitle">Sistema de Transporte Público</p>
+      </div>
+
+      <!-- Card principal -->
+      <div class="auth-card">
+        <!-- Tabs Login / Registro -->
+        <div class="auth-tabs">
+          <button
+            class="auth-tab"
+            :class="{ 'auth-tab--active': isLogin }"
+            @click="isLogin = true"
+          >
+            Iniciar Sesión
+          </button>
+          <button
+            class="auth-tab"
+            :class="{ 'auth-tab--active': !isLogin }"
+            @click="isLogin = false"
+          >
+            Crear Cuenta
+          </button>
         </div>
+
+        <!-- Formularios con transición -->
+        <Transition name="auth-slide" mode="out-in">
+          <LoginForm v-if="isLogin" @toggle="toggleAuth" />
+          <RegisterForm v-else @toggle="toggleAuth" @success="isLogin = true" />
+        </Transition>
       </div>
 
-      <!-- Auth Box -->
-      <div class="bg-[#1C1F26]/60 backdrop-blur-xl rounded-[2.5rem] p-8 border border-white/5 shadow-2xl relative">
-        <!-- Floating HUD bracket -->
-        <div class="absolute -top-4 -left-4 size-12 border-t-2 border-l-2 border-primary/40 rounded-tl-2xl"></div>
-        <div class="absolute -bottom-4 -right-4 size-12 border-b-2 border-r-2 border-primary/40 rounded-br-2xl"></div>
-
-        <transition name="hud-fade" mode="out-in">
-          <div :key="isLogin ? 'login' : 'register'">
-            <div class="mb-8">
-              <h2 class="text-2xl font-black text-white mb-1">
-                {{ isLogin ? 'SNC: INICIAR SESIÓN' : 'SNC: REGISTRO' }}
-              </h2>
-              <p class="text-xs text-slate-500 font-bold uppercase tracking-wider">
-                {{ isLogin ? 'Acceso autorizado requerido' : 'Crear nuevas credenciales de acceso' }}
-              </p>
-            </div>
-
-            <LoginForm v-if="isLogin" @toggle="toggleAuth" />
-            <RegisterForm v-else @toggle="toggleAuth" @success="isLogin = true" />
-          </div>
-        </transition>
-      </div>
-
-      <!-- Footer Help -->
-      <div class="mt-8 text-center">
-        <p class="text-[10px] font-bold text-slate-600 uppercase tracking-widest">
-          Encriptación End-to-End • SIBU Cloud Services
-        </p>
-      </div>
+      <!-- Footer -->
+      <p class="auth-footer">SIBU © 2026 • Sistema de Transporte de Chiriquí</p>
     </div>
   </div>
 </template>
 
 <style scoped>
-.auth-view-hud {
-  font-family: 'Plus Jakarta Sans', 'Space Grotesk', sans-serif;
+.auth-page {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--bg-primary);
+  padding: 1.5rem;
+  position: relative;
+  overflow: hidden;
+  font-family: var(--font-family);
 }
 
-.scanning-lines {
+/* Glow decorativo SIBU amarillo */
+.auth-glow {
   position: absolute;
-  inset: 0;
-  background: linear-gradient(
-    to bottom,
-    transparent 50%,
-    rgba(254, 231, 21, 0.02) 50%
-  );
-  background-size: 100% 4px;
-  animation: scan 10s linear infinite;
-}
-
-@keyframes scan {
-  from { background-position: 0 0; }
-  to { background-position: 0 100%; }
-}
-
-.hud-corner {
-  position: absolute;
-  width: 40px;
-  height: 40px;
-  border-color: rgba(254, 231, 21, 0.2);
-  border-style: solid;
-}
-
-.top-left { top: 40px; left: 40px; border-width: 2px 0 0 2px; border-radius: 4px 0 0 0; }
-.top-right { top: 40px; right: 40px; border-width: 2px 2px 0 0; border-radius: 0 4px 0 0; }
-.bottom-left { bottom: 40px; left: 40px; border-width: 0 0 2px 2px; border-radius: 0 0 0 4px; }
-.bottom-right { bottom: 40px; right: 40px; border-width: 0 2px 2px 0; border-radius: 0 0 4px 0; }
-
-.hud-circle {
-  position: absolute;
-  top: 50%;
+  top: -20%;
   left: 50%;
-  transform: translate(-50%, -50%);
-  width: 600px;
-  height: 600px;
-  border: 1px dashed rgba(254, 231, 21, 0.3);
+  transform: translateX(-50%);
+  width: 500px;
+  height: 500px;
   border-radius: 50%;
-  animation: spin 60s linear infinite;
+  background: radial-gradient(circle, rgba(254, 231, 21, 0.08) 0%, transparent 70%);
+  pointer-events: none;
 }
 
-.hud-circle-inner {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: 400px;
-  height: 400px;
-  border: 40px double rgba(254, 231, 21, 0.2);
-  border-radius: 50%;
+.auth-wrapper {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+  max-width: 420px;
+  display: flex;
+  flex-direction: column;
+  gap: 1.75rem;
 }
 
-@keyframes spin {
-  from { transform: translate(-50%, -50%) rotate(0deg); }
-  to { transform: translate(-50%, -50%) rotate(360deg); }
+/* ─── Branding ─── */
+.auth-brand {
+  text-align: center;
 }
 
-.hud-fade-enter-active, .hud-fade-leave-active {
-  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+.brand-title {
+  font-size: 3.5rem;
+  font-weight: 900;
+  letter-spacing: -0.05em;
+  color: var(--active-color);
+  margin: 0;
+  line-height: 1;
 }
 
-.hud-fade-enter-from, .hud-fade-leave-to {
+.brand-subtitle {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  margin: 0.375rem 0 0;
+  letter-spacing: 0.02em;
+}
+
+/* ─── Card ─── */
+.auth-card {
+  background: var(--bg-secondary);
+  border: 1px solid var(--border-color);
+  border-radius: 1.5rem;
+  overflow: hidden;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
+}
+
+/* ─── Tabs ─── */
+.auth-tabs {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.auth-tab {
+  padding: 1rem;
+  background: transparent;
+  border: none;
+  color: var(--text-secondary);
+  font-size: 0.875rem;
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.2s;
+  border-bottom: 2px solid transparent;
+  margin-bottom: -1px;
+}
+
+.auth-tab:hover {
+  color: var(--text-primary);
+}
+
+.auth-tab--active {
+  color: var(--active-color);
+  border-bottom-color: var(--active-color);
+}
+
+/* ─── Transición entre formularios ─── */
+.auth-slide-enter-active,
+.auth-slide-leave-active {
+  transition: opacity 0.22s ease, transform 0.22s ease;
+}
+
+.auth-slide-enter-from {
   opacity: 0;
-  transform: scale(0.95);
-  filter: blur(10px);
+  transform: translateX(16px);
+}
+
+.auth-slide-leave-to {
+  opacity: 0;
+  transform: translateX(-16px);
+}
+
+/* ─── Footer ─── */
+.auth-footer {
+  text-align: center;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+  opacity: 0.5;
+  margin: 0;
+  letter-spacing: 0.03em;
 }
 </style>