feat:

- conexion supabase
- autenticacion solo correos glm
- pantalla gestor empleados

route-planner/angular.json

@@ -30,7 +30,7 @@
             "production": {
               "budgets": [
                 { "type": "initial", "maximumWarning": "2.1MB", "maximumError": "3MB" },
-                { "type": "anyComponentStyle", "maximumWarning": "6kB", "maximumError": "10kB" }
+                { "type": "anyComponentStyle", "maximumWarning": "6kB", "maximumError": "12kB" }
               ],
               "outputHashing": "all",
               "fileReplacements": [

route-planner/package-lock.json

@@ -15,6 +15,7 @@
         "@angular/platform-browser": "^21.1.0",
         "@angular/router": "^21.1.0",
         "@primeng/themes": "^21.0.0",
+        "@supabase/supabase-js": "^2.115.0",
         "file-saver": "^2.0.5",
         "leaflet": "^1.9.4",
         "leaflet.heat": "^0.2.0",
@@ -4037,6 +4038,98 @@
       "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
       "license": "MIT"
     },
+    "node_modules/@supabase/auth-js": {
+      "version": "2.115.0",
+      "resolved": "https://registry.npmjs.org/@supabase/auth-js/-/auth-js-2.115.0.tgz",
+      "integrity": "sha512-YNQlQWm1H0gsXHSY8Jd/xepBhjO0Zhwx04iW17A83/joQ5kFiUin6iPj9s9kZZvupnwLjXVP/diTFiLz2jUbwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      }
+    },
+    "node_modules/@supabase/functions-js": {
+      "version": "2.115.0",
+      "resolved": "https://registry.npmjs.org/@supabase/functions-js/-/functions-js-2.115.0.tgz",
+      "integrity": "sha512-p97V6/YFcdp+zblFDVJaE8f9rGKTNz0PRzyJ2d1w/EYIU5lwidKuc3l/wM+u27ACmAC62albvoGiUGzLPSg7Aw==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      }
+    },
+    "node_modules/@supabase/phoenix": {
+      "version": "0.4.5",
+      "resolved": "https://registry.npmjs.org/@supabase/phoenix/-/phoenix-0.4.5.tgz",
+      "integrity": "sha512-aAn9H9ovVyeApKy11OWOrrOGq8DV68yWeH4ud2lN9fzn4aO8Zb5GLL9m1pUg9nLqIcT+ZDfAcsZe0E/nqdv2lw==",
+      "license": "MIT"
+    },
+    "node_modules/@supabase/postgrest-js": {
+      "version": "2.115.0",
+      "resolved": "https://registry.npmjs.org/@supabase/postgrest-js/-/postgrest-js-2.115.0.tgz",
+      "integrity": "sha512-DdERcurLh5t84pgSywDg2LjLR5le7XAzl52/iQhC7FdboWDqGfDPMfaWJV3MHvhyxSlSNzbpSQG+RiQOBSn/4w==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      }
+    },
+    "node_modules/@supabase/realtime-js": {
+      "version": "2.115.0",
+      "resolved": "https://registry.npmjs.org/@supabase/realtime-js/-/realtime-js-2.115.0.tgz",
+      "integrity": "sha512-5HyBkvlA/IUV2v8jX3uLTdy15jmTPRVXwXKoxvH2SKw5jZMNURxCxt+VpCEukscXQlY7pUpH8Cy4NH6io4iaRw==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/phoenix": "0.4.5",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      }
+    },
+    "node_modules/@supabase/storage-js": {
+      "version": "2.115.0",
+      "resolved": "https://registry.npmjs.org/@supabase/storage-js/-/storage-js-2.115.0.tgz",
+      "integrity": "sha512-dLyIxzbO+MCcKHhcce8rVUCQX1iyqXqQ8ytgkOVYJ7D+Zp0qKylPtQH3hamgxrGSxtDjaw47Urpzw2iK9PsKdA==",
+      "license": "MIT",
+      "dependencies": {
+        "iceberg-js": "^0.8.1",
+        "tslib": "2.8.1"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      }
+    },
+    "node_modules/@supabase/supabase-js": {
+      "version": "2.115.0",
+      "resolved": "https://registry.npmjs.org/@supabase/supabase-js/-/supabase-js-2.115.0.tgz",
+      "integrity": "sha512-PYJSxtCo37R7tTZW6pAqsxUeSx/dlhA7zn8RzKEUSCqyTxCUhG+iHrDTb04UyVBYbttaUbhwkNTvb8h5HW+uZA==",
+      "license": "MIT",
+      "dependencies": {
+        "@supabase/auth-js": "2.115.0",
+        "@supabase/functions-js": "2.115.0",
+        "@supabase/postgrest-js": "2.115.0",
+        "@supabase/realtime-js": "2.115.0",
+        "@supabase/storage-js": "2.115.0"
+      },
+      "engines": {
+        "node": ">=22.0.0"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": ">=1.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@tufjs/canonical-json": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@tufjs/canonical-json/-/canonical-json-2.0.0.tgz",
@@ -5888,6 +5981,15 @@
         "node": ">= 14"
       }
     },
+    "node_modules/iceberg-js": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/iceberg-js/-/iceberg-js-0.8.1.tgz",
+      "integrity": "sha512-1dhVQZXhcHje7798IVM+xoo/1ZdVfzOMIc8/rgVSijRK38EDqOJoGula9N/8ZI5RD8QTxNQtK/Gozpr+qUqRRA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=20.0.0"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.7.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.7.3.tgz",

route-planner/package.json

@@ -17,6 +17,7 @@
     "@angular/platform-browser": "^21.1.0",
     "@angular/router": "^21.1.0",
     "@primeng/themes": "^21.0.0",
+    "@supabase/supabase-js": "^2.115.0",
     "file-saver": "^2.0.5",
     "leaflet": "^1.9.4",
     "leaflet.heat": "^0.2.0",

route-planner/src/app/app.routes.ts

@@ -3,12 +3,15 @@ import { LoginComponent } from './public/login/login.component';
 import { HomeComponent } from './private/home/home.component';
 import { AssignedRouteDetailComponent } from './private/home/assigned-route-detail/assigned-route-detail.component';
 import { RouteOverviewMapComponent } from './private/home/route-overview-map/route-overview-map.component';
+import { authGuard } from './core/services/auth.guard';
+import { EmployeesComponent } from './private/employees/employees.component';
 
 export const routes: Routes = [
   { path: '', redirectTo: 'login', pathMatch: 'full' },
   { path: 'login', component: LoginComponent },
-  { path: 'home', component: HomeComponent, pathMatch: 'full' },
+  { path: 'home', component: HomeComponent, pathMatch: 'full', canActivate: [authGuard] },
-  { path: 'home/assigned-route', component: AssignedRouteDetailComponent },
+  { path: 'empleados', component: EmployeesComponent, canActivate: [authGuard] },
-  { path: 'home/mapa', component: RouteOverviewMapComponent },
+  { path: 'home/assigned-route', component: AssignedRouteDetailComponent, canActivate: [authGuard] },
+  { path: 'home/mapa', component: RouteOverviewMapComponent, canActivate: [authGuard] },
   { path: '**', redirectTo: 'login' }
 ];

route-planner/src/app/core/models/employee.model.ts

@@ -0,0 +1,21 @@
+export interface Employee {
+  id: string;
+  employee_code: string;
+  nombre: string;
+  usuario: string | null;
+  email: string | null;
+  perfil: string | null;
+  pais: string | null;
+  regional: string | null;
+  latitud: number;
+  longitud: number;
+  horas_por_dia: number;
+  dias_por_semana: number;
+  jornada_codigo: string;
+  horas_descanso_por_dia: number;
+  dias_descanso: string[];
+  visitas_maximas_por_dia: number;
+  activo: boolean;
+}
+
+export type EmployeeInput = Omit<Employee, 'id'>;

route-planner/src/app/core/models/work-schedule.model.ts

@@ -0,0 +1,17 @@
+export interface WorkSchedule {
+  code: 'LUN_DOM_44' | 'LUN_SAB_40' | 'LUN_SAB_44' | 'LUN_VIE_40';
+  label: string;
+  weeklyHours: number;
+  days: string[];
+}
+
+export const WORK_SCHEDULES: WorkSchedule[] = [
+  { code: 'LUN_DOM_44', label: 'Lun a Dom - 44h', weeklyHours: 44, days: ['Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado', 'Domingo'] },
+  { code: 'LUN_SAB_40', label: 'Lun a Sáb - 40h', weeklyHours: 40, days: ['Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'] },
+  { code: 'LUN_SAB_44', label: 'Lun a Sáb - 44h', weeklyHours: 44, days: ['Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes', 'Sabado'] },
+  { code: 'LUN_VIE_40', label: 'Lun a Vie - 40h', weeklyHours: 40, days: ['Lunes', 'Martes', 'Miercoles', 'Jueves', 'Viernes'] }
+];
+
+export function workSchedule(code: string): WorkSchedule {
+  return WORK_SCHEDULES.find(schedule => schedule.code === code) ?? WORK_SCHEDULES[3];
+}

route-planner/src/app/core/services/auth.guard.ts

@@ -0,0 +1,9 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+import { AuthService } from './auth.service';
+
+export const authGuard: CanActivateFn = async () => {
+  const auth = inject(AuthService);
+  const router = inject(Router);
+  return await auth.getSession() ? true : router.parseUrl('/login');
+};

route-planner/src/app/core/services/auth.service.ts

@@ -0,0 +1,37 @@
+import { Injectable } from '@angular/core';
+import { Session } from '@supabase/supabase-js';
+import { supabaseClient } from './supabase.client';
+
+const CORPORATE_DOMAIN = '@gomezleemarketing.com';
+
+@Injectable({ providedIn: 'root' })
+export class AuthService {
+  private readonly client = supabaseClient;
+
+  async signIn(email: string, password: string): Promise<string | null> {
+    const normalizedEmail = email.trim().toLowerCase();
+    if (!normalizedEmail.endsWith(CORPORATE_DOMAIN)) {
+      return `Solo se permiten correos ${CORPORATE_DOMAIN}.`;
+    }
+    const { error } = await this.client.auth.signInWithPassword({ email: normalizedEmail, password });
+    return error?.message ?? null;
+  }
+
+  async signInWithGoogle(): Promise<string | null> {
+    const { error } = await this.client.auth.signInWithOAuth({
+      provider: 'google',
+      options: { redirectTo: `${window.location.origin}/home` }
+    });
+    return error?.message ?? null;
+  }
+
+  async getSession(): Promise<Session | null> {
+    const { data } = await this.client.auth.getSession();
+    const email = data.session?.user.email?.toLowerCase() ?? '';
+    return email.endsWith(CORPORATE_DOMAIN) ? data.session : null;
+  }
+
+  async signOut(): Promise<void> {
+    await this.client.auth.signOut();
+  }
+}

route-planner/src/app/core/services/employee.service.ts

