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

972 lines
53 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, maximum-scale=1.0, user-scalable=no">
<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">
<!-- PWA & Apple iOS Support -->
<link rel="manifest" href="/manifest.json">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Pacifictrans Go">
<link rel="apple-touch-icon" href="/icons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="192x192" href="/icons/icon-192.png">
<link rel="apple-touch-icon" sizes="512x512" href="/icons/icon-512.png">
<meta name="mobile-web-app-capable" content="yes">
<!-- Leaflet Standard Map CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<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="#conductores">Conductores</a>
<a href="#estadisticas" id="nav-btn-stats">⭐ Estadísticas & Reseñas</a>
<a href="#admin" class="btn-admin-nav" id="nav-btn-admin">
🔒 Panel Administrativo
</a>
<button type="button" class="btn-pwa-install" id="btn-install-pwa" title="Instalar en iPhone o Android">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="5" y="2" width="14" height="20" rx="2" ry="2"></rect>
<line x1="12" y1="18" x2="12.01" y2="18"></line>
</svg>
<span>📲 Instalar App (iPhone / Móvil)</span>
</button>
<!-- Autenticación Usuario estilo Dripzone -->
<div id="auth-nav-container">
<button type="button" class="btn-auth-nav" id="btn-open-auth-modal">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
<circle cx="12" cy="7" r="4"></circle>
</svg>
<span>🔐 Ingresar / Registro</span>
</button>
<div class="user-pill-nav" id="user-profile-badge" style="display: none;">
<span>👤 <strong id="user-display-name">Usuario</strong> <span class="badge-verified">✅ Verificado</span></span>
<button type="button" id="btn-logout" class="btn-logout-small" title="Cerrar Sesión">Salir</button>
</div>
</div>
<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>
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-conductores" id="tab-btn-conductores">
🚗 3. Portal de Conductores
</button>
<button class="tab-btn" data-tab="tab-estadisticas" id="tab-btn-estadisticas">
⭐ 4. Estadísticas & Reseñas
</button>
<button class="tab-btn tab-btn-admin" data-tab="tab-admin" id="tab-btn-admin">
🔒 5. Panel Administrativo
</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="">
</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="Ej: María Fernanda Gómez" value="">
</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="Ej: 300 123 4567" value="">
</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" placeholder="Ej: 300 123 4567" value="">
</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" placeholder="Ej: 310 987 6543" value="">
</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: 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" id="conductores">
<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 4: ESTADÍSTICAS & RESEÑAS -->
<section class="tab-content" id="tab-estadisticas">
<div class="glass-panel">
<div class="panel-header">
<h2>Estadísticas Oficiales & Calificaciones de la Comunidad</h2>
<p>Métricas transparentes de puntualidad, seguridad y satisfacción en el corredor Cali - Buenaventura tanto para pasajeros como para conductores.</p>
</div>
<!-- Métricas Globales del Corredor -->
<div class="stats-overview-grid">
<div class="stat-kpi-card">
<div class="stat-kpi-icon">🚗</div>
<div class="stat-kpi-val" id="stat-total-viajes">384+</div>
<div class="stat-kpi-label">Viajes Completados</div>
<div class="stat-kpi-sub">Corredor Cali ↔ Buenaventura</div>
</div>
<div class="stat-kpi-card">
<div class="stat-kpi-icon">⭐</div>
<div class="stat-kpi-val" id="stat-rating-avg">4.9 / 5.0</div>
<div class="stat-kpi-label">Satisfacción General</div>
<div class="stat-kpi-sub">Basado en 128+ calificaciones</div>
</div>
<div class="stat-kpi-card">
<div class="stat-kpi-icon">⏱️</div>
<div class="stat-kpi-val" id="stat-puntualidad">98.4%</div>
<div class="stat-kpi-label">Índice de Puntualidad</div>
<div class="stat-kpi-sub">Recogidas a tiempo en Cali</div>
</div>
<div class="stat-kpi-card">
<div class="stat-kpi-icon">🛡️</div>
<div class="stat-kpi-val" id="stat-conductores-activos">18</div>
<div class="stat-kpi-label">Conductores Verificados</div>
<div class="stat-kpi-sub">Pólizas y antecedentes al día</div>
</div>
</div>
<!-- Comparativa Analítica: Pasajeros vs Conductores -->
<div class="grid-2col">
<!-- Bloque Pasajeros -->
<div style="background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border-glass); border-radius: 14px; padding: 1.5rem;">
<h3 style="color: var(--accent-cyan); font-size: 1.15rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
<span>👥</span> Métricas Clave para Pasajeros
</h3>
<div class="summary-item">
<span style="color: var(--text-muted);">Tasa de Satisfacción Pasajeros:</span>
<span style="color: #fff; font-weight: 700;">99.2% de aprobación</span>
</div>
<div class="summary-item">
<span style="color: var(--text-muted);">Tiempo Promedio en Ruta (Vía 40):</span>
<span style="color: #fff; font-weight: 700;">2h 15m puerta a puerta</span>
</div>
<div class="summary-item">
<span style="color: var(--text-muted);">Cupos de Transporte Reservados:</span>
<span style="color: var(--accent-cyan); font-weight: 700;">1.536 cupos completados</span>
</div>
<div class="summary-item">
<span style="color: var(--text-muted);">Seguridad Calificada por Usuarios:</span>
<span style="color: #10b981; font-weight: 700;">5.0 / 5.0 (Cero siniestros)</span>
</div>
</div>
<!-- Bloque Conductores -->
<div style="background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border-glass); border-radius: 14px; padding: 1.5rem;">
<h3 style="color: var(--accent-amber); font-size: 1.15rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem;">
<span>🚗</span> Métricas Clave para Conductores
</h3>
<div class="summary-item">
<span style="color: var(--text-muted);">Tasa de Ocupación por Salida:</span>
<span style="color: #fff; font-weight: 700;">4 / 4 cupos (100% de ocupación)</span>
</div>
<div class="summary-item">
<span style="color: var(--text-muted);">Ingreso Neto Promedio por Viaje:</span>
<span style="color: #10b981; font-weight: 700;">$119.000 COP netos</span>
</div>
<div class="summary-item">
<span style="color: var(--text-muted);">Tasa de Aceptación de Despacho:</span>
<span style="color: #fff; font-weight: 700;">97.8% de cumplimiento</span>
</div>
<div class="summary-item">
<span style="color: var(--text-muted);">Calificación Promedio de Conductores:</span>
<span style="color: #fbbf24; font-weight: 700;">4.9 ⭐ (Excelente servicio)</span>
</div>
</div>
</div>
<!-- Muro de Reseñas y Testimonios -->
<div class="reviews-container">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem;">
<div>
<h3 style="color: #fff; font-size: 1.35rem; margin-bottom: 0.25rem;">Opiniones y Calificaciones de la Comunidad</h3>
<p style="color: var(--text-muted); font-size: 0.9rem;">Experiencias verificadas de pasajeros y conductores en la ruta Cali - Buenaventura.</p>
</div>
<button type="button" class="btn-primary" id="btn-open-review-modal" style="width: auto; padding: 0.75rem 1.4rem;">
✍️ Calificar un Viaje o Conductor
</button>
</div>
<div class="reviews-grid" id="reviews-list-grid">
<!-- Renderizado dinámicamente con app.js -->
</div>
</div>
</div>
</section>
<!-- TAB 5: PANEL ADMINISTRATIVO (EXCLUSIVO PERSONAL ADMINISTRATIVO) -->
<section class="tab-content" id="tab-admin">
<div class="glass-panel" id="admin">
<div class="panel-header">
<span class="badge-admin">🔒 Exclusivo • Personal Administrativo</span>
<h2 style="margin-top: 0.5rem;">Panel Administrativo & Radar</h2>
<p>Herramientas operativas reservadas para administración y despacho: Radar satelital GPS en mapa estándar, telemetría de flota, asignación de conductores por cercanía de residencia y configuración de tarifas en MongoDB.</p>
<div style="display: flex; justify-content: center; gap: 0.75rem; margin-top: 1.5rem; flex-wrap: wrap;">
<button type="button" id="btn-admin-subtab-radar" class="admin-pill-btn active">
📡 1. Radar Satelital & Despacho
</button>
<button type="button" id="btn-admin-subtab-tarifas" class="admin-pill-btn">
⚙️ 2. Tarifas & Canales de Atención
</button>
</div>
</div>
<!-- SUB-PANEL 1: RADAR SATELITAL GPS & MAPA ESTÁNDAR CON TOOLTIPS -->
<div id="admin-view-radar">
<div class="radar-map-wrapper">
<div class="radar-map-header">
<div class="radar-live-indicator">
<span class="live-dot"></span>
<div>
<strong>Radar Satelital en Mapa Estándar</strong>
<div style="font-size: 0.78rem; color: #94a3b8;">Ubicación geográfica en tiempo real y telemetría de flota (Cali - Buenaventura)</div>
</div>
</div>
<div class="radar-stats-quick">
<span id="map-fleet-count">4 Vehículos en Flota</span>
<span>•</span>
<span style="color: var(--accent-emerald);">🟢 GPS Activo</span>
</div>
</div>
<!-- CONTENEDOR DEL MAPA LEAFLET -->
<div id="fleet-live-map"></div>
</div>
<!-- Sugerencia de Conductores por Residencia -->
<div style="margin-top: 1.5rem;">
<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>
<!-- SUB-PANEL 2: CONFIGURACIÓN DE TARIFAS Y CANALES OFICIALES -->
<div id="admin-view-tarifas" style="display: none;">
<form id="form-tariffs-config">
<!-- CANALES OFICIALES & WHATSAPP CONFIG -->
<div style="background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem;">
<h3 style="color: #38bdf8; font-size: 1.15rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
<span>📞</span> Canales Oficiales & Número de Atención WhatsApp
</h3>
<p style="color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1.25rem;">
Configura el número oficial de WhatsApp que recibe las notificaciones automáticas de despacho y que se utiliza como canal de soporte y atención en la plataforma web.
</p>
<div class="grid-2col" style="gap: 1.25rem; margin-bottom: 0;">
<div class="form-group" style="margin-bottom: 0;">
<label class="form-label" for="cfg-admin-phone">Número de WhatsApp (+57)</label>
<input type="tel" class="form-input" id="cfg-admin-phone" value="573167455877" placeholder="573167455877" required>
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Número oficial para atención a pasajeros y despacho de conductores.</span>
</div>
<div class="form-group" style="margin-bottom: 0;">
<label class="form-label" for="cfg-admin-name">Nombre del Canal de Atención</label>
<input type="text" class="form-input" id="cfg-admin-name" value="Atención Pacifictrans Go" placeholder="Atención Pacifictrans Go" required>
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Identificador mostrado en enlaces de ayuda y soporte.</span>
</div>
</div>
</div>
<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;">
💾 Configuración y 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 Configuración
</button>
</div>
</form>
</div>
</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 id="footer-support-link" href="https://wa.me/573167455877" target="_blank" style="color: var(--accent-cyan); text-decoration: none;"><span id="footer-support-phone">+57 316 745 5877</span></a>
</div>
<div>
© 2026 Almeira Group. Todos los derechos reservados.
</div>
</div>
</footer>
<!-- MODAL 1: AUTENTICACIÓN DRIPZONE STYLE CON OTP WHATSAPP + EMAIL -->
<div class="pwa-modal-overlay" id="modal-auth-dripzone">
<div class="pwa-modal-card">
<button type="button" class="pwa-modal-close" id="btn-close-auth-modal">✕</button>
<div style="text-align: center; margin-bottom: 1.5rem;">
<span style="display: inline-block; padding: 4px 12px; background: rgba(16, 185, 129, 0.15); border: 1px solid var(--accent-emerald); color: #10b981; border-radius: 20px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase;">
🛡️ Seguridad y Verificación 2FA
</span>
<h3 style="font-size: 1.5rem; color: #fff; margin-top: 0.5rem; margin-bottom: 0.35rem;" id="auth-modal-title">
Acceso Seguro con Verificación OTP
</h3>
<p style="color: var(--text-muted); font-size: 0.88rem;">
Para garantizar la seguridad de conductores y pasajeros, validamos tu identidad mediante código OTP por WhatsApp y correo.
</p>
</div>
<!-- Switch Modo: Iniciar Sesión / Registro -->
<div style="display: flex; gap: 0.5rem; background: rgba(15, 23, 42, 0.9); padding: 4px; border-radius: 10px; margin-bottom: 1.5rem;">
<button type="button" id="btn-auth-mode-login" class="admin-pill-btn active" style="flex: 1; text-align: center;">
Iniciar Sesión
</button>
<button type="button" id="btn-auth-mode-register" class="admin-pill-btn" style="flex: 1; text-align: center;">
Registrarme
</button>
</div>
<!-- PASO 1: Formulario de Identificador -->
<div id="auth-step-1">
<form id="form-auth-request-otp">
<div class="form-group" id="group-auth-name" style="display: none;">
<label class="form-label" for="auth-input-name">Nombre Completo</label>
<input type="text" class="form-input" id="auth-input-name" placeholder="Ej: María Fernanda Gómez">
</div>
<div class="form-group">
<label class="form-label" for="auth-input-phone">Número de WhatsApp (+57)</label>
<input type="tel" class="form-input" id="auth-input-phone" placeholder="Ej: 300 123 4567" required>
<span style="font-size: 0.74rem; color: var(--text-dim); margin-top: 4px; display: block;">Recibirás un código de 6 dígitos al instante en tu WhatsApp.</span>
</div>
<div class="form-group">
<label class="form-label" for="auth-input-email">Correo Electrónico</label>
<input type="email" class="form-input" id="auth-input-email" placeholder="correo@ejemplo.com">
</div>
<div id="auth-request-error" style="display: none; color: #f87171; font-size: 0.85rem; margin-bottom: 1rem; text-align: center;"></div>
<button type="submit" class="btn-primary" id="btn-submit-send-otp" style="margin-top: 0.5rem;">
📲 Enviar Código de Verificación OTP
</button>
</form>
</div>
<!-- PASO 2: Ingreso de los 6 dígitos OTP -->
<div id="auth-step-2" style="display: none; text-align: center;">
<p style="color: #cbd5e1; font-size: 0.92rem; margin-bottom: 0.5rem;">
Ingresa el código de 6 dígitos que enviamos a tu WhatsApp:
</p>
<strong style="color: var(--accent-cyan); font-size: 1.05rem;" id="auth-sent-target">+57 •••••••</strong>
<!-- 6 Cajas OTP -->
<div class="otp-boxes-wrapper">
<input type="text" maxlength="1" class="otp-box" id="otp-1" autofocus>
<input type="text" maxlength="1" class="otp-box" id="otp-2">
<input type="text" maxlength="1" class="otp-box" id="otp-3">
<input type="text" maxlength="1" class="otp-box" id="otp-4">
<input type="text" maxlength="1" class="otp-box" id="otp-5">
<input type="text" maxlength="1" class="otp-box" id="otp-6">
</div>
<div id="auth-verify-error" style="display: none; color: #f87171; font-size: 0.85rem; margin-bottom: 1rem;"></div>
<button type="button" class="btn-primary" id="btn-submit-verify-otp">
✅ Validar y Acceder
</button>
<div style="margin-top: 1rem;">
<button type="button" id="btn-auth-resend-otp" style="background: transparent; border: none; color: var(--accent-cyan); font-size: 0.85rem; cursor: pointer; text-decoration: underline;">
¿No recibiste el código? Reenviar OTP
</button>
</div>
</div>
</div>
</div>
<!-- MODAL 2: CALIFICAR VIAJE Y COMENTARIOS -->
<div class="pwa-modal-overlay" id="modal-add-review">
<div class="pwa-modal-card">
<button type="button" class="pwa-modal-close" id="btn-close-review-modal">✕</button>
<div style="text-align: center; margin-bottom: 1.5rem;">
<span style="font-size: 2rem;">⭐</span>
<h3 style="font-size: 1.4rem; color: #fff; margin-top: 0.35rem; margin-bottom: 0.25rem;">
Calificar Experiencia de Viaje
</h3>
<p style="color: var(--text-muted); font-size: 0.88rem;">
Tu reseña ayuda a mantener los más altos estándares de calidad y seguridad en Pacifictrans Go.
</p>
</div>
<form id="form-submit-review">
<div style="text-align: center; margin-bottom: 1.25rem;">
<label class="form-label" style="margin-bottom: 0.25rem;">Puntuación</label>
<div class="star-rating-select" id="star-picker">
<span data-star="1" class="selected">★</span>
<span data-star="2" class="selected">★</span>
<span data-star="3" class="selected">★</span>
<span data-star="4" class="selected">★</span>
<span data-star="5" class="selected">★</span>
</div>
<input type="hidden" id="review-input-score" value="5">
</div>
<div class="grid-2col" style="gap: 1rem;">
<div class="form-group">
<label class="form-label" for="review-input-name">Tu Nombre</label>
<input type="text" class="form-input" id="review-input-name" placeholder="Tu Nombre" required>
</div>
<div class="form-group">
<label class="form-label" for="review-input-role">Tu Rol</label>
<select class="form-select" id="review-input-role">
<option value="PASAJERO" selected>Pasajero</option>
<option value="CONDUCTOR">Conductor</option>
</select>
</div>
</div>
<div class="form-group">
<label class="form-label" for="review-input-target">Conductor o Grupo Calificado</label>
<input type="text" class="form-input" id="review-input-target" placeholder="Ej: Mario Fernando G. (Conductor)" value="Mario Fernando G.">
</div>
<div class="form-group">
<label class="form-label" for="review-input-comment">Tu Comentario / Experiencia</label>
<textarea class="form-input" id="review-input-comment" rows="3" placeholder="Describe qué tal fue la puntualidad, el trato, la comodidad del vehículo y la seguridad en la ruta..." required></textarea>
</div>
<button type="submit" class="btn-primary" id="btn-submit-review" style="margin-top: 0.5rem;">
⭐ Publicar Mi Calificación
</button>
</form>
</div>
</div>
<!-- MODAL 3: INSTALACIÓN PWA IPHONE / IPAD & ANDROID -->
<div class="pwa-modal-overlay" id="modal-pwa-install">
<div class="pwa-modal-card">
<button type="button" class="pwa-modal-close" id="btn-close-pwa-modal">✕</button>
<div style="text-align: center; margin-bottom: 1.5rem;">
<span style="font-size: 2.2rem;">📲</span>
<h3 style="font-size: 1.4rem; color: #fff; margin-top: 0.35rem; margin-bottom: 0.25rem;">
Instalar Pacifictrans Go en tu Móvil
</h3>
<p style="color: var(--text-muted); font-size: 0.88rem;">
Accede instantáneamente sin barras de navegación y con soporte offline.
</p>
</div>
<!-- Pasos para iPhone / iPad Safari -->
<div style="margin-bottom: 1.5rem;">
<h4 style="color: #38bdf8; font-size: 1rem; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem;">
<span>🍏</span> En iPhone / iPad (Safari)
</h4>
<div class="pwa-step-box">
<div class="pwa-step-num">1</div>
<div class="pwa-step-content">
Abre esta página en el navegador <strong>Safari</strong> de tu iPhone.
</div>
</div>
<div class="pwa-step-box">
<div class="pwa-step-num">2</div>
<div class="pwa-step-content">
Toca el botón <strong>Compartir</strong> (icono de cuadrado con flecha hacia arriba ⬆️ o ⎋) en la barra inferior.
</div>
</div>
<div class="pwa-step-box">
<div class="pwa-step-num">3</div>
<div class="pwa-step-content">
Desliza hacia abajo y selecciona <strong>"Agregar al inicio"</strong> (o <em>"Añadir a pantalla de inicio"</em> ➕).
</div>
</div>
<div class="pwa-step-box" style="margin-bottom: 0;">
<div class="pwa-step-num">4</div>
<div class="pwa-step-content">
Toca <strong>"Agregar"</strong> en la esquina superior derecha. ¡Listo! Quedará instalada como app nativa.
</div>
</div>
</div>
<!-- Opción para Android -->
<div style="border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 1.25rem; display: flex; gap: 0.75rem; justify-content: center;">
<button type="button" class="btn-primary" id="btn-trigger-android-pwa" style="width: auto; padding: 0.65rem 1.25rem;">
🤖 Instalar en Android
</button>
<a href="/PacifictransGo.apk" class="btn-primary" style="width: auto; padding: 0.65rem 1.25rem; background: rgba(255,255,255,0.08); color: #fff; border: 1px solid var(--border-glass);">
Descargar APK (37.1 MB)
</a>
</div>
</div>
</div>
<!-- LEAFLET JS PARA EL RADAR MAP -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<!-- LÓGICA PRINCIPAL DE LA PLATAFORMA -->
<script src="/js/app.js"></script>
</body>
</html>