Estructura correcta: subida desde la raíz

2026-07-16 16:09:23 -04:00
commit de83f8984a
85 changed files with 7301 additions and 0 deletions
@@ -0,0 +1,25 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
 .env
@@ -0,0 +1,130 @@
 # Manual de Uso — GLM ID Card Generator
 ## ¿Qué hace esta aplicación?
 Genera carnets corporativos **CR80** (tamaño tarjeta de crédito) para los colaboradores de GomezLee Marketing. El sistema crea dos imágenes PNG por cada carnet: el **Frente** (con foto, nombre y puesto del colaborador) y el **Reverso** (con el logo del cliente y un código QR único). Al escanear el QR, cualquier persona puede verificar en tiempo real si el colaborador está activo en BambooHR.
 ### Capacidades principales
 - **Modo Individual**: Ingresa los datos de un colaborador y descarga su carnet.
 - **Modo Lote**: Sube un archivo Excel/CSV con varios colaboradores y descarga un ZIP con todos los carnets.
 - **Verificación QR**: Escanea el código QR del reverso para consultar el estado actual del colaborador.
 ---
 ## Requisitos
 - Navegador **Google Chrome** o **Microsoft Edge** (actualizado).
 - Cuenta de Google corporativa **@gomezleemarketing.com**.
 - Conexión a Internet.
 ---
 ## Paso a paso — Inicio de sesión
 1. Abre la URL de la aplicación en Chrome o Edge.
 2. Haz clic en **"Continuar con Google"**.
 3. Inicia sesión con tu correo **@gomezleemarketing.com**.
 4. La aplicación te redirigirá automáticamente al generador de carnets.
 > Si tu cuenta no es del dominio `@gomezleemarketing.com`, la aplicación no permitirá el acceso.
 ---
 ## Paso a paso — Modo Individual
 1. **Nombre**: Escribe el nombre completo del colaborador (ej. "Alexi Zabala").
 2. **Puesto**: Escribe el cargo del colaborador (ej. "Mercaderista").
 3. **Subir foto**: Haz clic en "Subir foto del colaborador" y selecciona una foto desde tu computadora. La foto se procesará con IA automáticamente.
 4. **Idioma**: Selecciona **Español** o **Inglés** — esto cambia el fondo del reverso del carnet.
 5. **Cliente / Proyecto**: Selecciona el cliente asignado de la lista desplegable.
 6. **ID del empleado / Cédula**: Ingresa el número de cédula o ID del colaborador **sin guiones ni espacios**. El código QR se genera automáticamente al escribir.
 7. Revisa la **vista previa en tiempo real** que muestra el frente y el reverso del carnet.
 8. Haz clic en **"⬇ Descargar"**.
 9. Se descargarán dos archivos PNG:
   - `{Nombre}Frente.png`
   - `{Nombre}Reverso.png`
 > El botón "Descargar" solo se habilita cuando los campos Nombre, Puesto e ID están llenos.
 ---
 ## Paso a paso — Modo Lote (carga masiva)
 1. Prepara un archivo **Excel (.xlsx)** o **CSV** con las siguientes columnas exactas:
 | Columna | Requerido | Descripción |
 |---|---|---|
 | `nombre` | Sí | Nombre completo del colaborador |
 | `puesto` | Sí | Cargo del colaborador |
 | `cliente/proyecto` | Sí | Cliente asignado (ver lista más abajo) |
 | `cedula` | Sí | Cédula o ID del colaborador (sin guiones ni espacios) |
 | `lenguaje` | No | `Esp` para español (default), `Ing` para inglés |
 | `foto_url` | No | URL pública de la foto (Google Drive o enlace directo) |
 2. En la aplicación, en el panel **"Carga Masiva de Colaboradores"**, haz clic en **"Seleccionar Archivo Excel"**.
 3. Selecciona tu archivo. El sistema mostrará cuántos colaboradores se cargaron.
 4. Haz clic en **"⬇ Descargar"** en la sección de lote.
 5. El sistema procesará cada colaborador: obtendrá las fotos, generará los carnets y empaquetará todo.
 6. Se descargará un archivo **`Lote_Carnets_GLM.zip`**.
 7. Dentro del ZIP, cada colaborador tiene una carpeta con:
   - `Frente.png`
   - `Reverso.png`
 ### Clientes disponibles
 La columna `cliente/proyecto` debe coincidir con uno de estos (no importa mayúsculas/minúsculas):
 - Generico (por defecto)
 - Claro
 - Colgate
 - KitchenAid
 - Kraft
 - Motorola
 - Nestle
 - P&G
 - Philip Morris
 - Whirlpool
 ### Formato de URLs de foto
 Si usas Google Drive como `foto_url`, puedes pegar el enlace de compartir normal (ej. `https://drive.google.com/file/d/.../view`). El sistema lo convertirá automáticamente para poderlo descargar.
 ---
 ## Paso a paso — Verificación QR
 Cualquier persona con un teléfono puede verificar un carnet:
 1. Escanea el código QR que aparece en el **Reverso** del carnet.
 2. Se abrirá una página web con los datos del colaborador:
   - **Nombre**
   - **Puesto**
   - **País**
   - **Estado** (Activo = verde / No Activo = rojo)
 3. Si el colaborador está **Activo** en BambooHR, la página se muestra en verde.
 4. Si el colaborador está **Inactivo o Terminado**, la página se muestra en rojo con la leyenda "Empleado No Activo".
 > Esta verificación es en tiempo real contra BambooHR — no requiere que RRHH haga ningún paso adicional.
 ---
 ## Consejos útiles
 - Los archivos PNG se generan a **650 x 1004 px** (equivalente a 300 dpi en CR80), listos para impresión.
 - El ID del empleado se limpia automáticamente de guiones y espacios.
 - Durante el procesamiento por lote, las fotos se guardan automáticamente en Supabase y se asocian al colaborador.
 - Si una foto falla (Drive con permisos restringidos, URL caída), el carnet se genera igual con el círculo de foto vacío. El resto de colaboradores no se ven afectados.
 ---
 ## Solución de problemas
 | Problema | Causa probable | Solución |
 |---|---|---|
 | No puedo iniciar sesión | La cuenta no es @gomezleemarketing.com | Usa tu correo corporativo de GLM |
 | La foto no se procesa | La IA no responde | La foto original se usará igual — el carnet se genera sin edición IA |
 | El QR no se genera | El ID del empleado tiene menos de 3 caracteres | Ingresa un ID de al menos 3 dígitos |
 | Error al leer el Excel | El archivo no tiene las columnas correctas | Revisa que tenga: nombre, puesto, cliente/proyecto, cedula |
 | El ZIP no se descarga | Demasiados colaboradores o fotos muy pesadas | Reduce el lote a máximo 50 colaboradores por archivo |
 | La descarga no inicia | El navegador bloqueó las descargas múltiples | Permite descargas en la configuración del navegador |
