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

2147 lines
123 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>Pacific Trans 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 en línea y QR Bre-B.">
<meta property="og:title" content="Pacific Trans 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="Pacific Trans 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 (Local Autónomo con Fallback) -->
<link rel="stylesheet" href="css/leaflet.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- BANNER NATIVO DE ESTADO DE RED & DESCONEXIÓN EN RUTA -->
<div id="native-offline-banner" class="native-offline-banner" style="display: none;">
<div class="offline-banner-content">
<span class="offline-dot"></span>
<span>📡 Sin conexión a internet en ruta (Modo Seguro Activo). Tus datos y reservas están seguros localmente.</span>
</div>
</div>
<!-- NAVBAR -->
<header class="navbar">
<a href="#" class="brand">
<div class="brand-badge">P</div>
<div class="brand-text">
<h1 class="brand-title">Pacific Trans <span>GO</span></h1>
<span>Cali ↔ Buenaventura</span>
</div>
</a>
<nav class="nav-links">
<a href="#reservas" id="nav-link-reservas" class="active">🚗 Viajar</a>
<a href="#fletes" id="nav-link-fletes">📦 Envíos</a>
<a href="#estadisticas" id="nav-link-reviews">⭐ Reseñas</a>
<a href="#descarga-apk" id="nav-link-app">📲 App Móvil</a>
<!-- Botón de apertura de Dashboard Administrativo (visible solo para Administrador) -->
<button type="button" class="btn-open-dashboard-header" id="nav-btn-open-admin" style="display: none;">
🛡️ Dashboard Administrativo
</button>
<!-- Botón de apertura de Portal Conductor (visible solo para Conductor) -->
<button type="button" class="btn-open-driver-header" id="nav-btn-open-driver" style="display: none;">
🚗 Mi Portal de Conductor
</button>
<!-- Autenticación Usuario Pacific Trans GO -->
<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 style="cursor: pointer;" id="btn-open-user-profile" title="Ver y Editar Mi Información Personal">👤 <strong id="user-display-name">Usuario</strong> <span class="badge-verified" id="user-role-badge">✅ Verificado</span></span>
<button type="button" id="btn-edit-profile-nav" class="btn-logout-small" style="background: rgba(6, 182, 212, 0.18); color: #38bdf8; border: 1px solid rgba(6, 182, 212, 0.35); margin-right: 4px;" title="Editar Información Personal">⚙️ Mi Perfil</button>
<button type="button" id="btn-logout" class="btn-logout-small" title="Cerrar Sesión">Salir</button>
</div>
</div>
<!-- Centro de Notificaciones & Contador de Mensajes Pendientes -->
<div class="notification-wrapper" id="notif-wrapper">
<button type="button" class="btn-notif-bell" id="btn-toggle-notifs" title="Notificaciones y Mensajes Pendientes">
<svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"></path>
<path d="M13.73 21a2 2 0 0 1-3.46 0"></path>
</svg>
<span class="notif-badge" id="notif-unread-count" style="display: none;">0</span>
</button>
<!-- Dropdown de Notificaciones -->
<div class="notif-dropdown" id="notif-dropdown-panel">
<div class="notif-header">
<div style="display: flex; align-items: center; gap: 0.5rem;">
<strong>🔔 Notificaciones</strong>
<span class="notif-header-badge" id="notif-header-unread" style="display: none;">0 nuevas</span>
</div>
<button type="button" class="btn-mark-all-read" id="btn-mark-all-read">Marcar leídas</button>
</div>
<div class="notif-list" id="notif-items-list">
<!-- Renderizado dinámicamente por app.js -->
</div>
<div class="notif-footer">
<a href="#" target="_blank" id="notif-wa-link" style="color: var(--accent-cyan); text-decoration: none; font-size: 0.8rem; display: flex; align-items: center; justify-content: center; gap: 0.35rem;">
<span>💬 Contactar a Central de Soporte WhatsApp</span>
</a>
</div>
</div>
</div>
</nav>
</header>
<!-- HERO SECTION -->
<main>
<!-- VISTA 1: PORTAL PÚBLICO LIMPIO (CLIENTES Y PASAJEROS) -->
<div id="view-public-portal">
<!-- HERO SECTION -->
<section class="hero">
<div class="hero-content">
<div class="hero-pill">
<span>⚡ Corredor Exclusivo Especial</span>
<span>•</span>
<span>100% Seguro con QR Bre-B y En Línea</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 & Pagos Seguros</span>
</div>
</div>
<div style="display: flex; gap: 1rem; flex-wrap: wrap;">
<a href="#reservas" id="hero-btn-book" class="btn-primary" style="width: auto; padding: 0.9rem 1.8rem;">
🚗 Reservar Mi Cupo Ahora
</a>
<a href="#fletes" id="hero-btn-flete" 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="Pacific Trans 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>
<!-- SERVICIOS PÚBLICOS PRINCIPALES (SELECTOR ELEGANTE) -->
<div class="main-wrapper" id="reservas">
<div class="public-service-switcher">
<button type="button" class="service-pill-btn active" id="btn-service-pasajeros" data-target="tab-pasajeros">
🚗 1. Viajes de Pasajeros Puerta a Puerta
</button>
<button type="button" class="service-pill-btn" id="btn-service-fletes" data-target="tab-fletes">
📦 2. Mensajería & Fletes Especiales
</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">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.35rem;">
<label class="form-label" for="cali-address" style="margin-bottom: 0;">Dirección Principal de Recogida en Cali (Domicilio)</label>
<button type="button" id="btn-native-gps-cali" class="btn-gps-chip" title="Detectar mi ubicación exacta por GPS satelital">
📍 Mi Ubicación GPS
</button>
</div>
<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>
<!-- SELECTOR DE CANTIDAD DE CUPOS (1 a 4 Pasajeros) -->
<div class="form-group" style="margin-top: 1.25rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
<label class="form-label" style="margin-bottom: 0;">👥 ¿Cuántos cupos deseas reservar?</label>
<span id="badge-cupos-selected" class="badge-seats-counter">1 Cupo Seleccionado</span>
</div>
<div class="seat-qty-selector" id="seat-qty-selector">
<button type="button" class="btn-qty-seat active" data-seats="1">
<span class="seat-qty-number">1</span>
<span class="seat-qty-desc">Solo Yo</span>
</button>
<button type="button" class="btn-qty-seat" data-seats="2">
<span class="seat-qty-number">2</span>
<span class="seat-qty-desc">2 Cupos</span>
</button>
<button type="button" class="btn-qty-seat" data-seats="3">
<span class="seat-qty-number">3</span>
<span class="seat-qty-desc">3 Cupos</span>
</button>
<button type="button" class="btn-qty-seat" data-seats="4">
<span class="seat-qty-number">4</span>
<span class="seat-qty-desc">Vehículo 4/4</span>
</button>
</div>
</div>
<!-- CONTENEDOR DINÁMICO DE DATOS DE CADA PASAJERO -->
<div style="margin-top: 1.25rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;">
<label class="form-label" style="margin-bottom: 0;">📋 Información de los Pasajeros</label>
<span style="font-size: 0.75rem; color: #94a3b8;">Requerido para Seguro SOAT y Planilla</span>
</div>
<div id="passengers-cards-container" style="display: flex; flex-direction: column; gap: 1rem;">
<!-- Se genera dinámicamente con JavaScript -->
</div>
</div>
<!-- SELECTOR DE MÉTODO DE PAGO -->
<div class="form-group" style="margin-top: 1.5rem;">
<label class="form-label">💳 Método de Pago</label>
<div class="payment-method-selector" id="payment-method-options">
<label class="payment-method-card active" data-method="BRE_B">
<input type="radio" name="pool-payment-radio" value="BRE_B" checked>
<div class="payment-card-body">
<span class="payment-title">⚡ Transferencia QR Bre-B</span>
<span class="payment-sub">Inmediato 24/7 (Cualquier banco o billetera)</span>
</div>
</label>
<label class="payment-method-card" data-method="BOLD">
<input type="radio" name="pool-payment-radio" value="BOLD">
<div class="payment-card-body">
<span class="payment-title">💳 Pago en Línea</span>
<span class="payment-sub">Tarjetas Débito / Crédito, PSE y Nequi</span>
</div>
</label>
<label class="payment-method-card" data-method="EFECTIVO">
<input type="radio" name="pool-payment-radio" value="EFECTIVO">
<div class="payment-card-body">
<span class="payment-title">💵 Efectivo al Conductor</span>
<span class="payment-sub">Pagas directamente al abordar el vehículo</span>
</div>
</label>
</div>
</div>
<!-- BONO O CUPÓN DE DESCUENTO (PASAJEROS) -->
<div class="coupon-input-group" style="margin-top: 1.25rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;">
<label class="form-label" for="pool-coupon-code" style="margin-bottom: 0; font-size: 0.85rem; display: flex; align-items: center; gap: 0.35rem;">
<span>🎟️</span> ¿Tienes un Bono o Cupón de Descuento?
</label>
<span style="font-size: 0.72rem; color: #38bdf8; font-weight: 600;">(Ej: PACIFICO10, BONOVIAJE5K)</span>
</div>
<div style="display: flex; gap: 0.5rem;">
<input type="text" class="form-input" id="pool-coupon-code" placeholder="Código (ej: PACIFICO10)" style="text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0;">
<button type="button" class="btn-toggle-payment" id="btn-apply-pool-coupon" style="white-space: nowrap; padding: 0.5rem 1.2rem; font-weight: 700;">
Aplicar
</button>
</div>
<div id="pool-coupon-feedback" style="display: none;"></div>
</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;" id="summary-capacity-text">Máximo 4 Pasajeros (1 cupo solicitado)</span>
</div>
<div class="summary-item">
<span style="color: var(--text-muted);">Cupos a Reservar:</span>
<span style="color: var(--accent-cyan); font-weight: 700;" id="summary-seats-pill">1 Pasajero (1 cupo)</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);">Seguro Contractual:</span>
<span style="color: var(--accent-emerald); font-weight: 600;">Póliza y Planilla SOAT</span>
</div>
<div class="summary-item" id="summary-subtotal-row" style="display: none; border-top: 1px dashed var(--border-glass); padding-top: 0.5rem; margin-top: 0.5rem;">
<span style="color: var(--text-muted);">Subtotal:</span>
<span style="color: #fff; font-weight: 600;" id="summary-subtotal-price">$35.000 COP</span>
</div>
<div class="summary-discount-row" id="summary-discount-row" style="display: none;">
<span>🎟️ Descuento Cupón:</span>
<span id="summary-discount-amount">- $0 COP</span>
</div>
<div class="bold-gateway-badge" id="summary-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 id="summary-gateway-badge-text">⚡ Transferencia directa por <strong>QR Bre-B</strong> o Pago en Línea Seguro</span>
</div>
</div>
<div>
<div class="summary-total" style="display: flex; justify-content: space-between; align-items: baseline;">
<span style="font-weight: 600; color: #fff;" id="summary-price-label">Total a Pagar (1 Cupo):</span>
<span class="total-price" id="summary-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>
<span id="btn-book-text">Confirmar y Pagar 1 Cupo ($35.000 COP)</span>
</button>
</div>
</div>
</div>
<!-- Alerta tras completar cupo o confirmación -->
<div id="pool-dispatch-alert" style="display: none; margin-top: 2rem; background: rgba(14, 165, 233, 0.12); border: 1px solid rgba(14, 165, 233, 0.4); border-radius: 14px; padding: 1.5rem;">
<div style="display: flex; gap: 1rem; align-items: flex-start;">
<span style="font-size: 2.2rem;" id="alert-icon">🚗💨</span>
<div style="flex: 1;">
<h4 style="color: #38bdf8; font-size: 1.15rem; margin-bottom: 0.4rem;" id="alert-title">¡Reserva de Cupos Confirmada!</h4>
<p style="color: #cbd5e1; font-size: 0.92rem; margin-bottom: 0.75rem;" id="alert-message">
Tu reserva ha sido procesada exitosamente en el sistema de pooling inteligente de Pacific Trans GO.
</p>
<div id="alert-passengers-breakdown" style="margin-bottom: 0.75rem; font-size: 0.88rem; color: #e2e8f0;"></div>
<div id="alert-bold-payment-area" style="display: none; margin-top: 1rem;"></div>
<div style="font-size: 0.85rem; color: #94a3b8;" id="alert-footer-note">
📲 Notificaciones de confirmación e itinerario enviadas por WhatsApp oficial (+57 316 745 5877).
</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-name">Nombre del Remitente</label>
<input type="text" class="form-input" id="sender-name" placeholder="Ej: Carlos Almeira" value="">
</div>
<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>
<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 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>
<!-- BONO O CUPÓN DE DESCUENTO (ENCOMIENDAS) -->
<div class="coupon-input-group" style="margin-top: 1.25rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem;">
<label class="form-label" for="freight-coupon-code" style="margin-bottom: 0; font-size: 0.85rem; display: flex; align-items: center; gap: 0.35rem;">
<span>🎟️</span> ¿Tienes un Bono o Cupón para tu Envío?
</label>
<span style="font-size: 0.72rem; color: #fbbf24; font-weight: 600;">(Ej: ENVIOYA, PACIFICO10)</span>
</div>
<div style="display: flex; gap: 0.5rem;">
<input type="text" class="form-input" id="freight-coupon-code" placeholder="Código de cupón (ej: ENVIOYA)" style="text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em; margin-bottom: 0;">
<button type="button" class="btn-toggle-payment" id="btn-apply-freight-coupon" style="white-space: nowrap; padding: 0.5rem 1.2rem; font-weight: 700;">
Aplicar
</button>
</div>
<div id="freight-coupon-feedback" style="display: none;"></div>
</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="summary-item" id="freight-subtotal-row" style="display: none; border-top: 1px dashed var(--border-glass); padding-top: 0.5rem; margin-top: 0.5rem;">
<span style="color: var(--text-muted);">Subtotal Flete:</span>
<span style="color: #fff; font-weight: 600;" id="freight-subtotal-price">$197.100 COP</span>
</div>
<div class="summary-discount-row" id="freight-discount-row" style="display: none;">
<span>🎟️ Descuento Cupón:</span>
<span id="freight-discount-amount">- $0 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 Pago en Línea o QR Bre-B</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" id="btn-book-freight" style="margin-top: 1rem;">
Generar Guía y Proceder al Pago
</button>
</div>
</div>
</div>
</div>
</section>
</div> <!-- /main-wrapper (servicios publicos) -->
<!-- TAB 4: ESTADÍSTICAS & RESEÑAS -->
<section class="main-wrapper reviews-section" id="estadisticas" style="padding-top: 0.5rem;">
<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>
<!-- SECCIÓN DESCARGA APK -->
<!-- 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;">Pacific Trans 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 QR Bre-B o en línea 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 App
</a>
</section>
</div>
</main>
</div> <!-- /view-public-portal -->
<!-- VISTA 2: DASHBOARD EXCLUSIVO PARA ADMINISTRADORES -->
<div id="view-admin-dashboard" class="admin-dashboard-container" style="display: none;">
<!-- ESCUDO DE SEGURIDAD SI NO ES ADMINISTRADOR -->
<div id="admin-security-gate" class="security-shield-card" style="display: none;">
<div class="security-shield-icon">🛡️</div>
<h2 style="color: #fff; font-size: 1.5rem; margin-bottom: 0.5rem;">Zona Restringida: Central de Mando Administrativo</h2>
<p style="color: #cbd5e1; font-size: 0.95rem; margin-bottom: 1.5rem;">
Esta central de control, radar satelital y despacho financiero Bre-B requiere permisos exclusivos con rol de <strong>Administrador</strong>.
</p>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<button type="button" class="btn-primary" id="btn-gate-admin-login" style="width: auto; padding: 0.75rem 1.75rem;">
🔐 Iniciar Sesión como Administrador
</button>
<button type="button" class="btn-return-public" id="btn-gate-back-public" style="width: auto; padding: 0.75rem 1.5rem;">
← Volver al Sitio Público
</button>
</div>
</div>
<!-- CONSOLA EJECUTIVA ADMINISTRATIVA -->
<div id="admin-console-content">
<!-- TOPBAR EJECUTIVO DE CONTROL -->
<div class="admin-topbar">
<div class="admin-topbar-title">
<span class="brand-badge" style="width: 38px; height: 38px; font-size: 1rem;">🛡️</span>
<div>
<h2 style="color: #fff; font-size: 1.35rem; margin: 0; line-height: 1.2;">
Central de Mando Administrativo & Despacho
</h2>
<div style="display: flex; align-items: center; gap: 0.6rem; margin-top: 0.35rem; flex-wrap: wrap;">
<span class="admin-status-indicator">● Radar GPS Conectado</span>
<span class="admin-wa-badge" id="admin-wa-group-badge">👥 Grupo: Pacific Trans Notificaciones</span>
<span style="font-size: 0.8rem; color: #94a3b8;">Admin: <strong style="color: #fff;" id="admin-user-name">Administrador General</strong></span>
</div>
</div>
</div>
<div style="display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;">
<button type="button" class="btn-return-public" id="btn-admin-view-public">
🌐 Ver Portal Público
</button>
<button type="button" class="btn-logout-small" id="btn-admin-logout" style="padding: 0.5rem 1rem; font-size: 0.85rem;">
Cerrar Sesión
</button>
</div>
</div>
<!-- BARRA DE MENÚ DE NAVEGACIÓN ADMINISTRATIVA POR ROLES -->
<nav class="role-nav-menubar" id="admin-role-nav-menubar">
<div class="menubar-items">
<button type="button" id="btn-admin-subtab-radar" class="menu-item-btn active" data-subtab="radar">
<span class="menu-item-icon">🛰️</span>
<span class="menu-item-label">Radar Satelital & Despacho</span>
<span class="menu-item-indicator"></span>
</button>
<button type="button" id="btn-admin-subtab-liquidaciones" class="menu-item-btn" data-subtab="liquidaciones">
<span class="menu-item-icon">💰</span>
<span class="menu-item-label">Liquidaciones & Bre-B</span>
<span id="admin-payouts-badge" class="menu-badge" style="display:none;">0</span>
<span class="menu-item-indicator"></span>
</button>
<button type="button" id="btn-admin-subtab-tarifas" class="menu-item-btn" data-subtab="tarifas">
<span class="menu-item-icon">⚙️</span>
<span class="menu-item-label">Tarifas Base & Canales</span>
<span class="menu-item-indicator"></span>
</button>
<button type="button" id="btn-admin-subtab-cupones" class="menu-item-btn" data-subtab="cupones">
<span class="menu-item-icon">🎟️</span>
<span class="menu-item-label">Bonos & Cupones</span>
<span class="menu-item-indicator"></span>
</button>
<button type="button" id="btn-admin-subtab-administradores" class="menu-item-btn" data-subtab="administradores">
<span class="menu-item-icon">👥</span>
<span class="menu-item-label">Equipo de Administradores</span>
<span class="menu-item-indicator"></span>
</button>
<button type="button" id="btn-admin-subtab-facturacion" class="menu-item-btn" data-subtab="facturacion">
<span class="menu-item-icon">📑</span>
<span class="menu-item-label">Cierres & Facturación DIAN</span>
<span class="menu-item-indicator"></span>
</button>
</div>
</nav>
<!-- CONTENEDOR PRINCIPAL DE MÓDULOS ADMINISTRATIVOS -->
<div class="glass-panel" id="admin-modules-container" style="padding: 1.5rem;">
<!-- 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 (CON GRUPOS SEPARADOS POR APP) -->
<div style="background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem;">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 0.5rem;">
<h3 style="color: #38bdf8; font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 0.5rem;">
<span>👥</span> Canales de Atención & Grupos de WhatsApp por App
</h3>
<button type="button" class="btn-toggle-payment" id="btn-detect-wa-groups" style="font-size: 0.8rem; padding: 0.35rem 0.85rem;">
🔍 Auto-Detectar Grupos en WhatsApp
</button>
</div>
<p style="color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1.25rem;">
Las notificaciones operativas y de despacho de viajes de Pacific Trans GO se envían automáticamente al grupo oficial <strong>Pacific Trans Notificaciones</strong>.
</p>
<div class="form-group" style="margin-bottom: 1rem;">
<label class="form-label" for="cfg-group-pacifictrans">👥 Grupo WhatsApp Oficial: Pacific Trans GO</label>
<input type="text" class="form-input" id="cfg-group-pacifictrans" value="Pacific Trans Notificaciones" placeholder="Pacific Trans Notificaciones" required>
<span id="badge-pacific-jid" style="font-size: 0.75rem; color: #34d399; margin-top: 4px; display: block;">✓ Conectado a grupo oficial de despacho</span>
</div>
<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 Administrador (+57)</label>
<input type="tel" class="form-input" id="cfg-admin-phone" value="" placeholder="Ej: 573001234567" required>
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Número de WhatsApp oficial para alertas prioritarias directas.</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 Pacific Trans GO" placeholder="Atención Pacific Trans GO" required>
<span style="font-size: 0.75rem; color: var(--text-dim); margin-top: 4px; display: block;">Identificador en enlaces y botones de 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 de penalidad 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 Pacific Trans 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>
<!-- SUB-PANEL 3: CONTROL DE PAGOS, COMISIONES & TRANSFERENCIAS BRE-B -->
<div id="admin-view-liquidaciones" style="display: none;">
<!-- BANNER INFORMATIVO BRE-B -->
<div style="background: linear-gradient(135deg, rgba(30, 27, 75, 0.85), rgba(88, 28, 135, 0.5)); border: 1px solid rgba(139, 92, 246, 0.4); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.75rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div>
<div style="display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem;">
<span class="breb-brand-badge">⚡ Bre-B BANREP</span>
<strong style="color: #fff; font-size: 1.15rem;">Control Financiero & Pagos Interoperables</strong>
</div>
<p style="color: #cbd5e1; font-size: 0.88rem; margin: 0; max-width: 650px;">
Monitorea el estado de pago individual de cada pasajero (en línea o efectivo). Al terminar el recorrido, la plataforma calcula la comisión oficial (15%) y asigna automáticamente el saldo al conductor para transferencias inmediatas 24/7 vía <strong>Bre-B</strong>.
</p>
</div>
<div>
<button type="button" id="btn-refresh-settlements" class="btn-toggle-payment" style="padding: 0.6rem 1.25rem;">
🔄 Actualizar Balances
</button>
</div>
</div>
<!-- KPIS GLOBALES DE RECAUDO Y COMISIONES -->
<div class="financial-summary-grid">
<div class="fin-metric-card" style="border-top: 3px solid #06b6d4;">
<div class="fin-metric-label">Recaudo Online Plataforma</div>
<div class="fin-metric-val" id="metric-recaudo-plataforma" style="color: #38bdf8;">$0</div>
<span style="font-size: 0.72rem; color: #94a3b8;">En Línea / Bre-B</span>
</div>
<div class="fin-metric-card" style="border-top: 3px solid #f59e0b;">
<div class="fin-metric-label">Recaudos en Efectivo</div>
<div class="fin-metric-val" id="metric-recaudo-efectivo" style="color: #fbbf24;">$0</div>
<span style="font-size: 0.72rem; color: #94a3b8;">Cobrado en Mano por Chofer</span>
</div>
<div class="fin-metric-card" style="border-top: 3px solid #10b981;">
<div class="fin-metric-label">Comisión Pacific Trans GO (15%)</div>
<div class="fin-metric-val" id="metric-comision-total" style="color: #34d399;">$0</div>
<span style="font-size: 0.72rem; color: #94a3b8;">Ingresos Operativos</span>
</div>
<div class="fin-metric-card" style="border-top: 3px solid #ec4899;">
<div class="fin-metric-label">Transferido vía Bre-B</div>
<div class="fin-metric-val" id="metric-transferido-breb" style="color: #f472b6;">$0</div>
<span style="font-size: 0.72rem; color: #94a3b8;">Pagos Inmediatos 24/7</span>
</div>
</div>
<!-- BANDEJA DE CONTROL DE SOLICITUDES DE TRANSFERENCIA BRE-B (ADMINISTRACIÓN) -->
<div style="background: rgba(15, 23, 42, 0.85); border: 1px solid rgba(236, 72, 153, 0.35); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem;">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;">
<div>
<div style="display: flex; align-items: center; gap: 0.5rem;">
<span class="breb-brand-badge">⚡ Control Bre-B</span>
<h3 style="color: #fff; font-size: 1.25rem; margin: 0;">
Solicitudes de Transferencia de Conductores
</h3>
</div>
<p style="color: var(--text-muted); font-size: 0.85rem; margin: 0.35rem 0 0;">
Bandeja de solicitudes enviadas por los conductores. El administrador encargado autoriza y ejecuta la transferencia inmediata por <strong>Bre-B</strong>.
</p>
</div>
<div style="display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;">
<select id="filter-payout-requests-status" class="form-select" style="width: auto; padding: 0.4rem 0.8rem; font-size: 0.82rem;">
<option value="TODAS">Todas las Solicitudes</option>
<option value="PENDIENTE" selected>🟡 Solo Pendientes</option>
<option value="TRANSFERIDA_BRE_B">🟢 Transferidas Bre-B</option>
<option value="RECHAZADA">🔴 Rechazadas</option>
</select>
<button type="button" id="btn-refresh-payout-requests" class="btn-toggle-payment" style="padding: 0.4rem 0.85rem; font-size: 0.82rem;">
🔄 Actualizar Solicitudes
</button>
</div>
</div>
<!-- CONTENEDOR DE SOLICITUDES -->
<div id="admin-payout-requests-list">
<div style="text-align: center; padding: 2rem; color: #94a3b8;">
Consultando solicitudes de transferencia...
</div>
</div>
</div>
<!-- GESTIÓN DEL VIAJE PLANIFICADO SELECCIONADO -->
<div style="background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem; margin-bottom: 2rem;">
<div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.25rem;">
<div>
<h3 style="color: #fff; font-size: 1.2rem; margin: 0; display: flex; align-items: center; gap: 0.5rem;">
<span>🚗</span> Control de Pagos del Viaje Planificado
</h3>
<p style="color: var(--text-muted); font-size: 0.85rem; margin: 0.25rem 0 0;">
Verifica qué pasajero ya pagó en línea y quién tiene pago pendiente en efectivo al abordar.
</p>
</div>
<div>
<label for="select-trip-to-settle" style="font-size: 0.8rem; color: var(--text-muted); margin-right: 0.5rem;">Seleccionar Viaje:</label>
<select id="select-trip-to-settle" class="form-select" style="width: auto; display: inline-block; padding: 0.45rem 1rem;">
<!-- Cargado dinámicamente con app.js -->
</select>
</div>
</div>
<!-- CONTENEDOR DINÁMICO DEL DETALLE DEL VIAJE -->
<div id="trip-settlement-detail-container">
<div style="text-align: center; padding: 2rem; color: #94a3b8;">
Cargando información del viaje planificado...
</div>
</div>
</div>
<!-- HISTORIAL DE VIAJES LIQUIDADOS RECIENTES -->
<div style="background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
<h3 style="color: #fff; font-size: 1.15rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
<span>📋</span> Historial de Recorridos Completados & Liquidaciones
</h3>
<div id="settlements-history-list">
<!-- Renderizado por app.js -->
</div>
</div>
</div>
<!-- SUB-PANEL 4: SISTEMA DE BONOS Y CUPONES DE DESCUENTO -->
<div id="admin-view-cupones" style="display: none;">
<!-- BANNER INFORMATIVO CUPONES -->
<div style="background: linear-gradient(135deg, rgba(15, 23, 42, 0.9), rgba(14, 165, 233, 0.2)); border: 1px solid rgba(14, 165, 233, 0.35); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.75rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div>
<div style="display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem;">
<span style="font-size: 1.4rem;">🎟️</span>
<strong style="color: #fff; font-size: 1.15rem;">Sistema Centralizado de Bonos & Cupones de Descuento</strong>
</div>
<p style="color: #cbd5e1; font-size: 0.88rem; margin: 0; max-width: 680px;">
Crea y administra promociones para el corredor Cali - Buenaventura. Define descuentos en <strong>Porcentaje (%)</strong> o <strong>Monto Fijo ($ COP)</strong> aplicables a viajes de pasajeros, encomiendas o ambos.
</p>
</div>
<div>
<button type="button" id="btn-refresh-coupons" class="btn-toggle-payment" style="padding: 0.6rem 1.25rem;">
🔄 Actualizar Cupones
</button>
</div>
</div>
<!-- KPIS DE CUPONES -->
<div class="financial-summary-grid" style="margin-bottom: 1.75rem;">
<div class="fin-metric-card" style="border-top: 3px solid #38bdf8;">
<div class="fin-metric-label">Total Cupones Creados</div>
<div class="fin-metric-val" id="kpi-total-coupons" style="color: #38bdf8;">0</div>
<span style="font-size: 0.72rem; color: #94a3b8;">En base de datos MongoDB</span>
</div>
<div class="fin-metric-card" style="border-top: 3px solid #34d399;">
<div class="fin-metric-label">Cupones Activos</div>
<div class="fin-metric-val" id="kpi-active-coupons" style="color: #34d399;">0</div>
<span style="font-size: 0.72rem; color: #94a3b8;">Listos para canje inmediato</span>
</div>
<div class="fin-metric-card" style="border-top: 3px solid #f59e0b;">
<div class="fin-metric-label">Total de Canjes</div>
<div class="fin-metric-val" id="kpi-redeemed-coupons" style="color: #fbbf24;">0</div>
<span style="font-size: 0.72rem; color: #94a3b8;">Usados en reservas o envíos</span>
</div>
<div class="fin-metric-card" style="border-top: 3px solid #c084fc;">
<div class="fin-metric-label">Modalidades de Bono</div>
<div class="fin-metric-val" style="color: #c084fc; font-size: 1.25rem; font-weight: 700; margin-top: 0.35rem;">% y $ COP</div>
<span style="font-size: 0.72rem; color: #94a3b8;">Porcentaje y Monto Fijo</span>
</div>
</div>
<div class="grid-2col" style="gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem;">
<!-- FORMULARIO DE CREACIÓN DE CUPÓN -->
<div style="background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
<h3 style="color: #38bdf8; font-size: 1.15rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
<span>➕</span> Crear Nuevo Bono / Cupón de Descuento
</h3>
<p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.25rem;">
Completa los datos para habilitar una nueva promoción en la pasarela y en las reservas directas.
</p>
<form id="form-create-coupon">
<div class="form-group">
<label class="form-label" for="coupon-code-input">Código Promocional (Mayúsculas) *</label>
<input type="text" class="form-input" id="coupon-code-input" placeholder="Ej: CALIBUENA15" style="text-transform: uppercase; font-weight: 700; letter-spacing: 0.05em;" required>
</div>
<div class="form-group">
<label class="form-label" for="coupon-desc-input">Descripción / Motivo de la Campaña</label>
<input type="text" class="form-input" id="coupon-desc-input" placeholder="Ej: 15% de descuento especial por lanzamiento">
</div>
<div class="grid-2col" style="gap: 1rem;">
<div class="form-group">
<label class="form-label" for="coupon-type-select">Tipo de Descuento *</label>
<select class="form-select" id="coupon-type-select">
<option value="PORCENTAJE">Porcentaje (% de Descuento)</option>
<option value="MONTO_FIJO">Monto Fijo ($ COP de Descuento)</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="coupon-value-input" id="label-coupon-value">Valor (% Descuento) *</label>
<input type="number" class="form-input" id="coupon-value-input" placeholder="Ej: 15" min="1" step="1" required>
</div>
</div>
<div class="grid-2col" style="gap: 1rem;">
<div class="form-group">
<label class="form-label" for="coupon-service-select">Aplica Para *</label>
<select class="form-select" id="coupon-service-select">
<option value="TODOS">🌟 Todos (Viajes y Encomiendas)</option>
<option value="VIAJES">🚗 Exclusivo Viajes de Pasajeros</option>
<option value="ENCOMIENDAS">📦 Exclusivo Fletes de Encomiendas</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="coupon-min-subtotal">Subtotal Mínimo ($ COP)</label>
<input type="number" class="form-input" id="coupon-min-subtotal" placeholder="0 (Sin mínimo)" min="0" step="1000" value="0">
</div>
</div>
<div class="grid-2col" style="gap: 1rem;">
<div class="form-group">
<label class="form-label" for="coupon-usage-limit">Límite Máximo de Canjes</label>
<input type="number" class="form-input" id="coupon-usage-limit" placeholder="Dejar vacío para ilimitado" min="1" step="1">
</div>
<div class="form-group">
<label class="form-label" for="coupon-exp-date">Fecha de Expiración</label>
<input type="date" class="form-input" id="coupon-exp-date">
</div>
</div>
<div class="form-group">
<label class="same-address-toggle" for="coupon-active-check" style="margin-bottom: 0;">
<input type="checkbox" id="coupon-active-check" checked>
<span>🟢 Activar cupón inmediatamente para su uso público</span>
</label>
</div>
<div id="coupon-form-feedback" style="display: none; margin-bottom: 1rem;"></div>
<button type="submit" class="btn-primary" id="btn-submit-coupon" style="margin-top: 0.5rem;">
➕ Crear y Publicar Cupón de Descuento
</button>
</form>
</div>
<!-- LISTADO DE CUPONES VIGENTES -->
<div style="background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
<h3 style="color: #fff; font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 0.5rem;">
<span>🎟️</span> Catálogo de Cupones en MongoDB
</h3>
<span style="font-size: 0.8rem; color: #94a3b8;" id="coupons-counter-label">Cargando...</span>
</div>
<div class="coupons-table-responsive">
<table class="coupons-table">
<thead>
<tr>
<th>Código</th>
<th>Descuento</th>
<th>Aplica Para</th>
<th>Canjes / Límite</th>
<th>Estado</th>
<th>Acción</th>
</tr>
</thead>
<tbody id="coupons-table-body">
<tr>
<td colspan="6" style="text-align: center; padding: 2rem; color: #94a3b8;">
Cargando catálogo de cupones...
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- SUB-PANEL 5: EQUIPO DE ADMINISTRADORES (GESTIÓN SUPERADMINISTRADOR) -->
<div id="admin-view-administradores" style="display: none;">
<!-- BANNER GESTIÓN DE ADMINISTRADORES -->
<div style="background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(245, 158, 11, 0.18)); border: 1px solid rgba(245, 158, 11, 0.4); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.75rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div>
<div style="display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem;">
<span class="superadmin-badge">👑 Superadministrador</span>
<strong style="color: #fff; font-size: 1.15rem;">Gestión del Equipo de Administradores & Control de Acceso</strong>
</div>
<p style="color: #cbd5e1; font-size: 0.88rem; margin: 0; max-width: 720px;">
El <strong>Superadministrador Principal</strong> es la autoridad máxima permanente e inmutable. Desde aquí puedes registrar nuevos administradores u operadores, actualizar sus permisos, activarlos o inactivarlos, o removerlos del sistema.
</p>
</div>
<div>
<button type="button" id="btn-refresh-administrators" class="btn-toggle-payment" style="padding: 0.6rem 1.25rem;">
🔄 Actualizar Equipo
</button>
</div>
</div>
<!-- KPIS DE ADMINISTRACIÓN -->
<div class="financial-summary-grid" style="margin-bottom: 1.75rem;">
<div class="fin-metric-card" style="border-top: 3px solid #fbbf24;">
<div class="fin-metric-label">Superadministrador</div>
<div class="fin-metric-val" style="color: #fbbf24; font-size: 1.15rem; margin-top: 0.35rem;">Superadministrador</div>
<span style="font-size: 0.72rem; color: #34d399;">🔒 Permanente e Inmutable</span>
</div>
<div class="fin-metric-card" style="border-top: 3px solid #38bdf8;">
<div class="fin-metric-label">Administradores Activos</div>
<div class="fin-metric-val" id="kpi-admins-count" style="color: #38bdf8;">1</div>
<span style="font-size: 0.72rem; color: #94a3b8;">Con acceso a Central de Mando</span>
</div>
<div class="fin-metric-card" style="border-top: 3px solid #c084fc;">
<div class="fin-metric-label">Operadores de Despacho</div>
<div class="fin-metric-val" id="kpi-operators-count" style="color: #c084fc;">0</div>
<span style="font-size: 0.72rem; color: #94a3b8;">Monitoreo y asignación de ruta</span>
</div>
<div class="fin-metric-card" style="border-top: 3px solid #10b981;">
<div class="fin-metric-label">Autenticación Requerida</div>
<div class="fin-metric-val" style="color: #34d399; font-size: 1.15rem; margin-top: 0.35rem;">100% OTP</div>
<span style="font-size: 0.72rem; color: #94a3b8;">WhatsApp 2FA Obligatorio</span>
</div>
</div>
<div class="grid-2col" style="gap: 1.5rem; align-items: flex-start; margin-bottom: 2rem;">
<!-- FORMULARIO REGISTRAR ADMINISTRADOR -->
<div style="background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
<h3 style="color: #38bdf8; font-size: 1.15rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
<span>➕</span> Registrar Nuevo Administrador
</h3>
<p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.25rem;">
Asigna privilegios de administración u operador de despacho a un nuevo colaborador.
</p>
<form id="form-create-admin">
<div class="form-group">
<label class="form-label" for="new-admin-name">Nombre y Apellidos *</label>
<input type="text" class="form-input" id="new-admin-name" placeholder="Ej: Diana Marcela López" required>
</div>
<div class="form-group">
<label class="form-label" for="new-admin-phone">WhatsApp / Celular (+57) *</label>
<input type="tel" class="form-input" id="new-admin-phone" placeholder="Ej: 315 123 4567" required>
<span style="font-size: 0.73rem; color: var(--text-dim); margin-top: 3px; display: block;">
Identificador de acceso y destino obligatorio para el código OTP de ingreso.
</span>
</div>
<div class="grid-2col" style="gap: 1rem;">
<div class="form-group">
<label class="form-label" for="new-admin-doc">Documento (C.C.)</label>
<input type="text" class="form-input" id="new-admin-doc" placeholder="Ej: 1144123456">
</div>
<div class="form-group">
<label class="form-label" for="new-admin-email">Correo Electrónico</label>
<input type="email" class="form-input" id="new-admin-email" placeholder="admin@pacifictrans.almeira.com.co">
</div>
</div>
<div class="form-group">
<label class="form-label" for="new-admin-role">Rol y Nivel de Permisos *</label>
<select class="form-select" id="new-admin-role">
<option value="ADMIN">🛡️ ADMINISTRADOR (Control total de panel, tarifas y liquidaciones)</option>
<option value="OPERADOR">🎧 OPERADOR (Monitoreo de radar satelital y despacho de viajes)</option>
</select>
</div>
<div id="admin-create-feedback" style="display: none; margin-bottom: 1rem;"></div>
<button type="submit" class="btn-primary" id="btn-submit-new-admin" style="margin-top: 0.5rem;">
➕ Registrar Administrador
</button>
</form>
</div>
<!-- LISTADO DE ADMINISTRADORES -->
<div style="background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
<h3 style="color: #fff; font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 0.5rem;">
<span>🛡️</span> Administradores & Operadores Autorizados
</h3>
<span style="font-size: 0.8rem; color: #94a3b8;" id="admins-counter-label">Cargando...</span>
</div>
<div class="coupons-table-responsive">
<table class="coupons-table">
<thead>
<tr>
<th>Administrador</th>
<th>WhatsApp (OTP)</th>
<th>Rol</th>
<th>Estado</th>
<th>Acción</th>
</tr>
</thead>
<tbody id="table-administrators-body">
<tr>
<td colspan="5" style="text-align: center; padding: 2rem; color: #94a3b8;">
Cargando equipo de administradores...
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<!-- SUB-PANEL 6: CIERRES MENSUALES & FACTURACIÓN DIAN -->
<div id="admin-view-facturacion" style="display: none;">
<!-- BANNER GESTIÓN DE FACTURACIÓN -->
<div style="background: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(16, 185, 129, 0.18)); border: 1px solid rgba(16, 185, 129, 0.4); border-radius: 12px; padding: 1.5rem; margin-bottom: 1.75rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem;">
<div>
<div style="display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem;">
<span class="superadmin-badge" style="background: rgba(16, 185, 129, 0.2); color: #34d399; border-color: #10b981;">📑 Facturación & Fiscal</span>
<strong style="color: #fff; font-size: 1.15rem;">Consolidación Mensual de Comisiones & Reportes DIAN</strong>
</div>
<p style="color: #cbd5e1; font-size: 0.88rem; margin: 0; max-width: 760px;">
Consolidación oficial de comisiones de software cobradas a cada conductor por mes calendario. Estructurado para facilitar el copiado/pegado masivo o importación en el <strong>portal gratuito de la DIAN</strong> y futura transición a proveedor tecnológico (API).
</p>
</div>
<div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
<button type="button" id="btn-billing-run-cut" class="btn-primary" style="padding: 0.6rem 1.25rem; font-size: 0.85rem; width: auto; background: linear-gradient(135deg, #10b981, #059669);">
⚡ Ejecutar Corte Mensual Ahora
</button>
<button type="button" id="btn-billing-download-csv" class="btn-toggle-payment" style="padding: 0.6rem 1.25rem; font-size: 0.85rem; width: auto; background: rgba(56, 189, 248, 0.15); border-color: #38bdf8; color: #38bdf8;">
📥 Descargar CSV para DIAN
</button>
</div>
</div>
<!-- BARRA DE FILTROS Y CONTROL DE PERÍODO -->
<div style="background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.25rem; margin-bottom: 1.75rem; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem;">
<div style="display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;">
<div>
<label style="font-size: 0.75rem; color: #94a3b8; display: block; margin-bottom: 0.25rem;">Mes Calendario:</label>
<select id="select-billing-month" class="form-input" style="padding: 0.45rem 0.75rem; font-size: 0.88rem; width: auto; background: #0f172a; color: #fff; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;">
<option value="1">01 - Enero</option>
<option value="2">02 - Febrero</option>
<option value="3">03 - Marzo</option>
<option value="4">04 - Abril</option>
<option value="5">05 - Mayo</option>
<option value="6">06 - Junio</option>
<option value="7">07 - Julio</option>
<option value="8">08 - Agosto</option>
<option value="9">09 - Septiembre</option>
<option value="10" selected>10 - Octubre</option>
<option value="11">11 - Noviembre</option>
<option value="12">12 - Diciembre</option>
</select>
</div>
<div>
<label style="font-size: 0.75rem; color: #94a3b8; display: block; margin-bottom: 0.25rem;">Año Calendario:</label>
<select id="select-billing-year" class="form-input" style="padding: 0.45rem 0.75rem; font-size: 0.88rem; width: auto; background: #0f172a; color: #fff; border: 1px solid rgba(255,255,255,0.15); border-radius: 8px;">
<option value="2025">2025</option>
<option value="2026" selected>2026</option>
<option value="2027">2027</option>
</select>
</div>
<div style="align-self: flex-end;">
<button type="button" id="btn-billing-filter" class="btn-toggle-payment" style="padding: 0.5rem 1rem; font-size: 0.85rem;">
🔄 Consultar Período
</button>
</div>
</div>
<!-- ACCIONES EN MASA -->
<div style="display: flex; align-items: center; gap: 0.75rem;">
<button type="button" id="btn-billing-mark-invoiced" class="btn-primary" style="padding: 0.5rem 1.15rem; font-size: 0.85rem; width: auto; background: #0284c7;" disabled>
✅ Marcar Seleccionados como Facturado Manual
</button>
</div>
</div>
<!-- KPIS DE FACTURACIÓN -->
<div class="financial-summary-grid" style="margin-bottom: 1.75rem;">
<div class="fin-metric-card" style="border-top: 3px solid #10b981;">
<div class="fin-metric-label">Conductores Liquidados</div>
<div class="fin-metric-val" id="kpi-billing-conductores" style="color: #34d399;">0</div>
<span style="font-size: 0.72rem; color: #94a3b8;">Con corte en este período</span>
</div>
<div class="fin-metric-card" style="border-top: 3px solid #38bdf8;">
<div class="fin-metric-label">Total Comisiones de Software</div>
<div class="fin-metric-val" id="kpi-billing-total-comisiones" style="color: #38bdf8;">$0</div>
<span style="font-size: 0.72rem; color: #34d399;">Base de facturación (no viajes)</span>
</div>
<div class="fin-metric-card" style="border-top: 3px solid #fbbf24;">
<div class="fin-metric-label">Total Viajes Realizados</div>
<div class="fin-metric-val" id="kpi-billing-total-viajes" style="color: #fbbf24;">0</div>
<span style="font-size: 0.72rem; color: #94a3b8;">Agrupados en el mes</span>
</div>
<div class="fin-metric-card" style="border-top: 3px solid #ec4899;">
<div class="fin-metric-label">Pendientes por Facturar</div>
<div class="fin-metric-val" id="kpi-billing-pendientes" style="color: #f43f5e;">0</div>
<span style="font-size: 0.72rem; color: #94a3b8;" id="kpi-billing-facturados-label">0 facturados manual</span>
</div>
</div>
<!-- TABLA DE CIERRES MENSUALES -->
<div style="background: rgba(15, 23, 42, 0.75); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; gap: 0.5rem;">
<h3 style="color: #fff; font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 0.5rem;">
<span>📋</span> Consolidado de Cierres para la DIAN
</h3>
<span id="billing-results-badge" style="font-size: 0.8rem; color: #94a3b8;">0 registros</span>
</div>
<div class="table-responsive">
<table class="admin-table">
<thead>
<tr>
<th style="width: 40px; text-align: center;">
<input type="checkbox" id="chk-billing-select-all" title="Seleccionar todos">
</th>
<th>ID Cierre</th>
<th>NIT / Cédula</th>
<th>Conductor (Razón Social)</th>
<th>Correo Electrónico</th>
<th>Total Comisión</th>
<th>Cantidad Viajes</th>
<th>Estado Facturación</th>
<th>Fecha Cierre</th>
</tr>
</thead>
<tbody id="table-billing-cierres-body">
<tr>
<td colspan="9" style="text-align: center; padding: 2rem; color: #94a3b8;">
Cargando información fiscal...
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- VISTA 3: PORTAL DEDICADO DE CONDUCTORES -->
<div id="view-driver-portal" class="admin-dashboard-container" style="display: none;">
<!-- ESCUDO DE SEGURIDAD SI NO ES CONDUCTOR -->
<div id="driver-security-gate" class="security-shield-card" style="display: none;">
<div class="security-shield-icon">🚗</div>
<h2 style="color: #fff; font-size: 1.5rem; margin-bottom: 0.5rem;">Portal Exclusivo para Conductores Vinculados</h2>
<p style="color: #cbd5e1; font-size: 0.95rem; margin-bottom: 1.5rem;">
Esta consola está reservada para choferes registrados en la flota de Pacific Trans GO. Inicia sesión con tu número de conductor para acceder a tu billetera y transferencias Bre-B.
</p>
<div style="display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap;">
<button type="button" class="btn-primary" id="btn-gate-driver-login" style="width: auto; padding: 0.75rem 1.75rem;">
🚗 Iniciar Sesión como Conductor
</button>
<button type="button" class="btn-return-public" id="btn-gate-driver-back" style="width: auto; padding: 0.75rem 1.5rem;">
← Volver al Sitio Público
</button>
</div>
</div>
<!-- CONSOLA OPERATIVA DEL CONDUCTOR -->
<div id="driver-console-content">
<div class="admin-topbar">
<div class="admin-topbar-title">
<span class="brand-badge" style="width: 38px; height: 38px; font-size: 1rem; background: linear-gradient(135deg, #06b6d4, #10b981);">🚗</span>
<div>
<h2 style="color: #fff; font-size: 1.35rem; margin: 0; line-height: 1.2;">
Consola Oficial del Conductor
</h2>
<div style="display: flex; align-items: center; gap: 0.6rem; margin-top: 0.35rem; flex-wrap: wrap;">
<span class="admin-status-indicator">● Chofer Activo</span>
<span style="font-size: 0.8rem; color: #94a3b8;">Conductor: <strong style="color: #fff;" id="driver-topbar-name">Mario Fernando Gómez (WLZ-890)</strong></span>
</div>
</div>
</div>
<div style="display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap;">
<button type="button" class="btn-return-public" id="btn-driver-view-public">
🌐 Ver Portal Público
</button>
<button type="button" class="btn-logout-small" id="btn-driver-logout" style="padding: 0.5rem 1rem; font-size: 0.85rem;">
Cerrar Sesión
</button>
</div>
</div>
<!-- BARRA DE MENÚ OFICIAL DEL CONDUCTOR -->
<nav class="role-nav-menubar" id="driver-role-nav-menubar">
<div class="menubar-items">
<button type="button" id="btn-driver-subtab-billetera" class="menu-item-btn active" data-subtab="billetera">
<span class="menu-item-icon">💼</span>
<span class="menu-item-label">Mi Billetera & Retiros Bre-B</span>
<span class="menu-item-indicator"></span>
</button>
<button type="button" id="btn-driver-subtab-registro" class="menu-item-btn" data-subtab="registro">
<span class="menu-item-icon">📝</span>
<span class="menu-item-label">Registro & Documentación Vehicular</span>
<span class="menu-item-indicator"></span>
</button>
</div>
</nav>
<div class="glass-panel" id="driver-modules-container" style="padding: 1.5rem;">
<!-- SUB-PANEL 1: BILLETERA DIGITAL & PAGOS INMEDIATOS BRE-B -->
<div id="driver-view-billetera">
<!-- TARJETA PRINCIPAL DE SALDO -->
<div class="driver-wallet-container">
<div style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem;">
<div>
<span class="breb-brand-badge">⚡ Bre-B Interoperable BanRep</span>
<div style="color: #94a3b8; font-size: 0.85rem; margin-top: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700;">
Saldo Disponible para Transferir
</div>
<div class="wallet-balance-display">
<span class="wallet-balance-amount" id="driver-wallet-balance-val">$119.000</span>
<span class="wallet-balance-currency">COP</span>
</div>
<div style="color: #cbd5e1; font-size: 0.88rem; display: flex; align-items: center; gap: 0.5rem;">
<span>🚗 Conductor: <strong id="driver-wallet-name" style="color: #fff;">Mario Fernando Gómez</strong></span>
<span>•</span>
<span>Placa: <strong id="driver-wallet-plate" style="color: var(--accent-cyan);">WLZ-890</strong></span>
</div>
</div>
<div style="text-align: right;">
<button type="button" id="btn-driver-refresh-wallet" class="btn-toggle-payment" style="margin-bottom: 0.75rem;">
🔄 Actualizar Saldo
</button>
<div style="font-size: 0.8rem; color: #94a3b8;">
Total viajes completados: <strong id="driver-total-trips-count" style="color: #fff;">0</strong>
</div>
</div>
</div>
</div>
<!-- GRID OPERACIONES BRE-B -->
<div class="grid-2col" style="gap: 1.5rem;">
<!-- COLUMNA 1: SOLICITAR TRANSFERENCIA BRE-B -->
<div style="background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
<h3 style="color: #fff; font-size: 1.15rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
<span>💸</span> Solicitar Transferencia Inmediata vía Bre-B
</h3>
<p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.25rem;">
Transfiere tus ganancias acumuladas de inmediato (24/7) sin cobro de comisión bancaria ($0 COP).
</p>
<div class="form-group">
<label class="form-label" for="breb-payout-amount">Monto a Transferir ($ COP)</label>
<div style="display: flex; gap: 0.5rem;">
<input type="number" class="form-input" id="breb-payout-amount" placeholder="Ej: 119000" min="5000" step="1000" style="flex: 1;">
<button type="button" id="btn-breb-amount-all" class="btn-toggle-payment" style="white-space: nowrap;">
Todo el Saldo
</button>
</div>
</div>
<div style="background: rgba(139, 92, 246, 0.08); border: 1px dashed rgba(139, 92, 246, 0.3); border-radius: 8px; padding: 0.85rem; margin-bottom: 1.25rem;">
<div style="font-size: 0.82rem; color: #cbd5e1; display: flex; justify-content: space-between; margin-bottom: 0.35rem;">
<span>Destino:</span>
<strong id="breb-summary-bank" style="color: #fff;">Bancolombia</strong>
</div>
<div style="font-size: 0.82rem; color: #cbd5e1; display: flex; justify-content: space-between; margin-bottom: 0.35rem;">
<span>Llave Bre-B:</span>
<strong id="breb-summary-key" style="color: #a855f7;">+57 316 745 5877</strong>
</div>
<div style="font-size: 0.82rem; color: #cbd5e1; display: flex; justify-content: space-between;">
<span>Comisión de Transferencia:</span>
<strong style="color: #10b981;">$0 COP (Gratis BanRep)</strong>
</div>
</div>
<button type="button" id="btn-submit-breb-payout" class="btn-breb-action" style="width: 100%;">
📩 Solicitar Transferencia vía Bre-B a Administración
</button>
<p style="font-size: 0.76rem; color: #94a3b8; text-align: center; margin-top: 0.5rem; line-height: 1.35;">
Tu solicitud será enviada al administrador encargado para realizar la transferencia inmediata por Bre-B directamente a tu cuenta.
</p>
<div id="breb-payout-status" style="margin-top: 0.75rem; font-size: 0.85rem; text-align: center;"></div>
</div>
<!-- COLUMNA 2: CONFIGURACIÓN DE LLAVE BRE-B -->
<div style="background: rgba(15, 23, 42, 0.8); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem;">
<h3 style="color: #fff; font-size: 1.15rem; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem;">
<span>🔑</span> Mi Llave Bre-B Oficial
</h3>
<p style="color: var(--text-muted); font-size: 0.85rem; margin-bottom: 1.25rem;">
Registra tu identificador único en el sistema de pagos interoperables del Banco de la República.
</p>
<div class="form-group">
<label class="form-label" for="driver-breb-key-type">Tipo de Llave Bre-B</label>
<select class="form-select" id="driver-breb-key-type">
<option value="CELULAR">Número de Celular (+57)</option>
<option value="CEDULA">Cédula de Ciudadanía (C.C.)</option>
<option value="EMAIL">Correo Electrónico</option>
<option value="ALFANUMERICA">Código Alfanumérico Único</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="driver-breb-key-value">Valor de la Llave Bre-B</label>
<input type="text" class="form-input" id="driver-breb-key-value" value="3109876543" placeholder="Ej: 3109876543">
</div>
<div class="form-group">
<label class="form-label" for="driver-breb-bank">Entidad Financiera de Destino</label>
<select class="form-select" id="driver-breb-bank">
<option value="Bancolombia">Bancolombia</option>
<option value="Nequi">Nequi</option>
<option value="Davivienda">Davivienda</option>
<option value="Daviplata">Daviplata</option>
<option value="Dale!">Dale!</option>
<option value="Nu Colombia">Nu Colombia</option>
<option value="Banco de Bogotá">Banco de Bogotá</option>
<option value="Banco Agrario">Banco Agrario de Colombia</option>
<option value="Lulo Bank">Lulo Bank</option>
<option value="Banco de Occidente">Banco de Occidente</option>
</select>
</div>
<button type="button" id="btn-save-driver-breb-key" class="btn-primary" style="width: 100%;">
💾 Guardar Llave Bre-B
</button>
<div id="driver-breb-key-status" style="margin-top: 0.75rem; font-size: 0.85rem; text-align: center;"></div>
</div>
</div>
<!-- ESTADO DE MIS SOLICITUDES DE TRANSFERENCIA (CONDUCTOR) -->
<div style="background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem; margin-top: 1.75rem;">
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; flex-wrap: wrap; gap: 0.5rem;">
<h3 style="color: #fff; font-size: 1.15rem; margin: 0; display: flex; align-items: center; gap: 0.5rem;">
<span>⏳</span> Estado de Mis Solicitudes de Transferencia
</h3>
<button type="button" id="btn-driver-refresh-requests" class="btn-toggle-payment" style="padding: 2px 10px; font-size: 0.78rem;">
🔄 Actualizar
</button>
</div>
<p style="color: var(--text-muted); font-size: 0.82rem; margin-bottom: 1rem;">
Seguimiento de las peticiones de retiro enviadas para transferencia por el administrador encargado.
</p>
<div id="driver-my-payout-requests-list">
<div style="text-align: center; color: #94a3b8; padding: 1rem;">
No tienes solicitudes de retiro activas.
</div>
</div>
</div>
<!-- HISTORIAL DE TRANSFERENCIAS CONDUCTOR -->
<div style="background: rgba(15, 23, 42, 0.6); border: 1px solid var(--border-glass); border-radius: 12px; padding: 1.5rem; margin-top: 1.75rem;">
<h3 style="color: #fff; font-size: 1.15rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
<span>📜</span> Historial de Transferencias Inmediatas Bre-B
</h3>
<div id="driver-breb-history-list">
<div style="text-align: center; color: #94a3b8; padding: 1.5rem;">
No hay transferencias registradas aún.
</div>
</div>
</div>
</div>
<!-- SUB-PANEL 2: VINCULACIÓN OFICIAL VEHICULAR -->
<div id="driver-view-registro" style="display: none;">
<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>
</div>
</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;">Pacific Trans GO</strong> — Transporte Especial Cali - Buenaventura
</div>
<div>
Atención y Soporte WhatsApp: <a id="footer-support-link" href="#" target="_blank" style="color: var(--accent-cyan); text-decoration: none;"><span id="footer-support-phone">Central de Soporte</span></a>
</div>
<div>
© 2026 Almeira Group. Todos los derechos reservados.
</div>
</div>
</footer>
<!-- MODAL 1: AUTENTICACIÓN PACIFIC TRANS GO CON OTP WHATSAPP + EMAIL -->
<div class="pwa-modal-overlay" id="modal-auth-pacifictrans">
<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;">
Ingresa tu número de celular para recibir tu código de seguridad OTP vía WhatsApp.
</p>
</div>
<!-- PASO 1: Formulario de Celular -->
<div id="auth-step-1">
<form id="form-auth-request-otp">
<div class="form-group" style="text-align: center;">
<label class="form-label" for="auth-input-phone" style="font-size: 0.95rem; font-weight: 700; color: #fff; margin-bottom: 0.5rem;">
Número de Celular / WhatsApp (+57)
</label>
<input type="tel" class="form-input" id="auth-input-phone" placeholder="Ej: 300 123 4567 o 312 987 6543" required autofocus style="font-size: 1.15rem; font-weight: 700; text-align: center; letter-spacing: 0.05em; padding: 0.85rem;">
<span style="font-size: 0.76rem; color: var(--text-dim); margin-top: 6px; display: block;">
Recibirás un código de 6 dígitos al instante en tu WhatsApp para ingresar de forma segura.
</span>
</div>
<!-- Campos opcionales ocultos para compatibilidad -->
<div id="group-auth-name" style="display: none;">
<input type="text" id="auth-input-name" value="">
</div>
<div style="display: none;">
<input type="email" id="auth-input-email" value="">
</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; padding: 0.85rem; font-size: 1rem;">
📲 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 Pacific Trans 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 Pacific Trans 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 App
</a>
</div>
</div>
</div>
<!-- MODAL 4: COMPROBANTE OFICIAL TRANSFERENCIA BRE-B BANCO DE LA REPÚBLICA -->
<div class="breb-modal-overlay" id="modal-breb-receipt" style="display: none;">
<div class="breb-receipt-container">
<div class="breb-receipt-header">
<button type="button" id="btn-close-breb-modal" style="position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: #fff; font-size: 1.25rem; cursor: pointer;">✕</button>
<span class="breb-brand-badge" style="margin-bottom: 0.5rem;">⚡ Bre-B BANREP</span>
<h3 style="color: #fff; font-size: 1.35rem; margin: 0.25rem 0 0.15rem;">Comprobante de Transferencia Inmediata</h3>
<p style="color: #fbcfe8; font-size: 0.8rem; margin: 0;">Sistema Nacional de Pagos Interoperables de Colombia</p>
</div>
<div class="breb-receipt-body">
<div style="text-align: center; margin-bottom: 1.25rem;">
<div style="display: inline-flex; align-items: center; gap: 0.35rem; background: rgba(16, 185, 129, 0.15); color: #34d399; border: 1px solid rgba(16, 185, 129, 0.3); padding: 0.35rem 0.85rem; border-radius: 9999px; font-size: 0.82rem; font-weight: 700;">
✓ TRANSFERENCIA APROBADA 24/7
</div>
<div style="font-size: 2.2rem; font-weight: 900; color: #fff; margin-top: 0.5rem;" id="modal-receipt-amount">
$119.000 COP
</div>
<div style="font-size: 0.78rem; color: #94a3b8;" id="modal-receipt-datetime">
14 de Octubre de 2026, 08:35 PM
</div>
</div>
<div style="background: rgba(15, 23, 42, 0.7); border: 1px solid var(--border-glass); border-radius: 10px; padding: 1rem; margin-bottom: 1.25rem;">
<div class="receipt-row">
<span class="receipt-label">Referencia Oficial Bre-B:</span>
<span class="receipt-val" id="modal-receipt-ref" style="color: #38bdf8; font-family: monospace;">BREB-CO-20261014-94F2B0</span>
</div>
<div class="receipt-row">
<span class="receipt-label">No. Autorización BanRep:</span>
<span class="receipt-val" id="modal-receipt-auth" style="font-family: monospace;">AUT-98E1A4</span>
</div>
<div class="receipt-row">
<span class="receipt-label">Ciclo de Compensación:</span>
<span class="receipt-val" id="modal-receipt-cycle" style="font-size: 0.78rem;">Inmediato 24/7</span>
</div>
<div class="receipt-row">
<span class="receipt-label">Entidad Emisora:</span>
<span class="receipt-val">Pacific Trans GO (Bre-B BanRep)</span>
</div>
<div class="receipt-row">
<span class="receipt-label">Entidad Receptora:</span>
<span class="receipt-val" id="modal-receipt-bank" style="color: #fbbf24;">Bancolombia</span>
</div>
<div class="receipt-row">
<span class="receipt-label">Llave Bre-B Destino:</span>
<span class="receipt-val" id="modal-receipt-key">+57 310 987 6543</span>
</div>
<div class="receipt-row">
<span class="receipt-label">Titular de la Cuenta:</span>
<span class="receipt-val" id="modal-receipt-owner">Mario Fernando Gómez</span>
</div>
<div class="receipt-row">
<span class="receipt-label">Costo de Transferencia:</span>
<span class="receipt-val" style="color: #10b981;">$0 COP (Bre-B Gratuito)</span>
</div>
</div>
<div style="display: flex; gap: 0.75rem;">
<button type="button" class="btn-primary" id="btn-share-breb-whatsapp" style="flex: 1; padding: 0.7rem; font-size: 0.88rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; background: #22c55e;">
<span>💬</span> Compartir por WhatsApp
</button>
<button type="button" class="btn-primary" id="btn-copy-breb-receipt" style="flex: 1; padding: 0.7rem; font-size: 0.88rem; background: rgba(255,255,255,0.08); border: 1px solid var(--border-glass);">
📋 Copiar Referencia
</button>
</div>
</div>
</div>
</div>
<!-- MODAL 5: PERFIL DE USUARIO (INFORMACIÓN PERSONAL INMUTABLE DE CELULAR) -->
<div class="pwa-modal-overlay" id="modal-user-profile">
<div class="pwa-modal-card" style="max-width: 480px;">
<button type="button" class="pwa-modal-close" id="btn-close-profile-modal">✕</button>
<div style="display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem;">
<span style="font-size: 1.6rem;">👤</span>
<div>
<h3 style="font-size: 1.35rem; color: #fff; margin: 0;">Mi Información Personal</h3>
<p style="font-size: 0.82rem; color: var(--text-muted); margin: 0;">Actualiza tus datos para tus reservas y seguros de viaje</p>
</div>
</div>
<form id="form-update-profile" style="margin-top: 1.25rem;">
<div class="form-group">
<label class="form-label" for="profile-name">Nombre Completo *</label>
<input type="text" class="form-input" id="profile-name" placeholder="Tu nombre y apellidos" required>
</div>
<div class="form-group">
<label class="form-label" for="profile-phone">Número Celular / WhatsApp de Registro</label>
<input type="tel" class="form-input input-locked" id="profile-phone" readonly disabled>
<div class="input-locked-note">
<span>🔒</span>
<span>Por seguridad y autenticación 2FA OTP, el número de celular registrado no puede ser modificado.</span>
</div>
</div>
<div class="grid-2col" style="gap: 1rem;">
<div class="form-group">
<label class="form-label" for="profile-doc">Documento (C.C. / Pasaporte)</label>
<input type="text" class="form-input" id="profile-doc" placeholder="Ej: 1144123456">
</div>
<div class="form-group">
<label class="form-label" for="profile-email">Correo Electrónico</label>
<input type="email" class="form-input" id="profile-email" placeholder="tu@correo.com">
</div>
</div>
<div class="form-group">
<label class="form-label" for="profile-address">Dirección Principal en Cali (Domicilio)</label>
<input type="text" class="form-input" id="profile-address" placeholder="Ej: Calle 5 #66-20, Cali">
</div>
<div class="form-group">
<label class="form-label" for="profile-city">Ciudad Principal</label>
<input type="text" class="form-input" id="profile-city" value="Cali">
</div>
<div id="profile-feedback" style="display: none; margin-bottom: 1rem;"></div>
<div style="display: flex; gap: 0.75rem; margin-top: 1rem;">
<button type="submit" class="btn-primary" id="btn-save-profile" style="flex: 1;">
💾 Guardar Información Personal
</button>
<button type="button" class="btn-return-public" id="btn-cancel-profile" style="width: auto; padding: 0.75rem 1.25rem;">
Cerrar
</button>
</div>
</form>
</div>
</div>
<!-- MODAL 6: EDITAR ADMINISTRADOR (EXCLUSIVO SUPERADMIN) -->
<div class="pwa-modal-overlay" id="modal-edit-admin">
<div class="pwa-modal-card" style="max-width: 460px;">
<button type="button" class="pwa-modal-close" id="btn-close-edit-admin-modal">✕</button>
<div style="display: flex; align-items: center; gap: 0.65rem; margin-bottom: 0.5rem;">
<span style="font-size: 1.6rem;">🛡️</span>
<div>
<h3 style="font-size: 1.35rem; color: #fff; margin: 0;">Editar Administrador</h3>
<p style="font-size: 0.82rem; color: var(--text-muted); margin: 0;" id="edit-admin-subtitle">Actualizar permisos y datos de contacto</p>
</div>
</div>
<form id="form-edit-admin" style="margin-top: 1.25rem;">
<input type="hidden" id="edit-admin-id">
<div class="form-group">
<label class="form-label" for="edit-admin-name">Nombre y Apellidos *</label>
<input type="text" class="form-input" id="edit-admin-name" required>
</div>
<div class="form-group">
<label class="form-label" for="edit-admin-phone">WhatsApp / Celular (+57)</label>
<input type="tel" class="form-input input-locked" id="edit-admin-phone" readonly disabled>
<span style="font-size: 0.73rem; color: #94a3b8; margin-top: 3px; display: block;">🔒 El teléfono celular no se modifica para preservar su identidad 2FA OTP.</span>
</div>
<div class="grid-2col" style="gap: 1rem;">
<div class="form-group">
<label class="form-label" for="edit-admin-doc">Documento (C.C.)</label>
<input type="text" class="form-input" id="edit-admin-doc">
</div>
<div class="form-group">
<label class="form-label" for="edit-admin-email">Correo Electrónico</label>
<input type="email" class="form-input" id="edit-admin-email">
</div>
</div>
<div class="form-group" id="edit-admin-role-group">
<label class="form-label" for="edit-admin-role">Rol de Administración</label>
<select class="form-select" id="edit-admin-role">
<option value="ADMIN">🛡️ ADMINISTRADOR (Control total)</option>
<option value="OPERADOR">🎧 OPERADOR (Monitoreo y despacho)</option>
</select>
</div>
<div id="edit-admin-feedback" style="display: none; margin-bottom: 1rem;"></div>
<div style="display: flex; gap: 0.75rem; margin-top: 1rem;">
<button type="submit" class="btn-primary" id="btn-save-edit-admin" style="flex: 1;">
💾 Guardar Cambios
</button>
<button type="button" class="btn-return-public" id="btn-cancel-edit-admin" style="width: auto; padding: 0.75rem 1.25rem;">
Cancelar
</button>
</div>
</form>
</div>
</div>
<!-- LEAFLET JS PARA EL RADAR MAP (Local Autónomo) -->
<script src="js/leaflet.js"></script>
<!-- LÓGICA PRINCIPAL & PUENTE NATIVO ANDROID PACIFICTRANS GO -->
<script src="js/app.js"></script>
</body>
</html>