almeira-web/transporte-cali-buenaventura/backend/public/index.html

581 lines
32 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pacifictrans Go | Transporte Especial & Mensajería Cali - Buenaventura</title>
<meta name="description" content="Plataforma tecnológica de transporte especial intermunicipal y mensajería en el corredor Cali - Buenaventura. Agrupación inteligente de 4 pasajeros, Waze TSP y pagos 100% seguros con Bold.">
<meta property="og:title" content="Pacifictrans Go - Corredor Cali ↔ Buenaventura">
<meta property="og:description" content="Servicio puerta a puerta de 4 cupos y paquetería express. Monitoreo satelital y conductores asignados por cercanía de residencia.">
<meta property="og:type" content="website">
<meta name="theme-color" content="#080c14">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<!-- NAVBAR -->
<header class="navbar">
<a href="#" class="brand">
<div class="brand-badge">P</div>
<div class="brand-text">
<h1 class="brand-title">Pacifictrans <span>Go</span></h1>
<span>Cali ↔ Buenaventura</span>
</div>
</a>
<nav class="nav-links">
<a href="#reservas" class="active">Reserva de Pasajeros</a>
<a href="#fletes">Fletes & Encomiendas</a>
<a href="#radar">Radar de Flota</a>
<a href="#conductores">Conductores</a>
<a href="/PacifictransGo.apk" class="btn-apk-header" id="btn-download-header">
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.523 15.3414c-.5511 0-.9993-.4486-.9993-1.0001s.4482-1.0001.9993-1.0001c.552 0 1.0001.4486 1.0001 1.0001s-.4481 1.0001-1.0001 1.0001m-11.046 0c-.5511 0-.9993-.4486-.9993-1.0001s.4482-1.0001.9993-1.0001c.552 0 1.0001.4486 1.0001 1.0001s-.4481 1.0001-1.0001 1.0001m11.4045-6.02l1.997-3.4589c.1408-.2439.0573-.5552-.1866-.696-.2438-.1408-.5551-.0573-.696.1866l-2.0238 3.5054c-1.5037-.6873-3.1979-1.0772-4.9691-1.0772s-3.4654.3899-4.9691 1.0772l-2.0238-3.5054c-.1409-.2439-.4522-.3274-.696-.1866-.2439.1408-.3274.4521-.1866.696l1.997 3.4589c-3.7997 2.0623-6.375 5.9863-6.446 10.5369h24.646c-.071-4.5506-2.6463-8.4746-6.446-10.5369"/>
</svg>
Descargar APK Android
</a>
</nav>
</header>
<!-- HERO SECTION -->
<main>
<section class="hero">
<div class="hero-content">
<div class="hero-pill">
<span>⚡ Corredor Exclusivo Especial</span>
<span>•</span>
<span>100% Prepagado con Bold & Bre-B</span>
</div>
<h2 class="hero-title">Transporte Puerta a Puerta y Mensajería Express <span>Cali - Buenaventura</span></h2>
<p class="hero-desc">
Viajes agrupados inteligentemente en vehículos de 4 pasajeros. Salidas puntuales, geolocalización satelital en tiempo real, optimización de rutas TSP con Waze y asignación de conductores según cercanía de su residencia.
</p>
<div class="hero-badges">
<div class="badge-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"></path>
<circle cx="9" cy="7" r="4"></circle>
<path d="M22 21v-2a4 4 0 0 0-3-3.87"></path>
<path d="M16 3.13a4 4 0 0 1 0 7.75"></path>
</svg>
<span><strong>4 Cupos</strong> por Vehículo</span>
</div>
<div class="badge-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon>
</svg>
<span><strong>$35.000 COP</strong> Tarifa Fija</span>
</div>
<div class="badge-item">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"></path>
</svg>
<span>Seguro Contractual & Bold</span>
</div>
</div>
<div style="display: flex; gap: 1rem;">
<a href="#reservas" class="btn-primary" style="width: auto; padding: 0.9rem 1.8rem;">
Reservar Mi Cupo Ahora
</a>
<a href="#fletes" class="btn-primary" style="width: auto; padding: 0.9rem 1.8rem; background: rgba(255,255,255,0.06); color: #fff; border: 1px solid var(--border-glass);">
Cotizar Flete de Encomienda
</a>
</div>
</div>
<div class="hero-visual">
<div class="visual-container">
<img src="/images/hero-banner.jpg" alt="Pacifictrans Go Cali Buenaventura" class="hero-image">
<div class="floating-pool-card">
<div class="pool-status-row">
<div>
<span style="font-size: 0.75rem; text-transform: uppercase; color: var(--accent-cyan); font-weight: 700; letter-spacing: 0.05em;">Agrupación en Vivo</span>
<div style="font-weight: 700; font-size: 1.05rem;" id="seat-counter-text">3/4 Pasajeros Confirmados</div>
</div>
<div class="pool-seats">
<div class="seat-dot active">1</div>
<div class="seat-dot active">2</div>
<div class="seat-dot active">3</div>
<div class="seat-dot pending">4</div>
</div>
</div>
<p style="font-size: 0.82rem; color: var(--text-muted); line-height: 1.4;">
📍 Recogida en Cali: <strong>Puerta a puerta en su domicilio</strong>.<br>
🏁 Llegada en Buenaventura: <strong>Terminal, Muelle Turístico o El Piñal</strong>.
</p>
</div>
</div>
</div>
</section>
<!-- MAIN PLATFORM APPS / TABS WRAPPER -->
<div class="main-wrapper" id="reservas">
<div class="tab-nav">
<button class="tab-btn active" data-tab="tab-pasajeros" id="tab-btn-pasajeros">
👥 1. Reserva de Pasajeros
</button>
<button class="tab-btn" data-tab="tab-fletes" id="tab-btn-fletes">
📦 2. Mensajería & Fletes
</button>
<button class="tab-btn" data-tab="tab-radar" id="tab-btn-radar">
📡 3. Radar de Flota & Despacho
</button>
<button class="tab-btn" data-tab="tab-conductores" id="tab-btn-conductores">
🚗 4. Portal Conductor
</button>
<button class="tab-btn" data-tab="tab-tarifas" id="tab-btn-tarifas">
⚙️ 5. Tarifas & Precios
</button>
</div>
<!-- TAB 1: RESERVA PASAJEROS -->
<section class="tab-content active" id="tab-pasajeros">
<div class="glass-panel">
<div class="panel-header">
<h2>Reserva de Cupo de Transporte</h2>
<p>Servicio especial intermunicipal puerta a puerta entre Cali y Buenaventura en vehículos ejecutivos de 4 pasajeros.</p>
</div>
<div class="grid-2col">
<!-- Formulario de Reserva -->
<div>
<div class="form-group">
<label class="form-label" for="pool-origin">Sentido del Viaje</label>
<select class="form-select" id="pool-origin">
<option value="CALI">Cali ➔ Buenaventura (Recogida Domicilio)</option>
<option value="BUENAVENTURA">Buenaventura ➔ Cali (Puntos Oficiales)</option>
</select>
</div>
<div class="form-group" id="cali-address-group">
<label class="form-label" for="cali-address">Dirección de Recogida en Cali (Domicilio)</label>
<input type="text" class="form-input" id="cali-address" placeholder="Ej: Calle 5 #66-20, Barrio Limonar, Cali" value="Calle 9 #42-15, Los Cámbulos, Cali">
</div>
<div class="form-group" id="buena-stop-group">
<label class="form-label" for="buena-stop">Parada de Destino en Buenaventura</label>
<select class="form-select" id="buena-stop">
<option value="TERMINAL">Terminal de Transporte de Buenaventura</option>
<option value="MUELLE">Muelle Turístico</option>
<option value="PINAL">El Piñal</option>
<option value="SENA">Sena Buenaventura</option>
</select>
</div>
<div class="grid-2col" style="gap: 1rem; margin-bottom: 0;">
<div class="form-group">
<label class="form-label" for="user-name">Nombre Completo</label>
<input type="text" class="form-input" id="user-name" placeholder="Tu Nombre" value="Andrea Montoya">
</div>
<div class="form-group">
<label class="form-label" for="user-phone">WhatsApp (+57)</label>
<input type="tel" class="form-input" id="user-phone" placeholder="3167455877" value="3167455877">
</div>
</div>
<div class="form-group">
<label class="form-label" for="user-notes">Notas / Equipaje</label>
<input type="text" class="form-input" id="user-notes" placeholder="Maletín mediano de 10kg">
</div>
</div>
<!-- Resumen y Pasarela Bold -->
<div class="summary-box">
<div>
<h3 style="font-size: 1.25rem; color: #fff; margin-bottom: 1rem;">Resumen de la Reserva</h3>
<div class="summary-item">
<span style="color: var(--text-muted);">Servicio:</span>
<span style="color: #fff; font-weight: 600;">Transporte Especial Intermunicipal</span>
</div>
<div class="summary-item">
<span style="color: var(--text-muted);">Capacidad del Vehículo:</span>
<span style="color: #fff; font-weight: 600;">Máximo 4 Pasajeros (1 cupo solicitado)</span>
</div>
<div class="summary-item">
<span style="color: var(--text-muted);">Recogida Puerta a Puerta:</span>
<span style="color: var(--accent-cyan); font-weight: 600;">Incluida en Cali</span>
</div>
<div class="summary-item">
<span style="color: var(--text-muted);">Navegación Conductor:</span>
<span style="color: #fff; font-weight: 600;">Waze Deep Link con TSP</span>
</div>
<div class="bold-gateway-badge">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="2" y="5" width="20" height="14" rx="2"></rect>
<line x1="2" y1="10" x2="22" y2="10"></line>
</svg>
<span>Pago 100% Prepagado con <strong>Bold Smart Checkout</strong> (QR Bre-B, Nequi, PSE)</span>
</div>
</div>
<div>
<div class="summary-total">
<span style="font-weight: 600; color: #fff;">Tarifa por Pasajero:</span>
<span class="total-price">$35.000 COP</span>
</div>
<button class="btn-primary" id="btn-book-pool" style="margin-top: 1rem;">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"></path>
</svg>
Confirmar y Pagar Cupo ($35.000 COP)
</button>
</div>
</div>
</div>
<!-- Alerta tras completar cupo -->
<div id="pool-dispatch-alert" style="display: none; margin-top: 2rem; background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.4); border-radius: 14px; padding: 1.5rem;">
<div style="display: flex; gap: 1rem; align-items: flex-start;">
<span style="font-size: 2rem;">🚗💨</span>
<div>
<h4 style="color: #fbbf24; font-size: 1.15rem; margin-bottom: 0.4rem;">¡Vehículo con 4/4 Cupos Completados!</h4>
<p style="color: #cbd5e1; font-size: 0.92rem; margin-bottom: 0.75rem;">
El viaje ha cambiado su estado a <code>POOL_COMPLETED</code>. Se ha enviado una alerta inmediata al Administrador para seleccionar el conductor de acuerdo a la cercanía de su residencia en Cali respecto a la primera recogida.
</p>
<div style="font-size: 0.85rem; color: #94a3b8;">
📲 Una vez asignado, se disparará automáticamente el mensaje de WhatsApp a los 4 pasajeros con los datos del conductor y horario exacto de recogida.
</div>
</div>
</div>
</div>
</div>
</section>
<!-- TAB 2: FLETES Y ENCOMIENDAS -->
<section class="tab-content" id="tab-fletes">
<div class="glass-panel">
<div class="panel-header">
<h2>Cotizador Inteligente de Mensajería & Fletes</h2>
<p>Envíos seguros en el corredor Cali - Buenaventura. Tarifa exacta calculada por distancia, factor de peso/volumen y seguro obligatorio.</p>
</div>
<div class="grid-2col">
<div>
<div class="form-group">
<label class="form-label" for="package-type">Tipo de Encomienda / Paquete</label>
<select class="form-select" id="package-type">
<option value="1.0">Sobre / Documentos Urgentes (Factor 1.0)</option>
<option value="1.2" selected>Paquete Pequeño (hasta 5 kg) - Factor 1.2</option>
<option value="1.6">Paquete Mediano (hasta 15 kg) - Factor 1.6</option>
<option value="2.2">Carga Grande / Caja Pesada (hasta 30 kg) - Factor 2.2</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="declared-value">Valor Declarado de la Mercancía ($ COP)</label>
<input type="number" class="form-input" id="declared-value" placeholder="100000" value="150000">
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">El seguro corresponde al 1% del valor declarado ante extravío o siniestro.</span>
</div>
<div class="grid-2col" style="gap: 1rem;">
<div class="form-group">
<label class="form-label" for="sender-phone">Teléfono Remitente (WhatsApp)</label>
<input type="tel" class="form-input" id="sender-phone" value="3167455877">
</div>
<div class="form-group">
<label class="form-label" for="receiver-phone">Teléfono Destinatario (WhatsApp)</label>
<input type="tel" class="form-input" id="receiver-phone" value="3101234567">
</div>
</div>
<div class="form-group">
<label class="form-label" for="package-desc">Descripción del Contenido</label>
<input type="text" class="form-input" id="package-desc" placeholder="Repuestos automotrices / Ropa / Medicamentos">
</div>
</div>
<div class="summary-box">
<div>
<h3 style="font-size: 1.25rem; color: #fff; margin-bottom: 1rem;">Fórmula Oficial de Liquidación</h3>
<div style="background: rgba(0,0,0,0.4); border-radius: 8px; padding: 0.75rem; font-family: monospace; font-size: 0.8rem; color: #38bdf8; margin-bottom: 1rem;">
Tarifa = (Base + [115 Km × $1.200]) × Factor + Seguro (1%)
</div>
<div class="summary-item">
<span style="color: var(--text-muted);">Tarifa Base Logística:</span>
<span style="color: #fff; font-weight: 600;" id="freight-base-cost">$25.000 COP</span>
</div>
<div class="summary-item">
<span style="color: var(--text-muted);">Costo por Distancia (115 km):</span>
<span style="color: #fff; font-weight: 600;" id="freight-dist-cost">$165.600 COP</span>
</div>
<div class="summary-item">
<span style="color: var(--text-muted);">Seguro de Mercancía:</span>
<span style="color: var(--accent-emerald); font-weight: 600;" id="freight-insurance-cost">$1.500 COP</span>
</div>
<div class="bold-gateway-badge">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<circle cx="12" cy="12" r="10"></circle>
<polyline points="12 6 12 12 16 14"></polyline>
</svg>
<span>100% Prepagado antes del despacho con Bold Smart Checkout</span>
</div>
</div>
<div>
<div class="summary-total">
<span style="font-weight: 600; color: #fff;">Flete Total Liquidado:</span>
<span class="total-price" id="freight-total-price">$197.100 COP</span>
</div>
<button class="btn-primary" style="margin-top: 1rem;">
Generar Guía y Enlace de Pago Bold
</button>
</div>
</div>
</div>
</div>
</section>
<!-- TAB 3: RADAR DE FLOTA & DESPACHO -->
<section class="tab-content" id="tab-radar">
<div class="glass-panel">
<div class="panel-header">
<h2>Radar Satelital GPS & Asignación por Residencia</h2>
<p>Visualización en tiempo real de la flota en el corredor Cali - Buenaventura y asignación inteligente de conductores basada en la distancia de su lugar de residencia a la primera recogida.</p>
</div>
<!-- Radar Visualizer -->
<div class="radar-screen" id="radar-canvas-container">
<div class="radar-grid"></div>
<div class="radar-sweep"></div>
<div class="corridor-line"></div>
<div class="corridor-point cali" title="Cali"></div>
<div class="corridor-point dagua" title="Dagua"></div>
<div class="corridor-point lobo" title="Loboguerrero"></div>
<div class="corridor-point buena" title="Buenaventura"></div>
<div style="position: absolute; bottom: 15px; left: 20px; font-size: 0.8rem; color: #64748b; font-family: monospace;">
🟢 Cali (Km 0) ── 🔵 Dagua (Km 45) ── 🔵 Loboguerrero (Km 60) ── 🟡 Buenaventura (Km 115)
</div>
<div class="radar-vehicle" style="top: 45%; left: 22%;" title="Renault Duster - Carlos Mario">🚗</div>
<div class="radar-vehicle" style="top: 48%; left: 52%;" title="Toyota Fortuner - Hernán Darío">🚙</div>
<div class="radar-vehicle" style="top: 43%; left: 78%;" title="Chevrolet Tracker - Mauricio V.">🚗</div>
</div>
<!-- Sugerencia de Conductores por Residencia -->
<div>
<h3 style="font-size: 1.25rem; color: #fff; margin-bottom: 0.5rem;">Conductores Sugeridos para el Viaje Actual</h3>
<p style="font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1.25rem;">
Ordenados según la cercanía entre su domicilio registrado en Cali y la 1ª recogida del grupo de pasajeros.
</p>
<div id="suggested-drivers-list">
<!-- Renderizado dinámicamente por app.js -->
</div>
<div id="schedule-dispatch-result" style="display: none; margin-top: 1.5rem;"></div>
</div>
</div>
</section>
<!-- TAB 4: PORTAL CONDUCTOR -->
<section class="tab-content" id="tab-conductores">
<div class="glass-panel">
<div class="panel-header">
<h2>Vinculación Oficial de Conductores</h2>
<p>Únete a la flota oficial de Pacifictrans Go. Registra tu vehículo y sube tus documentos para validación administrativa.</p>
</div>
<div class="grid-2col">
<div>
<div class="form-group">
<label class="form-label" for="driver-name">Nombre y Apellidos</label>
<input type="text" class="form-input" id="driver-name" placeholder="Nombre del conductor">
</div>
<div class="form-group">
<label class="form-label" for="driver-residence">Lugar de Residencia en Cali (Barrio / Comuna)</label>
<input type="text" class="form-input" id="driver-residence" placeholder="Ej: Barrio Granada, Comuna 2, Cali">
</div>
<div class="grid-2col" style="gap: 1rem; margin-bottom: 0;">
<div class="form-group">
<label class="form-label" for="driver-plate">Placa del Vehículo</label>
<input type="text" class="form-input" id="driver-plate" placeholder="Ej: WLZ-890">
</div>
<div class="form-group">
<label class="form-label" for="driver-model">Marca y Modelo</label>
<input type="text" class="form-input" id="driver-model" placeholder="Renault Duster 2024">
</div>
</div>
</div>
<div>
<div class="form-group">
<label class="form-label">Documentación Obligatoria (Appwrite Storage)</label>
<div style="display: flex; flex-direction: column; gap: 0.75rem;">
<div style="background: rgba(15, 23, 42, 0.9); border: 1px dashed var(--border-glass); padding: 0.85rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 0.85rem; color: #cbd5e1;">📄 SOAT Vigente</span>
<button style="background: rgba(6, 182, 212, 0.15); border: 1px solid var(--accent-cyan); color: var(--accent-cyan); padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; cursor: pointer;">Subir Archivo</button>
</div>
<div style="background: rgba(15, 23, 42, 0.9); border: 1px dashed var(--border-glass); padding: 0.85rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 0.85rem; color: #cbd5e1;">📄 Revisión Técnico-Mecánica</span>
<button style="background: rgba(6, 182, 212, 0.15); border: 1px solid var(--accent-cyan); color: var(--accent-cyan); padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; cursor: pointer;">Subir Archivo</button>
</div>
<div style="background: rgba(15, 23, 42, 0.9); border: 1px dashed var(--border-glass); padding: 0.85rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 0.85rem; color: #cbd5e1;">📄 Tarjeta de Operación Especial</span>
<button style="background: rgba(6, 182, 212, 0.15); border: 1px solid var(--accent-cyan); color: var(--accent-cyan); padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; cursor: pointer;">Subir Archivo</button>
</div>
<div style="background: rgba(15, 23, 42, 0.9); border: 1px dashed var(--border-glass); padding: 0.85rem; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
<span style="font-size: 0.85rem; color: #cbd5e1;">📄 Licencia de Conducción C1 / C2</span>
<button style="background: rgba(6, 182, 212, 0.15); border: 1px solid var(--accent-cyan); color: var(--accent-cyan); padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; cursor: pointer;">Subir Archivo</button>
</div>
</div>
</div>
<button class="btn-primary" style="margin-top: 1rem;">
Enviar Solicitud de Vinculación
</button>
</div>
</div>
</div>
</section>
<!-- TAB 5: CONFIGURACIÓN DE PRECIOS Y TARIFAS -->
<section class="tab-content" id="tab-tarifas">
<div class="glass-panel">
<div class="panel-header">
<h2>⚙️ Configuración de Tarifas y Precios</h2>
<p>Ajuste dinámico de precios para pasajeros, mensajería, fletes, comisiones y penalidades. Los cambios se guardan en tiempo real en la base de datos MongoDB y se reflejan inmediatamente en toda la plataforma.</p>
</div>
<form id="form-tariffs-config">
<div class="grid-2col">
<!-- Columna 1: Transporte de Pasajeros y Plataforma -->
<div>
<h3 style="color: var(--accent-cyan); font-size: 1.15rem; margin-bottom: 1.25rem;">👥 Transporte de Pasajeros</h3>
<div class="form-group">
<label class="form-label" for="cfg-tarifa-pasajero">Tarifa Fija por Pasajero ($ COP)</label>
<input type="number" class="form-input" id="cfg-tarifa-pasajero" value="35000" min="5000" step="1000" required>
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Cobro fijo por cupo en vehículo de 4 pasajeros Cali ↔ Buenaventura.</span>
</div>
<div class="form-group">
<label class="form-label" for="cfg-radio-pooling">Radio Máximo de Agrupación en Cali (Metros)</label>
<input type="number" class="form-input" id="cfg-radio-pooling" value="4000" min="500" step="500" required>
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Distancia máxima geoespacial ($near) para agrupar pasajeros en el mismo vehículo.</span>
</div>
<div class="form-group">
<label class="form-label" for="cfg-penalidad">Penalidad por Cancelación Tardía ($ COP)</label>
<input type="number" class="form-input" id="cfg-penalidad" value="15000" min="0" step="1000" required>
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Cobro automático en Bold si el usuario cancela con viaje ya asignado/activo.</span>
</div>
<div class="form-group">
<label class="form-label" for="cfg-comision">Comisión de la Plataforma (%)</label>
<input type="number" class="form-input" id="cfg-comision" value="15" min="0" max="50" step="1" required>
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Porcentaje retenido por Pacifictrans Go sobre cada servicio completado.</span>
</div>
</div>
<!-- Columna 2: Mensajería y Fletes -->
<div>
<h3 style="color: var(--accent-amber); font-size: 1.15rem; margin-bottom: 1.25rem;">📦 Mensajería y Fletes Especiales</h3>
<div class="form-group">
<label class="form-label" for="cfg-base-paquete">Tarifa Base Logística ($ COP)</label>
<input type="number" class="form-input" id="cfg-base-paquete" value="25000" min="5000" step="1000" required>
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Costo base fijo de recepción y despacho de paquetería.</span>
</div>
<div class="form-group">
<label class="form-label" for="cfg-km-paquete">Costo por Kilómetro Recorrido ($ COP / Km)</label>
<input type="number" class="form-input" id="cfg-km-paquete" value="1200" min="100" step="50" required>
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Multiplicador por distancia en el corredor (115 km Cali-Buenaventura).</span>
</div>
<div class="grid-2col" style="gap: 1rem; margin-bottom: 0;">
<div class="form-group">
<label class="form-label" for="cfg-factor-sobre">Factor Sobre (Doc.)</label>
<input type="number" class="form-input" id="cfg-factor-sobre" value="1.0" min="0.5" max="3" step="0.1" required>
</div>
<div class="form-group">
<label class="form-label" for="cfg-factor-mediano">Factor Mediano (15kg)</label>
<input type="number" class="form-input" id="cfg-factor-mediano" value="1.6" min="0.5" max="5" step="0.1" required>
</div>
</div>
<div class="grid-2col" style="gap: 1rem; margin-bottom: 0;">
<div class="form-group">
<label class="form-label" for="cfg-factor-grande">Factor Grande (30kg)</label>
<input type="number" class="form-input" id="cfg-factor-grande" value="2.2" min="1" max="10" step="0.1" required>
</div>
<div class="form-group">
<label class="form-label" for="cfg-seguro-base">Seguro Base ($ COP)</label>
<input type="number" class="form-input" id="cfg-seguro-base" value="5000" min="0" step="500" required>
</div>
</div>
</div>
</div>
<!-- Botón de Guardado y Estado -->
<div style="margin-top: 2rem; border-top: 1px solid var(--border-glass); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div id="tariffs-save-status" style="font-size: 0.92rem; color: #94a3b8;">
💾 Tarifas sincronizadas con MongoDB.
</div>
<button type="submit" class="btn-primary" id="btn-save-tariffs" style="width: auto; padding: 0.9rem 2.5rem;">
💾 Guardar y Aplicar Nuevas Tarifas
</button>
</div>
</form>
</div>
</section>
<!-- SECCIÓN DESCARGA APK -->
<section class="download-card" id="descarga-apk">
<div>
<span style="color: #22c55e; font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em;">App Oficial Android</span>
<h3 style="font-size: 2.2rem; color: #fff; margin-top: 0.25rem; margin-bottom: 0.75rem;">Pacifictrans Go Móvil</h3>
<p style="color: var(--text-muted); max-width: 500px; font-size: 1rem;">
Instala la aplicación nativa en tu dispositivo Android. Accede a navegación por Waze en un toque, pagos instantáneos con Bold y seguimiento en vivo de tu viaje.
</p>
</div>
<a href="/PacifictransGo.apk" class="btn-apk-large" id="btn-download-apk-footer">
<svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.523 15.3414c-.5511 0-.9993-.4486-.9993-1.0001s.4482-1.0001.9993-1.0001c.552 0 1.0001.4486 1.0001 1.0001s-.4481 1.0001-1.0001 1.0001m-11.046 0c-.5511 0-.9993-.4486-.9993-1.0001s.4482-1.0001.9993-1.0001c.552 0 1.0001.4486 1.0001 1.0001s-.4481 1.0001-1.0001 1.0001m11.4045-6.02l1.997-3.4589c.1408-.2439.0573-.5552-.1866-.696-.2438-.1408-.5551-.0573-.696.1866l-2.0238 3.5054c-1.5037-.6873-3.1979-1.0772-4.9691-1.0772s-3.4654.3899-4.9691 1.0772l-2.0238-3.5054c-.1409-.2439-.4522-.3274-.696-.1866-.2439.1408-.3274.4521-.1866.696l1.997 3.4589c-3.7997 2.0623-6.375 5.9863-6.446 10.5369h24.646c-.071-4.5506-2.6463-8.4746-6.446-10.5369"/>
</svg>
Descargar PacifictransGo.apk (37.1 MB)
</a>
</section>
</div>
</main>
<!-- FOOTER -->
<footer class="footer">
<div style="max-width: 1280px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div>
<strong style="color: #fff;">Pacifictrans Go</strong> — Transporte Especial Cali - Buenaventura
</div>
<div>
Atención y Soporte WhatsApp: <a href="https://wa.me/573167455877" target="_blank" style="color: var(--accent-cyan); text-decoration: none;">+57 316 745 5877</a>
</div>
<div>
© 2026 Almeira Group. Todos los derechos reservados.
</div>
</div>
</footer>
<script src="/js/app.js"></script>
</body>
</html>