@@ -0,0 +1,326 @@
 # GLM ID Card Generator
 > Herramienta web que permite al equipo de RRHH generar carnets corporativos GLM listos para imprimir en formato CR80 o enviar digitalmente, con verificacion de autenticidad via QR conectado a BambooHR en tiempo real.
 ---
 ## Informacion General
 | Campo | Detalle |
 |---|---|
 | Proyecto | GLM ID Card Generator |
 | Area | RRHH — 14 paises |
 | Estado | En Progreso |
 | Developer Principal | Eidan Then |
 | IT Manager | Luis Matos |
 | Fecha de Inicio | 2026-06-16 |
 | Fecha de Cierre Estimada | 2026-07-28 |
 | Ciclo Shape Up | Ciclo 2 — Semana 1 de 6 |
 | Board de Ejecucion | https://pmit.digitalcompass.agency/boards/v8iyihdd7u2v |
 | PRD del Proyecto | https://docs.google.com/document/d/1SZMEcx5BZGf6CtDk5ZEb08Nx1xMBeyVd9zoqMDFhHgI/edit?usp=sharing |
 ---
 ## Objetivo
 ### Problema que resuelve
 Hoy RRHH depende del area de diseno para generar cada carnet corporativo, lo que toma entre 1 y 3 dias habiles por colaborador. No existe estandar centralizado entre paises ni mecanismo para verificar la autenticidad o el estado activo de un carnet en campo.
 ### Solucion implementada
 Un archivo HTML que RRHH abre en cualquier navegador. El operador selecciona el cliente de un desplegable precargado, ingresa los datos del colaborador, sube su foto y descarga dos PNG — frente y reverso — listos para imprimir en CR80 o enviar por WhatsApp. El reverso incluye un QR unico que al escanearse consulta BambooHR en tiempo real y devuelve el estado del colaborador. Para produccion masiva, el operador sube un CSV y el sistema genera todos los carnets en lote dentro de un ZIP.
 ### Usuarios y beneficiarios
 - Operador: Equipo de RRHH en los 14 paises de GLM
 - Verificador: Supervisores, clientes y auditores que escanean el QR en campo
 - Beneficiario: Colaboradores que reciben su carnet impreso o digital
 ---
 ## Arquitectura
 ### Diagrama de flujo
 ```
 MODO INDIVIDUAL
 [RRHH abre glm_id_card.html] → [Selecciona cliente / sube logo] → [Ingresa datos + foto]
 → [Sistema genera QR unico con URL de verificacion] → [Vista previa en tiempo real]
 → [Descarga Frente PNG + Reverso PNG con QR]
 MODO BATCH
 [RRHH sube CSV] → [Sistema lee cada fila] → [Genera carnet completo por colaborador]
 → [Descarga ZIP con todos los PNG]
 VERIFICACION QR
 [Escaneo del QR en campo] → [verify.gomezlee.com/carnet/{ID}]
 → [Endpoint Cloud Run consulta BambooHR API]
 → [Devuelve pagina: Nombre, Puesto, Cliente, Estado (Activo / Inactivo / Terminado)]
 ```
 ### Stack tecnologico
 | Componente | Tecnologia | Proposito |
 |---|---|---|
 | Frontend / Generador | HTML5 + CSS3 + JavaScript | Interfaz interactiva del generador — sin frameworks externos |
 | Exportacion PNG | html2canvas (libreria JS) | Convierte el DOM del carnet a PNG de alta resolucion para impresion CR80 |
 | Generacion de QR | QRCode.js (libreria JS) | Genera el QR unico por colaborador con la URL del endpoint de verificacion |
 | Procesamiento batch | JavaScript + FileReader API | Lee el CSV y genera carnets en lote sin intervencion manual por fila |
 | Endpoint de verificacion | Python + Google Cloud Run | Recibe el ID del QR, consulta BambooHR y devuelve pagina de estado del colaborador |
 | Integracion BambooHR | BambooHR API REST | Fuente de verdad para nombre, puesto, pais, cliente y estado del colaborador |
 | Version control | Gitea | Repositorio del generador y del endpoint |
 ### Integraciones externas
 | Sistema | Tipo de integracion | Datos que fluyen |
 |---|---|---|
 | BambooHR | API REST | Nombre, puesto, pais, cliente asignado, estado del empleado (activo / inactivo / terminado) |
 | Google Cloud Run | Endpoint HTTP publico | Recibe ID del colaborador desde el QR y devuelve pagina de verificacion |
 | CSV local | Archivo de entrada | Nombre, puesto, pais, cliente, id_colaborador, ruta_foto (opcional) |
 ---
 ## Configuracion y Setup
 ### Prerequisitos
 - [ ] Acceso a BambooHR API (API Key del subdominio GLM)
 - [ ] Proyecto configurado en Google Cloud con Cloud Run habilitado
 - [ ] Variable de entorno `BAMBOOHR_API_KEY` configurada en Cloud Run
 - [ ] Variable de entorno `BAMBOOHR_SUBDOMAIN` configurada en Cloud Run
 - [ ] Dominio `verify.gomezlee.com` apuntando al servicio de Cloud Run
 - [ ] Lista de clientes precargados definida y aprobada por RRHH (nombre + logo PNG)
 ### Variables de entorno
 | Variable | Descripcion | Donde se obtiene |
 |---|---|---|
 | `BAMBOOHR_API_KEY` | API Key de BambooHR | BambooHR → Admin → API Keys |
 | `BAMBOOHR_SUBDOMAIN` | Subdominio de la cuenta GLM en BambooHR | URL de BambooHR: {subdominio}.bamboohr.com |
 | `VERIFY_BASE_URL` | URL base del endpoint de verificacion | Ej: https://verify.gomezlee.com |
 > Las credenciales nunca se commitean al repo. Todas las keys van en el vault de credenciales GLM o en los secrets de Google Cloud Run.
 ### Instalacion — Endpoint de verificacion
 ```bash
 # Clonar el repo
 git clone https://gitea.glm.com/glm-it/glm-id-card-generator
 # Instalar dependencias del endpoint
 cd endpoint/
 pip install -r requirements.txt --break-system-packages
 # Configurar variables de entorno locales para pruebas
 cp .env.example .env
 # Editar .env con las credenciales reales
 # Correr el endpoint en local
 python main.py
 # Deploy a Google Cloud Run
 gcloud run deploy glm-id-card-verify \
  --source . \
  --region us-central1 \
  --allow-unauthenticated
 ```
 ### Distribucion del generador HTML
 El archivo `glm_id_card.html` se distribuye directamente a RRHH via email o carpeta compartida. No requiere instalacion. El operador lo abre en Chrome o Edge.
 ---
 ## Como funciona
 ### Flujo paso a paso — Modo individual
 1. El operador abre `glm_id_card.html` en Chrome o Edge
 2. Selecciona el cliente del desplegable precargado (o sube un logo nuevo)
 3. Ingresa nombre completo, puesto, pais e ID del colaborador
 4. Sube la foto del colaborador — aparece recortada en circulo en el frente
 5. El sistema genera automaticamente el QR con la URL `verify.gomezlee.com/carnet/{ID}`
 6. El operador visualiza la vista previa en tiempo real del frente y el reverso
 7. Descarga el Frente PNG y el Reverso PNG por separado
 8. Envia los PNG al colaborador o los imprime en formato CR80
 ### Flujo paso a paso — Modo batch
 1. El operador prepara el CSV segun el formato requerido (ver seccion Formato CSV)
 2. Sube el CSV al generador
 3. El sistema procesa cada fila, genera el carnet completo y produce un ZIP
 4. El ZIP contiene los archivos nombrados como `{nombre_colaborador}_frente.png` y `{nombre_colaborador}_reverso.png`
 ### Flujo de verificacion QR
 1. Supervisor o cliente escanea el QR del reverso del carnet con cualquier telefono
 2. El QR abre `verify.gomezlee.com/carnet/{ID_COLABORADOR}` en el navegador del telefono
 3. El endpoint consulta BambooHR con el ID del colaborador
 4. Se devuelve una pagina web con: nombre, puesto, cliente, pais y estado del colaborador
 5. Si el colaborador esta activo: pagina verde con sus datos completos
 6. Si el colaborador esta inactivo o terminado: pagina roja con mensaje "Carnet no vigente"
 ### Formato CSV para batch
 | Columna | Requerida | Descripcion |
 |---|---|---|
 | `nombre_completo` | Si | Nombre completo del colaborador |
 | `puesto` | Si | Puesto o cargo |
 | `pais` | Si | Pais de operacion |
 | `cliente` | Si | Nombre del cliente (debe coincidir exactamente con la lista precargada) |
 | `id_colaborador` | Si | ID del colaborador en BambooHR |
 | `ruta_foto` | No | URL publica de la foto. Si se omite, el circulo de foto queda vacio |
 ### Schedules y triggers
 | Trigger | Descripcion |
 |---|---|
 | Manual — abre el HTML | El operador genera carnets cuando RRHH lo necesita |
 | Escaneo del QR | El endpoint se dispara on-demand cada vez que alguien escanea un carnet en campo |
 ---
 ## Testing
 ### Como probar el sistema
 ```bash
 # Test unitario del endpoint
 cd endpoint/
 python -m pytest tests/
 # Test de integracion — verificacion real contra BambooHR
 python tests/test_bamboohr_integration.py
 # Test manual del generador HTML
 # 1. Abrir glm_id_card.html en Chrome
 # 2. Llenar todos los campos con datos de prueba
 # 3. Exportar PNG y verificar dimensiones: 1012 x 638 px a 96 dpi display (equivalente a 300 dpi en CR80)
 # 4. Imprimir en hoja CR80 y verificar calidad
 # 5. Escanear el QR generado y confirmar que abre el endpoint correctamente
 ```
 ### Casos de prueba minimos
 | Caso | Input | Output esperado | Estado |
 |---|---|---|---|
 | Carnet individual completo | Todos los campos + foto + cliente seleccionado | PNG frente y reverso descargados correctamente | Pendiente |
 | Carnet sin foto | Todos los campos sin foto | PNG generado con circulo vacio en frente | Pendiente |
 | Batch CSV valido | CSV con 20 colaboradores | ZIP con 40 PNG (frente + reverso por colaborador) en menos de 2 minutos | Pendiente |
 | QR colaborador activo | ID valido en BambooHR, estado activo | Pagina verde con datos completos del colaborador | Pendiente |
 | QR colaborador inactivo | ID valido en BambooHR, estado inactivo | Pagina roja con mensaje "Carnet no vigente" | Pendiente |
 | QR ID inexistente | ID que no existe en BambooHR | Mensaje de error claro, sin crash del endpoint | Pendiente |
 | Cliente nuevo con logo manual | Logo subido manualmente sin seleccionar del desplegable | Logo aparece correctamente en el reverso del PNG | Pendiente |
 | BambooHR API caida | Timeout del endpoint al consultar BambooHR | Mensaje de error legible, endpoint no crashea | Pendiente |
 ---
 ## Errores conocidos y troubleshooting
 | Error | Causa probable | Solucion |
 |---|---|---|
 | QR no abre la pagina de verificacion | Dominio verify.gomezlee.com no apunta a Cloud Run | Verificar DNS y configuracion del servicio en Google Cloud Run |
 | PNG exportado se ve diferente al preview | html2canvas no soporta alguna propiedad CSS usada | Revisar consola del navegador, simplificar el estilo CSS del elemento afectado |
 | Endpoint devuelve 401 | API Key de BambooHR vencida o incorrecta | Renovar la API Key en BambooHR y actualizar el secret en Google Cloud Run |
 | Batch no genera todos los carnets | Fila del CSV con campo obligatorio vacio | Revisar el CSV — todas las columnas requeridas deben tener valor en cada fila |
 | Logo del cliente no aparece en el PNG | Logo en formato no soportado o con CORS bloqueado | Usar PNG con fondo transparente, minimo 300px de ancho, hosteado en el mismo dominio o con CORS abierto |
 | Endpoint lento al responder | BambooHR API con latencia alta | El endpoint tiene cache de 5 minutos por ID — si es la primera consulta puede tardar hasta 3 segundos |
 ---
 ## Monitoreo
 - **Google Cloud Run Logs:** Revisar logs del servicio `glm-id-card-verify` en Google Cloud Console para errores del endpoint
 - **BambooHR API:** Si el endpoint falla consistentemente, verificar el estado de la API de BambooHR y los limites de rate limit
 - **Output esperado:** El endpoint debe responder en menos de 3 segundos. Si supera ese tiempo de forma sistematica, revisar la implementacion del cache.
 ---
 ## Estructura del repositorio
 ```
 /glm-id-card-generator
 ├── README.md                        <- Este archivo
 ├── glm_id_card.html                 <- Generador de carnets (distribuir a RRHH)
 ├── /assets
 │   ├── /logos-clientes              <- Logos PNG de clientes precargados (aprobados por RRHH)
 │   └── glm-logo.png                 <- Logo GLM para el generador
 ├── /endpoint
 │   ├── main.py                      <- Punto de entrada del servicio de verificacion
 │   ├── requirements.txt             <- Dependencias Python del endpoint
 │   ├── .env.example                 <- Variables de entorno de ejemplo (sin valores reales)
 │   ├── Dockerfile                   <- Para deploy en Google Cloud Run
 │   └── /tests
 │       ├── test_endpoint.py         <- Tests unitarios del endpoint
 │       └── test_bamboohr_integration.py <- Tests de integracion con BambooHR API
 ├── /batch
 │   └── ejemplo_colaboradores.csv    <- CSV de ejemplo con el formato requerido para batch
 ├── /docs
 │   ├── guia-uso-rrhh.pdf            <- Guia de uso para operadores de RRHH
 │   └── architecture.png             <- Diagrama de arquitectura del sistema
 ├── CHANGELOG.md                     <- Historial de cambios
 └── DECISIONS.md                     <- Log de decisiones tecnicas
 ```
 ---
 ## CHANGELOG
 ```
 [2026-07-28] v1.0 — Launch inicial en produccion
 ```
 ---
 ## DECISIONS LOG
 ### DEC-001 — Generador como HTML local vs. app web hosteada
 - Fecha: 2026-06-16
 - Contexto: Se evaluo si el generador debia ser una app web hosteada en Google Cloud o un archivo HTML distribuido localmente a RRHH.
 - Opciones consideradas: App web hosteada (requiere autenticacion, servidor, mantenimiento) vs. HTML local (distribucion simple, sin dependencias de red para generar el carnet).
 - Decision: HTML local distribuido a RRHH en Fase 1.
 - Razon: El equipo de RRHH opera en 14 paises con distintos niveles de conectividad. El HTML local garantiza que el generador funciona sin internet. Solo el endpoint de verificacion QR requiere conexion.
 ### DEC-002 — Verificacion QR via BambooHR en tiempo real vs. base de datos propia
 - Fecha: 2026-06-16
 - Contexto: Se evaluo mantener una base de datos propia en Supabase con el estado de cada carnet vs. consultar BambooHR directamente al momento del escaneo.
 - Opciones consideradas: Base de datos propia (requiere sincronizacion manual o automatica con BambooHR) vs. BambooHR como fuente de verdad (estado siempre actualizado, sin base de datos adicional).
 - Decision: BambooHR como fuente de verdad con consulta en tiempo real.
 - Razon: Elimina el riesgo de datos desincronizados. Cuando RRHH da de baja a un colaborador en BambooHR, el QR lo refleja de inmediato sin ningun paso adicional.
 ---
 ## Contactos del proyecto
 | Rol | Nombre | Contacto |
 |---|---|---|
 | Product Owner | Maximo Gomez | [email/WhatsApp] |
 | IT Manager | Luis Matos | [email/WhatsApp] |
 | Developer Principal | Eidan Then | [email/WhatsApp] |
 ---
 ## Definition of Done
 Checklist antes de mover a Completado en Kan.bn:
 - [ ] Todos los criterios de exito cumplidos y verificados
 - [ ] PNG exportado validado fisicamente en impresion CR80
 - [ ] Modo batch probado con CSV de al menos 20 colaboradores
 - [ ] QR escaneado y verificacion confirmada contra BambooHR en ambiente real
 - [ ] Endpoint de verificacion desplegado en Google Cloud Run y accesible publicamente
 - [ ] Generador probado en Chrome y Edge en al menos 2 paises
 - [ ] Lista de clientes precargados cargada y validada con RRHH
 - [ ] Codigo commiteado y pusheado a Gitea
 - [ ] README completo y actualizado
 - [ ] Variables de entorno documentadas en `.env.example`
 - [ ] Prueba de usuario real con al menos un miembro del equipo RRHH
 - [ ] Luis Matos valido el output tecnico
 - [ ] Maximo aprobo el resultado final
 ---
 _Documento mantenido por el equipo GLM IT · Ultima actualizacion: 2026-06-05_
@@ -0,0 +1,14 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>glm-card-generator</title>
    <script type="module" crossorigin src="/empleado-id/assets/index-Ef45i7N1.js"></script>
    <link rel="stylesheet" crossorigin href="/empleado-id/assets/index-OsvWWXE6.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
 </html>
@@ -0,0 +1,21 @@
 import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
 import { defineConfig, globalIgnores } from 'eslint/config'
 export default defineConfig([
  globalIgnores(['dist']),
  {
    files: ['**/*.{js,jsx}'],
    extends: [
      js.configs.recommended,
      reactHooks.configs.flat.recommended,
      reactRefresh.configs.vite,
    ],
    languageOptions: {
      globals: globals.browser,
      parserOptions: { ecmaFeatures: { jsx: true } },
    },
  },
 ])
@@ -0,0 +1,13 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>glm-card-generator</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
 </html>