@@ -0,0 +1,66 @@
+import { Injectable } from '@angular/core';
+import { Employee, EmployeeInput } from '../models/employee.model';
+import { workSchedule } from '../models/work-schedule.model';
+import * as XLSX from 'xlsx';
+import { supabaseClient } from './supabase.client';
+
+@Injectable({ providedIn: 'root' })
+export class EmployeeService {
+  private readonly client = supabaseClient;
+  private readonly table = 'rutero_empleados';
+
+  async list(): Promise<Employee[]> {
+    const { data: sessionData, error: sessionError } = await this.client.auth.getSession();
+    if (sessionError) throw sessionError;
+    if (!sessionData.session) throw new Error('No hay una sesión Supabase activa. Cierra sesión e inicia sesión nuevamente.');
+    const { data, error } = await this.client.from(this.table).select('*').order('nombre');
+    if (error) throw new Error(`Supabase ${error.code ?? 'error'}: ${error.message}`);
+    return (data ?? []).map(row => ({
+      ...row,
+      jornada_codigo: row.jornada_codigo ?? 'LUN_VIE_40',
+      horas_descanso_por_dia: Number(row.horas_descanso_por_dia ?? 1),
+      dias_descanso: Array.isArray(row.dias_descanso) ? row.dias_descanso : []
+    })) as Employee[];
+  }
+
+  async create(employee: EmployeeInput): Promise<void> {
+    const { error } = await this.client.from(this.table).insert(employee);
+    if (error) throw error;
+  }
+
+  async upsert(employees: EmployeeInput[]): Promise<void> {
+    const { error } = await this.client.from(this.table).upsert(employees, { onConflict: 'employee_code' });
+    if (error) throw error;
+  }
+
+  async update(id: string, employee: EmployeeInput): Promise<void> {
+    const { error } = await this.client.from(this.table).update(employee).eq('id', id);
+    if (error) throw error;
+  }
+
+  async remove(id: string): Promise<void> {
+    const { error } = await this.client.from(this.table).delete().eq('id', id);
+    if (error) throw error;
+  }
+
+  async activeEmployeesFile(): Promise<File> {
+    const employees = (await this.list()).filter(employee => employee.activo);
+    const rows = employees.map(employee => ({
+      ID: employee.employee_code,
+      'Nombre del empleado': employee.nombre,
+      Latitud: employee.latitud,
+      Longitud: employee.longitud,
+      'Horas por día usuario': employee.horas_por_dia,
+      'Horas por semana usuario': workSchedule(employee.jornada_codigo).weeklyHours,
+      'Visitas maximas por dia': employee.visitas_maximas_por_dia,
+      Jornada: employee.jornada_codigo,
+      'Horas descanso por día': employee.horas_descanso_por_dia,
+      'Días descanso': (employee.dias_descanso ?? []).join(', '),
+      'Usuario activo': 'Sí'
+    }));
+    const workbook = XLSX.utils.book_new();
+    XLSX.utils.book_append_sheet(workbook, XLSX.utils.json_to_sheet(rows), 'Usuarios');
+    const data = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
+    return new File([data], 'empleados_activos.xlsx', { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+  }
+}

route-planner/src/app/core/services/supabase.client.ts

@@ -0,0 +1,6 @@
+import { createClient } from '@supabase/supabase-js';
+import { environment } from '../../../environments/environment';
+
+export const supabaseClient = createClient(environment.supabaseUrl, environment.supabaseAnonKey, {
+  auth: { persistSession: true, autoRefreshToken: true, detectSessionInUrl: true }
+});

route-planner/src/app/private/employees/employees.component.css

@@ -0,0 +1,20 @@
+.employees-topbar { display: flex; align-items: center; gap: 12px; padding: 9px 24px; border-bottom: 3px solid var(--glm-verde); background: #fff; color: var(--glm-azul); font-weight: 700; }
+.employees-topbar img { height: 38px; width: auto; }
+.topbar-actions { display: flex; gap: 8px; margin-left: auto; }
+.topbar-actions button, .table-header button, .form-actions button, .row-actions button { border: 1px solid var(--glm-gris-medio); border-radius: 4px; background: #fff; color: var(--glm-azul); cursor: pointer; font: inherit; font-size: .78rem; font-weight: 600; padding: 7px 10px; }
+.topbar-actions button:hover, .table-header button:hover, .form-actions button:hover, .row-actions button:hover { background: var(--glm-verde-bg); border-color: var(--glm-verde); }
+.employees-page { max-width: 1200px; margin: 0 auto; padding: 24px; }
+.employees-page header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; border-bottom: 3px solid var(--glm-verde); padding-bottom: 12px; }
+.employees-page h1, .employees-page h2 { margin: 0; color: var(--glm-azul); }
+.employees-page h1 { font-size: 1.45rem; }.employees-page h2 { font-size: 1rem; }
+.employees-page header p, .weekly-capacity { color: var(--glm-acero); }
+.import-button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--glm-verde); border-radius: 4px; background: var(--glm-verde-bg); color: var(--glm-azul); cursor: pointer; font-size: .82rem; font-weight: 700; }.import-button input { display: none; }.import-message { color: var(--glm-verde); font-weight: 600; }
+.employee-form-card, .employee-table-card { margin-top: 16px; padding: 18px; border: 1px solid var(--glm-gris-medio); border-top: 3px solid var(--glm-azul); border-radius: 4px; background: #fff; }
+.employee-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
+.employee-form-grid label { display: flex; flex-direction: column; gap: 4px; color: var(--glm-azul); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
+.employee-form-grid input, .employee-form-grid select { padding: 8px; border: 1px solid #9aaab3; border-radius: 4px; background: #fff; color: #2f3f48; font: inherit; font-weight: 500; text-transform: none; }
+.employee-form-grid input::placeholder { color: #71808a; opacity: 1; }
+.employee-form-grid input:focus, .employee-form-grid select:focus { outline: 2px solid rgba(108, 194, 74, .35); border-color: var(--glm-verde); background: #fff; color: #1f2d34; }
+.form-actions { display: flex; gap: 8px; }.form-actions button:first-child { background: var(--glm-azul); color: #fff; }.form-error { color: #c9252d; font-size: .82rem; }.table-header { display: flex; justify-content: space-between; align-items: center; gap: 12px; }.table-wrap { overflow-x: auto; margin-top: 12px; }table { width: 100%; min-width: 920px; border-collapse: collapse; font-size: .82rem; }th { padding: 9px; background: var(--glm-azul); color: #fff; text-align: left; }td { padding: 9px; border-bottom: 1px solid var(--glm-gris-claro); color: var(--glm-gris-oscuro); }.status { color: var(--glm-verde); font-weight: 700; }.status.inactive { color: #c9252d; }.row-actions { display: flex; gap: 5px; }.row-actions .delete { color: #c9252d; }.loading { color: var(--glm-acero); }.rest-days-button { max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.rest-days-picker { display: grid; gap: 4px; margin-top: 6px; padding: 6px; border: 1px solid var(--glm-gris-medio); background: #fff; }.rest-days-picker label { font-size: .72rem; white-space: nowrap; }
+.editing-row { background: var(--glm-verde-bg); }.editing-row select, .inline-number { width: 100%; min-width: 92px; box-sizing: border-box; padding: 7px; border: 1px solid var(--glm-verde); border-radius: 4px; font: inherit; }.inline-number { max-width: 100px; }.inline-picker { min-width: 130px; margin: 0; }.editing-row .row-actions { flex-wrap: wrap; }
+@media (max-width: 760px) { .employees-page { padding: 16px; }.employee-form-grid { grid-template-columns: 1fr; }.employees-topbar { padding: 9px 16px; }.topbar-actions button { font-size: 0; }.topbar-actions button i { font-size: .9rem; } }

route-planner/src/app/private/employees/employees.component.html

@@ -0,0 +1,50 @@
+<div class="employees-topbar">
+  <img src="GLM_completo.png" alt="GomezLee Marketing" />
+  <span>Route Planner</span>
+  <div class="topbar-actions"><button type="button" (click)="goHome()"><i class="pi pi-home"></i> Planificación</button><button type="button" (click)="signOut()"><i class="pi pi-sign-out"></i> Salir</button></div>
+</div>
+
+<main class="employees-page">
+  <header><div><h1>Gestionar empleados</h1><p>{{ activeEmployees }} activos de {{ employees.length }} empleados registrados</p></div><label class="import-button"><i class="pi pi-file-import"></i> {{ importing ? 'Importando...' : 'Importar empleados' }}<input type="file" accept=".xlsx,.xls" (change)="importFile($event)" [disabled]="importing"></label></header>
+  <p class="import-message" *ngIf="importMessage">{{ importMessage }}</p>
+
+  <section class="employee-form-card">
+    <h2>Nuevo empleado</h2>
+    <form (ngSubmit)="save()" #employeeForm="ngForm">
+      <div class="employee-form-grid">
+        <label>ID<input name="employeeCode" [(ngModel)]="form.employee_code" required></label>
+        <label>Nombre<input name="nombre" [(ngModel)]="form.nombre" required></label>
+        <label>Usuario<input name="usuario" [(ngModel)]="form.usuario"></label>
+        <label>Email<input type="email" name="email" [(ngModel)]="form.email"></label>
+        <label>Perfil<input name="perfil" [(ngModel)]="form.perfil"></label>
+        <label>Regional<input name="regional" [(ngModel)]="form.regional"></label>
+        <label>País<input name="pais" [(ngModel)]="form.pais"></label>
+        <label>Estado<select name="activo" [(ngModel)]="form.activo"><option [ngValue]="true">Activo</option><option [ngValue]="false">Inactivo</option></select></label>
+        <label>Latitud<input type="number" name="latitud" [(ngModel)]="form.latitud" step="any" required></label>
+        <label>Longitud<input type="number" name="longitud" [(ngModel)]="form.longitud" step="any" required></label>
+        <label>Horas por día<input type="number" name="hoursDay" [(ngModel)]="form.horas_por_dia" min="0.5" max="24" step="0.5" required></label>
+        <label>Jornada de trabajo<select name="schedule" [(ngModel)]="form.jornada_codigo"><option *ngFor="let schedule of schedules" [value]="schedule.code">{{ schedule.label }}</option></select></label>
+        <label>Horas de descanso/día<input type="number" name="dailyRest" [(ngModel)]="form.horas_descanso_por_dia" min="0" max="3" step="1" required></label>
+        <label>Visitas máximas/día<input type="number" name="visitsDay" [(ngModel)]="form.visitas_maximas_por_dia" min="1" required></label>
+      </div>
+      <p class="weekly-capacity">Capacidad semanal: {{ selectedScheduleHours }} h · Capacidad diaria efectiva: {{ form.horas_por_dia - form.horas_descanso_por_dia | number:'1.0-1' }} h</p>
+      <p class="form-error" *ngIf="error">{{ error }}</p>
+       <div class="form-actions"><button type="submit" [disabled]="saving || employeeForm.invalid"><i class="pi pi-save"></i> {{ saving ? 'Guardando...' : 'Agregar empleado' }}</button></div>
+    </form>
+  </section>
+
+  <section class="employee-table-card">
+    <div class="table-header"><h2>Empleados registrados</h2><button type="button" (click)="load()" [disabled]="loading"><i class="pi pi-refresh"></i> Actualizar</button></div>
+    <p class="form-error" *ngIf="error && !loading">{{ error }}</p>
+    <p class="loading" *ngIf="loading">Cargando empleados...</p>
+    <div class="table-wrap" *ngIf="!loading">
+      <table>
+        <thead><tr><th>ID</th><th>Nombre</th><th>Regional</th><th>Jornada</th><th>Descanso/día</th><th>Días de descanso</th><th>Visitas/día</th><th>Estado</th><th>Acciones</th></tr></thead>
+        <tbody>
+          <tr *ngFor="let employee of employees" [class.editing-row]="editingId === employee.id"><td>{{ employee.employee_code }}</td><td>{{ employee.nombre }}</td><td>{{ employee.regional || '-' }}</td><td><ng-container *ngIf="editingId === employee.id; else scheduleText"><select [(ngModel)]="employee.jornada_codigo" [name]="'schedule-' + employee.id" (ngModelChange)="onInlineScheduleChange(employee)"><option *ngFor="let schedule of schedules" [value]="schedule.code">{{ schedule.label }}</option></select></ng-container><ng-template #scheduleText>{{ scheduleLabel(employee) }}</ng-template></td><td><ng-container *ngIf="editingId === employee.id; else restText"><input class="inline-number" type="number" [(ngModel)]="employee.horas_descanso_por_dia" [name]="'rest-' + employee.id" min="0" max="3" step="1"></ng-container><ng-template #restText>{{ employee.horas_descanso_por_dia }} h</ng-template></td><td><ng-container *ngIf="editingId === employee.id; else daysText"><div class="rest-days-picker inline-picker"><label *ngFor="let day of availableRestDays(employee)"><input type="checkbox" [checked]="employee.dias_descanso.includes(day)" (change)="toggleRestDay(employee, day, $any($event.target).checked)">{{ day }}</label></div></ng-container><ng-template #daysText>{{ employee.dias_descanso.length ? employee.dias_descanso.join(', ') : 'Ninguno' }}</ng-template></td><td><ng-container *ngIf="editingId === employee.id; else visitsText"><input class="inline-number" type="number" [(ngModel)]="employee.visitas_maximas_por_dia" [name]="'visits-' + employee.id" min="1" step="1"></ng-container><ng-template #visitsText>{{ employee.visitas_maximas_por_dia }}</ng-template></td><td><span class="status" [class.inactive]="!employee.activo">{{ employee.activo ? 'Activo' : 'Inactivo' }}</span></td><td class="row-actions"><ng-container *ngIf="editingId === employee.id; else normalActions"><button type="button" (click)="saveInline(employee)" [disabled]="saving">Guardar</button><button type="button" (click)="cancelEdit()" [disabled]="saving">Cancelar</button></ng-container><ng-template #normalActions><button type="button" (click)="edit(employee)">Editar</button><button type="button" (click)="toggleActive(employee)">{{ employee.activo ? 'Desactivar' : 'Activar' }}</button><button type="button" class="delete" (click)="remove(employee)">Eliminar</button></ng-template></td></tr>
+          <tr *ngIf="!employees.length"><td colspan="9">No hay empleados registrados.</td></tr>
+        </tbody>
+      </table>
+    </div>
+  </section>
+</main>

route-planner/src/app/private/employees/employees.component.ts

@@ -0,0 +1,272 @@
+import { ChangeDetectorRef, Component, OnDestroy, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { Employee, EmployeeInput } from '../../core/models/employee.model';
+import { EmployeeService } from '../../core/services/employee.service';
+import { AuthService } from '../../core/services/auth.service';
+import { WORK_SCHEDULES, workSchedule } from '../../core/models/work-schedule.model';
+import { normalizeRow, cleanNum } from '../../shared/utils/header-normalization.utils';
+import * as XLSX from 'xlsx';
+
+type EmployeeForm = Omit<EmployeeInput, 'activo'> & { activo: boolean };
+
+@Component({
+  standalone: true,
+  selector: 'app-employees',
+  imports: [CommonModule, FormsModule],
+  templateUrl: './employees.component.html',
+  styleUrls: ['./employees.component.css']
+})
+export class EmployeesComponent implements OnDestroy, OnInit {
+  employees: Employee[] = [];
+  form = this.emptyForm();
+  editingId: string | null = null;
+  loading = true;
+  saving = false;
+  error = '';
+  importMessage = '';
+  importing = false;
+  openRestDaysFor: string | null = null;
+  readonly schedules = WORK_SCHEDULES;
+  private destroyed = false;
+  private loadSequence = 0;
+
+  constructor(
+    private employeesService: EmployeeService,
+    private auth: AuthService,
+    private router: Router,
+    private cdr: ChangeDetectorRef
+  ) {}
+
+  ngOnInit(): void {
+    void this.load();
+  }
+
+  ngOnDestroy(): void {
+    this.destroyed = true;
+    this.loadSequence++;
+  }
+
+  get activeEmployees(): number {
+    return this.employees.filter(employee => employee.activo).length;
+  }
+
+  get selectedScheduleHours(): number {
+    return workSchedule(this.form.jornada_codigo).weeklyHours;
+  }
+
+  async load(): Promise<void> {
+    const sequence = ++this.loadSequence;
+    this.loading = true;
+    this.error = '';
+    try {
+      const employees = await this.employeesService.list();
+      if (this.destroyed || sequence !== this.loadSequence) return;
+      this.employees = employees;
+      this.cdr.detectChanges();
+    } catch (error: any) {
+      if (!this.destroyed && sequence === this.loadSequence) {
+        this.error = error?.message ?? 'No se pudieron cargar los empleados.';
+      }
+    } finally {
+      this.loading = false;
+      if (!this.destroyed && sequence === this.loadSequence) this.cdr.detectChanges();
+    }
+  }
+
+  edit(employee: Employee): void {
+    this.editingId = employee.id;
+  }
+
+  cancelEdit(): void {
+    this.editingId = null;
+    this.error = '';
+    void this.load();
+  }
+
+  async saveInline(employee: Employee): Promise<void> {
+    const rest = Number(employee.horas_descanso_por_dia);
+    const visits = Number(employee.visitas_maximas_por_dia);
+    if (!Number.isInteger(rest) || rest < 0 || rest > 3 || !Number.isInteger(visits) || visits < 1) {
+      this.error = 'Descanso/día debe ser un entero entre 0 y 3, y Visitas/día debe ser un entero mayor que 0.';
+      return;
+    }
+    this.saving = true;
+    this.error = '';
+    try {
+      await this.employeesService.update(employee.id, {
+        ...employee,
+        dias_por_semana: workSchedule(employee.jornada_codigo).days.length,
+        horas_descanso_por_dia: rest,
+        visitas_maximas_por_dia: visits,
+        dias_descanso: (employee.dias_descanso ?? []).filter(day => workSchedule(employee.jornada_codigo).days.includes(day))
+      });
+      this.editingId = null;
+      await this.load();
+    } catch (error: any) {
+      this.error = error?.message ?? 'No se pudo actualizar el empleado.';
+    } finally {
+      this.saving = false;
+    }
+  }
+
+  onInlineScheduleChange(employee: Employee): void {
+    employee.dias_descanso = (employee.dias_descanso ?? []).filter(day => workSchedule(employee.jornada_codigo).days.includes(day));
+    employee.dias_por_semana = workSchedule(employee.jornada_codigo).days.length;
+  }
+
+  async save(): Promise<void> {
+    if (!this.form.employee_code.trim() || !this.form.nombre.trim()) {
+      this.error = 'El ID y el nombre son obligatorios.';
+      return;
+    }
+    if (this.form.horas_descanso_por_dia >= this.form.horas_por_dia) {
+      this.error = 'Las horas de descanso deben ser menores que las horas de trabajo diarias.';
+      return;
+    }
+    this.saving = true;
+    this.error = '';
+    const employee: EmployeeInput = {
+      ...this.form,
+      dias_por_semana: workSchedule(this.form.jornada_codigo).days.length,
+      employee_code: this.form.employee_code.trim(),
+      nombre: this.form.nombre.trim(),
+      usuario: this.nullable(this.form.usuario),
+      email: this.nullable(this.form.email),
+      perfil: this.nullable(this.form.perfil),
+      pais: this.nullable(this.form.pais),
+      regional: this.nullable(this.form.regional)
+    };
+    try {
+      if (this.editingId) await this.employeesService.update(this.editingId, employee);
+      else await this.employeesService.create(employee);
+      this.cancelEdit();
+      await this.load();
+    } catch (error: any) {
+      this.error = error?.message ?? 'No se pudo guardar el empleado.';
+    } finally {
+      this.saving = false;
+    }
+  }
+
+  async toggleActive(employee: Employee): Promise<void> {
+    try {
+      await this.employeesService.update(employee.id, { ...employee, activo: !employee.activo });
+      await this.load();
+    } catch (error: any) {
+      this.error = error?.message ?? 'No se pudo actualizar el estado.';
+    }
+  }
+
+  scheduleLabel(employee: Employee): string {
+    return workSchedule(employee.jornada_codigo).label;
+  }
+
+  availableRestDays(employee: Employee): string[] {
+    return workSchedule(employee.jornada_codigo).days;
+  }
+
+  toggleRestDayEditor(employee: Employee): void {
+    this.openRestDaysFor = this.openRestDaysFor === employee.id ? null : employee.id;
+  }
+
+  async toggleRestDay(employee: Employee, day: string, checked: boolean): Promise<void> {
+    const days = new Set(employee.dias_descanso ?? []);
+    checked ? days.add(day) : days.delete(day);
+    employee.dias_descanso = Array.from(days);
+  }
+
+  async importFile(event: Event): Promise<void> {
+    const file = (event.target as HTMLInputElement).files?.[0];
+    if (!file) return;
+    this.importing = true;
+    this.importMessage = '';
+    this.error = '';
+    try {
+      const workbook = XLSX.read(await file.arrayBuffer(), { type: 'array' });
+      const sheet = workbook.Sheets[workbook.SheetNames[0]];
+      const rows = XLSX.utils.sheet_to_json(sheet, { defval: null, raw: true }).map(row => normalizeRow(row as Record<string, unknown>));
+      const employees = rows.map((row, index) => this.fromExcelRow(row, index + 2));
+      const invalid = employees.filter((employee): employee is null => employee === null).length;
+      const valid = employees.filter((employee): employee is EmployeeInput => employee !== null);
+      if (!valid.length) throw new Error('El archivo no contiene empleados válidos.');
+      await this.employeesService.upsert(valid);
+      this.importMessage = `${valid.length} empleados guardados${invalid ? `; ${invalid} filas omitidas por datos inválidos` : ''}.`;
+      await this.load();
+    } catch (error: any) {
+      this.error = error?.message ?? 'No se pudo importar el archivo.';
+    } finally {
+      this.importing = false;
+      (event.target as HTMLInputElement).value = '';
+    }
+  }
+
+  async remove(employee: Employee): Promise<void> {
+    if (!window.confirm(`¿Eliminar a ${employee.nombre}? Esta acción no se puede deshacer.`)) return;
+    try {
+      await this.employeesService.remove(employee.id);
+      await this.load();
+    } catch (error: any) {
+      this.error = error?.message ?? 'No se pudo eliminar el empleado.';
+    }
+  }
+
+  async signOut(): Promise<void> {
+    this.destroyed = true;
+    this.loadSequence++;
+    this.employees = [];
+    this.loading = true;
+    await this.auth.signOut();
+    await this.router.navigate(['/login']);
+  }
+
+  async goHome(): Promise<void> {
+    await this.router.navigate(['/home']);
+  }
+
+  private nullable(value: string | null): string | null {
+    return value?.trim() || null;
+  }
+
+  private emptyForm(): EmployeeForm {
+    return {
+      employee_code: '', nombre: '', usuario: '', email: '', perfil: 'Promotor', pais: 'Republica Dominicana', regional: '',
+      latitud: 18.4861, longitud: -69.9312, horas_por_dia: 8, dias_por_semana: 5, jornada_codigo: 'LUN_VIE_40', horas_descanso_por_dia: 1, dias_descanso: [], visitas_maximas_por_dia: 3, activo: true
+    };
+  }
+
+  private fromExcelRow(row: Record<string, unknown>, excelRow: number): EmployeeInput | null {
+    const code = String(row['id'] ?? '').trim();
+    const nombre = String(row['nombre_del_empleado'] ?? '').trim();
+    const latitude = cleanNum(row['latitud']);
+    const longitude = cleanNum(row['longitud']);
+    const dailyHours = cleanNum(row['horas_por_dia_usuario']);
+    const weeklyHours = cleanNum(row['horas_por_semana_usuario']);
+    if (!code || !nombre || !Number.isFinite(latitude) || !Number.isFinite(longitude) || !Number.isFinite(dailyHours)) return null;
+    const jornadaTexto = String(row['jornada'] ?? '').trim();
+    const jornadaCodigo = this.schedules.some(schedule => schedule.code === jornadaTexto)
+      ? jornadaTexto
+      : weeklyHours === 44 ? 'LUN_SAB_44' : 'LUN_VIE_40';
+    const restDays = String(row['dias_descanso'] ?? '').split(',').map(day => day.trim()).filter(day => workSchedule(jornadaCodigo).days.includes(day));
+    const active = !['no', 'n', '0', 'false'].includes(String(row['usuario_activo'] ?? 'si').trim().toLowerCase());
+    return {
+      employee_code: code,
+      nombre,
+      usuario: this.nullable(String(row['usuario'] ?? '')),
+      email: this.nullable(String(row['email'] ?? '')),
+      perfil: this.nullable(String(row['perfil_de_acceso'] ?? '')),
+      pais: this.nullable(String(row['pais'] ?? '')),
+      regional: this.nullable(String(row['regionales'] ?? '')),
+      latitud: latitude,
+      longitud: longitude,
+      horas_por_dia: dailyHours,
+      dias_por_semana: workSchedule(jornadaCodigo).days.length,
+      jornada_codigo: jornadaCodigo,
+      horas_descanso_por_dia: Math.min(3, Math.max(0, Math.round(cleanNum(row['horas_descanso_por_dia']) || 1))),
+      dias_descanso: restDays,
+      visitas_maximas_por_dia: Math.max(1, cleanNum(row['visitas_maximas_por_dia']) || 3),
+      activo: active
+    };
+  }
+}

route-planner/src/app/private/home/assigned-route-detail/assigned-route-detail.component.css

@@ -206,6 +206,12 @@
   filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.42));
 }
 
+.location-pin:hover {
+  transform: scale(1.12);
+  transform-origin: center bottom;
+  cursor: pointer;
+}
+
 .location-pin::before {
   content: '';
   position: absolute;

route-planner/src/app/private/home/assigned-route-detail/assigned-route-detail.component.ts

@@ -270,7 +270,7 @@ export class AssignedRouteDetailComponent implements OnInit, OnDestroy, AfterVie
         .bindPopup(`<strong>Origen del tramo:</strong> ${originName}`),
       L.marker([destination[1], destination[0]], { icon: endIcon, pane: 'pdvPane', zIndexOffset: 1000 })
         .addTo(this.map)
-        .bindPopup(`<strong>Destino:</strong> ${json.nombre_pdv}<br><strong>Distancia:</strong> ${distance} km<br><strong>Duración:</strong> ${duration} min`)
+        .bindPopup(`<strong>Destino:</strong> ${json.nombre_pdv}<br><strong>Usuario:</strong> ${json.nombre_usuario}<br><strong>Distancia:</strong> ${distance} km<br><strong>Duración:</strong> ${duration} min`)
     );
   }
 

route-planner/src/app/private/home/home.component.css

@@ -38,11 +38,18 @@
 }
 
 .home-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 16px;
   margin-bottom: 24px;
   border-bottom: 3px solid var(--glm-verde);
   padding-bottom: 16px;
 }
 
+.employees-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 11px; border: 1px solid var(--glm-verde); border-radius: 4px; background: var(--glm-verde-bg); color: var(--glm-azul); font-size: .82rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
+.employees-link:hover { background: var(--glm-verde); color: #fff; }
+
 .home-header h1 {
   margin: 0;
   color: var(--glm-azul);
@@ -79,6 +86,8 @@
   padding: 24px;
 }
 
+.employees-summary { display: flex; align-items: center; gap: 7px; margin: -2px 0 16px; color: var(--glm-acero); font-size: .88rem; }.employees-summary i { color: var(--glm-verde); }.employees-summary.empty, .employees-summary.empty i { color: #c9252d; }
+
 .upload-grid {
   display: grid;
   grid-template-columns: 1fr;

route-planner/src/app/private/home/home.component.html

@@ -6,12 +6,13 @@
 
 <div class="home-container">
   <header class="home-header">
-    <h1>Route Planner</h1>
+    <div><h1>Route Planner</h1><p>Gestión de rutas asignadas y puntos de venta pendientes</p></div>
-    <p>Gestión de rutas asignadas y puntos de venta pendientes</p>
+    <a class="employees-link" routerLink="/empleados"><i class="pi pi-users"></i> Gestionar empleados</a>
   </header>
 
   <section class="card upload-card">
-    <h2 class="section-title">Subir archivos para optimización</h2>
+    <h2 class="section-title">Subir PDVs para optimización</h2>
+    <p class="employees-summary" [class.empty]="!employeesLoading && !activeEmployees"><i class="pi pi-users"></i> <span *ngIf="employeesLoading">Cargando empleados activos...</span><span *ngIf="!employeesLoading">{{ activeEmployees }} empleados activos se usarán para planificar.</span></p>
 
     <div class="upload-grid">
       <div class="file-input-wrapper">
@@ -57,48 +58,6 @@
         </div>
       </div>
 
-      <div class="file-input-wrapper">
-        <label class="file-label" for="usuariosFile" [class.has-error]="usuariosPreview && !usuariosPreview.valid" [class.has-success]="usuariosPreview?.valid">
-          <i class="pi pi-file-excel"></i>
-          <span>Archivo Usuarios (Excel)</span>
-          <span class="file-hint">.xlsx / .xls • máx 10MB • máx 50 filas</span>
-        </label>
-        <input
-          id="usuariosFile"
-          type="file"
-          accept=".xlsx,.xls"
-          (change)="onUsuariosFileChange($event)"
-          class="file-input"
-          [class.has-file]="usuariosFile"
-        />
-        <div class="file-name" *ngIf="usuariosFile">
-          <i class="pi" [class.pi-check-circle]="usuariosPreview?.valid" [class.pi-exclamation-circle]="usuariosPreview && !usuariosPreview.valid"></i>
-          {{ usuariosFile.name }}
-          <span *ngIf="usuariosPreviewLoading" class="preview-loading">Validando...</span>
-        </div>
-
-        <div class="preview-card" *ngIf="usuariosPreviewLoading">
-          <div class="preview-loading-row"><span class="spinner-inline"></span> Analizando archivo Usuarios...</div>
-        </div>
-
-        <div class="preview-card preview-success" *ngIf="usuariosPreview?.valid">
-          <div class="preview-header"><i class="pi pi-check-circle"></i> Usuarios válido — {{ usuariosPreview!.totalRows }} filas</div>
-          <div class="preview-stats">{{ usuariosPreview!.validRows }} filas válidas • Columnas: {{ usuariosPreview!.headers.join(', ') }}</div>
-        </div>
-
-        <div class="preview-card preview-error" *ngIf="usuariosPreview && !usuariosPreview.valid">
-          <div class="preview-header"><i class="pi pi-exclamation-triangle"></i> Errores en Usuarios ({{ usuariosPreview.errors.length }})</div>
-          <div class="preview-stats" *ngIf="usuariosPreview.missingHeaders.length">Faltan: {{ usuariosPreview.missingHeaders.join(', ') }}</div>
-          <div class="preview-stats">{{ usuariosPreview.totalRows }} filas leídas • {{ usuariosPreview.validRows }} válidas</div>
-          <ul class="preview-errors">
-            <li *ngFor="let e of usuariosPreview.errors.slice(0, 8)">
-              <strong>Fila {{ e.row }} — {{ e.field }}:</strong> {{ e.message }}
-              <span *ngIf="e.value !== undefined && e.value !== null" class="error-value">({{ e.value }})</span>
-            </li>
-            <li *ngIf="usuariosPreview.errors.length > 8" class="more-errors">+ {{ usuariosPreview.errors.length - 8 }} errores más...</li>
-          </ul>
-        </div>
-      </div>
     </div>
 
     <div class="upload-actions">
@@ -130,7 +89,7 @@
           type="button"
           class="btn-secondary"
           (click)="clearFiles()"
-          [disabled]="!pdvFile && !usuariosFile"
+          [disabled]="!pdvFile"
         >
           <i class="pi pi-times"></i> Limpiar
         </button>

route-planner/src/app/private/home/home.component.ts

@@ -1,4 +1,4 @@
-import { Component, ChangeDetectorRef } from '@angular/core';
+import { Component, ChangeDetectorRef, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { AssignedRouteComponent } from './assigned-route/assigned-route.component';
@@ -10,21 +10,25 @@ import { ExcelPreviewService, PreviewResult } from '../../shared/services/excel-
 import { Subscription } from 'rxjs';
 import { PlanningKpisComponent } from './planning-kpis/planning-kpis.component';
 import { PlanningInputService } from '../../core/services/planning-input.service';
+import { RouterLink } from '@angular/router';
+import { EmployeeService } from '../../core/services/employee.service';
 
 @Component({
   standalone: true,
   selector: 'app-home',
-  imports: [CommonModule, FormsModule, AssignedRouteComponent, NoAssignedRouteComponent, PlanningKpisComponent],
+  imports: [CommonModule, FormsModule, RouterLink, AssignedRouteComponent, NoAssignedRouteComponent, PlanningKpisComponent],
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.css']
 })
-export class HomeComponent {
+export class HomeComponent implements OnInit {
   pdvFile: File | null = null;
   usuariosFile: File | null = null;
   pdvPreview: PreviewResult | null = null;
   usuariosPreview: PreviewResult | null = null;
   pdvPreviewLoading = false;
   usuariosPreviewLoading = false;
+  activeEmployees = 0;
+  employeesLoading = true;
   uploadError: string | null = null;
   isLoading = false;
   private calcSub: Subscription | null = null;
@@ -34,9 +38,26 @@ export class HomeComponent {
     private routeState: RouteState,
     private previewService: ExcelPreviewService,
     private planningInput: PlanningInputService,
+    private employeesService: EmployeeService,
     private cdr: ChangeDetectorRef
   ) {}
 
+  ngOnInit(): void {
+    void this.loadEmployees();
+  }
+
+  private async loadEmployees(): Promise<void> {
+    this.employeesLoading = true;
+    try {
+      this.activeEmployees = (await this.employeesService.list()).filter(employee => employee.activo).length;
+    } catch {
+      this.activeEmployees = 0;
+    } finally {
+      this.employeesLoading = false;
+      this.cdr.detectChanges();
+    }
+  }
+
   async onPdvFileChange(event: Event) {
     const input = event.target as HTMLInputElement;
     if (input.files && input.files.length > 0) {
@@ -132,23 +153,22 @@ export class HomeComponent {
   }
 
   get canSubmit(): boolean {
-    if (!this.pdvFile || !this.usuariosFile) return false;
+    if (!this.pdvFile || !this.activeEmployees) return false;
-    if (this.pdvPreviewLoading || this.usuariosPreviewLoading) return false;
+    if (this.pdvPreviewLoading || this.employeesLoading) return false;
     if (this.isLoading) return false;
     if (this.uploadError) return false;
     // Require valid previews before enabling submit
     if (this.pdvPreview && !this.pdvPreview.valid) return false;
-    if (this.usuariosPreview && !this.usuariosPreview.valid) return false;
+    if (!this.pdvPreview) return false;
-    // Previews must exist (file was parsed)
-    if (!this.pdvPreview || !this.usuariosPreview) return false;
     return true;
   }
 
   get submitDisabledReason(): string | null {
-    if (!this.pdvFile || !this.usuariosFile) return 'Sube ambos archivos';
+    if (!this.pdvFile) return 'Sube el archivo PDV';
-    if (this.pdvPreviewLoading || this.usuariosPreviewLoading) return 'Validando archivos...';
+    if (this.employeesLoading) return 'Cargando empleados...';
+    if (!this.activeEmployees) return 'No hay empleados activos. Regístralos en Gestionar empleados.';
+    if (this.pdvPreviewLoading) return 'Validando archivo PDV...';
     if (this.pdvPreview && !this.pdvPreview.valid) return 'Corrige los errores del archivo PDV';
-    if (this.usuariosPreview && !this.usuariosPreview.valid) return 'Corrige los errores del archivo Usuarios';
     return null;
   }
 
@@ -168,11 +188,20 @@ export class HomeComponent {
       this.cdr.detectChanges();
       return;
     }
-    this.planningInput.setFiles(pdvForOptimizer, this.usuariosFile!);
+    let employeesFile: File;
+    try {
+      employeesFile = await this.employeesService.activeEmployeesFile();
+    } catch {
+      this.uploadError = 'No se pudieron obtener los empleados activos.';
+      this.routeState.setLoading(false);
+      this.isLoading = false;
+      return;
+    }
+    this.planningInput.setFiles(pdvForOptimizer, employeesFile);
 
     const formData = new FormData();
     formData.append('pdv_file', pdvForOptimizer, pdvForOptimizer.name);
-    formData.append('usuarios_file', this.usuariosFile!, this.usuariosFile!.name);
+    formData.append('usuarios_file', employeesFile, employeesFile.name);
 
     this.calcSub?.unsubscribe();
     this.calcSub = this.rutasService.calcularRutas(formData).subscribe({

route-planner/src/app/private/home/planning-kpis/planning-kpis.component.css

@@ -130,10 +130,6 @@
   white-space: nowrap;
 }
 
-.operational-grid {
-  margin-top: 12px;
-}
-
 .user-load-card {
   margin-top: 14px;
   padding: 12px 14px;

route-planner/src/app/private/home/planning-kpis/planning-kpis.component.html

@@ -31,29 +31,12 @@
       <div class="kpi-icon"><i class="pi pi-compass"></i></div>
       <div><span class="kpi-label">Distancia total</span><strong>{{ summary.totalDistance | number:'1.0-1' }} <em>km</em></strong><small>{{ summary.averageDistance | number:'1.0-1' }} km promedio por ruta</small></div>
     </article>
-    <article class="kpi-card kpi-blue">
+    <ng-container *ngIf="hasData">
-      <div class="kpi-icon"><i class="pi pi-clock"></i></div>
-      <div><span class="kpi-label">Desplazamiento total</span><strong>{{ summary.totalTravelHours | number:'1.0-1' }} <em>h</em></strong><small>{{ summary.averageTravelHours | number:'1.0-1' }} h promedio por ruta</small></div>
-    </article>
-  </div>
-
-  <div class="kpi-grid operational-grid" *ngIf="hasData">
     <article class="kpi-card kpi-success">
       <div class="kpi-icon"><i class="pi pi-briefcase"></i></div>
       <div><span class="kpi-label">Carga de trabajo</span><strong>{{ summary.totalWorkHours | number:'1.0-1' }} <em>h</em></strong><small>horas de trabajo planificadas</small></div>
     </article>
-    <article class="kpi-card kpi-blue">
+    </ng-container>
-      <div class="kpi-icon"><i class="pi pi-chart-line"></i></div>
-      <div><span class="kpi-label">Utilización promedio</span><strong>{{ summary.averageUtilization | number:'1.0-1' }}<em>%</em></strong><small>carga frente a disponibilidad</small></div>
-    </article>
-    <article class="kpi-card kpi-primary">
-      <div class="kpi-icon"><i class="pi pi-sitemap"></i></div>
-      <div><span class="kpi-label">Rutas por usuario</span><strong>{{ summary.averageRoutesPerUser | number:'1.0-1' }}</strong><small>promedio de asignaciones</small></div>
-    </article>
-    <article class="kpi-card kpi-warning">
-      <div class="kpi-icon"><i class="pi pi-arrows-h"></i></div>
-      <div><span class="kpi-label">Brecha de balance</span><strong>{{ summary.assignmentBalance }}</strong><small>diferencia entre mayor y menor carga</small></div>
-    </article>
   </div>
 
   <div class="user-load-card" *ngIf="userLoads.length">

route-planner/src/app/private/home/planning-kpis/planning-kpis.component.ts

@@ -14,13 +14,8 @@ interface KpiSummary {
   users: number;
   days: number;
   totalDistance: number;
-  totalTravelHours: number;
   averageDistance: number;
-  averageTravelHours: number;
   totalWorkHours: number;
-  averageRoutesPerUser: number;
-  averageUtilization: number;
-  assignmentBalance: number;
 }
 
 interface ReasonSummary {
@@ -86,10 +81,15 @@ export class PlanningKpisComponent implements OnInit, OnDestroy {
   private refresh(): void {
     const assigned = this.routeState.getAssignedSnapshot();
     const unassigned = this.routeState.getNoAssignedSnapshot();
-    const totalPdvs = assigned.length + unassigned.length;
+    const assignedPdvIds = new Set(assigned.map(route => String(route.json.pdv_id)));
+    // A PDV with at least one scheduled visit is assigned; repeated weekly visits and
+    // partial-assignment alerts must not inflate the planning coverage counters.
+    const unassignedPdvIds = new Set(unassigned
+      .map(route => String(route.pdv_id))
+      .filter(pdvId => !assignedPdvIds.has(pdvId)));
+    const totalPdvs = new Set([...assignedPdvIds, ...unassignedPdvIds]).size;
     const dailyRoutes = summarizeDailyRoutes(assigned);
     const totalDistance = dailyRoutes.reduce((sum, day) => sum + day.distanceKm, 0);
-    const totalTravelHours = dailyRoutes.reduce((sum, day) => sum + day.travelHours, 0);
     const totalWorkHours = dailyRoutes.reduce((sum, day) => sum + day.workHours, 0);
     const users = new Set(assigned.map(route => String(route.json.usuario_id))).size;
     const days = new Set(assigned.map(route => route.json.dia)).size;
@@ -126,32 +126,27 @@ export class PlanningKpisComponent implements OnInit, OnDestroy {
           : `${load.name} está dentro de capacidad por carga (${load.workHours.toFixed(1)} h de ${load.capacityHours.toFixed(1)} h).`;
       return load;
     }).sort((a, b) => b.routes - a.routes || b.workHours - a.workHours);
-    const routeCounts = this.userLoads.map(load => load.routes);
-    const assignmentBalance = routeCounts.length ? Math.max(...routeCounts) - Math.min(...routeCounts) : 0;
-    const averageUtilization = this.userLoads.length
-      ? this.userLoads.reduce((sum, load) => sum + load.utilization, 0) / this.userLoads.length
-      : 0;
-
     this.summary = {
       totalPdvs,
-      assignedPdvs: assigned.length,
+      assignedPdvs: assignedPdvIds.size,
-      unassignedPdvs: unassigned.length,
+      unassignedPdvs: unassignedPdvIds.size,
-      coverage: totalPdvs ? (assigned.length / totalPdvs) * 100 : 0,
+      coverage: totalPdvs ? (assignedPdvIds.size / totalPdvs) * 100 : 0,
       users,
       days,
       totalDistance,
-      totalTravelHours,
       averageDistance: assigned.length ? totalDistance / assigned.length : 0,
-      averageTravelHours: assigned.length ? totalTravelHours / assigned.length : 0,
       totalWorkHours,
-      averageRoutesPerUser: users ? assigned.length / users : 0,
-      averageUtilization,
-      assignmentBalance
     };
 
-    const reasonCounts = new Map<string, number>();
+    const reasonByPdv = new Map<string, string>();
     for (const route of unassigned) {
+      const pdvId = String(route.pdv_id);
+      if (assignedPdvIds.has(pdvId) || reasonByPdv.has(pdvId)) continue;
       const reason = route.motivo?.trim() || 'Sin motivo especificado';
+      reasonByPdv.set(pdvId, reason);
+    }
+    const reasonCounts = new Map<string, number>();
+    for (const reason of reasonByPdv.values()) {
       reasonCounts.set(reason, (reasonCounts.get(reason) ?? 0) + 1);
     }
     this.reasons = Array.from(reasonCounts.entries())
@@ -174,13 +169,8 @@ export class PlanningKpisComponent implements OnInit, OnDestroy {
       users: 0,
       days: 0,
       totalDistance: 0,
-      totalTravelHours: 0,
       averageDistance: 0,
-      averageTravelHours: 0,
       totalWorkHours: 0,
-      averageRoutesPerUser: 0,
-      averageUtilization: 0,
-      assignmentBalance: 0
     };
   }
 }

route-planner/src/app/private/home/route-overview-map/route-overview-map.component.css

@@ -126,6 +126,8 @@
   color: var(--glm-acero);
 }
 
+.heatmap-help { display: inline-grid; width: 16px; height: 16px; margin-left: auto; place-items: center; border: 1px solid var(--glm-acero); border-radius: 50%; color: var(--glm-acero); cursor: help; font-size: 0.68rem; font-weight: 700; }
+
 .empty-state {
   text-align: center;
   padding: 24px 12px;
@@ -151,20 +153,45 @@
   color: var(--glm-gris-oscuro);
 }
 
-.unassigned-map-card {
+.unassigned-bottom-drawer {
-  padding: 12px;
+  position: fixed;
-  background: #fff8ed;
+  left: 398px;
+  right: 18px;
+  bottom: 18px;
+  z-index: 950;
+  overflow: hidden;
   border: 1px solid #f2bf86;
-  border-left: 3px solid var(--glm-naranja);
+  border-left: 4px solid var(--glm-naranja);
-  border-radius: 4px;
+  border-radius: 10px 10px 4px 4px;
+  background: #fff8ed;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
 }
 
-.unassigned-map-card .info-card-header { margin-bottom: 8px; }
+.unassigned-drawer-toggle {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 12px 16px;
+  border: 0;
+  background: #fff8ed;
+  color: var(--glm-azul);
+  cursor: pointer;
+  font: inherit;
+  font-weight: 700;
+  text-align: left;
+}
 
-.unassigned-map-list {
+.unassigned-drawer-toggle span { display: inline-flex; align-items: center; gap: 8px; }
+.unassigned-drawer-toggle .pi-exclamation-triangle { color: var(--glm-naranja); }
+
+.unassigned-drawer-content {
   display: grid;
-  gap: 5px;
+  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-  max-height: 180px;
+  gap: 8px;
+  max-height: 240px;
+  padding: 0 12px 12px;
   overflow-y: auto;
 }
 
@@ -219,86 +246,21 @@
 .pending-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
 .pending-actions .btn-primary, .pending-actions .btn-secondary { padding: 7px 10px; font-size: 0.78rem; }
 
-.routes-list h3 {
+.employee-load-list { display: grid; gap: 5px; max-height: 318px; margin-top: 10px; overflow-y: auto; border-top: 1px solid var(--glm-gris-claro); padding-top: 8px; }
-  margin: 0 0 8px;
+.employee-load-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; width: 100%; padding: 7px 8px; border: 1px solid var(--glm-gris-medio); border-radius: 4px; background: #fff; color: var(--glm-gris-oscuro); cursor: pointer; font: inherit; text-align: left; }
-  font-size: 0.85rem;
+.employee-load-row:hover, .employee-load-row.selected { border-color: var(--glm-verde); background: var(--glm-verde-bg); }
-  color: var(--glm-azul);
+.employee-load-row.over-capacity { border-color: #c9252d; background: var(--glm-rojo-ok); }
-  font-weight: 700;
+.employee-load-name { overflow: hidden; color: var(--glm-azul); font-size: 0.78rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
-  text-transform: uppercase;
+.employee-load-values { color: var(--glm-acero); font-size: 0.7rem; white-space: nowrap; }
-}
+.employee-load-bar { grid-column: 1 / -1; display: block; height: 6px; overflow: hidden; border-radius: 6px; background: var(--glm-gris-medio); }
+.employee-load-bar span { display: block; height: 100%; border-radius: inherit; background: var(--glm-verde); }
+.employee-load-bar.warning span { background: var(--glm-naranja); }
+.employee-load-bar.over-capacity span { background: #c9252d; }
 
-.routes-list ul {
+@media (max-width: 900px) {
-  list-style: none;
+  #map-overview { left: 0; }
-  margin: 0;
+  .overview-sidebar { width: 340px; max-width: calc(100vw - 24px); }
-  padding: 0;
+  .unassigned-bottom-drawer { right: 12px; bottom: 12px; left: 12px; }
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.routes-list li {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 10px;
-  border: 1px solid var(--glm-gris-medio);
-  border-radius: 4px;
-  background: #fff;
-  cursor: pointer;
-  transition: all 0.15s;
-}
-
-.routes-list li:hover {
-  background: var(--glm-verde-bg);
-  border-color: var(--glm-verde);
-}
-
-.routes-list li.selected {
-  background: var(--glm-verde);
-  border-color: var(--glm-verde);
-  color: #fff;
-}
-
-.routes-list li.selected small {
-  color: rgba(255, 255, 255, 0.85);
-}
-
-.routes-list li.selected i {
-  color: #fff;
-}
-
-.idx {
-  min-width: 26px;
-  height: 26px;
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--glm-azul);
-  color: #fff;
-  font-size: 0.75rem;
-  font-weight: 700;
-}
-
-.li-main {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-}
-
-.li-main strong {
-  font-size: 0.85rem;
-  color: var(--glm-gris-oscuro);
-}
-
-.routes-list li.selected .li-main strong {
-  color: #fff;
-}
-
-.li-main small {
-  font-size: 0.75rem;
-  color: var(--glm-acero);
 }
 
 .info-card {
@@ -309,6 +271,12 @@
   border-top: 3px solid var(--glm-azul);
 }
 
+.map-location-button {
+  margin-top: 0;
+  padding: 6px 9px;
+  font-size: 0.75rem;
+}
+
 .info-card-header {
   display: flex;
   justify-content: space-between;
@@ -353,15 +321,22 @@
 .reassign-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
 .reassign-actions .btn-primary, .reassign-actions .btn-secondary { padding: 7px 10px; font-size: 0.78rem; }
 .reassign-hint { grid-column: 1 / -1; margin: 0; color: var(--glm-acero); font-size: 0.74rem; }
-.reassign-form .reassign-actions, .reassign-form .error-card { grid-column: 1 / -1; }
+.reassign-form .reassign-actions, .reassign-form .employee-load-list, .reassign-form .error-card { grid-column: 1 / -1; }
 
 .daily-routes-card { padding: 12px; border: 1px solid var(--glm-gris-medio); border-top: 3px solid var(--glm-azul); border-radius: 4px; background: var(--glm-surface); }
 .daily-routes-card h3 { margin: 0 0 8px; color: var(--glm-azul); font-size: 0.82rem; text-transform: uppercase; }
+.daily-route-group { border-bottom: 1px solid var(--glm-gris-claro); }
+.daily-route-group:last-child { border-bottom: 0; }
+.daily-route-toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; border: 0; background: transparent; color: var(--glm-gris-oscuro); cursor: pointer; font: inherit; text-align: left; }
+.daily-route-toggle:hover { background: var(--glm-gris-claro); }
+.daily-route-toggle-title { color: var(--glm-azul); font-weight: 700; }
+.daily-route-toggle > span:last-child { color: var(--glm-acero); font-size: 0.78rem; }
+.daily-route-group-content { padding-left: 14px; }
 .daily-route { display: grid; gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--glm-gris-claro); color: var(--glm-gris-oscuro); font-size: 0.78rem; }
 .daily-route:last-child { border-bottom: 0; }
 .daily-route span, .daily-route small { color: var(--glm-acero); }
 .daily-route.over-capacity small { color: #c9252d; font-weight: 700; }
-.routes-list li:focus-visible, .btn-icon:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid rgba(108, 194, 74, 0.45); outline-offset: 2px; }
+.btn-icon:focus-visible, button:focus-visible, select:focus-visible { outline: 3px solid rgba(108, 194, 74, 0.45); outline-offset: 2px; }
 
 .btn-icon {
   background: transparent;
@@ -386,6 +361,7 @@
 .info-list div {
   display: grid;
   grid-template-columns: auto 1fr;
+  align-items: center;
   gap: 10px;
   padding: 5px 0;
   border-bottom: 1px solid var(--glm-gris-claro);
@@ -474,40 +450,46 @@
   color: var(--glm-gris-oscuro);
 }
 
-.heat-opts {
-  display: flex;
-  gap: 12px;
-  padding-left: 22px;
-  font-size: 0.78rem;
-  color: var(--glm-acero);
-}
-
-.cluster-glm {
-  background: none !important;
-  border: none !important;
-}
-
-.cluster-inner {
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  background: var(--glm-verde);
-  border: 3px solid #fff;
-  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
-  color: #fff;
-  font-weight: 700;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-family: Arial, sans-serif;
-  font-size: 12px;
-}
-
 .custom-marker {
   background: none !important;
   border: none !important;
 }
 
+.location-pin-wrapper {
+  width: 42px;
+  height: 50px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 3px;
+  border-radius: 50%;
+  cursor: pointer;
+  transition: transform 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
+}
+
+.location-pin-wrapper:hover {
+  transform: scale(1.12);
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
+}
+
+.location-pin-wrapper .location-pin {
+  position: relative;
+  width: 30px;
+  height: 38px;
+  background: #c9252d;
+  clip-path: polygon(50% 100%, 8% 43%, 5% 31%, 10% 18%, 22% 7%, 36% 2%, 50% 0, 64% 2%, 78% 7%, 90% 18%, 95% 31%, 92% 43%);
+  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.42));
+}
+
+.location-pin-wrapper .location-pin span {
+  position: absolute;
+  inset: 8px 0 auto;
+  color: #fff;
+  font: 700 12px Arial, sans-serif;
+  text-align: center;
+}
+
 .marker-inner {
   width: 30px;
   height: 30px;

route-planner/src/app/private/home/route-overview-map/route-overview-map.component.html

@@ -31,7 +31,7 @@
     </select>
 
     <div class="filter-stats" *ngIf="filteredRoutes.length">
-      <span>{{ filteredRoutes.length }} PDVs</span>
+      <span>{{ uniqueFilteredRoutes.length }} PDVs</span>
       <span>{{ totalDistancia }} km</span>
       <span>{{ totalDuracionMin }} min</span>
     </div>
@@ -40,11 +40,8 @@
       <label class="toggle">
         <input type="checkbox" [checked]="showHeat" (change)="toggleHeat()" />
         <i class="pi pi-fire"></i> Heatmap (carga)
+        <span class="heatmap-help" title="El mapa muestra con mayor intensidad las zonas donde se concentra más carga de trabajo en horas.">?</span>
       </label>
-      <div class="heat-opts" *ngIf="showHeat">
-        <label><input type="radio" name="hw" value="uniform" [checked]="heatWeightMode==='uniform'" (change)="setHeatWeight('uniform')" /> Peso 1 (densidad)</label>
-        <label><input type="radio" name="hw" value="horas_trabajo" [checked]="heatWeightMode==='horas_trabajo'" (change)="setHeatWeight('horas_trabajo')" /> Por carga (horas)</label>
-      </div>
     </div>
 
     <div class="filter-empty" *ngIf="!filteredRoutes.length && !error">
@@ -63,18 +60,6 @@
     {{ error }}
   </div>
 
-  <section class="unassigned-map-card" *ngIf="selectedUsuarioId === 'Todos' && selectedDia === 'Todos' && unassignedRoutes.length">
-    <div class="info-card-header">
-      <h3>PDVs sin ruta ({{ unassignedRoutes.length }})</h3>
-    </div>
-    <div class="unassigned-map-list">
-      <button type="button" class="unassigned-map-item" *ngFor="let pending of unassignedRoutes" [class.selected-pending]="selectedUnassigned?.pdv_id === pending.pdv_id" (click)="selectUnassigned(pending)">
-        <span class="pending-icon">!</span>
-        <span class="pending-text"><strong>{{ pending.pdv_nombre }}</strong><small>{{ pending.motivo }}</small></span>
-      </button>
-    </div>
-  </section>
-
   <section class="info-card unassigned-detail-card" *ngIf="selectedUnassigned">
     <div class="info-card-header">
       <h3>Gestionar PDV sin ruta</h3>
@@ -96,11 +81,18 @@
         <div><dt>Motivo</dt><dd>{{ selectedUnassigned.motivo }}</dd></div>
         <div><dt>Coordenadas</dt><dd>{{ selectedUnassigned.latitud }}, {{ selectedUnassigned.longitud }}</dd></div>
       </dl>
-      <div class="pending-edit-grid">
+       <div class="pending-edit-grid">
-        <label>Usuario<select [(ngModel)]="assignmentUser[selectedUnassigned.pdv_id]"><option value="">Seleccionar</option><option *ngFor="let user of unassignedUserOptions" [value]="user.id">{{ user.name }}</option></select></label>
+         <label>Usuario<select [(ngModel)]="assignmentUser[selectedUnassigned.pdv_id]"><option value="">Seleccionar</option><option *ngFor="let user of unassignedUserOptions" [value]="user.id">{{ user.name }}</option></select></label>
-        <label>Días<div class="day-checkboxes"><label *ngFor="let day of unassignedDayOptions"><input type="checkbox" [checked]="(assignmentDays[selectedUnassigned.pdv_id] || []).includes(day)" (change)="toggleUnassignedDay(selectedUnassigned.pdv_id, day, $any($event.target).checked)">{{ day.substring(0, 3) }}</label></div></label>
+         <label>Días<div class="day-checkboxes"><label *ngFor="let day of unassignedDayOptions"><input type="checkbox" [checked]="(assignmentDays[selectedUnassigned.pdv_id] || []).includes(day)" (change)="toggleUnassignedDay(selectedUnassigned.pdv_id, day, $any($event.target).checked)">{{ day.substring(0, 3) }}</label></div></label>
-      </div>
+       </div>
-      <div class="pending-actions"><button type="button" class="btn-secondary" (click)="startUnassignedEdit(selectedUnassigned)"><i class="pi pi-pencil"></i> Editar</button><button type="button" class="btn-primary" (click)="assignUnassigned(selectedUnassigned)" [disabled]="assigningUnassignedId === selectedUnassigned.pdv_id"><span *ngIf="assigningUnassignedId === selectedUnassigned.pdv_id" class="spinner-inline"></span><i *ngIf="assigningUnassignedId !== selectedUnassigned.pdv_id" class="pi pi-user-plus"></i> Reasignar</button></div>
+       <div class="pending-actions"><button type="button" class="btn-secondary" (click)="startUnassignedEdit(selectedUnassigned)"><i class="pi pi-pencil"></i> Editar</button><button type="button" class="btn-primary" (click)="assignUnassigned(selectedUnassigned)" [disabled]="assigningUnassignedId === selectedUnassigned.pdv_id"><span *ngIf="assigningUnassignedId === selectedUnassigned.pdv_id" class="spinner-inline"></span><i *ngIf="assigningUnassignedId !== selectedUnassigned.pdv_id" class="pi pi-user-plus"></i> Reasignar</button></div>
+       <div class="employee-load-list" aria-label="Carga de empleados">
+         <button type="button" class="employee-load-row" *ngFor="let employee of unassignedEmployeeLoads" [class.selected]="assignmentUser[selectedUnassigned.pdv_id] === employee.id" [class.over-capacity]="employeeLoadStatus(employee) === 'over-capacity'" (click)="selectUnassignedEmployee(employee.id)">
+           <span class="employee-load-name">{{ employee.name }}</span>
+           <span class="employee-load-values">{{ employee.workHours | number:'1.0-1' }} / {{ employee.capacityHours | number:'1.0-1' }} h · {{ employee.utilization | number:'1.0-1' }}%</span>
+           <span class="employee-load-bar" [ngClass]="employeeLoadStatus(employee)"><span [style.width.%]="employeeLoadWidth(employee)"></span></span>
+         </button>
+       </div>
     </ng-template>
     <div class="error-card" *ngIf="unassignedActionError">{{ unassignedActionError }}</div>
   </section>
@@ -129,7 +121,7 @@
         <div><dt>Día</dt><dd>{{ selectedRouteDetail.json.dia }}</dd></div>
         <div><dt>Orden de visita</dt><dd>{{ selectedVisitOrder }}</dd></div>
         <div><dt>Origen del tramo</dt><dd>{{ selectedSegmentOrigin }}</dd></div>
-        <div><dt>Destino</dt><dd>{{ selectedRouteDetail.json.latitud_pdv }}, {{ selectedRouteDetail.json.longitud_pdv }}</dd></div>
+        <div><dt>Destino</dt><dd><button type="button" class="btn-secondary map-location-button" (click)="openDestinationInGoogleMaps()" title="Abrir ubicación en Google Maps"><i class="pi pi-map"></i> Ver en Google Maps</button></dd></div>
         <div><dt>Horas trabajo</dt><dd>{{ selectedRouteDetail.json.horas_trabajo }}</dd></div>
         <div><dt>Distancia tramo</dt><dd>{{ selectedSegmentDistance | number:'1.2-2' }} km</dd></div>
         <div><dt>Duración tramo</dt><dd>{{ selectedSegmentDurationMinutes | number:'1.0-0' }} min</dd></div>
@@ -145,6 +137,13 @@
         <label>Día<select [(ngModel)]="reassignDay"><option *ngFor="let day of unassignedDayOptions" [value]="day">{{ day }}</option></select></label>
         <p class="reassign-hint">Se recalcularán la distancia y duración con ruta vial ORS.</p>
         <div class="reassign-actions"><button type="button" class="btn-primary" (click)="reassignRoute()" [disabled]="reassigningRoute"><span *ngIf="reassigningRoute" class="spinner-inline"></span><i *ngIf="!reassigningRoute" class="pi pi-check"></i> {{ reassigningRoute ? 'Calculando...' : 'Confirmar' }}</button><button type="button" class="btn-secondary" (click)="cancelReassignRoute()" [disabled]="reassigningRoute">Cancelar</button></div>
+        <div class="employee-load-list" aria-label="Carga de empleados">
+          <button type="button" class="employee-load-row" *ngFor="let employee of reassignmentEmployeeLoads" [class.selected]="reassignUserId === employee.id" [class.over-capacity]="employeeLoadStatus(employee) === 'over-capacity'" (click)="selectReassignmentEmployee(employee.id)">
+            <span class="employee-load-name">{{ employee.name }}</span>
+            <span class="employee-load-values">{{ employee.workHours | number:'1.0-1' }} / {{ employee.capacityHours | number:'1.0-1' }} h · {{ employee.utilization | number:'1.0-1' }}%</span>
+            <span class="employee-load-bar" [ngClass]="employeeLoadStatus(employee)"><span [style.width.%]="employeeLoadWidth(employee)"></span></span>
+          </button>
+        </div>
         <div class="error-card" *ngIf="reassignError">{{ reassignError }}</div>
       </div>
     </div>
@@ -152,26 +151,32 @@
 
   <section class="daily-routes-card" *ngIf="dailySummaries.length">
     <h3>Rutas diarias</h3>
-    <article class="daily-route" *ngFor="let day of dailySummaries" [class.over-capacity]="day.exceedsCapacity">
+    <article class="daily-route-group" *ngFor="let group of dailyGroups">
-      <strong>{{ day.userName }} · {{ day.day }}</strong>
+      <button type="button" class="daily-route-toggle" (click)="toggleDailyRouteDay(group.day)" [attr.aria-expanded]="isDailyRouteDayExpanded(group.day)">
-      <span>{{ day.routes.length }} paradas · {{ day.distanceKm | number:'1.1-1' }} km · {{ (day.travelHours * 60) | number:'1.0-0' }} min</span>
+        <span class="daily-route-toggle-title"><i class="pi" [class.pi-chevron-right]="!isDailyRouteDayExpanded(group.day)" [class.pi-chevron-down]="isDailyRouteDayExpanded(group.day)"></i> {{ group.day }}</span>
-      <small [attr.aria-label]="day.exceedsCapacity ? 'Capacidad excedida' : 'Dentro de capacidad'">{{ day.totalHours | number:'1.1-1' }} / {{ day.capacityHours | number:'1.1-1' }} h {{ day.exceedsCapacity ? '· Excede capacidad' : '· Capacidad disponible' }}</small>
+        <span>{{ group.totalStops }} paradas · {{ group.totalDistance | number:'1.1-1' }} km</span>
+      </button>
+      <div class="daily-route-group-content" *ngIf="isDailyRouteDayExpanded(group.day)">
+        <article class="daily-route" *ngFor="let route of group.routes" [class.over-capacity]="route.exceedsCapacity">
+          <strong>{{ route.userName }}</strong>
+          <span>{{ route.routes.length }} paradas · {{ route.distanceKm | number:'1.1-1' }} km</span>
+          <small [attr.aria-label]="route.exceedsCapacity ? 'Capacidad excedida' : 'Dentro de capacidad'">{{ route.totalHours | number:'1.1-1' }} / {{ route.capacityHours | number:'1.1-1' }} h {{ route.exceedsCapacity ? '· Excede capacidad' : '· Capacidad disponible' }}</small>
+        </article>
+      </div>
     </article>
   </section>
 
-  <div class="routes-list" *ngIf="filteredRoutes.length">
-     <h3>{{ selectedUsuarioId === 'Todos' ? 'PDVs de todos los usuarios' : 'PDVs del usuario' }} ({{ filteredRoutes.length }})</h3>
-    <ul>
-      <li *ngFor="let r of filteredRoutes; let i = index" tabindex="0" role="button"
-          [class.selected]="selectedRouteDetail && selectedRouteDetail.json.pdv_id === r.json.pdv_id && selectedRouteDetail.json.usuario_id === r.json.usuario_id && selectedRouteDetail.json.dia === r.json.dia"
-           (click)="selectRouteFromList(r)" (keydown.enter)="selectRouteFromList(r)" (keydown.space)="selectRouteFromList(r); $event.preventDefault()">
-        <span class="idx">{{ routeVisitOrder(r) }}</span>
-         <div class="li-main">
-           <strong>{{ r.json.nombre_pdv }}</strong>
-           <small>{{ selectedUsuarioId === 'Todos' ? r.json.nombre_usuario + ' • ' : '' }}{{ r.json.dia }} • {{ routeSegmentDistance(r) | number:'1.2-2' }} km • {{ routeSegmentDurationMinutes(r) | number:'1.0-0' }} min</small>
-        </div>
-        <i class="pi pi-chevron-right"></i>
-      </li>
-    </ul>
-  </div>
 </div>
+
+<section class="unassigned-bottom-drawer" *ngIf="selectedUsuarioId === 'Todos' && selectedDia === 'Todos' && unassignedRoutes.length" [class.open]="isUnassignedDrawerOpen">
+  <button type="button" class="unassigned-drawer-toggle" (click)="toggleUnassignedDrawer()" [attr.aria-expanded]="isUnassignedDrawerOpen">
+    <span><i class="pi pi-exclamation-triangle"></i> PDVs sin ruta ({{ unassignedRoutes.length }})</span>
+    <i class="pi" [class.pi-chevron-up]="!isUnassignedDrawerOpen" [class.pi-chevron-down]="isUnassignedDrawerOpen"></i>
+  </button>
+  <div class="unassigned-drawer-content" *ngIf="isUnassignedDrawerOpen">
+    <button type="button" class="unassigned-map-item" *ngFor="let pending of unassignedRoutes" [class.selected-pending]="selectedUnassigned?.pdv_id === pending.pdv_id" (click)="selectUnassigned(pending)">
+      <span class="pending-icon">!</span>
+      <span class="pending-text"><strong>{{ pending.pdv_nombre }}</strong><small>{{ pending.motivo }}</small></span>
+    </button>
+  </div>
+</section>

route-planner/src/app/private/home/route-overview-map/route-overview-map.component.ts

@@ -11,6 +11,21 @@ import { RouteAssignedResponse, RouteNoAssignedResponse } from '../../../core/mo
 import { colorForUsuario } from '../../../shared/utils/palette.utils';
 import { DailyRouteSummary, haversineKm, sequenceRoutes, summarizeDailyRoutes } from '../../../shared/utils/route-sequencing.utils';
 
+interface DailyRouteGroup {
+  day: string;
+  routes: DailyRouteSummary[];
+  totalStops: number;
+  totalDistance: number;
+}
+
+interface EmployeeLoadOption {
+  id: string;
+  name: string;
+  workHours: number;
+  capacityHours: number;
+  utilization: number;
+}
+
 interface MapRoute {
   data: RouteAssignedResponse;
   color: string;
@@ -45,14 +60,14 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
   private selectedMapRoute: MapRoute | null = null;
   private heatLayer?: any;
   showHeat = true;
-  heatWeightMode: 'uniform' | 'horas_trabajo' = 'horas_trabajo';
   private heatPointsCache: [number, number, number][] = [];
   private unassignedMarkers = new Map<number, L.Marker>();
 
   usuarios: { id: string; nombre: string }[] = [];
   dias: string[] = [];
-  selectedUsuarioId: string | null = null;
+  selectedUsuarioId: string = 'Todos';
   selectedDia: string = 'Todos';
+  expandedDailyRouteDay: string | null = null;
   selectedRouteDetail: RouteAssignedResponse | null = null;
 
   filteredRoutes: RouteAssignedResponse[] = [];
@@ -63,6 +78,7 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
   orsTotal = 0;
   error: string | null = null;
   unassignedRoutes: RouteNoAssignedResponse[] = [];
+  isUnassignedDrawerOpen = false;
   selectedUnassigned: RouteNoAssignedResponse | null = null;
   editingUnassigned: RouteNoAssignedResponse | null = null;
   editUnassignedName = '';
@@ -81,16 +97,41 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
   reassignError: string | null = null;
 
   // Summary stats
+  get uniqueFilteredRoutes(): RouteAssignedResponse[] {
+    const unique = new Map<string, RouteAssignedResponse>();
+    for (const route of this.filteredRoutes) {
+      const pdvId = String(route.json.pdv_id);
+      if (!unique.has(pdvId)) unique.set(pdvId, route);
+    }
+    return Array.from(unique.values());
+  }
+
   get totalDistancia(): string {
+    const uniqueIds = new Set(this.uniqueFilteredRoutes.map(route => String(route.json.pdv_id)));
     const sum = this.mapRoutes.length
-      ? this.mapRoutes.reduce((acc, route) => acc + (route.segmentDistanceKm ?? haversineKm(route.origin, route.destination)), 0)
+      ? this.mapRoutes
-      : this.filteredRoutes.reduce((acc, route) => acc + Number(route.json.distancia), 0);
+        .filter(route => uniqueIds.has(String(route.data.json.pdv_id)))
+        .reduce((acc, route) => {
+          const firstSegment = this.mapRoutes.find(candidate => String(candidate.data.json.pdv_id) === String(route.data.json.pdv_id));
+          return firstSegment === route
+            ? acc + (route.segmentDistanceKm ?? haversineKm(route.origin, route.destination))
+            : acc;
+        }, 0)
+      : this.uniqueFilteredRoutes.reduce((acc, route) => acc + Number(route.json.distancia), 0);
     return sum.toFixed(2);
   }
   get totalDuracionMin(): string {
+    const uniqueIds = new Set(this.uniqueFilteredRoutes.map(route => String(route.json.pdv_id)));
     const sum = this.mapRoutes.length
-      ? this.mapRoutes.reduce((acc, route) => acc + (route.segmentDurationHours ?? Number(route.data.json.horas_desplazamiento)) * 60, 0)
+      ? this.mapRoutes
-      : this.filteredRoutes.reduce((acc, route) => acc + Number(route.json.horas_desplazamiento) * 60, 0);
+        .filter(route => uniqueIds.has(String(route.data.json.pdv_id)))
+        .reduce((acc, route) => {
+          const firstSegment = this.mapRoutes.find(candidate => String(candidate.data.json.pdv_id) === String(route.data.json.pdv_id));
+          return firstSegment === route
+            ? acc + (route.segmentDurationHours ?? Number(route.data.json.horas_desplazamiento)) * 60
+            : acc;
+        }, 0)
+      : this.uniqueFilteredRoutes.reduce((acc, route) => acc + Number(route.json.horas_desplazamiento) * 60, 0);
     return sum.toFixed(0);
   }
 
@@ -98,6 +139,44 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
     return summarizeDailyRoutes(this.filteredRoutes);
   }
 
+  get dailyGroups(): DailyRouteGroup[] {
+    const order = ['Lunes', 'Martes', 'Miércoles', 'Miercoles', 'Jueves', 'Viernes'];
+    const groups = new Map<string, DailyRouteSummary[]>();
+    for (const summary of this.dailySummaries) {
+      const routes = groups.get(summary.day) ?? [];
+      routes.push(summary);
+      groups.set(summary.day, routes);
+    }
+    return Array.from(groups, ([day, routes]) => ({
+      day,
+      routes,
+      totalStops: routes.reduce((sum, route) => sum + route.routes.length, 0),
+      totalDistance: routes.reduce((sum, route) => sum + route.distanceKm, 0)
+    })).sort((a, b) => order.indexOf(a.day) - order.indexOf(b.day));
+  }
+
+  toggleDailyRouteDay(day: string): void {
+    this.expandedDailyRouteDay = this.expandedDailyRouteDay === day ? null : day;
+  }
+
+  isDailyRouteDayExpanded(day: string): boolean {
+    return this.expandedDailyRouteDay === day;
+  }
+
+  openDestinationInGoogleMaps(): void {
+    if (!this.selectedRouteDetail) return;
+    const { latitud_pdv, longitud_pdv } = this.selectedRouteDetail.json;
+    const latitude = Number(latitud_pdv);
+    const longitude = Number(longitud_pdv);
+    if (!Number.isFinite(latitude) || !Number.isFinite(longitude)) return;
+    const url = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(`${latitude},${longitude}`)}`;
+    window.open(url, '_blank', 'noopener,noreferrer');
+  }
+
+  toggleUnassignedDrawer(): void {
+    this.isUnassignedDrawerOpen = !this.isUnassignedDrawerOpen;
+  }
+
   constructor(
     private routeState: RouteState,
     private orsService: OrsService,
@@ -112,11 +191,12 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
         this.allRoutes = [...routes];
         this.usuarios = this.routeState.getUsuariosUnicos();
         this.dias = this.routeState.getDiasUnicos();
-        // Init from queryParams default (Todos)
+        // Start each map load with the complete planning selected by default.
         const qp = this.activatedRoute.snapshot.queryParams;
-        if (qp['usuario_id']) this.selectedUsuarioId = String(qp['usuario_id']);
+        if (qp['pdv_id']) {
-        else if (!this.selectedUsuarioId && this.usuarios.length) this.selectedUsuarioId = 'Todos';
+          this.selectedUsuarioId = 'Todos';
-        if (qp['dia']) this.selectedDia = String(qp['dia']);
+          this.selectedDia = 'Todos';
+        }
         // If focus pdv provided, auto-select detail after map loads
         this.applyFilter();
         this.cdr.detectChanges();
@@ -135,20 +215,6 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
     // React to queryParams changes
     this.subs.push(
       this.activatedRoute.queryParams.subscribe(qp => {
-        let changed = false;
-        if (qp['usuario_id'] && String(qp['usuario_id']) !== this.selectedUsuarioId) {
-          this.selectedUsuarioId = String(qp['usuario_id']);
-          changed = true;
-        }
-        if (qp['dia'] && qp['dia'] !== this.selectedDia) {
-          this.selectedDia = String(qp['dia']);
-          changed = true;
-        }
-        if (changed) {
-          this.applyFilter();
-          if (this.map) this.renderFiltered();
-          this.cdr.detectChanges();
-        }
         // Focus a specific route if pdv_id passed
         if (qp['pdv_id'] && this.filteredRoutes.length) {
           const found = this.filteredRoutes.find(r => String(r.json.pdv_id) === String(qp['pdv_id']));
@@ -225,7 +291,11 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
   private initMap() {
     this.map = L.map('map-overview').setView([18.4861, -69.9312], 10);
     const pdvPane = this.map.createPane('pdvPane');
-    pdvPane.style.zIndex = '650';
+    const heatPane = this.map.createPane('heatPane');
+    pdvPane.style.zIndex = '750';
+    heatPane.style.zIndex = '700';
+    const popupPane = this.map.getPane('popupPane');
+    if (popupPane) popupPane.style.zIndex = '1000';
     L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
       attribution: '© OpenStreetMap contributors'
     }).addTo(this.map);
@@ -312,14 +382,14 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
       // Marker for PDV
       const pdvIcon = L.divIcon({
         className: 'custom-marker marker-end',
-        html: `<div class="location-pin"><span>${segment.order}</span></div>`,
+        html: `<div class="location-pin-wrapper"><div class="location-pin"><span>${segment.order}</span></div></div>`,
-        iconSize: [30, 38],
+        iconSize: [42, 50],
-        iconAnchor: [15, 38],
+        iconAnchor: [21, 46],
         popupAnchor: [0, -18]
       });
       const marker = L.marker([Number(j.latitud_pdv), Number(j.longitud_pdv)], { icon: pdvIcon, pane: 'pdvPane', zIndexOffset: 1000 })
         .addTo(this.map!)
-        .bindPopup(`<strong>${j.nombre_pdv}</strong><br>Parada ${segment.order} de ${segment.totalStops} • ${j.dia}`);
+        .bindPopup(`<strong>${j.nombre_pdv}</strong><br><strong>Usuario:</strong> ${j.nombre_usuario}<br>Parada ${segment.order} de ${segment.totalStops} • ${j.dia}`);
       // Heat point
       const w = this.computeWeight(j);
       this.heatPointsCache.push([Number(j.latitud_pdv), Number(j.longitud_pdv), w]);
@@ -449,7 +519,7 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
           mr.segmentDistanceKm = summary.distance / 1000;
           mr.segmentDurationHours = summary.duration / 3600;
           mr.marker?.setPopupContent(
-            `<strong>${mr.data.json.nombre_pdv}</strong><br>Parada ${mr.visitOrder} de ${mr.totalStops} • ${mr.data.json.dia}<br>${mr.segmentDistanceKm.toFixed(2)} km • ${(mr.segmentDurationHours * 60).toFixed(0)} min`
+            `<strong>${mr.data.json.nombre_pdv}</strong><br><strong>Usuario:</strong> ${mr.data.json.nombre_usuario}<br>Parada ${mr.visitOrder} de ${mr.totalStops} • ${mr.data.json.dia}<br>${mr.segmentDistanceKm.toFixed(2)} km • ${(mr.segmentDurationHours * 60).toFixed(0)} min`
           );
         }
         line.on('click', () => this.selectRoute(mr));
@@ -492,6 +562,9 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
   }
 
   private selectRoute(mr: MapRoute) {
+    this.selectedUnassigned = null;
+    this.editingUnassigned = null;
+    this.unassignedActionError = null;
     this.selectedRouteDetail = mr.data;
     this.highlightRoute(mr.data);
     this.fitSelectedRoute(mr);
@@ -499,6 +572,9 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
   }
 
   selectRouteFromList(route: RouteAssignedResponse): void {
+    this.selectedUnassigned = null;
+    this.editingUnassigned = null;
+    this.unassignedActionError = null;
     const mapRoute = this.mapRoutes.find(mr => this.sameRoute(mr.data, route));
     if (mapRoute) {
       this.selectRoute(mapRoute);
@@ -647,14 +723,62 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
       left.json.dia === right.json.dia;
   }
 
+  private getEmployeeLoads(excluding?: RouteAssignedResponse): EmployeeLoadOption[] {
+    const profiles = new Map<string, RouteAssignedResponse>();
+    const workHours = new Map<string, number>();
+    for (const route of this.routeState.getAssignedSnapshot()) {
+      const id = String(route.json.usuario_id);
+      if (!profiles.has(id)) profiles.set(id, route);
+      if (route !== excluding) {
+        workHours.set(id, (workHours.get(id) ?? 0) + Number(route.json.horas_trabajo || route.json.hora_minima_semanal_pdv || 0));
+      }
+    }
+    return Array.from(profiles, ([id, profile]) => {
+      const capacityHours = Number(profile.json.hora_laboral_semanal_usuario || 0);
+      const assignedHours = workHours.get(id) ?? 0;
+      return {
+        id,
+        name: profile.json.nombre_usuario,
+        workHours: assignedHours,
+        capacityHours,
+        utilization: capacityHours ? (assignedHours / capacityHours) * 100 : 0
+      };
+    }).sort((a, b) => a.utilization - b.utilization || a.name.localeCompare(b.name));
+  }
+
   get unassignedUserOptions(): { id: string; name: string }[] {
     return this.routeState.getUsuariosUnicos().map(user => ({ id: user.id, name: user.nombre }));
   }
 
+  get unassignedEmployeeLoads(): EmployeeLoadOption[] {
+    return this.getEmployeeLoads();
+  }
+
+  get reassignmentEmployeeLoads(): EmployeeLoadOption[] {
+    return this.getEmployeeLoads(this.selectedRouteDetail ?? undefined);
+  }
+
   get unassignedDayOptions(): string[] {
     return this.routeState.getDiasUnicos();
   }
 
+  employeeLoadWidth(employee: EmployeeLoadOption): number {
+    return Math.min(Math.max(employee.utilization, 0), 100);
+  }
+
+  employeeLoadStatus(employee: EmployeeLoadOption): 'ok' | 'warning' | 'over-capacity' {
+    return employee.utilization > 100 ? 'over-capacity' : employee.utilization > 90 ? 'warning' : 'ok';
+  }
+
+  selectUnassignedEmployee(employeeId: string): void {
+    if (!this.selectedUnassigned) return;
+    this.assignmentUser[String(this.selectedUnassigned.pdv_id)] = employeeId;
+  }
+
+  selectReassignmentEmployee(employeeId: string): void {
+    this.reassignUserId = employeeId;
+  }
+
   toggleUnassignedDay(pdvId: number, day: string, checked: boolean): void {
     const key = String(pdvId);
     const days = new Set(this.assignmentDays[key] ?? []);
@@ -665,6 +789,8 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
   selectUnassigned(route: RouteNoAssignedResponse): void {
     this.selectedUnassigned = route;
     this.selectedRouteDetail = null;
+    this.showReassignForm = false;
+    this.reassignError = null;
     this.map?.setView([route.latitud, route.longitud], Math.max(this.map.getZoom(), 14));
     this.unassignedMarkers.get(route.pdv_id)?.openPopup();
     this.cdr.detectChanges();
@@ -769,13 +895,12 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
   }
 
   private computeWeight(j: RouteAssignedResponse['json']): number {
-    if (this.heatWeightMode === 'uniform') return 0.8;
     const v = parseFloat(String(j.horas_trabajo));
-    if (isNaN(v)) return 0.8;
+    if (isNaN(v)) return 1;
     const vals = this.filteredRoutes.map(r => parseFloat(String(r.json.horas_trabajo))).filter(n => !isNaN(n));
-    if (!vals.length) return 0.8;
+    if (!vals.length) return 1;
     const min = Math.min(...vals), max = Math.max(...vals);
-    if (max === min) return 0.8;
+    if (max === min) return 1;
     return 0.3 + 0.7 * (v - min) / (max - min);
   }
 
@@ -786,8 +911,13 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
     }
     if (!this.showHeat || !this.heatPointsCache.length || !this.map) return;
     this.heatLayer = (L as any).heatLayer(this.heatPointsCache, {
-      radius: 25, blur: 18, maxZoom: 17, minOpacity: 0.4,
+      pane: 'heatPane',
-      gradient: { 0.4: '#6CC24A', 0.65: '#FF6A13', 1.0: '#D32F2F' }
+      radius: 32,
+      blur: 24,
+      maxZoom: 18,
+      minOpacity: 0.55,
+      max: 1.8,
+      gradient: { 0.2: '#b7f05f', 0.45: '#6CC24A', 0.7: '#FF6A13', 1.0: '#D32F2F' }
     }).addTo(this.map);
   }
 
@@ -802,16 +932,6 @@ export class RouteOverviewMapComponent implements OnInit, OnDestroy, AfterViewIn
     this.cdr.detectChanges();
   }
 
-  setHeatWeight(mode: 'uniform' | 'horas_trabajo') {
-    this.heatWeightMode = mode;
-    this.heatPointsCache = this.filteredRoutes.map(r => {
-      const j = r.json;
-      return [Number(j.latitud_pdv), Number(j.longitud_pdv), this.computeWeight(j)] as [number, number, number];
-    });
-    this.updateHeatLayer();
-    this.cdr.detectChanges();
-  }
-
   private toggleLayerVisibility() {
     this.mapRoutes.forEach(mr => {
       if (mr.fallbackLine) (mr.fallbackLine as any).setStyle({ opacity: 0.6 });

route-planner/src/app/public/login/login.component.css

@@ -87,13 +87,17 @@
   box-shadow: 0 0 0 3px rgba(108, 194, 74, 0.15);
 }
 
-button[type="submit"] {
+.google-login {
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
   margin-top: 8px;
   padding: 11px;
-  background: var(--glm-azul);
+  background: #fff;
-  color: #fff;
+  color: var(--glm-gris-oscuro);
-  border: none;
+  border: 1px solid var(--glm-gris-medio);
   border-radius: 4px;
   font-size: 15px;
   font-family: Arial, sans-serif;
@@ -102,15 +106,25 @@ button[type="submit"] {
   transition: background 0.2s;
 }
 
-button[type="submit"]:hover:not(:disabled) {
+.google-login:hover:not(:disabled) {
-  background: var(--glm-verde);
+  border-color: var(--glm-azul);
+  background: var(--glm-verde-bg);
 }
 
-button[type="submit"]:disabled {
+.google-login:disabled {
   opacity: 0.6;
   cursor: not-allowed;
 }
 
+.google-mark { color: #4285f4; font-size: 1.1rem; font-weight: 700; }
+.domain-note { margin: 10px 0 0; color: var(--glm-acero); font-size: .78rem; text-align: center; }
+
+.login-error {
+  margin: 12px 0 0;
+  color: #c9252d;
+  font-size: 0.82rem;
+}
+
 .footer {
   text-align: center;
   margin-top: 24px;

route-planner/src/app/public/login/login.component.html

@@ -11,36 +11,15 @@
       Planifica rutas inteligentes de forma eficiente
     </p>
 
-    <form (ngSubmit)="login()" #form="ngForm">
+    <div class="login-actions">
-
+      <button type="button" class="google-login" (click)="loginWithGoogle()" [disabled]="loading">
-      <div class="input-group">
+        <span class="google-mark">G</span>
-        <label>Email</label>
+        <span *ngIf="!loading">Continuar con Google</span>
-        <input
+        <span *ngIf="loading">Redirigiendo a Google...</span>
-          type="email"
-          name="email"
-          [(ngModel)]="email"
-          required
-          placeholder="usuario@empresa.com"
-        />
-      </div>
-
-      <div class="input-group">
-        <label>Contraseña</label>
-        <input
-          type="password"
-          name="password"
-          [(ngModel)]="password"
-          required
-          placeholder="••••••••"
-        />
-      </div>
-
-      <button type="submit" [disabled]="loading || form.invalid">
-        <span *ngIf="!loading">Iniciar sesión</span>
-        <span *ngIf="loading">Verificando ruta...</span>
       </button>
-
+      <p class="domain-note">Solo cuentas @gomezleemarketing.com</p>
-    </form>
+      <p class="login-error" *ngIf="error">{{ error }}</p>
+    </div>
 
     <div class="footer">
       © 2026 Route Planner System

route-planner/src/app/public/login/login.component.ts

@@ -1,29 +1,41 @@
-import { Component, ChangeDetectionStrategy } from '@angular/core';
+import { Component, ChangeDetectionStrategy, ChangeDetectorRef, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { FormsModule } from '@angular/forms';
 import { Router } from '@angular/router';
+import { AuthService } from '../../core/services/auth.service';
 
 @Component({
   standalone: true,
   selector: 'app-login',
-  imports: [CommonModule, FormsModule],
+  imports: [CommonModule],
   templateUrl: './login.component.html',
   styleUrls: ['./login.component.css'],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class LoginComponent {
+export class LoginComponent implements OnInit {
 
-  email = '';
-  password = '';
   loading = false;
+  error = '';
 
-  constructor(private router: Router) {}
+  constructor(private router: Router, private auth: AuthService, private cdr: ChangeDetectorRef) {}
-  login() {
+
+  async ngOnInit(): Promise<void> {
+    if (await this.auth.getSession()) await this.router.navigate(['/home']);
+  }
+
+  async loginWithGoogle() {
+    this.error = '';
     this.loading = true;
- 
+    try {
-    setTimeout(() => {
+      const error = await this.auth.signInWithGoogle();
+      if (error) {
+        this.error = error;
+        return;
+      }
+    } catch {
+      this.error = 'No se pudo iniciar sesión. Intenta de nuevo.';
+    } finally {
       this.loading = false;
-      this.router.navigate(['/home']);
+      this.cdr.detectChanges();
-    }, 1500);
+    }
   }
 }

route-planner/src/environments/environment.prod.ts

@@ -3,4 +3,6 @@ export const environment = {
   n8nWebhookUrl: 'https://agenteit.digitalcompass.agency/webhook/calcular-camino',
   orsBaseUrl: 'http://localhost:18080/ors/v2',
   requestTimeoutMs: 30000,
+  supabaseUrl: 'https://dbit.digitalcompass.agency',
+  supabaseAnonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE',
 };

route-planner/src/environments/environment.ts

@@ -3,4 +3,6 @@ export const environment = {
   n8nWebhookUrl: 'https://agenteit.digitalcompass.agency/webhook/calcular-camino',
   orsBaseUrl: 'http://localhost:18080/ors/v2',
   requestTimeoutMs: 30000,
+  supabaseUrl: 'https://dbit.digitalcompass.agency',
+  supabaseAnonKey: 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyAgCiAgICAicm9sZSI6ICJhbm9uIiwKICAgICJpc3MiOiAic3VwYWJhc2UtZGVtbyIsCiAgICAiaWF0IjogMTY0MTc2OTIwMCwKICAgICJleHAiOiAxNzk5NTM1NjAwCn0.dc_X5iR_VP_qT0zsiyj_I_OZ2T9FtRU2BBNWN8Bu4GE',
 };

route-planner/src/styles.css

@@ -40,6 +40,12 @@
   text-align: center;
 }
 
+/* leaflet.heat creates its canvas in the map overlay pane, outside Angular styles. */
+.leaflet-heatmap-layer {
+  z-index: 700 !important;
+  pointer-events: none;
+}
+
 :root {
   --glm-verde: #6CC24A;
   --glm-verde-claro: #A4D65E;

supabase/rutero_empleados_jornadas.sql

@@ -0,0 +1,36 @@
+alter table public.rutero_empleados
+  add column if not exists jornada_codigo text not null default 'LUN_VIE_40',
+  add column if not exists horas_descanso_por_dia numeric(4,2) not null default 1,
+  add column if not exists dias_descanso jsonb not null default '[]'::jsonb;
+
+alter table public.rutero_empleados
+  add constraint rutero_empleados_jornada_valida
+  check (jornada_codigo in ('LUN_DOM_44', 'LUN_SAB_40', 'LUN_SAB_44', 'LUN_VIE_40')) not valid;
+
+alter table public.rutero_empleados
+  add constraint rutero_empleados_descanso_valido
+  check (horas_descanso_por_dia >= 0 and horas_descanso_por_dia < 24) not valid;
+
+alter table public.rutero_empleados enable row level security;
+
+drop policy if exists "Solo GomezLee puede consultar empleados" on public.rutero_empleados;
+drop policy if exists "Solo GomezLee puede crear empleados" on public.rutero_empleados;
+drop policy if exists "Solo GomezLee puede editar empleados" on public.rutero_empleados;
+drop policy if exists "Solo GomezLee puede eliminar empleados" on public.rutero_empleados;
+
+create policy "Solo GomezLee puede consultar empleados"
+on public.rutero_empleados for select to authenticated
+using (lower(coalesce(auth.jwt() ->> 'email', '')) like '%@gomezleemarketing.com');
+
+create policy "Solo GomezLee puede crear empleados"
+on public.rutero_empleados for insert to authenticated
+with check (lower(coalesce(auth.jwt() ->> 'email', '')) like '%@gomezleemarketing.com');
+
+create policy "Solo GomezLee puede editar empleados"
+on public.rutero_empleados for update to authenticated
+using (lower(coalesce(auth.jwt() ->> 'email', '')) like '%@gomezleemarketing.com')
+with check (lower(coalesce(auth.jwt() ->> 'email', '')) like '%@gomezleemarketing.com');
+
+create policy "Solo GomezLee puede eliminar empleados"
+on public.rutero_empleados for delete to authenticated
+using (lower(coalesce(auth.jwt() ->> 'email', '')) like '%@gomezleemarketing.com');