@@ -0,0 +1,33 @@
 {
  "name": "glm-card-generator",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@supabase/supabase-js": "^2.108.2",
    "file-saver": "^2.0.5",
    "jszip": "^3.10.1",
    "lucide-react": "^1.23.0",
    "react": "^19.2.7",
    "react-dom": "^19.2.7",
    "react-router-dom": "^7.18.1",
    "xlsx": "^0.18.5"
  },
  "devDependencies": {
    "@eslint/js": "^10.0.1",
    "@types/react": "^19.2.17",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^6.0.2",
    "eslint": "^10.5.0",
    "eslint-plugin-react-hooks": "^7.1.1",
    "eslint-plugin-react-refresh": "^0.5.3",
    "globals": "^17.6.0",
    "vite": "^8.1.0"
  }
 }
@@ -0,0 +1,175 @@
 import { BrowserRouter, Routes, Route, Navigate, useLocation } from "react-router-dom";
 import { supabase } from "./services/supabase";
 import { useEffect, useState, createContext, useContext } from "react";
 import Login from "./components/Login";
 import EmployeeCard from "./components/EmployeeCard";
 import IdCardGenerator from "./Generator";
 import "./components/Login.css";
 const AuthContext = createContext(null);
 export const useAuth = () => useContext(AuthContext);
 const ALLOWED_DOMAIN = "@gomezleemarketing.com";
 const GLM_LOGO = "https://dbit.digitalcompass.agency/storage/v1/object/public/public-assets/GLM_completo.png";
 function AuthProvider({ children }) {
  const [user, setUser] = useState(null);
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    if (!supabase) {
      setLoading(false);
      return;
    }
    supabase.auth.getSession().then(({ data: { session } }) => {
      setUser(session?.user ?? null);
      setLoading(false);
    });
    const { data: { subscription } } = supabase.auth.onAuthStateChange((_event, session) => {
      setUser(session?.user ?? null);
      setLoading(false);
    });
    return () => subscription.unsubscribe();
  }, []);
  const signOut = async () => {
    if (supabase) await supabase.auth.signOut();
  };
  if (loading) {
    return (
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: '#EEF6E8',
        fontFamily: 'Arial, sans-serif'
      }}>
        <div style={{
          width: 40, height: 40, border: '3px solid #D0D0D0',
          borderTopColor: '#6CC24A', borderRadius: '50%',
          animation: 'spin 0.8s linear infinite'
        }} />
      </div>
    );
  }
  return (
    <AuthContext.Provider value={{ user, signOut, loading }}>
      {children}
    </AuthContext.Provider>
  );
 }
 function ProtectedRoute({ children }) {
  const { user, signOut, loading } = useAuth();
  const location = useLocation();
  if (loading) return null;
  if (!user) {
    return <Navigate to="/empleado-id/login" state={{ from: location }} replace />;
  }
  if (!user.email?.endsWith(ALLOWED_DOMAIN)) {
    signOut();
    return (
      <div style={{
        minHeight: '100vh',
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center',
        background: '#EEF6E8',
        fontFamily: 'Arial, sans-serif',
        padding: '20px',
        textAlign: 'center'
      }}>
        <img src={GLM_LOGO} alt="GLM" style={{ maxWidth: 220, marginBottom: 24 }} />
        <h1 style={{ color: '#4F758B', fontSize: 24, fontWeight: 700, marginBottom: 16 }}>
          Acceso no autorizado
        </h1>
        <p style={{ color: '#6B8FA3', fontSize: 16, marginBottom: 24, maxWidth: 400 }}>
          Solo se permite acceso con cuentas corporativas <strong>@gomezleemarketing.com</strong>.
          Tu cuenta <strong>{user.email}</strong> no tiene permisos.
        </p>
        <button
          onClick={signOut}
          style={{
            padding: '14px 32px',
            fontSize: 15,
            fontWeight: 600,
            fontFamily: 'Arial',
            color: '#fff',
            background: '#4F758B',
            border: 'none',
            borderRadius: 10,
            cursor: 'pointer'
          }}
        >
          Cerrar sesión y volver a intentar
        </button>
      </div>
    );
  }
  return children;
 }
 function PublicRoute({ children }) {
  const { user, loading } = useAuth();
  const location = useLocation();
  if (loading) return null;
  if (user?.email?.endsWith(ALLOWED_DOMAIN)) {
    const from = location.state?.from?.pathname || '/empleado-id/';
    return <Navigate to={from} replace />;
  }
  return children;
 }
 export default function App() {
  return (
    <AuthProvider>
      <BrowserRouter>
        <Routes>
          <Route
            path="/empleado-id/login"
            element={
              <PublicRoute>
                <Login />
              </PublicRoute>
            }
          />
          <Route
            path="/empleado-id/"
            element={
              <ProtectedRoute>
                <IdCardGenerator />
              </ProtectedRoute>
            }
          />
          <Route
            path="/empleado-id/:employeeNumber"
            element={
              <ProtectedRoute>
                <EmployeeCard />
              </ProtectedRoute>
            }
          />
          <Route path="*" element={<Navigate to="/empleado-id/" replace />} />
        </Routes>
      </BrowserRouter>
    </AuthProvider>
  );
 }
@@ -0,0 +1,360 @@
 * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
 }
 body {
  background: #f0f2f5;
  font-family: Arial, Helvetica, sans-serif;
  min-height: 100vh;
  padding: 28px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
 }
 /* ── PAGE TITLE ── */
 .page-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
 }
 .page-title h1 {
  font-size: 13px;
  font-weight: 700;
  color: #4F758B;
  letter-spacing: 3px;
  text-transform: uppercase;
 }
 .page-title p {
  font-size: 10px;
  color: #6B8FA3;
  letter-spacing: 1px;
 }
 /* ── MAIN CONTENT CONTAINER ── */
 .main-container {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  flex-direction: row;
  margin-top: 30px
 }
 /* ── CONTROLS PANEL ── */
 .panel {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  padding: 20px;
  width: 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  order: 1;
 }
 /* ── CARD STAGE (Vertical Grid) ── */
 .stage {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  flex-wrap: wrap;
  justify-content: center;
  order: 2;
 }
@media(min-width: 768px) {
  .stage {
    flex-direction: row;
  }
 }
 .panel-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
 }
 .panel-section-title {
  font-size: 9px;
  font-weight: 700;
  color: #4F758B;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding-bottom: 6px;
  border-bottom: 1.5px solid #EEF6E8;
 }
 .field {
  display: flex;
  flex-direction: column;
  gap: 4px;
 }
 .field label {
  font-size: 9px;
  color: #6B8FA3;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 700;
 }
 .field input,
 .field select {
  background: #FAFAFA;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  color: #2a2a2a;
  font-family: Arial;
  font-size: 12px;
  padding: 7px 10px;
  outline: none;
  transition: border-color 0.15s;
 }
 .field input:focus,
 .field select:focus {
  border-color: #6CC24A;
  background: #fff;
 }
 .field input::placeholder {
  color: #C0C0C0;
 }
 .upload-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: #F5F5F5;
  border: 1px dashed #D0D0D0;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  font-size: 11px;
  color: #6B8FA3;
 }
 .upload-btn:hover {
  border-color: #6CC24A;
  color: #6CC24A;
  background: #EEF6E8;
 }
 .divider {
  height: 1px;
  background: #F0F0F0;
 }
 .export-btn {
  width: 100%;
  padding: 11px;
  background: #4F758B;
  border: none;
  border-radius: 5px;
  color: #fff;
  font-size: 11px;
  font-family: Arial;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
 }
 .export-btn:hover {
  background: #3d5d6e;
 }
 .export-btn.blue {
  background: #4F758B;
 }
 .export-btn.blue:hover {
  background: #385566;
 }
 .export-btn:disabled {
  background: #A0B2BC;
  cursor: not-allowed;
 }
 .hint-text {
  font-size: 9px;
  color: #B0B0B0;
  line-height: 1.6;
  text-align: center;
 }
 .preview-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #EEF6E8;
  border-radius: 4px;
  padding: 5px 10px;
 }
 .preview-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6CC24A;
 }
 .preview-badge span {
  font-size: 9px;
  color: #4F758B;
  font-weight: 700;
  letter-spacing: 1px;
 }
 /* CR80 Vertical Canvas Visual Container Setup */
 .card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
 }
 .card-label {
  font-size: 9px;
  color: #6B8FA3;
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 700;
 }
 /* Dimensiones Proporcionales CR80 Verticales */
 .card {
  position: relative;
  width: 240px;
  height: 380px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
 }
 /* ── FRONT DYNAMIC OVERLAYS ── */
 .front-photo-frame {
  position: absolute;
  top: 98.5px;
  left: 49.9%;
  transform: translateX(-50%);
  width: 145.5px;
  height: 145.5px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
 }
 .front-photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
 }
 .front-photo-frame .placeholder-svg {
  width: 40px;
  height: 40px;
  opacity: 0.3;
  color: #4F758B;
 }
 .front-dynamic-name {
  position: absolute;
  top: 266px;
  left: 10px;
  right: 10px;
  font-size: 14px;
  font-weight: 900;
  color: #FFFFFF;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  word-break: break-word;
  z-index: 5;
 }
 .front-dynamic-role {
  position: absolute;
  bottom: 12px;
  right: 5px;
  font-size: 10px;
  font-weight: 700;
  color: #6B8499;
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 1px;
  max-width: 200px;
  word-break: break-word;
  z-index: 5;
 }
 /* ── BACK DYNAMIC OVERLAYS ── */
 .back-qr-zone {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: #ffffff;
  padding: 4px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
 }
 .back-qr-zone canvas {
  display: block;
  width: 40px;
  height: 40px;
 }
 .lang-container {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
 }
 .lang-btn {
  flex: 1;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: bold;
  border: 2px solid #e1e9ee;
  background: #ffffff;
  color: #4F758B;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
 }
 .lang-btn.active {
  background: #4F758B;
  color: #ffffff;
  border-color: #4F758B;
 }
@@ -0,0 +1,555 @@
 import { useState, useRef, useEffect } from 'react';
 import './Generator.css';
 import { renderQRCode, downloadIDCards, downloadBulkIDCards, getXLSXLib, clientTemplates } from './script/script.jsx';
 import { uploadEmployeePhoto, saveClienteProyecto } from './services/storage.js';
 import { supabase } from "./services/supabase";
 // Convierte datos binarios recibidos (base64, buffer, array de bytes) en un Blob URL local de forma robusta
 const convertBinaryToBlobUrl = (data) => {
    if (!data) return null;
    try {
        if (typeof data === 'object' && data.type === 'Buffer' && Array.isArray(data.data)) {
            const byteArray = new Uint8Array(data.data);
            const blob = new Blob([byteArray], { type: 'image/jpeg' });
            return URL.createObjectURL(blob);
        }
        if (Array.isArray(data)) {
            const byteArray = new Uint8Array(data);
            const blob = new Blob([byteArray], { type: 'image/jpeg' });
            return URL.createObjectURL(blob);
        }
        if (typeof data === 'string') {
            const cleanBase64 = data.replace(/^data:image\/\w+;base64,/, "");
            const byteCharacters = atob(cleanBase64);
            const byteNumbers = new Array(byteCharacters.length);
            for (let i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            const byteArray = new Uint8Array(byteNumbers);
            const blob = new Blob([byteArray], { type: 'image/jpeg' });
            return URL.createObjectURL(blob);
        }
    } catch (e) {
        // ignore
    }
    return null;
 };
 export default function IdCardGenerator() {
    // --- Estados formulario individual ───
    const [name, setName] = useState('');
    const [role, setRole] = useState('');
    const [language, setLanguage] = useState('Esp');
    const [selectedClient, setSelectedClient] = useState('Generico');
    const [employeeId, setEmployeeId] = useState('');
    const [photoSrc, setPhotoSrc] = useState('');
    const [photoFile, setPhotoFile] = useState(null);
    const [photoProcessing, setPhotoProcessing] = useState(false);
    const [downloadStatus, setDownloadStatus] = useState({ processing: false, text: '⬇ Descargar' });
    // Bloquea el botón Descargar hasta que nombre, puesto e ID estén llenos
    const isFormComplete = name.trim() && role.trim() && employeeId.trim();
    // --- Estados Lote / Excel Masivo ───
    const [bulkEmployees, setBulkEmployees] = useState([]);
    const [bulkStatusText, setBulkStatusText] = useState('');
    const [bulkDownloadStatus, setBulkDownloadStatus] = useState({ processing: false, text: '⬇ Descargar' });
    const [showTooltip, setShowTooltip] = useState(false);
    const fileInputRef = useRef(null);
    const excelInputRef = useRef(null);
    const qrCanvasRef = useRef(null);
    const baseUrl = import.meta.env.BASE_URL.endsWith('/')
        ? import.meta.env.BASE_URL
        : `${import.meta.env.BASE_URL}/`;
    useEffect(() => {
        if (qrCanvasRef.current) {
            renderQRCode(employeeId, qrCanvasRef.current);
        }
    }, [employeeId]);
    const handlePhotoUpload = async (e) => {
        const file = e.target.files[0];
        if (!file) return;
        setPhotoFile(file);
        setPhotoSrc(URL.createObjectURL(file));
        setPhotoProcessing(true);
        try {
            const editedBlob = await processPhotoWithAI(file);
            const editedUrl = URL.createObjectURL(editedBlob);
            setPhotoSrc(editedUrl);
            setPhotoFile(new File([editedBlob], file.name, { type: editedBlob.type || 'image/jpeg' }));
        } catch (error) {
            alert('No se pudo procesar la foto con IA. Se usará la foto original para la vista previa.');
        } finally {
            setPhotoProcessing(false);
        }
    };
    const processPhotoWithAI = async (file) => {
        const N8N_WEBHOOK_URL = import.meta.env.VITE_N8N_WEBHOOK_URL;
        const TOKEN_SECRETO = import.meta.env.VITE_WEBHOOK_TOKEN;
        const formData = new FormData();
        formData.append('edited', file, file.name);
        formData.append('name', name);
        formData.append('role', role);
        formData.append('employeeId', employeeId);
        formData.append('fechaProcesado', new Date().toISOString());
        const response = await fetch(N8N_WEBHOOK_URL, {
            method: 'POST',
            headers: {
                'Authorization': TOKEN_SECRETO
            },
            body: formData
        });
        if (!response.ok) {
            throw new Error(`El servidor de n8n rechazó la petición (Código: ${response.status})`);
        }
        const contentType = response.headers.get('content-type') || '';
        if (contentType.includes('application/json')) {
            const data = await response.json();
            const bin = data.edited || data.data || data.foto_processed_base64 || data.photo || data.binary || (Array.isArray(data) && (data[0]?.edited || data[0]?.data));
            const blobUrl = convertBinaryToBlobUrl(bin);
            if (!blobUrl) throw new Error('n8n no devolvió un binario válido.');
            const blob = await (await fetch(blobUrl)).blob();
            return blob;
        }
        const blob = await response.blob();
        if (!blob || blob.size === 0) throw new Error('n8n devolvió un binario vacío.');
        return blob;
    };
    const handleEmployeeIdChange = (e) => {
        const rawValue = e.target.value;
        const cleanValue = rawValue.replace(/[-\s]/g, '');
        setEmployeeId(cleanValue);
    };
    const enviarDatosAn8n = async (datosEmpleados) => {
        const N8N_WEBHOOK_URL = import.meta.env.VITE_N8N_WEBHOOK_URL;
        const TOKEN_SECRETO = import.meta.env.VITE_WEBHOOK_TOKEN;
        try {
            const response = await fetch(N8N_WEBHOOK_URL, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': TOKEN_SECRETO
                },
                body: JSON.stringify({
                    empleados: datosEmpleados,
                    total: datosEmpleados.length,
                    fechaProcesado: new Date().toISOString()
                })
            });
            if (!response.ok) {
                throw new Error(`El servidor de n8n rechazó la petición (Código: ${response.status})`);
            }
            const resData = await response.json();
            return Array.isArray(resData) ? resData : (resData.empleados || resData.data || []);
        } catch (error) {
            throw error;
        }
    };
    const handleBulkSupabaseSync = async (cedula, blobData, currentEmployee) => {
        const cleanCedula = String(cedula).replace(/[-\s]/g, '');
        if (!cleanCedula) return;
        try {
            const clienteProyectoValue = currentEmployee?.selectedClient || 'Generico';
            // 1) Guardar cédula + cliente_proyecto en carnet_empleados_creados_glm
            await saveClienteProyecto(cleanCedula, clienteProyectoValue);
            // 2) Subir foto al storage
            const customFile = new File([blobData], `${cleanCedula}.jpg`, { type: 'image/jpeg' });
            const remoteStorageUrl = await uploadEmployeePhoto(cleanCedula, customFile);
            // 3) Guardar URL de foto
            if (remoteStorageUrl) {
                await supabase.rpc("save_employee_photo", {
                    p_employee_number: cleanCedula,
                    p_photo_url: remoteStorageUrl
                });
            }
        } catch (error) {
            // silent
        }
    };
    const handleExcelUpload = async (e) => {
        const file = e.target.files[0];
        if (!file) return;
        setBulkStatusText('Leyendo documento...');
        try {
            const XLSXLib = await getXLSXLib();
            const reader = new FileReader();
            reader.onload = async (evt) => {
                try {
                    const bstr = evt.target.result;
                    const wb = XLSXLib.read(bstr, { type: 'binary' });
                    const wsname = wb.SheetNames[0];
                    const ws = wb.Sheets[wsname];
                    const jsonRows = XLSXLib.utils.sheet_to_json(ws);
                    if (jsonRows.length === 0) {
                        setBulkStatusText('❌ El archivo está vacío.');
                        return;
                    }
                    const formatted = jsonRows.map((row) => {
                        let rawLang = String(row.lenguaje || 'Esp').trim().toLowerCase();
                        if (rawLang.includes('es') || rawLang.includes('esp')) {
                            rawLang = 'Esp';
                        } else if (rawLang.includes('en') || rawLang.includes('ing')) {
                            rawLang = 'Ing';
                        } else {
                            rawLang = 'Esp';
                        }
                        let rawClient = String(row['cliente/proyecto'] || 'Generico')
                            .trim()
                            .normalize("NFD")
                            .replace(/[\u0300-\u036f]/g, "");
                        const lowerClient = rawClient.toLowerCase();
                        if (lowerClient.includes('nestle')) rawClient = 'Nestle';
                        else if (lowerClient.includes('claro')) rawClient = 'Claro';
                        else if (lowerClient.includes('colgate')) rawClient = 'Colgate';
                        else if (lowerClient.includes('kitchenaid') || lowerClient.includes('kitchen')) rawClient = 'KitchenAid';
                        else if (lowerClient.includes('kraft')) rawClient = 'Kraft';
                        else if (lowerClient.includes('motorola')) rawClient = 'Motorola';
                        else if (lowerClient.includes('p&g') || lowerClient.includes('p y g')) rawClient = 'P&G';
                        else if (lowerClient.includes('philip') || lowerClient.includes('morris')) rawClient = 'Philip Morris';
                        else if (lowerClient.includes('whirlpool')) rawClient = 'Whirlpool';
                        else rawClient = 'Generico';
                        const cleanedCedula = String(row.cedula || '').replace(/[-\s]/g, '');
                        return {
                            name: String(row.nombre || '').trim(),
                            role: String(row.puesto || '').trim(),
                            selectedClient: rawClient,
                            language: rawLang,
                            employeeId: cleanedCedula,
                            fotoUrl: String(row.foto_url || '').trim()
                        };
                    }).filter(emp => emp.name && emp.role && emp.employeeId);
                    setBulkEmployees(formatted);
                    setBulkStatusText(`✅ ¡Cargados ${formatted.length} colaboradores! Listo para procesar.`);
                    setBulkDownloadStatus({ processing: false, text: '⬇ Descargar' });
                } catch (innerErr) {
                    setBulkStatusText('❌ Error de lectura. Revisa el formato de columnas.');
                }
            };
            reader.readAsBinaryString(file);
        } catch (err) {
            setBulkStatusText('❌ Error cargando el motor XLSX.');
        }
    };
    const triggerBulkDownload = async () => {
        if (bulkEmployees.length === 0) return;
        setBulkDownloadStatus({ processing: true, text: '🔄 Descargando...' });
        setBulkStatusText('Descargando retratos...');
        try {
            const resultadosN8n = await enviarDatosAn8n(bulkEmployees);
            setBulkStatusText('Generando frentes, reversos y empaquetando en carpetas locales...');
            const employeesReadyForRender = bulkEmployees.map((originalEmp, index) => {
                const n8nEmp = resultadosN8n[index] || resultadosN8n.find(e => e.employeeId === originalEmp.employeeId) || {};
                const base64Source = n8nEmp.data || n8nEmp.foto_processed_base64 || originalEmp.data;
                let finalPhotoUrl = convertBinaryToBlobUrl(base64Source) || originalEmp.fotoUrl;
                const validClient = n8nEmp.selectedClient || originalEmp.selectedClient || 'Generico';
                const validLang = n8nEmp.language || originalEmp.language || 'Esp';
                return {
                    name: n8nEmp.name || originalEmp.name,
                    role: n8nEmp.role || originalEmp.role,
                    selectedClient: validClient,
                    language: validLang,
                    employeeId: n8nEmp.employeeId || originalEmp.employeeId,
                    fotoUrl: finalPhotoUrl
                };
            });
            await downloadBulkIDCards({
                employees: employeesReadyForRender,
                baseUrl,
                onStateChange: null,
                onProcessEmployeePhoto: (cedula, blobData) => {
                    const currentEmp = employeesReadyForRender.find(emp => emp.employeeId === cedula);
                    return handleBulkSupabaseSync(cedula, blobData, currentEmp);
                }
            });
            setBulkStatusText(`✅ ¡Lote completado! ${employeesReadyForRender.length} carnets procesados.`);
            setBulkEmployees([]);
        } catch (error) {
            setBulkStatusText(`❌ Error al procesar: ${error.message || error}`);
        } finally {
            setBulkDownloadStatus({ processing: false, text: '⬇ Descargar' });
        }
    };
    const triggerDownload = async () => {
        if (!validateForm()) return;
        setDownloadStatus({ processing: true, text: '🔄 Descargando...' });
        try {
            await saveClienteProyecto(employeeId, selectedClient);
            if (photoFile) {
                const photoUrl = await uploadEmployeePhoto(employeeId, photoFile);
                await supabase.rpc("save_employee_photo", {
                    p_employee_number: employeeId,
                    p_photo_url: photoUrl
                });
            }
            await downloadIDCards({
                name, role, selectedClient, language, photoSrc,
                baseUrl,
                qrCanvas: qrCanvasRef.current,
                onStateChange: setDownloadStatus
            });
        } catch (err) {
            alert(err.message);
            setDownloadStatus({ processing: false, text: '⬇ Descargar' });
        }
    };
    const validateForm = () => {
        if (!name.trim()) { alert("Debe ingresar el nombre."); return false; }
        if (!role.trim()) { alert("Debe ingresar el puesto."); return false; }
        if (!employeeId.trim()) { alert("Debe ingresar el ID del empleado."); return false; }
        if (!photoFile) { alert("Debe subir la foto del colaborador."); return false; }
        return true;
    };
    return (
        <>
            <div className="page-title">
                <h1>GLM ID Card Generator</h1>
                <p>GomezLee Marketing · Carnet Corporativo CR80</p>
            </div>
            <div className="main-container" style={{ display: 'flex', gap: '20px', alignItems: 'flex-start' }}>
                {/* FORMULARIO MASIVO EXCEL */}
                <div className="panel" style={{ minWidth: '320px' }}>
                    <div className="preview-badge" style={{ background: '#FFF3E0', color: '#E65100' }}>
                        <div className="dot" style={{ background: '#E65100' }}></div>
                        <span>Módulo de Lotes Automáticos</span>
                    </div>
                    <div className="panel-section">
                        <div className="panel-section-title" style={{ display: 'flex', alignItems: 'center', gap: '6px', position: 'relative' }}>
                            <span>Carga Masiva de Colaboradores</span>
                            <div
                                style={{
                                    display: 'flex', alignItems: 'center', justifyContent: 'center',
                                    width: '16px', height: '16px', borderRadius: '50%',
                                    background: '#cbd5e1', color: '#334155', fontSize: '11px',
                                    fontWeight: 'bold', cursor: 'help', userSelect: 'none'
                                }}
                                onMouseEnter={() => setShowTooltip(true)}
                                onMouseLeave={() => setShowTooltip(false)}
                            >
                                ?
                            </div>
                            {showTooltip && (
                                <div style={{
                                    position: 'absolute', top: '24px', left: '0', right: '0',
                                    background: '#1e293b', color: '#ffffff', padding: '10px',
                                    borderRadius: '6px', fontSize: '11px', lineHeight: '1.4',
                                    zIndex: '99', boxShadow: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
                                    fontWeight: 'normal', textTransform: 'none'
                                }}>
                                    Formato de columnas requeridas en el Excel: <br />
                                    <b style={{ color: '#6CC24A' }}>nombre, puesto, cliente/proyecto, cedula, lenguaje, foto_url</b>.<br />
                                </div>
                            )}
                        </div>
                        <div className="upload-btn" style={{ background: '#475569', marginTop: '12px' }} onClick={() => excelInputRef.current.click()}>
                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
                                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                                <polyline points="14 2 14 8 20 8" />
                                <line x1="16" y1="13" x2="8" y2="13" />
                                <line x1="16" y1="17" x2="8" y2="17" />
                            </svg>
                            Seleccionar Archivo Excel
                        </div>
                        <input type="file" accept=".xlsx, .xls, .csv" style={{ display: 'none' }} ref={excelInputRef} onChange={handleExcelUpload} />
                        {bulkStatusText && (
                            <div style={{ fontSize: '12px', marginTop: '8px', fontWeight: '500', color: '#475569' }}>
                                {bulkStatusText}
                            </div>
                        )}
                    </div>
                    <div className="divider"></div>
                    <div className="panel-section">
                        <div className="panel-section-title">Exportar Lote</div>
                        <button
                            className="export-btn blue"
                            disabled={bulkDownloadStatus.processing || bulkEmployees.length === 0}
                            onClick={triggerBulkDownload}
                            style={{ opacity: bulkEmployees.length === 0 ? 0.6 : 1 }}
                        >
                            {bulkDownloadStatus.text}
                        </button>
                    </div>
                </div>
                {/* FORMULARIO INDIVIDUAL */}
                <div className="panel">
                    <div className="preview-badge">
                        <div className="dot"></div>
                        <span>Vista previa en tiempo real</span>
                    </div>
                    <div className="panel-section">
                        <div className="panel-section-title">Colaborador</div>
                        <div className="field">
                            <label>Nombre</label>
                            <input type="text" placeholder="Ej: Alexi Zabala" value={name} onChange={(e) => setName(e.target.value)} />
                        </div>
                        <div className="field">
                            <label>Puesto</label>
                            <input type="text" placeholder="Ej: Mercaderista" value={role} onChange={(e) => setRole(e.target.value)} />
                        </div>
                        <div className="upload-btn" onClick={() => !photoProcessing && fileInputRef.current.click()} style={{ opacity: photoProcessing ? 0.6 : 1, cursor: photoProcessing ? 'wait' : 'pointer' }}>
                            {photoProcessing ? '⏳ Procesando foto con IA...' : 'Subir foto del colaborador'}
                        </div>
                        <input type="file" accept="image/*" style={{ display: 'none' }} ref={fileInputRef} onChange={handlePhotoUpload} />
                    </div>
                    <div className="divider"></div>
                    <div className="panel-section">
                        <div className="panel-section-title">Cliente / Proyecto</div>
                        <div className="lang-container">
                            <button type="button" className={`lang-btn ${language === 'Esp' ? 'active' : ''}`} onClick={() => setLanguage('Esp')}>Español</button>
                            <button type="button" className={`lang-btn ${language === 'Ing' ? 'active' : ''}`} onClick={() => setLanguage('Ing')}>Inglés</button>
                        </div>
                        <div className="field">
                            <label>Seleccionar Cliente</label>
                            <select value={selectedClient} onChange={(e) => setSelectedClient(e.target.value)}>
                                <option value="Generico">Genérico (Por defecto)</option>
                                <option value="Claro">Claro</option>
                                <option value="Colgate">Colgate</option>
                                <option value="KitchenAid">KitchenAid</option>
                                <option value="Kraft">Kraft</option>
                                <option value="Motorola">Motorola</option>
                                <option value="Nestle">Nestle</option>
                                <option value="P&G">P&G</option>
                                <option value="Philip Morris">Philip Morris International</option>
                                <option value="Whirlpool">Whirlpool</option>
                            </select>
                        </div>
                    </div>
                    <div className="divider"></div>
                    <div className="panel-section">
                        <div className="panel-section-title">Código QR</div>
                        <div className="field">
                            <label>ID del empleado / Cédula</label>
                            <input
                                type="text"
                                placeholder="Ej: 123456789 (Sin guiones ni espacios)"
                                value={employeeId}
                                onChange={handleEmployeeIdChange}
                            />
                        </div>
                        <button className="export-btn" style={{ background: '#6CC24A', marginTop: '2px' }} onClick={() => renderQRCode(employeeId, qrCanvasRef.current)}>
                            ⟳ Generar QR
                        </button>
                    </div>
                    <div className="divider"></div>
                    <div className="panel-section">
                        <div className="panel-section-title">Exportar</div>
                        <button className="export-btn blue" disabled={downloadStatus.processing || !isFormComplete} onClick={triggerDownload} style={{ opacity: (!isFormComplete || downloadStatus.processing) ? 0.6 : 1 }}>
                            {downloadStatus.text}
                        </button>
                    </div>
                </div>
                {/* VISTA PREVIA */}
                <div className="stage">
                    <div className="card-wrap">
                        <div className="card-label">Frente</div>
                        <div className="card" id="cardFront" style={{ backgroundImage: `url('${baseUrl}images/AF GLM Frente.png')` }}>
                            <div className="front-photo-frame" style={{ position: 'relative', overflow: 'hidden' }}>
                                {photoSrc ? (
                                    <img src={photoSrc} alt="Foto Colaborador" style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }} />
                                ) : (null)}
                                {photoProcessing && (
                                    <div style={{
                                        position: 'absolute', inset: 0, display: 'flex',
                                        alignItems: 'center', justifyContent: 'center',
                                        background: 'rgba(0,0,0,0.45)', color: '#fff',
                                        fontSize: '13px', fontWeight: '600', textAlign: 'center', padding: '8px'
                                    }}>
                                        ⏳ Editando foto con IA...
                                    </div>
                                )}
                                {!photoSrc && (
                                    <svg className="placeholder-svg" viewBox="0 0 28 28" fill="none" style={{ width: '60%', height: '60%', opacity: 0.4 }}>
                                        <circle cx="14" cy="10" r="5.5" stroke="currentColor" strokeWidth="1.5" />
                                        <path d="M3 24c0-6 22-6 22 0" stroke="currentColor" strokeWidth="1.5" />
                                    </svg>
                                )}
                            </div>
                            <div className="front-dynamic-name">{name ? name.toUpperCase() : 'NOMBRE APELLIDO'}</div>
                            <div className="front-dynamic-role">{role ? role.toUpperCase() : 'PUESTO'}</div>
                        </div>
                    </div>
                    <div className="card-wrap">
                        <div className="card-label">Reverso</div>
                        <div
                            className="card"
                            id="cardBack"
                            style={{
                                backgroundImage: `url('${baseUrl}${(clientTemplates[language] || clientTemplates['Esp'])[selectedClient] || (clientTemplates[language] || clientTemplates['Esp'])['Generico']}')`
                            }}
                        >
                            <div className="back-qr-zone">
                                <canvas ref={qrCanvasRef} width={55} height={55}></canvas>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </>
    );
 }
@@ -0,0 +1,155 @@
 * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
 }
 :root {
    --azul-glm: #4F758B;
    --azul-medio: #5B7F95;
    --acero-claro: #6B8FA3;
    --verde-glm: #6CC24A;
    --verde-claro: #A4D65E;
    --verde-bg: #EEF6E8;
    --azul-seccion: #D6E8F4;
    --gris-oscuro: #4A4A4A;
    --gris-medio: #D0D0D0;
    --gris-claro: #F5F5F5;
    --blanco: #FFFFFF;
    --naranja: #FF6A13;
 }
 .login-page {
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    font-family: Arial, Helvetica, sans-serif;
 }
 .login-page.loading .login-card {
    pointer-events: none;
    opacity: 0.8;
 }
 .login-card {
    background: var(--blanco);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(79, 117, 139, 0.12);
    padding: 48px 40px;
    width: 100%;
    max-width: 400px;
    text-align: center;
    border: 1px solid var(--gris-medio);
 }
 .logo {
    width: 180px;
    height: auto;
    margin-bottom: 24px;
 }
 .title {
    font-size: 22px;
    font-weight: 700;
    color: var(--azul-glm);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
    text-transform: uppercase;
 }
 .login-divider {
    height: 2px;
    background: var(--verde-glm);
    margin: 24px 0;
    border-radius: 1px;
 }
 .btn-google {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 24px;
    background: var(--blanco);
    border: 2px solid var(--gris-medio);
    border-radius: 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--gris-oscuro);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
 }
 .btn-google:hover:not(:disabled) {
    border-color: var(--verde-glm);
    background: var(--verde-bg);
    color: var(--azul-glm);
    box-shadow: 0 4px 16px rgba(108, 194, 74, 0.2);
    transform: translateY(-1px);
 }
 .btn-google:active:not(:disabled) {
    transform: translateY(0);
 }
 .btn-google:disabled {
    opacity: 0.6;
    cursor: not-allowed;
 }
 .google-icon {
    flex-shrink: 0;
 }
 .domain-hint {
    margin-top: 14px;
    font-size: 12px;
    color: var(--acero-claro);
    font-weight: 500;
 }
 .error-message {
    margin-top: 16px;
    padding: 12px 16px;
    background: #FDECEA;
    border: 1px solid #F5C6CB;
    border-radius: 8px;
    font-size: 13px;
    color: #C0392B;
    text-align: left;
 }
 .spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--gris-medio);
    border-top-color: var(--verde-glm);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 16px auto 0;
 }
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
 }
@media (max-width: 480px) {
    .login-card {
        padding: 36px 24px;
    }
    .title {
        font-size: 19px;
    }
    .logo {
        width: 150px;
    }
 }
@@ -0,0 +1,96 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { supabase } from '../services/supabase';
 import './Login.css';
 const ALLOWED_DOMAIN = '@gomezleemarketing.com';
 const GLM_LOGO = 'https://dbit.digitalcompass.agency/storage/v1/object/public/public-assets/GLM_completo.png';
 export default function Login() {
    const navigate = useNavigate();
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState('');
    useEffect(() => {
        supabase.auth.getSession().then(({ data: { session } }) => {
            if (session?.user?.email?.endsWith(ALLOWED_DOMAIN)) {
                navigate('/empleado-id/');
            }
        });
    }, [navigate]);
    const handleGoogleLogin = async () => {
        setLoading(true);
        setError('');
        const redirectUrl = `${window.location.origin}/empleado-id/`;
        const { error: authError } = await supabase.auth.signInWithOAuth({
            provider: 'google',
            options: {
                redirectTo: redirectUrl,
                queryParams: {
                    hd: 'gomezleemarketing.com',
                },
            },
        });
        if (authError) {
            setError(authError.message);
            setLoading(false);
        }
    };
    if (loading) {
        return (
            <div className="login-page loading">
                <div className="login-card">
                    <img src={GLM_LOGO} alt="GLM" className="logo" />
                    <div className="spinner" />
                </div>
            </div>
        );
    }
    return (
        <div className="login-page">
            <div className="login-card">
                <img src={GLM_LOGO} alt="GomezLee Marketing" className="logo" />
                <h1 className="title">GLM ID Card Generator</h1>
                <div className="login-divider" />
                <button
                    className="btn-google"
                    onClick={handleGoogleLogin}
                    disabled={loading}
                >
                    <svg className="google-icon" viewBox="0 0 24 24" width="20" height="20">
                        <path
                            fill="#4285F4"
                            d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"
                        />
                        <path
                            fill="#34A853"
                            d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"
                        />
                        <path
                            fill="#FBBC05"
                            d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"
                        />
                        <path
                            fill="#EA4335"
                            d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"
                        />
                    </svg>
                    <span>Continuar con Google</span>
                </button>
                <p className="domain-hint">Solo cuentas @gomezleemarketing.com</p>
                {error && <div className="error-message">{error}</div>}
            </div>
        </div>
    );
 }
@@ -0,0 +1,10 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
 createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
 )
@@ -0,0 +1,440 @@
 // ── CONFIGURACIÓN DE PLANTILLAS DE CLIENTES ──
 export const clientTemplates = {
    'Esp': {
        'Generico': 'images/AF Generico Esp.png',
        'Claro': 'images/AF Claro Esp.png',
        'Colgate': 'images/AF Colgate Esp.png',
        'KitchenAid': 'images/AF KitchenAid Esp.png',
        'Kraft': 'images/AF Kraft Esp.png',
        'Motorola': 'images/AF Motorola Esp.png',
        'Nestle': 'images/AF Nestle Esp.png',
        'P&G': 'images/AF P&G Esp.png',
        'Philip Morris': 'images/AF Philip Morris Esp.png',
        'Whirlpool': 'images/AF Whirlpool Esp.png'
    },
    'Ing': {
        'Generico': 'images/AF Generico Ing.png',
        'Claro': 'images/AF Claro Ing.png',
        'Colgate': 'images/AF Colgate Ing.png',
        'KitchenAid': 'images/AF KitchenAid Ing.png',
        'Kraft': 'images/AF Kraft Ing.png',
        'Motorola': 'images/AF Motorola Ing.png',
        'Nestle': 'images/AF Nestle Ing.png',
        'P&G': 'images/AF P&G Ing.png',
        'Philip Morris': 'images/AF Philip Morris Ing.png',
        'Whirlpool': 'images/AF Whirlpool Ing.png'
    }
 };
 // ── INYECTORES DINÁMICOS DE DEPENDENCIAS ──
 function loadScript(src, globalKey) {
    return new Promise((resolve) => {
        if (window[globalKey]) return resolve(window[globalKey]);
        const s = document.createElement('script');
        s.src = src;
        s.onload = () => resolve(window[globalKey]);
        document.head.appendChild(s);
    });
 }
 export const getQRLib = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/qrcodejs/1.0.0/qrcode.min.js', 'QRCode');
 const getHtml2Canvas = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js', 'html2canvas');
 export const getJSZip = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js', 'JSZip');
 export const getXLSXLib = () => loadScript('https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js', 'XLSX');
 export function convertDriveUrlToDirect(url) {
    if (!url) return '';
    if (!url.includes('drive.google.com') && !url.includes('docs.google.com')) {
        return url;
    }
    try {
        const regExp = /(?:https?:\/\/)?(?:drive\.google\.com\/)(?:file\/d\/|open\?id=)([\w-]+)/;
        const match = url.match(regExp);
        if (match && match[1]) {
            // Endpoint optimizado para saltar bloqueos pesados de descargas directas anónimas
            return `https://drive.google.com/thumbnail?id=${match[1]}&sz=w1000`;
        }
    } catch (e) {
        // ignore
    }
    return url;
 }
 export async function fetchImageAsBlob(url) {
    if (!url) return null;
    if (url.startsWith('blob:') || url.startsWith('data:')) {
        try {
            const response = await fetch(url);
            if (response.ok) return await response.blob();
        } catch (e) {
            // ignore
        }
        return null;
    }
    if (url.includes('drive.google.com') || url.includes('docs.google.com')) {
        try {
            const response = await fetch(url);
            if (response.ok) return await response.blob();
        } catch {
            // CORS blocked
        }
        return null;
    }
    try {
        const proxyUrl = `https://images.weserv.nl/?url=${encodeURIComponent(url)}&default=${encodeURIComponent(url)}`;
        const response = await fetch(proxyUrl);
        if (!response.ok) throw new Error("Error en respuesta de red proxy");
        return await response.blob();
    } catch (e) {
        try {
            const response = await fetch(url, { mode: 'cors' });
            return await response.blob();
        } catch {
            return null;
        }
    }
 }
 function preloadImage(src) {
    return new Promise((resolve) => {
        if (!src) return resolve(null);
        const img = new Image();
        img.crossOrigin = 'anonymous';
        img.onload = () => resolve(src);
        img.onerror = () => {
            const retryImg = new Image();
            retryImg.onload = () => resolve(src);
            retryImg.onerror = () => resolve(null);
            retryImg.src = src;
        };
        img.src = src;
    });
 }
 // ── GENERADOR DE QR NATIVO (Garantiza ID limpio en URL) ──
 export async function renderQRCode(employeeId, canvasElement) {
    if (!canvasElement) return;
    const cleanId = (employeeId || '').replace(/[-\s]/g, '');
    const ctx = canvasElement.getContext('2d');
    ctx.clearRect(0, 0, canvasElement.width, canvasElement.height);
    if (cleanId.length <= 2) return;
    const QRCodeLib = await getQRLib();
    const tmp = document.createElement('div');
    tmp.style.display = 'none';
    document.body.appendChild(tmp);
    new QRCodeLib(tmp, {
        text: `http://digitalcompass.agency/empleado?id=${cleanId}`,
        width: 55,
        height: 55,
        colorDark: '#000000',
        colorLight: '#ffffff',
        correctLevel: QRCodeLib.CorrectLevel.M
    });
    await new Promise((resolve) => setTimeout(resolve, 60));
    const img = tmp.querySelector('img') || tmp.querySelector('canvas');
    const drawIt = (src) => {
        return new Promise((res) => {
            const i = new Image();
            i.onload = () => {
                ctx.fillStyle = '#ffffff';
                ctx.fillRect(0, 0, 55, 55);
                ctx.drawImage(i, 0, 0, 55, 55);
                if (tmp.parentNode) document.body.removeChild(tmp);
                res();
            };
            i.src = src;
        });
    };
    if (img && img.tagName === 'CANVAS') {
        await drawIt(img.toDataURL());
    } else if (img) {
        if (img.complete) await drawIt(img.src);
        else {
            await new Promise((res) => {
                img.onload = async () => {
                    await drawIt(img.src);
                    res();
                };
            });
        }
    } else {
        if (tmp.parentNode) document.body.removeChild(tmp);
    }
 }
 // ── ENGINE DE PROCESAMIENTO INDIVIDUAL ──
 export async function downloadIDCards(config) {
    const { name, role, selectedClient, language, photoSrc, baseUrl, qrCanvas, onStateChange } = config;
    if (onStateChange) onStateChange({ processing: true, text: 'Procesando...' });
    const html2canvasLib = await getHtml2Canvas();
    const cleanName = name.trim().replace(/\s+/g, '') || 'Empleado';
    const frontBgUrl = `${baseUrl}images/AF GLM Frente.png`;
    const currentGroup = clientTemplates[language] || clientTemplates['Esp'];
    const backBgFile = currentGroup[selectedClient] || 'images/AF Generico Esp.png';
    const backBgUrl = `${baseUrl}${backBgFile}`;
    const sandbox = document.createElement('div');
    sandbox.style.position = 'fixed';
    sandbox.style.top = '-9999px';
    sandbox.style.left = '-9999px';
    sandbox.style.width = '1400px';
    document.body.appendChild(sandbox);
    const cardStyleBase = `
        position: relative;
        width: 650px;
        height: 1004px;
        border-radius: 16px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: inline-block;
        margin-right: 50px;
        overflow: hidden;
        font-family: Arial, Helvetica, sans-serif;
    `;
    const vFront = document.createElement('div');
    vFront.style.cssText = cardStyleBase;
    vFront.style.backgroundImage = `url('${frontBgUrl}')`;
    let photoTagHtml = `
        <div style="width:100%; height:100%; background:#e1e9ee; display:flex; align-items:center; justify-content: center;">
            <svg style="width:100px; height:100px; opacity:0.3; color:#4F758B;" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="10" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 24c0-6 22-6 22 0" stroke="currentColor" stroke-width="1.5"/></svg>
        </div>
    `;
    if (photoSrc) {
        photoTagHtml = `<div style="width:100%; height:100%; background-image:url('${photoSrc}'); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>`;
    }
    vFront.innerHTML = `
        <div style="position:absolute; top:260.5px; left:131.5px; width:384px; height:384px; border-radius:50%; overflow:hidden; z-index:5;">
            ${photoTagHtml}
        </div>
        <div style="position:absolute; top:715px; left:20px; right:20px; font-size:38px; font-weight:900; color:#FFFFFF; text-align:center; text-transform:uppercase; letter-spacing:1px; word-break:break-word; z-index:5;">
            ${name.toUpperCase() || 'NOMBRE APELLIDO'}
        </div>
        <div style="position:absolute; bottom:32px; right:15px; font-size:26px; font-weight:700; color:#6B8499; text-align:right; text-transform:uppercase; letter-spacing:1px; max-width:550px; white-space:nowrap; z-index:5;">
            ${role.toUpperCase() || 'PUESTO'}
        </div>
    `;
    const vBack = document.createElement('div');
    vBack.style.cssText = cardStyleBase;
    vBack.style.backgroundImage = `url('${backBgUrl}')`;
    const vQRZone = document.createElement('div');
    vQRZone.style.cssText = `position: absolute; bottom: 27px; right: 27px; background: #ffffff; padding: 11px; border-radius: 16px; display: flex; align-items: center; justify-content: center; z-index: 5;`;
    const vQRCanvas = document.createElement('canvas');
    vQRCanvas.width = 149;
    vQRCanvas.height = 149;
    vQRCanvas.style.width = '100px';
    vQRCanvas.style.height = '100px';
    const vQRContext = vQRCanvas.getContext('2d');
    if (vQRContext && qrCanvas) {
        vQRContext.imageSmoothingEnabled = false;
        vQRContext.drawImage(qrCanvas, 0, 0, 149, 149);
    }
    vQRZone.appendChild(vQRCanvas);
    vBack.appendChild(vQRZone);
    sandbox.appendChild(vFront);
    sandbox.appendChild(vBack);
    const renderOpts = { scale: 1, useCORS: true, allowTaint: false, backgroundColor: null, logging: false, width: 650, height: 1004 };
    try {
        const frontCanvas = await html2canvasLib(vFront, renderOpts);
        executeFileDownload(frontCanvas.toDataURL('image/png'), `${cleanName}Frente.png`);
        const backCanvas = await html2canvasLib(vBack, renderOpts);
        executeFileDownload(backCanvas.toDataURL('image/png'), `${cleanName}Reverso.png`);
    } catch (error) {
        // silent
    } finally {
        if (sandbox.parentNode) document.body.removeChild(sandbox);
        if (onStateChange) onStateChange({ processing: false, text: '⬇ Descargar' });
    }
 }
 // ── ENGINE MASIVO CON SOLUCIÓN TOTAL POR INYECCIÓN DE IMG CORS NATIVA ──
 export async function downloadBulkIDCards({ employees, baseUrl, onStateChange, onProcessEmployeePhoto }) {
    if (onStateChange) onStateChange({ processing: true, text: 'Descargando...' });
    const html2canvasLib = await getHtml2Canvas();
    const JSZipLib = await getJSZip();
    const zip = new JSZipLib();
    const hiddenQRCanvas = document.createElement('canvas');
    hiddenQRCanvas.width = 55;
    hiddenQRCanvas.height = 55;
    const sandbox = document.createElement('div');
    sandbox.style.position = 'fixed';
    sandbox.style.top = '-9999px';
    sandbox.style.left = '-9999px';
    sandbox.style.width = '1400px';
    document.body.appendChild(sandbox);
    const cardStyleBase = `
        position: relative;
        width: 650px;
        height: 1004px;
        border-radius: 16px;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        display: inline-block;
        overflow: hidden;
        font-family: Arial, Helvetica, sans-serif;
    `;
    const renderOpts = { scale: 1, useCORS: true, allowTaint: false, backgroundColor: null, logging: false, width: 650, height: 1004 };
    for (let i = 0; i < employees.length; i++) {
        const emp = employees[i];
        const currentClient = emp.selectedClient || 'Generico';
        const sanitizedEmpName = (emp.name || '').trim().replace(/[\\/:*?"<>|]/g, '-') || `Empleado_${i + 1}`;
        const sanitizedClientName = String(currentClient).trim().replace(/[\\/:*?"<>|]/g, '-');
        const folderName = `${sanitizedEmpName} - ${sanitizedClientName}`;
        const strictCleanId = String(emp.employeeId || '').replace(/[-\s]/g, '');
        await renderQRCode(strictCleanId, hiddenQRCanvas);
        const directDriveUrl = convertDriveUrlToDirect(emp.fotoUrl);
        let validatedPhotoUrl = null;
        if (directDriveUrl && strictCleanId) {
            try {
                const blobData = await fetchImageAsBlob(directDriveUrl);
                if (blobData) {
                    validatedPhotoUrl = URL.createObjectURL(blobData);
                    if (onProcessEmployeePhoto) {
                        await onProcessEmployeePhoto(strictCleanId, blobData, emp.selectedClient || '');
                    }
                }
            } catch (err) {
                // silent
            }
        }
        if (!validatedPhotoUrl && directDriveUrl) {
            validatedPhotoUrl = await preloadImage(directDriveUrl);
        }
        // --- Renderizar Frente Virtual ---
        const vFront = document.createElement('div');
        vFront.style.cssText = cardStyleBase;
        vFront.style.backgroundImage = `url('${baseUrl}images/AF GLM Frente.png')`;
        // CAMBIO ESTRATÉGICO AQUÍ: Usamos una etiqueta <img> HTML real con crossorigin explícito,
        // esto destruye el bloqueo "Anti-Taint" de los lienzos y obliga a html2canvas a procesar la foto de Drive.
        let photoTagHtml = `
            <div style="width:100%; height:100%; background:#e1e9ee; display:flex; align-items:center; justify-content: center;">
                <svg style="width:100px; height:100px; opacity:0.3; color:#4F758B;" viewBox="0 0 28 28" fill="none"><circle cx="14" cy="10" r="5.5" stroke="currentColor" stroke-width="1.5"/><path d="M3 24c0-6 22-6 22 0" stroke="currentColor" stroke-width="1.5"/></svg>
            </div>
        `;
        if (validatedPhotoUrl) {
            photoTagHtml = `<div style="width:100%; height:100%; background-image:url('${validatedPhotoUrl}'); background-size:cover; background-position:center; background-repeat:no-repeat;"></div>`;
        }
        vFront.innerHTML = `
            <div style="position:absolute; top:260.5px; left:131.5px; width:384px; height:384px; border-radius:50%; overflow:hidden; z-index:5;">
                ${photoTagHtml}
            </div>
            <div style="position:absolute; top:715px; left:20px; right:20px; font-size:38px; font-weight:900; color:#FFFFFF; text-align:center; text-transform:uppercase; letter-spacing:1px; word-break:break-word; z-index:5;">
                ${emp.name.toUpperCase()}
            </div>
            <div style="position:absolute; bottom:32px; right:15px; font-size:26px; font-weight:700; color:#6B8499; text-align:right; text-transform:uppercase; letter-spacing:1px; max-width:550px; white-space:nowrap; z-index:5;">
                ${emp.role.toUpperCase()}
            </div>
        `;
        sandbox.appendChild(vFront);
        // --- Renderizar Reverso Virtual ---
        const currentGroup = clientTemplates[emp.language] || clientTemplates['Esp'];
        const backBgFile = currentGroup[currentClient] || currentGroup['Generico'];
        const backBgUrl = `${baseUrl}${backBgFile}`;
        const vBack = document.createElement('div');
        vBack.style.cssText = cardStyleBase;
        vBack.style.backgroundImage = `url('${backBgUrl}')`;
        const vQRZone = document.createElement('div');
        vQRZone.style.cssText = `position: absolute; bottom: 27px; right: 27px; background: #ffffff; padding: 11px; border-radius: 16px; display: flex; align-items: center; justify-content: center; z-index: 5;`;
        const vQRCanvas = document.createElement('canvas');
        vQRCanvas.width = 149;
        vQRCanvas.height = 149;
        vQRCanvas.style.width = '100px';
        vQRCanvas.style.height = '100px';
        const vQRContext = vQRCanvas.getContext('2d');
        if (vQRContext) {
            vQRContext.imageSmoothingEnabled = false;
            vQRContext.drawImage(hiddenQRCanvas, 0, 0, 149, 149);
        }
        vQRZone.appendChild(vQRCanvas);
        vBack.appendChild(vQRZone);
        sandbox.appendChild(vBack);
        // Forzar un retraso mínimo de microsegundos para asegurar el render interno
        await new Promise((resolve) => setTimeout(resolve, 30));
        // Capturas gráficas del ZIP
        const frontCanvas = await html2canvasLib(vFront, renderOpts);
        const frontData = frontCanvas.toDataURL('image/png').split(',')[1];
        zip.file(`${folderName}/Frente.png`, frontData, { base64: true });
        const backCanvas = await html2canvasLib(vBack, renderOpts);
        const backData = backCanvas.toDataURL('image/png').split(',')[1];
        zip.file(`${folderName}/Reverso.png`, backData, { base64: true });
        if (validatedPhotoUrl && validatedPhotoUrl.startsWith('blob:')) {
            URL.revokeObjectURL(validatedPhotoUrl);
        }
        sandbox.removeChild(vFront);
        sandbox.removeChild(vBack);
    }
    if (sandbox.parentNode) document.body.removeChild(sandbox);
    const content = await zip.generateAsync({ type: 'blob' });
    const link = document.createElement('a');
    link.href = URL.createObjectURL(content);
    link.download = `Lote_Carnets_GLM.zip`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    if (onStateChange) onStateChange({ processing: false, text: '⬇ Descargar' });
 }
 function executeFileDownload(dataUrl, fileName) {
    const link = document.createElement('a');
    link.href = dataUrl;
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
 }
@@ -0,0 +1,13 @@
 import { supabase } from "./supabase";
 export async function getEmployee(employeeNumber) {
    const { data, error } = await supabase
        .from("empleados_glm")
        .select("*")
        .eq("cedula", employeeNumber)
        .single();
    if (error) throw error;
    return data;
 }
@@ -0,0 +1,86 @@
 import { supabase } from "./supabase";
 /**
 * Registra el cliente/proyecto de un carnet descargado en la tabla
 * "carnet_empleados_creados_glm".
 *
 * @param {string} employeeNumber   - Número de cédula limpio (sin guiones/espacios)
 * @param {string} clienteProyecto  - Nombre del cliente/proyecto seleccionado
 * @returns {Promise<void>}
 */
 export async function saveClienteProyecto(employeeNumber, clienteProyecto) {
    const cleanCedula = String(employeeNumber || '').replace(/[-\s]/g, '');
    const valorCliente = clienteProyecto || 'Generico';
    if (!cleanCedula) {
        throw new Error('Cédula vacía, no se puede guardar.');
    }
    const { error } = await supabase.rpc('upsert_carnet_cliente', {
        p_cedula: cleanCedula,
        p_cliente_proyecto: valorCliente
    });
    if (error) {
        throw error;
    }
 }
 /**
 * Sube la foto de un empleado al bucket "foto_empleados".
 *
 * El nombre del archivo sigue el patrón:
 *   <cedula>_<cliente>.jpg          — primera foto
 *   <cedula>_<cliente>1.jpg         — segunda foto del mismo empleado+cliente
 *   <cedula>_<cliente>2.jpg         — tercera, etc.
 *
 * @param {string} employeeNumber  - Número de cédula limpio (sin guiones/espacios)
 * @param {File}   file            - Archivo de imagen a subir
 * @param {string} [clientKey='']  - Nombre del cliente/proyecto (p.ej. "claro", "nestle")
 * @returns {Promise<string>}      - URL pública del archivo subido
 */
 export async function uploadEmployeePhoto(employeeNumber, file, clientKey = '') {
    const extension = file.name.split('.').pop() || 'jpg';
    // Normalizar el nombre del cliente: minúsculas, sin espacios ni caracteres especiales
    const safeClient = clientKey
        ? '_' + clientKey.toLowerCase().replace(/[^a-z0-9]/g, '')
        : '';
    const baseName = `${employeeNumber}${safeClient}`;
    // Buscar archivos existentes con el mismo prefijo para elegir el sufijo correcto
    const { data: existingFiles } = await supabase.storage
        .from('foto_empleados')
        .list('', { search: baseName });
    // Filtrar exactamente los archivos que tengan el mismo baseName base
    const pattern = new RegExp(`^${baseName}(\\d*)\\.${extension}$`);
    const matches = (existingFiles || []).filter(f => pattern.test(f.name));
    let fileName;
    if (matches.length === 0) {
        // No existe ninguno: usar el nombre base sin sufijo numérico
        fileName = `${baseName}.${extension}`;
    } else {
        // Extraer los sufijos numéricos usados y elegir el siguiente
        const usedSuffixes = matches.map(f => {
            const m = f.name.match(pattern);
            return m ? parseInt(m[1] || '0', 10) : 0;
        });
        const nextSuffix = Math.max(...usedSuffixes) + 1;
        fileName = `${baseName}${nextSuffix}.${extension}`;
    }
    const { error } = await supabase.storage
        .from('foto_empleados')
        .upload(fileName, file, { upsert: false });
    if (error) throw error;
    const { data } = supabase.storage
        .from('foto_empleados')
        .getPublicUrl(fileName);
    return data.publicUrl;
 }
@@ -0,0 +1,7 @@
 import { createClient } from "@supabase/supabase-js";
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
 const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
 // Single client for auth (uses anon key)
 export const supabase = createClient(supabaseUrl, supabaseAnonKey);
@@ -0,0 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react()],
  base: '/empleado-id/'
 })
@@ -0,0 +1,25 @@
 # Logs
 logs
 *.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 node_modules
 dist-ssr
 *.local
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
 .idea
 .DS_Store
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
 .env
@@ -0,0 +1,8 @@
 {
  "$schema": "./node_modules/oxlint/configuration_schema.json",
  "plugins": ["react", "oxc"],
  "rules": {
    "react/rules-of-hooks": "error",
    "react/only-export-components": ["warn", { "allowConstantExport": true }]
  }
 }
@@ -0,0 +1,16 @@
 # React + Vite
 This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
 Currently, two official plugins are available:
 - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
 - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
 ## React Compiler
 The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
 ## Expanding the Oxlint configuration
 If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and Oxlint's TypeScript related rules in your project.
@@ -0,0 +1 @@
 body{background:#f5f5f5;margin:0;font-family:Arial,sans-serif}.page{padding:40px}.employee-card{background:#fff;border-radius:12px;width:350px;max-width:100%;margin:auto;overflow:hidden;box-shadow:0 10px 30px #0000001a}.header{color:#fff;text-align:center;padding:20px;font-size:28px;font-weight:700}.content{text-align:center;padding:30px}.label{color:#666;margin-top:16px;font-size:14px}.value{font-size:18px;font-weight:700}.employee-photo{object-fit:cover;border:4px solid #e5e5e5;border-radius:50%;width:170px;height:170px;margin:0 auto 25px;display:block}.employee-photo-placeholder{color:#777;background:#f0f0f0;border:4px solid #e5e5e5;border-radius:50%;justify-content:center;align-items:center;width:170px;height:170px;margin:0 auto 25px;font-weight:700;display:flex}
@@ -0,0 +1,24 @@
 <svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="bluesky-icon" viewBox="0 0 16 17">
    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
  </symbol>
  <symbol id="discord-icon" viewBox="0 0 20 19">
    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
  </symbol>
  <symbol id="documentation-icon" viewBox="0 0 21 20">
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
  </symbol>
  <symbol id="github-icon" viewBox="0 0 19 19">
    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
  </symbol>
  <symbol id="social-icon" viewBox="0 0 20 20">
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
  </symbol>
  <symbol id="x-icon" viewBox="0 0 19 19">
    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
  </symbol>
 </svg>
@@ -0,0 +1,14 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/empleado/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>glm-card-qr</title>
    <script type="module" crossorigin src="/empleado/assets/index-CzNrgdBd.js"></script>
    <link rel="stylesheet" crossorigin href="/empleado/assets/index-D0nK2oaA.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
 </html>
@@ -0,0 +1,13 @@
 <!doctype html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>glm-card-qr</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
 </html>
@@ -0,0 +1,25 @@
 {
  "name": "glm-card-qr",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "oxlint",
    "preview": "vite preview"
  },
  "dependencies": {
    "@supabase/supabase-js": "^2.45.0",
    "react": "^19.2.7",
    "react-dom": "^19.2.7",
    "react-router-dom": "^6.26.0"
  },
  "devDependencies": {
    "@types/react": "^19.2.17",
    "@types/react-dom": "^19.2.3",
    "@vitejs/plugin-react": "^6.0.3",
    "oxlint": "^1.71.0",
    "vite": "^8.1.1"
  }
 }
@@ -0,0 +1,24 @@
 <svg xmlns="http://www.w3.org/2000/svg">
  <symbol id="bluesky-icon" viewBox="0 0 16 17">
    <g clip-path="url(#bluesky-clip)"><path fill="#08060d" d="M7.75 7.735c-.693-1.348-2.58-3.86-4.334-5.097-1.68-1.187-2.32-.981-2.74-.79C.188 2.065.1 2.812.1 3.251s.241 3.602.398 4.13c.52 1.744 2.367 2.333 4.07 2.145-2.495.37-4.71 1.278-1.805 4.512 3.196 3.309 4.38-.71 4.987-2.746.608 2.036 1.307 5.91 4.93 2.746 2.72-2.746.747-4.143-1.747-4.512 1.702.189 3.55-.4 4.07-2.145.156-.528.397-3.691.397-4.13s-.088-1.186-.575-1.406c-.42-.19-1.06-.395-2.741.79-1.755 1.24-3.64 3.752-4.334 5.099"/></g>
    <defs><clipPath id="bluesky-clip"><path fill="#fff" d="M.1.85h15.3v15.3H.1z"/></clipPath></defs>
  </symbol>
  <symbol id="discord-icon" viewBox="0 0 20 19">
    <path fill="#08060d" d="M16.224 3.768a14.5 14.5 0 0 0-3.67-1.153c-.158.286-.343.67-.47.976a13.5 13.5 0 0 0-4.067 0c-.128-.306-.317-.69-.476-.976A14.4 14.4 0 0 0 3.868 3.77C1.546 7.28.916 10.703 1.231 14.077a14.7 14.7 0 0 0 4.5 2.306q.545-.748.965-1.587a9.5 9.5 0 0 1-1.518-.74q.191-.14.372-.293c2.927 1.369 6.107 1.369 8.999 0q.183.152.372.294-.723.437-1.52.74.418.838.963 1.588a14.6 14.6 0 0 0 4.504-2.308c.37-3.911-.63-7.302-2.644-10.309m-9.13 8.234c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.894 0 1.614.82 1.599 1.82.001 1-.705 1.82-1.6 1.82m5.91 0c-.878 0-1.599-.82-1.599-1.82 0-.998.705-1.82 1.6-1.82.893 0 1.614.82 1.599 1.82 0 1-.706 1.82-1.6 1.82"/>
  </symbol>
  <symbol id="documentation-icon" viewBox="0 0 21 20">
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="m15.5 13.333 1.533 1.322c.645.555.967.833.967 1.178s-.322.623-.967 1.179L15.5 18.333m-3.333-5-1.534 1.322c-.644.555-.966.833-.966 1.178s.322.623.966 1.179l1.534 1.321"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M17.167 10.836v-4.32c0-1.41 0-2.117-.224-2.68-.359-.906-1.118-1.621-2.08-1.96-.599-.21-1.349-.21-2.848-.21-2.623 0-3.935 0-4.983.369-1.684.591-3.013 1.842-3.641 3.428C3 6.449 3 7.684 3 10.154v2.122c0 2.558 0 3.838.706 4.726q.306.383.713.671c.76.536 1.79.64 3.581.66"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M3 10a2.78 2.78 0 0 1 2.778-2.778c.555 0 1.209.097 1.748-.047.48-.129.854-.503.982-.982.145-.54.048-1.194.048-1.749a2.78 2.78 0 0 1 2.777-2.777"/>
  </symbol>
  <symbol id="github-icon" viewBox="0 0 19 19">
    <path fill="#08060d" fill-rule="evenodd" d="M9.356 1.85C5.05 1.85 1.57 5.356 1.57 9.694a7.84 7.84 0 0 0 5.324 7.44c.387.079.528-.168.528-.376 0-.182-.013-.805-.013-1.454-2.165.467-2.616-.935-2.616-.935-.349-.91-.864-1.143-.864-1.143-.71-.48.051-.48.051-.48.787.051 1.2.805 1.2.805.695 1.194 1.817.857 2.268.649.064-.507.27-.857.49-1.052-1.728-.182-3.545-.857-3.545-3.87 0-.857.31-1.558.8-2.104-.078-.195-.349-1 .077-2.078 0 0 .657-.208 2.14.805a7.5 7.5 0 0 1 1.946-.26c.657 0 1.328.092 1.946.26 1.483-1.013 2.14-.805 2.14-.805.426 1.078.155 1.883.078 2.078.502.546.799 1.247.799 2.104 0 3.013-1.818 3.675-3.558 3.87.284.247.528.714.528 1.454 0 1.052-.012 1.896-.012 2.156 0 .208.142.455.528.377a7.84 7.84 0 0 0 5.324-7.441c.013-4.338-3.48-7.844-7.773-7.844" clip-rule="evenodd"/>
  </symbol>
  <symbol id="social-icon" viewBox="0 0 20 20">
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M12.5 6.667a4.167 4.167 0 1 0-8.334 0 4.167 4.167 0 0 0 8.334 0"/>
    <path fill="none" stroke="#aa3bff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.35" d="M2.5 16.667a5.833 5.833 0 0 1 8.75-5.053m3.837.474.513 1.035c.07.144.257.282.414.309l.93.155c.596.1.736.536.307.965l-.723.73a.64.64 0 0 0-.152.531l.207.903c.164.715-.213.991-.84.618l-.872-.52a.63.63 0 0 0-.577 0l-.872.52c-.624.373-1.003.094-.84-.618l.207-.903a.64.64 0 0 0-.152-.532l-.723-.729c-.426-.43-.289-.864.306-.964l.93-.156a.64.64 0 0 0 .412-.31l.513-1.034c.28-.562.735-.562 1.012 0"/>
  </symbol>
  <symbol id="x-icon" viewBox="0 0 19 19">
    <path fill="#08060d" fill-rule="evenodd" d="M1.893 1.98c.052.072 1.245 1.769 2.653 3.77l2.892 4.114c.183.261.333.48.333.486s-.068.089-.152.183l-.522.593-.765.867-3.597 4.087c-.375.426-.734.834-.798.905a1 1 0 0 0-.118.148c0 .01.236.017.664.017h.663l.729-.83c.4-.457.796-.906.879-.999a692 692 0 0 0 1.794-2.038c.034-.037.301-.34.594-.675l.551-.624.345-.392a7 7 0 0 1 .34-.374c.006 0 .93 1.306 2.052 2.903l2.084 2.965.045.063h2.275c1.87 0 2.273-.003 2.266-.021-.008-.02-1.098-1.572-3.894-5.547-2.013-2.862-2.28-3.246-2.273-3.266.008-.019.282-.332 2.085-2.38l2-2.274 1.567-1.782c.022-.028-.016-.03-.65-.03h-.674l-.3.342a871 871 0 0 1-1.782 2.025c-.067.075-.405.458-.75.852a100 100 0 0 1-.803.91c-.148.172-.299.344-.99 1.127-.304.343-.32.358-.345.327-.015-.019-.904-1.282-1.976-2.808L6.365 1.85H1.8zm1.782.91 8.078 11.294c.772 1.08 1.413 1.973 1.425 1.984.016.017.241.02 1.05.017l1.03-.004-2.694-3.766L7.796 5.75 5.722 2.852l-1.039-.004-1.039-.004z" clip-rule="evenodd"/>
  </symbol>
 </svg>
@@ -0,0 +1,20 @@
 import { BrowserRouter, Routes, Route, Navigate, useLocation } from "react-router-dom";
 import EmployeeCard from "./screen/EmployeeCard";
 export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route
          path="/empleado"
          element={
            <EmployeeCard />
          }
        />
        <Route path="*" element={<Navigate to="/empleado" replace />} />
      </Routes>
    </BrowserRouter>
  );
 }
@@ -0,0 +1 @@
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
@@ -0,0 +1,9 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import App from './App.jsx'
 createRoot(document.getElementById('root')).render(
  <StrictMode>
    <App />
  </StrictMode>,
 )
@@ -0,0 +1,67 @@
 body {
    margin: 0;
    background: #f5f5f5;
    font-family: Arial, sans-serif;
 }
 .page {
    padding: 40px;
 }
 .employee-card {
    width: 350px;
    max-width: 100%;
    margin: auto;
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
 }
 .header {
    color: white;
    text-align: center;
    padding: 20px;
    font-size: 28px;
    font-weight: bold;
 }
 .content {
    padding: 30px;
    text-align: center;
 }
 .label {
    margin-top: 16px;
    color: #666;
    font-size: 14px;
 }
 .value {
    font-size: 18px;
    font-weight: bold;
 }
 .employee-photo {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    margin: 0 auto 25px;
    border: 4px solid #e5e5e5;
 }
 .employee-photo-placeholder {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    margin: 0 auto 25px;
    background: #f0f0f0;
    color: #777;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border: 4px solid #e5e5e5;
 }
@@ -0,0 +1,125 @@
 import { useEffect, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import { supabase } from "../services/supabase";
 import "./EmployeeCard.css";
 export default function EmployeeCard() {
    const [searchParams] = useSearchParams();
    const employeeNumber = searchParams.get("id");
    const [employee, setEmployee] = useState(null);
    const [loading, setLoading] = useState(true);
    const [notFound, setNotFound] = useState(false);
    useEffect(() => {
        async function loadEmployee() {
            const { data, error } = await supabase
                .rpc("get_carnet_publico", { p_cedula: employeeNumber });
            if (error || !data || data.length === 0) {
                setNotFound(true);
            } else {
                setEmployee(data[0]);
            }
            setLoading(false);
        }
        loadEmployee();
    }, [employeeNumber]);
    if (loading) {
        return (
            <div className="page">
                <h2>Cargando...</h2>
            </div>
        );
    }
    if (notFound) {
        return (
            <div className="page">
                <h1 style={{ color: "red" }}>
                    Empleado no encontrado
                </h1>
            </div>
        );
    }
    const active = employee.status?.toLowerCase() === "active";
    return (
        <div className="page">
            <div className="employee-card">
                <div
                    className="header"
                    style={{
                        backgroundColor: active
                            ? "#22c55e"
                            : "#ef4444"
                    }}
                >
                    {active
                        ? "Empleado Activo"
                        : "Empleado No Activo"}
                </div>
                <div className="content">
                    {employee.photo_url ? (
                        <img
                            src={employee.photo_url}
                            alt={employee.name}
                            className="employee-photo"
                        />
                    ) : (
                        <div className="employee-photo-placeholder">
                            Sin foto
                        </div>
                    )}
                    <div className="label">
                        Nombre
                    </div>
                    <div className="value">
                        {employee.name}
                    </div>
                    <div className="label">
                        Puesto
                    </div>
                    <div className="value">
                        {employee.job_title}
                    </div>
                    <div className="label">
                        País
                    </div>
                    <div className="value">
                        {employee.country}
                    </div>
                    <div className="label">
                        Estado
                    </div>
                    <div className="value">
                        {employee.status}
                    </div>
                </div>
            </div>
        </div>
    );
 }
@@ -0,0 +1,8 @@
 import { createClient } from "@supabase/supabase-js";
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
 const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;
 export const supabase = supabaseUrl && supabaseAnonKey
  ? createClient(supabaseUrl, supabaseAnonKey)
  : null;
@@ -0,0 +1,8 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
 // https://vite.dev/config/
 export default defineConfig({
  plugins: [react()],
  base: '/empleado'
 })
		`@@ -0,0 +1 @@`
							body{background:#f5f5f5;margin:0;font-family:Arial,sans-serif}.page{padding:40px}.employee-card{background:#fff;border-radius:12px;width:350px;max-width:100%;margin:auto;overflow:hidden;box-shadow:0 10px 30px #0000001a}.header{color:#fff;text-align:center;padding:20px;font-size:28px;font-weight:700}.content{text-align:center;padding:30px}.label{color:#666;margin-top:16px;font-size:14px}.value{font-size:18px;font-weight:700}.employee-photo{object-fit:cover;border:4px solid #e5e5e5;border-radius:50%;width:170px;height:170px;margin:0 auto 25px;display:block}.employee-photo-placeholder{color:#777;background:#f0f0f0;border:4px solid #e5e5e5;border-radius:50%;justify-content:center;align-items:center;width:170px;height:170px;margin:0 auto 25px;font-weight:700;display:flex}
		`@@ -0,0 +1 @@`
							<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>