<!-- SUTIL FIX 12.15.176 · contraste correcto en modal Personal > Permisos (claro/oscuro) -->
<!-- SUTIL FIX 12.15.175 · contraste claro/oscuro en Caja y Reportes + PDF de Resumen de caja y reportes seleccionados -->
<!-- SUTIL FIX 12.15.174 · Contraste correcto en modal de cambio de clave temporal (claro/oscuro) -->
<!-- SUTIL FIX 12.15.173 · Documentos de clientes: selector PDF separado en Android (foto / imagen / PDF) -->
<!-- SUTIL FIX 12.15.147 · Rutas registradas con selector profesional y carga bajo selección -->
<!-- SUTIL FIX 12.15.141 · Cierre: gastos en confirmación y comprobante descargable/compartible PNG/PDF e impresión -->
<!-- SUTIL FIX 12.15.140 · Base total contable al final del resumen, con renovación diferenciada de la base física -->
<!-- SUTIL FIX 12.15.139 · Transferencias entre rutas debajo de Base del día, solo con importe no cero -->
<!-- SUTIL FIX 12.15.138 · Control empresarial para mostrar u ocultar movimientos de base al personal; requiere main.py 12.15.138 -->
<!-- SUTIL FIX 12.15.137 · Movimientos de base antes de Cobros del día, ocultos si su importe es cero -->
<!-- SUTIL FIX 12.15.129 · Operar caja: ocultar bases repetidas de la cabecera; conservar base inicial si es imprescindible -->
<!-- SUTIL FIX 12.15.127 · Punto de arranque también al crear ruta (POST + PUT con validación y recuperación) -->
<!-- SUTIL FIX 12.15.126 · Detalle de ruta a la vista, sin quedar debajo del listado; conserva tarjetas 12.15.125 -->
<!-- SUTIL FIX 12.15.134 · Caja diaria: importes grandes caben en tarjetas de COBROS sin montarse -->
<!-- SUTIL FIX 12.15.133 · Caja diaria: diferenciar cobros bancarios, transferencias entre rutas y Renovación -->
<!-- SUTIL FIX 12.15.118 · Pagos recibidos incluye Renovación como método y total independiente -->
<!-- SUTIL FIX 12.15.115 · Personal registrado móvil sin desplazamiento horizontal -->
<!-- SUTIL FIX 12.15.98 · Cierre automático visible en modo oscuro -->
<!-- SUTIL FIX 12.15.97 · textos internos de Caja legibles en modo oscuro -->
<!-- SUTIL FIX 12.15.96 · subtítulo Operar caja + número Pendientes visibles -->
<!-- SUTIL FIX 12.15.95 · revert 12.15.94 + contraste puntual Pendientes modo claro -->
<!-- SUTIL FIX 12.15.93 · títulos Caja blancos aplicados directamente al texto real -->
<!-- SUTIL FIX 12.15.92 · contraste forzado en botones reales de Caja -->
<!-- SUTIL FIX 12.15.91 · títulos Operar caja / Pendientes de cierre visibles -->
<!-- SUTIL FIX 12.15.90 · legibilidad Caja diaria claro/oscuro -->
<!-- SUTIL FIX 12.15.89 · nunca ignora una fecha de pago seleccionada -->
<!-- SUTIL FIX 12.15.88 · Modal pago compacto; IDs/enlaces preservados -->
<!-- SUTIL FIX 12.15.113 · KPI Personal/Cajas visibles y consultados desde el primer instante -->
<!-- SUTIL FIX 12.15.87 · Cajas abiertas reales en Inicio; consultas KPI independientes -->
<!-- SUTIL FIX 12.15.86 · Pagos recibidos usa fecha real y oculta hora inventada en retroactivos -->
<!-- SUTIL FIX 12.15.75 · Registrar pago desde cuota conectado · base acumulada desde 12.15.74 -->
<!-- SUTIL FIX 12.15.69 · 5 mejoras: historial, resumen financiero, ayuda ubicaciones, consulta créditos y pago desde cuota -->
<!-- SUTIL FIX 12.15.70 · Correcciones prueba 12.15.69: hub créditos cerrado, estado móvil, contraste consulta y registrar pago -->
<!-- SUTIL FIX 12.15.67 · Estado de cuenta: accesos Créditos / Pagos y abonos / Cuotas -->
<!-- SUTIL FIX 12.15.66 · Estado de cuenta: elimina Resumen duplicado; conserva Pagos y abonos + Cuotas -->
<!-- SUTIL FIX 12.15.65 · Estado de cuenta: Resumen / Pagos y abonos / Cuotas en subsecciones compactas -->
<!-- SUTIL FIX 12.15.48 · Historial real para botón Atrás Android/Chrome; Inicio no abandona Sutil -->
<!-- SUTIL FIX 12.15.25 · Ficha cliente: título Ubicación cambiado a Dirección / Endereço / Address -->
<!-- SUTIL FIX 12.15.24 · Estado de cuenta: reporte PDF descargable -->
<!-- SUTIL FIX 12.15.22B · Estado de cuenta: Cuotas móvil específica sin scroll lateral -->
<!-- SUTIL FIX 12.15.21 · Estado de cuenta: 8 métricas compactas en 2 columnas -->
<!-- SUTIL FIX 12.15.20 · Ficha cliente: secciones plegables con idioma ES/PT/EN corregido -->
<!-- SUTIL FIX 12.15.19 · Ficha cliente organizada por secciones plegables; cabecera preservada -->
<!-- SUTIL FIX 12.15.18 · Ficha cliente compacta: foto restaurada a tamaño original 150x150 -->
<!-- SUTIL FIX 12.15.17 · Ficha cliente móvil compacta: código, ruta y estado junto a foto -->
<!-- SUTIL FIX 12.15.16 · Clientes: elimina tarjeta Buscar cliente duplicada -->
<!-- SUTIL FIX 12.15.15 · Localización de funcionarios: Rota/Status en una fila + selectores modernos -->
<!-- SUTIL FIX 12.15.14 · Ubicaciones: selectores modernos Sutil para Rota y Status -->
<!-- SUTIL FIX 12.15.13 · Ubicaciones móvil: Rota y Status en la misma fila -->
<!-- SUTIL FIX 12.15.12 · Ubicaciones: traducción ES/PT/EN de botones Clientes / Funcionarios -->
<!-- SUTIL FIX 12.15.11 · Ubicaciones: métricas debajo del mapa -->
<!-- SUTIL FIX 12.15.10 · Ubicaciones: métricas compactas en 2 columnas -->
<!-- SUTIL LOCALIZACIONES v1.1 · solicitud silenciosa puntual al seleccionar cliente -->
<!doctype html>
<!-- SUTIL FIX 12.15.79 · entrega mixta PIX + Dinero en créditos y gastos; caja separada por método -->
<!-- SUTIL FIX 12.15.78 · contraste Cobros/Pagos recibidos modo claro; conserva fixes anteriores -->
<!-- Fix 12.5.3: selector de extractos prioriza documentos/PDF; evita abrir cámara/galería en Android -->

<!-- Sutil Fix 12.3: filtros Hoy/Ayer/Entre fechas/Todos + paginación de comprobantes -->
<!-- Fix 12.8: candidatos históricos para comprobantes de imagen sin fecha bancaria extraída -->
<!-- Admin v90e: optimización de velocidad frontend; conserva funciones, navegación, endpoints e idioma ES/PT/EN -->
<!-- Admin v90d: idioma completo del chat ES/PT/EN; estructura/navegación v90b intacta -->
<!-- Admin v90b: clientes móviles estilo referencia, conserva ubicación, Volver e Inicio -->
<!-- Admin v78: segunda optimización móvil; sin cambios de datos/endpoints -->
<!-- Admin v77: i18n global ES/PT/EN optimizado para móvil -->
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <!-- Sutil V1.6.18 Personal y permisos: submódulos independientes -->
<!-- Membresía v2: copia robusta de llave PIX -->
<!-- Soporte v3: FAQ movido de Membresía a Asistente Sutil -->
<!-- Membresía v4: modal moderno y carga inmediata de comprobante -->
<!-- Membresía v5: apertura robusta del modal y diagnóstico visible -->
<!-- Membresía v6: modal movido al DOM real de /admin -->
<!-- Notificaciones empresa v1: chat, PIX y soporte con sonido -->
<!-- Centro flotante v4: AI Sutil integra asistente, humano y notificaciones; sonido en Configuración -->
<!-- Sonidos v5: perfiles independientes por mensajes, PIX, soporte y alertas -->
<!-- Diálogos v6: alert, confirm y prompt profesionales Sutil -->
<!-- Acceso cliente v7: credenciales copiables, enlace, abrir y compartir -->
<!-- Acceso cliente v8: Empresa solo informativa; copiar/compartir excluye nombre de empresa -->
<!-- Inicio v9: módulos agrupados por Gestión, Operación, Análisis y Herramientas -->
<!-- Tema v10 PRUEBA: paleta AI azul noche / índigo / violeta / cian -->
<!-- v11: módulos y botones con efecto flotante y profundidad -->
<!-- v12: modo claro/oscuro para empresario, ADM y cobrador -->
<!-- v13: contraste corregido en todos los formularios, cuadros y modales -->
<!-- v15: contraste global definitivo, incluyendo editar cliente y bloques mixtos -->
<!-- v16: contraste reforzado de credenciales de acceso del cliente -->
<!-- v17: contraste total en estados, caja y textos secundarios sobre fondos oscuros -->
<!-- v18: contraste completo del módulo Chat y estados seleccionados -->
<!-- v19: submódulos de Cobros, Clientes y Personal adaptados al tema -->
<!-- v20: contraste restante en Chat, Ubicaciones y Reportes -->
<!-- v21: cabecera y filtros del directorio de chat adaptados al modo oscuro -->
<!-- v22: gráficos Canvas adaptados a modo claro/oscuro -->
<!-- v23: contraste completo del Asistente Sutil -->
<!-- v24: contraste completo de Asistente y Soporte Humano -->
<!-- v25: contraste completo de FAQ y base de conocimiento -->
<!-- v26: resumen y lanzadores de Soporte Sutil adaptados al tema -->
<!-- v27: membresía, PIX, solicitudes y comprobantes adaptados al tema -->
<!-- v28: corrección exacta de .sutil-request-item y .sutil-method-card -->
<!-- v29: cálculo de plan y crédito proporcional adaptados al tema -->
<!-- v30: indicador IA activa corregido para claro/oscuro -->
<!-- v31: menú lateral del empresario adaptado al tema -->
<!-- v32: clases exactas .sutil-owner-menu-* corregidas -->
<!-- v33: selector Claro/Oscuro fijo y siempre visible -->
<!-- v14: corregida navegación del centro histórico -->
<!-- Sutil v1.3.77 idioma global ES/PT/EN -->
<title>Sutil · Administración</title>
<!-- SUTIL ADMIN v1.3.55 · cobro olvidado guiado desde Cobros -->
<!-- SUTIL FIX 12.15.119 · pago normal sin selector de fecha + acceso directo a Cobro olvidado -->
  <style>
    :root {
      --sutil-primary: #1769aa;
      --sutil-secondary: #148343;
      --sutil-background: #eef2f5;
      --primary: var(--sutil-primary);
      --secondary: var(--sutil-secondary);
      --line: #d9e0e7;
    }
    * { box-sizing: border-box; }
    body {
      font-family: Arial, sans-serif;
      background: var(--sutil-background);
      margin: 0;
      color: #20242a;
    }
    button, input, select { font: inherit; }
    .wrap { max-width: 1220px; margin: auto; padding: 16px; }
    .header {
      display: flex; justify-content: space-between; align-items: center;
      gap: 12px; margin-bottom: 12px;
    }
    .header h2 { margin: 0; }
    .card {
      background: white; border-radius: 15px; padding: 16px; margin: 12px 0;
      box-shadow: 0 2px 12px #00000012;
    }
    .grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
      gap: 11px;
    }
    .metric { font-size: 27px; font-weight: 800; margin-top: 5px; }

    /* Dashboard superior: números siempre dentro de sus cuadros */
    .dashboard-kpis {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      align-items: stretch;
      gap: 10px;
    }
    .dashboard-kpi {
      min-width: 0;
      min-height: 92px;
      margin: 0;
      padding: 14px 13px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      overflow: hidden;
    }
    .dashboard-kpi-label {
      display: block;
      min-height: 34px;
      font-size: 14px;
      line-height: 1.2;
      color: #4f5965;
      font-weight: 700;
    }
    .dashboard-kpi-value {
      width: 100%;
      min-width: 0;
      margin-top: 5px;
      font-size: clamp(17px, 1.45vw, 23px);
      line-height: 1.08;
      letter-spacing: -0.45px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
      overflow: visible;
    }

    .dashboard-kpis-operational {
      grid-template-columns: repeat(2, minmax(0, 220px));
      justify-content: start;
    }
    .report-global-kpis {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      margin-bottom: 14px;
    }

    @media (max-width: 1120px) {
      .dashboard-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .dashboard-kpis-operational { grid-template-columns: repeat(2, minmax(0, 220px)); }
      .report-global-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .dashboard-kpi-value { font-size: clamp(19px, 2.4vw, 24px); }
    }
    @media (max-width: 720px) {
      .dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .dashboard-kpis-operational { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .report-global-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .dashboard-kpi { min-height: 86px; }
      .dashboard-kpi-value { font-size: clamp(18px, 5vw, 23px); }
    }
    @media (max-width: 430px) {
      .dashboard-kpis { grid-template-columns: 1fr; }
      .dashboard-kpis-operational { grid-template-columns: 1fr; }
      .report-global-kpis { grid-template-columns: 1fr; }
      .dashboard-kpi-label { min-height: 0; }
      .dashboard-kpi-value { font-size: 23px; }
    }
    .muted { color: #68717c; font-size: 14px; }
    .btn {
      border: 0; border-radius: 9px; padding: 10px 14px;
      color: white; background: #1769aa; cursor: pointer; font-weight: 700;
    }
    .btn:hover { opacity: .9; }
    .success { background: #148343; }
    .danger { background: #b42318; }
    .secondary { background: #5d6874; }
    .module-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
      gap: 13px;
    }
    .module {
      min-height: 132px;
      border: 1px solid #d9e0e7;
      border-radius: 15px;
      background: linear-gradient(180deg, #fff, #f7fafc);
      cursor: pointer;
      padding: 16px;
      text-align: center;
      display: flex; flex-direction: column; justify-content: center;
      box-shadow: 0 2px 7px #0000000d;
    }
    .module:hover { transform: translateY(-2px); }
    .module-icon { font-size: 34px; margin-bottom: 8px; }
    .module-title { font-size: 18px; font-weight: 800; color: #155f93; }
    .module small { color: #6c7681; margin-top: 5px; }
    .section { display: none; }
    .section.active { display: block; }
    .back-row { margin: 8px 0 2px; }
    .form-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
      gap: 12px;
    }
    label { font-weight: 700; font-size: 14px; }
    input, select {
      width: 100%; padding: 10px; margin-top: 5px;
      border: 1px solid #b9c1c9; border-radius: 8px; background: white;
    }
    .inline-check {
      display: flex; align-items: center; gap: 8px; margin-top: 25px;
    }
    .inline-check input { width: auto; margin: 0; }
    .table-wrap { overflow-x: auto; }
    table { width: 100%; border-collapse: collapse; }
    td, th {
      padding: 9px; border-bottom: 1px solid #dfe4e9;
      text-align: left; vertical-align: top;
    }
    .row-current { background:#edf9f0; }
    .row-current:hover { background:#dff3e5; }
    .row-today { background:#fff8dd; }
    .row-today:hover { background:#fff0b8; }
    .row-overdue, .row-reported { background:#fff0f0; color:#8f1d18; }
    .row-overdue:hover, .row-reported:hover { background:#ffe0e0; }
    .row-inactive { background:#f4f6f8; color:#68717c; }
    .status-pill {
      display:inline-block;padding:5px 9px;border-radius:999px;
      font-size:12px;font-weight:800;white-space:nowrap;
    }
    .pill-current { background:#d9f2df;color:#136c38; }
    .pill-today { background:#fff0b3;color:#8a6400; }
    .pill-overdue,.pill-reported { background:#ffd9d6;color:#9c2018; }
    .pill-inactive { background:#e5e9ed;color:#5f6973; }
    .detail-tabs { display:flex;gap:10px;flex-wrap:wrap;margin:14px 0; }
    .detail-tab.active-tab { background:#0f4f7a; }
    .client-row { cursor: pointer; }
    .client-row:hover { background: #f5f8fa; }
    .client-overdue { background: #fff0f0; color: #9f1d18; font-weight: 700; }
    .client-overdue:hover { background: #ffe3e3; }
    .status-overdue { color: #b42318; font-weight: 800; }
    .status-current { color: #148343; font-weight: 800; }
    .checking { color: #a66c00; font-weight: 700; }
    .confirmed { color: #148343; font-weight: 700; }
    .not_confirmed { color: #b42318; font-weight: 700; }
    .result {
      display: none; margin-top: 12px; padding: 12px;
      border-radius: 9px; background: #edf8ef; color:#14532d;
      border:1px solid #b9dfc4;
    }
    .error { background: #fff0f0; color: #a21d18; border-color:#efc0bc; }
    body[data-sutil-theme="dark"] .result{
      background:#173326 !important;
      color:#d9ffe6 !important;
      border:1px solid #2d7d53 !important;
    }
    body[data-sutil-theme="dark"] .result.error{
      background:#3b1717 !important;
      color:#ffd7d7 !important;
      border-color:#a44a4a !important;
    }
    body[data-sutil-theme="light"] .result{
      background:#edf8ef !important;
      color:#14532d !important;
      border-color:#b9dfc4 !important;
    }
    body[data-sutil-theme="light"] .result.error{
      background:#fff0f0 !important;
      color:#a21d18 !important;
      border-color:#efc0bc !important;
    }
    .placeholder {
      border: 2px dashed #cad3dc; padding: 28px; border-radius: 14px;
      text-align: center; color: #66717c; background: #fafcfd;
    }

    .client-account-nav {
      display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;
    }
    .client-account-nav .btn.active-tab {
      background:#0f4f7a;
    }
    .account-pane {
      animation:reportFade .18s ease;
    }
    .status-warning { color:#a66c00; font-weight:800; }
    .client-photo { width:48px;height:48px;border-radius:50%;object-fit:cover;border:2px solid #d9e0e7;background:#eef2f5; }
    .client-photo-large { width:150px;height:150px;border-radius:18px;object-fit:cover;border:3px solid #d9e0e7;background:#eef2f5; }
    .photo-picker { border:2px dashed #cad3dc;border-radius:14px;padding:14px;background:#fafcfd; }
    .photo-preview-row { display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:10px; }

    .loan-history-tools { display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin:14px 0; }
    .loan-history-mobile { display:none; }
    .loan-card { border:1px solid #d9e0e7;border-radius:14px;padding:14px;margin:10px 0;background:#fff; }
    .loan-card.loan-paid { background:#edf9f0;border-color:#b9dfc4; }
    .loan-card.loan-overdue { background:#fff0f0;border-color:#efc0bc; }
    .loan-card.loan-active { background:#fff8dd;border-color:#ead899; }
    .loan-card.loan-loss { background:#f4f6f8;border-color:#cfd6dd; }
    .loan-card-head { display:flex;justify-content:space-between;gap:10px;align-items:flex-start; }
    .loan-card-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px; }
    .loan-card-grid div { background:#ffffffaa;border-radius:9px;padding:8px; }
    .report-nav { min-height:105px; }
    .active-report-nav { border:2px solid #1769aa; background:#edf6fd; }
    .report-pane { animation:reportFade .18s ease; }

    /* FIX 12.15.151 · Centro ejecutivo de Reportes */
    #reportsSection .reports-control-card{padding:18px 20px}
    #reportsSection .reports-control-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap}
    #reportsSection .reports-control-title{margin:0;font-size:28px;line-height:1.1}
    #reportsSection .reports-control-subtitle{margin-top:6px;max-width:720px}
    #reportsSection .reports-filter-grid{display:grid;grid-template-columns:minmax(145px,.8fr) minmax(145px,.8fr) minmax(220px,1.4fr) auto;gap:10px;align-items:end;margin-top:16px}
    #reportsSection .reports-filter-grid label{margin:0}
    #reportsSection .reports-filter-button{height:48px;white-space:nowrap}
    #reportsSection .report-global-kpis{gap:10px;margin:12px 0}
    #reportsSection .report-global-kpis .dashboard-kpi{min-height:92px;padding:12px 13px;border-radius:16px}
    #reportsSection .report-global-kpis .dashboard-kpi-label{min-height:0;font-size:12px;text-transform:uppercase;letter-spacing:.045em}
    #reportsSection .report-global-kpis .dashboard-kpi-value{font-size:clamp(20px,2.5vw,28px);margin-top:8px}
    #reportsSection .reports-nav-card{padding:17px 18px}
    #reportsSection .reports-nav-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
    #reportsSection .reports-nav-title{font-size:18px;font-weight:900;margin:0}
    #reportsSection .reports-nav-subtitle{font-size:12px;margin-top:3px}
    #reportsSection .reports-nav-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
    #reportsSection .reports-nav-grid .report-nav{min-height:128px;margin:0;padding:14px;border-radius:17px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:5px}
    #reportsSection .reports-nav-grid .report-nav .module-icon{font-size:29px;line-height:1;margin:0 0 3px}
    #reportsSection .reports-nav-grid .report-nav .module-title{font-size:15px;line-height:1.15}
    #reportsSection .reports-nav-grid .report-nav small{font-size:11px;line-height:1.25}
    #reportsSection .active-report-nav{box-shadow:0 0 0 1px var(--sutil-primary),0 8px 22px rgba(43,64,125,.16)}
    #reportsSection .reports-empty-state{padding:22px 18px;text-align:center;border-style:dashed}
    #reportsSection .reports-empty-state .icon{font-size:32px;margin-bottom:7px}
    #reportsSection .reports-empty-state strong{display:block;font-size:17px}
    #reportsSection .reports-empty-state .muted{margin-top:5px}
    #reportsSection .report-pane{margin-top:12px}
    #reportsSection .report-pane > .card:first-child h3,
    #reportsSection .report-pane > .card:first-child h2{margin-top:0}
    @media(max-width:820px){
      #reportsSection .reports-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
      #reportsSection .reports-filter-grid .reports-route-filter{grid-column:1 / -1}
      #reportsSection .reports-filter-button{grid-column:1 / -1;width:100%}
    }
    @media(max-width:560px){
      #reportsSection .reports-control-card{padding:15px}
      #reportsSection .reports-control-title{font-size:24px}
      #reportsSection .report-global-kpis{grid-template-columns:repeat(2,minmax(0,1fr))!important}
      #reportsSection .report-global-kpis .dashboard-kpi{min-height:82px;padding:10px 11px}
      #reportsSection .report-global-kpis .dashboard-kpi-value{font-size:clamp(18px,5.6vw,23px)}
      #reportsSection .reports-nav-card{padding:14px}
      #reportsSection .reports-nav-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
      #reportsSection .reports-nav-grid .report-nav{min-height:120px;padding:11px 8px}
      #reportsSection .reports-nav-grid .report-nav .module-icon{font-size:25px}
      #reportsSection .reports-nav-grid .report-nav .module-title{font-size:14px}
      #reportsSection .reports-nav-grid .report-nav small{font-size:10px}
    }
    @keyframes reportFade { from{opacity:.25;transform:translateY(4px)} to{opacity:1;transform:none} }

    @media(max-width:650px) {
      .metric { font-size: 22px; }
      .wrap { padding: 9px; }
      .module { min-height: 116px; }
      .loan-history-desktop { display:none; }
      .loan-history-mobile { display:block; }
      .loan-card-grid { grid-template-columns:1fr 1fr; }
      .loan-card .btn { width:100%;margin-top:10px; }
    }
  
    /* Tema configurable de empresa */
    .btn:not(.success):not(.danger):not(.secondary),
    .staff-btn-edit,
    .client-file-btn.active,
    .detail-tab.active-tab {
      background: var(--sutil-primary) !important;
    }
    .module-title,
    .radio-pill,
    .payments-summary-strip,
    .method-mini-card strong,
    .payment-entry-name,
    .payment-entry-tag,
    .client-selected-box,
    .client-suggestion-name,
    .client-picker-name,
    .client-period-title,
    .client-period-option {
      color: var(--sutil-primary) !important;
    }
    .active-report-nav {
      border-color: var(--sutil-primary) !important;
    }
    .historical-package-progress-bar {
      background: var(--sutil-primary);
    }
    .success,
    .staff-btn-enable,
    .historical-package-progress.done .historical-package-progress-bar {
      background: var(--sutil-secondary) !important;
    }


    /* Reportes: cuadros amplios y valores siempre dentro de la tarjeta */
    #reportsSection .report-metric-grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      align-items: stretch;
    }
    #reportsSection .report-metric-card {
      min-width: 0;
      min-height: 128px;
      margin: 0;
      padding: 15px 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    #reportsSection .report-metric-title {
      min-height: 20px;
      font-size: 15px;
      line-height: 1.2;
    }
    #reportsSection .report-metric-value {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      font-size: clamp(20px, 2vw, 27px);
      line-height: 1.08;
      letter-spacing: -0.35px;
      overflow-wrap: anywhere;
      word-break: normal;
    }
    #reportsSection .report-metric-subtext {
      margin-top: 5px;
      line-height: 1.25;
      overflow-wrap: anywhere;
    }
    @media (max-width: 900px) {
      #reportsSection .report-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }
    @media (max-width: 560px) {
      #reportsSection .report-metric-grid {
        grid-template-columns: 1fr;
      }
      #reportsSection .report-metric-card {
        min-height: 108px;
      }
      #reportsSection .report-metric-value {
        font-size: 24px;
      }
    }

  
    /* Sutil V1.6.13 · Ubicaciones */
    .locations-mode-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px}
    .locations-mode-btn{
      border:1px solid var(--line);border-radius:14px;padding:13px 14px;
      background:#fff;color:#334155;font-weight:800;cursor:pointer;
      display:flex;align-items:center;justify-content:center;gap:8px;
      min-height:52px;
    }
    .locations-mode-btn.active{
      background:var(--sutil-primary)!important;color:#fff!important;
      border-color:var(--sutil-primary)!important;
    }
    body[data-sutil-theme="dark"] #locationsSection .locations-mode-btn{
      background:#263246;color:#eef3ff;border-color:#4d5d78;
    }
    body[data-sutil-theme="dark"] #locationsSection .locations-mode-btn.active{
      background:var(--sutil-primary)!important;color:#fff!important;
    }
    @media(max-width:560px){.locations-mode-nav{grid-template-columns:1fr 1fr}.locations-mode-btn{padding:11px 8px;font-size:14px}}
    .locations-toolbar{display:grid;grid-template-columns:minmax(220px,1.4fr) minmax(180px,.8fr) minmax(170px,.7fr) auto;gap:10px;align-items:end;margin-top:14px}
    .locations-filter-field{display:block;min-width:0}
    .locations-filter-label{display:block;font-weight:700;font-size:14px;margin-bottom:5px}
    .locations-custom-select{position:relative;min-width:0}
    .locations-native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important}
    .locations-select-trigger{
      width:100%;min-height:43px;margin:0;padding:10px 38px 10px 12px;border:1px solid #b9c1c9;border-radius:10px;
      background:#fff;color:#20242a;font-weight:700;text-align:left;cursor:pointer;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
    }
    .locations-select-trigger::after{content:"⌄";position:absolute;right:13px;top:50%;transform:translateY(-54%);font-size:20px;line-height:1;color:#667085}
    .locations-custom-select.open .locations-select-trigger{border-color:var(--sutil-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--sutil-primary) 16%,transparent)}
    .locations-select-menu{
      display:none;position:absolute;z-index:120;left:0;right:0;top:calc(100% + 6px);max-height:260px;overflow:auto;
      border:1px solid #d6dee7;border-radius:14px;background:#fff;padding:6px;box-shadow:0 18px 40px rgba(15,23,42,.20)
    }
    .locations-custom-select.open .locations-select-menu{display:block}
    .locations-select-option{
      width:100%;border:0;border-radius:10px;background:transparent;color:#263442;text-align:left;padding:11px 34px 11px 12px;
      font-weight:700;cursor:pointer;position:relative;overflow-wrap:anywhere
    }
    .locations-select-option:hover,.locations-select-option:focus{background:#eef4ff;outline:none}
    .locations-select-option.selected{background:color-mix(in srgb,var(--sutil-primary) 12%,#fff);color:var(--sutil-primary)}
    .locations-select-option.selected::after{content:"✓";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-weight:900}
    body[data-sutil-theme="dark"] #locationsSection .locations-select-trigger{background:#263246;color:#eef3ff;border-color:#4d5d78}
    body[data-sutil-theme="dark"] #locationsSection .locations-select-trigger::after{color:#c7d2e5}
    body[data-sutil-theme="dark"] #locationsSection .locations-select-menu{background:#1f2938;border-color:#4d5d78;box-shadow:0 18px 42px rgba(0,0,0,.38)}
    body[data-sutil-theme="dark"] #locationsSection .locations-select-option{color:#eef3ff}
    body[data-sutil-theme="dark"] #locationsSection .locations-select-option:hover,
    body[data-sutil-theme="dark"] #locationsSection .locations-select-option:focus{background:#2f3d53}
    body[data-sutil-theme="dark"] #locationsSection .locations-select-option.selected{background:#33486d;color:#dce8ff}
    .locations-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:12px}
    .location-metric{padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#fff}
    .location-metric small{display:block;color:#667085;font-weight:700;margin-bottom:4px}
    .location-metric strong{font-size:24px;color:#17365d}
    .locations-layout{display:grid;grid-template-columns:minmax(290px,360px) minmax(0,1fr);gap:14px;margin-top:14px}
    .locations-list{height:560px;overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
    .location-client-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 12px;border-bottom:1px solid #edf0f3;cursor:pointer}
    .location-client-row:hover,.location-client-row.active{background:#eef7f2}
    .location-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:#e7ebef;display:flex;align-items:center;justify-content:center;font-weight:800;color:#475467;overflow:hidden}
    .location-avatar img{width:100%;height:100%;object-fit:cover}
    .location-client-name{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .location-client-meta{font-size:12px;color:#667085;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .location-freshness{font-size:11px;font-weight:800;border-radius:999px;padding:5px 8px;white-space:nowrap}
    .location-freshness.recent{background:#dcfae6;color:#087f23}
    .location-freshness.today{background:#eaf2ff;color:#175cd3}
    .location-freshness.old{background:#fff2cc;color:#8a5d00}
    .location-freshness.none{background:#f2f4f7;color:#667085}
    .locations-map-card{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;min-height:560px;display:flex;flex-direction:column}
    .locations-map-head{padding:13px 15px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}
    .locations-map-frame{width:100%;height:430px;border:0;background:#eef2f5;display:block}
    .locations-map-empty{height:430px;display:flex;align-items:center;justify-content:center;text-align:center;color:#667085;padding:25px;background:#f8fafc}
    .locations-map-foot{padding:12px 15px;display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line)}
    .locations-live-note{font-size:12px;color:#667085}
    @media(max-width:900px){.locations-toolbar{grid-template-columns:1fr 1fr}.locations-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.locations-layout{grid-template-columns:1fr}.locations-list{height:380px}.locations-map-card{min-height:470px}.locations-map-frame,.locations-map-empty{height:350px}}
    @media(max-width:560px){
      .locations-toolbar{grid-template-columns:repeat(2,minmax(0,1fr))}
      .locations-toolbar > label:first-child{grid-column:1/-1}
      .locations-toolbar > .btn{grid-column:1/-1}
      .locations-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}
      .locations-map-frame,.locations-map-empty{height:300px}
    }

  
/* v1.3.40 · navegación compacta de Caja diaria */
.cash-compact-nav-card{padding:16px 18px}
.cash-compact-nav{display:flex;gap:12px;flex-wrap:wrap}
.cash-compact-nav-btn{
  appearance:none;border:1px solid #cfd8d4;background:#fff;color:#183b34;
  border-radius:12px;padding:12px 14px;min-width:230px;max-width:330px;flex:1 1 230px;
  display:flex;align-items:center;gap:11px;text-align:left;cursor:pointer;
  box-shadow:0 1px 3px rgba(0,0,0,.04);transition:.15s ease;
}
.cash-compact-nav-btn:hover{border-color:#6f9f8f;transform:translateY(-1px)}
.cash-compact-nav-btn.active{border-color:#278164;background:#f1faf6;box-shadow:0 0 0 2px rgba(39,129,100,.08)}
.cash-compact-nav-icon{font-size:24px;line-height:1;flex:0 0 auto}
.cash-compact-nav-btn strong{display:block;font-size:15px;color:#1d5144}
.cash-compact-nav-btn small{display:block;margin-top:3px;color:#6d7773;font-weight:500}
.cash-nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:23px;height:23px;padding:0 7px;margin-left:5px;border-radius:999px;background:#edf2ef;color:#36584e;font-size:12px;vertical-align:middle}
.cash-nav-badge.alert{background:#fff0e0;color:#9a4d00}
.cash-nav-badge.ok{background:#edf8ef;color:#23743a}
@media(max-width:700px){.cash-compact-nav{display:grid;grid-template-columns:1fr}.cash-compact-nav-btn{min-width:0;max-width:none;width:100%}}


/* v1.7.1 · selector profesional de membresía */
.sutil-plan-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:10px;margin-top:12px}
.sutil-plan-choice{position:relative;border:1px solid #dce3e9;border-radius:15px;background:#fff;padding:15px;min-height:150px;text-align:left;cursor:pointer;transition:.15s ease;box-shadow:0 2px 8px #0000000a}
.sutil-plan-choice:hover{transform:translateY(-2px);border-color:#9ab9d2}
.sutil-plan-choice.selected{border:2px solid var(--sutil-secondary);background:#f2fbf6;box-shadow:0 0 0 3px rgba(20,131,67,.08)}
.sutil-plan-choice.current:after{content:"PLAN ACTUAL";position:absolute;top:9px;right:9px;background:#1769aa;color:#fff;border-radius:999px;padding:4px 7px;font-size:9px;font-weight:900}
.sutil-plan-choice.recommended:before{content:"RECOMENDADO";position:absolute;top:-9px;left:14px;background:#148343;color:#fff;border-radius:999px;padding:4px 8px;font-size:9px;font-weight:900}
.sutil-plan-choice strong{display:block;font-size:19px;color:#20364b;margin:5px 0 8px}.sutil-plan-choice b{display:block;color:#1769aa}.sutil-plan-choice small{display:block;color:#66717c;line-height:1.35}
.sutil-plan-quote{display:none;margin-top:14px;border:1px solid #cfe0d5;background:#f8fcf9;border-radius:14px;padding:14px}.sutil-plan-quote.open{display:block}
.sutil-plan-quote-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:9px;margin-top:10px}.sutil-plan-quote-item{background:#fff;border:1px solid #e1e8e4;border-radius:10px;padding:10px}.sutil-plan-quote-item small{display:block;color:#68717c;margin-bottom:4px}.sutil-plan-quote-item strong{font-size:17px}
.sutil-plan-quote-final{color:#148343;font-size:22px!important}.sutil-plan-credit{color:#1769aa}.sutil-plan-note{margin-top:9px;color:#5f6b66;font-size:12px;line-height:1.4}
@media(max-width:650px){.sutil-plan-selector{grid-template-columns:1fr}.sutil-plan-choice{min-height:125px}}

  /* SUTIL FIX 12.15.21 · Estado de cuenta: métricas en 2 columnas */
  #clientStatementSummary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    align-items:stretch;
  }
  #clientStatementSummary .card{
    min-width:0;
    margin:0 !important;
    padding:13px 14px;
  }
  #clientStatementSummary .metric{
    font-size:24px;
    overflow-wrap:anywhere;
  }
  @media(max-width:560px){
    #clientStatementSummary{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:9px !important}
    #clientStatementSummary .card{padding:12px 11px}
    #clientStatementSummary .metric{font-size:22px}
  }

  /* SUTIL FIX 12.15.65 · navegación compacta dentro de Estado de cuenta */
  .client-statement-subnav{
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px;
  }
  .client-statement-subnav .btn{
    min-width:0;min-height:48px;padding:10px 8px;white-space:normal;line-height:1.15;
  }
  .client-statement-subnav .btn.active-tab{background:var(--sutil-primary)!important;color:#fff!important}
  .client-statement-view{animation:reportFade .18s ease}
  #clientStatementSummaryPane{display:none!important}
  @media(max-width:560px){
    .client-statement-section-head{padding:13px 12px!important}
    .client-statement-subnav{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
    .client-statement-subnav .btn{font-size:13px;padding:9px 5px;min-height:46px}
    #clientStatementFiltersCard .form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
    #clientStatementFiltersCard .form-grid label:last-child{grid-column:1/-1}
  }

  /* SUTIL FIX 12.15.69 · cinco mejoras solicitadas */
  .loan-card-head > :last-child{max-width:46%;text-align:right;white-space:normal;overflow-wrap:normal;word-break:normal;line-height:1.15}
  #clientSummary{grid-template-columns:repeat(12,minmax(0,1fr)) !important}
  #clientSummary > .card{grid-column:span 6}
  #clientSummary > .client-summary-name{grid-column:span 7}
  #clientSummary > .client-summary-code{grid-column:span 5}
  #clientSummary > .client-summary-name .metric{overflow-wrap:normal !important;word-break:normal !important;hyphens:none}
  .client-location-help{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
  .client-location-help-btn{border:0;background:transparent;color:var(--sutil-primary);font-weight:800;cursor:pointer;padding:7px 4px}
  .client-location-help-body{display:none;margin-top:7px;padding:10px 12px;border-radius:11px;background:#f7fafc;border:1px solid #dfe6ed;font-size:13px;line-height:1.4}
  .client-location-help.open .client-location-help-body{display:block}
  body[data-sutil-theme="dark"] .client-location-help-body{background:#263246;border-color:#4d5d78;color:#eef3ff}
  .loans-hub-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
  .loans-hub-nav .btn{min-height:50px;white-space:normal}
  .loans-consult-filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .loans-period-row{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}
  .loans-period-row .btn{padding:8px 12px}
  .loans-period-row .active-tab{background:var(--sutil-primary)!important}
  #loansConsultDates{display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:10px 0}
  #loansConsultResults .loan-card{cursor:pointer}
  .loan-installment-pay-btn{padding:7px 9px!important;font-size:12px!important;margin:2px!important}
  @media(max-width:650px){
    #clientSummary{grid-template-columns:repeat(12,minmax(0,1fr)) !important}
    #clientSummary > .card{grid-column:span 6}
    #clientSummary > .client-summary-name{grid-column:span 7}
    #clientSummary > .client-summary-code{grid-column:span 5}
    #clientSummary > .client-summary-name .metric{font-size:17px!important;letter-spacing:-.35px}
    .loans-consult-filters{grid-template-columns:1fr 1fr}
    .loans-consult-filters label:first-child{grid-column:1/-1}
  }

/* SUTIL FIX 12.15.76 · contraste Cobro olvidado */
body[data-sutil-theme="dark"] #directPaymentForgottenGuide{
  background:#2f2a1d !important;
  border-color:#d6a23a !important;
  color:#fff4cf !important;
}
body[data-sutil-theme="dark"] #directPaymentForgottenGuideTitle{
  color:#ffe7a0 !important;
}
body[data-sutil-theme="dark"] #directPaymentForgottenGuideText,
body[data-sutil-theme="dark"] #directPaymentForgottenGuideText.muted{
  color:#f5f0df !important;
}
body[data-sutil-theme="dark"] #directPaymentForgottenGuideText strong{
  color:#ffffff !important;
}

/* SUTIL FIX 12.15.78 · contraste Pagos recibidos en modo claro */
body:not([data-sutil-theme="dark"]) #receivedPaymentsPanel .payment-method-total .metric,
body:not([data-sutil-theme="dark"]) #receivedPaymentsPanel .payment-method-total .value,
body:not([data-sutil-theme="dark"]) #receivedPaymentsPanel .payment-method-total strong,
body:not([data-sutil-theme="dark"]) #receivedPaymentsPanel .payment-method-total b {
  color:#17263a !important;
}
body:not([data-sutil-theme="dark"]) #receivedPaymentsPanel .payment-method-total .muted,
body:not([data-sutil-theme="dark"]) #receivedPaymentsPanel .payment-method-total .label {
  color:#526173 !important;
}

/* FIX 12.15.152 · Reporte por ruta profesional + leyenda + exportación */
.route-report-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-top:14px}
.route-report-toolbar .muted{margin:0;flex:1 1 280px}
.route-report-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.route-report-actions .btn{flex:1 1 160px;min-width:150px}
.route-report-legend{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;margin-top:14px}
.route-report-legend-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.route-report-legend-badge{width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;color:#fff;box-shadow:0 6px 12px rgba(0,0,0,.18);flex:0 0 28px}
.route-report-legend-name{font-weight:700;line-height:1.25}
.route-report-legend-sub{opacity:.78;font-size:.9rem;line-height:1.2;margin-top:2px}
.route-report-export-note{margin-top:12px}
@media (max-width:680px){.route-report-actions .btn{flex:1 1 calc(50% - 10px)}.route-report-legend{grid-template-columns:1fr}}


/* FIX 12.15.153 · Exportación profesional de Resumen anual */
.annual-export-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.annual-export-actions .btn{flex:1 1 145px;min-width:135px}
@media(max-width:680px){.annual-export-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.annual-export-actions .btn{min-width:0;padding:11px 8px;font-size:13px}}


/* FIX 12.15.154 · Gráficos más claros + ampliación táctil */
.report-chart-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:14px}
.report-chart-toolbar .muted{margin:0;flex:1 1 240px}
.report-chart-actions{display:flex;gap:10px;flex-wrap:wrap}
.report-chart-actions .btn{min-width:140px}
.report-chart-shell canvas{border-radius:18px;background:rgba(255,255,255,.02)}
.chart-zoom-modal{position:fixed;inset:0;z-index:5000;background:rgba(6,10,18,.78);backdrop-filter:blur(8px);display:none;align-items:center;justify-content:center;padding:16px}
.chart-zoom-card{width:min(1180px,100%);height:min(92vh,920px);background:var(--card,#101826);border:1px solid rgba(255,255,255,.08);border-radius:22px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.chart-zoom-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.chart-zoom-title-wrap{min-width:0}
.chart-zoom-title{margin:0;font-size:18px;line-height:1.2}
.chart-zoom-sub{margin-top:4px;font-size:12px;color:var(--muted,#9fb0c7)}
.chart-zoom-actions{display:flex;gap:8px;flex-wrap:wrap}
.chart-zoom-actions .btn{min-width:auto;padding:10px 12px}
.chart-zoom-viewport{position:relative;flex:1;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01));touch-action:none;user-select:none}
.chart-zoom-inner{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(1);transform-origin:center center;will-change:transform;cursor:grab}
.chart-zoom-inner.dragging{cursor:grabbing}
.chart-zoom-image{display:block;max-width:min(1600px,92vw);max-height:74vh;width:auto;height:auto;border-radius:16px;box-shadow:0 18px 40px rgba(0,0,0,.28);background:#fff}
.chart-zoom-footer{padding:10px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:var(--muted,#9fb0c7)}
body[data-sutil-theme="light"] .chart-zoom-card{background:#ffffff;border-color:#d9e2ef}
body[data-sutil-theme="light"] .chart-zoom-header,body[data-sutil-theme="light"] .chart-zoom-footer{border-color:#e7edf5}
body[data-sutil-theme="light"] .chart-zoom-modal{background:rgba(21,31,45,.5)}
@media(max-width:760px){
  .report-chart-actions{width:100%}
  .report-chart-actions .btn{flex:1 1 calc(50% - 10px)}
  .chart-zoom-card{height:min(94vh,940px);border-radius:18px}
  .chart-zoom-header{padding:12px}
  .chart-zoom-title{font-size:16px}
  .chart-zoom-actions{width:100%}
  .chart-zoom-actions .btn{flex:1 1 calc(50% - 8px)}
  .chart-zoom-image{max-width:96vw;max-height:70vh}
}


/* FIX 12.15.156 · Reportes profesionales y corrección de canvas oculto */
.report-professional-panel{border:1px solid rgba(126,145,177,.20);background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.018));border-radius:20px;padding:14px;margin-top:14px}
.report-professional-kicker{font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--muted,#aab6c8);margin-bottom:8px}
.route-metric-switch{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}
.route-metric-switch .btn{min-width:0;padding:10px 8px;font-size:12px;white-space:normal;line-height:1.15}
.route-metric-switch .active-route-metric{background:linear-gradient(135deg,#5669e8,#7d55dc);color:#fff;border-color:transparent;box-shadow:0 8px 20px rgba(87,87,220,.22)}
.route-metric-summary,.annual-metric-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}
.route-summary-item,.annual-summary-item{padding:11px 12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(130,150,185,.16);min-width:0}
.route-summary-item span,.annual-summary-item span{display:block;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted,#aeb9ca);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.route-summary-item strong,.annual-summary-item strong{display:block;font-size:17px;line-height:1.15;margin-top:5px;color:var(--text,#eef4ff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.route-summary-item small,.annual-summary-item small{display:block;margin-top:4px;color:var(--muted,#aeb9ca);font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.route-report-legend{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.route-report-legend-item{padding:9px 10px!important;border-radius:13px!important}
.route-report-legend-sub{font-size:11px!important}
.report-chart-frame{margin-top:10px;border-radius:18px;padding:10px;background:rgba(4,12,28,.14);border:1px solid rgba(130,150,185,.14);overflow:hidden}
.report-chart-frame canvas{display:block;width:100%;border-radius:12px}
.report-chart-caption-clean{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap;margin-top:9px;font-size:11px;color:var(--muted,#aeb9ca)}
.report-chart-caption-clean strong{color:var(--text,#eef4ff)}
body[data-sutil-theme="light"] .report-professional-panel{background:#f8fbff;border-color:#dbe5f0}
body[data-sutil-theme="light"] .route-summary-item,body[data-sutil-theme="light"] .annual-summary-item{background:#fff;border-color:#dce5ef}
body[data-sutil-theme="light"] .route-summary-item strong,body[data-sutil-theme="light"] .annual-summary-item strong,body[data-sutil-theme="light"] .report-chart-caption-clean strong{color:#203348}
body[data-sutil-theme="light"] .report-chart-frame{background:#f4f7fb;border-color:#dce5ef}
@media(max-width:760px){.route-metric-switch{grid-template-columns:repeat(2,minmax(0,1fr))}.route-metric-summary,.annual-metric-summary{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.route-summary-item,.annual-summary-item{padding:9px 8px}.route-summary-item strong,.annual-summary-item strong{font-size:14px}.route-report-legend{grid-template-columns:1fr!important}}


/* FIX 12.15.157 · Gráficos realmente responsive en móvil */
#reportsSection canvas#monthlyReportChart,
#reportsSection canvas#routeReportChart,
#reportsSection canvas#annualReportChart{
  display:block;
  width:100%!important;
  height:390px!important;
  max-height:none!important;
  margin-top:14px;
}
@media(max-width:760px){
  #reportsSection canvas#monthlyReportChart{height:330px!important;}
  #reportsSection canvas#routeReportChart{height:clamp(340px,62vh,560px)!important;}
  #reportsSection canvas#annualReportChart{height:350px!important;}
  #reportsSection .card.report-chart-shell,
  #reportsSection #routeReportPrintable>.card{padding-left:12px!important;padding-right:12px!important;}
  #reportsSection .report-chart-toolbar{gap:8px;margin-top:10px;}
  #reportsSection .report-chart-actions{gap:8px;}
  #reportsSection .report-chart-actions .btn,
  #reportsSection .route-report-actions .btn{min-width:0;flex:1 1 calc(50% - 8px);padding:10px 8px;font-size:13px;}
  #reportsSection .route-report-legend{gap:8px;}
  #reportsSection .route-report-legend-item{padding:9px 10px;border-radius:12px;}
}
@media(min-width:761px){
  #reportsSection canvas#monthlyReportChart,
  #reportsSection canvas#routeReportChart,
  #reportsSection canvas#annualReportChart{height:420px!important;}
}


/* FIX 12.15.167 · Selector de idioma moderno en móvil */
.sutil-access-language-mobile-btn{display:none}
.sutil-mobile-select-option.sutil-language-option{display:grid;grid-template-columns:42px 1fr 30px;align-items:center;gap:12px;min-height:66px;padding:10px 14px;border-radius:16px}
.sutil-language-code{width:38px;height:38px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:rgba(100,216,255,.12);border:1px solid rgba(100,216,255,.28);font-size:13px;font-weight:900;letter-spacing:.4px;color:#8ee6ff}
.sutil-language-label{display:flex;flex-direction:column;gap:2px;min-width:0}
.sutil-language-label strong{font-size:16px;line-height:1.1;color:inherit}
.sutil-language-label small{font-size:12px;opacity:.72;font-weight:600}
.sutil-language-check{width:26px;height:26px;border-radius:999px;border:2px solid rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:900;color:transparent}
.sutil-language-option.active .sutil-language-check{background:#39d98a;border-color:#39d98a;color:#0c2a1c}
.sutil-language-option.active .sutil-language-code{background:rgba(57,217,138,.16);border-color:rgba(57,217,138,.45);color:#64efab}
body[data-sutil-theme="light"] .sutil-language-code{background:#eef8ff;border-color:#c8e8f8;color:#19769c}
body[data-sutil-theme="light"] .sutil-language-check{border-color:#b7c4d3}
body[data-sutil-theme="light"] .sutil-language-option.active .sutil-language-check{background:#1ea968;border-color:#1ea968;color:white}
body[data-sutil-theme="light"] .sutil-language-option.active .sutil-language-code{background:#e9f8f1;border-color:#b7e8d0;color:#137747}
@media(max-width:760px){
  #accessLanguage{display:none !important}
  #accessLanguageMobileButton{display:flex !important;width:min(100%,300px);min-height:52px;margin:8px 0 0 auto;padding:10px 14px}
  #accessLanguageLabel{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;flex-wrap:wrap}
  #accessLanguageLabel #accessLanguageMobileButton{flex:1 1 180px;max-width:300px}
}


/* SUTIL FIX 12.15.171 · Preconfiguración WhatsApp Business */
#whatsappBusinessSection .wa-config-status{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:14px 16px;border:1px solid var(--border,#cad6e2);border-radius:16px;margin-top:14px;
  background:rgba(255,255,255,.35)
}
#whatsappBusinessSection .wa-config-status-left{display:flex;align-items:center;gap:10px;min-width:0}
#whatsappBusinessSection .wa-status-dot{width:12px;height:12px;border-radius:50%;background:#9aa8b6;box-shadow:0 0 0 5px rgba(154,168,182,.13);flex:0 0 auto}
#whatsappBusinessSection .wa-status-badge{font-weight:900;font-size:13px;padding:7px 10px;border-radius:999px;background:#eef2f6;color:#51606e}
#whatsappBusinessSection .wa-config-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:16px}
#whatsappBusinessSection .wa-config-card{border:1px solid var(--border,#cad6e2);border-radius:18px;padding:16px;background:rgba(255,255,255,.28);min-width:0}
#whatsappBusinessSection .wa-config-card.full{grid-column:1/-1}
#whatsappBusinessSection .wa-config-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
#whatsappBusinessSection .wa-config-title{font-size:18px;font-weight:900;line-height:1.15;margin:0;color:var(--text,#18304a)}
#whatsappBusinessSection .wa-config-desc{font-size:13px;color:var(--muted,#677789);line-height:1.4;margin-top:5px}
#whatsappBusinessSection .wa-mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#whatsappBusinessSection .wa-mode-option{border:1px solid var(--border,#cad6e2);border-radius:14px;padding:13px;cursor:pointer;background:rgba(255,255,255,.28);display:flex;gap:10px;align-items:flex-start}
#whatsappBusinessSection .wa-mode-option.active{border-color:#39c9b8;background:rgba(57,201,184,.11);box-shadow:0 0 0 2px rgba(57,201,184,.08)}
#whatsappBusinessSection .wa-mode-option input{margin-top:3px;accent-color:#29b9a9}
#whatsappBusinessSection .wa-mode-option strong{display:block;font-size:14px}
#whatsappBusinessSection .wa-mode-option small{display:block;color:var(--muted,#677789);margin-top:3px;line-height:1.3}
#whatsappBusinessSection .wa-number-list{display:grid;gap:9px}
#whatsappBusinessSection .wa-number-row{display:grid;grid-template-columns:minmax(120px,.75fr) minmax(170px,1fr) 42px;gap:8px;align-items:center}
#whatsappBusinessSection .wa-number-row input{width:100%;min-width:0}
#whatsappBusinessSection .wa-number-remove{width:42px;height:42px;border-radius:12px;border:1px solid #e2a0a8;background:rgba(218,74,90,.10);color:#d94a5a;font-weight:900;padding:0}
#whatsappBusinessSection .wa-route-assignment-list{display:grid;gap:9px}
#whatsappBusinessSection .wa-route-assignment{display:grid;grid-template-columns:minmax(150px,1fr) minmax(180px,1fr);gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid rgba(127,145,164,.18)}
#whatsappBusinessSection .wa-route-assignment:last-child{border-bottom:0}
#whatsappBusinessSection .wa-route-name{font-weight:800;overflow-wrap:anywhere}
#whatsappBusinessSection .wa-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 0;border-bottom:1px solid rgba(127,145,164,.18)}
#whatsappBusinessSection .wa-toggle-row:last-child{border-bottom:0}
#whatsappBusinessSection .wa-toggle-copy{min-width:0}
#whatsappBusinessSection .wa-toggle-copy strong{display:block}
#whatsappBusinessSection .wa-toggle-copy small{display:block;margin-top:4px;color:var(--muted,#677789);line-height:1.35}
#whatsappBusinessSection .wa-switch{position:relative;width:54px;height:30px;flex:0 0 auto}
#whatsappBusinessSection .wa-switch input{opacity:0;width:0;height:0;position:absolute}
#whatsappBusinessSection .wa-switch span{position:absolute;inset:0;border-radius:999px;background:#9aa8b6;transition:.18s;cursor:pointer}
#whatsappBusinessSection .wa-switch span:after{content:"";position:absolute;width:24px;height:24px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.22);transition:.18s}
#whatsappBusinessSection .wa-switch input:checked + span{background:#27b8a6}
#whatsappBusinessSection .wa-switch input:checked + span:after{transform:translateX(24px)}
#whatsappBusinessSection .wa-switch input:disabled + span{opacity:.55;cursor:not-allowed}
#whatsappBusinessSection .wa-config-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
#whatsappBusinessSection .wa-config-actions .btn{min-width:170px}
#whatsappBusinessSection .wa-readonly-note{display:none;margin-top:12px;padding:11px 13px;border-radius:12px;background:rgba(75,134,210,.10);border:1px solid rgba(75,134,210,.28);color:var(--text,#18304a);font-size:13px;line-height:1.4}
#whatsappBusinessSection .wa-empty{padding:16px;border:1px dashed var(--border,#cad6e2);border-radius:13px;color:var(--muted,#677789);text-align:center}
#whatsappBusinessSection .wa-pending-button[disabled]{opacity:.72;cursor:not-allowed}
#whatsappBusinessSection .wa-status-dot.connected{background:#24c88a;box-shadow:0 0 0 5px rgba(36,200,138,.14)}
#whatsappBusinessSection .wa-status-badge.connected{background:rgba(36,200,138,.16);color:#1f9d70;border:1px solid rgba(36,200,138,.32)}
body[data-sutil-theme="dark"] #whatsappBusinessSection .wa-status-badge.connected{color:#70e7ba}
#whatsappBusinessSection .wa-meta-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
#whatsappBusinessSection .wa-meta-hint{font-size:12px;line-height:1.45;margin-top:10px}
#whatsappBusinessSection .wa-meta-numbers{display:grid;gap:8px;margin-top:12px}
#whatsappBusinessSection .wa-meta-number{border:1px solid var(--border,#cad6e2);border-radius:14px;padding:11px 12px;display:flex;justify-content:space-between;gap:10px;align-items:center;background:rgba(255,255,255,.22)}
body[data-sutil-theme="dark"] #whatsappBusinessSection .wa-meta-number{background:rgba(10,24,47,.22)}
#whatsappBusinessSection .wa-meta-number strong{display:block;font-size:14px}
#whatsappBusinessSection .wa-meta-number small{display:block;margin-top:2px;color:var(--muted,#748195)}
body[data-sutil-theme="dark"] #whatsappBusinessSection .wa-config-card,
body[data-sutil-theme="dark"] #whatsappBusinessSection .wa-config-status,
body[data-sutil-theme="dark"] #whatsappBusinessSection .wa-mode-option{background:#29384d!important;border-color:#50627a!important}
body[data-sutil-theme="dark"] #whatsappBusinessSection .wa-config-title,
body[data-sutil-theme="dark"] #whatsappBusinessSection .wa-route-name,
body[data-sutil-theme="dark"] #whatsappBusinessSection .wa-toggle-copy strong,
body[data-sutil-theme="dark"] #whatsappBusinessSection .wa-readonly-note{color:#f1f6fb!important;-webkit-text-fill-color:#f1f6fb!important}
body[data-sutil-theme="dark"] #whatsappBusinessSection .wa-config-desc,
body[data-sutil-theme="dark"] #whatsappBusinessSection .wa-mode-option small,
body[data-sutil-theme="dark"] #whatsappBusinessSection .wa-toggle-copy small{color:#c2cfdd!important;-webkit-text-fill-color:#c2cfdd!important}
body[data-sutil-theme="dark"] #whatsappBusinessSection .wa-status-badge{background:#3c485a;color:#dce6ef}
@media(max-width:760px){
  #whatsappBusinessSection .wa-config-grid{grid-template-columns:1fr}
  #whatsappBusinessSection .wa-config-card.full{grid-column:auto}
  #whatsappBusinessSection .wa-mode-grid{grid-template-columns:1fr}
  #whatsappBusinessSection .wa-number-row{grid-template-columns:1fr 1fr 42px}
  #whatsappBusinessSection .wa-route-assignment{grid-template-columns:1fr}
  #whatsappBusinessSection .wa-config-actions .btn{flex:1 1 100%;width:100%}
}
@media(max-width:430px){
  #whatsappBusinessSection .wa-number-row{grid-template-columns:1fr 42px}
  #whatsappBusinessSection .wa-number-row input:nth-child(2){grid-column:1/2}
  #whatsappBusinessSection .wa-number-remove{grid-column:2/3;grid-row:1/3;height:100%;min-height:42px}
}

</style>

<style>
.force-password-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.68);
  display:none;align-items:center;justify-content:center;
  padding:18px;z-index:99999
}
.force-password-backdrop.open{display:flex}
.force-password-card{
  width:min(460px,100%);background:#fff;border-radius:18px;
  padding:22px;box-shadow:0 24px 80px rgba(0,0,0,.35)
}
.force-password-card h3{margin:0 0 8px}
.force-password-card p{color:#64748b;margin:0 0 16px}
.force-password-card label{display:block;margin-top:12px;font-weight:700}
.force-password-card input{width:100%;box-sizing:border-box;margin-top:6px}
.force-password-card button{width:100%;margin-top:16px}
.force-password-msg{min-height:20px;margin-top:10px;font-size:13px}

/* SUTIL FIX 12.15.174 · El modal de clave debe conservar contraste propio
   y no heredar colores incompatibles del tema global. */
.force-password-card{color:#20242a}
.force-password-card h3,
.force-password-card label{color:#1f2937!important}
.force-password-card p{color:#64748b!important}
.force-password-card .force-password-msg{color:#b42318}
.force-password-card input{background:#fff!important;color:#20242a!important;border-color:#b9c1c9!important}

body[data-sutil-theme="dark"] .force-password-card{
  background:#263246!important;
  color:#eef3ff!important;
  border:1px solid #4d5d78;
}
body[data-sutil-theme="dark"] .force-password-card h3,
body[data-sutil-theme="dark"] .force-password-card label{color:#f8fbff!important}
body[data-sutil-theme="dark"] .force-password-card p{color:#c7d2e5!important}
body[data-sutil-theme="dark"] .force-password-card input{
  background:#1e293b!important;
  color:#f8fbff!important;
  border-color:#60708c!important;
}
body[data-sutil-theme="dark"] .force-password-card input:focus{
  border-color:var(--sutil-primary)!important;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--sutil-primary) 22%,transparent);
  outline:none;
}
body[data-sutil-theme="dark"] .force-password-card .force-password-msg{color:#ffb4b4!important}
</style>


<style>
.client-edit-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.68);
  display:none;align-items:center;justify-content:center;
  padding:18px;z-index:99999
}
.client-edit-backdrop.open{display:flex}
.client-edit-card{
  width:min(900px,100%);max-height:92vh;overflow:auto;
  background:#fff;border-radius:18px;padding:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.35)
}
.client-edit-head{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;margin-bottom:14px
}
.client-edit-actions{
  display:flex;justify-content:flex-end;gap:10px;
  flex-wrap:wrap;margin-top:18px
}
</style>

<style>
.loan-edit-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.68);display:none;align-items:center;justify-content:center;padding:18px;z-index:99999}
.loan-edit-backdrop.open{display:flex}
.loan-edit-card{width:min(900px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:18px;padding:20px;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.loan-actions{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
</style>

<style>
.staff-list-card{border:1px solid #e4eaf0;background:linear-gradient(180deg,#fff,#fbfcfe)}
.staff-table thead th{background:#f4f7fb;color:#52606d;font-size:12px;text-transform:uppercase;letter-spacing:.03em}
.staff-table td{vertical-align:middle;padding:13px 10px}
.staff-person-name{font-weight:800;color:#17212b}
.staff-role-pill,.staff-state-pill,.staff-route-pill{
  display:inline-flex;align-items:center;gap:6px;border-radius:999px;
  padding:6px 10px;font-size:12px;font-weight:800
}
.staff-role-pill.adm{background:#ebe7ff;color:#5b3cc4}
.staff-role-pill.collector{background:#e5f7ec;color:#137547}
.staff-state-pill.active{background:#dcfce7;color:#16753c}
.staff-state-pill.inactive{background:#f1f3f5;color:#66717c}
.staff-route-pill{background:#edf5ff;color:#1769aa;margin:2px}
.staff-action-row{display:flex;gap:7px;flex-wrap:wrap;min-width:320px}
.staff-btn-edit{background:#1769aa}.staff-btn-key{background:#6d4cc7}
.staff-btn-disable{background:#b42318}.staff-btn-enable{background:#148343}
.staff-edit-backdrop{
  position:fixed;inset:0;background:rgba(15,23,42,.68);display:none;
  align-items:center;justify-content:center;padding:16px;z-index:99999
}
.staff-edit-backdrop.open{display:flex}
.staff-edit-card{
  width:min(980px,100%);max-height:93vh;overflow:auto;background:#fff;
  border-radius:20px;padding:20px;box-shadow:0 24px 80px rgba(0,0,0,.35)
}
.staff-edit-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.staff-edit-section{border:1px solid #e1e7ed;border-radius:14px;padding:15px;margin-top:14px;background:#fbfcfe}
.staff-edit-section h4{margin:0 0 10px}
.staff-choice-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:9px}
.staff-choice{
  display:flex;align-items:flex-start;gap:9px;padding:10px;border:1px solid #dfe5eb;
  border-radius:10px;background:#fff;font-weight:600;margin:0
}
.staff-choice input{width:auto;margin:2px 0 0}
.staff-edit-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:18px}
@media(max-width:650px){.staff-action-row{min-width:240px}.staff-edit-card{padding:14px}}
</style>


<style>
.pix-table thead th{background:#f5f8fc;color:#52606d;font-size:12px;text-transform:uppercase}
.pix-row-checking{background:#fffaf0}.pix-row-confirmed{background:#eefaf2}.pix-row-rejected{background:#fff2f1}
.pix-state{display:inline-flex;align-items:center;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:800}
/* Comprobantes PIX: el listado muestra únicamente el estado visible.
   Las notas técnicas siguen disponibles internamente/detalle, pero nunca se
   imprimen debajo de Estado. */
.pix-table #receipts td:nth-child(6) > br,
.pix-table #receipts td:nth-child(6) > small{
  display:none !important;
}

.pix-status-only > :not(.pix-state){display:none !important;}

.pix-state.checking{background:#fff0c2;color:#8b6500}
.pix-state.confirmed{background:#dff5e6;color:#14743e}
.pix-state.not_confirmed{background:#ffdeda;color:#a4271e}
.pix-file-btn{background:#5d6874}
.pix-review-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.7);display:none;align-items:center;justify-content:center;padding:16px;z-index:99999}
.pix-review-backdrop.open{display:flex}
.pix-review-card{width:min(980px,100%);max-height:94vh;overflow:auto;background:#fff;border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.35)}
.pix-review-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;padding:19px 21px;border-bottom:1px solid #e4e9ee}
.pix-review-body{padding:20px}
.pix-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.pix-summary-box{border:1px solid #e0e6ec;border-radius:12px;padding:13px;background:#fafcfe}
.pix-summary-box small{display:block;color:#68717c;margin-bottom:6px}
.pix-preview{margin-top:15px;border:1px solid #dfe5eb;border-radius:14px;overflow:hidden;background:#f5f7f9;min-height:280px;display:flex;align-items:center;justify-content:center}
.pix-preview img{max-width:100%;max-height:520px;display:block}
.pix-preview iframe{width:100%;height:520px;border:0;background:#fff}
.pix-decision-grid{margin-top:15px;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:11px}
.pix-review-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:17px}
@media(max-width:650px){.pix-review-body{padding:14px}.pix-preview iframe{height:430px}}
</style>


<style>
.cash-status-banner{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;border-radius:14px;padding:14px 16px;margin:12px 0}
.cash-status-banner.open{background:#eaf8f0;border:1px solid #b7e0c7;color:#126b39}
.cash-status-banner.closed{background:#edf3ff;border:1px solid #c7d7ff;color:#244f9e}
.cash-status-banner.missing{background:#fff7e6;border:1px solid #f0d18a;color:#875e00}
.cash-actor-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:12px 0}
.cash-actor-box{border:1px solid #dfe5eb;border-radius:12px;padding:12px;background:#fafcfe}
.cash-actor-box small{display:block;color:#68717c;margin-bottom:5px}
.cash-actor-box-full{grid-column:1 / -1}
@media(max-width:520px){.cash-actor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.cash-actor-box{min-width:0}}
.cash-difference-ok{background:#eaf8f0!important;border-color:#b7e0c7!important}
.cash-difference-bad{background:#fff0f0!important;border-color:#efb8b3!important}
</style>


<style>
.client-file-nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(135px,1fr));gap:9px;margin:14px 0}
.client-file-btn{border:1px solid #d6e0e8;border-radius:13px;padding:12px 8px;min-height:72px;background:#f7fafc;color:#355066;cursor:pointer;font-weight:800;text-align:center}
.client-file-btn:hover{background:#eef6fb;transform:translateY(-1px)}
.client-file-btn.active{background:#1769aa;border-color:#1769aa;color:#fff;box-shadow:0 5px 15px #1769aa30}
.client-file-pane{display:none}.client-file-pane.active{display:block}
.client-empty{border:2px dashed #cad3dc;border-radius:14px;padding:26px;text-align:center;color:#66717c;background:#fafcfd}
.client-risk{border-radius:14px;padding:16px;font-weight:800;margin-bottom:12px}
.client-risk.low{background:#eaf8f0;color:#126b39;border:1px solid #b7e0c7}
.client-risk.medium{background:#fff7e6;color:#875e00;border:1px solid #f0d18a}
.client-risk.high{background:#fff0f0;color:#9c2018;border:1px solid #efb8b3}
@media(max-width:650px){.client-file-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.client-file-btn{min-height:62px}}


/* ============================================================
   SUTIL · CENTRO DE CHATS CON CLIENTES
   - Lista filtrable por nombre, código o ruta.
   - Conversación compacta tipo WhatsApp.
   - Puente preparado para futura integración de IA (desactivado).
   ============================================================ */
.sutil-chat-center{
  display:grid;
  grid-template-columns:minmax(280px,360px) minmax(0,1fr);
  gap:14px;
  align-items:stretch;
}
.sutil-chat-directory{
  border:1px solid #dfe5ea;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
  min-height:560px;
  display:flex;
  flex-direction:column;
}
.sutil-chat-directory-head{
  padding:14px;
  border-bottom:1px solid #e7ebef;
  background:#f8fafb;
}
.sutil-chat-directory-filters{
  display:grid;
  gap:8px;
  margin-top:10px;
}
.sutil-chat-directory-filters input,
.sutil-chat-directory-filters select{
  width:100%;
  margin:0;
}
.sutil-chat-directory-list{
  overflow:auto;
  max-height:590px;
  flex:1 1 auto;
}
.sutil-chat-directory-item{
  width:100%;
  border:0;
  border-bottom:1px solid #edf0f2;
  background:#fff;
  padding:12px 14px;
  text-align:left;
  cursor:pointer;
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.sutil-chat-directory-item:hover{background:#f4f8f6}
.sutil-chat-directory-item.active{background:#eaf6ef;border-left:4px solid #238b57;padding-left:10px}
.sutil-chat-directory-avatar{
  width:42px;height:42px;border-radius:50%;
  background:#e9eef3;display:flex;align-items:center;justify-content:center;
  font-weight:800;color:#425466;overflow:hidden;
}
.sutil-chat-directory-avatar img{width:100%;height:100%;object-fit:cover}
.sutil-chat-directory-name{font-weight:800;color:#253746;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sutil-chat-directory-meta{font-size:11px;color:#71808e;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sutil-chat-directory-open{font-size:18px;color:#238b57;font-weight:900}
.sutil-chat-center-panel{
  min-width:0;
  min-height:560px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sutil-chat-center-panel .sutil-chat-shell{
  width:min(100%,610px);
  height:590px;
  max-height:590px;
  margin:0;
}
.sutil-chat-ai-badge{
  display:inline-flex;align-items:center;gap:5px;
  border:1px solid #d7e5dc;background:#f2f8f4;color:#49705a;
  border-radius:999px;padding:4px 8px;font-size:10px;font-weight:800;
}
.sutil-chat-center-empty{
  width:100%;min-height:560px;border:1px dashed #cbd5dc;border-radius:16px;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#71808e;background:#fafbfc;padding:24px;
}
@media (max-width:860px){
  .sutil-chat-center{grid-template-columns:1fr}
  .sutil-chat-directory{min-height:auto}
  .sutil-chat-directory-list{max-height:300px}
  .sutil-chat-center-panel{min-height:480px}
  .sutil-chat-center-panel .sutil-chat-shell{height:68vh;min-height:460px;max-height:620px}
}

.sutil-chat-shell{
  width:min(100%,460px);
  height:560px;
  margin:14px auto;
  border:1px solid #dbe3ea;
  border-radius:18px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 10px 28px rgba(31,55,78,.12);
  display:flex;
  flex-direction:column;
}
.sutil-chat-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-bottom:1px solid #dfe6eb;
  background:#f8fafc;
  flex:0 0 auto;
}
.sutil-chat-head strong{color:#26394b;font-size:14px}
.sutil-chat-head small{display:block;color:#71808e;margin-top:2px;font-size:11px}
.sutil-chat-head .btn{padding:7px 10px;font-size:12px}
.sutil-chat-messages{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  overflow:auto;
  padding:12px;
  background:#efeae2;
}
.sutil-chat-row{display:flex;margin:7px 0}
.sutil-chat-row.client{justify-content:flex-start}
.sutil-chat-row.staff{justify-content:flex-end}
.sutil-chat-row.system{justify-content:center}
.sutil-chat-bubble{
  max-width:82%;
  border-radius:13px;
  padding:8px 10px;
  box-shadow:0 2px 8px rgba(31,55,78,.08);
  overflow-wrap:anywhere;
}
.sutil-chat-row.client .sutil-chat-bubble{
  background:#fff;
  border:1px solid #dce5eb;
  border-bottom-left-radius:5px;
}
.sutil-chat-row.staff .sutil-chat-bubble{
  background:var(--sutil-primary,#1769aa);
  color:#fff;
  border-bottom-right-radius:5px;
}
.sutil-chat-row.system .sutil-chat-bubble{
  max-width:88%;
  background:#fff6df;
  color:#6e570d;
  border:1px solid #ead69b;
  font-size:12px;
  text-align:center;
}
.sutil-chat-meta{
  display:flex;
  gap:8px;
  justify-content:space-between;
  margin-bottom:4px;
  font-size:11px;
  opacity:.82;
}
.sutil-chat-text{white-space:pre-wrap;line-height:1.35}
.sutil-chat-compose{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:8px;
  align-items:center;
  padding:8px 10px;
  border-top:1px solid #e7edf2;
  background:#f7f8fa;
  flex:0 0 auto;
}
.sutil-chat-compose textarea{
  width:100%;
  min-height:40px;
  max-height:88px;
  resize:none;
  border:1px solid #cfd9e1;
  border-radius:20px;
  padding:9px 12px;
  font:inherit;
}
.sutil-chat-compose .btn{min-width:74px;border-radius:20px;padding:9px 12px}
.sutil-chat-status{padding:0 10px 7px;color:#6e7b87;font-size:11px;min-height:16px;background:#f7f8fa;flex:0 0 auto}
.sutil-chat-menu{position:relative}
.sutil-chat-menu summary{list-style:none;cursor:pointer;width:34px;height:34px;border:1px solid #d7e0e6;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:900;background:#fff;color:#405261;user-select:none}
.sutil-chat-menu summary::-webkit-details-marker{display:none}
.sutil-chat-menu[open] summary{background:#eef5f1}
.sutil-chat-menu-box{position:absolute;right:0;top:39px;z-index:30;width:230px;background:#fff;border:1px solid #d8e1e7;border-radius:12px;box-shadow:0 10px 28px rgba(31,55,78,.18);padding:6px}
.sutil-chat-menu-box button{display:block;width:100%;border:0;background:transparent;text-align:left;padding:10px;border-radius:8px;cursor:pointer;font:inherit;color:#314455}
.sutil-chat-menu-box button:hover{background:#f2f6f4}
.sutil-chat-menu-box button.danger{color:#b33131}
.sutil-chat-attach-btn{width:40px;height:40px;border-radius:50%;border:1px solid #cfd9e1;background:#fff;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center}
.sutil-chat-attach-btn:hover{background:#edf4f0}
.sutil-chat-attachment{display:flex;gap:8px;align-items:center;text-decoration:none;color:inherit;border-radius:9px;padding:7px;background:rgba(255,255,255,.16)}
.sutil-chat-attachment img{width:170px;max-width:100%;max-height:150px;object-fit:cover;border-radius:9px;display:block}
.sutil-chat-file-icon{font-size:24px}
.sutil-chat-file-name{font-weight:800;overflow-wrap:anywhere}
.sutil-chat-file-size{font-size:10px;opacity:.75;margin-top:2px}
@media(max-width:650px){
  .sutil-chat-shell{width:100%;height:68vh;min-height:460px;max-height:620px;margin:10px 0}
  .sutil-chat-bubble{max-width:90%}
  .sutil-chat-compose{grid-template-columns:auto minmax(0,1fr) auto}
  .sutil-chat-compose .btn{width:auto;min-width:66px}
}
</style>


<style>
.loan-manual-box{
  display:none;
  margin-top:16px;
  padding:15px;
  border:1px solid #d9e0e7;
  border-radius:15px;
  background:#f8fafc;
}
.loan-manual-box.open{display:block}
.loan-manual-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.loan-manual-row{
  display:grid;
  grid-template-columns:76px minmax(160px,1fr) minmax(135px,1fr);
  gap:10px;
  align-items:end;
  background:#fff;
  border:1px solid #e2e8f0;
  border-radius:11px;
  padding:11px;
  margin-top:9px;
}
.loan-manual-total{
  margin-top:12px;
  padding:11px;
  border-radius:10px;
  text-align:right;
  font-weight:800;
}
.loan-manual-total.ok{background:#eaf8f0;color:#126b39}
.loan-manual-total.bad{background:#fff0f0;color:#9c2018}
.loan-error-box{
  border-left:5px solid #b42318;
  line-height:1.45;
}
@media(max-width:650px){
  .loan-manual-row{grid-template-columns:1fr 1fr}
  .loan-manual-row label:first-child{grid-column:1/-1}
}
</style>


<style>
.collections-client-cell{
  min-width:190px;
}
.collections-client-wrap{
  display:flex;
  align-items:center;
  gap:10px;
}
.collections-client-text{
  min-width:0;
}
.collections-client-name{
  display:block;
  font-weight:800;
  line-height:1.2;
}
.collections-client-code{
  display:block;
  margin-top:3px;
  color:#68717c;
  font-size:12px;
  font-weight:700;
}
.collections-actions{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  min-width:145px;
}
.collections-table th,
.collections-table td{
  vertical-align:middle;
}
@media(max-width:650px){
  .collections-client-cell{min-width:165px}
  .collections-actions{min-width:125px}
}
</style>

<style>
.collections-photo-button{
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  border-radius:50%;
  line-height:0;
}
.collections-photo-button:hover{
  transform:scale(1.05);
}
.collections-photo-current .client-photo{
  border-color:#148343;
  box-shadow:0 0 0 3px #d9f2df;
}
.collections-photo-today .client-photo{
  border-color:#d49a00;
  box-shadow:0 0 0 3px #fff0b3;
}
.collections-photo-overdue .client-photo{
  border-color:#b42318;
  box-shadow:0 0 0 3px #ffd9d6;
}
.collections-photo-inactive .client-photo{
  border-color:#8a949e;
  box-shadow:0 0 0 3px #e5e9ed;
}
.collections-client-icons{
  display:flex;
  gap:6px;
  margin-top:5px;
  font-size:14px;
}
.collections-client-icons span{
  cursor:default;
}
.collections-days-long{
  display:inline-block;
  background:#b42318;
  color:white;
  border-radius:999px;
  padding:4px 8px;
  font-weight:800;
}
.collections-row-today{
  outline:2px solid #e4b11b;
  outline-offset:-2px;
}
.collections-row-overdue-long{
  box-shadow:inset 5px 0 0 #8f1d18;
}
</style>


<style>
/* SUTIL FIX 12.14 · buscador directo de clientes en Crear crédito */
.loan-client-picker{
  grid-column:1/-1;
  position:relative;
  min-width:0;
}
.loan-client-hidden-select{
  display:none !important;
}
.loan-client-search-results{
  display:none;
  margin-top:7px;
  border:1px solid var(--form-border);
  border-radius:12px;
  background:var(--form-bg);
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.18);
  max-height:330px;
  overflow-y:auto;
  position:relative;
  z-index:18;
}
.loan-client-search-results.open{display:block}
.loan-client-result{
  width:100%;
  border:0;
  border-bottom:1px solid var(--form-border);
  background:transparent;
  color:var(--form-text);
  text-align:left;
  padding:13px 14px;
  cursor:pointer;
  display:block;
}
.loan-client-result:last-child{border-bottom:0}
.loan-client-result:hover,
.loan-client-result:focus{
  background:var(--form-bg-soft);
  outline:none;
}
.loan-client-result-name{
  display:block;
  font-weight:850;
  font-size:15px;
  line-height:1.25;
  color:var(--form-text);
}
.loan-client-result-meta{
  display:block;
  margin-top:4px;
  color:var(--form-muted);
  font-size:13px;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.loan-client-search-empty{
  padding:13px 14px;
  color:var(--form-muted);
  font-size:14px;
}
.loan-selected-client{
  margin-top:9px;
  border:1px solid rgba(58,184,112,.55);
  border-radius:13px;
  background:rgba(34,150,90,.10);
  padding:13px 14px;
  color:var(--form-text);
}
.loan-selected-client-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}
.loan-selected-client-label{
  font-weight:850;
  color:#39b874;
}
.loan-selected-client-name{
  font-weight:900;
  font-size:16px;
  margin-top:5px;
  color:var(--form-text);
}
.loan-selected-client-meta{
  margin-top:4px;
  color:var(--form-muted);
  font-size:13px;
  line-height:1.4;
  overflow-wrap:anywhere;
}
.loan-change-client{
  border:1px solid var(--form-border);
  background:var(--form-bg-soft);
  color:var(--form-text);
  border-radius:9px;
  padding:7px 10px;
  font-weight:800;
  cursor:pointer;
}
@media(max-width:640px){
  .loan-client-result{padding:14px 12px}
  .loan-client-search-results{max-height:285px}
  .loan-selected-client-head{align-items:flex-start}
}
</style>

<style>
.operation-cash-status{
  border-radius:14px;padding:13px 15px;margin:12px 0;
  font-weight:800;border:1px solid transparent;
}
.operation-cash-status.open{background:#eaf8f0;border-color:#b7e0c7;color:#126b39}
.operation-cash-status.closed{background:#fff0f0;border-color:#efb8b3;color:#9c2018}
.operation-cash-status.not_opened{background:#fff7e6;border-color:#f0d18a;color:#875e00}
</style>

<style>
.historical-banner{
  border:2px solid #6b5ac7;background:#f1efff;color:#4b3aa0;
  border-radius:14px;padding:14px 16px;margin:12px 0;font-weight:800
}
.historical-banner strong{display:block;font-size:16px;margin-bottom:4px}
.historical-only{display:none}
body.historical-mode .historical-only{display:block}
body.historical-mode .operation-cash-status{
  background:#f1efff!important;border-color:#bcb4ef!important;color:#4b3aa0!important
}
.forgotten-only{display:none}
body.forgotten-operation-mode .forgotten-only{display:block}
.forgotten-banner{
  border:2px solid #d49a2b;background:#fff7e6;color:#7a5200;
  border-radius:14px;padding:14px 16px;margin:12px 0;font-weight:800
}
.forgotten-banner strong{display:block;font-size:16px;margin-bottom:4px}
body.forgotten-operation-mode .operation-cash-status{
  background:#fff7e6!important;border-color:#e6bf6f!important;color:#7a5200!important
}
</style>

<style>
.client-hub-head{
  display:flex;justify-content:space-between;align-items:flex-start;
  gap:12px;flex-wrap:wrap
}
.client-hub-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:14px;margin-top:16px
}
.client-hub-action{
  border:1px solid #d9e0e7;border-radius:16px;background:#fff;
  padding:20px;min-height:145px;cursor:pointer;text-align:left;
  box-shadow:0 2px 9px #0000000d;
  transition:.15s ease
}
.client-hub-action:hover{transform:translateY(-2px);box-shadow:0 5px 18px #00000014}
.client-hub-action .icon{font-size:34px;margin-bottom:10px}
.client-hub-action strong{display:block;font-size:18px;color:#155f93}
.client-hub-action small{display:block;color:#68717c;margin-top:7px;line-height:1.35}

.client-directory-card.hidden-for-detail{display:none}
.client-detail-shell{max-width:1180px;margin:0 auto}
.client-detail-top{
  background:#fff;border-radius:16px;padding:16px;margin:12px 0;
  box-shadow:0 2px 12px #00000012
}
.client-detail-identity{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap
}
.client-detail-identity-text h2{margin:0 0 4px;font-size:24px}
.client-detail-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}
.client-detail-meta span{
  display:inline-flex;padding:5px 9px;border-radius:999px;
  background:#eef3f7;color:#405160;font-size:12px;font-weight:800
}
.client-detail-actions{
  display:flex;gap:8px;flex-wrap:wrap;margin-top:14px
}
.client-file-nav{
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.client-file-btn{
  min-height:82px;font-size:14px
}
.client-detail-back{margin-bottom:10px}

@media(max-width:650px){
  .client-hub-grid{grid-template-columns:1fr 1fr}
  .client-hub-action{min-height:125px;padding:15px}
  .client-detail-identity-text h2{font-size:20px}
  .client-file-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
</style>

<style>
.import-map-grid{display:grid;grid-template-columns:minmax(180px,1fr) minmax(220px,1fr);gap:8px 12px;align-items:center}
.import-map-row{display:contents}
.import-map-source{padding:9px;border-radius:8px;background:#f5f7fa;font-weight:800;overflow-wrap:anywhere}
.import-preview-table{font-size:12px}
.import-stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.import-stat{border:1px solid #dfe5eb;border-radius:12px;padding:12px;background:#fafcfe}
.import-stat strong{display:block;font-size:22px;margin-top:4px}
.import-warning{background:#fff7e6;border:1px solid #f0d18a;color:#875e00;border-radius:12px;padding:12px;margin:12px 0}
.import-route-row{display:grid;grid-template-columns:minmax(130px,1fr) minmax(190px,1fr);gap:10px;align-items:center;margin:8px 0}
@media(max-width:650px){
 .import-map-grid,.import-route-row{grid-template-columns:1fr}
 .import-map-row{display:block;border-bottom:1px solid #e5e9ed;padding-bottom:10px;margin-bottom:10px}
 .import-map-source{margin-bottom:6px}
}
</style>

<style>
/* Barra de progreso: análisis del paquete histórico */
.historical-package-progress{
  display:none;margin-top:12px;padding:12px;border:1px solid #d9e0e7;
  border-radius:12px;background:#fafcfe
}
.historical-package-progress.open{display:block}
.historical-package-progress-head{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  margin-bottom:8px;font-size:13px;font-weight:800;color:#405160
}
.historical-package-progress-track{
  width:100%;height:16px;border-radius:999px;background:#e5e9ed;
  overflow:hidden;border:1px solid #d5dce3
}
.historical-package-progress-bar{
  width:0%;height:100%;border-radius:999px;background:#1769aa;
  transition:width .35s ease
}
.historical-package-progress.done .historical-package-progress-bar{background:#148343}
.historical-package-progress.error .historical-package-progress-bar{background:#b42318}
</style>


<style>
.collections-option-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin:14px 0;
}
.collections-option{
  min-height:145px;
  border:1px solid #d6dee6;
  border-radius:18px;
  background:linear-gradient(180deg,#fff,#f7fafc);
  padding:18px 14px;
  cursor:pointer;
  text-align:center;
  color:#155f93;
  font-weight:800;
  box-shadow:0 2px 8px #0000000d;
}
.collections-option:hover{transform:translateY(-2px)}
.collections-option.active{
  border:2px solid #1769aa;
  background:#edf6fd;
}
.collections-option-icon{
  display:block;
  font-size:38px;
  margin-bottom:8px;
}
.collections-option-title{
  display:block;
  font-size:20px;
  line-height:1.15;
}
.collections-option small{
  display:block;
  color:#68717c;
  margin-top:8px;
  font-weight:600;
}
.collections-mode-pane{display:none}
.collections-mode-pane.active{display:block}
.collections-panel-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:10px}
.payments-search-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:end}
.payments-search-actions{display:flex;gap:10px;align-items:end;flex-wrap:wrap}
.payments-order-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:14px 0}
.radio-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;font-weight:700;color:var(--primary)}
.radio-pill input{margin:0}
.payments-summary-strip{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#faf8ff;margin:14px 0;color:var(--primary)}
.method-mini-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px;margin-bottom:14px}
.method-mini-card{border:1px solid var(--line);border-radius:16px;padding:14px;background:linear-gradient(180deg,#ffffff 0%,#f6f8ff 100%);box-shadow:0 8px 18px rgba(32,37,75,.06)}
.method-mini-card small{display:block;color:var(--muted);font-weight:700;margin-bottom:6px}
.method-mini-card strong{display:block;font-size:20px;color:var(--primary)}
.payments-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.payment-entry{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line)}
.payment-entry:last-child{border-bottom:none}
.payment-entry-main{display:flex;gap:12px;align-items:flex-start;min-width:0}
.payment-entry-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff6df;border:1px solid #f1deb3;font-size:20px;flex:0 0 40px}
.payment-entry-name{font-size:17px;font-weight:800;color:var(--primary);line-height:1.15;text-transform:uppercase}
.payment-entry-code{font-size:12px;color:var(--muted);font-weight:700;margin-top:2px}
.payment-entry-meta{font-size:14px;color:#444;margin-top:3px}
.payment-entry-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.payment-entry-tag{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;background:#f4f0ff;color:var(--primary);font-size:12px;font-weight:700}
.payment-entry-amount{font-size:26px;font-weight:900;color:#5f8d14;white-space:nowrap}
.payments-empty{padding:24px 16px;text-align:center;color:var(--muted)}
.client-selected-box{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:#faf8ff;color:var(--primary);margin:12px 0}
.client-selected-box.hidden{display:none}
.client-selected-name{font-weight:800;font-size:16px}
.client-suggestions{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.client-suggestion{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:#fff;cursor:pointer}
.client-suggestion:hover{background:#faf8ff;border-color:#cfc6ff}
.client-suggestion-name{font-weight:800;color:var(--primary)}
.client-suggestion-code{font-size:12px;color:var(--muted)}
.client-payments-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:14px 0}
.client-payments-summary .card{margin:0}
.client-payments-note{margin-top:10px;color:var(--muted)}
.client-payments-shell{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff}
.client-payments-dark-head{background:#303030;color:#fff;padding:16px 18px}
.client-payments-dark-head h3{margin:0;font-size:24px;letter-spacing:.2px}
.client-payments-client-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-top:10px}
.client-payments-client-grid small{display:block;color:#d2d2d2;margin-bottom:3px}
.client-payments-client-grid strong{font-size:16px;word-break:break-word}
.client-picker-tools{padding:14px;border-bottom:1px solid var(--line);background:#fafafa}
.client-picker-list{max-height:480px;overflow:auto}
.client-picker-row{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);cursor:pointer;background:#fff}
.client-picker-row:hover{background:#f8f6ff}
.client-picker-name{font-weight:800;color:var(--primary)}
.client-picker-meta{font-size:13px;color:#555}
.client-picker-empty{padding:26px;text-align:center;color:var(--muted)}
.client-period-box{padding:15px;border:1px solid var(--line);border-radius:16px;background:#fff;margin-top:14px}
.client-period-title{font-weight:800;color:var(--primary);margin-bottom:10px}
.client-period-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.client-period-option{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);border-radius:14px;padding:12px;background:#fff;font-weight:800;color:var(--primary);cursor:pointer}
.client-period-option input{margin:0}
.client-period-dates{display:grid;grid-template-columns:1fr 1fr auto;gap:12px;align-items:end;margin-top:12px}
.client-payments-footer{display:grid;grid-template-columns:1fr 1fr;margin-top:14px;border-radius:16px;overflow:hidden}
.client-payments-footer-total{background:#303030;color:#fff;padding:16px;text-align:center}
.client-payments-footer-total small{display:block;font-size:18px}
.client-payments-footer-total strong{display:block;font-size:32px;margin-top:4px}
.client-payments-footer-pdf{border:0;background:#ff4f5f;color:#fff;font-weight:800;font-size:20px;cursor:pointer;padding:16px}
.client-payments-back{margin-top:12px}
@media(max-width:760px){
  .client-payments-client-grid,.client-picker-row{grid-template-columns:1fr}
  .client-period-options{grid-template-columns:1fr}
  .client-period-dates{grid-template-columns:1fr}
  .client-payments-footer{grid-template-columns:1fr}
}
@media (max-width:760px){
  .payment-entry{grid-template-columns:1fr}
  .payment-entry-amount{font-size:22px}
  .payments-summary-strip{flex-direction:column;align-items:flex-start}
}
.collections-view-note{
  margin:10px 0 0;
  padding:10px 12px;
  border-radius:10px;
  background:#f5f8fc;
  color:#52606d;
  font-size:13px;
}
.collections-compact-table td,
.collections-compact-table th{
  vertical-align:middle;
}
.collections-compact-balance{
  font-weight:800;
  white-space:nowrap;
}
@media(max-width:760px){
  .collections-option-grid{grid-template-columns:1fr}
  .collections-option{min-height:105px}
}
</style>


<style>
.direct-payment-backdrop{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
  background:rgba(15,23,42,.72);
  backdrop-filter:blur(3px);
}
.direct-payment-backdrop.open{display:flex}
.direct-payment-modal{
  width:min(760px,100%);
  max-height:92vh;
  overflow:auto;
  background:#fff;
  border-radius:22px;
  box-shadow:0 28px 90px rgba(0,0,0,.32);
  border:1px solid #dbe4ec;
}
.direct-payment-modal-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
  padding:20px 22px 16px;
  border-bottom:1px solid #e4e9ee;
  background:linear-gradient(135deg,#edf6fd,#f8fbfd);
}
.direct-payment-modal-head h3{
  margin:0;
  color:#155f93;
  font-size:23px;
}
.direct-payment-modal-client{
  margin-top:6px;
  font-weight:900;
  font-size:20px;
  color:#33465a;
  text-transform:uppercase;
}
.direct-payment-close{
  border:0;
  background:#eef2f5;
  color:#44515d;
  width:38px;
  height:38px;
  border-radius:50%;
  cursor:pointer;
  font-size:20px;
  font-weight:800;
}
.direct-payment-body{padding:20px 22px 22px}
.direct-payment-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:16px;
}
.direct-payment-summary-box{
  border:1px solid #dfe6ed;
  border-radius:14px;
  padding:12px 13px;
  background:#fafcfe;
}
.direct-payment-summary-box small{
  display:block;
  color:#68717c;
  margin-bottom:5px;
}
.direct-payment-summary-box strong{
  font-size:18px;
  color:#17212b;
}
.direct-payment-summary-box.balance{
  background:#fff8dd;
  border-color:#ead899;
}
.direct-payment-form{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.direct-payment-form label{
  display:block;
  border:1px solid #e1e7ed;
  border-radius:13px;
  padding:12px;
  background:#fbfcfe;
}
.direct-payment-form label.full{grid-column:1/-1}
.direct-payment-form input,
.direct-payment-form select{
  margin-top:7px;
  background:#fff;
}
.direct-payment-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
  margin-top:18px;
}
.direct-payment-receipt-actions{
  display:none;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
  padding-top:14px;
  border-top:1px solid #e4e9ee;
}
.direct-payment-receipt-actions.open{display:flex}
.direct-payment-receipt{
  display:none;
  margin-top:14px;
  border:1px dashed #b9c7d3;
  border-radius:14px;
  padding:15px;
  background:#f8fbfd;
}
.direct-payment-receipt.open{display:block}
.direct-payment-receipt h4{
  margin:0 0 9px;
  color:#155f93;
}
.direct-payment-result.success-payment{
  background:#eaf8f0;
  color:#126b39;
  border:1px solid #b7e0c7;
}
@media(max-width:650px){
  .direct-payment-summary{grid-template-columns:1fr}
  .direct-payment-form{grid-template-columns:1fr}
  .direct-payment-form label.full{grid-column:auto}
  .direct-payment-modal{border-radius:16px}
  .direct-payment-modal-head,.direct-payment-body{padding:15px}
}
</style>


<style>
.payment-extra-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
  margin:0 0 12px;
}
.payment-extra-box{
  border:1px solid #e0e5ea;
  border-radius:13px;
  padding:10px;
  background:#fafcfe;
  text-align:center;
}
.payment-extra-box small{
  display:block;
  color:#6d7884;
  font-weight:700;
  margin-bottom:4px;
}
.payment-extra-box strong{
  display:block;
  color:#26364a;
  font-size:17px;
}
.payment-extra-box.remaining{
  background:#fff8dd;
  border-color:#ead899;
}
.payment-mode-row{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
  margin-top:10px;
}
.payment-mode-choice{
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-weight:700;
  color:#425466;
}
.payment-mode-choice input{
  width:18px;
  height:18px;
  margin:0;
}
@media(max-width:680px){
  .payment-extra-grid{grid-template-columns:1fr 1fr}
}
</style>


<style>
.staff-create-card{
  border:1px solid #e3e9ef;
  background:linear-gradient(180deg,#fff,#fbfcfe);
}
.staff-create-head{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  flex-wrap:wrap;margin-bottom:14px
}
.staff-block{
  border:1px solid #e1e7ed;border-radius:16px;padding:15px;
  background:#fbfcfe;margin-top:14px
}
.staff-block-title{
  display:flex;align-items:center;gap:8px;margin:0 0 10px;
  color:#26364a;font-size:17px;font-weight:900
}
.staff-route-create-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:9px
}
.staff-route-create-grid .inline-check{
  padding:10px 11px;border:1px solid #dfe5eb;border-radius:11px;
  background:#fff;margin:0;font-weight:700
}
.staff-permission-groups{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:12px
}
.staff-permission-group{
  border:1px solid #e0e6ec;border-radius:14px;padding:12px;background:#fff
}
.staff-permission-group h5{
  margin:0 0 9px;color:#33465a;font-size:14px
}
.staff-permission-list{
  display:flex;flex-direction:column;gap:7px
}
.staff-permission-list .inline-check{
  margin:0;padding:8px 9px;border-radius:9px;background:#f8fafc;
  border:1px solid #edf0f3
}
.staff-create-actions{
  display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:16px
}
.staff-create-actions .btn{min-width:150px}
.staff-table .staff-action-row{min-width:390px}
.staff-btn-permissions{background:#7a4dc2}
.staff-btn-edit{background:#1769aa}
.staff-btn-key{background:#596273}
.staff-edit-section.highlight{
  border-color:#8bb7dc;
  box-shadow:0 0 0 3px rgba(23,105,170,.10)
}
@media(max-width:700px){
  .staff-table .staff-action-row{min-width:260px}
  .staff-permission-groups{grid-template-columns:1fr}
}

/* Sutil V1.6.19 · Ubicación de personal */
.staff-subnav{margin-bottom:14px}
.staff-state-pill{display:inline-flex;align-items:center;padding:4px 9px;border-radius:999px;font-size:11px;font-weight:900;vertical-align:middle}
.staff-state-pill.active{background:#dcfce7;color:#177442}
.staff-location-layout{display:grid;grid-template-columns:minmax(300px,360px) minmax(0,1fr);gap:16px;margin-top:16px;align-items:stretch}
.staff-location-sidebar,.staff-location-mapbox{border:1px solid #dfe6ec;border-radius:16px;background:#fff;overflow:hidden;box-shadow:0 2px 8px rgba(20,40,60,.04)}
.staff-location-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;background:#fbfcfe;border-bottom:1px solid #e4e9ee}
.staff-location-filters label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:800;color:#4b5d70}
.staff-location-filters label:first-child{grid-column:1/-1}
.staff-location-filters input,.staff-location-filters select{width:100%;min-height:42px;border:1px solid #cfd9e3;border-radius:10px;padding:9px 11px;background:#fff;font:inherit;color:#26364a}

.staff-location-filter-field{display:block;min-width:0}
.staff-location-filter-label{display:block;font-size:12px;font-weight:800;color:#4b5d70;margin-bottom:6px}
.staff-location-custom-select{position:relative;min-width:0}
.staff-location-native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important}
.staff-location-select-trigger{width:100%;min-height:42px;margin:0;padding:9px 36px 9px 11px;border:1px solid #cfd9e3;border-radius:10px;background:#fff;color:#26364a;font:inherit;font-weight:700;text-align:left;cursor:pointer;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.staff-location-select-trigger::after{content:"⌄";position:absolute;right:12px;top:50%;transform:translateY(-54%);font-size:19px;color:#667085}
.staff-location-custom-select.open .staff-location-select-trigger{border-color:var(--sutil-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--sutil-primary) 16%,transparent)}
.staff-location-select-menu{display:none;position:absolute;z-index:140;left:0;right:0;top:calc(100% + 6px);max-height:245px;overflow:auto;border:1px solid #d6dee7;border-radius:14px;background:#fff;padding:6px;box-shadow:0 18px 40px rgba(15,23,42,.20)}
.staff-location-custom-select.open .staff-location-select-menu{display:block}
.staff-location-select-option{width:100%;border:0;border-radius:10px;background:transparent;color:#263442;text-align:left;padding:11px 34px 11px 12px;font-weight:700;cursor:pointer;position:relative;overflow-wrap:anywhere}
.staff-location-select-option:hover,.staff-location-select-option:focus{background:#eef4ff;outline:none}
.staff-location-select-option.selected{background:color-mix(in srgb,var(--sutil-primary) 12%,#fff);color:var(--sutil-primary)}
.staff-location-select-option.selected::after{content:"✓";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-weight:900}
.staff-location-list{height:500px;max-height:500px;overflow:auto;background:#fff}
.staff-location-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #edf1f4;cursor:pointer;transition:.14s ease}
.staff-location-row:hover,.staff-location-row.active{background:#f0f7ff}
.staff-location-row.active{box-shadow:inset 4px 0 0 var(--sutil-primary,#1769aa)}
.staff-location-avatar{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e8eef4;color:#34495e;font-weight:900;flex:0 0 auto;font-size:16px}
.staff-location-person{min-width:0;flex:1}
.staff-location-person strong,.staff-location-person small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.staff-location-person strong{font-size:14px;color:#26364a}
.staff-location-person small{color:#6c7883;margin-top:3px;font-size:11px}
.staff-location-state{font-size:10px;font-weight:900;padding:5px 8px;border-radius:999px;background:#f0f2f4;color:#66717c;white-space:nowrap}
.staff-location-state.live{background:#dcfce7;color:#177442}
.staff-location-mapbox{min-height:570px;display:flex;flex-direction:column}
.staff-location-maphead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #e4e9ee;flex-wrap:wrap;background:#fff}
.staff-location-maphead strong{font-size:15px;color:#26364a}
.staff-location-maparea{min-height:460px;flex:1;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f7fafc,#edf2f6);text-align:center;color:#63717d;overflow:hidden}
.staff-location-maparea iframe{width:100%;height:100%;min-height:460px;border:0;display:block}
.staff-location-maparea>div{padding:28px}
.staff-location-empty-icon{font-size:44px;margin-bottom:10px}
.staff-location-footer{padding:10px 16px;border-top:1px solid #e4e9ee;font-size:12px;line-height:1.45;color:#6a7681;background:#fbfcfd}
@media(max-width:900px){
  .staff-location-layout{grid-template-columns:1fr}
  .staff-location-list{height:300px;max-height:300px}
  .staff-location-mapbox{min-height:480px}
  .staff-location-maparea,.staff-location-maparea iframe{min-height:360px}
}
@media(max-width:560px){
  /* FIX 12.15.169 · Ubicación de personal: ruta visible completa en móvil */
  .staff-location-filters{grid-template-columns:1fr;gap:10px}
  .staff-location-filters label:first-child{grid-column:1/-1}
  #staffLocationsPanel .staff-location-filter-field{grid-column:1/-1;width:100%;min-width:0}
  #staffLocationsPanel #staffLocationRouteTrigger{
    width:100%;
    min-height:52px;
    padding:10px 42px 10px 12px;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    overflow-wrap:anywhere;
    word-break:break-word;
    line-height:1.22;
    font-size:15px;
  }
  #staffLocationsPanel #staffLocationStateTrigger{width:100%;min-height:50px}
  #staffLocationsPanel .staff-location-select-menu{left:0;right:0;width:100%}
}
</style>


<style>
.cash-toolbar-card{border:1px solid #dfe6ed;background:linear-gradient(180deg,#fff,#fbfcfe)}
.cash-toolbar-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px}
.cash-toolbar-head h2{margin:0}
.cash-selection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;align-items:end}
.cash-base-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;grid-column:1 / -1}
.cash-base-pair label{margin:0}
.cash-notes-field{grid-column:1 / -1}
@media(max-width:520px){.cash-base-pair{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cash-action-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;align-items:center}
.cash-action-row .btn{min-width:130px}
.cash-action-row .btn:disabled{background:#b8c0c7!important;color:#fff!important;cursor:not-allowed!important;opacity:.62!important;box-shadow:none!important}
.cash-go-pending-btn{background:#b56a14!important}
.cash-go-pending-btn:hover{background:#9d5b0f!important}
.cash-query-hint{margin-top:10px;padding:9px 12px;border-radius:10px;background:#f6f8fb;color:#5b6774;font-size:13px}
body[data-sutil-theme="dark"] .cash-query-hint{background:linear-gradient(180deg,#2f3b51,#283349)!important;color:#eef4ff!important;border:1px solid #536985!important;-webkit-text-fill-color:#eef4ff!important;opacity:1!important}
.cash-status-card{border:1px solid #dfe6ed}
.cash-main-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}
.cash-main-metric{border:1px solid #e0e6ec;border-radius:16px;padding:16px;background:#fafcfe}
.cash-main-metric small{display:block;color:#68717c;font-weight:700;margin-bottom:6px}
.cash-main-metric strong{display:block;font-size:24px;color:#26364a}
.cash-main-metric.total{background:#eef6ff;border-color:#bfd6ea}
.cash-main-metric.total strong{color:#155f93}
.cash-breakdown-title{font-size:15px;font-weight:900;color:#33465a;margin:16px 0 8px}
.cash-close-box{border:1px solid #d8e6dc;border-radius:16px;padding:15px;background:#f5fbf6}
.cash-consult-loading{opacity:.7;pointer-events:none}
@media(max-width:700px){.cash-main-metrics{grid-template-columns:1fr}}
</style>


<style>
.simple-cash-sheet{
  max-width:760px;
  margin:10px auto 0;
  border:1px solid #dfe5eb;
  border-radius:16px;
  background:#fff;
  overflow:hidden;
}
.simple-cash-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid #edf0f3;
}
.simple-cash-row:last-child{border-bottom:0}
.simple-cash-row span{
  font-weight:800;
  color:#33465a;
}
.simple-cash-row strong{
  font-size:20px;
  color:#24364a;
}
.simple-cash-row.total{
  background:#f4f8fb;
  border-top:2px solid #d8e1e8;
}
.simple-cash-row.total span,
.simple-cash-row.total strong{
  font-size:22px;
  font-weight:950;
}
.simple-cash-row.out strong{color:#a23838}
.simple-cash-row.in strong{color:#18834b}
.simple-cash-note{
  padding:10px 16px;
  background:#fafbfc;
  border-top:1px solid #edf0f3;
  font-size:12px;
  color:#6c7785;
}
.simple-cash-balance-breakdown{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:12px auto 0;
  max-width:760px;
}
.simple-cash-balance-breakdown>div{
  padding:11px 13px;
  border:1px solid #e2e7ec;
  border-radius:12px;
  background:#fbfcfe;
}
.simple-cash-balance-breakdown small{display:block;color:#6a7785;margin-bottom:3px}
.simple-cash-balance-breakdown strong{font-size:17px}
@media(max-width:650px){
  .simple-cash-balance-breakdown{grid-template-columns:1fr}
}
</style>


<style>
.simple-day-lists{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
  margin:0;
  align-self:stretch;
}
.simple-day-card{
  border:1px solid #dfe5eb;
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  min-height:245px;
  display:flex;
  flex-direction:column;
}
.simple-day-card h4{
  margin:0;
  padding:13px 14px;
  border-bottom:1px solid #e8edf1;
  font-size:15px;
  color:#33465a;
}
.simple-day-list{
  padding:6px 12px;
  overflow:auto;
  max-height:270px;
  flex:1;
}
.simple-day-item{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px 2px;
  border-bottom:1px solid #edf0f3;
}
.simple-day-item:last-child{border-bottom:0}
.simple-day-item span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-weight:700;
  color:#3b4a5a;
}
.simple-day-item strong{white-space:nowrap}
.simple-day-empty{
  padding:22px 10px;
  color:#7a8793;
  text-align:center;
  font-size:13px;
}
.simple-day-total{
  display:flex;
  justify-content:space-between;
  gap:10px;
  padding:11px 14px;
  border-top:1px solid #e8edf1;
  background:#f8fafc;
  font-weight:900;
}
.simple-cash-workspace{
  display:grid;
  grid-template-columns:minmax(330px,0.95fr) minmax(420px,1.35fr);
  gap:18px;
  align-items:start;
}
.simple-cash-workspace .simple-cash-sheet{
  margin:0;
  max-width:none;
}
.simple-cash-mini-balance{
  display:flex;
  gap:18px;
  flex-wrap:wrap;
  padding:9px 14px;
  border-top:1px solid #edf0f3;
  color:#63717e;
  font-size:12px;
}
.simple-cash-mini-balance strong{color:#33465a}
@media(max-width:900px){
  .simple-cash-workspace{grid-template-columns:1fr}
}
@media(max-width:650px){
  .simple-day-lists{grid-template-columns:1fr}
}
</style>


<style>
.offline-status-badge{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid #dfe5eb;
  background:#fff;
  font-size:12px;
  font-weight:800;
  white-space:nowrap;
}
.offline-status-badge.online{
  color:#176a3b;
  background:#edf9f2;
  border-color:#bfe5cd;
}
.offline-status-badge.offline{
  color:#9b5a00;
  background:#fff5e6;
  border-color:#f1d39f;
}
.offline-status-badge.syncing{
  color:#315b9c;
  background:#edf4ff;
  border-color:#c8daf5;
}
.offline-status-badge.ready{
  color:#5b4a15;
  background:#fffbe8;
  border-color:#eadf9d;
}
</style>


<style id="sutilCompanyThemeFinal">
  :root{
    --sutil-primary-text:#ffffff;
    --sutil-secondary-text:#ffffff;
    --sutil-primary-soft:#eaf4fb;
    --sutil-secondary-soft:#eaf8f0;
  }

  body{
    background:var(--sutil-background) !important;
  }

  /* COLOR PRINCIPAL: navegación, acciones principales y acentos */
  .btn:not(.success):not(.danger):not(.secondary),
  button.btn:not(.success):not(.danger):not(.secondary),
  .staff-btn-edit,
  .staff-btn-permissions,
  .client-file-btn.active,
  .detail-tab.active-tab,
  .client-account-nav .btn.active-tab{
    background:var(--sutil-primary) !important;
    color:var(--sutil-primary-text) !important;
  }

  .module-title,
  .payments-summary-strip,
  .method-mini-card strong,
  .payment-entry-name,
  .payment-entry-tag,
  .client-selected-box,
  .client-suggestion-name,
  .client-picker-name,
  .client-period-title,
  .client-period-option,
  .radio-pill,
  .client-file-btn:not(.active){
    color:var(--sutil-primary) !important;
  }

  .module{
    border-color:var(--sutil-primary) !important;
  }
  .module:hover{
    box-shadow:0 5px 16px color-mix(in srgb, var(--sutil-primary) 22%, transparent) !important;
  }

  .active-report-nav{
    border-color:var(--sutil-primary) !important;
    background:var(--sutil-primary-soft) !important;
  }

  .historical-package-progress-bar{
    background:var(--sutil-primary) !important;
  }

  input:focus,
  select:focus,
  textarea:focus{
    outline:none;
    border-color:var(--sutil-primary) !important;
    box-shadow:0 0 0 2px color-mix(in srgb, var(--sutil-primary) 18%, transparent);
  }

  input[type="checkbox"],
  input[type="radio"]{
    accent-color:var(--sutil-primary);
  }

  /* COLOR SECUNDARIO: acciones secundarias/confirmación */
  .btn.secondary,
  button.btn.secondary,
  .btn.success,
  button.btn.success,
  .success,
  .staff-btn-enable{
    background:var(--sutil-secondary) !important;
    color:var(--sutil-secondary-text) !important;
  }

  .status-current,
  .confirmed{
    color:var(--sutil-secondary) !important;
  }

  .pill-current,
  .cash-status-banner.open,
  .cash-difference-ok,
  .offline-status-badge.online{
    border-color:var(--sutil-secondary) !important;
  }

  .historical-package-progress.done .historical-package-progress-bar{
    background:var(--sutil-secondary) !important;
  }

  /* Vista previa inmediata dentro de Configuración */
  .company-theme-preview{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:12px;
  }
  .company-theme-preview-box{
    min-height:58px;
    border-radius:12px;
    padding:10px 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-weight:800;
    border:1px solid #d9e0e7;
  }
  #companyThemePreviewPrimary{
    background:var(--sutil-primary);
    color:var(--sutil-primary-text);
  }
  #companyThemePreviewSecondary{
    background:var(--sutil-secondary);
    color:var(--sutil-secondary-text);
  }
  #companyThemePreviewBackground{
    background:var(--sutil-background);
    color:#20242a;
  }
  @media(max-width:650px){
    .company-theme-preview{grid-template-columns:1fr;}
  }
</style>


<style id="sutilAnnualReportStyles">
  .annual-report-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:14px;
    flex-wrap:wrap;
  }
  .annual-report-actions{
    display:flex;
    gap:10px;
    align-items:flex-end;
    flex-wrap:wrap;
  }
  .annual-report-actions label{
    min-width:130px;
    margin:0;
  }
  .annual-chart-toolbar{
    display:flex;
    flex-direction:column;
    gap:12px;
  }
  .annual-chart-mode,
  .annual-metric-buttons{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
  }
  .annual-metric-buttons .btn,
  .annual-chart-mode .btn{
    min-height:40px;
  }
  .annual-metric-active,
  .annual-mode-active{
    box-shadow:0 0 0 3px color-mix(in srgb,var(--sutil-primary) 24%,transparent) !important;
    border-color:var(--sutil-primary) !important;
  }
  .annual-month-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
  .annual-month-card{
    min-width:0;
    overflow:hidden;
  }
  .annual-month-title{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:12px;
    padding-bottom:10px;
    border-bottom:1px solid #dce3e8;
  }
  .annual-month-title strong{
    font-size:22px;
  }
  .annual-month-values{
    display:grid;
    grid-template-columns:1fr;
    gap:7px;
  }
  .annual-month-row{
    display:grid;
    grid-template-columns:minmax(120px,1fr) minmax(130px,auto);
    gap:10px;
    align-items:center;
    min-width:0;
  }
  .annual-month-row .annual-label{
    color:#4f5965;
    min-width:0;
  }
  .annual-month-row .annual-value{
    min-width:0;
    text-align:right;
    font-weight:800;
    font-size:clamp(16px,1.5vw,20px);
    overflow-wrap:anywhere;
  }
  .annual-growth{
    display:inline-flex;
    align-items:center;
    gap:3px;
    margin-left:6px;
    font-size:12px;
    font-weight:900;
    white-space:nowrap;
    line-height:1;
  }
  .annual-growth.up{color:#39d98a;}
  .annual-growth.down{color:#ff6b6b;}
  .annual-growth.neutral{color:#9aa7b8;}
  .annual-growth.expense-up{color:#39d98a;}
  .annual-growth.expense-down{color:#ff6b6b;}
  body[data-sutil-theme="light"] .annual-growth.up{color:#148a4b;}
  body[data-sutil-theme="light"] .annual-growth.down{color:#c0392b;}
  body[data-sutil-theme="light"] .annual-growth.neutral{color:#6c7a89;}
  body[data-sutil-theme="light"] .annual-growth.expense-up{color:#148a4b;}
  body[data-sutil-theme="light"] .annual-growth.expense-down{color:#c0392b;}

  @media(max-width:800px){
    .annual-month-grid{grid-template-columns:1fr;}
    .annual-report-actions{width:100%;}
    .annual-report-actions label{flex:1;}
  }
  @media(max-width:520px){
    .annual-month-row{grid-template-columns:1fr;gap:2px;}
    .annual-month-row .annual-value{text-align:left;}
  }

  @media print{
    body.printing-annual-report *{
      visibility:hidden !important;
    }
    body.printing-annual-report #annualPrintableReport,
    body.printing-annual-report #annualPrintableReport *{
      visibility:visible !important;
    }
    body.printing-annual-report #annualPrintableReport{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      background:#fff !important;
      color:#111 !important;
    }
    body.printing-annual-report .annual-no-print{
      display:none !important;
    }
    body.printing-annual-report .annual-month-grid{
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:8px;
    }
    body.printing-annual-report .annual-month-card,
    body.printing-annual-report .report-metric-card{
      break-inside:avoid;
      box-shadow:none !important;
      border:1px solid #d4d8dc !important;
    }
  }
</style>


<style>
/* v1.3.24 — ficha de cliente: mejora visual sin cambiar lógica */
#clientDetailCard{padding-bottom:18px}
.client-detail-shell{max-width:1220px;margin:0 auto}
.client-detail-top{
  background:linear-gradient(180deg,#ffffff 0%,#fbfdff 100%);
  border:1px solid #e2e9f0;border-radius:18px;padding:16px 18px 18px;margin:12px 0 16px;
  box-shadow:0 7px 22px rgba(30,64,105,.08)
}
.client-detail-toolbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.client-back-link{border:0;background:transparent;color:#0a8b5c;font-weight:900;font-size:14px;cursor:pointer;padding:6px 0}
.client-back-link:hover{text-decoration:underline}
.client-detail-label{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#8a98a8}
.client-detail-mainrow{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.client-detail-identity{display:flex;align-items:center;gap:16px;min-width:0}
.client-detail-photo img{width:92px!important;height:92px!important;object-fit:cover;border-radius:50%!important;border:4px solid #f3f7fb;box-shadow:0 4px 14px rgba(27,69,113,.16)}
.client-detail-identity-text h2{margin:0 0 6px;font-size:26px;line-height:1.12;color:#142f4d;letter-spacing:.01em}
.client-detail-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:7px}
.client-detail-meta span{background:none}
.client-meta-chip,.client-status-chip{display:inline-flex!important;align-items:center;gap:4px;padding:6px 9px!important;border-radius:999px!important;font-size:11px!important;font-weight:900!important}
.client-meta-chip{background:#f0f4f8!important;color:#324c68!important;border:1px solid #e2e8ef}
.client-status-chip.is-overdue{background:#fff0f1!important;color:#cf2732!important;border:1px solid #ffd8dc}
.client-status-chip.is-current{background:#eaf9f1!important;color:#078350!important;border:1px solid #caefdc}
.client-detail-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:0}
.client-detail-actions .btn{min-height:42px;border-radius:10px;font-weight:900;padding:10px 16px}
.client-consult-card{border:1px solid #e2e9f0;border-radius:18px!important;padding:17px!important;box-shadow:0 7px 22px rgba(30,64,105,.06)}
.client-consult-title{font-size:13px;color:#53697e;font-weight:700;margin-bottom:12px}
.client-file-nav{display:grid;grid-template-columns:repeat(7,minmax(120px,1fr));gap:10px;margin:0}
.client-file-btn{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-height:102px!important;padding:11px 8px!important;border:1px solid #e1e8ef!important;border-radius:13px!important;
  background:#fff!important;color:#304a66!important;font-size:13px!important;font-weight:850!important;box-shadow:0 3px 10px rgba(29,59,91,.05);transition:.15s ease
}
.client-file-btn:hover{transform:translateY(-2px);box-shadow:0 7px 17px rgba(29,59,91,.10);border-color:#bfd1e6!important}
.client-file-btn.active{background:#f7fbff!important;color:#155dc5!important;border:2px solid #2a70e8!important;box-shadow:0 7px 20px rgba(42,112,232,.13)}
.client-nav-icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:11px;font-size:20px;line-height:1;background:#edf4ff}
.client-nav-icon.icon-blue{background:#eaf2ff}.client-nav-icon.icon-green{background:#e7f9ef}.client-nav-icon.icon-purple{background:#f2ebff}.client-nav-icon.icon-gold{background:#fff5d9}.client-nav-icon.icon-slate{background:#eef2f6}
.client-profile-overview{display:block;margin-top:16px}
.client-overview-main{display:grid;grid-template-columns:180px 1.25fr 1fr 1.15fr;gap:14px}
.client-overview-secondary{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:14px;margin-top:14px}
.client-overview-card{background:#fff;border:1px solid #e2e9f0;border-radius:16px;padding:16px;box-shadow:0 5px 16px rgba(30,64,105,.06);min-width:0}
.client-overview-heading{display:flex;align-items:center;gap:8px;color:#223d5b;font-size:15px;font-weight:900;margin-bottom:14px}
.overview-title-icon{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;font-size:14px;background:#edf4ff}
.overview-title-icon.blue{background:#e8f0ff}.overview-title-icon.green{background:#e6f9ef}.overview-title-icon.purple{background:#f0e8ff}.overview-title-icon.gold{background:#fff2ce}.overview-title-icon.cyan{background:#e6f8fb}.overview-title-icon.red{background:#ffe9eb}
.client-photo-card{display:flex;flex-direction:column}.client-overview-photo{display:flex;align-items:center;justify-content:center;flex:1;min-height:176px}
.client-overview-photo img{width:142px!important;height:168px!important;max-width:100%;object-fit:cover;border-radius:14px!important;border:7px solid #f3f6fa;box-shadow:0 2px 8px rgba(22,55,89,.10)}
.client-data-row{padding:8px 0;border-bottom:1px dashed #e6ebf0;min-width:0}.client-data-row:last-child{border-bottom:0}
.client-data-row span{display:block;color:#718196;font-size:12px;margin-bottom:3px}.client-data-row strong{display:block;color:#152f4e;font-size:14px;line-height:1.3;overflow-wrap:anywhere}
.client-address-row strong{font-size:13px}.overview-overdue{color:#cf2732!important}.overview-current{color:#078350!important}
.client-overview-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.client-overview-pair .client-data-row{min-width:0}
.client-quick-summary-grid{display:grid;grid-template-columns:1fr 1fr;column-gap:16px}
.client-quick-summary-grid .client-stat-row{min-width:0}

.client-stat-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed #e6ebf0;color:#334b66;font-size:13px}.client-stat-row:last-child{border-bottom:0}
.client-stat-row b{display:inline-flex;min-width:30px;justify-content:center;padding:4px 8px;border-radius:999px;background:#edf3ff;color:#205fc5}.client-stat-row b.stat-danger{background:#fff0f1;color:#d12832}.client-stat-row b.stat-ok{background:#eaf9f1;color:#078350}
.client-mini-alert-list{display:flex;flex-direction:column;gap:8px}.client-mini-alert{display:flex;flex-direction:column;gap:2px;border-radius:11px;padding:10px 11px;border:1px solid transparent}.client-mini-alert strong{font-size:13px}.client-mini-alert span{font-size:12px;color:#617287}.client-mini-alert.danger{background:#fff3f4;border-color:#ffe1e4;color:#c5232e}.client-mini-alert.warning{background:#fff8e8;border-color:#ffe8ac;color:#9a6700}.client-mini-alert.ok{background:#eefaf4;border-color:#d4f1e2;color:#087a4c}
@media(max-width:1100px){.client-file-nav{grid-template-columns:repeat(4,minmax(120px,1fr))}.client-overview-main{grid-template-columns:180px 1fr 1fr}.client-overview-main .client-overview-card:last-child{grid-column:2/4}.client-overview-secondary{grid-template-columns:1fr 1fr}.client-overview-secondary .client-overview-card:last-child{grid-column:1/3}}
@media(max-width:760px){.client-detail-mainrow{align-items:flex-start}.client-detail-actions{width:100%}.client-detail-actions .btn{flex:1}.client-file-nav{grid-template-columns:repeat(2,minmax(0,1fr))}.client-overview-main,.client-overview-secondary{grid-template-columns:1fr}.client-overview-main .client-overview-card:last-child,.client-overview-secondary .client-overview-card:last-child{grid-column:auto}.client-photo-card{display:none}.client-detail-photo img{width:72px!important;height:72px!important}.client-detail-identity-text h2{font-size:20px}.client-detail-label{display:none}}
</style>

<style>
/* SUTIL v1.3.62 · Centro de soporte y membresía */
.sutil-support-grid{display:grid;grid-template-columns:1fr;gap:14px}
.sutil-support-launcher{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:14px;margin-top:14px}.sutil-support-launch-btn{border:1px solid #dfe5ea;border-radius:16px;background:#fff;padding:24px 18px;text-align:left;cursor:pointer;min-height:130px}.sutil-support-launch-btn strong{display:block;font-size:20px;margin-bottom:7px}.sutil-support-launch-btn small{display:block;color:#68737d;font-size:12px;line-height:1.45}.sutil-support-view[hidden]{display:none!important}.sutil-support-back{margin-bottom:12px}
.sutil-support-card{background:#fff;border:1px solid #dfe5ea;border-radius:14px;padding:15px}
.sutil-support-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.sutil-support-summary{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:9px;margin-top:12px}
.sutil-support-mini{border:1px solid #e4e9ed;border-radius:11px;padding:10px;background:#f9fbfc}.sutil-support-mini small{display:block;color:#68737d;font-size:10px}.sutil-support-mini strong{display:block;margin-top:4px;font-size:14px}
.sutil-support-faq details{border:1px solid #e5eaee;border-radius:11px;padding:10px 12px;margin:8px 0;background:#fff}.sutil-support-faq summary{font-weight:800;cursor:pointer}.sutil-support-faq p{color:#64707a;font-size:12px;line-height:1.5;margin:8px 0 0}
.sutil-faq-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:10px 0 12px}.sutil-faq-tools input{flex:1;min-width:220px}.sutil-faq-category{margin:14px 0 6px;font-size:12px;font-weight:900;color:#34424f;text-transform:uppercase;letter-spacing:.04em}.sutil-faq-count{font-size:11px;color:#6b7780}.sutil-faq-empty{padding:14px;border:1px dashed #cfd7dd;border-radius:10px;color:#6b7780;text-align:center}
.sutil-support-request-form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.sutil-support-request-form label{font-size:12px;font-weight:800}.sutil-support-request-form input,.sutil-support-request-form select,.sutil-support-request-form textarea{width:100%;margin-top:5px}
.sutil-method-card{border:1px solid #e0e6ea;border-radius:12px;padding:12px;margin:8px 0;background:#fbfcfd}.sutil-method-card strong{display:block}.sutil-method-data{font-size:12px;color:#5f6b75;line-height:1.55;margin-top:6px}.sutil-copy-btn{padding:6px 8px;font-size:11px}
.sutil-support-requests-list{display:grid;gap:9px}.sutil-request-item{border:1px solid #e0e6ea;border-radius:12px;padding:12px;background:#fff}.sutil-request-top{display:flex;justify-content:space-between;gap:10px}.sutil-request-status{font-size:10px;font-weight:900;padding:4px 7px;border-radius:999px;background:#eef2f6}.sutil-request-status.approved{background:#eaf8f0;color:#087f23}.sutil-request-status.submitted{background:#fff4d9;color:#8a5c00}.sutil-request-status.rejected{background:#fff0f0;color:#b42318}
.sutil-support-chat{display:flex;flex-direction:column;min-height:520px}.sutil-support-messages{flex:1;min-height:340px;max-height:520px;overflow:auto;background:#f7f9fa;border:1px solid #e0e6ea;border-radius:12px;padding:12px}.sutil-support-msg{max-width:82%;padding:9px 11px;border-radius:12px;margin:7px 0;background:#fff;border:1px solid #dde4e8;font-size:13px}.sutil-support-msg.mine{margin-left:auto;background:#edf8ef;border-color:#c8e7ce}.sutil-support-msg small{display:block;color:#7a858e;font-size:9px;margin-top:5px}.sutil-support-compose{display:grid;grid-template-columns:150px 1fr auto;gap:8px;margin-top:9px}.sutil-support-compose textarea{min-height:44px;max-height:100px}
.sutil-ai-card{border:1px solid #cfe0d4;background:linear-gradient(180deg,#fbfffc,#f4faf6)}
.sutil-ai-head{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}.sutil-ai-status{font-size:10px;font-weight:900;padding:5px 8px;border-radius:999px;background:#e9f8ee;color:#087f23}.sutil-ai-status.off{background:#fff4d9;color:#8a5c00}
.sutil-ai-messages{min-height:320px;max-height:520px;overflow:auto;border:1px solid #dbe6de;border-radius:13px;background:#fff;padding:12px;margin-top:12px}.sutil-ai-msg{max-width:88%;margin:8px 0;padding:10px 12px;border-radius:14px;border:1px solid #e1e7e3;background:#f7f9f8;font-size:13px;line-height:1.5;white-space:pre-wrap}.sutil-ai-msg.user{margin-left:auto;background:#eef8f0;border-color:#cde5d1}.sutil-ai-msg.assistant strong{color:#087f23}.sutil-ai-msg small{display:block;color:#758078;font-size:9px;margin-top:5px}
.sutil-ai-quick{display:flex;gap:7px;flex-wrap:wrap;margin:10px 0}.sutil-ai-quick button{font-size:11px;padding:7px 10px;border-radius:999px;background:#fff}.sutil-ai-compose{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:10px}.sutil-ai-compose textarea{width:100%;min-height:58px;max-height:130px;resize:vertical}.sutil-ai-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}.sutil-ai-actions:empty{display:none}
.sutil-faq-collapse{margin-top:2px}.sutil-faq-collapse>summary{cursor:pointer;font-weight:900;padding:10px 0}
@media(max-width:900px){.sutil-support-launcher{grid-template-columns:1fr}.sutil-support-grid{grid-template-columns:1fr}.sutil-support-summary{grid-template-columns:1fr 1fr}.sutil-support-compose{grid-template-columns:1fr}.sutil-support-request-form{grid-template-columns:1fr}}
</style>


<style>
/* SUTIL v1.3.63 · Menú profesional del empresario */
.sutil-owner-menu-btn{
  display:none;align-items:center;justify-content:center;flex:0 0 auto;
  width:44px;height:44px;padding:0;border:1px solid #d9e1e7;border-radius:12px;
  background:#fff;color:#1f3d5c;font-size:26px;font-weight:900;line-height:1;
  box-shadow:0 2px 8px rgba(25,55,85,.07);cursor:pointer
}
.sutil-owner-menu-btn:hover{background:#f4f8fb;border-color:#bfd0dd}
.sutil-owner-menu-backdrop{
  position:fixed;inset:0;z-index:250;background:rgba(18,30,42,.34);
  opacity:0;pointer-events:none;transition:opacity .18s ease
}
.sutil-owner-menu-backdrop.open{opacity:1;pointer-events:auto}
.sutil-owner-menu-drawer{
  position:absolute;left:0;top:0;bottom:0;width:min(330px,88vw);background:#fff;
  box-shadow:14px 0 34px rgba(18,38,58,.22);transform:translateX(-102%);
  transition:transform .2s ease;display:flex;flex-direction:column
}
.sutil-owner-menu-backdrop.open .sutil-owner-menu-drawer{transform:translateX(0)}
.sutil-owner-menu-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:20px 18px 14px;border-bottom:1px solid #e6ebef}
.sutil-owner-menu-head strong{font-size:19px;color:#173a59}
.sutil-owner-menu-close{width:38px;height:38px;border-radius:10px;padding:0;font-size:22px;background:#f6f8fa}
.sutil-owner-menu-company{padding:12px 18px;background:#f8fafb;border-bottom:1px solid #edf0f2;color:#66737e;font-size:12px;line-height:1.45}
.sutil-owner-menu-items{padding:12px;display:grid;gap:8px}
.sutil-owner-menu-item{
  width:100%;display:flex;align-items:center;gap:12px;text-align:left;padding:13px 14px;
  border:1px solid transparent;border-radius:12px;background:#fff;color:#233f59;font-weight:800;cursor:pointer
}
.sutil-owner-menu-item:hover{background:#f1f7f4;border-color:#d8e9df}
.sutil-owner-menu-icon{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#eef4f7;font-size:20px}
.sutil-owner-menu-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.sutil-owner-menu-text small{font-size:11px;color:#75818b;font-weight:500}
.sutil-owner-menu-spacer{flex:1}
.sutil-owner-menu-foot{padding:14px 18px;border-top:1px solid #e6ebef;color:#8a949c;font-size:11px}
body.sutil-owner-menu-open{overflow:hidden}
@media(max-width:700px){
  .header{align-items:flex-start}
  .sutil-owner-header-main{align-items:flex-start!important}
  .sutil-owner-menu-btn{width:42px;height:42px;font-size:25px}
}
</style>


<style>
/* Membresía v4 · confirmación moderna + comprobante */
.sutil-renewal-modal-backdrop{
  position:fixed;inset:0;z-index:100500;display:none;
  align-items:center;justify-content:center;padding:18px;
  background:rgba(15,23,42,.68);backdrop-filter:blur(2px)
}
.sutil-renewal-modal-backdrop.open{display:flex}
.sutil-renewal-modal{
  width:min(720px,100%);max-height:92vh;overflow:auto;background:#fff;
  border-radius:20px;box-shadow:0 28px 90px rgba(0,0,0,.32);padding:0
}
.sutil-renewal-modal-head{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  padding:20px 22px;border-bottom:1px solid #e5e9ee
}
.sutil-renewal-modal-head h3{margin:0;font-size:22px;color:#183b34}
.sutil-renewal-modal-head p{margin:5px 0 0;color:#68717c;font-size:13px}
.sutil-renewal-modal-close{
  border:0;background:#f2f4f7;width:36px;height:36px;border-radius:50%;
  cursor:pointer;font-size:20px;color:#475467
}
.sutil-renewal-modal-body{padding:20px 22px}
.sutil-renewal-summary-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px
}
.sutil-renewal-summary-box{
  border:1px solid #dfe5eb;border-radius:13px;padding:12px;background:#fafcfe
}
.sutil-renewal-summary-box small{display:block;color:#667085;font-weight:700;margin-bottom:5px}
.sutil-renewal-summary-box strong{display:block;font-size:18px;color:#17365d;overflow-wrap:anywhere}
.sutil-renewal-total{
  margin-top:12px;padding:15px;border-radius:14px;background:#edf9f0;
  border:1px solid #b9dfc4;display:flex;justify-content:space-between;
  align-items:center;gap:10px;flex-wrap:wrap
}
.sutil-renewal-total strong{font-size:25px;color:#126b39}
.sutil-renewal-payment{
  margin-top:15px;border:1px solid #dfe5eb;border-radius:14px;padding:14px;background:#fff
}
.sutil-renewal-payment-head{
  display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap
}
.sutil-renewal-pix-key{
  margin-top:10px;padding:11px 12px;border-radius:10px;background:#f7fafc;
  border:1px solid #e1e7ed;font-weight:800;overflow-wrap:anywhere
}
.sutil-renewal-proof{
  margin-top:15px;border:2px dashed #cbd5dc;border-radius:14px;padding:15px;background:#fafcfd
}
.sutil-renewal-proof label{display:block;margin-bottom:7px}
.sutil-renewal-proof input[type=file]{width:100%;margin:0;background:#fff}
.sutil-renewal-proof-note{font-size:12px;color:#68717c;margin-top:7px;line-height:1.35}
.sutil-renewal-modal-msg{min-height:20px;margin-top:10px;font-size:13px;font-weight:700}
.sutil-renewal-modal-actions{
  display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;
  padding:16px 22px;border-top:1px solid #e5e9ee;background:#fafbfc
}
.sutil-renewal-modal-actions .btn{min-width:150px}
@media(max-width:600px){
  .sutil-renewal-summary-grid{grid-template-columns:1fr}
  .sutil-renewal-modal-head,.sutil-renewal-modal-body,.sutil-renewal-modal-actions{padding-left:15px;padding-right:15px}
  .sutil-renewal-modal-actions .btn{width:100%}
}
</style>


<style>
/* SUTIL · Centro general de notificaciones empresa v1 */
.sutil-notify-fab{
  position:fixed;right:18px;bottom:18px;z-index:100200;
  width:54px;height:54px;border:0;border-radius:50%;
  background:#17365d;color:#fff;box-shadow:0 10px 30px rgba(15,23,42,.28);
  cursor:pointer;font-size:23px;display:none;align-items:center;justify-content:center
}
.sutil-notify-fab.show{display:flex}
.sutil-notify-badge{
  position:absolute;right:-2px;top:-4px;min-width:21px;height:21px;padding:0 6px;
  display:none;align-items:center;justify-content:center;border-radius:999px;
  background:#b42318;color:#fff;font-size:10px;font-weight:900;border:2px solid #fff
}
.sutil-notify-badge.show{display:flex}
.sutil-notify-panel{
  position:fixed;right:18px;bottom:84px;z-index:100210;
  width:min(390px,calc(100vw - 36px));max-height:72vh;overflow:auto;
  background:#fff;border:1px solid #dce3e9;border-radius:17px;
  box-shadow:0 20px 55px rgba(15,23,42,.26);display:none
}
.sutil-notify-panel.open{display:block}
.sutil-notify-head{
  display:flex;justify-content:space-between;gap:10px;align-items:flex-start;
  padding:14px 15px;border-bottom:1px solid #e7ebef;background:#f8fafc
}
.sutil-notify-head h4{margin:0;color:#17365d}
.sutil-notify-head small{display:block;color:#68717c;margin-top:3px}
.sutil-notify-settings{padding:12px 15px;border-bottom:1px solid #edf0f2;background:#fff}
.sutil-notify-settings-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sutil-notify-settings select{width:auto;min-width:155px;margin:0;padding:7px 9px}
.sutil-notify-settings button{padding:7px 9px;font-size:12px}
.sutil-notify-list{padding:8px}
.sutil-notify-item{
  border:1px solid #e2e8ee;border-radius:12px;padding:10px 11px;margin:7px 0;background:#fff
}
.sutil-notify-item.unread{background:#f2f8ff;border-color:#bfd6ee}
.sutil-notify-item strong{display:block;color:#21384c;font-size:13px}
.sutil-notify-item small{display:block;color:#68717c;margin-top:4px;font-size:10px}
.sutil-notify-empty{padding:20px;text-align:center;color:#68717c}
.sutil-notify-toast{
  position:fixed;right:18px;top:18px;z-index:100220;
  width:min(380px,calc(100vw - 36px));padding:13px 14px;
  border:1px solid #dce3e9;border-left:5px solid #1769aa;border-radius:13px;
  background:#fff;box-shadow:0 16px 45px rgba(15,23,42,.22);
  opacity:0;transform:translateY(-12px);pointer-events:none;transition:.2s
}
.sutil-notify-toast.show{opacity:1;transform:none;pointer-events:auto}
.sutil-notify-toast strong{display:block;color:#17365d}
.sutil-notify-toast small{display:block;color:#68717c;margin-top:4px;line-height:1.35}
@media(max-width:600px){
  .sutil-notify-fab{right:12px;bottom:12px}
  .sutil-notify-panel{right:12px;bottom:78px;width:calc(100vw - 24px)}
  .sutil-notify-toast{right:12px;top:12px;width:calc(100vw - 24px)}
}
</style>


<style>
/* SUTIL · Acceso flotante AI / humano */
.sutil-ai-fab{
  position:fixed;right:18px;bottom:18px;z-index:100205;
  width:58px;height:58px;border:0;border-radius:18px;padding:0;
  display:none;align-items:center;justify-content:center;cursor:pointer;
  background:linear-gradient(135deg,#0a1630 0%,#153f70 48%,#5a2ea6 100%);
  box-shadow:0 10px 32px rgba(30,52,102,.34),inset 0 0 0 1px rgba(255,255,255,.18);
  overflow:hidden
}
.sutil-ai-fab.show{display:flex}
.sutil-ai-fab:before{
  content:"";position:absolute;inset:-35%;
  background:conic-gradient(from 0deg,transparent,#62e9ff,transparent,#a983ff,transparent);
  animation:sutilAiSpin 5s linear infinite;opacity:.5
}
.sutil-ai-fab:after{
  content:"";position:absolute;inset:3px;border-radius:15px;
  background:linear-gradient(145deg,#101d39,#15365c 58%,#342061)
}
.sutil-ai-fab-logo{
  position:relative;z-index:2;color:#fff;font-weight:950;font-size:18px;
  letter-spacing:-1px;text-shadow:0 0 12px #78eaff
}
.sutil-ai-fab-logo small{
  display:block;font-size:7px;letter-spacing:1.4px;color:#8eefff;margin-top:-2px
}
@keyframes sutilAiSpin{to{transform:rotate(360deg)}}

.sutil-ai-float-panel{
  position:fixed;right:18px;bottom:84px;z-index:100215;
  width:min(330px,calc(100vw - 36px));display:none;
  background:#0f1b32;color:#fff;border:1px solid rgba(128,207,255,.28);
  border-radius:18px;box-shadow:0 22px 60px rgba(6,14,32,.38);
  overflow:hidden
}
.sutil-ai-float-panel.open{display:block}
.sutil-ai-float-head{
  padding:15px 16px;background:linear-gradient(135deg,#122542,#27215c);
  border-bottom:1px solid rgba(255,255,255,.10)
}
.sutil-ai-float-head strong{font-size:16px}
.sutil-ai-float-head small{display:block;color:#a9bed3;margin-top:4px;line-height:1.35}
.sutil-ai-float-options{padding:10px}
.sutil-ai-float-option{
  width:100%;border:1px solid rgba(255,255,255,.11);border-radius:13px;
  background:rgba(255,255,255,.055);color:#fff;padding:12px;
  display:flex;gap:11px;align-items:center;text-align:left;cursor:pointer;margin:7px 0
}
.sutil-ai-float-option:hover{background:rgba(107,210,255,.11);border-color:rgba(107,210,255,.34)}
.sutil-ai-float-option .ico{
  width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;background:linear-gradient(135deg,#1a638c,#5a36a6);font-size:19px;font-weight:900
}
.sutil-ai-float-option.human .ico{background:linear-gradient(135deg,#1769aa,#148343)}
.sutil-ai-float-option strong{display:block;font-size:13px}
.sutil-ai-float-option small{display:block;color:#a8bbcc;font-size:10px;margin-top:3px;line-height:1.3}
@media(max-width:600px){
  .sutil-ai-fab{right:12px;bottom:12px}
  .sutil-ai-float-panel{right:12px;bottom:78px;width:calc(100vw - 24px)}
}
</style>


<style>
/* ============================================================
   SUTIL · Diálogos profesionales globales v6
   Reemplaza alert / confirm / prompt nativos del navegador.
   ============================================================ */
.sutil-dialog-backdrop{
  position:fixed;inset:0;z-index:200000;
  display:none;align-items:center;justify-content:center;
  padding:18px;background:rgba(15,23,42,.64);
  backdrop-filter:blur(3px)
}
.sutil-dialog-backdrop.open{display:flex}
.sutil-dialog-card{
  width:min(470px,100%);max-height:90vh;overflow:auto;
  background:#fff;border-radius:22px;
  box-shadow:0 30px 90px rgba(15,23,42,.34);
  border:1px solid #e4e9ee;
  animation:sutilDialogIn .16s ease-out
}
@keyframes sutilDialogIn{
  from{opacity:.35;transform:translateY(8px) scale(.985)}
  to{opacity:1;transform:none}
}
.sutil-dialog-head{
  display:flex;gap:13px;align-items:flex-start;
  padding:20px 20px 12px
}
.sutil-dialog-icon{
  width:44px;height:44px;flex:0 0 44px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:21px;font-weight:900
}
.sutil-dialog-icon.info{background:#eaf3ff;color:#1769aa}
.sutil-dialog-icon.success{background:#e8f7ed;color:#148343}
.sutil-dialog-icon.warning{background:#fff4d6;color:#946200}
.sutil-dialog-icon.danger{background:#ffe8e6;color:#b42318}
.sutil-dialog-title{
  margin:2px 0 4px;color:#172b3d;font-size:18px;font-weight:900
}
.sutil-dialog-subtitle{
  margin:0;color:#68717c;font-size:12px;line-height:1.45
}
.sutil-dialog-body{
  padding:4px 20px 18px;color:#36424d;
  font-size:14px;line-height:1.55;white-space:pre-wrap;
  overflow-wrap:anywhere
}
.sutil-dialog-input{
  width:100%;margin-top:13px;padding:12px 13px;
  border:1px solid #cbd4dc;border-radius:11px;
  background:#fff;color:#20242a;outline:none
}
.sutil-dialog-input:focus{
  border-color:var(--sutil-primary,#1769aa);
  box-shadow:0 0 0 3px rgba(23,105,170,.11)
}
.sutil-dialog-actions{
  display:flex;justify-content:flex-end;gap:9px;flex-wrap:wrap;
  padding:14px 20px 20px;border-top:1px solid #edf0f3;
  background:#fafbfd;border-radius:0 0 22px 22px
}
.sutil-dialog-action{
  border:0;border-radius:11px;padding:10px 16px;
  font-weight:850;cursor:pointer;min-width:96px
}
.sutil-dialog-cancel{background:#e9edf1;color:#46515c}
.sutil-dialog-confirm{background:var(--sutil-primary,#1769aa);color:#fff}
.sutil-dialog-confirm.success{background:#148343}
.sutil-dialog-confirm.danger{background:#b42318}
.sutil-dialog-confirm.warning{background:#9a6500}
.sutil-dialog-action:hover{filter:brightness(.97)}
@media(max-width:520px){
  .sutil-dialog-card{border-radius:18px}
  .sutil-dialog-head{padding:17px 16px 10px}
  .sutil-dialog-body{padding:4px 16px 15px}
  .sutil-dialog-actions{padding:12px 16px 16px}
  .sutil-dialog-action{flex:1}
}
</style>


<style>
/* SUTIL · Credencial profesional de acceso del cliente v7 */
.client-access-success{
  border:1px solid #a7d8b6!important;
  background:linear-gradient(180deg,#f6fff8,#eefaf2)!important;
  overflow:hidden
}
.client-access-success-head{
  display:flex;justify-content:space-between;gap:12px;align-items:flex-start;
  flex-wrap:wrap;margin-bottom:15px
}
.client-access-success-title{
  display:flex;gap:10px;align-items:flex-start
}
.client-access-success-icon{
  width:40px;height:40px;flex:0 0 40px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  background:#148343;color:#fff;font-size:21px;font-weight:900
}
.client-access-success-title h3{margin:1px 0 4px;color:#126b39}
.client-access-success-title p{margin:0;color:#5f6f65;font-size:12px;line-height:1.4}

.client-access-credentials{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px
}
.client-access-credential{
  min-width:0;border:1px solid #dce8df;border-radius:14px;background:#fff;
  padding:12px 13px
}
.client-access-credential-label{
  color:#68756c;font-size:10px;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;margin-bottom:6px
}
.client-access-credential-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px
}
.client-access-credential-value{
  min-width:0;font-size:18px;font-weight:900;color:#20362a;
  overflow-wrap:anywhere;line-height:1.2
}
.client-access-credential-value.password{
  letter-spacing:3px;font-size:24px;color:#0f5132
}
.client-access-copy-mini{
  flex:0 0 auto;border:1px solid #cfdcd3;background:#f7faf8;color:#17633a;
  border-radius:9px;padding:7px 9px;cursor:pointer;font-size:11px;font-weight:850
}
.client-access-copy-mini:hover{background:#edf7f0}

.client-access-linkbox{
  margin-top:11px;border:1px solid #dce8df;background:#fff;border-radius:13px;
  padding:11px 12px;display:flex;align-items:center;gap:10px
}
.client-access-linktext{
  min-width:0;flex:1;font-size:12px;color:#42544a;overflow-wrap:anywhere
}
.client-access-actions{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-top:12px
}
.client-access-actions .btn{width:100%;padding:10px 8px;font-size:12px}
.client-access-security-note{
  margin-top:11px;padding:10px 12px;border-radius:11px;
  background:#fff9e8;border:1px solid #eadca9;color:#715b16;font-size:11px;line-height:1.4
}
@media(max-width:780px){
  .client-access-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .client-access-credentials{grid-template-columns:1fr}
  .client-access-actions{grid-template-columns:1fr 1fr}
  .client-access-credential-value{font-size:16px}
  .client-access-credential-value.password{font-size:22px}
}
</style>


<style>
/* SUTIL · Inicio v9 · módulos organizados por áreas */
.home-module-groups{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.home-module-group{
  border-top:1px solid #e5e9ed;
  padding-top:18px;
}
.home-module-group:first-child{
  border-top:0;
  padding-top:2px;
}
.home-module-group-head{
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:12px;
}
.home-module-group-icon{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  background:#eef4f8;
  font-size:19px;
}
.home-module-group-title{
  margin:0;
  color:#203a52;
  font-size:18px;
  font-weight:900;
}
.home-module-group-subtitle{
  margin-top:2px;
  color:#68717c;
  font-size:11px;
}
.home-module-group .module-grid{
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
}
.home-module-group.analysis .module-grid,
.home-module-group.tools .module-grid{
  grid-template-columns:repeat(auto-fit,minmax(190px,240px));
  justify-content:start;
}
@media(max-width:650px){
  .home-module-groups{gap:18px}
  .home-module-group{padding-top:15px}
  .home-module-group-title{font-size:16px}
  .home-module-group .module-grid,
  .home-module-group.analysis .module-grid,
  .home-module-group.tools .module-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}
@media(max-width:430px){
  .home-module-group .module-grid,
  .home-module-group.analysis .module-grid,
  .home-module-group.tools .module-grid{
    grid-template-columns:1fr;
  }
}
</style>


<style>
/* SUTIL FIX 12.15.142 · Inicio compacto con 4 módulos principales */
.home-main-nav{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  margin-top:6px;
}
.home-main-card{
  position:relative;
  width:100%;
  text-align:left;
  border:1px solid rgba(125,141,170,.32);
  border-radius:24px;
  padding:18px 18px 18px 18px;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  box-shadow:0 14px 32px rgba(9,16,35,.14);
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:186px;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.home-main-card:hover,.home-main-card:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 18px 34px rgba(9,16,35,.18);
  border-color:rgba(104,132,255,.38);
}
.home-main-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.home-main-card-badge{
  width:56px;
  height:56px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:28px;
  background:linear-gradient(135deg,rgba(95,112,223,.24),rgba(42,169,184,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
}
.home-main-card-arrow{
  font-size:30px;
  line-height:1;
  color:#8ea0ba;
  margin-top:2px;
}
.home-main-card-title{
  margin:0;
  font-size:21px;
  line-height:1.15;
  font-weight:900;
  color:#eef4ff;
}
.home-main-card-text{
  margin:0;
  font-size:13px;
  line-height:1.5;
  color:#d2dbec;
}
.home-main-card-tag{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8ee4d0;
}
.home-main-card.clients .home-main-card-badge{background:linear-gradient(135deg,rgba(90,114,255,.26),rgba(73,201,234,.18));}
.home-main-card.operations .home-main-card-badge{background:linear-gradient(135deg,rgba(46,196,182,.24),rgba(103,110,255,.18));}
.home-main-card.analysis .home-main-card-badge{background:linear-gradient(135deg,rgba(131,107,255,.24),rgba(63,182,212,.16));}
.home-main-card.tools .home-main-card-badge{background:linear-gradient(135deg,rgba(130,146,170,.26),rgba(95,112,223,.16));}
.home-area-section-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:16px;
  flex-wrap:wrap;
}
.home-area-section-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#8ee4d0;
  margin-bottom:6px;
}
.home-area-section-head h2{margin:0}
.home-area-section-head .muted{max-width:780px}
/* Principal: siempre 2 por fila también en pantalla de teléfono. */
.home-main-nav{max-width:900px;margin-inline:auto;}
.home-main-card{box-sizing:border-box;min-width:0;cursor:pointer;font-family:inherit;}
.home-main-card-title,.home-main-card-text{overflow-wrap:anywhere;hyphens:auto;}
@media(max-width:760px){
  #homeSection .home-main-nav{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:11px!important;
  }
  #homeSection .home-main-card{
    padding:13px 11px!important;
    min-width:0!important;
    min-height:158px!important;
    height:100%;
    border-radius:18px;
    gap:10px;
    align-items:center;
    text-align:center;
    justify-content:flex-start;
  }
  #homeSection .home-main-card-top{width:100%;align-items:center;justify-content:center;position:relative;}
  #homeSection .home-main-card-badge{width:46px;height:46px;border-radius:14px;font-size:25px;flex:0 0 46px;}
  #homeSection .home-main-card-arrow{position:absolute;right:0;top:0;font-size:20px;}
  #homeSection .home-main-card-title{font-size:clamp(14px,4vw,17px);line-height:1.2;max-width:100%;text-align:center;}
  /* La explicación permanece en el submenú; no extender cada tarjeta móvil. */
  #homeSection .home-main-card-text,#homeSection .home-main-card-tag{display:none!important;}
  /* Contenido de los cuatro grupos: conservar cuadrícula visual, nunca lista. */
  #clientsManagementSection .module-grid,
  #operationsRoutesSection .module-grid,
  #analysisControlSection .module-grid,
  #settingsToolsSection .module-grid{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
    align-items:stretch;
  }
  #clientsManagementSection .module,
  #operationsRoutesSection .module,
  #analysisControlSection .module,
  #settingsToolsSection .module{
    min-width:0!important;
    min-height:124px!important;
    padding:12px 8px!important;
  }
  #clientsManagementSection .module-icon,
  #operationsRoutesSection .module-icon,
  #analysisControlSection .module-icon,
  #settingsToolsSection .module-icon{font-size:30px!important;margin-bottom:7px!important;}
  #clientsManagementSection .module-title,
  #operationsRoutesSection .module-title,
  #analysisControlSection .module-title,
  #settingsToolsSection .module-title{font-size:15px!important;line-height:1.2!important;overflow-wrap:anywhere;}
  #clientsManagementSection .module small,
  #operationsRoutesSection .module small,
  #analysisControlSection .module small,
  #settingsToolsSection .module small{font-size:11px!important;line-height:1.25!important;overflow-wrap:anywhere;}
}
@media(max-width:360px){
  #homeSection .home-main-nav{gap:8px!important;}
  #homeSection .home-main-card{padding:11px 8px!important;min-height:148px!important;}
  #homeSection .home-main-card-title{font-size:14px;}
}
body[data-sutil-theme="light"] .home-main-card{
  background:linear-gradient(180deg,#fbfdff,#f1f5fa);
  border-color:#d9e2ef;
  box-shadow:0 12px 28px rgba(14,32,61,.08);
}
body[data-sutil-theme="light"] .home-main-card-title{color:#1f3348}
body[data-sutil-theme="light"] .home-main-card-text{color:#5a6678}
body[data-sutil-theme="light"] .home-main-card-arrow{color:#8392a9}
body[data-sutil-theme="light"] .home-main-card-tag{color:#187f78}
body[data-sutil-theme="light"] .home-main-card-badge{box-shadow:inset 0 1px 0 rgba(255,255,255,.5)}
body[data-sutil-theme="light"] .home-area-section-kicker{color:#516170}
</style>


<style>
/* ============================================================
   SUTIL v10 · TEMA AI FUTURISTA (PRUEBA)
   Inspirado en la paleta del Centro de asistencia AI.
   Solo cambia apariencia; no modifica lógica ni navegación.
   ============================================================ */
:root{
  --sutil-primary:#5968d8 !important;
  --sutil-secondary:#2aa9b8 !important;
  --sutil-background:#202838 !important;

  --ai-bg:#202838;
  --ai-surface:#293345;
  --ai-surface-2:#313d52;
  --ai-surface-3:#39465d;
  --ai-border:#4d5b75;
  --ai-indigo:#5968d8;
  --ai-violet:#7960d8;
  --ai-cyan:#35c7d5;
  --ai-green:#35b97a;
  --ai-text:#f4f7ff;
  --ai-muted:#aeb9cb;
  --ai-danger:#e46772;
  --ai-warning:#e4b85b;
}

/* Fondo general */
html,body{
  background:
    radial-gradient(circle at 85% 3%,rgba(121,96,216,.18),transparent 28%),
    radial-gradient(circle at 12% 12%,rgba(53,199,213,.10),transparent 24%),
    var(--ai-bg) !important;
  color:var(--ai-text) !important;
}

/* Encabezados y textos */
h1,h2,h3,h4,h5,h6,
.header h2,
.module-title,
.home-module-group-title{
  color:var(--ai-text) !important;
}
.muted,
small,
.home-module-group-subtitle,
.dashboard-kpi-label,
.report-metric-subtext{
  color:var(--ai-muted) !important;
}

/* Tarjetas, contenedores, secciones */
.card,
.module,
.dashboard-kpi,
.location-metric,
.cash-actor-box,
.pix-summary-box,
.staff-edit-section,
.loan-card,
.client-detail-top,
.client-hub-action,
.method-mini-card,
.sutil-plan-choice,
.sutil-plan-quote-item,
.client-access-credential,
.client-access-linkbox{
  background:linear-gradient(180deg,var(--ai-surface-2),var(--ai-surface)) !important;
  border-color:var(--ai-border) !important;
  color:var(--ai-text) !important;
  box-shadow:0 8px 24px rgba(5,10,22,.18) !important;
}

/* Grupos del inicio */
.home-module-group{
  border-color:rgba(132,151,185,.25) !important;
}
.home-module-group-icon{
  background:linear-gradient(135deg,#415070,#3a416d) !important;
  color:#fff !important;
  border:1px solid rgba(129,151,194,.26);
}
.module:hover,
.client-hub-action:hover,
.sutil-plan-choice:hover{
  transform:translateY(-2px);
  border-color:#7180d9 !important;
  box-shadow:0 10px 28px rgba(38,48,90,.30) !important;
}

/* Métricas */
.metric,
.dashboard-kpi-value,
.report-metric-value,
.location-metric strong,
.method-mini-card strong{
  color:#ffffff !important;
}

/* Inputs y selectores */
input,select,textarea{
  background:#222c3c !important;
  color:var(--ai-text) !important;
  border-color:#53627d !important;
}
input::placeholder,textarea::placeholder{
  color:#8795aa !important;
}
input:focus,select:focus,textarea:focus{
  border-color:var(--ai-cyan) !important;
  outline:none !important;
  box-shadow:0 0 0 3px rgba(53,199,213,.12) !important;
}

/* Botones generales */
.btn,
button.btn,
.sutil-dialog-confirm{
  background:linear-gradient(135deg,var(--ai-indigo),var(--ai-violet)) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 5px 14px rgba(25,31,73,.22);
}
.btn:hover,button.btn:hover{
  filter:brightness(1.08);
}
.btn.success,.success{
  background:linear-gradient(135deg,#269e70,#2eb9a0) !important;
}
.btn.secondary,.secondary{
  background:#46536b !important;
  color:#eef3ff !important;
}
.btn.danger,.danger{
  background:linear-gradient(135deg,#b94d60,#d05b68) !important;
}

/* Tablas */
table{
  color:var(--ai-text) !important;
}
td,th{
  border-color:#445168 !important;
}
thead th,
.staff-table thead th,
.pix-table thead th{
  background:#273247 !important;
  color:#bec9dc !important;
}
tbody tr:hover{
  background:#344158 !important;
}

/* Estados */
.row-current,.pill-current{
  background:rgba(53,185,122,.16) !important;
  color:#7ce0ae !important;
}
.row-today,.pill-today{
  background:rgba(228,184,91,.14) !important;
  color:#f2d17e !important;
}
.row-overdue,.row-reported,.pill-overdue,.pill-reported{
  background:rgba(228,103,114,.15) !important;
  color:#ff9aa3 !important;
}
.status-current,.confirmed{
  color:#66d99e !important;
}
.status-overdue,.not_confirmed{
  color:#ff8993 !important;
}
.checking,.status-warning{
  color:#f0c96b !important;
}

/* Caja / banners */
.cash-status-banner.open,
.operation-cash-status.open{
  background:rgba(53,185,122,.15) !important;
  border-color:rgba(84,211,147,.35) !important;
  color:#83e3b1 !important;
}
.cash-status-banner.closed,
.operation-cash-status.closed{
  background:rgba(228,103,114,.14) !important;
  border-color:rgba(228,103,114,.35) !important;
  color:#ff9ca5 !important;
}
.cash-status-banner.missing,
.operation-cash-status.not_opened{
  background:rgba(228,184,91,.14) !important;
  border-color:rgba(228,184,91,.35) !important;
  color:#f2d17e !important;
}

/* Chats */
.sutil-chat-shell,
.sutil-chat-directory,
.sutil-chat-center-empty{
  background:var(--ai-surface) !important;
  border-color:var(--ai-border) !important;
  color:var(--ai-text) !important;
}
.sutil-chat-head,
.sutil-chat-compose,
.sutil-chat-status{
  background:#273246 !important;
  border-color:#43516a !important;
  color:var(--ai-muted) !important;
}
.sutil-chat-messages{
  background:#20293a !important;
}
.sutil-chat-row.client .sutil-chat-bubble{
  background:#354258 !important;
  border-color:#52617d !important;
  color:#fff !important;
}
.sutil-chat-row.staff .sutil-chat-bubble{
  background:linear-gradient(135deg,#5264d0,#6657bb) !important;
  color:#fff !important;
}
.sutil-chat-directory-item{
  background:#2b3547 !important;
  color:#fff !important;
  border-color:#3f4b61 !important;
}
.sutil-chat-directory-item:hover,
.sutil-chat-directory-item.active{
  background:#37445d !important;
}

/* Navegaciones/tabs */
.client-file-btn,
.cash-compact-nav-btn,
.radio-pill{
  background:#2c374b !important;
  border-color:#4c5a72 !important;
  color:#dfe7f7 !important;
}
.client-file-btn.active,
.cash-compact-nav-btn.active,
.detail-tab.active-tab,
.active-report-nav{
  background:linear-gradient(135deg,#5264d0,#6558c3) !important;
  border-color:#7584e3 !important;
  color:#fff !important;
}

/* Modal profesional Sutil */
.sutil-dialog-backdrop{
  background:rgba(8,13,25,.76) !important;
}
.sutil-dialog-card{
  background:#293447 !important;
  border-color:#52617d !important;
  color:#fff !important;
}
.sutil-dialog-title{
  color:#fff !important;
}
.sutil-dialog-subtitle,
.sutil-dialog-body{
  color:#bac4d4 !important;
}
.sutil-dialog-actions{
  background:#242e40 !important;
  border-color:#43516a !important;
}
.sutil-dialog-cancel{
  background:#455269 !important;
  color:#f3f6ff !important;
}

/* Acceso cliente */
.client-access-success{
  background:linear-gradient(180deg,#293b43,#26333e) !important;
  border-color:#3a846b !important;
}
.client-access-success-title h3{
  color:#7ce0ae !important;
}
.client-access-success-title p{
  color:#b8c5c0 !important;
}
.client-access-security-note{
  background:rgba(228,184,91,.12) !important;
  border-color:rgba(228,184,91,.30) !important;
  color:#f2d17e !important;
}
.client-access-copy-mini{
  background:#344158 !important;
  border-color:#52617d !important;
  color:#d9e4f5 !important;
}

/* Notificaciones */
.sutil-notify-panel{
  background:#293447 !important;
  border-color:#52617d !important;
  color:#fff !important;
}
.sutil-notify-head,
.sutil-notify-settings{
  background:#252f42 !important;
  border-color:#43516a !important;
}
.sutil-notify-item{
  background:#303b50 !important;
  border-color:#4b5870 !important;
  color:#fff !important;
}
.sutil-notify-item.unread{
  background:#374461 !important;
  border-color:#6575c7 !important;
}

/* Barra AI mantiene identidad y ahora combina con todo el panel */
.sutil-ai-fab{
  background:linear-gradient(135deg,#253555 0%,#4f5fc2 50%,#795bcc 100%) !important;
}
.sutil-ai-float-panel{
  background:#293447 !important;
  border-color:#56668a !important;
}
.sutil-ai-float-head{
  background:linear-gradient(135deg,#3a4e79,#5f58b2) !important;
}
.sutil-ai-float-option{
  background:#303b50 !important;
  border-color:#4b5870 !important;
}
.sutil-ai-float-option:hover{
  background:#394760 !important;
  border-color:#7183db !important;
}

/* Scrollbar discreta */
*{
  scrollbar-color:#65749a #202838;
}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#202838}
::-webkit-scrollbar-thumb{background:#52617d;border-radius:99px;border:2px solid #202838}

/* Evita fondos blancos heredados en subcomponentes */
.placeholder,
.client-empty,
.import-stat,
.import-map-source,
.photo-picker,
.loan-manual-box,
.loan-manual-row,
.payments-list,
.payment-entry,
.pix-preview,
.locations-map-card,
.locations-list{
  background:#293447 !important;
  border-color:#4a5870 !important;
  color:#dce4f2 !important;
}

@media(max-width:650px){
  .card{box-shadow:none !important}
}
</style>


<style>
/* ============================================================
   SUTIL EMPRESARIO v11 · módulos y botones flotantes
   Solo apariencia: profundidad, sombra y respuesta visual.
   ============================================================ */

/* Tarjetas principales del inicio */
.module{
  position:relative;
  transform:translateY(0);
  transition:
    transform .18s ease,
    box-shadow .18s ease,
    border-color .18s ease,
    filter .18s ease;
  box-shadow:
    0 12px 26px rgba(5,10,24,.28),
    0 3px 7px rgba(5,10,24,.22),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  border:1px solid #56657f !important;
}
.module:hover{
  transform:translateY(-5px);
  border-color:#7c8be3 !important;
  box-shadow:
    0 20px 38px rgba(5,10,24,.38),
    0 0 0 1px rgba(111,129,219,.20),
    0 0 22px rgba(89,104,216,.13),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  filter:brightness(1.045);
}
.module:active{
  transform:translateY(1px) scale(.985);
  box-shadow:
    0 6px 14px rgba(5,10,24,.25),
    inset 0 2px 5px rgba(0,0,0,.18) !important;
}

/* Iconos de módulos con pequeño relieve */
.module-icon{
  transform:translateZ(0);
  transition:transform .18s ease,filter .18s ease;
  filter:drop-shadow(0 5px 7px rgba(0,0,0,.24));
}
.module:hover .module-icon{
  transform:translateY(-2px) scale(1.06);
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.30));
}

/* Botones generales */
.btn,
button.btn{
  position:relative;
  transform:translateY(0);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease,
    border-color .16s ease;
  box-shadow:
    0 9px 20px rgba(29,35,82,.28),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.btn:hover,
button.btn:hover{
  transform:translateY(-3px);
  box-shadow:
    0 14px 28px rgba(29,35,82,.36),
    0 0 16px rgba(89,104,216,.12),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  filter:brightness(1.08);
}
.btn:active,
button.btn:active{
  transform:translateY(1px) scale(.985);
  box-shadow:
    0 5px 12px rgba(29,35,82,.24),
    inset 0 2px 4px rgba(0,0,0,.16) !important;
}

/* Tarjetas de acceso rápido y acciones */
.client-hub-action,
.cash-compact-nav-btn,
.client-file-btn,
.sutil-plan-choice,
.method-mini-card{
  position:relative;
  transform:translateY(0);
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    border-color .16s ease,
    filter .16s ease;
  box-shadow:
    0 9px 20px rgba(5,10,24,.22),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.client-hub-action:hover,
.cash-compact-nav-btn:hover,
.client-file-btn:hover,
.sutil-plan-choice:hover,
.method-mini-card:hover{
  transform:translateY(-3px);
  border-color:#7183db !important;
  box-shadow:
    0 14px 28px rgba(5,10,24,.30),
    0 0 14px rgba(89,104,216,.11) !important;
}
.client-hub-action:active,
.cash-compact-nav-btn:active,
.client-file-btn:active,
.sutil-plan-choice:active,
.method-mini-card:active{
  transform:translateY(1px) scale(.99);
}

/* KPIs ligeramente elevados */
.dashboard-kpi,
.location-metric{
  box-shadow:
    0 10px 22px rgba(5,10,24,.22),
    inset 0 1px 0 rgba(255,255,255,.04) !important;
}

/* AI flotante más destacado */
.sutil-ai-fab{
  box-shadow:
    0 14px 32px rgba(34,43,104,.44),
    0 0 22px rgba(53,199,213,.14),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.sutil-ai-fab:hover{
  transform:translateY(-4px) scale(1.03);
  box-shadow:
    0 20px 40px rgba(34,43,104,.52),
    0 0 28px rgba(53,199,213,.20),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.sutil-ai-fab:active{
  transform:translateY(0) scale(.97);
}

/* Opciones dentro del centro AI */
.sutil-ai-float-option{
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;
  box-shadow:0 8px 16px rgba(5,10,24,.20) !important;
}
.sutil-ai-float-option:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 22px rgba(5,10,24,.30) !important;
}

/* En móvil evitar hover persistente */
@media(hover:none){
  .module:hover,
  .btn:hover,
  button.btn:hover,
  .client-hub-action:hover,
  .cash-compact-nav-btn:hover,
  .client-file-btn:hover,
  .sutil-plan-choice:hover,
  .method-mini-card:hover,
  .sutil-ai-fab:hover,
  .sutil-ai-float-option:hover{
    transform:none;
  }
}
</style>


<style>
/* SUTIL v12 · selector claro/oscuro para Empresario / ADM / Cobrador */
:root{
  --ui-bg:#eef2f7;
  --ui-surface:#ffffff;
  --ui-surface-2:#f7f9fc;
  --ui-border:#d9e1ea;
  --ui-text:#20242a;
  --ui-muted:#68717c;
}
body[data-sutil-theme="dark"]{
  --ui-bg:#202838;
  --ui-surface:#293345;
  --ui-surface-2:#313d52;
  --ui-border:#4d5b75;
  --ui-text:#f4f7ff;
  --ui-muted:#aeb9cb;
}
body[data-sutil-theme="light"]{
  background:#eef2f7 !important;
  color:#20242a !important;
}
body[data-sutil-theme="light"] .card,
body[data-sutil-theme="light"] .module,
body[data-sutil-theme="light"] .dashboard-kpi,
body[data-sutil-theme="light"] .location-metric,
body[data-sutil-theme="light"] .cash-actor-box,
body[data-sutil-theme="light"] .pix-summary-box,
body[data-sutil-theme="light"] .staff-edit-section,
body[data-sutil-theme="light"] .loan-card,
body[data-sutil-theme="light"] .client-detail-top,
body[data-sutil-theme="light"] .client-hub-action,
body[data-sutil-theme="light"] .method-mini-card,
body[data-sutil-theme="light"] .sutil-plan-choice,
body[data-sutil-theme="light"] .client-access-credential,
body[data-sutil-theme="light"] .client-access-linkbox{
  background:linear-gradient(180deg,#ffffff,#f7f9fc) !important;
  border-color:#d7e0ea !important;
  color:#20242a !important;
  box-shadow:0 10px 24px rgba(30,41,59,.10) !important;
}
body[data-sutil-theme="light"] h1,
body[data-sutil-theme="light"] h2,
body[data-sutil-theme="light"] h3,
body[data-sutil-theme="light"] h4,
body[data-sutil-theme="light"] .module-title,
body[data-sutil-theme="light"] .home-module-group-title,
body[data-sutil-theme="light"] .metric{
  color:#203a52 !important;
}
body[data-sutil-theme="light"] .muted,
body[data-sutil-theme="light"] small,
body[data-sutil-theme="light"] .home-module-group-subtitle{
  color:#68717c !important;
}
body[data-sutil-theme="light"] input,
body[data-sutil-theme="light"] select,
body[data-sutil-theme="light"] textarea{
  background:#fff !important;
  color:#20242a !important;
  border-color:#cfd9e3 !important;
}
body[data-sutil-theme="light"] table{color:#20242a !important}
body[data-sutil-theme="light"] thead th{background:#eef3f8 !important;color:#52606f !important}
body[data-sutil-theme="light"] tbody tr:hover{background:#f2f6fb !important}

.sutil-theme-switch{
  display:flex;align-items:center;gap:5px;padding:4px;
  background:var(--ui-surface);border:1px solid var(--ui-border);
  border-radius:13px;box-shadow:0 8px 18px rgba(15,23,42,.14)
}
.sutil-theme-switch button{
  border:0;background:transparent;color:var(--ui-muted);
  padding:8px 10px;border-radius:9px;font-weight:850;font-size:12px;
  cursor:pointer;min-width:82px
}
.sutil-theme-switch button.active{
  background:linear-gradient(135deg,#5968d8,#7960d8) !important;
  color:#fff !important;
  box-shadow:0 6px 14px rgba(64,72,160,.28) !important;
}
@media(max-width:650px){
  .sutil-theme-switch{width:100%;justify-content:center}
  .sutil-theme-switch button{flex:1}
}

/* SUTIL FIX 12.15.9 · contraste modo claro solo en Ubicaciones */
body[data-sutil-theme="light"] #locationsSection .location-metric strong{
  color:#203a52 !important;
}
body[data-sutil-theme="light"] #locationsSection .location-metric small{
  color:#5f6b78 !important;
}
body[data-sutil-theme="light"] #locationsSection .location-client-name,
body[data-sutil-theme="light"] #locationsSection .locations-map-head strong,
body[data-sutil-theme="light"] #locationsSection #locationsSelectedName{
  color:#20242a !important;
}
body[data-sutil-theme="light"] #locationsSection .location-client-meta,
body[data-sutil-theme="light"] #locationsSection .locations-live-note,
body[data-sutil-theme="light"] #locationsSection #locationsListCount,
body[data-sutil-theme="light"] #locationsSection #locationsSelectedMeta,
body[data-sutil-theme="light"] #locationsSection .locations-map-empty{
  color:#68717c !important;
}
body[data-sutil-theme="light"] #locationsSection .locations-list,
body[data-sutil-theme="light"] #locationsSection .locations-map-card{
  background:#ffffff !important;
  border-color:#d7e0ea !important;
}
body[data-sutil-theme="light"] #locationsSection .location-client-row{
  color:#20242a !important;
  border-bottom-color:#e3e9f0 !important;
}
body[data-sutil-theme="light"] #locationsSection .location-client-row:hover,
body[data-sutil-theme="light"] #locationsSection .location-client-row.active{
  background:#eef4fb !important;
}

</style>


<style>
/* ============================================================
   SUTIL v13 · contraste global de formularios, cuadros y modales
   ============================================================ */

/* Variables de contraste */
body[data-sutil-theme="light"]{
  --form-bg:#ffffff;
  --form-bg-soft:#f7f9fc;
  --form-text:#1f2937;
  --form-muted:#5f6b78;
  --form-label:#243447;
  --form-border:#cbd5e1;
  --form-placeholder:#8a96a5;
}
body[data-sutil-theme="dark"]{
  --form-bg:#253044;
  --form-bg-soft:#2d394e;
  --form-text:#f4f7ff;
  --form-muted:#b4bfd0;
  --form-label:#edf3ff;
  --form-border:#53627d;
  --form-placeholder:#8795aa;
}

/* Todo texto dentro de tarjetas/modales debe heredar contraste */
.card,
.modal,
.modal-box,
.dialog,
.dialog-box,
.route-modal,
.staff-modal,
.sutil-dialog-card,
.sutil-renewal-modal-card,
.client-access-success,
.edit-route-modal,
[class*="modal"],
[class*="dialog"]{
  color:var(--form-text) !important;
}

/* Títulos */
.card h1,.card h2,.card h3,.card h4,.card h5,
.modal h1,.modal h2,.modal h3,.modal h4,
.dialog h1,.dialog h2,.dialog h3,.dialog h4,
[class*="modal"] h1,[class*="modal"] h2,[class*="modal"] h3,[class*="modal"] h4{
  color:var(--form-text) !important;
}

/* Labels */
label,
.form-grid label,
.staff-block label,
.route-edit-grid label,
[class*="modal"] label,
[class*="dialog"] label{
  color:var(--form-label) !important;
  font-weight:700;
}

/* Ayudas, subtítulos y notas */
.muted,
small,
.help,
.help-text,
.form-help,
.field-help,
.route-help,
.staff-role-help,
[class*="help"],
[class*="note"],
[class*="hint"],
[class*="description"],
[class*="subtitle"]{
  color:var(--form-muted) !important;
}

/* Inputs/select/textarea */
input,
select,
textarea,
.manual-login-field,
[class*="modal"] input,
[class*="modal"] select,
[class*="modal"] textarea,
[class*="dialog"] input,
[class*="dialog"] select,
[class*="dialog"] textarea{
  background:var(--form-bg) !important;
  color:var(--form-text) !important;
  border-color:var(--form-border) !important;
}

/* Placeholder */
input::placeholder,
textarea::placeholder{
  color:var(--form-placeholder) !important;
  opacity:1 !important;
}

/* Select option legible */
select option{
  background:var(--form-bg) !important;
  color:var(--form-text) !important;
}

/* Campos deshabilitados/read-only */
input:disabled,
select:disabled,
textarea:disabled,
input[readonly]{
  background:var(--form-bg-soft) !important;
  color:var(--form-muted) !important;
  opacity:1 !important;
}

/* Secciones internas oscuras o destacadas */
.staff-block,
.route-base-box,
.cash-opening-box,
.cash-point-box,
.route-reference-box,
[class*="base-box"],
[class*="reference-box"]{
  color:var(--form-text) !important;
}
.staff-block p,
.staff-block div,
.route-base-box p,
.route-base-box div,
.cash-opening-box p,
.cash-opening-box div,
.cash-point-box p,
.cash-point-box div{
  color:inherit;
}

/* Modo claro: modales realmente claros */
body[data-sutil-theme="light"] .sutil-dialog-card,
body[data-sutil-theme="light"] .sutil-renewal-modal-card,
body[data-sutil-theme="light"] [class*="modal-card"],
body[data-sutil-theme="light"] [class*="modal-box"]{
  background:#ffffff !important;
  color:#1f2937 !important;
  border-color:#d5dee8 !important;
}
body[data-sutil-theme="light"] .sutil-dialog-body,
body[data-sutil-theme="light"] .sutil-dialog-subtitle,
body[data-sutil-theme="light"] [class*="modal"] .muted,
body[data-sutil-theme="light"] [class*="modal"] small{
  color:#5f6b78 !important;
}

/* Modo oscuro: modales realmente oscuros */
body[data-sutil-theme="dark"] .sutil-dialog-card,
body[data-sutil-theme="dark"] .sutil-renewal-modal-card,
body[data-sutil-theme="dark"] [class*="modal-card"],
body[data-sutil-theme="dark"] [class*="modal-box"]{
  background:#293447 !important;
  color:#f4f7ff !important;
  border-color:#52617d !important;
}
body[data-sutil-theme="dark"] .sutil-dialog-body,
body[data-sutil-theme="dark"] .sutil-dialog-subtitle,
body[data-sutil-theme="dark"] [class*="modal"] .muted,
body[data-sutil-theme="dark"] [class*="modal"] small{
  color:#b4bfd0 !important;
}

/* Botón cerrar visible en ambos temas */
[class*="modal"] .close,
[class*="modal"] .modal-close,
[class*="dialog"] .close,
.sutil-dialog-close{
  color:var(--form-text) !important;
  background:var(--form-bg-soft) !important;
  border-color:var(--form-border) !important;
}

/* Campos con fondo oscuro específico: fuerza texto blanco */
.route-edit-highlight,
.cash-highlight,
.staff-highlight,
[class*="highlight-box"]{
  color:#ffffff !important;
}
.route-edit-highlight label,
.cash-highlight label,
.staff-highlight label,
[class*="highlight-box"] label{
  color:#ffffff !important;
}
.route-edit-highlight .muted,
.cash-highlight .muted,
.staff-highlight .muted,
[class*="highlight-box"] .muted{
  color:#d5deea !important;
}

/* Evitar texto casi invisible en spans internos */
.card span:not(.badge):not(.pill):not(.status),
[class*="modal"] span:not(.badge):not(.pill):not(.status),
[class*="dialog"] span:not(.badge):not(.pill):not(.status){
  color:inherit;
}
</style>


<style>
/* ============================================================
   SUTIL v15 · CONTRASTE GLOBAL DEFINITIVO
   Regla general para todo Admin / ADM / Cobrador.
   ============================================================ */

/* --- Paleta semántica según tema --- */
body[data-sutil-theme="light"]{
  --s-bg:#eef2f7;
  --s-surface:#ffffff;
  --s-surface-soft:#f6f8fb;
  --s-text:#1f2937;
  --s-title:#172b3d;
  --s-label:#26384a;
  --s-muted:#5f6b78;
  --s-border:#cbd5e1;
  --s-input-bg:#ffffff;
  --s-input-text:#1f2937;
  --s-placeholder:#8692a1;
}
body[data-sutil-theme="dark"]{
  --s-bg:#202838;
  --s-surface:#293345;
  --s-surface-soft:#313d52;
  --s-text:#f4f7ff;
  --s-title:#ffffff;
  --s-label:#edf3ff;
  --s-muted:#b4bfd0;
  --s-border:#53627d;
  --s-input-bg:#253044;
  --s-input-text:#f4f7ff;
  --s-placeholder:#8f9caf;
}

/* --- TEXTO GENERAL: nunca blanco sobre blanco --- */
body[data-sutil-theme="light"] .card,
body[data-sutil-theme="light"] .modal,
body[data-sutil-theme="light"] [class*="modal"],
body[data-sutil-theme="light"] [class*="dialog"],
body[data-sutil-theme="light"] [class*="form"],
body[data-sutil-theme="light"] [class*="edit"],
body[data-sutil-theme="light"] [class*="panel"]{
  color:var(--s-text) !important;
}

body[data-sutil-theme="light"] h1,
body[data-sutil-theme="light"] h2,
body[data-sutil-theme="light"] h3,
body[data-sutil-theme="light"] h4,
body[data-sutil-theme="light"] h5,
body[data-sutil-theme="light"] h6{
  color:var(--s-title) !important;
}

/* Labels y textos junto a campos */
body[data-sutil-theme="light"] label,
body[data-sutil-theme="light"] .form-grid > label,
body[data-sutil-theme="light"] .field,
body[data-sutil-theme="light"] .field-label,
body[data-sutil-theme="light"] .form-label,
body[data-sutil-theme="light"] [class*="field"] > label,
body[data-sutil-theme="light"] [class*="form"] label,
body[data-sutil-theme="light"] [class*="modal"] label{
  color:var(--s-label) !important;
}

/* Texto secundario */
body[data-sutil-theme="light"] .muted,
body[data-sutil-theme="light"] small,
body[data-sutil-theme="light"] .help,
body[data-sutil-theme="light"] [class*="help"],
body[data-sutil-theme="light"] [class*="hint"],
body[data-sutil-theme="light"] [class*="note"],
body[data-sutil-theme="light"] [class*="description"],
body[data-sutil-theme="light"] [class*="subtitle"]{
  color:var(--s-muted) !important;
}

/* Campos: contraste coherente en ambos temas */
input,select,textarea{
  background:var(--s-input-bg) !important;
  color:var(--s-input-text) !important;
  border-color:var(--s-border) !important;
}
input::placeholder,textarea::placeholder{
  color:var(--s-placeholder) !important;
  opacity:1 !important;
}
select option{
  background:var(--s-input-bg) !important;
  color:var(--s-input-text) !important;
}
input:disabled,select:disabled,textarea:disabled,input[readonly]{
  opacity:1 !important;
  color:var(--s-muted) !important;
  background:var(--s-surface-soft) !important;
}

/* --- MODALES EN MODO CLARO --- */
body[data-sutil-theme="light"] .modal-card,
body[data-sutil-theme="light"] .modal-box,
body[data-sutil-theme="light"] .dialog-box,
body[data-sutil-theme="light"] .sutil-dialog-card,
body[data-sutil-theme="light"] .sutil-renewal-modal-card,
body[data-sutil-theme="light"] .client-edit-modal,
body[data-sutil-theme="light"] [class*="modal-card"],
body[data-sutil-theme="light"] [class*="modal-box"]{
  background:#ffffff !important;
  color:#1f2937 !important;
  border-color:#d5dee8 !important;
}

/* El contenido directo de un modal claro hereda texto oscuro */
body[data-sutil-theme="light"] [class*="modal-card"] > *,
body[data-sutil-theme="light"] [class*="modal-box"] > *,
body[data-sutil-theme="light"] .sutil-dialog-card > *{
  color:inherit;
}

/* --- BLOQUES REALMENTE OSCUROS: aquí sí texto blanco --- */
body[data-sutil-theme="light"] .photo-picker,
body[data-sutil-theme="light"] .photo-box,
body[data-sutil-theme="light"] .staff-block,
body[data-sutil-theme="light"] .cash-highlight,
body[data-sutil-theme="light"] .route-edit-highlight,
body[data-sutil-theme="light"] .loan-manual-box,
body[data-sutil-theme="light"] .dark-box,
body[data-sutil-theme="light"] .dark-panel,
body[data-sutil-theme="light"] [data-dark-surface="true"]{
  background:#263348 !important;
  color:#f4f7ff !important;
  border-color:#52617d !important;
}
body[data-sutil-theme="light"] .photo-picker *,
body[data-sutil-theme="light"] .photo-box *,
body[data-sutil-theme="light"] .staff-block *,
body[data-sutil-theme="light"] .cash-highlight *,
body[data-sutil-theme="light"] .route-edit-highlight *,
body[data-sutil-theme="light"] .loan-manual-box *,
body[data-sutil-theme="light"] .dark-box *,
body[data-sutil-theme="light"] .dark-panel *,
body[data-sutil-theme="light"] [data-dark-surface="true"] *{
  color:#f4f7ff !important;
}
body[data-sutil-theme="light"] .photo-picker .muted,
body[data-sutil-theme="light"] .photo-box .muted,
body[data-sutil-theme="light"] .staff-block .muted,
body[data-sutil-theme="light"] .cash-highlight .muted,
body[data-sutil-theme="light"] .route-edit-highlight .muted,
body[data-sutil-theme="light"] .loan-manual-box .muted{
  color:#c8d2e1 !important;
}

/* Inputs dentro de bloques oscuros */
body[data-sutil-theme="light"] .photo-picker input,
body[data-sutil-theme="light"] .photo-box input,
body[data-sutil-theme="light"] .staff-block input,
body[data-sutil-theme="light"] .staff-block select,
body[data-sutil-theme="light"] .staff-block textarea,
body[data-sutil-theme="light"] .cash-highlight input,
body[data-sutil-theme="light"] .route-edit-highlight input,
body[data-sutil-theme="light"] .loan-manual-box input{
  background:#202b3d !important;
  color:#ffffff !important;
  border-color:#5a6b89 !important;
}

/* --- EDITAR CLIENTE: caso visible en la captura --- */
body[data-sutil-theme="light"] .client-edit-modal label,
body[data-sutil-theme="light"] #clientEditModal label,
body[data-sutil-theme="light"] #clientEditModal .form-grid label,
body[data-sutil-theme="light"] #clientEditModal .field-label{
  color:#26384a !important;
}
body[data-sutil-theme="light"] #clientEditModal .muted,
body[data-sutil-theme="light"] #clientEditModal small{
  color:#5f6b78 !important;
}

/* Si el modal usa IDs/clases diferentes, cubrimos los formularios de edición */
body[data-sutil-theme="light"] [id*="Edit"][class*="modal"] label,
body[data-sutil-theme="light"] [id*="edit"][class*="modal"] label,
body[data-sutil-theme="light"] [id*="Edit"] .form-grid label,
body[data-sutil-theme="light"] [id*="edit"] .form-grid label{
  color:#26384a !important;
}

/* File inputs */
input[type="file"]{
  color:var(--s-input-text) !important;
}
input[type="file"]::file-selector-button{
  background:linear-gradient(135deg,#5968d8,#7960d8) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:8px;
  padding:7px 10px;
  margin-right:9px;
  cursor:pointer;
}

/* Checkboxes/radios no deben heredar fondos raros */
input[type="checkbox"],input[type="radio"]{
  accent-color:#5968d8;
}

/* Modo oscuro: refuerzo equivalente */
body[data-sutil-theme="dark"] label,
body[data-sutil-theme="dark"] .form-label,
body[data-sutil-theme="dark"] .field-label{
  color:#edf3ff !important;
}
body[data-sutil-theme="dark"] .muted,
body[data-sutil-theme="dark"] small,
body[data-sutil-theme="dark"] [class*="help"],
body[data-sutil-theme="dark"] [class*="hint"],
body[data-sutil-theme="dark"] [class*="note"]{
  color:#b4bfd0 !important;
}

/* Excepciones de estados con color propio */
.ok,.status-current,.confirmed{color:#63d89c !important}
.bad,.status-overdue,.not_confirmed,.error{color:#ff8f99 !important}
.warning,.checking,.status-warning{color:#f0ca73 !important}

/* Botón de cierre siempre visible */
.modal-close,.close-modal,.sutil-dialog-close,[class*="modal"] .close{
  color:var(--s-text) !important;
  background:var(--s-surface-soft) !important;
  border-color:var(--s-border) !important;
}
</style>


<style>
/* ============================================================
   SUTIL v16 · CONTRASTE DE CREDENCIALES / APP CLIENTE
   ============================================================ */

/* MODO OSCURO */
body[data-sutil-theme="dark"] .client-access-success{
  background:linear-gradient(180deg,#263b43,#22323d) !important;
  border-color:#3cab7a !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] .client-access-success-title h3{
  color:#8ce5b7 !important;
}
body[data-sutil-theme="dark"] .client-access-success-title p{
  color:#d4dee9 !important;
}

body[data-sutil-theme="dark"] .client-access-credential{
  background:linear-gradient(180deg,#33425a,#2b394e) !important;
  border-color:#60708d !important;
  color:#f7f9ff !important;
}
body[data-sutil-theme="dark"] .client-access-credential-label{
  color:#d5dfef !important;
  opacity:1 !important;
}
body[data-sutil-theme="dark"] .client-access-credential-value{
  color:#ffffff !important;
  text-shadow:none !important;
}
body[data-sutil-theme="dark"] .client-access-credential-value.password{
  color:#69e3a5 !important;
  text-shadow:0 0 10px rgba(105,227,165,.15) !important;
}

body[data-sutil-theme="dark"] .client-access-linkbox{
  background:#2b394e !important;
  border-color:#60708d !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] .client-access-linktext{
  color:#d9e3f0 !important;
}
body[data-sutil-theme="dark"] .client-access-linktext strong{
  color:#ffffff !important;
}

body[data-sutil-theme="dark"] .client-access-copy-mini{
  background:#3a4962 !important;
  border-color:#7080a0 !important;
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] .client-access-copy-mini:hover{
  background:#465975 !important;
  border-color:#8a9be0 !important;
  color:#ffffff !important;
}

body[data-sutil-theme="dark"] .client-access-security-note{
  background:rgba(228,184,91,.14) !important;
  border-color:rgba(240,202,115,.42) !important;
  color:#ffe4a3 !important;
}
body[data-sutil-theme="dark"] .client-access-security-note strong{
  color:#fff0bd !important;
}

/* Los botones grandes deben tener texto blanco visible */
body[data-sutil-theme="dark"] .client-access-actions .btn{
  color:#ffffff !important;
  text-shadow:0 1px 1px rgba(0,0,0,.25) !important;
}

/* MODO CLARO */
body[data-sutil-theme="light"] .client-access-success{
  background:linear-gradient(180deg,#f6fff8,#edf9f1) !important;
  border-color:#9bd2ac !important;
  color:#1f2937 !important;
}
body[data-sutil-theme="light"] .client-access-success-title h3{
  color:#126b39 !important;
}
body[data-sutil-theme="light"] .client-access-success-title p{
  color:#5f6f65 !important;
}
body[data-sutil-theme="light"] .client-access-credential{
  background:#ffffff !important;
  border-color:#d7e2da !important;
}
body[data-sutil-theme="light"] .client-access-credential-label{
  color:#58685f !important;
}
body[data-sutil-theme="light"] .client-access-credential-value{
  color:#20362a !important;
}
body[data-sutil-theme="light"] .client-access-credential-value.password{
  color:#08723d !important;
}
body[data-sutil-theme="light"] .client-access-linktext{
  color:#42544a !important;
}
body[data-sutil-theme="light"] .client-access-linktext strong{
  color:#20362a !important;
}
body[data-sutil-theme="light"] .client-access-copy-mini{
  background:#f4f8f5 !important;
  border-color:#cbd9cf !important;
  color:#17633a !important;
}
body[data-sutil-theme="light"] .client-access-security-note{
  background:#fff9e8 !important;
  border-color:#eadca9 !important;
  color:#715b16 !important;
}
</style>


<style>
/* ============================================================
   SUTIL v17 · Contraste total en estados y textos sobre fondo oscuro
   ============================================================ */

/* MODO OSCURO: verdes, advertencias y secundarios siempre visibles */
body[data-sutil-theme="dark"] .ok,
body[data-sutil-theme="dark"] .success,
body[data-sutil-theme="dark"] .status-current,
body[data-sutil-theme="dark"] .confirmed,
body[data-sutil-theme="dark"] .money-positive,
body[data-sutil-theme="dark"] .cash-status-open,
body[data-sutil-theme="dark"] .cash-pending-count,
body[data-sutil-theme="dark"] [class*="success"],
body[data-sutil-theme="dark"] [class*="current"],
body[data-sutil-theme="dark"] [class*="confirmed"]{
  color:#7BE7B2 !important;
}

body[data-sutil-theme="dark"] .warning,
body[data-sutil-theme="dark"] .checking,
body[data-sutil-theme="dark"] .status-warning,
body[data-sutil-theme="dark"] [class*="warning"],
body[data-sutil-theme="dark"] [class*="pending"]{
  color:#FFD989 !important;
}

body[data-sutil-theme="dark"] .bad,
body[data-sutil-theme="dark"] .error,
body[data-sutil-theme="dark"] .status-overdue,
body[data-sutil-theme="dark"] .not_confirmed,
body[data-sutil-theme="dark"] [class*="danger"],
body[data-sutil-theme="dark"] [class*="overdue"],
body[data-sutil-theme="dark"] [class*="rejected"]{
  color:#FF9AA5 !important;
}

/* Textos generales dentro de superficies oscuras */
body[data-sutil-theme="dark"] .card,
body[data-sutil-theme="dark"] .module,
body[data-sutil-theme="dark"] [class*="panel"],
body[data-sutil-theme="dark"] [class*="box"],
body[data-sutil-theme="dark"] [class*="section"]{
  color:#F4F7FF !important;
}

body[data-sutil-theme="dark"] label,
body[data-sutil-theme="dark"] .form-label,
body[data-sutil-theme="dark"] .field-label,
body[data-sutil-theme="dark"] [class*="label"]{
  color:#EEF3FF !important;
}

body[data-sutil-theme="dark"] .muted,
body[data-sutil-theme="dark"] small,
body[data-sutil-theme="dark"] [class*="help"],
body[data-sutil-theme="dark"] [class*="hint"],
body[data-sutil-theme="dark"] [class*="note"],
body[data-sutil-theme="dark"] [class*="subtitle"],
body[data-sutil-theme="dark"] [class*="description"]{
  color:#C3CDDC !important;
}

/* Caja diaria: caso visible en captura */
body[data-sutil-theme="dark"] #cashSection .cash-status-banner,
body[data-sutil-theme="dark"] #cashSection .cash-compact-nav-btn,
body[data-sutil-theme="dark"] #cashSection .cash-message,
body[data-sutil-theme="dark"] #cashSection [class*="pending"]{
  color:#F4F7FF !important;
}
body[data-sutil-theme="dark"] #cashSection [class*="pending"] strong,
body[data-sutil-theme="dark"] #cashSection [class*="pending"] .metric,
body[data-sutil-theme="dark"] #cashSection [class*="pending"] .count{
  color:#FFD989 !important;
}

/* Campos y placeholders en oscuro */
body[data-sutil-theme="dark"] input,
body[data-sutil-theme="dark"] select,
body[data-sutil-theme="dark"] textarea{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] input::placeholder,
body[data-sutil-theme="dark"] textarea::placeholder{
  color:#AEB9CB !important;
  opacity:1 !important;
}
</style>


<style>
/* ============================================================
   SUTIL v18 · CONTRASTE COMPLETO DEL MÓDULO CHAT
   ============================================================ */

/* Encabezado de conversación */
body[data-sutil-theme="dark"] .sutil-chat-head strong,
body[data-sutil-theme="dark"] .sutil-chat-directory-name,
body[data-sutil-theme="dark"] .sutil-chat-center-empty strong{
  color:#FFFFFF !important;
}

body[data-sutil-theme="dark"] .sutil-chat-head small,
body[data-sutil-theme="dark"] .sutil-chat-directory-meta,
body[data-sutil-theme="dark"] .sutil-chat-status,
body[data-sutil-theme="dark"] .sutil-chat-center-empty,
body[data-sutil-theme="dark"] .sutil-chat-meta{
  color:#C5D0E0 !important;
}

/* Elementos seleccionados / activos */
body[data-sutil-theme="dark"] .sutil-chat-directory-item.active,
body[data-sutil-theme="dark"] .sutil-chat-directory-item.active *,
body[data-sutil-theme="dark"] .sutil-chat-directory-item:hover,
body[data-sutil-theme="dark"] .sutil-chat-directory-item:hover *{
  color:#FFFFFF !important;
}

body[data-sutil-theme="dark"] .sutil-chat-directory-open{
  color:#7CE6ED !important;
}

/* Burbuja cliente y funcionario */
body[data-sutil-theme="dark"] .sutil-chat-row.client .sutil-chat-bubble{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] .sutil-chat-row.client .sutil-chat-meta{
  color:#C5D0E0 !important;
}

body[data-sutil-theme="dark"] .sutil-chat-row.staff .sutil-chat-bubble{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] .sutil-chat-row.staff .sutil-chat-meta{
  color:#E0E6F2 !important;
}

/* Mensaje vacío */
body[data-sutil-theme="dark"] .sutil-chat-center-empty,
body[data-sutil-theme="dark"] .sutil-chat-empty,
body[data-sutil-theme="dark"] [class*="chat-empty"]{
  color:#E7ECF5 !important;
}

/* Input */
body[data-sutil-theme="dark"] .sutil-chat-compose textarea,
body[data-sutil-theme="dark"] .sutil-chat-compose input{
  background:#202B3D !important;
  color:#FFFFFF !important;
  border-color:#5A6B89 !important;
}
body[data-sutil-theme="dark"] .sutil-chat-compose textarea::placeholder,
body[data-sutil-theme="dark"] .sutil-chat-compose input::placeholder{
  color:#AEB9CB !important;
}

/* Botones chat */
body[data-sutil-theme="dark"] .sutil-chat-menu summary,
body[data-sutil-theme="dark"] .sutil-chat-attach-btn{
  background:#344158 !important;
  color:#FFFFFF !important;
  border-color:#60708D !important;
}
body[data-sutil-theme="dark"] .sutil-chat-menu-box{
  background:#293447 !important;
  border-color:#52617D !important;
}
body[data-sutil-theme="dark"] .sutil-chat-menu-box button{
  color:#F4F7FF !important;
}
body[data-sutil-theme="dark"] .sutil-chat-menu-box button:hover{
  background:#37445D !important;
}
body[data-sutil-theme="dark"] .sutil-chat-menu-box button.danger{
  color:#FF9AA5 !important;
}

/* Cualquier verde oscuro heredado dentro del chat se reemplaza */
body[data-sutil-theme="dark"] #chatsSection .ok,
body[data-sutil-theme="dark"] #chatsSection [class*="success"],
body[data-sutil-theme="dark"] #chatsSection [class*="active"],
body[data-sutil-theme="dark"] #chatsSection [style*="green"],
body[data-sutil-theme="dark"] #chatsSection [style*="#238b57"],
body[data-sutil-theme="dark"] #chatsSection [style*="#148343"]{
  color:#7BE7B2 !important;
}

/* Modo claro conserva contraste oscuro normal */
body[data-sutil-theme="light"] .sutil-chat-head strong,
body[data-sutil-theme="light"] .sutil-chat-directory-name{
  color:#26394B !important;
}
body[data-sutil-theme="light"] .sutil-chat-head small,
body[data-sutil-theme="light"] .sutil-chat-directory-meta,
body[data-sutil-theme="light"] .sutil-chat-status{
  color:#667789 !important;
}
</style>


<style>
/* ============================================================
   SUTIL v19 · Submódulos coherentes en claro / oscuro
   ============================================================ */

/* COBROS */
body[data-sutil-theme="dark"] .collections-option{
  background:linear-gradient(180deg,#2f3b50,#273246) !important;
  border-color:#5a6983 !important;
  color:#F4F7FF !important;
  box-shadow:0 10px 24px rgba(5,10,24,.26) !important;
}
body[data-sutil-theme="dark"] .collections-option-title{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] .collections-option small{
  color:#C3CDDC !important;
}
body[data-sutil-theme="dark"] .collections-option:hover{
  border-color:#7C8BE3 !important;
  background:linear-gradient(180deg,#36435A,#2D394E) !important;
  box-shadow:0 16px 30px rgba(5,10,24,.34) !important;
}
body[data-sutil-theme="dark"] .collections-option.active{
  border:2px solid #7C8BE3 !important;
  background:linear-gradient(135deg,#4F5FC2,#6358B7) !important;
}
body[data-sutil-theme="dark"] .collections-option.active .collections-option-title,
body[data-sutil-theme="dark"] .collections-option.active small{
  color:#FFFFFF !important;
}

/* CLIENTES */
body[data-sutil-theme="dark"] .client-hub-action{
  background:linear-gradient(180deg,#2F3B50,#273246) !important;
  border-color:#5A6983 !important;
  color:#F4F7FF !important;
}
body[data-sutil-theme="dark"] .client-hub-action strong{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] .client-hub-action small{
  color:#C3CDDC !important;
}
body[data-sutil-theme="dark"] .client-hub-action:hover{
  border-color:#7C8BE3 !important;
  background:linear-gradient(180deg,#36435A,#2D394E) !important;
}

/* PERSONAL / OTROS MÓDULOS DE NAVEGACIÓN */
body[data-sutil-theme="dark"] .staff-nav-module,
body[data-sutil-theme="dark"] .module.staff-nav-module{
  background:linear-gradient(180deg,#2F3B50,#273246) !important;
  border-color:#5A6983 !important;
  color:#F4F7FF !important;
}
body[data-sutil-theme="dark"] .staff-nav-module .module-title{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] .staff-nav-module small{
  color:#C3CDDC !important;
}
body[data-sutil-theme="dark"] .staff-nav-module.active{
  border:2px solid #7C8BE3 !important;
  background:linear-gradient(135deg,#4F5FC2,#6358B7) !important;
}
body[data-sutil-theme="dark"] .staff-nav-module.active .module-title,
body[data-sutil-theme="dark"] .staff-nav-module.active small{
  color:#FFFFFF !important;
}

/* PÍLDORAS Y SELECTORES */
body[data-sutil-theme="dark"] .radio-pill{
  background:#2D394E !important;
  border-color:#53627D !important;
  color:#F4F7FF !important;
}
body[data-sutil-theme="dark"] .radio-pill:has(input:checked){
  background:linear-gradient(135deg,#4F5FC2,#6358B7) !important;
  color:#FFFFFF !important;
  border-color:#7C8BE3 !important;
}

/* MODO CLARO: mantiene tarjetas claras */
body[data-sutil-theme="light"] .collections-option,
body[data-sutil-theme="light"] .client-hub-action,
body[data-sutil-theme="light"] .staff-nav-module{
  background:linear-gradient(180deg,#FFFFFF,#F7FAFC) !important;
  border-color:#D6DEE6 !important;
}
body[data-sutil-theme="light"] .collections-option-title,
body[data-sutil-theme="light"] .client-hub-action strong,
body[data-sutil-theme="light"] .staff-nav-module .module-title{
  color:#155F93 !important;
}
body[data-sutil-theme="light"] .collections-option small,
body[data-sutil-theme="light"] .client-hub-action small,
body[data-sutil-theme="light"] .staff-nav-module small{
  color:#68717C !important;
}
</style>


<style>
/* ============================================================
   SUTIL v20 · contraste restante: Chat, Ubicaciones y Reportes
   ============================================================ */

/* ---------- CHAT: elimina cabeceras blancas / islas claras ---------- */
body[data-sutil-theme="dark"] .sutil-chat-directory,
body[data-sutil-theme="dark"] .sutil-chat-directory-head,
body[data-sutil-theme="dark"] .sutil-chat-directory-controls,
body[data-sutil-theme="dark"] .sutil-chat-center-panel,
body[data-sutil-theme="dark"] .sutil-chat-center-empty{
  background:#273246 !important;
  border-color:#53627d !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] .sutil-chat-directory-head strong,
body[data-sutil-theme="dark"] .sutil-chat-directory-head h3,
body[data-sutil-theme="dark"] .sutil-chat-directory-head h4{
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] .sutil-chat-directory-head small,
body[data-sutil-theme="dark"] .sutil-chat-directory-head .muted{
  color:#c3cddd !important;
}
body[data-sutil-theme="dark"] .sutil-chat-directory input,
body[data-sutil-theme="dark"] .sutil-chat-directory select{
  background:#202b3d !important;
  color:#ffffff !important;
  border-color:#5a6b89 !important;
}
body[data-sutil-theme="dark"] .sutil-chat-directory-item{
  background:#2c384d !important;
  border-color:#465773 !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] .sutil-chat-directory-item strong{
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] .sutil-chat-directory-item small{
  color:#c3cddd !important;
}
body[data-sutil-theme="dark"] .sutil-chat-directory-item.active{
  background:linear-gradient(135deg,#4f5fc2,#6358b7) !important;
  border-color:#8694e8 !important;
}
body[data-sutil-theme="dark"] .sutil-chat-center-empty{
  background:#253044 !important;
  border-color:#7183a5 !important;
}
body[data-sutil-theme="dark"] .sutil-chat-center-empty strong{
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] .sutil-chat-center-empty small,
body[data-sutil-theme="dark"] .sutil-chat-center-empty div{
  color:#d4dcea !important;
}

/* ---------- UBICACIONES: elimina paneles blancos ---------- */
body[data-sutil-theme="dark"] .locations-shell,
body[data-sutil-theme="dark"] .locations-list,
body[data-sutil-theme="dark"] .locations-map-card,
body[data-sutil-theme="dark"] .locations-mapbox,
body[data-sutil-theme="dark"] .location-detail,
body[data-sutil-theme="dark"] [class*="location-panel"],
body[data-sutil-theme="dark"] [class*="locations-panel"]{
  background:#273246 !important;
  border-color:#53627d !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] .locations-list-item,
body[data-sutil-theme="dark"] [class*="location-item"]{
  background:#2d394e !important;
  border-color:#4f607c !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] .locations-list-item strong,
body[data-sutil-theme="dark"] [class*="location-item"] strong{
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] .locations-list-item small,
body[data-sutil-theme="dark"] [class*="location-item"] small{
  color:#c3cddd !important;
}
body[data-sutil-theme="dark"] .locations-list-item.active,
body[data-sutil-theme="dark"] [class*="location-item"].active{
  background:linear-gradient(135deg,#4f5fc2,#6358b7) !important;
  border-color:#8391e2 !important;
}
body[data-sutil-theme="dark"] .locations-map-empty,
body[data-sutil-theme="dark"] .location-empty,
body[data-sutil-theme="dark"] [class*="location-empty"]{
  background:#253044 !important;
  color:#f4f7ff !important;
  border-color:#53627d !important;
}
body[data-sutil-theme="dark"] .locations-map-empty strong,
body[data-sutil-theme="dark"] .location-empty strong,
body[data-sutil-theme="dark"] [class*="location-empty"] strong{
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] .locations-map-empty small,
body[data-sutil-theme="dark"] .location-empty small,
body[data-sutil-theme="dark"] [class*="location-empty"] small{
  color:#c3cddd !important;
}

/* Si existe un contenedor genérico de mapa con fondo blanco */
body[data-sutil-theme="dark"] #locationsSection .card > div[style*="background:white"],
body[data-sutil-theme="dark"] #locationsSection [style*="background: white"],
body[data-sutil-theme="dark"] #locationsSection [style*="background:#fff"],
body[data-sutil-theme="dark"] #locationsSection [style*="background: #fff"]{
  background:#253044 !important;
  color:#f4f7ff !important;
}

/* ---------- REPORTES ---------- */
body[data-sutil-theme="dark"] #reportsSection,
body[data-sutil-theme="dark"] #reportsSection .card,
body[data-sutil-theme="dark"] #reportsSection [class*="report"],
body[data-sutil-theme="dark"] #reportsSection [class*="chart"]{
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #reportsSection h1,
body[data-sutil-theme="dark"] #reportsSection h2,
body[data-sutil-theme="dark"] #reportsSection h3,
body[data-sutil-theme="dark"] #reportsSection h4,
body[data-sutil-theme="dark"] #reportsSection strong{
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] #reportsSection .muted,
body[data-sutil-theme="dark"] #reportsSection small{
  color:#c3cddd !important;
}

/* Navegación / filtros de reportes */
body[data-sutil-theme="dark"] #reportsSection button,
body[data-sutil-theme="dark"] #reportsSection .report-nav-btn,
body[data-sutil-theme="dark"] #reportsSection .report-filter-btn{
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #reportsSection button.active,
body[data-sutil-theme="dark"] #reportsSection .active-report-nav{
  color:#ffffff !important;
  background:linear-gradient(135deg,#4f5fc2,#6358b7) !important;
}

/* KPIs */
body[data-sutil-theme="dark"] #reportsSection .dashboard-kpi,
body[data-sutil-theme="dark"] #reportsSection .report-metric,
body[data-sutil-theme="dark"] #reportsSection [class*="metric-card"]{
  background:linear-gradient(180deg,#2f3b50,#273246) !important;
  border-color:#53627d !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #reportsSection .dashboard-kpi-value,
body[data-sutil-theme="dark"] #reportsSection .report-metric-value{
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] #reportsSection .dashboard-kpi-label,
body[data-sutil-theme="dark"] #reportsSection .report-metric-subtext{
  color:#c3cddd !important;
}

/* Canvas/SVG gráficos: contenedor oscuro y textos claros cuando sean HTML */
body[data-sutil-theme="dark"] #reportsSection canvas{
  background:transparent !important;
}
body[data-sutil-theme="dark"] #reportsSection svg text{
  fill:#dce5f3 !important;
}
body[data-sutil-theme="dark"] #reportsSection svg line{
  stroke:#71809a !important;
}
body[data-sutil-theme="dark"] #reportsSection .chart-legend,
body[data-sutil-theme="dark"] #reportsSection [class*="legend"]{
  color:#dce5f3 !important;
}
body[data-sutil-theme="dark"] #reportsSection .chart-legend *,
body[data-sutil-theme="dark"] #reportsSection [class*="legend"] *{
  color:inherit !important;
}

/* Tabla de detalle mensual */
body[data-sutil-theme="dark"] #reportsSection table{
  background:#273246 !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #reportsSection thead th{
  background:#334158 !important;
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] #reportsSection tbody td{
  color:#e8eef8 !important;
  border-color:#4c5b74 !important;
}

/* ---------- MODO CLARO ---------- */
body[data-sutil-theme="light"] .sutil-chat-directory,
body[data-sutil-theme="light"] .locations-list,
body[data-sutil-theme="light"] .locations-map-card,
body[data-sutil-theme="light"] .location-detail{
  background:#ffffff !important;
  color:#20242a !important;
  border-color:#d5dee8 !important;
}
body[data-sutil-theme="light"] .sutil-chat-directory-item,
body[data-sutil-theme="light"] .locations-list-item{
  background:#ffffff !important;
  color:#20242a !important;
}
body[data-sutil-theme="light"] #reportsSection svg text{
  fill:#52606f !important;
}
</style>


<style>
/* ============================================================
   SUTIL v21 · Chat: cabecera/filtros sin bloque blanco en oscuro
   ============================================================ */

/* Columna izquierda completa */
body[data-sutil-theme="dark"] .sutil-chat-directory{
  background:#273246 !important;
  border-color:#53627d !important;
  color:#f4f7ff !important;
}

/* Encabezado "Conversaciones" y zona de filtros */
body[data-sutil-theme="dark"] .sutil-chat-directory-head,
body[data-sutil-theme="dark"] .sutil-chat-directory-tools,
body[data-sutil-theme="dark"] .sutil-chat-directory-filters,
body[data-sutil-theme="dark"] .sutil-chat-directory-search,
body[data-sutil-theme="dark"] .sutil-chat-directory > div:first-child{
  background:#2b374c !important;
  color:#f4f7ff !important;
  border-color:#53627d !important;
}

/* Si hay estilos inline blancos dentro del directorio, se fuerzan al tema oscuro */
body[data-sutil-theme="dark"] .sutil-chat-directory [style*="background:white"],
body[data-sutil-theme="dark"] .sutil-chat-directory [style*="background: white"],
body[data-sutil-theme="dark"] .sutil-chat-directory [style*="background:#fff"],
body[data-sutil-theme="dark"] .sutil-chat-directory [style*="background: #fff"],
body[data-sutil-theme="dark"] .sutil-chat-directory [style*="background:#ffffff"],
body[data-sutil-theme="dark"] .sutil-chat-directory [style*="background: #ffffff"]{
  background:#2b374c !important;
  color:#f4f7ff !important;
}

/* Títulos */
body[data-sutil-theme="dark"] .sutil-chat-directory h3,
body[data-sutil-theme="dark"] .sutil-chat-directory h4,
body[data-sutil-theme="dark"] .sutil-chat-directory strong{
  color:#ffffff !important;
}

/* Contador y textos secundarios */
body[data-sutil-theme="dark"] .sutil-chat-directory small,
body[data-sutil-theme="dark"] .sutil-chat-directory .muted{
  color:#c5d0e0 !important;
}

/* Filtros */
body[data-sutil-theme="dark"] .sutil-chat-directory input,
body[data-sutil-theme="dark"] .sutil-chat-directory select{
  background:#202b3d !important;
  color:#ffffff !important;
  border-color:#5a6b89 !important;
}
body[data-sutil-theme="dark"] .sutil-chat-directory input::placeholder{
  color:#aeb9cb !important;
  opacity:1 !important;
}
body[data-sutil-theme="dark"] .sutil-chat-directory select option{
  background:#202b3d !important;
  color:#ffffff !important;
}

/* Elementos de conversación */
body[data-sutil-theme="dark"] .sutil-chat-directory-item{
  background:#2c384d !important;
  border-color:#465773 !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] .sutil-chat-directory-item:hover{
  background:#344258 !important;
  border-color:#7183db !important;
}
body[data-sutil-theme="dark"] .sutil-chat-directory-item.active{
  background:linear-gradient(135deg,#4f5fc2,#6358b7) !important;
  border-color:#8391e2 !important;
}
body[data-sutil-theme="dark"] .sutil-chat-directory-item strong,
body[data-sutil-theme="dark"] .sutil-chat-directory-item.active strong{
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] .sutil-chat-directory-item small,
body[data-sutil-theme="dark"] .sutil-chat-directory-item.active small{
  color:#d4ddea !important;
}

/* Panel derecho vacío */
body[data-sutil-theme="dark"] .sutil-chat-center-empty{
  background:#253044 !important;
  color:#f4f7ff !important;
  border-color:#7183a5 !important;
}
body[data-sutil-theme="dark"] .sutil-chat-center-empty strong{
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] .sutil-chat-center-empty small,
body[data-sutil-theme="dark"] .sutil-chat-center-empty div{
  color:#d4dcea !important;
}

/* Modo claro: se conserva la cabecera clara */
body[data-sutil-theme="light"] .sutil-chat-directory-head,
body[data-sutil-theme="light"] .sutil-chat-directory-tools,
body[data-sutil-theme="light"] .sutil-chat-directory-filters,
body[data-sutil-theme="light"] .sutil-chat-directory-search,
body[data-sutil-theme="light"] .sutil-chat-directory > div:first-child{
  background:#ffffff !important;
  color:#20242a !important;
  border-color:#d5dee8 !important;
}
</style>


<style>
/* ============================================================
   SUTIL v23 · CONTRASTE COMPLETO DEL ASISTENTE SUTIL
   ============================================================ */

/* Contenedor general */
body[data-sutil-theme="dark"] .sutil-support-shell,
body[data-sutil-theme="dark"] .sutil-ai-chat,
body[data-sutil-theme="dark"] .sutil-ai-messages,
body[data-sutil-theme="dark"] .sutil-support-thread,
body[data-sutil-theme="dark"] [class*="sutil-ai"][class*="panel"],
body[data-sutil-theme="dark"] [class*="support"][class*="panel"]{
  background:#253044 !important;
  color:#F4F7FF !important;
  border-color:#53627D !important;
}

/* Encabezado */
body[data-sutil-theme="dark"] .sutil-ai-head,
body[data-sutil-theme="dark"] .sutil-support-head,
body[data-sutil-theme="dark"] [class*="ai-head"],
body[data-sutil-theme="dark"] [class*="support-head"]{
  background:#2B374C !important;
  color:#FFFFFF !important;
  border-color:#53627D !important;
}
body[data-sutil-theme="dark"] .sutil-ai-head strong,
body[data-sutil-theme="dark"] .sutil-support-head strong{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] .sutil-ai-head small,
body[data-sutil-theme="dark"] .sutil-support-head small{
  color:#C3CDDC !important;
}

/* Mensajes del asistente */
body[data-sutil-theme="dark"] .sutil-ai-msg,
body[data-sutil-theme="dark"] .sutil-ai-message,
body[data-sutil-theme="dark"] .sutil-support-message,
body[data-sutil-theme="dark"] [class*="ai-msg"],
body[data-sutil-theme="dark"] [class*="ai-message"]{
  background:#2D394E !important;
  color:#F4F7FF !important;
  border-color:#52617D !important;
}

/* Mensaje propio/consulta */
body[data-sutil-theme="dark"] .sutil-ai-msg.user,
body[data-sutil-theme="dark"] .sutil-ai-message.user,
body[data-sutil-theme="dark"] .sutil-support-message.user,
body[data-sutil-theme="dark"] [class*="ai-msg"].user,
body[data-sutil-theme="dark"] [class*="ai-message"].user{
  background:#334158 !important;
  color:#FFFFFF !important;
}

/* Nombres / autores */
body[data-sutil-theme="dark"] .sutil-ai-author,
body[data-sutil-theme="dark"] .sutil-support-author,
body[data-sutil-theme="dark"] [class*="author"]{
  color:#7BE7B2 !important;
  font-weight:800;
}

/* Metadatos: Base oficial, Consulta, fecha/hora */
body[data-sutil-theme="dark"] .sutil-ai-meta,
body[data-sutil-theme="dark"] .sutil-support-meta,
body[data-sutil-theme="dark"] [class*="ai-meta"],
body[data-sutil-theme="dark"] [class*="support-meta"],
body[data-sutil-theme="dark"] .sutil-ai-message small,
body[data-sutil-theme="dark"] .sutil-support-message small{
  color:#C3CDDC !important;
  opacity:1 !important;
}

/* Texto de respuesta */
body[data-sutil-theme="dark"] .sutil-ai-text,
body[data-sutil-theme="dark"] .sutil-support-text,
body[data-sutil-theme="dark"] [class*="ai-text"],
body[data-sutil-theme="dark"] [class*="support-text"]{
  color:#F4F7FF !important;
}

/* Estado "IA activa" */
body[data-sutil-theme="dark"] .sutil-ai-status,
body[data-sutil-theme="dark"] [class*="ai-status"],
body[data-sutil-theme="dark"] [class*="status-ai"]{
  color:#7BE7B2 !important;
}

/* Botones rápidos */
body[data-sutil-theme="dark"] .sutil-ai-quick button,
body[data-sutil-theme="dark"] .sutil-ai-actions button,
body[data-sutil-theme="dark"] .sutil-support-quick button,
body[data-sutil-theme="dark"] [class*="ai-quick"] button,
body[data-sutil-theme="dark"] [class*="support-quick"] button{
  background:#344158 !important;
  color:#FFFFFF !important;
  border-color:#60708D !important;
}
body[data-sutil-theme="dark"] .sutil-ai-quick button:hover,
body[data-sutil-theme="dark"] .sutil-ai-actions button:hover,
body[data-sutil-theme="dark"] .sutil-support-quick button:hover{
  background:#40506B !important;
  border-color:#7C8BE3 !important;
}

/* Campo de pregunta */
body[data-sutil-theme="dark"] .sutil-ai-compose,
body[data-sutil-theme="dark"] .sutil-support-compose{
  background:#273246 !important;
  border-color:#53627D !important;
}
body[data-sutil-theme="dark"] .sutil-ai-compose textarea,
body[data-sutil-theme="dark"] .sutil-ai-compose input,
body[data-sutil-theme="dark"] .sutil-support-compose textarea,
body[data-sutil-theme="dark"] .sutil-support-compose input,
body[data-sutil-theme="dark"] #sutilAiText{
  background:#202B3D !important;
  color:#FFFFFF !important;
  border-color:#5A6B89 !important;
}
body[data-sutil-theme="dark"] .sutil-ai-compose textarea::placeholder,
body[data-sutil-theme="dark"] .sutil-ai-compose input::placeholder,
body[data-sutil-theme="dark"] .sutil-support-compose textarea::placeholder,
body[data-sutil-theme="dark"] .sutil-support-compose input::placeholder,
body[data-sutil-theme="dark"] #sutilAiText::placeholder{
  color:#AEB9CB !important;
  opacity:1 !important;
}

/* Refuerzo: cualquier texto verde oscuro heredado dentro del asistente */
body[data-sutil-theme="dark"] #sutilSupportSection [style*="color:green"],
body[data-sutil-theme="dark"] #sutilSupportSection [style*="#148343"],
body[data-sutil-theme="dark"] #sutilSupportSection [style*="#238b57"],
body[data-sutil-theme="dark"] #sutilSupportSection [style*="#17633a"]{
  color:#7BE7B2 !important;
}

/* Refuerzo: cualquier gris demasiado claro sobre claro o demasiado oscuro sobre oscuro */
body[data-sutil-theme="dark"] #sutilSupportSection .muted,
body[data-sutil-theme="dark"] #sutilSupportSection small{
  color:#C3CDDC !important;
}
body[data-sutil-theme="dark"] #sutilSupportSection strong,
body[data-sutil-theme="dark"] #sutilSupportSection h3,
body[data-sutil-theme="dark"] #sutilSupportSection h4{
  color:#FFFFFF !important;
}

/* MODO CLARO */
body[data-sutil-theme="light"] .sutil-support-shell,
body[data-sutil-theme="light"] .sutil-ai-chat,
body[data-sutil-theme="light"] .sutil-ai-messages,
body[data-sutil-theme="light"] .sutil-support-thread{
  background:#FFFFFF !important;
  color:#20242A !important;
  border-color:#D5DEE8 !important;
}
body[data-sutil-theme="light"] .sutil-ai-msg,
body[data-sutil-theme="light"] .sutil-ai-message,
body[data-sutil-theme="light"] .sutil-support-message{
  background:#F7F9FC !important;
  color:#20242A !important;
  border-color:#D7E0EA !important;
}
body[data-sutil-theme="light"] .sutil-ai-author,
body[data-sutil-theme="light"] .sutil-support-author{
  color:#17633A !important;
}
body[data-sutil-theme="light"] .sutil-ai-meta,
body[data-sutil-theme="light"] .sutil-support-meta,
body[data-sutil-theme="light"] #sutilSupportSection .muted,
body[data-sutil-theme="light"] #sutilSupportSection small{
  color:#657180 !important;
}
body[data-sutil-theme="light"] #sutilSupportSection strong,
body[data-sutil-theme="light"] #sutilSupportSection h3,
body[data-sutil-theme="light"] #sutilSupportSection h4{
  color:#203A52 !important;
}
</style>


<style>
/* ============================================================
   SUTIL v24 · CONTRASTE TOTAL ASISTENTE + SOPORTE HUMANO
   ============================================================ */

/* ---------- ASISTENTE SUTIL ---------- */
body[data-sutil-theme="dark"] #sutilSupportSection,
body[data-sutil-theme="dark"] #sutilSupportSection .card,
body[data-sutil-theme="dark"] #sutilSupportSection [class*="ai-"],
body[data-sutil-theme="dark"] #sutilSupportSection [class*="support-"]{
  color:#F4F7FF !important;
}

body[data-sutil-theme="dark"] #sutilSupportSection h1,
body[data-sutil-theme="dark"] #sutilSupportSection h2,
body[data-sutil-theme="dark"] #sutilSupportSection h3,
body[data-sutil-theme="dark"] #sutilSupportSection h4,
body[data-sutil-theme="dark"] #sutilSupportSection strong{
  color:#FFFFFF !important;
}

body[data-sutil-theme="dark"] #sutilSupportSection .muted,
body[data-sutil-theme="dark"] #sutilSupportSection small,
body[data-sutil-theme="dark"] #sutilSupportSection [class*="meta"],
body[data-sutil-theme="dark"] #sutilSupportSection [class*="date"],
body[data-sutil-theme="dark"] #sutilSupportSection [class*="time"]{
  color:#C3CDDC !important;
  opacity:1 !important;
}

body[data-sutil-theme="dark"] #sutilSupportSection [class*="author"],
body[data-sutil-theme="dark"] #sutilSupportSection [class*="assistant-name"]{
  color:#7BE7B2 !important;
  font-weight:800 !important;
}

/* Mensajes asistente y usuario */
body[data-sutil-theme="dark"] #sutilSupportSection [class*="message"],
body[data-sutil-theme="dark"] #sutilSupportSection [class*="bubble"],
body[data-sutil-theme="dark"] #sutilSupportSection [class*="msg"]{
  background:#2D394E !important;
  color:#F4F7FF !important;
  border-color:#52617D !important;
}
body[data-sutil-theme="dark"] #sutilSupportSection [class*="message"] *,
body[data-sutil-theme="dark"] #sutilSupportSection [class*="bubble"] *,
body[data-sutil-theme="dark"] #sutilSupportSection [class*="msg"] *{
  color:inherit;
}
body[data-sutil-theme="dark"] #sutilSupportSection [class*="message"] small,
body[data-sutil-theme="dark"] #sutilSupportSection [class*="bubble"] small,
body[data-sutil-theme="dark"] #sutilSupportSection [class*="msg"] small{
  color:#C3CDDC !important;
}

/* Botones rápidos */
body[data-sutil-theme="dark"] #sutilSupportSection button{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] #sutilSupportSection [class*="quick"] button,
body[data-sutil-theme="dark"] #sutilSupportSection [class*="action"] button{
  background:#344158 !important;
  border-color:#60708D !important;
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] #sutilSupportSection [class*="quick"] button:hover,
body[data-sutil-theme="dark"] #sutilSupportSection [class*="action"] button:hover{
  background:#40506B !important;
  border-color:#7C8BE3 !important;
}

/* ---------- SOPORTE HUMANO ---------- */
body[data-sutil-theme="dark"] .sutil-support-human,
body[data-sutil-theme="dark"] .sutil-human-support,
body[data-sutil-theme="dark"] .sutil-support-thread,
body[data-sutil-theme="dark"] .sutil-support-messages,
body[data-sutil-theme="dark"] [class*="human-support"],
body[data-sutil-theme="dark"] [class*="support-human"]{
  background:#253044 !important;
  color:#F4F7FF !important;
  border-color:#53627D !important;
}

/* Cabecera soporte humano */
body[data-sutil-theme="dark"] .sutil-support-human-head,
body[data-sutil-theme="dark"] .sutil-human-support-head,
body[data-sutil-theme="dark"] [class*="support-human-head"],
body[data-sutil-theme="dark"] [class*="human-support-head"]{
  background:#273246 !important;
  color:#FFFFFF !important;
  border-color:#53627D !important;
}
body[data-sutil-theme="dark"] .sutil-support-human-head strong,
body[data-sutil-theme="dark"] .sutil-human-support-head strong,
body[data-sutil-theme="dark"] [class*="support-human-head"] strong,
body[data-sutil-theme="dark"] [class*="human-support-head"] strong{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] .sutil-support-human-head small,
body[data-sutil-theme="dark"] .sutil-human-support-head small,
body[data-sutil-theme="dark"] [class*="support-human-head"] small,
body[data-sutil-theme="dark"] [class*="human-support-head"] small{
  color:#C3CDDC !important;
}

/* Mensajes de soporte humano */
body[data-sutil-theme="dark"] .sutil-support-msg,
body[data-sutil-theme="dark"] .sutil-support-message,
body[data-sutil-theme="dark"] [class*="support-msg"],
body[data-sutil-theme="dark"] [class*="support-message"]{
  background:#2D394E !important;
  color:#F4F7FF !important;
  border-color:#52617D !important;
}
body[data-sutil-theme="dark"] .sutil-support-msg.mine,
body[data-sutil-theme="dark"] .sutil-support-message.mine,
body[data-sutil-theme="dark"] [class*="support-msg"].mine,
body[data-sutil-theme="dark"] [class*="support-message"].mine{
  background:linear-gradient(135deg,#4F5FC2,#6358B7) !important;
  color:#FFFFFF !important;
  border-color:#7C8BE3 !important;
}

body[data-sutil-theme="dark"] .sutil-support-msg strong,
body[data-sutil-theme="dark"] .sutil-support-message strong,
body[data-sutil-theme="dark"] [class*="support-msg"] strong,
body[data-sutil-theme="dark"] [class*="support-message"] strong{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] .sutil-support-msg small,
body[data-sutil-theme="dark"] .sutil-support-message small,
body[data-sutil-theme="dark"] [class*="support-msg"] small,
body[data-sutil-theme="dark"] [class*="support-message"] small{
  color:#C3CDDC !important;
  opacity:1 !important;
}

/* Si existen fondos inline blancos dentro de soporte, forzar oscuro */
body[data-sutil-theme="dark"] #sutilSupportSection [style*="background:white"],
body[data-sutil-theme="dark"] #sutilSupportSection [style*="background: white"],
body[data-sutil-theme="dark"] #sutilSupportSection [style*="background:#fff"],
body[data-sutil-theme="dark"] #sutilSupportSection [style*="background: #fff"],
body[data-sutil-theme="dark"] #sutilSupportSection [style*="background:#ffffff"],
body[data-sutil-theme="dark"] #sutilSupportSection [style*="background: #ffffff"]{
  background:#2D394E !important;
  color:#F4F7FF !important;
}

/* Campo de envío soporte humano */
body[data-sutil-theme="dark"] #sutilSupportSection textarea,
body[data-sutil-theme="dark"] #sutilSupportSection input,
body[data-sutil-theme="dark"] #sutilSupportSection select{
  background:#202B3D !important;
  color:#FFFFFF !important;
  border-color:#5A6B89 !important;
}
body[data-sutil-theme="dark"] #sutilSupportSection textarea::placeholder,
body[data-sutil-theme="dark"] #sutilSupportSection input::placeholder{
  color:#AEB9CB !important;
  opacity:1 !important;
}
body[data-sutil-theme="dark"] #sutilSupportSection select option{
  background:#202B3D !important;
  color:#FFFFFF !important;
}

/* ---------- MODO CLARO ---------- */
body[data-sutil-theme="light"] #sutilSupportSection,
body[data-sutil-theme="light"] #sutilSupportSection .card{
  color:#20242A !important;
}
body[data-sutil-theme="light"] #sutilSupportSection h1,
body[data-sutil-theme="light"] #sutilSupportSection h2,
body[data-sutil-theme="light"] #sutilSupportSection h3,
body[data-sutil-theme="light"] #sutilSupportSection h4,
body[data-sutil-theme="light"] #sutilSupportSection strong{
  color:#203A52 !important;
}
body[data-sutil-theme="light"] #sutilSupportSection .muted,
body[data-sutil-theme="light"] #sutilSupportSection small,
body[data-sutil-theme="light"] #sutilSupportSection [class*="meta"]{
  color:#657180 !important;
}
body[data-sutil-theme="light"] .sutil-support-msg,
body[data-sutil-theme="light"] .sutil-support-message,
body[data-sutil-theme="light"] [class*="support-msg"],
body[data-sutil-theme="light"] [class*="support-message"]{
  background:#F7F9FC !important;
  color:#20242A !important;
  border-color:#D7E0EA !important;
}
body[data-sutil-theme="light"] .sutil-support-msg small,
body[data-sutil-theme="light"] .sutil-support-message small,
body[data-sutil-theme="light"] [class*="support-msg"] small,
body[data-sutil-theme="light"] [class*="support-message"] small{
  color:#657180 !important;
}
</style>


<style>
/* ============================================================
   SUTIL v25 · CONTRASTE DE FAQ / BASE DE CONOCIMIENTO
   ============================================================ */

/* MODO OSCURO */
body[data-sutil-theme="dark"] .sutil-support-faq,
body[data-sutil-theme="dark"] .sutil-support-faq .card,
body[data-sutil-theme="dark"] [class*="faq"]{
  background:#253044 !important;
  color:#F4F7FF !important;
  border-color:#53627D !important;
}

body[data-sutil-theme="dark"] .sutil-support-faq h2,
body[data-sutil-theme="dark"] .sutil-support-faq h3,
body[data-sutil-theme="dark"] .sutil-support-faq h4,
body[data-sutil-theme="dark"] .sutil-support-faq strong,
body[data-sutil-theme="dark"] [class*="faq"] h2,
body[data-sutil-theme="dark"] [class*="faq"] h3,
body[data-sutil-theme="dark"] [class*="faq"] h4{
  color:#FFFFFF !important;
}

/* Texto descriptivo, contador y metadatos */
body[data-sutil-theme="dark"] .sutil-support-faq .muted,
body[data-sutil-theme="dark"] .sutil-support-faq small,
body[data-sutil-theme="dark"] .sutil-support-faq [class*="count"],
body[data-sutil-theme="dark"] .sutil-support-faq [class*="meta"],
body[data-sutil-theme="dark"] [class*="faq"] .muted,
body[data-sutil-theme="dark"] [class*="faq"] small{
  color:#C3CDDC !important;
  opacity:1 !important;
}

/* Buscador */
body[data-sutil-theme="dark"] .sutil-support-faq input,
body[data-sutil-theme="dark"] .sutil-support-faq select,
body[data-sutil-theme="dark"] [class*="faq"] input,
body[data-sutil-theme="dark"] [class*="faq"] select{
  background:#202B3D !important;
  color:#FFFFFF !important;
  border-color:#5A6B89 !important;
}
body[data-sutil-theme="dark"] .sutil-support-faq input::placeholder,
body[data-sutil-theme="dark"] [class*="faq"] input::placeholder{
  color:#AEB9CB !important;
  opacity:1 !important;
}

/* Categorías */
body[data-sutil-theme="dark"] .sutil-support-faq [class*="category"],
body[data-sutil-theme="dark"] [class*="faq-category"]{
  color:#FFD989 !important;
  font-weight:900 !important;
}

/* Cada pregunta */
body[data-sutil-theme="dark"] .sutil-support-faq details,
body[data-sutil-theme="dark"] .sutil-support-faq [class*="item"],
body[data-sutil-theme="dark"] .sutil-support-faq [class*="row"],
body[data-sutil-theme="dark"] [class*="faq-item"]{
  background:#2D394E !important;
  color:#F4F7FF !important;
  border-color:#52617D !important;
}

body[data-sutil-theme="dark"] .sutil-support-faq summary,
body[data-sutil-theme="dark"] .sutil-support-faq [class*="question"],
body[data-sutil-theme="dark"] [class*="faq-question"]{
  color:#FFFFFF !important;
  font-weight:800 !important;
}

/* Respuestas */
body[data-sutil-theme="dark"] .sutil-support-faq [class*="answer"],
body[data-sutil-theme="dark"] .sutil-support-faq details > div,
body[data-sutil-theme="dark"] [class*="faq-answer"]{
  color:#DCE5F3 !important;
}

/* Forzar cualquier fondo blanco inline dentro del FAQ */
body[data-sutil-theme="dark"] .sutil-support-faq [style*="background:white"],
body[data-sutil-theme="dark"] .sutil-support-faq [style*="background: white"],
body[data-sutil-theme="dark"] .sutil-support-faq [style*="background:#fff"],
body[data-sutil-theme="dark"] .sutil-support-faq [style*="background: #fff"],
body[data-sutil-theme="dark"] .sutil-support-faq [style*="background:#ffffff"],
body[data-sutil-theme="dark"] .sutil-support-faq [style*="background: #ffffff"]{
  background:#2D394E !important;
  color:#F4F7FF !important;
}

/* MODO CLARO */
body[data-sutil-theme="light"] .sutil-support-faq,
body[data-sutil-theme="light"] .sutil-support-faq .card,
body[data-sutil-theme="light"] [class*="faq"]{
  background:#FFFFFF !important;
  color:#20242A !important;
  border-color:#D5DEE8 !important;
}

body[data-sutil-theme="light"] .sutil-support-faq h2,
body[data-sutil-theme="light"] .sutil-support-faq h3,
body[data-sutil-theme="light"] .sutil-support-faq h4,
body[data-sutil-theme="light"] .sutil-support-faq strong{
  color:#203A52 !important;
}

body[data-sutil-theme="light"] .sutil-support-faq .muted,
body[data-sutil-theme="light"] .sutil-support-faq small,
body[data-sutil-theme="light"] .sutil-support-faq [class*="count"],
body[data-sutil-theme="light"] .sutil-support-faq [class*="meta"]{
  color:#657180 !important;
}

body[data-sutil-theme="light"] .sutil-support-faq input,
body[data-sutil-theme="light"] .sutil-support-faq select{
  background:#FFFFFF !important;
  color:#20242A !important;
  border-color:#CBD5E1 !important;
}

body[data-sutil-theme="light"] .sutil-support-faq details,
body[data-sutil-theme="light"] .sutil-support-faq [class*="item"],
body[data-sutil-theme="light"] .sutil-support-faq [class*="row"]{
  background:#F7F9FC !important;
  color:#20242A !important;
  border-color:#D7E0EA !important;
}

body[data-sutil-theme="light"] .sutil-support-faq summary,
body[data-sutil-theme="light"] .sutil-support-faq [class*="question"]{
  color:#26384A !important;
}

body[data-sutil-theme="light"] .sutil-support-faq [class*="answer"],
body[data-sutil-theme="light"] .sutil-support-faq details > div{
  color:#4E5A67 !important;
}
</style>


<style>
/* ============================================================
   SUTIL v26 · RESUMEN Y LANZADORES DE SOPORTE EN TEMA OSCURO
   ============================================================ */

/* Resumen superior */
body[data-sutil-theme="dark"] .sutil-support-summary{
  color:#F4F7FF !important;
}
body[data-sutil-theme="dark"] .sutil-support-mini{
  background:linear-gradient(180deg,#2F3B50,#273246) !important;
  border-color:#53627D !important;
  color:#F4F7FF !important;
  box-shadow:0 10px 22px rgba(5,10,24,.22) !important;
}
body[data-sutil-theme="dark"] .sutil-support-mini small{
  color:#C3CDDC !important;
  opacity:1 !important;
}
body[data-sutil-theme="dark"] .sutil-support-mini strong{
  color:#FFFFFF !important;
}

/* Lanzadores grandes */
body[data-sutil-theme="dark"] .sutil-support-launch-btn{
  background:linear-gradient(180deg,#2F3B50,#273246) !important;
  border-color:#53627D !important;
  color:#F4F7FF !important;
  box-shadow:0 12px 26px rgba(5,10,24,.25) !important;
}
body[data-sutil-theme="dark"] .sutil-support-launch-btn strong{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] .sutil-support-launch-btn small{
  color:#C3CDDC !important;
}
body[data-sutil-theme="dark"] .sutil-support-launch-btn:hover{
  transform:translateY(-3px);
  background:linear-gradient(180deg,#37455D,#2E3A50) !important;
  border-color:#7C8BE3 !important;
  box-shadow:0 18px 34px rgba(5,10,24,.34) !important;
}

/* Card superior de Soporte */
body[data-sutil-theme="dark"] #sutilSupportSection > .card{
  background:linear-gradient(180deg,#2B364A,#253044) !important;
  border-color:#53627D !important;
  color:#F4F7FF !important;
}
body[data-sutil-theme="dark"] #sutilSupportSection > .card h2{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] #sutilSupportSection > .card .muted{
  color:#C3CDDC !important;
}

/* Planes y tarjetas internas */
body[data-sutil-theme="dark"] .sutil-support-card{
  background:linear-gradient(180deg,#2B364A,#253044) !important;
  border-color:#53627D !important;
  color:#F4F7FF !important;
}
body[data-sutil-theme="dark"] .sutil-support-card h3,
body[data-sutil-theme="dark"] .sutil-support-card h4,
body[data-sutil-theme="dark"] .sutil-support-card strong{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] .sutil-support-card .muted,
body[data-sutil-theme="dark"] .sutil-support-card small{
  color:#C3CDDC !important;
}

/* Modo claro */
body[data-sutil-theme="light"] .sutil-support-mini{
  background:#F9FBFC !important;
  border-color:#E4E9ED !important;
  color:#20242A !important;
}
body[data-sutil-theme="light"] .sutil-support-mini small{
  color:#68737D !important;
}
body[data-sutil-theme="light"] .sutil-support-mini strong{
  color:#203A52 !important;
}
body[data-sutil-theme="light"] .sutil-support-launch-btn{
  background:#FFFFFF !important;
  border-color:#DFE5EA !important;
  color:#20242A !important;
}
body[data-sutil-theme="light"] .sutil-support-launch-btn strong{
  color:#203A52 !important;
}
body[data-sutil-theme="light"] .sutil-support-launch-btn small{
  color:#68737D !important;
}
</style>


<style>
/* ============================================================
   SUTIL v27 · MEMBRESÍA / SOLICITUDES / COMPROBANTES EN TEMA
   ============================================================ */

/* ---------- DATOS PIX / MEDIO DE PAGO ---------- */
body[data-sutil-theme="dark"] .sutil-plan-payment,
body[data-sutil-theme="dark"] .sutil-plan-payment-box,
body[data-sutil-theme="dark"] .sutil-payment-method-box,
body[data-sutil-theme="dark"] .sutil-plan-method,
body[data-sutil-theme="dark"] [class*="payment-method"],
body[data-sutil-theme="dark"] [class*="pix-box"],
body[data-sutil-theme="dark"] [class*="payment-box"]{
  background:linear-gradient(180deg,#2F3B50,#273246) !important;
  color:#F4F7FF !important;
  border-color:#53627D !important;
  box-shadow:0 10px 24px rgba(5,10,24,.24) !important;
}

body[data-sutil-theme="dark"] .sutil-plan-payment strong,
body[data-sutil-theme="dark"] .sutil-plan-payment-box strong,
body[data-sutil-theme="dark"] .sutil-payment-method-box strong,
body[data-sutil-theme="dark"] [class*="payment-method"] strong,
body[data-sutil-theme="dark"] [class*="pix-box"] strong{
  color:#FFFFFF !important;
}

body[data-sutil-theme="dark"] .sutil-plan-payment small,
body[data-sutil-theme="dark"] .sutil-plan-payment-box small,
body[data-sutil-theme="dark"] .sutil-payment-method-box small,
body[data-sutil-theme="dark"] [class*="payment-method"] small,
body[data-sutil-theme="dark"] [class*="pix-box"] small,
body[data-sutil-theme="dark"] [class*="payment-box"] .muted{
  color:#C3CDDC !important;
}

/* Refuerzo para textos inline claros/oscuros heredados */
body[data-sutil-theme="dark"] #sutilSupportSection [style*="color:#687"],
body[data-sutil-theme="dark"] #sutilSupportSection [style*="color: #687"],
body[data-sutil-theme="dark"] #sutilSupportSection [style*="color:#5f"],
body[data-sutil-theme="dark"] #sutilSupportSection [style*="color: #5f"]{
  color:#C3CDDC !important;
}

/* ---------- PLANES ---------- */
body[data-sutil-theme="dark"] .sutil-plan-choice{
  background:linear-gradient(180deg,#2F3B50,#273246) !important;
  border-color:#53627D !important;
  color:#F4F7FF !important;
}
body[data-sutil-theme="dark"] .sutil-plan-choice h3,
body[data-sutil-theme="dark"] .sutil-plan-choice strong{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] .sutil-plan-choice small,
body[data-sutil-theme="dark"] .sutil-plan-choice .muted{
  color:#C3CDDC !important;
}
body[data-sutil-theme="dark"] .sutil-plan-choice.selected,
body[data-sutil-theme="dark"] .sutil-plan-choice.active{
  background:linear-gradient(135deg,#4F5FC2,#6358B7) !important;
  border-color:#8391E2 !important;
  color:#FFFFFF !important;
}

/* ---------- MIS SOLICITUDES ---------- */
body[data-sutil-theme="dark"] .sutil-support-requests-list,
body[data-sutil-theme="dark"] .sutil-support-request-form{
  background:#253044 !important;
  color:#F4F7FF !important;
  border-color:#53627D !important;
}

body[data-sutil-theme="dark"] .sutil-support-request,
body[data-sutil-theme="dark"] .sutil-support-request-card,
body[data-sutil-theme="dark"] [class*="request-card"],
body[data-sutil-theme="dark"] [class*="support-request-item"]{
  background:linear-gradient(180deg,#2F3B50,#273246) !important;
  border-color:#53627D !important;
  color:#F4F7FF !important;
  box-shadow:0 8px 20px rgba(5,10,24,.20) !important;
}

body[data-sutil-theme="dark"] .sutil-support-request strong,
body[data-sutil-theme="dark"] .sutil-support-request-card strong,
body[data-sutil-theme="dark"] [class*="request-card"] strong{
  color:#FFFFFF !important;
}

body[data-sutil-theme="dark"] .sutil-support-request small,
body[data-sutil-theme="dark"] .sutil-support-request-card small,
body[data-sutil-theme="dark"] [class*="request-card"] small,
body[data-sutil-theme="dark"] [class*="request-card"] .muted{
  color:#C3CDDC !important;
}

/* Estados */
body[data-sutil-theme="dark"] .sutil-support-request .approved,
body[data-sutil-theme="dark"] .sutil-support-request-card .approved,
body[data-sutil-theme="dark"] [class*="request-card"] .approved{
  color:#7BE7B2 !important;
}
body[data-sutil-theme="dark"] .sutil-support-request .rejected,
body[data-sutil-theme="dark"] .sutil-support-request-card .rejected,
body[data-sutil-theme="dark"] [class*="request-card"] .rejected{
  color:#FF9AA5 !important;
}
body[data-sutil-theme="dark"] .sutil-support-request .pending,
body[data-sutil-theme="dark"] .sutil-support-request-card .pending,
body[data-sutil-theme="dark"] [class*="request-card"] .pending{
  color:#FFD989 !important;
}

/* Links comprobantes */
body[data-sutil-theme="dark"] .sutil-support-requests-list a,
body[data-sutil-theme="dark"] .sutil-support-request a,
body[data-sutil-theme="dark"] .sutil-support-request-card a{
  color:#7CE6ED !important;
  text-decoration:underline;
}

/* File input de comprobante */
body[data-sutil-theme="dark"] .sutil-support-requests-list input[type="file"],
body[data-sutil-theme="dark"] .sutil-support-request input[type="file"],
body[data-sutil-theme="dark"] .sutil-support-request-card input[type="file"]{
  background:#202B3D !important;
  color:#FFFFFF !important;
  border-color:#5A6B89 !important;
}
body[data-sutil-theme="dark"] .sutil-support-requests-list input[type="file"]::file-selector-button,
body[data-sutil-theme="dark"] .sutil-support-request input[type="file"]::file-selector-button,
body[data-sutil-theme="dark"] .sutil-support-request-card input[type="file"]::file-selector-button{
  background:linear-gradient(135deg,#5968D8,#7960D8) !important;
  color:#FFFFFF !important;
  border:0 !important;
}

/* ---------- MODO CLARO ---------- */
body[data-sutil-theme="light"] .sutil-plan-payment,
body[data-sutil-theme="light"] .sutil-plan-payment-box,
body[data-sutil-theme="light"] .sutil-payment-method-box,
body[data-sutil-theme="light"] [class*="payment-method"],
body[data-sutil-theme="light"] [class*="pix-box"],
body[data-sutil-theme="light"] [class*="payment-box"]{
  background:#FFFFFF !important;
  color:#20242A !important;
  border-color:#DFE5EA !important;
}

body[data-sutil-theme="light"] .sutil-support-request,
body[data-sutil-theme="light"] .sutil-support-request-card,
body[data-sutil-theme="light"] [class*="request-card"],
body[data-sutil-theme="light"] [class*="support-request-item"]{
  background:#FFFFFF !important;
  color:#20242A !important;
  border-color:#DFE5EA !important;
}

body[data-sutil-theme="light"] .sutil-support-request small,
body[data-sutil-theme="light"] .sutil-support-request-card small,
body[data-sutil-theme="light"] [class*="request-card"] small{
  color:#657180 !important;
}
</style>


<style>
/* ============================================================
   SUTIL v28 · CORRECCIÓN EXACTA: .sutil-request-item / .sutil-method-card
   ============================================================ */

/* ---------- MIS SOLICITUDES: clases reales ---------- */
body[data-sutil-theme="dark"] .sutil-support-requests-list{
  background:#253044 !important;
  color:#F4F7FF !important;
}

body[data-sutil-theme="dark"] .sutil-request-item{
  background:linear-gradient(180deg,#2F3B50,#273246) !important;
  border:1px solid #53627D !important;
  color:#F4F7FF !important;
  box-shadow:0 9px 22px rgba(5,10,24,.22) !important;
}

body[data-sutil-theme="dark"] .sutil-request-item .sutil-request-top,
body[data-sutil-theme="dark"] .sutil-request-item div{
  color:#F4F7FF !important;
}

body[data-sutil-theme="dark"] .sutil-request-item strong{
  color:#FFFFFF !important;
}

body[data-sutil-theme="dark"] .sutil-request-item .muted,
body[data-sutil-theme="dark"] .sutil-request-item small{
  color:#C3CDDC !important;
  opacity:1 !important;
}

/* Estados */
body[data-sutil-theme="dark"] .sutil-request-status{
  background:#3A465B !important;
  color:#EAF0F8 !important;
}
body[data-sutil-theme="dark"] .sutil-request-status.approved{
  background:rgba(51,185,121,.18) !important;
  color:#7BE7B2 !important;
}
body[data-sutil-theme="dark"] .sutil-request-status.submitted,
body[data-sutil-theme="dark"] .sutil-request-status.open,
body[data-sutil-theme="dark"] .sutil-request-status.awaiting_payment{
  background:rgba(228,184,91,.18) !important;
  color:#FFD989 !important;
}
body[data-sutil-theme="dark"] .sutil-request-status.rejected,
body[data-sutil-theme="dark"] .sutil-request-status.cancelled{
  background:rgba(228,103,114,.18) !important;
  color:#FF9AA5 !important;
}

/* Enlace de comprobante */
body[data-sutil-theme="dark"] .sutil-request-item a{
  color:#7CE6ED !important;
  font-weight:700;
}

/* File input */
body[data-sutil-theme="dark"] .sutil-request-item input[type="file"]{
  background:#202B3D !important;
  color:#FFFFFF !important;
  border:1px solid #5A6B89 !important;
  border-radius:9px;
  padding:5px;
}
body[data-sutil-theme="dark"] .sutil-request-item input[type="file"]::file-selector-button{
  background:linear-gradient(135deg,#5968D8,#7960D8) !important;
  color:#FFFFFF !important;
  border:0 !important;
  border-radius:7px;
  padding:7px 10px;
}

/* ---------- MÉTODOS PIX: clase real ---------- */
body[data-sutil-theme="dark"] .sutil-method-card{
  background:linear-gradient(180deg,#2F3B50,#273246) !important;
  border:1px solid #53627D !important;
  color:#F4F7FF !important;
  box-shadow:0 9px 22px rgba(5,10,24,.20) !important;
}

body[data-sutil-theme="dark"] .sutil-method-card strong{
  color:#FFFFFF !important;
}

body[data-sutil-theme="dark"] .sutil-method-data{
  color:#C3CDDC !important;
}

body[data-sutil-theme="dark"] .sutil-method-card .muted,
body[data-sutil-theme="dark"] .sutil-method-card small{
  color:#C3CDDC !important;
}

/* ---------- MODO CLARO ---------- */
body[data-sutil-theme="light"] .sutil-request-item{
  background:#FFFFFF !important;
  border-color:#E0E6EA !important;
  color:#20242A !important;
}
body[data-sutil-theme="light"] .sutil-request-item strong{
  color:#203A52 !important;
}
body[data-sutil-theme="light"] .sutil-request-item .muted,
body[data-sutil-theme="light"] .sutil-request-item small{
  color:#657180 !important;
}

body[data-sutil-theme="light"] .sutil-method-card{
  background:#FBFCFD !important;
  border-color:#E0E6EA !important;
  color:#20242A !important;
}
body[data-sutil-theme="light"] .sutil-method-data{
  color:#5F6B75 !important;
}
</style>


<style>
/* ============================================================
   SUTIL v29 · CÁLCULO / CRÉDITO DE PLAN ADAPTADO AL TEMA
   ============================================================ */

/* Contenedor general del cálculo */
body[data-sutil-theme="dark"] .sutil-plan-credit,
body[data-sutil-theme="dark"] .sutil-plan-quote,
body[data-sutil-theme="dark"] .sutil-plan-summary,
body[data-sutil-theme="dark"] [class*="plan-credit"],
body[data-sutil-theme="dark"] [class*="plan-summary"],
body[data-sutil-theme="dark"] [class*="plan-quote"]{
  background:linear-gradient(180deg,#2B364A,#253044) !important;
  border-color:#53627D !important;
  color:#F4F7FF !important;
  box-shadow:0 10px 24px rgba(5,10,24,.22) !important;
}

/* Tarjetas internas */
body[data-sutil-theme="dark"] .sutil-plan-credit > div,
body[data-sutil-theme="dark"] .sutil-plan-quote-item,
body[data-sutil-theme="dark"] [class*="plan-credit"] > div,
body[data-sutil-theme="dark"] [class*="plan-summary"] > div{
  background:linear-gradient(180deg,#334158,#2C394E) !important;
  border-color:#60708D !important;
  color:#F4F7FF !important;
}

/* Títulos y valores */
body[data-sutil-theme="dark"] .sutil-plan-credit strong,
body[data-sutil-theme="dark"] .sutil-plan-quote strong,
body[data-sutil-theme="dark"] .sutil-plan-summary strong,
body[data-sutil-theme="dark"] [class*="plan-credit"] strong,
body[data-sutil-theme="dark"] [class*="plan-summary"] strong{
  color:#FFFFFF !important;
}

body[data-sutil-theme="dark"] .sutil-plan-credit .muted,
body[data-sutil-theme="dark"] .sutil-plan-credit small,
body[data-sutil-theme="dark"] .sutil-plan-quote .muted,
body[data-sutil-theme="dark"] .sutil-plan-quote small,
body[data-sutil-theme="dark"] [class*="plan-credit"] .muted,
body[data-sutil-theme="dark"] [class*="plan-credit"] small{
  color:#C3CDDC !important;
}

/* Crédito destacado */
body[data-sutil-theme="dark"] .sutil-plan-credit [class*="credit"],
body[data-sutil-theme="dark"] .sutil-plan-summary [class*="credit"],
body[data-sutil-theme="dark"] [class*="credit-applied"]{
  color:#7BE7B2 !important;
}

/* Texto explicativo inferior */
body[data-sutil-theme="dark"] .sutil-plan-credit-note,
body[data-sutil-theme="dark"] [class*="credit-note"],
body[data-sutil-theme="dark"] [class*="plan-note"]{
  color:#D6DEEA !important;
}

/* Elimina cualquier fondo blanco inline dentro de este resumen */
body[data-sutil-theme="dark"] .sutil-plan-credit [style*="background:white"],
body[data-sutil-theme="dark"] .sutil-plan-credit [style*="background: white"],
body[data-sutil-theme="dark"] .sutil-plan-credit [style*="background:#fff"],
body[data-sutil-theme="dark"] .sutil-plan-credit [style*="background: #fff"],
body[data-sutil-theme="dark"] .sutil-plan-credit [style*="background:#ffffff"],
body[data-sutil-theme="dark"] .sutil-plan-credit [style*="background: #ffffff"]{
  background:#334158 !important;
  color:#F4F7FF !important;
}

/* MODO CLARO */
body[data-sutil-theme="light"] .sutil-plan-credit,
body[data-sutil-theme="light"] .sutil-plan-quote,
body[data-sutil-theme="light"] .sutil-plan-summary,
body[data-sutil-theme="light"] [class*="plan-credit"],
body[data-sutil-theme="light"] [class*="plan-summary"],
body[data-sutil-theme="light"] [class*="plan-quote"]{
  background:#FFFFFF !important;
  border-color:#DFE5EA !important;
  color:#20242A !important;
}

body[data-sutil-theme="light"] .sutil-plan-credit > div,
body[data-sutil-theme="light"] .sutil-plan-quote-item,
body[data-sutil-theme="light"] [class*="plan-credit"] > div,
body[data-sutil-theme="light"] [class*="plan-summary"] > div{
  background:#F7F9FC !important;
  border-color:#D7E0EA !important;
  color:#20242A !important;
}
</style>


<style>
/* ============================================================
   SUTIL v30 · Indicador "IA activa" visible y coherente
   ============================================================ */

/* Modo oscuro */
body[data-sutil-theme="dark"] .sutil-ai-status{
  background:linear-gradient(135deg,#1F7A63,#2AA9B8) !important;
  color:#FFFFFF !important;
  border:1px solid rgba(124,230,237,.45) !important;
  box-shadow:0 6px 16px rgba(20,120,130,.28) !important;
  text-shadow:0 1px 1px rgba(0,0,0,.25) !important;
}
body[data-sutil-theme="dark"] .sutil-ai-status.off{
  background:rgba(228,184,91,.18) !important;
  color:#FFD989 !important;
  border:1px solid rgba(255,217,137,.38) !important;
  box-shadow:none !important;
}

/* Modo claro */
body[data-sutil-theme="light"] .sutil-ai-status{
  background:#E8F7EE !important;
  color:#137A42 !important;
  border:1px solid #B9DFC8 !important;
  box-shadow:none !important;
}
body[data-sutil-theme="light"] .sutil-ai-status.off{
  background:#FFF4D9 !important;
  color:#8A5C00 !important;
  border:1px solid #E8D29A !important;
}
</style>


<style>
/* ============================================================
   SUTIL v31 · MENÚ LATERAL ADAPTADO A CLARO / OSCURO
   ============================================================ */

/* MODO OSCURO */
body[data-sutil-theme="dark"] .side-menu,
body[data-sutil-theme="dark"] .sidebar,
body[data-sutil-theme="dark"] .drawer,
body[data-sutil-theme="dark"] .company-menu,
body[data-sutil-theme="dark"] [class*="side-menu"],
body[data-sutil-theme="dark"] [class*="sidebar"],
body[data-sutil-theme="dark"] [class*="drawer"],
body[data-sutil-theme="dark"] [class*="company-menu"]{
  background:linear-gradient(180deg,#263247,#202A3B) !important;
  color:#F4F7FF !important;
  border-color:#53627D !important;
  box-shadow:18px 0 42px rgba(5,10,24,.38) !important;
}

/* Títulos */
body[data-sutil-theme="dark"] .side-menu h1,
body[data-sutil-theme="dark"] .side-menu h2,
body[data-sutil-theme="dark"] .side-menu h3,
body[data-sutil-theme="dark"] .sidebar h1,
body[data-sutil-theme="dark"] .sidebar h2,
body[data-sutil-theme="dark"] .sidebar h3,
body[data-sutil-theme="dark"] .drawer h1,
body[data-sutil-theme="dark"] .drawer h2,
body[data-sutil-theme="dark"] .drawer h3,
body[data-sutil-theme="dark"] .company-menu h1,
body[data-sutil-theme="dark"] .company-menu h2,
body[data-sutil-theme="dark"] .company-menu h3{
  color:#FFFFFF !important;
}

/* Datos empresa / subtítulos */
body[data-sutil-theme="dark"] .side-menu .muted,
body[data-sutil-theme="dark"] .side-menu small,
body[data-sutil-theme="dark"] .sidebar .muted,
body[data-sutil-theme="dark"] .sidebar small,
body[data-sutil-theme="dark"] .drawer .muted,
body[data-sutil-theme="dark"] .drawer small,
body[data-sutil-theme="dark"] .company-menu .muted,
body[data-sutil-theme="dark"] .company-menu small{
  color:#C3CDDC !important;
}

/* Opciones */
body[data-sutil-theme="dark"] .side-menu a,
body[data-sutil-theme="dark"] .side-menu button,
body[data-sutil-theme="dark"] .sidebar a,
body[data-sutil-theme="dark"] .sidebar button,
body[data-sutil-theme="dark"] .drawer a,
body[data-sutil-theme="dark"] .drawer button,
body[data-sutil-theme="dark"] .company-menu a,
body[data-sutil-theme="dark"] .company-menu button{
  color:#F4F7FF !important;
}

body[data-sutil-theme="dark"] .side-menu a:hover,
body[data-sutil-theme="dark"] .side-menu button:hover,
body[data-sutil-theme="dark"] .sidebar a:hover,
body[data-sutil-theme="dark"] .sidebar button:hover,
body[data-sutil-theme="dark"] .drawer a:hover,
body[data-sutil-theme="dark"] .drawer button:hover,
body[data-sutil-theme="dark"] .company-menu a:hover,
body[data-sutil-theme="dark"] .company-menu button:hover{
  background:#344158 !important;
  color:#FFFFFF !important;
}

/* Botón cerrar */
body[data-sutil-theme="dark"] .side-menu .close,
body[data-sutil-theme="dark"] .sidebar .close,
body[data-sutil-theme="dark"] .drawer .close,
body[data-sutil-theme="dark"] .company-menu .close,
body[data-sutil-theme="dark"] [class*="menu-close"],
body[data-sutil-theme="dark"] [class*="drawer-close"]{
  background:#344158 !important;
  color:#FFFFFF !important;
  border-color:#60708D !important;
}

/* Iconos */
body[data-sutil-theme="dark"] .side-menu svg,
body[data-sutil-theme="dark"] .sidebar svg,
body[data-sutil-theme="dark"] .drawer svg,
body[data-sutil-theme="dark"] .company-menu svg{
  color:#D9E3F0 !important;
  fill:currentColor;
}

/* Aviso inferior */
body[data-sutil-theme="dark"] .side-menu-footer,
body[data-sutil-theme="dark"] .sidebar-footer,
body[data-sutil-theme="dark"] .drawer-footer,
body[data-sutil-theme="dark"] [class*="menu-footer"]{
  color:#AEB9CB !important;
  border-color:#43516A !important;
}

/* Forzar cualquier blanco inline dentro del menú */
body[data-sutil-theme="dark"] [class*="side-menu"] [style*="background:white"],
body[data-sutil-theme="dark"] [class*="side-menu"] [style*="background: white"],
body[data-sutil-theme="dark"] [class*="sidebar"] [style*="background:white"],
body[data-sutil-theme="dark"] [class*="sidebar"] [style*="background: white"],
body[data-sutil-theme="dark"] [class*="drawer"] [style*="background:white"],
body[data-sutil-theme="dark"] [class*="drawer"] [style*="background: white"]{
  background:#263247 !important;
  color:#F4F7FF !important;
}

/* MODO CLARO */
body[data-sutil-theme="light"] .side-menu,
body[data-sutil-theme="light"] .sidebar,
body[data-sutil-theme="light"] .drawer,
body[data-sutil-theme="light"] .company-menu,
body[data-sutil-theme="light"] [class*="side-menu"],
body[data-sutil-theme="light"] [class*="sidebar"],
body[data-sutil-theme="light"] [class*="drawer"],
body[data-sutil-theme="light"] [class*="company-menu"]{
  background:#FFFFFF !important;
  color:#20242A !important;
  border-color:#D7E0EA !important;
  box-shadow:18px 0 42px rgba(30,41,59,.12) !important;
}
body[data-sutil-theme="light"] .side-menu h1,
body[data-sutil-theme="light"] .side-menu h2,
body[data-sutil-theme="light"] .side-menu h3,
body[data-sutil-theme="light"] .sidebar h1,
body[data-sutil-theme="light"] .sidebar h2,
body[data-sutil-theme="light"] .sidebar h3{
  color:#203A52 !important;
}
body[data-sutil-theme="light"] .side-menu .muted,
body[data-sutil-theme="light"] .side-menu small,
body[data-sutil-theme="light"] .sidebar .muted,
body[data-sutil-theme="light"] .sidebar small{
  color:#657180 !important;
}
</style>


<style>
/* ============================================================
   SUTIL v32 · MENÚ LATERAL EXACTO (.sutil-owner-menu-*)
   ============================================================ */

/* Drawer completo */
body[data-sutil-theme="dark"] .sutil-owner-menu-drawer{
  background:linear-gradient(180deg,#263247,#202A3B) !important;
  color:#F4F7FF !important;
  border-right:1px solid #53627D !important;
  box-shadow:18px 0 42px rgba(5,10,24,.38) !important;
}

/* Encabezado */
body[data-sutil-theme="dark"] .sutil-owner-menu-head{
  background:#263247 !important;
  border-color:#43516A !important;
}
body[data-sutil-theme="dark"] .sutil-owner-menu-head strong{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] .sutil-owner-menu-close{
  background:#344158 !important;
  color:#FFFFFF !important;
  border:1px solid #60708D !important;
}

/* Empresa y llave */
body[data-sutil-theme="dark"] .sutil-owner-menu-company{
  background:#2B374C !important;
  color:#DCE5F3 !important;
  border-color:#43516A !important;
}
body[data-sutil-theme="dark"] .sutil-owner-menu-company strong{
  color:#FFFFFF !important;
}

/* Tarjetas internas */
body[data-sutil-theme="dark"] .sutil-owner-menu-items{
  background:transparent !important;
}
body[data-sutil-theme="dark"] .sutil-owner-menu-item{
  background:linear-gradient(180deg,#2F3B50,#273246) !important;
  color:#F4F7FF !important;
  border:1px solid #53627D !important;
  box-shadow:0 8px 18px rgba(5,10,24,.18) !important;
}
body[data-sutil-theme="dark"] .sutil-owner-menu-item:hover{
  background:linear-gradient(180deg,#39475F,#303C51) !important;
  border-color:#7C8BE3 !important;
  transform:translateY(-2px);
}
body[data-sutil-theme="dark"] .sutil-owner-menu-text{
  color:#F4F7FF !important;
}
body[data-sutil-theme="dark"] .sutil-owner-menu-text > *:first-child,
body[data-sutil-theme="dark"] .sutil-owner-menu-item strong{
  color:#FFFFFF !important;
}
body[data-sutil-theme="dark"] .sutil-owner-menu-text small{
  color:#C3CDDC !important;
  opacity:1 !important;
}

/* Iconos */
body[data-sutil-theme="dark"] .sutil-owner-menu-icon{
  background:linear-gradient(135deg,#3A4B66,#35405E) !important;
  color:#FFFFFF !important;
  border:1px solid #5B6B87 !important;
}

/* Pie */
body[data-sutil-theme="dark"] .sutil-owner-menu-foot{
  color:#AEB9CB !important;
  border-color:#43516A !important;
  background:#202A3B !important;
}

/* MODO CLARO */
body[data-sutil-theme="light"] .sutil-owner-menu-drawer{
  background:#FFFFFF !important;
  color:#20242A !important;
}
body[data-sutil-theme="light"] .sutil-owner-menu-head{
  background:#FFFFFF !important;
  border-color:#E6EBEF !important;
}
body[data-sutil-theme="light"] .sutil-owner-menu-head strong{
  color:#173A59 !important;
}
body[data-sutil-theme="light"] .sutil-owner-menu-company{
  background:#F8FAFB !important;
  color:#66737E !important;
}
body[data-sutil-theme="light"] .sutil-owner-menu-item{
  background:#FFFFFF !important;
  color:#20242A !important;
  border-color:#DFE6EC !important;
}
body[data-sutil-theme="light"] .sutil-owner-menu-text small{
  color:#75818B !important;
}
body[data-sutil-theme="light"] .sutil-owner-menu-icon{
  background:#EEF4F7 !important;
  color:#314455 !important;
}
</style>


<style>
/* ============================================================
   SUTIL v33 · SELECTOR DE TEMA FIJO SIEMPRE VISIBLE
   Empresario / ADM / Cobrador
   ============================================================ */
.sutil-theme-floating{
  position:fixed;
  top:14px;
  right:14px;
  z-index:99990;
  display:flex;
  gap:5px;
  padding:5px;
  border-radius:14px;
  background:rgba(30,39,55,.94);
  border:1px solid rgba(124,139,180,.48);
  box-shadow:0 10px 28px rgba(0,0,0,.28);
  backdrop-filter:blur(10px);
}
.sutil-theme-floating button{
  border:0 !important;
  min-width:auto !important;
  padding:8px 10px !important;
  border-radius:10px !important;
  background:transparent !important;
  color:#cbd5e1 !important;
  box-shadow:none !important;
  font-size:12px !important;
  font-weight:850 !important;
  cursor:pointer;
}
.sutil-theme-floating button.active{
  background:linear-gradient(135deg,#5968d8,#7960d8) !important;
  color:#fff !important;
  box-shadow:0 6px 14px rgba(64,72,160,.30) !important;
}
body[data-sutil-theme="light"] .sutil-theme-floating{
  background:rgba(255,255,255,.96);
  border-color:#d5dee8;
  box-shadow:0 10px 24px rgba(30,41,59,.14);
}
body[data-sutil-theme="light"] .sutil-theme-floating button{
  color:#52606f !important;
}
body[data-sutil-theme="light"] .sutil-theme-floating button.active{
  color:#fff !important;
}
@media(max-width:650px){
  .sutil-theme-floating{
    top:auto;
    bottom:82px;
    right:12px;
  }
}

/* FIX 12.15.163 · selector Claro/Oscuro sin superponer tarjetas de acceso */
.sutil-access-top-controls{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:12px;
  margin-bottom:10px;
  flex-wrap:wrap;
}
.sutil-profile-theme-mount,
.sutil-login-theme-mount{display:none;align-items:center;justify-content:center;min-height:0}
@media(max-width:650px){
  #profileChooser .sutil-access-top-controls{
    justify-content:center;
    flex-direction:column;
    gap:10px;
    margin-bottom:14px;
  }
  #profileChooser .sutil-profile-theme-mount,
  #login .sutil-login-theme-mount{display:flex;width:100%}
  #profileChooser .sutil-profile-theme-mount .sutil-theme-floating,
  #login .sutil-login-theme-mount .sutil-theme-floating{
    position:static !important;
    top:auto !important;
    right:auto !important;
    bottom:auto !important;
    left:auto !important;
    margin:0 auto !important;
    width:max-content;
    max-width:100%;
    z-index:auto;
    box-shadow:0 8px 20px rgba(0,0,0,.20);
  }
  #profileChooser .sutil-profile-theme-mount .sutil-theme-floating button,
  #login .sutil-login-theme-mount .sutil-theme-floating button{
    padding:9px 14px !important;
    font-size:12px !important;
  }
  #login .sutil-login-theme-mount{
    margin:2px 0 16px;
  }
}
</style>

<!-- v34 corregida: chat por actividad reciente sin alterar estructura JS -->

<style>
/* ============================================================
   SUTIL v34 · FIX REAL Editar cliente
   El modal real es #editClientModal (no #clientEditModal).
   ============================================================ */

/* Superficie principal */
body[data-sutil-theme="light"] #editClientModal .client-edit-card{
  background:#ffffff !important;
  color:#1f2937 !important;
  border:1px solid #d5dee8 !important;
}

/* Encabezado */
body[data-sutil-theme="light"] #editClientModal .client-edit-head h1,
body[data-sutil-theme="light"] #editClientModal .client-edit-head h2,
body[data-sutil-theme="light"] #editClientModal .client-edit-head h3,
body[data-sutil-theme="light"] #editClientModal .client-edit-head h4{
  color:#172b3d !important;
  -webkit-text-fill-color:#172b3d !important;
  opacity:1 !important;
}

body[data-sutil-theme="light"] #editClientModal .client-edit-head small,
body[data-sutil-theme="light"] #editClientModal .client-edit-head .muted{
  color:#5f6b78 !important;
  -webkit-text-fill-color:#5f6b78 !important;
  opacity:1 !important;
}

/* Todos los labels del formulario */
body[data-sutil-theme="light"] #editClientModal label,
body[data-sutil-theme="light"] #editClientModal .form-grid label,
body[data-sutil-theme="light"] #editClientModal .field-label{
  color:#26384a !important;
  -webkit-text-fill-color:#26384a !important;
  opacity:1 !important;
}

/* Texto secundario */
body[data-sutil-theme="light"] #editClientModal .muted,
body[data-sutil-theme="light"] #editClientModal small{
  color:#5f6b78 !important;
  -webkit-text-fill-color:#5f6b78 !important;
  opacity:1 !important;
}

/* Inputs/selects/textarea */
body[data-sutil-theme="light"] #editClientModal input:not([type="checkbox"]):not([type="file"]),
body[data-sutil-theme="light"] #editClientModal select,
body[data-sutil-theme="light"] #editClientModal textarea{
  background:#ffffff !important;
  color:#1f2937 !important;
  -webkit-text-fill-color:#1f2937 !important;
  border-color:#aebdcd !important;
  opacity:1 !important;
}

body[data-sutil-theme="light"] #editClientModal input:disabled,
body[data-sutil-theme="light"] #editClientModal input[readonly]{
  background:#edf2f7 !important;
  color:#526170 !important;
  -webkit-text-fill-color:#526170 !important;
  opacity:1 !important;
}

/* Placeholder visible */
body[data-sutil-theme="light"] #editClientModal input::placeholder,
body[data-sutil-theme="light"] #editClientModal textarea::placeholder{
  color:#7b8897 !important;
  -webkit-text-fill-color:#7b8897 !important;
  opacity:1 !important;
}

/* Bloque de foto: se mantiene oscuro, con texto claro */
body[data-sutil-theme="light"] #editClientModal .photo-picker{
  background:#263348 !important;
  color:#f4f7ff !important;
  border-color:#52617d !important;
}
body[data-sutil-theme="light"] #editClientModal .photo-picker label{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
body[data-sutil-theme="light"] #editClientModal .photo-picker .muted,
body[data-sutil-theme="light"] #editClientModal .photo-picker small{
  color:#d6dfeb !important;
  -webkit-text-fill-color:#d6dfeb !important;
}

/* Bloque "El cliente tiene empresa" */
body[data-sutil-theme="light"] #editClientModal .card{
  background:#f8fafc !important;
  color:#1f2937 !important;
  border-color:#dfe5eb !important;
}
body[data-sutil-theme="light"] #editClientModal .card label,
body[data-sutil-theme="light"] #editClientModal .card h4{
  color:#26384a !important;
  -webkit-text-fill-color:#26384a !important;
}

/* Mensaje de resultado */
body[data-sutil-theme="light"] #editClientModal #editClientMsg{
  background:#f8fafc !important;
  color:#26384a !important;
  border:1px solid #d8e1ea !important;
}

/* Mantener modo oscuro consistente */
body[data-sutil-theme="dark"] #editClientModal .client-edit-card{
  background:#293345 !important;
  color:#f4f7ff !important;
  border:1px solid #53627d !important;
}
body[data-sutil-theme="dark"] #editClientModal label,
body[data-sutil-theme="dark"] #editClientModal h3,
body[data-sutil-theme="dark"] #editClientModal h4{
  color:#f4f7ff !important;
  -webkit-text-fill-color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #editClientModal .muted,
body[data-sutil-theme="dark"] #editClientModal small{
  color:#c3cddd !important;
  -webkit-text-fill-color:#c3cddd !important;
}
</style>

<!-- v34: contraste exacto del modal #editClientModal -->

<style>
/* ============================================================
   SUTIL v35 · contraste Editar ruta
   Corrección visual únicamente. No modifica lógica ni datos.
   ============================================================ */

/* Modal / tarjeta principal de edición de ruta */
body[data-sutil-theme="light"] #routeEditModal .route-edit-card,
body[data-sutil-theme="light"] #editRouteModal .route-edit-card,
body[data-sutil-theme="light"] #routeEditModal .modal-card,
body[data-sutil-theme="light"] #editRouteModal .modal-card,
body[data-sutil-theme="light"] .route-edit-backdrop .route-edit-card,
body[data-sutil-theme="light"] .route-edit-backdrop .modal-card,
body[data-sutil-theme="light"] .route-modal .modal-card{
  background:#ffffff !important;
  color:#1f2937 !important;
  border:1px solid #d5dee8 !important;
}

/* Títulos */
body[data-sutil-theme="light"] #routeEditModal h1,
body[data-sutil-theme="light"] #routeEditModal h2,
body[data-sutil-theme="light"] #routeEditModal h3,
body[data-sutil-theme="light"] #routeEditModal h4,
body[data-sutil-theme="light"] #editRouteModal h1,
body[data-sutil-theme="light"] #editRouteModal h2,
body[data-sutil-theme="light"] #editRouteModal h3,
body[data-sutil-theme="light"] #editRouteModal h4,
body[data-sutil-theme="light"] .route-edit-backdrop h1,
body[data-sutil-theme="light"] .route-edit-backdrop h2,
body[data-sutil-theme="light"] .route-edit-backdrop h3,
body[data-sutil-theme="light"] .route-edit-backdrop h4,
body[data-sutil-theme="light"] .route-modal h1,
body[data-sutil-theme="light"] .route-modal h2,
body[data-sutil-theme="light"] .route-modal h3,
body[data-sutil-theme="light"] .route-modal h4{
  color:#172b3d !important;
  -webkit-text-fill-color:#172b3d !important;
  opacity:1 !important;
}

/* Labels */
body[data-sutil-theme="light"] #routeEditModal label,
body[data-sutil-theme="light"] #editRouteModal label,
body[data-sutil-theme="light"] .route-edit-backdrop label,
body[data-sutil-theme="light"] .route-modal label{
  color:#26384a !important;
  -webkit-text-fill-color:#26384a !important;
  opacity:1 !important;
}

/* Ayudas / textos secundarios */
body[data-sutil-theme="light"] #routeEditModal .muted,
body[data-sutil-theme="light"] #routeEditModal small,
body[data-sutil-theme="light"] #editRouteModal .muted,
body[data-sutil-theme="light"] #editRouteModal small,
body[data-sutil-theme="light"] .route-edit-backdrop .muted,
body[data-sutil-theme="light"] .route-edit-backdrop small,
body[data-sutil-theme="light"] .route-modal .muted,
body[data-sutil-theme="light"] .route-modal small{
  color:#5f6b78 !important;
  -webkit-text-fill-color:#5f6b78 !important;
  opacity:1 !important;
}

/* Campos */
body[data-sutil-theme="light"] #routeEditModal input:not([type="checkbox"]),
body[data-sutil-theme="light"] #routeEditModal select,
body[data-sutil-theme="light"] #routeEditModal textarea,
body[data-sutil-theme="light"] #editRouteModal input:not([type="checkbox"]),
body[data-sutil-theme="light"] #editRouteModal select,
body[data-sutil-theme="light"] #editRouteModal textarea,
body[data-sutil-theme="light"] .route-edit-backdrop input:not([type="checkbox"]),
body[data-sutil-theme="light"] .route-edit-backdrop select,
body[data-sutil-theme="light"] .route-edit-backdrop textarea,
body[data-sutil-theme="light"] .route-modal input:not([type="checkbox"]),
body[data-sutil-theme="light"] .route-modal select,
body[data-sutil-theme="light"] .route-modal textarea{
  background:#ffffff !important;
  color:#1f2937 !important;
  -webkit-text-fill-color:#1f2937 !important;
  border-color:#aebdcd !important;
  opacity:1 !important;
}

/* Placeholders */
body[data-sutil-theme="light"] #routeEditModal input::placeholder,
body[data-sutil-theme="light"] #routeEditModal textarea::placeholder,
body[data-sutil-theme="light"] #editRouteModal input::placeholder,
body[data-sutil-theme="light"] #editRouteModal textarea::placeholder,
body[data-sutil-theme="light"] .route-edit-backdrop input::placeholder,
body[data-sutil-theme="light"] .route-edit-backdrop textarea::placeholder{
  color:#7b8897 !important;
  -webkit-text-fill-color:#7b8897 !important;
  opacity:1 !important;
}

/* Bloques oscuros internos: mantener texto blanco */
body[data-sutil-theme="light"] #routeEditModal .card[style*="background"],
body[data-sutil-theme="light"] #editRouteModal .card[style*="background"],
body[data-sutil-theme="light"] .route-edit-backdrop .card[style*="background"]{
  color:#ffffff !important;
}
body[data-sutil-theme="light"] #routeEditModal .card[style*="background"] *,
body[data-sutil-theme="light"] #editRouteModal .card[style*="background"] *,
body[data-sutil-theme="light"] .route-edit-backdrop .card[style*="background"] *{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

/* Modo oscuro preservado */
body[data-sutil-theme="dark"] #routeEditModal .route-edit-card,
body[data-sutil-theme="dark"] #editRouteModal .route-edit-card,
body[data-sutil-theme="dark"] .route-edit-backdrop .route-edit-card,
body[data-sutil-theme="dark"] .route-modal .modal-card{
  background:#293345 !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #routeEditModal label,
body[data-sutil-theme="dark"] #editRouteModal label,
body[data-sutil-theme="dark"] .route-edit-backdrop label,
body[data-sutil-theme="dark"] .route-modal label{
  color:#f4f7ff !important;
  -webkit-text-fill-color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #routeEditModal .muted,
body[data-sutil-theme="dark"] #routeEditModal small,
body[data-sutil-theme="dark"] #editRouteModal .muted,
body[data-sutil-theme="dark"] #editRouteModal small,
body[data-sutil-theme="dark"] .route-edit-backdrop .muted,
body[data-sutil-theme="dark"] .route-edit-backdrop small{
  color:#c3cddd !important;
  -webkit-text-fill-color:#c3cddd !important;
}
</style>

<!-- v35: contraste del modal Editar ruta -->

<style>
/* ============================================================
   SUTIL v36 · CONTRASTE GLOBAL DE MODALES / CUADROS EMERGENTES
   Corrige modo claro sin alterar lógica ni datos.
   ============================================================ */

/* Superficie general de modales */
body[data-sutil-theme="light"] .modal,
body[data-sutil-theme="light"] .modal-card,
body[data-sutil-theme="light"] .dialog,
body[data-sutil-theme="light"] .dialog-card,
body[data-sutil-theme="light"] .sheet,
body[data-sutil-theme="light"] .sheet-card,
body[data-sutil-theme="light"] [role="dialog"]{
  color:#1f2937 !important;
}

/* Tarjetas principales blancas */
body[data-sutil-theme="light"] .modal-card,
body[data-sutil-theme="light"] .dialog-card,
body[data-sutil-theme="light"] .sheet-card,
body[data-sutil-theme="light"] [role="dialog"] > .card{
  background:#ffffff !important;
  border-color:#d5dee8 !important;
}

/* Títulos */
body[data-sutil-theme="light"] .modal h1,
body[data-sutil-theme="light"] .modal h2,
body[data-sutil-theme="light"] .modal h3,
body[data-sutil-theme="light"] .modal h4,
body[data-sutil-theme="light"] .dialog h1,
body[data-sutil-theme="light"] .dialog h2,
body[data-sutil-theme="light"] .dialog h3,
body[data-sutil-theme="light"] .dialog h4,
body[data-sutil-theme="light"] [role="dialog"] h1,
body[data-sutil-theme="light"] [role="dialog"] h2,
body[data-sutil-theme="light"] [role="dialog"] h3,
body[data-sutil-theme="light"] [role="dialog"] h4{
  color:#172b3d !important;
  -webkit-text-fill-color:#172b3d !important;
  opacity:1 !important;
}

/* Etiquetas */
body[data-sutil-theme="light"] .modal label,
body[data-sutil-theme="light"] .dialog label,
body[data-sutil-theme="light"] .sheet label,
body[data-sutil-theme="light"] [role="dialog"] label,
body[data-sutil-theme="light"] .modal .field-label,
body[data-sutil-theme="light"] [role="dialog"] .field-label{
  color:#26384a !important;
  -webkit-text-fill-color:#26384a !important;
  opacity:1 !important;
}

/* Textos de ayuda y secundarios */
body[data-sutil-theme="light"] .modal .muted,
body[data-sutil-theme="light"] .modal small,
body[data-sutil-theme="light"] .dialog .muted,
body[data-sutil-theme="light"] .dialog small,
body[data-sutil-theme="light"] .sheet .muted,
body[data-sutil-theme="light"] .sheet small,
body[data-sutil-theme="light"] [role="dialog"] .muted,
body[data-sutil-theme="light"] [role="dialog"] small{
  color:#5f6b78 !important;
  -webkit-text-fill-color:#5f6b78 !important;
  opacity:1 !important;
}

/* Inputs, selects y textareas */
body[data-sutil-theme="light"] .modal input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body[data-sutil-theme="light"] .modal select,
body[data-sutil-theme="light"] .modal textarea,
body[data-sutil-theme="light"] .dialog input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body[data-sutil-theme="light"] .dialog select,
body[data-sutil-theme="light"] .dialog textarea,
body[data-sutil-theme="light"] [role="dialog"] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
body[data-sutil-theme="light"] [role="dialog"] select,
body[data-sutil-theme="light"] [role="dialog"] textarea{
  background:#ffffff !important;
  color:#1f2937 !important;
  -webkit-text-fill-color:#1f2937 !important;
  border-color:#aebdcd !important;
  opacity:1 !important;
}

/* Readonly / disabled */
body[data-sutil-theme="light"] .modal input[readonly],
body[data-sutil-theme="light"] .modal input:disabled,
body[data-sutil-theme="light"] .dialog input[readonly],
body[data-sutil-theme="light"] .dialog input:disabled,
body[data-sutil-theme="light"] [role="dialog"] input[readonly],
body[data-sutil-theme="light"] [role="dialog"] input:disabled{
  background:#edf2f7 !important;
  color:#526170 !important;
  -webkit-text-fill-color:#526170 !important;
}

/* Placeholders */
body[data-sutil-theme="light"] .modal input::placeholder,
body[data-sutil-theme="light"] .modal textarea::placeholder,
body[data-sutil-theme="light"] .dialog input::placeholder,
body[data-sutil-theme="light"] .dialog textarea::placeholder,
body[data-sutil-theme="light"] [role="dialog"] input::placeholder,
body[data-sutil-theme="light"] [role="dialog"] textarea::placeholder{
  color:#7b8897 !important;
  -webkit-text-fill-color:#7b8897 !important;
  opacity:1 !important;
}

/* File input */
body[data-sutil-theme="light"] .modal input[type="file"],
body[data-sutil-theme="light"] .dialog input[type="file"],
body[data-sutil-theme="light"] [role="dialog"] input[type="file"]{
  color:#26384a !important;
}

/* Botones de cerrar */
body[data-sutil-theme="light"] .modal .close,
body[data-sutil-theme="light"] .modal .modal-close,
body[data-sutil-theme="light"] .dialog .close,
body[data-sutil-theme="light"] [role="dialog"] .close{
  color:#34495e !important;
  border-color:#aebdcd !important;
}

/* EXCEPCIÓN: bloques internos oscuros deben conservar texto claro */
body[data-sutil-theme="light"] .modal .dark-card,
body[data-sutil-theme="light"] .modal .panel-dark,
body[data-sutil-theme="light"] .dialog .dark-card,
body[data-sutil-theme="light"] [role="dialog"] .dark-card,
body[data-sutil-theme="light"] .modal [style*="background:#1"],
body[data-sutil-theme="light"] .modal [style*="background: #1"],
body[data-sutil-theme="light"] .modal [style*="background:#2"],
body[data-sutil-theme="light"] .modal [style*="background: #2"],
body[data-sutil-theme="light"] .dialog [style*="background:#1"],
body[data-sutil-theme="light"] .dialog [style*="background:#2"]{
  color:#f4f7ff !important;
}

body[data-sutil-theme="light"] .modal .dark-card *,
body[data-sutil-theme="light"] .modal .panel-dark *,
body[data-sutil-theme="light"] .dialog .dark-card *,
body[data-sutil-theme="light"] [role="dialog"] .dark-card *,
body[data-sutil-theme="light"] .modal [style*="background:#1"] *,
body[data-sutil-theme="light"] .modal [style*="background: #1"] *,
body[data-sutil-theme="light"] .modal [style*="background:#2"] *,
body[data-sutil-theme="light"] .modal [style*="background: #2"] *,
body[data-sutil-theme="light"] .dialog [style*="background:#1"] *,
body[data-sutil-theme="light"] .dialog [style*="background:#2"] *{
  color:#f4f7ff !important;
  -webkit-text-fill-color:#f4f7ff !important;
  opacity:1 !important;
}

/* Inputs dentro de bloques oscuros */
body[data-sutil-theme="light"] .modal .dark-card input,
body[data-sutil-theme="light"] .modal .dark-card select,
body[data-sutil-theme="light"] .modal .dark-card textarea,
body[data-sutil-theme="light"] .modal .panel-dark input,
body[data-sutil-theme="light"] .modal .panel-dark select,
body[data-sutil-theme="light"] .modal .panel-dark textarea{
  background:#263348 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:#52617d !important;
}

/* Modo oscuro: mantener coherencia general */
body[data-sutil-theme="dark"] .modal-card,
body[data-sutil-theme="dark"] .dialog-card,
body[data-sutil-theme="dark"] .sheet-card,
body[data-sutil-theme="dark"] [role="dialog"] > .card{
  background:#293345 !important;
  color:#f4f7ff !important;
  border-color:#53627d !important;
}
body[data-sutil-theme="dark"] .modal label,
body[data-sutil-theme="dark"] .dialog label,
body[data-sutil-theme="dark"] [role="dialog"] label{
  color:#f4f7ff !important;
  -webkit-text-fill-color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] .modal .muted,
body[data-sutil-theme="dark"] .modal small,
body[data-sutil-theme="dark"] .dialog .muted,
body[data-sutil-theme="dark"] .dialog small,
body[data-sutil-theme="dark"] [role="dialog"] .muted,
body[data-sutil-theme="dark"] [role="dialog"] small{
  color:#c3cddd !important;
  -webkit-text-fill-color:#c3cddd !important;
}
</style>

<!-- v36: contraste global para modales/cuadros emergentes -->

<style>
/* ============================================================
   SUTIL v37 · FIX REAL Editar ruta
   Estructura real:
   #routeEditModal.staff-edit-backdrop > .staff-edit-card
   ============================================================ */

/* Fondo principal del modal */
body[data-sutil-theme="light"] #routeEditModal .staff-edit-card{
  background:#ffffff !important;
  color:#1f2937 !important;
  border:1px solid #d5dee8 !important;
}

/* Encabezado */
body[data-sutil-theme="light"] #routeEditModal .staff-edit-head,
body[data-sutil-theme="light"] #routeEditModal .staff-edit-head > div{
  color:#1f2937 !important;
}

body[data-sutil-theme="light"] #routeEditModal .staff-edit-head h3{
  color:#172b3d !important;
  -webkit-text-fill-color:#172b3d !important;
  opacity:1 !important;
}

body[data-sutil-theme="light"] #routeEditModal #routeEditSubtitle{
  color:#5f6b78 !important;
  -webkit-text-fill-color:#5f6b78 !important;
  opacity:1 !important;
}

/* Labels superiores que estaban desapareciendo */
body[data-sutil-theme="light"] #routeEditModal > .staff-edit-card > .form-grid label{
  color:#26384a !important;
  -webkit-text-fill-color:#26384a !important;
  opacity:1 !important;
  font-weight:700 !important;
}

/* Ayuda de cuenta de cobro */
body[data-sutil-theme="light"] #routeEditModal > .staff-edit-card > .form-grid label small,
body[data-sutil-theme="light"] #routeEditModal > .staff-edit-card > .form-grid .muted{
  color:#657486 !important;
  -webkit-text-fill-color:#657486 !important;
  opacity:1 !important;
  font-weight:500 !important;
}

/* Campos superiores: conservar caja oscura pero con texto visible */
body[data-sutil-theme="light"] #routeEditModal > .staff-edit-card > .form-grid input,
body[data-sutil-theme="light"] #routeEditModal > .staff-edit-card > .form-grid select,
body[data-sutil-theme="light"] #routeEditModal > .staff-edit-card > .form-grid textarea{
  background:#4b4f55 !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:#69717c !important;
  opacity:1 !important;
}

/* Placeholder visible dentro de los campos oscuros */
body[data-sutil-theme="light"] #routeEditModal > .staff-edit-card > .form-grid input::placeholder,
body[data-sutil-theme="light"] #routeEditModal > .staff-edit-card > .form-grid textarea::placeholder{
  color:#d2d8df !important;
  -webkit-text-fill-color:#d2d8df !important;
  opacity:1 !important;
}

/* Tarjeta de punto de arranque: mantener oscura y legible */
body[data-sutil-theme="light"] #routeEditModal #editRouteOperationalCard,
body[data-sutil-theme="light"] #routeEditModal #editRouteGeneralCashCard{
  background:#4a545d !important;
  color:#ffffff !important;
  border-color:#687682 !important;
}

body[data-sutil-theme="light"] #routeEditModal #editRouteOperationalCard strong,
body[data-sutil-theme="light"] #routeEditModal #editRouteGeneralCashCard strong{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}

body[data-sutil-theme="light"] #routeEditModal #editRouteOperationalCard .muted,
body[data-sutil-theme="light"] #routeEditModal #editRouteGeneralCashCard .muted{
  color:#edf2f7 !important;
  -webkit-text-fill-color:#edf2f7 !important;
  opacity:1 !important;
}

/* Labels y campos dentro del bloque oscuro */
body[data-sutil-theme="light"] #routeEditModal #editRouteOperationalCard label,
body[data-sutil-theme="light"] #routeEditModal #editRouteGeneralCashCard label{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
  font-weight:700 !important;
}

body[data-sutil-theme="light"] #routeEditModal #editRouteOperationalCard input,
body[data-sutil-theme="light"] #routeEditOperationalCard select,
body[data-sutil-theme="light"] #routeEditModal #editRouteGeneralCashCard input,
body[data-sutil-theme="light"] #routeEditModal #editRouteGeneralCashCard select{
  background:#56616d !important;
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  border-color:#82909d !important;
}

/* Botón cerrar */
body[data-sutil-theme="light"] #routeEditModal .staff-edit-close{
  color:#435163 !important;
  background:#ffffff !important;
  border-color:#b8c2cd !important;
}

/* Mensajes de resultado */
body[data-sutil-theme="light"] #routeEditModal #routeEditMessage{
  color:#26384a !important;
}

/* Modo oscuro preservado */
body[data-sutil-theme="dark"] #routeEditModal .staff-edit-card{
  background:#293345 !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #routeEditModal .staff-edit-head h3,
body[data-sutil-theme="dark"] #routeEditModal label{
  color:#f4f7ff !important;
  -webkit-text-fill-color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #routeEditModal .muted,
body[data-sutil-theme="dark"] #routeEditModal small{
  color:#c3cddd !important;
  -webkit-text-fill-color:#c3cddd !important;
}
</style>

<!-- v37: FIX REAL #routeEditModal .staff-edit-card -->

<style>
/* ============================================================
   SUTIL v38 · Pagos recebidos - contraste real
   Selectores reales: .payment-entry-meta / .payment-entry-code
   ============================================================ */

/* MODO OSCURO */
body[data-sutil-theme="dark"] .payment-entry{
  background:#293447 !important;
  border-color:#53617a !important;
}

body[data-sutil-theme="dark"] .payment-entry-name{
  color:#78aaff !important;
  -webkit-text-fill-color:#78aaff !important;
  opacity:1 !important;
}

body[data-sutil-theme="dark"] .payment-entry-code{
  color:#f3f6fb !important;
  -webkit-text-fill-color:#f3f6fb !important;
  opacity:1 !important;
}

body[data-sutil-theme="dark"] .payment-entry-meta{
  color:#cdd7e5 !important;
  -webkit-text-fill-color:#cdd7e5 !important;
  opacity:1 !important;
}

body[data-sutil-theme="dark"] .payment-entry-tag{
  background:#38465d !important;
  color:#eaf1ff !important;
  -webkit-text-fill-color:#eaf1ff !important;
  border:1px solid #5c6f8e !important;
  opacity:1 !important;
}

body[data-sutil-theme="dark"] .payment-entry-amount{
  color:#7be7b2 !important;
  -webkit-text-fill-color:#7be7b2 !important;
  opacity:1 !important;
}

/* MODO CLARO */
body[data-sutil-theme="light"] .payment-entry{
  background:#ffffff !important;
  border-color:#d7e0ea !important;
}

body[data-sutil-theme="light"] .payment-entry-name{
  color:#315fba !important;
  -webkit-text-fill-color:#315fba !important;
  opacity:1 !important;
}

body[data-sutil-theme="light"] .payment-entry-code{
  color:#334155 !important;
  -webkit-text-fill-color:#334155 !important;
  opacity:1 !important;
}

body[data-sutil-theme="light"] .payment-entry-meta{
  color:#4b5d70 !important;
  -webkit-text-fill-color:#4b5d70 !important;
  opacity:1 !important;
}

body[data-sutil-theme="light"] .payment-entry-tag{
  background:#eef3ff !important;
  color:#315fba !important;
  -webkit-text-fill-color:#315fba !important;
  border:1px solid #c5d2f2 !important;
  opacity:1 !important;
}

body[data-sutil-theme="light"] .payment-entry-amount{
  color:#2f7a50 !important;
  -webkit-text-fill-color:#2f7a50 !important;
  opacity:1 !important;
}
</style>

<!-- v38: contraste Pagos recebidos -->

<style>
/* ============================================================
   SUTIL v39 · Relatório de movimentações de caixa
   Evita que valores monetarios salgan de las tarjetas.
   ============================================================ */

#cashReportSummary{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:9px !important;
  align-items:stretch !important;
  width:100% !important;
}

#cashReportSummary .report-metric-card{
  min-width:0 !important;
  width:100% !important;
  min-height:94px !important;
  margin:0 !important;
  padding:11px 12px !important;
  overflow:hidden !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  box-sizing:border-box !important;
}

#cashReportSummary .report-metric-title{
  width:100% !important;
  min-width:0 !important;
  font-size:14px !important;
  line-height:1.2 !important;
  margin-bottom:5px !important;
  overflow-wrap:anywhere !important;
}

#cashReportSummary .report-metric-value{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  font-size:clamp(18px,2vw,25px) !important;
  line-height:1.08 !important;
  letter-spacing:-0.45px !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:clip !important;
  font-variant-numeric:tabular-nums !important;
}

#cashReportSummary .report-metric-subtext{
  width:100% !important;
  min-width:0 !important;
  margin-top:5px !important;
  line-height:1.2 !important;
  font-size:11px !important;
  overflow-wrap:anywhere !important;
}

/* Valores particularmente largos: asegurar que entren */
#cashReportSummary .report-metric-card:nth-child(1) .report-metric-value,
#cashReportSummary .report-metric-card:nth-child(2) .report-metric-value,
#cashReportSummary .report-metric-card:nth-child(3) .report-metric-value,
#cashReportSummary .report-metric-card:nth-child(4) .report-metric-value,
#cashReportSummary .report-metric-card:nth-child(5) .report-metric-value{
  font-size:clamp(18px,1.8vw,24px) !important;
}

@media (max-width:900px){
  #cashReportSummary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:560px){
  #cashReportSummary{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:8px !important;
  }
  #cashReportSummary .report-metric-card{
    min-height:82px !important;
    padding:10px 11px !important;
    border-radius:14px !important;
  }
  #cashReportSummary .report-metric-title{
    font-size:12px !important;
    margin-bottom:3px !important;
  }
  #cashReportSummary .report-metric-value,
  #cashReportSummary .report-metric-card:nth-child(1) .report-metric-value,
  #cashReportSummary .report-metric-card:nth-child(2) .report-metric-value,
  #cashReportSummary .report-metric-card:nth-child(3) .report-metric-value,
  #cashReportSummary .report-metric-card:nth-child(4) .report-metric-value,
  #cashReportSummary .report-metric-card:nth-child(5) .report-metric-value{
    font-size:clamp(15px,4.8vw,20px) !important;
    letter-spacing:-.35px !important;
  }
  #cashReportSummary .report-metric-subtext{
    font-size:10px !important;
    margin-top:3px !important;
  }
}
@media (max-width:350px){
  #cashReportSummary{gap:7px !important;}
  #cashReportSummary .report-metric-card{padding:9px 9px !important;}
  #cashReportSummary .report-metric-value,
  #cashReportSummary .report-metric-card:nth-child(1) .report-metric-value,
  #cashReportSummary .report-metric-card:nth-child(2) .report-metric-value,
  #cashReportSummary .report-metric-card:nth-child(3) .report-metric-value,
  #cashReportSummary .report-metric-card:nth-child(4) .report-metric-value,
  #cashReportSummary .report-metric-card:nth-child(5) .report-metric-value{
    font-size:clamp(14px,4.5vw,17px) !important;
  }
}
</style>

<!-- SUTIL FIX 12.15.144 · Resumen del reporte de caja compacto en 2 columnas para móvil -->
<!-- v39: métricas del relatório de movimentações organizadas -->

<style>
/* SUTIL v40 · Configuración de la app del cliente */
.client-app-subtabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-bottom:14px;
}
.client-app-subtab{
  border:1px solid var(--s-border,#53627d);
  background:var(--s-surface-soft,#2e3a50);
  color:var(--s-text,#fff);
  border-radius:14px;
  padding:12px 10px;
  font-weight:800;
  cursor:pointer;
}
.client-app-subtab.active{
  background:linear-gradient(135deg,#2fc9ef,#7569ef);
  color:#fff !important;
  border-color:transparent;
  box-shadow:0 8px 22px rgba(80,98,220,.22);
}
.client-app-config-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}
.client-app-switch{
  display:flex !important;
  gap:10px;
  align-items:flex-start;
  padding:12px;
  border:1px solid var(--s-border,#53627d);
  border-radius:12px;
  background:var(--s-surface-soft,#2e3a50);
}
.client-app-switch input{margin-top:3px}
.client-app-switch span{display:block}
.client-app-switch strong{display:block;margin-bottom:3px}
.client-app-switch small{display:block;line-height:1.3}
.client-banner-preview{
  margin-top:12px;
  border-radius:12px;
  background:#14233a;
  border:1px solid #405674;
  padding:14px 16px;
  font-size:18px;
  font-weight:900;
}
.client-loan-offer-list{
  display:grid;
  gap:10px;
  margin-top:12px;
}
.client-loan-offer-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr)) auto;
  gap:10px;
  align-items:center;
  padding:12px;
  border:1px solid var(--s-border,#53627d);
  border-radius:14px;
  background:var(--s-surface,#293345);
}
.client-loan-offer-row small{display:block;margin-bottom:3px}
.client-loan-offer-actions{display:flex;gap:7px;flex-wrap:wrap}

body[data-sutil-theme="light"] .client-app-subtab,
body[data-sutil-theme="light"] .client-app-switch,
body[data-sutil-theme="light"] .client-loan-offer-row{
  background:#f7f9fc !important;
  color:#26384a !important;
  border-color:#ced8e4 !important;
}
body[data-sutil-theme="light"] .client-app-subtab.active{color:#fff !important}
body[data-sutil-theme="light"] .client-app-switch strong,
body[data-sutil-theme="light"] .client-loan-offer-row strong{color:#26384a !important}
body[data-sutil-theme="light"] .client-app-switch small,
body[data-sutil-theme="light"] .client-loan-offer-row small{color:#66788d !important}

@media(max-width:900px){
  .client-loan-offer-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:620px){
  .client-app-subtabs,.client-app-config-grid{grid-template-columns:1fr}
  .client-loan-offer-row{grid-template-columns:1fr}
}
</style>

<!-- v40: configuración App cliente -->

<style>
/* SUTIL v46 · Ubicación de clientes - contraste real en modo oscuro */
body[data-sutil-theme="dark"] #locationsSection .location-client-row{
  background:#273246 !important;
  border-bottom-color:#53627d !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #locationsSection .location-client-row:hover{
  background:#334158 !important;
}
body[data-sutil-theme="dark"] #locationsSection .location-client-row.active{
  background:linear-gradient(135deg,#4f5fc2,#6358b7) !important;
}
body[data-sutil-theme="dark"] #locationsSection .location-client-name{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
  opacity:1 !important;
}
body[data-sutil-theme="dark"] #locationsSection .location-client-meta{
  color:#c9d4e4 !important;
  -webkit-text-fill-color:#c9d4e4 !important;
  opacity:1 !important;
}
body[data-sutil-theme="dark"] #locationsSection .location-freshness{
  opacity:1 !important;
  border:1px solid transparent !important;
}
body[data-sutil-theme="dark"] #locationsSection .location-freshness.none{
  background:#445166 !important;
  color:#f4f7ff !important;
  -webkit-text-fill-color:#f4f7ff !important;
  border-color:#66758e !important;
}
body[data-sutil-theme="dark"] #locationsSection .location-freshness.old{
  background:#5b4721 !important;
  color:#ffe6a3 !important;
  -webkit-text-fill-color:#ffe6a3 !important;
  border-color:#8f7134 !important;
}
body[data-sutil-theme="dark"] #locationsSection .location-freshness.today{
  background:#243d68 !important;
  color:#cfe2ff !important;
  -webkit-text-fill-color:#cfe2ff !important;
  border-color:#4668a0 !important;
}
body[data-sutil-theme="dark"] #locationsSection .location-freshness.recent{
  background:#173f2e !important;
  color:#bdf3cf !important;
  -webkit-text-fill-color:#bdf3cf !important;
  border-color:#347250 !important;
}
</style>

<!-- v46: contraste real ubicaciones oscuro -->

<style>
/* Admin v47 · reproducción de audios del chat */
.sutil-chat-audio{min-width:230px;max-width:320px;padding:8px 9px;border-radius:10px;background:rgba(255,255,255,.10)}
.sutil-chat-audio-title{font-size:12px;font-weight:800;margin-bottom:6px}
.sutil-chat-audio audio{display:block;width:100%;height:38px}
body[data-sutil-theme="light"] .sutil-chat-audio{background:#eef3f8;color:#26384a}
body[data-sutil-theme="dark"] .sutil-chat-audio{background:#202a3a;color:#f4f7ff}
</style>

<!-- Admin v47: audio en chat -->

<style>
/* Admin v50 · orden de conversaciones */
#chatsCenterOrder{
  min-width:150px;
}
body[data-sutil-theme="dark"] #chatsCenterOrder{
  background:#27364d !important;
  color:#f4f7ff !important;
  border-color:#5b6f8d !important;
}
body[data-sutil-theme="light"] #chatsCenterOrder{
  background:#ffffff !important;
  color:#26384a !important;
  border-color:#b9c7d6 !important;
}
</style>

<!-- Admin v50: selector orden chats -->

<style>
/* Admin v51 · fecha real del último mensaje */
.sutil-chat-directory-time{
  display:block;
  margin-top:3px;
  font-size:10px;
  line-height:1.2;
  color:#9fb0c7;
}
body[data-sutil-theme="light"] .sutil-chat-directory-time{
  color:#607287 !important;
}
</style>

<!-- Admin v51: orden real por chat -->

<style>
/* Admin v53 · modo móvil ligero */
@media(max-width:760px){
  *{animation-duration:0s !important;transition-duration:0s !important;}
  body, .card, .module, [class*="panel"], [class*="modal"]{
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  .card,.module{box-shadow:none !important;}
  canvas{max-height:240px !important;}
}
</style>

<style>
/* Admin v54 · navegación móvil + credencial dentro del menú */
.sutil-header-theme-switch{width:max-content;margin-top:7px}
.sutil-mobile-bottom-nav{display:none}
.sutil-owner-menu-company #sessionControls{margin-top:12px !important;justify-content:flex-start !important;gap:9px !important}
.sutil-owner-menu-company #sessionControls label{width:100%;font-size:12px}
.sutil-owner-menu-company #offlineStatusBadge{font-size:11px}
.sutil-owner-menu-company #sessionControls .btn{width:100%;margin-top:2px}
.sutil-owner-identity-line{display:flex;gap:6px;align-items:flex-start;margin:3px 0}
.sutil-owner-identity-label{font-weight:800;min-width:86px;color:inherit}
@media(max-width:760px){
  body.sutil-admin-authenticated{padding-bottom:76px !important}
  body.sutil-admin-authenticated.sutil-owner-auth #activeCompanyBanner,
  body.sutil-admin-authenticated.sutil-owner-auth #headerSessionMount{display:none !important}
  body.sutil-admin-authenticated #headerThemeSwitch{display:flex !important;width:max-content !important;max-width:100%;justify-content:flex-start !important}
  body.sutil-admin-authenticated #headerThemeSwitch button{flex:0 0 auto !important;padding:7px 9px !important;font-size:11px !important}
  body.sutil-admin-authenticated .header > div:last-child{display:none !important}
  body.sutil-admin-authenticated .sutil-theme-floating{display:none !important}
  .sutil-mobile-bottom-nav{
    position:fixed;left:0;right:0;bottom:0;z-index:99980;height:66px;
    display:none;grid-template-columns:1fr 1fr;
    padding:7px 12px calc(7px + env(safe-area-inset-bottom));
    background:rgba(27,39,62,.97);border-top:1px solid rgba(123,145,184,.42);
    box-shadow:0 -8px 28px rgba(4,10,24,.28)
  }
  body.sutil-admin-authenticated .sutil-mobile-bottom-nav{display:grid}
  .sutil-mobile-bottom-nav button{
    border:0;background:transparent;color:#dce7fb;font-weight:800;font-size:11px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:12px;padding:4px 8px
  }
  .sutil-mobile-bottom-nav button .ico{font-size:20px;line-height:1}
  .sutil-mobile-bottom-nav button:active{background:rgba(92,117,190,.24)}
  body[data-sutil-theme="light"] .sutil-mobile-bottom-nav{background:rgba(255,255,255,.98);border-top-color:#d8e1ec;box-shadow:0 -8px 24px rgba(30,41,59,.12)}
  body[data-sutil-theme="light"] .sutil-mobile-bottom-nav button{color:#33475c}
}
</style>

<!-- Admin v60: selectores móviles en DOM real -->
<!-- Admin v53: carga ligera en celular -->


<style>
/* Admin v58 · selector de sonidos estable en móvil (sin select nativo visible) */
.sutil-sound-mobile-btn{display:none}
.sutil-sound-picker-backdrop{display:none;position:fixed;inset:0;z-index:300500;background:rgba(8,15,30,.72);align-items:flex-end;justify-content:center;padding:12px}
.sutil-sound-picker-backdrop.open{display:flex}
.sutil-sound-picker-sheet{width:min(100%,520px);max-height:72vh;overflow:auto;background:#24344d;border:1px solid #64789a;border-radius:18px;padding:14px;box-shadow:0 -10px 32px rgba(0,0,0,.35)}
.sutil-sound-picker-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sutil-sound-picker-title{font-weight:900;font-size:16px;color:#f4f7ff}
.sutil-sound-picker-close{width:38px;height:38px;border-radius:11px;border:1px solid #7083a0;background:#31435f;color:#fff;font-size:20px;font-weight:900}
.sutil-sound-picker-options{display:grid;grid-template-columns:1fr;gap:8px}
.sutil-sound-picker-option{width:100%;min-height:48px;border:1px solid #64789a;border-radius:13px;background:#2b3b55;color:#f5f7ff;text-align:left;padding:11px 13px;font-weight:800}
.sutil-sound-picker-option.active{border-color:#64d8ff;background:#244b67;box-shadow:0 0 0 2px rgba(100,216,255,.14)}
body[data-sutil-theme="light"] .sutil-sound-picker-backdrop{background:rgba(18,28,42,.48)}
body[data-sutil-theme="light"] .sutil-sound-picker-sheet{background:#fff;border-color:#ccd7e5}
body[data-sutil-theme="light"] .sutil-sound-picker-title{color:#24364a}
body[data-sutil-theme="light"] .sutil-sound-picker-close{background:#f2f6fb;border-color:#cbd6e4;color:#24364a}
body[data-sutil-theme="light"] .sutil-sound-picker-option{background:#fff;border-color:#cbd6e4;color:#24364a}
body[data-sutil-theme="light"] .sutil-sound-picker-option.active{background:#e9f8ff;border-color:#46bfe8;color:#17384a}
@media(max-width:760px){
  #sutilSoundChat,#sutilSoundPix,#sutilSoundSupport,#sutilSoundAlert{display:none !important}
  .sutil-sound-mobile-btn{display:flex;width:100%;min-height:48px;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding:10px 14px;border:1px solid #64789a;border-radius:12px;background:#27364d;color:#fff;font-weight:800;text-align:left}
  .sutil-sound-mobile-btn::after{content:"⌄";font-size:18px;line-height:1}
  body[data-sutil-theme="light"] .sutil-sound-mobile-btn{background:#fff;color:#24364a;border-color:#cbd6e4}
}
</style>


<style>
/* Admin v59 · selectores estables en móvil para Configuración */
.sutil-mobile-select-btn{display:none}
.sutil-mobile-select-picker{display:none;position:fixed;inset:0;z-index:300700;background:rgba(8,15,30,.72);align-items:flex-end;justify-content:center;padding:12px}
.sutil-mobile-select-picker.open{display:flex}
.sutil-mobile-select-sheet{width:min(100%,520px);max-height:74vh;overflow:auto;background:#24344d;border:1px solid #64789a;border-radius:18px;padding:14px;box-shadow:0 -10px 32px rgba(0,0,0,.35)}
.sutil-mobile-select-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.sutil-mobile-select-title{font-weight:900;font-size:16px;color:#f4f7ff}
.sutil-mobile-select-close{width:38px;height:38px;border-radius:11px;border:1px solid #7083a0;background:#31435f;color:#fff;font-size:20px;font-weight:900}
.sutil-mobile-select-options{display:grid;grid-template-columns:1fr;gap:8px}
.sutil-mobile-select-option{width:100%;min-height:48px;border:1px solid #64789a;border-radius:13px;background:#2b3b55;color:#f5f7ff;text-align:left;padding:11px 13px;font-weight:800}
.sutil-mobile-select-option.active{border-color:#64d8ff;background:#244b67;box-shadow:0 0 0 2px rgba(100,216,255,.14)}
body[data-sutil-theme="light"] .sutil-mobile-select-picker{background:rgba(18,28,42,.48)}
body[data-sutil-theme="light"] .sutil-mobile-select-sheet{background:#fff;border-color:#ccd7e5}
body[data-sutil-theme="light"] .sutil-mobile-select-title{color:#24364a}
body[data-sutil-theme="light"] .sutil-mobile-select-close{background:#f2f6fb;border-color:#cbd6e4;color:#24364a}
body[data-sutil-theme="light"] .sutil-mobile-select-option{background:#fff;border-color:#cbd6e4;color:#24364a}
body[data-sutil-theme="light"] .sutil-mobile-select-option.active{background:#e9f8ff;border-color:#46bfe8;color:#17384a}
@media(max-width:760px){
  #settingLanguage,#settingCountry,#settingFrequency{display:none !important}
  .sutil-mobile-select-btn{display:flex;width:100%;min-height:48px;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding:10px 14px;border:1px solid #64789a;border-radius:12px;background:#27364d;color:#fff;font-weight:800;text-align:left}
  .sutil-mobile-select-btn::after{content:"⌄";font-size:18px;line-height:1}
  body[data-sutil-theme="light"] .sutil-mobile-select-btn{background:#fff;color:#24364a;border-color:#cbd6e4}
}
</style>


<style id="sutil-settings-accordion-v61">
/* SUTIL Admin v61 · Configuración compacta tipo acordeón */
#settingsSection > .card.sutil-settings-accordion{
  padding:0;
  overflow:hidden;
}
#settingsSection > .card.sutil-settings-accordion > h3{
  margin:0;
  padding:18px 54px 18px 18px;
  position:relative;
  cursor:pointer;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
#settingsSection > .card.sutil-settings-accordion > h3::after{
  content:'⌄';
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  font-size:24px;
  line-height:1;
  transition:transform .18s ease;
  opacity:.8;
}
#settingsSection > .card.sutil-settings-accordion.is-open > h3::after{
  transform:translateY(-50%) rotate(180deg);
}
#settingsSection .sutil-settings-accordion-content{
  display:none;
  padding:0 18px 18px;
}
#settingsSection > .card.sutil-settings-accordion.is-open .sutil-settings-accordion-content{
  display:block;
}
@media (max-width:760px){
  #settingsSection > .card.sutil-settings-accordion > h3{
    padding:16px 48px 16px 16px;
    font-size:18px;
  }
  #settingsSection .sutil-settings-accordion-content{
    padding:0 16px 16px;
  }
}
</style>


<style id="sutil-v80-receipts-mobile-cards">
/* v80 · Comprobantes: tarjeta vertical compacta y acciones siempre visibles */
.receipt-results-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;flex-wrap:wrap}
.receipt-mobile-filters{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end}
.receipt-period-row{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:6px;align-items:center;margin-top:5px}
.receipt-period-row input{margin-top:0;min-width:0}
@media (max-width: 700px){
  #receiptsSection>.card{padding:14px 12px 96px!important}
  #receiptsSection .receipt-mobile-filters{grid-template-columns:1fr 1fr;gap:10px}
  #receiptsSection .receipt-period-filter,#receiptsSection .receipt-search-filter{grid-column:1/-1}
  #receiptsSection .receipt-results-toolbar{margin:13px 0 8px;align-items:center}
  #receiptsSection .receipt-results-toolbar strong{font-size:13px}
  #receiptsSection .receipt-results-toolbar .btn{width:auto;min-width:112px;padding:10px 12px}
  #receiptsSection .table-wrap{overflow-x:visible!important;width:100%;margin-top:8px!important}
  #receiptsSection .pix-table{display:block;width:100%;border-collapse:separate}
  #receiptsSection .pix-table thead{display:none!important}
  #receiptsSection .pix-table tbody{display:grid;grid-template-columns:1fr;gap:14px;width:100%}
  #receiptsSection .pix-table tbody tr{
    display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%;
    border:1px solid rgba(148,163,184,.45);border-radius:16px;overflow:hidden;
    box-shadow:0 3px 12px rgba(15,23,42,.08);padding:12px;
  }
  #receiptsSection .pix-table tbody td{
    display:block;min-width:0!important;width:auto!important;padding:5px 6px!important;
    border:0!important;overflow-wrap:anywhere;word-break:normal;font-size:14px;background:transparent!important;
  }
  #receiptsSection .pix-table tbody td::before{
    display:block;margin-bottom:3px;font-size:10px;line-height:1.15;font-weight:900;
    letter-spacing:.02em;text-transform:none;opacity:.68
  }
  #receiptsSection .pix-table tbody td:nth-child(1){grid-column:1/-1;order:2}
  #receiptsSection .pix-table tbody td:nth-child(2){grid-column:1/-1;order:3}
  #receiptsSection .pix-table tbody td:nth-child(3){grid-column:1/-1;order:4}
  #receiptsSection .pix-table tbody td:nth-child(4){grid-column:1/2;order:5}
  #receiptsSection .pix-table tbody td:nth-child(5){grid-column:2/3;grid-row:5/7;order:6;text-align:right;display:flex;flex-direction:column;align-items:flex-end;justify-content:center}
  #receiptsSection .pix-table tbody td:nth-child(6){grid-column:1/2;grid-row:1;order:1;padding-top:0!important}
  #receiptsSection .pix-table tbody td:nth-child(7){grid-column:2/3;grid-row:1;order:1;text-align:right;padding-top:2px!important;font-weight:700}
  #receiptsSection .pix-table tbody td:nth-child(8){grid-column:1/-1;order:8;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding-top:12px!important;margin-top:8px;border-top:1px solid rgba(148,163,184,.22)!important}
  #receiptsSection .pix-table tbody td:nth-child(1)::before{content:"Cliente"}
  #receiptsSection .pix-table tbody td:nth-child(2)::before{content:"Ruta"}
  #receiptsSection .pix-table tbody td:nth-child(3)::before{content:"Crédito / Cuota"}
  #receiptsSection .pix-table tbody td:nth-child(4)::before{content:"Valor"}
  #receiptsSection .pix-table tbody td:nth-child(5)::before{content:"Archivo";text-align:right}
  #receiptsSection .pix-table tbody td:nth-child(6)::before,#receiptsSection .pix-table tbody td:nth-child(7)::before,#receiptsSection .pix-table tbody td:nth-child(8)::before{display:none!important}
  #receiptsSection .pix-table tbody td:nth-child(5) .btn{width:auto!important;min-height:38px;padding:8px 11px;margin:0;display:flex;align-items:center;justify-content:center}
  #receiptsSection .pix-table tbody td:nth-child(5) small{display:block;margin-top:5px;max-width:140px;opacity:.72;font-size:10px;text-align:right}
  #receiptsSection .pix-table tbody td:nth-child(8) .btn{width:100%;min-height:44px;margin:0;display:flex;align-items:center;justify-content:center;white-space:normal}
  #receiptsSection .pix-state{max-width:100%;white-space:normal;padding:6px 9px}
  #receiptsSection .pix-table tbody tr>td[colspan]{grid-column:1/-1!important;border:0!important;padding:16px!important}
  #receiptsSection .pix-table tbody tr>td[colspan]::before{display:none!important}
}
</style>


<style id="sutil-v81-real-receipt-cards">
#receiptMobileCards{display:none}
@media(max-width:760px){
  #receiptsSection .table-wrap{display:none!important}
  #receiptMobileCards{display:block;margin-top:12px}
  #receiptsSection>.card{padding:14px!important}
  #receiptsSection h2{font-size:23px!important}
  .receipt-mobile-filters{grid-template-columns:1fr 1fr!important;gap:10px!important}
  .receipt-period-filter,.receipt-search-filter{grid-column:1/-1!important}
  .receipt-results-toolbar{align-items:center!important;margin-top:12px!important}
  .receipt-mobile-card{border:1px solid #b8d8c4;border-radius:14px;padding:14px;margin:12px 0;background:#f0fbf4;box-shadow:0 2px 8px rgba(0,0,0,.05)}
  .receipt-mobile-card.checking{background:#f2f6ff;border-color:#b9c9ef}
  .receipt-mobile-card.not_confirmed{background:#fff2f1;border-color:#efc0bc}
  .receipt-mobile-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:12px}
  .receipt-mobile-card-date{font-weight:700;font-size:13px;white-space:nowrap;text-align:right}
  .receipt-mobile-card-body{display:grid;grid-template-columns:minmax(0,1fr) 110px;gap:12px;align-items:start}
  .receipt-mobile-card-info{min-width:0}
  .receipt-mobile-field{margin:0 0 9px}
  .receipt-mobile-field small{display:block;font-size:11px;color:#68717c;margin-bottom:2px;font-weight:700}
  .receipt-mobile-field strong,.receipt-mobile-field div{overflow-wrap:anywhere}
  .receipt-mobile-file{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:115px}
  .receipt-mobile-file .btn{width:auto!important;min-width:88px!important;padding:9px 12px!important;margin:0!important}
  .receipt-mobile-file small{display:block;margin-top:6px;max-width:105px;overflow-wrap:anywhere;font-size:10px;color:#68717c}
  .receipt-mobile-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
  .receipt-mobile-actions .btn{width:100%!important;min-height:46px!important;margin:0!important;display:flex;align-items:center;justify-content:center}
  body[data-sutil-theme="dark"] .receipt-mobile-card{background:#203d32;border-color:#3e715a}
  body[data-sutil-theme="dark"] .receipt-mobile-card.checking{background:#243653;border-color:#4f6796}
  body[data-sutil-theme="dark"] .receipt-mobile-card.not_confirmed{background:#482929;border-color:#8b4a4a}
  body[data-sutil-theme="dark"] .receipt-mobile-field small,body[data-sutil-theme="dark"] .receipt-mobile-file small{color:#c4cfda}
}
</style>

<style id="sutil-v83-pix-review-full-contrast">
/* v83 · contraste completo e independiente del tema para Ver detalle de comprobante */
#pixReviewModal .pix-review-card,
#pixReviewModal .pix-review-head,
#pixReviewModal .pix-review-body{
  background:#ffffff !important;
  color:#172033 !important;
}
#pixReviewModal .pix-review-head h3,
#pixReviewModal .pix-review-head strong,
#pixReviewModal .pix-review-body strong,
#pixReviewModal .pix-review-body label,
#pixReviewModal .pix-review-body span:not(.pix-state),
#pixReviewModal .pix-review-body div:not(.pix-state){
  color:inherit;
}
#pixReviewModal #pixReviewSubtitle,
#pixReviewModal .muted,
#pixReviewModal .pix-summary-box small{
  color:#5b6675 !important;
  opacity:1 !important;
}
#pixReviewModal .pix-summary-box{
  background:#f7f9fc !important;
  border:1px solid #d8e0ea !important;
  color:#172033 !important;
}
#pixReviewModal .pix-summary-box strong{
  color:#172033 !important;
  opacity:1 !important;
}
#pixReviewModal .pix-preview{
  background:#f5f7fa !important;
  border:1px solid #d8e0ea !important;
  color:#172033 !important;
}
#pixReviewModal .pix-preview a,
#pixReviewModal .pix-preview button,
#pixReviewModal .pix-preview .pix-file-btn,
#pixReviewModal .pix-preview .pix-file-name,
#pixReviewModal .pix-preview .pix-file-size{
  color:#172033 !important;
  opacity:1 !important;
}
#pixReviewModal .pix-decision-grid label{
  color:#172033 !important;
  opacity:1 !important;
}
#pixReviewModal .pix-decision-grid input,
#pixReviewModal .pix-decision-grid textarea,
#pixReviewModal .pix-decision-grid select{
  background:#ffffff !important;
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
  border-color:#aeb9c5 !important;
  opacity:1 !important;
}
#pixReviewModal .pix-decision-grid input:disabled,
#pixReviewModal .pix-decision-grid textarea:disabled,
#pixReviewModal .pix-decision-grid select:disabled{
  background:#eef2f6 !important;
  color:#334155 !important;
  -webkit-text-fill-color:#334155 !important;
  opacity:1 !important;
}
#pixReviewModal #pixDecisionMessage.result,
#pixReviewModal #pixDecisionMessage.result.error{
  display:block !important;
  background:#eef2f6 !important;
  color:#263446 !important;
  border:1px solid #cbd5e1 !important;
  opacity:1 !important;
}
#pixReviewModal .pix-review-actions{
  background:#ffffff !important;
}
#pixReviewModal .pix-review-actions .btn{
  opacity:1 !important;
}
@media(max-width:650px){
  #pixReviewModal .pix-review-card{max-height:92dvh !important;}
  #pixReviewModal .pix-review-body{padding-bottom:90px !important;}
}
</style>


<style id="sutil-v84-pix-review-header-force">
/* v84 · fuerza final de contraste para cabecera del detalle PIX */
html body #pixReviewModal .pix-review-card .pix-review-head h3,
html body[data-sutil-theme="dark"] #pixReviewModal .pix-review-card .pix-review-head h3,
html body[data-sutil-theme="light"] #pixReviewModal .pix-review-card .pix-review-head h3{
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
  opacity:1 !important;
  text-shadow:none !important;
}
html body #pixReviewModal .pix-review-card .pix-review-head #pixReviewSubtitle,
html body[data-sutil-theme="dark"] #pixReviewModal .pix-review-card .pix-review-head #pixReviewSubtitle,
html body[data-sutil-theme="light"] #pixReviewModal .pix-review-card .pix-review-head #pixReviewSubtitle{
  color:#536071 !important;
  -webkit-text-fill-color:#536071 !important;
  opacity:1 !important;
  text-shadow:none !important;
}
html body #pixReviewModal .pix-review-card .pix-review-head{
  background:#ffffff !important;
}
</style>

<style id="sutil-v85-pix-label-force">
/* v85 · fuerza real de títulos de campos en Android/Chrome */
#pixReviewModal .pix-decision-grid > label,
#pixReviewModal .pix-decision-grid > label > span,
#pixReviewModal .pix-decision-grid > label > strong,
#pixReviewModal .pix-decision-grid > label > small {
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
  opacity:1 !important;
  text-shadow:none !important;
}
#pixReviewModal .pix-decision-grid > label {
  font-weight:700 !important;
}
#pixReviewModal .pix-decision-grid input,
#pixReviewModal .pix-decision-grid textarea,
#pixReviewModal .pix-decision-grid select {
  color:#172033 !important;
  -webkit-text-fill-color:#172033 !important;
  opacity:1 !important;
}
</style>

<style id="sutil-v86-pix-review-dark-theme">
/* v86 · Ver detalle PIX respeta la misma paleta del modo oscuro de Sutil */
body[data-sutil-theme="dark"] #pixReviewModal .pix-review-card,
body[data-sutil-theme="dark"] #pixReviewModal .pix-review-head,
body[data-sutil-theme="dark"] #pixReviewModal .pix-review-body{
  background:#293447 !important;
  color:#f4f7ff !important;
  border-color:#52617d !important;
}
body[data-sutil-theme="dark"] #pixReviewModal .pix-review-head{
  border-bottom:1px solid #52617d !important;
}
body[data-sutil-theme="dark"] #pixReviewModal .pix-review-head h3{
  color:#f4f7ff !important;
  -webkit-text-fill-color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #pixReviewModal #pixReviewSubtitle,
body[data-sutil-theme="dark"] #pixReviewModal .muted,
body[data-sutil-theme="dark"] #pixReviewModal .pix-summary-box small{
  color:#c3cddd !important;
  -webkit-text-fill-color:#c3cddd !important;
  opacity:1 !important;
}
body[data-sutil-theme="dark"] #pixReviewModal .pix-summary-box{
  background:#334158 !important;
  border:1px solid #52617d !important;
  color:#f4f7ff !important;
  box-shadow:0 8px 20px rgba(0,0,0,.18) !important;
}
body[data-sutil-theme="dark"] #pixReviewModal .pix-summary-box strong{
  color:#ffffff !important;
  -webkit-text-fill-color:#ffffff !important;
}
body[data-sutil-theme="dark"] #pixReviewModal .pix-preview{
  background:#233047 !important;
  border:1px solid #52617d !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #pixReviewModal .pix-preview a,
body[data-sutil-theme="dark"] #pixReviewModal .pix-preview button,
body[data-sutil-theme="dark"] #pixReviewModal .pix-preview .pix-file-btn,
body[data-sutil-theme="dark"] #pixReviewModal .pix-preview .pix-file-name,
body[data-sutil-theme="dark"] #pixReviewModal .pix-preview .pix-file-size{
  color:#f4f7ff !important;
  -webkit-text-fill-color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #pixReviewModal .pix-decision-grid > label,
body[data-sutil-theme="dark"] #pixReviewModal .pix-decision-grid > label > span,
body[data-sutil-theme="dark"] #pixReviewModal .pix-decision-grid > label > strong,
body[data-sutil-theme="dark"] #pixReviewModal .pix-decision-grid > label > small{
  color:#eef3ff !important;
  -webkit-text-fill-color:#eef3ff !important;
  opacity:1 !important;
}
body[data-sutil-theme="dark"] #pixReviewModal .pix-decision-grid input,
body[data-sutil-theme="dark"] #pixReviewModal .pix-decision-grid textarea,
body[data-sutil-theme="dark"] #pixReviewModal .pix-decision-grid select{
  background:#1f2a3d !important;
  color:#f4f7ff !important;
  -webkit-text-fill-color:#f4f7ff !important;
  border-color:#52617d !important;
  caret-color:#ffffff !important;
}
body[data-sutil-theme="dark"] #pixReviewModal .pix-decision-grid input:disabled,
body[data-sutil-theme="dark"] #pixReviewModal .pix-decision-grid textarea:disabled,
body[data-sutil-theme="dark"] #pixReviewModal .pix-decision-grid select:disabled{
  background:#263348 !important;
  color:#dce5f2 !important;
  -webkit-text-fill-color:#dce5f2 !important;
  opacity:1 !important;
}
body[data-sutil-theme="dark"] #pixReviewModal .pix-decision-grid input::placeholder,
body[data-sutil-theme="dark"] #pixReviewModal .pix-decision-grid textarea::placeholder{
  color:#93a4bb !important;
  -webkit-text-fill-color:#93a4bb !important;
  opacity:1 !important;
}
body[data-sutil-theme="dark"] #pixReviewModal #pixDecisionMessage.result,
body[data-sutil-theme="dark"] #pixReviewModal #pixDecisionMessage.result.error{
  background:#233047 !important;
  color:#e8eef8 !important;
  -webkit-text-fill-color:#e8eef8 !important;
  border:1px solid #52617d !important;
}
body[data-sutil-theme="dark"] #pixReviewModal .pix-review-actions{
  background:#293447 !important;
}
</style>

<style id="sutil-v90b-clientes-movil">
.client-mobile-actions{display:none}
.client-quick-contact{display:none}
@media(max-width:760px){
  #clientsSection .table-wrap{
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
  }
  #clientsSection table,
  #clientsSection tbody{
    display:block !important;
    width:100% !important;
  }
  #clientsSection thead{display:none !important}
  #clientsSection #clientsTable{
    display:grid !important;
    gap:10px;
  }
  #clientsSection #clientsTable tr.client-row{
    display:grid !important;
    grid-template-columns:58px minmax(0,1fr) auto;
    grid-template-areas:
      "photo name status"
      "photo code status"
      "photo phone status"
      "photo route status"
      "actions actions actions";
    gap:3px 12px;
    align-items:center;
    width:100%;
    padding:13px 12px 10px !important;
    border:1px solid rgba(148,163,184,.32) !important;
    border-radius:17px !important;
    background:linear-gradient(180deg,#2c3b52,#243247) !important;
    box-shadow:0 8px 18px rgba(0,0,0,.15);
    color:#f5f7fb !important;
    cursor:pointer;
    position:relative;
  }
  #clientsSection #clientsTable tr.client-row:hover{
    background:linear-gradient(180deg,#314158,#27364b) !important;
  }
  #clientsSection #clientsTable tr.client-row > td{
    display:none !important;
    border:0 !important;
    padding:0 !important;
    background:transparent !important;
    min-width:0;
    color:inherit !important;
  }
  #clientsSection #clientsTable tr.client-row > td:nth-child(1){
    display:block !important;grid-area:photo;
  }
  #clientsSection #clientsTable tr.client-row > td:nth-child(2){
    display:block !important;grid-area:name;
    font-size:16px;font-weight:900;color:#fff !important;
    line-height:1.15;
  }
  #clientsSection #clientsTable tr.client-row > td:nth-child(3){
    display:block !important;grid-area:code;
    color:#b8c4d4 !important;font-size:12px;
  }
  #clientsSection #clientsTable tr.client-row > td:nth-child(5){
    display:block !important;grid-area:phone;
    color:#cbd5e1 !important;font-size:12px;
  }
  #clientsSection #clientsTable tr.client-row > td:nth-child(5)::before{
    content:"📞 ";
  }
  #clientsSection #clientsTable tr.client-row > td:nth-child(7){
    display:block !important;grid-area:route;
    color:#9fd7d6 !important;font-size:12px;
  }
  #clientsSection #clientsTable tr.client-row > td:nth-child(7)::before{
    content:"👥 ";
  }
  #clientsSection #clientsTable tr.client-row > td:nth-child(11){
    display:flex !important;grid-area:status;
    justify-content:flex-end;align-items:flex-start;align-self:start;
  }
  #clientsSection #clientsTable tr.client-row > td:nth-child(11) small{
    display:none !important;
  }
  #clientsSection #clientsTable .client-quick-contact{
    position:absolute;
    right:14px;
    top:42px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:7px;
    z-index:3;
  }
  #clientsSection #clientsTable .client-quick-contact-btn{
    width:34px;
    height:34px;
    min-width:34px;
    padding:0 !important;
    border:1px solid rgba(255,255,255,.18);
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:17px;
    line-height:1;
    color:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,.18);
  }
  #clientsSection #clientsTable .client-quick-contact-btn.call{background:#159a62;}
  #clientsSection #clientsTable .client-quick-contact-btn.whatsapp{background:#18a957;}
  #clientsSection #clientsTable .client-quick-contact-btn.chat{background:#4263d8;}

  #clientsSection #clientsTable .status-pill{
    min-width:44px;
    justify-content:center;
    text-align:center;
    padding:6px 9px !important;
    border-radius:999px !important;
    font-size:10px !important;
    line-height:1.1;
  }
  #clientsSection #clientsTable tr.client-row > td.client-mobile-actions{
    display:flex !important;
    grid-area:actions;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    padding-top:9px !important;
    margin-top:7px;
    border-top:1px solid rgba(148,163,184,.22) !important;
  }
  #clientsSection #clientsTable .client-mobile-actions .btn{
    min-height:36px;
    padding:7px 10px !important;
    border-radius:11px !important;
    font-size:11px !important;
    flex:1 1 auto;
  }
  #clientsSection #clientsTable tr.client-row > td:nth-child(1) img,
  #clientsSection #clientsTable tr.client-row > td:nth-child(1) .client-photo,
  #clientsSection #clientsTable tr.client-row > td:nth-child(1) > *{
    max-width:56px;
  }

  body[data-sutil-theme="light"] #clientsSection #clientsTable tr.client-row{
    background:#fff !important;
    color:#22354c !important;
    border-color:#d8e0e8 !important;
    box-shadow:0 6px 16px rgba(30,52,78,.10);
  }
  body[data-sutil-theme="light"] #clientsSection #clientsTable tr.client-row:hover{
    background:#f8fafc !important;
  }
  body[data-sutil-theme="light"] #clientsSection #clientsTable tr.client-row > td:nth-child(2){
    color:#1f334a !important;
  }
  body[data-sutil-theme="light"] #clientsSection #clientsTable tr.client-row > td:nth-child(3),
  body[data-sutil-theme="light"] #clientsSection #clientsTable tr.client-row > td:nth-child(5){
    color:#617286 !important;
  }
  body[data-sutil-theme="light"] #clientsSection #clientsTable tr.client-row > td:nth-child(7){
    color:#157c87 !important;
  }
}
</style>

<style>
/* ============================================================
   SUTIL v90f · corrección visual modo oscuro · Pagos del cliente
   - Sin tocar navegación, lógica ni endpoints.
   - Ajusta únicamente contraste y superficies del módulo.
   ============================================================ */
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .card{
  background:#273244 !important;
  border-color:#4d5d78 !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-payments-shell{
  background:#273244 !important;
  border-color:#4d5d78 !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-payments-dark-head{
  background:linear-gradient(180deg,#2f3542 0%,#262c36 100%) !important;
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-payments-dark-head h3,
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-payments-dark-head strong{
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-payments-client-grid small{
  color:#cfd7e5 !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-picker-tools{
  background:#2e394d !important;
  border-bottom-color:#46566f !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-picker-tools label{
  color:#eef3ff !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-picker-list{
  background:#273244 !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-picker-row{
  background:#273244 !important;
  border-bottom-color:#425069 !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-picker-row:hover{
  background:#314057 !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-picker-name{
  color:#a9c9ff !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-picker-meta,
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-picker-empty,
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-payments-note,
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .payments-empty{
  color:#d5deec !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-period-box{
  background:#2e394d !important;
  border-color:#495975 !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-period-title,
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-period-option{
  color:#eef3ff !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-period-option{
  background:#263246 !important;
  border-color:#4d5d78 !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-period-option:hover{
  background:#304057 !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .payments-list{
  background:#273244 !important;
  border-color:#4d5d78 !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .payment-entry{
  border-bottom-color:#425069 !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .payment-entry:hover{
  background:#2e394d !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .payment-entry-meta,
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .payment-entry-code{
  color:#d5deec !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-payments-summary .card{
  background:#2e394d !important;
  border-color:#4d5d78 !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-payments-summary .muted,
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-payments-summary small{
  color:#d5deec !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-payments-footer-total{
  background:linear-gradient(180deg,#2f3542 0%,#262c36 100%) !important;
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-payments-footer-pdf{
  background:#e24d5f !important;
  color:#ffffff !important;
}
</style>


<style>
/* ============================================================
   SUTIL v90g · corrección visual modo oscuro · Ubicación de personal
   - Sin tocar navegación, lógica ni endpoints.
   - Ajusta únicamente contraste y superficies del módulo.
   ============================================================ */
body[data-sutil-theme="dark"] #staffLocationsPanel,
body[data-sutil-theme="dark"] #staffLocationsPanel.card{
  background:#273244 !important;
  border-color:#4d5d78 !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-subnav,
body[data-sutil-theme="dark"] #staffLocationsPanel h3,
body[data-sutil-theme="dark"] #staffLocationsPanel .muted,
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-state-pill{
  color:inherit;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-sidebar,
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-mapbox{
  background:#273244 !important;
  border-color:#4d5d78 !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-filters{
  background:#2e394d !important;
  border-bottom-color:#46566f !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-filters label{
  color:#eef3ff !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-filter-label{color:#dce6f5}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-select-trigger{background:#263246;color:#eef3ff;border-color:#4d5d78}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-select-trigger::after{color:#c7d2e5}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-select-menu{background:#1f2938;border-color:#4d5d78;box-shadow:0 18px 42px rgba(0,0,0,.38)}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-select-option{color:#eef3ff}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-select-option:hover,
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-select-option:focus{background:#2f3d53}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-select-option.selected{background:#33486d;color:#dce8ff}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-filters input,
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-filters select{
  background:#263246 !important;
  color:#f4f7ff !important;
  border-color:#4d5d78 !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-filters input::placeholder{
  color:#c7d1de !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-list{
  background:#273244 !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-row{
  background:#273244 !important;
  border-bottom-color:#425069 !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-row:hover,
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-row.active{
  background:#314057 !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-avatar{
  background:#dbe3ee !important;
  color:#31435b !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-person strong,
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-maphead strong,
body[data-sutil-theme="dark"] #staffLocationsPanel #staffLocationSelectedName{
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-person small,
body[data-sutil-theme="dark"] #staffLocationsPanel #staffLocationSelectedMeta,
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-footer{
  color:#d5deec !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-state{
  background:#3d4a5f !important;
  color:#eef3ff !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-state.live{
  background:#183f2b !important;
  color:#9cf0be !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-maphead{
  background:#273244 !important;
  border-bottom-color:#46566f !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-maparea{
  background:linear-gradient(180deg,#263246,#202a3b) !important;
  color:#d5deec !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-maparea > div,
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-maparea span,
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-maparea strong{
  color:#d5deec !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-maparea strong{
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] #staffLocationsPanel .staff-location-footer{
  background:#273244 !important;
  border-top-color:#46566f !important;
}
</style>


<style>
/* ============================================================
   SUTIL v90h · modo oscuro · Registrar nuevo funcionario
   Ajuste exclusivamente visual del formulario de Personal.
   ============================================================ */
body[data-sutil-theme="dark"] #staffCreatePanel.staff-create-card{
  background:linear-gradient(180deg,#293548 0%,#263145 100%) !important;
  border-color:#4d5d78 !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel .staff-create-head h2{
  color:#ffffff !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel .staff-create-head .muted,
body[data-sutil-theme="dark"] #staffCreatePanel #staffRoleHelp,
body[data-sutil-theme="dark"] #staffCreatePanel .muted,
body[data-sutil-theme="dark"] #staffCreatePanel small{
  color:#b9c5d7 !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel .staff-block{
  background:#2e394d !important;
  border-color:#4b5a73 !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel .staff-block-title,
body[data-sutil-theme="dark"] #staffCreatePanel .staff-block h4,
body[data-sutil-theme="dark"] #staffCreatePanel .staff-block h5{
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel label{
  color:#eef3ff !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel input,
body[data-sutil-theme="dark"] #staffCreatePanel select,
body[data-sutil-theme="dark"] #staffCreatePanel textarea{
  background:#253044 !important;
  color:#f4f7ff !important;
  border-color:#596a88 !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel input::placeholder,
body[data-sutil-theme="dark"] #staffCreatePanel textarea::placeholder{
  color:#93a2b8 !important;
  opacity:1 !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel select option{
  background:#253044 !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel .staff-route-create-grid .inline-check{
  background:#263246 !important;
  border-color:#4d5d78 !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel .staff-route-create-grid .inline-check:hover{
  background:#314057 !important;
  border-color:#667896 !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel .staff-permission-group{
  background:#263246 !important;
  border-color:#4d5d78 !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel .staff-permission-group h5{
  color:#eef3ff !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel .staff-permission-list .inline-check{
  background:#2b384c !important;
  border-color:#46566f !important;
  color:#eef3ff !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel .staff-permission-list .inline-check:hover{
  background:#35455d !important;
}
body[data-sutil-theme="dark"] #staffCreatePanel input[type="checkbox"],
body[data-sutil-theme="dark"] #staffCreatePanel input[type="radio"]{
  background:transparent !important;
  accent-color:#6c70ea;
}
</style>


<style>
/* ============================================================
   SUTIL v90i · modo claro · Registrar nuevo funcionario
   Corrige contraste de textos y títulos en el formulario
   sin afectar la versión en modo oscuro.
   ============================================================ */
body[data-sutil-theme="light"] #staffCreatePanel.staff-create-card{
  background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%) !important;
  border-color:#d9e2ec !important;
  color:#1f2937 !important;
}

body[data-sutil-theme="light"] #staffCreatePanel .staff-create-head h2{
  color:#1b2a3a !important;
}

body[data-sutil-theme="light"] #staffCreatePanel .staff-create-head .muted,
body[data-sutil-theme="light"] #staffCreatePanel #staffRoleHelp,
body[data-sutil-theme="light"] #staffCreatePanel .muted,
body[data-sutil-theme="light"] #staffCreatePanel small{
  color:#5f6b78 !important;
}

body[data-sutil-theme="light"] #staffCreatePanel .staff-block{
  background:#f8fbff !important;
  border-color:#d9e2ec !important;
  color:#1f2937 !important;
}

body[data-sutil-theme="light"] #staffCreatePanel .staff-block-title,
body[data-sutil-theme="light"] #staffCreatePanel .staff-block h4,
body[data-sutil-theme="light"] #staffCreatePanel .staff-block h5{
  color:#26384a !important;
}

body[data-sutil-theme="light"] #staffCreatePanel label{
  color:#324559 !important;
}

body[data-sutil-theme="light"] #staffCreatePanel input,
body[data-sutil-theme="light"] #staffCreatePanel select,
body[data-sutil-theme="light"] #staffCreatePanel textarea{
  background:#ffffff !important;
  color:#1f2937 !important;
  border-color:#c8d3df !important;
}

body[data-sutil-theme="light"] #staffCreatePanel input::placeholder,
body[data-sutil-theme="light"] #staffCreatePanel textarea::placeholder{
  color:#8a96a5 !important;
  opacity:1 !important;
}

body[data-sutil-theme="light"] #staffCreatePanel select option{
  background:#ffffff !important;
  color:#1f2937 !important;
}

body[data-sutil-theme="light"] #staffCreatePanel .staff-route-create-grid .inline-check{
  background:#ffffff !important;
  border-color:#d7dfe8 !important;
  color:#26384a !important;
}

body[data-sutil-theme="light"] #staffCreatePanel .staff-route-create-grid .inline-check *,
body[data-sutil-theme="light"] #staffCreatePanel .staff-route-create-grid .inline-check span{
  color:#26384a !important;
}

body[data-sutil-theme="light"] #staffCreatePanel .staff-route-create-grid .inline-check:hover{
  background:#f4f8fc !important;
  border-color:#bfcddb !important;
}

body[data-sutil-theme="light"] #staffCreatePanel .staff-permission-group{
  background:#ffffff !important;
  border-color:#d7dfe8 !important;
  color:#1f2937 !important;
}

body[data-sutil-theme="light"] #staffCreatePanel .staff-permission-group h5{
  color:#33465a !important;
}

body[data-sutil-theme="light"] #staffCreatePanel .staff-permission-list .inline-check{
  background:#f7f9fc !important;
  border-color:#e1e7ee !important;
  color:#26384a !important;
}

body[data-sutil-theme="light"] #staffCreatePanel .staff-permission-list .inline-check *,
body[data-sutil-theme="light"] #staffCreatePanel .staff-permission-list .inline-check span{
  color:#26384a !important;
}

body[data-sutil-theme="light"] #staffCreatePanel input[type="checkbox"],
body[data-sutil-theme="light"] #staffCreatePanel input[type="radio"]{
  accent-color:#5968d8;
}
</style>


<style>
/* ============================================================
   SUTIL v90j · cuadrícula de módulos en Inicio (móvil)
   Base: v90i. Solo distribución visual; sin cambios de lógica.
   - Gestión de clientes (5): 3 izquierda / 2 derecha.
   - Operación y rutas (7): 4 izquierda / 3 derecha.
   - Análisis y control (1): se mantiene en una sola columna.
   - Configuración y herramientas (2): 1 izquierda / 1 derecha.
   ============================================================ */
@media (max-width:650px){
  /* Los grupos con varias funciones quedan en 2 columnas reales. */
  #homeSection .home-module-group:not(.analysis) .module-grid{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    align-items:stretch;
  }

  /* Análisis tiene una sola función: conserva una tarjeta amplia. */
  #homeSection .home-module-group.analysis .module-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  /* Tarjetas más compactas para que dos columnas respiren bien en celular. */
  #homeSection .home-module-group .module{
    min-width:0 !important;
    min-height:128px !important;
    padding:12px 9px !important;
  }
  #homeSection .home-module-group .module-icon{
    font-size:30px !important;
    margin-bottom:7px !important;
  }
  #homeSection .home-module-group .module-title{
    font-size:16px !important;
    line-height:1.15 !important;
    overflow-wrap:anywhere;
  }
  #homeSection .home-module-group .module small{
    font-size:11.5px !important;
    line-height:1.3 !important;
    overflow-wrap:anywhere;
  }
}

/* La regla antigua de <=430px convertía todo a una sola columna.
   Esta corrección mantiene la nueva cuadrícula también en teléfonos angostos. */
@media (max-width:430px){
  #homeSection .home-module-group:not(.analysis) .module-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  #homeSection .home-module-group.analysis .module-grid{
    grid-template-columns:1fr !important;
  }
  #homeSection .home-module-group .module{
    min-height:122px !important;
    padding:11px 8px !important;
  }
  #homeSection .home-module-group .module-title{
    font-size:15px !important;
  }
  #homeSection .home-module-group .module small{
    font-size:11px !important;
  }
}
</style>


<style>
/* ============================================================
   SUTIL v90l · interfaz organizada del chat con clientes
   Solo afecta #chatsSection. No modifica endpoints ni permisos.
   ============================================================ */

#chatsSection .sutil-chat-center{
  grid-template-columns:minmax(300px,355px) minmax(0,1fr);
  gap:16px;
  align-items:stretch;
}

#chatsSection .sutil-chat-directory,
#chatsSection .sutil-chat-center-panel{
  min-height:620px;
}

#chatsSection .sutil-chat-center-panel{
  align-items:stretch;
  justify-content:stretch;
}

#chatsSection .sutil-chat-center-panel .sutil-chat-shell{
  width:100%;
  height:620px;
  max-height:620px;
  margin:0;
}

#chatsSection .sutil-chat-shell-organized{
  border-radius:20px;
  border:1px solid var(--s-border,#53627d);
  box-shadow:0 14px 34px rgba(15,23,42,.12);
}

#chatsSection .sutil-chat-head-organized{
  min-height:72px;
  padding:11px 13px;
}

#chatsSection .sutil-chat-client-identity{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
}

#chatsSection .sutil-chat-conversation-avatar{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  font-size:17px;
  font-weight:900;
  background:#e9eef5;
  color:#31445a;
  border:1px solid #d5dee8;
}

#chatsSection .sutil-chat-conversation-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}

#chatsSection .sutil-chat-client-copy{
  min-width:0;
}

#chatsSection .sutil-chat-client-copy strong{
  display:block;
  font-size:15px;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#chatsSection .sutil-chat-client-copy small{
  display:block;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

#chatsSection .sutil-chat-head-actions{
  display:flex;
  gap:7px;
  align-items:center;
  flex:0 0 auto;
}

#chatsSection .sutil-chat-head-icon{
  width:36px;
  height:36px;
  border-radius:50%;
  border:1px solid #d7e0e7;
  background:#fff;
  color:#405261;
  cursor:pointer;
  font-size:20px;
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:center;
}

#chatsSection .sutil-chat-messages-organized{
  padding:16px 14px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.30), transparent 28%),
    #ece8e1;
}

#chatsSection .sutil-chat-row{
  margin:8px 0;
}

#chatsSection .sutil-chat-bubble{
  max-width:min(78%,520px);
  padding:9px 11px;
  border-radius:15px;
}

#chatsSection .sutil-chat-row.client .sutil-chat-bubble{
  border-bottom-left-radius:5px;
}

#chatsSection .sutil-chat-row.staff .sutil-chat-bubble{
  border-bottom-right-radius:5px;
}

#chatsSection .sutil-chat-compose-organized{
  grid-template-columns:42px minmax(0,1fr) 42px;
  gap:8px;
  padding:9px 10px;
  align-items:end;
}

#chatsSection .sutil-chat-compose-organized textarea{
  min-height:42px;
  max-height:100px;
  border-radius:22px;
  padding:10px 13px;
  line-height:1.25;
}

#chatsSection .sutil-chat-attach-btn,
#chatsSection .sutil-chat-send-btn{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

#chatsSection .sutil-chat-send-btn{
  border:0;
  background:var(--sutil-secondary,#148343);
  color:#fff;
  font-size:18px;
  font-weight:900;
}

#chatsSection .sutil-chat-status-organized{
  min-height:20px;
  padding:2px 12px 7px;
}

#chatsSection .sutil-chat-mobile-toolbar{
  display:none;
}

/* Modo oscuro */
body[data-sutil-theme="dark"] #chatsSection .sutil-chat-shell-organized{
  background:#273244 !important;
  border-color:#52617d !important;
}

body[data-sutil-theme="dark"] #chatsSection .sutil-chat-head-organized{
  background:#2e394d !important;
  border-bottom-color:#46566f !important;
}

body[data-sutil-theme="dark"] #chatsSection .sutil-chat-conversation-avatar{
  background:#35445b !important;
  color:#f4f7ff !important;
  border-color:#60708d !important;
}

body[data-sutil-theme="dark"] #chatsSection .sutil-chat-client-copy strong{
  color:#ffffff !important;
}

body[data-sutil-theme="dark"] #chatsSection .sutil-chat-client-copy small{
  color:#b9c5d7 !important;
}

body[data-sutil-theme="dark"] #chatsSection .sutil-chat-head-icon,
body[data-sutil-theme="dark"] #chatsSection .sutil-chat-menu summary{
  background:#344259 !important;
  color:#eef3ff !important;
  border-color:#5b6b87 !important;
}

body[data-sutil-theme="dark"] #chatsSection .sutil-chat-messages-organized{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.035), transparent 28%),
    #1f2938 !important;
}

body[data-sutil-theme="dark"] #chatsSection .sutil-chat-row.client .sutil-chat-bubble{
  background:#313e53 !important;
  border-color:#4c5b75 !important;
  color:#f4f7ff !important;
}

body[data-sutil-theme="dark"] #chatsSection .sutil-chat-compose-organized,
body[data-sutil-theme="dark"] #chatsSection .sutil-chat-status-organized{
  background:#2e394d !important;
  border-color:#46566f !important;
}

body[data-sutil-theme="dark"] #chatsSection .sutil-chat-attach-btn{
  background:#344259 !important;
  color:#eef3ff !important;
  border-color:#5b6b87 !important;
}

/* Flujo móvil: lista -> conversación, sin mostrar ambas apretadas */
@media(max-width:860px){
  #chatsSection .sutil-chat-center{
    display:block;
  }

  #chatsSection .sutil-chat-directory{
    min-height:auto;
  }

  #chatsSection .sutil-chat-center-panel{
    min-height:0;
    margin-top:12px;
  }

  #chatsSection .sutil-chat-center-panel .sutil-chat-shell{
    width:100%;
    height:68dvh;
    min-height:500px;
    max-height:720px;
  }

  #chatsSection.chat-mobile-open > .card,
  #chatsSection.chat-mobile-open .sutil-chat-directory{
    display:none !important;
  }

  #chatsSection.chat-mobile-open .sutil-chat-center-panel{
    margin-top:0;
  }

  #chatsSection.chat-mobile-open .sutil-chat-shell{
    margin-bottom:112px;
  }

  #chatsSection .sutil-chat-mobile-toolbar{
    display:block;
    padding:8px 10px 0;
    background:inherit;
  }

  #chatsSection .sutil-chat-mobile-back{
    border:0;
    background:transparent;
    color:var(--sutil-primary,#1769aa);
    font:inherit;
    font-weight:900;
    padding:7px 2px;
    cursor:pointer;
  }

  #chatsSection .sutil-chat-head-organized{
    min-height:68px;
  }

  #chatsSection .sutil-chat-bubble{
    max-width:88%;
  }
}

@media(max-width:520px){
  #chatsSection .sutil-chat-center-panel .sutil-chat-shell{
    height:70dvh;
    min-height:500px;
  }

  #chatsSection .sutil-chat-conversation-avatar{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  #chatsSection .sutil-chat-client-copy strong{
    font-size:14px;
  }

  #chatsSection .sutil-chat-client-copy small{
    font-size:10px;
  }

  #chatsSection .sutil-chat-compose-organized{
    grid-template-columns:40px minmax(0,1fr) 40px;
  }

  #chatsSection .sutil-chat-attach-btn,
  #chatsSection .sutil-chat-send-btn{
    width:40px;
    height:40px;
  }
}
</style>


<style>
/* ============================================================
   SUTIL v90o · guardado de Configuración
   - Corrige Beneficios sin depender de globals automáticos por ID.
   - Evita mostrar errores JavaScript crudos al usuario.
   - Organiza el bloque final de Guardar configuración.
   ============================================================ */
#settingsSection .settings-save-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px 16px;
  align-items:center;
  padding:16px;
}

#settingsSection .settings-save-copy strong{
  display:block;
  font-size:16px;
  color:var(--s-text,#1f2937);
}

#settingsSection .settings-save-copy span{
  display:block;
  margin-top:4px;
  font-size:13px;
  color:var(--s-muted,#68717c);
}

#settingsSection .settings-save-button{
  min-width:210px;
}

#settingsSection .settings-save-status{
  grid-column:1/-1;
  margin-top:0;
  line-height:1.35;
}

#settingsSection .settings-save-status:empty{
  display:none !important;
}

body[data-sutil-theme="dark"] #settingsSection .settings-save-card{
  background:#293548 !important;
  border-color:#4d5d78 !important;
}

body[data-sutil-theme="dark"] #settingsSection .settings-save-copy strong{
  color:#f4f7ff !important;
}

body[data-sutil-theme="dark"] #settingsSection .settings-save-copy span{
  color:#b9c5d7 !important;
}

@media(max-width:650px){
  #settingsSection .settings-save-card{
    grid-template-columns:1fr;
  }
  #settingsSection .settings-save-button{
    width:100%;
    min-width:0;
  }
  #settingsSection .settings-save-status{
    grid-column:1;
  }
}
</style>


<style>
/* ============================================================
   SUTIL v90p · inicio operativo compacto
   4 indicadores en muy poco espacio:
   Recogido / En comprobación / Personal operando / Cajas abiertas.
   ============================================================ */

#homeSection .home-ops-kpis{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:4px 0 12px;
}

#homeSection .home-ops-kpis.owner-view{
  grid-template-columns:repeat(4,minmax(0,1fr));
}

#homeSection .home-ops-kpi{
  min-width:0;
  min-height:76px;
  padding:11px 12px;
  border:1px solid var(--s-border,#d9e0e7);
  border-radius:15px;
  background:var(--s-surface,#fff);
  box-shadow:0 3px 12px rgba(15,23,42,.06);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

#homeSection .home-ops-kpi-label{
  min-width:0;
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  line-height:1.15;
  font-weight:800;
  color:var(--s-muted,#5f6b78);
}

#homeSection .home-ops-kpi-label span:last-child{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
}

#homeSection .home-ops-kpi-value{
  display:block;
  margin-top:5px;
  font-size:clamp(18px,2vw,24px);
  line-height:1;
  letter-spacing:-.25px;
  color:var(--s-title,#172b3d);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}

body[data-sutil-theme="dark"] #homeSection .home-ops-kpi{
  background:#2b374b !important;
  border-color:#4f5f7b !important;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
}

body[data-sutil-theme="dark"] #homeSection .home-ops-kpi-label{
  color:#c0cbda !important;
}

body[data-sutil-theme="dark"] #homeSection .home-ops-kpi-value{
  color:#ffffff !important;
}

/* En móvil quedan 2 x 2; ocupan menos altura que los 2 cuadros anteriores. */
@media(max-width:720px){
  #homeSection .home-ops-kpis,
  #homeSection .home-ops-kpis.owner-view{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    margin-bottom:10px;
  }

  #homeSection .home-ops-kpi{
    min-height:70px;
    padding:9px 10px;
    border-radius:13px;
  }

  #homeSection .home-ops-kpi-label{
    font-size:11px;
  }

  #homeSection .home-ops-kpi-value{
    font-size:20px;
  }
}

@media(max-width:390px){
  #homeSection .home-ops-kpi{
    min-height:66px;
    padding:8px 9px;
  }

  #homeSection .home-ops-kpi-label{
    font-size:10.5px;
  }

  #homeSection .home-ops-kpi-value{
    font-size:18px;
  }
}
</style>


<style>
/* ============================================================
   SUTIL v90q · indicadores operativos como botones directos
   Mantiene el mismo tamaño compacto del inicio.
   ============================================================ */
#homeSection .home-ops-button{
  position:relative;
  appearance:none;
  width:100%;
  text-align:left;
  cursor:pointer;
  font:inherit;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;
}

#homeSection .home-ops-button:hover{
  transform:translateY(-1px);
  border-color:var(--sutil-primary,#1769aa);
  box-shadow:0 6px 16px rgba(15,23,42,.10);
}

#homeSection .home-ops-button:active{
  transform:scale(.985);
}

#homeSection .home-ops-button:focus-visible{
  outline:3px solid rgba(89,104,216,.28);
  outline-offset:2px;
}

#homeSection .home-ops-kpi-arrow{
  position:absolute;
  right:9px;
  bottom:7px;
  font-size:19px;
  line-height:1;
  font-weight:900;
  opacity:.42;
  color:var(--s-muted,#5f6b78);
}

body[data-sutil-theme="dark"] #homeSection .home-ops-kpi-arrow{
  color:#c4cfde !important;
}
</style>


<style>
/* ============================================================
   SUTIL v90r · contraste "Tiempo real" en modo oscuro
   Corrección exclusivamente visual.
   ============================================================ */
body[data-sutil-theme="dark"] #staffLocationsPanel h3 .staff-state-pill.active{
  background:#bff4cf !important;
  color:#145b34 !important;
  border:1px solid #7fd6a2 !important;
  text-shadow:none !important;
}
</style>


<style>
/* ============================================================
   SUTIL v90s · Cobros · 3 accesos en una sola fila
   Solo ajuste visual/responsive de los tres botones superiores.
   ============================================================ */
#collectionsSection .collections-option-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:10px !important;
  align-items:stretch;
}

#collectionsSection .collections-option{
  min-width:0;
  min-height:138px;
  padding:12px 9px;
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

#collectionsSection .collections-option-icon{
  font-size:30px;
  line-height:1;
  margin-bottom:7px;
}

#collectionsSection .collections-option-title{
  width:100%;
  font-size:16px;
  line-height:1.1;
  overflow-wrap:break-word;
}

#collectionsSection .collections-option small{
  width:100%;
  margin-top:7px;
  font-size:11px;
  line-height:1.22;
  overflow-wrap:break-word;
}

/* Mantener los 3 botones lado a lado también en celular */
@media(max-width:760px){
  #collectionsSection .collections-option-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:7px !important;
    margin:11px 0 !important;
  }

  #collectionsSection .collections-option{
    min-height:132px !important;
    padding:10px 6px !important;
    border-radius:14px !important;
  }

  #collectionsSection .collections-option-icon{
    font-size:27px !important;
    margin-bottom:6px !important;
  }

  #collectionsSection .collections-option-title{
    font-size:13.5px !important;
    line-height:1.08 !important;
  }

  #collectionsSection .collections-option small{
    font-size:9.7px !important;
    line-height:1.18 !important;
    margin-top:6px !important;
  }
}

@media(max-width:390px){
  #collectionsSection .collections-option-grid{
    gap:6px !important;
  }

  #collectionsSection .collections-option{
    min-height:128px !important;
    padding:9px 5px !important;
  }

  #collectionsSection .collections-option-icon{
    font-size:25px !important;
  }

  #collectionsSection .collections-option-title{
    font-size:12.5px !important;
  }

  #collectionsSection .collections-option small{
    font-size:9px !important;
  }
}
</style>


<style>
/* ============================================================
   SUTIL v90t · Pagos recibidos · Ordenar por compacto
   Solo ajuste visual de los dos selectores de orden.
   ============================================================ */
#collectionsReceivedPane .payments-order-compact{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:center;
  margin:12px 0;
}

#collectionsReceivedPane .payments-order-compact > strong{
  white-space:nowrap;
  font-size:14px;
}

#collectionsReceivedPane .payments-order-segment{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
  min-width:0;
}

#collectionsReceivedPane .payments-order-segment .radio-pill{
  min-width:0;
  min-height:44px;
  margin:0;
  padding:8px 10px;
  justify-content:center;
  border-radius:12px;
  cursor:pointer;
  text-align:center;
  line-height:1.1;
}

#collectionsReceivedPane .payments-order-segment .radio-pill input{
  width:17px !important;
  height:17px !important;
  flex:0 0 17px;
}

#collectionsReceivedPane .payments-order-segment .radio-pill span{
  font-size:14px;
  font-weight:800;
  white-space:nowrap;
}

@media(max-width:520px){
  #collectionsReceivedPane .payments-order-compact{
    grid-template-columns:1fr;
    gap:7px;
  }

  #collectionsReceivedPane .payments-order-compact > strong{
    font-size:13px;
  }

  #collectionsReceivedPane .payments-order-segment{
    gap:6px;
  }

  #collectionsReceivedPane .payments-order-segment .radio-pill{
    min-height:42px;
    padding:7px 8px;
  }

  #collectionsReceivedPane .payments-order-segment .radio-pill span{
    font-size:13px;
  }
}
</style>


<style>
/* ============================================================
   SUTIL v90u · Pagos recibidos · período optimizado
   - Hoy / Ayer / Entre fechas en un selector compacto.
   - Las fechas aparecen únicamente al elegir "Entre fechas".
   ============================================================ */

#collectionsReceivedPane .payments-period-compact{
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:10px;
  align-items:center;
  margin:12px 0;
}

#collectionsReceivedPane .payments-period-compact > strong{
  white-space:nowrap;
  font-size:14px;
}

#collectionsReceivedPane .payments-period-segment{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:6px;
}

#collectionsReceivedPane .payments-period-segment .radio-pill{
  margin:0;
  min-width:0;
  min-height:42px;
  padding:7px 8px;
  justify-content:center;
  text-align:center;
  border-radius:12px;
  cursor:pointer;
}

#collectionsReceivedPane .payments-period-segment .radio-pill input{
  width:16px !important;
  height:16px !important;
  flex:0 0 16px;
}

#collectionsReceivedPane .payments-period-segment .radio-pill span{
  font-size:13px;
  font-weight:800;
  line-height:1.1;
}

#collectionsReceivedPane .received-payments-date-range{
  display:none;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:2px 0 12px;
  padding:12px;
  border:1px solid var(--s-border,#d9e0e7);
  border-radius:14px;
  background:var(--s-surface-soft,#f6f8fb);
}

#collectionsReceivedPane .received-payments-date-range.open{
  display:grid;
}

#collectionsReceivedPane .received-payments-date-range label{
  margin:0;
}

body[data-sutil-theme="dark"] #collectionsReceivedPane .received-payments-date-range{
  background:#2b374b !important;
  border-color:#4f5f7b !important;
}

@media(max-width:560px){
  #collectionsReceivedPane .payments-period-compact{
    grid-template-columns:1fr;
    gap:7px;
  }

  #collectionsReceivedPane .payments-period-compact > strong{
    font-size:13px;
  }

  #collectionsReceivedPane .payments-period-segment{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:5px;
  }

  #collectionsReceivedPane .payments-period-segment .radio-pill{
    min-height:40px;
    padding:6px 5px;
  }

  #collectionsReceivedPane .payments-period-segment .radio-pill span{
    font-size:12px;
  }

  #collectionsReceivedPane .received-payments-date-range{
    grid-template-columns:1fr 1fr;
    gap:7px;
    padding:10px;
  }
}

@media(max-width:390px){
  #collectionsReceivedPane .payments-period-segment .radio-pill{
    padding:6px 4px;
  }

  #collectionsReceivedPane .payments-period-segment .radio-pill span{
    font-size:11px;
  }

  #collectionsReceivedPane .received-payments-date-range{
    grid-template-columns:1fr;
  }
}
</style>


<style>
/* ============================================================
   SUTIL v90v · Pagos del cliente
   Buscar cliente arriba de "Seleccione un cliente".
   ============================================================ */
#collectionsClientPaymentsPane .client-picker-tools-top{
  border-bottom:1px solid var(--s-border,#d9e0e7);
  border-radius:18px 18px 0 0;
  padding:14px;
}

#collectionsClientPaymentsPane .client-picker-tools-top label{
  margin:0;
  display:block;
}

#collectionsClientPaymentsPane .client-picker-tools-top input{
  margin-top:7px;
}

#collectionsClientPaymentsPane .client-picker-tools-top + .client-payments-dark-head{
  border-radius:0;
}

body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-picker-tools-top{
  background:#2e394d !important;
  border-bottom-color:#46566f !important;
}

body[data-sutil-theme="light"] #collectionsClientPaymentsPane .client-picker-tools-top{
  background:#f7f9fc !important;
  border-bottom-color:#d9e2ec !important;
}
</style>


<style>
/* ============================================================
   SUTIL v90w · búsqueda inteligente de clientes
   Misma experiencia en:
   Saldo deudor / Pagos recibidos / Pagos del cliente.
   ============================================================ */

#collectionsSection .client-smart-search{
  position:relative;
  min-width:0;
}

#collectionsSection .client-smart-search > label{
  display:block;
  margin:0;
}

#collectionsSection .client-smart-suggestions{
  display:none;
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 5px);
  z-index:120;
  max-height:330px;
  overflow:auto;
  border:1px solid var(--s-border,#d9e0e7);
  border-radius:14px;
  background:var(--s-surface,#fff);
  box-shadow:0 14px 34px rgba(15,23,42,.18);
  padding:5px;
}

#collectionsSection .client-smart-suggestions.open{
  display:block;
}

#collectionsSection .client-smart-item{
  width:100%;
  min-width:0;
  border:0;
  border-radius:10px;
  background:transparent;
  color:var(--s-text,#1f2937);
  padding:9px 10px;
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  gap:9px;
  align-items:center;
  text-align:left;
  cursor:pointer;
  font:inherit;
}

#collectionsSection .client-smart-item:hover,
#collectionsSection .client-smart-item.best{
  background:rgba(89,104,216,.10);
}

#collectionsSection .client-smart-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#e9eef5;
  color:#31445a;
  font-weight:900;
}

#collectionsSection .client-smart-copy{
  min-width:0;
}

#collectionsSection .client-smart-copy strong{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:inherit;
}

#collectionsSection .client-smart-copy small{
  display:block;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:var(--s-muted,#68717c);
  font-size:11px;
}

#collectionsSection .client-smart-best{
  font-size:9px;
  line-height:1.1;
  font-weight:900;
  padding:4px 6px;
  border-radius:999px;
  background:#e9e7ff;
  color:#5540b6;
  white-space:nowrap;
}

#collectionsSection .client-smart-empty{
  padding:13px 11px;
  color:var(--s-muted,#68717c);
  font-size:13px;
  text-align:center;
}

body[data-sutil-theme="dark"] #collectionsSection .client-smart-suggestions{
  background:#273244 !important;
  border-color:#52617d !important;
  box-shadow:0 16px 36px rgba(0,0,0,.35);
}

body[data-sutil-theme="dark"] #collectionsSection .client-smart-item{
  color:#f4f7ff !important;
}

body[data-sutil-theme="dark"] #collectionsSection .client-smart-item:hover,
body[data-sutil-theme="dark"] #collectionsSection .client-smart-item.best{
  background:#35445b !important;
}

body[data-sutil-theme="dark"] #collectionsSection .client-smart-avatar{
  background:#3b4a62 !important;
  color:#ffffff !important;
}

body[data-sutil-theme="dark"] #collectionsSection .client-smart-copy small,
body[data-sutil-theme="dark"] #collectionsSection .client-smart-empty{
  color:#bdc8d8 !important;
}

body[data-sutil-theme="dark"] #collectionsSection .client-smart-best{
  background:#4e477d !important;
  color:#eeeaff !important;
}

@media(max-width:560px){
  #collectionsSection .client-smart-item{
    grid-template-columns:34px minmax(0,1fr);
    padding:8px;
  }

  #collectionsSection .client-smart-avatar{
    width:34px;
    height:34px;
  }

  #collectionsSection .client-smart-best{
    grid-column:2;
    justify-self:start;
    margin-top:-3px;
  }
}
</style>


<style>
/* ============================================================
   SUTIL v90y · Pagos del cliente
   Barra de búsqueda persistente al seleccionar un cliente.
   ============================================================ */

#collectionsClientPaymentsPane .client-payments-persistent-search{
  position:relative;
  z-index:130;
  margin-bottom:10px;
  padding:13px 14px;
  border:1px solid var(--s-border,#d9e0e7);
  border-radius:16px;
  background:var(--s-surface-soft,#f7f9fc);
}

#collectionsClientPaymentsPane .client-payments-persistent-search label{
  display:block;
  margin:0;
}

#collectionsClientPaymentsPane .client-payments-persistent-search input{
  margin-top:7px;
}

body[data-sutil-theme="dark"] #collectionsClientPaymentsPane .client-payments-persistent-search{
  background:#2e394d !important;
  border-color:#4d5d78 !important;
}

body[data-sutil-theme="light"] #collectionsClientPaymentsPane .client-payments-persistent-search{
  background:#f7f9fc !important;
  border-color:#d9e2ec !important;
}

/* Las sugerencias deben aparecer por encima de la ficha del cliente. */
#collectionsClientPaymentsPane .client-payments-persistent-search .client-smart-suggestions{
  z-index:300 !important;
}
</style>


<style>
/* ============================================================
   SUTIL v90z · Pagos del cliente
   Antes de seleccionar: solo búsqueda + lista.
   Los datos del cliente aparecen únicamente después de seleccionarlo.
   ============================================================ */
#collectionsClientPaymentsPane .client-payments-picker-clean{
  border-top-left-radius:16px;
  border-top-right-radius:16px;
}

#collectionsClientPaymentsPane .client-payments-picker-clean .client-picker-list{
  border-top:0 !important;
}

#collectionsClientPaymentsPane .client-payments-picker-clean .client-picker-row:first-child{
  border-top:0 !important;
}
</style>


<style>
/* ============================================================
   SUTIL v91a · Pagos del cliente · fechas condicionales
   Hoy/Ayer: oculta fechas y botón Buscar.
   Entre fechas: muestra Fecha inicial, Fecha final y Buscar.
   ============================================================ */
#collectionsClientPaymentsPane .client-payments-date-range{
  display:none !important;
}

#collectionsClientPaymentsPane .client-payments-date-range.open{
  display:grid !important;
}
</style>


<style>
/* ============================================================
   SUTIL v91b · Resumen de Cobros compacto
   Reduce altura y espacio entre indicadores.
   ============================================================ */
#collectionsDebtPane .collections-kpi-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:10px 0 12px;
}

#collectionsDebtPane .collections-kpi-card{
  min-width:0;
  min-height:82px;
  padding:11px 12px;
  border:1px solid var(--s-border,#d9e0e7);
  border-radius:14px;
  background:var(--s-surface,#fff);
  box-shadow:0 3px 10px rgba(15,23,42,.05);
  display:flex;
  flex-direction:column;
  justify-content:center;
}

#collectionsDebtPane .collections-kpi-card span{
  display:block;
  font-size:12px;
  line-height:1.15;
  font-weight:700;
  color:var(--s-muted,#68717c);
}

#collectionsDebtPane .collections-kpi-card strong{
  display:block;
  margin-top:5px;
  font-size:24px;
  line-height:1;
  font-weight:900;
  color:var(--s-title,#172b3d);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-variant-numeric:tabular-nums;
}

#collectionsDebtPane .collections-kpi-wide{
  grid-column:1/-1;
  min-height:74px;
}

body[data-sutil-theme="dark"] #collectionsDebtPane .collections-kpi-card{
  background:#2b374b !important;
  border-color:#4f5f7b !important;
}

body[data-sutil-theme="dark"] #collectionsDebtPane .collections-kpi-card span{
  color:#c0cbda !important;
}

body[data-sutil-theme="dark"] #collectionsDebtPane .collections-kpi-card strong{
  color:#ffffff !important;
}

body[data-sutil-theme="dark"] #collectionsDebtPane .collections-kpi-card .status-overdue{
  color:#ff8f99 !important;
}

body[data-sutil-theme="dark"] #collectionsDebtPane .collections-kpi-card .status-warning{
  color:#f0ca73 !important;
}

body[data-sutil-theme="dark"] #collectionsDebtPane .collections-kpi-card .status-current{
  color:#63d89c !important;
}

@media(max-width:520px){
  #collectionsDebtPane .collections-kpi-grid{
    gap:7px;
    margin-top:8px;
  }

  #collectionsDebtPane .collections-kpi-card{
    min-height:76px;
    padding:9px 10px;
    border-radius:13px;
  }

  #collectionsDebtPane .collections-kpi-card span{
    font-size:11px;
  }

  #collectionsDebtPane .collections-kpi-card strong{
    font-size:21px;
  }

  #collectionsDebtPane .collections-kpi-wide{
    min-height:70px;
  }
}
</style>


<style>
/* ============================================================
   SUTIL v91c · Pagos recibidos por ruta
   Selector de ruta + forma de pago en una fila compacta.
   ============================================================ */
#collectionsReceivedPane .received-payments-filter-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin:12px 0 10px;
}

#collectionsReceivedPane .received-payments-filter-grid label{
  min-width:0;
  margin:0;
}

#collectionsReceivedPane .received-payments-filter-grid select{
  width:100%;
}

#collectionsReceivedPane .received-payments-main-actions{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:9px;
  margin:0 0 12px;
}

#collectionsReceivedPane .received-payments-main-actions .btn{
  width:100%;
  min-width:0;
}

@media(max-width:430px){
  #collectionsReceivedPane .received-payments-filter-grid{
    gap:7px;
  }

  #collectionsReceivedPane .received-payments-filter-grid label{
    font-size:12px;
  }

  #collectionsReceivedPane .received-payments-filter-grid select{
    padding-left:9px;
    padding-right:28px;
    font-size:13px;
  }
}
</style>


<style>
/* ============================================================
   SUTIL v91d · Pagos recibidos por Ruta + Funcionario
   ============================================================ */
#collectionsReceivedPane .received-payments-filter-grid{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
}

@media(max-width:650px){
  #collectionsReceivedPane .received-payments-filter-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  #collectionsReceivedPane .received-payments-filter-grid label:nth-child(3){
    grid-column:1/-1;
  }
}
</style>


<style>
/* ============================================================
   SUTIL v91e · selector moderno Ruta / Funcionario
   Sustituye visualmente el menú nativo del teléfono.
   ============================================================ */

#collectionsReceivedPane .received-modern-filter-label{
  display:block;
  min-width:0;
}

#collectionsReceivedPane .received-native-select{
  position:absolute !important;
  width:1px !important;
  height:1px !important;
  padding:0 !important;
  margin:0 !important;
  opacity:0 !important;
  pointer-events:none !important;
  overflow:hidden !important;
}

#collectionsReceivedPane .received-modern-select{
  appearance:none;
  width:100%;
  min-width:0;
  min-height:64px;
  margin-top:5px;
  padding:9px 10px;
  border:1px solid var(--s-border,#cbd5e1);
  border-radius:13px;
  background:var(--s-input-bg,#fff);
  color:var(--s-input-text,#1f2937);
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 22px;
  gap:8px;
  align-items:center;
  text-align:left;
  cursor:pointer;
  font:inherit;
}

#collectionsReceivedPane .received-modern-select:active{
  transform:scale(.99);
}

#collectionsReceivedPane .received-modern-select-icon{
  width:34px;
  height:34px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(89,104,216,.10);
  font-size:18px;
}

#collectionsReceivedPane .received-modern-select-copy{
  min-width:0;
}

#collectionsReceivedPane .received-modern-select-copy strong{
  display:block;
  max-width:100%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  color:inherit;
  font-size:14px;
  line-height:1.15;
}

#collectionsReceivedPane .received-modern-select-copy small{
  display:block;
  max-width:100%;
  margin-top:3px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:10px;
  color:var(--s-muted,#68717c);
}

#collectionsReceivedPane .received-modern-select-chevron{
  font-size:20px;
  font-weight:900;
  opacity:.65;
  justify-self:end;
}

.received-filter-picker-backdrop{
  position:fixed;
  inset:0;
  z-index:100500;
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:12px;
  background:rgba(7,12,22,.62);
  backdrop-filter:blur(4px);
}

.received-filter-picker-backdrop.open{
  display:flex;
}

.received-filter-picker-sheet{
  width:min(620px,100%);
  max-height:min(78vh,720px);
  overflow:hidden;
  border:1px solid var(--s-border,#d5dee8);
  border-radius:24px 24px 18px 18px;
  background:var(--s-surface,#fff);
  color:var(--s-text,#1f2937);
  box-shadow:0 -14px 50px rgba(0,0,0,.28);
  display:flex;
  flex-direction:column;
  animation:receivedPickerUp .18s ease-out;
}

@keyframes receivedPickerUp{
  from{transform:translateY(22px);opacity:.45}
  to{transform:none;opacity:1}
}

.received-filter-picker-handle{
  width:46px;
  height:5px;
  border-radius:999px;
  margin:9px auto 3px;
  background:#aab5c3;
  opacity:.55;
}

.received-filter-picker-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:9px 16px 12px;
  border-bottom:1px solid var(--s-border,#d9e0e7);
}

.received-filter-picker-head small{
  display:block;
  margin-bottom:2px;
  color:var(--s-muted,#68717c);
  font-size:11px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.received-filter-picker-head h3{
  margin:0;
  color:var(--s-title,#172b3d);
  font-size:20px;
}

.received-filter-picker-close{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:1px solid var(--s-border,#d9e0e7);
  border-radius:50%;
  background:var(--s-surface-soft,#f6f8fb);
  color:var(--s-text,#1f2937);
  font-size:25px;
  line-height:1;
  cursor:pointer;
}

.received-filter-picker-search{
  margin:12px 14px 8px;
  padding:0 11px;
  min-height:46px;
  border:1px solid var(--s-border,#d9e0e7);
  border-radius:13px;
  background:var(--s-input-bg,#fff);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  gap:8px;
  align-items:center;
}

.received-filter-picker-search input{
  width:100%;
  margin:0 !important;
  padding:10px 0 !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  color:var(--s-input-text,#1f2937) !important;
}

.received-filter-picker-list{
  overflow:auto;
  overscroll-behavior:contain;
  padding:5px 10px max(18px,env(safe-area-inset-bottom));
}

.received-filter-picker-item{
  width:100%;
  min-width:0;
  min-height:64px;
  margin:5px 0;
  padding:9px 11px;
  border:1px solid transparent;
  border-radius:14px;
  background:transparent;
  color:var(--s-text,#1f2937);
  display:grid;
  grid-template-columns:40px minmax(0,1fr) 30px;
  gap:10px;
  align-items:center;
  text-align:left;
  cursor:pointer;
  font:inherit;
}

.received-filter-picker-item:hover,
.received-filter-picker-item.selected{
  background:rgba(89,104,216,.10);
  border-color:rgba(89,104,216,.34);
}

.received-filter-picker-item-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  background:var(--s-surface-soft,#f4f7fb);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
}

.received-filter-picker-item-copy{
  min-width:0;
}

.received-filter-picker-item-copy strong{
  display:block;
  white-space:normal;
  overflow-wrap:anywhere;
  color:inherit;
  font-size:15px;
  line-height:1.2;
}

.received-filter-picker-item-copy small{
  display:block;
  margin-top:4px;
  color:var(--s-muted,#68717c);
  font-size:11px;
  line-height:1.25;
  white-space:normal;
  overflow-wrap:anywhere;
}

.received-filter-picker-check{
  width:28px;
  height:28px;
  border:2px solid #a9b4c2;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  font-weight:900;
  color:#fff;
}

.received-filter-picker-item.selected .received-filter-picker-check{
  border-color:#5e6ce6;
  background:#5e6ce6;
}

.received-filter-picker-empty{
  padding:28px 14px;
  text-align:center;
  color:var(--s-muted,#68717c);
}

body.received-filter-picker-open{
  overflow:hidden;
}

/* Oscuro */
body[data-sutil-theme="dark"] #collectionsReceivedPane .received-modern-select{
  background:#253044 !important;
  border-color:#53627d !important;
  color:#f4f7ff !important;
}

body[data-sutil-theme="dark"] #collectionsReceivedPane .received-modern-select-icon{
  background:#35445b !important;
}

body[data-sutil-theme="dark"] #collectionsReceivedPane .received-modern-select-copy small{
  color:#b8c4d5 !important;
}

body[data-sutil-theme="dark"] .received-filter-picker-sheet{
  background:#273244 !important;
  border-color:#52617d !important;
  color:#f4f7ff !important;
}

body[data-sutil-theme="dark"] .received-filter-picker-head{
  border-bottom-color:#46566f !important;
}

body[data-sutil-theme="dark"] .received-filter-picker-head h3{
  color:#ffffff !important;
}

body[data-sutil-theme="dark"] .received-filter-picker-head small,
body[data-sutil-theme="dark"] .received-filter-picker-item-copy small,
body[data-sutil-theme="dark"] .received-filter-picker-empty{
  color:#bdc8d8 !important;
}

body[data-sutil-theme="dark"] .received-filter-picker-close,
body[data-sutil-theme="dark"] .received-filter-picker-search{
  background:#2e394d !important;
  border-color:#53627d !important;
  color:#f4f7ff !important;
}

body[data-sutil-theme="dark"] .received-filter-picker-item{
  color:#f4f7ff !important;
}

body[data-sutil-theme="dark"] .received-filter-picker-item:hover,
body[data-sutil-theme="dark"] .received-filter-picker-item.selected{
  background:#35445b !important;
  border-color:#667896 !important;
}

body[data-sutil-theme="dark"] .received-filter-picker-item-icon{
  background:#2e394d !important;
}

@media(max-width:650px){
  #collectionsReceivedPane .received-modern-select{
    min-height:60px;
    padding:8px 9px;
    grid-template-columns:32px minmax(0,1fr) 18px;
  }

  #collectionsReceivedPane .received-modern-select-icon{
    width:32px;
    height:32px;
    font-size:17px;
  }

  .received-filter-picker-backdrop{
    padding:0;
  }

  .received-filter-picker-sheet{
    width:100%;
    max-height:82dvh;
    border-radius:24px 24px 0 0;
    border-left:0;
    border-right:0;
    border-bottom:0;
  }
}
</style>


<style>
/* ============================================================
   SUTIL v91f · Selector Ruta / Funcionario en pantalla completa móvil
   Elimina el espacio vacío superior y aprovecha toda el área visible.
   ============================================================ */

@media(max-width:650px){
  .received-filter-picker-backdrop{
    padding:0 !important;
    align-items:stretch !important;
    justify-content:stretch !important;
  }

  .received-filter-picker-sheet{
    width:100% !important;
    height:100dvh !important;
    max-height:100dvh !important;
    min-height:100dvh !important;
    border-radius:0 !important;
    border:0 !important;
    box-shadow:none !important;
    padding-top:env(safe-area-inset-top) !important;
  }

  .received-filter-picker-handle{
    display:none !important;
  }

  .received-filter-picker-head{
    flex:0 0 auto;
    padding:14px 16px 12px !important;
  }

  .received-filter-picker-search{
    flex:0 0 auto;
    margin:12px 14px 8px !important;
  }

  .received-filter-picker-list{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:auto !important;
    padding-bottom:max(18px,env(safe-area-inset-bottom)) !important;
  }
}
</style>


<style>
/* ============================================================
   SUTIL v91j2 · Cobros · clientes sin desplazamiento horizontal
   Desktop conserva tabla. Móvil convierte cada fila en tarjeta completa.
   ============================================================ */

@media(max-width:760px){
  #collectionsDebtPane .table-wrap{
    overflow:visible !important;
    width:100% !important;
  }

  #collectionsDebtTable,
  #collectionsDebtTable tbody{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  #collectionsDebtTable thead{
    display:none !important;
  }

  #collectionsDebtTable .collections-mobile-card{
    width:100% !important;
    min-width:0 !important;
    margin:0 0 10px !important;
    padding:10px !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px 9px !important;
    border:1px solid var(--s-border,#d9e0e7) !important;
    border-radius:15px !important;
    background:var(--s-surface,#fff) !important;
    box-shadow:0 3px 10px rgba(15,23,42,.05) !important;
  }

  #collectionsDebtTable .collections-mobile-card > td{
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:7px 8px !important;
    border:0 !important;
    overflow:visible !important;
    white-space:normal !important;
    background:transparent !important;
  }

  #collectionsDebtTable .collections-mobile-card > td:not(.collections-mobile-client):not(.collections-mobile-actions-cell)::before{
    content:attr(data-label);
    display:block;
    margin-bottom:3px;
    font-size:10px;
    line-height:1.1;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.02em;
    color:var(--s-muted,#68717c);
  }

  #collectionsDebtTable .collections-mobile-client{
    grid-column:1/-1 !important;
    padding:5px 6px 8px !important;
    border-bottom:1px solid var(--s-border,#d9e0e7) !important;
  }

  #collectionsDebtTable .collections-client-cell{
    min-width:0 !important;
  }

  #collectionsDebtTable .collections-client-wrap{
    width:100% !important;
    min-width:0 !important;
    gap:9px !important;
    align-items:center !important;
  }

  #collectionsDebtTable .collections-client-text{
    min-width:0 !important;
    flex:1 1 auto !important;
  }

  #collectionsDebtTable .collections-client-name{
    display:block !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    font-size:14px !important;
    line-height:1.15 !important;
  }

  #collectionsDebtTable .collections-client-code{
    display:block !important;
    margin-top:3px !important;
    font-size:11px !important;
  }

  #collectionsDebtTable .client-photo{
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
  }

  #collectionsDebtTable .collections-compact-balance{
    white-space:normal !important;
    font-size:16px !important;
  }

  #collectionsDebtTable .collections-mobile-actions-cell{
    grid-column:1/-1 !important;
    padding:7px 0 0 !important;
    border-top:1px solid var(--s-border,#d9e0e7) !important;
  }

  #collectionsDebtTable .collections-actions{
    width:100% !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
  }

  #collectionsDebtTable .collections-actions .btn{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:9px 6px !important;
    font-size:11px !important;
    line-height:1.12 !important;
    white-space:normal !important;
  }

  /* En la búsqueda detallada: toda la información queda en 2 columnas. */
  #collectionsDebtTable .collections-mobile-detailed > td[data-label="Ruta"],
  #collectionsDebtTable .collections-mobile-detailed > td[data-label="PIX"]{
    grid-column:1/-1 !important;
  }

  body[data-sutil-theme="dark"] #collectionsDebtTable .collections-mobile-card{
    background:#2b374b !important;
    border-color:#4f5f7b !important;
    box-shadow:0 4px 12px rgba(0,0,0,.10) !important;
  }

  body[data-sutil-theme="dark"] #collectionsDebtTable .collections-mobile-client,
  body[data-sutil-theme="dark"] #collectionsDebtTable .collections-mobile-actions-cell{
    border-color:#46566f !important;
  }

  body[data-sutil-theme="dark"] #collectionsDebtTable .collections-mobile-card > td:not(.collections-mobile-client):not(.collections-mobile-actions-cell)::before{
    color:#aebacc !important;
  }
}

@media(max-width:390px){
  #collectionsDebtTable .collections-mobile-card{
    gap:6px !important;
    padding:8px !important;
  }

  #collectionsDebtTable .collections-mobile-card > td{
    padding:6px !important;
    font-size:12px !important;
  }

  #collectionsDebtTable .collections-actions .btn{
    font-size:10.5px !important;
  }
}
</style>


<style>
/* SUTIL v91k · contraste de "Vista general" en Saldo deudor */
body[data-sutil-theme="dark"] #collectionsDebtPane .collections-view-note{
  background:#2e394d !important;
  color:#dbe4f2 !important;
  border:1px solid #52617d !important;
}

body[data-sutil-theme="dark"] #collectionsDebtPane .collections-view-note strong{
  color:#ffffff !important;
}
</style>


<style>
/* SUTIL v91l · Modal "Agregar pago" visible en modo oscuro */
body[data-sutil-theme="dark"] .direct-payment-modal{
  background:#273244 !important;
  border-color:#56667f !important;
  color:#eef4ff !important;
}

body[data-sutil-theme="dark"] .direct-payment-modal-head{
  background:linear-gradient(135deg,#2d3b52,#32435d) !important;
  border-bottom:1px solid #56667f !important;
}

body[data-sutil-theme="dark"] .direct-payment-modal-head h3{
  color:#ffffff !important;
}

body[data-sutil-theme="dark"] .direct-payment-modal-client{
  color:#dbe7ff !important;
}

body[data-sutil-theme="dark"] .direct-payment-close{
  background:#33445c !important;
  color:#f4f8ff !important;
  border:1px solid #5a6b85 !important;
}

body[data-sutil-theme="dark"] .direct-payment-body{
  color:#eef4ff !important;
}

body[data-sutil-theme="dark"] .direct-payment-summary-box,
body[data-sutil-theme="dark"] .payment-extra-box,
body[data-sutil-theme="dark"] .direct-payment-form label{
  background:#2f3c52 !important;
  border-color:#56667f !important;
  color:#eef4ff !important;
}

body[data-sutil-theme="dark"] .direct-payment-summary-box.balance,
body[data-sutil-theme="dark"] .payment-extra-box.remaining{
  background:#3c3a26 !important;
  border-color:#9c8c48 !important;
}

body[data-sutil-theme="dark"] .direct-payment-summary-box small,
body[data-sutil-theme="dark"] .payment-extra-box small,
body[data-sutil-theme="dark"] .direct-payment-form label,
body[data-sutil-theme="dark"] .payment-mode-choice{
  color:#d5def0 !important;
}

body[data-sutil-theme="dark"] .direct-payment-summary-box strong,
body[data-sutil-theme="dark"] .payment-extra-box strong{
  color:#ffffff !important;
}

body[data-sutil-theme="dark"] .direct-payment-form input,
body[data-sutil-theme="dark"] .direct-payment-form select,
body[data-sutil-theme="dark"] .direct-payment-form textarea{
  background:#223047 !important;
  color:#ffffff !important;
  border:1px solid #637593 !important;
}

body[data-sutil-theme="dark"] .direct-payment-form input::placeholder,
body[data-sutil-theme="dark"] .direct-payment-form textarea::placeholder{
  color:#aebbd0 !important;
}

body[data-sutil-theme="dark"] .direct-payment-receipt{
  background:#2d394d !important;
  border-color:#61728b !important;
  color:#eef4ff !important;
}

body[data-sutil-theme="dark"] .direct-payment-receipt h4{
  color:#ffffff !important;
}

body[data-sutil-theme="dark"] .direct-payment-receipt-actions{
  border-top:1px solid #56667f !important;
}

body[data-sutil-theme="dark"] .direct-payment-result.success-payment{
  background:#1f4632 !important;
  color:#d8ffe8 !important;
  border-color:#4d8f69 !important;
}
</style>


<style>
/* SUTIL v91m · Clientes sin crédito legibles en modo oscuro */
body[data-sutil-theme="dark"] #clientsSection .pill-inactive{
  background:#465269 !important;
  color:#ffffff !important;
  border:1px solid #66758f !important;
  text-shadow:none !important;
}

body[data-sutil-theme="dark"] #clientsSection tr.row-inactive{
  color:#eef3ff !important;
}
</style>


<style>
/* SUTIL v91n · Información financiera del cliente compacta */
#clientFinancePane > .card:first-child{
  padding:14px !important;
  margin:8px 0 !important;
}

#clientFinancePane > .card:first-child > h3{
  margin:0 0 4px !important;
}

#clientFinancePane > .card:first-child > .muted{
  margin:0 !important;
  line-height:1.3 !important;
}

#clientSummary.grid{
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:8px !important;
  margin-top:10px !important;
}

#clientSummary > .card{
  margin:0 !important;
  padding:11px 12px !important;
  min-height:82px !important;
  border-radius:13px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  line-height:1.18 !important;
  overflow:hidden !important;
}

#clientSummary > .card .metric{
  margin-top:4px !important;
  font-size:21px !important;
  line-height:1.08 !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

#clientFinancePane .client-account-nav{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:8px !important;
  margin-top:10px !important;
}

#clientFinancePane .client-account-nav .btn{
  width:100% !important;
  min-width:0 !important;
  margin:0 !important;
  padding:10px 8px !important;
}

#clientFinancePane #reportLossButton{
  margin-top:0 !important;
}

#clientFinancePane > .card:first-child > div[style*="margin:12px 0"]{
  margin:8px 0 0 !important;
}

/* Tablet */
@media(max-width:900px){
  #clientSummary.grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}

/* Celular: dos casillas por fila, sin espacios verticales innecesarios */
@media(max-width:650px){
  #clientFinancePane > .card:first-child{
    padding:12px !important;
  }

  #clientSummary.grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    margin-top:8px !important;
  }

  #clientSummary > .card{
    min-height:76px !important;
    padding:9px 10px !important;
    font-size:12px !important;
  }

  #clientSummary > .card .metric{
    font-size:18px !important;
    margin-top:3px !important;
  }

  #clientFinancePane .client-account-nav{
    gap:7px !important;
    margin-top:8px !important;
  }

  #clientFinancePane .client-account-nav .btn{
    padding:9px 6px !important;
    font-size:12px !important;
    line-height:1.15 !important;
  }

  #clientFinancePane #reportLossButton{
    width:100% !important;
  }
}

@media(max-width:370px){
  #clientSummary > .card{
    min-height:72px !important;
    padding:8px !important;
  }

  #clientSummary > .card .metric{
    font-size:17px !important;
  }
}
</style>


<style>
/* SUTIL v91o · Historial crediticio legible en modo oscuro */
body[data-sutil-theme="dark"] #clientHistoryPane .loan-card{
  background:#2b374b !important;
  border-color:#52617d !important;
  color:#f4f7ff !important;
}

body[data-sutil-theme="dark"] #clientHistoryPane .loan-card.loan-overdue{
  background:#332f3d !important;
  border-color:#8a5a67 !important;
}

body[data-sutil-theme="dark"] #clientHistoryPane .loan-card.loan-active{
  background:#353628 !important;
  border-color:#8c8350 !important;
}

body[data-sutil-theme="dark"] #clientHistoryPane .loan-card.loan-paid{
  background:#263b34 !important;
  border-color:#4f7f69 !important;
}

body[data-sutil-theme="dark"] #clientHistoryPane .loan-card.loan-loss{
  background:#303846 !important;
  border-color:#5d6a7c !important;
}

body[data-sutil-theme="dark"] #clientHistoryPane .loan-card-grid > div{
  background:#303d53 !important;
  border:1px solid #53627d !important;
  color:#f4f7ff !important;
}

body[data-sutil-theme="dark"] #clientHistoryPane .loan-card-grid small{
  color:#c5d0e1 !important;
  opacity:1 !important;
}

body[data-sutil-theme="dark"] #clientHistoryPane .loan-card-grid strong{
  color:#ffffff !important;
}

body[data-sutil-theme="dark"] #clientHistoryPane .loan-card-head small{
  color:#c1ccdd !important;
}

body[data-sutil-theme="dark"] #clientHistoryPane .loan-card-head > div > strong{
  color:#ffffff !important;
}

body[data-sutil-theme="dark"] #clientHistoryPane .loan-card .status-overdue{
  color:#ff8f9f !important;
}
</style>


<style>
/* SUTIL v91p · Ver cuotas / detalle del crédito más compacto */
#loanDetailCard{
  padding:14px !important;
}
#loanDetailCard h4{
  margin:12px 0 8px !important;
}
#loanDetailSubtitle{
  margin-top:4px !important;
  line-height:1.25 !important;
}
#loanDetailSummary{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  margin-top:10px !important;
}
#loanDetailSummary > .card{
  margin:0 !important;
  padding:12px 14px !important;
  border-radius:16px !important;
  min-width:0 !important;
}
#loanDetailSummary > .card .metric{
  font-size:16px !important;
  line-height:1.2 !important;
  margin-top:6px !important;
  word-break:break-word;
}
#loanDetailActions{
  margin-top:10px !important;
}
#loanDetailActions .loan-actions{
  display:grid !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:10px !important;
  margin:10px 0 8px !important;
}
#loanDetailActions .loan-actions .btn{
  width:100% !important;
  margin:0 !important;
}
#loanDetailCard .table-wrap{
  margin-top:6px !important;
}
#loanDetailCard table th,
#loanDetailCard table td{
  padding:8px 7px !important;
}
body[data-sutil-theme="dark"] #loanDetailCard .card{
  background:#2b3850 !important;
  border:1px solid #465674 !important;
  box-shadow:none !important;
}
body[data-sutil-theme="dark"] #loanDetailSubtitle,
body[data-sutil-theme="dark"] #loanDetailActions .muted{
  color:#c4d0e3 !important;
}
@media (max-width:560px){
  #loanDetailSummary > .card{
    padding:11px 12px !important;
  }
  #loanDetailSummary > .card .metric{
    font-size:15px !important;
  }
  #loanDetailActions .loan-actions .btn{
    padding-left:10px !important;
    padding-right:10px !important;
  }
}
@media (max-width:420px){
  #loanDetailCard{
    padding:12px !important;
  }
  #loanDetailSummary{
    gap:8px !important;
  }
  #loanDetailActions .loan-actions{
    grid-template-columns:1fr !important;
  }
}
</style>


<style>
/* SUTIL v91q · Cuotas del crédito sin desplazamiento horizontal en móvil */
@media(max-width:760px){
  #loanDetailCard > .table-wrap{
    overflow:visible !important;
    width:100% !important;
  }

  #loanDetailCard table,
  #loanDetailCard tbody{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
  }

  #loanDetailCard thead{
    display:none !important;
  }

  #loanInstallmentsTable .loan-installment-mobile-card{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px 9px !important;
    width:100% !important;
    min-width:0 !important;
    margin:0 0 9px !important;
    padding:10px !important;
    border:1px solid var(--s-border,#53627d) !important;
    border-radius:14px !important;
    background:var(--s-surface,#293345) !important;
    box-shadow:none !important;
  }

  #loanInstallmentsTable .loan-installment-mobile-card > td{
    display:block !important;
    width:auto !important;
    min-width:0 !important;
    max-width:100% !important;
    padding:6px 7px !important;
    border:0 !important;
    background:transparent !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    font-size:13px !important;
    line-height:1.2 !important;
  }

  #loanInstallmentsTable .loan-installment-mobile-card > td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:3px;
    font-size:9.5px;
    line-height:1.05;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.02em;
    color:var(--s-muted,#b4bfd0);
  }

  #loanInstallmentsTable .loan-installment-mobile-card > td[data-label="Cuota"]{
    font-size:18px !important;
    font-weight:900 !important;
  }

  #loanInstallmentsTable .loan-installment-mobile-card > td[data-label="Estado"]{
    font-weight:900 !important;
  }

  #loanInstallmentsTable .loan-installment-mobile-card > td[data-label="Fecha de pago"],
  #loanInstallmentsTable .loan-installment-actions-cell{
    grid-column:1/-1 !important;
  }

  #loanInstallmentsTable .loan-installment-actions-cell{
    padding-top:8px !important;
    border-top:1px solid var(--s-border,#53627d) !important;
  }

  #loanInstallmentsTable .loan-installment-actions-cell .btn{
    width:100% !important;
    margin:0 !important;
    padding:9px 8px !important;
    font-size:11px !important;
    white-space:normal !important;
  }

  body[data-sutil-theme="dark"] #loanInstallmentsTable .loan-installment-mobile-card{
    background:#2b3850 !important;
    border-color:#52617d !important;
  }

  body[data-sutil-theme="dark"] #loanInstallmentsTable .loan-installment-mobile-card.client-overdue{
    background:#3a2d35 !important;
    border-color:#8d5c68 !important;
  }

  body[data-sutil-theme="dark"] #loanInstallmentsTable .loan-installment-mobile-card > td::before{
    color:#b9c6d8 !important;
  }
}

@media(max-width:390px){
  #loanInstallmentsTable .loan-installment-mobile-card{
    gap:6px !important;
    padding:8px !important;
  }

  #loanInstallmentsTable .loan-installment-mobile-card > td{
    padding:5px 6px !important;
    font-size:12px !important;
  }
}
</style>


<style>
/* SUTIL v91r · Cuotas del crédito: menos altura y mejor lectura en móvil */
@media(max-width:760px){

  #loanInstallmentsTable .loan-installment-mobile-card{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:4px 8px !important;
    padding:8px 9px !important;
    margin:0 0 7px !important;
    border-radius:13px !important;
  }

  #loanInstallmentsTable .loan-installment-mobile-card > td{
    padding:5px 6px !important;
    font-size:15px !important;
    line-height:1.15 !important;
  }

  #loanInstallmentsTable .loan-installment-mobile-card > td::before{
    margin-bottom:2px !important;
    font-size:11px !important;
    line-height:1 !important;
    letter-spacing:.01em !important;
  }

  #loanInstallmentsTable .loan-installment-mobile-card > td[data-label="Cuota"]{
    font-size:22px !important;
    line-height:1 !important;
  }

  #loanInstallmentsTable .loan-installment-mobile-card > td[data-label="Fecha"],
  #loanInstallmentsTable .loan-installment-mobile-card > td[data-label="Valor"],
  #loanInstallmentsTable .loan-installment-mobile-card > td[data-label="Pagado"],
  #loanInstallmentsTable .loan-installment-mobile-card > td[data-label="Saldo"]{
    font-size:15px !important;
    font-weight:700 !important;
  }

  #loanInstallmentsTable .loan-installment-mobile-card > td[data-label="Estado"]{
    font-size:16px !important;
    font-weight:900 !important;
  }

  /* Fecha de pago y botón comparten la última fila */
  #loanInstallmentsTable .loan-installment-mobile-card > td[data-label="Fecha de pago"]{
    grid-column:auto !important;
    font-size:13px !important;
  }

  #loanInstallmentsTable .loan-installment-actions-cell{
    grid-column:auto !important;
    padding:5px 6px !important;
    border-top:0 !important;
    align-self:end !important;
  }

  #loanInstallmentsTable .loan-installment-actions-cell .btn{
    width:100% !important;
    min-height:42px !important;
    padding:7px 8px !important;
    font-size:13px !important;
    line-height:1.08 !important;
    border-radius:10px !important;
  }

  /* Cuotas sin acción no reservan altura extra */
  #loanInstallmentsTable .loan-installment-actions-cell:empty{
    display:none !important;
  }
}

@media(max-width:390px){
  #loanInstallmentsTable .loan-installment-mobile-card{
    gap:3px 6px !important;
    padding:7px 8px !important;
  }

  #loanInstallmentsTable .loan-installment-mobile-card > td{
    padding:4px 5px !important;
    font-size:14px !important;
  }

  #loanInstallmentsTable .loan-installment-mobile-card > td::before{
    font-size:10.5px !important;
  }

  #loanInstallmentsTable .loan-installment-mobile-card > td[data-label="Cuota"]{
    font-size:21px !important;
  }

  #loanInstallmentsTable .loan-installment-actions-cell .btn{
    font-size:12px !important;
  }
}
</style>


<style>
/* SUTIL FIX 12.15.111 · Atrás + Inicio lado a lado en móvil */
@media(max-width:760px){
  .sutil-mobile-bottom-nav{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .sutil-mobile-bottom-nav button{
    width:100% !important;
    min-width:0 !important;
    justify-self:stretch !important;
  }
}
</style>


<style id="sutil-reconciliation-stage5-styles">
/* SUTIL · Conciliación bancaria · Etapa 5
   Interfaz compacta, aditiva y responsive. No modifica botones ni flujo de comprobantes existente. */
#reconciliationModule{margin-top:14px}
.sutil-recon-card{background:var(--ui-surface,#fff);border:1px solid var(--ui-border,#d9e1ea);border-radius:16px;padding:14px;box-shadow:0 6px 18px rgba(15,23,42,.07);color:var(--ui-text,#20242a);content-visibility:auto;contain-intrinsic-size:700px}
.sutil-recon-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap}.sutil-recon-head h3{margin:0;font-size:19px;line-height:1.2}.sutil-recon-head h4{margin:0;font-size:15px}.sutil-recon-head .muted{max-width:760px;font-size:12px;line-height:1.45}
.sutil-recon-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 9px;border-radius:999px;background:var(--ui-surface-2,#f7f9fc);border:1px solid var(--ui-border,#d9e1ea);font-size:11px;font-weight:850;white-space:nowrap}
.sutil-recon-auto-control{display:flex;align-items:center;gap:8px;padding:6px 9px;border-radius:12px;background:var(--ui-surface-2,#f7f9fc);border:1px solid var(--ui-border,#d9e1ea);font-size:10.5px;font-weight:800}.sutil-recon-auto-control label{display:flex;align-items:center;gap:7px;margin:0;cursor:pointer}.sutil-recon-auto-control input{width:16px;height:16px;margin:0;accent-color:currentColor}.sutil-recon-auto-control small{font-size:9.5px;color:var(--ui-muted,#68717c);font-weight:700}.sutil-recon-auto-control.on{border-color:#8bd7b6;background:#ecfbf4}.sutil-recon-auto-control.on strong{color:#15704f}
.sutil-recon-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:12px}.sutil-recon-kpi{padding:10px 11px;border-radius:12px;background:var(--ui-surface-2,#f7f9fc);border:1px solid var(--ui-border,#d9e1ea);min-width:0}.sutil-recon-kpi small{display:block;color:var(--ui-muted,#68717c);font-weight:750;font-size:11px;line-height:1.25}.sutil-recon-kpi strong{display:block;margin-top:3px;font-size:18px;line-height:1.1;overflow-wrap:anywhere}.sutil-recon-kpi .sutil-recon-kpi-sub{margin-top:3px;font-size:10px}
.sutil-recon-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:12px;padding:4px;border:1px solid var(--ui-border,#d9e1ea);background:var(--ui-surface-2,#f7f9fc);border-radius:13px}.sutil-recon-tab{appearance:none;border:0;border-radius:9px;background:transparent;color:var(--ui-muted,#68717c);font:inherit;font-size:12px;font-weight:850;padding:8px 7px;cursor:pointer;min-height:36px;display:flex;align-items:center;justify-content:center;gap:6px}.sutil-recon-tab.active{background:var(--ui-surface,#fff);color:var(--ui-text,#20242a);box-shadow:0 2px 8px rgba(15,23,42,.08)}.sutil-recon-tab-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;background:#e8eef6;font-size:10px}
.sutil-recon-pane{display:none;margin-top:10px}.sutil-recon-pane.active{display:block}.sutil-recon-panel{padding:12px;border-radius:13px;background:var(--ui-surface-2,#f7f9fc);border:1px solid var(--ui-border,#d9e1ea)}.sutil-recon-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}.sutil-recon-panel .muted{font-size:11px;line-height:1.4}
.sutil-recon-toolbar{display:grid;grid-template-columns:minmax(180px,1fr) minmax(150px,220px) auto;gap:7px;align-items:end;margin-bottom:9px}.sutil-recon-toolbar label{font-size:11px;font-weight:800;color:var(--ui-muted,#68717c)}.sutil-recon-toolbar input,.sutil-recon-toolbar select{width:100%;margin-top:4px;min-height:38px}.sutil-recon-toolbar .btn{min-height:38px;white-space:nowrap}
.sutil-recon-queue{display:grid;gap:7px}.sutil-recon-review-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(150px,.8fr) auto;gap:10px;align-items:center;padding:10px 11px;border-radius:12px;background:var(--ui-surface,#fff);border:1px solid var(--ui-border,#d9e1ea)}.sutil-recon-review-main{min-width:0}.sutil-recon-review-main strong{display:block;font-size:13px;overflow-wrap:anywhere}.sutil-recon-review-main small{display:block;color:var(--ui-muted,#68717c);font-size:10.5px;margin-top:2px;overflow-wrap:anywhere}.sutil-recon-review-bank{min-width:0}.sutil-recon-review-bank strong{font-size:12px;display:block}.sutil-recon-review-bank small{display:block;color:var(--ui-muted,#68717c);font-size:10px;margin-top:2px;overflow-wrap:anywhere}.sutil-recon-review-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}.sutil-recon-review-actions .btn{padding:7px 9px;font-size:11px;min-height:34px}.sutil-recon-score{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:850;color:var(--ui-muted,#68717c)}.sutil-recon-score-bar{width:52px;height:5px;border-radius:999px;background:#dde5ee;overflow:hidden}.sutil-recon-score-bar>span{display:block;height:100%;background:#2d7ef7;border-radius:inherit;max-width:100%}
.sutil-recon-status{white-space:nowrap;border-radius:999px;padding:5px 8px;font-size:10px;font-weight:850;background:#eef3f8;color:#52606f;display:inline-flex;align-items:center;gap:4px}.sutil-recon-status.uploaded,.sutil-recon-status.pending{background:#fff4d6;color:#8b6200}.sutil-recon-status.processed,.sutil-recon-status.match_found,.sutil-recon-status.manual_confirmed,.sutil-recon-status.auto_confirmed{background:#e2f7ec;color:#15704f}.sutil-recon-status.manual_review,.sutil-recon-status.ambiguous,.sutil-recon-status.needs_review{background:#fff0dc;color:#945200}.sutil-recon-status.error,.sutil-recon-status.rejected,.sutil-recon-status.high,.sutil-recon-status.critical{background:#fde8eb;color:#a92e3e}.sutil-recon-status.info{background:#e8f2ff;color:#2563a9}.sutil-recon-status.warning{background:#fff4d6;color:#8b6200}
.sutil-recon-form{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.sutil-recon-form .wide{grid-column:1/-1}.sutil-recon-form label{font-size:11px;font-weight:800;color:var(--ui-muted,#68717c)}.sutil-recon-form input,.sutil-recon-form select{width:100%;margin-top:4px}.sutil-recon-actions{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap;margin-top:9px}.sutil-recon-message{margin-top:8px;min-height:18px;font-size:11px;font-weight:750;color:var(--ui-muted,#68717c)}.sutil-recon-message.ok{color:#16835f}.sutil-recon-message.error{color:#c93b4a}
.sutil-recon-list{display:grid;gap:7px;margin-top:9px}.sutil-recon-row{display:flex;justify-content:space-between;align-items:center;gap:9px;padding:9px 10px;border-radius:11px;background:var(--ui-surface,#fff);border:1px solid var(--ui-border,#d9e1ea)}.sutil-recon-row-main{min-width:0}.sutil-recon-row-main strong{display:block;font-size:12px;overflow-wrap:anywhere}.sutil-recon-row-main small{display:block;color:var(--ui-muted,#68717c);font-size:10px;margin-top:2px;overflow-wrap:anywhere}.sutil-recon-row .btn{padding:7px 9px;font-size:11px;min-height:34px}.sutil-recon-history{margin-top:10px}.sutil-recon-history-head{display:flex;justify-content:space-between;gap:8px;align-items:center}.sutil-recon-empty{padding:13px;border:1px dashed var(--ui-border,#d9e1ea);border-radius:11px;text-align:center;color:var(--ui-muted,#68717c);font-size:11px;line-height:1.45}
.sutil-recon-alert-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:9px;align-items:center;padding:10px;border:1px solid var(--ui-border,#d9e1ea);background:var(--ui-surface,#fff);border-radius:11px}.sutil-recon-alert-icon{width:31px;height:31px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:var(--ui-surface-2,#f7f9fc);font-size:15px}.sutil-recon-alert-main{min-width:0}.sutil-recon-alert-main strong{font-size:12px;display:block}.sutil-recon-alert-main small{font-size:10px;color:var(--ui-muted,#68717c);display:block;margin-top:2px;overflow-wrap:anywhere}
.sutil-recon-sheet{position:fixed;inset:0;z-index:16000;background:rgba(15,23,42,.46);display:none;align-items:flex-end;justify-content:center;padding:10px}.sutil-recon-sheet.open{display:flex}.sutil-recon-sheet-card{width:min(760px,100%);max-height:min(78vh,720px);overflow:auto;background:var(--ui-surface,#fff);color:var(--ui-text,#20242a);border:1px solid var(--ui-border,#d9e1ea);border-radius:18px 18px 12px 12px;padding:14px;box-shadow:0 20px 50px rgba(0,0,0,.25)}.sutil-recon-sheet-head{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;position:sticky;top:-14px;background:var(--ui-surface,#fff);padding:14px 0 9px;z-index:1}.sutil-recon-sheet-head h4{margin:0}.sutil-recon-sheet-close{border:0;border-radius:999px;width:34px;height:34px;font-size:21px;background:var(--ui-surface-2,#f7f9fc);color:inherit;cursor:pointer}.sutil-recon-candidate{padding:10px;border-radius:11px;border:1px solid var(--ui-border,#d9e1ea);margin-top:7px}.sutil-recon-candidate-top{display:flex;justify-content:space-between;gap:8px;align-items:center}.sutil-recon-candidate small{display:block;font-size:10px;color:var(--ui-muted,#68717c);margin-top:3px}.sutil-recon-reason{display:inline-block;margin:4px 4px 0 0;padding:3px 6px;border-radius:999px;background:var(--ui-surface-2,#f7f9fc);font-size:9.5px}.sutil-recon-conflict{background:#fde8eb;color:#9b2e3a}
body[data-sutil-theme="dark"] .sutil-recon-card,body[data-sutil-theme="dark"] .sutil-recon-row,body[data-sutil-theme="dark"] .sutil-recon-review-row,body[data-sutil-theme="dark"] .sutil-recon-alert-row,body[data-sutil-theme="dark"] .sutil-recon-sheet-card{background:var(--ui-surface,#293345);color:var(--ui-text,#f4f7ff)}body[data-sutil-theme="dark"] .sutil-recon-panel,body[data-sutil-theme="dark"] .sutil-recon-kpi,body[data-sutil-theme="dark"] .sutil-recon-tabs{background:var(--ui-surface-2,#313d52)}body[data-sutil-theme="dark"] .sutil-recon-tab.active,body[data-sutil-theme="dark"] .sutil-recon-sheet-head{background:var(--ui-surface,#293345);color:var(--ui-text,#f4f7ff)}body[data-sutil-theme="dark"] .sutil-recon-tab-count{background:#414f68}body[data-sutil-theme="dark"] .sutil-recon-status{background:#3a465c;color:#edf2ff}body[data-sutil-theme="dark"] .sutil-recon-status.uploaded,body[data-sutil-theme="dark"] .sutil-recon-status.pending,body[data-sutil-theme="dark"] .sutil-recon-status.warning{background:#5d4a20;color:#ffe7a3}body[data-sutil-theme="dark"] .sutil-recon-status.processed,body[data-sutil-theme="dark"] .sutil-recon-status.match_found,body[data-sutil-theme="dark"] .sutil-recon-status.manual_confirmed,body[data-sutil-theme="dark"] .sutil-recon-status.auto_confirmed{background:#214f41;color:#c8f5e5}body[data-sutil-theme="dark"] .sutil-recon-status.manual_review,body[data-sutil-theme="dark"] .sutil-recon-status.ambiguous,body[data-sutil-theme="dark"] .sutil-recon-status.needs_review{background:#5b4524;color:#ffe1ad}body[data-sutil-theme="dark"] .sutil-recon-status.error,body[data-sutil-theme="dark"] .sutil-recon-status.rejected,body[data-sutil-theme="dark"] .sutil-recon-status.high,body[data-sutil-theme="dark"] .sutil-recon-status.critical{background:#5b2a35;color:#ffd6de}
@media(max-width:760px){#reconciliationModule{margin-top:10px}.sutil-recon-card{padding:11px;border-radius:14px}.sutil-recon-head h3{font-size:17px}.sutil-recon-kpis{grid-template-columns:1fr 1fr;gap:6px}.sutil-recon-kpi{padding:9px}.sutil-recon-kpi strong{font-size:16px}.sutil-recon-tabs{grid-template-columns:1fr 1fr}.sutil-recon-tab{padding:7px 5px}.sutil-recon-grid{grid-template-columns:1fr}.sutil-recon-toolbar{grid-template-columns:1fr 1fr}.sutil-recon-toolbar>button{grid-column:1/-1}.sutil-recon-review-row{grid-template-columns:1fr;gap:6px}.sutil-recon-review-actions{justify-content:space-between}.sutil-recon-review-bank{padding-top:6px;border-top:1px solid var(--ui-border,#d9e1ea)}.sutil-recon-form{grid-template-columns:1fr}.sutil-recon-form .wide{grid-column:auto}.sutil-recon-actions .btn{flex:1 1 130px}.sutil-recon-row{align-items:flex-start}.sutil-recon-row .btn{width:auto!important;min-width:84px}.sutil-recon-alert-row{grid-template-columns:auto minmax(0,1fr)}.sutil-recon-alert-row>.sutil-recon-status{grid-column:2;justify-self:start}.sutil-recon-sheet{padding:0}.sutil-recon-sheet-card{max-height:86vh;border-radius:18px 18px 0 0;padding:12px}.sutil-recon-sheet-head{top:-12px;padding-top:12px}.sutil-recon-auto-control{width:100%;justify-content:space-between;flex-wrap:wrap}}
</style>


<style id="sutil-receipts-hub-tabs-style">
/* SUTIL Fix 12.2 · Navegación Comprobantes / Conciliación bancaria
   Cambio visual únicamente: conserva filtros, comprobantes y módulo de conciliación existentes. */
.sutil-receipts-hub-nav-card{
  padding:10px !important;
  margin-bottom:10px !important;
}
.sutil-receipts-hub-tabs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.sutil-receipts-hub-tab{
  appearance:none;
  width:100%;
  min-height:48px;
  border:1px solid var(--ui-border,#d9e1ea);
  border-radius:12px;
  background:var(--ui-surface-2,#f7f9fc);
  color:var(--ui-muted,#68717c);
  cursor:pointer;
  font:inherit;
  font-size:14px;
  font-weight:850;
  padding:10px 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
  line-height:1.2;
}
.sutil-receipts-hub-tab.active{
  background:var(--sutil-primary,#1769aa);
  border-color:var(--sutil-primary,#1769aa);
  color:#fff;
  box-shadow:0 5px 14px rgba(23,105,170,.20);
}
body[data-sutil-theme="dark"] .sutil-receipts-hub-tab:not(.active){
  background:var(--ui-surface-2,#313d52);
  color:var(--ui-text,#f4f7ff);
}
#receiptHubReconciliationPane{display:none}

/* SUTIL Fix 12.3 · filtros de comprobantes preparados para histórico grande */
.receipt-filter-title{font-weight:700;font-size:14px;margin-bottom:5px}
.sutil-receipt-period-tabs{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;
  width:100%;
}
.sutil-receipt-period-btn{
  appearance:none;border:1px solid var(--ui-border,#d9e1ea);
  border-radius:10px;background:var(--ui-surface-2,#f7f9fc);
  color:var(--ui-muted,#68717c);font:inherit;font-weight:800;font-size:12px;
  min-height:40px;padding:7px 6px;cursor:pointer;line-height:1.1;
}
.sutil-receipt-period-btn.active{
  background:var(--sutil-primary,#1769aa);border-color:var(--sutil-primary,#1769aa);
  color:#fff;box-shadow:0 4px 12px rgba(23,105,170,.16);
}
.sutil-receipt-custom-dates{
  display:none;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;
  margin-top:8px;padding:10px;border:1px solid var(--ui-border,#d9e1ea);
  border-radius:12px;background:var(--ui-surface-2,#f7f9fc);
}
.sutil-receipt-custom-dates.open{display:grid}
.sutil-receipt-custom-dates label{margin:0}
.sutil-receipt-custom-dates input{margin-top:4px}
.receipt-results-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
#receiptLoadMoreBtn{display:none}
#receiptLoadMoreBtn.visible{display:inline-flex}
.receipt-results-subcount{display:block;margin-top:3px;font-size:11px;font-weight:650;color:var(--ui-muted,#68717c)}
body[data-sutil-theme="dark"] .sutil-receipt-period-btn:not(.active),
body[data-sutil-theme="dark"] .sutil-receipt-custom-dates{
  background:var(--ui-surface-2,#313d52);color:var(--ui-text,#f4f7ff);
}
@media(max-width:560px){
  .sutil-receipts-hub-nav-card{padding:8px !important}
  .sutil-receipts-hub-tabs{gap:6px}
  .sutil-receipts-hub-tab{min-height:46px;padding:8px 7px;font-size:12px}
  .sutil-receipt-period-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
  .sutil-receipt-period-btn{min-height:38px;font-size:12px}
  .sutil-receipt-custom-dates{grid-template-columns:1fr 1fr;padding:9px}
  .receipt-results-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .receipt-results-actions .btn{width:100%!important;min-width:0!important}
}
@media(max-width:390px){
  .sutil-receipt-custom-dates{grid-template-columns:1fr}
}
</style>


<style>
/* SUTIL FIX 12.15.17 · Ficha de cliente compacta en móvil */
@media (max-width:760px){
  #clientDetailCard .client-detail-top{
    padding:14px 14px 15px!important;
  }
  #clientDetailCard .client-detail-toolbar{
    margin-bottom:10px!important;
  }
  #clientDetailCard .client-detail-mainrow{
    display:block!important;
  }
  #clientDetailCard .client-detail-identity{
    display:grid!important;
    grid-template-columns:150px minmax(0,1fr)!important;
    grid-template-rows:auto auto!important;
    column-gap:14px!important;
    row-gap:10px!important;
    align-items:center!important;
    width:100%!important;
  }
  #clientDetailCard .client-detail-photo{
    grid-column:1!important;
    grid-row:1!important;
    align-self:start!important;
  }
  #clientDetailCard .client-detail-photo img,
  #clientDetailCard .client-detail-photo .client-photo-large{
    width:150px!important;
    height:150px!important;
    max-width:150px!important;
    border-radius:18px!important;
    object-fit:cover!important;
  }
  #clientDetailCard .client-detail-identity-text{
    display:contents!important;
  }
  #clientDetailCard .client-detail-meta{
    grid-column:2!important;
    grid-row:1!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    justify-content:center!important;
    gap:7px!important;
    margin:0!important;
    min-width:0!important;
  }
  #clientDetailCard .client-detail-meta .client-meta-chip,
  #clientDetailCard .client-detail-meta .client-status-chip{
    max-width:100%!important;
    width:auto!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    line-height:1.15!important;
    padding:6px 9px!important;
  }
  #clientDetailCard .client-detail-identity-text h2{
    grid-column:1/-1!important;
    grid-row:2!important;
    margin:0!important;
    font-size:20px!important;
    line-height:1.16!important;
  }
  #clientDetailCard .client-detail-actions{
    width:100%!important;
    margin-top:11px!important;
    gap:8px!important;
  }
  #clientDetailCard .client-detail-actions .btn{
    min-height:40px!important;
    padding:9px 12px!important;
  }
}
@media (max-width:390px){
  #clientDetailCard .client-detail-identity{
    grid-template-columns:150px minmax(0,1fr)!important;
    column-gap:11px!important;
  }
  #clientDetailCard .client-detail-photo img,
  #clientDetailCard .client-detail-photo .client-photo-large{
    width:150px!important;
    height:150px!important;
    max-width:150px!important;
  }
  #clientDetailCard .client-detail-meta .client-meta-chip,
  #clientDetailCard .client-detail-meta .client-status-chip{
    font-size:10px!important;
    padding:5px 7px!important;
  }
}
</style>

<style>
/* SUTIL FIX 12.15.19 · Ficha cliente organizada por seções plegáveis */
.client-file-sections{display:grid;gap:10px}
.client-file-group{border:1px solid var(--form-border,#d8e1ec);border-radius:15px;overflow:hidden;background:var(--form-bg,#fff)}
.client-file-group-head{width:100%;border:0;background:transparent;color:inherit;padding:13px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left;cursor:pointer}
.client-file-group-head>span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.client-file-group-head b{font-size:15px}.client-file-group-head small{font-size:11px;opacity:.68;font-weight:650}
.client-group-chevron{font-size:22px;line-height:1;transition:transform .16s ease}.client-file-group.open .client-group-chevron{transform:rotate(180deg)}
.client-file-group-body{display:none!important;padding:0 12px 12px!important;grid-template-columns:repeat(4,minmax(0,1fr))!important}
.client-file-group.open .client-file-group-body{display:grid!important}
body[data-sutil-theme="dark"] .client-file-group{background:#263246;border-color:#4d5d78}
body[data-sutil-theme="dark"] .client-file-group-head{color:#eef3ff}
@media(max-width:760px){
  .client-consult-card{padding:10px!important}
  .client-file-sections{gap:8px}
  .client-file-group-head{padding:11px 12px}
  .client-file-group-body{grid-template-columns:repeat(2,minmax(0,1fr))!important;padding:0 9px 9px!important;gap:8px!important}
  .client-file-group-body .client-file-btn{min-height:88px!important}
}
</style>

<style id="sutil-fix-12-15-22b-cuotas">
/* SUTIL FIX 12.15.22B · SOLO Estado de cuenta > Cuotas */
@media(max-width:650px){
  .client-statement-installments-card{padding:12px 8px !important}
  .client-statement-installments-wrap{overflow-x:hidden !important;width:100%;max-width:100%}
  .client-statement-installments-table{width:100% !important;min-width:0 !important;table-layout:fixed !important;border-collapse:collapse}
  .client-statement-installments-table th,.client-statement-installments-table td{padding:7px 2px !important;font-size:10px !important;line-height:1.15 !important;text-align:center !important;vertical-align:middle !important;white-space:normal !important;overflow-wrap:anywhere}
  .client-statement-installments-table th{font-size:9px !important;font-weight:800 !important}
  .client-statement-installments-table th:nth-child(1),.client-statement-installments-table td:nth-child(1){width:9%}
  .client-statement-installments-table th:nth-child(2),.client-statement-installments-table td:nth-child(2){width:9%}
  .client-statement-installments-table th:nth-child(3),.client-statement-installments-table td:nth-child(3){width:21%}
  .client-statement-installments-table th:nth-child(4),.client-statement-installments-table td:nth-child(4){width:14%}
  .client-statement-installments-table th:nth-child(5),.client-statement-installments-table td:nth-child(5){width:14%}
  .client-statement-installments-table th:nth-child(6),.client-statement-installments-table td:nth-child(6){width:14%}
  .client-statement-installments-table th:nth-child(7),.client-statement-installments-table td:nth-child(7){width:19%}
}
</style>


<style id="sutil-fix-12-15-23-pagos-abonos-mobile">
/* SUTIL FIX 12.15.23 · SOLO Estado de cuenta > Pagos y abonos */
@media(max-width:650px){
  .client-statement-payments-card{padding:12px 10px !important;}
  .client-statement-payments-wrap{overflow-x:hidden !important;width:100%;max-width:100%;}
  .client-statement-payments-table{width:100% !important;min-width:0 !important;border-collapse:separate !important;border-spacing:0 9px !important;}
  .client-statement-payments-table thead{display:none !important;}
  .client-statement-payments-table tbody{display:block;width:100%;}
  .client-statement-payments-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.78);}
  .client-statement-payments-table tbody td{display:block;min-width:0;padding:0 !important;border:0 !important;font-size:13px;line-height:1.25;overflow-wrap:anywhere;word-break:normal;}
  .client-statement-payments-table tbody td::before{display:block;margin-bottom:2px;color:#68717c;font-size:10px;font-weight:800;line-height:1.1;}
  .client-statement-payments-table tbody td:nth-child(1)::before{content:"Fecha";}
  .client-statement-payments-table tbody td:nth-child(2)::before{content:"Valor";}
  .client-statement-payments-table tbody td:nth-child(3)::before{content:"Método";}
  .client-statement-payments-table tbody td:nth-child(4)::before{content:"Ruta";}
  .client-statement-payments-table tbody td:nth-child(5)::before{content:"Cuotas afectadas";}
  .client-statement-payments-table tbody td:nth-child(6)::before{content:"Responsable";}
  .client-statement-payments-table tbody td:nth-child(7)::before{content:"Saldo posterior";}
  .client-statement-payments-table tbody td:nth-child(5){grid-column:1/-1;}
  .client-statement-payments-table tbody td[colspan]{grid-column:1/-1;text-align:center;padding:8px !important;}
  body[data-sutil-theme="dark"] .client-statement-payments-table tbody tr{background:#263246;border-color:#3b4b65;}
  body[data-sutil-theme="dark"] .client-statement-payments-table tbody td::before{color:#aebbd0;}
}
</style>


<style>
/* SUTIL FIX 12.15.27 · documentos de clientes. Alcance aislado. */
.sutil-client-docs-section{margin:14px 0}
.sutil-client-docs-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:10px}
.sutil-client-docs-head h4{margin:0}
.sutil-client-docs-head small{display:block;margin-top:4px;color:var(--muted,#667085)}
.sutil-client-doc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sutil-client-doc-card{border:1px solid var(--form-border,#d9e0e7);border-radius:14px;padding:12px;background:var(--form-bg,#fff);min-width:0}
.sutil-client-doc-title{font-weight:800;margin-bottom:8px;display:flex;align-items:center;gap:7px}
.sutil-client-doc-preview{height:150px;border:1px dashed var(--form-border,#d9e0e7);border-radius:11px;overflow:hidden;background:rgba(127,127,127,.06);display:flex;align-items:center;justify-content:center;margin-bottom:9px;position:relative}
.sutil-client-doc-preview img,.sutil-client-doc-preview iframe{width:100%;height:100%;border:0;object-fit:contain;background:#fff}
.sutil-client-doc-empty{text-align:center;padding:10px;color:var(--muted,#667085);font-size:12px;line-height:1.35}
.sutil-client-doc-meta{font-size:11px;color:var(--muted,#667085);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:8px}
.sutil-client-doc-actions{display:flex;gap:6px;flex-wrap:wrap}
.sutil-client-doc-actions .btn{font-size:12px;padding:7px 9px;flex:1 1 auto}
.sutil-client-doc-hidden{display:none!important}
.sutil-client-doc-status{font-size:12px;min-height:18px;margin-top:7px;color:var(--muted,#667085)}
.sutil-client-doc-status.error{color:#b42318}
.sutil-client-doc-status.ok{color:#148343}
.sutil-client-doc-future{margin-top:8px;padding:8px 10px;border-radius:10px;background:rgba(127,127,127,.08);font-size:11px;color:var(--muted,#667085)}
@media(max-width:760px){
  .sutil-client-doc-grid{grid-template-columns:1fr}
  .sutil-client-doc-card{padding:10px}
  .sutil-client-doc-preview{height:185px}
  .sutil-client-doc-actions .btn{padding:8px 8px;font-size:11.5px}
}
</style>


<style id="sutil-fix-12-15-32-location-options">
.client-location-choice-card{padding:14px !important}
.client-location-choice-row{display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);gap:10px}
.client-location-choice{min-width:0;border-radius:16px;padding:13px 12px;display:flex;align-items:center;gap:10px;text-align:left;box-sizing:border-box}
.client-location-choice-active{background:linear-gradient(145deg,rgba(91,99,232,.28),rgba(91,99,232,.13));border:1px solid rgba(124,132,255,.65);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.client-location-choice-action{appearance:none;-webkit-appearance:none;width:100%;font:inherit;color:inherit;background:rgba(47,190,203,.12);border:1px solid rgba(49,199,211,.55);cursor:pointer;position:relative}
.client-location-choice-action:active{transform:scale(.985)}
.client-location-choice-icon{width:36px;height:36px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex:0 0 36px;background:rgba(255,255,255,.92);font-size:20px}
.client-location-choice-text{min-width:0;display:flex;flex-direction:column;gap:2px;line-height:1.15}
.client-location-choice-text strong{font-size:14px;font-weight:800;color:var(--text,#f6f8ff);white-space:normal}
.client-location-choice-text small{font-size:10px;font-weight:600;opacity:.72;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.client-location-choice-arrow{margin-left:auto;font-size:26px;line-height:1;opacity:.75}

/* SUTIL FIX 12.15.35 · ubicación actual más alta + hora/fecha de última actualización */
.client-location-choice-action{min-height:104px;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:12px 34px 10px 12px !important;gap:6px}
.client-location-choice-action .client-location-choice-icon{width:42px;height:42px;flex-basis:42px;font-size:23px}
.client-location-choice-action .client-location-choice-text{align-items:center;gap:3px}
.client-location-choice-action .client-location-choice-arrow{position:absolute;right:12px;top:50%;transform:translateY(-50%);margin:0}
.client-location-choice-actions-row{display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);gap:10px;align-items:start;margin-top:10px}
.client-location-map-btn{width:100% !important;margin:0 !important;min-width:0}
.client-current-location-updated{min-width:0;text-align:center;font-size:11px;font-weight:700;line-height:1.25;opacity:.74;padding:7px 8px 0;overflow-wrap:anywhere}
@media (max-width:420px){.client-location-choice-action{min-height:112px;padding-right:30px !important}.client-location-choice-action .client-location-choice-icon{width:40px;height:40px;flex-basis:40px;font-size:22px}.client-location-choice-actions-row{gap:8px}.client-current-location-updated{font-size:10px;padding-top:6px}}
.client-location-map-btn{width:40% !important;display:block;margin-top:10px !important;border-radius:14px !important}
@media (max-width:420px){.client-location-choice-card{padding:12px !important}.client-location-choice-row{gap:8px}.client-location-choice{padding:11px 9px;gap:8px;border-radius:14px}.client-location-choice-icon{width:32px;height:32px;flex-basis:32px;border-radius:10px;font-size:18px}.client-location-choice-text strong{font-size:12px}.client-location-choice-text small{font-size:9px}.client-location-choice-arrow{font-size:22px}}
</style>

<style id="sutil-fix-12-15-36-location-sizing">
/* FIX 12.15.36: organiza únicamente los tamaños del bloque de ubicación del cliente */
.client-location-choice-row{
  grid-template-columns:minmax(0,40%) minmax(0,60%) !important;
  align-items:stretch !important;
}
.client-location-choice-active{
  min-height:118px !important;
  height:118px !important;
  padding:14px 12px !important;
}
.client-location-choice-action{
  min-height:142px !important;
  height:142px !important;
  padding:12px 34px 12px 12px !important;
}
.client-location-choice-action .client-location-choice-icon{
  width:46px !important;
  height:46px !important;
  flex:0 0 46px !important;
  font-size:25px !important;
}
.client-location-choice-action .client-location-choice-text strong{
  font-size:15px !important;
  line-height:1.12 !important;
}
.client-location-choice-action .client-location-choice-text small{
  font-size:10px !important;
  line-height:1.15 !important;
}
.client-location-choice-actions-row{
  grid-template-columns:minmax(0,40%) minmax(0,60%) !important;
  gap:10px !important;
  align-items:start !important;
  margin-top:10px !important;
}
.client-location-choice-actions-row > div{min-width:0 !important;}
.client-location-map-btn{
  width:100% !important;
  min-width:0 !important;
  min-height:52px !important;
  margin:0 !important;
  padding:11px 8px !important;
  border-radius:14px !important;
  font-size:14px !important;
  line-height:1.12 !important;
  white-space:normal !important;
}
.client-current-location-updated{
  width:100% !important;
  box-sizing:border-box !important;
  padding:8px 6px 0 !important;
  margin:0 !important;
  text-align:center !important;
  font-size:10.5px !important;
  line-height:1.2 !important;
}
@media(max-width:420px){
  .client-location-choice-row,.client-location-choice-actions-row{gap:8px !important;}
  .client-location-choice-active{min-height:112px !important;height:112px !important;padding:12px 9px !important;}
  .client-location-choice-action{min-height:136px !important;height:136px !important;padding:10px 28px 10px 9px !important;}
  .client-location-choice-action .client-location-choice-icon{width:44px !important;height:44px !important;flex-basis:44px !important;font-size:24px !important;}
  .client-location-choice-action .client-location-choice-text strong{font-size:14px !important;}
  .client-location-map-btn{min-height:50px !important;font-size:13px !important;padding:10px 6px !important;}
  .client-current-location-updated{font-size:9.5px !important;padding-top:7px !important;}
}
</style>

<style id="sutil-fix-12-15-39-new-client-pairs">
/* FIX 12.15.39 · Corrige selector: pares compactos en Registrar nuevo cliente */
#newClientSection .form-grid > .sutil-new-client-pair{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:10px;
  width:100%;
  min-width:0;
}
#newClientSection .sutil-new-client-pair > label{min-width:0;margin:0;}
#newClientSection .sutil-new-client-pair input,
#newClientSection .sutil-new-client-pair select{min-width:0;width:100%;box-sizing:border-box;}
@media(max-width:700px){
  #newClientSection .form-grid > .sutil-new-client-pair{gap:9px;}
  #newClientSection .sutil-new-client-pair > label{font-size:13px;}
  #newClientSection .sutil-new-client-pair input{padding-left:9px;padding-right:9px;}
}
</style>

<style id="sutil-fix-12-15-40-new-client-selects">
  #newClientSection .sutil-new-client-select-field{display:block;min-width:0}
  #newClientSection .sutil-new-client-select-label{display:block;font-weight:700;margin-bottom:6px}
  #newClientSection .sutil-new-client-custom-select{position:relative;min-width:0}
  #newClientSection .sutil-new-client-native-select{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important}
  #newClientSection .sutil-new-client-select-trigger{width:100%;min-height:52px;margin:0;padding:12px 42px 12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--text);font-weight:700;font-size:16px;text-align:left;cursor:pointer;position:relative;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #newClientSection .sutil-new-client-select-trigger::after{content:"⌄";position:absolute;right:14px;top:50%;transform:translateY(-55%);font-size:22px;line-height:1;color:var(--muted)}
  #newClientSection .sutil-new-client-custom-select.open .sutil-new-client-select-trigger{border-color:var(--sutil-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--sutil-primary) 16%,transparent)}
  #newClientSection .sutil-new-client-select-menu{display:none;position:absolute;z-index:220;left:0;right:0;top:calc(100% + 6px);max-height:300px;overflow:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:7px;box-shadow:0 18px 42px rgba(15,23,42,.24)}
  #newClientSection .sutil-new-client-custom-select.open .sutil-new-client-select-menu{display:block}
  #newClientSection .sutil-new-client-select-option{width:100%;border:0;border-radius:10px;background:transparent;color:var(--text);text-align:left;padding:12px 38px 12px 12px;font-size:16px;font-weight:700;cursor:pointer;position:relative;overflow-wrap:anywhere}
  #newClientSection .sutil-new-client-select-option:hover,#newClientSection .sutil-new-client-select-option:focus{background:color-mix(in srgb,var(--sutil-primary) 10%,var(--card));outline:none}
  #newClientSection .sutil-new-client-select-option.selected{background:color-mix(in srgb,var(--sutil-primary) 14%,var(--card));color:var(--sutil-primary)}
  #newClientSection .sutil-new-client-select-option.selected::after{content:"✓";position:absolute;right:13px;top:50%;transform:translateY(-50%);font-weight:900}
  @media(max-width:560px){#newClientSection .sutil-new-client-select-trigger{min-height:50px;font-size:15px;padding-left:12px}#newClientSection .sutil-new-client-select-option{font-size:15px;padding-top:11px;padding-bottom:11px}}
</style>

<style id="sutil-fix-12-15-42-selects-modal-portal">
/* FIX 12.15.42: modal portal fuera del formulario para evitar clipping/transform del contenedor. */
.sutil-client-select-backdrop{position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.48);display:flex;align-items:flex-end;justify-content:center;padding:14px;box-sizing:border-box}
.sutil-client-select-sheet{width:min(640px,100%);max-height:72vh;display:flex;flex-direction:column;background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:20px 20px 14px 14px;box-shadow:0 24px 70px rgba(0,0,0,.48);overflow:hidden}
.sutil-client-select-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line);font-weight:800;font-size:18px}
.sutil-client-select-sheet-close{border:0;background:transparent;color:var(--text);font-size:24px;line-height:1;padding:4px 8px;cursor:pointer}
.sutil-client-select-sheet-list{overflow-y:auto;-webkit-overflow-scrolling:touch;padding:8px}
.sutil-client-select-sheet-option{width:100%;min-height:52px;border:0;border-radius:12px;background:transparent;color:var(--text);text-align:left;padding:12px 44px 12px 14px;font-size:16px;font-weight:750;cursor:pointer;position:relative;overflow-wrap:anywhere}
.sutil-client-select-sheet-option + .sutil-client-select-sheet-option{margin-top:4px}
.sutil-client-select-sheet-option.selected{background:color-mix(in srgb,var(--sutil-primary) 14%,var(--card));color:var(--sutil-primary)}
.sutil-client-select-sheet-option.selected::after{content:"✓";position:absolute;right:15px;top:50%;transform:translateY(-50%);font-weight:900}
@media(min-width:701px){.sutil-client-select-backdrop{align-items:center}.sutil-client-select-sheet{border-radius:18px;max-height:70vh}}
</style>
<style id="sutil-fix-12-15-43-new-client-picker-stable">
/* FIX 12.15.43: reutiliza el selector móvil global ya estable de Sutil. */
#newClientSection .sutil-new-client-custom-select{position:relative!important}
#newClientSection .sutil-new-client-select-menu{display:none!important}
#newClientSection .sutil-new-client-mobile-select-btn{
  display:flex!important;
  width:100%!important;
  min-height:52px!important;
  align-items:center!important;
  justify-content:space-between!important;
  margin:0!important;
  padding:12px 42px 12px 14px!important;
  border:1px solid var(--line)!important;
  border-radius:12px!important;
  background:var(--card)!important;
  color:var(--text)!important;
  font-size:16px!important;
  font-weight:700!important;
  text-align:left!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#newClientSection .sutil-new-client-mobile-select-btn::after{content:"⌄"!important;position:absolute!important;right:14px!important;top:50%!important;transform:translateY(-55%)!important;font-size:22px!important;color:var(--muted)!important}
body[data-sutil-theme="light"] #newClientSection .sutil-new-client-mobile-select-btn{background:#fff!important;color:#24364a!important}
@media(max-width:560px){#newClientSection .sutil-new-client-mobile-select-btn{min-height:50px!important;font-size:15px!important;padding-left:12px!important}}
</style>


<style id="sutil-clients-directory-modern-selects-v121551">
@media(max-width:760px){
  #clientsRouteFilter,#clientsStatusFilter{display:none !important}
  #clientsSection .clients-filter-row .clients-directory-mobile-select{
    margin-top:6px;
    min-height:48px;
    padding:9px 12px;
    border-radius:12px;
    font-size:16px;
    line-height:1.15;
  }
}
</style>

<style id="sutil-fix-12-15-56-llamar-al-lado-numero">
@media(max-width:760px){
  #clientsSection #clientsTable tr.client-row > td:nth-child(5){
    overflow:visible !important;
    white-space:nowrap !important;
  }
  #clientsSection #clientsTable .client-phone-inline{
    display:inline-flex !important;
    align-items:center !important;
    flex-wrap:nowrap !important;
    gap:7px !important;
    width:max-content !important;
    max-width:none !important;
    white-space:nowrap !important;
  }
  #clientsSection #clientsTable .client-inline-call-btn{
    width:30px !important;
    height:30px !important;
    min-width:30px !important;
    flex:0 0 30px !important;
    padding:0 !important;
    margin:0 !important;
    border:1px solid rgba(255,255,255,.18) !important;
    border-radius:9px !important;
    background:#159a62 !important;
    color:#fff !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:15px !important;
    line-height:1 !important;
    box-shadow:0 4px 10px rgba(0,0,0,.18) !important;
    vertical-align:middle !important;
  }
  #clientsSection #clientsTable .client-quick-contact{
    right:14px !important;
    top:58px !important;
    display:flex !important;
    flex-direction:column !important;
    gap:7px !important;
  }
}
</style>

<style id="sutil-whatsapp-chooser-style">
#sutilWhatsAppChooser{position:fixed;inset:0;display:none;align-items:flex-end;justify-content:center;background:rgba(2,6,23,.66);z-index:100000;padding:16px;}
#sutilWhatsAppChooser.open{display:flex;}
#sutilWhatsAppChooser .wa-chooser-card{width:min(430px,100%);background:#17233b;border:1px solid rgba(148,163,184,.32);border-radius:20px;padding:16px;box-shadow:0 22px 50px rgba(0,0,0,.38);}
#sutilWhatsAppChooser .wa-chooser-title{font-size:18px;font-weight:800;color:#f8fafc;margin:0 0 5px;}
#sutilWhatsAppChooser .wa-chooser-subtitle{font-size:13px;color:#cbd5e1;margin:0 0 14px;line-height:1.35;}
#sutilWhatsAppChooser .wa-chooser-options{display:grid;gap:9px;}
#sutilWhatsAppChooser .wa-chooser-option{width:100%;min-height:52px;border:1px solid rgba(148,163,184,.25);border-radius:14px;background:#22304a;color:#fff;display:flex;align-items:center;gap:12px;padding:10px 13px;font-size:15px;font-weight:700;text-align:left;}
#sutilWhatsAppChooser .wa-chooser-option .wa-logo{width:32px;height:32px;border-radius:10px;background:#18a957;display:flex;align-items:center;justify-content:center;flex:0 0 32px;color:#fff;font-size:19px;}
#sutilWhatsAppChooser .wa-chooser-option small{display:block;color:#aebbd0;font-size:11px;font-weight:600;margin-top:2px;}
#sutilWhatsAppChooser .wa-chooser-cancel{width:100%;margin-top:10px;min-height:44px;border-radius:13px;border:1px solid rgba(148,163,184,.3);background:transparent;color:#dbe5f5;font-weight:750;}
</style>

<style id="sutil-fix-12-15-61-titulos-cuotas">
/* SUTIL FIX 12.15.61 · títulos visibles en Estado de cuenta > Cuotas */
@media(max-width:650px){
  .client-statement-installments-table thead{
    display:table-header-group !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  .client-statement-installments-table thead tr{
    display:table-row !important;
  }
  .client-statement-installments-table thead th{
    display:table-cell !important;
    color:var(--text) !important;
    background:rgba(255,255,255,.07) !important;
    border-bottom:1px solid var(--line) !important;
    padding:8px 2px !important;
    font-size:9px !important;
    font-weight:900 !important;
    line-height:1.05 !important;
    text-transform:none !important;
    white-space:normal !important;
  }
}
</style>

<style id="sutil-fix-12-15-62-titulos-cuotas-forzados">
/* SUTIL FIX 12.15.62 · fuerza cabecera SOLO en Estado de cuenta > Cuotas.
   Necesario porque #clientsSection thead{display:none!important} tiene mayor especificidad. */
@media(max-width:650px){
  #clientsSection .client-statement-installments-table thead{
    display:table-header-group !important;
    visibility:visible !important;
    opacity:1 !important;
  }
  #clientsSection .client-statement-installments-table thead tr{display:table-row !important;}
  #clientsSection .client-statement-installments-table thead th{
    display:table-cell !important;
    visibility:visible !important;
    color:var(--text) !important;
    background:rgba(255,255,255,.08) !important;
    border-bottom:1px solid var(--line) !important;
    padding:7px 2px !important;
    font-size:8.5px !important;
    font-weight:900 !important;
    line-height:1.05 !important;
    text-transform:none !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
}
</style>

<style>
/* SUTIL FIX 12.15.70 · correcciones visuales y de navegación verificadas en móvil */
@media(max-width:650px){
  .loan-card-head{display:grid !important;grid-template-columns:minmax(0,1fr) minmax(92px,42%) !important;gap:8px !important;align-items:start !important}
  .loan-card-head > div{min-width:0 !important}
  .loan-card-head > .status-overdue,
  .loan-card-head > .checking,
  .loan-card-head > .status-current,
  .loan-card-head > .muted{
    min-width:0 !important;max-width:100% !important;width:100% !important;
    white-space:normal !important;overflow-wrap:normal !important;word-break:normal !important;
    text-align:right !important;line-height:1.15 !important;font-size:15px !important;
    justify-self:end !important;
  }
}
/* Consulta global: mismo contraste legible que el historial del cliente */
body[data-sutil-theme="dark"] #loansConsultPane .loan-card{
  background:#2b374b !important;border-color:#52617d !important;color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #loansConsultPane .loan-card.loan-overdue{
  background:#332f3d !important;border-color:#8a5a67 !important;
}
body[data-sutil-theme="dark"] #loansConsultPane .loan-card.loan-active{
  background:#353628 !important;border-color:#8c8350 !important;
}
body[data-sutil-theme="dark"] #loansConsultPane .loan-card.loan-paid{
  background:#263b34 !important;border-color:#4f7f69 !important;
}
body[data-sutil-theme="dark"] #loansConsultPane .loan-card.loan-loss{
  background:#303846 !important;border-color:#5d6a7c !important;
}
body[data-sutil-theme="dark"] #loansConsultPane .loan-card-grid > div{
  background:#303d53 !important;border:1px solid #53627d !important;color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #loansConsultPane .loan-card-grid small{color:#c5d0e1 !important;opacity:1 !important}
body[data-sutil-theme="dark"] #loansConsultPane .loan-card-grid strong{color:#fff !important}
body[data-sutil-theme="dark"] #loansConsultPane .loan-card-head small{color:#c1ccdd !important}
body[data-sutil-theme="dark"] #loansConsultPane .loan-card-head > div > strong{color:#fff !important}
body[data-sutil-theme="dark"] #loansConsultPane .loan-card .status-overdue{color:#ff8f9f !important}
</style>

<style id="sutil-fix-12-15-122-cash-dark-metrics">
/* FIX 12.15.122 — en modo oscuro, las métricas de Caja y el título Resumen de caja
   ya no quedan blancos ni con texto lavado. Solo visual. */
body[data-sutil-theme="dark"] #cashSection .cash-main-metric{
  background:linear-gradient(180deg,#2c3950,#263247)!important;
  border:1px solid #4f6281!important;
  box-shadow:none!important;
}
body[data-sutil-theme="dark"] #cashSection .cash-main-metric small{
  color:#c8d5e8!important;
  -webkit-text-fill-color:#c8d5e8!important;
  opacity:1!important;
}
body[data-sutil-theme="dark"] #cashSection .cash-main-metric strong{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  opacity:1!important;
}
body[data-sutil-theme="dark"] #cashSection .cash-main-metric .muted{
  color:#b6c4d8!important;
  -webkit-text-fill-color:#b6c4d8!important;
  opacity:1!important;
}
body[data-sutil-theme="dark"] #cashSection .cash-main-metric.total{
  background:linear-gradient(180deg,#233a57,#1f324c)!important;
  border-color:#5c85b3!important;
}
body[data-sutil-theme="dark"] #cashSection .cash-main-metric.total strong{
  color:#7ed0ff!important;
  -webkit-text-fill-color:#7ed0ff!important;
}
body[data-sutil-theme="dark"] #cashSection .cash-breakdown-title{
  color:#eef4ff!important;
  -webkit-text-fill-color:#eef4ff!important;
  opacity:1!important;
}
</style>

<style id="sutil-fix-12-15-90-cash-legibility">
/* Solo contraste visual dentro de Caja diaria. */
#cashSection .cash-action-card,
#cashSection .cash-summary-card,
#cashSection .cash-kpi,
#cashSection .cash-close-card,
#cashSection .cash-close-card label,
#cashSection .cash-close-card small,
#cashSection .cash-close-card strong{opacity:1!important}
#cashSection .cash-action-card h3,
#cashSection .cash-action-card strong,
#cashSection .cash-action-card .title,
#cashSection .cash-action-card .subtitle,
#cashSection .cash-summary-card h3,
#cashSection .cash-summary-card strong,
#cashSection .cash-summary-card small,
#cashSection .cash-kpi strong,
#cashSection .cash-kpi small,
#cashSection .cash-close-card h3,
#cashSection .cash-close-card label,
#cashSection .cash-close-card small,
#cashSection .cash-close-card strong{
 color:var(--text)!important;-webkit-text-fill-color:var(--text)!important
}
#cashSection .cash-action-card .subtitle,
#cashSection .cash-summary-card small,
#cashSection .cash-kpi small,
#cashSection .cash-close-card small{
 color:var(--muted)!important;-webkit-text-fill-color:var(--muted)!important
}
#cashSection .cash-action-card.active,
#cashSection .cash-action-card.active *{
 color:#fff!important;-webkit-text-fill-color:#fff!important
}
#cashSection .cash-close-card input,
#cashSection .cash-close-card textarea,
#cashSection .cash-close-card select{
 color:var(--text)!important;-webkit-text-fill-color:var(--text)!important;opacity:1!important
}
</style>


<style id="sutil-fix-12-15-91-cash-action-titles">
/* FIX 12.15.91 — títulos de acciones de Caja con contraste alto.
   Solo visual: no modifica estructura, IDs, eventos ni lógica. */
#cashSection .cash-action-card .title,
#cashSection .cash-action-card h3,
#cashSection .cash-action-card strong{
  color:var(--text)!important;
  -webkit-text-fill-color:var(--text)!important;
  opacity:1!important;
}
#cashSection .cash-action-card .subtitle{
  color:var(--muted)!important;
  -webkit-text-fill-color:var(--muted)!important;
  opacity:1!important;
}
/* La acción seleccionada tiene fondo morado: texto blanco para contraste. */
#cashSection .cash-action-card.active .title,
#cashSection .cash-action-card.active h3,
#cashSection .cash-action-card.active strong,
#cashSection .cash-action-card.active .subtitle{
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  opacity:1!important;
}
</style>


<style id="sutil-fix-12-15-92-cash-menu-force">
/* FIX 12.15.92: contraste forzado sobre los botones reales #cashModeOperate/#cashModePending */
#cashModeOperate, #cashModePending{
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
}
#cashModeOperate *, #cashModePending *{
  color:#f8fafc!important;
  -webkit-text-fill-color:#f8fafc!important;
  opacity:1!important;
}
#cashModeOperate .muted, #cashModePending .muted,
#cashModeOperate small, #cashModePending small{
  color:#e2e8f0!important;
  -webkit-text-fill-color:#e2e8f0!important;
}
body.light #cashModePending,
body.light #cashModePending *{
  color:#172033!important;
  -webkit-text-fill-color:#172033!important;
}
body.light #cashModePending .muted,
body.light #cashModePending small{
  color:#475569!important;
  -webkit-text-fill-color:#475569!important;
}
</style>


<style id="sutil-fix-12-15-95-pending-light">
/* FIX 12.15.95 — corrección puntual del panel Pendientes.
   No usa selectores globales (*) y no toca lógica ni estructura. */
body.light #cashPendingPane{
  color:#172033!important;
}
body.light #cashPendingPane h2,
body.light #cashPendingPane h3,
body.light #cashPendingPane h4,
body.light #cashPendingPane strong,
body.light #cashPendingPane b{
  color:#172033!important;
  -webkit-text-fill-color:#172033!important;
  opacity:1!important;
}
body.light #cashPendingPane p,
body.light #cashPendingPane small,
body.light #cashPendingPane .muted{
  color:#526071!important;
  -webkit-text-fill-color:#526071!important;
  opacity:1!important;
}
</style>


<style id="sutil-fix-12-15-97-cash-dark-inner-text">
/* FIX 12.15.97 — legibilidad puntual en modo oscuro dentro de Caja. */
body:not(.light) #cashSection .cash-kpi small,
body:not(.light) #cashSection .cash-summary-card small,
body:not(.light) #cashSection .cash-close-card small,
body:not(.light) #cashSection .cash-close-card label{
  color:#526071!important;
  -webkit-text-fill-color:#526071!important;
  opacity:1!important;
}
body:not(.light) #cashSection .cash-close-card h3,
body:not(.light) #cashSection .cash-close-card strong,
body:not(.light) #cashSection .cash-summary-card h3{
  color:#172033!important;
  -webkit-text-fill-color:#172033!important;
  opacity:1!important;
}
</style>


<style id="sutil-fix-12-15-98-auto-close-dark">
/* FIX 12.15.98 — apunta al elemento REAL #cashCloseArea.
   La tarjeta permanece clara incluso en tema oscuro, por eso su texto debe ser oscuro. */
body:not(.light) #cashCloseArea h4,
body:not(.light) #cashCloseArea .muted,
body:not(.light) #cashCloseArea label,
body:not(.light) #cashCloseArea .cash-main-metric small{
  color:#334155!important;
  -webkit-text-fill-color:#334155!important;
  opacity:1!important;
}
body:not(.light) #cashCloseArea h4,
body:not(.light) #cashCloseArea label{
  color:#172033!important;
  -webkit-text-fill-color:#172033!important;
  font-weight:700!important;
}
body:not(.light) #cashCloseArea .cash-main-metric strong{
  color:#172033!important;
  -webkit-text-fill-color:#172033!important;
  opacity:1!important;
}
body:not(.light) #cashCloseArea .cash-main-metric.total strong{
  color:#08769b!important;
  -webkit-text-fill-color:#08769b!important;
}
body:not(.light) #cashCloseArea #cashCloseNotes{
  color:#172033!important;
  -webkit-text-fill-color:#172033!important;
  background:#ffffff!important;
  opacity:1!important;
}
body:not(.light) #cashCloseArea button.success{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  opacity:1!important;
}
</style>


<style id="sutil-renewal-switch-style">
.renewal-switch-row{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer;user-select:none}
.renewal-switch{position:relative;display:inline-flex;flex:0 0 auto;width:54px;height:30px}
.renewal-switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.renewal-switch-track{position:absolute;inset:0;border-radius:999px;background:#6b7280;border:1px solid rgba(255,255,255,.18);transition:.2s ease;box-shadow:inset 0 1px 3px rgba(0,0,0,.28)}
.renewal-switch-thumb{position:absolute;width:24px;height:24px;left:2px;top:2px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.32);transition:.2s ease}
.renewal-switch input:checked + .renewal-switch-track{background:#16c784}
.renewal-switch input:checked + .renewal-switch-track .renewal-switch-thumb{transform:translateX(24px)}
.renewal-switch input:focus-visible + .renewal-switch-track{outline:3px solid rgba(22,199,132,.28);outline-offset:2px}
.renewal-switch-label{font-weight:700;line-height:1.15}
body.light .renewal-switch-track{border-color:#aeb8c5}
@media(max-width:600px){.renewal-switch-row{width:100%;justify-content:flex-start}.renewal-switch-label{max-width:190px}}
</style>

<style>
/* SUTIL FIX 12.15.114 · contraste de Personal registrado en modo oscuro
   Solo visual: no modifica lógica, endpoints ni navegación. */
body[data-sutil-theme="dark"] #staffRegisteredPanel{
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #staffRegisteredPanel .staff-table td{
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #staffRegisteredPanel .staff-person-name{
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #staffRegisteredPanel .staff-role-pill.adm{
  background:#dcd6ff !important;
  color:#432f8c !important;
}
body[data-sutil-theme="dark"] #staffRegisteredPanel .staff-role-pill.collector{
  background:#d8f3e3 !important;
  color:#0f623b !important;
}
body[data-sutil-theme="dark"] #staffRegisteredPanel .staff-state-pill.active{
  background:#d5f5df !important;
  color:#125f35 !important;
}
body[data-sutil-theme="dark"] #staffRegisteredPanel .staff-state-pill.inactive{
  background:#e3e7ec !important;
  color:#46515d !important;
}
body[data-sutil-theme="dark"] #staffRegisteredPanel .staff-route-pill{
  background:#dceeff !important;
  color:#145c94 !important;
}
body[data-sutil-theme="dark"] #staffRegisteredPanel .muted{
  color:#c7d1df !important;
}
</style>

<style>
/* SUTIL FIX 12.15.115 · Personal registrado en celular sin desplazamiento horizontal.
   Solo cambia la presentación móvil; conserva la tabla y toda su lógica. */
@media (max-width:700px){
  #staffRegisteredPanel .table-wrap{
    overflow-x:visible !important;
    width:100% !important;
  }
  #staffRegisteredPanel .staff-table{
    display:block !important;
    width:100% !important;
    min-width:0 !important;
    border-collapse:separate !important;
  }
  #staffRegisteredPanel .staff-table thead{
    display:none !important;
  }
  #staffRegisteredPanel .staff-table tbody{
    display:block !important;
    width:100% !important;
  }
  #staffRegisteredPanel .staff-table tr{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:0 !important;
    width:100% !important;
    margin:0 0 14px !important;
    padding:12px !important;
    border:1px solid #dfe6ed !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:0 2px 7px rgba(24,39,56,.05) !important;
  }
  #staffRegisteredPanel .staff-table td{
    display:block !important;
    min-width:0 !important;
    width:auto !important;
    padding:8px 9px !important;
    border:0 !important;
    overflow-wrap:anywhere !important;
  }
  #staffRegisteredPanel .staff-table td::before{
    display:block;
    margin-bottom:4px;
    color:#738092;
    font-size:10px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
  }
  #staffRegisteredPanel .staff-table td:nth-child(1)::before{content:"Perfil"}
  #staffRegisteredPanel .staff-table td:nth-child(2)::before{content:"Nombre"}
  #staffRegisteredPanel .staff-table td:nth-child(3)::before{content:"Celular"}
  #staffRegisteredPanel .staff-table td:nth-child(4)::before{content:"Rutas"}
  #staffRegisteredPanel .staff-table td:nth-child(5)::before{content:"Estado"}
  #staffRegisteredPanel .staff-table td:nth-child(6)::before{content:"Acciones"}

  /* Perfil + estado / Nombre + celular en dos columnas. */
  #staffRegisteredPanel .staff-table td:nth-child(1){grid-column:1}
  #staffRegisteredPanel .staff-table td:nth-child(5){grid-column:2;grid-row:1}
  #staffRegisteredPanel .staff-table td:nth-child(2){grid-column:1}
  #staffRegisteredPanel .staff-table td:nth-child(3){grid-column:2}

  /* Rutas y acciones aprovechan todo el ancho del celular. */
  #staffRegisteredPanel .staff-table td:nth-child(4),
  #staffRegisteredPanel .staff-table td:nth-child(6){
    grid-column:1 / -1 !important;
    border-top:1px solid #edf1f4 !important;
    margin-top:3px !important;
    padding-top:10px !important;
  }
  #staffRegisteredPanel .staff-person-name{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  #staffRegisteredPanel .staff-route-pill{
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
  }
  #staffRegisteredPanel .staff-action-row{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    gap:8px !important;
    min-width:0 !important;
    width:100% !important;
  }
  #staffRegisteredPanel .staff-action-row .btn{
    width:100% !important;
    min-width:0 !important;
    margin:0 !important;
    padding:10px 7px !important;
    white-space:normal !important;
    line-height:1.15 !important;
    font-size:12px !important;
  }
  body[data-sutil-theme="dark"] #staffRegisteredPanel .staff-table tr{
    background:#253650 !important;
    border-color:#475a73 !important;
  }
  body[data-sutil-theme="dark"] #staffRegisteredPanel .staff-table td::before{
    color:#aebbd0 !important;
  }
  body[data-sutil-theme="dark"] #staffRegisteredPanel .staff-table td:nth-child(4),
  body[data-sutil-theme="dark"] #staffRegisteredPanel .staff-table td:nth-child(6){
    border-top-color:#42536a !important;
  }
}
</style>


<style id="sutilFix1215117WorkDateStyle">
  /* FIX 12.15.117: fecha de trabajo normal visible como dato fijo, no como selector. */
  #collectionsWorkDateLabel .sutil-fixed-work-date{
    min-height:58px;
    margin-top:7px;
    padding:13px 16px;
    border:1px solid rgba(148,163,184,.55);
    border-radius:14px;
    background:rgba(148,163,184,.10);
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:800;
    line-height:1.28;
    cursor:default;
    user-select:none;
    -webkit-user-select:none;
    pointer-events:none;
    box-sizing:border-box;
  }
  #collectionsWorkDateLabel .sutil-fixed-work-date::before{
    content:"📅";
    flex:0 0 auto;
    font-size:21px;
  }
  #collectionsWorkDateLabel .sutil-work-date-picker{display:none;}
  #collectionsWorkDateLabel.collections-workdate-editable .sutil-fixed-work-date{display:none;}
  #collectionsWorkDateLabel.collections-workdate-editable .sutil-work-date-picker{display:block;}
  body.dark #collectionsWorkDateLabel .sutil-fixed-work-date,
  [data-theme="dark"] #collectionsWorkDateLabel .sutil-fixed-work-date{
    background:rgba(15,23,42,.18);
    border-color:rgba(148,163,184,.42);
  }
</style>

<style id="sutil-fix-12-15-123-cash-close-dark">
/* FIX 12.15.123 — solo apariencia del panel Cierre automático en modo oscuro. */
body[data-sutil-theme="dark"] #cashCloseArea{
  background:linear-gradient(180deg,#2f3d54,#273449)!important;
  border:1px solid #526784!important;
  color:#f4f7ff!important;
}
body[data-sutil-theme="dark"] #cashCloseArea h4,
body[data-sutil-theme="dark"] #cashCloseArea label{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  opacity:1!important;
}
body[data-sutil-theme="dark"] #cashCloseArea .muted{
  color:#c8d5e8!important;
  -webkit-text-fill-color:#c8d5e8!important;
  opacity:1!important;
}
body[data-sutil-theme="dark"] #cashCloseArea .cash-main-metric{
  background:linear-gradient(180deg,#24344c,#1f2d42)!important;
  border:1px solid #506785!important;
}
body[data-sutil-theme="dark"] #cashCloseArea .cash-main-metric small{
  color:#c7d5e8!important;
  -webkit-text-fill-color:#c7d5e8!important;
  opacity:1!important;
}
body[data-sutil-theme="dark"] #cashCloseArea .cash-main-metric strong{
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  opacity:1!important;
}
body[data-sutil-theme="dark"] #cashCloseArea .cash-main-metric.total{
  background:linear-gradient(180deg,#1d3b59,#1b314a)!important;
  border-color:#4e7da7!important;
}
body[data-sutil-theme="dark"] #cashCloseArea .cash-main-metric.total strong{
  color:#46c8f1!important;
  -webkit-text-fill-color:#46c8f1!important;
}
body[data-sutil-theme="dark"] #cashCloseArea #cashCloseNotes{
  background:#213047!important;
  border:1px solid #536985!important;
  color:#ffffff!important;
  -webkit-text-fill-color:#ffffff!important;
  opacity:1!important;
}
body[data-sutil-theme="dark"] #cashCloseArea #cashCloseNotes::placeholder{
  color:#aebed3!important;
  -webkit-text-fill-color:#aebed3!important;
  opacity:1!important;
}
</style>

<style id="sutil-fix-12-15-124-routes-switch">
/* Solo módulo Rutas: menú de dos opciones y vistas independientes. */
#routesSection .routes-switch-card{padding:18px 20px;margin-bottom:16px}
#routesSection .routes-switch-card h3{margin:0}
#routesSection .routes-switch-help{margin:6px 0 14px}
#routesSection .routes-switch-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#routesSection .routes-switch-button{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:7px;min-width:0;min-height:82px;padding:12px 9px;
  border:1px solid #d5dfed;border-radius:14px;
  background:#f7f9fd;color:#263951;-webkit-text-fill-color:#263951;
  font:inherit;font-size:15px;font-weight:800;line-height:1.25;text-align:center;
  cursor:pointer;overflow-wrap:anywhere;
}
#routesSection .routes-switch-button .routes-switch-icon{font-size:25px;line-height:1}
#routesSection .routes-switch-button.active{
  background:linear-gradient(120deg,#4f67d0,#6655c2);border-color:#889af3;
  color:#fff!important;-webkit-text-fill-color:#fff!important;
}
#routesSection .routes-switch-button:focus-visible{outline:3px solid #29b7d0;outline-offset:3px}
body[data-sutil-theme="dark"] #routesSection .routes-switch-button,
body:not(.light)[data-sutil-theme="dark"] #routesSection .routes-switch-button{
  background:#29374e;border-color:#536783;color:#f4f7ff;-webkit-text-fill-color:#f4f7ff;
}
body[data-sutil-theme="dark"] #routesSection .routes-switch-button.active{
  background:linear-gradient(120deg,#5069d2,#6353c5)!important;
  border-color:#8da0fb!important;color:#fff!important;-webkit-text-fill-color:#fff!important;
}
#routesSection .routes-view-pane{min-width:0}
@media(max-width:480px){
  #routesSection .routes-switch-card{padding:16px}
  #routesSection .routes-switch-grid{gap:9px}
  #routesSection .routes-switch-button{min-height:77px;font-size:14px;padding:10px 5px}
}
</style>

<style id="sutil-fix-12-15-125-routes-mobile-cards">
/* Exclusivo de Rutas registradas: las tablas conservan su aspecto en escritorio. */
@media(max-width:760px){
  #routesRegisteredPane,
  #routesRegisteredPane > .card,
  #routesRegisteredPane .table-wrap{min-width:0;max-width:100%;box-sizing:border-box;}
  #routesRegisteredPane .table-wrap{overflow-x:visible!important;width:100%;}
  #routesRegisteredPane .table-wrap > table{
    display:block!important;width:100%!important;min-width:0!important;
    max-width:100%!important;border-spacing:0;table-layout:fixed;
  }
  #routesRegisteredPane .table-wrap > table > thead{display:none!important;}
  #routesRegisteredPane .table-wrap > table > tbody{display:block!important;width:100%!important;}
  #routesRegisteredPane #routesTable > tr,
  #routesRegisteredPane #routeClientsTable > tr{
    display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 10px;min-width:0;width:100%;margin:0 0 12px;padding:10px;
    background:#f8fafc!important;border:1px solid #d7e0ed!important;
    border-radius:14px;box-sizing:border-box;box-shadow:none;
  }
  #routesRegisteredPane #routesTable > tr[onclick]{cursor:pointer;}
  #routesRegisteredPane #routesTable > tr > td,
  #routesRegisteredPane #routeClientsTable > tr > td{
    display:flex!important;flex-direction:column;justify-content:center;align-items:flex-start;
    min-width:0;width:auto!important;max-width:100%!important;
    padding:8px 5px!important;margin:0;box-sizing:border-box;
    background:transparent!important;border:0!important;box-shadow:none!important;
    color:#273951!important;-webkit-text-fill-color:#273951!important;
    overflow-wrap:anywhere;word-break:break-word;white-space:normal!important;
    font-size:14px;line-height:1.4;
  }
  #routesRegisteredPane #routesTable > tr > td::before,
  #routesRegisteredPane #routeClientsTable > tr > td::before{
    display:block;font-size:11px;letter-spacing:.025em;line-height:1.2;
    font-weight:700;margin-bottom:4px;color:#64748b!important;
    -webkit-text-fill-color:#64748b!important;
  }
  #routesRegisteredPane #routesTable > tr > td:first-child,
  #routesRegisteredPane #routeClientsTable > tr > td:first-child{
    grid-column:1 / -1;border-bottom:1px solid #d7e0ed!important;
    padding:9px 5px 11px!important;margin-bottom:4px;font-size:16px;font-weight:800;
  }
  #routesRegisteredPane #routesTable > tr > td:nth-child(10){
    grid-column:1 / -1;border-top:1px solid #d7e0ed!important;
    margin-top:7px;padding-top:12px!important;display:flex!important;
    flex-direction:row;justify-content:flex-start;gap:8px;align-items:center;flex-wrap:wrap;
  }
  #routesRegisteredPane #routesTable > tr > td:nth-child(10)::before{display:none;}
  #routesRegisteredPane #routesTable > tr > td:nth-child(10) .btn{margin:0;min-width:100px;}
  #routesRegisteredPane #routesTable > tr > td:nth-child(10)::after{
    content:"Toca la tarjeta para ver detalles";
    color:#64748b!important;-webkit-text-fill-color:#64748b!important;
    font-size:11px;flex:1;text-align:right;
  }
  #routesRegisteredPane #routesTable > tr > td[colspan],
  #routesRegisteredPane #routeClientsTable > tr > td[colspan]{
    grid-column:1/-1!important;border:0!important;margin:0!important;
  }
  #routesRegisteredPane #routesTable > tr > td[colspan]::before,
  #routesRegisteredPane #routeClientsTable > tr > td[colspan]::before{display:none!important;}
  /* Datos: ruta y ciudad en columnas; luego métricas agrupadas en dos columnas. */
  #routesRegisteredPane #routesTable > tr > td:nth-child(1)::before{content:"Ruta";}
  #routesRegisteredPane #routesTable > tr > td:nth-child(2)::before{content:"Ciudad";}
  #routesRegisteredPane #routesTable > tr > td:nth-child(3)::before{content:"País";}
  #routesRegisteredPane #routesTable > tr > td:nth-child(4)::before{content:"Idioma";}
  #routesRegisteredPane #routesTable > tr > td:nth-child(5)::before{content:"Moneda";}
  #routesRegisteredPane #routesTable > tr > td:nth-child(6)::before{content:"Clientes";}
  #routesRegisteredPane #routesTable > tr > td:nth-child(7)::before{content:"Morosos";}
  #routesRegisteredPane #routesTable > tr > td:nth-child(8)::before{content:"Créditos activos";}
  #routesRegisteredPane #routesTable > tr > td:nth-child(9)::before{content:"Cartera";}
  /* También sin arrastre horizontal en Detalle de ruta > Clientes de la ruta. */
  #routesRegisteredPane #routeClientsTable > tr > td:nth-child(1)::before{content:"Cliente";}
  #routesRegisteredPane #routeClientsTable > tr > td:nth-child(2)::before{content:"Código";}
  #routesRegisteredPane #routeClientsTable > tr > td:nth-child(3)::before{content:"Documento";}
  #routesRegisteredPane #routeClientsTable > tr > td:nth-child(4)::before{content:"Teléfono";}
  #routesRegisteredPane #routeClientsTable > tr > td:nth-child(5)::before{content:"Saldo";}
  #routesRegisteredPane #routeClientsTable > tr > td:nth-child(6)::before{content:"Vencimiento";}
  #routesRegisteredPane #routeClientsTable > tr > td:nth-child(7)::before{content:"Estado";}
  #routesRegisteredPane #routeClientsTable > tr > td.status-overdue,
  #routesRegisteredPane #routesTable > tr > td.status-overdue{
    color:#bb293f!important;-webkit-text-fill-color:#bb293f!important;
  }
  /* Portugués: los rótulos de las tarjetas acompañan el idioma activo. */
  html[lang="pt"] #routesRegisteredPane #routesTable > tr > td:nth-child(1)::before{content:"Rota";}
  html[lang="pt"] #routesRegisteredPane #routesTable > tr > td:nth-child(2)::before{content:"Cidade";}
  html[lang="pt"] #routesRegisteredPane #routesTable > tr > td:nth-child(3)::before{content:"País";}
  html[lang="pt"] #routesRegisteredPane #routesTable > tr > td:nth-child(4)::before{content:"Idioma";}
  html[lang="pt"] #routesRegisteredPane #routesTable > tr > td:nth-child(5)::before{content:"Moeda";}
  html[lang="pt"] #routesRegisteredPane #routesTable > tr > td:nth-child(6)::before{content:"Clientes";}
  html[lang="pt"] #routesRegisteredPane #routesTable > tr > td:nth-child(7)::before{content:"Inadimplentes";}
  html[lang="pt"] #routesRegisteredPane #routesTable > tr > td:nth-child(8)::before{content:"Créditos ativos";}
  html[lang="pt"] #routesRegisteredPane #routesTable > tr > td:nth-child(9)::before{content:"Carteira";}
  html[lang="pt"] #routesRegisteredPane #routesTable > tr > td:nth-child(10)::after{content:"Toque no cartão para ver detalhes";}
  html[lang="pt"] #routesRegisteredPane #routeClientsTable > tr > td:nth-child(1)::before{content:"Cliente";}
  html[lang="pt"] #routesRegisteredPane #routeClientsTable > tr > td:nth-child(2)::before{content:"Código";}
  html[lang="pt"] #routesRegisteredPane #routeClientsTable > tr > td:nth-child(3)::before{content:"Documento";}
  html[lang="pt"] #routesRegisteredPane #routeClientsTable > tr > td:nth-child(4)::before{content:"Telefone";}
  html[lang="pt"] #routesRegisteredPane #routeClientsTable > tr > td:nth-child(5)::before{content:"Saldo";}
  html[lang="pt"] #routesRegisteredPane #routeClientsTable > tr > td:nth-child(6)::before{content:"Vencimento";}
  html[lang="pt"] #routesRegisteredPane #routeClientsTable > tr > td:nth-child(7)::before{content:"Estado";}
  /* Inglés. */
  html[lang="en"] #routesRegisteredPane #routesTable > tr > td:nth-child(1)::before{content:"Route";}
  html[lang="en"] #routesRegisteredPane #routesTable > tr > td:nth-child(2)::before{content:"City";}
  html[lang="en"] #routesRegisteredPane #routesTable > tr > td:nth-child(3)::before{content:"Country";}
  html[lang="en"] #routesRegisteredPane #routesTable > tr > td:nth-child(4)::before{content:"Language";}
  html[lang="en"] #routesRegisteredPane #routesTable > tr > td:nth-child(5)::before{content:"Currency";}
  html[lang="en"] #routesRegisteredPane #routesTable > tr > td:nth-child(6)::before{content:"Clients";}
  html[lang="en"] #routesRegisteredPane #routesTable > tr > td:nth-child(7)::before{content:"Overdue";}
  html[lang="en"] #routesRegisteredPane #routesTable > tr > td:nth-child(8)::before{content:"Active loans";}
  html[lang="en"] #routesRegisteredPane #routesTable > tr > td:nth-child(9)::before{content:"Portfolio";}
  html[lang="en"] #routesRegisteredPane #routesTable > tr > td:nth-child(10)::after{content:"Tap this card to view details";}
  html[lang="en"] #routesRegisteredPane #routeClientsTable > tr > td:nth-child(1)::before{content:"Client";}
  html[lang="en"] #routesRegisteredPane #routeClientsTable > tr > td:nth-child(2)::before{content:"Code";}
  html[lang="en"] #routesRegisteredPane #routeClientsTable > tr > td:nth-child(3)::before{content:"Document";}
  html[lang="en"] #routesRegisteredPane #routeClientsTable > tr > td:nth-child(4)::before{content:"Phone";}
  html[lang="en"] #routesRegisteredPane #routeClientsTable > tr > td:nth-child(5)::before{content:"Balance";}
  html[lang="en"] #routesRegisteredPane #routeClientsTable > tr > td:nth-child(6)::before{content:"Due date";}
  html[lang="en"] #routesRegisteredPane #routeClientsTable > tr > td:nth-child(7)::before{content:"Status";}
  /* Ajuste de contraste para los dos temas. */
  body[data-sutil-theme="dark"] #routesRegisteredPane #routesTable > tr,
  body[data-sutil-theme="dark"] #routesRegisteredPane #routeClientsTable > tr{
    background:#29374b!important;border-color:#51627e!important;
  }
  body[data-sutil-theme="dark"] #routesRegisteredPane #routesTable > tr > td,
  body[data-sutil-theme="dark"] #routesRegisteredPane #routeClientsTable > tr > td{
    color:#f3f7ff!important;-webkit-text-fill-color:#f3f7ff!important;
  }
  body[data-sutil-theme="dark"] #routesRegisteredPane #routesTable > tr > td:first-child,
  body[data-sutil-theme="dark"] #routesRegisteredPane #routeClientsTable > tr > td:first-child,
  body[data-sutil-theme="dark"] #routesRegisteredPane #routesTable > tr > td:nth-child(10){border-color:#50617a!important;}
  body[data-sutil-theme="dark"] #routesRegisteredPane #routesTable > tr > td::before,
  body[data-sutil-theme="dark"] #routesRegisteredPane #routeClientsTable > tr > td::before,
  body[data-sutil-theme="dark"] #routesRegisteredPane #routesTable > tr > td:nth-child(10)::after{
    color:#b6c8e3!important;-webkit-text-fill-color:#b6c8e3!important;
  }
  body[data-sutil-theme="dark"] #routesRegisteredPane #routeClientsTable > tr > td.status-overdue,
  body[data-sutil-theme="dark"] #routesRegisteredPane #routesTable > tr > td.status-overdue{
    color:#ff9dac!important;-webkit-text-fill-color:#ff9dac!important;
  }
  #routesRegisteredPane #routeDetailTitle{overflow-wrap:anywhere;}
}
</style>
<style id="sutil-fix-12-15-126-route-details-visible">
#routesRegisteredPane #routeDetailCard{max-width:100%;min-width:0;scroll-margin-top:14px}
#routesRegisteredPane #routeDetailCard .route-detail-back{margin:0 0 15px;max-width:100%;white-space:normal}
#routesRegisteredPane #routeDetailTitle{overflow-wrap:anywhere;line-height:1.35}
#routesRegisteredPane #routeDetailTitle .btn{vertical-align:middle;margin-top:8px;white-space:normal}
#routesRegisteredPane .route-view-detail-button{margin-left:4px}
@media(max-width:760px){
  #routesRegisteredPane #routesTable > tr > td:nth-child(10)::after{content:none!important;display:none!important}
  #routesRegisteredPane #routesTable > tr > td:nth-child(10){justify-content:stretch;gap:8px}
  #routesRegisteredPane #routesTable > tr > td:nth-child(10) .btn{flex:1 1 110px;min-width:0;min-height:42px}
  #routesRegisteredPane #routeDetailCard .table-wrap{max-width:100%;overflow-x:visible!important}
  #routesRegisteredPane #routeDetailCard #routeSummary{min-width:0;max-width:100%}
}
</style>
<style id="sutil-fix-12-15-127-route-create-start">
/* Únicamente nuevo bloque del formulario Crear ruta; no modifica la ficha de edición. */
#routeCreateOperationalCard{max-width:100%;min-width:0;box-sizing:border-box}
#routeCreateOperationalCard .route-create-start-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-items:start}
#routeCreateOperationalCard .route-create-start-date{grid-column:1 / -1}
#routeCreateOperationalCard .route-create-start-grid label{display:block;min-width:0;overflow-wrap:anywhere}
#routeCreateOperationalCard .route-create-start-grid input{width:100%;min-width:0;max-width:100%;box-sizing:border-box;margin-top:7px}
body[data-sutil-theme="dark"] #routeCreateOperationalCard{background:#2d3b51!important;border:1px solid #516680!important;color:#f4f8ff!important}
body[data-sutil-theme="dark"] #routeCreateOperationalCard strong,
body[data-sutil-theme="dark"] #routeCreateOperationalCard label{color:#f8fbff!important;-webkit-text-fill-color:#f8fbff!important}
body[data-sutil-theme="dark"] #routeCreateOperationalCard .muted{color:#c4d1e4!important;-webkit-text-fill-color:#c4d1e4!important}
body[data-sutil-theme="dark"] #routeCreateOperationalCard input{background:#222f43!important;border-color:#627592!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
body[data-sutil-theme="dark"] #routeCreateOperationalCard input::placeholder{color:#becbdb!important;-webkit-text-fill-color:#becbdb!important}
@media(max-width:370px){#routeCreateOperationalCard .route-create-start-grid{gap:9px}#routeCreateOperationalCard{padding:11px!important}}
</style>
<style id="sutil-fix-12-15-131-cash-spacing">
/* Solo compactación visual de la consulta de Caja diaria.
   Los datos de resumen, cifras, IDs y procesos permanecen intactos. */
#cashSection #cashMainMetrics{
  gap:8px!important;
  margin:10px 0 12px!important;
  align-items:stretch!important;
}
#cashSection #cashMainMetrics > .cash-main-metric{
  margin:0!important;
  min-height:0!important;
  padding:12px 14px!important;
  border-radius:13px!important;
}
#cashSection #cashMainMetrics .cash-main-metric small{
  display:block;
  margin:0 0 4px!important;
  font-size:14px!important;
  line-height:1.2!important;
}
#cashSection #cashMainMetrics .cash-main-metric strong{
  display:block;
  font-size:clamp(22px,5.8vw,25px)!important;
  line-height:1.1!important;
  margin:0!important;
  font-variant-numeric:tabular-nums;
}
#cashSection #cashMainMetrics .cash-main-metric .muted{
  margin-top:3px!important;
  font-size:13px!important;
  line-height:1.2!important;
}
#cashSection .cash-breakdown-title{
  margin:12px 0 8px!important;
  line-height:1.2!important;
}
/* Evita sumar el margen vertical de .card al gap de .grid. */
#cashSection #cashSummary.grid{
  display:grid!important;
  gap:8px!important;
  align-content:start!important;
  align-items:stretch!important;
  width:100%!important;
}
#cashSection #cashSummary.grid > .report-metric-card{
  margin:0!important;
  min-width:0!important;
  min-height:0!important;
  padding:12px 14px!important;
  border-radius:13px!important;
  box-sizing:border-box!important;
}
#cashSection #cashSummary .report-metric-title{
  font-size:15px!important;
  line-height:1.22!important;
  margin:0!important;
  overflow-wrap:anywhere;
}
#cashSection #cashSummary .report-metric-value{
  font-size:clamp(22px,5.7vw,27px)!important;
  line-height:1.09!important;
  margin:4px 0 0!important;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
#cashSection #cashSummary .report-metric-subtext{
  font-size:13px!important;
  line-height:1.2!important;
  margin:4px 0 0!important;
  overflow-wrap:anywhere;
}
#cashSection #cashSummary .cash-summary-group-title{
  font-size:12px!important;
  line-height:1.1!important;
  font-weight:800!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  margin:4px 0 6px!important;
  color:#6c7888!important;
}
#cashSection #cashSummary .cash-summary-inline-grid{
  display:grid!important;
  gap:8px!important;
  margin:0 0 10px!important;
  grid-column:1 / -1!important;
}
#cashSection #cashSummary .cash-summary-group-title{grid-column:1 / -1!important;}
#cashSection #cashSummary .cash-summary-context-note{
  grid-column:1 / -1!important;
  margin:-4px 0 10px!important;
  font-size:12px!important;
  line-height:1.25!important;
  color:#667587!important;
  overflow-wrap:anywhere;
}
body[data-sutil-theme="dark"] #cashSection #cashSummary .cash-summary-context-note{
  color:#c7d6e8!important;
  -webkit-text-fill-color:#c7d6e8!important;
}
#cashSection #cashSummary .cash-summary-inline-grid.cols-1{grid-template-columns:minmax(0,1fr)!important;}
#cashSection #cashSummary .cash-summary-inline-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
#cashSection #cashSummary .cash-summary-inline-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
#cashSection #cashSummary .cash-summary-inline-card{
  margin:0!important;
  min-width:0!important;
  padding:10px 10px 9px!important;
  border-radius:13px!important;
  box-sizing:border-box!important;
}
#cashSection #cashSummary .cash-summary-inline-card .report-metric-title{
  font-size:13px!important;
  line-height:1.15!important;
  margin:0!important;
}
#cashSection #cashSummary .cash-summary-inline-card .report-metric-value{
  font-size:clamp(18px,5.2vw,22px)!important;
  line-height:1.08!important;
  margin:6px 0 0!important;
}
#cashSection #cashSummary .cash-summary-inline-card .report-metric-subtext{
  font-size:11px!important;
  line-height:1.15!important;
  margin:3px 0 0!important;
}
#cashSection #cashSummary .cash-summary-total-card{
  grid-column:1 / -1!important;
  margin:0 0 8px!important;
}
#cashSection #cashSummary .cash-summary-total-card .report-metric-title{
  font-size:14px!important;
}
#cashSection #cashSummary .cash-summary-total-card .report-metric-value{
  font-size:clamp(23px,6vw,29px)!important;
  line-height:1.08!important;
}
#cashSection #cashSummary .cash-base-final-title{
  grid-column:1 / -1!important;
  margin:8px 0 3px!important;
  letter-spacing:.07em!important;
}
#cashSection #cashSummary .cash-base-final-card{
  grid-column:1 / -1!important;
  margin:0!important;
  padding:14px!important;
  border-radius:14px!important;
  box-sizing:border-box!important;
  min-width:0!important;
  border:1px solid #a9c9d3!important;
  background:#eef9f8!important;
}
#cashSection #cashSummary .cash-base-final-card .report-metric-title{
  font-size:14px!important;
  font-weight:750!important;
}
#cashSection #cashSummary .cash-base-final-card .report-metric-value{
  font-size:clamp(25px,7vw,34px)!important;
  font-weight:850!important;
  line-height:1.12!important;
  color:#116b59!important;
  -webkit-text-fill-color:#116b59!important;
  margin:5px 0 0!important;
  font-variant-numeric:tabular-nums!important;
  overflow-wrap:anywhere!important;
}
#cashSection #cashSummary .cash-base-final-breakdown{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:9px!important;
  margin-top:12px!important;
}
#cashSection #cashSummary .cash-base-final-breakdown > div{
  min-width:0!important;
  padding:9px!important;
  border:1px solid #c5e0dd!important;
  background:rgba(255,255,255,.65)!important;
  border-radius:10px!important;
}
#cashSection #cashSummary .cash-base-final-breakdown span,
#cashSection #cashSummary .cash-base-final-breakdown strong{
  display:block!important;
  line-height:1.23!important;
  overflow-wrap:anywhere!important;
}
#cashSection #cashSummary .cash-base-final-breakdown span{
  font-size:12px!important;
  color:#405f62!important;
  -webkit-text-fill-color:#405f62!important;
}
#cashSection #cashSummary .cash-base-final-breakdown strong{
  margin-top:4px!important;
  font-size:clamp(15px,4.5vw,19px)!important;
  color:#153f43!important;
  -webkit-text-fill-color:#153f43!important;
  font-variant-numeric:tabular-nums!important;
}
#cashSection #cashSummary .cash-base-final-note{
  margin-top:10px!important;
  font-size:12px!important;
  line-height:1.36!important;
  color:#47676b!important;
  -webkit-text-fill-color:#47676b!important;
}
body[data-sutil-theme="dark"] #cashSection #cashSummary .cash-base-final-card{
  background:linear-gradient(180deg,#213f46,#253a49)!important;
  border-color:#4b818b!important;
}
body[data-sutil-theme="dark"] #cashSection #cashSummary .cash-base-final-card .report-metric-title,
body[data-sutil-theme="dark"] #cashSection #cashSummary .cash-base-final-note{
  color:#d5e6e9!important;
  -webkit-text-fill-color:#d5e6e9!important;
}
body[data-sutil-theme="dark"] #cashSection #cashSummary .cash-base-final-card .report-metric-value{
  color:#84e5bb!important;
  -webkit-text-fill-color:#84e5bb!important;
}
body[data-sutil-theme="dark"] #cashSection #cashSummary .cash-base-final-breakdown > div{
  background:#243847!important;
  border-color:#456576!important;
}
body[data-sutil-theme="dark"] #cashSection #cashSummary .cash-base-final-breakdown span{
  color:#c0d3df!important;
  -webkit-text-fill-color:#c0d3df!important;
}
body[data-sutil-theme="dark"] #cashSection #cashSummary .cash-base-final-breakdown strong{
  color:#f3f9ff!important;
  -webkit-text-fill-color:#f3f9ff!important;
}
/* FIX 12.15.134: los importes son independientes de las columnas vecinas.
   Para miles/millones en las tres tarjetas de cobros, la moneda se ubica
   sobre el número y la letra se reduce sin ocultar ningún dígito. */
#cashSection #cashSummary .cash-summary-inline-grid.cols-3 .cash-summary-inline-card .report-metric-value{
  min-width:0!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  font-size:clamp(15px,4.7vw,20px)!important;
  letter-spacing:-.02em;
}
#cashSection #cashSummary .cash-summary-inline-grid.cols-3 .cash-summary-inline-card .report-metric-value.cash-money-long{
  font-size:clamp(13px,3.9vw,16px)!important;
}
#cashSection #cashSummary .cash-summary-inline-grid.cols-3 .cash-summary-inline-card .report-metric-value.cash-money-verylong{
  font-size:clamp(12px,3.4vw,14px)!important;
}
#cashSection #cashSummary .cash-summary-inline-grid.cols-3 .cash-summary-inline-card .report-metric-value.cash-money-extreme{
  font-size:clamp(11px,3vw,12px)!important;
}
#cashSection #cashSummary .cash-summary-inline-grid.cols-3 .report-metric-value.cash-money-long .cash-money-currency{
  display:block!important;
  font-size:12px!important;
  line-height:1.15!important;
  margin:0 0 2px!important;
}
#cashSection #cashSummary .cash-summary-inline-grid.cols-3 .report-metric-value.cash-money-long .cash-money-digits{
  display:block!important;
  margin:0!important;
  max-width:100%!important;
  overflow-wrap:anywhere!important;
}

body[data-sutil-theme="dark"] #cashSection #cashSummary .cash-summary-group-title{color:#d4dcea!important;}
@media(max-width:620px){
  #cashSection #cashMainMetrics{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #cashSection #cashSummary.grid{
    grid-template-columns:minmax(0,1fr)!important;
  }
  #cashSection #cashSummary .cash-summary-inline-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #cashSection #cashSummary .cash-summary-inline-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))!important;}
}
</style>

<style id="sutil-fix-12-15-136-cash-kpis-compact">
/* Solo la consulta con cuotas programadas/pagadas/pendientes. Nunca afecta
   el formulario de cierre ni los valores cuando la caja no existe. */
@media(max-width:700px){
  #cashSection #cashMainMetrics.cash-kpis-compact{
    display:grid!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
    align-items:stretch!important;
    margin:10px 0 12px!important;
  }
  #cashSection #cashMainMetrics.cash-kpis-compact > .cash-main-metric{
    min-width:0!important;
    margin:0!important;
    padding:11px 10px!important;
    box-sizing:border-box!important;
  }
  #cashSection #cashMainMetrics.cash-kpis-compact > .cash-main-metric small{
    font-size:13px!important;
    line-height:1.2!important;
    margin:0 0 5px!important;
    overflow-wrap:break-word!important;
  }
  #cashSection #cashMainMetrics.cash-kpis-compact > .cash-main-metric strong{
    font-size:clamp(15px,4.2vw,20px)!important;
    line-height:1.13!important;
    margin:0!important;
    letter-spacing:-.02em!important;
    font-variant-numeric:tabular-nums!important;
    overflow-wrap:anywhere!important;
  }
  #cashSection #cashMainMetrics.cash-kpis-compact > .cash-main-metric .muted{
    margin:4px 0 0!important;
    font-size:12px!important;
    line-height:1.2!important;
  }
  #cashSection #cashMainMetrics.cash-kpis-compact > .cash-main-metric:nth-child(3){
    grid-column:1 / -1!important;
    padding:11px 14px!important;
  }
  #cashSection #cashMainMetrics.cash-kpis-compact > .cash-main-metric:nth-child(3) strong{
    font-size:clamp(20px,5.4vw,24px)!important;
  }
}
</style>
<style id="sutil-fix-12-15-138-base-visibility">
.base-visibility-owner-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;margin:16px 0 3px;padding:14px;border:1px solid #a4c4cf;border-radius:15px;background:rgba(34,172,164,.075)}
.base-visibility-owner-copy{flex:1 1 195px;min-width:0;color:var(--text,#182739)}
.base-visibility-owner-copy strong{display:block;font-size:15px;line-height:1.25}
.base-visibility-owner-copy small{display:block;margin-top:5px;color:var(--muted,#59677b);line-height:1.3}
.base-visibility-switch{width:56px;height:32px;position:relative;flex:none;cursor:pointer}
.base-visibility-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;z-index:1}
.base-visibility-switch-track{position:absolute;inset:0;border-radius:999px;background:#909daf;transition:background .18s}
.base-visibility-switch-track:before{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:white;box-shadow:0 2px 6px #0004;transition:transform .18s}
.base-visibility-switch input:checked + .base-visibility-switch-track{background:#0bba85}
.base-visibility-switch input:checked + .base-visibility-switch-track:before{transform:translateX(24px)}
.base-visibility-switch input:focus-visible + .base-visibility-switch-track{outline:3px solid #66cbf3;outline-offset:2px}
.base-visibility-switch input:disabled + .base-visibility-switch-track{opacity:.5}
.base-visibility-state{width:100%;min-height:16px;font-size:12px;font-weight:700;color:var(--muted,#667587)}
body[data-sutil-theme="dark"] .base-visibility-owner-card{background:#293c46!important;border-color:#4d8187!important}
body[data-sutil-theme="dark"] .base-visibility-owner-copy,body[data-sutil-theme="dark"] .base-visibility-owner-copy strong{color:#f1f7ff!important;-webkit-text-fill-color:#f1f7ff!important}
body[data-sutil-theme="dark"] .base-visibility-owner-copy small,body[data-sutil-theme="dark"] .base-visibility-state{color:#c9d8e5!important;-webkit-text-fill-color:#c9d8e5!important}
</style>

<style id="sutil-fix-12-15-141-close-receipt">
#cashCloseArea .cash-close-expenses-line{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:10px 0 0;padding:10px 13px;border:1px solid rgba(116,141,168,.45);border-radius:11px;font-weight:700;}
body[data-sutil-theme="dark"] #cashCloseArea .cash-close-expenses-line{background:#223247;color:#eef5ff;border-color:#536985;}
body[data-sutil-theme="light"] #cashCloseArea .cash-close-expenses-line{background:#f1f6fb;color:#273a4e;border-color:#ccdae7;}
#sutilCashReceiptModal{position:fixed;inset:0;z-index:2147483010;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(10,17,31,.77);}
#sutilCashReceiptModal.open{display:flex;}
#sutilCashReceiptModal .cash-receipt-panel{width:min(480px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:23px 18px;border-radius:20px;background:#2b374b;color:#f5f8ff;border:1px solid #5d718c;box-shadow:0 25px 65px #0007;}
#sutilCashReceiptModal .cash-receipt-panel h3{margin:0 0 9px;color:#f4f8ff;font-size:22px;}
#sutilCashReceiptModal .cash-receipt-panel p{color:#cbd7e9;font-size:14px;line-height:1.4;margin:8px 0 15px;}
#sutilCashReceiptModal .cash-receipt-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
#sutilCashReceiptModal .cash-receipt-actions button{min-width:0;min-height:52px;white-space:normal;border:1px solid #6b82a2;background:#394c69;border-radius:12px;color:#fff;font-weight:700;font-size:15px;cursor:pointer;padding:10px;}
#sutilCashReceiptModal .cash-receipt-actions button.cash-receipt-primary{background:#5268d8;border-color:#7585e5;}
#sutilCashReceiptModal .cash-receipt-actions button:focus-visible{outline:3px solid #8cd4fa;outline-offset:2px;}
#sutilCashReceiptModal .cash-receipt-status{min-height:20px;margin-top:12px;color:#c8def3;font-size:13px;}
body[data-sutil-theme="light"] #sutilCashReceiptModal .cash-receipt-panel{background:#fff;border-color:#d3deea;color:#24364b;}
body[data-sutil-theme="light"] #sutilCashReceiptModal .cash-receipt-panel h3{color:#24364b;}
body[data-sutil-theme="light"] #sutilCashReceiptModal .cash-receipt-panel p{color:#53677b;}
body[data-sutil-theme="light"] #sutilCashReceiptModal .cash-receipt-status{color:#53677b;}
</style>

<style id="sutil-fix-12-15-147-routes-registered-filter-style">
/* Rutas registradas: no renderizar toda la cartera de rutas sin una selección explícita. */
#routesRegisteredPane .routes-registered-filter-card{
  margin:0 0 14px!important;
  padding:14px!important;
  border-radius:16px!important;
}
#routesRegisteredPane .routes-registered-filter-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
#routesRegisteredPane .routes-registered-filter-title{
  font-size:14px;
  font-weight:900;
  line-height:1.25;
}
#routesRegisteredPane .routes-registered-filter-help{
  margin-top:3px;
  font-size:11px;
  line-height:1.35;
}
#routesRegisteredPane .routes-registered-empty{
  padding:18px 16px;
  border:1px dashed #60718a;
  border-radius:15px;
  text-align:center;
  color:#c9d4e5;
  background:rgba(255,255,255,.025);
  font-size:13px;
  line-height:1.45;
}
#routesRegisteredPane .routes-registered-empty strong{
  display:block;
  margin-bottom:4px;
  color:#eef4ff;
  font-size:14px;
}
body[data-sutil-theme="light"] #routesRegisteredPane .routes-registered-empty{
  color:#627187;
  border-color:#cbd6e4;
  background:#f7fafe;
}
body[data-sutil-theme="light"] #routesRegisteredPane .routes-registered-empty strong{color:#21374f}
</style>

<style id="sutil-fix-12-15-146-route-picker-style">
/* SUTIL FIX 12.15.146 · selector profesional global de rutas */
.sutil-route-native-select{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  margin:0!important;
  padding:0!important;
  opacity:0!important;
  pointer-events:none!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  clip-path:inset(50%)!important;
  white-space:nowrap!important;
}
.sutil-route-picker-trigger{
  width:100%;
  min-height:54px;
  border:1px solid #586a84;
  border-radius:12px;
  background:#243249;
  color:#f7f9ff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:11px 14px;
  font:inherit;
  font-weight:800;
  text-align:left;
  box-sizing:border-box;
  cursor:pointer;
  transition:border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.sutil-route-picker-trigger:hover,
.sutil-route-picker-trigger:focus-visible{
  border-color:#2cc0cf;
  box-shadow:0 0 0 3px rgba(44,192,207,.14);
  outline:none;
}
.sutil-route-picker-trigger:disabled{
  opacity:.55;
  cursor:not-allowed;
}
.sutil-route-picker-trigger-main{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  flex:1;
}
.sutil-route-picker-trigger-icon{
  width:32px;
  height:32px;
  flex:0 0 32px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(91,105,219,.28),rgba(42,169,184,.22));
  font-size:17px;
}
.sutil-route-picker-trigger-text{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sutil-route-picker-trigger-arrow{
  flex:0 0 auto;
  color:#c7d2e3;
  font-size:18px;
  line-height:1;
}
.sutil-route-picker-backdrop{
  position:fixed;
  inset:0;
  z-index:2147482100;
  background:rgba(5,10,20,.72);
  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
  display:none;
  align-items:flex-end;
  justify-content:center;
  padding:14px;
  box-sizing:border-box;
}
.sutil-route-picker-backdrop.open{display:flex}
.sutil-route-picker-sheet{
  width:min(640px,100%);
  max-height:min(76vh,720px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid #52647f;
  border-radius:24px;
  background:linear-gradient(180deg,#26344a,#202c40);
  color:#f5f8ff;
  box-shadow:0 28px 90px rgba(0,0,0,.46);
}
.sutil-route-picker-head{
  padding:16px 16px 12px;
  border-bottom:1px solid rgba(139,158,188,.22);
}
.sutil-route-picker-title-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.sutil-route-picker-title-box{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.sutil-route-picker-title-icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border-radius:13px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,rgba(91,105,219,.34),rgba(42,169,184,.28));
  font-size:21px;
}
.sutil-route-picker-title{
  font-size:18px;
  font-weight:900;
  line-height:1.15;
}
.sutil-route-picker-count{
  margin-top:3px;
  color:#aebdd2;
  font-size:12px;
}
.sutil-route-picker-close{
  width:40px;
  height:40px;
  flex:0 0 40px;
  border:1px solid #5b6e89;
  border-radius:12px;
  background:#2d3b52;
  color:#fff;
  font-size:20px;
  font-weight:900;
  cursor:pointer;
}
.sutil-route-picker-search-wrap{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:12px;
  min-height:48px;
  padding:0 12px;
  border:1px solid #536782;
  border-radius:12px;
  background:#1f2b3e;
}
.sutil-route-picker-search-icon{font-size:17px;opacity:.8}
.sutil-route-picker-search{
  flex:1;
  min-width:0;
  height:46px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font:inherit!important;
}
.sutil-route-picker-search::placeholder{
  color:#9eacc0!important;
  -webkit-text-fill-color:#9eacc0!important;
  opacity:1!important;
}
.sutil-route-picker-list{
  overflow:auto;
  overscroll-behavior:contain;
  padding:10px;
  -webkit-overflow-scrolling:touch;
}
.sutil-route-picker-option{
  width:100%;
  min-height:56px;
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 7px;
  padding:11px 12px;
  border:1px solid transparent;
  border-radius:14px;
  background:#2a384e;
  color:#eef4ff;
  text-align:left;
  font:inherit;
  cursor:pointer;
  box-sizing:border-box;
}
.sutil-route-picker-option:last-child{margin-bottom:0}
.sutil-route-picker-option:hover,
.sutil-route-picker-option:focus-visible{
  outline:none;
  border-color:#5c7395;
  background:#314159;
}
.sutil-route-picker-option.selected{
  border-color:#46c4a5;
  background:linear-gradient(135deg,rgba(40,116,104,.52),rgba(47,72,108,.74));
}
.sutil-route-picker-option:disabled{
  opacity:.42;
  cursor:not-allowed;
}
.sutil-route-picker-option-dot{
  width:36px;
  height:36px;
  flex:0 0 36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:11px;
  background:#34465f;
  font-size:17px;
}
.sutil-route-picker-option.selected .sutil-route-picker-option-dot{
  background:#2c8f79;
}
.sutil-route-picker-option-label{
  min-width:0;
  flex:1;
  font-weight:800;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.sutil-route-picker-option-check{
  flex:0 0 30px;
  width:30px;
  height:30px;
  border-radius:50%;
  border:2px solid #91a0b5;
  display:flex;
  align-items:center;
  justify-content:center;
  color:transparent;
  font-size:16px;
  font-weight:900;
}
.sutil-route-picker-option.selected .sutil-route-picker-option-check{
  border-color:#72dda8;
  background:#72dda8;
  color:#15392f;
}
.sutil-route-picker-empty{
  padding:28px 16px;
  text-align:center;
  color:#b4c0d2;
  font-size:14px;
}
body.sutil-route-picker-open{overflow:hidden!important}
body[data-sutil-theme="light"] .sutil-route-picker-trigger{
  background:#fff;
  color:#1e334a;
  border-color:#cbd6e4;
}
body[data-sutil-theme="light"] .sutil-route-picker-trigger-arrow{color:#60738a}
body[data-sutil-theme="light"] .sutil-route-picker-sheet{
  background:linear-gradient(180deg,#fbfdff,#f1f5fa);
  color:#1d334a;
  border-color:#d0dbe8;
}
body[data-sutil-theme="light"] .sutil-route-picker-head{border-bottom-color:#dbe3ed}
body[data-sutil-theme="light"] .sutil-route-picker-count{color:#68798d}
body[data-sutil-theme="light"] .sutil-route-picker-close{
  background:#eef3f8;
  color:#23394f;
  border-color:#ccd7e4;
}
body[data-sutil-theme="light"] .sutil-route-picker-search-wrap{
  background:#fff;
  border-color:#cbd7e5;
}
body[data-sutil-theme="light"] .sutil-route-picker-search{
  color:#21374e!important;
  -webkit-text-fill-color:#21374e!important;
}
body[data-sutil-theme="light"] .sutil-route-picker-search::placeholder{
  color:#7b8999!important;
  -webkit-text-fill-color:#7b8999!important;
}
body[data-sutil-theme="light"] .sutil-route-picker-option{
  background:#fff;
  color:#21374e;
  border-color:#e0e7ef;
}
body[data-sutil-theme="light"] .sutil-route-picker-option:hover,
body[data-sutil-theme="light"] .sutil-route-picker-option:focus-visible{background:#f3f7fb}
body[data-sutil-theme="light"] .sutil-route-picker-option.selected{
  background:linear-gradient(135deg,#edf9f5,#eef4ff);
  border-color:#54bfa7;
}
body[data-sutil-theme="light"] .sutil-route-picker-option-dot{background:#edf2f8}
body[data-sutil-theme="light"] .sutil-route-picker-option.selected .sutil-route-picker-option-dot{background:#d7f4ea}
@media(max-width:560px){
  .sutil-route-picker-backdrop{padding:8px}
  .sutil-route-picker-sheet{max-height:80vh;border-radius:22px}
  .sutil-route-picker-option{min-height:54px}
}
</style>


<style id="fix1215159-annual-trend-final">
/* FIX 12.15.159 · Tendencias anuales visibles por encima de cualquier tema global */
#reportsSection #annualReportMonths .annual-growth{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:3px!important;
  margin-left:7px!important;
  padding:3px 7px!important;
  border-radius:999px!important;
  font-size:12px!important;
  font-weight:900!important;
  line-height:1.1!important;
  white-space:nowrap!important;
  vertical-align:middle!important;
  opacity:1!important;
}
#reportsSection #annualReportMonths .annual-growth.up{
  color:#50e89b!important;
  -webkit-text-fill-color:#50e89b!important;
  background:rgba(35,196,113,.13)!important;
  border:1px solid rgba(80,232,155,.28)!important;
}
#reportsSection #annualReportMonths .annual-growth.down{
  color:#ff7b7b!important;
  -webkit-text-fill-color:#ff7b7b!important;
  background:rgba(235,77,75,.13)!important;
  border:1px solid rgba(255,123,123,.28)!important;
}
#reportsSection #annualReportMonths .annual-growth.neutral{
  color:#aeb8c7!important;
  -webkit-text-fill-color:#aeb8c7!important;
  background:rgba(150,160,175,.11)!important;
  border:1px solid rgba(174,184,199,.22)!important;
}
body[data-sutil-theme="light"] #reportsSection #annualReportMonths .annual-growth.up,
body.light #reportsSection #annualReportMonths .annual-growth.up{
  color:#137a43!important;
  -webkit-text-fill-color:#137a43!important;
  background:#e9f8ef!important;
  border-color:#b8e6ca!important;
}
body[data-sutil-theme="light"] #reportsSection #annualReportMonths .annual-growth.down,
body.light #reportsSection #annualReportMonths .annual-growth.down{
  color:#b52f2b!important;
  -webkit-text-fill-color:#b52f2b!important;
  background:#fdeeee!important;
  border-color:#f2c3c1!important;
}
body[data-sutil-theme="light"] #reportsSection #annualReportMonths .annual-growth.neutral,
body.light #reportsSection #annualReportMonths .annual-growth.neutral{
  color:#667281!important;
  -webkit-text-fill-color:#667281!important;
  background:#f1f4f7!important;
  border-color:#d9e0e7!important;
}
@media(max-width:600px){
  #reportsSection #annualReportMonths .annual-growth{font-size:11px!important;padding:3px 6px!important;margin-left:5px!important;}
}
</style>

<style>

/* FIX 12.15.161 · KPIs ejecutivos antes de los filtros */
#reportsSection .report-global-kpis-top{margin:18px 0 4px!important;}
#reportsSection .report-kpi-positive{
  border-color:rgba(24,164,98,.30)!important;
  background:linear-gradient(180deg,rgba(33,181,108,.10),rgba(33,181,108,.045))!important;
  box-shadow:inset 0 0 0 1px rgba(35,190,115,.05);
}
#reportsSection .report-kpi-positive .dashboard-kpi-value{
  color:#15975a!important;
}
#reportsSection .report-kpi-positive .dashboard-kpi-label{
  color:#526477!important;
}
body[data-sutil-theme="dark"] #reportsSection .report-kpi-positive{
  background:linear-gradient(180deg,rgba(31,151,96,.16),rgba(25,88,66,.12))!important;
  border-color:rgba(66,211,139,.28)!important;
}
body[data-sutil-theme="dark"] #reportsSection .report-kpi-positive .dashboard-kpi-value{
  color:#45db91!important;
}
body[data-sutil-theme="dark"] #reportsSection .report-kpi-positive .dashboard-kpi-label{
  color:#c8d6d0!important;
}
@media(max-width:560px){
  #reportsSection .report-global-kpis-top{margin:15px 0 2px!important;gap:9px!important;}
}


/* FIX 12.15.162 · cifras KPI adaptativas sin desbordes */
#reportsSection .report-global-kpis-top .dashboard-kpi{
  min-width:0!important;
  overflow:hidden!important;
}
#reportsSection .report-global-kpis-top .dashboard-kpi-value{
  display:block!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:clip!important;
  line-height:1.05!important;
  letter-spacing:-.025em!important;
  font-variant-numeric:tabular-nums lining-nums;
}
@media(max-width:560px){
  #reportsSection .report-global-kpis-top .dashboard-kpi{padding:10px 10px!important;}
  #reportsSection .report-global-kpis-top .dashboard-kpi-value{font-size:22px;}
}

</style>


<style>
/* FIX 12.15.165 · selector de tema compacto arriba a la derecha en móvil */
@media(max-width:650px){
  #profileChooser .sutil-profile-theme-mount,
  #login .sutil-login-theme-mount{
    display:block !important;
    width:0 !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:visible !important;
  }
  #profileChooser .sutil-profile-theme-mount .sutil-theme-floating,
  #login .sutil-login-theme-mount .sutil-theme-floating,
  body:not(.sutil-admin-authenticated) .sutil-theme-floating{
    position:fixed !important;
    top:88px !important;
    right:10px !important;
    left:auto !important;
    bottom:auto !important;
    z-index:99990 !important;
    width:auto !important;
    max-width:none !important;
    margin:0 !important;
    gap:4px !important;
    padding:4px !important;
    border-radius:13px !important;
    box-shadow:0 5px 14px rgba(0,0,0,.20) !important;
    backdrop-filter:blur(7px) !important;
    -webkit-backdrop-filter:blur(7px) !important;
  }
  #profileChooser .sutil-profile-theme-mount .sutil-theme-floating button,
  #login .sutil-login-theme-mount .sutil-theme-floating button,
  body:not(.sutil-admin-authenticated) .sutil-theme-floating button{
    flex:0 0 36px !important;
    width:36px !important;
    height:36px !important;
    min-width:36px !important;
    padding:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    font-size:0 !important;
    line-height:1 !important;
    border-radius:9px !important;
  }
  #sutilThemeFloatLight::before{
    content:"☀️";
    font-size:18px !important;
    line-height:1 !important;
  }
  #sutilThemeFloatDark::before{
    content:"🌙";
    font-size:18px !important;
    line-height:1 !important;
  }
  #profileChooser .sutil-access-top-controls{
    margin-bottom:10px !important;
  }
}
</style>


<style>
/* FIX 12.15.166 · Tema arriba a la derecha, con texto completo y sin superponer */
@media(max-width:650px){
  /* Restaurar los botones originales: ☀️ Claro / 🌙 Oscuro */
  #sutilThemeFloatLight::before,
  #sutilThemeFloatDark::before{content:none!important;display:none!important;}

  #profileChooser .sutil-profile-theme-mount,
  #login .sutil-login-theme-mount{
    display:flex!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    justify-content:flex-end!important;
    align-items:center!important;
  }

  #profileChooser .sutil-profile-theme-mount .sutil-theme-floating,
  #login .sutil-login-theme-mount .sutil-theme-floating,
  body:not(.sutil-admin-authenticated) .sutil-theme-floating{
    position:static!important;
    inset:auto!important;
    top:auto!important;
    right:auto!important;
    bottom:auto!important;
    left:auto!important;
    z-index:auto!important;
    width:max-content!important;
    max-width:100%!important;
    margin:0!important;
    gap:4px!important;
    padding:4px!important;
    border-radius:13px!important;
    box-shadow:0 5px 14px rgba(0,0,0,.16)!important;
  }

  #profileChooser .sutil-profile-theme-mount .sutil-theme-floating button,
  #login .sutil-login-theme-mount .sutil-theme-floating button,
  body:not(.sutil-admin-authenticated) .sutil-theme-floating button{
    flex:0 0 auto!important;
    width:auto!important;
    height:auto!important;
    min-width:0!important;
    min-height:38px!important;
    padding:8px 11px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:12px!important;
    line-height:1.1!important;
    border-radius:9px!important;
    white-space:nowrap!important;
  }

  /* Pantalla de perfiles: idioma + tema sin cruces */
  #profileChooser .sutil-access-top-controls{
    width:100%!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) auto!important;
    align-items:center!important;
    gap:10px 12px!important;
    margin-bottom:16px!important;
  }
  #profileChooser #accessLanguageLabel{
    justify-self:start!important;
    min-width:0!important;
  }
  #profileChooser #profileThemeMount{
    justify-self:end!important;
  }

  /* Formulario de acceso: selector arriba a la derecha y con espacio propio */
  #login #loginThemeMount{
    width:100%!important;
    justify-content:flex-end!important;
    margin:0 0 14px!important;
  }

  @media(max-width:480px){
    #profileChooser .sutil-access-top-controls{
      grid-template-columns:1fr!important;
    }
    #profileChooser #accessLanguageLabel{justify-self:start!important;}
    #profileChooser #profileThemeMount{justify-self:end!important;}
  }
}
</style>

<style id="sutil-fix-12-15-168-modern-select-css">
/* FIX 12.15.168 · listas desplegables modernas globales en móvil */
.sutil-modern-select-button{display:none}
.sutil-modern-select-backdrop{display:none;position:fixed;inset:0;z-index:301100;background:rgba(7,13,24,.76);backdrop-filter:blur(6px);align-items:flex-end;justify-content:center;padding:12px}
.sutil-modern-select-backdrop.open{display:flex}
.sutil-modern-select-sheet{width:min(100%,560px);max-height:min(82vh,760px);display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,#2a3b56 0%,#223149 100%);border:1px solid #637a9e;border-radius:26px 26px 20px 20px;box-shadow:0 -18px 50px rgba(0,0,0,.42)}
.sutil-modern-select-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 18px 12px;border-bottom:1px solid rgba(148,168,198,.2)}
.sutil-modern-select-title-row{display:flex;align-items:center;gap:12px;min-width:0}
.sutil-modern-select-head-icon{width:48px;height:48px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:24px;background:linear-gradient(145deg,#39577e,#2f4666);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.sutil-modern-select-title-box{min-width:0}
.sutil-modern-select-title{font-size:21px;font-weight:900;line-height:1.12;color:#f6f9ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sutil-modern-select-count{margin-top:3px;font-size:13px;font-weight:700;color:#aebbd0}
.sutil-modern-select-close{width:44px;height:44px;flex:0 0 44px;border-radius:14px;border:1px solid #6c82a5;background:#31445f;color:#fff;font-size:26px;font-weight:900;line-height:1}
.sutil-modern-select-search-wrap{padding:12px 18px 10px}
.sutil-modern-select-search{width:100%;min-height:50px;padding:0 14px;border:1px solid #687f9f;border-radius:15px;background:#22324a;color:#f5f8ff;font-size:16px;font-weight:700;outline:none}
.sutil-modern-select-search:focus{border-color:#43d2ef;box-shadow:0 0 0 3px rgba(67,210,239,.13)}
.sutil-modern-select-search::placeholder{color:#9cacc2}
.sutil-modern-select-options{overflow:auto;padding:8px 18px 18px;display:grid;gap:8px;overscroll-behavior:contain}
.sutil-modern-select-option{width:100%;min-height:58px;display:grid;grid-template-columns:42px minmax(0,1fr) 34px;align-items:center;gap:10px;padding:9px 12px;border:1px solid rgba(109,132,166,.45);border-radius:16px;background:#293a54;color:#f6f9ff;text-align:left}
.sutil-modern-select-option:hover{background:#30435f}
.sutil-modern-select-option.selected{border-color:#52d7b3;background:linear-gradient(90deg,rgba(35,128,111,.46),rgba(42,58,84,.95));box-shadow:0 0 0 2px rgba(82,215,179,.12)}
.sutil-modern-select-option[disabled]{opacity:.48;cursor:not-allowed}
.sutil-modern-select-option-icon{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:#344b6b;font-size:17px;font-weight:900;color:#cfe1ff}
.sutil-modern-select-option.selected .sutil-modern-select-option-icon{background:#2da98d;color:#fff}
.sutil-modern-select-option-label{min-width:0;font-size:17px;font-weight:850;line-height:1.2;overflow-wrap:anywhere}
.sutil-modern-select-option-check{width:30px;height:30px;border:2px solid #90a0b7;border-radius:999px;display:flex;align-items:center;justify-content:center;color:transparent;font-size:18px;font-weight:900}
.sutil-modern-select-option.selected .sutil-modern-select-option-check{background:#65dfa0;border-color:#65dfa0;color:#133d31}
.sutil-modern-select-empty{padding:28px 12px;text-align:center;color:#aebbd0;font-weight:700}
body[data-sutil-theme="light"] .sutil-modern-select-backdrop{background:rgba(18,28,42,.48)}
body[data-sutil-theme="light"] .sutil-modern-select-sheet{background:linear-gradient(180deg,#ffffff 0%,#f6f9fd 100%);border-color:#cbd7e6}
body[data-sutil-theme="light"] .sutil-modern-select-head{border-bottom-color:#e2e9f2}
body[data-sutil-theme="light"] .sutil-modern-select-head-icon{background:#edf5ff;color:#24405c}
body[data-sutil-theme="light"] .sutil-modern-select-title{color:#1d3045}
body[data-sutil-theme="light"] .sutil-modern-select-count{color:#66788c}
body[data-sutil-theme="light"] .sutil-modern-select-close{background:#f4f7fb;border-color:#cbd7e6;color:#2a4058}
body[data-sutil-theme="light"] .sutil-modern-select-search{background:#fff;border-color:#cbd7e6;color:#20364d}
body[data-sutil-theme="light"] .sutil-modern-select-search::placeholder{color:#8a99aa}
body[data-sutil-theme="light"] .sutil-modern-select-option{background:#fff;border-color:#d6e0eb;color:#20364d}
body[data-sutil-theme="light"] .sutil-modern-select-option:hover{background:#f4f8fc}
body[data-sutil-theme="light"] .sutil-modern-select-option.selected{border-color:#34b992;background:linear-gradient(90deg,#e6faf4,#ffffff)}
body[data-sutil-theme="light"] .sutil-modern-select-option-icon{background:#eef4fb;color:#47617d}
body[data-sutil-theme="light"] .sutil-modern-select-option.selected .sutil-modern-select-option-icon{background:#34b992;color:#fff}
body[data-sutil-theme="light"] .sutil-modern-select-empty{color:#718195}
@media(max-width:760px){
  select.sutil-modern-select-native{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;overflow:hidden!important;margin:0!important;padding:0!important;border:0!important}
  .sutil-modern-select-button{display:flex;width:100%;min-height:52px;align-items:center;justify-content:space-between;gap:10px;margin-top:6px;padding:10px 14px;border:1px solid #63799a;border-radius:13px;background:#27364e;color:#f7f9ff;font-size:15px;font-weight:850;text-align:left;box-shadow:none}
  .sutil-modern-select-button:disabled{opacity:.55}
  .sutil-modern-select-button-label{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .sutil-modern-select-button-chevron{flex:0 0 auto;font-size:18px;color:#c7d3e4}
  body[data-sutil-theme="light"] .sutil-modern-select-button{background:#fff;color:#24364a;border-color:#cbd6e4}
  body[data-sutil-theme="light"] .sutil-modern-select-button-chevron{color:#66798e}
}
</style>

<style id="sutil-login-recovery-polish">
#loginHelpButton{
  font-size:14px!important;font-weight:800!important;padding:9px 14px!important;
  min-height:40px!important;border-radius:12px!important;width:auto!important;
  flex:0 0 auto!important;
}
#loginHelpPanel{border-radius:18px!important}
#loginHelpPanel .sutil-recovery-options{
  display:grid!important;grid-template-columns:1fr!important;gap:9px!important
}
#loginHelpPanel .sutil-recovery-options .btn{
  width:100%!important;min-height:48px!important;border-radius:13px!important;
  justify-content:flex-start!important;text-align:left!important;padding:11px 14px!important;
  font-weight:800!important
}
@media(min-width:560px){
  #loginHelpPanel .sutil-recovery-options{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
</style>

<style id="sutil-fix-12-15-175-theme-cash-reports-pdf">
/* FIX 12.15.175 — coherencia real claro/oscuro en Resumen de caja y Centro de reportes. */
#cashSection .cash-breakdown-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:16px 0 8px;
}
#cashSection .cash-breakdown-head .cash-breakdown-title{margin:0!important}
#cashSection .cash-summary-pdf-btn{margin-left:auto;white-space:nowrap}
#reportsSection .reports-pdf-button{min-width:170px}

body[data-sutil-theme="dark"] #cashSection .simple-cash-sheet,
body[data-sutil-theme="dark"] #cashSection .simple-day-card{
  background:linear-gradient(180deg,#2f3d54,#273449)!important;
  border-color:#526784!important;
  color:#f4f7ff!important;
}
body[data-sutil-theme="dark"] #cashSection .simple-cash-row{
  border-bottom-color:#445873!important;
}
body[data-sutil-theme="dark"] #cashSection .simple-cash-row span,
body[data-sutil-theme="dark"] #cashSection .simple-cash-row strong,
body[data-sutil-theme="dark"] #cashSection .simple-day-card h4,
body[data-sutil-theme="dark"] #cashSection .simple-day-item span,
body[data-sutil-theme="dark"] #cashSection .simple-day-item strong,
body[data-sutil-theme="dark"] #cashSection .simple-day-total,
body[data-sutil-theme="dark"] #cashSection .simple-cash-mini-balance,
body[data-sutil-theme="dark"] #cashSection .simple-cash-mini-balance strong{
  color:#f4f7ff!important;-webkit-text-fill-color:#f4f7ff!important;opacity:1!important;
}
body[data-sutil-theme="dark"] #cashSection .simple-cash-row.in strong{color:#50dfa0!important;-webkit-text-fill-color:#50dfa0!important}
body[data-sutil-theme="dark"] #cashSection .simple-cash-row.out strong{color:#ff8f9a!important;-webkit-text-fill-color:#ff8f9a!important}
body[data-sutil-theme="dark"] #cashSection .simple-cash-row.total{
  background:#213149!important;border-top-color:#536985!important;
}
body[data-sutil-theme="dark"] #cashSection .simple-cash-note,
body[data-sutil-theme="dark"] #cashSection .simple-day-total{
  background:#223148!important;border-color:#445873!important;color:#c7d4e6!important;-webkit-text-fill-color:#c7d4e6!important;
}
body[data-sutil-theme="dark"] #cashSection .simple-day-card h4{border-bottom-color:#445873!important}
body[data-sutil-theme="dark"] #cashSection .simple-day-item{border-bottom-color:#445873!important}
body[data-sutil-theme="dark"] #cashSection .simple-day-empty{
  color:#c7d4e6!important;-webkit-text-fill-color:#c7d4e6!important;opacity:1!important;
}

body[data-sutil-theme="light"] #cashSection .simple-cash-sheet,
body[data-sutil-theme="light"] #cashSection .simple-day-card{
  background:#ffffff!important;border-color:#d8e1eb!important;color:#213247!important;
}
body[data-sutil-theme="light"] #cashSection .simple-cash-row span,
body[data-sutil-theme="light"] #cashSection .simple-cash-row strong,
body[data-sutil-theme="light"] #cashSection .simple-day-card h4,
body[data-sutil-theme="light"] #cashSection .simple-day-item span,
body[data-sutil-theme="light"] #cashSection .simple-day-item strong,
body[data-sutil-theme="light"] #cashSection .simple-day-total,
body[data-sutil-theme="light"] #cashSection .simple-cash-mini-balance,
body[data-sutil-theme="light"] #cashSection .simple-cash-mini-balance strong{
  color:#213247!important;-webkit-text-fill-color:#213247!important;opacity:1!important;
}
body[data-sutil-theme="light"] #cashSection .simple-cash-row.in strong{color:#16834b!important;-webkit-text-fill-color:#16834b!important}
body[data-sutil-theme="light"] #cashSection .simple-cash-row.out strong{color:#b33a3a!important;-webkit-text-fill-color:#b33a3a!important}
body[data-sutil-theme="light"] #cashSection .simple-cash-row.total,
body[data-sutil-theme="light"] #cashSection .simple-day-total{background:#f3f7fb!important}
body[data-sutil-theme="light"] #cashSection .simple-cash-note{background:#f8fafc!important;color:#687789!important;-webkit-text-fill-color:#687789!important}
body[data-sutil-theme="light"] #cashSection .simple-day-empty{color:#687789!important;-webkit-text-fill-color:#687789!important}

/* Reportes: tarjetas, tablas y textos sin mezclas entre tema claro y oscuro. */
body[data-sutil-theme="dark"] #reportsSection .report-pane>.card,
body[data-sutil-theme="dark"] #reportsSection .report-metric-card{
  background:linear-gradient(180deg,#2f3d54,#273449)!important;border-color:#526784!important;color:#f4f7ff!important;
}
body[data-sutil-theme="dark"] #reportsSection .report-metric-title,
body[data-sutil-theme="dark"] #reportsSection .report-metric-value,
body[data-sutil-theme="dark"] #reportsSection .report-pane td,
body[data-sutil-theme="dark"] #reportsSection .report-pane td strong{
  color:#f4f7ff!important;-webkit-text-fill-color:#f4f7ff!important;opacity:1!important;
}
body[data-sutil-theme="dark"] #reportsSection .report-metric-subtext{color:#c5d2e5!important;-webkit-text-fill-color:#c5d2e5!important}
body[data-sutil-theme="dark"] #reportsSection .report-pane .table-wrap{border-color:#4f627f!important}

body[data-sutil-theme="light"] #reportsSection .report-pane>.card,
body[data-sutil-theme="light"] #reportsSection .report-metric-card{
  background:#ffffff!important;border-color:#d7e0eb!important;color:#203248!important;box-shadow:0 8px 24px rgba(37,55,80,.08)!important;
}
body[data-sutil-theme="light"] #reportsSection .report-metric-title,
body[data-sutil-theme="light"] #reportsSection .report-metric-value,
body[data-sutil-theme="light"] #reportsSection .report-pane td,
body[data-sutil-theme="light"] #reportsSection .report-pane td strong{
  color:#203248!important;-webkit-text-fill-color:#203248!important;opacity:1!important;
}
body[data-sutil-theme="light"] #reportsSection .report-metric-subtext{color:#667589!important;-webkit-text-fill-color:#667589!important}
body[data-sutil-theme="light"] #reportsSection .report-pane table{background:#fff!important;color:#203248!important}
body[data-sutil-theme="light"] #reportsSection .report-pane thead th{background:#eef3f8!important;color:#52606f!important}
body[data-sutil-theme="dark"] #reportsSection .status-current{color:#7BE7B2!important;-webkit-text-fill-color:#7BE7B2!important}
body[data-sutil-theme="dark"] #reportsSection .status-overdue{color:#FF9AA5!important;-webkit-text-fill-color:#FF9AA5!important}
body[data-sutil-theme="dark"] #reportsSection .status-warning{color:#FFD989!important;-webkit-text-fill-color:#FFD989!important}
body[data-sutil-theme="light"] #reportsSection .status-current{color:#148343!important;-webkit-text-fill-color:#148343!important}
body[data-sutil-theme="light"] #reportsSection .status-overdue{color:#b42318!important;-webkit-text-fill-color:#b42318!important}
body[data-sutil-theme="light"] #reportsSection .status-warning{color:#a66c00!important;-webkit-text-fill-color:#a66c00!important}

/* Cartera en móvil: evita que Cliente/Código/Ruta/Cobrado queden fuera de pantalla. */
.report-mobile-label{display:none}
@media(max-width:700px){
  #reportPortfolioPane .table-wrap{overflow-x:visible!important;width:100%!important}
  #reportPortfolioPane table{display:block!important;width:100%!important;min-width:0!important;background:transparent!important}
  #reportPortfolioPane thead{display:none!important}
  #reportPortfolioPane tbody{display:grid!important;grid-template-columns:1fr!important;gap:10px!important;width:100%!important}
  #reportPortfolioPane tbody tr{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 12px!important;padding:13px!important;border:1px solid var(--line)!important;border-radius:14px!important;overflow:hidden!important}
  #reportPortfolioPane tbody td{display:block!important;width:auto!important;min-width:0!important;border:0!important;padding:3px 0!important;white-space:normal!important;overflow-wrap:anywhere!important}
  #reportPortfolioPane tbody td:first-child{grid-column:1/-1!important;font-size:16px!important;padding-bottom:7px!important;border-bottom:1px solid var(--line)!important}
  #reportPortfolioPane .report-mobile-label{display:block!important;font-size:10px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.05em!important;margin-bottom:2px!important;color:var(--muted)!important;-webkit-text-fill-color:var(--muted)!important}
  body[data-sutil-theme="dark"] #reportPortfolioPane tbody tr{background:#2b3950!important;border-color:#526784!important}
  body[data-sutil-theme="light"] #reportPortfolioPane tbody tr{background:#fff!important;border-color:#d8e1eb!important}
  #cashSection .cash-breakdown-head{align-items:stretch}
  #cashSection .cash-summary-pdf-btn{width:100%;margin-left:0}
  #reportsSection .reports-pdf-button{width:100%;grid-column:1/-1}
}
</style>

</head>
<body>
<div class="wrap">
  <div class="header">
    <div class="sutil-owner-header-main" style="display:flex;align-items:flex-start;gap:10px;min-width:0">
      <button id="ownerMenuButton" class="sutil-owner-menu-btn" type="button" aria-label="Abrir menú" aria-expanded="false" onclick="toggleOwnerQuickMenu()">☰</button>
      <div style="min-width:0">
        <h2>Sutil · Administración</h2>
        <div id="headerThemeSwitch" class="sutil-theme-switch sutil-header-theme-switch" aria-label="Tema visual" style="display:none">
          <button id="sutilThemeLight" type="button" onclick="setSutilTheme('light')">☀️ Claro</button>
          <button id="sutilThemeDark" type="button" onclick="setSutilTheme('dark')">🌙 Oscuro</button>
        </div>
        <div id="activeCompanyBanner" class="muted" style="display:none;font-weight:700;margin-top:4px"></div>
        <div id="headerSessionMount">
          <div id="sessionControls" style="display:none;justify-content:flex-end;gap:12px;align-items:center;margin-top:10px;flex-wrap:wrap">
            <label style="display:flex;align-items:center;gap:7px;font-weight:600">
              <input id="keepSessionOpen" type="checkbox" onchange="updateSessionPreference()">
              Mantener sesión abierta
            </label>
            <span id="offlineStatusBadge" class="offline-status-badge ready" title="Toca para sincronizar" onclick="offlineSyncPending(true)" style="cursor:pointer">⏳ Preparando modo offline</span>
            <button class="btn secondary" type="button" onclick="logout()">Cerrar sesión</button>
          </div>
        </div>
      </div>
    </div>
    <div style="display:flex;gap:8px">
      <button id="backButton" class="btn secondary" style="display:none" onclick="goBack()">← Atrás</button>
      <button id="homeButton" class="btn secondary" style="display:none" onclick="showHome()">🏠 Inicio</button>
    </div>
  </div>

  <div id="ownerQuickMenu" class="sutil-owner-menu-backdrop" aria-hidden="true" onclick="closeOwnerQuickMenuFromBackdrop(event)">
    <aside class="sutil-owner-menu-drawer" role="dialog" aria-modal="true" aria-label="Menú del empresario">
      <div class="sutil-owner-menu-head">
        <strong>Menú de empresa</strong>
        <button class="sutil-owner-menu-close" type="button" aria-label="Cerrar menú" onclick="closeOwnerQuickMenu()">×</button>
      </div>
      <div id="ownerQuickMenuCompany" class="sutil-owner-menu-company">
        <div id="ownerQuickMenuIdentity">Accesos del empresario</div>
        <div id="ownerQuickMenuSessionMount"></div>
      </div>
      <div class="sutil-owner-menu-items">
        <button class="sutil-owner-menu-item" type="button" onclick="openOwnerQuickSection('sutilSupportSection')">
          <span class="sutil-owner-menu-icon">💬</span>
          <span class="sutil-owner-menu-text"><span>Soporte Sutil</span><small>Membresía, rutas y ayuda directa</small></span>
        </button>
        <button class="sutil-owner-menu-item" type="button" onclick="openOwnerQuickSection('settingsSection')">
          <span class="sutil-owner-menu-icon">⚙️</span>
          <span class="sutil-owner-menu-text"><span>Configuración</span><small>Empresa, seguridad, idioma y reglas</small></span>
        </button>
      </div>
      <div class="sutil-owner-menu-spacer"></div>
      <div class="sutil-owner-menu-foot">Estos accesos son exclusivos del dueño de la empresa.</div>
    </aside>
  </div>

  <div id="profileChooser">
    <div class="card" style="text-align:center">
      <div class="sutil-access-top-controls">
        <label id="accessLanguageLabel" style="margin:0;font-weight:700">🌐 Idioma
          <select id="accessLanguage" onchange="setAccessLanguage(this.value)" style="width:auto;min-width:150px;margin-left:6px">
            <option value="es">Español</option><option value="pt">Português</option><option value="en">English</option>
          </select>
          <button id="accessLanguageMobileButton" class="sutil-mobile-select-btn sutil-access-language-mobile-btn" type="button" data-select-id="accessLanguage" data-select-title="Idioma" onclick="openSutilMobileSelectPicker(this)">Español</button>
        </label>
        <div id="profileThemeMount" class="sutil-profile-theme-mount" aria-label="Tema visual"></div>
      </div>
      <h2 id="profileChooserTitle">Elige tu perfil</h2>
      <p id="profileChooserSubtitle" class="muted">Selecciona cómo deseas ingresar a Sutil.</p>
      <div class="module-grid" style="max-width:1000px;margin:20px auto">
        <div class="module" onclick="chooseProfile('owner')" style="min-height:220px">
          <div class="module-icon">🏢</div>
          <div id="ownerProfileTitle" class="module-title">Dueño de empresa</div>
          <small id="ownerProfileText">Control general, rutas, permisos y reportes</small>
        </div>
        <div class="module" onclick="chooseProfile('admin')" style="min-height:220px">
          <div class="module-icon">👨‍💼</div>
          <div id="admProfileTitle" class="module-title">ADM</div>
          <small id="admProfileText">Administrador autorizado por el empresario</small>
        </div>
        <div class="module" onclick="chooseProfile('staff')" style="min-height:220px">
          <div class="module-icon">🪪</div>
          <div id="collectorProfileTitle" class="module-title">Cobrador</div>
          <small id="collectorProfileText">Acceso según ruta y permisos asignados</small>
        </div>
      </div>
    </div>
  </div>

  <div id="login" class="card" style="display:none">
    <div id="loginThemeMount" class="sutil-login-theme-mount" aria-label="Tema visual"></div>
    <h3 id="loginTitle">Acceso</h3>
    <p id="loginSubtitle" class="muted"></p>
    <label id="companyKeyLabel">Llave de la empresa
      <input id="companyKey" name="sutil_company_access_key" value="" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" placeholder="Escribe la llave de tu empresa">
    </label>
    <label id="phoneLabel">Celular / usuario
      <input id="phone" name="sutil_manual_phone_login" value="" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" inputmode="tel" data-lpignore="true" data-1p-ignore="true">
    </label>
    <label id="passwordLabel">Clave
      <input id="loginPassword" type="password">
    </label>
    <div style="margin-top:10px;display:flex;gap:10px;flex-wrap:wrap;align-items:center">
      <button id="adminLoginButton" class="btn" onclick="doLogin()">Entrar</button>
      <button id="registerCompanyButton" class="btn" type="button" onclick="window.location.href='/register'" style="display:none">Crear cuenta</button>
      <button id="backProfilesButton" class="btn secondary" onclick="backToProfiles()">← Regresar y escoger otro perfil</button>
      <button id="loginHelpButton" class="btn secondary" type="button" onclick="openLoginHelp()" style="display:none;margin-left:auto">¿Problemas para ingresar?</button>
    </div>
    <div id="loginStatusMessage" class="muted" style="margin-top:10px;font-weight:700"></div>
    <div id="loginHelpPanel" class="card" style="display:none;margin:14px 0 0;padding:14px;border:1px solid #d9e0e7;box-shadow:none">
      <div style="display:flex;justify-content:space-between;gap:10px;align-items:center">
        <strong id="loginHelpTitle">¿Problemas para ingresar?</strong>
        <button type="button" class="btn secondary" onclick="closeLoginHelp()" style="padding:6px 10px">×</button>
      </div>
      <p id="loginHelpInfo" class="muted" style="margin:8px 0 12px"></p>
      <div class="sutil-recovery-options">
        <button id="forgotPasswordButton" type="button" class="btn" onclick="selectLoginRecovery('password')">🔒 Olvidé mi contraseña</button>
        <button id="forgotKeyButton" type="button" class="btn" onclick="selectLoginRecovery('key')">🔑 Olvidé la llave</button>
        <button id="forgotPhoneButton" type="button" class="btn" onclick="selectLoginRecovery('phone')">📱 Olvidé mi celular / usuario</button>
      </div>
      <div id="loginRecoveryForm" style="display:none;margin-top:13px">
        <label id="loginRecoveryEmailLabel">Correo registrado
          <input id="loginRecoveryEmail" type="email" autocomplete="email">
        </label>
        <div style="display:flex;gap:8px;align-items:end;flex-wrap:wrap;margin-top:8px">
          <button id="loginRecoverySendButton" type="button" class="btn" onclick="requestLoginRecovery()">Enviar código</button>
          <label id="loginRecoveryCodeLabel" style="flex:1;min-width:130px">Código
            <input id="loginRecoveryCode" inputmode="numeric" maxlength="6" autocomplete="one-time-code" enterkeyhint="done">
          </label>
          <button id="loginRecoveryVerifyButton" type="button" class="btn success" onclick="confirmLoginRecovery()">Verificar</button>
        </div>
        <div id="loginRecoveryPasswordWrap" style="display:none;margin-top:10px">
          <label id="loginRecoveryNewPasswordLabel">Nueva contraseña
            <input id="loginRecoveryNewPassword" type="password" minlength="8">
          </label>
          <button id="loginRecoveryResetButton" type="button" class="btn success" onclick="resetLoginPassword()" style="margin-top:8px">Cambiar contraseña</button>
        </div>
        <div id="loginRecoveredKeyWrap" style="display:none;margin-top:12px">
          <div id="loginRecoveredKeyLabel" class="muted">Dato recuperado</div>
          <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:5px">
            <strong id="loginRecoveredKey" style="font-size:19px;letter-spacing:1px"></strong>
            <button id="copyRecoveredKeyButton" type="button" class="btn" onclick="copyRecoveredCompanyKey()">📋 Copiar</button>
          </div>
        </div>
        <div id="loginRecoveryStatus" class="muted" style="margin-top:9px;font-weight:700"></div>
      </div>
    </div>
  </div>

  <div id="app" style="display:none">
    <section id="homeSection" class="section active">
      <div id="homeOperationalKpis" class="home-ops-kpis">
        <button class="home-ops-kpi home-ops-button" type="button" onclick="openHomeOperationalShortcut('collected')" aria-label="Abrir cobros recibidos de hoy">
          <div class="home-ops-kpi-label"><span>💵</span><span>Recogido hoy</span></div>
          <strong id="today" class="home-ops-kpi-value">R$ 0,00</strong>
          <span class="home-ops-kpi-arrow">›</span>
        </button>

        <button class="home-ops-kpi home-ops-button" type="button" onclick="openHomeOperationalShortcut('checking')" aria-label="Abrir comprobantes en comprobación">
          <div class="home-ops-kpi-label"><span>🧾</span><span>En comprobación</span></div>
          <strong id="checking" class="home-ops-kpi-value">0</strong>
          <span class="home-ops-kpi-arrow">›</span>
        </button>

        <button id="homeStaffOperatingCard" class="home-ops-kpi home-ops-button owner-dashboard-only" type="button" style="display:none" onclick="openHomeOperationalShortcut('staff')" aria-label="Abrir ubicación del personal en operación">
          <div class="home-ops-kpi-label"><span>👥</span><span>Personal en operación</span></div>
          <strong id="homeStaffOperating" class="home-ops-kpi-value">—</strong>
          <span class="home-ops-kpi-arrow">›</span>
        </button>

        <button id="homeOpenCashCard" class="home-ops-kpi home-ops-button owner-dashboard-only" type="button" style="display:none" onclick="openHomeOperationalShortcut('cash')" aria-label="Abrir cajas que continúan abiertas">
          <div class="home-ops-kpi-label"><span>🟢</span><span>Cajas abiertas</span></div>
          <strong id="homeOpenCash" class="home-ops-kpi-value">—</strong>
          <span class="home-ops-kpi-arrow">›</span>
        </button>
      </div>

      <div class="card">
        <h3 style="margin-bottom:5px">Módulos</h3>
        <div class="muted" style="margin-bottom:18px">Funciones organizadas por área para encontrar cada herramienta más rápido.</div>

        <div class="home-main-nav">
          <button id="homeCategoryClients" class="home-main-card clients" type="button" onclick="openSection('clientsManagementSection')">
            <div class="home-main-card-top">
              <div class="home-main-card-badge">👥</div>
              <div class="home-main-card-arrow">›</div>
            </div>
            <h4 class="home-main-card-title">Gestión de clientes</h4>
            <p class="home-main-card-text">Clientes, créditos, cobros, comprobantes y comunicación.</p>
            <span class="home-main-card-tag">Acceso principal</span>
          </button>

          <button id="homeCategoryOperations" class="home-main-card operations" type="button" onclick="openSection('operationsRoutesSection')">
            <div class="home-main-card-top">
              <div class="home-main-card-badge">🗺️</div>
              <div class="home-main-card-arrow">›</div>
            </div>
            <h4 class="home-main-card-title">Operación y rutas</h4>
            <p class="home-main-card-text">Equipo, rutas, caja, gastos y control de la operación diaria.</p>
            <span class="home-main-card-tag">Ruta · Caja · Equipo</span>
          </button>

          <button id="homeCategoryAnalysis" class="home-main-card analysis" type="button" onclick="openSection('analysisControlSection')">
            <div class="home-main-card-top">
              <div class="home-main-card-badge">📊</div>
              <div class="home-main-card-arrow">›</div>
            </div>
            <h4 class="home-main-card-title">Análisis y control</h4>
            <p class="home-main-card-text">Indicadores, cartera, rutas y rendimiento de la empresa.</p>
            <span class="home-main-card-tag">Indicadores clave</span>
          </button>

          <button id="homeCategoryTools" class="home-main-card tools" type="button" onclick="openSection('settingsToolsSection')">
            <div class="home-main-card-top">
              <div class="home-main-card-badge">🛠️</div>
              <div class="home-main-card-arrow">›</div>
            </div>
            <h4 class="home-main-card-title">Configuración y herramientas</h4>
            <p class="home-main-card-text">Métodos de cobro, WhatsApp Business e incorporación de información histórica.</p>
            <span class="home-main-card-tag">Ajustes y soporte</span>
          </button>
        </div>
      </div>
    </section>

    <section id="clientsManagementSection" class="section">
      <div class="card">
        <div class="home-area-section-head">
          <div>
            <div class="home-area-section-kicker">👥 Área principal</div>
            <h2>Gestión de clientes</h2>
            <div class="muted" style="margin-top:6px">Clientes, créditos, cobros, comprobantes y comunicación.</div>
          </div>
        </div>
        <div class="module-grid">
          <div class="module" onclick="openSection('clientsHubSection')">
            <div class="module-icon">👥</div><div class="module-title">Clientes</div>
            <small>Nuevo, registrados, búsqueda y detalle completo</small>
          </div>
          <div class="module" onclick="openSection('loansSection')">
            <div class="module-icon">💰</div><div class="module-title">Créditos</div>
            <small>Crear y consultar cuotas</small>
          </div>
          <div class="module" onclick="openSection('collectionsSection')">
            <div class="module-icon">🧾</div><div class="module-title">Cobros</div>
            <small>Efectivo, PIX y abonos</small>
          </div>
          <div class="module" onclick="openSection('receiptsSection')">
            <div class="module-icon">✅</div><div class="module-title">Comprobantes de pago</div>
            <small>Confirmar o rechazar</small>
          </div>
          <div class="module" onclick="openSection('chatsSection')">
            <div class="module-icon">💬</div><div class="module-title">Chats con clientes</div>
            <small>Conversaciones por cliente, código o ruta</small>
          </div>
        </div>
      </div>
    </section>

    <section id="operationsRoutesSection" class="section">
      <div class="card">
        <div class="home-area-section-head">
          <div>
            <div class="home-area-section-kicker">🗺️ Área principal</div>
            <h2>Operación y rutas</h2>
            <div class="muted" style="margin-top:6px">Equipo, rutas, caja, gastos y control de la operación diaria.</div>
          </div>
        </div>
        <div class="module-grid">
          <div class="module" onclick="openSection('routesSection')">
            <div class="module-icon">🗺️</div><div class="module-title">Rutas</div>
            <small>Clientes y responsables</small>
          </div>
          <div class="module" onclick="openSection('staffSection')">
            <div class="module-icon">🧑‍💼</div><div class="module-title">Personal y permisos</div>
            <small>ADM, cobradores, rutas y permisos</small>
          </div>
          <div class="module" onclick="openSection('cashSection')">
            <div class="module-icon">💵</div><div class="module-title">Caja diaria</div>
            <small>Apertura, movimientos y cierre</small>
          </div>
          <div class="module" onclick="openSection('baseMovementsSection')">
            <div class="module-icon">🔄</div><div class="module-title">Movimientos de base</div>
            <small>Adicionar, retirar o transferir</small>
          </div>
          <div class="module" onclick="openSection('cashReportSection')">
            <div class="module-icon">📋</div><div class="module-title">Reporte de caja</div>
            <small>Historial completo de movimientos</small>
          </div>
          <div class="module" onclick="openSection('expensesSection')">
            <div class="module-icon">📉</div><div class="module-title">Gastos</div>
            <small>Registrar gastos por ruta</small>
          </div>
          <div class="module" onclick="openSection('locationsSection')">
            <div class="module-icon">📍</div><div class="module-title">Ubicaciones</div>
            <small>Última ubicación autorizada</small>
          </div>
        </div>
      </div>
    </section>

    <section id="analysisControlSection" class="section">
      <div class="card">
        <div class="home-area-section-head">
          <div>
            <div class="home-area-section-kicker">📊 Área principal</div>
            <h2>Análisis y control</h2>
            <div class="muted" style="margin-top:6px">Indicadores, cartera, rutas y rendimiento de la empresa.</div>
          </div>
        </div>
        <div class="module-grid">
          <div class="module" onclick="openSection('reportsSection')">
            <div class="module-icon">📊</div><div class="module-title">Reportes</div>
            <small>Ruta, cliente y rendimiento</small>
          </div>
        </div>
      </div>
    </section>

    <section id="settingsToolsSection" class="section">
      <div class="card">
        <div class="home-area-section-head">
          <div>
            <div class="home-area-section-kicker">🛠️ Área principal</div>
            <h2>Configuración y herramientas</h2>
            <div class="muted" style="margin-top:6px">Métodos de cobro, WhatsApp Business e incorporación de información histórica.</div>
          </div>
        </div>
        <div class="module-grid">
          <div id="collectionMethodsModule" class="module" onclick="openSection('collectionMethodsSection')">
            <div class="module-icon">💳</div><div class="module-title">Métodos de cobro</div>
            <small>Llaves, QR y cuentas por país</small>
          </div>
          <div id="historicalModule" class="module" onclick="openHistoricalMode()" style="display:none">
            <div class="module-icon">📦</div><div class="module-title">Migración / histórico</div>
            <small>Traer datos del sistema anterior</small>
          </div>
          <div id="whatsappBusinessModule" class="module" onclick="openWhatsAppBusinessConfig()">
            <div class="module-icon">💬</div><div class="module-title">WhatsApp Business</div>
            <small>Conectar números y asignarlos a rutas</small>
          </div>
        </div>
      </div>
    </section>

    <section id="whatsappBusinessSection" class="section">
      <div class="card">
        <div class="home-area-section-head">
          <div>
            <div class="home-area-section-kicker">💬 Configuración</div>
            <h2>WhatsApp Business</h2>
            <div class="muted" style="margin-top:6px">Prepara cómo funcionará WhatsApp en esta empresa. La conexión oficial con Meta se realizará en la siguiente etapa.</div>
          </div>
        </div>

        <div class="wa-config-status">
          <div class="wa-config-status-left">
            <span id="waMetaStatusDot" class="wa-status-dot" aria-hidden="true"></span>
            <div>
              <strong>Conexión con Meta</strong>
              <div id="waMetaStatusText" class="muted" style="font-size:12px;margin-top:2px">Comprobando configuración de WhatsApp Business...</div>
            </div>
          </div>
          <span id="waMetaStatusBadge" class="wa-status-badge">Comprobando</span>
        </div>

        <div id="waReadonlyNote" class="wa-readonly-note">👁️ Estás viendo esta configuración en modo consulta. Solo el empresario puede modificarla.</div>

        <div class="wa-config-grid">
          <div class="wa-config-card">
            <div class="wa-config-head">
              <div>
                <h3 class="wa-config-title">🏢 Cuenta de la empresa</h3>
                <div class="wa-config-desc">Sutil conectará una cuenta empresarial de WhatsApp mediante la API oficial de Meta.</div>
              </div>
            </div>
            <div class="wa-meta-actions">
              <button id="waMetaConnectButton" class="btn secondary wa-pending-button" type="button" onclick="startWhatsAppMetaSignup()" disabled>🔗 Conectar con Meta</button>
              <button id="waMetaDisconnectButton" class="btn secondary" type="button" onclick="disconnectWhatsAppMeta()" style="display:none">Desconectar</button>
            </div>
            <div id="waMetaProviderHint" class="wa-meta-hint muted">La aplicación Meta de Sutil debe estar configurada en el servidor antes de conectar una empresa.</div>
            <div id="waMetaConnectedNumbers" class="wa-meta-numbers"></div>
          </div>

          <div class="wa-config-card">
            <div class="wa-config-head">
              <div>
                <h3 class="wa-config-title">📱 Forma de uso</h3>
                <div class="wa-config-desc">Decide si toda la empresa usará un número general o si cada ruta podrá tener su propio número.</div>
              </div>
            </div>
            <div class="wa-mode-grid">
              <label id="waModeGeneralCard" class="wa-mode-option">
                <input id="waModeGeneral" type="radio" name="waNumberMode" value="general" onchange="setWhatsAppNumberMode('general')">
                <span><strong>Número general</strong><small>Un mismo WhatsApp para todas las rutas.</small></span>
              </label>
              <label id="waModeRouteCard" class="wa-mode-option">
                <input id="waModeRoute" type="radio" name="waNumberMode" value="route" onchange="setWhatsAppNumberMode('route')">
                <span><strong>Por ruta</strong><small>Asignar números diferentes según la ruta.</small></span>
              </label>
            </div>
          </div>

          <div class="wa-config-card full">
            <div class="wa-config-head">
              <div>
                <h3 class="wa-config-title">📞 Números previstos</h3>
                <div class="wa-config-desc">Puedes dejar preparados los números que después se conectarán con Meta. Esto todavía no registra ningún número en WhatsApp.</div>
              </div>
              <button id="waAddNumberButton" class="btn secondary" type="button" onclick="addWhatsAppPlannedNumber()">＋ Agregar número</button>
            </div>
            <div id="waNumberList" class="wa-number-list"></div>
          </div>

          <div id="waGeneralNumberCard" class="wa-config-card full">
            <div class="wa-config-head">
              <div>
                <h3 class="wa-config-title">📲 Número general</h3>
                <div class="wa-config-desc">Selecciona cuál de los números previstos se utilizará para toda la empresa.</div>
              </div>
            </div>
            <select id="waGeneralNumberSelect" onchange="updateWhatsAppGeneralNumber(this.value)"></select>
          </div>

          <div id="waRouteAssignmentCard" class="wa-config-card full" style="display:none">
            <div class="wa-config-head">
              <div>
                <h3 class="wa-config-title">🗺️ Asignación por ruta</h3>
                <div class="wa-config-desc">Cada ruta puede usar un número diferente. Una ruta también puede quedar sin número hasta que se conecte.</div>
              </div>
            </div>
            <div id="waRouteAssignmentList" class="wa-route-assignment-list"></div>
          </div>

          <div class="wa-config-card full">
            <div class="wa-config-head">
              <div>
                <h3 class="wa-config-title">🧾 Comprobantes por WhatsApp</h3>
                <div class="wa-config-desc">Prepara qué hará Sutil cuando la API de WhatsApp esté conectada.</div>
              </div>
            </div>
            <div class="wa-toggle-row">
              <div class="wa-toggle-copy"><strong>Recibir comprobantes</strong><small>Permitir que los clientes envíen comprobantes por WhatsApp.</small></div>
              <label class="wa-switch"><input id="waReceiptsEnabled" type="checkbox" onchange="updateWhatsAppToggle('receipts_enabled',this.checked)"><span></span></label>
            </div>
            <div class="wa-toggle-row">
              <div class="wa-toggle-copy"><strong>Enviar a comprobación</strong><small>Cuando llegue un comprobante, colocarlo en la bandeja de comprobación de Sutil.</small></div>
              <label class="wa-switch"><input id="waAutoReviewEnabled" type="checkbox" onchange="updateWhatsAppToggle('auto_send_to_review',this.checked)"><span></span></label>
            </div>
          </div>
        </div>

        <div class="wa-config-actions">
          <button id="waSaveConfigButton" class="btn" type="button" onclick="saveWhatsAppPreconfig()">💾 Guardar configuración</button>
          <button class="btn secondary" type="button" onclick="loadWhatsAppMetaStatusFast();loadWhatsAppPreconfig(true)">↻ Actualizar</button>
        </div>
        <div id="waConfigMessage" class="muted" style="margin-top:10px"></div>
      </div>
    </section>

    <section id="chatsSection" class="section">
      <div class="card">
        <div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap">
          <div>
            <h2 style="margin:0">💬 Chats con clientes</h2>
            <div class="muted" style="margin-top:5px">Busca por nombre, código o ruta y abre la conversación.</div>
          </div>
          <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
            <span class="sutil-chat-ai-badge" title="Infraestructura preparada para conectar un asistente de IA en una versión futura">🤖 IA preparada · sin conectar</span>
            <button class="btn secondary" type="button" onclick="loadChatsCenter()">↻ Actualizar</button>
          </div>
        </div>
      </div>

      <div class="sutil-chat-center">
        <div class="sutil-chat-directory">
          <div class="sutil-chat-directory-head">
            <strong>Conversaciones</strong>
            <div id="chatsCenterCount" class="muted" style="font-size:11px;margin-top:2px">0 clientes</div>
            <div class="sutil-chat-directory-filters">
              <input id="chatsCenterSearch" type="search" placeholder="Buscar nombre o código..." oninput="sutilDebounceUi('chat-search',renderChatsCenterList,100)">
              <select id="chatsCenterRoute" onchange="renderChatsCenterList()">
                <option value="">Todas las rutas</option>
              </select>
              <select id="chatsCenterOrder" onchange="renderChatsCenterList()" aria-label="Orden de conversaciones">
                <option value="recent" selected>Más recientes</option>
                <option value="oldest">Más antiguos</option>
              </select>
            </div>
          </div>
          <div id="chatsCenterList" class="sutil-chat-directory-list">
            <div class="client-empty">Cargando clientes...</div>
          </div>
        </div>

        <div id="chatsCenterConversation" class="sutil-chat-center-panel">
          <div class="sutil-chat-center-empty">
            <div><div style="font-size:34px;margin-bottom:8px">💬</div><strong>Selecciona un cliente</strong><div style="margin-top:5px">Su conversación aparecerá aquí.</div></div>
          </div>
        </div>
      </div>
    </section>

    <section id="clientsHubSection" class="section">
      <div class="card">
        <div class="client-hub-head">
          <div>
            <h2 style="margin:0">👥 Clientes</h2>
            <div class="muted" style="margin-top:5px">
              Accede a las funciones del cliente sin llenar la pantalla de información.
            </div>
          </div>
        </div>
        <div class="client-hub-grid">
          <button class="client-hub-action" type="button" onclick="openSection('newClientSection')">
            <div class="icon">➕</div>
            <strong>Nuevo cliente</strong>
            <small>Registrar datos personales, empresa, ruta, responsable, foto y ubicación.</small>
          </button>
          <button class="client-hub-action" type="button" onclick="openClientDirectory()">
            <div class="icon">📋</div>
            <strong>Clientes registrados</strong>
            <small>Ver todos los clientes, estado, saldo, ruta, ubicación y acciones.</small>
          </button>
        </div>
      </div>
    </section>

    <section id="clientsSection" class="section">
      <div id="clientDirectoryCard" class="card client-directory-card">
        <div class="clients-directory-head">
          <h3 style="margin:0">Información registrada de clientes</h3>
          <div class="muted">Datos personales, ruta, contacto, ubicación y acceso al historial.</div>
        </div>
        <div class="clients-directory-filters">
          <label class="clients-search-field">Buscar
            <input id="clientsSearch" placeholder="Nombre, código, documento o teléfono" oninput="sutilDebounceUi('clients-search',renderClientsTable,100)">
          </label>
          <div class="clients-filter-row">
            <label>Ruta
              <select id="clientsRouteFilter" onchange="renderClientsTable();syncSutilMobileSelectButtons()"><option value="">Todas las rutas</option></select>
              <button class="sutil-mobile-select-btn clients-directory-mobile-select" type="button" data-select-id="clientsRouteFilter" data-select-title="Ruta" onclick="openSutilMobileSelectPicker(this)">Todas las rutas</button>
            </label>
            <label>Estado
              <select id="clientsStatusFilter" onchange="renderClientsTable();syncSutilMobileSelectButtons()">
                <option value="">Todos</option>
                <option value="active_loan">Con crédito activo</option>
                <option value="current">Al día</option>
                <option value="today">Vence hoy</option>
                <option value="overdue">Moroso</option>
                <option value="reported">Reportado</option>
                <option value="inactive">Sin crédito</option>
              </select>
              <button class="sutil-mobile-select-btn clients-directory-mobile-select" type="button" data-select-id="clientsStatusFilter" data-select-title="Estado" onclick="openSutilMobileSelectPicker(this)">Todos</button>
            </label>
          </div>
        </div>
        <div class="muted" style="margin-top:10px">
          <span class="status-pill pill-current">Verde: al día</span>
          <span class="status-pill pill-today">Amarillo: vence hoy</span>
          <span class="status-pill pill-overdue">Rojo: moroso</span>
          <span class="status-pill pill-inactive">Gris: sin crédito</span>
        </div>
        <div class="table-wrap" style="margin-top:14px">
          <table>
            <thead><tr><th>Foto</th><th>Cliente</th><th>Código</th><th>Documento</th><th>Teléfono</th><th>Dirección</th><th>Ruta</th><th>Responsable</th><th>Saldo</th><th>Vencimiento</th><th>Estado</th><th>Ubicación</th><th>Acciones</th></tr></thead>
            <tbody id="clientsTable"></tbody>
          </table>
        </div>
      </div>
      <div id="clientDetailCard" class="client-detail-shell" style="display:none">
        <div class="client-detail-top">
          <div class="client-detail-toolbar">
            <button class="client-back-link" type="button" onclick="backToClientDirectory()">← Clientes registrados</button>
            <span class="client-detail-label">Ficha del cliente</span>
          </div>
          <div class="client-detail-mainrow">
            <div class="client-detail-identity">
              <div id="clientDetailPhoto" class="client-detail-photo"></div>
              <div class="client-detail-identity-text">
                <h2 id="clientDetailName">Cliente</h2>
                <div id="clientDetailMeta" class="client-detail-meta"></div>
              </div>
            </div>
            <div class="client-detail-actions">
              <button id="clientQuickEditButton" class="btn success" type="button">✏️ Editar cliente</button>
              <button id="clientQuickLocationButton" class="btn" type="button">📍 Dirección registrada</button>
            </div>
          </div>
        </div>
        <div class="card client-consult-card">
          <div class="client-consult-title">Seleccione la información que desea consultar</div>
          <div class="client-file-sections">
            <div class="client-file-group open" data-client-group="registration">
              <button class="client-file-group-head" type="button" onclick="toggleClientFileGroup('registration')">
                <span><b>👤 Registro e información</b><small>Datos, empresa y documentos</small></span><span class="client-group-chevron">⌄</span>
              </button>
              <div class="client-file-nav client-file-group-body">
                <button class="client-file-btn active" data-client-tab="personal" onclick="showClientFileTab('personal',this)"><span class="client-nav-icon icon-blue">👤</span><span>Datos personales</span></button>
                <button class="client-file-btn" data-client-tab="business" onclick="showClientFileTab('business',this)"><span class="client-nav-icon icon-slate">🏢</span><span>Empresa</span></button>
                <button class="client-file-btn" data-client-tab="documents" onclick="showClientFileTab('documents',this)"><span class="client-nav-icon icon-blue">📁</span><span>Documentos / fotos</span></button>
              </div>
            </div>
            <div class="client-file-group" data-client-group="finance">
              <button class="client-file-group-head" type="button" onclick="toggleClientFileGroup('finance')">
                <span><b>💰 Financiero</b><small>Estado de cuenta, histórico y riesgo</small></span><span class="client-group-chevron">⌄</span>
              </button>
              <div class="client-file-nav client-file-group-body">
                <button class="client-file-btn" data-client-tab="payments" onclick="showClientFileTab('payments',this)"><span class="client-nav-icon icon-green">💵</span><span>Estado de cuenta</span></button>
                <button class="client-file-btn" data-client-tab="history" onclick="showClientFileTab('history',this)"><span class="client-nav-icon icon-slate">◷</span><span>Histórico</span></button>
                <button class="client-file-btn" data-client-tab="risk" onclick="showClientFileTab('risk',this)"><span class="client-nav-icon icon-blue">🛡️</span><span>Riesgo</span></button>
              </div>
            </div>
            <div class="client-file-group" data-client-group="communication">
              <button class="client-file-group-head" type="button" onclick="toggleClientFileGroup('communication')">
                <span><b>💬 Comunicación y seguimiento</b><small>Ubicación, app, chat y alertas</small></span><span class="client-group-chevron">⌄</span>
              </button>
              <div class="client-file-nav client-file-group-body">
                <button class="client-file-btn" data-client-tab="locations" onclick="showClientFileTab('locations',this)"><span class="client-nav-icon icon-purple">📍</span><span>Ubicaciones</span></button>
                <button class="client-file-btn" data-client-tab="access" onclick="showClientFileTab('access',this)"><span class="client-nav-icon icon-purple">📱</span><span>App cliente</span></button>
                <button class="client-file-btn" data-client-tab="chat" onclick="showClientFileTab('chat',this)"><span class="client-nav-icon icon-slate">💬</span><span>Chat</span></button>
                <button class="client-file-btn" data-client-tab="alerts" onclick="showClientFileTab('alerts',this)"><span class="client-nav-icon icon-gold">🔔</span><span>Alertas</span></button>
              </div>
            </div>
          </div>
        </div>
        <div id="clientPersonalPane" class="client-file-pane active">
          <div id="clientInfoSummary" class="client-profile-overview"></div>
          <div style="display:none">
            <button id="clientInfoEditButton" type="button"></button>
            <button id="clientInfoLocationButton" type="button"></button>
          </div>
        </div>
        <div id="clientBusinessPane" class="client-file-pane"><div id="clientBusinessContent" class="grid"></div></div>
        <div id="clientLocationsPane" class="client-file-pane"><div id="clientLocationsContent" class="grid"></div></div>
        <div id="clientDocumentsPane" class="client-file-pane"><div id="clientDocumentsContent"></div></div>
        <div id="clientAccessPane" class="client-file-pane"><div id="clientAccessContent"></div></div>
        <div id="clientChatPane" class="client-file-pane"><div id="clientChatContent"></div></div>
        <div id="clientHistoryFullPane" class="client-file-pane"><div id="clientHistoryFullContent" class="grid"></div></div>
        <div id="clientAlertsPane" class="client-file-pane"><div id="clientAlertsContent"></div></div>
        <div id="clientRiskPane" class="client-file-pane"><div id="clientRiskContent"></div></div>
        <div id="clientFinancePane" class="client-file-pane">
        <div class="card">
          <h3 style="margin-bottom:5px">Información financiera del cliente</h3>
          <div class="muted">Resumen acumulado de todos los créditos activos y finalizados.</div>
          <div id="clientSummary" class="grid" style="margin-top:12px"></div>
          <div class="client-account-nav">
            <button id="clientHistoryTab" class="btn active-tab" type="button"
              onclick="showClientAccountPane('history')" style="display:none!important" aria-hidden="true" tabindex="-1">
              Historial crediticio
            </button>
            <button id="clientStatementTab" class="btn secondary" type="button"
              onclick="showClientAccountPane('statement')">
              Estado de cuenta
            </button>
          </div>
          <div style="margin:12px 0">
            <button id="reportLossButton" class="btn danger" type="button" style="display:none">
              ⚠ Reportar cliente / pérdida
            </button>
          </div>
        </div>

        <div id="clientHistoryPane" class="account-pane card">
          <h3 style="margin-bottom:5px">Historial crediticio</h3>
          <div class="muted">
            Cada fila corresponde a un crédito. Los créditos pagados permanecen visibles para consultar cuánto se prestó, cuánto se recibió y cuánto interés generó.
          </div>
          <div class="loan-history-tools">
            <label>Estado del crédito
              <select id="loanHistoryStatusFilter" onchange="renderClientLoanHistory()">
                <option value="">Todos</option>
                <option value="active">Activos</option>
                <option value="overdue">Atrasados</option>
                <option value="paid">Pagados</option>
                <option value="loss">Reportados / pérdida</option>
              </select>
            </label>
            <label>Buscar crédito
              <input id="loanHistorySearch" placeholder="N.º, fecha, ruta o valor" oninput="sutilDebounceUi('loan-history-search',renderClientLoanHistory,100)">
            </label>
          </div>
          <div id="clientLoansMobile" class="loan-history-mobile"></div>
          <div class="table-wrap loan-history-desktop" style="margin-top:12px">
            <table>
              <thead><tr>
                <th>Crédito</th><th>Fecha</th><th>Ruta histórica</th>
                <th>Crédito realizado</th><th>Interés</th><th>Total contratado</th>
                <th>Total recibido</th><th>Ganancia cobrada</th>
                <th>Pagadas</th><th>Pendientes</th><th>Atrasadas</th>
                <th>Saldo</th><th>Estado</th><th>Acción</th>
              </tr></thead>
              <tbody id="clientLoans"></tbody>
            </table>
          </div>
        </div>

        <div id="clientStatementPane" class="account-pane" style="display:none">
          <div class="card client-statement-section-head">
            <h3 style="margin-bottom:5px">Estado de cuenta</h3>
            <div class="muted">
              Consulta pagos, abonos y cuotas del cliente por período o crédito.
            </div>
            <div class="client-statement-subnav" role="navigation" aria-label="Estado de cuenta">
              <button id="clientStatementCreditsTab" class="btn secondary" type="button" onclick="openClientCreditsFromStatement(this)">📚 Créditos</button>
              <button id="clientStatementPaymentsTab" class="btn active-tab" type="button" onclick="showClientStatementView('payments',this)">💳 Pagos y abonos</button>
              <button id="clientStatementInstallmentsTab" class="btn secondary" type="button" onclick="showClientStatementView('installments',this)">📅 Cuotas</button>
            </div>
          </div>

          <div id="clientStatementSummaryPane" class="client-statement-view">
            <div id="clientStatementSummary" class="grid"></div>
          </div>

          <div id="clientStatementFiltersCard" class="card client-statement-view" style="display:none">
            <div class="form-grid">
              <label>Desde
                <input id="clientStatementFrom" type="date">
              </label>
              <label>Hasta
                <input id="clientStatementTo" type="date">
              </label>
              <label>Crédito
                <select id="clientStatementLoan">
                  <option value="">Todos los créditos</option>
                </select>
              </label>
            </div>
            <button class="btn" style="margin-top:14px" onclick="loadClientAccountStatement()">Actualizar estado de cuenta</button>
          </div>

          <div id="clientStatementPaymentsPane" class="client-statement-view" style="display:none">
            <div class="card client-statement-payments-card">
              <h3>Pagos y abonos</h3>
              <div class="table-wrap client-statement-payments-wrap">
                <table class="client-statement-payments-table">
                  <thead><tr>
                    <th>Fecha</th><th>Valor</th><th>Método</th>
                    <th>Ruta</th><th>Cuotas afectadas</th>
                    <th>Responsable</th><th>Saldo posterior</th>
                  </tr></thead>
                  <tbody id="clientStatementPayments"></tbody>
                </table>
              </div>
            </div>
          </div>

          <div id="clientStatementInstallmentsPane" class="client-statement-view" style="display:none">
            <div class="card client-statement-installments-card">
              <h3>Cuotas</h3>
              <div class="table-wrap client-statement-installments-wrap">
                <table class="client-statement-installments-table">
                  <thead><tr>
                    <th>Crédito</th><th>Cuota</th><th>Vencimiento</th>
                    <th>Valor</th><th>Pagado</th><th>Saldo</th><th>Estado</th>
                  </tr></thead>
                  <tbody id="clientStatementInstallments"></tbody>
                </table>
              </div>
            </div>
          </div>

          <div id="clientStatementPdfRow" class="client-statement-view" style="display:none;justify-content:flex-end;margin-top:12px">
            <button class="btn secondary" type="button" onclick="downloadClientAccountStatementPdf()">📄 Descargar reporte PDF</button>
          </div>
        </div>

        <div id="loanDetailCard" class="card" style="display:none">
          <div style="display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap">
            <div>
              <h3 id="loanDetailTitle" style="margin:0">Detalle del crédito</h3>
              <div id="loanDetailSubtitle" class="muted"></div>
            </div>
            <button class="btn secondary" type="button" onclick="closeLoanDetail()">Cerrar detalle</button>
          </div>
          <div id="loanDetailSummary" class="grid" style="margin-top:12px"></div>
          <div id="loanDetailActions"></div>
          <h4>Cuotas del crédito seleccionado</h4>
          <div class="table-wrap">
            <table>
              <thead><tr>
                <th>Cuota</th><th>Fecha</th><th>Valor</th><th>Pagado</th>
                <th>Saldo</th><th>Estado</th><th>Fecha de pago</th><th>Acciones</th>
              </tr></thead>
              <tbody id="loanInstallmentsTable"></tbody>
            </table>
          </div>
        </div>
        </div>
      </div>
    </section>

    <section id="newClientSection" class="section" autocomplete="off">
      <div class="card">
        <h3>Registrar nuevo cliente</h3>
        <div class="photo-picker">
          <label>Foto del cliente (opcional)</label>
          <div class="sutil-file-picker sutil-client-photo-picker">
            <input id="clientPhotoCamera" class="sutil-file-input" type="file" accept="image/jpeg,image/png,image/webp" capture="user" onchange="handleNewClientPhotoInput(this,'camera')">
            <input id="clientPhoto" class="sutil-file-input" type="file" accept="image/jpeg,image/png,image/webp" onchange="handleNewClientPhotoInput(this,'file')">
            <div class="sutil-client-photo-actions">
              <button type="button" class="btn sutil-file-button" onclick="document.getElementById('clientPhotoCamera').click()">📷 Tomar foto</button>
              <button type="button" class="btn sutil-file-button" onclick="document.getElementById('clientPhoto').click()">📎 Adjuntar foto</button>
            </div>
            <span id="clientPhotoFileName" class="sutil-file-name">Ningún archivo seleccionado</span>
          </div>
          <div class="photo-preview-row">
            <img id="clientPhotoPreview" class="client-photo-large" alt="Vista previa" style="display:none">
            <div class="muted">En celular puedes tomar la foto con la cámara o elegirla de la galería. Máximo 5 MB.</div>
          </div>
        </div>
        <div class="sutil-client-doc-accordion" id="newClientDocumentsAccordion">
          <button class="sutil-client-doc-accordion-head" type="button" onclick="toggleNewClientDocumentsAccordion()" aria-expanded="false">
            <span><strong>📁 Documentos / fotos</strong><small>Opcional · documento personal, residencia u otro</small></span>
            <span class="sutil-client-doc-accordion-chevron">⌄</span>
          </button>
          <div id="newClientDocumentsAccordionBody" class="sutil-client-doc-accordion-body" style="display:none">
            <div id="newClientDocumentsSection" class="sutil-client-docs-section"></div>
          </div>
        </div>
        <div class="form-grid">
          <label>Nombre completo *<input id="clientName" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
          <label>Documento personal *<input id="clientDocument" inputmode="numeric" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
          <div class="sutil-new-client-pair">
            <label>Teléfono 1 *<input id="clientPhone1" inputmode="tel" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
            <label>Teléfono 2<input id="clientPhone2" inputmode="tel" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
          </div>
          <label>Teléfono fijo<input id="clientFixedPhone" inputmode="tel" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
          <label>Correo electrónico<input id="clientEmail" type="text" inputmode="email" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true" spellcheck="false"></label>
          <label>Dirección *<input id="clientAddress" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
          <div class="sutil-new-client-pair">
            <label>Número<input id="clientAddressNumber" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
            <label>Complemento<input id="clientComplement" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
          </div>
          <div class="sutil-new-client-pair">
            <label>Barrio<input id="clientNeighborhood" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
            <label id="clientPostalLabel">CEP / Código postal<input id="clientPostalCode" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
          </div>
          <div class="sutil-new-client-pair">
            <label id="clientStateLabel">Estado / Departamento<input id="clientStateRegion" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
            <label>Ciudad *<input id="clientCity" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
          </div>
          <label style="grid-column:1/-1">Observaciones<textarea id="clientNotes" style="width:100%;min-height:80px;margin-top:5px"></textarea></label>
          <div class="sutil-new-client-select-field">
            <span class="sutil-new-client-select-label">Ruta</span>
            <div class="sutil-new-client-custom-select" data-client-select="clientRoute">
              <select id="clientRoute" class="sutil-new-client-native-select"><option value="">Sin ruta asignada</option></select>
              <button id="clientRouteTrigger" class="sutil-new-client-select-trigger sutil-mobile-select-btn sutil-new-client-mobile-select-btn" type="button" data-select-id="clientRoute" data-select-title="Ruta" onclick="openSutilMobileSelectPicker(this)">Sin ruta asignada</button>
              <div id="clientRouteMenu" class="sutil-new-client-select-menu"></div>
            </div>
          </div>
          <div class="sutil-new-client-select-field">
            <span class="sutil-new-client-select-label">Funcionario responsable</span>
            <div class="sutil-new-client-custom-select" data-client-select="clientStaff">
              <select id="clientStaff" class="sutil-new-client-native-select"><option value="">Sin funcionario asignado</option></select>
              <button id="clientStaffTrigger" class="sutil-new-client-select-trigger sutil-mobile-select-btn sutil-new-client-mobile-select-btn" type="button" data-select-id="clientStaff" data-select-title="Funcionario responsable" onclick="openSutilMobileSelectPicker(this)">Sin funcionario asignado</button>
              <div id="clientStaffMenu" class="sutil-new-client-select-menu"></div>
            </div>
          </div>
          <div class="sutil-new-client-pair">
            <label>Latitud<input id="clientLatitude" type="number" step="any" placeholder="-16.6869"></label>
            <label>Longitud<input id="clientLongitude" type="number" step="any" placeholder="-49.2648"></label>
          </div>
        </div>
        <div class="card" style="background:#f8fafc;border:1px solid #dfe5eb">
          <label class="inline-check" style="margin-top:0"><input id="clientHasBusiness" type="checkbox" onchange="toggleClientBusiness()"> El cliente tiene empresa</label>
          <div id="clientBusinessFields" style="display:none;margin-top:12px">
            <h4>🏢 Información de la empresa (opcional)</h4>
            <div class="form-grid">
              <label>Nombre de la empresa<input id="clientBusinessName" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
              <label>Nombre comercial<input id="clientBusinessTradeName" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
              <label id="clientBusinessDocumentLabel">CNPJ / NIT / RUC<input id="clientBusinessDocument" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
              <label>Actividad económica<input id="clientBusinessActivity" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
              <label>Cargo del cliente<input id="clientBusinessRole" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
              <label>Teléfono<input id="clientBusinessPhone" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
              <label>Correo<input id="clientBusinessEmail" type="text" inputmode="email" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true" spellcheck="false"></label>
              <label>Dirección<input id="clientBusinessAddress" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
              <label>Número<input id="clientBusinessAddressNumber" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
              <label>Complemento<input id="clientBusinessComplement" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
              <label>Barrio<input id="clientBusinessNeighborhood" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
              <label>CEP / Código postal<input id="clientBusinessPostalCode" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
              <label>Estado / Departamento<input id="clientBusinessStateRegion" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
              <label>Ciudad<input id="clientBusinessCity" autocomplete="new-password" data-lpignore="true" data-1p-ignore="true"></label>
            </div>
          </div>
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:16px">
          <button class="btn secondary" type="button" onclick="captureClientLocation()">📍 Usar ubicación actual</button>
          <button class="btn success" type="button" onclick="createClient()">Guardar cliente</button>
          <button class="btn secondary" type="button" onclick="showHome()">Cancelar</button>
        </div>
        <div id="clientFormResult" class="result"></div>
        <div class="muted" style="margin-top:10px">* Campos obligatorios. La ubicación solo se obtiene cuando el usuario autoriza el navegador.</div>
      </div>
    </section>

    <section id="loansSection" class="section">
      <div class="card">
        <h3 style="margin-bottom:10px">Créditos</h3>
        <div class="loans-hub-nav">
          <button id="loansCreateTab" class="btn secondary" type="button" onclick="showLoansHubPane('create')">➕ Crear crédito</button>
          <button id="loansConsultTab" class="btn secondary" type="button" onclick="showLoansHubPane('consult')">🔎 Consultar créditos</button>
        </div>
      </div>
      <div id="loansCreatePane" class="card" style="display:none">
        <h3>Crear crédito</h3>
        <div class="historical-only historical-banner"><strong>📚 Carga histórica activa</strong>Indica por separado la fecha real del crédito y la primera cuota. El crédito histórico no descuenta la base operativa actual.</div>
        <div class="forgotten-only forgotten-banner"><strong>🛠️ Operación olvidada</strong>Indica la fecha real del crédito y la primera cuota por separado. No se reabre la caja antigua: el capital se descuenta de la caja operativa actual.</div>
        <div id="loanCashStatus" class="operation-cash-status not_opened">🟠 Selecciona un cliente para consultar la caja de su ruta.</div>
        <div class="form-grid">
          <div class="loan-client-picker">
            <label for="loanClientSearch">Buscar cliente
              <input id="loanClientSearch"
                placeholder="Escribe nombre o código"
                autocomplete="off"
                onfocus="filterLoanClients()"
                oninput="sutilDebounceUi('loan-client-search',filterLoanClients,70)">
              <small class="muted">Las coincidencias aparecen mientras escribes.</small>
            </label>
            <select id="loanClient" class="loan-client-hidden-select" tabindex="-1" aria-hidden="true"></select>
            <div id="loanClientSearchResults" class="loan-client-search-results" role="listbox" aria-label="Clientes encontrados"></div>
            <div id="loanSelectedClient" class="loan-selected-client" style="display:none"></div>
          </div>
          <div id="loanRenewalBalanceBox" class="card" style="display:none;margin:8px 0 10px;padding:12px;border:1px solid #d6a23a">
            <div style="display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap">
              <div>
                <strong>🔄 Saldo de renovación disponible: <span id="loanRenewalAvailable">R$ 0,00</span></strong>
                <div class="muted" style="margin-top:4px">Proviene de cobros registrados como Renovación. No altera Efectivo ni PIX hasta crear el nuevo crédito.</div>
              </div>
              <label class="renewal-switch-row">
                <span class="renewal-switch">
                  <input id="loanApplyRenewal" type="checkbox" onchange="updateLoanRenewalPreview()">
                  <span class="renewal-switch-track" aria-hidden="true"><span class="renewal-switch-thumb"></span></span>
                </span>
                <span class="renewal-switch-label">Aplicar saldo de renovación</span>
              </label>
            </div>
            <div id="loanRenewalPreview" class="muted" style="margin-top:8px"></div>
          </div>
          <label class="loan-delivery-full">Método de entrega
            <select id="loanDeliveryMethod" onchange="updateLoanMixedDelivery()">
              <option value="cash">💵 Efectivo</option>
              <option value="pix">📲 PIX</option>
              <option value="mixed">💵📲 PIX + Dinero</option>
              <option value="transfer">🏦 Transferencia</option>
            </select>
          </label>
          <div id="loanMixedDeliveryFields" class="loan-compact-pair" style="display:none">
            <label>💵 Dinero<input id="loanCashAmount" type="number" min="0" step="0.01" oninput="syncLoanMixedTotal('cash')"></label>
            <label>📲 PIX<input id="loanPixAmount" type="number" min="0" step="0.01" oninput="syncLoanMixedTotal('pix')"></label>
            <div id="loanMixedAutoHelp" class="muted" style="grid-column:1/-1;margin-top:-4px">Escribe un valor y SUTIL calculará automáticamente el otro.</div>
          </div>
          <div class="loan-compact-pair">
            <label>Capital prestado<input id="principal" type="number" min="0.01" step="0.01" oninput="updateLoanRenewalPreview()"></label>
            <label>Interés %
              <input id="interestRate" type="number" min="0" step="0.01" placeholder="%">
              <small id="interestAutoHelp" class="muted">Manual o automático.</small>
            </label>
          </div>
          <input id="interestCalculationMode" type="hidden" value="adaptive">
          <div class="loan-compact-pair">
            <label>Número de cuotas<input id="installmentCount" type="number" min="1"></label>
            <label>Cuota redondeada<input id="manualInstallment" type="number" min="1" step="1" placeholder="Ej. 75"></label>
          </div>
          <label>Frecuencia
            <select id="frequency" onchange="updateFrequencyFields()">
              <option value="daily">Diaria</option>
              <option value="weekly">Semanal</option>
              <option value="monthly">Mensual</option>
            </select>
          </label>
          <div class="loan-compact-pair">
            <label>Fecha del préstamo
              <input id="loanDate" type="date">
              <small class="muted">Afecta la caja.</small>
            </label>
            <label>Primera cuota
              <input id="startDate" type="date">
              <small class="muted">Inicia el cronograma.</small>
            </label>
          </div>
          <!-- Compatibilidad interna: el día semanal se deriva de la fecha de primera cuota. -->
          <select id="weeklyDay" hidden aria-hidden="true" tabindex="-1">
            <option value="0">Lunes</option><option value="1">Martes</option>
            <option value="2">Miércoles</option><option value="3">Jueves</option>
            <option value="4">Viernes</option><option value="5">Sábado</option>
            <option value="6">Domingo</option>
          </select>
          <span id="weeklyDayBox" hidden></span>
          <label id="monthlyDayBox" style="display:none">Día del mes<input id="monthlyDay" type="number" min="1" max="31" value="1"></label>
          <div class="loan-compact-pair loan-weekend-pair">
            <label class="inline-check loan-switch"><span>Contar sábados</span><input id="includeSaturdays" type="checkbox" checked></label>
            <label class="inline-check loan-switch"><span>Contar domingos</span><input id="includeSundays" type="checkbox" checked></label>
          </div>
          <label class="inline-check"><input id="editEachInstallment" type="checkbox" onchange="toggleInstallmentEditor()">Editar cada cuota antes de guardar</label>
        </div>
        <div class="grid">
          <div class="card">Ruta del cliente<div id="loanRoutePreview" class="metric">—</div></div>
          <div class="card">Estado del cliente<div id="loanClientStatus" class="metric">—</div></div>
          <div class="loan-compact-pair loan-preview-pair">
            <div class="card">Total calculado<div id="previewTotal" class="metric">R$ 840,00</div></div>
            <div class="card">Cuota matemática<div id="previewInstallment" class="metric">R$ 56,00</div></div>
          </div>
          <div class="card">Última cuota<div id="previewLastInstallment" class="metric">Automática</div></div>
        </div>
        <div id="loanPrimaryActions" style="display:flex;gap:10px;flex-wrap:wrap">
          <button class="btn secondary" type="button" onclick="generateInstallmentEditor()">👁 Vista previa de cuotas</button>
          <button id="loanCreateButton" class="btn success" type="button" onclick="createLoan()">💾 Crear crédito y cuotas</button>
        </div>
        <div id="installmentEditorBox" class="loan-manual-box">
          <div class="loan-manual-head">
            <div>
              <h3 style="margin:0">Editar cuotas antes de guardar</h3>
              <div class="muted">Puedes cambiar la fecha y el valor de cada cuota. La suma debe coincidir con el total del crédito.</div>
            </div>
            <button class="btn secondary" type="button" onclick="generateInstallmentEditor()">↻ Regenerar</button>
          </div>
          <div id="installmentEditorRows"></div>
          <div id="installmentEditorTotal" class="loan-manual-total"></div>
          <div id="loanEditorFinalAction" style="display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:16px"></div>
        </div>
        <div id="loanResult" class="result"></div>
      </div>
      <div id="loansConsultPane" class="card" style="display:none">
        <h3 style="margin-bottom:5px">Historial crediticio</h3>
        <div class="muted">Consulta los créditos de la empresa por cliente, ruta, funcionario y fecha.</div>
        <div class="loans-consult-filters" style="margin-top:14px">
          <label>Cliente <span class="muted" style="font-size:11px">(opcional)</span><input id="loansConsultClient" placeholder="Nombre o código" oninput="sutilDebounceUi('loans-consult',renderGlobalLoanConsult,280)"></label>
          <label>Ruta<select id="loansConsultRoute" onchange="renderGlobalLoanConsult()"><option value="">Todas</option></select></label>
          <label>Funcionario<select id="loansConsultStaff" onchange="renderGlobalLoanConsult()"><option value="">Todos</option></select></label>
          <label>Estado del crédito<select id="loansConsultStatus" onchange="renderGlobalLoanConsult()"><option value="">Todos</option><option value="active">Activos</option><option value="overdue">Atrasados</option><option value="paid">Pagados</option><option value="loss">Reportados / pérdida</option></select></label>
        </div>
        <div class="loans-period-row">
          <button id="loansPeriodAll" class="btn active-tab" type="button" onclick="setLoansConsultPeriod('all')">Todas las fechas</button>
          <button id="loansPeriodToday" class="btn secondary" type="button" onclick="setLoansConsultPeriod('today')">Hoy</button>
          <button id="loansPeriodYesterday" class="btn secondary" type="button" onclick="setLoansConsultPeriod('yesterday')">Ayer</button>
          <button id="loansPeriodDates" class="btn secondary" type="button" onclick="setLoansConsultPeriod('dates')">Por fechas</button>
        </div>
        <div id="loansConsultDates">
          <label>Desde<input id="loansConsultFrom" type="date" onchange="renderGlobalLoanConsult()"></label>
          <label>Hasta<input id="loansConsultTo" type="date" onchange="renderGlobalLoanConsult()"></label>
        </div>
        <div id="loansConsultStatusText" class="muted" style="margin:8px 0"></div>
        <div id="loansConsultResults" class="loan-history-mobile" style="display:block"></div>
      </div>
    </section>

    <section id="collectionsSection" class="section">
      <div class="card">
        <h2 style="margin:0">Cobros</h2>
        <div class="historical-only historical-banner"><strong>📚 Carga histórica activa</strong>El pago conserva su fecha real y no incrementa la base operativa actual.</div>
        <div class="forgotten-only forgotten-banner"><strong>🛠️ Cobro olvidado</strong>Selecciona la fecha real del cobro. La deuda se actualizará con esa fecha y el dinero entrará en la caja operativa abierta actual, sin reabrir cajas anteriores.</div>
        <div class="muted">Selecciona la consulta que necesitas.</div>

        <div class="collections-option-grid">
          <button id="collectionsDebtOption" class="collections-option" type="button" onclick="showCollectionsMode('debt')">
            <span class="collections-option-icon">🧾</span>
            <span class="collections-option-title">Saldo deudor</span>
            <small>Una cuota pendiente por cliente. Al buscar un cliente, muestra todas sus cuotas pendientes.</small>
          </button>
          <button id="collectionsReceivedOption" class="collections-option" type="button" onclick="showCollectionsMode('received')">
            <span class="collections-option-icon">📋</span>
            <span class="collections-option-title">Pagos recibidos</span>
            <small>Consulta general de pagos recibidos.</small>
          </button>
          <button id="collectionsClientPaymentsOption" class="collections-option" type="button" onclick="showCollectionsMode('clientPayments')">
            <span class="collections-option-icon">👥</span>
            <span class="collections-option-title">Pagos del cliente</span>
            <small>Consulta individual del historial de pagos de un cliente.</small>
          </button>
        </div>
      </div>
      <div id="collectionsDebtPane" class="collections-mode-pane">
      <div class="card">
        <div class="form-grid">
          <label id="collectionsWorkDateLabel">Fecha de trabajo
            <div id="collectionsDateTodayDisplay" class="sutil-fixed-work-date" aria-live="polite"></div>
            <input id="collectionsDate" class="sutil-work-date-picker" type="date">
          </label>
          <label>Ruta<select id="collectionsRoute"><option value="">Todas las rutas autorizadas</option></select></label>
          <label>Estado
            <select id="collectionsStatus">
              <option value="open">Morosas y de hoy</option>
              <option value="overdue">Solo morosas</option>
              <option value="today">Vencen hoy</option>
              <option value="upcoming">Próximas</option>
              <option value="paid">Pagadas</option>
              <option value="all">Todas</option>
            </select>
          </label>
          <div class="client-smart-search">
            <label>Buscar cliente
              <input id="collectionsSearch" autocomplete="off" placeholder="Nombre, código, documento o teléfono"
                oninput="collectionsSearchChanged();renderSmartClientSuggestions('collectionsSearch','collectionsSearchSuggestions','debt');sutilDebounceUi('collections-search',renderTodayCollections,100)">
            </label>
            <div id="collectionsSearchSuggestions" class="client-smart-suggestions"></div>
          </div>
        </div>
        <div id="collectionsClientKpis" class="collections-kpi-grid" style="display:none;margin-top:14px">
        <div class="collections-kpi-card">
          <span>Cuotas morosas</span>
          <strong id="collectionOverdueCount" class="status-overdue">0</strong>
        </div>
        <div class="collections-kpi-card">
          <span>Vencen hoy</span>
          <strong id="collectionTodayCount" class="status-warning">0</strong>
        </div>
        <div class="collections-kpi-card">
          <span>Pagadas en la consulta</span>
          <strong id="collectionPaidCount" class="status-current">0</strong>
        </div>
        <div class="collections-kpi-card">
          <span>Pendiente por cobrar</span>
          <strong id="todayPending">R$ 0,00</strong>
        </div>
        <div class="collections-kpi-card collections-kpi-wide">
          <span>Cobrado hoy</span>
          <strong id="todayPaid" class="status-current">R$ 0,00</strong>
        </div>
      </div>
      
        <button class="btn" style="margin-top:12px" onclick="loadTodayCollections()">Actualizar lista</button>
        <div class="muted" style="margin-top:10px">
          <span class="status-pill pill-overdue">Rojo: morosa</span>
          <span class="status-pill pill-today">Amarillo: vence hoy</span>
          <span class="status-pill pill-current">Verde: pagada</span>
        </div>
        <div id="collectionsViewNote" class="collections-view-note">
          Vista general: se muestra una sola cuota pendiente por cliente. Escribe el nombre, código, documento o teléfono de un cliente para ver todas sus cuotas pendientes.
        </div>
        <div class="table-wrap" style="margin-top:14px">
          <table id="collectionsDebtTable" class="collections-table collections-compact-table">
            <thead id="todayCollectionsHead"></thead>
            <tbody id="todayCollectionsTable"></tbody>
          </table>
        </div>
      </div>
      </div>
      <div id="collectionsReceivedPane" class="collections-mode-pane">
        <div class="card">
          <div class="collections-panel-head">
            <div>
              <h3 style="margin:0">📋 Pagos recibidos</h3>
            </div>
          </div>
          <div class="payments-search-grid">
            <div class="client-smart-search">
              <label>Término de pesquisa
                <input id="receivedPaymentsSearch" autocomplete="off" placeholder="Cliente, código, documento o teléfono"
                  oninput="renderSmartClientSuggestions('receivedPaymentsSearch','receivedPaymentsSearchSuggestions','received')">
              </label>
              <div id="receivedPaymentsSearchSuggestions" class="client-smart-suggestions"></div>
            </div>
          </div>

          <div class="payments-period-compact">
            <strong>Período:</strong>
            <div class="payments-period-segment">
              <label class="radio-pill"><input type="radio" name="receivedPaymentsPeriod" value="today" checked onchange="setReceivedPaymentsPeriod('today')"><span>Hoy</span></label>
              <label class="radio-pill"><input type="radio" name="receivedPaymentsPeriod" value="yesterday" onchange="setReceivedPaymentsPeriod('yesterday')"><span>Ayer</span></label>
              <label class="radio-pill"><input type="radio" name="receivedPaymentsPeriod" value="between" onchange="setReceivedPaymentsPeriod('between')"><span>Entre fechas</span></label>
            </div>
          </div>

          <div id="receivedPaymentsDateRange" class="received-payments-date-range">
            <label>Fecha inicial
              <input id="receivedPaymentsDateFrom" type="date">
            </label>
            <label>Fecha final
              <input id="receivedPaymentsDateTo" type="date">
            </label>
          </div>

          <div class="received-payments-filter-grid">
            <label class="received-modern-filter-label">Ruta
              <select id="receivedPaymentsRoute" class="received-native-select" tabindex="-1" aria-hidden="true">
                <option value="">Todas las rutas</option>
              </select>
              <button id="receivedPaymentsRouteButton" class="received-modern-select" type="button" onclick="openReceivedPaymentsPicker('route')">
                <span class="received-modern-select-icon">📍</span>
                <span class="received-modern-select-copy">
                  <strong id="receivedPaymentsRouteButtonText">Todas las rutas</strong>
                  <small>Seleccionar ruta</small>
                </span>
                <span class="received-modern-select-chevron">⌄</span>
              </button>
            </label>

            <label class="received-modern-filter-label">Funcionario
              <select id="receivedPaymentsStaff" class="received-native-select" tabindex="-1" aria-hidden="true">
                <option value="">Todos los funcionarios</option>
              </select>
              <button id="receivedPaymentsStaffButton" class="received-modern-select" type="button" onclick="openReceivedPaymentsPicker('staff')">
                <span class="received-modern-select-icon">👤</span>
                <span class="received-modern-select-copy">
                  <strong id="receivedPaymentsStaffButtonText">Todos los funcionarios</strong>
                  <small>Seleccionar funcionario</small>
                </span>
                <span class="received-modern-select-chevron">⌄</span>
              </button>
            </label>

            <label>Forma de pago
              <select id="receivedPaymentsMethod">
                <option value="all">Todas</option>
                <option value="cash">Efectivo</option>
                <option value="pix">PIX</option>
                <option value="transfer">Transferencia</option>
                <option value="renewal">Renovación</option>
              </select>
            </label>
          </div>

          <div id="receivedPaymentsPickerBackdrop" class="received-filter-picker-backdrop" onclick="closeReceivedPaymentsPicker(event)">
            <div class="received-filter-picker-sheet" role="dialog" aria-modal="true" aria-labelledby="receivedPaymentsPickerTitle">
              <div class="received-filter-picker-handle"></div>
              <div class="received-filter-picker-head">
                <div>
                  <small id="receivedPaymentsPickerEyebrow">Filtro</small>
                  <h3 id="receivedPaymentsPickerTitle">Seleccionar</h3>
                </div>
                <button class="received-filter-picker-close" type="button" onclick="closeReceivedPaymentsPicker()">×</button>
              </div>
              <div class="received-filter-picker-search">
                <span>🔎</span>
                <input id="receivedPaymentsPickerSearch" autocomplete="off" placeholder="Buscar..." oninput="renderReceivedPaymentsPickerList()">
              </div>
              <div id="receivedPaymentsPickerList" class="received-filter-picker-list"></div>
            </div>
          </div>
          <div class="payments-search-actions received-payments-main-actions">
            <button class="btn" type="button" onclick="loadReceivedPayments()">🔎 Buscar</button>
            <button class="btn secondary" type="button" onclick="printReceivedPaymentsReport()">🧾 Generar PDF</button>
          </div>
          <div class="payments-summary-strip">
            <div>Listagem: <strong id="receivedPaymentsCount">0</strong></div>
            <div>Total da lista: <strong id="receivedPaymentsTotal">R$ 0,00</strong></div>
          </div>
          <div id="receivedPaymentsMethodCards" class="method-mini-grid"></div>
          <div id="receivedPaymentsList" class="payments-list"></div>
        </div>
      </div>

      <div id="collectionsClientPaymentsPane" class="collections-mode-pane">
        <div class="card">
          <div class="client-payments-persistent-search">
            <div class="client-smart-search">
              <label>Buscar cliente
                <input id="clientPaymentsSearch" autocomplete="off" placeholder="Nombre, código, documento o teléfono"
                  oninput="renderSmartClientSuggestions('clientPaymentsSearch','clientPaymentsSearchSuggestions','clientPayments');sutilDebounceUi('client-payments-search',renderClientPaymentsPicker,100)">
              </label>
              <div id="clientPaymentsSearchSuggestions" class="client-smart-suggestions"></div>
            </div>
          </div>

          <div id="clientPaymentsPickerView" class="client-payments-shell client-payments-picker-clean">
            <div id="clientPaymentsPickerList" class="client-picker-list"></div>
            <div class="client-payments-footer">
              <div class="client-payments-footer-total" style="grid-column:1/-1">
                <small>Total de los pagos</small>
                <strong>R$ 0,00</strong>
              </div>
            </div>
          </div>

          <div id="clientPaymentsDetailView" class="client-payments-shell" style="display:none">
            <div class="client-payments-dark-head">
              <h3 id="clientPaymentsHeaderName">CLIENTE</h3>
              <div class="client-payments-client-grid">
                <div><small>Documento</small><strong id="clientPaymentsHeaderDocument">---</strong></div>
                <div><small>Teléfono fijo</small><strong id="clientPaymentsHeaderFixed">---</strong></div>
                <div><small>Celular</small><strong id="clientPaymentsHeaderMobile">---</strong></div>
              </div>
            </div>

            <div style="padding:14px">
              <div class="client-period-box">
                <div class="client-period-title">Seleccione el período deseado</div>
                <div class="client-period-options">
                  <label class="client-period-option"><input type="radio" name="clientPaymentsPeriod" value="yesterday" onchange="setClientPaymentsPeriod('yesterday')"> Ayer</label>
                  <label class="client-period-option"><input type="radio" name="clientPaymentsPeriod" value="today" onchange="setClientPaymentsPeriod('today')"> Hoy</label>
                  <label class="client-period-option"><input type="radio" name="clientPaymentsPeriod" value="between" checked onchange="setClientPaymentsPeriod('between')"> Entre fechas</label>
                </div>
                <div id="clientPaymentsDateRange" class="client-period-dates client-payments-date-range open">
                  <label>Fecha inicial
                    <input id="clientPaymentsDateFrom" type="date">
                  </label>
                  <label>Fecha final
                    <input id="clientPaymentsDateTo" type="date">
                  </label>
                  <button class="btn" type="button" onclick="loadClientPaymentsHistory()">🔎 Buscar</button>
                </div>
              </div>

              <button class="btn secondary client-payments-back" type="button" onclick="clearClientPaymentsSelection()">← Seleccionar otro cliente</button>

              <div id="clientPaymentsSummary" class="client-payments-summary"></div>
              <div id="clientPaymentsList" class="payments-list"></div>
              <div id="clientPaymentsNote" class="client-payments-note"></div>

              <div class="client-payments-footer">
                <div class="client-payments-footer-total">
                  <small>Total de los pagos</small>
                  <strong id="clientPaymentsFooterTotal">R$ 0,00</strong>
                </div>
                <button class="client-payments-footer-pdf" type="button" onclick="printClientPaymentsReport()">🧾 Generar extracto de pagos</button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div id="directPaymentBackdrop" class="direct-payment-backdrop" role="dialog" aria-modal="true" aria-labelledby="directPaymentTitle">
        <div id="directPaymentCard" class="direct-payment-modal">
          <div class="direct-payment-modal-head">
            <div>
              <h3 id="directPaymentTitle">💰 Registrar pago / abono</h3>
              <div id="directPaymentClient" class="direct-payment-modal-client"></div>
            </div>
            <button class="direct-payment-close" type="button" aria-label="Cerrar" onclick="closeDirectPayment()">×</button>
          </div>

          <div class="direct-payment-body">
            <div class="payment-extra-grid">
              <div class="payment-extra-box">
                <small>Estado</small>
                <strong id="directPaymentStatus">PENDIENTE</strong>
              </div>
              <div class="payment-extra-box">
                <small>Vencimiento</small>
                <strong id="directPaymentDueDate">—</strong>
              </div>
              <div class="payment-extra-box">
                <small>Valor inicial</small>
                <strong id="directPaymentInitialValue">R$ 0,00</strong>
              </div>
              <div class="payment-extra-box remaining">
                <small>Cuota que va a pagar</small>
                <strong id="directPaymentInstallment">#—</strong>
              </div>
            </div>

            <div class="direct-payment-summary">
              <div class="direct-payment-summary-box balance" style="display:none" aria-hidden="true">
                <small>Saldo pendiente de la cuota</small>
                <strong id="directPaymentPending">${money(0)}</strong>
                <strong id="directPaymentRemaining" style="display:none">${money(0)}</strong>
              </div>
              <div class="direct-payment-summary-box">
                <small>Saldo total deudor</small>
                <strong id="directPaymentTotalBalance">—</strong>
              </div>
            </div>

            <div class="direct-payment-form">
              <label>Valor a pagar
                <input id="directPaymentAmount" type="number" min="0.01" step="0.01">
                <div class="payment-mode-row">
                  <label class="payment-mode-choice">
                    <input id="directPaymentPartialOption" type="radio" name="directPaymentAmountMode" value="partial" checked onchange="setDirectPaymentAmountMode('partial')">
                    Valor parcial
                  </label>
                  <label class="payment-mode-choice">
                    <input id="directPaymentTotalOption" type="radio" name="directPaymentAmountMode" value="total" onchange="setDirectPaymentAmountMode('total')">
                    Valor total
                  </label>
                </div>
              </label>

              <label>Forma de pago
                <select id="directPaymentMethod" onchange="updateDirectPaymentMethodFields()">
                  <option value="cash">💵 Efectivo</option>
                  <option value="pix">📲 PIX</option>
                  <option value="mixed">💵📲 PIX + Efectivo</option>
                  <option value="transfer">🏦 Transferencia</option>
                  <option value="renewal">🔄 Renovación</option>
                </select>
              </label>

              <div id="directPaymentMixedBox" class="full" style="display:none;border:1px solid var(--border);border-radius:12px;padding:12px">
                <div style="font-weight:700;margin-bottom:8px">💵📲 Distribución del pago</div>
                <div class="form-grid">
                  <label>Efectivo
                    <input id="directPaymentCashAmount" type="number" min="0" step="0.01" inputmode="decimal" placeholder="0,00" oninput="syncDirectPaymentMixedTotal()">
                  </label>
                  <label>PIX
                    <input id="directPaymentPixAmount" type="number" min="0" step="0.01" inputmode="decimal" placeholder="0,00" oninput="syncDirectPaymentMixedTotal()">
                  </label>
                </div>
                <div class="muted" style="margin-top:6px">Efectivo + PIX deben sumar el valor total del pago.</div>
              </div>

              <div id="directPaymentRenewalGuide" class="full" style="display:none;border:1px solid #d6a23a;background:#fff8e8;color:#2b2418;border-radius:12px;padding:12px">
                <strong>🔄 Renovación</strong>
                <div style="margin-top:5px">Úsala cuando el cliente renueva y todavía tiene un saldo pendiente. El valor indicado se aplica al crédito anterior como pago por renovación y genera saldo de renovación para aplicarlo al nuevo crédito. No entra físicamente a Efectivo ni PIX. Ejemplo: si debe R$340 y renueva por R$1.000, los R$340 se aplican al crédito anterior y al crear el nuevo crédito podrás aplicar ese saldo, reduciendo el valor físico a entregar.</div>
              </div>

              <label id="directPaymentDateBox"><span id="directPaymentDateLabelText">Fecha del pago</span>
                <input id="directPaymentDate" type="date" oninput="rememberDirectPaymentDate(this.value)" onchange="confirmDirectPaymentDate(this.value)">
              </label>

              <div id="directPaymentForgottenShortcut" class="full" style="display:none;border:1px dashed var(--border);border-radius:12px;padding:11px 12px">
                <div id="directPaymentForgottenShortcutText" class="muted" style="margin-bottom:8px">Los pagos registrados aquí usan automáticamente la fecha de hoy.</div>
                <button id="directPaymentForgottenShortcutButton" class="btn secondary" type="button" onclick="goDirectPaymentToForgottenCollection()">🛠️ ¿Pago de una fecha anterior? Ir a Cobro olvidado</button>
              </div>

              <div id="directPaymentForgottenGuide" class="full" style="display:none;border:1px solid #d6a23a;background:#fff8e8;border-radius:12px;padding:12px">
                <strong id="directPaymentForgottenGuideTitle">🛠️ Pago de fecha anterior</strong>
                <div id="directPaymentForgottenGuideText" class="muted" style="margin-top:5px"></div>
                <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:10px">
                  <button id="directPaymentForgottenButton" class="btn secondary" type="button" onclick="activateDirectPaymentForgotten()">🛠 Registrar como cobro olvidado</button>
                </div>
              </div>

              <label class="full">Observación
                <input id="directPaymentNote" placeholder="Opcional: detalle del pago, referencia, acuerdo...">
              </label>
            </div>

            <div class="direct-payment-actions">
              <button id="directPaymentApplyButton" class="btn success" type="button" onclick="saveDirectPayment()">💾 Guardar</button>
              <button class="btn secondary" type="button" onclick="closeDirectPayment()">❌ Cancelar</button>
            </div>

            <div id="directPaymentResult" class="result"></div>

            <div id="directPaymentReceiptActions" class="direct-payment-receipt-actions">
              <button class="btn" type="button" onclick="showDirectPaymentReceipt()">🧾 Ver recibo</button>
              <button class="btn secondary" type="button" onclick="shareDirectPaymentReceipt()">📤 Compartir</button>
            </div>

            <div id="directPaymentReceipt" class="direct-payment-receipt"></div>
          </div>
        </div>
      </div>


    </section>

    <section id="receiptsSection" class="section">
      <div class="card sutil-receipts-hub-nav-card" aria-label="Comprobantes y conciliación bancaria">
        <div class="sutil-receipts-hub-tabs" role="tablist">
          <button id="receiptHubReceiptsBtn" class="sutil-receipts-hub-tab active" type="button" role="tab" aria-selected="true" onclick="sutilSwitchReceiptsHub('receipts')">
            <span aria-hidden="true">✅</span><span id="receiptHubReceiptsLabel">Comprobantes de pago</span>
          </button>
          <button id="receiptHubReconciliationBtn" class="sutil-receipts-hub-tab" type="button" role="tab" aria-selected="false" onclick="sutilSwitchReceiptsHub('reconciliation')">
            <span aria-hidden="true">🏦</span><span id="receiptHubReconciliationLabel">Conciliación bancaria</span>
          </button>
        </div>
      </div>
      <div id="receiptHubReceiptsPane" class="card">
        <div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap">
          <div>
            <h2 style="margin:0">✅ Comprobantes de pago</h2>
            <div class="muted">Revisa el archivo, confirma el valor y aplica el pago a la deuda del cliente.</div>
          </div>
        </div>
        <div id="receiptMobileFilters" class="receipt-mobile-filters" style="margin-top:14px">
          <label>Estado
            <select id="receiptStatusFilter" onchange="sutilReceiptFiltersChanged()">
              <option value="">Todos</option>
              <option value="checking">En comprobación</option>
              <option value="confirmed">Confirmados</option>
              <option value="not_confirmed">Rechazados</option>
            </select>
          </label>
          <label>Ruta
            <select id="receiptRouteFilter" onchange="sutilReceiptFiltersChanged()">
              <option value="">Todas</option>
            </select>
          </label>
          <div class="receipt-period-filter">
            <div class="receipt-filter-title">Período</div>
            <div class="sutil-receipt-period-tabs" role="group" aria-label="Período de comprobantes">
              <button id="receiptPeriodToday" class="sutil-receipt-period-btn active" type="button" onclick="setReceiptPeriod('today')">Hoy</button>
              <button id="receiptPeriodYesterday" class="sutil-receipt-period-btn" type="button" onclick="setReceiptPeriod('yesterday')">Ayer</button>
              <button id="receiptPeriodBetween" class="sutil-receipt-period-btn" type="button" onclick="setReceiptPeriod('between')">Entre fechas</button>
              <button id="receiptPeriodAll" class="sutil-receipt-period-btn" type="button" onclick="setReceiptPeriod('all')">Todos</button>
            </div>
            <div id="receiptCustomDateRange" class="sutil-receipt-custom-dates" aria-hidden="true">
              <label>Desde
                <input id="receiptDateFrom" type="date" onchange="sutilReceiptCustomDatesChanged()" aria-label="Desde">
              </label>
              <label>Hasta
                <input id="receiptDateTo" type="date" onchange="sutilReceiptCustomDatesChanged()" aria-label="Hasta">
              </label>
            </div>
          </div>
          <label class="receipt-search-filter">Buscar
            <input id="receiptSearch" autocomplete="off" placeholder="Cliente, código, ruta o archivo" oninput="sutilDebounceUi('receipts-search',sutilReceiptFiltersChanged,350)">
          </label>
        </div>
        <div class="receipt-results-toolbar">
          <div>
            <strong id="receiptResultsCount">0 comprobante(s) encontrado(s)</strong>
            <span id="receiptResultsSubcount" class="receipt-results-subcount"></span>
          </div>
          <div class="receipt-results-actions">
            <button id="receiptLoadMoreBtn" class="btn secondary" type="button" onclick="loadMoreReceipts()">＋ Cargar más</button>
            <button class="btn secondary" type="button" onclick="refreshReceipts()">↻ Actualizar</button>
          </div>
        </div>
        <div class="table-wrap" style="margin-top:12px">
          <table class="pix-table">
            <thead><tr><th>Cliente</th><th>Ruta</th><th>Crédito / cuota</th><th>Valor</th><th>Archivo</th><th>Estado</th><th>Fecha</th><th>Acciones</th></tr></thead>
            <tbody id="receipts"></tbody>
          </table>
        </div>
        <div id="receiptMobileCards" aria-live="polite"></div>
      </div>
      <div id="receiptHubReconciliationPane" aria-hidden="true">
        <div id="reconciliationModule" aria-live="polite"></div>
      </div>
    </section>

    <section id="routesSection" class="section">
      <div class="card routes-switch-card">
        <h3>Rutas</h3>
        <div class="muted routes-switch-help">Selecciona la opción que deseas consultar o administrar.</div>
        <div class="routes-switch-grid" role="group" aria-label="Opciones de rutas">
          <button id="routesOpenCreateBtn" class="routes-switch-button" type="button" aria-pressed="false" aria-controls="routesCreatePane" onclick="openRoutesPane('create')">
            <span class="routes-switch-icon" aria-hidden="true">➕</span><span>Crear ruta</span>
          </button>
          <button id="routesOpenRegisteredBtn" class="routes-switch-button" type="button" aria-pressed="false" aria-controls="routesRegisteredPane" onclick="openRoutesPane('registered')">
            <span class="routes-switch-icon" aria-hidden="true">📋</span><span>Rutas registradas</span>
          </button>
        </div>
      </div>
      <div id="routesCreatePane" class="routes-view-pane" style="display:none" aria-hidden="true">
      <div class="card">
        <h3>Crear ruta</h3>
        <div class="form-grid">
          <label>Nombre de la ruta *<input id="routeName" placeholder="Ej. Ruta 1"></label>
          <label>Ciudad<input id="routeCity" placeholder="Ej. Medellín"></label>
          <label>País
            <select id="routeCountry" onchange="syncRouteCountry()">
              <option value="BR">🇧🇷 Brasil</option><option value="CO">🇨🇴 Colombia</option>
              <option value="US">🇺🇸 Estados Unidos</option><option value="ES">🇪🇸 España</option>
              <option value="MX">🇲🇽 México</option><option value="PE">🇵🇪 Perú</option>
              <option value="EC">🇪🇨 Ecuador</option><option value="AR">🇦🇷 Argentina</option><option value="CL">🇨🇱 Chile</option><option value="CR">🇨🇷 Costa Rica</option><option value="PY">🇵🇾 Paraguay</option><option value="UY">🇺🇾 Uruguay</option><option value="OTHER">Otro</option>
            </select>
          </label>
          <label>Idioma
            <select id="routeLanguage"><option value="pt">Português</option><option value="es">Español</option><option value="en">English</option></select>
          </label>
          <label>Moneda<input id="routeCurrencyCode" value="BRL" maxlength="5"></label>
          <label>Símbolo<input id="routeCurrencySymbol" value="R$" maxlength="10"></label>
          <label>Descripción<input id="routeDescription" placeholder="Zona o referencia"></label>
        </div>
        <div id="routeCreateOperationalCard" class="card" style="margin:14px 0 0;padding:14px">
          <strong>💰 Punto de arranque de caja en Sutil</strong>
          <div class="muted" style="margin-top:6px">
            Define una sola referencia para comenzar a trabajar en la nueva ruta. Los registros históricos anteriores no reconstruyen ni modifican esta base.
          </div>
          <div id="routeCreateOperationalOwnerHelp" class="muted" style="display:none;margin-top:8px">Solo el dueño de empresa puede configurar el punto de arranque.</div>
          <div class="route-create-start-grid" style="margin-top:12px">
            <label class="route-create-start-date">Fecha de corte / inicio en Sutil
              <input id="routeOperationalStart" type="date">
            </label>
            <label>Efectivo disponible al iniciar
              <input id="routeOperationalCash" type="number" min="0" step="0.01" inputmode="decimal" placeholder="0,00">
            </label>
            <label>PIX / saldo electrónico disponible
              <input id="routeOperationalPix" type="number" min="0" step="0.01" inputmode="decimal" placeholder="0,00">
            </label>
          </div>
          <div class="muted" style="margin-top:8px">Si defines una fecha, estos dos saldos se registran como la base inicial de la ruta. Los campos vacíos equivalen a cero. Si no defines una fecha, podrás configurar el punto después desde Editar ruta.</div>
        </div>
        <div style="margin-top:14px"><button id="routeCreateSubmitButton" class="btn success" type="button" onclick="createRoute()">Crear ruta</button></div>
        <div id="routeFormResult" class="result"></div>
      </div>
      </div><!-- /routesCreatePane -->
      <div id="routesRegisteredPane" class="routes-view-pane" style="display:none" aria-hidden="true">
      <div id="routesListCard" class="card">
        <h3>Rutas registradas</h3>
        <div class="card routes-registered-filter-card">
          <div class="routes-registered-filter-head">
            <div>
              <div id="registeredRouteFilterTitle" class="routes-registered-filter-title">Seleccionar ruta</div>
              <div id="registeredRouteFilterHelp" class="muted routes-registered-filter-help">Elige una ruta específica o “Todas las rutas”.</div>
            </div>
          </div>
          <select id="registeredRouteFilter" onchange="renderRegisteredRoutesSelection()">
            <option value="">Selecciona una ruta</option>
          </select>
        </div>
        <div id="routesRegisteredEmpty" class="routes-registered-empty">
          <strong>Selecciona una ruta</strong>
          El listado se mostrará después de elegir una ruta o “Todas las rutas”.
        </div>
        <div id="routesRegisteredTableWrap" class="table-wrap" style="display:none"><table>
          <thead><tr><th>Ruta</th><th>Ciudad</th><th>País</th><th>Idioma</th><th>Moneda</th><th>Clientes</th><th>Morosos</th><th>Créditos activos</th><th>Cartera</th><th>Acciones</th></tr></thead>
          <tbody id="routesTable"></tbody>
        </table></div>
      </div>
      <div id="routeDetailCard" class="card" style="display:none" aria-live="polite">
        <button id="routeDetailBackButton" class="btn secondary route-detail-back" type="button" onclick="showRegisteredRouteList()">← Volver a rutas registradas</button>
        <h3 id="routeDetailTitle">Detalle de ruta</h3>
        <div id="routeSummary" class="grid"></div>
        <h4>Clientes de la ruta</h4>
        <div class="table-wrap"><table>
          <thead><tr><th>Cliente</th><th>Código</th><th>Documento</th><th>Teléfono</th><th>Saldo</th><th>Vencimiento</th><th>Estado</th></tr></thead>
          <tbody id="routeClientsTable"></tbody>
        </table></div>
      </div>
      </div><!-- /routesRegisteredPane -->

      <div id="routeEditModal" class="staff-edit-backdrop" onclick="closeRouteEditFromBackdrop(event)">
        <div class="staff-edit-card" style="max-width:760px">
          <div class="staff-edit-head">
            <div>
              <h3 style="margin:0">✏️ Editar ruta</h3>
              <div id="routeEditSubtitle" class="muted"></div>
            </div>
            <button class="staff-edit-close" type="button" onclick="closeRouteEdit()">×</button>
          </div>

          <div class="form-grid">
            <label>Nombre de la ruta *
              <input id="editRouteName">
            </label>
            <label>Ciudad
              <input id="editRouteCity">
            </label>
            <label>País
              <select id="editRouteCountry" onchange="syncEditRouteCountry()">
                <option value="BR">🇧🇷 Brasil</option>
                <option value="CO">🇨🇴 Colombia</option>
                <option value="US">🇺🇸 Estados Unidos</option>
                <option value="ES">🇪🇸 España</option>
                <option value="MX">🇲🇽 México</option>
                <option value="PE">🇵🇪 Perú</option>
                <option value="EC">🇪🇨 Ecuador</option>
                <option value="AR">🇦🇷 Argentina</option>
                <option value="CL">🇨🇱 Chile</option>
                <option value="CR">🇨🇷 Costa Rica</option>
                <option value="PY">🇵🇾 Paraguay</option>
                <option value="UY">🇺🇾 Uruguay</option>
                <option value="OTHER">Otro</option>
              </select>
            </label>
            <label>Idioma
              <select id="editRouteLanguage">
                <option value="pt">Português</option>
                <option value="es">Español</option>
                <option value="en">English</option>
              </select>
            </label>
            <label>Moneda
              <input id="editRouteCurrencyCode" maxlength="5">
            </label>
            <label>Símbolo
              <input id="editRouteCurrencySymbol" maxlength="10">
            </label>
            <label>Estado de la ruta
              <select id="editRouteActive">
                <option value="true">🟢 Activa</option>
                <option value="false">⚫ Inactiva</option>
              </select>
            </label>
            <label>Cuenta de cobro de esta ruta
              <select id="editRouteCollectionAccount"></select>
              <small class="muted">Si no eliges una, usará la predeterminada de la empresa para el país de la ruta.</small>
            </label>
            <label style="grid-column:1/-1">Descripción
              <input id="editRouteDescription" placeholder="Zona o referencia">
            </label>
          </div>

          <div id="editRouteOperationalCard" class="card" style="margin:14px 0 0;padding:14px">
            <strong>💰 Punto de arranque de caja en Sutil</strong>
            <div class="muted" style="margin-top:6px">
              Define una sola referencia para continuar trabajando en Sutil. Los clientes, créditos, cuotas, pagos y gastos importados permanecen como historial y <strong>no reconstruyen ni modifican esta base</strong>.
            </div>
            <div class="form-grid" style="margin-top:12px">
              <label>Fecha de corte / inicio en Sutil
                <input id="editRouteOperationalStart" type="date">
              </label>
              <label>Efectivo disponible al iniciar
                <input id="editRouteOperationalCash" type="number" min="0" step="0.01">
              </label>
              <label>PIX / saldo electrónico disponible
                <input id="editRouteOperationalPix" type="number" min="0" step="0.01">
              </label>
            </div>
            <div class="muted" style="margin-top:8px">
              Desde este punto, la base cambia únicamente por operaciones nuevas: cobros, créditos, gastos, adiciones, retiros y transferencias.
            </div>
          </div>

          <div id="editRouteGeneralCashCard" class="card" style="display:none;margin:14px 0 0;padding:14px" aria-hidden="true">
            <div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap">
              <div style="flex:1;min-width:260px">
                <strong>🔓 Caja general de traspaso</strong>
                <div id="editRouteGeneralCashStatus" class="muted" style="margin-top:5px">Consultando estado...</div>
                <div class="muted" style="margin-top:7px">
                  Úsala durante el traspaso al sistema nuevo. Antes del inicio operativo de esta ruta, lo cargado queda solo como histórico. Desde el inicio operativo, créditos, cobros y gastos reconstruyen la caja diaria según su fecha real, sin exigir abrir manualmente cada día histórico.
                </div>
                <div id="editRouteOperationalSummary" style="display:none;margin-top:12px"></div>
              </div>
              <button id="editRouteGeneralCashButton" class="btn secondary" type="button" onclick="toggleRouteGeneralCash()">Abrir caja general</button>
            </div>
          </div>

          <div id="routeEditMessage" class="result"></div>

          <div style="display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:16px">
            <button class="btn success" type="button" onclick="saveRouteEdit()">💾 Guardar cambios</button>
            <button class="btn secondary" type="button" onclick="closeRouteEdit()">❌ Cancelar</button>
          </div>
        </div>
      </div>

    </section>
    <section id="staffSection" class="section">
  <div class="card staff-navigation-card">
    <h2 style="margin:0">👥 Personal y permisos</h2>
    <div class="muted" style="margin-top:5px">Selecciona la opción que deseas administrar.</div>
    <div class="module-grid">
      <div id="staffViewCreateBtn" class="module staff-nav-module" onclick="openStaffSubmodule('create')">
        <div class="module-icon">➕</div><div class="module-title">Registrar nuevo funcionario</div>
        <small>Datos de acceso, rutas asignadas y permisos</small>
      </div>
      <div id="staffViewListBtn" class="module staff-nav-module" onclick="openStaffSubmodule('registered')">
        <div class="module-icon">👥</div><div class="module-title">Personal registrado</div>
        <small>Administrar datos, rutas, permisos, clave y estado de acceso</small>
      </div>
      <div id="staffViewLocationBtn" class="module staff-nav-module" onclick="openStaffSubmodule('locations')">
        <div class="module-icon">📍</div><div class="module-title">Ubicación de personal</div>
        <small>Seguimiento autorizado en tiempo real</small>
      </div>
    </div>
  </div>

  <div id="staffCreatePanel" class="card staff-create-card staff-view-panel" style="display:none">
    <div class="staff-subnav"><button class="btn secondary" type="button" onclick="openStaffSubmodule('home')">← Personal y permisos</button></div>
    <div class="staff-create-head">
      <div>
        <h2 style="margin:0">➕ Registrar nuevo funcionario <span id="staffCompanyName" class="muted"></span></h2>
        <div class="muted">Registra un ADM o cobrador, asigna sus rutas y define exactamente qué funciones podrá utilizar.</div>
      </div>
    </div>

    <div class="staff-block">
      <h4 class="staff-block-title">👤 Datos de acceso</h4>
      <div class="form-grid">
        <label>Tipo de acceso *
          <select id="staffRole" onchange="updateStaffRoleHelp()">
            <option value="company_admin">ADM</option>
            <option value="staff">Cobrador</option>
          </select>
        </label>
        <label>Nombre *<input id="staffName"></label>
        <label>Celular *<input id="staffPhone"></label>
        <label>Clave inicial
          <input id="staffPassword" type="password" placeholder="Vacío = automática">
        </label>
      </div>
      <div id="staffRoleHelp" class="muted" style="margin-top:10px">Máximo 2 ADM por ruta. El empresario define sus permisos.</div>
    </div>

    <div class="staff-block">
      <h4 class="staff-block-title">🗺️ Rutas asignadas</h4>
      <div class="muted" style="margin-bottom:10px">Marca únicamente las rutas a las que tendrá acceso este usuario.</div>
      <div id="staffRoutes" class="staff-route-create-grid"></div>
    </div>

    <div class="staff-block">
      <h4 class="staff-block-title">🔐 Permisos</h4>
      <div class="muted" style="margin-bottom:12px">Los permisos están agrupados por función para facilitar la configuración.</div>

      <div class="staff-permission-groups">
        <div class="staff-permission-group">
          <h5>👤 Clientes</h5>
          <div class="staff-permission-list">
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="view_clients">Ver clientes</label>
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="create_clients">Registrar clientes</label>
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="edit_clients">Editar datos del cliente</label>
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="edit_client_identity">Editar documento y código</label>
          </div>
        </div>

        <div class="staff-permission-group">
          <h5>💰 Créditos</h5>
          <div class="staff-permission-list">
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="create_loans">Crear créditos</label>
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="edit_loans">Editar créditos sin pagos</label>
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="delete_loans">Eliminar créditos sin pagos</label>
          </div>
        </div>

        <div class="staff-permission-group">
          <h5>🧾 Cobros y PIX</h5>
          <div class="staff-permission-list">
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="collect_payments">Registrar cobros</label>
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="edit_payments">Corregir pagos registrados</label>
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="review_pix">Confirmar comprobantes de pago</label>
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="issue_receipts">Emitir recibos</label>
          </div>
        </div>

        <div class="staff-permission-group">
          <h5>💵 Caja y gastos</h5>
          <div class="staff-permission-list">
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="manage_cash">Manejar caja</label>
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="manage_cash_base">Adicionar, retirar y transferir base</label>
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="manage_expenses">Registrar gastos</label>
          </div>
        </div>

        <div class="staff-permission-group">
          <h5>🧑‍💼 Personal y rutas</h5>
          <div class="staff-permission-list">
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="manage_staff">Crear y administrar cobradores</label>
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="manage_routes">Administrar rutas</label>
          </div>
        </div>

        <div class="staff-permission-group">
          <h5>📍 Comunicación y reportes</h5>
          <div class="staff-permission-list">
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="view_chat">Acceder al chat</label>
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="manage_chat">Administrar/eliminar chats (solo ADM)</label>
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="view_locations">Ver ubicaciones</label>
            <label class="inline-check"><input class="staffPerm" type="checkbox" value="view_reports">Ver reportes</label>
          </div>
        </div>
      </div>
    </div>

    <div class="staff-create-actions">
      <button class="btn success" type="button" onclick="createStaff()">➕ Crear personal</button>
    </div>
    <div id="staffResult" class="result"></div>
  </div>


  <div id="staffRegisteredPanel" class="card staff-list-card staff-view-panel" style="display:none">
    <div class="staff-subnav"><button class="btn secondary" type="button" onclick="openStaffSubmodule('home')">← Personal y permisos</button></div>
    <div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap">
      <div>
        <h3 style="margin:0">Personal registrado</h3>
        <div class="muted">Administra datos, rutas, permisos, clave y estado de acceso.</div>
      </div>
      <button class="btn secondary" type="button" onclick="refreshStaff()">↻ Actualizar</button>
    </div>

    <div class="table-wrap" style="margin-top:14px">
      <table class="staff-table">
        <thead>
          <tr>
            <th>Perfil</th><th>Nombre</th><th>Celular</th><th>Rutas</th><th>Estado</th><th>Acciones</th>
          </tr>
        </thead>
        <tbody id="staffTable"></tbody>
      </table>
    </div>
  </div>

  <div id="staffLocationsPanel" class="card staff-view-panel" style="display:none">
    <div class="staff-subnav"><button class="btn secondary" type="button" onclick="openStaffSubmodule('home')">← Personal y permisos</button></div>
    <div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap">
      <div>
        <h3 style="margin:0">📍 Ubicación de personal <span class="staff-state-pill active">Tiempo real</span></h3>
        <div class="muted">Mostrará la última ubicación autorizada enviada por el dispositivo de cada funcionario.</div>
      </div>
      <button class="btn secondary" type="button" onclick="refreshStaffLocationsView(true)">↻ Actualizar</button>
    </div>

    <div class="staff-location-layout">
      <div class="staff-location-sidebar">
        <div class="staff-location-filters">
          <label>Buscar
            <input id="staffLocationSearch" placeholder="Nombre o celular" oninput="sutilDebounceUi('staff-location-search',renderStaffLocationsList,100)">
          </label>
          <div class="staff-location-filter-field">
            <span class="staff-location-filter-label">Ruta</span>
            <div class="staff-location-custom-select" data-staff-location-select="staffLocationRoute">
              <select id="staffLocationRoute" class="staff-location-native-select" onchange="renderStaffLocationsList();syncStaffLocationCustomSelect('staffLocationRoute')"><option value="">Todas las rutas</option></select>
              <button id="staffLocationRouteTrigger" class="staff-location-select-trigger" type="button" onclick="toggleStaffLocationCustomSelect('staffLocationRoute',event)">Todas las rutas</button>
              <div id="staffLocationRouteMenu" class="staff-location-select-menu"></div>
            </div>
          </div>
          <div class="staff-location-filter-field">
            <span class="staff-location-filter-label">Estado</span>
            <div class="staff-location-custom-select" data-staff-location-select="staffLocationState">
              <select id="staffLocationState" class="staff-location-native-select" onchange="renderStaffLocationsList();syncStaffLocationCustomSelect('staffLocationState')">
                <option value="">Todos</option>
                <option value="with">Con ubicación</option>
                <option value="without">Sin ubicación</option>
              </select>
              <button id="staffLocationStateTrigger" class="staff-location-select-trigger" type="button" onclick="toggleStaffLocationCustomSelect('staffLocationState',event)">Todos</button>
              <div id="staffLocationStateMenu" class="staff-location-select-menu"></div>
            </div>
          </div>
        </div>
        <div id="staffLocationList" class="staff-location-list"></div>
      </div>

      <div class="staff-location-mapbox">
        <div class="staff-location-maphead">
          <div>
            <strong id="staffLocationSelectedName">Selecciona un funcionario</strong>
            <div id="staffLocationSelectedMeta" class="muted">La ubicación aparecerá aquí cuando el dispositivo autorizado la envíe.</div>
          </div>
          <button id="staffLocationOpenMap" class="btn secondary" type="button" style="display:none" onclick="openSelectedStaffMap()">🗺️ Abrir mapa</button>
        </div>
        <div id="staffLocationMapArea" class="staff-location-maparea">
          <div><div class="staff-location-empty-icon">📍</div><strong>Sin ubicación seleccionada</strong><br><span>Selecciona un funcionario de la lista.</span></div>
        </div>
        <div class="staff-location-footer">Actualización automática cada 30 segundos mientras esta vista esté abierta. El envío GPS se conectará desde la app del funcionario con autorización del dispositivo.</div>
      </div>
    </div>
  </div>
</section>
<section id="cashSection" class="section">
  <div class="card cash-compact-nav-card">
    <div>
      <h2 style="margin:0">💵 Caja diaria</h2>
      <div class="muted" style="margin-top:5px">Selecciona lo que deseas hacer. Solo se mostrará una opción a la vez.</div>
    </div>
    <div class="cash-compact-nav" style="margin-top:14px">
      <button id="cashNavOperateButton" class="cash-compact-nav-btn" type="button" onclick="openCashSubview('operate')">
        <span class="cash-compact-nav-icon">💵</span>
        <span><strong style="color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;opacity:1!important">Operar caja</strong><small style="color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;opacity:1!important">Abrir, consultar o cerrar una fecha</small></span>
      </button>
      <button id="cashNavPendingButton" class="cash-compact-nav-btn" type="button" onclick="openCashSubview('pending')">
        <span class="cash-compact-nav-icon">⚠️</span>
        <span><strong style="color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;opacity:1!important">Pendientes de cierre <b id="pendingCashNavBadge" class="cash-nav-badge" style="color:#172033!important;-webkit-text-fill-color:#172033!important;background:#ffffff!important;opacity:1!important">0</b></strong><small>Ver cajas que continúan abiertas</small></span>
      </button>
    </div>
  </div>

  <div id="forgottenCashReturnCard" class="card" style="display:none;border:1px solid #d6a23a;background:#fffaf0">
    <div style="display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap">
      <div>
        <strong>🛠️ Operación olvidada en pausa</strong>
        <div id="forgottenCashReturnText" class="muted" style="margin-top:4px">Abre o reabre la caja actual de esta ruta y vuelve al crédito. Los datos escritos se conservarán.</div>
      </div>
      <button class="btn secondary" type="button" onclick="returnToForgottenOperation()">↩ Volver al crédito olvidado</button>
    </div>
  </div>

  <div id="cashOperatePane" style="display:none">
    <div class="card cash-toolbar-card">
      <div class="cash-toolbar-head">
        <div>
          <h3 style="margin:0">💵 Operar caja</h3>
          <div class="muted">Las bases se muestran solo para consulta. Los cambios de base se realizan desde Movimientos de base.</div>
        </div>
      </div>

      <div class="cash-selection-grid">
        <label>Fecha
          <input id="cashDate" type="date">
        </label>
        <label>Ruta
          <select id="cashRoute"></select>
        </label>
        <div class="cash-base-pair" style="display:none">
          <label id="openingCashField">Base dinero
            <input id="openingCash" type="number" min="0" step="0.01" value="0">
          </label>
          <label id="openingPixField">Base PIX
            <input id="openingPix" type="number" min="0" step="0.01" value="0">
          </label>
        </div>
        <!-- Se conserva el campo interno vacío porque la apertura lo utiliza en su solicitud;
             la observación visible permanece solo en el cierre automático. -->
        <input id="cashNotes" type="hidden" value="">
      </div>

      <div id="cashInheritanceNote" class="cash-query-hint"></div>

      <div class="cash-action-row">
        <button id="openCashButton" class="btn success" onclick="handleCashOpenAction()">🔓 Abrir caja</button>
        <button id="closeCashTopButton" class="btn danger" style="display:none" onclick="showCashCloseForm()">🔒 Cerrar caja</button>
        <button id="reopenCashButton" class="btn danger" style="display:none" onclick="reopenCashSession()">🔓 Autorizar reapertura</button>
        <button id="goPreviousOpenCashButton" class="btn cash-go-pending-btn" type="button" style="display:none" onclick="goToPreviousOpenCash()">⚠️ Ir a caja pendiente</button>
        <button id="repairFutureCashButton" class="btn danger" type="button" style="display:none" onclick="repairFutureCashSession()">🛠️ Corregir caja futura</button>
        <button id="consultCashButton" class="btn secondary" onclick="loadCashSession()" title="Consultar esta caja sin abrirla">🔎 Consultar</button>
      </div>
      <div id="cashMessage" class="result"></div>
    </div>

    <div id="cashResultCard" class="card cash-status-card" style="display:none">
      <div style="display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap">
        <h3 id="cashResultTitle" style="margin:0">Estado de la caja</h3>
      </div>

      <div id="cashStatusBanner" class="cash-status-banner missing"><strong>Caja no consultada</strong></div>
      <div id="cashActors" class="cash-actor-grid"></div>

      <div id="cashMainMetrics" class="cash-main-metrics"></div>
      <div class="cash-breakdown-head"><div class="cash-breakdown-title">Resumen de caja</div><button class="btn secondary cash-summary-pdf-btn" type="button" onclick="downloadCashSummaryPdf()">📄 PDF</button></div>
      <div id="cashSummary" class="grid"></div>

      <div id="cashCloseArea" class="cash-close-box" style="display:none;margin-top:16px">
        <h4 style="margin-top:0">🔒 Cierre automático</h4>
        <div class="muted" style="margin-bottom:12px">
          Sutil calcula automáticamente la base final con todos los movimientos de esta caja.
        </div>
        <div class="cash-main-metrics">
          <div class="cash-main-metric"><small>Dinero final automático</small><strong id="autoCloseCash">R$ 0,00</strong></div>
          <div class="cash-main-metric"><small>PIX final automático</small><strong id="autoClosePix">R$ 0,00</strong></div>
          <div class="cash-main-metric"><small>Renovaciones del día</small><strong id="autoCloseRenewal">R$ 0,00</strong></div>
          <div class="cash-main-metric total"><small>Base final automática</small><strong id="autoCloseTotal">R$ 0,00</strong></div>
        </div>
        <div class="cash-close-expenses-line"><span id="cashCloseExpensesLabel">Gastos del día</span><strong id="autoCloseExpenses">R$ 0,00</strong></div>
        <div style="margin-top:12px">
          <label>Observación opcional<input id="cashCloseNotes"></label>
        </div>
        <button class="btn success" style="margin-top:12px" onclick="closeCashSession()">🔒 Cerrar caja automáticamente</button>
      </div>
    </div>
  </div>

  <div id="cashPendingPane" style="display:none">
    <div id="pendingOpenCashCard" class="card" style="margin-top:14px;border:1px solid #d6a23a;background:#fffaf0">
      <div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap">
        <div>
          <h3 style="margin:0">⚠️ Cajas abiertas pendientes de cierre</h3>
          <div id="pendingOpenCashSummary" class="muted" style="margin-top:5px">Consultando...</div>
        </div>
        <button class="btn secondary" type="button" onclick="loadPendingOpenCashSessions()">↻ Actualizar</button>
      </div>
      <div id="pendingOpenCashList" style="margin-top:12px"></div>
    </div>
  </div>
</section>
<section id="baseMovementsSection" class="section">
      <div class="card">
        <h2>Movimientos de base</h2>
        <div class="historical-only historical-banner"><strong>📚 Carga histórica activa</strong>El historial no modifica la base operativa. Para comenzar en Sutil, define el punto de arranque de la ruta.</div>
        <div class="muted">Operaciones exclusivas del empresario. No se registran como gastos.</div>
        <div id="baseVisibilityOwnerCard" class="base-visibility-owner-card" style="display:none">
          <div class="base-visibility-owner-copy">
            <strong id="baseVisibilityTitle">Mostrar movimientos de base a funcionarios</strong>
            <small id="baseVisibilityHelp">Controla adiciones, retiros y transferencias entre rutas en las consultas del personal. Los saldos operativos de caja siguen visibles.</small>
          </div>
          <label class="base-visibility-switch" for="baseVisibilityStaffSwitch">
            <input id="baseVisibilityStaffSwitch" type="checkbox" role="switch" aria-label="Mostrar movimientos de base a funcionarios" onchange="saveBaseVisibilityForStaff(this.checked)">
            <span class="base-visibility-switch-track" aria-hidden="true"></span>
          </label>
          <span class="base-visibility-state" id="baseVisibilityState" role="status" aria-live="polite"></span>
        </div>
        <div class="module-grid" style="margin-top:16px">
          <div class="module" onclick="showBaseOperation('add')">
            <div class="module-icon">➕</div><div class="module-title">Adicionar base</div>
            <small>Aporte o corrección positiva</small>
          </div>
          <div class="module" onclick="showBaseOperation('remove')">
            <div class="module-icon">➖</div><div class="module-title">Retirar base</div>
            <small>Ganancia, capital o corrección</small>
          </div>
          <div class="module" onclick="showBaseOperation('transfer')">
            <div class="module-icon">🔁</div><div class="module-title">Transferir entre rutas</div>
            <small>Mueve capital sin afectar utilidad</small>
          </div>
        </div>
      </div>

      <div id="baseAdjustmentCard" class="card" style="display:none">
        <h3 id="baseAdjustmentTitle">Movimiento de base</h3>
        <div class="form-grid">
          <label>Fecha<input id="baseMovementDate" type="date"></label>
          <label>Ruta<select id="baseMovementRoute"></select></label>
          <label>Método<select id="baseMovementMethod"><option value="cash">Dinero</option><option value="pix">PIX</option></select></label>
          <label>Valor<input id="baseMovementAmount" type="number" min="0.01" step="0.01"></label>
          <label>Motivo
            <select id="baseMovementReason"></select>
          </label>
          <label>Observación obligatoria<input id="baseMovementObservation" placeholder="Explique para qué se adiciona o retira"></label>
        </div>
        <button class="btn success" style="margin-top:14px" onclick="saveBaseAdjustment()">Guardar movimiento</button>
        <div id="baseMovementMessage" class="result"></div>
      </div>

      <div id="baseTransferCard" class="card" style="display:none">
        <h3>Transferir base entre rutas</h3>
        <div class="form-grid">
          <label>Fecha<input id="transferDate" type="date"></label>
          <label>Ruta origen<select id="transferSourceRoute"></select></label>
          <label>Ruta destino<select id="transferDestinationRoute"></select></label>
          <label>Método<select id="transferMethod"><option value="cash">Dinero</option><option value="pix">PIX</option></select></label>
          <label>Valor<input id="transferAmount" type="number" min="0.01" step="0.01"></label>
          <label>Observación obligatoria<input id="transferObservation" placeholder="Motivo de la transferencia"></label>
        </div>
        <button class="btn success" style="margin-top:14px" onclick="saveRouteTransfer()">Transferir base</button>
        <div id="transferMessage" class="result"></div>
      </div>

      <div id="editBaseMovementCard" class="card" style="display:none">
        <h3>✏️ Editar movimiento de base</h3>
        <div class="muted">La corrección queda registrada en auditoría y ajusta el saldo actual de la ruta.</div>
        <div class="form-grid" style="margin-top:12px">
          <label>Fecha<input id="editBaseDate" type="date"></label>
          <label>Ruta<input id="editBaseRouteName" disabled></label>
          <label>Tipo
            <select id="editBaseDirection">
              <option value="add">Adicionar base</option>
              <option value="remove">Retirar base</option>
            </select>
          </label>
          <label>Método
            <select id="editBaseMethod">
              <option value="cash">Dinero / efectivo</option>
              <option value="pix">PIX</option>
            </select>
          </label>
          <label>Valor<input id="editBaseAmount" type="number" min="0.01" step="0.01"></label>
          <label>Motivo<input id="editBaseReason"></label>
          <label style="grid-column:1/-1">Observación / motivo de corrección
            <input id="editBaseObservation" placeholder="Explique por qué se corrige este movimiento">
          </label>
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:14px">
          <button class="btn success" type="button" onclick="saveEditedBaseMovement()">Guardar corrección</button>
          <button class="btn secondary" type="button" onclick="cancelEditBaseMovement()">Cancelar</button>
        </div>
        <div id="editBaseMessage" class="result"></div>
      </div>

      <div class="card">
        <div style="display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap">
          <div>
            <h3 style="margin:0">Bases registradas</h3>
            <div class="muted">Adiciones y retiros de base. Empresario o ADM autorizado puede corregirlos.</div>
          </div>
          <button class="btn secondary" type="button" onclick="loadBaseMovements()">↻ Actualizar</button>
        </div>
        <div class="table-wrap" style="margin-top:14px">
          <table>
            <thead><tr>
              <th>Fecha</th><th>Ruta</th><th>Tipo</th><th>Método</th>
              <th>Valor</th><th>Motivo</th><th>Observación</th><th>Responsable</th><th>Acción</th>
            </tr></thead>
            <tbody id="baseMovementsTable"></tbody>
          </table>
        </div>
      </div>
    </section>

    <section id="cashReportSection" class="section">
      <div class="card">
        <h2>Reporte de movimientos de caja</h2>
        <div class="form-grid">
          <label>Desde<input id="cashReportFrom" type="date"></label>
          <label>Hasta<input id="cashReportTo" type="date"></label>
          <label>Ruta<select id="cashReportRoute"><option value="">Todas las rutas</option></select></label>
          <label>Tipo
            <select id="cashReportType">
              <option value="">Todos</option>
              <option value="payment">Cobros</option>
              <option value="loan">Créditos entregados</option>
              <option value="expense">Gastos</option>
              <option value="base_addition">Adiciones de base</option>
              <option value="base_withdrawal">Retiros de base</option>
              <option value="route_transfer">Transferencias</option>
            </select>
          </label>
        </div>
        <button id="cashReportLoadButton" class="btn" style="margin-top:14px" onclick="loadCashMovements()">🔎 Consultar</button>
        <span class="muted" style="display:inline-block;margin:14px 0 0 10px">El historial se consulta sin modificar la caja operativa.</span>
      </div>
      <div id="cashReportSummary" class="grid"></div>
      <div class="card">
        <div class="table-wrap"><table>
          <thead><tr>
            <th>Fecha/hora</th><th>Ruta</th><th>Movimiento</th><th>Método</th>
            <th>Entrada</th><th>Salida</th><th>Motivo</th><th>Observación</th>
            <th>Responsable</th><th>Referencia</th><th>Estado caja</th><th>Acción</th>
          </tr></thead>
          <tbody id="cashMovementsTable"></tbody>
        </table></div>
      </div>
      <div id="cashReportMessage" class="result"></div>
    </section>
    <section id="expensesSection" class="section">
      <div class="card">
        <h2>Gastos por ruta</h2>
        <div class="historical-only historical-banner"><strong>📚 Carga histórica activa</strong>El gasto conserva su fecha real y no descuenta la base operativa actual.</div>
        <div class="forgotten-only forgotten-banner"><strong>🛠️ Gasto olvidado</strong>Indica la fecha real del gasto. El gasto se conservará en esa fecha y se descontará de la caja operativa abierta actual.</div>
        <div class="form-grid">
          <label>Fecha<input id="expenseDate" type="date"></label>
          <label>Ruta<select id="expenseRoute"></select></label>
          <label>Categoría
            <select id="expenseCategory">
              <option>Gasolina</option><option>Arriendo</option>
              <option>Sueldo</option><option>Mantenimiento</option>
              <option>Alimentación</option><option>Otros</option>
            </select>
          </label>
          <label>Valor<input id="expenseAmount" type="number" min="0.01" step="0.01"></label>
          <label>Método<select id="expenseMethod" onchange="updateExpenseMixedMethod()"><option value="cash">Dinero</option><option value="pix">PIX</option><option value="mixed">PIX + Dinero</option></select></label>
          <div id="expenseMixedFields" class="loan-compact-pair" style="display:none">
            <label>💵 Dinero<input id="expenseCashAmount" type="number" min="0" step="0.01" oninput="syncExpenseMixedTotal()"></label>
            <label>📲 PIX<input id="expensePixAmount" type="number" min="0" step="0.01" oninput="syncExpenseMixedTotal()"></label>
          </div>
          <label>Descripción<input id="expenseDescription"></label>
        </div>
        <button class="btn danger" style="margin-top:14px" onclick="saveExpense()">Registrar gasto</button>
        <div id="expenseMessage" class="result"></div>
      </div>
      <div class="card">
        <h3>Historial de gastos</h3>
        <div class="table-wrap"><table>
          <thead><tr><th>Fecha</th><th>Ruta</th><th>Categoría</th><th>Valor</th><th>Método</th><th>Descripción</th></tr></thead>
          <tbody id="expensesTable"></tbody>
        </table></div>
      </div>
    </section>
    <section id="locationsSection" class="section">
      <div class="card">
        <div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap">
          <div>
            <h2 style="margin:0">📍 Ubicaciones</h2>
            <div class="muted">Última ubicación autorizada de clientes, respetando empresa, rutas y permisos.</div>
          </div>
          <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
            <span id="locationsRealtimeBadge" class="status-pill pill-current">Preparado para tiempo real</span>
            <button class="btn" onclick="loadLocations(true)">↻ Actualizar</button>
          </div>
        </div>

        <div class="locations-mode-nav">
          <button id="locationsClientsModeBtn" class="locations-mode-btn active" type="button" onclick="openLocationsMode('clients')">👤 Localización de clientes</button>
          <button id="locationsStaffModeBtn" class="locations-mode-btn" type="button" onclick="openLocationsMode('staff')">🧭 Localización de funcionarios</button>
        </div>

        <div class="locations-toolbar">
          <label>Buscar
            <input id="locationsSearch" placeholder="Nombre o código" oninput="sutilDebounceUi('locations-search',renderLocations,100)">
          </label>
          <div class="locations-filter-field">
            <span class="locations-filter-label">Ruta</span>
            <div class="locations-custom-select" data-location-select="locationsRouteFilter">
              <select id="locationsRouteFilter" class="locations-native-select" onchange="renderLocations();syncLocationCustomSelect('locationsRouteFilter')"><option value="">Todas las rutas</option></select>
              <button id="locationsRouteFilterTrigger" class="locations-select-trigger" type="button" onclick="toggleLocationCustomSelect('locationsRouteFilter',event)">Todas las rutas</button>
              <div id="locationsRouteFilterMenu" class="locations-select-menu"></div>
            </div>
          </div>
          <div class="locations-filter-field">
            <span class="locations-filter-label">Estado</span>
            <div class="locations-custom-select" data-location-select="locationsFreshnessFilter">
              <select id="locationsFreshnessFilter" class="locations-native-select" onchange="renderLocations();syncLocationCustomSelect('locationsFreshnessFilter')">
                <option value="">Todos</option>
                <option value="with">Con ubicación</option>
                <option value="recent">Actualizada ≤ 5 min</option>
                <option value="today">Actualizada hoy</option>
                <option value="old">Ubicación antigua</option>
                <option value="none">Sin ubicación</option>
              </select>
              <button id="locationsFreshnessFilterTrigger" class="locations-select-trigger" type="button" onclick="toggleLocationCustomSelect('locationsFreshnessFilter',event)">Todos</button>
              <div id="locationsFreshnessFilterMenu" class="locations-select-menu"></div>
            </div>
          </div>
          <button class="btn" onclick="clearLocationFilters()">Limpiar filtros</button>
        </div>

      </div>

      <div class="locations-layout">
        <div class="card" style="padding:0;overflow:hidden">
          <div style="padding:13px 14px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:10px;align-items:center">
            <div>
              <strong>Clientes</strong>
              <div id="locationsListCount" class="muted" style="font-size:12px">0 encontrados</div>
            </div>
            <button id="locationsListToggle" class="btn secondary" type="button" onclick="toggleLocationsClientList()">Mostrar lista</button>
          </div>
          <div id="locationsClientsList" class="locations-list" style="display:none"></div>
        </div>

        <div id="locationsMapCard" class="locations-map-card">
          <div class="locations-map-head">
            <div>
              <strong id="locationsSelectedName">Selecciona un cliente</strong>
              <div id="locationsSelectedMeta" class="muted" style="font-size:12px;margin-top:3px">Se mostrará aquí su última ubicación autorizada.</div>
            </div>
            <button id="locationsOpenMapsBtn" class="btn" style="display:none" onclick="openSelectedLocationMaps()">🗺️ Abrir mapa</button>
          </div>
          <div id="locationsMapEmpty" class="locations-map-empty">
            <div><div style="font-size:42px;margin-bottom:8px">📍</div><strong>Sin cliente seleccionado</strong><br><small>Elige un cliente de la lista.</small></div>
          </div>
          <iframe id="locationsMapFrame" class="locations-map-frame" title="Mapa de ubicación del cliente" loading="lazy" referrerpolicy="no-referrer-when-downgrade" style="display:none"></iframe>
          <div class="locations-map-foot">
            <div id="locationsSelectedUpdated" class="locations-live-note">Última actualización: —</div>
            <div class="locations-live-note">Actualización automática cada 10 s mientras este módulo está abierto.</div>
          </div>
        </div>
      </div>

      <div class="locations-metrics">
        <div class="location-metric"><small>Clientes visibles</small><strong id="locationsMetricClients">0</strong></div>
        <div class="location-metric"><small>Con ubicación</small><strong id="locationsMetricWith">0</strong></div>
        <div class="location-metric"><small>Actualizados 24 h</small><strong id="locationsMetric24h">0</strong></div>
        <div class="location-metric"><small>Sin ubicación</small><strong id="locationsMetricWithout">0</strong></div>
      </div>
    </section>
    <section id="reportsSection" class="section">
      <div class="card reports-control-card">
        <div class="reports-control-head">
          <div>
            <h2 class="reports-control-title">📊 Centro de reportes</h2>
            <div class="muted reports-control-subtitle">Información financiera, cartera, rutas, gastos y disponibilidad para tomar decisiones de la empresa.</div>
          </div>
        </div>

        <div class="grid dashboard-kpis report-global-kpis report-global-kpis-top">
          <div class="card dashboard-kpi report-kpi-positive"><span class="dashboard-kpi-label">Total recogido</span><div id="total" class="metric dashboard-kpi-value">R$ 0,00</div></div>
          <div class="card dashboard-kpi report-kpi-positive"><span class="dashboard-kpi-label">Clientes</span><div id="clientsCount" class="metric dashboard-kpi-value">0</div></div>
          <div class="card dashboard-kpi report-kpi-positive"><span class="dashboard-kpi-label">Créditos activos</span><div id="activeLoans" class="metric dashboard-kpi-value">0</div></div>
          <div class="card dashboard-kpi report-kpi-positive" id="interestReceivedKpi"><span class="dashboard-kpi-label">Interés recibido</span><div id="interestReceived" class="metric dashboard-kpi-value">R$ 0,00</div></div>
        </div>

        <div class="reports-filter-grid">
          <label>Desde<input id="reportDateFrom" type="date"></label>
          <label>Hasta<input id="reportDateTo" type="date"></label>
          <label class="reports-route-filter">Ruta<select id="reportRoute"><option value="">Todas las rutas</option></select></label>
          <button class="btn reports-filter-button" type="button" onclick="loadReports()">🔎 Actualizar</button>
          <button class="btn secondary reports-pdf-button" type="button" onclick="downloadCurrentAnalysisPdf()">📄 PDF</button>
        </div>
      </div>

      <div class="card reports-nav-card">
        <div class="reports-nav-head">
          <div>
            <h3 class="reports-nav-title">Áreas de análisis</h3>
            <div class="muted reports-nav-subtitle">Selecciona el reporte que deseas consultar.</div>
          </div>
        </div>
        <div class="reports-nav-grid">
          <div class="module report-nav" data-report-pane="reportOverviewPane" onclick="showReportPane('reportOverviewPane',this)">
            <div class="module-icon">📊</div><div class="module-title">Resumen general</div><small>Indicadores principales</small>
          </div>
          <div class="module report-nav" data-report-pane="reportPortfolioPane" onclick="showReportPane('reportPortfolioPane',this)">
            <div class="module-icon">💼</div><div class="module-title">Cartera</div><small>Créditos y morosidad</small>
          </div>
          <div class="module report-nav" data-report-pane="reportRoutesPane" onclick="showReportPane('reportRoutesPane',this)">
            <div class="module-icon">🗺️</div><div class="module-title">Rutas</div><small>Comparación por ruta</small>
          </div>
          <div class="module report-nav" data-report-pane="reportExpensesPane" onclick="showReportPane('reportExpensesPane',this)">
            <div class="module-icon">📉</div><div class="module-title">Gastos y utilidad</div><small>Rentabilidad real</small>
          </div>
          <div class="module report-nav" data-report-pane="reportCashPane" onclick="showReportPane('reportCashPane',this)">
            <div class="module-icon">💵</div><div class="module-title">Disponibilidad</div><small>Dinero, PIX y retiros</small>
          </div>
          <div class="module report-nav" data-report-pane="reportAnnualPane" onclick="showAnnualReportPane(this)">
            <div class="module-icon">🧮</div><div class="module-title">Resumen anual</div><small>Comparación mes a mes</small>
          </div>
        </div>
      </div>

      <div id="reportsEmptyState" class="card reports-empty-state">
        <div class="icon">📈</div>
        <strong>Selecciona un área de análisis</strong>
        <div class="muted">Los indicadores generales permanecen visibles arriba y aquí aparecerá únicamente el reporte elegido.</div>
      </div>

      <div id="reportOverviewPane" class="report-pane" style="display:none">
        <div id="reportSummary" class="grid report-metric-grid"></div>
        <div class="card report-chart-shell">
          <h3>Evolución mensual</h3>
          <div class="muted">Capital colocado, recaudo y ganancia cobrada.</div>
          <div class="report-chart-toolbar">
            <p class="muted">Vista optimizada para móvil. Usa «Ampliar» para abrir el gráfico en pantalla grande y hacer zoom con los dedos.</p>
            <div class="report-chart-actions">
              <button class="btn secondary" type="button" onclick="openChartZoomModal('monthlyReportChart','Evolución mensual')">🔍 Ampliar</button>
            </div>
          </div>
          <canvas id="monthlyReportChart" width="1200" height="420" style="width:100%;max-height:420px;margin-top:15px"></canvas>
        </div>
        <div class="card">
          <h3>Detalle mensual</h3>
          <div class="table-wrap"><table>
            <thead><tr><th>Mes</th><th>Prestado</th><th>Cobrado</th><th>Ganancia</th><th>Gastos</th><th>Utilidad neta</th><th>Crecimiento</th></tr></thead>
            <tbody id="reportMonthlyTable"></tbody>
          </table></div>
        </div>
      </div>

      <div id="reportPortfolioPane" class="report-pane" style="display:none">
        <div id="reportPortfolioSummary" class="grid report-metric-grid"></div>
        <div class="card">
          <h3>Clientes con mayor recaudo en el período</h3>
          <div class="table-wrap"><table>
            <thead><tr><th>Cliente</th><th>Código</th><th>Ruta</th><th>Cobrado</th><th>Saldo actual</th><th>Estado</th></tr></thead>
            <tbody id="reportTopClientsTable"></tbody>
          </table></div>
        </div>
      </div>

      <div id="reportRoutesPane" class="report-pane" style="display:none">
        <div id="routeReportPrintable">
          <div class="card">
            <h3>Rendimiento por ruta</h3>
            <div id="routeReportContext" class="muted">Compara capital, recaudo, cartera y dinero disponible.</div>
            <div class="report-professional-panel">
              <div class="report-professional-kicker">COMPARACIÓN ENTRE RUTAS</div>
              <div class="route-metric-switch">
                <button class="btn active-route-metric" type="button" data-route-metric="principal" onclick="setRouteReportMetric('principal',this)">Crédito realizado</button>
                <button class="btn secondary" type="button" data-route-metric="collected" onclick="setRouteReportMetric('collected',this)">Cobrado</button>
                <button class="btn secondary" type="button" data-route-metric="portfolio_balance" onclick="setRouteReportMetric('portfolio_balance',this)">Cartera</button>
                <button class="btn secondary" type="button" data-route-metric="net_profit" onclick="setRouteReportMetric('net_profit',this)">Utilidad</button>
              </div>
              <div id="routeMetricSummary" class="route-metric-summary"></div>
              <div class="report-chart-frame"><canvas id="routeReportChart" width="1200" height="460" style="width:100%;max-height:560px"></canvas></div>
              <div id="routeChartCaption" class="report-chart-caption-clean"></div>
            </div>
            <div id="routeReportLegend" class="route-report-legend"></div>
            <div class="report-chart-toolbar">
              <p class="muted route-report-export-note">Cada barra representa una ruta. El número y el color coinciden con la referencia inferior.</p>
              <div class="route-report-actions">
                <button class="btn secondary" type="button" onclick="openChartZoomModal('routeReportChart','Rendimiento por ruta')">🔍 Ampliar</button>
                <button class="btn" type="button" onclick="downloadRouteReportImage()">🖼 Crear imagen</button>
                <button class="btn secondary" type="button" onclick="shareRouteReport()">📤 Compartir</button>
                <button class="btn secondary" type="button" onclick="printRouteReportPdf()">📄 PDF</button>
              </div>
            </div>
            <div class="table-wrap" style="margin-top:18px"><table>
              <thead><tr>
                <th>#</th><th>Ruta</th><th>Prestado</th><th>Cobrado</th><th>Ganancia</th><th>Gastos</th>
                <th>Utilidad</th><th>Cartera</th><th>Mora</th><th>Recaudo</th><th>Disponible</th>
              </tr></thead>
              <tbody id="reportRoutesTable"></tbody>
            </table></div>
          </div>
        </div>
      </div>

      <div id="reportExpensesPane" class="report-pane" style="display:none">
        <div id="reportProfitSummary" class="grid report-metric-grid"></div>
        <div class="card">
          <h3>Gastos por categoría</h3>
          <div class="table-wrap"><table>
            <thead><tr><th>Categoría</th><th>Valor</th><th>Participación</th></tr></thead>
            <tbody id="reportExpensesTable"></tbody>
          </table></div>
        </div>
      </div>

      <div id="reportCashPane" class="report-pane" style="display:none">
        <div id="reportCashSummary" class="grid report-metric-grid"></div>
        <div class="card muted">
          Las transferencias entre rutas solo cambian la ubicación del capital y no alteran la utilidad. Los retiros de ganancia tampoco se registran como gastos.
        </div>
      </div>

      <div id="reportAnnualPane" class="report-pane" style="display:none">
        <div id="annualPrintableReport">
          <div class="card annual-report-header">
            <div>
              <h2 style="margin:0">🧮 Resumen anual</h2>
              <div id="annualReportContext" class="muted">Comparación financiera mes a mes.</div>
            </div>
            <div class="annual-report-actions annual-no-print">
              <label>Año
                <input id="annualReportYear" type="number" min="2000" max="2100" step="1">
              </label>
              <button class="btn" type="button" onclick="loadAnnualReport()">🔎 Consultar</button>
              <div class="annual-export-actions">
                <button class="btn secondary" type="button" onclick="downloadAnnualReportImage()">🖼 Imagen</button>
                <button class="btn secondary" type="button" onclick="shareAnnualReport()">📤 Compartir</button>
                <button class="btn secondary" type="button" onclick="downloadAnnualReportPdf()">📄 PDF</button>
              </div>
            </div>
          </div>

          <div id="annualReportSummary" class="grid report-metric-grid"></div>

          <div class="card annual-no-print report-chart-shell">
            <div class="annual-chart-toolbar">
              <div class="annual-chart-mode">
                <button id="annualLineButton" class="btn secondary annual-mode-active" type="button" onclick="setAnnualChartMode('line')">〽️ Línea</button>
                <button id="annualBarButton" class="btn secondary" type="button" onclick="setAnnualChartMode('bar')">▥ Columnas</button>
              </div>
              <div id="annualMetricButtons" class="annual-metric-buttons">
                <button class="btn annual-metric-active" type="button" data-annual-metric="principal" onclick="setAnnualMetric('principal',this)">Crédito realizado</button>
                <button class="btn" type="button" data-annual-metric="collected" onclick="setAnnualMetric('collected',this)">Cobrado</button>
                <button class="btn" type="button" data-annual-metric="interest_collected" onclick="setAnnualMetric('interest_collected',this)">Ganancia</button>
                <button class="btn" type="button" data-annual-metric="expenses" onclick="setAnnualMetric('expenses',this)">Gastos</button>
                <button class="btn" type="button" data-annual-metric="net_profit" onclick="setAnnualMetric('net_profit',this)">Utilidad</button>
                <button class="btn" type="button" data-annual-metric="pending_due" onclick="setAnnualMetric('pending_due',this)">Por cobrar</button>
                <button class="btn" type="button" data-annual-metric="overdue_due" onclick="setAnnualMetric('overdue_due',this)">Vencido</button>
              </div>
            </div>
            <div id="annualMetricSummary" class="annual-metric-summary"></div>
            <div class="report-chart-toolbar"><p class="muted">Una métrica a la vez para comparar los meses sin saturar el gráfico.</p><div class="report-chart-actions"><button class="btn secondary" type="button" onclick="openChartZoomModal('annualReportChart','Resumen anual')">🔍 Ampliar</button></div></div>
            <div class="report-chart-frame"><canvas id="annualReportChart" width="1200" height="440" style="width:100%;max-height:440px"></canvas></div>
          </div>

          <div id="annualReportMonths" class="annual-month-grid"></div>
          <div id="annualReportNote" class="card muted"></div>
        </div>
      </div>

      <div id="reportChartZoomModal" class="chart-zoom-modal" aria-hidden="true">
        <div class="chart-zoom-card">
          <div class="chart-zoom-header">
            <div class="chart-zoom-title-wrap">
              <h3 id="reportChartZoomTitle" class="chart-zoom-title">Gráfico ampliado</h3>
              <div class="chart-zoom-sub">Separa o junta dos dedos para acercar o alejar. Arrastra para mover el gráfico ampliado.</div>
            </div>
            <div class="chart-zoom-actions">
              <button class="btn secondary" type="button" onclick="zoomChartModalBy(1.2)">＋</button>
              <button class="btn secondary" type="button" onclick="zoomChartModalBy(1/1.2)">－</button>
              <button class="btn secondary" type="button" onclick="resetChartZoomModal()">↺ Restablecer</button>
              <button class="btn" type="button" onclick="closeChartZoomModal()">✕ Cerrar</button>
            </div>
          </div>
          <div id="reportChartZoomViewport" class="chart-zoom-viewport">
            <div id="reportChartZoomInner" class="chart-zoom-inner">
              <img id="reportChartZoomImage" class="chart-zoom-image" alt="Gráfico ampliado">
            </div>
          </div>
          <div class="chart-zoom-footer">Consejo: también puedes tocar «Crear imagen» o «PDF» para guardar el reporte actual.</div>
        </div>
      </div>
      <div id="reportNote" class="card muted"></div>
    </section>

    <section id="forgottenOperationSection" class="section">
      <div class="card">
        <h2 style="margin:0">🛠️ Registrar operación olvidada</h2>
        <div class="forgotten-banner" style="margin-top:12px">
          <strong>Solo para una operación que realmente ocurrió después del inicio operativo y no fue registrada.</strong>
          Se conserva la fecha real, pero el impacto de dinero se aplica a la caja abierta actual. No se reabren ni se modifican cajas cerradas anteriores.
        </div>
        <div class="card" style="margin-top:12px;padding:14px">
          <strong>Regla sencilla</strong>
          <div class="muted" style="margin-top:6px">Si ocurrió <strong>antes</strong> del inicio operativo → usa Migración / histórico.</div>
          <div class="muted" style="margin-top:6px">Si ocurrió <strong>después</strong> del inicio operativo pero se olvidó registrar → usa esta opción.</div>
          <div class="muted" style="margin-top:6px">Debe existir una <strong>caja operativa abierta actualmente</strong> en la ruta para aplicar la corrección.</div>
        </div>
        <div class="module-grid" style="margin-top:16px">
          <div class="module" onclick="forgottenOperationGo('loansSection')">
            <div class="module-icon">💰</div><div class="module-title">Crédito olvidado</div>
            <small>Conserva fecha real y descuenta la caja abierta actual</small>
          </div>
          <div class="module" onclick="forgottenOperationGo('collectionsSection')">
            <div class="module-icon">🧾</div><div class="module-title">Cobro olvidado</div>
            <small>Actualiza deuda y suma a la caja abierta actual</small>
          </div>
          <div class="module" onclick="forgottenOperationGo('expensesSection')">
            <div class="module-icon">📉</div><div class="module-title">Gasto olvidado</div>
            <small>Conserva fecha real y descuenta la caja abierta actual</small>
          </div>
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:14px">
          <button class="btn secondary" type="button" onclick="openHistoricalMode()">📦 Ir a Migración / histórico</button>
          <button class="btn secondary" type="button" onclick="exitForgottenOperationMode()">← Salir</button>
        </div>
      </div>
    </section>

    <section id="historicalSection" class="section">
      <div class="card">
        <h2 style="margin:0">📦 ¿Cómo vas a comenzar?</h2>
        <div class="historical-banner" style="margin-top:12px">
          <strong>Elige la forma más sencilla para tu empresa.</strong>
          La información anterior queda como historial y no altera la caja actual.
          Al terminar, solo indicas cuánto dinero tiene disponible cada ruta para empezar a trabajar.
        </div>

        <div class="module-grid" style="margin-top:16px">
          <div class="module" onclick="showHistoricalHubPanel('import')">
            <div class="module-icon">📥</div><div class="module-title">Tengo archivos</div>
            <small>Importar backup, Excel/CSV o paquete histórico</small>
          </div>
          <div class="module" onclick="showHistoricalHubPanel('complete')">
            <div class="module-icon">✍️</div><div class="module-title">Ingresar historial manualmente</div>
            <small>Cliente por cliente, crédito por crédito, cobro y gasto</small>
          </div>
          <div class="module" onclick="showHistoricalHubPanel('start')">
            <div class="module-icon">🚀</div><div class="module-title">Comenzar a trabajar</div>
            <small>Empresa nueva o histórico ya terminado</small>
          </div>
        </div>

        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:14px">
          <button class="btn secondary" type="button" onclick="showHistoricalHubPanel('review')">🔎 Revisar historial</button>
          <button class="btn secondary" type="button" onclick="openForgottenOperationMode()">🛠️ Operación olvidada</button>
          <button class="btn secondary" type="button" onclick="exitHistoricalMode()">← Salir</button>
        </div>
      </div>

      <div id="historicalImportHub" class="card" style="display:none">
        <div style="display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap">
          <div>
            <h3 style="margin:0">📥 Importar información</h3>
            <div class="muted" style="margin-top:5px">Elige cómo vas a traer la información del sistema anterior.</div>
          </div>
          <button class="btn secondary" type="button" onclick="hideHistoricalHubPanels()">✕ Cerrar</button>
        </div>
        <div class="module-grid" style="margin-top:14px">
          <div class="module" onclick="openLegacyBackupPreview()">
            <div class="module-icon">🗄️</div><div class="module-title">Backup completo ZIP</div>
            <small>Clientes, créditos, cuotas, pagos y gastos</small>
          </div>
          <div class="module" onclick="openHistoricalClientImport()">
            <div class="module-icon">📄</div><div class="module-title">Excel / CSV de clientes</div>
            <small>Importar clientes con mapeo de columnas</small>
          </div>
          <div class="module" onclick="openHistoricalPackageImport()">
            <div class="module-icon">🗂️</div><div class="module-title">Paquete histórico XLSX</div>
            <small>Usar el consolidado histórico preparado</small>
          </div>
        </div>
      </div>

      <div id="historicalCompleteHub" class="card" style="display:none">
        <div style="display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap">
          <div>
            <h3 style="margin:0">✍️ Ingresar historial manualmente</h3>
            <div class="muted" style="margin-top:5px">Para empresas que no tienen archivo de migración o prefieren cargar su cartera una por una.</div>
          </div>
          <button class="btn secondary" type="button" onclick="hideHistoricalHubPanels()">✕ Cerrar</button>
        </div>

        <div class="card" style="margin:14px 0 0;padding:14px">
          <strong>Orden recomendado</strong>
          <div class="muted" style="margin-top:6px">1. Cliente → 2. Crédito → 3. Cobros ya realizados → 4. Gastos anteriores.</div>
          <div class="muted" style="margin-top:6px"><strong>Importante:</strong> estos registros conservan su fecha real, pero no modifican la caja operativa actual.</div>
          <div class="muted" style="margin-top:6px"><strong>No necesitas abrir caja</strong> para ingresar clientes, créditos, cobros o gastos históricos.</div>
        </div>

        <div class="module-grid" style="margin-top:14px">
          <div class="module" onclick="historicalGo('newClientSection')">
            <div class="module-icon">1️⃣</div><div class="module-title">Registrar cliente</div>
            <small>Datos personales, ruta y contacto</small>
          </div>
          <div class="module" onclick="historicalGo('loansSection')">
            <div class="module-icon">2️⃣</div><div class="module-title">Registrar crédito</div>
            <small>Valor, fecha real, interés y cuotas originales</small>
          </div>
          <div class="module" onclick="historicalGo('collectionsSection')">
            <div class="module-icon">3️⃣</div><div class="module-title">Registrar cobros anteriores</div>
            <small>Pagos o abonos ya recibidos</small>
          </div>
          <div class="module" onclick="historicalGo('expensesSection')">
            <div class="module-icon">4️⃣</div><div class="module-title">Registrar gastos anteriores</div>
            <small>Gastos con su fecha real</small>
          </div>
        </div>

        <div style="display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:14px">
          <button class="btn secondary" type="button" onclick="showHistoricalHubPanel('review')">🔎 Revisar lo ingresado</button>
          <button class="btn success" type="button" onclick="showHistoricalHubPanel('start')">✅ Terminé · Comenzar a trabajar</button>
        </div>
      </div>

      <div id="historicalStartHub" class="card" style="display:none">
        <div style="display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap">
          <div>
            <h3 style="margin:0">✅ Comenzar a trabajar en Sutil</h3>
            <div class="muted" style="margin-top:5px">No necesitas calcular una caja antigua. Para cada ruta indica cuánto dinero tienes disponible al comenzar.</div>
          </div>
          <button class="btn secondary" type="button" onclick="hideHistoricalHubPanels()">✕ Cerrar</button>
        </div>
        <div class="card" style="margin:14px 0 0;padding:14px">
          <strong>Por cada ruta vas a definir únicamente:</strong>
          <div class="muted" style="margin-top:7px">Fecha de inicio en Sutil · Efectivo disponible · PIX / saldo electrónico disponible.</div>
          <div class="muted" style="margin-top:7px">Todo lo anterior queda como historial. Solo las operaciones nuevas posteriores afectan la caja.</div>
          <button class="btn success" type="button" style="margin-top:12px" onclick="openMigrationStartRoutes()">💰 Configurar saldo de inicio por ruta</button>
        </div>
      </div>

      <div id="historicalReviewHub" class="card" style="display:none">
        <div style="display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap">
          <div>
            <h3 style="margin:0">🔎 Revisar historial</h3>
            <div class="muted" style="margin-top:5px">Comprueba la información importada o ingresada manualmente antes de iniciar la operación.</div>
          </div>
          <button class="btn secondary" type="button" onclick="hideHistoricalHubPanels()">✕ Cerrar</button>
        </div>
        <div class="module-grid" style="margin-top:14px">
          <div class="module" onclick="historicalGo('clientsSection')">
            <div class="module-icon">👥</div><div class="module-title">Clientes</div>
            <small>Ver clientes registrados</small>
          </div>
          <div class="module" onclick="historicalGo('loansSection')">
            <div class="module-icon">💰</div><div class="module-title">Créditos</div>
            <small>Revisar créditos y cuotas</small>
          </div>
          <div class="module" onclick="historicalGo('collectionsSection')">
            <div class="module-icon">🧾</div><div class="module-title">Cobros</div>
            <small>Revisar pagos registrados</small>
          </div>
          <div class="module" onclick="historicalGo('expensesSection')">
            <div class="module-icon">📉</div><div class="module-title">Gastos</div>
            <small>Revisar gastos importados</small>
          </div>
        </div>
      </div>
    </section>


    <section id="historicalPackageSection" class="section">
      <div class="card">
        <h2 style="margin:0">🗂️ Importar paquete histórico 2025–2026</h2>
        <div class="muted" style="margin-top:6px">
          Usa el consolidado Sutil_Migracion_2025-01-01_a_2026-08-08.xlsx.
          Primero se analiza; después decides qué grupos importar.
        </div>
        <div class="import-warning">
          Los créditos del reporte antiguo se guardan como historial legacy. No se crean cuotas,
          intereses ni capitales ficticios y esta importación no modifica la caja actual.
        </div>
        <div class="form-grid">
          <label>Archivo consolidado XLSX
            <input id="historicalPackageFile" type="file" accept=".xlsx">
          </label>
          <label>Ruta predeterminada para gastos sin ruta
            <select id="historicalPackageDefaultRoute"><option value="">Sin ruta predeterminada</option></select>
          </label>
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:14px">
          <button class="btn" type="button" onclick="analyzeHistoricalPackage()">🔎 Analizar paquete</button>
          <button class="btn secondary" type="button" onclick="openSection('historicalSection')">← Volver</button>
        </div>
        <div id="historicalPackageMessage" class="result"></div>
        <div id="historicalPackageProgress" class="historical-package-progress" aria-live="polite">
          <div class="historical-package-progress-head">
            <span id="historicalPackageProgressText">Preparando análisis...</span>
            <span id="historicalPackageProgressPercent">0%</span>
          </div>
          <div class="historical-package-progress-track">
            <div id="historicalPackageProgressBar" class="historical-package-progress-bar"></div>
          </div>
        </div>
      </div>
      <div id="historicalPackagePreview" class="card" style="display:none">
        <h3>Vista previa segura</h3>
        <div id="historicalPackageStats" class="import-stat-grid"></div>
        <div class="grid" style="margin-top:12px">
          <label class="inline-check"><input id="historicalPackagePayments" type="checkbox" checked> Importar pagos históricos</label>
          <label class="inline-check"><input id="historicalPackageExpenses" type="checkbox" checked> Importar gastos históricos</label>
          <label class="inline-check"><input id="historicalPackageLoans" type="checkbox" checked> Importar créditos como historial legacy</label>
        </div>
        <button id="historicalPackageExecute" class="btn success" style="margin-top:14px" type="button" onclick="executeHistoricalPackage()">Importar paquete</button>
        <div id="historicalPackageExecuteMessage" class="result"></div>
      </div>
    </section>

    <section id="legacyBackupPreviewSection" class="section">
      <div class="card">
        <h2 style="margin:0">🗄️ Analizar backup histórico completo</h2>
        <div class="muted" style="margin-top:6px">
          Selecciona el ZIP original del sistema anterior. Esta etapa es solo de análisis:
          no importa datos y no modifica la caja ni la base actual.
        </div>
        <div class="import-warning">
          Sutil comprobará la estructura y las relaciones internas por UID:
          cliente → crédito → cuota → pago. Después revisaremos el resultado antes de habilitar la importación.
        </div>
        <div class="form-grid">
          <label>Backup original ZIP
            <input id="legacyBackupFile" type="file" accept=".zip">
          </label>
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:14px">
          <button id="legacyBackupAnalyzeButton" class="btn" type="button" onclick="analyzeLegacyBackup()">🔎 Analizar backup</button>
          <button class="btn secondary" type="button" onclick="openSection('historicalSection')">← Volver</button>
        </div>
        <div id="legacyBackupMessage" class="result"></div>
        <div id="legacyBackupProgress" class="historical-package-progress" aria-live="polite">
          <div class="historical-package-progress-head">
            <span id="legacyBackupProgressText">Preparando análisis...</span>
            <span id="legacyBackupProgressPercent">0%</span>
          </div>
          <div class="historical-package-progress-track">
            <div id="legacyBackupProgressBar" class="historical-package-progress-bar"></div>
          </div>
        </div>
      </div>

      <div id="legacyBackupPreviewCard" class="card" style="display:none">
        <h3>Vista previa del backup</h3>
        <div id="legacyBackupStats" class="import-stat-grid"></div>
        <div id="legacyBackupSafety" class="import-warning"></div>

        <div id="legacyBackupStages" style="display:none">
          <h3 style="margin-top:18px">Importación segura por etapas</h3>
          <div class="muted">
            Ejecuta las etapas en orden. Cada una tiene control de duplicados y ninguna modifica la caja actual.
          </div>

          <div class="grid" style="margin-top:12px">
            <div class="import-stat">
              <strong style="font-size:16px">1. Rutas y clientes</strong>
              <small>Relaciona el UID del cliente y reutiliza rutas existentes cuando coinciden.</small>
              <button id="legacyStageClientsBtn" class="btn success" style="margin-top:10px" type="button" onclick="runLegacyBackupStage('clients')">Importar etapa 1</button>
              <div id="legacyStageClientsProgress" class="historical-package-progress" aria-live="polite" style="margin-top:10px">
                <div class="historical-package-progress-head">
                  <span id="legacyStageClientsProgressText">Esperando etapa 1...</span>
                  <span id="legacyStageClientsProgressPercent">0%</span>
                </div>
                <div class="historical-package-progress-track">
                  <div id="legacyStageClientsProgressBar" class="historical-package-progress-bar"></div>
                </div>
                <small id="legacyStageClientsProgressCount" style="display:block;margin-top:6px">0 / 0 registros</small>
              </div>
            </div>
            <div class="import-stat">
              <strong style="font-size:16px">2. Créditos y cuotas</strong>
              <small>Conserva fecha real, primera cuota y cronograma original. Casos insuficientes quedan como snapshot.</small>
              <button id="legacyStageLoansBtn" class="btn success" style="margin-top:10px" type="button" onclick="runLegacyBackupStage('loans')" disabled>Importar etapa 2</button>
              <div id="legacyStageLoansProgress" class="historical-package-progress" aria-live="polite" style="margin-top:10px">
                <div class="historical-package-progress-head">
                  <span id="legacyStageLoansProgressText">Esperando etapa 2...</span>
                  <span id="legacyStageLoansProgressPercent">0%</span>
                </div>
                <div class="historical-package-progress-track">
                  <div id="legacyStageLoansProgressBar" class="historical-package-progress-bar"></div>
                </div>
                <small id="legacyStageLoansProgressCount" style="display:block;margin-top:6px">0 / 0 registros</small>
              </div>
            </div>
            <div class="import-stat">
              <strong style="font-size:16px">3. Pagos históricos</strong>
              <small>Relaciona cada pago con cliente y crédito mediante los UID del backup.</small>
              <button id="legacyStagePaymentsBtn" class="btn success" style="margin-top:10px" type="button" onclick="runLegacyBackupStage('payments')" disabled>Importar etapa 3</button>
              <div id="legacyStagePaymentsProgress" class="historical-package-progress" aria-live="polite" style="margin-top:10px">
                <div class="historical-package-progress-head">
                  <span id="legacyStagePaymentsProgressText">Esperando etapa 3...</span>
                  <span id="legacyStagePaymentsProgressPercent">0%</span>
                </div>
                <div class="historical-package-progress-track">
                  <div id="legacyStagePaymentsProgressBar" class="historical-package-progress-bar"></div>
                </div>
                <small id="legacyStagePaymentsProgressCount" style="display:block;margin-top:6px">0 / 0 registros</small>
              </div>
            </div>
            <div class="import-stat">
              <strong style="font-size:16px">4. Gastos históricos</strong>
              <small>El backup no trae ruta por gasto. Elige una ruta antes de esta etapa.</small>
              <label style="display:block;margin-top:8px">Ruta para los gastos
                <select id="legacyExpenseRoute">
                  <option value="">Selecciona una ruta</option>
                </select>
              </label>
              <button id="legacyStageExpensesBtn" class="btn success" style="margin-top:10px" type="button" onclick="runLegacyBackupStage('expenses')" disabled>Importar etapa 4</button>
              <div id="legacyStageExpensesProgress" class="historical-package-progress" aria-live="polite" style="margin-top:10px">
                <div class="historical-package-progress-head">
                  <span id="legacyStageExpensesProgressText">Esperando etapa 4...</span>
                  <span id="legacyStageExpensesProgressPercent">0%</span>
                </div>
                <div class="historical-package-progress-track">
                  <div id="legacyStageExpensesProgressBar" class="historical-package-progress-bar"></div>
                </div>
                <small id="legacyStageExpensesProgressCount" style="display:block;margin-top:6px">0 / 0 registros</small>
              </div>
            </div>
          </div>
          <div id="legacyBackupStageMessage" class="result"></div>
        </div>
      </div>
    </section>

    <section id="historicalImportClientsSection" class="section">
      <div class="card">
        <h2 style="margin:0">📥 Importar clientes históricos</h2>
        <div class="muted" style="margin-top:6px">
          Sutil puede leer XLS antiguo, XLSX y CSV. Primero analiza el archivo;
          después puedes revisar dónde irá cada columna antes de importar.
        </div>
        <div class="import-warning">
          <strong>Importante:</strong> en archivos antiguos una misma columna puede
          mezclar apellido, CPF/documento, código o notas. La opción
          <strong>“Inteligente: apellido / documento / código”</strong> clasifica
          cada fila individualmente.
        </div>
        <div class="form-grid">
          <label>Archivo de clientes
            <input id="historicalClientFile" type="file" accept=".xls,.xlsx,.csv">
          </label>
          <label>Ruta predeterminada
            <select id="historicalImportDefaultRoute">
              <option value="">Sin ruta predeterminada</option>
            </select>
          </label>
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:14px">
          <button class="btn" type="button" onclick="analyzeHistoricalClientFile()">🔎 Analizar archivo</button>
          <button class="btn secondary" type="button" onclick="openSection('historicalSection')">← Volver a carga histórica</button>
        </div>
        <div id="historicalImportAnalyzeMessage" class="result"></div>
      </div>


      <div class="card" style="border:1px solid #efb8b3">
        <h3 style="margin-top:0;color:#9c2018">🗑️ Eliminar importación anterior de clientes</h3>
        <div class="muted">
          Esta herramienta busca únicamente clientes creados mediante este módulo de
          <strong>Importar clientes</strong>. Los clientes que ya existían antes y fueron
          omitidos como duplicados no se eliminan. Si un cliente importado ya tiene créditos,
          pagos, comprobantes, mensajes u otros movimientos, queda protegido.
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:14px">
          <button class="btn danger" type="button" onclick="previewHistoricalClientRollback()">🔎 Revisar importación anterior</button>
          <button id="historicalClientRollbackExecuteButton" class="btn danger" type="button" style="display:none" onclick="executeHistoricalClientRollback()">🗑️ Eliminar clientes importados</button>
        </div>
        <div id="historicalClientRollbackMessage" class="result"></div>
      </div>

      <div id="historicalImportMappingCard" class="card" style="display:none">
        <h3>1. Revisar columnas</h3>
        <div class="muted">
          Sutil ya propone dónde va cada columna. Cambia cualquier selección que no corresponda.
        </div>
        <div id="historicalImportStats" class="import-stat-grid"></div>
        <div id="historicalImportMapping" class="import-map-grid" style="margin-top:14px"></div>
      </div>

      <div id="historicalImportRoutesCard" class="card" style="display:none">
        <h3>2. Rutas detectadas</h3>
        <div class="muted">
          Si el sistema antiguo dejó códigos de ruta dentro del nombre, Sutil los detecta.
          Relaciona cada código con una ruta actual o déjalo sin asignar.
        </div>
        <div id="historicalImportRouteMap" style="margin-top:12px"></div>
      </div>

      <div id="historicalImportPreviewCard" class="card" style="display:none">
        <h3>3. Vista previa</h3>
        <div class="muted">Primeras filas interpretadas automáticamente.</div>
        <div class="table-wrap" style="margin-top:12px">
          <table class="import-preview-table">
            <thead>
              <tr><th>Fila</th><th>Nombre interpretado</th><th>Documento</th><th>Teléfono</th><th>Dirección</th><th>Ciudad</th><th>Ruta detectada</th><th>Notas</th></tr>
            </thead>
            <tbody id="historicalImportPreviewTable"></tbody>
          </table>
        </div>
        <div style="margin-top:14px">
          <button id="historicalImportExecuteButton" class="btn success" type="button" onclick="executeHistoricalClientImport()">✅ Importar clientes</button>
        </div>
        <div id="historicalImportExecuteMessage" class="result"></div>
      </div>
    </section>

    
<section id="collectionMethodsSection" class="section">
  <div class="card">
    <div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap">
      <div>
        <h2 style="margin:0">💳 Métodos de cobro</h2>
        <div class="muted" style="margin-top:5px">Registra llaves, cuentas, códigos copia/pega y QR. Luego asigna una cuenta a cada ruta y, solo si hace falta, una excepción por cliente.</div>
      </div>
      <button class="btn secondary" type="button" onclick="loadCollectionAccounts()">↻ Actualizar</button>
    </div>
    <div class="info-banner" style="margin-top:12px">
      <strong>Prioridad automática:</strong> cuenta específica del cliente → cuenta de la ruta → cuenta predeterminada de la empresa para ese país.
    </div>
  </div>

  <div class="card">
    <h3 id="collectionAccountFormTitle" style="margin-top:0">Registrar método de cobro</h3>
    <div class="form-grid">
      <label>País
        <select id="collectionAccountCountry" onchange="syncCollectionProviderOptions()">
          <option value="BR">🇧🇷 Brasil</option><option value="CO">🇨🇴 Colombia</option><option value="PE">🇵🇪 Perú</option>
          <option value="MX">🇲🇽 México</option><option value="AR">🇦🇷 Argentina</option><option value="CR">🇨🇷 Costa Rica</option>
          <option value="PY">🇵🇾 Paraguay</option><option value="CL">🇨🇱 Chile</option><option value="EC">🇪🇨 Ecuador</option>
          <option value="UY">🇺🇾 Uruguay</option><option value="US">🇺🇸 Estados Unidos</option><option value="ES">🇪🇸 España</option>
          <option value="OTHER">🌎 Otro</option>
        </select>
      </label>
      <label>Medio de cobro<select id="collectionAccountProvider" onchange="syncCollectionProviderFields()"></select></label>
      <label>Nombre para identificar la cuenta<input id="collectionAccountName" placeholder="Ej. PIX Ruta Centro"></label>
      <label>Moneda<input id="collectionAccountCurrency" maxlength="10" placeholder="BRL, COP, PEN..."></label>
      <label>Tipo de identificador<select id="collectionAccountIdentifierType"></select></label>
      <label>Llave / teléfono / cuenta / alias<input id="collectionAccountIdentifier" placeholder="Dato que verá el cliente"></label>
      <label>Titular<input id="collectionAccountHolder" placeholder="Nombre del titular"></label>
      <label>Banco / entidad<input id="collectionAccountBank" placeholder="Opcional"></label>
      <label style="grid-column:1/-1">Referencia adicional<input id="collectionAccountReference" placeholder="Agencia, tipo de cuenta, CLABE, CBU/CVU, IBAN u otra referencia"></label>
      <label style="grid-column:1/-1">Código copia y pega / payload QR<textarea id="collectionAccountCopyCode" style="width:100%;min-height:78px" placeholder="Pix Copia e Cola, código interoperable u otro texto copiable"></textarea></label>
      <label style="grid-column:1/-1">Instrucciones para el cliente<textarea id="collectionAccountInstructions" style="width:100%;min-height:70px" placeholder="Ej. Pague usando esta llave y adjunte el comprobante"></textarea></label>
      <label>Imagen QR (JPG, PNG o WEBP)<input id="collectionAccountQrFile" type="file" accept="image/jpeg,image/png,image/webp"></label>
      <label class="inline-check"><input id="collectionAccountActive" type="checkbox" checked> Cuenta activa</label>
      <label class="inline-check"><input id="collectionAccountDefault" type="checkbox"> Predeterminada para este país</label>
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:14px">
      <button class="btn success" type="button" onclick="saveCollectionAccount()">💾 Guardar</button>
      <button class="btn secondary" type="button" onclick="resetCollectionAccountForm()">Nueva / cancelar edición</button>
    </div>
    <div id="collectionAccountMessage" class="result"></div>
  </div>

  <div class="card">
    <h3>Cuentas registradas</h3>
    <div id="collectionAccountsList" class="payments-list"><div class="muted">Cargando...</div></div>
  </div>
</section>


<section id="sutilSupportSection" class="section">
  <div class="card">
    <div class="sutil-support-head">
      <div>
        <h2 style="margin:0">💬 Soporte Sutil</h2>
        <div class="muted" style="margin-top:5px">Ayuda directa con Sutil, renovación de membresía y aumento de rutas.</div>
      </div>
      <button class="btn secondary" type="button" onclick="loadSutilSupport()">↻ Actualizar</button>
    </div>
    <div id="sutilSupportSummary" class="sutil-support-summary"></div>
  </div>

  <div id="sutilSupportLauncher" class="sutil-support-launcher">
    <button class="sutil-support-launch-btn" type="button" onclick="openSutilSupportView('membership')"><strong>💳 Membresía y rutas</strong><small>Renovar membresía, medios de pago, aumentar rutas y revisar solicitudes.</small></button>
    <button class="sutil-support-launch-btn" type="button" onclick="openSutilSupportView('assistant')"><strong>🤖 Asistente Sutil</strong><small>Preguntar, navegar por funciones, resolver problemas y contactar soporte humano.</small></button>
  </div>

  <div class="sutil-support-grid">
    <div id="sutilSupportMembershipView" class="sutil-support-view" hidden>
      <button class="btn secondary sutil-support-back" type="button" onclick="showSutilSupportLauncher()">← Volver a Soporte</button>
      <div class="sutil-support-card">
        <h3 style="margin-top:0">💳 Membresía y rutas</h3>
        <div id="sutilCommercialPlans" class="card" style="margin:0 0 14px;padding:14px">
          <div style="display:flex;justify-content:space-between;gap:10px;align-items:flex-start;flex-wrap:wrap">
            <div><strong style="font-size:18px">Planes Sutil</strong><div class="muted" style="margin-top:5px">Selecciona el plan que deseas renovar o contratar. Clientes ilimitados en todos los planes.</div></div>
            <span class="status-pill pill-current" id="sutilCurrentPlanBadge">Plan actual: —</span>
          </div>
          <div id="sutilPlanSelector" class="sutil-plan-selector">
            <button class="sutil-plan-choice" type="button" data-plan="monthly_1" onclick="selectSutilMembershipPlan('monthly_1')"><b>Plan 1 · Mensual</b><strong>R$ 60</strong><small>1 ruta · 1 ADM · 1 cobrador<br>30 días</small></button>
            <button class="sutil-plan-choice" type="button" data-plan="monthly_4" onclick="selectSutilMembershipPlan('monthly_4')"><b>Plan 2 · Mensual</b><strong>R$ 120</strong><small>4 rutas · 2 ADM · 4 cobradores<br>30 días</small></button>
            <button class="sutil-plan-choice" type="button" data-plan="semiannual_2" onclick="selectSutilMembershipPlan('semiannual_2')"><b>Plan 3 · Semestral</b><strong>R$ 500</strong><small>2 rutas · 1 ADM · 2 cobradores<br>180 días</small></button>
            <button class="sutil-plan-choice recommended" type="button" data-plan="semiannual_6" onclick="selectSutilMembershipPlan('semiannual_6')"><b>Plan 4 · Semestral Pro</b><strong>R$ 600</strong><small>6 rutas · 4 ADM · 6 cobradores<br>180 días</small></button>
            <button class="sutil-plan-choice" type="button" data-plan="annual_10" onclick="selectSutilMembershipPlan('annual_10')"><b>Plan 5 · Anual</b><strong>R$ 900</strong><small>10 rutas · 5 ADM · 10 cobradores<br>365 días</small></button>
          </div>
          <div id="sutilPlanQuote" class="sutil-plan-quote"></div>
          <div class="muted" style="margin-top:12px">Si cambias de plan antes del vencimiento, Sutil convierte el tiempo pagado que no utilizaste en crédito proporcional. Si renuevas el mismo plan, el nuevo período se agrega después del vencimiento actual.</div>
          <div class="muted" style="margin-top:6px">Adicional mensual: ruta + cobrador R$30; ADM R$20. En planes semestrales/anual: ruta + cobrador R$20/mes; ADM R$20/mes.</div>
        </div>
        <div id="sutilMembershipMethods" class="muted">Cargando medios de pago...</div>

        <div style="margin-top:16px;border-top:1px solid #e7ecef;padding-top:14px">
          <h4 style="margin:0 0 5px">Renovar o cambiar plan</h4>
          <div class="muted" style="margin-bottom:10px">Primero selecciona una tarjeta de plan arriba. Verás el cálculo antes de enviar la solicitud.</div>
          <input id="sutilRenewalPlan" type="hidden" value="">
          <div class="sutil-support-request-form">
            <label>Medio de pago
              <select id="sutilRenewalMethod"></select>
            </label>
            <label style="grid-column:1/-1">Observación
              <textarea id="sutilRenewalNote" placeholder="Opcional"></textarea>
            </label>
          </div>
          <button id="sutilRenewalSubmit" class="btn success" type="button" onclick="openSutilRenewalModalSafe(event)" style="margin-top:10px" disabled>Solicitar renovación o cambio de plan</button>
        </div>

        <div style="margin-top:16px;border-top:1px solid #e7ecef;padding-top:14px">
          <h4 style="margin:0 0 10px">Aumentar rutas</h4>
          <div class="sutil-support-request-form">
            <label>Rutas adicionales
              <input id="sutilExtraRoutes" type="number" min="1" value="1">
            </label>
            <label>Medio de pago preferido
              <select id="sutilRoutesMethod"></select>
            </label>
            <label style="grid-column:1/-1">Observación
              <textarea id="sutilRoutesNote" placeholder="Ej.: necesito habilitar dos rutas nuevas en Goiânia"></textarea>
            </label>
          </div>
          <button class="btn" type="button" onclick="createSutilRoutesRequest()" style="margin-top:10px">Solicitar aumento de rutas</button>
        </div>
      </div>

      <div class="sutil-support-card" style="margin-top:14px">
        <h3 style="margin-top:0">📋 Mis solicitudes</h3>
        <div id="sutilSupportRequests" class="sutil-support-requests-list"></div>
      </div>

    </div>

    <div id="sutilSupportAssistantView" class="sutil-support-view" hidden>
      <button class="btn secondary sutil-support-back" type="button" onclick="showSutilSupportLauncher()">← Volver a Soporte</button>
      <div class="sutil-support-card sutil-ai-card">
        <div class="sutil-ai-head">
          <div><strong>🤖 Asistente Sutil</strong><div class="muted" style="font-size:11px">Pregunta sobre cualquier función, duda o problema. Si hace falta, te pasa a soporte humano.</div></div>
          <span id="sutilAiStatus" class="sutil-ai-status">IA</span>
        </div>
        <div class="sutil-ai-quick">
<button type="button" onclick="showSutilGuide('Clientes')">👥 Clientes</button><button type="button" onclick="showSutilGuide('Créditos y cuotas')">💵 Créditos</button><button type="button" onclick="showSutilGuide('Cobros y PIX')">💰 Cobros / PIX</button><button type="button" onclick="showSutilGuide('Caja diaria')">📦 Caja</button><button type="button" onclick="showSutilGuide('Personal y permisos')">👤 Personal</button><button type="button" onclick="showSutilGuide('Transición histórica')">🗂 Migración</button><button type="button" onclick="showSutilGuide('Reportes')">📊 Reportes</button><button type="button" onclick="showSutilGuide('Problemas técnicos')">🛠 Problema técnico</button><button type="button" onclick="askSutilAiQuick('Quiero renovar mi membresía')">💳 Renovar</button><button type="button" onclick="askSutilAiQuick('Quiero aumentar las rutas contratadas')">➕ Rutas</button>
</div><div id="sutilGuideChoices" class="sutil-ai-actions"></div>
        <div id="sutilAiMessages" class="sutil-ai-messages"><div class="muted">Escribe una pregunta para comenzar.</div></div>
        <div class="sutil-ai-compose">
          <textarea id="sutilAiText" placeholder="Ej.: Subí el archivo histórico dos veces, ¿qué debo hacer?" onkeydown="if(event.key==='Enter'&&!event.shiftKey){event.preventDefault();sendSutilAiMessage();}"></textarea>
          <button id="sutilAiSendButton" class="btn success" type="button" onclick="sendSutilAiMessage()">Preguntar</button>
        </div>
        <div id="sutilAiActions" class="sutil-ai-actions"></div>
        <div id="sutilAiResult" class="result"></div>
      </div>

      <div class="sutil-support-card sutil-support-faq" style="margin-top:14px">
        <details class="sutil-faq-collapse">
          <summary>📚 Preguntas frecuentes / base de conocimiento</summary>
          <div class="muted" style="font-size:11px">Consulta respuestas oficiales sobre clientes, créditos, cobros, caja, membresía, rutas, migración y uso de Sutil.</div>
          <div class="sutil-faq-tools">
            <input id="sutilSupportFaqSearch" type="search" placeholder="Buscar, por ejemplo: histórico, caja, duplicado, PIX..." oninput="sutilDebounceUi('support-faq-search',renderSutilSupportFaq,100)">
            <span id="sutilSupportFaqCount" class="sutil-faq-count"></span>
          </div>
          <div id="sutilSupportFaq"></div>
        </details>
      </div>

      <div class="sutil-support-card sutil-support-chat" style="margin-top:14px">
        <div class="sutil-support-head"><div><strong>👤 Soporte humano</strong><div class="muted" style="font-size:11px">Si la IA no resuelve el caso, envíalo al propietario de Sutil.</div></div></div>
        <div id="sutilSupportMessages" class="sutil-support-messages"><div class="muted">Cargando conversación...</div></div>
        <div class="sutil-support-compose">
          <select id="sutilSupportCategory"><option value="support">Soporte general</option><option value="membership">Membresía</option><option value="routes">Rutas</option><option value="technical">Problema técnico</option><option value="billing">Pagos</option></select>
          <textarea id="sutilSupportText" placeholder="Escribe al soporte humano..."></textarea>
          <button class="btn success" type="button" onclick="sendSutilSupportMessage()">Enviar</button>
        </div>
        <div id="sutilSupportResult" class="result"></div>
      </div>
    </div>
  </div>
</section>

<section id="settingsSection" class="section">
      <div class="card">
        <h3>⚙️ Configuración de la empresa</h3>
        <div class="muted">Estos ajustes son propios de esta empresa y solo pueden ser modificados por el empresario.</div>
      </div>
      
      <div class="card">
        <h3>🔊 Sonidos de notificaciones</h3>
        <div class="muted">Configura un sonido diferente para cada tipo de evento y reconócelo sin mirar la pantalla.</div>

        <div class="form-grid" style="margin-top:14px">
          <label>💬 Mensajes de clientes
            <select id="sutilSoundChat" onchange="saveSutilSoundProfile()">
              <option value="soft">Suave</option>
              <option value="bell">Campana</option>
              <option value="digital">Digital</option>
              <option value="double">Doble aviso</option>
              <option value="pop">Pop</option>
              <option value="chime">Chime</option>
              <option value="bubble">Burbuja</option>
              <option value="ping">Ping</option>
              <option value="none">Sin sonido</option>
            </select>
            <button class="sutil-sound-mobile-btn" type="button" data-sound-type="chat" onclick="openSutilSoundPicker('chat')"></button>
          </label>
          <div style="display:flex;align-items:end">
            <button class="btn secondary" type="button" style="width:100%" onclick="previewSutilEventSound('chat')">▶ Probar mensaje</button>
          </div>

          <label>💳 Comprobante PIX / revisión
            <select id="sutilSoundPix" onchange="saveSutilSoundProfile()">
              <option value="bell">Campana</option>
              <option value="digital">Digital</option>
              <option value="double">Doble aviso</option>
              <option value="cash">Caja</option>
              <option value="confirm">Confirmación</option>
              <option value="chime">Chime</option>
              <option value="urgent">Urgente</option>
              <option value="none">Sin sonido</option>
            </select>
            <button class="sutil-sound-mobile-btn" type="button" data-sound-type="pix" onclick="openSutilSoundPicker('pix')"></button>
          </label>
          <div style="display:flex;align-items:end">
            <button class="btn secondary" type="button" style="width:100%" onclick="previewSutilEventSound('pix')">▶ Probar PIX</button>
          </div>

          <label>🛟 Soporte / membresía
            <select id="sutilSoundSupport" onchange="saveSutilSoundProfile()">
              <option value="chime">Chime</option>
              <option value="soft">Suave</option>
              <option value="bell">Campana</option>
              <option value="digital">Digital</option>
              <option value="notify">Notificación</option>
              <option value="double">Doble aviso</option>
              <option value="none">Sin sonido</option>
            </select>
            <button class="sutil-sound-mobile-btn" type="button" data-sound-type="support" onclick="openSutilSoundPicker('support')"></button>
          </label>
          <div style="display:flex;align-items:end">
            <button class="btn secondary" type="button" style="width:100%" onclick="previewSutilEventSound('support')">▶ Probar soporte</button>
          </div>

          <label>⚠️ Alertas importantes
            <select id="sutilSoundAlert" onchange="saveSutilSoundProfile()">
              <option value="urgent">Urgente</option>
              <option value="alarm">Alerta</option>
              <option value="double">Doble aviso</option>
              <option value="digital">Digital</option>
              <option value="bell">Campana</option>
              <option value="none">Sin sonido</option>
            </select>
            <button class="sutil-sound-mobile-btn" type="button" data-sound-type="alert" onclick="openSutilSoundPicker('alert')"></button>
          </label>
          <div style="display:flex;align-items:end">
            <button class="btn secondary" type="button" style="width:100%" onclick="previewSutilEventSound('alert')">▶ Probar alerta</button>
          </div>
        </div>

        <div class="muted" style="margin-top:10px;font-size:12px">
          Los sonidos quedan guardados en este dispositivo para esta empresa.
        </div>
      </div>

      <div class="card" id="sutilAdminNotificationSettingsCard">
        <h3>🔔 Notificaciones del equipo</h3>
        <div class="sutil-notify-settings-summary">
          <div>
            <strong>Push al celular y avisos de comprobantes</strong>
            <div class="muted" style="font-size:12px">Elige qué avisos quieres recibir. Las rutas siempre respetan tus permisos.</div>
          </div>
          <div class="sutil-notify-settings-summary-actions">
            <span id="sutilNotifySettingsSummaryBadge" class="sutil-notify-setting-badge">Cargando…</span>
            <button class="btn secondary" type="button" onclick="openSutilNotificationSettings()">⚙️ Configurar</button>
          </div>
        </div>
      </div>

      <div class="card"><h3>🌎 Idioma, país y moneda</h3><div class="form-grid">
        <label>Idioma<select id="settingLanguage" onchange="setAccessLanguage(this.value)"><option value="es">Español</option><option value="pt">Português</option><option value="en">English</option></select><button class="sutil-mobile-select-btn" type="button" data-select-id="settingLanguage" data-select-title="Idioma" onclick="openSutilMobileSelectPicker(this)"></button></label>
        <label>País<select id="settingCountry" onchange="syncCountryCurrency()"><option value="BR">🇧🇷 Brasil</option><option value="CO">🇨🇴 Colombia</option><option value="PE">🇵🇪 Perú</option><option value="MX">🇲🇽 México</option><option value="AR">🇦🇷 Argentina</option><option value="CR">🇨🇷 Costa Rica</option><option value="PY">🇵🇾 Paraguay</option><option value="CL">🇨🇱 Chile</option><option value="EC">🇪🇨 Ecuador</option><option value="UY">🇺🇾 Uruguay</option><option value="ES">🇪🇸 España</option><option value="US">🇺🇸 Estados Unidos</option></select><button class="sutil-mobile-select-btn" type="button" data-select-id="settingCountry" data-select-title="País" onclick="openSutilMobileSelectPicker(this)"></button></label>
        <label>Moneda<input id="settingCurrencyCode" maxlength="5"></label>
        <label>Símbolo<input id="settingCurrencySymbol" maxlength="10"></label>
      </div></div>
      <div class="card"><h3>🏢 Nombre y logo de la empresa</h3>
        <div class="muted">Sutil es la plataforma. En la app del cliente se mostrará el nombre y el logo propios de esta empresa.</div>
        <div style="display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:14px">
          <div id="settingCompanyLogoPreview" style="width:92px;height:92px;border:1px solid #dfe5ea;border-radius:18px;background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;font-size:28px;font-weight:900;color:#374151">🏢</div>
          <div style="flex:1;min-width:230px">
            <label style="display:block;margin-bottom:11px">Nombre de la empresa
              <input id="settingCompanyName" maxlength="160" autocomplete="organization" placeholder="Nombre de la empresa" style="width:100%;margin-top:6px">
            </label>
            <button class="btn success" type="button" onclick="saveCompanyName()" style="margin-bottom:12px">💾 Guardar nombre</button>
            <input id="settingCompanyLogo" type="file" accept="image/jpeg,image/png,image/webp" style="width:100%">
            <div class="muted" style="font-size:12px;margin-top:6px">JPG, PNG o WEBP · máximo 4 MB. Se recomienda un logo cuadrado o horizontal con fondo transparente.</div>
          </div>
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:14px">
          <button class="btn success" type="button" onclick="uploadCompanyLogo()">📤 Guardar logo</button>
          <button class="btn secondary" type="button" onclick="removeCompanyLogo()">🗑️ Quitar logo</button>
        </div>
        <div id="companyLogoResult" class="result"></div>
      </div>
      <div class="card">
        <h3>💎 Beneficios / VIP para clientes</h3>
        <div class="muted">Configura únicamente lo que tu empresa realmente ofrece. Este contenido solo aparecerá a los clientes que tengan activada la casilla <strong>Benefícios en la app del cliente</strong>.</div>
        <div class="form-grid" style="margin-top:14px">
          <label>Nombre del programa<input id="legacy_settingBenefitsProgramName" maxlength="120" placeholder="Ej. Clientes VIP"></label>
          <label>Título principal<input id="legacy_settingBenefitsHeadline" maxlength="180" placeholder="Ej. Beneficios especiales para usted"></label>
          <label style="grid-column:1/-1">Descripción<textarea id="legacy_settingBenefitsDescription" maxlength="1000" style="width:100%;min-height:72px" placeholder="Explica brevemente el programa"></textarea></label>
          <label>Beneficio 1<input id="legacy_settingBenefit1Title" maxlength="120" placeholder="Ej. Renovación preferencial"></label>
          <label>Detalle 1<input id="legacy_settingBenefit1Description" maxlength="500" placeholder="Describe la condición real"></label>
          <label>Beneficio 2<input id="legacy_settingBenefit2Title" maxlength="120" placeholder="Opcional"></label>
          <label>Detalle 2<input id="legacy_settingBenefit2Description" maxlength="500" placeholder="Opcional"></label>
          <label>Beneficio 3<input id="legacy_settingBenefit3Title" maxlength="120" placeholder="Opcional"></label>
          <label>Detalle 3<input id="legacy_settingBenefit3Description" maxlength="500" placeholder="Opcional"></label>
          <label style="grid-column:1/-1">Condiciones / observaciones<textarea id="legacy_settingBenefitsTerms" maxlength="2000" style="width:100%;min-height:82px" placeholder="Condiciones que el cliente debe conocer. No colocar promesas que la empresa no ofrezca."></textarea></label>
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:12px">
          <button class="btn success" type="button" onclick="saveClientBenefitsProgramSettings('legacy')">💾 Guardar Beneficios</button>
        </div>
        <div id="legacy_settingBenefitsResult" class="result"></div>
      </div>
      <div class="card">
        <h3>🔔 Recordatorios de la app del cliente</h3>
        <div class="muted">Configura qué avisos internos verá el cliente. Esto no envía notificaciones push del celular todavía; esas se conectarán en la versión Android.</div>
        <div class="form-grid" style="margin-top:14px">
          <label class="inline-check"><input id="settingClientNoticesEnabled" type="checkbox"> Activar avisos en la app del cliente</label>
          <label>Días de anticipación
            <input id="settingClientNoticeDays" type="number" min="0" max="30" step="1" value="3">
            <span class="muted" style="font-size:11px">0 = avisar solo el día del vencimiento; máximo 30 días.</span>
          </label>
          <label class="inline-check"><input id="settingNoticeUpcoming" type="checkbox"> Próxima cuota antes del vencimiento</label>
          <label class="inline-check"><input id="settingNoticeDueToday" type="checkbox"> Cuota que vence hoy</label>
          <label class="inline-check"><input id="settingNoticeOverdue" type="checkbox"> Cuotas vencidas</label>
          <label class="inline-check"><input id="settingNoticeReceiptPending" type="checkbox"> Comprobante en comprobación</label>
          <label class="inline-check"><input id="settingNoticeReceiptRejected" type="checkbox"> Comprobante rechazado</label>
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:12px">
          <button class="btn success" type="button" onclick="saveClientNotificationSettings()">💾 Guardar recordatorios</button>
        </div>
        <div id="settingClientNoticeResult" class="result"></div>
      </div>
      <!-- Personalización manual de colores deshabilitada: el contraste se controla solo con Claro/Oscuro. -->
      <div style="display:none" aria-hidden="true">
        <input id="settingPrimaryColor" type="hidden" value="#1769aa">
        <input id="settingSecondaryColor" type="hidden" value="#148343">
        <input id="settingBackgroundColor" type="hidden" value="#eef2f5">
      </div>
      <div class="card"><h3>💳 Créditos y cuotas</h3><div class="form-grid">
        <label>Frecuencia predeterminada<select id="settingFrequency"><option value="daily">Diaria</option><option value="weekly">Semanal</option><option value="biweekly">Quincenal</option><option value="monthly">Mensual</option></select><button class="sutil-mobile-select-btn" type="button" data-select-id="settingFrequency" data-select-title="Frecuencia predeterminada" onclick="openSutilMobileSelectPicker(this)"></button></label>
        <label class="inline-check"><input id="settingIncludeSaturdays" type="checkbox"> Contar sábados por defecto</label>
        <label class="inline-check"><input id="settingIncludeSundays" type="checkbox"> Contar domingos por defecto</label>
      </div></div>
      <div class="card"><h3>💰 Métodos de pago habilitados</h3><div class="form-grid">
        <label class="inline-check"><input id="settingPayCash" type="checkbox"> Dinero / efectivo</label>
        <label class="inline-check"><input id="settingPayPix" type="checkbox"> PIX</label>
        <label class="inline-check"><input id="settingPayMixed" type="checkbox"> PIX + Efectivo</label>
        <label class="inline-check"><input id="settingPayTransfer" type="checkbox"> Transferencia</label>
        <label class="inline-check"><input id="settingPayRenewal" type="checkbox"> Renovación</label>
        <div class="muted full">Todos vienen habilitados por defecto. El empresario puede deshabilitar los que no utilice.</div>
      </div></div>
      <div class="card"><h3>🔐 Seguridad y acceso</h3>
        <div class="muted">Cambia el celular o la llave de acceso de la empresa. Por seguridad debes confirmar tu clave actual.</div>
        <div class="form-grid" style="margin-top:12px">
          <label>Celular para iniciar sesión<input id="settingAccessPhone" autocomplete="tel"></label>
          <label>Llave de acceso<input id="settingAccessKey" autocomplete="off"></label>
          <label>Clave actual para confirmar<input id="settingAccessPassword" type="password" autocomplete="current-password"></label>
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:12px">
          <button class="btn" type="button" onclick="saveAccessSettings()">Guardar datos de acceso</button>
          <button class="btn secondary" type="button" onclick="openPasswordChangeFromSettings()">Cambiar contraseña</button>
        </div>
        <div id="accessSettingsResult" class="result"></div>
        <div class="muted" style="margin-top:12px">Si cambias la llave, deberás usar la nueva llave en el próximo inicio de sesión.</div>
      </div>
      <div class="card"><h3>📱 Sesión en este dispositivo</h3>
        <label class="inline-check"><input id="settingKeepSession" type="checkbox" onchange="syncKeepSessionFromSettings()"> Mantener sesión iniciada en este dispositivo</label>
        <div class="muted">Desactívalo si este computador o celular es compartido.</div>
      </div>
      <div class="card settings-save-card">
        <div class="settings-save-copy">
          <strong>Guardar cambios</strong>
          <span>Aplica la configuración general de esta empresa.</span>
        </div>
        <button class="btn success settings-save-button" type="button" onclick="saveCompanySettings()">💾 Guardar configuración</button>
        <div id="settingsResult" class="result settings-save-status"></div>
      </div>
    </section>
  </div>
</div>


<div id="pixReviewModal" class="pix-review-backdrop" onclick="closePixReviewFromBackdrop(event)">
  <div class="pix-review-card" role="dialog" aria-modal="true">
    <div class="pix-review-head">
      <div><h3 style="margin:0">Revisar comprobante de pago</h3><div id="pixReviewSubtitle" class="muted"></div></div>
      <button class="btn secondary" type="button" onclick="closePixReview()">×</button>
    </div>
    <div class="pix-review-body">
      <div id="pixReviewSummary" class="pix-summary"></div>
      <div id="pixReviewPreview" class="pix-preview"></div>
      <div class="pix-decision-grid">
        <label>Valor a confirmar<input id="pixDecisionAmount" type="number" min="0.01" step="0.01"></label>
        <label>Nombre del pagador<input id="pixDecisionPayer" placeholder="Opcional"></label>
        <label>Identificador bancario / EndToEnd<input id="pixDecisionTransaction" placeholder="Opcional, evita duplicados"></label>
        <label>Observación / motivo de rechazo<textarea id="pixDecisionNote" style="width:100%;min-height:88px;margin-top:5px;border:1px solid #b9c1c9;border-radius:8px;padding:10px"></textarea></label>
      </div>
      <div id="pixDecisionMessage" class="result" style="display:block;background:#f8fafc"></div>
      <div id="pixReviewActions" class="pix-review-actions"></div>
    </div>
  </div>
</div>

<div id="editStaffModal" class="staff-edit-backdrop" onclick="closeEditStaffFromBackdrop(event)">
  <div class="staff-edit-card" role="dialog" aria-modal="true">
    <div class="staff-edit-head">
      <div>
        <h3 style="margin:0">Editar acceso del personal</h3>
        <div id="editStaffSubtitle" class="muted">Datos, rutas y permisos.</div>
      </div>
      <button class="btn secondary" type="button" onclick="closeEditStaff()">×</button>
    </div>
    <div id="editStaffDataSection" class="staff-edit-section">
      <h4>👤 Datos y estado</h4>
      <div class="form-grid">
        <label>Nombre<input id="editStaffName"></label>
        <label>Celular<input id="editStaffPhone"></label>
        <label>Perfil<input id="editStaffRoleLabel" disabled></label>
        <label>Estado
          <select id="editStaffActive"><option value="true">Activo</option><option value="false">Desactivado</option></select>
        </label>
      </div>
    </div>
    <div id="editStaffRoutesSection" class="staff-edit-section">
      <h4>🗺️ Rutas asignadas</h4>
      <div id="editStaffRoutes" class="staff-choice-grid"></div>
    </div>
    <div id="editStaffPermissionsSection" class="staff-edit-section">
      <h4>🔐 Permisos</h4>
      <div id="editStaffPermissions" class="staff-choice-grid"></div>
      <div id="editStaffRestriction" class="muted" style="margin-top:10px"></div>
    </div>
    <div id="editStaffMessage" class="result" style="display:block;background:#f8fafc"></div>
    <div class="staff-edit-actions">
      <button class="btn secondary" type="button" onclick="closeEditStaff()">Cancelar</button>
      <button class="btn success" type="button" onclick="saveEditStaff()">Guardar cambios</button>
    </div>
  </div>
</div>

<div id="forcePasswordModal" class="force-password-backdrop">
  <div class="force-password-card" role="dialog" aria-modal="true">
    <h3>Crea tu nueva clave</h3>
    <p>Estás ingresando con una clave temporal. Debes cambiarla antes de usar el panel.</p>

    <label>Clave temporal
      <input id="currentTempPassword" type="password" autocomplete="current-password">
    </label>

    <label>Nueva clave
      <input id="newOwnerPassword" type="password" minlength="6" autocomplete="new-password">
    </label>

    <label>Confirmar nueva clave
      <input id="confirmOwnerPassword" type="password" minlength="6" autocomplete="new-password">
    </label>

    <button class="btn" type="button" onclick="saveForcedPassword()">Guardar nueva clave</button>
    <div id="forcePasswordMsg" class="force-password-msg"></div>
  </div>
</div>


<div id="editClientModal" class="client-edit-backdrop" onclick="closeEditClientFromBackdrop(event)">
  <div class="client-edit-card" role="dialog" aria-modal="true">
    <div class="client-edit-head">
      <div>
        <h3 style="margin:0">Actualizar cliente</h3>
        <small class="muted">Los cambios quedan registrados en auditoría.</small>
      </div>
      <button class="btn secondary" type="button" onclick="closeEditClient()">×</button>
    </div>

    <div class="photo-picker">
      <label>Foto del cliente
        <input id="editClientPhoto" type="file" accept="image/jpeg,image/png,image/webp" capture="user" onchange="previewClientPhoto(this,'editClientPhotoPreview')">
      </label>
      <div class="photo-preview-row">
        <img id="editClientPhotoPreview" class="client-photo-large" alt="Foto del cliente" style="display:none">
        <div class="muted">Selecciona una nueva foto solo cuando quieras reemplazar la actual.</div>
      </div>
    </div>

    <div class="sutil-client-doc-accordion" id="editClientDocumentsAccordion">
      <button class="sutil-client-doc-accordion-head" type="button" onclick="toggleEditClientDocumentsAccordion()" aria-expanded="false">
        <span><strong>📁 Documentos / fotos</strong><small>Opcional · documento personal, residencia u otro</small></span>
        <span class="sutil-client-doc-accordion-chevron">⌄</span>
      </button>
      <div id="editClientDocumentsAccordionBody" class="sutil-client-doc-accordion-body" style="display:none">
        <div id="editClientDocumentsSection" class="sutil-client-docs-section"></div>
      </div>
    </div>

    <div class="form-grid">
      <label>Nombre completo<input id="editClientName"></label>
      <label>Documento personal<input id="editClientDocument"></label>
      <label>Código automático<input id="editClientCode" disabled></label>
      <label>Teléfono 1<input id="editClientPhone1"></label>
      <label>Teléfono 2<input id="editClientPhone2"></label><label>Teléfono fijo<input id="editClientFixedPhone"></label><label>Correo<input id="editClientEmail" type="email"></label>
      <label>Dirección<input id="editClientAddress"></label><label>Número<input id="editClientAddressNumber"></label><label>Complemento<input id="editClientComplement"></label>
      <label>Barrio<input id="editClientNeighborhood"></label>
      <label>CEP / Código postal<input id="editClientPostalCode"></label><label>Estado / Departamento<input id="editClientStateRegion"></label><label>Ciudad<input id="editClientCity"></label>
      <label>Latitud<input id="editClientLatitude" type="number" step="any" placeholder="-16.6869"></label>
      <label>Longitud<input id="editClientLongitude" type="number" step="any" placeholder="-49.2648"></label>
      <div style="grid-column:1/-1">
        <button class="btn secondary" type="button" onclick="captureEditClientLocation()">📍 Usar ubicación actual</button>
        <small class="muted" style="display:block;margin-top:6px">Actualiza la ubicación registrada del cliente. No modifica la localización actual enviada por la app.</small>
      </div>
      <label style="grid-column:1/-1">Observaciones<textarea id="editClientNotes" style="width:100%;min-height:70px"></textarea></label>
      <label>Ruta<select id="editClientRoute" onchange="syncEditClientCollectionAccounts()"></select></label>
      <label>Cuenta de cobro personalizada
        <select id="editClientCollectionAccount"></select>
        <small class="muted">Normalmente déjalo en “Usar cuenta de la ruta”. Solo cambia para excepciones.</small>
      </label>
      <label>Responsable<select id="editClientStaff"></select></label>
      <label>Estado
        <select id="editClientActive">
          <option value="true">Activo</option>
          <option value="false">Inactivo</option>
        </select>
      </label>
    </div>

    <div class="card" style="background:#f8fafc;border:1px solid #dfe5eb;margin-top:15px">
      <label class="inline-check" style="margin-top:0">
        <input id="editClientHasBusiness" type="checkbox" onchange="toggleEditClientBusiness()">
        El cliente tiene empresa
      </label>

      <div id="editClientBusinessFields" style="display:none;margin-top:12px">
        <h4 style="margin:0 0 12px">🏢 Información de la empresa (opcional)</h4>
        <div class="form-grid">
          <label>Nombre de la empresa<input id="editClientBusinessName"></label>
          <label>Nombre comercial<input id="editClientBusinessTradeName"></label>
          <label>CNPJ / NIT / RUC<input id="editClientBusinessDocument"></label>
          <label>Actividad económica<input id="editClientBusinessActivity"></label>
          <label>Cargo del cliente<input id="editClientBusinessRole"></label>
          <label>Teléfono<input id="editClientBusinessPhone"></label>
          <label>Correo<input id="editClientBusinessEmail" type="email"></label>
          <label>Dirección<input id="editClientBusinessAddress"></label>
          <label>Número<input id="editClientBusinessAddressNumber"></label>
          <label>Complemento<input id="editClientBusinessComplement"></label>
          <label>Barrio<input id="editClientBusinessNeighborhood"></label>
          <label>CEP / Código postal<input id="editClientBusinessPostalCode"></label>
          <label>Estado / Departamento<input id="editClientBusinessStateRegion"></label>
          <label>Ciudad<input id="editClientBusinessCity"></label>
        </div>
      </div>
    </div>

    <div id="editClientMsg" class="result" style="display:block;background:#f8fafc"></div>

    <div class="client-edit-actions">
      <button class="btn secondary" type="button" onclick="closeEditClient()">Cancelar</button>
      <button class="btn success" type="button" onclick="saveEditClient()">Guardar cambios</button>
    </div>
  </div>
</div>


<div id="editLoanModal" class="loan-edit-backdrop" onclick="closeEditLoanFromBackdrop(event)">
  <div class="loan-edit-card">
    <div class="client-edit-head">
      <div>
        <h3 style="margin:0">Editar crédito</h3>
        <small class="muted">Solo disponible mientras no existan pagos o abonos.</small>
      </div>
      <button class="btn secondary" onclick="closeEditLoan()">×</button>
    </div>
    <div class="form-grid">
      <label>Capital<input id="editLoanPrincipal" type="number" min="0.01" step="0.01"></label>
      <label>Método de entrega
        <select id="editLoanDeliveryMethod">
          <option value="cash">💵 Efectivo</option>
          <option value="pix">📲 PIX</option>
          <option value="transfer">🏦 Transferencia</option>
        </select>
      </label>
      <label>Interés %<input id="editLoanInterest" type="number" min="0" step="0.01"></label>
      <label>Número de cuotas<input id="editLoanCount" type="number" min="1"></label>
      <label>Cuota manual<input id="editLoanInstallment" type="number" min="0.01" step="0.01"></label>
      <label>Frecuencia
        <select id="editLoanFrequency" onchange="updateEditLoanFrequencyFields()">
          <option value="daily">Diaria</option>
          <option value="weekly">Semanal</option>
          <option value="monthly">Mensual</option>
        </select>
      </label>
      <label>Fecha del préstamo
        <input id="editLoanDate" type="date">
        <small class="muted">Fecha financiera que afecta caja.</small>
      </label>
      <label>Primera cuota
        <input id="editLoanStartDate" type="date">
        <small class="muted">Inicio del cronograma.</small>
      </label>
      <!-- Compatibilidad interna: el día semanal se deriva de la fecha de primera cuota. -->
      <select id="editLoanWeeklyDay" hidden aria-hidden="true" tabindex="-1">
        <option value="0">Lunes</option><option value="1">Martes</option>
        <option value="2">Miércoles</option><option value="3">Jueves</option>
        <option value="4">Viernes</option><option value="5">Sábado</option>
        <option value="6">Domingo</option>
      </select>
      <span id="editLoanWeeklyBox" hidden></span>
      <label id="editLoanMonthlyBox">Día del mes<input id="editLoanMonthlyDay" type="number" min="1" max="31"></label>
      <label class="inline-check"><input id="editLoanIncludeSaturdays" type="checkbox">Contar sábados</label>
      <label class="inline-check"><input id="editLoanIncludeSundays" type="checkbox">Contar domingos</label>
    </div>
    <div id="editLoanMsg" class="result" style="display:block;background:#f8fafc"></div>
    <div class="client-edit-actions">
      <button class="btn secondary" onclick="closeEditLoan()">Cancelar</button>
      <button class="btn success" onclick="saveEditLoan()">Guardar cambios</button>
    </div>
  </div>
</div>


      <div id="editRegisteredPaymentBackdrop" class="direct-payment-backdrop" role="dialog" aria-modal="true" aria-labelledby="editRegisteredPaymentTitle">
        <div class="direct-payment-modal" style="max-width:520px">
          <div class="direct-payment-modal-head">
            <div>
              <h3 id="editRegisteredPaymentTitle">✏️ Corregir pago registrado</h3>
              <div id="editRegisteredPaymentSubtitle" class="direct-payment-modal-client"></div>
            </div>
            <button class="direct-payment-close" type="button" aria-label="Cerrar" onclick="closeEditRegisteredPayment()">×</button>
          </div>
          <div class="direct-payment-body">
            <div class="payment-extra-grid" style="grid-template-columns:repeat(2,minmax(0,1fr))">
              <div class="payment-extra-box">
                <small>Forma de pago</small>
                <strong id="editRegisteredPaymentMethod">—</strong>
              </div>
              <div class="payment-extra-box">
                <small>Fecha registrada</small>
                <strong id="editRegisteredPaymentDate">—</strong>
              </div>
            </div>

            <div class="direct-payment-form" style="grid-template-columns:1fr">
              <label>Valor correcto del pago
                <input id="editRegisteredPaymentAmount" type="number" min="0.01" step="0.01">
              </label>
              <label>Motivo de la corrección *
                <input id="editRegisteredPaymentReason" maxlength="300" placeholder="Ej.: valor digitado incorrectamente">
              </label>
            </div>

            <div class="muted" style="margin-top:10px">
              La corrección recalcula las cuotas, saldo del crédito, saldo del cliente y caja. No cambia el valor contratado de las cuotas.
            </div>

            <div class="direct-payment-actions">
              <button class="btn success" type="button" onclick="saveEditRegisteredPayment()">💾 Guardar corrección</button>
              <button class="btn secondary" type="button" onclick="closeEditRegisteredPayment()">❌ Cancelar</button>
            </div>
            <div id="editRegisteredPaymentResult" class="result"></div>
          </div>
        </div>
      </div>


<script>
(function(){
  const q=new URLSearchParams(location.search);
  const key=q.get("recovered_key")||"";
  const recoveredPhone=q.get("recovered_phone")||"";
  if(!key&&!recoveredPhone)return;
  window.addEventListener("DOMContentLoaded",()=>{
    setTimeout(()=>{
      try{
        chooseProfile("owner");
        if(key)companyKey.value=key;
        if(recoveredPhone)phone.value=recoveredPhone;
        history.replaceState({},document.title,location.pathname);
      }catch(_){}
    },120);
  },{once:true});
})();

window.SUTIL_SESSION_UI_VERSION="1.3.65-ai-support-fix12.15-interest-manual-auto";

/* ============================================================
   SUTIL · CAPA DE ESTABILIDAD FRONTEND
   - Enlaza explícitamente los elementos DOM usados por JS.
   - No depende de globals automáticos por id del navegador.
   - Audita IDs duplicados y handlers onclick inexistentes.
   ============================================================ */
(function sutilBindDomGlobals(){
  const ids = ["accessSettingsResult", "activeCompanyBanner", "activeLoans", "app", "backButton", "baseAdjustmentCard", "baseAdjustmentTitle", "baseMovementAmount", "baseMovementDate", "baseMovementMessage", "baseMovementMethod", "baseMovementObservation", "baseMovementReason", "baseMovementRoute", "baseMovementsSection", "baseMovementsTable", "baseTransferCard", "autoCloseCash", "autoClosePix", "autoCloseTotal", "cashActors", "pendingOpenCashCard", "pendingOpenCashSummary", "pendingOpenCashList", "cashCloseArea", "cashCloseNotes", "cashDate", "cashInheritanceNote", "cashMainMetrics", "cashMessage", "cashMovementsTable", "cashNotes", "cashReportFrom", "cashReportLoadButton", "cashReportMessage", "cashReportReconcileButton", "cashReportRoute", "cashReportSection", "cashReportSummary", "cashReportTo", "cashReportType", "cashResultCard", "cashResultTitle", "cashRoute", "cashSection", "cashStatusBanner", "cashSummary", "checking", "chatsSection", "chatsCenterSearch", "chatsCenterRoute", "chatsCenterOrder", "chatsCenterList", "chatsCenterCount", "chatsCenterConversation", "clientAddress", "clientAddressNumber", "clientAlertsContent", "clientAlertsPane", "clientBusinessActivity", "clientBusinessAddress", "clientBusinessAddressNumber", "clientBusinessCity", "clientBusinessComplement", "clientBusinessContent", "clientBusinessDocument", "clientBusinessDocumentLabel", "clientBusinessEmail", "clientBusinessFields", "clientBusinessName", "clientBusinessNeighborhood", "clientBusinessPane", "clientBusinessPhone", "clientBusinessPostalCode", "clientBusinessRole", "clientBusinessStateRegion", "clientBusinessTradeName", "clientChatContent", "clientChatPane", "clientCity", "clientComplement", "clientDetailCard", "clientDetailMeta", "clientDetailName", "clientDetailPhoto", "clientDirectoryCard", "clientDocument", "clientDocumentsContent", "clientDocumentsPane", "clientEmail", "clientFinancePane", "clientFixedPhone", "clientFormResult", "clientHasBusiness", "clientHistoryFullContent", "clientHistoryFullPane", "clientHistoryPane", "clientHistoryTab", "clientInfoEditButton", "clientInfoLocationButton", "clientInfoSummary", "clientLatitude", "clientLoans", "clientLoansMobile", "clientLocationsContent", "clientLocationsPane", "clientLongitude", "clientNeighborhood", "clientNotes", "clientPaymentsDateFrom", "clientPaymentsDateTo", "clientPaymentsDetailView", "clientPaymentsFooterTotal", "clientPaymentsHeaderDocument", "clientPaymentsHeaderFixed", "clientPaymentsHeaderMobile", "clientPaymentsHeaderName", "clientPaymentsList", "clientPaymentsNote", "clientPaymentsPickerList", "clientPaymentsPickerView", "clientPaymentsSearch", "clientPaymentsSummary", "clientPersonalPane", "clientPhone1", "clientPhone2", "clientPhoto", "clientPhotoPreview", "clientPostalCode", "clientPostalLabel", "clientQuickEditButton", "clientQuickLocationButton", "clientRiskContent", "clientRiskPane", "clientRoute", "clientStaff", "clientStateLabel", "clientStateRegion", "clientStatementFrom", "clientStatementInstallments", "clientStatementLoan", "clientStatementPane", "clientStatementPayments", "clientStatementSummary", "clientStatementTab", "clientStatementTo", "clientSummary", "clientsCount", "clientsHubSection", "clientsRouteFilter", "clientsSearch", "clientsSection", "clientsStatusFilter", "clientsTable", "closeCashTopButton", "collectionOverdueCount", "collectionPaidCount", "collectionTodayCount", "collectionsClientPaymentsOption", "collectionsClientPaymentsPane", "collectionsDate", "collectionsDebtOption", "collectionsDebtPane", "collectionsReceivedOption", "collectionsReceivedPane", "collectionsRoute", "collectionsSearch", "collectionsSection", "collectionsStatus", "collectionsViewNote", "companyKey", "confirmOwnerPassword", "consultCashButton", "currentTempPassword", "deleteLoanActionBtn", "directPaymentAmount", "directPaymentApplyButton", "directPaymentBackdrop", "directPaymentClient", "directPaymentDate", "directPaymentForgottenButton", "directPaymentForgottenGuide", "directPaymentForgottenGuideText", "directPaymentForgottenGuideTitle", "directPaymentDueDate", "directPaymentInitialValue", "directPaymentInstallment", "directPaymentMethod", "directPaymentNote", "directPaymentPartialOption", "directPaymentPending", "directPaymentReceipt", "directPaymentReceiptActions", "directPaymentRemaining", "directPaymentResult", "directPaymentStatus", "directPaymentTotalBalance", "directPaymentTotalOption", "editBaseAmount", "editBaseDate", "editBaseDirection", "editBaseMessage", "editBaseMethod", "editBaseMovementCard", "editBaseObservation", "editBaseReason", "editBaseRouteName", "editClientActive", "editClientAddress", "editClientAddressNumber", "editClientBusinessActivity", "editClientBusinessAddress", "editClientBusinessAddressNumber", "editClientBusinessCity", "editClientBusinessComplement", "editClientBusinessDocument", "editClientBusinessEmail", "editClientBusinessFields", "editClientBusinessName", "editClientBusinessNeighborhood", "editClientBusinessPhone", "editClientBusinessPostalCode", "editClientBusinessRole", "editClientBusinessStateRegion", "editClientBusinessTradeName", "editClientCity", "editClientCode", "editClientComplement", "editClientDocument", "editClientEmail", "editClientFixedPhone", "editClientHasBusiness", "editClientLatitude", "editClientLongitude", "editClientModal", "editClientMsg", "editClientName", "editClientNeighborhood", "editClientNotes", "editClientPhone1", "editClientPhone2", "editClientPhoto", "editClientPhotoPreview", "editClientPostalCode", "editClientRoute", "editClientCollectionAccount", "editClientStaff", "editClientStateRegion", "editEachInstallment", "editLoanActionBtn", "editLoanCount", "editLoanDate", "editLoanDeliveryMethod", "editLoanFrequency", "editLoanIncludeSaturdays", "editLoanIncludeSundays", "editLoanInstallment", "editLoanInterest", "editLoanModal", "editLoanMonthlyBox", "editLoanMonthlyDay", "editLoanMsg", "editLoanPrincipal", "editLoanStartDate", "editLoanWeeklyBox", "editLoanWeeklyDay", "editRouteActive", "editRouteOperationalStart", "editRouteOperationalCash", "editRouteOperationalPix", "editRouteButton", "editRouteCity", "editRouteCountry", "editRouteCurrencyCode", "editRouteCurrencySymbol", "editRouteDescription", "editRouteCollectionAccount", "editRouteGeneralCashButton", "editRouteGeneralCashCard", "editRouteGeneralCashStatus", "editRouteLanguage", "editRouteName", "editStaffActive", "editStaffDataSection", "editStaffMessage", "editStaffModal", "editStaffName", "editStaffPermissions", "editStaffPermissionsSection", "editStaffPhone", "editStaffRestriction", "editStaffRoleLabel", "editStaffRoutes", "editStaffRoutesSection", "editStaffSubtitle", "expenseAmount", "expenseCategory", "expenseDate", "expenseDescription", "expenseMessage", "expenseMethod", "expensesSection", "expensesTable", "forcePasswordModal", "forcePasswordMsg", "frequency", "historicalClientFile", "historicalClientRollbackExecuteButton", "historicalClientRollbackMessage", "historicalImportAnalyzeMessage", "historicalImportClientsSection", "historicalImportDefaultRoute", "historicalImportExecuteButton", "historicalImportExecuteMessage", "historicalImportMapping", "historicalImportMappingCard", "historicalImportPreviewCard", "historicalImportPreviewTable", "historicalImportRouteMap", "historicalImportRoutesCard", "historicalImportStats", "historicalModule", "historicalPackageDefaultRoute", "historicalPackageExecute", "historicalPackageExecuteMessage", "historicalPackageExpenses", "historicalPackageFile", "historicalPackageLoans", "historicalPackageMessage", "historicalPackagePayments", "historicalPackagePreview", "historicalPackageProgress", "historicalPackageProgressBar", "historicalPackageProgressPercent", "historicalPackageProgressText", "historicalPackageSection", "historicalPackageStats", "historicalSection", "homeButton", "homeSection", "includeSaturdays", "includeSundays", "installmentCount", "installmentEditorBox", "installmentEditorRows", "installmentEditorTotal", "interestCalculationMode", "interestAutoHelp", "interestRate", "interestReceived", "interestReceivedKpi", "keepSessionOpen", "legacyBackupAnalyzeButton", "legacyBackupFile", "legacyBackupMessage", "legacyBackupPreviewCard", "legacyBackupPreviewSection", "legacyBackupProgress", "legacyBackupProgressBar", "legacyBackupProgressPercent", "legacyBackupProgressText", "legacyBackupSafety", "legacyBackupStageMessage", "legacyBackupStages", "legacyBackupStats", "legacyExpenseRoute", "legacyStageClientsBtn", "legacyStageExpensesBtn", "legacyStageLoansBtn", "legacyStagePaymentsBtn", "loanCashStatus", "loanClient", "loanClientSearch", "loanClientSearchResults", "loanSelectedClient", "loanClientStatus", "loanDeliveryMethod", "loanDetailActions", "loanDetailCard", "loanDetailSubtitle", "loanDetailSummary", "loanDetailTitle", "loanHistorySearch", "loanHistoryStatusFilter", "loanInstallmentsTable", "loanResult", "loanRoutePreview", "loansSection", "locationsSection", "login", "loginPassword", "loginSubtitle", "loginTitle", "manualInstallment", "monthlyDay", "monthlyDayBox", "monthlyReportChart", "newClientSection", "newOwnerPassword", "offlineStatusBadge", "openCashButton", "openingCashField", "openingPixField", "phone", "pixDecisionAmount", "pixDecisionMessage", "pixDecisionNote", "pixDecisionPayer", "pixDecisionTransaction", "pixReviewActions", "pixReviewModal", "pixReviewPreview", "pixReviewSubtitle", "pixReviewSummary", "previewInstallment", "previewLastInstallment", "previewTotal", "profileChooser", "receiptSearch", "receiptStatusFilter", "receipts", "receiptsSection", "receivedPaymentsCount", "receivedPaymentsDateFrom", "receivedPaymentsDateTo", "receivedPaymentsList", "receivedPaymentsMethod", "receivedPaymentsRoute", "receivedPaymentsStaff", "receivedPaymentsMethodCards", "receivedPaymentsSearch", "receivedPaymentsTotal", "reopenCashButton", "reportCashSummary", "reportDateFrom", "reportDateTo", "reportExpensesTable", "reportLossButton", "reportMonthlyTable", "reportNote", "reportPortfolioSummary", "reportProfitSummary", "reportRoute", "reportRoutesTable", "reportSummary", "reportTopClientsTable", "reportsSection", "routeCity", "routeClientsTable", "routeCountry", "routeCurrencyCode", "routeCurrencySymbol", "routeDescription", "routeDetailCard", "routeDetailTitle", "routeEditMessage", "routeEditModal", "routeEditSubtitle", "routeFormResult", "routeLanguage", "routeReportChart", "routeSummary", "routesSection", "routesTable", "sessionControls", "settingAccessKey", "settingAccessPassword", "settingAccessPhone", "settingCompanyLogo", "settingCompanyLogoPreview", "settingCompanyName", "companyLogoResult", "settingBackgroundColor", "settingCountry", "settingCurrencyCode", "settingCurrencySymbol", "settingFrequency", "settingIncludeSaturdays", "settingIncludeSundays", "settingKeepSession", "settingLanguage", "settingPayCash", "settingPayPix", "settingPayTransfer", "settingPrimaryColor", "settingSecondaryColor", "settingsResult", "settingsSection", "staffCompanyName", "staffName", "staffPassword", "staffPhone", "staffResult", "staffRole", "staffRoleHelp", "staffRoutes", "staffSection", "staffTable", "loanDate", "startDate", "todayCollectionsHead", "todayCollectionsTable", "todayPaid", "todayPending", "transferAmount", "transferDate", "transferDestinationRoute", "transferMessage", "transferMethod", "transferObservation", "transferSourceRoute", "weeklyDay", "weeklyDayBox", "collectionMethodsModule", "collectionAccountFormTitle", "collectionAccountCountry", "collectionAccountProvider", "collectionAccountName", "collectionAccountCurrency", "collectionAccountIdentifierType", "collectionAccountIdentifier", "collectionAccountHolder", "collectionAccountBank", "collectionAccountReference", "collectionAccountCopyCode", "collectionAccountInstructions", "collectionAccountQrFile", "collectionAccountActive", "collectionAccountDefault", "collectionAccountMessage", "collectionAccountsList", "settingBenefitsProgramName", "settingBenefitsHeadline", "settingBenefitsDescription", "settingBenefit1Title", "settingBenefit1Description", "settingBenefit2Title", "settingBenefit2Description", "settingBenefit3Title", "settingBenefit3Description", "settingBenefitsTerms", "settingBenefitsResult"];
  const missing = [];

  for (const id of ids) {
    const el = document.getElementById(id);
    if (el) {
      try { window[id] = el; } catch (_) {}
    } else {
      missing.push(id);
    }
  }

  window.__SUTIL_DOM_MISSING__ = missing;

  if (missing.length) {
    console.error("[Sutil] Elementos DOM faltantes:", missing);
  }
})();

function sutilFrontendSelfCheck(){
  const allIds = Array.from(document.querySelectorAll("[id]")).map(el => el.id);
  const seen = new Set();
  const duplicates = [];
  for (const id of allIds) {
    if (seen.has(id)) duplicates.push(id);
    seen.add(id);
  }

  const missingHandlers = [];
  document.querySelectorAll("[onclick]").forEach(el => {
    const code = el.getAttribute("onclick") || "";
    const matches = [...code.matchAll(/\b([A-Za-z_$][\w$]*)\s*\(/g)];
    for (const match of matches) {
      const name = match[1];
      if (["String","Number","JSON","Math","Date","Array","Object"].includes(name)) continue;
      if (["replaceAll","stopPropagation","stringify"].includes(name)) continue;
      if (typeof window[name] !== "function") {
        missingHandlers.push(name);
      }
    }
  });

  const report = {
    duplicate_ids: [...new Set(duplicates)],
    missing_dom: window.__SUTIL_DOM_MISSING__ || [],
    missing_handlers: [...new Set(missingHandlers)],
    checked_at: new Date().toISOString()
  };

  window.__SUTIL_FRONTEND_HEALTH__ = report;

  if (report.duplicate_ids.length || report.missing_dom.length || report.missing_handlers.length) {
    console.error("[Sutil] Autoverificación frontend:", report);
  } else {
    console.info("[Sutil] Autoverificación frontend: OK");
  }

  return report;
}

window.addEventListener("load", () => {
  // v90e: la auditoría completa del DOM queda disponible, pero no se ejecuta
  // automáticamente en producción. Evita recorrer miles de nodos al abrir el panel.
  let debug=false;
  try{
    debug=new URLSearchParams(location.search).get("sutil_debug")==="1" ||
      localStorage.getItem("sutil_frontend_selfcheck")==="1";
  }catch(_e){}
  if(debug)setTimeout(sutilFrontendSelfCheck,0);
});

window.addEventListener("error", event => {
  window.__SUTIL_LAST_FRONTEND_ERROR__ = {
    message: event.message || "Error frontend",
    filename: event.filename || "",
    line: event.lineno || null,
    column: event.colno || null,
    time: new Date().toISOString()
  };
});

window.addEventListener("unhandledrejection", event => {
  window.__SUTIL_LAST_FRONTEND_ERROR__ = {
    message: String(event.reason?.message || event.reason || "Promesa rechazada"),
    time: new Date().toISOString()
  };
});


let token = localStorage.getItem("sutil_admin_token") || sessionStorage.getItem("sutil_admin_token") || "";
let clientRows = [];
let sutilClientRowsLoadedAt = 0;
let sutilClientRowsLoadPromise = null;
async function sutilGetAdminClients(maxAgeMs=12000, force=false){
  const fresh = !force && Array.isArray(clientRows) && sutilClientRowsLoadedAt && (Date.now()-sutilClientRowsLoadedAt)<maxAgeMs;
  if(fresh)return clientRows;
  const data=await api("/api/admin/clients");
  clientRows=Array.isArray(data)?data:[];
  sutilClientRowsLoadedAt=Date.now();
  return clientRows;
}
async function sutilEnsureClientRowsReady(force=false){
  if(!force && sutilClientRowsLoadedAt)return clientRows;
  if(!force && sutilClientRowsLoadPromise)return sutilClientRowsLoadPromise;

  const request=(async()=>{
    const rows=await sutilGetAdminClients(60000,force);
    if(typeof renderLoanClientOptions==="function")renderLoanClientOptions(rows);
    return rows;
  })();

  if(!force)sutilClientRowsLoadPromise=request;
  try{
    return await request;
  }finally{
    if(sutilClientRowsLoadPromise===request)sutilClientRowsLoadPromise=null;
  }
}
function sutilWarmClientRows(){
  if(!token)return;
  setTimeout(()=>{
    sutilEnsureClientRowsReady(false).catch(error=>{
      console.warn("[Sutil] No fue posible precargar clientes:",error?.message||error);
    });
  },0);
}
let selectedProfile = "";
let currentUser = null;
const SUTIL_MOBILE_ADMIN = (()=>{
  try{return window.matchMedia("(max-width: 760px)").matches || /Android|iPhone|iPad|Mobile/i.test(navigator.userAgent||"");}
  catch(_){return false;}
})();

// v90e: evita reconstruir tablas grandes en cada tecla pulsada.
const sutilUiDebounceTimers=new Map();
function sutilDebounceUi(key,fn,delay=100){
  const old=sutilUiDebounceTimers.get(key);
  if(old)clearTimeout(old);
  const timer=setTimeout(()=>{
    sutilUiDebounceTimers.delete(key);
    try{fn();}catch(e){console.error(e);}
  },Math.max(0,Number(delay)||0));
  sutilUiDebounceTimers.set(key,timer);
}
window.sutilDebounceUi=sutilDebounceUi;
let currentSectionId = "homeSection";
let previousSectionId = "homeSection";

/* SUTIL FIX 12.15.49 · Navegación real + bloqueo definitivo de Atrás en Inicio
   Conserva el historial real validado en 12.15.48. Cuando Android/Chrome llega
   a la barrera raíz desde Inicio, vuelve a la entrada Inicio existente mediante
   history.go(1), evitando que un nuevo Atrás atraviese hacia fuera de Sutil. */
let sutilNavStack = ["homeSection"];
let sutilBackGuardReady = false;
let sutilBackHandling = false;
let sutilHistorySerial = 0;

function sutilSyncPreviousSection(){
  previousSectionId = sutilNavStack.length > 1
    ? sutilNavStack[sutilNavStack.length - 2]
    : "homeSection";
}

function sutilResetNavigationStack(){
  sutilNavStack = ["homeSection"];
  sutilSyncPreviousSection();
}

function sutilHistoryState(sectionId, kind="section"){
  sutilHistorySerial += 1;
  return {
    sutilAdmin:true,
    sutilKind:kind,
    sutilSection:sectionId || "homeSection",
    sutilSerial:sutilHistorySerial
  };
}

function sutilInstallMobileBackGuard(force=false){
  if(!window.history || !history.pushState)return;
  if(sutilBackGuardReady && !force)return;
  try{
    /* La entrada actual se convierte en la barrera raíz de Sutil. */
    history.replaceState(sutilHistoryState("homeSection","root"), document.title, location.href);
    /* Esta segunda entrada es el Inicio visible. Al retroceder desde Inicio,
       popstate cae en root y lo rearmamos sin permitir salir del sitio. */
    history.pushState(sutilHistoryState("homeSection","home"), document.title, location.href);
    sutilBackGuardReady = true;
  }catch(_){
    sutilBackGuardReady = false;
  }
}

function sutilPushSectionHistory(sectionId){
  if(!sutilBackGuardReady || !window.history || !history.pushState)return;
  try{
    const state=history.state||{};
    if(state.sutilAdmin && state.sutilSection===sectionId && state.sutilKind!=="root")return;
    history.pushState(sutilHistoryState(sectionId,"section"), document.title, location.href);
  }catch(_){}
}

function sutilRestoreHomeBarrier(){
  try{
    history.pushState(sutilHistoryState("homeSection","home"), document.title, location.href);
  }catch(_){}
}

function sutilRenderHistorySection(sectionId){
  const target=sectionId||"homeSection";
  if(target==="homeSection"){
    showHome(false, false);
  }else{
    openSection(target, false, false);
  }
}

function sutilIsAtHomeRoot(){
  return currentSectionId==="homeSection";
}

window.addEventListener("popstate",()=>{
  if(
    !sutilBackGuardReady ||
    sutilBackHandling ||
    !document.body.classList.contains("sutil-admin-authenticated")
  )return;

  sutilBackHandling=true;
  try{
    /* Una vista interna (modal/detalle) tiene prioridad. Como esas vistas no
       deben consumir una sección completa, cerramos la vista y restauramos la
       entrada de la sección actual. */
    if(sutilCloseTransientViewBeforeBack()){
      sutilPushSectionHistory(currentSectionId||"homeSection");
      return;
    }

    const state=history.state||{};

    /* Nunca dejar que Atrás atraviese la barrera raíz hacia otra página.
       La entrada HOME sigue existiendo justo delante de ROOT. En vez de crear
       otra entrada y descartar el historial futuro, regresamos a HOME con
       history.go(1). Este patrón mantiene una barrera permanente en Inicio. */
    if(state.sutilAdmin && state.sutilKind==="root"){
      sutilRenderHistorySection("homeSection");
      sutilResetNavigationStack();
      try{
        history.go(1);
      }catch(_){
        sutilRestoreHomeBarrier();
      }
      return;
    }

    if(state.sutilAdmin){
      const target=state.sutilSection||"homeSection";
      if(sutilNavStack[sutilNavStack.length-1]!==target){
        const idx=sutilNavStack.lastIndexOf(target);
        if(idx>=0)sutilNavStack=sutilNavStack.slice(0,idx+1);
        else sutilNavStack.push(target);
        sutilSyncPreviousSection();
      }
      sutilRenderHistorySection(target);
      return;
    }

    /* Seguridad adicional: si Chrome entrega un estado externo inesperado,
       reconstruimos Inicio en vez de abandonar Sutil. */
    sutilRenderHistorySection("homeSection");
    try{
      history.pushState(sutilHistoryState("homeSection","root"), document.title, location.href);
      history.pushState(sutilHistoryState("homeSection","home"), document.title, location.href);
    }catch(_){}
    sutilResetNavigationStack();
  }finally{
    setTimeout(()=>{sutilBackHandling=false;},0);
  }
});
let selectedClientStatementId = null;
let clientAccountStatementData = null;
let selectedClientChatId = null;
let selectedClientDetailData = null;
let clientChatPollTimer = null;
let clientChatPollBusy = false;
let chatCenterActivityMap = new Map();
let chatCenterClientId = null;
let chatCenterClient = null;
let chatCenterPollTimer = null;
let chatCenterPollBusy = false;
let locationRows = [];
let selectedLocationClientId = null;
let locationsPollTimer = null;
let locationsPollBusy = false;

/* SUTIL · solicitud puntual de ubicación desde Ubicaciones.
   Solo se dispara por selección directa del empresario/ADM, nunca por el
   refresco automático de 10 s. Evita convertir el módulo en rastreo continuo. */
let locationsRequestBusyClientId = null;
const locationsRequestLastAt = new Map();
let selectedClientLoanRows = [];
let historicalModeActive = false;
let forgottenOperationMode = false;
let forgottenCashBridge = null;
let historicalClientImportToken = null;
let historicalClientImportData = null;

let editingBaseMovementId = null;
let baseMovementRows = [];


let collectionAccountsCache=[];
let collectionCatalog={};
let collectionAccountEditingId=null;

async function ensureCollectionCatalog(){
  if(Object.keys(collectionCatalog).length)return collectionCatalog;
  const data=await api('/api/admin/collection-methods/catalog');
  collectionCatalog=data.countries||{};
  return collectionCatalog;
}

function collectionCountryProviders(code){
  const c=String(code||'OTHER').toUpperCase();
  return collectionCatalog[c]||collectionCatalog.OTHER||[];
}

function collectionIdentifierLabel(value){
  const labels={cpf_cnpj:'CPF / CNPJ',email:'E-mail',phone:'Celular',random_key:'Llave aleatoria',document:'Documento',alphanumeric_key:'Llave alfanumérica',bre_b_key:'Llave Bre-B',account:'Cuenta',agency_account:'Agencia + cuenta',cci:'CCI',clabe:'CLABE',card:'Tarjeta',alias:'Alias',cbu:'CBU',cvu:'CVU',iban:'IBAN',rut:'RUT',routing_account:'Routing + account',qr:'Código QR',custom:'Otro'};
  return labels[value]||String(value||'Identificador');
}

async function syncCollectionProviderOptions(){
  await ensureCollectionCatalog();
  const providers=collectionCountryProviders(collectionAccountCountry.value);
  collectionAccountProvider.innerHTML=providers.map(p=>`<option value="${escapeHtml(p.code)}">${escapeHtml(p.name)}</option>`).join('');
  syncCollectionProviderFields();
}

function syncCollectionProviderFields(){
  const provider=collectionCountryProviders(collectionAccountCountry.value).find(p=>p.code===collectionAccountProvider.value)||{};
  const types=provider.identifier_types||['custom'];
  collectionAccountIdentifierType.innerHTML=types.map(t=>`<option value="${escapeHtml(t)}">${escapeHtml(collectionIdentifierLabel(t))}</option>`).join('');
  if(!collectionAccountName.value.trim() && provider.name)collectionAccountName.value=provider.name;
  const defaults=ROUTE_COUNTRY_DEFAULTS[collectionAccountCountry.value]||ROUTE_COUNTRY_DEFAULTS.OTHER;
  if(!collectionAccountCurrency.value.trim())collectionAccountCurrency.value=defaults.currency||'';
}

async function loadCollectionAccounts(){
  try{
    await ensureCollectionCatalog();
    collectionAccountsCache=await api('/api/admin/collection-accounts');
    renderCollectionAccounts();
    if(!collectionAccountProvider.options.length)await syncCollectionProviderOptions();
  }catch(e){
    collectionAccountsList.innerHTML=`<div class="result error">${escapeHtml(e.message)}</div>`;
  }
}

function renderCollectionAccounts(){
  if(!collectionAccountsCache.length){
    collectionAccountsList.innerHTML='<div class="muted">Todavía no hay métodos de cobro registrados.</div>';
    return;
  }
  collectionAccountsList.innerHTML=collectionAccountsCache.map(a=>`
    <div class="card" style="margin-bottom:10px">
      <div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap">
        <div>
          <strong>${escapeHtml(a.display_name)}</strong>
          <div class="muted" style="margin-top:3px">${escapeHtml(a.country_code)} · ${escapeHtml(a.provider_name)}${a.is_company_default?' · ⭐ Predeterminada':''}</div>
        </div>
        <span class="badge">${a.active?'ACTIVA':'INACTIVA'}</span>
      </div>
      <div class="grid" style="margin-top:10px">
        <div><small class="muted">Identificador</small><div>${escapeHtml(a.identifier_value||'—')}</div></div>
        <div><small class="muted">Titular</small><div>${escapeHtml(a.holder_name||'—')}</div></div>
        <div><small class="muted">Rutas</small><div>${Number(a.route_assignments||0)}</div></div>
        <div><small class="muted">Excepciones clientes</small><div>${Number(a.client_overrides||0)}</div></div>
      </div>
      ${a.qr_url?`<img src="${escapeHtml(a.qr_url)}" alt="QR" style="width:90px;height:90px;object-fit:contain;border:1px solid #dfe5eb;border-radius:12px;margin-top:10px">`:''}
      <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:10px">
        <button class="btn secondary" type="button" onclick="editCollectionAccount(${Number(a.id)})">✏️ Editar</button>
        <button class="btn danger" type="button" onclick="deleteCollectionAccount(${Number(a.id)})">🗑️ Eliminar</button>
      </div>
    </div>`).join('');
}

async function resetCollectionAccountForm(){
  collectionAccountEditingId=null;
  collectionAccountFormTitle.textContent='Registrar método de cobro';
  collectionAccountCountry.value='BR';
  collectionAccountName.value='';collectionAccountCurrency.value='BRL';collectionAccountIdentifier.value='';
  collectionAccountHolder.value='';collectionAccountBank.value='';collectionAccountReference.value='';
  collectionAccountCopyCode.value='';collectionAccountInstructions.value='';collectionAccountQrFile.value='';
  collectionAccountActive.checked=true;collectionAccountDefault.checked=false;
  collectionAccountMessage.textContent='';
  await syncCollectionProviderOptions();
}

async function editCollectionAccount(id){
  await ensureCollectionCatalog();
  const a=collectionAccountsCache.find(x=>Number(x.id)===Number(id));if(!a)return;
  collectionAccountEditingId=Number(id);collectionAccountFormTitle.textContent=`Editar · ${a.display_name}`;
  collectionAccountCountry.value=a.country_code||'OTHER';await syncCollectionProviderOptions();
  if([...collectionAccountProvider.options].some(o=>o.value===a.provider_code))collectionAccountProvider.value=a.provider_code;
  syncCollectionProviderFields();
  collectionAccountName.value=a.display_name||'';collectionAccountCurrency.value=a.currency_code||'';
  if([...collectionAccountIdentifierType.options].some(o=>o.value===a.identifier_type))collectionAccountIdentifierType.value=a.identifier_type;
  collectionAccountIdentifier.value=a.identifier_value||'';collectionAccountHolder.value=a.holder_name||'';
  collectionAccountBank.value=a.bank_name||'';collectionAccountReference.value=a.account_reference||'';
  collectionAccountCopyCode.value=a.copy_code||'';collectionAccountInstructions.value=a.instructions||'';
  collectionAccountActive.checked=Boolean(a.active);collectionAccountDefault.checked=Boolean(a.is_company_default);
  collectionAccountQrFile.value='';collectionAccountMessage.textContent='Editando cuenta registrada.';
  window.scrollTo({top:0,behavior:'smooth'});
}

async function saveCollectionAccount(){
  collectionAccountMessage.className='result';collectionAccountMessage.textContent='Guardando...';
  try{
    const provider=collectionCountryProviders(collectionAccountCountry.value).find(p=>p.code===collectionAccountProvider.value)||{};
    const payload={display_name:collectionAccountName.value.trim(),country_code:collectionAccountCountry.value,provider_code:collectionAccountProvider.value,
      provider_name:provider.name||collectionAccountProvider.options[collectionAccountProvider.selectedIndex]?.text||'Método',method_type:provider.method_type||'custom',
      identifier_type:collectionAccountIdentifierType.value||null,identifier_value:collectionAccountIdentifier.value.trim()||null,
      holder_name:collectionAccountHolder.value.trim()||null,bank_name:collectionAccountBank.value.trim()||null,account_reference:collectionAccountReference.value.trim()||null,
      copy_code:collectionAccountCopyCode.value.trim()||null,instructions:collectionAccountInstructions.value.trim()||null,currency_code:collectionAccountCurrency.value.trim().toUpperCase()||null,
      active:collectionAccountActive.checked,is_company_default:collectionAccountDefault.checked};
    if(!payload.display_name)throw new Error('Escribe un nombre para identificar la cuenta.');
    const url=collectionAccountEditingId?`/api/admin/collection-accounts/${collectionAccountEditingId}`:'/api/admin/collection-accounts';
    const method=collectionAccountEditingId?'PUT':'POST';
    const result=await api(url,{method,headers:{'Content-Type':'application/json'},body:JSON.stringify(payload)});
    const accountId=collectionAccountEditingId||result.id;
    const file=collectionAccountQrFile.files?.[0];
    if(file){const fd=new FormData();fd.append('file',file);await api(`/api/admin/collection-accounts/${accountId}/qr`,{method:'POST',body:fd});}
    collectionAccountMessage.textContent=result.message||'Guardado correctamente';
    await loadCollectionAccounts();await resetCollectionAccountForm();
  }catch(e){collectionAccountMessage.className='result error';collectionAccountMessage.textContent=e.message;}
}

async function deleteCollectionAccount(id){
  if(!await sutilConfirm('¿Eliminar este método de cobro?'))return;
  try{const r=await api(`/api/admin/collection-accounts/${id}`,{method:'DELETE'});alert(r.message||'Eliminado');await loadCollectionAccounts();}
  catch(e){alert(e.message);}
}

async function fillCollectionAccountSelect(select,countryCode,selectedId=null,inheritLabel='Usar predeterminada de la empresa'){
  if(!select)return;
  try{
    if(!collectionAccountsCache.length)collectionAccountsCache=await api('/api/admin/collection-accounts?active_only=true');
    const code=String(countryCode||'').toUpperCase();
    const rows=collectionAccountsCache.filter(a=>a.active && (!code||String(a.country_code).toUpperCase()===code));
    select.innerHTML=`<option value="">${escapeHtml(inheritLabel)}</option>`+rows.map(a=>`<option value="${a.id}">${escapeHtml(a.display_name)} · ${escapeHtml(a.provider_name)}</option>`).join('');
    if(selectedId && rows.some(a=>Number(a.id)===Number(selectedId)))select.value=String(selectedId);
    const owner=!!(currentUser&&['company_owner','sutil_owner'].includes(currentUser.role));
    select.disabled=!owner;
  }catch(e){select.innerHTML='<option value="">Sin cuentas disponibles</option>';}
}

async function syncEditClientCollectionAccounts(){
  const routeId=Number(editClientRoute.value||0);
  let country='';
  try{
    const routes=await api('/api/admin/routes');
    country=routes.find(r=>Number(r.id)===routeId)?.country_code||'';
  }catch(_){}
  await fillCollectionAccountSelect(editClientCollectionAccount,country,null,'Usar cuenta de la ruta');
}

const ROUTE_COUNTRY_DEFAULTS={
 BR:{language:"pt",currency:"BRL",symbol:"R$"},CO:{language:"es",currency:"COP",symbol:"$"},
 US:{language:"en",currency:"USD",symbol:"US$"},ES:{language:"es",currency:"EUR",symbol:"€"},
 MX:{language:"es",currency:"MXN",symbol:"$"},PE:{language:"es",currency:"PEN",symbol:"S/"},
 EC:{language:"es",currency:"USD",symbol:"US$"},AR:{language:"es",currency:"ARS",symbol:"$"},
 CL:{language:"es",currency:"CLP",symbol:"$"},CR:{language:"es",currency:"CRC",symbol:"₡"},
 PY:{language:"es",currency:"PYG",symbol:"₲"},UY:{language:"es",currency:"UYU",symbol:"$U"},
 OTHER:{language:"es",currency:"USD",symbol:"$"}
};
function syncRouteCountry(){
 const d=ROUTE_COUNTRY_DEFAULTS[routeCountry.value]||ROUTE_COUNTRY_DEFAULTS.OTHER;
 routeLanguage.value=d.language;routeCurrencyCode.value=d.currency;routeCurrencySymbol.value=d.symbol;
}


function clientPhotoHtml(client, large=false){
  const url = client?.photo_url;
  if(url){
    return `<img class="${large ? "client-photo-large" : "client-photo"}" src="${url}" alt="Foto de ${client.name || "cliente"}" loading="lazy" decoding="async">`;
  }
  const initial = String(client?.name || "C").trim().charAt(0).toUpperCase() || "C";
  const cls = large ? "client-photo-large" : "client-photo";
  return `<div class="${cls}" style="display:flex;align-items:center;justify-content:center;font-weight:800;color:#5d6874">${initial}</div>`;
}

function previewClientPhoto(input, previewId){
  const preview=document.getElementById(previewId);
  const file=input.files?.[0];
  if(!file){ preview.removeAttribute("src"); preview.style.display="none"; return; }
  if(!["image/jpeg","image/png","image/webp"].includes(file.type)){
    alert("La foto debe ser JPG, PNG o WEBP."); input.value=""; return;
  }
  if(file.size > 5*1024*1024){
    alert("La foto supera el límite de 5 MB."); input.value=""; return;
  }
  preview.src=URL.createObjectURL(file);
  preview.style.display="block";
}

async function uploadClientPhoto(clientId,file){
  if(!file)return null;
  const form=new FormData();
  form.append("file",file);
  return api(`/api/admin/clients/${clientId}/photo`,{method:"POST",body:form});
}

function formatDateEs(value){
  if(!value)return "—";
  const parts=String(value).slice(0,10).split("-");
  return parts.length===3?`${parts[2]}/${parts[1]}/${parts[0]}`:String(value);
}

function money(value) {
  return new Intl.NumberFormat("pt-BR", {style:"currency", currency:"BRL"}).format(Number(value || 0));
}


const SUTIL_OFFLINE_DB = "sutil_offline_v2";
const SUTIL_OFFLINE_DB_VERSION = 1;
let offlineDbPromise = null;
let offlineBootstrapInProgress = false;

function offlineDeviceId(){
  let value=localStorage.getItem("sutil_offline_device_id");
  if(!value){
    const random=(globalThis.crypto?.randomUUID?.() || `${Date.now()}-${Math.random().toString(16).slice(2)}`);
    value=`sutil-${random}`;
    localStorage.setItem("sutil_offline_device_id",value);
  }
  return value;
}


function offlineScope(){
  const userId=currentUser?.id || sessionStorage.getItem("sutil_offline_user_id") || "";
  const companyId=currentUser?.company_id || sessionStorage.getItem("sutil_offline_company_id") || "";
  return userId && companyId ? `${companyId}:${userId}` : "";
}

function offlineScopedKey(key){
  const scope=offlineScope();
  return `${scope || "anonymous"}|${key}`;
}

function offlineScopedMetaKey(key){
  return offlineScopedKey(`meta:${key}`);
}

function offlineRowBelongsToCurrentUser(row){
  if(!currentUser)return false;
  return (
    Number(row?.user_id)===Number(currentUser.id) &&
    Number(row?.company_id)===Number(currentUser.company_id)
  );
}

function setOfflineStatus(mode,extra=""){
  const badge=document.getElementById("offlineStatusBadge");
  if(!badge)return;
  badge.classList.remove("online","offline","syncing","ready");

  if(mode==="online"){
    badge.classList.add("online");
    badge.textContent=`🟢 Online${extra?` · ${extra}`:""}`;
  }else if(mode==="offline"){
    badge.classList.add("offline");
    badge.textContent=`🟠 Sin Internet${extra?` · ${extra}`:""}`;
  }else if(mode==="syncing"){
    badge.classList.add("syncing");
    badge.textContent=`🔄 Sincronizando${extra?` · ${extra}`:""}`;
  }else{
    badge.classList.add("ready");
    badge.textContent=`⏳ Preparando modo offline${extra?` · ${extra}`:""}`;
  }
}

function openOfflineDb(){
  if(offlineDbPromise)return offlineDbPromise;
  if(!("indexedDB" in window)){
    offlineDbPromise=Promise.resolve(null);
    return offlineDbPromise;
  }

  offlineDbPromise=new Promise((resolve,reject)=>{
    const request=indexedDB.open(SUTIL_OFFLINE_DB,SUTIL_OFFLINE_DB_VERSION);

    request.onupgradeneeded=()=>{
      const db=request.result;
      if(!db.objectStoreNames.contains("cache")){
        db.createObjectStore("cache",{keyPath:"key"});
      }
      if(!db.objectStoreNames.contains("queue")){
        const store=db.createObjectStore("queue",{keyPath:"operation_id"});
        store.createIndex("status","status",{unique:false});
        store.createIndex("created_at","created_at",{unique:false});
      }
      if(!db.objectStoreNames.contains("meta")){
        db.createObjectStore("meta",{keyPath:"key"});
      }
    };

    request.onsuccess=()=>resolve(request.result);
    request.onerror=()=>reject(request.error);
  }).catch(()=>{
    offlineDbPromise=Promise.resolve(null);
    return null;
  });

  return offlineDbPromise;
}

async function offlineStorePut(storeName,value){
  const db=await openOfflineDb();
  if(!db)return false;
  return new Promise(resolve=>{
    try{
      const tx=db.transaction(storeName,"readwrite");
      tx.objectStore(storeName).put(value);
      tx.oncomplete=()=>resolve(true);
      tx.onerror=()=>resolve(false);
      tx.onabort=()=>resolve(false);
    }catch(_){
      resolve(false);
    }
  });
}

async function offlineStoreGet(storeName,key){
  const db=await openOfflineDb();
  if(!db)return undefined;
  return new Promise(resolve=>{
    try{
      const tx=db.transaction(storeName,"readonly");
      const req=tx.objectStore(storeName).get(key);
      req.onsuccess=()=>resolve(req.result);
      req.onerror=()=>resolve(undefined);
    }catch(_){
      resolve(undefined);
    }
  });
}

async function offlineStoreCount(storeName,indexName=null,indexValue=null){
  const db=await openOfflineDb();
  if(!db)return 0;
  return new Promise(resolve=>{
    try{
      const tx=db.transaction(storeName,"readonly");
      const store=tx.objectStore(storeName);
      const source=indexName?store.index(indexName):store;
      const req=indexName?source.count(indexValue):source.count();
      req.onsuccess=()=>resolve(Number(req.result||0));
      req.onerror=()=>resolve(0);
    }catch(_){
      resolve(0);
    }
  });
}


async function offlineStoreGetAll(storeName){
  const db=await openOfflineDb();
  if(!db)return [];
  return new Promise(resolve=>{
    try{
      const tx=db.transaction(storeName,"readonly");
      const req=tx.objectStore(storeName).getAll();
      req.onsuccess=()=>resolve(Array.isArray(req.result)?req.result:[]);
      req.onerror=()=>resolve([]);
    }catch(_){
      resolve([]);
    }
  });
}

function offlineUuid(prefix="op"){
  const id=(globalThis.crypto?.randomUUID?.() || `${Date.now()}-${Math.random().toString(16).slice(2)}`);
  return `${prefix}-${id}`;
}

function offlineNextLocalId(){
  let value=Number(localStorage.getItem("sutil_offline_local_id") || "-1");
  if(!Number.isFinite(value) || value>=0)value=-1;
  localStorage.setItem("sutil_offline_local_id",String(value-1));
  return value;
}

function offlineNetworkFailure(error){
  const msg=String(error?.message||"");
  return !navigator.onLine ||
    msg.includes("No fue posible conectar con el servidor") ||
    msg.includes("Failed to fetch") ||
    msg.includes("NetworkError");
}

async function offlinePendingStats(){
  const rows=(await offlineStoreGetAll("queue"))
    .filter(offlineRowBelongsToCurrentUser);
  return {
    pending:rows.filter(r=>r.status==="pending").length,
    failed:rows.filter(r=>r.status==="failed").length,
    confirmation:rows.filter(r=>r.status==="pending_confirmation").length
  };
}

async function updateOfflineBadgeFromQueue(mode=null){
  const stats=await offlinePendingStats();
  const parts=[];
  if(stats.pending)parts.push(`${stats.pending} pendiente(s)`);
  if(stats.failed)parts.push(`${stats.failed} error(es)`);
  if(stats.confirmation)parts.push(`${stats.confirmation} por confirmar`);
  const extra=parts.join(" · ");

  if(mode)setOfflineStatus(mode,extra);
  else setOfflineStatus(navigator.onLine?"online":"offline",extra || (navigator.onLine?"listo offline":"datos locales"));
}

async function offlineMutateBootstrap(mutator){
  const bootstrap=await offlineCacheGet("/api/sync/bootstrap");
  if(!bootstrap)return null;
  const copy=structuredClone ? structuredClone(bootstrap) : JSON.parse(JSON.stringify(bootstrap));
  mutator(copy);
  await offlineCachePut("/api/sync/bootstrap",copy);
  return copy;
}

function offlineRouteFromBootstrap(bootstrap,routeId){
  return (bootstrap?.routes||[]).find(r=>Number(r.id)===Number(routeId))||null;
}

function offlineClientFromBootstrap(bootstrap,clientId){
  return (bootstrap?.clients||[]).find(c=>Number(c.id)===Number(clientId))||null;
}

async function offlineClientLocalRef(clientId){
  const bootstrap=await offlineCacheGet("/api/sync/bootstrap");
  const client=offlineClientFromBootstrap(bootstrap,clientId);
  return client?.local_ref || client?._offline_local_ref || null;
}

async function offlineLoanLocalRef(loanId){
  const bootstrap=await offlineCacheGet("/api/sync/bootstrap");
  const loan=(bootstrap?.loans||[]).find(l=>Number(l.id)===Number(loanId));
  return loan?.local_ref || null;
}

function offlineFindInstallmentIdentity(loan,payload){
  if(!loan)return null;
  const rows=Array.isArray(loan.installments)?loan.installments:[];
  let row=rows.find(i=>Number(i.id)===Number(payload.installment_id));
  if(row)return row;
  const due=String(payload.installment_due_date||"").slice(0,10);
  const number=Number(payload.installment_number||0);
  let candidates=rows.filter(i=>!due || String(i.due_date||"").slice(0,10)===due);
  if(number)candidates=candidates.filter(i=>Number(i.number)===number);
  return candidates.length===1?candidates[0]:null;
}

async function offlineEnrichIdentityPayload(entityType,payload){
  const data={...(payload||{})};
  if(entityType!=="payment")return data;
  const bootstrap=await offlineCacheGet("/api/sync/bootstrap");
  if(!bootstrap)return data;

  let client=(bootstrap.clients||[]).find(c=>Number(c.id)===Number(data.client_id));
  if(!client && data.client_code){
    client=(bootstrap.clients||[]).find(c=>String(c.client_code||"")===String(data.client_code||""));
  }
  if(!client && data.client_document){
    const doc=String(data.client_document||"").replace(/\D/g,"");
    client=(bootstrap.clients||[]).find(c=>String(c.document_number||"").replace(/\D/g,"")===doc);
  }
  if(client){
    data.client_id=client.id;
    data.client_uuid=client.client_uuid||data.client_uuid||null;
    data.client_code=client.client_code||data.client_code||null;
    data.client_document=client.document_number||data.client_document||null;
  }

  let loan=(bootstrap.loans||[]).find(l=>Number(l.id)===Number(data.loan_id));
  if(!loan && data.loan_uuid){
    loan=(bootstrap.loans||[]).find(l=>String(l.loan_uuid||"")===String(data.loan_uuid));
  }
  if(!loan && client){
    const clientLoans=(bootstrap.loans||[]).filter(l=>Number(l.client_id)===Number(client.id) && l.status==="active");
    const due=String(data.installment_due_date||"").slice(0,10);
    const num=Number(data.installment_number||0);
    const matches=clientLoans.filter(l=>(l.installments||[]).some(i=>(!due || String(i.due_date||"").slice(0,10)===due) && (!num || Number(i.number)===num)));
    if(matches.length===1)loan=matches[0];
  }
  if(loan){
    data.loan_id=loan.id;
    data.loan_uuid=loan.loan_uuid||data.loan_uuid||null;
    const installment=offlineFindInstallmentIdentity(loan,data);
    if(installment){
      data.installment_id=installment.id;
      data.installment_uuid=installment.installment_uuid||data.installment_uuid||null;
      data.installment_number=installment.number;
      data.installment_due_date=installment.due_date;
      data.installment_amount_due=installment.amount_due;
    }
  }

  // La ruta operativa NO se toma de un ID histórico guardado offline.
  // Primero usamos access_routes, que el servidor ya filtró por las rutas
  // actualmente autorizadas para este usuario.
  let route=null;
  const accessRoutes=Array.isArray(client?.access_routes)?client.access_routes:[];
  if(accessRoutes.length){
    if(data.route_uuid){
      route=accessRoutes.find(r=>String(r.route_uuid||"")===String(data.route_uuid))||null;
    }
    if(!route && client?.route_uuid){
      route=accessRoutes.find(r=>String(r.route_uuid||"")===String(client.route_uuid))||null;
    }
    if(!route && accessRoutes.length===1)route=accessRoutes[0];
  }
  if(!route && client?.route_id)route=(bootstrap.routes||[]).find(r=>Number(r.id)===Number(client.route_id));
  if(!route && loan?.route_id)route=(bootstrap.routes||[]).find(r=>Number(r.id)===Number(loan.route_id));
  if(!route && data.route_uuid)route=(bootstrap.routes||[]).find(r=>String(r.route_uuid||"")===String(data.route_uuid));
  if(route){
    data.route_id=route.id;
    data.route_uuid=route.route_uuid||data.route_uuid||null;
  }else{
    // El servidor reconstruirá la ruta desde cliente/crédito; no reenviamos
    // una ruta vieja que pueda provocar una falsa denegación.
    delete data.route_id;
    delete data.route_uuid;
  }
  data.offline_protocol=3;
  return data;
}

function offlineProvisionalClientCode(name,documentNumber){
  const words=String(name||"").trim().split(/\s+/).filter(Boolean);
  let initials="";
  if(words.length>=2)initials=(words[0][0]||"")+(words[1][0]||"");
  else if(words.length===1)initials=words[0].slice(0,2);
  const digits=String(documentNumber||"").replace(/\D/g,"");
  return `${initials.toUpperCase()}${digits.slice(-4) || "0000"}`;
}

function offlineDateAddDays(iso,days){
  const d=new Date(`${iso}T12:00:00`);
  d.setDate(d.getDate()+days);
  return d.toISOString().slice(0,10);
}

function offlineLoanInstallments(payload,total){
  const count=Math.max(1,Number(payload.installment_count||1));
  const manual=Array.isArray(payload.manual_installments)&&payload.manual_installments.length
    ? payload.manual_installments
    : null;
  if(manual){
    return manual.map((r,i)=>({
      id:offlineNextLocalId(),
      installment_uuid:null,
      number:Number(r.number||i+1),
      due_date:r.due_date,
      amount_due:Number(r.amount||0),
      amount_paid:0,
      status:"pending"
    }));
  }

  const regular=Number(payload.installment_amount||0) || Math.ceil((total/count)/100)*100;
  const rows=[];
  let current=payload.start_date;

  for(let i=0;i<count;i++){
    if(i>0){
      if(payload.frequency==="weekly")current=offlineDateAddDays(current,7);
      else if(payload.frequency==="monthly"){
        const d=new Date(`${current}T12:00:00`);
        d.setMonth(d.getMonth()+1);
        current=d.toISOString().slice(0,10);
      }else{
        current=offlineDateAddDays(current,1);
        let guard=0;
        while(guard<8){
          const day=new Date(`${current}T12:00:00`).getDay();
          if((day===0 && payload.include_sundays===false) ||
             (day===6 && payload.include_saturdays===false)){
            current=offlineDateAddDays(current,1);
            guard++;
            continue;
          }
          break;
        }
      }
    }

    const amount=i===count-1
      ? Math.max(0,total-regular*(count-1))
      : regular;

    rows.push({
      id:offlineNextLocalId(),
      installment_uuid:null,
      number:i+1,
      due_date:current,
      amount_due:Number(amount.toFixed(2)),
      amount_paid:0,
      status:"pending"
    });
  }
  return rows;
}

async function offlineAdminClientsFromBootstrap(){
  const bootstrap=await offlineCacheGet("/api/sync/bootstrap");
  if(!bootstrap)return [];
  const routes=bootstrap.routes||[];
  return (bootstrap.clients||[]).map(c=>{
    const route=routes.find(r=>Number(r.id)===Number(c.route_id));
    return {
      id:c.id,
      client_uuid:c.client_uuid||null,
      route_uuid:c.route_uuid||route?.route_uuid||null,
      _offline:!!c.local_ref,
      _offline_local_ref:c.local_ref||null,
      name:c.name,
      full_name:c.name,
      document_number:c.document_number,
      client_code:c.client_code,
      phone:c.phone,
      phone2:c.phone2||null,
      fixed_phone:c.fixed_phone||null,
      email:c.email||null,
      address:c.address||"",
      address_number:c.address_number||null,
      neighborhood:c.neighborhood||null,
      postal_code:c.postal_code||null,
      city:c.city||"",
      route_id:c.route_id,
      route_name:c.route_name||route?.name||"Sin ruta",
      access_routes:Array.isArray(c.access_routes)
        ? c.access_routes
        : (route ? [{id:route.id,name:route.name,source:"client"}] : []),
      assigned_user_id:currentUser?.id||null,
      assigned_user_name:currentUser?.name||null,
      balance:Number(c.balance||0),
      next_due_date:c.next_due_date||null,
      reported:!!c.reported,
      active:true,
      status:c.local_ref?"PENDIENTE DE SINCRONIZAR":"ACTIVO",
      color_status:c.local_ref?"warning":"current",
      days_overdue:0,
      photo_url:null
    };
  });
}

async function offlineCashRow(routeId,businessDate){
  const bootstrap=await offlineCacheGet("/api/sync/bootstrap");
  if(!bootstrap)return null;
  return (bootstrap.cash||[]).find(r=>
    Number(r.route_id)===Number(routeId) &&
    String(r.business_date).slice(0,10)===String(businessDate).slice(0,10)
  )||null;
}

function offlineCashCachePath(routeId,businessDate){
  return `/api/admin/cash?business_date=${businessDate}&route_id=${routeId}`;
}

async function offlineWriteCashCache(row){
  if(!row)return;
  await offlineCachePut(
    offlineCashCachePath(row.route_id,String(row.business_date).slice(0,10)),
    row
  );
}

async function offlineAdjustCash(routeId,businessDate,{cashDelta=0,pixDelta=0,loan=null,expense=null,payment=null}={}){
  let updated=null;
  await offlineMutateBootstrap(bootstrap=>{
    let row=(bootstrap.cash||[]).find(r=>
      Number(r.route_id)===Number(routeId) &&
      String(r.business_date).slice(0,10)===String(businessDate).slice(0,10)
    );
    if(!row)return;

    row.expected_cash=Number(row.expected_cash||0)+Number(cashDelta||0);
    row.expected_pix=Number(row.expected_pix||0)+Number(pixDelta||0);
    row.expected_total=Number(row.expected_cash||0)+Number(row.expected_pix||0);
    row.cash_collected=Number(row.cash_collected||0);
    row.pix_collected=Number(row.pix_collected||0);
    row.loans_disbursed=Number(row.loans_disbursed||0);
    row.total_expenses=Number(row.total_expenses||0);
    row.daily_loans=Array.isArray(row.daily_loans)?row.daily_loans:[];
    row.daily_expenses=Array.isArray(row.daily_expenses)?row.daily_expenses:[];

    if(payment){
      if(payment.method==="cash")row.cash_collected+=Number(payment.amount||0);
      else row.pix_collected+=Number(payment.amount||0);
    }
    if(loan){
      row.loans_disbursed+=Number(loan.amount||0);
      row.daily_loans.push({client_name:loan.client_name||"Cliente",amount:Number(loan.amount||0)});
    }
    if(expense){
      row.total_expenses+=Number(expense.amount||0);
      row.daily_expenses.push({label:expense.label||"Gasto",amount:Number(expense.amount||0)});
    }
    updated={...row};
  });
  if(updated)await offlineWriteCashCache(updated);
  return updated;
}

async function offlineQueueOperation(entityType,action,payload,{localRef=null,localId=null}={}){
  const operationId=offlineUuid("op");
  const ref=localRef || offlineUuid(entityType);
  const data=await offlineEnrichIdentityPayload(entityType,payload);

  if(["loan","payment"].includes(entityType) && Number(data.client_id)<0){
    const clientRef=await offlineClientLocalRef(Number(data.client_id));
    if(!clientRef)throw new Error("El cliente local no tiene referencia de sincronización.");
    delete data.client_id;
    data.client_local_ref=clientRef;
  }

  if(entityType==="payment" && Number(data.loan_id)<0){
    const loanRef=await offlineLoanLocalRef(Number(data.loan_id));
    if(loanRef){
      data.loan_local_ref=loanRef;
      delete data.loan_id;
      delete data.loan_uuid;
      if(Number(data.installment_id)<0)delete data.installment_id;
      delete data.installment_uuid;
    }
  }

  if(entityType==="cash" && action==="close"){
    delete data.route_id;
    delete data.business_date;
    if(Number(data.session_id)<0){
      const sessionRef=data.session_local_ref;
      delete data.session_id;
      if(!sessionRef)throw new Error("La caja local no tiene referencia de sincronización.");
    }else{
      delete data.session_local_ref;
    }
  }

  if(!currentUser?.id || !currentUser?.company_id){
    throw new Error("No se pudo identificar al usuario para guardar el movimiento offline.");
  }

  const row={
    operation_id:operationId,
    local_ref:ref,
    entity_type:entityType,
    action,
    occurred_at:new Date().toISOString(),
    payload:data,
    status:"pending",
    delivery_state:"local_pending",
    protocol_version:3,
    created_at:new Date().toISOString(),
    local_id:localId,
    user_id:Number(currentUser.id),
    company_id:Number(currentUser.company_id),
    error:null
  };
  await offlineStorePut("queue",row);
  await updateOfflineBadgeFromQueue("offline");
  return row;
}

function offlineAllocatePaymentInBootstrap(data,clientId,amount){
  let remaining=Number(amount||0);
  const loans=(data.loans||[])
    .filter(l=>Number(l.client_id)===Number(clientId) && l.status==="active")
    .sort((a,b)=>Number(a.id||0)-Number(b.id||0));

  for(const loan of loans){
    const installments=(loan.installments||[])
      .slice()
      .sort((a,b)=>{
        const d=String(a.due_date||"").localeCompare(String(b.due_date||""));
        return d!==0?d:Number(a.number||0)-Number(b.number||0);
      });

    for(const inst of installments){
      if(remaining<=0)break;
      const due=Number(inst.amount_due||0);
      const paid=Number(inst.amount_paid||0);
      const pending=Math.max(0,due-paid);
      if(pending<=0)continue;

      const applied=Math.min(remaining,pending);
      inst.amount_paid=Number((paid+applied).toFixed(2));
      if(inst.amount_paid>=due-0.005){
        inst.amount_paid=due;
        inst.status="paid";
      }else{
        inst.status="partial";
      }
      remaining=Number((remaining-applied).toFixed(2));
    }
    if(remaining<=0)break;
  }
}

function offlineNextPendingReceiptForClient(receiptsByClient,cursor,clientId){
  const list=receiptsByClient.get(Number(clientId))||[];
  const index=cursor.get(Number(clientId))||0;
  const receipt=index<list.length?list[index]:null;
  if(receipt)cursor.set(Number(clientId),index+1);
  return receipt;
}

async function offlineApplyLocalMutation(entityType,action,payload,queueRow){
  const today=localTodayIso();

  if(entityType==="client" && action==="create"){
    const localId=queueRow.local_id;
    const code=offlineProvisionalClientCode(payload.name,payload.document_number);
    const bootstrap=await offlineMutateBootstrap(data=>{
      const route=offlineRouteFromBootstrap(data,payload.route_id);
      data.clients=data.clients||[];
      data.clients.push({
        id:localId,
        client_uuid:null,
        route_uuid:route?.route_uuid||null,
        local_ref:queueRow.local_ref,
        name:payload.name,
        phone:payload.phone,
        document_number:payload.document_number,
        client_code:code,
        address:payload.address,
        address_number:payload.address_number||null,
        neighborhood:payload.neighborhood||null,
        postal_code:payload.postal_code||null,
        city:payload.city,
        route_id:payload.route_id,
        balance:0,
        next_due_date:null,
        reported:false
      });
    });
    const adminClients=await offlineAdminClientsFromBootstrap();
    await offlineCachePut("/api/admin/clients",adminClients);
    const route=offlineRouteFromBootstrap(bootstrap,payload.route_id);
    return {
      offline_queued:true,
      id:localId,
      client_code:code,
      route:route?.name||null,
      message:"Cliente guardado sin Internet. Se sincronizará automáticamente."
    };
  }

  if(entityType==="loan" && action==="create"){
    const localId=queueRow.local_id;
    const principal=Number(payload.principal_amount||0);
    const interest=Number(payload.interest_rate||0);
    const total=Number((principal*(1+interest/100)).toFixed(2));
    const count=Math.max(1,Number(payload.installment_count||1));
    const installments=offlineLoanInstallments(payload,total);
    let clientName="Cliente";
    let routeId=null;
    let routeName="Sin ruta";

    await offlineMutateBootstrap(data=>{
      const client=offlineClientFromBootstrap(data,payload.client_id);
      if(client){
        clientName=client.name||"Cliente";
        routeId=client.route_id;
        client.balance=Number(client.balance||0)+total;
        client.next_due_date=installments[0]?.due_date||null;
      }
      const route=offlineRouteFromBootstrap(data,routeId);
      routeName=route?.name||"Sin ruta";
      data.loans=data.loans||[];
      data.loans.push({
        id:localId,
        loan_uuid:null,
        route_uuid:route?.route_uuid||null,
        local_ref:queueRow.local_ref,
        client_id:payload.client_id,
        route_id:routeId,
        principal_amount:principal,
        interest_rate:interest,
        total_amount:total,
        installment_count:count,
        installment_amount:Number(payload.installment_amount||installments[0]?.amount_due||0),
        frequency:payload.frequency,
        start_date:payload.start_date,
        loan_date:payload.loan_date||payload.start_date,
        first_installment_date:installments[0]?.due_date||payload.first_installment_date||payload.start_date,
        delivery_method:payload.delivery_method,
        status:"active",
        installments
      });
    });

    const adminClients=await offlineAdminClientsFromBootstrap();
    await offlineCachePut("/api/admin/clients",adminClients);

    const method=String(payload.delivery_method||"cash").toLowerCase();
    const mixedCash=method==="mixed"?Number(payload.cash_amount||0):0;
    const mixedPix=method==="mixed"?Number(payload.pix_amount||0):0;
    if(routeId){
      await offlineAdjustCash(routeId,today,{
        cashDelta:method==="cash"?-principal:(method==="mixed"?-mixedCash:0),
        pixDelta:method==="cash"?0:(method==="mixed"?-mixedPix:-principal),
        loan:{client_name:clientName,amount:principal}
      });
    }

    return {
      offline_queued:true,
      loan_id:localId,
      route_name:routeName,
      delivery_method:payload.delivery_method,
      total_amount:total,
      installment_count:count,
      installment_amount:Number(payload.installment_amount||installments[0]?.amount_due||0),
      next_due_date:installments[0]?.due_date||payload.start_date,
      client_status:"PENDIENTE DE SINCRONIZAR",
      is_overdue:false,
      message:"Crédito guardado sin Internet. Se sincronizará automáticamente."
    };
  }

  if(entityType==="payment" && action==="create"){
    const clientId=Number(payload.client_id);
    const amount=Number(payload.amount||0);
    const method=String(payload.payment_method||"cash").toLowerCase();
    let balance=0;
    let routeId=null;

    await offlineMutateBootstrap(data=>{
      const client=offlineClientFromBootstrap(data,clientId);
      if(client){
        const selectedLoan=(data.loans||[]).find(l=>
          Number(l.id)===Number(payload.loan_id) &&
          Number(l.client_id)===clientId
        );
        routeId=selectedLoan?.route_id || client.route_id;

        if(method==="pix"){
          data.pending_receipts=data.pending_receipts||[];
          data.pending_receipts.push({
            id:queueRow.local_id,
            local_ref:queueRow.local_ref,
            client_id:clientId,
            operation_id:queueRow.operation_id,
            loan_id:payload.loan_id || null,
            route_id:payload.route_id || routeId || null,
            installment_id:payload.installment_id || null,
            installment_number:payload.installment_number || null,
            installment_due_date:payload.installment_due_date || null,
            installment_amount_due:payload.installment_amount_due || null,
            amount,
            status:"checking",
            created_at:queueRow.occurred_at,
            offline_pending:true
          });
        }else{
          offlineAllocatePaymentInBootstrap(data,clientId,amount);
          client.balance=Math.max(0,Number(client.balance||0)-amount);

          const loan=(data.loans||[]).find(l=>
            Number(l.client_id)===clientId && l.status==="active"
          );
          const next=(loan?.installments||[])
            .filter(i=>Number(i.amount_paid||0)<Number(i.amount_due||0)-0.005)
            .sort((a,b)=>String(a.due_date||"").localeCompare(String(b.due_date||"")))[0];
          client.next_due_date=next?.due_date||null;
        }

        balance=Number(client.balance||0);
      }
    });

    const adminClients=await offlineAdminClientsFromBootstrap();
    await offlineCachePut("/api/admin/clients",adminClients);

    if(routeId && method!=="pix"){
      await offlineAdjustCash(routeId,payload.payment_date||today,{
        cashDelta:method==="cash"?amount:0,
        pixDelta:method==="cash"?0:amount,
        payment:{method,amount}
      });
    }

    return {
      offline_queued:true,
      payment_id:queueRow.local_id,
      balance,
      pending_confirmation:method==="pix",
      message:method==="pix"
        ? "PIX guardado sin Internet. Quedará en comprobación hasta que el ADM lo confirme."
        : "Cobro guardado sin Internet. Se sincronizará automáticamente."
    };
  }

  if(entityType==="expense" && action==="create"){
    const routeId=Number(payload.route_id);
    const amount=Number(payload.amount||0);
    const method=String(payload.payment_method||"cash").toLowerCase();

    const mixedCash=method==="mixed"?Number(payload.cash_amount||0):0;
    const mixedPix=method==="mixed"?Number(payload.pix_amount||0):0;
    await offlineAdjustCash(routeId,payload.expense_date||today,{
      cashDelta:method==="cash"?-amount:(method==="mixed"?-mixedCash:0),
      pixDelta:method==="cash"?0:(method==="mixed"?-mixedPix:-amount),
      expense:{label:payload.category||"Gasto",amount}
    });

    const path=`/api/admin/expenses?expense_date=${payload.expense_date}&route_id=${routeId}`;
    const rows=await offlineCacheGet(path) || [];
    rows.push({
      id:queueRow.local_id,
      expense_date:payload.expense_date,
      route_id:routeId,
      route_name:(await offlineCacheGet("/api/sync/bootstrap"))?.routes?.find(r=>Number(r.id)===routeId)?.name||"Ruta",
      category:payload.category,
      amount,
      payment_method:method,
      description:payload.description||null,
      offline_pending:true
    });
    await offlineCachePut(path,rows);

    return {
      offline_queued:true,
      id:queueRow.local_id,
      message:"Gasto guardado sin Internet. Se sincronizará automáticamente."
    };
  }

  if(entityType==="cash" && action==="open"){
    const routeId=Number(payload.route_id);
    const businessDate=payload.business_date;
    const localId=queueRow.local_id;
    let row=await offlineCashRow(routeId,businessDate);
    const bootstrap=await offlineCacheGet("/api/sync/bootstrap");
    const route=offlineRouteFromBootstrap(bootstrap,routeId);

    const openingCash=row?.expected_cash ?? Number(payload.opening_cash||0);
    const openingPix=row?.expected_pix ?? Number(payload.opening_pix||0);

    const localRow={
      route_id:routeId,
      route_name:route?.name||"Ruta",
      business_date:businessDate,
      exists:true,
      id:localId,
      session_id:localId,
      local_ref:queueRow.local_ref,
      status:"open",
      opening_cash:Number(openingCash||0),
      opening_pix:Number(openingPix||0),
      expected_cash:Number(openingCash||0),
      expected_pix:Number(openingPix||0),
      expected_total:Number(openingCash||0)+Number(openingPix||0),
      previous_date:row?.previous_date||null,
      responsible_name:currentUser?.name||"—",
      opened_by_name:currentUser?.name||"—",
      opened_at:new Date().toISOString(),
      closed_by_name:null,
      closed_at:null,
      cash_collected:0,
      pix_collected:0,
      loans_disbursed:0,
      total_expenses:0,
      base_additions_cash:0,
      base_additions_pix:0,
      base_withdrawals_cash:0,
      base_withdrawals_pix:0,
      transfers_in_cash:0,
      transfers_in_pix:0,
      transfers_out_cash:0,
      transfers_out_pix:0,
      daily_loans:[],
      daily_expenses:[]
    };

    await offlineMutateBootstrap(data=>{
      data.cash=data.cash||[];
      const idx=data.cash.findIndex(r=>Number(r.route_id)===routeId && String(r.business_date).slice(0,10)===businessDate);
      if(idx>=0)data.cash[idx]=localRow;
      else data.cash.push(localRow);
    });
    await offlineWriteCashCache(localRow);

    return {
      offline_queued:true,
      id:localId,
      local_ref:queueRow.local_ref,
      message:"Caja abierta sin Internet. Se sincronizará automáticamente."
    };
  }

  if(entityType==="cash" && action==="close"){
    const routeId=Number(payload.route_id);
    const businessDate=payload.business_date;
    let row=await offlineCashRow(routeId,businessDate);
    if(!row)throw new Error("No se encontró la caja local para cerrar.");

    row={...row,
      status:"closed",
      counted_cash:Number(payload.counted_cash||0),
      counted_pix:Number(payload.counted_pix||0),
      counted_closing_balance:Number(payload.counted_cash||0)+Number(payload.counted_pix||0),
      difference:Number(payload.counted_cash||0)+Number(payload.counted_pix||0)-Number(row.expected_total||0),
      closed_by_name:currentUser?.name||"—",
      closed_at:new Date().toISOString()
    };

    await offlineMutateBootstrap(data=>{
      const idx=(data.cash||[]).findIndex(r=>Number(r.route_id)===routeId && String(r.business_date).slice(0,10)===businessDate);
      if(idx>=0)data.cash[idx]=row;
    });
    await offlineWriteCashCache(row);

    return {
      offline_queued:true,
      id:row.id,
      difference:row.difference,
      message:"Caja cerrada sin Internet. Se sincronizará automáticamente."
    };
  }

  return {offline_queued:true,message:"Operación guardada sin Internet."};
}

async function offlineMutationOrOnline({
  entityType,
  action,
  payload,
  path,
  options={},
  localRef=null,
  localId=null
}){
  const forceQueue =
    entityType==="cash" && action==="close" && Number(payload?.session_id)<0;

  if(navigator.onLine && !forceQueue){
    try{
      return await api(path,options);
    }catch(error){
      if(!offlineNetworkFailure(error))throw error;
    }
  }

  const id=localId ?? (["client","loan","payment","expense","cash"].includes(entityType)?offlineNextLocalId():null);
  const row=await offlineQueueOperation(entityType,action,payload,{localRef,localId:id});
  return offlineApplyLocalMutation(entityType,action,payload,row);
}

async function offlineSyncPending(manual=false){
  if(!token){
    if(manual)alert("Inicia sesión antes de sincronizar.");
    return;
  }
  if(!navigator.onLine){
    await updateOfflineBadgeFromQueue("offline");
    if(manual)alert("No hay conexión a Internet.");
    return;
  }

  await offlineRefreshQueueStatuses();

  const rows=(await offlineStoreGetAll("queue"))
    .filter(r=>
      offlineRowBelongsToCurrentUser(r) &&
      (
        r.status==="pending" ||
        r.status==="failed" ||
        (r.status==="pending_confirmation" && !r.server_entity_id)
      )
    )
    .sort((a,b)=>String(a.created_at).localeCompare(String(b.created_at)));

  if(!rows.length){
    await updateOfflineBadgeFromQueue("online");
    if(manual)alert("No hay movimientos pendientes por sincronizar.");
    return;
  }

  setOfflineStatus("syncing",`${rows.length} movimiento(s)`);
  try{
    for(const row of rows){
      row.payload=await offlineEnrichIdentityPayload(row.entity_type,row.payload||{});
      row.protocol_version=3;
      await offlineStorePut("queue",row);
    }

    const response=await api("/api/sync/push",{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        device_id:offlineDeviceId(),
        operations:rows.map(r=>({
          operation_id:r.operation_id,
          local_ref:r.local_ref,
          entity_type:r.entity_type,
          action:r.action,
          occurred_at:r.occurred_at,
          payload:r.payload
        }))
      })
    });

    for(const result of response.results||[]){
      const original=await offlineStoreGet("queue",result.operation_id);
      if(!original)continue;
      original.status=result.status||"failed";
      original.server_entity_id=result.entity_id||null;
      original.result=result.result||null;
      original.error=result.error||null;
      original.synced_at=new Date().toISOString();

      if(result.result?.canonical_target){
        original.payload={
          ...(original.payload||{}),
          ...result.result.canonical_target,
          offline_protocol:3
        };
      }

      if(original.status==="pending_confirmation"){
        original.delivery_state="server_received_waiting_confirmation";
      }else if(original.status==="done"){
        original.delivery_state="server_applied";
      }else if(original.status==="failed"){
        original.delivery_state="sync_error_locked";
      }else{
        original.delivery_state="local_pending";
      }

      await offlineStorePut("queue",original);
    }

    await offlineRefreshBootstrap();
    await updateOfflineBadgeFromQueue("online");
    if(manual){
      const stats=await offlinePendingStats();
      if(stats.failed){
        const failedRows=(await offlineStoreGetAll("queue")).filter(r=>r.status==="failed");
        const detail=failedRows[0]?.error ? `\n\n${failedRows[0].error}` : "";
        const engine=response.sync_engine_version?`\n\nMotor: ${response.sync_engine_version}`:"";
        alert(`Sincronización terminada con ${stats.failed} error(es).${detail}${engine}\n\nCorrige la causa y toca nuevamente el indicador para reintentar.`);
      }else{
        alert("Sincronización completada.");
      }
      setTimeout(()=>offlineRefreshBootstrap(),300);
    }
  }catch(error){
    await updateOfflineBadgeFromQueue(navigator.onLine?"online":"offline");
    if(manual)alert(error.message);
  }
}


async function offlineCachePut(key,data){
  if(!key)return;
  await offlineStorePut("cache",{
    key:offlineScopedKey(key),
    original_key:key,
    user_id:currentUser?.id||Number(sessionStorage.getItem("sutil_offline_user_id")||0)||null,
    company_id:currentUser?.company_id||Number(sessionStorage.getItem("sutil_offline_company_id")||0)||null,
    data,
    saved_at:new Date().toISOString()
  });
}

async function offlineCacheGet(key){
  const row=await offlineStoreGet("cache",offlineScopedKey(key));
  return row?.data;
}

async function offlineFallbackForPath(path){
  const bootstrap=await offlineCacheGet("/api/sync/bootstrap");

  if(bootstrap){
    if(path==="/api/admin/routes")return bootstrap.routes||[];
    if(path==="/api/admin/clients")return offlineAdminClientsFromBootstrap();

    if(path.startsWith("/api/admin/cash?")){
      const url=new URL(path,location.origin);
      const routeId=Number(url.searchParams.get("route_id"));
      const businessDate=url.searchParams.get("business_date");
      const row=(bootstrap.cash||[]).find(r=>
        Number(r.route_id)===routeId &&
        String(r.business_date).slice(0,10)===businessDate
      );
      if(row){
        const route=offlineRouteFromBootstrap(bootstrap,routeId);
        return {
          ...row,
          id:row.id ?? row.session_id ?? null,
          route_name:row.route_name||route?.name||"Ruta",
          route_active:route?.active!==false,
          can_set_opening_base:["company_owner","sutil_owner"].includes(currentUser?.role) ||
            Boolean(currentUser?.permissions?.manage_cash_base),
          inherited:Boolean(row.previous_date) || Number(row.opening_cash||0)!==0 || Number(row.opening_pix||0)!==0,
          responsible_name:row.responsible_name||currentUser?.name||"—",
          opened_by_name:row.opened_by_name||currentUser?.name||"—",
          cash_collected:Number(row.cash_collected||0),
          pix_collected:Number(row.pix_collected||0),
          loans_disbursed:Number(row.loans_disbursed||0),
          total_expenses:Number(row.total_expenses||0),
          base_additions_cash:Number(row.base_additions_cash||0),
          base_additions_pix:Number(row.base_additions_pix||0),
          base_withdrawals_cash:Number(row.base_withdrawals_cash||0),
          base_withdrawals_pix:Number(row.base_withdrawals_pix||0),
          transfers_in_cash:Number(row.transfers_in_cash||0),
          transfers_in_pix:Number(row.transfers_in_pix||0),
          transfers_out_cash:Number(row.transfers_out_cash||0),
          transfers_out_pix:Number(row.transfers_out_pix||0),
          daily_loans:row.daily_loans||[],
          daily_expenses:row.daily_expenses||[]
        };
      }
    }

    if(path.startsWith("/api/admin/installments/collections?")){
      const url=new URL(path,location.origin);
      const target=url.searchParams.get("target_date") || localTodayIso();
      const routeFilter=url.searchParams.get("route_id");
      const statusFilter=url.searchParams.get("status");
      const search=normalizeSearchText(url.searchParams.get("search")||"");
      const clients=new Map((bootstrap.clients||[]).map(c=>[Number(c.id),c]));
      const routes=new Map((bootstrap.routes||[]).map(r=>[Number(r.id),r]));
      const rows=[];

      const receiptsByClient=new Map();
      (bootstrap.pending_receipts||[])
        .filter(r=>r.status==="checking")
        .sort((a,b)=>{
          const c=Number(a.client_id)-Number(b.client_id);
          return c!==0?c:String(a.created_at||"").localeCompare(String(b.created_at||""));
        })
        .forEach(r=>{
          const key=Number(r.client_id);
          if(!receiptsByClient.has(key))receiptsByClient.set(key,[]);
          receiptsByClient.get(key).push(r);
        });
      const receiptCursor=new Map();

      for(const loan of bootstrap.loans||[]){
        if(routeFilter && String(loan.route_id)!==String(routeFilter))continue;
        const client=clients.get(Number(loan.client_id));
        if(!client)continue;
        const text=normalizeSearchText([client.name,client.client_code,client.document_number,client.phone].filter(Boolean).join(" "));
        if(search && !text.includes(search))continue;

        const installments=(loan.installments||[]).slice().sort((a,b)=>{
          const d=String(a.due_date||"").localeCompare(String(b.due_date||""));
          return d!==0?d:Number(a.number||0)-Number(b.number||0);
        });

        for(const inst of installments){
          const due=String(inst.due_date||"").slice(0,10);
          const dueAmount=Number(inst.amount_due||0);
          const paid=Number(inst.amount_paid||0);
          const remaining=Math.max(0,dueAmount-paid);
          if(remaining<=0)continue;

          let rowStatus="upcoming";
          if(due<target)rowStatus=paid>0?"partial_overdue":"overdue";
          else if(due===target)rowStatus=paid>0?"partial":"today";
          else if(paid>0)rowStatus="partial";

          if(statusFilter && statusFilter!=="all"){
            if(statusFilter==="overdue" && !["overdue","partial_overdue"].includes(rowStatus))continue;
            else if(statusFilter==="today" && rowStatus!=="today")continue;
            else if(!["overdue","today"].includes(statusFilter) && rowStatus!==statusFilter)continue;
          }

          const pix=offlineNextPendingReceiptForClient(
            receiptsByClient,
            receiptCursor,
            client.id
          );

          const daysOverdue=due<target
            ? Math.max(0,Math.round((new Date(`${target}T12:00:00`)-new Date(`${due}T12:00:00`))/86400000))
            : 0;

          rows.push({
            client_id:client.id,
            client_name:client.name,
            client_code:client.client_code,
            document_number:client.document_number,
            phone:client.phone,
            route_id:loan.route_id,
            route_name:routes.get(Number(loan.route_id))?.name||"Ruta",
            loan_id:loan.id,
            installment_id:inst.id,
            installment_number:inst.number,
            due_date:due,
            amount_due:dueAmount,
            amount_paid:paid,
            amount_remaining:remaining,
            days_overdue:daysOverdue,
            status:rowStatus,
            pix:pix ? {
              id:pix.id,
              amount:Number(pix.amount||0),
              status:"checking",
              created_at:pix.created_at,
              offline_pending:!!pix.offline_pending
            } : null,
            has_business:false,
            has_location:false
          });
        }
      }

      return {
        rows,
        overdue_count:rows.filter(r=>["overdue","partial_overdue"].includes(r.status)).length,
        today_count:rows.filter(r=>r.status==="today").length,
        paid_count:0,
        pending_total:rows.reduce((a,r)=>a+Number(r.amount_remaining||0),0),
        paid_today:0
      };
    }

    if(path==="/api/me"){
      const cachedMe=await offlineCacheGet("/api/me");
      if(cachedMe!==undefined)return cachedMe;
    }
  }

  const exact=await offlineCacheGet(path);
  if(exact!==undefined)return exact;
  return undefined;
}

async function offlineRefreshQueueStatuses(){
  if(!token || !navigator.onLine || !currentUser)return;
  try{
    // Primera consulta: operaciones del dispositivo actual.
    const currentDevice=offlineDeviceId();
    const server=await api(`/api/sync/operations?device_id=${encodeURIComponent(currentDevice)}&limit=200`);
    const serverRows=new Map((server.rows||[]).map(r=>[r.operation_id,r]));
    const localRows=await offlineStoreGetAll("queue");

    // Una operación puede sobrevivir en IndexedDB aunque el identificador local
    // del dispositivo haya cambiado. Si faltan operaciones locales en la consulta
    // del dispositivo, consultamos también las operaciones autorizadas del usuario.
    // El backend ya limita este endpoint por empresa/usuario y la conciliación se
    // hace exclusivamente por operation_id, por lo que no se mezclan cobros.
    const unresolvedOperationIds=localRows
      .filter(offlineRowBelongsToCurrentUser)
      .map(r=>r.operation_id)
      .filter(operationId=>operationId && !serverRows.has(operationId));

    if(unresolvedOperationIds.length){
      const userServer=await api("/api/sync/operations?limit=200");
      for(const remote of (userServer.rows||[])){
        if(remote?.operation_id && unresolvedOperationIds.includes(remote.operation_id)){
          serverRows.set(remote.operation_id,remote);
        }
      }
    }

    for(const row of localRows){
      const remote=serverRows.get(row.operation_id);
      if(!remote)continue;

      // Una operación antigua sin scope solo se adopta si el servidor
      // confirma que pertenece exactamente al usuario conectado.
      if(!row.user_id || !row.company_id){
        if(
          Number(remote.user_id)!==Number(currentUser.id) ||
          Number(remote.company_id)!==Number(currentUser.company_id)
        ){
          continue;
        }
        row.user_id=Number(currentUser.id);
        row.company_id=Number(currentUser.company_id);
      }

      if(!offlineRowBelongsToCurrentUser(row))continue;

      row.status=remote.status||row.status;
      row.server_entity_id=remote.entity_id ?? row.server_entity_id ?? null;
      row.error=remote.error||null;
      row.server_checked_at=new Date().toISOString();

      if(row.status==="pending_confirmation"){
        row.delivery_state="server_received_waiting_confirmation";
      }else if(row.status==="done"){
        row.delivery_state="server_applied";
      }else if(row.status==="failed"){
        row.delivery_state="sync_error_locked";
      }

      await offlineStorePut("queue",row);
    }
  }catch(_){}
}

async function offlineRefreshBootstrap(){
  if(!token || !navigator.onLine || offlineBootstrapInProgress)return;
  offlineBootstrapInProgress=true;
  setOfflineStatus("syncing","guardando ruta");

  try{
    const data=await api("/api/sync/bootstrap");
    await offlineCachePut("/api/sync/bootstrap",data);
    await offlineStorePut("meta",{
      key:offlineScopedMetaKey("last_bootstrap"),
      value:new Date().toISOString(),
      device_id:offlineDeviceId(),
      user_id:currentUser?.id||null,
      company_id:currentUser?.company_id||null
    });
    await offlineRefreshQueueStatuses();
    await updateOfflineBadgeFromQueue("online");
    const mappedClients=await offlineAdminClientsFromBootstrap();
    if(mappedClients.length)await offlineCachePut("/api/admin/clients",mappedClients);
  }catch(_){
    setOfflineStatus(navigator.onLine?"online":"offline");
  }finally{
    offlineBootstrapInProgress=false;
  }
}

async function prepareOfflineMode(){
  await openOfflineDb();
  offlineDeviceId();

  if("serviceWorker" in navigator){
    try{
      await navigator.serviceWorker.register("/offline-sw.js",{scope:"/"});
    }catch(_){}
  }

  if(navigator.onLine){
    setOfflineStatus("online");
    if(token){
      setTimeout(async()=>{
        if(SUTIL_MOBILE_ADMIN){
          await offlineSyncPending(false).catch(()=>{});
          return;
        }
        await offlineRefreshBootstrap();
        await offlineSyncPending(false);
        await offlineRefreshBootstrap();
      },900);
    }
  }else{
    const last=await offlineStoreGet("meta",offlineScopedMetaKey("last_bootstrap"));
    setOfflineStatus("offline",last?.value?"datos guardados":"sin datos locales");
  }
}

window.addEventListener("online",()=>{
  setOfflineStatus("syncing","conexión recuperada");
  setTimeout(async()=>{
    if(SUTIL_MOBILE_ADMIN){
      await offlineSyncPending(false).catch(()=>{});
      setOfflineStatus("online","modo móvil");
      return;
    }
    await offlineRefreshBootstrap();
    await offlineSyncPending(false);
    await offlineRefreshBootstrap();
  },500);
});

window.addEventListener("offline",async()=>{
  const pending=await offlineStoreCount("queue","status","pending");
  setOfflineStatus("offline",pending?`${pending} pendiente(s)`:"datos locales");
});


let sutilOperationalRefreshBusy=false;
let sutilOperationalRefreshAt=0;

async function refreshActiveOperationalSection(){
  if(
    sutilOperationalRefreshBusy ||
    !token ||
    !currentUser ||
    !navigator.onLine ||
    document.hidden
  )return;

  const now=Date.now();
  if(now-sutilOperationalRefreshAt < 900)return;

  sutilOperationalRefreshBusy=true;
  sutilOperationalRefreshAt=now;

  try{
    await offlineSyncPending(false);

    if(currentSectionId==="collectionsSection"){
      if(collectionsMode==="debt"){
        await loadTodayCollections();
      }else if(collectionsMode==="received"){
        await loadReceivedPayments();
      }else if(collectionsMode==="clientPayments"){
        const selectedName = clientPaymentsHeaderName?.textContent?.trim();
        if(selectedName && selectedName!=="—"){
          await loadClientPaymentsHistory();
        }
      }
    }else if(currentSectionId==="receiptsSection"){
      await refreshReceipts();
    }else if(currentSectionId==="clientsSection"){
      await refreshClients();
    }else if(currentSectionId==="locationsSection"){
      await loadLocations(false);
    }else if(currentSectionId==="cashSection"){
      // No reiniciar la navegación de Caja al volver del diálogo de confirmación
      // o al recuperar el foco de la pestaña. Eso hacía desaparecer la caja
      // recién abierta/reabierta y obligaba a pulsar Operar + Consultar otra vez.
      if(cashMutationBusy)return;
      await loadPendingOpenCashSessions().catch(()=>{});
      if(cashActiveSubview==="operate" && cashRoute?.value && cashDate?.value){
        if(currentCashExists){
          await loadCashSession();
          keepCashOperateVisible(false);
        }else{
          await prepareCashSelection();
        }
      }
    }
  }catch(_){
    // La pantalla conserva los datos actuales; la próxima activación reintenta.
  }finally{
    sutilOperationalRefreshBusy=false;
  }
}

window.addEventListener("focus",()=>{
  setTimeout(refreshActiveOperationalSection,120);
});

document.addEventListener("visibilitychange",()=>{
  if(!document.hidden){
    setTimeout(refreshActiveOperationalSection,120);
  }
});

window.addEventListener("focus",()=>{
  setTimeout(scheduleSessionRenewal,180);
});

document.addEventListener("visibilitychange",()=>{
  if(!document.hidden)setTimeout(scheduleSessionRenewal,180);
});

let sessionExpiryHandling=false;
let sessionRenewTimer=null;
let sessionRenewCountdownTimer=null;
const SESSION_RENEW_WARNING_SECONDS=15*60;

function decodeJwtExpiryMs(jwtToken){
  try{
    const parts=String(jwtToken||"").split(".");
    if(parts.length<2)return 0;
    let payload=parts[1].replace(/-/g,"+").replace(/_/g,"/");
    while(payload.length%4)payload+="=";
    const data=JSON.parse(decodeURIComponent(Array.from(atob(payload)).map(c=>"%"+c.charCodeAt(0).toString(16).padStart(2,"0")).join("")));
    return Number(data.exp||0)*1000;
  }catch(_){
    return 0;
  }
}

function clearSessionRenewTimers(){
  if(sessionRenewTimer){clearTimeout(sessionRenewTimer);sessionRenewTimer=null;}
  if(sessionRenewCountdownTimer){clearInterval(sessionRenewCountdownTimer);sessionRenewCountdownTimer=null;}
}

function ensureSessionRenewBanner(){
  let banner=document.getElementById("sessionRenewBanner");
  if(banner)return banner;
  banner=document.createElement("div");
  banner.id="sessionRenewBanner";
  banner.style.cssText="display:none;position:fixed;left:50%;top:16px;transform:translateX(-50%);z-index:99999;max-width:min(92vw,720px);background:#fff8e6;border:1px solid #e4a11b;border-radius:12px;padding:10px 14px;box-shadow:0 8px 28px rgba(0,0,0,.16);font-weight:700;color:#6b4600;align-items:center;gap:12px;flex-wrap:wrap;justify-content:center";
  banner.innerHTML=`<span id="sessionRenewText">🔐 Tu sesión está por vencer.</span><button id="sessionRenewButton" type="button" style="border:0;border-radius:9px;padding:8px 12px;background:#16803d;color:#fff;font-weight:800;cursor:pointer">↻ Renovar 12 h</button>`;
  document.body.appendChild(banner);
  document.getElementById("sessionRenewButton")?.addEventListener("click",renewSessionNow);
  return banner;
}

function hideSessionRenewBanner(){
  const banner=document.getElementById("sessionRenewBanner");
  if(banner)banner.style.display="none";
  if(sessionRenewCountdownTimer){clearInterval(sessionRenewCountdownTimer);sessionRenewCountdownTimer=null;}
}

function renderSessionRenewCountdown(){
  const expiry=decodeJwtExpiryMs(token);
  if(!expiry)return;
  const remaining=Math.max(0,Math.ceil((expiry-Date.now())/1000));
  if(remaining<=0){
    hideSessionRenewBanner();
    showExpiredSession("Tu sesión venció. Ingresa nuevamente.");
    return;
  }
  const minutes=Math.floor(remaining/60);
  const seconds=remaining%60;
  const text=document.getElementById("sessionRenewText");
  if(text)text.textContent=`🔐 Tu sesión vence en ${String(minutes).padStart(2,"0")}:${String(seconds).padStart(2,"0")}.`;
}

function showSessionRenewBanner(){
  if(!token || sessionExpiryHandling)return;
  const banner=ensureSessionRenewBanner();
  banner.style.display="flex";
  renderSessionRenewCountdown();
  if(sessionRenewCountdownTimer)clearInterval(sessionRenewCountdownTimer);
  sessionRenewCountdownTimer=setInterval(renderSessionRenewCountdown,1000);
}

function scheduleSessionRenewal(){
  clearSessionRenewTimers();
  hideSessionRenewBanner();
  if(!token || sessionExpiryHandling)return;
  const expiry=decodeJwtExpiryMs(token);
  if(!expiry)return;
  const remainingMs=expiry-Date.now();
  if(remainingMs<=0){
    showExpiredSession("Tu sesión venció. Ingresa nuevamente.");
    return;
  }
  const warningMs=SESSION_RENEW_WARNING_SECONDS*1000;
  if(remainingMs<=warningMs){
    showSessionRenewBanner();
  }else{
    sessionRenewTimer=setTimeout(showSessionRenewBanner,Math.max(1000,remainingMs-warningMs));
  }
}

async function renewSessionNow(){
  const button=document.getElementById("sessionRenewButton");
  const text=document.getElementById("sessionRenewText");
  if(button)button.disabled=true;
  if(text)text.textContent="🔄 Renovando sesión…";
  try{
    const data=await api("/api/session/refresh",{method:"POST"});
    token=data.token;
    persistToken();
    clearSessionRenewTimers();
    const banner=ensureSessionRenewBanner();
    banner.style.display="flex";
    if(text)text.textContent="✅ Sesión renovada por 12 horas.";
    setTimeout(()=>{hideSessionRenewBanner();scheduleSessionRenewal();},1800);
  }catch(error){
    if(!error?.sessionExpired){
      if(text)text.textContent=`⚠️ ${error.message||"No fue posible renovar la sesión."}`;
    }
  }finally{
    if(button)button.disabled=false;
  }
}

function showExpiredSession(message="Tu sesión venció. Ingresa nuevamente."){
  if(sessionExpiryHandling)return;
  sessionExpiryHandling=true;

  try{ stopAdminLoginCountdown(); }catch(_){}
  try{ stopChatCenterPolling(); }catch(_){}
  try{ stopClientChatPolling(); }catch(_){}
  try{ stopStaffLocationPolling(); }catch(_){}
  try{ stopLocationsPolling(); }catch(_){}
  clearSessionRenewTimers();
  hideSessionRenewBanner();

  token="";
  currentUser=null;
  document.body.classList.remove("sutil-admin-authenticated","sutil-owner-auth");
  const headerThemeSwitch=document.getElementById("headerThemeSwitch");
  if(headerThemeSwitch)headerThemeSwitch.style.display="none";
  try{mountOwnerMobileCredentials();}catch(_){}
  localStorage.removeItem("sutil_admin_token");
  sessionStorage.removeItem("sutil_admin_token");
  sessionStorage.removeItem("sutil_offline_user_id");
  sessionStorage.removeItem("sutil_offline_company_id");

  historicalModeActive=false;
  forgottenOperationMode=false;
  try{ applyHistoricalModeUI(); }catch(_){}

  if(activeCompanyBanner)activeCompanyBanner.style.display="none";
  if(sessionControls)sessionControls.style.display="none";
  const appEl=document.getElementById("app");
  const chooser=document.getElementById("profileChooser");
  const loginEl=document.getElementById("login");
  const homeBtn=document.getElementById("homeButton");
  const backBtn=document.getElementById("backButton");
  const loginStatus=document.getElementById("loginStatusMessage");
  if(appEl)appEl.style.display="none";
  if(homeBtn)homeBtn.style.display="none";
  if(backBtn)backBtn.style.display="none";

  // Si ya sabemos qué perfil estaba usando, regresamos directamente a su login.
  // En una pestaña recién abierta con token ya vencido, mostramos el selector de perfil.
  if(selectedProfile){
    if(chooser)chooser.style.display="none";
    if(loginEl)loginEl.style.display="block";
  }else{
    if(loginEl)loginEl.style.display="none";
    if(chooser)chooser.style.display="block";
  }
  if(loginPassword)loginPassword.value="";
  if(loginStatus){
    loginStatus.style.color="#b42318";
    loginStatus.textContent=`🔐 ${message}`;
  }
}

function isSessionAuthFailure(status,message,path){
  if(Number(status)!==401 || path==="/api/login")return false;
  const value=String(message||"").toLowerCase();
  return [
    "token inválido",
    "token invalido",
    "token requerido",
    "usuario inválido",
    "usuario invalido",
    "sesión vencida",
    "sesion vencida"
  ].some(part=>value.includes(part));
}

async function api(path, options={}) {
  options.headers = options.headers || {};
  if (token) options.headers.Authorization = "Bearer " + token;

  const method=String(options.method||"GET").toUpperCase();
  let response;

  try {
    response = await fetch(path, options);
  } catch (networkError) {
    if(method==="GET"){
      const cached=await offlineFallbackForPath(path);
      if(cached!==undefined){
        setOfflineStatus("offline","usando datos guardados");
        return cached;
      }
    }
    throw new Error(
      navigator.onLine
        ? "No fue posible conectar con el servidor. Verifica que Sutil esté iniciado."
        : "Sin Internet. Esta información no está guardada todavía en este dispositivo."
    );
  }

  const data = await response.json().catch(() => ({}));

  if (!response.ok) {
    let message = data.detail || data.message || `Error del servidor (${response.status})`;
    if (Array.isArray(message) && message.length) {
      const first = message[0];
      const field = first.loc?.[first.loc.length-1];
      if (field === "observation" && first.type === "string_too_short") {
        message = "La observación debe tener mínimo 3 caracteres.";
      } else {
        message = first.msg || "Revisa los datos ingresados.";
      }
    } else if (typeof message === "object") {
      message = message.msg || "Revisa los datos ingresados.";
    }
    if(isSessionAuthFailure(response.status,message,path)){
      showExpiredSession("Tu sesión venció. Ingresa nuevamente.");
      const sessionError=new Error("Tu sesión venció. Ingresa nuevamente.");
      sessionError.status=response.status;
      sessionError.sessionExpired=true;
      throw sessionError;
    }
    const requestError = new Error(message);
    requestError.status = response.status;
    requestError.retryAfter = Number(response.headers.get("Retry-After") || 0);
    throw requestError;
  }

  if(method==="GET"){
    void offlineCachePut(path,data);
  }

  return data;
}


function isCompanyOwner(){
  return currentUser && ["company_owner","sutil_owner"].includes(currentUser.role);
}

function canUseForgottenOperation(){
  if(!currentUser)return false;
  if(["company_owner","sutil_owner"].includes(currentUser.role))return true;
  return ["company_admin","admin"].includes(currentUser.role) && Boolean(currentUser.permissions?.manage_cash);
}

function applyHistoricalModeUI(){
  document.body.classList.toggle("historical-mode", historicalModeActive);
  document.body.classList.toggle("forgotten-operation-mode", forgottenOperationMode);
  const module=document.getElementById("historicalModule");
  if(module)module.style.display=isCompanyOwner()?"flex":"none";
  try{applyWhatsAppConfigRoleUI();}catch(_e){}
  const forgottenModule=document.getElementById("forgottenOperationModule");
  if(forgottenModule)forgottenModule.style.display=canUseForgottenOperation()?"flex":"none";
  if(!historicalModeActive && !forgottenOperationMode && directPaymentDate){
    directPaymentDate.value="";
  }
}


/* SUTIL FIX 12.15.172 · WhatsApp Business Meta Embedded Signup v4 + preconfiguración */
let SUTIL_WA_PRECONFIG={
  mode:'general',general_number_id:'',planned_numbers:[],route_assignments:{},
  receipts_enabled:true,auto_send_to_review:true,meta_connected:false,connection_status:'not_connected'
};
let SUTIL_WA_ROUTES=[];
let SUTIL_WA_META_STATUS={provider_configured:false,sdk_configured:false,webhook_configured:false,connect_available:false,connected:false,connection_status:'not_connected',app_id:'',config_id:'',graph_version:'v25.0',waba_id:'',phone_numbers:[]};
let SUTIL_WA_META_SESSION={waba_id:'',phone_number_id:'',event:''};
let SUTIL_WA_FB_READY_PROMISE=null;

function canViewWhatsAppPreconfig(){
  return Boolean(currentUser && ['company_owner','sutil_owner','company_admin','admin'].includes(currentUser.role));
}
function canEditWhatsAppPreconfig(){
  return Boolean(currentUser && ['company_owner','sutil_owner'].includes(currentUser.role));
}
function waSafeText(value){
  return String(value??'').replace(/[&<>\"']/g,ch=>({'&':'&amp;','<':'&lt;','>':'&gt;','\"':'&quot;',"'":'&#39;'}[ch]));
}
function waNormalizePhone(value){
  return String(value||'').replace(/[^0-9+()\-\s]/g,'').slice(0,32);
}
function waNewNumberId(){
  return 'wa_'+Date.now().toString(36)+'_'+Math.random().toString(36).slice(2,7);
}
function waSetMessage(message,type='muted'){
  const el=document.getElementById('waConfigMessage');
  if(!el)return;
  el.className=type==='error'?'error':(type==='success'?'success':'muted');
  el.textContent=message||'';
}

function waMetaAllowedOrigin(origin){
  try{
    const host=new URL(origin).hostname.toLowerCase();
    return host==='facebook.com'||host.endsWith('.facebook.com')||host==='facebook.net'||host.endsWith('.facebook.net');
  }catch(_e){return false;}
}
window.addEventListener('message',(event)=>{
  if(!waMetaAllowedOrigin(event.origin))return;
  let payload=event.data;
  if(typeof payload==='string'){
    try{payload=JSON.parse(payload);}catch(_e){return;}
  }
  if(!payload||typeof payload!=='object'||payload.type!=='WA_EMBEDDED_SIGNUP')return;
  const data=payload.data&&typeof payload.data==='object'?payload.data:{};
  if(data.waba_id)SUTIL_WA_META_SESSION.waba_id=String(data.waba_id);
  if(data.phone_number_id)SUTIL_WA_META_SESSION.phone_number_id=String(data.phone_number_id);
  if(payload.event)SUTIL_WA_META_SESSION.event=String(payload.event);
});
function loadWhatsAppMetaSDK(){
  if(window.FB)return Promise.resolve(window.FB);
  if(SUTIL_WA_FB_READY_PROMISE)return SUTIL_WA_FB_READY_PROMISE;
  SUTIL_WA_FB_READY_PROMISE=new Promise((resolve,reject)=>{
    const existing=document.getElementById('sutilMetaFacebookSdk');
    if(existing){
      const wait=()=>window.FB?resolve(window.FB):setTimeout(wait,100);
      wait();return;
    }
    const script=document.createElement('script');
    script.id='sutilMetaFacebookSdk';
    script.async=true;script.defer=true;script.crossOrigin='anonymous';
    script.src='https://connect.facebook.net/es_LA/sdk.js';
    script.onload=()=>window.FB?resolve(window.FB):reject(new Error('Meta SDK no quedó disponible'));
    script.onerror=()=>reject(new Error('No fue posible cargar el SDK de Meta'));
    document.head.appendChild(script);
  });
  return SUTIL_WA_FB_READY_PROMISE;
}
function renderWhatsAppMetaStatus(){
  const st=SUTIL_WA_META_STATUS||{};
  const badge=document.getElementById('waMetaStatusBadge');
  const dot=document.getElementById('waMetaStatusDot');
  const copy=document.getElementById('waMetaStatusText');
  const connect=document.getElementById('waMetaConnectButton');
  const disconnect=document.getElementById('waMetaDisconnectButton');
  const hint=document.getElementById('waMetaProviderHint');
  const numbers=document.getElementById('waMetaConnectedNumbers');
  const editable=canEditWhatsAppPreconfig();
  const connected=Boolean(st.connected);
  dot?.classList.toggle('connected',connected);
  badge?.classList.toggle('connected',connected);
  const statusTimeout=st.connection_status==='status_timeout';
  const backendUnavailable=st.connection_status==='backend_unavailable';
  if(badge)badge.textContent=connected?'Conectada':(statusTimeout?'Sin respuesta':(backendUnavailable?'No disponible':(st.provider_configured?'No conectada':'Meta pendiente')));
  if(copy){
    if(connected)copy.textContent='Cuenta de WhatsApp Business conectada a Sutil mediante Meta.';
    else if(statusTimeout)copy.textContent='La comprobación tardó demasiado. Puedes continuar usando esta pantalla y volver a actualizar.';
    else if(backendUnavailable)copy.textContent='No fue posible comprobar Meta. Verifica que el servidor de Sutil esté actualizado.';
    else if(!st.provider_configured)copy.textContent='Falta configurar la aplicación Meta de Sutil en el servidor.';
    else copy.textContent='La integración está lista. El empresario puede conectar su cuenta de WhatsApp Business.';
  }
  if(connect){
    connect.disabled=!editable||!st.connect_available||connected;
    connect.style.display=connected?'none':'inline-flex';
    connect.textContent=!st.provider_configured?'🔗 Meta pendiente de configurar':'🔗 Conectar con Meta';
  }
  if(disconnect)disconnect.style.display=(connected&&editable)?'inline-flex':'none';
  if(hint){
    if(connected)hint.textContent=st.waba_id?`Cuenta Meta vinculada · WABA ${st.waba_id}`:'Cuenta Meta vinculada.';
    else if(!st.provider_configured)hint.textContent='Configura App ID, App Secret, Configuration ID y Verify Token en el servidor de Sutil.';
    else hint.textContent='Embedded Signup v4 listo para iniciar la conexión oficial con Meta.';
  }
  if(numbers){
    const rows=Array.isArray(st.phone_numbers)?st.phone_numbers:[];
    numbers.innerHTML=rows.map(n=>`<div class="wa-meta-number"><div><strong>${waSafeText(n.verified_name||n.display_phone_number||'WhatsApp Business')}</strong><small>${waSafeText(n.display_phone_number||'')} ${n.status?'· '+waSafeText(n.status):''}</small></div><span>✅</span></div>`).join('');
  }
}
async function startWhatsAppMetaSignup(){
  if(!canEditWhatsAppPreconfig())return waSetMessage('Solo el empresario puede conectar WhatsApp Business.','error');
  const st=SUTIL_WA_META_STATUS||{};
  if(!st.connect_available)return waSetMessage('La aplicación Meta de Sutil todavía no está configurada en el servidor.','error');
  waSetMessage('Abriendo conexión segura con Meta...');
  SUTIL_WA_META_SESSION={waba_id:'',phone_number_id:'',event:''};
  try{
    await loadWhatsAppMetaSDK();
    window.FB.init({appId:String(st.app_id),autoLogAppEvents:true,xfbml:false,version:String(st.graph_version||'v25.0')});
    window.FB.login(async(response)=>{
      const code=response?.authResponse?.code;
      if(!code){
        waSetMessage('La conexión con Meta fue cancelada o no se completó.','error');
        return;
      }
      waSetMessage('Meta autorizó la cuenta. Terminando la conexión...');
      try{
        const result=await api('/api/admin/whatsapp-meta/complete',{method:'POST',body:JSON.stringify({
          code:String(code),
          waba_id:String(SUTIL_WA_META_SESSION.waba_id||''),
          phone_number_id:String(SUTIL_WA_META_SESSION.phone_number_id||''),
          signup_event:String(SUTIL_WA_META_SESSION.event||''),
          coexistence:false
        })});
        SUTIL_WA_META_STATUS=Object.assign({},SUTIL_WA_META_STATUS,result||{});
        renderWhatsAppMetaStatus();
        await loadWhatsAppPreconfig(false);
        waSetMessage('WhatsApp Business conectado correctamente.','success');
      }catch(err){
        console.error('Meta complete',err);
        waSetMessage(err?.message||'Meta autorizó la cuenta, pero Sutil no pudo completar la conexión.','error');
      }
    },{
      config_id:String(st.config_id),
      auth_type:'rerequest',
      response_type:'code',
      override_default_response_type:true,
      extras:{setup:{}}
    });
  }catch(err){
    console.error('Meta signup',err);
    waSetMessage(err?.message||'No fue posible abrir la conexión con Meta.','error');
  }
}
async function disconnectWhatsAppMeta(){
  if(!canEditWhatsAppPreconfig())return;
  if(!confirm('¿Quitar la conexión de WhatsApp Business de esta empresa en Sutil?'))return;
  try{
    await api('/api/admin/whatsapp-meta/connection',{method:'DELETE'});
    SUTIL_WA_META_STATUS=Object.assign({},SUTIL_WA_META_STATUS,{connected:false,connection_status:'not_connected',waba_id:'',phone_numbers:[]});
    renderWhatsAppMetaStatus();
    waSetMessage('Conexión local eliminada.','success');
  }catch(err){waSetMessage(err?.message||'No fue posible desconectar WhatsApp.','error');}
}

async function loadWhatsAppMetaStatusFast(){
  const timeoutMs=2500;
  try{
    const metaStatus=await Promise.race([
      api('/api/admin/whatsapp-meta/status'),
      new Promise((_,reject)=>setTimeout(()=>reject(new Error('SUTIL_META_STATUS_TIMEOUT')),timeoutMs))
    ]);
    SUTIL_WA_META_STATUS=Object.assign({},SUTIL_WA_META_STATUS,metaStatus||{});
  }catch(err){
    const timedOut=String(err?.message||'')==='SUTIL_META_STATUS_TIMEOUT';
    SUTIL_WA_META_STATUS=Object.assign({},SUTIL_WA_META_STATUS,{
      connected:false,
      connection_status:timedOut?'status_timeout':'backend_unavailable',
      last_error:timedOut?'La comprobación superó 2,5 segundos.':(err?.message||'Backend no actualizado')
    });
  }
  renderWhatsAppMetaStatus();
}

async function openWhatsAppBusinessConfig(){
  if(!canViewWhatsAppPreconfig()){
    alert('Esta configuración está disponible para el empresario y los ADM.');
    return;
  }
  openSection('whatsappBusinessSection');
  setTimeout(()=>{
    loadWhatsAppMetaStatusFast();
    loadWhatsAppPreconfig(false);
  },0);
}
async function loadWhatsAppPreconfig(force=false){
  if(!canViewWhatsAppPreconfig())return;
  waSetMessage(force?'Actualizando configuración...':'Cargando configuración...');
  try{
    const [cfg,routes]=await Promise.all([
      api('/api/admin/whatsapp-preconfig'),
      api('/api/admin/routes').catch(()=>[])
    ]);
    SUTIL_WA_PRECONFIG=Object.assign({
      mode:'general',general_number_id:'',planned_numbers:[],route_assignments:{},
      receipts_enabled:true,auto_send_to_review:true,meta_connected:false,connection_status:'not_connected'
    },cfg||{});
    SUTIL_WA_PRECONFIG.planned_numbers=Array.isArray(SUTIL_WA_PRECONFIG.planned_numbers)?SUTIL_WA_PRECONFIG.planned_numbers:[];
    SUTIL_WA_PRECONFIG.route_assignments=(SUTIL_WA_PRECONFIG.route_assignments&&typeof SUTIL_WA_PRECONFIG.route_assignments==='object')?SUTIL_WA_PRECONFIG.route_assignments:{};
    SUTIL_WA_ROUTES=(Array.isArray(routes)?routes:[]).map(r=>({
      id:String(r.id??r.route_id??r.name??''),
      name:String(r.name??r.route_name??r.label??r.id??'Ruta')
    })).filter(r=>r.id);
    renderWhatsAppPreconfig();
    waSetMessage(force?'Configuración actualizada.':'');
  }catch(err){
    console.error('WhatsApp preconfig load',err);
    waSetMessage(err?.message||'No fue posible cargar la configuración de WhatsApp.','error');
  }
}
function renderWhatsAppPreconfig(){
  const editable=canEditWhatsAppPreconfig();
  renderWhatsAppMetaStatus();
  const cfg=SUTIL_WA_PRECONFIG;
  const mode=cfg.mode==='route'?'route':'general';
  const generalRadio=document.getElementById('waModeGeneral');
  const routeRadio=document.getElementById('waModeRoute');
  if(generalRadio)generalRadio.checked=mode==='general';
  if(routeRadio)routeRadio.checked=mode==='route';
  document.getElementById('waModeGeneralCard')?.classList.toggle('active',mode==='general');
  document.getElementById('waModeRouteCard')?.classList.toggle('active',mode==='route');
  const generalCard=document.getElementById('waGeneralNumberCard');
  const routeCard=document.getElementById('waRouteAssignmentCard');
  if(generalCard)generalCard.style.display=mode==='general'?'block':'none';
  if(routeCard)routeCard.style.display=mode==='route'?'block':'none';
  const receipt=document.getElementById('waReceiptsEnabled');
  const review=document.getElementById('waAutoReviewEnabled');
  if(receipt)receipt.checked=Boolean(cfg.receipts_enabled);
  if(review)review.checked=Boolean(cfg.auto_send_to_review);
  renderWhatsAppNumbers();
  renderWhatsAppGeneralNumber();
  renderWhatsAppRouteAssignments();
  const readonly=document.getElementById('waReadonlyNote');
  if(readonly)readonly.style.display=editable?'none':'block';
  const save=document.getElementById('waSaveConfigButton');
  const add=document.getElementById('waAddNumberButton');
  if(save)save.style.display=editable?'inline-flex':'none';
  if(add)add.style.display=editable?'inline-flex':'none';
  document.querySelectorAll('#whatsappBusinessSection input,#whatsappBusinessSection select,#whatsappBusinessSection button.wa-number-remove').forEach(el=>{
    if(el.closest('.wa-pending-button'))return;
    el.disabled=!editable;
  });
  try{syncSutilMobileSelectButtons();}catch(_e){}
  try{reapplySutilLanguageOnce(0);}catch(_e){}
}
function renderWhatsAppNumbers(){
  const host=document.getElementById('waNumberList');
  if(!host)return;
  const editable=canEditWhatsAppPreconfig();
  const rows=SUTIL_WA_PRECONFIG.planned_numbers||[];
  if(!rows.length){
    host.innerHTML='<div class="wa-empty">Todavía no hay números preparados. Agrega uno para poder asignarlo como número general o por ruta.</div>';
    return;
  }
  host.innerHTML=rows.map((n,i)=>`<div class="wa-number-row" data-wa-number-id="${waSafeText(n.id)}">
    <input type="text" value="${waSafeText(n.label||'')}" placeholder="Nombre, ej. WhatsApp principal" ${editable?'':'disabled'} oninput="updateWhatsAppNumberField(${i},'label',this.value)">
    <input type="tel" inputmode="tel" value="${waSafeText(n.phone||'')}" placeholder="+55 62 99999-9999" ${editable?'':'disabled'} oninput="updateWhatsAppNumberField(${i},'phone',this.value)">
    <button class="wa-number-remove" type="button" title="Eliminar" ${editable?'':'disabled'} onclick="removeWhatsAppPlannedNumber(${i})">×</button>
  </div>`).join('');
}
function renderWhatsAppGeneralNumber(){
  const sel=document.getElementById('waGeneralNumberSelect');
  if(!sel)return;
  const numbers=SUTIL_WA_PRECONFIG.planned_numbers||[];
  const current=String(SUTIL_WA_PRECONFIG.general_number_id||'');
  sel.innerHTML='<option value="">— Sin número asignado —</option>'+numbers.map(n=>{
    const name=n.label||n.phone||'Número sin nombre';
    const extra=n.label&&n.phone?' · '+n.phone:'';
    return `<option value="${waSafeText(n.id)}" ${String(n.id)===current?'selected':''}>${waSafeText(name+extra)}</option>`;
  }).join('');
}
function renderWhatsAppRouteAssignments(){
  const host=document.getElementById('waRouteAssignmentList');
  if(!host)return;
  if(!SUTIL_WA_ROUTES.length){
    host.innerHTML='<div class="wa-empty">No hay rutas disponibles para asignar.</div>';
    return;
  }
  const numbers=SUTIL_WA_PRECONFIG.planned_numbers||[];
  host.innerHTML=SUTIL_WA_ROUTES.map(r=>{
    const assigned=String(SUTIL_WA_PRECONFIG.route_assignments?.[r.id]||'');
    const options='<option value="">— Sin número —</option>'+numbers.map(n=>{
      const label=(n.label||n.phone||'Número')+(n.label&&n.phone?' · '+n.phone:'');
      return `<option value="${waSafeText(n.id)}" ${String(n.id)===assigned?'selected':''}>${waSafeText(label)}</option>`;
    }).join('');
    return `<div class="wa-route-assignment"><div class="wa-route-name">📍 ${waSafeText(r.name)}</div><select data-wa-route-id="${waSafeText(r.id)}" onchange="updateWhatsAppRouteAssignment('${waSafeText(r.id)}',this.value)">${options}</select></div>`;
  }).join('');
}
function setWhatsAppNumberMode(mode){
  if(!canEditWhatsAppPreconfig())return;
  SUTIL_WA_PRECONFIG.mode=mode==='route'?'route':'general';
  renderWhatsAppPreconfig();
}
function addWhatsAppPlannedNumber(){
  if(!canEditWhatsAppPreconfig())return;
  SUTIL_WA_PRECONFIG.planned_numbers.push({id:waNewNumberId(),label:'',phone:'',active:true});
  renderWhatsAppPreconfig();
  setTimeout(()=>document.querySelector('#waNumberList .wa-number-row:last-child input')?.focus(),0);
}
function removeWhatsAppPlannedNumber(index){
  if(!canEditWhatsAppPreconfig())return;
  const row=SUTIL_WA_PRECONFIG.planned_numbers[index];
  if(!row)return;
  const id=String(row.id);
  SUTIL_WA_PRECONFIG.planned_numbers.splice(index,1);
  if(String(SUTIL_WA_PRECONFIG.general_number_id||'')===id)SUTIL_WA_PRECONFIG.general_number_id='';
  for(const key of Object.keys(SUTIL_WA_PRECONFIG.route_assignments||{})){
    if(String(SUTIL_WA_PRECONFIG.route_assignments[key])===id)delete SUTIL_WA_PRECONFIG.route_assignments[key];
  }
  renderWhatsAppPreconfig();
}
function updateWhatsAppNumberField(index,field,value){
  if(!canEditWhatsAppPreconfig())return;
  const row=SUTIL_WA_PRECONFIG.planned_numbers[index];
  if(!row)return;
  row[field]=field==='phone'?waNormalizePhone(value):String(value||'').slice(0,80);
}
function updateWhatsAppGeneralNumber(value){
  if(!canEditWhatsAppPreconfig())return;
  SUTIL_WA_PRECONFIG.general_number_id=String(value||'');
}
function updateWhatsAppRouteAssignment(routeId,value){
  if(!canEditWhatsAppPreconfig())return;
  if(!SUTIL_WA_PRECONFIG.route_assignments)SUTIL_WA_PRECONFIG.route_assignments={};
  if(value)SUTIL_WA_PRECONFIG.route_assignments[String(routeId)]=String(value);
  else delete SUTIL_WA_PRECONFIG.route_assignments[String(routeId)];
}
function updateWhatsAppToggle(key,value){
  if(!canEditWhatsAppPreconfig())return;
  SUTIL_WA_PRECONFIG[key]=Boolean(value);
}
async function saveWhatsAppPreconfig(){
  if(!canEditWhatsAppPreconfig()){
    waSetMessage('Solo el empresario puede modificar esta configuración.','error');
    return;
  }
  const numbers=(SUTIL_WA_PRECONFIG.planned_numbers||[]).map(n=>({
    id:String(n.id||waNewNumberId()).slice(0,80),
    label:String(n.label||'').trim().slice(0,80),
    phone:waNormalizePhone(n.phone||''),
    active:n.active!==false
  })).filter(n=>n.label||n.phone);
  const validIds=new Set(numbers.map(n=>n.id));
  const routeAssignments={};
  for(const [routeId,numberId] of Object.entries(SUTIL_WA_PRECONFIG.route_assignments||{})){
    if(validIds.has(String(numberId)))routeAssignments[String(routeId)]=String(numberId);
  }
  const payload={
    mode:SUTIL_WA_PRECONFIG.mode==='route'?'route':'general',
    general_number_id:validIds.has(String(SUTIL_WA_PRECONFIG.general_number_id||''))?String(SUTIL_WA_PRECONFIG.general_number_id):'',
    planned_numbers:numbers,
    route_assignments:routeAssignments,
    receipts_enabled:Boolean(SUTIL_WA_PRECONFIG.receipts_enabled),
    auto_send_to_review:Boolean(SUTIL_WA_PRECONFIG.auto_send_to_review)
  };
  waSetMessage('Guardando configuración...');
  try{
    const result=await api('/api/admin/whatsapp-preconfig',{method:'PUT',body:JSON.stringify(payload)});
    SUTIL_WA_PRECONFIG=Object.assign({},SUTIL_WA_PRECONFIG,result||{},payload);
    renderWhatsAppPreconfig();
    waSetMessage('Configuración de WhatsApp guardada correctamente.','success');
  }catch(err){
    console.error('WhatsApp preconfig save',err);
    waSetMessage(err?.message||'No fue posible guardar la configuración.','error');
  }
}
function applyWhatsAppConfigRoleUI(){
  const module=document.getElementById('whatsappBusinessModule');
  if(module)module.style.display=canViewWhatsAppPreconfig()?'flex':'none';
}

const historicalImportFieldOptions = [
  ["ignore","— No importar —"],
  ["name","Nombre"],
  ["smart_identity","Inteligente: apellido / documento / código"],
  ["document_number","Documento / CPF / cédula"],
  ["client_code","Código del cliente"],
  ["address","Dirección"],
  ["address_number","Número de dirección"],
  ["complement","Complemento"],
  ["neighborhood","Barrio"],
  ["city","Ciudad"],
  ["state_region","Estado / departamento"],
  ["postal_code","CEP / código postal"],
  ["phone","Teléfono principal / celular"],
  ["phone2","Teléfono 2"],
  ["fixed_phone","Teléfono fijo"],
  ["email","Correo electrónico (inteligente)"],
  ["notes","Observaciones"],
  ["business_name","Empresa"],
  ["business_document","Documento empresa"],
  ["business_phone","Teléfono empresa"],
  ["business_email","Correo empresa"],
  ["route_hint","Ruta / código de ruta"]
];

function importFieldSelect(header,value){
  const select=document.createElement("select");
  select.dataset.importHeader=header;
  historicalImportFieldOptions.forEach(([v,label])=>{
    const option=document.createElement("option");
    option.value=v;option.textContent=label;
    if(v===value)option.selected=true;
    select.appendChild(option);
  });
  return select;
}

async function openHistoricalClientImport(){
  if(!isCompanyOwner()){
    alert("La importación histórica es exclusiva del empresario.");
    return;
  }
  historicalModeActive=true;
  applyHistoricalModeUI();
  openSection("historicalImportClientsSection");
  try{
    const routes=await api("/api/admin/routes");
    historicalImportDefaultRoute.innerHTML=
      '<option value="">Sin ruta predeterminada</option>'+
      routes.map(r=>`<option value="${r.id}">${r.name}</option>`).join("");
  }catch(e){
    historicalImportDefaultRoute.innerHTML='<option value="">Sin ruta predeterminada</option>';
  }
}

async function analyzeHistoricalClientFile(){
  historicalImportAnalyzeMessage.style.display="block";
  historicalImportAnalyzeMessage.classList.remove("error");
  historicalImportAnalyzeMessage.textContent="Analizando archivo...";
  try{
    const file=historicalClientFile.files[0];
    if(!file)throw new Error("Selecciona el archivo de clientes.");
    const form=new FormData();
    form.append("file",file);
    const data=await api("/api/admin/historical-import/clients/preview",{
      method:"POST",
      body:form
    });
    historicalClientImportToken=data.upload_token;
    historicalClientImportData=data;

    historicalImportStats.innerHTML=`
      <div class="import-stat">Registros leídos<strong>${data.total_rows}</strong></div>
      <div class="import-stat">Documento detectado<strong>${data.detected.with_document}</strong></div>
      <div class="import-stat">Documento pendiente<strong>${data.detected.without_document}</strong></div>
      <div class="import-stat">Teléfono detectado<strong>${data.detected.with_phone}</strong></div>
    `;

    historicalImportMapping.innerHTML="";
    data.headers.forEach(header=>{
      const source=document.createElement("div");
      source.className="import-map-source";
      source.textContent=header;
      const select=importFieldSelect(header,data.suggested_mapping[header]||"ignore");
      historicalImportMapping.appendChild(source);
      historicalImportMapping.appendChild(select);
    });

    const routes=await api("/api/admin/routes");
    historicalImportRouteMap.innerHTML=data.route_hints.length
      ? data.route_hints.map((hint,index)=>`
          <div class="import-route-row">
            <strong>${hint}</strong>
            <select data-route-hint="${hint.replaceAll('"','&quot;')}">
              <option value="">Sin asignar</option>
              ${routes.map(r=>`<option value="${r.id}">${r.name}</option>`).join("")}
            </select>
          </div>`).join("")
      : '<div class="muted">No se detectaron códigos de ruta dentro del archivo.</div>';

    historicalImportPreviewTable.innerHTML=data.sample_interpreted.map(row=>`
      <tr>
        <td>${row.source_row||"—"}</td>
        <td><strong>${row.name||"⚠ Sin nombre"}</strong></td>
        <td>${row.document_number||'<span class="status-warning">Pendiente</span>'}</td>
        <td>${row.phone||'<span class="status-warning">Pendiente</span>'}</td>
        <td>${[row.address,row.address_number,row.complement,row.neighborhood].filter(Boolean).join(", ")||"—"}</td>
        <td>${row.city||"—"}</td>
        <td>${row.route_hint||"—"}</td>
        <td>${(row.notes||"—").replaceAll("<","&lt;").replaceAll(">","&gt;")}</td>
      </tr>`).join("");

    historicalImportMappingCard.style.display="block";
    historicalImportRoutesCard.style.display="block";
    historicalImportPreviewCard.style.display="block";
    historicalImportAnalyzeMessage.textContent=
      `Archivo leído correctamente: ${data.total_rows} clientes encontrados.`;
    historicalImportPreviewCard.scrollIntoView({behavior:"smooth",block:"start"});
  }catch(e){
    historicalImportAnalyzeMessage.classList.add("error");
    historicalImportAnalyzeMessage.textContent=e.message;
  }
}

async function executeHistoricalClientImport(){
  historicalImportExecuteMessage.style.display="block";
  historicalImportExecuteMessage.classList.remove("error");
  try{
    if(!historicalClientImportToken)throw new Error("Primero analiza el archivo.");

    const mapping={};
    document.querySelectorAll("[data-import-header]").forEach(select=>{
      mapping[select.dataset.importHeader]=select.value;
    });

    const route_map={};
    document.querySelectorAll("[data-route-hint]").forEach(select=>{
      route_map[select.dataset.routeHint]=select.value?Number(select.value):null;
    });

    const ok=await sutilConfirm(
      `Se importarán hasta ${historicalClientImportData?.total_rows||0} registros. `+
      "Los duplicados se omitirán y los clientes sin documento quedarán marcados como pendientes. ¿Continuar?"
    );
    if(!ok)return;

    historicalImportExecuteButton.disabled=true;
    historicalImportExecuteMessage.textContent="Importando clientes...";

    const result=await api("/api/admin/historical-import/clients/execute",{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        upload_token:historicalClientImportToken,
        mapping,
        default_route_id:historicalImportDefaultRoute.value?Number(historicalImportDefaultRoute.value):null,
        route_map
      })
    });

    historicalImportExecuteMessage.innerHTML=`
      <strong>${result.message}</strong><br>
      Leídos: ${result.read} ·
      Importados: <strong>${result.imported}</strong> ·
      Duplicados omitidos: ${result.duplicates} ·
      Errores: ${result.errors}<br>
      Documento pendiente: ${result.pending_documents} ·
      Teléfono pendiente: ${result.pending_phones}
    `;
    historicalClientImportToken=null;
    await refreshClients().catch(()=>{});
  }catch(e){
    historicalImportExecuteMessage.classList.add("error");
    historicalImportExecuteMessage.textContent=e.message;
  }finally{
    historicalImportExecuteButton.disabled=false;
  }
}


let historicalClientRollbackPreviewData=null;

async function previewHistoricalClientRollback(){
  const box=document.getElementById("historicalClientRollbackMessage");
  const executeButton=document.getElementById("historicalClientRollbackExecuteButton");
  box.style.display="block";
  box.classList.remove("error");
  executeButton.style.display="none";
  box.textContent="Revisando qué clientes pertenecen a esa importación...";

  try{
    const data=await api("/api/admin/historical-import/clients/rollback-preview");
    historicalClientRollbackPreviewData=data;

    let blockedHtml="";
    if((data.blocked_sample||[]).length){
      blockedHtml="<br><strong>Protegidos:</strong><br>"+
        data.blocked_sample.map(row=>
          `• ${legacyEscapeHtml(row.name||("Cliente #"+row.client_id))}: ${legacyEscapeHtml(row.reason||"tiene datos relacionados")}`
        ).join("<br>");
    }

    box.innerHTML=`
      <strong>Importación anterior encontrada</strong><br>
      Registrados por el importador: ${data.imported_clients_registered}<br>
      Todavía presentes: ${data.clients_still_present}<br>
      Se pueden eliminar de forma segura: <strong>${data.safe_to_delete}</strong><br>
      Protegidos por tener información relacionada: <strong>${data.protected}</strong><br>
      Ya no presentes: ${data.already_missing}
      ${blockedHtml}
    `;

    if(data.safe_to_delete>0){
      executeButton.style.display="inline-block";
    }
  }catch(e){
    box.classList.add("error");
    box.textContent=e.message;
  }
}

async function executeHistoricalClientRollback(){
  const box=document.getElementById("historicalClientRollbackMessage");
  const button=document.getElementById("historicalClientRollbackExecuteButton");
  const preview=historicalClientRollbackPreviewData;

  if(!preview){
    await previewHistoricalClientRollback();
    return;
  }

  const confirmText=await sutilPrompt(
    `Se eliminarán ${preview.safe_to_delete} clientes creados por la importación anterior.\n`+
    "Los clientes protegidos no se tocarán.\n\n"+
    "Escribe ELIMINAR para confirmar:"
  );
  if(confirmText===null)return;
  if(confirmText.trim().toUpperCase()!=="ELIMINAR"){
    alert("No se eliminó nada. La palabra de confirmación no coincide.");
    return;
  }

  button.disabled=true;
  box.style.display="block";
  box.classList.remove("error");
  box.textContent="Eliminando únicamente los clientes seguros de esa importación...";

  try{
    const result=await api("/api/admin/historical-import/clients/rollback",{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({confirm_text:"ELIMINAR"})
    });

    box.innerHTML=`
      <strong>${legacyEscapeHtml(result.message||"Reversión completada")}</strong><br>
      Clientes eliminados: <strong>${result.deleted_clients||0}</strong><br>
      Usuarios cliente eliminados: ${result.deleted_users||0}<br>
      Clientes protegidos y conservados: ${result.protected_clients||0}<br>
      Esta operación no modificó la caja.
    `;
    historicalClientRollbackPreviewData=null;
    button.style.display="none";
    await refreshClients().catch(()=>{});
  }catch(e){
    box.classList.add("error");
    box.textContent=e.message;
  }finally{
    button.disabled=false;
  }
}


let historicalPackageToken=null;

async function openHistoricalPackageImport(){
  if(!isCompanyOwner()){
    alert("La importación histórica es exclusiva del empresario.");
    return;
  }
  historicalModeActive=true;
  applyHistoricalModeUI();
  openSection("historicalPackageSection");
  try{
    const routes=await api("/api/admin/routes");
    historicalPackageDefaultRoute.innerHTML='<option value="">Sin ruta predeterminada</option>'+routes.map(r=>`<option value="${r.id}">${r.name}</option>`).join("");
  }catch(e){
    historicalPackageDefaultRoute.innerHTML='<option value="">Sin ruta predeterminada</option>';
  }
}

let historicalPackageProgressTimer=null;
let historicalPackageProgressValue=0;

function setHistoricalPackageProgress(value,label,state=""){
  const box=document.getElementById("historicalPackageProgress");
  const bar=document.getElementById("historicalPackageProgressBar");
  const percent=document.getElementById("historicalPackageProgressPercent");
  const text=document.getElementById("historicalPackageProgressText");
  if(!box||!bar||!percent||!text)return;
  historicalPackageProgressValue=Math.max(0,Math.min(100,Math.round(value)));
  box.classList.add("open");
  box.classList.remove("done","error");
  if(state)box.classList.add(state);
  bar.style.width=`${historicalPackageProgressValue}%`;
  percent.textContent=`${historicalPackageProgressValue}%`;
  if(label)text.textContent=label;
}

function startHistoricalPackageProgress(){
  if(historicalPackageProgressTimer)clearInterval(historicalPackageProgressTimer);
  setHistoricalPackageProgress(2,"Preparando archivo...");
  historicalPackageProgressTimer=setInterval(()=>{
    let next=historicalPackageProgressValue;
    if(next<25)next+=4;
    else if(next<55)next+=3;
    else if(next<78)next+=2;
    else if(next<92)next+=1;
    else return;
    let label="Leyendo hojas del Excel...";
    if(next>=30)label="Analizando pagos y gastos...";
    if(next>=58)label="Relacionando clientes y créditos...";
    if(next>=80)label="Preparando la vista previa...";
    setHistoricalPackageProgress(next,label);
  },650);
}

function finishHistoricalPackageProgress(ok=true){
  if(historicalPackageProgressTimer){
    clearInterval(historicalPackageProgressTimer);
    historicalPackageProgressTimer=null;
  }
  if(ok){
    setHistoricalPackageProgress(100,"Análisis completado.","done");
  }else{
    setHistoricalPackageProgress(100,"El análisis terminó con un error.","error");
  }
}

async function analyzeHistoricalPackage(){
  historicalPackageMessage.style.display="block";
  historicalPackageMessage.classList.remove("error");
  historicalPackageMessage.textContent="Analizando paquete...";
  historicalPackagePreview.style.display="none";
  startHistoricalPackageProgress();
  try{
    const file=historicalPackageFile.files[0];
    if(!file)throw new Error("Selecciona el archivo consolidado XLSX.");
    const form=new FormData();form.append("file",file);
    const data=await api("/api/admin/historical-import/package/preview",{method:"POST",body:form});
    historicalPackageToken=data.upload_token;
    const s=data.stats||{};
    historicalPackageStats.innerHTML=`
      <div class="import-stat">Pagos históricos<strong>${s.payments_total||0}</strong><small>${money(s.payments_amount||0)}</small></div>
      <div class="import-stat">Pagos asociados<strong>${s.payments_matched||0}</strong><small>Sin asociar: ${s.payments_unmatched||0}</small></div>
      <div class="import-stat">Gastos<strong>${s.expenses_total||0}</strong><small>${money(s.expenses_amount||0)}</small></div>
      <div class="import-stat">Créditos legacy<strong>${s.loan_snapshots_total||0}</strong><small>Asociados: ${s.loan_snapshots_matched||0}</small></div>`;
    historicalPackagePreview.style.display="block";
    finishHistoricalPackageProgress(true);
    historicalPackageMessage.textContent="Paquete leído correctamente. Revisa el resumen antes de importar.";
  }catch(e){
    finishHistoricalPackageProgress(false);
    historicalPackageMessage.classList.add("error");
    historicalPackageMessage.textContent=e.message;
  }
}

async function executeHistoricalPackage(){
  historicalPackageExecuteMessage.style.display="block";
  historicalPackageExecuteMessage.classList.remove("error");
  try{
    if(!historicalPackageToken)throw new Error("Primero analiza el paquete.");
    if(!await sutilConfirm("Se importarán solo los grupos seleccionados. Los duplicados se omitirán. ¿Continuar?"))return;
    historicalPackageExecute.disabled=true;
    historicalPackageExecuteMessage.textContent="Importando...";
    const result=await api("/api/admin/historical-import/package/execute",{
      method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({
        upload_token:historicalPackageToken,
        default_route_id:historicalPackageDefaultRoute.value?Number(historicalPackageDefaultRoute.value):null,
        import_payments:historicalPackagePayments.checked,
        import_expenses:historicalPackageExpenses.checked,
        import_loan_snapshots:historicalPackageLoans.checked
      })
    });
    historicalPackageExecuteMessage.innerHTML=`<strong>${result.message}</strong><br>
      Pagos: ${result.payments_imported} · duplicados: ${result.payments_duplicates} · sin asociar: ${result.payments_unmatched}<br>
      Gastos: ${result.expenses_imported} · duplicados: ${result.expenses_duplicates} · sin ruta: ${result.expenses_skipped_no_route}<br>
      Créditos legacy: ${result.loan_snapshots_imported} · duplicados: ${result.loan_snapshots_duplicates} · sin asociar: ${result.loan_snapshots_unmatched}`;
    historicalPackageToken=null;
  }catch(e){
    historicalPackageExecuteMessage.classList.add("error");
    historicalPackageExecuteMessage.textContent=e.message;
  }finally{
    historicalPackageExecute.disabled=false;
  }
}


let legacyBackupProgressTimer=null;
let legacyBackupProgressValue=0;
let legacyBackupToken=null;

async function loadLegacyExpenseRoutes(){
  const select=document.getElementById("legacyExpenseRoute");
  if(!select)return;
  const previous=select.value;
  try{
    const routes=await api("/api/admin/routes");
    select.innerHTML='<option value="">Selecciona una ruta</option>'+
      routes.map(r=>`<option value="${r.id}">${legacyEscapeHtml(r.name)}${r.active===false?" · histórica/inactiva":""}</option>`).join("");
    if(previous && [...select.options].some(o=>o.value===previous)){
      select.value=previous;
    }
  }catch(e){
    select.innerHTML='<option value="">No fue posible cargar rutas</option>';
  }
}

async function openLegacyBackupPreview(){
  if(!isCompanyOwner()){
    alert("La carga histórica es exclusiva del empresario.");
    return;
  }
  historicalModeActive=true;
  applyHistoricalModeUI();
  openSection("legacyBackupPreviewSection");
  await loadLegacyExpenseRoutes();
}

function setLegacyBackupProgress(value,label,state=""){
  const box=document.getElementById("legacyBackupProgress");
  const bar=document.getElementById("legacyBackupProgressBar");
  const percent=document.getElementById("legacyBackupProgressPercent");
  const text=document.getElementById("legacyBackupProgressText");
  if(!box||!bar||!percent||!text)return;
  legacyBackupProgressValue=Math.max(0,Math.min(100,Math.round(value)));
  box.classList.add("open");
  box.classList.remove("done","error");
  if(state)box.classList.add(state);
  bar.style.width=`${legacyBackupProgressValue}%`;
  percent.textContent=`${legacyBackupProgressValue}%`;
  if(label)text.textContent=label;
}

function startLegacyBackupProgress(){
  if(legacyBackupProgressTimer)clearInterval(legacyBackupProgressTimer);
  setLegacyBackupProgress(2,"Preparando ZIP...");
  legacyBackupProgressTimer=setInterval(()=>{
    let next=legacyBackupProgressValue;
    if(next<25)next+=5;
    else if(next<55)next+=3;
    else if(next<80)next+=2;
    else if(next<93)next+=1;
    else return;

    let label="Leyendo tablas JSON...";
    if(next>=32)label="Verificando clientes y créditos...";
    if(next>=58)label="Verificando cuotas y pagos por UID...";
    if(next>=82)label="Preparando resumen seguro...";
    setLegacyBackupProgress(next,label);
  },500);
}

function finishLegacyBackupProgress(ok=true){
  if(legacyBackupProgressTimer){
    clearInterval(legacyBackupProgressTimer);
    legacyBackupProgressTimer=null;
  }
  if(ok)setLegacyBackupProgress(100,"Análisis completado.","done");
  else setLegacyBackupProgress(100,"El análisis terminó con un error.","error");
}

function legacyEscapeHtml(value){
  return String(value ?? "").replace(/[&<>"']/g,ch=>({
    "&":"&amp;",
    "<":"&lt;",
    ">":"&gt;",
    '"':"&quot;",
    "'":"&#39;"
  })[ch]);
}

function legacyRangeText(range){
  if(!range||!range.from||!range.to)return "Sin fechas";
  return `${range.from} → ${range.to}`;
}


function legacyStageUiName(stage){
  return {
    clients:"Clients",
    loans:"Loans",
    payments:"Payments",
    expenses:"Expenses"
  }[stage];
}

function setLegacyStageProgress(
  stage,
  percent,
  text,
  processed=0,
  total=0,
  status=""
){
  const name=legacyStageUiName(stage);
  if(!name)return;
  const box=document.getElementById(`legacyStage${name}Progress`);
  const bar=document.getElementById(`legacyStage${name}ProgressBar`);
  const percentBox=document.getElementById(`legacyStage${name}ProgressPercent`);
  const textBox=document.getElementById(`legacyStage${name}ProgressText`);
  const countBox=document.getElementById(`legacyStage${name}ProgressCount`);
  if(!box||!bar||!percentBox||!textBox||!countBox)return;

  const safePercent=Math.max(0,Math.min(100,Math.round(Number(percent)||0)));
  box.classList.add("open");
  box.classList.remove("done","error");
  if(status==="done")box.classList.add("done");
  if(status==="error")box.classList.add("error");

  bar.style.width=`${safePercent}%`;
  percentBox.textContent=`${safePercent}%`;
  textBox.textContent=text||"Procesando...";
  countBox.textContent=total>0
    ?`${processed} / ${total} registros procesados`
    :"Preparando registros...";
}

function resetLegacyStageProgressBars(){
  ["clients","loans","payments","expenses"].forEach(stage=>{
    setLegacyStageProgress(stage,0,"Esperando inicio...",0,0,"");
  });
}

function applyLegacyStageStatus(status={}){
  const order=["clients","loans","payments","expenses"];
  let previousComplete=true;

  order.forEach(stage=>{
    const button=legacyStageButton(stage);
    const done=Boolean(status[stage]);

    if(done){
      if(button){
        button.textContent="✅ Etapa completada";
        button.disabled=true;
      }
      setLegacyStageProgress(
        stage,100,"Etapa completada.",1,1,"done"
      );
    }else{
      if(button){
        button.textContent={
          clients:"Importar etapa 1",
          loans:"Importar etapa 2",
          payments:"Importar etapa 3",
          expenses:"Importar etapa 4"
        }[stage];
        button.disabled=!previousComplete;
      }
      setLegacyStageProgress(
        stage,0,"Esperando inicio...",0,0,""
      );
    }

    previousComplete=previousComplete && done;
  });
}

async function pollLegacyStageProgress(stage){
  if(!legacyBackupToken)return;
  try{
    const data=await api(
      `/api/admin/historical-import/legacy-backup/progress/${stage}?token=${encodeURIComponent(legacyBackupToken)}`
    );
    setLegacyStageProgress(
      stage,
      data.percent||0,
      data.message||"Procesando...",
      data.processed||0,
      data.total||0,
      data.status||""
    );
  }catch(e){
    // El POST principal conserva el control del error.
  }
}


function resetLegacyStageButtons(){
  const clients=document.getElementById("legacyStageClientsBtn");
  const loans=document.getElementById("legacyStageLoansBtn");
  const payments=document.getElementById("legacyStagePaymentsBtn");
  const expenses=document.getElementById("legacyStageExpensesBtn");
  if(clients)clients.disabled=false;
  if(loans)loans.disabled=true;
  if(payments)payments.disabled=true;
  if(expenses)expenses.disabled=true;
}

function legacyStageButton(stage){
  return {
    clients:document.getElementById("legacyStageClientsBtn"),
    loans:document.getElementById("legacyStageLoansBtn"),
    payments:document.getElementById("legacyStagePaymentsBtn"),
    expenses:document.getElementById("legacyStageExpensesBtn")
  }[stage] || null;
}

function enableNextLegacyStage(stage){
  const next={
    clients:"loans",
    loans:"payments",
    payments:"expenses"
  }[stage];
  if(next){
    const button=legacyStageButton(next);
    if(button)button.disabled=false;
  }
}

function legacyStageResultHtml(stage,result){
  if(stage==="clients"){
    return `<strong>${legacyEscapeHtml(result.message)}</strong><br>
      Rutas nuevas: ${result.routes_created||0} · reutilizadas: ${result.routes_reused||0} · ya importadas: ${result.routes_duplicates||0}<br>
      Clientes nuevos: ${result.clients_created||0} · asociados a existentes: ${result.clients_matched||0} · ya importados: ${result.clients_duplicates||0}<br>
      Sin documento: ${result.clients_without_document||0} · documentos preservados por aislamiento multiempresa: ${result.documents_preserved_in_notes||0} · errores: ${result.errors||0}`;
  }
  if(stage==="loans"){
    return `<strong>${legacyEscapeHtml(result.message)}</strong><br>
      Créditos reconstruidos: ${result.loans_created||0} · snapshots seguros: ${result.loan_snapshots_created||0} · ya importados: ${result.loans_duplicates||0}<br>
      Cuotas originales creadas: ${result.installments_created||0} · errores: ${result.errors||0}`;
  }
  if(stage==="payments"){
    return `<strong>${legacyEscapeHtml(result.message)}</strong><br>
      Pagos creados: ${result.payments_created||0} · duplicados omitidos: ${result.payments_duplicates||0}<br>
      Vinculados a crédito exacto: ${result.payments_linked_to_loan||0} · vinculados a ventas snapshot: ${result.payments_linked_to_snapshot||0} · errores: ${result.errors||0}`;
  }
  return `<strong>${legacyEscapeHtml(result.message)}</strong><br>
    Gastos creados: ${result.expenses_created||0} · duplicados omitidos: ${result.expenses_duplicates||0} · errores: ${result.errors||0}`;
}

async function analyzeLegacyBackup(){
  const fileInput=document.getElementById("legacyBackupFile");
  const message=document.getElementById("legacyBackupMessage");
  const preview=document.getElementById("legacyBackupPreviewCard");
  const statsBox=document.getElementById("legacyBackupStats");
  const safetyBox=document.getElementById("legacyBackupSafety");
  const stages=document.getElementById("legacyBackupStages");
  const stageMessage=document.getElementById("legacyBackupStageMessage");
  const button=document.getElementById("legacyBackupAnalyzeButton");

  legacyBackupToken=null;
  message.style.display="block";
  message.classList.remove("error");
  preview.style.display="none";
  if(stages)stages.style.display="none";
  if(stageMessage){
    stageMessage.style.display="none";
    stageMessage.textContent="";
    stageMessage.classList.remove("error");
  }
  resetLegacyStageButtons();
  resetLegacyStageProgressBars();

  try{
    const file=fileInput.files[0];
    if(!file)throw new Error("Selecciona el backup original ZIP.");
    if(!file.name.toLowerCase().endsWith(".zip")){
      throw new Error("El archivo debe ser ZIP.");
    }

    button.disabled=true;
    message.textContent="Analizando backup completo...";
    startLegacyBackupProgress();

    const form=new FormData();
    form.append("file",file);
    const data=await api("/api/admin/historical-import/legacy-backup/preview",{
      method:"POST",
      body:form
    });

    legacyBackupToken=data.upload_token;
    if(!legacyBackupToken){
      throw new Error("El servidor no devolvió el token seguro de importación.");
    }
    applyLegacyStageStatus(data.stage_status||{});

    const s=data.stats||{};
    statsBox.innerHTML=`
      <div class="import-stat">Clientes<strong>${s.clients_total||0}</strong><small>Backup completo</small></div>
      <div class="import-stat">Rutas / regiones<strong>${s.routes_total||0}</strong><small>Aisladas por empresa al importar</small></div>
      <div class="import-stat">Créditos / ventas<strong>${s.loans_total||0}</strong><small>UID cliente: ${s.loans_linked_to_client||0}/${s.loans_total||0}</small></div>
      <div class="import-stat">Cuotas originales<strong>${s.installments_total||0}</strong><small>UID crédito: ${s.installments_linked_to_loan||0}/${s.installments_total||0}</small></div>
      <div class="import-stat">Pagos históricos<strong>${s.payments_total||0}</strong><small>${money(s.payments_amount||0)} · UID crédito: ${s.payments_linked_to_loan||0}/${s.payments_total||0}</small></div>
      <div class="import-stat">Gastos<strong>${s.expenses_total||0}</strong><small>${money(s.expenses_amount||0)}</small></div>
      <div class="import-stat">Créditos reconstruibles<strong>${s.loans_reconstructable||0}</strong><small>Snapshots seguros: ${s.loan_snapshots_needed||0}</small></div>
      <div class="import-stat">Total contratado<strong>${money(s.contract_total||0)}</strong><small>Interés registrado: ${money(s.interest_total||0)}</small></div>
      <div class="import-stat">Fechas de créditos<strong style="font-size:15px">${legacyRangeText(s.sales_range)}</strong><small>Desde el inicio disponible</small></div>
      <div class="import-stat">Fechas de pagos<strong style="font-size:15px">${legacyRangeText(s.payments_range)}</strong><small>Rango del backup</small></div>
      <div class="import-stat">Fechas de cuotas<strong style="font-size:15px">${legacyRangeText(s.installments_range)}</strong><small>Rango del backup</small></div>
      <div class="import-stat">Fechas de gastos<strong style="font-size:15px">${legacyRangeText(s.expenses_range)}</strong><small>Rango del backup</small></div>
    `;

    safetyBox.innerHTML=`
      <strong>✅ Vista previa segura</strong><br>
      Empresa autenticada: ${data.company_id}<br>
      Adaptador detectado: ${legacyEscapeHtml(data.adapter||"—")}<br>
      ${data.legacy_company_name?`Empresa del backup: ${legacyEscapeHtml(data.legacy_company_name)}<br>`:""}
      El análisis no escribió registros de negocio ni modificó la caja actual.
      La importación real se habilita abajo por etapas y con control de duplicados.
    `;

    preview.style.display="block";
    if(stages)stages.style.display="block";
    await loadLegacyExpenseRoutes();
    message.textContent="Backup leído correctamente. Revisa las cantidades y ejecuta las etapas en orden.";
    finishLegacyBackupProgress(true);
  }catch(e){
    finishLegacyBackupProgress(false);
    message.classList.add("error");
    message.textContent=e.message;
  }finally{
    button.disabled=false;
  }
}

async function runLegacyBackupStage(stage){
  const message=document.getElementById("legacyBackupStageMessage");
  const button=legacyStageButton(stage);
  if(!legacyBackupToken){
    alert("Primero analiza nuevamente el backup ZIP.");
    return;
  }

  const labels={
    clients:"rutas y clientes",
    loans:"créditos y cuotas",
    payments:"pagos históricos",
    expenses:"gastos históricos"
  };
  const expenseRoute=document.getElementById("legacyExpenseRoute");
  if(stage==="expenses" && (!expenseRoute || !expenseRoute.value)){
    alert("Selecciona la ruta donde se registrarán los gastos históricos.");
    return;
  }

  if(!await sutilConfirm(
    `Se importará la etapa de ${labels[stage]}. `+
    "Los duplicados se omiten y NO se modifica la caja actual. ¿Continuar?"
  ))return;

  message.style.display="block";
  message.classList.remove("error");
  message.textContent=`Importando ${labels[stage]}...`;
  if(button)button.disabled=true;
  setLegacyStageProgress(
    stage,0,`Iniciando ${labels[stage]}...`,0,0,""
  );
  await pollLegacyStageProgress(stage);
  const progressTimer=setInterval(
    ()=>pollLegacyStageProgress(stage),
    300
  );

  try{
    const result=await api(
      `/api/admin/historical-import/legacy-backup/execute/${stage}`,
      {
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body:JSON.stringify({
          upload_token:legacyBackupToken,
          expense_route_id:(
            stage==="expenses" && expenseRoute.value
              ? Number(expenseRoute.value)
              : null
          )
        })
      }
    );

    clearInterval(progressTimer);
    await pollLegacyStageProgress(stage);
    setLegacyStageProgress(
      stage,100,"Etapa completada.",1,1,"done"
    );
    message.innerHTML=legacyStageResultHtml(stage,result);
    if(button){
      button.textContent="✅ Etapa completada";
      button.disabled=true;
    }
    enableNextLegacyStage(stage);

    if(stage==="clients"){
      await Promise.all([
        loadLegacyExpenseRoutes(),
        refreshClients().catch(()=>{}),
        refreshDashboard().catch(()=>{})
      ]);
    }else if(stage==="loans" || stage==="payments"){
      await Promise.all([
        refreshClients().catch(()=>{}),
        refreshDashboard().catch(()=>{})
      ]);
    }else{
      await refreshDashboard().catch(()=>{});
    }
  }catch(e){
    clearInterval(progressTimer);
    await pollLegacyStageProgress(stage);
    message.classList.add("error");
    message.textContent=e.message;
    const name=legacyStageUiName(stage);
    const percentBox=document.getElementById(`legacyStage${name}ProgressPercent`);
    const currentPercent=percentBox
      ?Number(String(percentBox.textContent).replace("%",""))||0
      :0;
    setLegacyStageProgress(
      stage,currentPercent,e.message,0,0,"error"
    );
    if(button)button.disabled=false;
  }
}


function hideHistoricalHubPanels(){
  [
    "historicalImportHub",
    "historicalCompleteHub",
    "historicalStartHub",
    "historicalReviewHub"
  ].forEach(id=>{
    const el=document.getElementById(id);
    if(el)el.style.display="none";
  });
}

function showHistoricalHubPanel(mode){
  hideHistoricalHubPanels();
  const map={
    import:"historicalImportHub",
    complete:"historicalCompleteHub",
    start:"historicalStartHub",
    review:"historicalReviewHub"
  };
  const el=document.getElementById(map[mode]||"");
  if(!el)return;
  el.style.display="block";
  el.scrollIntoView({behavior:"smooth",block:"start"});
}

function openMigrationStartRoutes(){
  historicalModeActive=false;
  forgottenOperationMode=false;
  applyHistoricalModeUI();
  openSection("routesSection");
  Promise.resolve(refreshRoutes()).catch(()=>{}).finally(()=>{
    const box=document.getElementById("routeFormResult");
    if(box){
      box.style.display="block";
      box.classList.remove("error");
      box.innerHTML="<strong>✅ Inicio operativo:</strong> para una ruta nueva usa <strong>Crear ruta</strong> y completa su punto de arranque. Para una ruta existente, entra en <strong>Rutas registradas → Editar</strong> y define la fecha, Efectivo y PIX.";
    }
  });
}

function openHistoricalMode(){
  if(!isCompanyOwner()){
    alert("La carga histórica es exclusiva del empresario.");
    return;
  }
  forgottenOperationMode=false;
  historicalModeActive=true;
  applyHistoricalModeUI();
  hideHistoricalHubPanels();
  openSection("historicalSection");
}

function exitHistoricalMode(){
  historicalModeActive=false;
  forgottenOperationMode=false;
  applyHistoricalModeUI();
  showHome();
}

function historicalGo(sectionId){
  if(!isCompanyOwner())return;
  forgottenOperationMode=false;
  historicalModeActive=true;
  applyHistoricalModeUI();
  openSection(sectionId);
}

function openForgottenOperationMode(){
  if(!canUseForgottenOperation()){
    alert("La operación olvidada requiere ser empresario o ADM con permiso de caja.");
    return;
  }
  historicalModeActive=false;
  forgottenOperationMode=true;
  applyHistoricalModeUI();
  openSection("forgottenOperationSection");
}

function exitForgottenOperationMode(){
  clearForgottenCashBridge();
  forgottenOperationMode=false;
  historicalModeActive=false;
  applyHistoricalModeUI();
  showHome();
}

function forgottenOperationGo(sectionId){
  if(!canUseForgottenOperation())return;
  historicalModeActive=false;
  forgottenOperationMode=true;
  applyHistoricalModeUI();
  openSection(sectionId);
  const today=historicalDateOrToday();
  if(sectionId==="loansSection" && !loanDate.value){loanDate.value=today;syncFirstInstallmentFromLoanDate(true);}
  if(sectionId==="collectionsSection")collectionsDate.value=today;
  if(sectionId==="expensesSection")expenseDate.value=today;
}

function snapshotForgottenLoanDraft(){
  return {
    sectionId:"loansSection",
    loanClientSearch:loanClientSearch?.value||"",
    loanClient:loanClient?.value||"",
    principal:principal?.value||"",
    deliveryMethod:loanDeliveryMethod?.value||"cash",
    interestRate:interestRate?.value||"",
    interestManualOverride:!!loanInterestManualOverride,
    installmentCount:installmentCount?.value||"",
    manualInstallment:manualInstallment?.value||"",
    frequency:frequency?.value||"daily",
    loanDate:loanDate?.value||"",
    startDate:startDate?.value||"",
    firstInstallmentManual:!!loanFirstInstallmentManual,
    includeSaturdays:!!includeSaturdays?.checked,
    includeSundays:!!includeSundays?.checked,
    weeklyDay:weeklyDay?.value||"",
    monthlyDay:monthlyDay?.value||"",
    editEachInstallment:!!editEachInstallment?.checked,
    installments:(editableInstallments||[]).map(row=>({...row}))
  };
}

function restoreForgottenLoanDraft(draft){
  if(!draft)return;
  loanClientSearch.value=draft.loanClientSearch||"";
  renderLoanClientOptions(clientRows);
  if(draft.loanClientSearch)filterLoanClients();
  if(Array.from(loanClient.options).some(opt=>String(opt.value)===String(draft.loanClient||""))){
    loanClient.value=String(draft.loanClient);
  }else{
    renderLoanClientOptions(clientRows);
    loanClient.value=String(draft.loanClient||"");
  }
  if(loanClient.value){loanClientSearch.dataset.selectedId=String(loanClient.value);}
  principal.value=draft.principal||"";
  loanDeliveryMethod.value=draft.deliveryMethod||"cash";
  interestRate.value=draft.interestRate||"";
  loanInterestManualOverride=typeof draft.interestManualOverride==="boolean" ? draft.interestManualOverride : !!draft.interestRate;
  loanInterestAutoFilled=!loanInterestManualOverride && !!draft.interestRate;
  installmentCount.value=draft.installmentCount||"";
  manualInstallment.value=draft.manualInstallment||"";
  frequency.value=draft.frequency||"daily";
  loanDate.value=draft.loanDate||localTodayIso();
  startDate.value=draft.startDate||"";
  loanFirstInstallmentManual=!!draft.firstInstallmentManual;
  if(!startDate.value)syncFirstInstallmentFromLoanDate(true);
  includeSaturdays.checked=!!draft.includeSaturdays;
  includeSundays.checked=!!draft.includeSundays;
  weeklyDay.value=draft.weeklyDay||weeklyDay.value;
  if(frequency.value==="weekly" && startDate.value)syncWeeklyDayFromFirstInstallment();
  monthlyDay.value=draft.monthlyDay||monthlyDay.value;
  editEachInstallment.checked=!!draft.editEachInstallment;
  editableInstallments=(draft.installments||[]).map(row=>({...row}));
  if(editEachInstallment.checked && editableInstallments.length){
    installmentEditorBox.classList.add("open");
    renderInstallmentEditor();
  }else{
    installmentEditorBox.classList.remove("open");
    installmentEditorRows.innerHTML="";
    installmentEditorTotal.innerHTML="";
  }
  updateFrequencyFields();
  syncInterestCalculationMode(false);
  updateLoanClientPreview();
  updatePreview();
  setTimeout(()=>updateLoanCashStatus().catch(()=>{}),0);
}

function showForgottenCashReturnCard(){
  const card=document.getElementById("forgottenCashReturnCard");
  const text=document.getElementById("forgottenCashReturnText");
  if(!card)return;
  const bridge=forgottenCashBridge;
  card.style.display=bridge?"block":"none";
  if(text && bridge){
    text.textContent=`Abre o reabre la caja del ${formatDateEs(bridge.cashDate)} para esta ruta. Después vuelve al crédito olvidado; los datos escritos siguen guardados.`;
  }
}

function clearForgottenCashBridge(){
  forgottenCashBridge=null;
  const card=document.getElementById("forgottenCashReturnCard");
  if(card)card.style.display="none";
}

function goOpenCashForForgottenLoan(){
  if(!forgottenOperationMode)return;
  const client=clientRows.find(c=>Number(c.id)===Number(loanClient.value||0));
  if(!client||!client.route_id){
    alert("Selecciona primero el cliente del crédito.");
    return;
  }
  forgottenCashBridge={
    active:true,
    type:"loan",
    routeId:Number(client.route_id),
    cashDate:localTodayIso(),
    draft:snapshotForgottenLoanDraft()
  };
  openSection("cashSection");
}

function returnToForgottenOperation(){
  const bridge=forgottenCashBridge;
  if(!bridge)return;
  const draft=bridge.draft;
  clearForgottenCashBridge();
  historicalModeActive=false;
  forgottenOperationMode=true;
  applyHistoricalModeUI();
  openSection(bridge.type==="loan"?"loansSection":"forgottenOperationSection");
  if(bridge.type==="loan")restoreForgottenLoanDraft(draft);
}

function historicalDateOrToday(){
  return localTodayIso();
}

// FIX 12.15.117: en Cobros normales la fecha de trabajo siempre es HOY.
// Se muestra como texto completo (día + fecha) para que no parezca seleccionable.
// Solo Carga histórica / Cobro olvidado mantienen el selector de fecha real.
function sutilCollectionsWorkDateLanguage(){
  const raw=String(
    (typeof SUTIL_ACTIVE_LANGUAGE!=="undefined" && SUTIL_ACTIVE_LANGUAGE) ||
    (typeof accessLanguageCode!=="undefined" && accessLanguageCode) ||
    document.documentElement.lang ||
    "es"
  ).toLowerCase().slice(0,2);
  return ["es","pt","en"].includes(raw)?raw:"es";
}

function sutilFormatCollectionsFullDate(iso){
  const value=String(iso||localTodayIso());
  const parts=value.split("-").map(Number);
  const date=(parts.length===3 && parts.every(Number.isFinite))
    ? new Date(parts[0],parts[1]-1,parts[2])
    : new Date();
  const lang=sutilCollectionsWorkDateLanguage();
  const locale=lang==="pt"?"pt-BR":(lang==="en"?"en-US":"es-ES");
  let text=new Intl.DateTimeFormat(locale,{
    weekday:"long",
    day:"numeric",
    month:"long",
    year:"numeric"
  }).format(date);
  if(text)text=text.charAt(0).toLocaleUpperCase(locale)+text.slice(1);
  return text;
}

function updateCollectionsWorkDateDisplay(){
  const display=document.getElementById("collectionsDateTodayDisplay");
  if(!display)return;
  const iso=collectionsDate?.value || localTodayIso();
  display.textContent=sutilFormatCollectionsFullDate(iso);
}

function syncCollectionsWorkDateMode(){
  if(!collectionsDate)return;
  const today=localTodayIso();
  const canChoosePast=Boolean(historicalModeActive || forgottenOperationMode);
  const label=document.getElementById("collectionsWorkDateLabel");

  collectionsDate.max=today;
  label?.classList.toggle("collections-workdate-editable",canChoosePast);

  if(canChoosePast){
    collectionsDate.readOnly=false;
    collectionsDate.style.pointerEvents="";
    collectionsDate.removeAttribute("aria-readonly");
    collectionsDate.removeAttribute("tabindex");
    collectionsDate.title=forgottenOperationMode
      ? "Selecciona la fecha real del cobro olvidado."
      : "Selecciona la fecha real de la operación histórica.";
    if(!collectionsDate.value)collectionsDate.value=today;
    collectionsDate.removeAttribute("min");
  }else{
    collectionsDate.value=today;
    collectionsDate.min=today;
    collectionsDate.readOnly=true;
    collectionsDate.style.pointerEvents="none";
    collectionsDate.setAttribute("aria-readonly","true");
    collectionsDate.setAttribute("tabindex","-1");
    collectionsDate.title="Los cobros normales usan siempre la fecha de hoy. Para registrar una fecha anterior usa Cobro olvidado.";
  }

  updateCollectionsWorkDateDisplay();
}

function showHome(resetNavigation=true, writeHistory=true) {
  clearForgottenCashBridge();
  historicalModeActive=false;
  forgottenOperationMode=false;
  applyHistoricalModeUI();

  currentSectionId = "homeSection";
  if(resetNavigation)sutilResetNavigationStack();
  if(writeHistory && sutilBackGuardReady){
    sutilPushSectionHistory("homeSection");
  }

  document.querySelectorAll(".section").forEach(s => s.classList.remove("active"));
  document.getElementById("homeSection").classList.add("active");
  document.getElementById("homeButton").style.display = "none";
  document.getElementById("backButton").style.display = "none";
  window.scrollTo({top:0, behavior:"smooth"});
}

function sutilCloseTransientViewBeforeBack(){
  try{
    const globalDialog=document.getElementById("sutilGlobalDialog");
    if(globalDialog?.classList.contains("open")){
      closeSutilDialog(false);
      return true;
    }

    const ownerMenu=document.getElementById("ownerQuickMenu");
    if(ownerMenu?.classList.contains("open")){
      closeOwnerQuickMenu();
      return true;
    }

    if(directPaymentBackdrop?.classList.contains("open")){
      closeDirectPayment();
      return true;
    }

    if(editClientModal?.classList.contains("open")){
      closeEditClient();
      return true;
    }

    if(loanDetailCard && loanDetailCard.style.display !== "none"){
      closeLoanDetail();
      try{clientHistoryPane?.scrollIntoView({behavior:"smooth",block:"start"});}catch(_){}
      return true;
    }

    if(
      currentSectionId === "clientsSection" &&
      clientDetailCard &&
      clientDetailCard.style.display !== "none" &&
      clientDirectoryCard?.classList.contains("hidden-for-detail")
    ){
      backToClientDirectory();
      return true;
    }
  }catch(_){}

  return false;
}

function goBack() {
  if(sutilCloseTransientViewBeforeBack())return;

  /* El botón visible Volver usa exactamente el mismo historial que Android. */
  if(sutilBackGuardReady && window.history){
    try{
      history.back();
      return;
    }catch(_){}
  }

  // Respaldo para navegadores sin History API.
  if(sutilNavStack.length > 1){
    sutilNavStack.pop();
    const target=sutilNavStack[sutilNavStack.length-1]||"homeSection";
    sutilSyncPreviousSection();
    if(target==="homeSection")showHome(false,false);
    else openSection(target,false,false);
    return;
  }
  showHome(false,false);
}


function openClientDirectory(){
  openSection("clientsSection");
  backToClientDirectory(false);
}

function openClientSearch(){
  openSection("clientsSection");
  backToClientDirectory(false);
  setTimeout(()=>{
    if(clientsSearch){
      clientsSearch.focus();
      clientsSearch.scrollIntoView({behavior:"smooth",block:"center"});
    }
  },120);
}

function backToClientDirectory(scroll=true){
  if(clientDirectoryCard)clientDirectoryCard.classList.remove("hidden-for-detail");
  if(clientDetailCard)clientDetailCard.style.display="none";
  if(scroll)window.scrollTo({top:0,behavior:"smooth"});
}

function mountOwnerMobileCredentials(){
  const isOwner=Boolean(currentUser && ["company_owner","sutil_owner"].includes(currentUser.role));
  const mobile=window.matchMedia && window.matchMedia("(max-width:760px)").matches;
  const controls=document.getElementById("sessionControls");
  const menuMount=document.getElementById("ownerQuickMenuSessionMount");
  const headerMount=document.getElementById("headerSessionMount");
  const identity=document.getElementById("ownerQuickMenuIdentity");
  if(identity && currentUser){
    const roleLabel=currentUser.role==="company_owner"?"Dueño de empresa":(currentUser.role==="sutil_owner"?"Dueño de Sutil":currentUser.role);
    identity.innerHTML=`<div class="sutil-owner-identity-line"><span class="sutil-owner-identity-label">Empresa activa:</span><strong>${escapeHtml(currentUser.company_name||"Sutil")}</strong></div>`+
      `<div class="sutil-owner-identity-line"><span class="sutil-owner-identity-label">Perfil:</span><strong>${escapeHtml(roleLabel)}</strong></div>`+
      (currentUser.company_key?`<div class="sutil-owner-identity-line"><span class="sutil-owner-identity-label">Llave:</span><strong>${escapeHtml(currentUser.company_key)}</strong></div>`:"");
  }
  if(controls){
    if(isOwner && mobile && menuMount && controls.parentElement!==menuMount)menuMount.appendChild(controls);
    else if((!isOwner || !mobile) && headerMount && controls.parentElement!==headerMount)headerMount.appendChild(controls);
  }
}

window.addEventListener("resize",()=>{
  if(document.body.classList.contains("sutil-admin-authenticated")){
    try{mountOwnerMobileCredentials();}catch(_){}
  }
});

function toggleOwnerQuickMenu(){
  if(!currentUser || !["company_owner","sutil_owner"].includes(currentUser.role))return;
  const menu=document.getElementById("ownerQuickMenu");
  const button=document.getElementById("ownerMenuButton");
  const company=document.getElementById("ownerQuickMenuIdentity");
  if(!menu)return;
  const willOpen=!menu.classList.contains("open");
  menu.classList.toggle("open",willOpen);
  menu.setAttribute("aria-hidden",willOpen?"false":"true");
  if(button)button.setAttribute("aria-expanded",willOpen?"true":"false");
  if(company && currentUser){
    const roleLabel = currentUser.role === "company_owner" ? "Dueño de empresa" : (currentUser.role === "sutil_owner" ? "Dueño de Sutil" : currentUser.role);
    company.innerHTML =
      `<div class="sutil-owner-identity-line"><span class="sutil-owner-identity-label">Empresa activa:</span><strong>${escapeHtml(currentUser.company_name||"Sutil")}</strong></div>`+
      `<div class="sutil-owner-identity-line"><span class="sutil-owner-identity-label">Perfil:</span><strong>${escapeHtml(roleLabel)}</strong></div>`+
      (currentUser.company_key ? `<div class="sutil-owner-identity-line"><span class="sutil-owner-identity-label">Llave:</span><strong>${escapeHtml(currentUser.company_key)}</strong></div>` : "");
  }
  document.body.classList.toggle("sutil-owner-menu-open",willOpen);
}

function closeOwnerQuickMenu(){
  const menu=document.getElementById("ownerQuickMenu");
  const button=document.getElementById("ownerMenuButton");
  if(menu){menu.classList.remove("open");menu.setAttribute("aria-hidden","true");}
  if(button)button.setAttribute("aria-expanded","false");
  document.body.classList.remove("sutil-owner-menu-open");
}

function closeOwnerQuickMenuFromBackdrop(event){
  if(event?.target?.id==="ownerQuickMenu")closeOwnerQuickMenu();
}

function openOwnerQuickSection(sectionId){
  closeOwnerQuickMenu();
  openSection(sectionId);
}

function openSection(id, remember=true, writeHistory=true) {
  closeOwnerQuickMenu();

  if(id === "homeSection"){
    showHome(remember, writeHistory);
    return;
  }
  if(id!=="chatsSection") stopChatCenterPolling();
  if(id!=="staffSection") stopStaffLocationPolling();
  if(id!=="locationsSection") stopLocationsPolling();
  if(id!=="sutilSupportSection") stopSutilSupportPolling();
  if (
    currentUser &&
    !["company_owner", "sutil_owner"].includes(currentUser.role) &&
    !hasSectionPermission(id)
  ) {
    alert("No tienes permiso para abrir este módulo.");
    return;
  }
  if(remember && id !== currentSectionId){
    if(!sutilNavStack.length)sutilNavStack=["homeSection"];
    if(sutilNavStack[sutilNavStack.length-1] !== currentSectionId){
      sutilNavStack.push(currentSectionId || "homeSection");
    }
    if(sutilNavStack[sutilNavStack.length-1] !== id){
      sutilNavStack.push(id);
    }
    sutilSyncPreviousSection();
  }
  if(writeHistory && sutilBackGuardReady){
    sutilPushSectionHistory(id);
  }

  currentSectionId = id;
  document.querySelectorAll(".section").forEach(s => s.classList.remove("active"));
  document.getElementById(id).classList.add("active");
  if (id === "settingsSection" && currentUser && ["company_owner","sutil_owner"].includes(currentUser.role)) loadCompanySettings();
  document.getElementById("homeButton").style.display = "inline-block";
  document.getElementById("backButton").style.display = "inline-block";
  if (id === "newClientSection") loadClientFormOptions();
  if (id === "clientsSection") {
    backToClientDirectory(false);
    refreshClients();
  }
  if (id === "receiptsSection") {
    if (typeof sutilSwitchReceiptsHub === "function") sutilSwitchReceiptsHub("receipts",true);
    if (typeof sutilUpdateReceiptPeriodUi === "function") sutilUpdateReceiptPeriodUi();
    refreshReceipts();
  }
  if (id === "receiptsSection" && typeof loadReconciliationPanel === "function") loadReconciliationPanel();
  if (id === "routesSection") { openRoutesPane(null); refreshRoutes(); }
  if (id === "collectionMethodsSection") loadCollectionAccounts();
  if (id === "sutilSupportSection") { loadSutilSupport(); startSutilSupportPolling(); }
  if (id === "loansSection") {
    // FIX 12.15.71: al entrar a Créditos no abrir ningún panel automáticamente.
    showLoansHubPane(null);
    resetLoanCreateForm();
    // No depender de haber entrado antes a Clientes registrados.
    // Si la precarga todavía está en curso, actualiza el buscador apenas llegue.
    sutilEnsureClientRowsReady(false).then(()=>{
      renderLoanClientOptions(clientRows);
      if(loanClientSearch?.value && !loanClientSearch?.dataset?.selectedId){
        filterLoanClients();
      }
    }).catch(error=>{
      const results=document.getElementById("loanClientSearchResults");
      if(results && loanClientSearch?.value){
        results.classList.add("open");
        results.innerHTML=`<div class="loan-client-search-empty">No fue posible cargar clientes. ${escapeHtml(error?.message||"")}</div>`;
      }
    });
  }
  if (id === "collectionsSection") {
    if((historicalModeActive || forgottenOperationMode) && !collectionsDate.value)collectionsDate.value=historicalDateOrToday();
    syncCollectionsWorkDateMode();
    collectionsMode=null;
    const todayIso = localTodayIso();
    const firstDayMonth = new Date();
    firstDayMonth.setDate(1);
    const monthStartIso = firstDayMonth.toISOString().slice(0,10);
    // Pagos recibidos inicia en HOY; el histórico por cliente conserva su rango mensual.
    if(receivedPaymentsDateFrom)receivedPaymentsDateFrom.value = todayIso;
    if(receivedPaymentsDateTo)receivedPaymentsDateTo.value = todayIso;
    const receivedToday=document.querySelector('input[name="receivedPaymentsPeriod"][value="today"]');
    if(receivedToday)receivedToday.checked=true;
    updateReceivedPaymentsDateVisibility("today");
    if(clientPaymentsDateFrom && !clientPaymentsDateFrom.value)clientPaymentsDateFrom.value = monthStartIso;
    if(clientPaymentsDateTo && !clientPaymentsDateTo.value)clientPaymentsDateTo.value = todayIso;
    showCollectionsMode(null);
  }
  if (id === "chatsSection") loadChatsCenter();
  if (id === "locationsSection") loadLocations(true);
  if (id === "reportsSection") { resetReportsHubView(); loadReports(); }
  if (id === "cashSection") prepareCashSection();
  if (id === "baseMovementsSection") {
    clearBaseMovementMessages();
    loadBaseMovementRoutes();
  }
  if (id === "cashReportSection") loadCashMovements();
  if (id === "expensesSection") {
    if((historicalModeActive || forgottenOperationMode) && !expenseDate.value)expenseDate.value=historicalDateOrToday();
    loadExpenses();
  }
  if (id === "staffSection") {
    if (currentUser) {
      staffCompanyName.textContent = `· ${currentUser.company_name || ""}`;
    }
    refreshStaff().then(()=>{
      if(staffActiveView==="locations"){refreshStaffLocationRouteOptions();renderStaffLocationsList();renderSelectedStaffLocation();}
    });
    openStaffSubmodule("home");
  }
  window.scrollTo({top:0, behavior:"smooth"});
  // v78 móvil: una sola reaplicación controlada. El traductor incremental
  // se encarga únicamente del contenido nuevo que aparezca después.
  reapplySutilLanguageOnce(120);
}


function persistToken(){
  localStorage.removeItem("sutil_admin_token");
  sessionStorage.removeItem("sutil_admin_token");
  if(!token)return;
  if(keepSessionOpen.checked){
    localStorage.setItem("sutil_admin_token",token);
  }else{
    sessionStorage.setItem("sutil_admin_token",token);
  }
}

function updateSessionPreference(){
  persistToken();
  scheduleSessionRenewal();
}

let adminLoginLockTimer=null;

function stopAdminLoginCountdown(){
  if(adminLoginLockTimer){
    clearInterval(adminLoginLockTimer);
    adminLoginLockTimer=null;
  }
}

function startAdminLoginCountdown(totalSeconds){
  stopAdminLoginCountdown();
  const button=document.getElementById("adminLoginButton");
  const message=document.getElementById("loginStatusMessage");
  let remaining=Math.max(1,Number(totalSeconds)||60);
  if(button)button.disabled=true;

  const render=()=>{
    const minutes=Math.floor(remaining/60);
    const seconds=remaining%60;
    if(message){
      message.style.color="#b42318";
      message.textContent=
        `🔒 Acceso bloqueado. Intenta nuevamente en ${String(minutes).padStart(2,"0")}:${String(seconds).padStart(2,"0")}`;
    }
    if(remaining<=0){
      stopAdminLoginCountdown();
      if(button)button.disabled=false;
      if(message){
        message.style.color="#087f23";
        message.textContent="✅ Ya puedes intentar ingresar nuevamente.";
      }
    }
  };

  render();
  adminLoginLockTimer=setInterval(()=>{
    remaining=Math.max(0,remaining-1);
    render();
  },1000);
}

function logout(){
  stopSutilGeneralNotificationPolling();
  closeOwnerQuickMenu();
  sessionExpiryHandling=false;
  clearSessionRenewTimers();
  hideSessionRenewBanner();
  stopAdminLoginCountdown();
  stopChatCenterPolling();
  stopClientChatPolling();
  const loginButton=document.getElementById("adminLoginButton");
  const loginStatus=document.getElementById("loginStatusMessage");
  if(loginButton)loginButton.disabled=false;
  if(loginStatus)loginStatus.textContent="";
  try{if(typeof deactivateSutilPushOnLogout==="function")void deactivateSutilPushOnLogout();}catch(_){}
  token="";
  currentUser=null;
  document.body.classList.remove("sutil-admin-authenticated","sutil-owner-auth");
  const headerThemeSwitch=document.getElementById("headerThemeSwitch");
  if(headerThemeSwitch)headerThemeSwitch.style.display="none";
  try{mountOwnerMobileCredentials();}catch(_){}
  localStorage.removeItem("sutil_admin_token");
  sessionStorage.removeItem("sutil_admin_token");
  sessionStorage.removeItem("sutil_offline_user_id");
  sessionStorage.removeItem("sutil_offline_company_id");
  todayCollectionRows=[];
  selectedCollectionClientId=null;
  activeCompanyBanner.style.display="none";
  sessionControls.style.display="none";
  document.getElementById("app").style.display="none";
  document.getElementById("login").style.display="none";
  document.getElementById("profileChooser").style.display="block";
  document.getElementById("homeButton").style.display="none";
  document.getElementById("backButton").style.display="none";
  selectedProfile="";
  historicalModeActive=false;
  applyHistoricalModeUI();
  loginPassword.value="";
  loginMsg.textContent="";
  showHome();
}

const ACCESS_I18N={
 es:{lang:'🌐 Idioma',choose:'Elige tu perfil',chooseSub:'Selecciona cómo deseas ingresar a Sutil.',owner:'Dueño de empresa',ownerText:'Control general, rutas, permisos y reportes',adm:'ADM',admText:'Administrador autorizado por el empresario',collector:'Cobrador',collectorText:'Acceso según ruta y permisos asignados',ownerLogin:'Acceso del Dueño de Empresa',ownerSub:'Ingresa con la llave de tu empresa, tu celular y tu clave.',admLogin:'Acceso ADM',admSub:'Ingresa con las credenciales y permisos asignados por el empresario.',collectorLogin:'Acceso del Cobrador',collectorSub:'Ingresa con las credenciales entregadas por tu empresa.',key:'Llave de la empresa',keyPh:'Escribe la llave de tu empresa',phone:'Celular / usuario',password:'Clave',enter:'Entrar',register:'Registrarse',back:'← Regresar y escoger otro perfil',help:'¿Problemas para ingresar?',helpInfo:'Recupera tu contraseña o la llave de tu empresa mediante el correo registrado.',forgotPass:'🔒 Olvidé mi contraseña',forgotKey:'🔑 Olvidé la llave',forgotPhone:'📱 Olvidé mi celular / usuario',phoneResult:'Celular / usuario registrado',recoveryEmail:'Correo registrado',sendCode:'Enviar código',code:'Código',verify:'Verificar',newPass:'Nueva contraseña',changePass:'Cambiar contraseña',keyResult:'Llave de tu empresa',copy:'📋 Copiar',copied:'Copiada ✓'},
 pt:{lang:'🌐 Idioma',choose:'Escolha seu perfil',chooseSub:'Selecione como deseja entrar no Sutil.',owner:'Dono da empresa',ownerText:'Controle geral, rotas, permissões e relatórios',adm:'ADM',admText:'Administrador autorizado pelo empresário',collector:'Cobrador',collectorText:'Acesso conforme rota e permissões atribuídas',ownerLogin:'Acesso do Dono da Empresa',ownerSub:'Entre com a chave da empresa, seu celular e sua senha.',admLogin:'Acesso ADM',admSub:'Entre com as credenciais e permissões atribuídas pelo empresário.',collectorLogin:'Acesso do Cobrador',collectorSub:'Entre com as credenciais fornecidas pela empresa.',key:'Chave da empresa',keyPh:'Digite a chave da sua empresa',phone:'Celular / usuário',password:'Senha',enter:'Entrar',register:'Cadastrar-se',back:'← Volver e escolher outro perfil',help:'Problemas para entrar?',helpInfo:'Recupere sua senha ou a chave da empresa pelo e-mail cadastrado.',forgotPass:'🔒 Esqueci minha senha',forgotKey:'🔑 Esqueci a chave',forgotPhone:'📱 Esqueci meu celular / usuário',phoneResult:'Celular / usuário cadastrado',recoveryEmail:'E-mail cadastrado',sendCode:'Enviar código',code:'Código',verify:'Verificar',newPass:'Nova senha',changePass:'Alterar senha',keyResult:'Chave da sua empresa',copy:'📋 Copiar',copied:'Copiada ✓'},
 en:{lang:'🌐 Language',choose:'Choose your profile',chooseSub:'Select how you want to sign in to Sutil.',owner:'Business owner',ownerText:'General control, routes, permissions and reports',adm:'ADM',admText:'Administrator authorized by the business owner',collector:'Collector',collectorText:'Access according to assigned route and permissions',ownerLogin:'Business Owner Access',ownerSub:'Enter your company key, mobile number and password.',admLogin:'ADM Access',admSub:'Enter the credentials and permissions assigned by the business owner.',collectorLogin:'Collector Access',collectorSub:'Enter the credentials provided by your company.',key:'Company key',keyPh:'Enter your company key',phone:'Mobile / user',password:'Password',enter:'Sign in',register:'Create account',back:'← Back and choose another profile',help:'Trouble signing in?',helpInfo:'Recover your password or company key through the registered email.',forgotPass:'🔒 I forgot my password',forgotKey:'🔑 I forgot my key',forgotPhone:'📱 I forgot my phone / username',phoneResult:'Registered phone / username',recoveryEmail:'Registered email',sendCode:'Send code',code:'Code',verify:'Verify',newPass:'New password',changePass:'Change password',keyResult:'Your company key',copy:'📋 Copy',copied:'Copied ✓'}
};
let accessLanguageCode=localStorage.getItem('sutil_selected_language')||localStorage.getItem('sutil_access_language')||'es';
function setLabelText(id,text){const el=document.getElementById(id);if(!el)return;for(const n of [...el.childNodes])if(n.nodeType===3){n.nodeValue=text+'\n      ';return}}
function setAccessLanguage(code){accessLanguageCode=['es','pt','en'].includes(String(code||'').toLowerCase())?String(code).toLowerCase():'es';try{localStorage.setItem('sutil_access_language',accessLanguageCode);localStorage.setItem('sutil_selected_language',accessLanguageCode);}catch(_e){}if(currentUser&&typeof persistSutilCompanyLanguage==='function')persistSutilCompanyLanguage(accessLanguageCode);if(typeof applySutilLanguage==='function')applySutilLanguage(accessLanguageCode);const t=ACCESS_I18N[accessLanguageCode]||ACCESS_I18N.es;const sel=document.getElementById('accessLanguage');if(sel)sel.value=accessLanguageCode;const cfg=document.getElementById('settingLanguage');if(cfg)cfg.value=accessLanguageCode;setLabelText('accessLanguageLabel',t.lang);document.getElementById('profileChooserTitle').textContent=t.choose;document.getElementById('profileChooserSubtitle').textContent=t.chooseSub;document.getElementById('ownerProfileTitle').textContent=t.owner;document.getElementById('ownerProfileText').textContent=t.ownerText;document.getElementById('admProfileTitle').textContent=t.adm;document.getElementById('admProfileText').textContent=t.admText;document.getElementById('collectorProfileTitle').textContent=t.collector;document.getElementById('collectorProfileText').textContent=t.collectorText;setLabelText('companyKeyLabel',t.key);companyKey.placeholder=t.keyPh;setLabelText('phoneLabel',t.phone);setLabelText('passwordLabel',t.password);document.getElementById('adminLoginButton').textContent=t.enter;document.getElementById('registerCompanyButton').textContent=t.register;document.getElementById('backProfilesButton').textContent=t.back;const hb=document.getElementById('loginHelpButton');if(hb)hb.textContent=t.help;const ht=document.getElementById('loginHelpTitle');if(ht)ht.textContent=t.help;const hi=document.getElementById('loginHelpInfo');if(hi)hi.textContent=t.helpInfo;const fp=document.getElementById('forgotPasswordButton');if(fp)fp.textContent=t.forgotPass;const fk=document.getElementById('forgotKeyButton');if(fk)fk.textContent=t.forgotKey;const fph=document.getElementById('forgotPhoneButton');if(fph)fph.textContent=t.forgotPhone;setLabelText('loginRecoveryEmailLabel',t.recoveryEmail);document.getElementById('loginRecoverySendButton').textContent=t.sendCode;setLabelText('loginRecoveryCodeLabel',t.code);document.getElementById('loginRecoveryVerifyButton').textContent=t.verify;setLabelText('loginRecoveryNewPasswordLabel',t.newPass);document.getElementById('loginRecoveryResetButton').textContent=t.changePass;document.getElementById('loginRecoveredKeyLabel').textContent=t.keyResult;document.getElementById('copyRecoveredKeyButton').textContent=t.copy;if(selectedProfile){const map=selectedProfile==='owner'?[t.ownerLogin,t.ownerSub]:selectedProfile==='admin'?[t.admLogin,t.admSub]:[t.collectorLogin,t.collectorSub];loginTitle.textContent=map[0];loginSubtitle.textContent=map[1]}if(typeof syncSutilMobileSelectButtons==='function')syncSutilMobileSelectButtons()}


let loginRecoveryMode="";
let loginRecoveryCodeStable="";
function rememberLoginRecoveryCode(){
  const el=document.getElementById("loginRecoveryCode");
  if(!el)return;
  const v=String(el.value||"").replace(/\D/g,"").slice(0,6);
  if(v)loginRecoveryCodeStable=v;
  if(el.value!==v)el.value=v;
}
let loginRecoveryToken="";
function loginRecoveryT(){return ACCESS_I18N[accessLanguageCode]||ACCESS_I18N.es}
document.addEventListener("input",function(e){if(e.target&&e.target.id==="loginRecoveryCode")rememberLoginRecoveryCode()},true);
document.addEventListener("change",function(e){if(e.target&&e.target.id==="loginRecoveryCode")rememberLoginRecoveryCode()},true);
function scrollLoginRecoveryTo(el){
  if(!el)return;
  requestAnimationFrame(()=>setTimeout(()=>el.scrollIntoView({behavior:"smooth",block:"start"}),60));
}
function openLoginHelp(){
  const p=document.getElementById("loginHelpPanel");
  p.style.display="block";
  document.getElementById("loginHelpInfo").textContent=loginRecoveryT().helpInfo;
  scrollLoginRecoveryTo(p);
}
function closeLoginHelp(){const p=document.getElementById("loginHelpPanel");if(p)p.style.display="none";const f=document.getElementById("loginRecoveryForm");if(f)f.style.display="none";loginRecoveryMode="";loginRecoveryToken="";}
function selectLoginRecovery(mode){
  loginRecoveryMode=mode;loginRecoveryToken="";
  document.getElementById("loginRecoveryForm").style.display="block";
  document.getElementById("loginRecoveryPasswordWrap").style.display="none";
  document.getElementById("loginRecoveredKeyWrap").style.display="none";
  document.getElementById("loginRecoveryStatus").textContent="";
  document.getElementById("loginRecoveryCode").value="";
  scrollLoginRecoveryTo(document.getElementById("loginRecoveryForm"));
}
async function requestLoginRecovery(){
  const email=document.getElementById("loginRecoveryEmail").value.trim();
  const status=document.getElementById("loginRecoveryStatus");
  try{
    const endpoint=loginRecoveryMode==="key"?"/api/public/company-key-recovery/request":"/api/public/password-recovery/request";
    const d=await api(endpoint,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email})});
    status.textContent=d.message||loginRecoveryT().sendCode;
    scrollLoginRecoveryTo(document.getElementById("loginRecoveryCodeLabel"));
  }catch(e){status.textContent=e.message}
}
async function confirmLoginRecovery(){
  const email=document.getElementById("loginRecoveryEmail").value.trim();
  rememberLoginRecoveryCode();
  const code=(loginRecoveryCodeStable||document.getElementById("loginRecoveryCode").value||"").trim();
  const status=document.getElementById("loginRecoveryStatus");
  if(document.activeElement&&typeof document.activeElement.blur==="function")document.activeElement.blur();
  try{
    if(loginRecoveryMode==="key"){
      const d=await api("/api/public/company-key-recovery/confirm",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email,code})});
      document.getElementById("loginRecoveredKeyLabel").textContent=loginRecoveryT().keyResult;
      document.getElementById("loginRecoveredKey").textContent=d.access_key||"";
      document.getElementById("loginRecoveredKeyWrap").style.display="block";
      status.textContent=d.message||"";
      scrollLoginRecoveryTo(document.getElementById("loginRecoveredKeyWrap"));
    }else{
      const d=await api("/api/public/password-recovery/confirm",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email,code})});
      loginRecoveryToken=d.reset_token;
      if(loginRecoveryMode==="phone"){
        document.getElementById("loginRecoveredKeyLabel").textContent=loginRecoveryT().phoneResult;
        document.getElementById("loginRecoveredKey").textContent=d.phone||"";
        document.getElementById("loginRecoveredKeyWrap").style.display="block";
        document.getElementById("loginRecoveryPasswordWrap").style.display="none";
        scrollLoginRecoveryTo(document.getElementById("loginRecoveredKeyWrap"));
      }else{
        document.getElementById("loginRecoveryPasswordWrap").style.display="block";
        document.getElementById("loginRecoveredKeyWrap").style.display="none";
        scrollLoginRecoveryTo(document.getElementById("loginRecoveryPasswordWrap"));
      }
      status.textContent="";
    }
  }catch(e){status.textContent=e.message;scrollLoginRecoveryTo(status)}
}
async function resetLoginPassword(){
  const email=document.getElementById("loginRecoveryEmail").value.trim();
  const pass=document.getElementById("loginRecoveryNewPassword").value;
  const status=document.getElementById("loginRecoveryStatus");
  try{
    const d=await api("/api/public/password-recovery/reset",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({email,reset_token:loginRecoveryToken,new_password:pass})});
    status.textContent=d.message||"";
    scrollLoginRecoveryTo(status);
  }catch(e){status.textContent=e.message}
}
async function copyRecoveredCompanyKey(){
  const key=document.getElementById("loginRecoveredKey").textContent.trim();
  const b=document.getElementById("copyRecoveredKeyButton");
  if(!key)return;
  try{await navigator.clipboard.writeText(key)}
  catch(_){const ta=document.createElement("textarea");ta.value=key;document.body.appendChild(ta);ta.select();document.execCommand("copy");ta.remove()}
  b.textContent=loginRecoveryT().copied;
}

function chooseProfile(profile) {
  stopAdminLoginCountdown();
  const loginButton=document.getElementById("adminLoginButton");
  const loginStatus=document.getElementById("loginStatusMessage");
  if(loginButton)loginButton.disabled=false;
  if(loginStatus)loginStatus.textContent="";
  selectedProfile = profile;
  profileChooser.style.display = "none";
  login.style.display = "block";
  const t=ACCESS_I18N[accessLanguageCode]||ACCESS_I18N.es;
  if (profile === "owner") { loginTitle.textContent=t.ownerLogin; loginSubtitle.textContent=t.ownerSub; }
  else if (profile === "admin") { loginTitle.textContent=t.admLogin; loginSubtitle.textContent=t.admSub; }
  else { loginTitle.textContent=t.collectorLogin; loginSubtitle.textContent=t.collectorSub; }
  document.getElementById("registerCompanyButton").style.display = profile === "owner" ? "inline-block" : "none";
  document.getElementById("loginHelpButton").style.display = profile === "owner" ? "inline-block" : "none";
  closeLoginHelp();
  phone.value = "";
  loginPassword.value = "";
}

function backToProfiles() {
  stopAdminLoginCountdown();
  const loginButton=document.getElementById("adminLoginButton");
  const loginStatus=document.getElementById("loginStatusMessage");
  if(loginButton)loginButton.disabled=false;
  if(loginStatus)loginStatus.textContent="";
  selectedProfile = "";
  login.style.display = "none";
  profileChooser.style.display = "block";
}

function moduleBySection(sectionId) {
  return document.querySelector(`.module[onclick*="'${sectionId}'"]`);
}

// FIX 12.15.138 · Estado real de la empresa; nunca se confía solo en un interruptor visual.
let sutilBaseShowToStaff=true;
let sutilBaseVisibilityReady=false;
const SUTIL_BASE_VISIBILITY_TEXT={
  es:{title:"Mostrar movimientos de base a funcionarios",help:"Controla el detalle de adiciones, retiros y transferencias entre rutas. Los saldos operativos de caja siguen visibles.",yes:"Visible para funcionarios",no:"Oculto para funcionarios",saving:"Guardando...",error:"No se pudo guardar. Comprueba la conexión y actualiza también main.py.",offline:"No fue posible comprobar la configuración en el servidor."},
  pt:{title:"Mostrar movimentos de base aos funcionários",help:"Controla os detalhes de adições, retiradas e transferências entre rotas. Os saldos operacionais do caixa continuam visíveis.",yes:"Visível para funcionários",no:"Oculto para funcionários",saving:"Salvando...",error:"Não foi possível salvar. Verifique a conexão e atualize também main.py.",offline:"Não foi possível verificar a configuração no servidor."},
  en:{title:"Show base movements to staff",help:"Controls the details of additions, withdrawals and inter-route transfers. Current operational cash balances remain visible.",yes:"Visible to staff",no:"Hidden from staff",saving:"Saving...",error:"Could not save. Check the connection and update main.py too.",offline:"Could not verify the server configuration."}
};
function sutilBaseVisibilityT(){
  const code=String((typeof SUTIL_ACTIVE_LANGUAGE!=="undefined"&&SUTIL_ACTIVE_LANGUAGE)||accessLanguageCode||"es").slice(0,2).toLowerCase();
  return SUTIL_BASE_VISIBILITY_TEXT[code]||SUTIL_BASE_VISIBILITY_TEXT.es;
}
function isSutilOwner(){return ["company_owner","sutil_owner"].includes(currentUser?.role);}
function renderBaseVisibilityControl(message=""){
  const root=document.getElementById("baseVisibilityOwnerCard");
  const input=document.getElementById("baseVisibilityStaffSwitch");
  if(!root||!input)return;
  root.style.display=isSutilOwner()?"flex":"none";
  input.checked=!!sutilBaseShowToStaff;
  input.setAttribute("aria-checked",input.checked?"true":"false");
  input.disabled=!sutilBaseVisibilityReady;
  const t=sutilBaseVisibilityT();
  document.getElementById("baseVisibilityTitle").textContent=t.title;
  document.getElementById("baseVisibilityHelp").textContent=t.help;
  const state=document.getElementById("baseVisibilityState");
  if(state)state.textContent=message || (sutilBaseVisibilityReady?(sutilBaseShowToStaff?t.yes:t.no):t.offline);
  const show=isSutilOwner()||sutilBaseShowToStaff;
  const filter=document.getElementById("cashReportType");
  if(filter){
    for(const option of filter.options){
      if(["base_addition","base_withdrawal","base_correction","route_transfer"].includes(option.value)){
        option.disabled=!show;
        option.hidden=!show;
        if(!show && option.selected)filter.value="";
      }
    }
  }
}
async function loadBaseVisibilityForCompany(){
  sutilBaseVisibilityReady=false;
  try{
    const d=await api("/api/admin/cash/base-visibility");
    sutilBaseShowToStaff=!!d.show_to_staff;
    sutilBaseVisibilityReady=true;
  }catch(_){
    // Conservador en pantalla si el servidor no responde. Desplegar ambos archivos.
    sutilBaseShowToStaff=false;
  }
  renderBaseVisibilityControl();
}
async function saveBaseVisibilityForStaff(value){
  const input=document.getElementById("baseVisibilityStaffSwitch");
  if(!isSutilOwner()||!sutilBaseVisibilityReady){renderBaseVisibilityControl();return;}
  const previous=sutilBaseShowToStaff;
  renderBaseVisibilityControl(sutilBaseVisibilityT().saving);
  if(input)input.disabled=true;
  try{
    const d=await api("/api/admin/cash/base-visibility",{
      method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({show_to_staff:!!value})
    });
    sutilBaseShowToStaff=!!d.show_to_staff;
    sutilBaseVisibilityReady=true;
    renderBaseVisibilityControl();
  }catch(_){
    sutilBaseShowToStaff=previous;
    sutilBaseVisibilityReady=true;
    renderBaseVisibilityControl(sutilBaseVisibilityT().error);
  }
}

function sectionPermissionMap(me=currentUser) {
  const permissions = me?.permissions || {};
  const isAdm = ["admin", "company_admin"].includes(me?.role);
  const visibility={
    homeSection: true,
    clientsHubSection: !!permissions.view_clients || !!permissions.create_clients,
    clientsSection: !!permissions.view_clients,
    newClientSection: !!permissions.create_clients,
    loansSection: !!permissions.create_loans,
    collectionsSection: !!permissions.collect_payments,
    receiptsSection: !!permissions.review_pix,
    chatsSection: !!permissions.view_chat,
    routesSection: !!permissions.manage_routes,
    staffSection: isAdm && !!permissions.manage_staff,
    cashSection: !!permissions.manage_cash,
    baseMovementsSection: !!permissions.manage_cash_base && !!sutilBaseShowToStaff,
    cashReportSection: !!permissions.view_reports,
    expensesSection: !!permissions.manage_expenses,
    locationsSection: !!permissions.view_locations,
    reportsSection: !!permissions.view_reports,
    collectionMethodsSection: false,
    settingsSection: false
  };
  visibility.clientsManagementSection = visibility.clientsHubSection || visibility.loansSection || visibility.collectionsSection || visibility.receiptsSection || visibility.chatsSection;
  visibility.operationsRoutesSection = visibility.routesSection || visibility.staffSection || visibility.cashSection || visibility.baseMovementsSection || visibility.cashReportSection || visibility.expensesSection || visibility.locationsSection;
  visibility.analysisControlSection = visibility.reportsSection;
  visibility.settingsToolsSection = visibility.collectionMethodsSection;
  return visibility;
}

function hasSectionPermission(sectionId) {
  if (!currentUser) return false;
  if (["company_owner", "sutil_owner"].includes(currentUser.role)) return true;
  const permissions = sectionPermissionMap(currentUser);
  return Boolean(permissions[sectionId]);
}

function applyHomeCategoryVisibility(visibility, isOwner=false){
  const categories={
    homeCategoryClients: isOwner || !!visibility.clientsManagementSection,
    homeCategoryOperations: isOwner || !!visibility.operationsRoutesSection,
    homeCategoryAnalysis: isOwner || !!visibility.analysisControlSection,
    homeCategoryTools: isOwner || !!visibility.settingsToolsSection || isCompanyOwner()
  };
  Object.entries(categories).forEach(([id,show])=>{
    const node=document.getElementById(id);
    if(node)node.style.display=show?"flex":"none";
  });
}

function applyStaffVisibility(me) {
  const isOwner = me.role === "company_owner" || me.role === "sutil_owner";
  if (isOwner) {
    const interestKpi = document.getElementById("interestReceivedKpi");
    if (interestKpi) interestKpi.style.display = "";
    applyHomeCategoryVisibility(sectionPermissionMap(me), true);
    return;
  }

  const visibility = sectionPermissionMap(me);

  Object.entries(visibility).forEach(([sectionId, visible]) => {
    const module = moduleBySection(sectionId);
    if (module) module.style.display = visible ? "flex" : "none";
  });

  const clientsModule = moduleBySection("clientsHubSection");
  if (clientsModule) clientsModule.style.display = visibility.clientsHubSection ? "flex" : "none";

  applyHomeCategoryVisibility(visibility, false);

  const interestKpi = document.getElementById("interestReceivedKpi");
  if (interestKpi) interestKpi.style.display = (me.permissions || {}).view_reports ? "" : "none";
}


async function enterApplication(){
  currentUser = await api("/api/me");
  document.body.classList.add("sutil-admin-authenticated");
  document.body.classList.toggle("sutil-owner-auth",["company_owner","sutil_owner"].includes(currentUser?.role));
    startSutilGeneralNotificationPolling();
  // El idioma escogido en la pantalla de acceso manda sobre toda la interfaz.
  // Al entrar a la empresa también se asocia a esta empresa para que Configuración lo muestre seleccionado.
  accessLanguageCode=["es","pt","en"].includes(String(accessLanguageCode||"").toLowerCase())
    ? String(accessLanguageCode).toLowerCase()
    : (readPersistedSutilCompanyLanguage?.() || currentUser?.language || "es");
  persistSutilCompanyLanguage(accessLanguageCode);
  const accessLanguageSelect=document.getElementById("accessLanguage");
  if(accessLanguageSelect)accessLanguageSelect.value=accessLanguageCode;
  const settingsLanguageSelect=document.getElementById("settingLanguage");
  if(settingsLanguageSelect)settingsLanguageSelect.value=accessLanguageCode;
  applySutilLanguage(accessLanguageCode);
  scheduleSessionRenewal();

  sessionStorage.setItem("sutil_offline_user_id",String(currentUser.id));
  sessionStorage.setItem("sutil_offline_company_id",String(currentUser.company_id));
  await offlineCachePut("/api/me",currentUser);

  // No reutilizar filas que quedaron visibles de otro perfil/pestaña.
  // También limpiamos la caché compartida de clientes para evitar mezclar
  // empresas/perfiles hasta que llegue la lista autorizada de esta sesión.
  todayCollectionRows=[];
  selectedCollectionClientId=null;
  clientRows=[];
  sutilClientRowsLoadedAt=0;
  sutilClientRowsLoadPromise=null;

  historicalModeActive=false;
  applyHistoricalModeUI();
  activeCompanyBanner.style.display = "block";
  const roleLabel = currentUser.role === "company_owner"
    ? "Dueño de empresa"
    : (["admin","company_admin"].includes(currentUser.role) ? "ADM" : "Cobrador");
  activeCompanyBanner.innerHTML =
    `Empresa activa: <strong>${currentUser.company_name || "Sutil"}</strong>` +
    ` · Perfil: <strong>${roleLabel}</strong>` +
    (currentUser.company_key
      ? ` · Llave: <strong>${currentUser.company_key}</strong>`
      : "");

  document.getElementById("login").style.display = "none";
  document.getElementById("profileChooser").style.display = "none";
  document.getElementById("app").style.display = "block";
  reapplySutilLanguageOnce(0);

  // Cada inicio de sesión comienza en Inicio.
  // Evita heredar visualmente el módulo abierto por otra empresa o perfil
  // cuando se reutiliza la misma pestaña del navegador.
  previousSectionId = "homeSection";
  currentSectionId = "homeSection";
  sutilResetNavigationStack();
  sutilInstallMobileBackGuard(true);
  document.querySelectorAll(".section").forEach(s => s.classList.remove("active"));
  homeSection.classList.add("active");
  homeButton.style.display = "none";
  backButton.style.display = "none";
  window.scrollTo({top:0,behavior:"auto"});

  forcePasswordModal.classList.remove("open");
  sessionControls.style.display = "flex";
  keepSessionOpen.checked = Boolean(localStorage.getItem("sutil_admin_token"));
  mountOwnerMobileCredentials();
  const headerThemeSwitch=document.getElementById("headerThemeSwitch");
  if(headerThemeSwitch)headerThemeSwitch.style.display="flex";

  await loadBaseVisibilityForCompany();
  applyStaffVisibility(currentUser);
  const ownerMenuButton=document.getElementById("ownerMenuButton");
  if(ownerMenuButton)ownerMenuButton.style.display=["company_owner","sutil_owner"].includes(currentUser.role)?"inline-flex":"none";
  if(!["company_owner","sutil_owner"].includes(currentUser.role))closeOwnerQuickMenu();
  if(navigator.onLine){
    if(SUTIL_MOBILE_ADMIN){
      // Inicio ligero en celular: no descargar el bootstrap completo ni las
      // listas de cientos de clientes hasta que el usuario abra un módulo.
      await refreshDashboard();
      // Precarga liviana: solo el directorio de clientes, sin renderizar la
      // tabla pesada. Así Crear crédito, Operación olvidada y otros módulos
      // pueden buscar clientes aunque nunca se haya abierto Clientes registrados.
      sutilWarmClientRows();
      setOfflineStatus("online","modo móvil");
      setTimeout(()=>offlineSyncPending(false).catch(()=>{}),1200);
    }else{
      await offlineRefreshBootstrap();
      await offlineSyncPending(false);
      await refreshAll();
      setTimeout(()=>offlineRefreshBootstrap(),700);
    }
  }else{
    await refreshAll().catch(()=>{});
    setOfflineStatus("offline","trabajando con datos guardados");
  }
}

function openForcedPassword(){
  currentTempPassword.value = loginPassword.value;
  newOwnerPassword.value = "";
  confirmOwnerPassword.value = "";
  forcePasswordMsg.textContent = "";
  forcePasswordModal.classList.add("open");
  setTimeout(()=>newOwnerPassword.focus(),100);
}

async function saveForcedPassword(){
  const currentPassword = currentTempPassword.value;
  const newPassword = newOwnerPassword.value;
  const confirmation = confirmOwnerPassword.value;

  if(!currentPassword){
    forcePasswordMsg.textContent = "Escribe la clave temporal.";
    return;
  }
  if(newPassword.length < 6){
    forcePasswordMsg.textContent = "La nueva clave debe tener mínimo 6 caracteres.";
    return;
  }
  if(newPassword !== confirmation){
    forcePasswordMsg.textContent = "Las nuevas claves no coinciden.";
    return;
  }
  if(newPassword === currentPassword){
    forcePasswordMsg.textContent = "La nueva clave debe ser diferente a la temporal.";
    return;
  }

  forcePasswordMsg.textContent = "Guardando...";
  try{
    await api("/api/me/change-password",{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        current_password:currentPassword,
        new_password:newPassword
      })
    });
    forcePasswordMsg.textContent = "Clave actualizada correctamente.";
    await enterApplication();
  }catch(error){
    forcePasswordMsg.textContent = error.message;
  }
}

async function doLogin() {
  sessionExpiryHandling=false;
  try {
    const data = await api("/api/login", {
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        phone:document.getElementById("phone").value.trim(),
        company_key:document.getElementById("companyKey").value.trim(),
        password:document.getElementById("loginPassword").value
      })
    });
    const isStaff = ["staff", "employee"].includes(data.role);
    const isOwner = data.role === "company_owner";
    const isAdmin = ["admin", "company_admin"].includes(data.role);

    if (selectedProfile === "owner" && !isOwner) {
      throw new Error("Estas credenciales no corresponden al dueño de la empresa");
    }
    if (selectedProfile === "admin" && !isAdmin) {
      throw new Error("Estas credenciales no corresponden a un ADM");
    }
    if (selectedProfile === "staff" && !isStaff) {
      throw new Error("Estas credenciales no corresponden a un cobrador");
    }

    token = data.token;
    persistToken();

    if (data.must_change_password) {
      openForcedPassword();
      return;
    }

    await enterApplication();
  } catch (error) {
    if(error?.status===423){
      startAdminLoginCountdown(error.retryAfter || 60);
      return;
    }
    const loginStatus=document.getElementById("loginStatusMessage");
    if(loginStatus){
      loginStatus.style.color="#b42318";
      loginStatus.textContent=error.message;
    }
    alert(error.message);
  }
}

async function refreshAll() {
  // En móvil, Inicio carga solo el tablero. Las listas pesadas se cargan
  // al abrir cada módulo para evitar cierres del navegador por memoria.
  if(SUTIL_MOBILE_ADMIN && currentSectionId==="homeSection"){
    await refreshDashboard();
    return;
  }
  if (
    currentUser &&
    !["company_owner", "sutil_owner"].includes(currentUser.role)
  ) {
    const tasks = [refreshDashboard()];
    if (currentUser.permissions?.view_clients) tasks.push(refreshClients());
    if (currentUser.permissions?.review_pix) tasks.push(refreshReceipts());
    await Promise.all(tasks);
    return;
  }
  await Promise.all([refreshDashboard(), refreshClients(), refreshReceipts()]);
}


function openHomeOperationalShortcut(target){
  if(target==="collected"){
    openSection("collectionsSection");
    setTimeout(()=>{
      try{
        showCollectionsMode("received");
        setReceivedPaymentsPeriod("today",true);
      }catch(_){}
    },0);
    return;
  }

  if(target==="checking"){
    openSection("receiptsSection");
    return;
  }

  if(target==="staff"){
    openSection("staffSection");
    setTimeout(()=>{
      try{openStaffSubmodule("locations");}catch(_){}
    },0);
    return;
  }

  if(target==="cash"){
    openSection("cashSection");
    setTimeout(()=>{
      try{openCashSubview("pending");}catch(_){}
    },0);
  }
}

let homeOperationalKpiCache={at:0,data:null};
let homeOperationalKpiLoadPromise=null;

function sutilLocalIsoDate(){
  const d=new Date();
  const p=n=>String(n).padStart(2,"0");
  return `${d.getFullYear()}-${p(d.getMonth()+1)}-${p(d.getDate())}`;
}

function renderHomeOperationalKpis(data){
  const staffValue=document.getElementById("homeStaffOperating");
  const cashValue=document.getElementById("homeOpenCash");
  if(staffValue)staffValue.textContent=data?.staff_text||"—";
  if(cashValue)cashValue.textContent=data?.cash_text||"—";
}

async function refreshHomeOperationalKpis(force=false){
  const staffCard=document.getElementById("homeStaffOperatingCard");
  const cashCard=document.getElementById("homeOpenCashCard");
  if(!staffCard||!cashCard)return;

  const isOwner=["company_owner","sutil_owner"].includes(currentUser?.role);
  document.getElementById("homeOperationalKpis")?.classList.toggle("owner-view",isOwner);
  staffCard.style.display=isOwner?"flex":"none";
  cashCard.style.display=isOwner?"flex":"none";
  if(!isOwner)return;

  const now=Date.now();
  if(!force && homeOperationalKpiCache.data && (now-homeOperationalKpiCache.at)<45000){
    renderHomeOperationalKpis(homeOperationalKpiCache.data);
    return;
  }

  // FIX 12.15.113: las dos tarjetas aparecen de inmediato y la consulta
  // comienza en paralelo con el tablero principal. Si ya hay una carga en
  // curso, se reutiliza para no duplicar peticiones al servidor.
  renderHomeOperationalKpis({staff_text:"…",cash_text:"…"});
  if(!force && homeOperationalKpiLoadPromise)return homeOperationalKpiLoadPromise;

  const loadPromise=(async()=>{
    const pendingPromise=api("/api/admin/cash/pending-open").catch(()=>null);
    const staffPromise=api("/api/admin/staff").catch(()=>null);
    const routesPromise=api("/api/admin/routes").catch(()=>null);

    let staffText="—";
    let cashText="—";

    // Caja no espera por /staff: aparece apenas estén listas cajas + rutas.
    const cashJob=Promise.all([pendingPromise,routesPromise]).then(([pending,routes])=>{
      if(pending){
        const openRows=Array.isArray(pending?.rows)?pending.rows:[];
        const openRouteIds=new Set(
          openRows.map(row=>String(row?.route_id??"")).filter(Boolean)
        );
        const activeRoutes=(Array.isArray(routes)?routes:[])
          .filter(route=>route && route.active!==false);
        cashText=activeRoutes.length
          ? `${openRouteIds.size}/${activeRoutes.length}`
          : String(Number.isFinite(Number(pending?.count)) ? Number(pending.count) : openRouteIds.size);
      }
      const cashValue=document.getElementById("homeOpenCash");
      if(cashValue)cashValue.textContent=cashText;
    });

    // Personal no espera por /routes: aparece apenas estén listas cajas + personal.
    const staffJob=Promise.all([pendingPromise,staffPromise]).then(([pending,staff])=>{
      if(Array.isArray(staff) && pending){
        const activeStaff=staff.filter(person=>person && person.active!==false);
        const staffById=new Set(activeStaff.map(person=>String(person.id??"")).filter(Boolean));
        const staffByName=new Set(
          activeStaff.map(person=>String(person.name||"").trim().toLowerCase()).filter(Boolean)
        );
        const operatingStaff=new Set();
        const openRows=Array.isArray(pending?.rows)?pending.rows:[];
        openRows.forEach(row=>{
          const openerId=String(row?.opened_by_id??row?.user_id??"").trim();
          const openerName=String(row?.opened_by_name||"").trim().toLowerCase();
          if(openerId && staffById.has(openerId)) operatingStaff.add("id:"+openerId);
          else if(openerName && staffByName.has(openerName)) operatingStaff.add("name:"+openerName);
        });
        staffText=`${operatingStaff.size}/${activeStaff.length}`;
      }
      const staffValue=document.getElementById("homeStaffOperating");
      if(staffValue)staffValue.textContent=staffText;
    });

    await Promise.allSettled([cashJob,staffJob]);
    const data={staff_text:staffText,cash_text:cashText};
    homeOperationalKpiCache={at:Date.now(),data};
    return data;
  })();

  homeOperationalKpiLoadPromise=loadPromise;
  try{
    return await loadPromise;
  }finally{
    if(homeOperationalKpiLoadPromise===loadPromise)homeOperationalKpiLoadPromise=null;
  }
}

async function refreshDashboard() {
  // FIX 12.15.113: iniciar estos KPI desde el primer instante, sin esperar
  // a que termine /dashboard. No se espera su resultado para mantener Inicio ligero.
  refreshHomeOperationalKpis(false).catch(()=>{});

  const d = await api("/api/admin/dashboard");
  today.textContent = money(d.today_collected);
  function fitReportTopKpiValues(){
    const ids=["total","clientsCount","activeLoans","interestReceived"];
    requestAnimationFrame(()=>{
      ids.forEach(id=>{
        const el=document.getElementById(id);
        if(!el)return;
        el.style.fontSize="";
        const cs=getComputedStyle(el);
        let size=parseFloat(cs.fontSize)||22;
        const minSize=13;
        while(el.scrollWidth>el.clientWidth+1 && size>minSize){
          size-=0.5;
          el.style.fontSize=size+"px";
        }
      });
    });
  }

  total.textContent = money(d.total_collected);
  checking.textContent = d.receipts_checking;
  clientsCount.textContent = d.clients;
  activeLoans.textContent = d.active_loans || 0;
  interestReceived.textContent = money(d.interest_received || 0);
  fitReportTopKpiValues();
}


function formatClientAddress(client){
  const parts = [
    client.address,
    client.neighborhood,
    client.city,
    client.postal_code
  ].filter(Boolean);
  return parts.length ? parts.join(", ") : "Sin dirección";
}

function clientLocationButton(client){
  const lat = client.location?.lat;
  const lng = client.location?.lng;
  if(lat == null || lng == null){
    return '<span class="muted">No disponible</span>';
  }
  const updated = client.location?.updated_at
    ? sutilLocalDateTime(client.location.updated_at)
    : "Sin fecha";
  return `
    <button class="btn" style="padding:6px 9px;font-size:12px"
      title="Última actualización: ${updated}"
      onclick="event.stopPropagation();openClientLocation(${lat},${lng})">
      📍 Dirección registrada
    </button>`;
}

function openClientLocation(lat,lng){
  const url = `https://www.google.com/maps?q=${encodeURIComponent(lat)},${encodeURIComponent(lng)}`;
  window.open(url,"_blank","noopener,noreferrer");
}

/* SUTIL FIX 12.15.35 · muestra en la ficha la misma fecha/hora usada por Ubicaciones. */
async function loadClientCurrentLocationUpdated(clientId){
  const id=Number(clientId);
  const target=document.getElementById("clientCurrentLocationUpdated");
  if(!target||!Number.isFinite(id)||id<=0)return;
  const lang=SUTIL_ACTIVE_LANGUAGE||"es";
  const label=sutilTranslateText("Actualizado",lang);
  let row=Array.isArray(locationRows)?locationRows.find(item=>Number(item.id)===id):null;
  try{
    if(!row && navigator.onLine){
      const data=await api(`/api/admin/locations?_sutil=${Date.now()}`,{cache:"no-store",headers:{"Cache-Control":"no-cache"}});
      const rows=Array.isArray(data?.rows)?data.rows:[];
      row=rows.find(item=>Number(item.id)===id)||null;
    }
  }catch(_){ }
  if(!document.getElementById("clientCurrentLocationUpdated"))return;
  const updated=row?.location?.updated_at;
  target.textContent=updated ? `${label}: ${sutilLocalDateTime(updated)}` : `${label}: —`;
}

/* SUTIL FIX 12.15.30 · desde la ficha abre la ubicación actual del cliente.
   No modifica coordenadas ni solicita un nuevo GPS automáticamente. */
async function openClientCurrentLocation(clientId){
  const id=Number(clientId);
  if(!Number.isFinite(id)||id<=0)return;
  openSection("locationsSection");
  const clientsBtn=document.getElementById("locationsClientsModeBtn");
  const staffBtn=document.getElementById("locationsStaffModeBtn");
  if(clientsBtn)clientsBtn.classList.add("active");
  if(staffBtn)staffBtn.classList.remove("active");
  try{
    const search=document.getElementById("locationsSearch");
    const route=document.getElementById("locationsRouteFilter");
    const freshness=document.getElementById("locationsFreshnessFilter");
    if(search)search.value="";
    if(route)route.value="";
    if(freshness)freshness.value="";
    await loadLocations(false);
    selectLocationClient(id,false);
    const target=document.getElementById("locationsSelectedName");
    if(target)target.scrollIntoView({behavior:"smooth",block:"center"});
    reapplySutilLanguageOnce(0);
  }catch(e){
    alert(e.message||"No fue posible abrir la localización del cliente.");
  }
}


function stopLocationsPolling(){
  if(locationsPollTimer){
    clearInterval(locationsPollTimer);
    locationsPollTimer=null;
  }
}

function startLocationsPolling(){
  // No reiniciar el temporizador en cada actualización: así el sondeo sigue
  // estable mientras Ubicaciones permanece abierto.
  if(locationsPollTimer)return;
  locationsPollTimer=setInterval(()=>{
    if(
      currentSectionId==="locationsSection" &&
      navigator.onLine &&
      !document.hidden &&
      !locationsPollBusy
    ){
      loadLocations(false).catch(()=>{});
    }
  },10000);
}

function locationFreshnessLabel(row){
  const loc=row?.location||{};
  if(loc.lat==null || loc.lng==null)return {text:"Sin ubicación",cls:"none"};
  const seconds=Number(loc.age_seconds);
  if(Number.isFinite(seconds)){
    if(seconds<=300)return {text:"Ahora",cls:"recent"};
    if(seconds<=86400)return {text:"Hoy",cls:"today"};
  }
  return {text:"Antigua",cls:"old"};
}

function sutilLocalDateTime(value){
  if(!value)return "";
  const raw=String(value).trim();
  const normalized=/(Z|[+-]\d{2}:\d{2})$/.test(raw)?raw:raw+"Z";
  const d=new Date(normalized);
  return Number.isNaN(d.getTime())?String(value):d.toLocaleString();
}

function openLocationsMode(mode){
  const target=(mode==="staff")?"staff":"clients";
  const clientsBtn=document.getElementById("locationsClientsModeBtn");
  const staffBtn=document.getElementById("locationsStaffModeBtn");

  if(clientsBtn)clientsBtn.classList.toggle("active",target==="clients");
  if(staffBtn)staffBtn.classList.toggle("active",target==="staff");

  if(target==="clients"){
    if(currentSectionId!=="locationsSection")openSection("locationsSection");
    loadLocations(false).catch(()=>{});
    return;
  }

  // Reutiliza el módulo existente de ubicación de personal.
  // No modifica endpoints ni lógica de GPS.
  openSection("staffSection");
  openStaffSubmodule("locations");
}

function locationUpdatedText(row){
  const value=row?.location?.updated_at;
  if(!value)return "Sin fecha de actualización";
  try{return sutilLocalDateTime(value);}catch(_){return String(value);}
}

function locationAvatarHtml(row){
  const name=String(row?.name||"Cliente").trim();
  const initial=(name[0]||"C").toUpperCase();
  if(row?.photo_url){
    return `<div class="location-avatar"><img src="${legacyEscapeHtml(row.photo_url)}" alt="" loading="lazy" decoding="async"></div>`;
  }
  return `<div class="location-avatar">${legacyEscapeHtml(initial)}</div>`;
}

let locationsClientListExpanded=false;

function locationSearchScore(row,term){
  if(!term)return 0;
  const name=normalizeSearchText(row?.name||"");
  const code=normalizeSearchText(row?.client_code||"");
  let score=0;
  if(code===term)score+=120;
  if(name===term)score+=110;
  if(code.startsWith(term))score+=90;
  if(name.startsWith(term))score+=80;
  if(code.includes(term))score+=60;
  if(name.includes(term))score+=50;
  const words=name.split(/\s+/).filter(Boolean);
  if(words.some(word=>word.startsWith(term)))score+=35;
  return score;
}

function toggleLocationsClientList(force){
  const list=document.getElementById("locationsClientsList");
  const button=document.getElementById("locationsListToggle");
  if(!list)return;
  locationsClientListExpanded=typeof force==="boolean" ? force : !locationsClientListExpanded;
  list.style.display=locationsClientListExpanded?"block":"none";
  if(button)button.textContent=locationsClientListExpanded?"Ocultar lista":"Mostrar lista";
}

function syncLocationsListVisibility(){
  const term=normalizeSearchText(document.getElementById("locationsSearch")?.value||"");
  if(term){
    toggleLocationsClientList(true);
  }else if(!locationsClientListExpanded){
    toggleLocationsClientList(false);
  }
}

function closeLocationCustomSelects(exceptId=""){
  document.querySelectorAll("#locationsSection .locations-custom-select.open").forEach(wrapper=>{
    if(exceptId && wrapper.dataset.locationSelect===exceptId)return;
    wrapper.classList.remove("open");
  });
}

function syncLocationCustomSelect(selectId){
  const select=document.getElementById(selectId);
  const wrapper=document.querySelector(`#locationsSection .locations-custom-select[data-location-select="${selectId}"]`);
  const trigger=document.getElementById(`${selectId}Trigger`);
  const menu=document.getElementById(`${selectId}Menu`);
  if(!select || !wrapper || !trigger || !menu)return;

  const selected=select.options[select.selectedIndex] || select.options[0];
  trigger.textContent=selected?.textContent?.trim() || "—";
  trigger.title=trigger.textContent;
  menu.innerHTML="";

  Array.from(select.options).forEach(option=>{
    const item=document.createElement("button");
    item.type="button";
    item.className="locations-select-option"+(String(option.value)===String(select.value)?" selected":"");
    item.textContent=option.textContent;
    item.dataset.value=option.value;
    item.onclick=(event)=>{
      event.stopPropagation();
      select.value=option.value;
      select.dispatchEvent(new Event("change",{bubbles:true}));
      wrapper.classList.remove("open");
    };
    menu.appendChild(item);
  });
}

function toggleLocationCustomSelect(selectId,event){
  if(event)event.stopPropagation();
  const wrapper=document.querySelector(`#locationsSection .locations-custom-select[data-location-select="${selectId}"]`);
  if(!wrapper)return;
  const willOpen=!wrapper.classList.contains("open");
  closeLocationCustomSelects(selectId);
  if(willOpen){
    syncLocationCustomSelect(selectId);
    wrapper.classList.add("open");
  }else{
    wrapper.classList.remove("open");
  }
}

document.addEventListener("click",event=>{
  if(!event.target.closest("#locationsSection .locations-custom-select"))closeLocationCustomSelects();
});

function filteredLocationRows(){
  const term=normalizeSearchText(document.getElementById("locationsSearch")?.value||"");
  const routeId=String(document.getElementById("locationsRouteFilter")?.value||"");
  const freshness=String(document.getElementById("locationsFreshnessFilter")?.value||"");
  let rows=locationRows.filter(row=>{
    const text=normalizeSearchText([row.name,row.client_code,row.route_name,row.city].filter(Boolean).join(" "));
    if(term && !text.includes(term))return false;
    if(routeId && String(row.route_id)!==routeId)return false;
    const loc=row.location||{};
    const has=loc.lat!=null && loc.lng!=null;
    if(freshness==="with" && !has)return false;
    if(freshness==="none" && has)return false;
    if(["recent","today","old"].includes(freshness)){
      if(!has)return false;
      const f=locationFreshnessLabel(row).cls;
      if(freshness==="today" && !["recent","today"].includes(f))return false;
      if(freshness!=="today" && f!==freshness)return false;
    }
    return true;
  });
  if(term){
    rows=rows.map((row,index)=>({row,index,score:locationSearchScore(row,term)})).sort((a,b)=>(b.score-a.score)||(a.index-b.index)).map(item=>item.row);
  }
  return rows;
}

function renderLocations(){
  const list=document.getElementById("locationsClientsList");
  if(!list)return;
  const term=normalizeSearchText(document.getElementById("locationsSearch")?.value||"");
  const rows=filteredLocationRows();
  const visibleRows=term ? rows.slice(0,8) : rows;
  const count=document.getElementById("locationsListCount");
  if(count)count.textContent=term ? `${rows.length} coincidencia(s) · mostrando ${visibleRows.length}` : `${rows.length} encontrado(s)`;
  syncLocationsListVisibility();

  list.innerHTML=visibleRows.length?visibleRows.map(row=>{
    const freshness=locationFreshnessLabel(row);
    const active=Number(row.id)===Number(selectedLocationClientId)?" active":"";
    return `<div class="location-client-row${active}" onclick="selectLocationClient(${Number(row.id)},true)">
      ${locationAvatarHtml(row)}
      <div style="min-width:0">
        <div class="location-client-name">${legacyEscapeHtml(row.name||"Cliente")}</div>
        <div class="location-client-meta">${legacyEscapeHtml(row.client_code||"Sin código")} · ${legacyEscapeHtml(row.route_name||"Sin ruta")}</div>
      </div>
      <span class="location-freshness ${freshness.cls}">${freshness.text}</span>
    </div>`;
  }).join(""):'<div class="muted" style="padding:18px;text-align:center">No hay clientes para este filtro.</div>';

  if(selectedLocationClientId && !rows.some(r=>Number(r.id)===Number(selectedLocationClientId))){
    selectedLocationClientId=null;
    clearSelectedLocation();
  }
}

function clearSelectedLocation(){
  const name=document.getElementById("locationsSelectedName");
  const meta=document.getElementById("locationsSelectedMeta");
  const updated=document.getElementById("locationsSelectedUpdated");
  const frame=document.getElementById("locationsMapFrame");
  const empty=document.getElementById("locationsMapEmpty");
  const button=document.getElementById("locationsOpenMapsBtn");
  if(name)name.textContent="Selecciona un cliente";
  if(meta)meta.textContent="Se mostrará aquí su última ubicación autorizada.";
  if(updated)updated.textContent="Última actualización: —";
  if(frame){frame.style.display="none";frame.removeAttribute("src");delete frame.dataset.locationKey;}
  if(empty){empty.style.display="flex";empty.innerHTML='<div><div style="font-size:42px;margin-bottom:8px">📍</div><strong>Sin cliente seleccionado</strong><br><small>Elige un cliente de la lista.</small></div>';}
  if(button)button.style.display="none";
}

async function requestClientLocationNow(clientId){
  const id=Number(clientId);
  if(!Number.isFinite(id) || id<=0 || !navigator.onLine)return;

  const now=Date.now();
  const last=Number(locationsRequestLastAt.get(id)||0);
  if(locationsRequestBusyClientId===id || (now-last)<15000)return;

  locationsRequestBusyClientId=id;
  locationsRequestLastAt.set(id,now);
  const badge=document.getElementById("locationsRealtimeBadge");

  try{
    if(badge){
      badge.textContent="Solicitando localização…";
      badge.className="status-pill pill-current";
    }

    const result=await api(`/api/admin/clients/${id}/location/refresh`,{
      method:"POST",
      cache:"no-store",
      headers:{"Cache-Control":"no-cache"}
    });

    const push=result?.push||{};
    if(push.configured===false && Number(push.attempted||0)===0){
      if(badge){
        badge.textContent="Cliente sem push ativo";
        badge.className="status-pill pill-today";
      }
      return;
    }

    // Para location_request el backend v41.20 espera la respuesta real de FCM.
    // Así no mostramos “enviada” si Firebase rechazó el push silencioso.
    if(Object.prototype.hasOwnProperty.call(push,"sent") && Number(push.sent||0)<=0){
      if(badge){
        badge.textContent="Push não enviado";
        badge.className="status-pill pill-overdue";
      }
      return;
    }

    if(badge){
      badge.textContent="Solicitação enviada";
      badge.className="status-pill pill-current";
    }

    // La app cliente intenta la lectura <=10 m en segundo plano. El sondeo
    // normal continúa cada 10 s; estas consultas cortas solo aceleran la
    // aparición de la nueva hora tras una solicitud manual.
    [3500,9000,16000,22000].forEach(delay=>{
      setTimeout(()=>{
        if(
          currentSectionId==="locationsSection" &&
          Number(selectedLocationClientId)===id &&
          navigator.onLine &&
          !document.hidden
        ){
          loadLocations(false).catch(()=>{});
        }
      },delay);
    });
  }catch(e){
    if(badge){
      badge.textContent="No fue posible solicitar";
      badge.className="status-pill pill-overdue";
    }
  }finally{
    if(locationsRequestBusyClientId===id)locationsRequestBusyClientId=null;
  }
}

function selectLocationClient(clientId,requestLocation=false){
  selectedLocationClientId=Number(clientId);
  if(requestLocation)requestClientLocationNow(selectedLocationClientId);
  const row=locationRows.find(item=>Number(item.id)===selectedLocationClientId);
  renderLocations();
  if(!row){clearSelectedLocation();return;}

  const name=document.getElementById("locationsSelectedName");
  const meta=document.getElementById("locationsSelectedMeta");
  const updated=document.getElementById("locationsSelectedUpdated");
  const frame=document.getElementById("locationsMapFrame");
  const empty=document.getElementById("locationsMapEmpty");
  const button=document.getElementById("locationsOpenMapsBtn");
  if(name)name.textContent=row.name||"Cliente";
  if(meta)meta.textContent=`${row.client_code||"Sin código"} · ${row.route_name||"Sin ruta"}${row.city?` · ${row.city}`:""}`;
  if(updated)updated.textContent=`Última actualización: ${locationUpdatedText(row)}`;

  const lat=row.location?.lat, lng=row.location?.lng;
  if(lat==null || lng==null){
    if(frame){frame.style.display="none";frame.removeAttribute("src");delete frame.dataset.locationKey;}
    if(empty){empty.style.display="flex";empty.innerHTML='<div><div style="font-size:42px;margin-bottom:8px">📵</div><strong>Este cliente todavía no comparte ubicación.</strong><br><small>Cuando la app del cliente envíe una ubicación autorizada aparecerá aquí.</small></div>';}
    if(button)button.style.display="none";
    return;
  }

  if(empty)empty.style.display="none";
  if(frame){
    const locationKey=`${lat},${lng}`;
    // La hora se actualiza en cada consulta, pero el iframe del mapa solo se
    // recarga si realmente cambiaron las coordenadas.
    if(frame.dataset.locationKey!==locationKey || !frame.getAttribute("src")){
      frame.src=`https://www.google.com/maps?q=${encodeURIComponent(lat)},${encodeURIComponent(lng)}&z=16&output=embed`;
      frame.dataset.locationKey=locationKey;
    }
    frame.style.display="block";
  }
  if(button)button.style.display="inline-block";
}

function openSelectedLocationMaps(){
  const row=locationRows.find(item=>Number(item.id)===Number(selectedLocationClientId));
  const lat=row?.location?.lat, lng=row?.location?.lng;
  if(lat==null || lng==null)return;
  openClientLocation(lat,lng);
}

function clearLocationFilters(){
  const search=document.getElementById("locationsSearch");
  const route=document.getElementById("locationsRouteFilter");
  const freshness=document.getElementById("locationsFreshnessFilter");
  if(search)search.value="";
  if(route)route.value="";
  if(freshness)freshness.value="";
  syncLocationCustomSelect("locationsRouteFilter");
  syncLocationCustomSelect("locationsFreshnessFilter");
  closeLocationCustomSelects();
  locationsClientListExpanded=false;
  renderLocations();
  toggleLocationsClientList(false);
}

async function loadLocations(manual=false){
  const badge=document.getElementById("locationsRealtimeBadge");
  if(locationsPollBusy && !manual)return;
  locationsPollBusy=true;
  try{
    if(badge){badge.textContent=manual?"Actualizando…":"Consultando ubicación…";badge.className="status-pill pill-current";}
    // Evita respuestas GET antiguas del navegador/proxy: Ubicaciones siempre
    // consulta al backend por el dato más reciente sin necesidad de F5.
    const data=await api(`/api/admin/locations?_sutil=${Date.now()}`,{
      cache:"no-store",
      headers:{"Cache-Control":"no-cache"}
    });
    locationRows=Array.isArray(data.rows)?data.rows:[];
    const routes=Array.isArray(data.routes)?data.routes:[];
    const routeSelect=document.getElementById("locationsRouteFilter");
    if(routeSelect){
      const current=routeSelect.value;
      routeSelect.innerHTML='<option value="">Todas las rutas</option>'+routes.map(r=>`<option value="${r.id}">${legacyEscapeHtml(r.name||"Ruta")}</option>`).join("");
      if(routes.some(r=>String(r.id)===String(current)))routeSelect.value=current;
      syncLocationCustomSelect("locationsRouteFilter");
    }
    syncLocationCustomSelect("locationsFreshnessFilter");
    const summary=data.summary||{};
    const ids={locationsMetricClients:summary.clients||0,locationsMetricWith:summary.with_location||0,locationsMetric24h:summary.updated_24h||0,locationsMetricWithout:summary.without_location||0};
    Object.entries(ids).forEach(([id,value])=>{const el=document.getElementById(id);if(el)el.textContent=String(value);});
    renderLocations();
    if(selectedLocationClientId){
      const selected=locationRows.find(r=>Number(r.id)===Number(selectedLocationClientId));
      if(selected)selectLocationClient(selected.id); else clearSelectedLocation();
    }else{
      const first=filteredLocationRows().find(r=>r.location?.lat!=null&&r.location?.lng!=null) || filteredLocationRows()[0];
      if(first)selectLocationClient(first.id); else clearSelectedLocation();
    }
    if(badge){
      const now=new Date();
      badge.textContent=`Actualizado ${now.toLocaleTimeString([], {hour:"2-digit",minute:"2-digit",second:"2-digit"})}`;
      badge.className="status-pill pill-current";
    }
    startLocationsPolling();
  }catch(e){
    if(badge){badge.textContent=navigator.onLine?"Error al actualizar":"Sin conexión";badge.className="status-pill pill-overdue";}
    const list=document.getElementById("locationsClientsList");
    if(list)list.innerHTML=`<div class="error" style="display:block;margin:12px">${legacyEscapeHtml(e.message||"No fue posible cargar ubicaciones")}</div>`;
    if(manual)alert(e.message);
  }finally{
    locationsPollBusy=false;
  }
}


let editingClientId = null;

function canEditClients(){
  if(!currentUser)return false;
  if(["company_owner","sutil_owner"].includes(currentUser.role))return true;
  return Boolean(currentUser.permissions?.edit_clients);
}

function canEditClientIdentity(){
  if(!currentUser)return false;
  if(["company_owner","sutil_owner"].includes(currentUser.role))return true;
  return Boolean(currentUser.permissions?.edit_client_identity);
}

function clientEditButton(client){
  if(!canEditClients())return '<span class="muted">Sin permiso</span>';
  return `
    <button class="btn secondary"
      style="padding:6px 9px;font-size:12px"
      onclick="event.stopPropagation();openEditClient(${client.id})">
      ✏️ Editar
    </button>`;
}


function toggleEditClientBusiness(){
  editClientBusinessFields.style.display =
    editClientHasBusiness.checked ? "block" : "none";
}

async function openEditClient(id){
  try{
    const [client,routes,staff,collectionAccounts] = await Promise.all([
      api(`/api/admin/clients/${id}`),
      api("/api/admin/routes"),
      api("/api/admin/staff"),
      api("/api/admin/collection-accounts?active_only=true")
    ]);
    collectionAccountsCache=collectionAccounts||[];

    editingClientId = id;
    sutilReleaseEditClientDocumentPreviewUrls();
    sutilEditClientDocuments=[];
    sutilSetClientDocumentsAccordion("editClientDocumentsAccordion","editClientDocumentsAccordionBody",false);
    const editDocsRoot=document.getElementById("editClientDocumentsSection");if(editDocsRoot)editDocsRoot.innerHTML="";
    editClientName.value = client.name || "";
    editClientDocument.value = client.document_number || "";
    editClientCode.value = client.client_code || "";
    editClientPhone1.value = client.phone || "";
    editClientPhone2.value = client.phone2 || ""; editClientFixedPhone.value=client.fixed_phone||""; editClientEmail.value=client.email||"";
    editClientAddress.value = client.address || ""; editClientAddressNumber.value=client.address_number||""; editClientComplement.value=client.complement||"";
    editClientNeighborhood.value = client.neighborhood || "";
    editClientPostalCode.value = client.postal_code || ""; editClientStateRegion.value=client.state_region||""; editClientNotes.value=client.notes||"";
    editClientCity.value = client.city || "";
    editClientLatitude.value = client.location?.lat ?? "";
    editClientLongitude.value = client.location?.lng ?? "";
    editClientActive.value = String(client.active !== false);

    editClientHasBusiness.checked = Boolean(client.has_business);
    editClientBusinessName.value = client.business_name || "";
    editClientBusinessTradeName.value = client.business_trade_name || "";
    editClientBusinessDocument.value = client.business_document || "";
    editClientBusinessActivity.value = client.business_activity || "";
    editClientBusinessRole.value = client.business_role || "";
    editClientBusinessPhone.value = client.business_phone || "";
    editClientBusinessEmail.value = client.business_email || "";
    editClientBusinessAddress.value = client.business_address || "";
    editClientBusinessAddressNumber.value = client.business_address_number || "";
    editClientBusinessComplement.value = client.business_complement || "";
    editClientBusinessNeighborhood.value = client.business_neighborhood || "";
    editClientBusinessPostalCode.value = client.business_postal_code || "";
    editClientBusinessStateRegion.value = client.business_state_region || "";
    editClientBusinessCity.value = client.business_city || "";
    toggleEditClientBusiness();

    editClientPhoto.value = "";
    if(client.photo_url){ editClientPhotoPreview.src = client.photo_url; editClientPhotoPreview.style.display = "block"; }
    else { editClientPhotoPreview.removeAttribute("src"); editClientPhotoPreview.style.display = "none"; }

    editClientRoute.innerHTML = routes.map(r =>
      `<option value="${r.id}">${r.name}</option>`
    ).join("");
    if(client.route_id)editClientRoute.value = String(client.route_id);
    const selectedRoute=routes.find(r=>Number(r.id)===Number(client.route_id));
    await fillCollectionAccountSelect(editClientCollectionAccount,selectedRoute?.country_code||'',client.collection_account_id,"Usar cuenta de la ruta");

    editClientStaff.innerHTML =
      `<option value="">Sin responsable</option>` +
      staff.map(s =>
        `<option value="${s.id}">${s.name} · ${["company_admin","admin"].includes(s.role)?"ADM":"Cobrador"}</option>`
      ).join("");
    if(client.assigned_user_id){
      editClientStaff.value = String(client.assigned_user_id);
    }

    const sensitive = canEditClientIdentity();
    editClientDocument.disabled = !sensitive;
    editClientCode.disabled = true;

    editClientMsg.textContent = sensitive
      ? "Puede actualizar todos los campos."
      : "Documento y código protegidos por permiso especial.";

    editClientModal.classList.add("open");
  }catch(e){
    alert(e.message);
  }
}

function closeEditClient(){
  sutilReleaseEditClientDocumentPreviewUrls();
  sutilEditClientDocuments=[];
  sutilSetClientDocumentsAccordion("editClientDocumentsAccordion","editClientDocumentsAccordionBody",false);
  editingClientId = null;
  editClientModal.classList.remove("open");
}

function closeEditClientFromBackdrop(event){
  if(event.target === editClientModal)closeEditClient();
}

async function saveEditClient(){
  if(!editingClientId)return;

  const payload = {
    name: editClientName.value.trim(),
    phone: editClientPhone1.value.trim(),
    phone2: editClientPhone2.value.trim(), fixed_phone:editClientFixedPhone.value.trim(), email:editClientEmail.value.trim(),
    address: editClientAddress.value.trim(), address_number:editClientAddressNumber.value.trim(), complement:editClientComplement.value.trim(),
    neighborhood: editClientNeighborhood.value.trim(),
    postal_code: editClientPostalCode.value.trim(), state_region:editClientStateRegion.value.trim(), notes:editClientNotes.value.trim(),
    city: editClientCity.value.trim(),
    latitude: editClientLatitude.value === "" ? null : Number(editClientLatitude.value),
    longitude: editClientLongitude.value === "" ? null : Number(editClientLongitude.value),
    has_business: editClientHasBusiness.checked,
    business_name: editClientHasBusiness.checked ? editClientBusinessName.value.trim() : "",
    business_trade_name: editClientHasBusiness.checked ? editClientBusinessTradeName.value.trim() : "",
    business_document: editClientHasBusiness.checked ? editClientBusinessDocument.value.trim() : "",
    business_activity: editClientHasBusiness.checked ? editClientBusinessActivity.value.trim() : "",
    business_role: editClientHasBusiness.checked ? editClientBusinessRole.value.trim() : "",
    business_phone: editClientHasBusiness.checked ? editClientBusinessPhone.value.trim() : "",
    business_email: editClientHasBusiness.checked ? editClientBusinessEmail.value.trim() : "",
    business_address: editClientHasBusiness.checked ? editClientBusinessAddress.value.trim() : "",
    business_address_number: editClientHasBusiness.checked ? editClientBusinessAddressNumber.value.trim() : "",
    business_complement: editClientHasBusiness.checked ? editClientBusinessComplement.value.trim() : "",
    business_neighborhood: editClientHasBusiness.checked ? editClientBusinessNeighborhood.value.trim() : "",
    business_postal_code: editClientHasBusiness.checked ? editClientBusinessPostalCode.value.trim() : "",
    business_state_region: editClientHasBusiness.checked ? editClientBusinessStateRegion.value.trim() : "",
    business_city: editClientHasBusiness.checked ? editClientBusinessCity.value.trim() : "",
    route_id: editClientRoute.value ? Number(editClientRoute.value) : null,
    staff_id: editClientStaff.value ? Number(editClientStaff.value) : null,
    active: editClientActive.value === "true"
  };
  if(currentUser && ["company_owner","sutil_owner"].includes(currentUser.role)){
    payload.collection_account_id=editClientCollectionAccount.value?Number(editClientCollectionAccount.value):null;
  }

  if(canEditClientIdentity()){
    payload.document_number = editClientDocument.value.trim();
  }

  editClientMsg.textContent = "Guardando...";
  try{
    const result = await api(`/api/admin/clients/${editingClientId}`,{
      method:"PUT",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify(payload)
    });
    const photoFile = editClientPhoto.files?.[0];
    if(photoFile){
      editClientMsg.textContent = "Guardando foto...";
      await uploadClientPhoto(editingClientId,photoFile);
    }
    editClientMsg.textContent = result.message;
    await refreshClients();
    await refreshDashboard();
    setTimeout(closeEditClient,500);
  }catch(e){
    editClientMsg.textContent = e.message;
  }
}

function clientRowClass(client){
  return `row-${client.color_status || "inactive"}`;
}

function clientStatusPill(client){
  const status = client.color_status || "inactive";
  return `<span class="status-pill pill-${status}">${client.status || "—"}</span>`;
}

function clientRouteDisplay(client){
  const registered=client.route_name || "Sin ruta";
  const accessRoutes=Array.isArray(client.access_routes)
    ? client.access_routes
    : [];
  const operational=accessRoutes
    .filter(r=>String(r.id)!==String(client.route_id || ""))
    .map(r=>r.name)
    .filter(Boolean);

  if(!operational.length)return registered;
  return `${registered}<br><small>Cobro: ${operational.join(", ")}</small>`;
}

function sutilClientPrimaryPhone(client){
  return String(client?.phone || client?.phone1 || "").trim();
}
function sutilClientPhoneDigits(client){
  return sutilClientPrimaryPhone(client).replace(/\D/g,"");
}
function sutilCallClient(clientId){
  const client=clientRows.find(item=>String(item.id)===String(clientId));
  const phone=sutilClientPrimaryPhone(client);
  if(!phone){ alert("Este cliente no tiene teléfono registrado."); return; }
  window.location.href=`tel:${phone.replace(/[^+\d]/g,"")}`;
}
let sutilWhatsAppPendingDigits="";
function sutilEnsureWhatsAppChooser(){
  let modal=document.getElementById("sutilWhatsAppChooser");
  if(modal)return modal;
  modal=document.createElement("div");
  modal.id="sutilWhatsAppChooser";
  modal.setAttribute("aria-hidden","true");
  modal.innerHTML=`<div class="wa-chooser-card" role="dialog" aria-modal="true" aria-labelledby="sutilWhatsAppChooserTitle">
    <div class="wa-chooser-title" id="sutilWhatsAppChooserTitle">Abrir WhatsApp</div>
    <div class="wa-chooser-subtitle">Elige con cuál aplicación quieres contactar a este cliente.</div>
    <div class="wa-chooser-options">
      <button type="button" class="wa-chooser-option" data-wa-target="personal"><span class="wa-logo">◉</span><span>WhatsApp<small>Aplicación personal</small></span></button>
      <button type="button" class="wa-chooser-option" data-wa-target="business"><span class="wa-logo">◉</span><span>WhatsApp Business<small>Aplicación empresarial</small></span></button>
      <button type="button" class="wa-chooser-option" data-wa-target="default"><span class="wa-logo">↗</span><span>Aplicación predeterminada<small>Abre el enlace habitual de WhatsApp</small></span></button>
    </div>
    <button type="button" class="wa-chooser-cancel">Cancelar</button>
  </div>`;
  modal.addEventListener("click",event=>{
    if(event.target===modal){ sutilCloseWhatsAppChooser(); return; }
    const btn=event.target.closest("[data-wa-target]");
    if(btn){ event.preventDefault(); event.stopPropagation(); sutilOpenWhatsAppTarget(btn.dataset.waTarget); return; }
    if(event.target.closest(".wa-chooser-cancel")){ event.preventDefault(); sutilCloseWhatsAppChooser(); }
  });
  document.body.appendChild(modal);
  return modal;
}
function sutilCloseWhatsAppChooser(){
  const modal=document.getElementById("sutilWhatsAppChooser");
  if(!modal)return;
  modal.classList.remove("open");
  modal.setAttribute("aria-hidden","true");
  sutilWhatsAppPendingDigits="";
}
function sutilOpenWhatsAppTarget(target){
  const digits=String(sutilWhatsAppPendingDigits||"").replace(/\D/g,"");
  if(!digits)return;
  sutilCloseWhatsAppChooser();
  if(target==="personal"){
    window.location.href=`intent://send?phone=${digits}#Intent;scheme=whatsapp;package=com.whatsapp;end`;
    return;
  }
  if(target==="business"){
    window.location.href=`intent://send?phone=${digits}#Intent;scheme=whatsapp;package=com.whatsapp.w4b;end`;
    return;
  }
  window.location.href=`https://wa.me/${digits}`;
}
function sutilWhatsAppClient(clientId){
  const client=clientRows.find(item=>String(item.id)===String(clientId));
  const digits=sutilClientPhoneDigits(client);
  if(!digits){ alert("Este cliente no tiene teléfono registrado."); return; }
  sutilWhatsAppPendingDigits=digits;
  const modal=sutilEnsureWhatsAppChooser();
  modal.classList.add("open");
  modal.setAttribute("aria-hidden","false");
}
function sutilBringClientChatIntoView(attempt=0){
  const pane=document.getElementById("clientChatPane");
  const compose=pane?.querySelector(".sutil-chat-compose");
  const input=pane?.querySelector("[data-chat-input]");
  const target=compose||input||pane;
  if(target){
    target.scrollIntoView({behavior:"auto",block:"center",inline:"nearest"});
    return;
  }
  if(attempt<8){
    setTimeout(()=>sutilBringClientChatIntoView(attempt+1),120);
  }
}
async function sutilOpenClientChat(clientId){
  await loadClientDetail(clientId);
  showClientFileTab("chat");
  requestAnimationFrame(()=>{
    sutilBringClientChatIntoView();
    setTimeout(()=>sutilBringClientChatIntoView(),220);
  });
}
function sutilClientQuickContactHtml(client){
  const id=Number(client.id);
  return `<div class="client-quick-contact" aria-label="Contacto rápido">
    <button class="client-quick-contact-btn whatsapp" type="button" title="WhatsApp" aria-label="WhatsApp" onclick="event.stopPropagation();sutilWhatsAppClient(${id})"><svg viewBox="0 0 32 32" width="20" height="20" aria-hidden="true" focusable="false"><path fill="currentColor" d="M16.04 3.2A12.72 12.72 0 0 0 5.25 22.65L3.2 28.8l6.35-2.02A12.77 12.77 0 1 0 16.04 3.2Zm0 23.36a10.59 10.59 0 0 1-5.4-1.48l-.39-.23-3.77 1.2 1.23-3.67-.25-.38a10.59 10.59 0 1 1 8.58 4.56Zm5.8-7.93c-.32-.16-1.88-.93-2.17-1.03-.29-.11-.5-.16-.71.16-.21.32-.82 1.03-1 1.24-.19.21-.37.24-.69.08-.32-.16-1.35-.5-2.57-1.59-.95-.85-1.59-1.89-1.78-2.21-.19-.32-.02-.49.14-.65.15-.14.32-.37.48-.56.16-.18.21-.32.32-.53.1-.21.05-.4-.03-.56-.08-.16-.71-1.72-.98-2.35-.26-.62-.52-.54-.71-.55h-.61c-.21 0-.56.08-.85.4-.29.32-1.11 1.09-1.11 2.65 0 1.56 1.14 3.07 1.3 3.28.16.21 2.24 3.42 5.43 4.8.76.33 1.35.52 1.81.67.76.24 1.45.21 2 .13.61-.09 1.88-.77 2.14-1.51.26-.74.26-1.38.18-1.51-.08-.13-.29-.21-.61-.37Z"/></svg></button>
    <button class="client-quick-contact-btn chat" type="button" title="Chat" aria-label="Chat interno" onclick="event.stopPropagation();sutilOpenClientChat(${id})">💬</button>
  </div>`;
}
function sutilClientCallInlineHtml(client){
  const id=Number(client.id);
  return `<button class="client-inline-call-btn" type="button" title="Llamar" aria-label="Llamar" onclick="event.stopPropagation();sutilCallClient(${id})">☎</button>`;
}

function renderClientsTable(){
  const term = normalizeSearchText(clientsSearch?.value || "");
  const route = clientsRouteFilter?.value || "";
  const status = clientsStatusFilter?.value || "";
  const rows = clientRows.filter(client => {
    const accessRoutes=Array.isArray(client.access_routes)
      ? client.access_routes
      : [];
    const accessRouteIds=accessRoutes.map(r=>String(r.id));
    const accessRouteNames=accessRoutes.map(r=>r.name).filter(Boolean);
    const text = normalizeSearchText([
      client.name,client.client_code,client.document_number,
      client.phone,client.route_name,...accessRouteNames,
      client.assigned_user_name,formatClientAddress(client)
    ].filter(Boolean).join(" "));
    return (!term || text.includes(term)) &&
      (!route || accessRouteIds.includes(route)) &&
      (!status || (status==="active_loan"
        ? Number(client.balance||0)>0
        : client.color_status === status));
  });

  clientsTable.innerHTML = rows.length ? rows.map(c => `
    <tr class="client-row ${clientRowClass(c)}" onclick="loadClientDetail(${c.id})">
      <td>${clientPhotoHtml(c)}</td>
      <td><strong>${c.name}</strong></td>
      <td><strong>${c.client_code || "—"}</strong></td>
      <td>${c.document_number || "—"}</td>
      <td><span class="client-phone-inline">${c.phone || "—"}${c.phone ? sutilClientCallInlineHtml(c) : ""}</span></td>
      <td>${formatClientAddress(c)}</td>
      <td>${clientRouteDisplay(c)}</td>
      <td>${c.assigned_user_name || "Sin responsable"}</td>
      <td>${money(c.balance)}</td>
      <td>${formatDateEs(c.next_due_date)}</td>
      <td>${clientStatusPill(c)}${c.days_overdue ? `<br><small>${c.days_overdue} día(s) de atraso</small>` : ""}${sutilClientQuickContactHtml(c)}</td>
      <td class="client-location-cell">${clientLocationButton(c)}</td>
      <td class="client-actions-cell">
        <button class="btn" style="padding:6px 9px;font-size:12px" onclick="event.stopPropagation();loadClientDetail(${c.id})">Ver detalle</button>
        ${clientEditButton(c)}
      </td>
      <td class="client-mobile-actions">
        ${clientLocationButton(c)}
        <button class="btn" type="button" onclick="event.stopPropagation();loadClientDetail(${c.id})">Ver detalle</button>
        ${clientEditButton(c)}
      </td>
    </tr>`).join("") : '<tr><td colspan="14">No hay clientes para los filtros seleccionados.</td></tr>';
}

async function refreshClients() {
  clientRows = await sutilGetAdminClients(0,true);
  renderLoanClientOptions(clientRows);
  updateLoanClientPreview();
  const routes = [...new Map(
    clientRows
      .flatMap(c=>Array.isArray(c.access_routes)?c.access_routes:[])
      .filter(r=>r?.id && r?.name)
      .map(r=>[r.id,r.name])
  ).entries()];
  if(document.getElementById("clientsRouteFilter")){
    const current = clientsRouteFilter.value;
    clientsRouteFilter.innerHTML = '<option value="">Todas las rutas</option>' +
      routes.map(([id,name])=>`<option value="${id}">${name}</option>`).join("");
    if(routes.some(([id])=>String(id)===String(current)))clientsRouteFilter.value=current;
    try{syncSutilMobileSelectButtons();}catch(_){}
  }
  renderClientsTable();
}


function toggleClientLocationHelp(){
  document.getElementById("clientLocationHelp")?.classList.toggle("open");
}

let loansHubMode="";
let loansConsultPeriod="all";
let globalLoanConsultRows=[];
let globalLoanConsultLoaded=false;
let globalLoanConsultLoading=false;

function showLoansHubPane(mode){
  // null/empty = hub cerrado; solo se muestran los dos botones principales.
  loansHubMode=mode==="consult"?"consult":(mode==="create"?"create":"");
  const create=document.getElementById("loansCreatePane"), consult=document.getElementById("loansConsultPane");
  const createTab=document.getElementById("loansCreateTab"), consultTab=document.getElementById("loansConsultTab");
  if(create)create.style.display=loansHubMode==="create"?"":"none";
  if(consult)consult.style.display=loansHubMode==="consult"?"":"none";
  if(createTab){createTab.classList.toggle("active-tab",loansHubMode==="create");createTab.classList.toggle("secondary",loansHubMode!=="create");}
  if(consultTab){consultTab.classList.toggle("active-tab",loansHubMode==="consult");consultTab.classList.toggle("secondary",loansHubMode!=="consult");}
  if(loansHubMode==="consult")prepareGlobalLoanConsult();
}
function setLoansConsultPeriod(period){
  loansConsultPeriod=period;
  ["All","Today","Yesterday","Dates"].forEach(key=>{
    const btn=document.getElementById(`loansPeriod${key}`); if(!btn)return;
    const active=(key.toLowerCase()===(period==="dates"?"dates":period));
    btn.classList.toggle("active-tab",active);btn.classList.toggle("secondary",!active);
  });
  const dates=document.getElementById("loansConsultDates"); if(dates)dates.style.display=period==="dates"?"grid":"none";
  renderGlobalLoanConsult();
}
async function sutilMapLimit(items,limit,worker){
  const out=[];let cursor=0;
  async function run(){while(cursor<items.length){const idx=cursor++;try{out[idx]=await worker(items[idx],idx)}catch(_e){out[idx]=null}}}
  await Promise.all(Array.from({length:Math.min(limit,items.length||1)},run));return out;
}
async function prepareGlobalLoanConsult(force=false){
  if(globalLoanConsultLoading)return;
  const status=document.getElementById("loansConsultStatusText");
  try{
    globalLoanConsultLoading=true;
    const routeSelect=document.getElementById("loansConsultRoute");
    const staffSelect=document.getElementById("loansConsultStaff");
    if(routeSelect && routeSelect.options.length<=1){
      const routes=await api("/api/admin/routes").catch(()=>[]);
      routeSelect.innerHTML='<option value="">Todas</option>'+((Array.isArray(routes)?routes:(routes.routes||[])).map(r=>`<option value="${r.id}">${r.name}</option>`).join(""));
    }
    if(staffSelect && staffSelect.options.length<=1){
      const staff=await api("/api/admin/staff").catch(()=>[]);
      staffSelect.innerHTML='<option value="">Todos</option>'+((Array.isArray(staff)?staff:(staff.staff||staff.users||[])).map(u=>`<option value="${u.id}">${u.name||u.full_name||u.username||("#"+u.id)}</option>`).join(""));
    }
    await renderGlobalLoanConsult();
  }catch(e){
    if(status)status.textContent=e.message||String(e);
  }finally{
    globalLoanConsultLoading=false;
  }
}
function globalLoanDateIso(loan){return String(loan.loan_date||loan.created_at||loan.start_date||"").slice(0,10)}
async function renderGlobalLoanConsult(){
  const box=document.getElementById("loansConsultResults");if(!box)return;
  const statusText=document.getElementById("loansConsultStatusText");
  const term=(document.getElementById("loansConsultClient")?.value||"").trim();
  const route=document.getElementById("loansConsultRoute")?.value||"";
  const staff=document.getElementById("loansConsultStaff")?.value||"";
  const state=document.getElementById("loansConsultStatus")?.value||"";
  const from=document.getElementById("loansConsultFrom")?.value||"";
  const to=document.getElementById("loansConsultTo")?.value||"";

  const seq=(window.__sutilLoanSearchSeq=(window.__sutilLoanSearchSeq||0)+1);
  if(statusText)statusText.textContent=sutilTranslateText("Cargando créditos...",SUTIL_ACTIVE_LANGUAGE||"es");

  const p=new URLSearchParams();
  if(term)p.set("q",term);
  if(route)p.set("route_id",route);
  if(staff)p.set("staff_id",staff);
  if(state)p.set("status",state);
  p.set("period",loansConsultPeriod);
  if(loansConsultPeriod==="dates" && from)p.set("date_from",from);
  if(loansConsultPeriod==="dates" && to)p.set("date_to",to);
  p.set("limit","100");

  try{
    const data=await api(`/api/admin/loans-search?${p.toString()}`);
    if(seq!==window.__sutilLoanSearchSeq)return;
    const rows=Array.isArray(data)?data:[];
    globalLoanConsultRows=rows;
    globalLoanConsultLoaded=true;
    if(statusText)statusText.textContent=`${rows.length} ${sutilTranslateText("crédito(s) encontrado(s)",SUTIL_ACTIVE_LANGUAGE||"es")}`;
    box.innerHTML=rows.length?rows.map(l=>`<div class="loan-card ${loanHistoryCardClass(l)}" onclick="viewLoan(${l.id})">
      <div class="loan-card-head">
        <div><strong>Crédito #${l.id}</strong><br><small>${formatDateEs(globalLoanDateIso(l))} · ${l.route_name||"Sin ruta"}</small>${l.client_name?`<br><small>${l.client_name}</small>`:""}</div>
        ${loanHistoryStatus(l)}
      </div>
      <div class="loan-card-grid">
        <div><small>${sutilTranslateText("Crédito realizado",SUTIL_ACTIVE_LANGUAGE||"es")}</small><br><strong>${money(l.principal_amount)}</strong></div>
        <div><small>Total recibido</small><br><strong>${money(l.amount_received)}</strong></div>
        <div><small>Saldo</small><br><strong>${money(l.balance_remaining)}</strong></div>
        <div><small>Cuotas</small><br><strong>${l.installments_paid||0} pagadas · ${l.installments_remaining||0} pendientes</strong></div>
      </div>
      <button class="btn" type="button" onclick="event.stopPropagation();viewLoan(${l.id})">Ver cuotas de este crédito</button>
    </div>`).join(""):`<div class="muted">${sutilTranslateText("No hay créditos para este filtro.",SUTIL_ACTIVE_LANGUAGE||"es")}</div>`;
  }catch(e){
    if(seq!==window.__sutilLoanSearchSeq)return;
    if(statusText)statusText.textContent=e.message||String(e);
    box.innerHTML="";
  }
}
function loanHistoryGroup(loan){
  if(loan.status === "loss")return "loss";
  if(["paid","completed","closed"].includes(loan.status))return "paid";
  if(loan.status === "active" && Number(loan.installments_overdue||0)>0)return "overdue";
  return "active";
}

function loanHistoryCardClass(loan){
  const group=loanHistoryGroup(loan);
  return group === "paid" ? "loan-paid" : group === "overdue" ? "loan-overdue" : group === "loss" ? "loan-loss" : "loan-active";
}

function renderClientLoanHistory(){
  const status=document.getElementById("loanHistoryStatusFilter")?.value || "";
  const term=normalizeSearchText(document.getElementById("loanHistorySearch")?.value || "");
  const rows=selectedClientLoanRows.filter(l=>{
    const group=loanHistoryGroup(l);
    const text=normalizeSearchText([l.id,l.loan_date,l.created_at,l.start_date,l.route_name,l.principal_amount,l.total_amount,l.amount_received].join(" "));
    return (!status || group===status || (status==="active" && l.status==="active")) && (!term || text.includes(term));
  });

  clientLoans.innerHTML = rows.length ? rows.map(l => `
      <tr class="${loanHistoryGroup(l)==="overdue" ? "client-overdue" : (loanHistoryGroup(l)==="paid" ? "row-current" : "")}">
        <td>#${l.id}</td><td>${formatDateEs(l.loan_date || l.start_date || l.created_at)}</td><td>${l.route_name || "Sin ruta"}</td>
        <td>${money(l.principal_amount)}</td><td>${l.interest_rate}%</td><td>${money(l.total_amount)}</td>
        <td>${money(l.amount_received)}</td><td><strong>${money(l.interest_received)}</strong></td>
        <td class="status-current">${l.installments_paid}</td><td>${l.installments_remaining}</td>
        <td class="${l.installments_overdue > 0 ? "status-overdue" : "status-current"}">${l.installments_overdue}</td>
        <td>${money(l.balance_remaining)}</td><td>${loanHistoryStatus(l)}</td>
        <td><button class="btn" onclick="event.stopPropagation();viewLoan(${l.id})">Ver cuotas</button></td>
      </tr>`).join("") : `<tr><td colspan="14">No hay créditos para este filtro.</td></tr>`;

  const mobile=document.getElementById("clientLoansMobile");
  if(mobile)mobile.innerHTML=rows.length ? rows.map(l=>`
    <div class="loan-card ${loanHistoryCardClass(l)}" onclick="viewLoan(${l.id})">
      <div class="loan-card-head"><div><strong>Crédito #${l.id}</strong><br><small>${formatDateEs(l.loan_date || l.start_date || l.created_at)} · ${l.route_name || "Sin ruta"}</small></div>${loanHistoryStatus(l)}</div>
      <div class="loan-card-grid">
        <div><small>Valor prestado</small><br><strong>${money(l.principal_amount)}</strong></div>
        <div><small>Total recibido</small><br><strong>${money(l.amount_received)}</strong></div>
        <div><small>Saldo</small><br><strong>${money(l.balance_remaining)}</strong></div>
        <div><small>Cuotas</small><br><strong>${l.installments_paid} pagadas · ${l.installments_remaining} pendientes</strong></div>
      </div>
      <button class="btn" type="button" onclick="event.stopPropagation();viewLoan(${l.id})">Ver cuotas de este crédito</button>
    </div>`).join("") : '<div class="muted">No hay créditos para este filtro.</div>';
}

function loanHistoryStatus(loan){
  if(loan.status === "active"){
    if(loan.installments_overdue > 0){
      return '<span class="status-overdue">ACTIVO · ATRASADO</span>';
    }
    return '<span class="checking">ACTIVO</span>';
  }
  if(["paid","completed","closed"].includes(loan.status)){
    return '<span class="status-current">PAGADO</span>';
  }
  if(loan.status === "loss"){
    return '<span class="status-overdue">PÉRDIDA / REPORTADO</span>';
  }
  return `<span class="muted">${String(loan.status || "—").toUpperCase()}</span>`;
}

function closeLoanDetail(){
  loanDetailCard.style.display = "none";
}

function openClientCreditsFromStatement(button){
  /* FIX 12.15.67: reutiliza el historial crediticio existente; no duplica ni elimina lógica. */
  showClientAccountPane("history");
  try{
    const pane=document.getElementById("clientHistoryPane");
    if(pane)window.setTimeout(()=>pane.scrollIntoView({behavior:"smooth",block:"start"}),40);
  }catch(_e){}
}

function showClientStatementView(view,button){
  const target = ["payments","installments"].includes(view) ? view : "payments";
  const summaryPane = document.getElementById("clientStatementSummaryPane");
  const paymentsPane = document.getElementById("clientStatementPaymentsPane");
  const installmentsPane = document.getElementById("clientStatementInstallmentsPane");
  const filtersCard = document.getElementById("clientStatementFiltersCard");
  const pdfRow = document.getElementById("clientStatementPdfRow");
  const tabs = {
    payments: document.getElementById("clientStatementPaymentsTab"),
    installments: document.getElementById("clientStatementInstallmentsTab")
  };

  if(summaryPane) summaryPane.style.display = "none";
  if(paymentsPane) paymentsPane.style.display = target === "payments" ? "block" : "none";
  if(installmentsPane) installmentsPane.style.display = target === "installments" ? "block" : "none";
  if(filtersCard) filtersCard.style.display = "block";
  if(pdfRow) pdfRow.style.display = "flex";

  Object.entries(tabs).forEach(([key,tab])=>{
    if(!tab)return;
    tab.className = key === target ? "btn active-tab" : "btn secondary";
  });
}

function showClientAccountPane(pane){
  const historyActive = pane === "history";
  clientHistoryPane.style.display = historyActive ? "block" : "none";
  clientStatementPane.style.display = historyActive ? "none" : "block";

  clientHistoryTab.className =
    historyActive ? "btn active-tab" : "btn secondary";
  clientStatementTab.className =
    historyActive ? "btn secondary" : "btn active-tab";

  loanDetailCard.style.display = "none";

  if(!historyActive){
    showClientStatementView("payments");
    loadClientAccountStatement();
  }
}

function accountInstallmentStatus(status){
  if(status === "paid"){
    return '<span class="status-current">PAGADA</span>';
  }
  if(status === "overdue"){
    return '<span class="status-overdue">VENCIDA</span>';
  }
  return '<span class="status-warning">PENDIENTE</span>';
}

async function loadClientAccountStatement(){
  if(!selectedClientStatementId)return;

  try{
    const params = new URLSearchParams();
    if(clientStatementFrom.value){
      params.set("date_from",clientStatementFrom.value);
    }
    if(clientStatementTo.value){
      params.set("date_to",clientStatementTo.value);
    }
    if(clientStatementLoan.value){
      params.set("loan_id",clientStatementLoan.value);
    }

    const data = await api(
      `/api/admin/clients/${selectedClientStatementId}/account-statement?${params.toString()}`
    );
    clientAccountStatementData = data;
    const s = data.summary;

    clientStatementSummary.innerHTML = `
      <div class="card">Total recibido<div class="metric status-current">${money(s.payments_total)}</div></div>
      <div class="card">Dinero<div class="metric">${money(s.cash_total)}</div></div>
      <div class="card">PIX<div class="metric">${money(s.pix_total)}</div></div>
      <div class="card">Transferencia<div class="metric">${money(s.transfer_total)}</div></div>
      <div class="card">Saldo actual<div class="metric">${money(s.current_balance)}</div></div>
      <div class="card">Cuotas pagadas<div class="metric status-current">${s.installments_paid}</div></div>
      <div class="card">Cuotas pendientes<div class="metric">${s.installments_pending}</div></div>
      <div class="card">Cuotas vencidas<div class="metric ${s.installments_overdue > 0 ? "status-overdue" : "status-current"}">${s.installments_overdue}</div></div>
    `;

    clientStatementPayments.innerHTML = data.payments.length
      ? data.payments.map(payment => {
          const allocations = payment.allocations.length
            ? payment.allocations
                .map(item =>
                  `Crédito #${item.loan_id}, cuota #${item.installment_number} (${money(item.amount)})`
                )
                .join("<br>")
            : "Sin detalle de cuota";

          return `
            <tr>
              <td>${payment.paid_at ? new Date(payment.paid_at).toLocaleString() : "—"}</td>
              <td class="status-current">${money(payment.amount)}</td>
              <td>${String(payment.payment_method || "cash").toUpperCase()}</td>
              <td>${payment.route_name || "Sin ruta"}</td>
              <td>${allocations}</td>
              <td>${payment.responsible || "—"}</td>
              <td>${money(payment.balance_after)}</td>
            </tr>`;
        }).join("")
      : '<tr><td colspan="7">No hay pagos para los filtros seleccionados.</td></tr>';

    clientStatementInstallments.innerHTML = data.installments.length
      ? data.installments.map(item => `
          <tr class="${item.status === "overdue" ? "client-overdue" : ""}">
            <td>#${item.loan_id}</td>
            <td>#${item.number}</td>
            <td>${formatDateEs(item.due_date)}</td>
            <td>${money(item.amount_due)}</td>
            <td>${money(item.amount_paid)}</td>
            <td>${money(item.amount_remaining)}</td>
            <td>${accountInstallmentStatus(item.status)}</td>
          </tr>
        `).join("")
      : '<tr><td colspan="7">No hay cuotas para los filtros seleccionados.</td></tr>';

  }catch(error){
    alert(error.message);
  }
}

function clientAccountStatementPrintableHtml(){
  if(!clientAccountStatementData)return "";
  const data=clientAccountStatementData;
  const s=data.summary||{};
  const client=selectedClientDetailData||{};
  const companyName=currentUser?.company_name||currentUser?.company?.name||"Empresa";
  const routeName=client.route_name||"Sin ruta";
  const from=clientStatementFrom?.value||"—";
  const to=clientStatementTo?.value||"—";
  const loanLabel=clientStatementLoan?.selectedOptions?.[0]?.textContent||"Todos los créditos";
  const generated=new Date().toLocaleString();
  const payments=Array.isArray(data.payments)?data.payments:[];
  const installments=Array.isArray(data.installments)?data.installments:[];
  const esc=(v)=>escapeHtml(String(v??""));
  const statusText=(status)=>status==="paid"?"PAGADA":status==="overdue"?"VENCIDA":"PENDIENTE";
  return `<!doctype html><html><head><meta charset="utf-8"><title>Estado de cuenta - ${esc(client.name||"Cliente")}</title><style>
  @page{size:A4;margin:14mm}*{box-sizing:border-box}body{font-family:Arial,sans-serif;color:#1f2937;font-size:11px;margin:0}h1{font-size:22px;margin:0 0 4px;color:#17365d}h2{font-size:15px;margin:20px 0 8px;color:#17365d}.muted{color:#667085}.head{border-bottom:2px solid #17365d;padding-bottom:10px;margin-bottom:12px}.meta{display:grid;grid-template-columns:1fr 1fr;gap:6px 18px;margin-top:10px}.summary{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin:12px 0}.box{border:1px solid #d8dee8;border-radius:8px;padding:8px}.box small{display:block;color:#667085;margin-bottom:3px}.box strong{font-size:14px}.green{color:#148343}.red{color:#b42318}table{width:100%;border-collapse:collapse;table-layout:fixed}th,td{border-bottom:1px solid #dfe4e9;padding:6px 5px;text-align:left;vertical-align:top;overflow-wrap:anywhere}th{background:#eef2f7;font-size:10px}.overdue{background:#fff0f0}.footer{margin-top:18px;padding-top:8px;border-top:1px solid #d8dee8;color:#667085;font-size:9px}.no-data{padding:10px;border:1px dashed #cbd5e1;color:#667085}
  </style></head><body>
  <div class="head"><h1>Estado de cuenta</h1><div><strong>${esc(companyName)}</strong></div><div class="muted">Reporte generado: ${esc(generated)}</div></div>
  <div class="meta"><div><strong>Cliente:</strong> ${esc(client.name||"Cliente")}</div><div><strong>Código:</strong> ${esc(client.client_code||"—")}</div><div><strong>Ruta:</strong> ${esc(routeName)}</div><div><strong>Crédito:</strong> ${esc(loanLabel)}</div><div><strong>Desde:</strong> ${esc(from)}</div><div><strong>Hasta:</strong> ${esc(to)}</div></div>
  <div class="summary">
    <div class="box"><small>Total recibido</small><strong class="green">${money(s.payments_total||0)}</strong></div>
    <div class="box"><small>Dinero</small><strong>${money(s.cash_total||0)}</strong></div>
    <div class="box"><small>PIX</small><strong>${money(s.pix_total||0)}</strong></div>
    <div class="box"><small>Transferencia</small><strong>${money(s.transfer_total||0)}</strong></div>
    <div class="box"><small>Saldo actual</small><strong>${money(s.current_balance||0)}</strong></div>
    <div class="box"><small>Cuotas pagadas</small><strong class="green">${Number(s.installments_paid||0)}</strong></div>
    <div class="box"><small>Cuotas pendientes</small><strong>${Number(s.installments_pending||0)}</strong></div>
    <div class="box"><small>Cuotas vencidas</small><strong class="${Number(s.installments_overdue||0)>0?'red':'green'}">${Number(s.installments_overdue||0)}</strong></div>
  </div>
  <h2>Pagos y abonos</h2>
  ${payments.length?`<table><thead><tr><th>Fecha</th><th>Valor</th><th>Método</th><th>Ruta</th><th>Cuotas afectadas</th><th>Responsable</th><th>Saldo posterior</th></tr></thead><tbody>${payments.map(payment=>{const allocations=Array.isArray(payment.allocations)&&payment.allocations.length?payment.allocations.map(item=>`Crédito #${esc(item.loan_id)}, cuota #${esc(item.installment_number)} (${money(item.amount||0)})`).join("<br>"):"Sin detalle de cuota";return `<tr><td>${esc(payment.paid_at?new Date(payment.paid_at).toLocaleString():"—")}</td><td class="green"><strong>${money(payment.amount||0)}</strong></td><td>${esc(String(payment.payment_method||"cash").toUpperCase())}</td><td>${esc(payment.route_name||"Sin ruta")}</td><td>${allocations}</td><td>${esc(payment.responsible||"—")}</td><td>${money(payment.balance_after||0)}</td></tr>`}).join("")}</tbody></table>`:'<div class="no-data">No hay pagos para los filtros seleccionados.</div>'}
  <h2>Cuotas</h2>
  ${installments.length?`<table><thead><tr><th>Crédito</th><th>Cuota</th><th>Vencimiento</th><th>Valor</th><th>Pagado</th><th>Saldo</th><th>Estado</th></tr></thead><tbody>${installments.map(item=>`<tr class="${item.status==='overdue'?'overdue':''}"><td>#${esc(item.loan_id)}</td><td>#${esc(item.number)}</td><td>${esc(formatDateEs(item.due_date))}</td><td>${money(item.amount_due||0)}</td><td>${money(item.amount_paid||0)}</td><td>${money(item.amount_remaining||0)}</td><td><strong>${esc(statusText(item.status))}</strong></td></tr>`).join("")}</tbody></table>`:'<div class="no-data">No hay cuotas para los filtros seleccionados.</div>'}
  <div class="footer">Documento generado desde el estado de cuenta del cliente. Los valores corresponden a los filtros seleccionados al momento de generar el reporte.</div>
  
</body></html>`;
}

function downloadClientAccountStatementPdf(){
  if(!selectedClientStatementId||!clientAccountStatementData){
    alert("Primero consulta el estado de cuenta del cliente.");
    return;
  }
  const w=window.open("","_blank","width=1000,height=760");
  if(!w){alert("El navegador bloqueó la ventana para generar el PDF.");return;}
  w.document.write(clientAccountStatementPrintableHtml());
  w.document.close();
  w.focus();
  setTimeout(()=>w.print(),350);
}

function canManageClientAppAccess(){
  if(!currentUser)return false;
  if(["company_owner","sutil_owner"].includes(currentUser.role))return true;
  if(!["company_admin","admin"].includes(currentUser.role))return false;
  const permissions=currentUser.permissions||{};
  return Boolean(permissions.edit_clients||permissions.create_clients);
}

function canOwnerControlClientSession(){
  return Boolean(currentUser && currentUser.role==="company_owner");
}


function clientAccessCredentialHtml(label,value,kind="value",isPassword=false){
  const clean=String(value??"");
  const encoded=encodeURIComponent(clean);
  const valueClass=isPassword?"client-access-credential-value password":"client-access-credential-value";
  return `<div class="client-access-credential">
    <div class="client-access-credential-label">${escapeHtml(label)}</div>
    <div class="client-access-credential-row">
      <div class="${valueClass}">${escapeHtml(clean||"—")}</div>
      <button class="client-access-copy-mini" type="button" onclick="copyClientAccessValue('${encoded}','${escapeHtml(label)} copiado')">📋 Copiar</button>
    </div>
  </div>`;
}

async function copyClientAccessValue(encoded,message="Copiado"){
  const value=decodeURIComponent(String(encoded||""));
  try{
    await navigator.clipboard.writeText(value);
  }catch(_){
    const area=document.createElement("textarea");
    area.value=value;area.style.position="fixed";area.style.opacity="0";
    document.body.appendChild(area);area.focus();area.select();
    document.execCommand("copy");area.remove();
  }
  await sutilAlert(message,{title:"Copiado",subtitle:"El dato está listo para pegar o compartir."});
}

function clientAccessShareText(){
  const c=window.sutilLastClientAccessCredentials;
  if(!c)return "";
  return [
    `Acceso a la app`,
    ``,
    `Llave de empresa: ${c.company_key}`,
    `Documento: ${c.document_number}`,
    `Clave de acceso: ${c.password}`,
    `Enlace: ${c.url}`
  ].join("\n");
}

async function copyAllClientAccess(){
  const value=clientAccessShareText();
  if(!value)return sutilAlert("Primero genera o restablece el acceso del cliente.");
  try{
    await navigator.clipboard.writeText(value);
  }catch(_){
    const area=document.createElement("textarea");
    area.value=value;area.style.position="fixed";area.style.opacity="0";
    document.body.appendChild(area);area.focus();area.select();
    document.execCommand("copy");area.remove();
  }
  await sutilAlert("Todos los datos de acceso fueron copiados.",{
    title:"Acceso copiado",
    subtitle:"Ya puedes pegarlos en WhatsApp, Messenger, SMS o donde prefieras."
  });
}

function openClientAppLink(encoded){
  const url=decodeURIComponent(String(encoded||""));
  if(url)window.open(url,"_blank","noopener");
}

async function shareClientAccess(){
  const text=clientAccessShareText();
  if(!text)return sutilAlert("Primero genera o restablece el acceso del cliente.");
  const c=window.sutilLastClientAccessCredentials||{};
  if(navigator.share){
    try{
      await navigator.share({
        title:`Acceso ${c.company_name||"app del cliente"}`,
        text
      });
      return;
    }catch(error){
      if(error?.name==="AbortError")return;
    }
  }
  try{
    await navigator.clipboard.writeText(text);
    await sutilAlert("Tu navegador no permite compartir directamente. Los datos fueron copiados para que puedas pegarlos en WhatsApp, Messenger o SMS.",{
      title:"Datos copiados"
    });
  }catch(_){
    await sutilAlert("No fue posible abrir el menú de compartir.");
  }
}


let clientAppConfigClientId=null;
let clientAppCompanyConfigCache={
  show_benefits:true,
  show_loan_table:false,
  show_chat:true,
  show_receipts:true,
  show_history:true,
  banner_enabled:false,
  banner_text:"",
  banner_color:"#7BE7B2",
  clear_chat_on_renewal:false,
  archive_chat_on_clear:true,
  loan_table:[]
};

function getLocalClientAppConfig(){
  return {...clientAppCompanyConfigCache};
}

async function fetchClientAppCompanyConfig(){
  if(!clientAppConfigClientId)throw new Error("Cliente no seleccionado");
  try{
    const data=await api(`/api/admin/clients/${clientAppConfigClientId}/app-settings`);
    clientAppCompanyConfigCache={...clientAppCompanyConfigCache,...data,loan_table:Array.isArray(data.loan_table)?data.loan_table:[]};
    return clientAppCompanyConfigCache;
  }catch(e){
    const result=document.getElementById("clientAppConfigResult");
    if(result){result.style.display="block";result.textContent=e.message||"No se pudo cargar la configuración";}
    return clientAppCompanyConfigCache;
  }
}

function saveLocalClientAppConfig(config){
  clientAppCompanyConfigCache={...clientAppCompanyConfigCache,...config};
}

function showClientAppSubpanel(name){
  document.querySelectorAll(".client-app-subpane").forEach(el=>el.style.display="none");
  document.querySelectorAll(".client-app-subtab").forEach(el=>el.classList.remove("active"));
  const pane=document.getElementById(`clientAppSubpane_${name}`);
  const tab=document.querySelector(`[data-client-app-subtab="${name}"]`);
  if(pane)pane.style.display="block";
  if(tab)tab.classList.add("active");
  if(name==="config")loadClientAppCompanyConfigUi();
  if(name==="table")renderClientLoanOfferTable();
}

async function loadClientAppCompanyConfigUi(){
  const cfg=await fetchClientAppCompanyConfig();
  const setCheck=(id,val)=>{const el=document.getElementById(id);if(el)el.checked=Boolean(val)};
  const setValue=(id,val)=>{const el=document.getElementById(id);if(el)el.value=val??""};

  setCheck("clientCfgShowBenefits",cfg.show_benefits);
  setCheck("clientCfgShowLoanTable",cfg.show_loan_table);
  setCheck("clientCfgShowChat",cfg.show_chat);
  setCheck("clientCfgShowReceipts",cfg.show_receipts);
  setCheck("clientCfgShowHistory",cfg.show_history);
  setCheck("clientCfgBannerEnabled",cfg.banner_enabled);
  setValue("clientCfgBannerText",cfg.banner_text);
  setValue("clientCfgBannerColor",cfg.banner_color||"#7BE7B2");
  setCheck("clientCfgClearChatRenewal",cfg.clear_chat_on_renewal);
  setCheck("clientCfgArchiveChat",cfg.archive_chat_on_clear);
  updateClientBannerPreview();

  if(typeof loadClientBenefitsProgramSettings==="function"){
    loadClientBenefitsProgramSettings("client");
  }
}

function readClientAppCompanyConfigUi(){
  const checked=id=>Boolean(document.getElementById(id)?.checked);
  const value=id=>String(document.getElementById(id)?.value||"").trim();
  const current=getLocalClientAppConfig();
  return {
    ...current,
    show_benefits:checked("clientCfgShowBenefits"),
    show_loan_table:checked("clientCfgShowLoanTable"),
    show_chat:checked("clientCfgShowChat"),
    show_receipts:checked("clientCfgShowReceipts"),
    show_history:checked("clientCfgShowHistory"),
    banner_enabled:checked("clientCfgBannerEnabled"),
    banner_text:value("clientCfgBannerText"),
    banner_color:value("clientCfgBannerColor")||"#7BE7B2",
    clear_chat_on_renewal:checked("clientCfgClearChatRenewal"),
    archive_chat_on_clear:checked("clientCfgArchiveChat")
  };
}

async function saveClientAppCompanyConfigUi(){
  const cfg=readClientAppCompanyConfigUi();
  cfg.loan_table=Array.isArray(clientAppCompanyConfigCache.loan_table)?clientAppCompanyConfigCache.loan_table:[];
  const result=document.getElementById("clientAppConfigResult");
  try{
    if(!clientAppConfigClientId)throw new Error("Cliente no seleccionado");
    const saved=await api(`/api/admin/clients/${clientAppConfigClientId}/app-settings`,{
      method:"PUT",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify(cfg)
    });
    clientAppCompanyConfigCache={...clientAppCompanyConfigCache,...saved,loan_table:Array.isArray(saved.loan_table)?saved.loan_table:cfg.loan_table};
    if(result){
      result.style.display="block";
      result.className="result success";
      result.textContent="Configuración guardada. La app del cliente la recibirá automáticamente.";
    }
    updateClientBannerPreview();
  }catch(e){
    if(result){
      result.style.display="block";
      result.className="result error";
      result.textContent=e.message||"No se pudo guardar la configuración.";
    }
  }
}


let clientAppAutoSaveTimer=null;
function scheduleClientAppAutoSave(){
  clearTimeout(clientAppAutoSaveTimer);
  clientAppAutoSaveTimer=setTimeout(()=>{
    saveClientAppCompanyConfigUi();
  },250);
}

function updateClientBannerPreview(){
  const enabled=Boolean(document.getElementById("clientCfgBannerEnabled")?.checked);
  const text=String(document.getElementById("clientCfgBannerText")?.value||"").trim();
  const color=String(document.getElementById("clientCfgBannerColor")?.value||"#7BE7B2");
  const preview=document.getElementById("clientCfgBannerPreview");
  if(!preview)return;
  preview.style.display=enabled&&text?"block":"none";
  preview.textContent=text||"";
  preview.style.color=color;
}

async function persistClientLoanOffers(){
  const cfg=readClientAppCompanyConfigUi();
  cfg.loan_table=Array.isArray(clientAppCompanyConfigCache.loan_table)?clientAppCompanyConfigCache.loan_table:[];
  try{
    if(!clientAppConfigClientId)throw new Error("Cliente no seleccionado");
    const saved=await api(`/api/admin/clients/${clientAppConfigClientId}/app-settings`,{
      method:"PUT",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify(cfg)
    });
    clientAppCompanyConfigCache={...clientAppCompanyConfigCache,...saved,loan_table:Array.isArray(saved.loan_table)?saved.loan_table:cfg.loan_table};
  }catch(e){
    if(typeof toast==="function")toast(e.message||"No se pudo guardar la tabla");
  }
}

function renderClientLoanOfferTable(){
  const box=document.getElementById("clientLoanOfferRows");
  if(!box)return;
  const cfg=getLocalClientAppConfig();
  const rows=Array.isArray(cfg.loan_table)?cfg.loan_table:[];
  if(!rows.length){
    box.innerHTML='<div class="client-empty">Todavía no hay valores configurados. Agrega el primer crédito.</div>';
    return;
  }
  box.innerHTML=rows.map((row,index)=>`
    <div class="client-loan-offer-row">
      <div><small>Valor prestado</small><strong>${escapeHtml(row.amount||"—")}</strong></div>
      <div><small>Cuotas</small><strong>${escapeHtml(row.installments||"—")}</strong></div>
      <div><small>Valor cuota</small><strong>${escapeHtml(row.installment_value||"—")}</strong></div>
      <div><small>Frecuencia</small><strong>${escapeHtml(row.frequency||"—")}</strong></div>
      <div><small>Estado</small><strong>${row.active!==false?"Visible":"Oculto"}</strong></div>
      <div class="client-loan-offer-actions">
        <button class="btn secondary" type="button" onclick="editClientLoanOffer(${index})">✏ Editar</button>
        <button class="btn danger" type="button" onclick="removeClientLoanOffer(${index})">🗑 Eliminar</button>
      </div>
    </div>`).join("");
}

function resetClientLoanOfferForm(){
  ["clientLoanOfferIndex","clientLoanOfferAmount","clientLoanOfferInstallments","clientLoanOfferInstallmentValue","clientLoanOfferNote"].forEach(id=>{
    const el=document.getElementById(id);if(el)el.value="";
  });
  const freq=document.getElementById("clientLoanOfferFrequency");if(freq)freq.value="Diaria";
  const active=document.getElementById("clientLoanOfferActive");if(active)active.checked=true;
}

function editClientLoanOffer(index){
  const cfg=getLocalClientAppConfig();
  const row=cfg.loan_table?.[index];
  if(!row)return;
  document.getElementById("clientLoanOfferIndex").value=index;
  document.getElementById("clientLoanOfferAmount").value=row.amount||"";
  document.getElementById("clientLoanOfferInstallments").value=row.installments||"";
  document.getElementById("clientLoanOfferInstallmentValue").value=row.installment_value||"";
  document.getElementById("clientLoanOfferFrequency").value=row.frequency||"Diaria";
  document.getElementById("clientLoanOfferNote").value=row.note||"";
  document.getElementById("clientLoanOfferActive").checked=row.active!==false;
  document.getElementById("clientLoanOfferAmount").focus();
}

async function saveClientLoanOffer(){
  const amount=String(document.getElementById("clientLoanOfferAmount")?.value||"").trim();
  const installments=String(document.getElementById("clientLoanOfferInstallments")?.value||"").trim();
  const installmentValue=String(document.getElementById("clientLoanOfferInstallmentValue")?.value||"").trim();
  if(!amount||!installments||!installmentValue){
    return sutilAlert("Completa valor prestado, cantidad de cuotas y valor de cada cuota.");
  }
  const cfg=getLocalClientAppConfig();
  const rows=Array.isArray(cfg.loan_table)?cfg.loan_table:[];
  const row={
    amount,
    installments,
    installment_value:installmentValue,
    frequency:String(document.getElementById("clientLoanOfferFrequency")?.value||"Diaria"),
    note:String(document.getElementById("clientLoanOfferNote")?.value||"").trim(),
    active:Boolean(document.getElementById("clientLoanOfferActive")?.checked)
  };
  const indexRaw=document.getElementById("clientLoanOfferIndex")?.value;
  if(indexRaw!=="" && Number.isInteger(Number(indexRaw)) && rows[Number(indexRaw)]){
    rows[Number(indexRaw)]=row;
  }else{
    rows.push(row);
  }
  cfg.loan_table=rows;
  saveLocalClientAppConfig(cfg);
  clientAppCompanyConfigCache.loan_table=rows;
  resetClientLoanOfferForm();
  renderClientLoanOfferTable();
  await persistClientLoanOffers();
}

async function removeClientLoanOffer(index){
  if(!await sutilConfirm("¿Eliminar este valor de la tabla de créditos?"))return;
  const cfg=getLocalClientAppConfig();
  const rows=Array.isArray(cfg.loan_table)?cfg.loan_table:[];
  rows.splice(index,1);
  cfg.loan_table=rows;
  saveLocalClientAppConfig(cfg);
  clientAppCompanyConfigCache.loan_table=rows;
  renderClientLoanOfferTable();
  await persistClientLoanOffers();
}

function renderClientAppAccess(d,credentials=null){
  const box=document.getElementById("clientAccessContent");
  if(!box||!d)return;
  clientAppConfigClientId=Number(d.id);
  clientAppCompanyConfigCache={show_benefits:false,show_loan_table:false,show_chat:true,show_receipts:true,show_history:true,banner_enabled:false,banner_text:"",banner_color:"#7BE7B2",clear_chat_on_renewal:false,archive_chat_on_clear:true,loan_table:[]};
  const access=d.app_access||{};
  const generated=access.generated===undefined?Boolean(access.enabled):Boolean(access.generated);
  const enabled=generated && Boolean(access.enabled);
  const stateText=!generated?"SIN GENERAR":(enabled?"HABILITADO":"DESHABILITADO");
  const benefitsEnabled=enabled && Boolean(access.benefits_enabled);
  const documentNumber=access.document_number||d.document_number||"—";
  const companyName=currentUser?.company_name||"Empresa";
  const companyKey=currentUser?.company_key||"—";
  const clientUrl=`${window.location.origin}/client`;
  const canManage=canManageClientAppAccess();
  const canControlSession=canOwnerControlClientSession();

  if(credentials){
    window.sutilLastClientAccessCredentials={
      company_name:credentials.company_name||companyName,
      company_key:credentials.company_key||companyKey,
      document_number:credentials.document_number||documentNumber,
      password:credentials.password||"",
      url:clientUrl
    };
  }

  const credentialsHtml=credentials ? `
    <div class="card client-access-success">
      <div class="client-access-success-head">
        <div class="client-access-success-title">
          <div class="client-access-success-icon">✓</div>
          <div>
            <h3>${escapeHtml(credentials.message||"Acceso del cliente generado correctamente")}</h3>
            <p>Entrega al cliente la llave de empresa, su documento, la clave de acceso y el enlace de ingreso.</p>
          </div>
        </div>
      </div>
      <div class="client-access-credentials">
        <div class="client-access-credential">
          <div class="client-access-credential-label">Empresa</div>
          <div class="client-access-credential-row">
            <div class="client-access-credential-value">${escapeHtml(credentials.company_name||companyName)}</div>
          </div>
        </div>
        ${clientAccessCredentialHtml("Llave de empresa",credentials.company_key||companyKey,"key")}
        ${clientAccessCredentialHtml("Documento",credentials.document_number||documentNumber,"document")}
        ${clientAccessCredentialHtml("Clave de acceso",credentials.password||"","password",true)}
      </div>
      <div class="client-access-linkbox">
        <div style="font-size:20px">🔗</div>
        <div class="client-access-linktext"><strong style="display:block;margin-bottom:2px">Enlace de ingreso</strong>${escapeHtml(clientUrl)}</div>
        <button class="client-access-copy-mini" type="button" onclick="copyClientAccessValue('${encodeURIComponent(clientUrl)}','Enlace copiado')">📋 Copiar</button>
      </div>
      <div class="client-access-actions">
        <button class="btn success" type="button" onclick="copyAllClientAccess()">📋 Copiar todo</button>
        <button class="btn secondary" type="button" onclick="copyClientAccessValue('${encodeURIComponent(clientUrl)}','Enlace copiado')">🔗 Copiar enlace</button>
        <button class="btn" type="button" onclick="openClientAppLink('${encodeURIComponent(clientUrl)}')">↗ Abrir app</button>
        <button class="btn" type="button" onclick="shareClientAccess()">📤 Compartir</button>
      </div>
      <div class="client-access-security-note">🔐 <strong>Importante:</strong> la clave se muestra únicamente ahora. Si el cliente la pierde, deberá generarse una nueva.</div>
    </div>` : "";

  box.innerHTML=`
    <div class="client-app-subtabs">
      <button class="client-app-subtab active" data-client-app-subtab="access" type="button" onclick="showClientAppSubpanel('access')">🔐 Acceso a la app</button>
      <button class="client-app-subtab" data-client-app-subtab="config" type="button" onclick="showClientAppSubpanel('config')">⚙ Configuración</button>
      <button class="client-app-subtab" data-client-app-subtab="table" type="button" onclick="showClientAppSubpanel('table')">💰 Tabla de créditos</button>
    </div>

    <div id="clientAppSubpane_access" class="client-app-subpane">
      ${credentialsHtml}
      <div class="card">
        <h3 style="margin-top:0">📱 Acceso a la app del cliente</h3>
        <div class="muted">El cliente entra con la llave de esta empresa, su documento y una clave de acceso.</div>
        <div class="grid" style="margin-top:12px">
          <div class="card">Estado
            <div class="metric ${enabled?"status-current":""}" style="${generated&&!enabled?'color:#ff8f98':''}">${stateText}</div>
            ${canControlSession&&generated?`<button class="btn ${enabled?'danger':'success'}" style="margin-top:10px;width:100%" type="button" onclick="setClientAppAccessEnabled(${Number(d.id)},${enabled?'false':'true'})">${enabled?'⛔ Deshabilitar / cerrar sesión':'✅ Habilitar acceso'}</button>`:''}
          </div>
          <div class="card">Empresa<div class="metric">${escapeHtml(companyName)}</div></div>
          <div class="card">Llave<div class="metric">${escapeHtml(companyKey)}</div></div>
          <div class="card">Documento<div class="metric">${escapeHtml(documentNumber)}</div></div>
        </div>
        <div class="client-access-linkbox" style="margin-top:10px">
          <div style="font-size:19px">🔗</div>
          <div class="client-access-linktext"><strong style="display:block">Dirección de ingreso</strong>${escapeHtml(clientUrl)}</div>
          <button class="client-access-copy-mini" type="button" onclick="copyClientAccessValue('${encodeURIComponent(clientUrl)}','Enlace copiado')">📋 Copiar</button>
          <button class="client-access-copy-mini" type="button" onclick="openClientAppLink('${encodeURIComponent(clientUrl)}')">↗ Abrir</button>
        </div>
        ${canManage
          ? `<button class="btn success" style="margin-top:12px" type="button" onclick="generateClientAppAccess(${Number(d.id)})">${generated?"🔄 Restablecer clave":"🔐 Generar acceso"}</button>`
          : `<div class="client-empty">Solo el empresario o un ADM autorizado puede generar o restablecer este acceso.</div>`}
        ${generated?`<div class="muted" style="margin-top:10px">Por seguridad la clave actual no puede consultarse. Si el cliente la pierde, genera una nueva.</div>`:""}
      </div>
    </div>

    <div id="clientAppSubpane_config" class="client-app-subpane" style="display:none">
      <div class="card">
        <h3>⚙ Configuración individual de la app</h3>
        <div class="muted"><strong>Configuración individual:</strong> estos cambios afectan únicamente a este cliente y no a los demás clientes de la empresa.</div>

        <div class="client-app-config-grid">
          <label class="client-app-switch"><input id="clientCfgShowBenefits" type="checkbox" onchange="scheduleClientAppAutoSave()"><span><strong>Beneficios</strong><small>Mostrar módulo de beneficios/VIP.</small></span></label>
          <label class="client-app-switch"><input id="clientCfgShowLoanTable" type="checkbox" onchange="scheduleClientAppAutoSave()"><span><strong>Tabla de créditos</strong><small>Mostrar valores de crédito configurados por la empresa.</small></span></label>
          <label class="client-app-switch"><input id="clientCfgShowChat" type="checkbox" onchange="scheduleClientAppAutoSave()"><span><strong>Chat</strong><small>Permitir acceso al chat con la empresa.</small></span></label>
          <label class="client-app-switch"><input id="clientCfgShowReceipts" type="checkbox" onchange="scheduleClientAppAutoSave()"><span><strong>Comprobantes</strong><small>Permitir consultar comprobantes y estados.</small></span></label>
          <label class="client-app-switch"><input id="clientCfgShowHistory" type="checkbox" onchange="scheduleClientAppAutoSave()"><span><strong>Historial</strong><small>Mostrar historial disponible del cliente.</small></span></label>
        </div>
      </div>

      <div class="card">
        <h3>📢 Mensaje sobre el chat</h3>
        <div class="muted">Si está vacío o desactivado, ese espacio permanecerá limpio.</div>
        <label class="inline-check" style="margin-top:12px"><input id="clientCfgBannerEnabled" type="checkbox" onchange="updateClientBannerPreview();scheduleClientAppAutoSave()"> Mostrar mensaje</label>
        <label style="display:block;margin-top:12px">Mensaje
          <textarea id="clientCfgBannerText" maxlength="240" style="width:100%;min-height:72px" placeholder="Ej. Renovación autorizada" oninput="updateClientBannerPreview();scheduleClientAppAutoSave()"></textarea>
        </label>
        <label style="display:block;margin-top:12px">Color de las letras
          <input id="clientCfgBannerColor" type="color" value="#7BE7B2" oninput="updateClientBannerPreview();scheduleClientAppAutoSave()">
        </label>
        <div id="clientCfgBannerPreview" class="client-banner-preview" style="display:none"></div>
      </div>

      <div class="card">
        <h3>💬 Gestión del chat</h3>
        <label class="client-app-switch"><input id="clientCfgClearChatRenewal" type="checkbox" onchange="scheduleClientAppAutoSave()"><span><strong>Limpiar chat después de cada renovación</strong><small>Al renovar, el chat visible comienza limpio.</small></span></label>
        <label class="client-app-switch"><input id="clientCfgArchiveChat" type="checkbox" onchange="scheduleClientAppAutoSave()"><span><strong>Archivar antes de limpiar</strong><small>Conservar el historial para auditoría del empresario.</small></span></label>
      </div>

      <div class="card">
        <h3>💎 Beneficios / VIP</h3>
        <div class="muted">Se reutiliza la configuración de Beneficios que ya existe en Sutil.</div>
        <div class="form-grid" style="margin-top:12px">
          <label>Nombre del programa<input id="settingBenefitsProgramName" maxlength="120" placeholder="Ej. Clientes VIP"></label>
          <label>Título principal<input id="settingBenefitsHeadline" maxlength="180"></label>
          <label style="grid-column:1/-1">Descripción<textarea id="settingBenefitsDescription" maxlength="1000" style="width:100%;min-height:70px"></textarea></label>
          <label>Beneficio 1<input id="settingBenefit1Title" maxlength="120"></label>
          <label>Detalle 1<input id="settingBenefit1Description" maxlength="500"></label>
          <label>Beneficio 2<input id="settingBenefit2Title" maxlength="120"></label>
          <label>Detalle 2<input id="settingBenefit2Description" maxlength="500"></label>
          <label>Beneficio 3<input id="settingBenefit3Title" maxlength="120"></label>
          <label>Detalle 3<input id="settingBenefit3Description" maxlength="500"></label>
          <label style="grid-column:1/-1">Condiciones<textarea id="settingBenefitsTerms" maxlength="2000" style="width:100%;min-height:75px"></textarea></label>
        </div>
        <button class="btn success" type="button" onclick="saveClientBenefitsProgramSettings('client')">💾 Guardar Beneficios</button>
        <div id="settingBenefitsResult" class="result"></div>
      </div>

      <div style="display:flex;gap:10px;flex-wrap:wrap">
        <button class="btn success" type="button" onclick="saveClientAppCompanyConfigUi()">💾 Guardar configuración</button>
      </div>
      <div id="clientAppConfigResult" class="result"></div>
    </div>

    <div id="clientAppSubpane_table" class="client-app-subpane" style="display:none">
      <div class="card">
        <h3>💰 Tabla de valores de créditos</h3>
        <div class="muted">Esta tabla es individual para este cliente. Puedes ofrecerle valores diferentes a otros clientes.</div>
        <input id="clientLoanOfferIndex" type="hidden">
        <div class="form-grid" style="margin-top:14px">
          <label>Valor prestado<input id="clientLoanOfferAmount" inputmode="decimal" placeholder="Ej. 600"></label>
          <label>Cantidad de cuotas<input id="clientLoanOfferInstallments" type="number" min="1" placeholder="Ej. 15"></label>
          <label>Valor de cada cuota<input id="clientLoanOfferInstallmentValue" inputmode="decimal" placeholder="Ej. 56"></label>
          <label>Frecuencia
            <select id="clientLoanOfferFrequency">
              <option>Diaria</option><option>Semanal</option><option>Quincenal</option><option>Mensual</option>
            </select>
          </label>
          <label style="grid-column:1/-1">Observación<input id="clientLoanOfferNote" maxlength="220" placeholder="Opcional"></label>
          <label class="inline-check"><input id="clientLoanOfferActive" type="checkbox" checked> Visible para clientes</label>
        </div>
        <div style="display:flex;gap:10px;flex-wrap:wrap;margin-top:12px">
          <button class="btn success" type="button" onclick="saveClientLoanOffer()">💾 Guardar valor</button>
          <button class="btn secondary" type="button" onclick="resetClientLoanOfferForm()">Limpiar</button>
        </div>
      </div>
      <div id="clientLoanOfferRows" class="client-loan-offer-list"></div>
    </div>
  `;
}

async function setClientBenefitsAccess(clientId,enabled){
  const result=await setClientBenefitsAccessLegacy(clientId,enabled);
  try{
    clientAppConfigClientId=Number(clientId);
    await loadClientAppCompanyConfigUi();
  }catch(_){}
  return result;
}

async function setClientBenefitsAccessLegacy(clientId,enabled){
  if(!canManageClientAppAccess())return alert("No tienes permiso para gestionar Benefícios del cliente.");
  const input=document.getElementById("clientBenefitsEnabled");
  if(input)input.disabled=true;
  try{
    const result=await api(`/api/admin/clients/${clientId}/app-benefits`,{
      method:"PUT",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({enabled:Boolean(enabled)})
    });
    if(selectedClientDetailData){
      selectedClientDetailData.app_access={
        ...(selectedClientDetailData.app_access||{}),
        benefits_enabled:Boolean(result.benefits_enabled)
      };
    }
    renderClientAppAccess(selectedClientDetailData||{id:clientId,app_access:{enabled:true,benefits_enabled:Boolean(result.benefits_enabled)}});
  }catch(error){
    if(input)input.checked=!enabled;
    alert(error.message);
    if(input)input.disabled=false;
  }
}

async function setClientAppAccessEnabled(clientId,enabled){
  if(!canOwnerControlClientSession())return alert("Solo el empresario puede habilitar, deshabilitar o cerrar la sesión del cliente.");
  const question=enabled
    ? "¿Habilitar nuevamente el acceso de este cliente a la app? Tendrá que iniciar sesión una vez."
    : "¿Deshabilitar el acceso? Se cerrarán las sesiones activas del cliente.";
  if(!await sutilConfirm(question))return;
  try{
    const result=await api(`/api/admin/clients/${clientId}/app-access-state`,{
      method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({enabled:Boolean(enabled)})
    });
    if(selectedClientDetailData){
      selectedClientDetailData.app_access={
        ...(selectedClientDetailData.app_access||{}),
        generated:Boolean(result.generated),
        enabled:Boolean(result.enabled)
      };
    }
    renderClientAppAccess(selectedClientDetailData||{id:clientId,app_access:{generated:Boolean(result.generated),enabled:Boolean(result.enabled)}});
  }catch(error){alert(error.message)}
}


async function generateClientAppAccess(clientId){
  if(!canManageClientAppAccess())return alert("No tienes permiso para gestionar el acceso del cliente.");
  const hadAccess=selectedClientDetailData?.app_access?.generated===undefined
    ? Boolean(selectedClientDetailData?.app_access?.enabled)
    : Boolean(selectedClientDetailData?.app_access?.generated);
  const question=hadAccess
    ? "Se reemplazará la clave actual del cliente. ¿Deseas generar una nueva?"
    : "¿Deseas generar el acceso a la app para este cliente?";
  if(!await sutilConfirm(question))return;
  try{
    const result=await api(`/api/admin/clients/${clientId}/app-access`,{method:"POST"});
    if(selectedClientDetailData){
      selectedClientDetailData.app_access={
        ...(selectedClientDetailData.app_access||{}),
        generated:true,
        enabled:true,
        document_number:result.document_number,
        active:true,
        must_change_password:false,
        benefits_enabled:Boolean(selectedClientDetailData.app_access?.benefits_enabled)
      };
    }
    renderClientAppAccess(selectedClientDetailData||{id:clientId,document_number:result.document_number,app_access:{enabled:true,document_number:result.document_number}},result);
  }catch(error){
    alert(error.message);
  }
}

function toggleClientFileGroup(groupName){
  document.querySelectorAll("#clientDetailCard .client-file-group").forEach(group=>{
    group.classList.toggle("open", group.dataset.clientGroup===groupName && !group.classList.contains("open"));
  });
}

function openClientFileGroupForTab(tabName){
  const button=document.querySelector(`#clientDetailCard [data-client-tab="${tabName}"]`);
  const group=button?.closest(".client-file-group");
  if(!group)return;
  document.querySelectorAll("#clientDetailCard .client-file-group").forEach(item=>item.classList.toggle("open",item===group));
}

function showClientFileTab(name,button=null){
  openClientFileGroupForTab(name);
  const map={personal:"clientPersonalPane",business:"clientBusinessPane",loans:"clientFinancePane",payments:"clientFinancePane",locations:"clientLocationsPane",documents:"clientDocumentsPane",access:"clientAccessPane",chat:"clientChatPane",history:"clientHistoryFullPane",alerts:"clientAlertsPane",risk:"clientRiskPane"};
  document.querySelectorAll(".client-file-pane").forEach(p=>p.classList.remove("active"));
  const pane=document.getElementById(map[name]); if(pane)pane.classList.add("active");
  document.querySelectorAll(".client-file-btn").forEach(b=>b.classList.remove("active"));
  const selected=button||document.querySelector(`[data-client-tab="${name}"]`); if(selected)selected.classList.add("active");
  if(name!=="chat") stopClientChatPolling();
  if(name==="loans"){showClientAccountPane("history");}
  else if(name==="payments"){showClientAccountPane("statement");if(selectedClientStatementId)loadClientAccountStatement();}
  else if(name==="documents"){
    if(selectedClientDetailData?.id)loadClientDocuments(selectedClientDetailData.id);
  }
  else if(name==="chat"){
    if(!canViewClientChat()){
      if(clientChatContent) clientChatContent.innerHTML=`<div class="client-empty">🔒 No tienes permiso para acceder al chat.</div>`;
      return;
    }
    loadClientChat();
    startClientChatPolling();
  }
}


/* ============================================================
   CENTRO DE CHATS
   La IA permanece desactivada, pero el puente de contexto queda
   disponible para conectar un proveedor futuro sin cambiar la UI.
   ============================================================ */
const SUTIL_CHAT_AI_BRIDGE = {
  version: 1,
  enabled: false,
  provider: null,
  buildContext(client, messages=[]) {
    return {
      company_id: currentUser?.company_id || null,
      user_id: currentUser?.id || null,
      role: currentUser?.role || null,
      client: client ? {
        id: client.id,
        code: client.client_code || null,
        name: client.name || null,
        route_id: client.route_id || null,
        route_name: client.route_name || null
      } : null,
      messages: Array.isArray(messages) ? messages.map(m => ({
        kind: m.kind || "chat",
        sender_role: m.sender_role || null,
        sender_name: m.sender_name || null,
        text: m.text || "",
        attachment: m.attachment ? {
          filename: m.attachment.filename || null,
          mime_type: m.attachment.mime_type || null,
          file_url: m.attachment.file_url || null
        } : null,
        created_at: m.created_at || null
      })) : []
    };
  }
};
window.SUTIL_CHAT_AI_BRIDGE = SUTIL_CHAT_AI_BRIDGE;

function stopChatCenterPolling(){
  if(chatCenterPollTimer){
    clearInterval(chatCenterPollTimer);
    chatCenterPollTimer=null;
  }
}

function startChatCenterPolling(){
  stopChatCenterPolling();
  if(!chatCenterClientId || !canViewClientChat())return;
  chatCenterPollTimer=setInterval(()=>{
    if(currentSectionId!=="chatsSection" || !navigator.onLine || document.hidden || chatCenterPollBusy)return;
    chatCenterPollBusy=true;
    Promise.resolve(loadChatCenterConversation(true)).catch(()=>{}).finally(()=>{chatCenterPollBusy=false;});
  },12000);
}

function canManageClientChat(){
  if(!currentUser)return false;
  if(["company_owner","sutil_owner"].includes(currentUser.role))return true;
  return ["company_admin","admin"].includes(currentUser.role) && Boolean(currentUser.permissions?.manage_chat);
}

function chatManagementMenuHtml(scope="center"){
  if(!canManageClientChat())return "";
  const clientExpr=scope==="center"?"chatCenterClientId":"selectedClientChatId";
  return `<details class="sutil-chat-menu">
    <summary title="${sutilChatText("menu_options")}">⋮</summary>
    <div class="sutil-chat-menu-box">
      <button type="button" onclick="event.preventDefault();manageClientConversation(${clientExpr},'clear','${scope}')">🧹 ${sutilChatText("clear_messages")}</button>
      <button type="button" class="danger" onclick="event.preventDefault();manageClientConversation(${clientExpr},'delete','${scope}')">🗑️ ${sutilChatText("delete_conversation")}</button>
    </div>
  </details>`;
}

function formatChatFileSize(value){
  const size=Number(value||0);
  if(!size)return "";
  if(size<1024)return `${size} B`;
  if(size<1024*1024)return `${(size/1024).toFixed(1)} KB`;
  return `${(size/(1024*1024)).toFixed(1)} MB`;
}

function chatAttachmentHtml(item){
  const a=item?.attachment;
  if(!a)return "";
  const href=legacyEscapeHtml(a.file_url||"#");
  const name=legacyEscapeHtml(a.filename||sutilChatText("file"));
  const mime=String(a.mime_type||"");
  const size=legacyEscapeHtml(formatChatFileSize(a.size));
  if(mime.startsWith("image/")){
    return `<a class="sutil-chat-attachment" href="${href}" target="_blank" rel="noopener"><img src="${href}" alt="${name}"></a>`;
  }
  if(mime.startsWith("audio/")){
    return `<div class="sutil-chat-audio"><div class="sutil-chat-audio-title">🎙 ${sutilChatText("audio")}</div><audio controls preload="metadata" src="${href}"></audio><div class="sutil-chat-file-size">${size}</div></div>`;
  }
  return `<a class="sutil-chat-attachment" href="${href}" target="_blank" rel="noopener"><span class="sutil-chat-file-icon">📄</span><span><div class="sutil-chat-file-name">${name}</div><div class="sutil-chat-file-size">${size || legacyEscapeHtml(mime)}</div></span></a>`;
}

async function uploadChatAttachment(clientId,file,statusEl){
  if(!clientId || !file)return;
  if(!navigator.onLine){
    if(statusEl)statusEl.textContent=sutilChatText("attach_needs_connection");
    return;
  }
  const allowed=["image/jpeg","image/png","image/webp","application/pdf","audio/webm","audio/ogg","audio/mp4","audio/mpeg","audio/wav","audio/x-wav","audio/aac"];
  if(!allowed.includes(file.type)){
    if(statusEl)statusEl.textContent=sutilChatText("format_not_allowed");
    return;
  }
  if(file.size>8*1024*1024){
    if(statusEl)statusEl.textContent=sutilChatText("file_too_large");
    return;
  }
  const form=new FormData();
  form.append("file",file);
  if(statusEl)statusEl.textContent=sutilChatText("attaching");
  await api(`/api/admin/clients/${clientId}/messages/attachment`,{method:"POST",body:form});
}

async function sendChatCenterAttachment(input){
  const file=input?.files?.[0];
  const shell=chatsCenterConversation?.querySelector("[data-chat-center-shell]");
  const status=shell?.querySelector("[data-chat-center-status]");
  if(!file)return;
  try{
    await uploadChatAttachment(chatCenterClientId,file,status);
    input.value="";
    await loadChatCenterConversation();
  }catch(error){
    if(status)status.textContent=error.message||sutilChatText("attach_error");
  }
}

async function sendClientChatAttachment(input){
  const file=input?.files?.[0];
  const shell=clientChatContent?.querySelector(".sutil-chat-shell");
  const status=shell?.querySelector("[data-chat-status]");
  if(!file)return;
  try{
    await uploadChatAttachment(selectedClientChatId,file,status);
    input.value="";
    await loadClientChat();
  }catch(error){
    if(status)status.textContent=error.message||sutilChatText("attach_error");
  }
}

async function manageClientConversation(clientId,mode="clear",scope="center"){
  if(!clientId || !canManageClientChat())return;
  const isDelete=mode==="delete";
  const warning=isDelete
    ? sutilChatText("confirm_delete")
    : sutilChatText("confirm_clear");
  if(!await sutilConfirm(warning))return;
  try{
    const result=await api(`/api/admin/clients/${clientId}/messages?mode=${encodeURIComponent(mode)}`,{method:"DELETE"});
    if(scope==="center"){
      if(isDelete)clearChatCenterConversation();
      else await loadChatCenterConversation();
    }else{
      await loadClientChat();
    }
    alert(result.message||sutilChatText("conversation_updated_short"));
  }catch(error){
    alert(error.message||sutilChatText("manage_error"));
  }
}

function chatCenterClientRoutes(client){
  const values=[];
  if(client?.route_id!=null || client?.route_name){
    values.push({id:client.route_id,name:client.route_name || sutilChatText("no_route")});
  }
  if(Array.isArray(client?.access_routes)){
    client.access_routes.forEach(r=>{
      if(!r)return;
      if(!values.some(x=>String(x.id)===String(r.id)))values.push({id:r.id,name:r.name || `Ruta ${r.id}`});
    });
  }
  return values;
}

function chatCenterAvatarHtml(client){
  if(client?.photo_url){
    return `<div class="sutil-chat-directory-avatar"><img src="${legacyEscapeHtml(client.photo_url)}" alt="" loading="lazy" decoding="async"></div>`;
  }
  const initial=String(client?.name||"C").trim().charAt(0).toUpperCase() || "C";
  return `<div class="sutil-chat-directory-avatar">${legacyEscapeHtml(initial)}</div>`;
}

function renderChatsCenterList(){
  if(!chatsCenterList)return;
  const term=normalizeSearchText(chatsCenterSearch?.value || "");
  const route=String(chatsCenterRoute?.value || "");
  const source=Array.isArray(clientRows)?clientRows:[];
  const rows=source.filter(client=>{
    const routes=chatCenterClientRoutes(client);
    const routeNames=routes.map(r=>r.name).filter(Boolean);
    const routeIds=routes.map(r=>String(r.id));
    const haystack=normalizeSearchText([
      client.name,client.client_code,client.route_name,...routeNames
    ].filter(Boolean).join(" "));
    return (!term || haystack.includes(term)) && (!route || routeIds.includes(route));
  }).sort((a,b)=>{
    const getActivity=(client)=>{
      const activity=chatCenterActivityMap.get(Number(client?.id));
      const value=
        activity?.last_message_at ||
        client?.last_message_at ||
        client?.last_message_created_at ||
        client?.last_chat_at ||
        client?.chat_updated_at ||
        "";
      const ts=value ? new Date(value).getTime() : 0;
      return Number.isFinite(ts) ? ts : 0;
    };

    const order=String(chatsCenterOrder?.value||"recent");
    const aActivity=getActivity(a);
    const bActivity=getActivity(b);

    let diff=0;
    if(order==="oldest"){
      // Clientes sin actividad quedan al final también en "Más antiguos".
      if(aActivity===0 && bActivity!==0)diff=1;
      else if(bActivity===0 && aActivity!==0)diff=-1;
      else diff=aActivity-bActivity;
    }else{
      diff=bActivity-aActivity;
    }

    if(diff!==0)return diff;
    return String(a.name||"").localeCompare(String(b.name||""),undefined,{sensitivity:"base"});
  });

  if(chatsCenterCount)chatsCenterCount.textContent=rows.length===1
    ? `1 ${sutilChatText("client_lower")}`
    : `${rows.length} ${sutilChatText("clients_lower")}`;
  chatsCenterList.innerHTML=rows.length?rows.map(client=>{
    const routes=chatCenterClientRoutes(client).map(r=>r.name).filter(Boolean);
    const active=Number(chatCenterClientId)===Number(client.id);
    return `<button type="button" class="sutil-chat-directory-item ${active?"active":""}" onclick="openChatCenterClient(${Number(client.id)})">
      ${chatCenterAvatarHtml(client)}
      <span style="min-width:0">
        <span class="sutil-chat-directory-name">${legacyEscapeHtml(client.name||sutilChatText("client"))}</span>
        <span class="sutil-chat-directory-meta">${legacyEscapeHtml(client.client_code||sutilChatText("no_code"))} · ${legacyEscapeHtml(routes.join(", ")||sutilChatText("no_route"))}</span>
        ${(chatCenterActivityMap.get(Number(client.id))?.last_message_at || client?.last_message_at)
          ? `<span class="sutil-chat-directory-time">${sutilChatText("last_message")}: ${legacyEscapeHtml(formatDateTimeEs(chatCenterActivityMap.get(Number(client.id))?.last_message_at || client.last_message_at))}</span>`
          : `<span class="sutil-chat-directory-time">${sutilChatText("no_messages_short")}</span>`}
      </span>
      <span class="sutil-chat-directory-open">›</span>
    </button>`;
  }).join(""):`<div class="client-empty">${sutilChatText("no_clients_search")}</div>`;
}

function populateChatsCenterRoutes(){
  if(!chatsCenterRoute)return;
  const current=String(chatsCenterRoute.value||"");
  const map=new Map();
  (clientRows||[]).forEach(client=>{
    chatCenterClientRoutes(client).forEach(route=>{
      if(route?.id!=null)map.set(String(route.id),route.name||`Ruta ${route.id}`);
    });
  });
  const rows=[...map.entries()].sort((a,b)=>String(a[1]).localeCompare(String(b[1]),undefined,{sensitivity:"base"}));
  chatsCenterRoute.innerHTML=`<option value="">${sutilChatText("all_routes")}</option>`+rows.map(([id,name])=>`<option value="${legacyEscapeHtml(id)}">${legacyEscapeHtml(name)}</option>`).join("");
  if(rows.some(([id])=>id===current))chatsCenterRoute.value=current;
}

async function loadChatsCenter(){
  stopClientChatPolling();
  if(!canViewClientChat()){
    if(chatsCenterList)chatsCenterList.innerHTML=`<div class="client-empty">🔒 ${sutilChatText("no_permission")}</div>`;
    return;
  }
  try{
    clientRows=await sutilGetAdminClients(15000,false);
    chatCenterActivityMap=new Map(
      clientRows
        .filter(client=>client?.last_message_at)
        .map(client=>[
          Number(client.id),
          {
            client_id:Number(client.id),
            last_message_at:client.last_message_at,
            last_message_id:Number(client.last_message_id||0)
          }
        ])
    );
    populateChatsCenterRoutes();
    renderChatsCenterList();
    if(chatCenterClientId){
      const stillVisible=clientRows.some(c=>Number(c.id)===Number(chatCenterClientId));
      if(stillVisible)await loadChatCenterConversation(true);
      else clearChatCenterConversation();
    }
  }catch(error){
    if(chatsCenterList)chatsCenterList.innerHTML=`<div class="client-empty">${legacyEscapeHtml(error.message||sutilChatText("chats_load_error"))}</div>`;
  }
}

function clearChatCenterConversation(){
  stopChatCenterPolling();
  chatCenterClientId=null;
  chatCenterClient=null;
  document.getElementById("chatsSection")?.classList.remove("chat-mobile-open");
  if(chatsCenterConversation){
    chatsCenterConversation.innerHTML=`<div class="sutil-chat-center-empty"><div><div style="font-size:34px;margin-bottom:8px">💬</div><strong>${sutilChatText("select_client")}</strong><div style="margin-top:5px">${sutilChatText("conversation_here")}</div></div></div>`;
  }
  renderChatsCenterList();
}

function closeChatCenterMobile(){
  document.getElementById("chatsSection")?.classList.remove("chat-mobile-open");
  renderChatsCenterList();
}

async function openChatCenterClient(clientId){
  chatCenterClientId=Number(clientId);
  chatCenterClient=(clientRows||[]).find(c=>Number(c.id)===Number(clientId)) || {id:Number(clientId),name:sutilChatText("client")};
  document.getElementById("chatsSection")?.classList.add("chat-mobile-open");
  renderChatsCenterList();
  if(chatsCenterConversation){
    chatsCenterConversation.innerHTML=chatCenterShellHtml(chatCenterClient);
  }
  await loadChatCenterConversation();
  startChatCenterPolling();
}


function sutilChatText(key){
  const lang=String(typeof SUTIL_ACTIVE_LANGUAGE!=="undefined"?SUTIL_ACTIVE_LANGUAGE:(document.documentElement.lang||"es")).toLowerCase().slice(0,2);
  const t={
    conversation_with:{es:"Conversación con",pt:"Conversa com",en:"Conversation with"},
    update:{es:"Actualizar",pt:"Atualizar",en:"Refresh"},
    loading:{es:"Cargando conversación...",pt:"Carregando conversa...",en:"Loading conversation..."},
    placeholder:{es:"Escribe un mensaje para el cliente...",pt:"Digite uma mensagem para o cliente...",en:"Type a message for the client..."},
    send:{es:"Enviar",pt:"Enviar",en:"Send"},
    updating:{es:"Actualizando conversación...",pt:"Atualizando conversa...",en:"Updating conversation..."},
    updated:{es:"Conversación actualizada",pt:"Conversa atualizada",en:"Conversation updated"},
    load_error:{es:"No fue posible cargar el chat.",pt:"Não foi possível carregar o chat.",en:"The chat could not be loaded."},
    load_error_short:{es:"Error al cargar la conversación",pt:"Erro ao carregar a conversa",en:"Error loading the conversation"},
    chats_load_error:{es:"No fue posible cargar los chats.",pt:"Não foi possível carregar os chats.",en:"The chats could not be loaded."},
    no_messages:{es:"No hay mensajes todavía. Puedes iniciar la conversación.",pt:"Ainda não há mensagens. Você pode iniciar a conversa.",en:"There are no messages yet. You can start the conversation."},
    no_messages_short:{es:"Sin mensajes",pt:"Sem mensagens",en:"No messages"},
    no_permission:{es:"No tienes permiso para acceder al chat.",pt:"Você não tem permissão para acessar o chat.",en:"You do not have permission to access the chat."},
    attach:{es:"Adjuntar archivo o comprobante",pt:"Anexar arquivo ou comprovante",en:"Attach file or receipt"},
    attach_needs_connection:{es:"El chat necesita conexión para adjuntar archivos.",pt:"O chat precisa de conexão para anexar arquivos.",en:"The chat needs a connection to attach files."},
    format_not_allowed:{es:"Formato no permitido. Usa imagen, PDF o audio.",pt:"Formato não permitido. Use imagem, PDF ou áudio.",en:"File format not allowed. Use an image, PDF, or audio file."},
    file_too_large:{es:"El archivo supera el límite de 8 MB.",pt:"O arquivo ultrapassa o limite de 8 MB.",en:"The file exceeds the 8 MB limit."},
    attaching:{es:"Adjuntando archivo...",pt:"Anexando arquivo...",en:"Attaching file..."},
    attach_error:{es:"No fue posible adjuntar el archivo.",pt:"Não foi possível anexar o arquivo.",en:"The file could not be attached."},
    type_before_send:{es:"Escribe un mensaje antes de enviar.",pt:"Digite uma mensagem antes de enviar.",en:"Type a message before sending."},
    needs_connection:{es:"El chat necesita conexión para enviar el mensaje.",pt:"O chat precisa de conexão para enviar a mensagem.",en:"The chat needs a connection to send the message."},
    sending:{es:"Enviando...",pt:"Enviando...",en:"Sending..."},
    send_error:{es:"No fue posible enviar el mensaje.",pt:"Não foi possível enviar a mensagem.",en:"The message could not be sent."},
    offline:{es:"Sin conexión",pt:"Sem conexão",en:"Offline"},
    client:{es:"Cliente",pt:"Cliente",en:"Client"},
    client_lower:{es:"cliente",pt:"cliente",en:"client"},
    clients_lower:{es:"clientes",pt:"clientes",en:"clients"},
    team:{es:"Equipo Sutil",pt:"Equipe Sutil",en:"Sutil Team"},
    file:{es:"Archivo",pt:"Arquivo",en:"File"},
    audio:{es:"Audio",pt:"Áudio",en:"Audio"},
    menu_options:{es:"Opciones del chat",pt:"Opções do chat",en:"Chat options"},
    clear_messages:{es:"Limpiar mensajes del chat",pt:"Limpar mensagens do chat",en:"Clear chat messages"},
    delete_conversation:{es:"Eliminar conversación",pt:"Excluir conversa",en:"Delete conversation"},
    confirm_delete:{es:"¿Eliminar toda la conversación? Se borrarán mensajes, avisos del chat y archivos adjuntos. Los pagos y comprobantes registrados en sus módulos NO se eliminarán.",pt:"Excluir toda a conversa? As mensagens, avisos do chat e arquivos anexados serão apagados. Os pagamentos e comprovantes registrados em seus módulos NÃO serão excluídos.",en:"Delete the entire conversation? Messages, chat notices, and attachments will be deleted. Payments and receipts registered in their modules will NOT be deleted."},
    confirm_clear:{es:"¿Limpiar los mensajes del chat? Se borrarán mensajes y archivos adjuntos, pero se conservarán los eventos financieros del cliente.",pt:"Limpar as mensagens do chat? As mensagens e os arquivos anexados serão apagados, mas os eventos financeiros do cliente serão mantidos.",en:"Clear the chat messages? Messages and attachments will be deleted, but the client's financial events will be kept."},
    conversation_updated_short:{es:"Conversación actualizada.",pt:"Conversa atualizada.",en:"Conversation updated."},
    manage_error:{es:"No fue posible administrar la conversación.",pt:"Não foi possível administrar a conversa.",en:"The conversation could not be managed."},
    no_route:{es:"Sin ruta",pt:"Sem rota",en:"No route"},
    no_code:{es:"Sin código",pt:"Sem código",en:"No code"},
    last_message:{es:"Último mensaje",pt:"Última mensagem",en:"Last message"},
    no_clients_search:{es:"No hay clientes para esta búsqueda.",pt:"Não há clientes para esta busca.",en:"There are no clients for this search."},
    all_routes:{es:"Todas las rutas",pt:"Todas as rotas",en:"All routes"},
    select_client:{es:"Selecciona un cliente",pt:"Selecione um cliente",en:"Select a client"},
    conversation_here:{es:"Su conversación aparecerá aquí.",pt:"A conversa aparecerá aqui.",en:"The conversation will appear here."},
    future_ai_title:{es:"Preparado para futura integración de IA",pt:"Preparado para futura integração de IA",en:"Ready for future AI integration"},
    future_ai_badge:{es:"IA futura",pt:"IA futura",en:"Future AI"},
    back_conversations:{es:"Conversaciones",pt:"Conversas",en:"Conversations"}
  };
  const row=t[key]||{};
  return row[lang]||row.es||key;
}

function chatCenterShellHtml(client={}){
  const routeNames=chatCenterClientRoutes(client).map(r=>r.name).filter(Boolean);
  const clientName=String(client.name||sutilChatText("client"));
  const initial=clientName.trim().charAt(0).toUpperCase() || "C";
  const avatar=client.photo_url
    ? `<div class="sutil-chat-conversation-avatar"><img src="${legacyEscapeHtml(client.photo_url)}" alt="" loading="lazy" decoding="async"></div>`
    : `<div class="sutil-chat-conversation-avatar">${legacyEscapeHtml(initial)}</div>`;
  return `
    <div class="sutil-chat-shell sutil-chat-shell-organized" data-chat-center-shell>
      <div class="sutil-chat-mobile-toolbar">
        <button type="button" class="sutil-chat-mobile-back" onclick="closeChatCenterMobile()">← ${sutilChatText("back_conversations")}</button>
      </div>

      <div class="sutil-chat-head sutil-chat-head-organized">
        <div class="sutil-chat-client-identity">
          ${avatar}
          <div class="sutil-chat-client-copy">
            <strong>${legacyEscapeHtml(clientName)}</strong>
            <small>${legacyEscapeHtml(client.client_code||sutilChatText("no_code"))} · ${legacyEscapeHtml(routeNames.join(", ")||sutilChatText("no_route"))}</small>
          </div>
        </div>

        <div class="sutil-chat-head-actions">
          <button class="sutil-chat-head-icon" type="button" title="${sutilChatText("update")}" onclick="loadChatCenterConversation()">↻</button>
          ${chatManagementMenuHtml("center")}
        </div>
      </div>

      <div class="sutil-chat-messages sutil-chat-messages-organized" data-chat-center-messages>
        <div class="client-empty">${sutilChatText("loading")}</div>
      </div>

      <div class="sutil-chat-compose sutil-chat-compose-organized">
        <input data-chat-center-file type="file" accept="image/jpeg,image/png,image/webp,application/pdf" hidden onchange="sendChatCenterAttachment(this)">
        <button class="sutil-chat-attach-btn" type="button" title="${sutilChatText("attach")}" onclick="this.parentElement.querySelector('[data-chat-center-file]').click()">📎</button>
        <textarea data-chat-center-input maxlength="2000" placeholder="${sutilChatText("placeholder")}" onkeydown="chatCenterInputKeydown(event)"></textarea>
        <button class="sutil-chat-send-btn" type="button" data-chat-center-send onclick="sendChatCenterMessage()" title="${sutilChatText("send")}">➤</button>
      </div>
      <div class="sutil-chat-status sutil-chat-status-organized" data-chat-center-status></div>
    </div>`;
}

function chatCenterInputKeydown(event){
  if(event.key==="Enter" && !event.shiftKey){
    event.preventDefault();
    sendChatCenterMessage();
  }
}

async function loadChatCenterConversation(silent=false){
  if(!chatCenterClientId || !chatsCenterConversation || !canViewClientChat())return;
  let shell=chatsCenterConversation.querySelector("[data-chat-center-shell]");
  if(!shell){
    chatsCenterConversation.innerHTML=chatCenterShellHtml(chatCenterClient||{});
    shell=chatsCenterConversation.querySelector("[data-chat-center-shell]");
  }
  const list=shell?.querySelector("[data-chat-center-messages]");
  const status=shell?.querySelector("[data-chat-center-status]");
  try{
    if(status && !silent)status.textContent=sutilChatText("updating");
    const data=await api(`/api/admin/clients/${chatCenterClientId}/messages`);
    const messages=Array.isArray(data?.messages)?data.messages:[];
    observeSutilChatMessages(`center:${chatCenterClientId}`,messages);
    if(list){
      const nearBottom=(list.scrollHeight-list.scrollTop-list.clientHeight)<80;
      list.innerHTML=renderClientChatMessages(messages);
      if(!silent || nearBottom)list.scrollTop=list.scrollHeight;
    }
    SUTIL_CHAT_AI_BRIDGE.lastContext=SUTIL_CHAT_AI_BRIDGE.buildContext(chatCenterClient,messages);
    if(status)status.textContent=sutilChatText("updated");
  }catch(error){
    if(list && !silent)list.innerHTML=`<div class="client-empty">${sutilChatText("load_error")}</div>`;
    if(status)status.textContent=error.message||sutilChatText("load_error_short");
  }
}

async function sendChatCenterMessage(){
  if(!chatCenterClientId || !chatsCenterConversation || !canViewClientChat())return;
  const shell=chatsCenterConversation.querySelector("[data-chat-center-shell]");
  const input=shell?.querySelector("[data-chat-center-input]");
  const send=shell?.querySelector("[data-chat-center-send]");
  const status=shell?.querySelector("[data-chat-center-status]");
  const message=String(input?.value||"").trim();
  if(!message)return;
  if(!navigator.onLine){
    if(status)status.textContent=sutilChatText("needs_connection");
    return;
  }
  try{
    if(send)send.disabled=true;
    if(status)status.textContent=sutilChatText("sending");
    await api(`/api/admin/clients/${chatCenterClientId}/messages`,{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({text:message})
    });
    if(input)input.value="";
    await loadChatCenterConversation();
  }catch(error){
    if(status)status.textContent=error.message||sutilChatText("send_error");
  }finally{
    if(send)send.disabled=false;
  }
}

function canViewClientChat(){
  if(!currentUser)return false;
  if(["company_owner","sutil_owner"].includes(currentUser.role))return true;
  return Boolean(currentUser.permissions?.view_chat);
}

function clientChatShellHtml(client={}){
  if(!canViewClientChat()){
    return `<div class="client-empty">🔒 ${sutilChatText("no_permission")}</div>`;
  }
  return `
    <div class="sutil-chat-shell">
      <div class="sutil-chat-head">
        <div>
          <strong>💬 ${sutilChatText("conversation_with")} ${legacyEscapeHtml(client.name||sutilChatText("client"))}</strong>
          <small>${legacyEscapeHtml(client.client_code||"")} ${client.route_name?" · "+legacyEscapeHtml(client.route_name):""}</small>
        </div>
        <div style="display:flex;gap:6px;align-items:center">
          <button class="btn secondary" type="button" onclick="loadClientChat()">↻ ${sutilChatText("update")}</button>
          ${chatManagementMenuHtml("detail")}
        </div>
      </div>
      <div class="sutil-chat-messages" data-chat-messages>
        <div class="client-empty">${sutilChatText("loading")}</div>
      </div>
      <div class="sutil-chat-compose">
        <input data-chat-file type="file" accept="image/jpeg,image/png,image/webp,application/pdf,audio/*" hidden onchange="sendClientChatAttachment(this)">
        <button class="sutil-chat-attach-btn" type="button" title="${sutilChatText("attach")}" onclick="this.parentElement.querySelector('[data-chat-file]').click()">📎</button>
        <textarea data-chat-input maxlength="2000" placeholder="${sutilChatText("placeholder")}" onkeydown="clientChatInputKeydown(event)"></textarea>
        <button class="btn success" type="button" data-chat-send onclick="sendClientChatMessage()">➤ ${sutilChatText("send")}</button>
      </div>
      <div class="sutil-chat-status" data-chat-status></div>
    </div>`;
}

function stopClientChatPolling(){
  if(clientChatPollTimer){
    clearInterval(clientChatPollTimer);
    clientChatPollTimer=null;
  }
}

function startClientChatPolling(){
  stopClientChatPolling();
  if(!selectedClientChatId || !canViewClientChat())return;
  clientChatPollTimer=setInterval(()=>{
    if(!document.getElementById("clientChatPane")?.classList.contains("active") || !navigator.onLine || document.hidden || clientChatPollBusy)return;
    clientChatPollBusy=true;
    Promise.resolve(loadClientChat(true)).catch(()=>{}).finally(()=>{clientChatPollBusy=false;});
  },8000);
}

function clientChatInputKeydown(event){
  if(event.key==="Enter" && !event.shiftKey){
    event.preventDefault();
    sendClientChatMessage();
  }
}

function renderClientChatMessages(messages=[]){
  if(!messages.length){
    return `<div class="client-empty">${sutilChatText("no_messages")}</div>`;
  }
  return messages.map(item=>{
    const kind=String(item.kind||"chat");
    if(kind==="chat_attachment"){
      const side=item.sender_is_client?"client":"staff";
      const sender=item.sender_is_client?sutilChatText("client"):(item.sender_name||sutilChatText("team"));
      return `<div class="sutil-chat-row ${side}"><div class="sutil-chat-bubble"><div class="sutil-chat-meta"><strong>${legacyEscapeHtml(sender)}</strong><span>${formatDateTimeEs(item.created_at)}</span></div>${chatAttachmentHtml(item)}</div></div>`;
    }
    if(kind!=="chat"){
      return `<div class="sutil-chat-row system"><div class="sutil-chat-bubble"><div class="sutil-chat-text">${legacyEscapeHtml(item.text||"")}</div><div style="margin-top:4px;opacity:.75">${formatDateTimeEs(item.created_at)}</div></div></div>`;
    }
    const side=item.sender_is_client?"client":"staff";
    const sender=item.sender_is_client?sutilChatText("client"):(item.sender_name||sutilChatText("team"));
    return `<div class="sutil-chat-row ${side}"><div class="sutil-chat-bubble"><div class="sutil-chat-meta"><strong>${legacyEscapeHtml(sender)}</strong><span>${formatDateTimeEs(item.created_at)}</span></div><div class="sutil-chat-text">${legacyEscapeHtml(item.text||"")}</div></div></div>`;
  }).join("");
}

async function loadClientChat(silent=false){
  if(!selectedClientChatId || !clientChatContent || !canViewClientChat())return;
  let shell=clientChatContent.querySelector(".sutil-chat-shell");
  if(!shell){
    clientChatContent.innerHTML=clientChatShellHtml({name:clientDetailName?.textContent||sutilChatText("client")});
    shell=clientChatContent.querySelector(".sutil-chat-shell");
  }
  const list=shell?.querySelector("[data-chat-messages]");
  const status=shell?.querySelector("[data-chat-status]");
  try{
    if(status && !silent)status.textContent=sutilChatText("updating");
    const data=await api(`/api/admin/clients/${selectedClientChatId}/messages`);
    observeSutilChatMessages(`detail:${selectedClientChatId}`,data.messages||[]);
    if(list){
      const wasNearBottom=(list.scrollHeight-list.scrollTop-list.clientHeight)<90;
      list.innerHTML=renderClientChatMessages(data.messages||[]);
      if(!silent || wasNearBottom)list.scrollTop=list.scrollHeight;
    }
    if(status)status.textContent=navigator.onLine?sutilChatText("updated"):sutilChatText("offline");
  }catch(error){
    if(status)status.textContent=error.message;
    if(!silent && list && !list.children.length){
      list.innerHTML=`<div class="client-empty">${sutilChatText("load_error")}</div>`;
    }
  }
}

async function sendClientChatMessage(){
  if(!selectedClientChatId || !clientChatContent || !canViewClientChat())return;
  const shell=clientChatContent.querySelector(".sutil-chat-shell");
  const input=shell?.querySelector("[data-chat-input]");
  const send=shell?.querySelector("[data-chat-send]");
  const status=shell?.querySelector("[data-chat-status]");
  const text=String(input?.value||"").trim();
  if(!text){
    if(status)status.textContent=sutilChatText("type_before_send");
    return;
  }
  if(!navigator.onLine){
    if(status)status.textContent=sutilChatText("needs_connection");
    return;
  }
  try{
    if(send)send.disabled=true;
    if(status)status.textContent=sutilChatText("sending");
    await api(`/api/admin/clients/${selectedClientChatId}/messages`,{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({text})
    });
    if(input)input.value="";
    await loadClientChat();
    if(input)input.focus();
  }catch(error){
    if(status)status.textContent=error.message;
  }finally{
    if(send)send.disabled=false;
  }
}

async function loadClientDetail(id) {
  try {
    const d = await api(`/api/admin/clients/${id}`);
    selectedClientDetailData = d;
    selectedClientStatementId = id;
    if(clientDirectoryCard)clientDirectoryCard.classList.add("hidden-for-detail");
    clientDetailCard.style.display = "block";
    showClientFileTab("personal");

    clientDetailPhoto.innerHTML = clientPhotoHtml(d,true);
    clientDetailName.textContent = d.name || "Cliente";
    clientDetailMeta.innerHTML = `
      <span class="client-meta-chip">${d.client_code || "Sin código"}</span>
      <span class="client-meta-chip">📍 ${d.route_name || "Sin ruta"}</span>
      <span class="client-status-chip ${d.is_overdue ? "is-overdue" : "is-current"}">● ${d.status || "AL DÍA"}</span>
    `;
    const overviewSummary = d.summary || {};
    const overviewAddress = [d.address,d.address_number,d.complement,d.neighborhood,d.city,d.state_region,d.postal_code].filter(Boolean).join(", ") || "Sin dirección registrada";
    const overviewAlerts = [];
    if(d.reported) overviewAlerts.push(`<div class="client-mini-alert danger"><strong>Cliente reportado</strong><span>${d.report_reason || "Revisar información del cliente"}</span></div>`);
    if(d.is_overdue) overviewAlerts.push(`<div class="client-mini-alert danger"><strong>Cliente con cuotas vencidas</strong><span>${Number(overviewSummary.installments_overdue || 0)} cuota(s) en atraso</span></div>`);
    if(!d.active) overviewAlerts.push(`<div class="client-mini-alert warning"><strong>Cliente inactivo</strong><span>Acceso o registro actualmente inactivo</span></div>`);
    if(!overviewAlerts.length) overviewAlerts.push(`<div class="client-mini-alert ok"><strong>Sin alertas activas</strong><span>No hay alertas registradas en este momento</span></div>`);
    clientInfoSummary.innerHTML = `
      <div class="client-overview-main">
        <div class="client-overview-card client-photo-card">
          <div class="client-overview-heading">Foto</div>
          <div class="client-overview-photo">${clientPhotoHtml(d,true)}</div>
        </div>
        <div class="client-overview-card">
          <div class="client-overview-heading"><span class="overview-title-icon blue">👤</span> Datos personales</div>
          <div class="client-data-row"><span>Nombre completo</span><strong>${d.name || "—"}</strong></div>
          <div class="client-overview-pair">
            <div class="client-data-row"><span>Código</span><strong>${d.client_code || "—"}</strong></div>
            <div class="client-data-row"><span>Documento</span><strong>${d.document_number || "—"}</strong></div>
          </div>
          <div class="client-data-row"><span>Estado del cliente</span><strong class="${d.is_overdue ? "overview-overdue" : "overview-current"}">● ${d.status || "AL DÍA"}</strong></div>
        </div>
        <div class="client-overview-card">
          <div class="client-overview-heading"><span class="overview-title-icon green">☎</span> Contactos</div>
          <div class="client-overview-pair">
            <div class="client-data-row"><span>Teléfono 1</span><strong>${d.phone || "—"}</strong></div>
            <div class="client-data-row"><span>Teléfono 2</span><strong>${d.phone2 || "—"}</strong></div>
          </div>
          <div class="client-data-row"><span>Teléfono fijo</span><strong>${d.fixed_phone || "—"}</strong></div>
          <div class="client-data-row"><span>Correo</span><strong>${d.email || "—"}</strong></div>
        </div>
        <div class="client-overview-card">
          <div class="client-overview-heading"><span class="overview-title-icon purple">🏠</span> Dirección</div>
          <div class="client-data-row"><span>Ruta</span><strong>${d.route_name || "Sin ruta"}</strong></div>
          <div class="client-data-row client-address-row"><span>Dirección</span><strong>${overviewAddress}</strong></div>
          <div class="client-data-row"><span>Ubicación GPS</span><strong>${d.location?.lat != null && d.location?.lng != null ? "Registrada" : "Sin registrar"}</strong></div>
        </div>
      </div>
      <div class="client-overview-secondary">
        <div class="client-overview-card">
          <div class="client-overview-heading"><span class="overview-title-icon gold">▥</span> Resumen rápido</div>
          <div class="client-quick-summary-grid">
            <div class="client-stat-row"><span>Créditos activos</span><b>${Number(overviewSummary.active_loans_count || 0)}</b></div>
            <div class="client-stat-row"><span>Cuotas vencidas</span><b class="stat-danger">${Number(overviewSummary.installments_overdue || 0)}</b></div>
            <div class="client-stat-row"><span>Créditos pagados</span><b class="stat-ok">${Number(overviewSummary.paid_loans_count || 0)}</b></div>
            <div class="client-stat-row"><span>Cuotas pagadas</span><b>${Number(overviewSummary.installments_paid || 0)}</b></div>
          </div>
        </div>
        <div class="client-overview-card">
          <div class="client-overview-heading"><span class="overview-title-icon cyan">ⓘ</span> Información adicional</div>
          <div class="client-data-row"><span>Empresa del cliente</span><strong>${d.has_business ? (d.business_name || d.business_trade_name || "Registrada") : "No registrada"}</strong></div>
          <div class="client-data-row"><span>Correo</span><strong>${d.email || "—"}</strong></div>
          <div class="client-data-row"><span>Notas</span><strong>${d.notes || "Sin observaciones"}</strong></div>
        </div>
        <div class="client-overview-card">
          <div class="client-overview-heading"><span class="overview-title-icon red">🔔</span> Alertas activas</div>
          <div class="client-mini-alert-list">${overviewAlerts.join("")}</div>
        </div>
      </div>`;
    clientInfoEditButton.style.display = canEditClients() ? "inline-block" : "none";
    clientInfoEditButton.onclick = () => openEditClient(d.id);
    const hasLocation = d.location?.lat != null && d.location?.lng != null;
    clientInfoLocationButton.style.display = hasLocation ? "inline-block" : "none";
    clientInfoLocationButton.onclick = () => openClientLocation(d.location.lat,d.location.lng);

    clientQuickEditButton.style.display = canEditClients() ? "inline-block" : "none";
    clientQuickEditButton.onclick = () => openEditClient(d.id);
    clientQuickLocationButton.style.display = hasLocation ? "inline-block" : "none";
    clientQuickLocationButton.onclick = () => openClientLocation(d.location.lat,d.location.lng);

    clientBusinessContent.innerHTML = d.has_business ? `
      <div class="card">Nombre de la empresa<div class="metric">${d.business_name || "—"}</div></div>
      <div class="card">Nombre comercial<div>${d.business_trade_name || "—"}</div></div>
      <div class="card">Registro fiscal<div>${d.business_document || "—"}</div></div>
      <div class="card">Actividad económica<div>${d.business_activity || "—"}</div></div>
      <div class="card">Cargo del cliente<div>${d.business_role || "—"}</div></div>
      <div class="card">Contacto<div>${[d.business_phone,d.business_email].filter(Boolean).join(" · ") || "—"}</div></div>
      <div class="card">Dirección<div>${[d.business_address,d.business_address_number,d.business_complement,d.business_neighborhood,d.business_city,d.business_state_region,d.business_postal_code].filter(Boolean).join(", ") || "—"}</div></div>
    ` : `<div class="client-empty">Este cliente no tiene empresa registrada.</div>`;

    const businessHasLocation=d.business_location?.lat!=null&&d.business_location?.lng!=null;
    const currentLocationLabel=sutilTranslateText("Localización actual",SUTIL_ACTIVE_LANGUAGE||"es");
    clientLocationsContent.innerHTML=`
      <div class="card client-location-choice-card"><div class="client-location-choice-row"><div class="client-location-choice client-location-choice-active"><span class="client-location-choice-icon">🏠</span><span class="client-location-choice-text"><strong>Residencia</strong><small>${hasLocation?`${d.location.lat}, ${d.location.lng}`:"Sin ubicación registrada"}</small></span></div><button class="client-location-choice client-location-choice-action" type="button" onclick="openClientCurrentLocation(${Number(d.id)})"><span class="client-location-choice-icon">📡</span><span class="client-location-choice-text"><strong>${currentLocationLabel}</strong><small>${sutilTranslateText("Ver seguimiento GPS",SUTIL_ACTIVE_LANGUAGE||"es")}</small></span><span class="client-location-choice-arrow">›</span></button></div><div class="client-location-choice-actions-row"><div>${hasLocation?`<button class="btn client-location-map-btn" onclick="openClientLocation(${d.location.lat},${d.location.lng})">📍 ${sutilTranslateText("Ver en mapa",SUTIL_ACTIVE_LANGUAGE||"es")}</button>`:""}</div><div id="clientCurrentLocationUpdated" class="client-current-location-updated">${sutilTranslateText("Actualizado",SUTIL_ACTIVE_LANGUAGE||"es")}: —</div></div><div id="clientLocationHelp" class="client-location-help"><button class="client-location-help-btn" type="button" onclick="toggleClientLocationHelp()">ⓘ ${sutilTranslateText("¿Cómo funcionan las ubicaciones?",SUTIL_ACTIVE_LANGUAGE||"es")}</button><div class="client-location-help-body"><div>🏠 <strong>${sutilTranslateText("Residencia",SUTIL_ACTIVE_LANGUAGE||"es")}:</strong> ${sutilTranslateText("Dirección registrada al crear o editar el cliente.",SUTIL_ACTIVE_LANGUAGE||"es")}</div><div style="margin-top:6px">📡 <strong>${currentLocationLabel}:</strong> ${sutilTranslateText("Ubicación GPS enviada por la app del cliente. Requiere la app instalada y permiso de ubicación.",SUTIL_ACTIVE_LANGUAGE||"es")}</div></div></div></div>
      <div class="card"><h3>🏢 Empresa</h3><div>${businessHasLocation?`${d.business_location.lat}, ${d.business_location.lng}`:"Sin ubicación empresarial registrada"}</div>${businessHasLocation?`<button class="btn" style="margin-top:12px" onclick="openClientLocation(${d.business_location.lat},${d.business_location.lng})">Ver en mapa</button>`:""}</div>`;
    loadClientCurrentLocationUpdated(d.id).catch(()=>{});

    sutilReleaseClientDocumentPreviewUrls();
    clientDocumentsContent.innerHTML=`<div class="client-empty">${sutilClientDocumentText("open_to_load")}</div>`;
    renderClientAppAccess(d);
    selectedClientChatId=d.id;
    const chatTabButton=document.querySelector('[data-client-tab="chat"]');
    if(chatTabButton)chatTabButton.style.display=canViewClientChat()?"":"none";
    clientChatContent.innerHTML=clientChatShellHtml(d);

    const s=d.summary;
    clientHistoryFullContent.innerHTML=`
      <div class="card">Créditos registrados<div class="metric">${s.loans_count}</div></div>
      <div class="card">Créditos activos<div class="metric">${s.active_loans_count}</div></div>
      <div class="card">Créditos pagados<div class="metric">${s.paid_loans_count}</div></div>
      <div class="card">Total recibido<div class="metric">${money(s.total_received)}</div></div>
      <div class="card">Cuotas pagadas<div class="metric">${s.installments_paid}</div></div>
      <div class="card">Cuotas atrasadas<div class="metric">${s.installments_overdue}</div></div>`;

    const alerts=[];
    if(d.reported)alerts.push(`<div class="card" style="border-left:5px solid #b42318"><strong>⚠ Cliente reportado</strong><div>${d.report_reason || "Sin motivo registrado"}</div></div>`);
    if(d.is_overdue)alerts.push(`<div class="card" style="border-left:5px solid #b42318"><strong>⚠ Cliente moroso</strong><div>Saldo: ${money(s.remaining_balance)} · Cuotas atrasadas: ${s.installments_overdue}</div></div>`);
    if(!d.active)alerts.push(`<div class="card" style="border-left:5px solid #a66c00"><strong>Cliente inactivo</strong></div>`);
    clientAlertsContent.innerHTML=alerts.length?alerts.join(""):`<div class="client-empty">No hay alertas activas.</div>`;

    let riskLabel="Bajo",riskClass="low";
    if(d.reported||Number(s.installments_overdue)>=3){riskLabel="Alto";riskClass="high";}
    else if(d.is_overdue||Number(s.installments_overdue)>0){riskLabel="Medio";riskClass="medium";}
    clientRiskContent.innerHTML=`<div class="client-risk ${riskClass}">Riesgo interno: ${riskLabel}</div><div class="card"><div>Saldo pendiente: <strong>${money(s.remaining_balance)}</strong></div><div>Cuotas atrasadas: <strong>${s.installments_overdue}</strong></div><div>Créditos pagados: <strong>${s.paid_loans_count}</strong></div><div class="muted" style="margin-top:10px">Evaluación interna basada en los datos registrados en Sutil.</div></div>`;

    loanDetailCard.style.display = "none";
    showClientAccountPane("history");

    clientStatementLoan.innerHTML =
      '<option value="">Todos los créditos</option>' +
      (d.loans || []).map(loan =>
        `<option value="${loan.id}">Crédito #${loan.id} · ${formatDateEs(loan.start_date)}</option>`
      ).join("");
    clientStatementFrom.value = "";
    clientStatementTo.value = "";
    const summaryOverdueCount = Number(d.summary?.installments_overdue || 0);
    const summaryIsOverdue = Boolean(d.is_overdue || summaryOverdueCount > 0);
    const summaryLang = String(
      typeof SUTIL_ACTIVE_LANGUAGE !== "undefined"
        ? SUTIL_ACTIVE_LANGUAGE
        : (document.documentElement.lang || "es")
    ).toLowerCase().slice(0,2);
    const summaryStatusText = summaryIsOverdue
      ? (summaryLang === "pt" ? "ATRASADO" : summaryLang === "en" ? "OVERDUE" : "ATRASADO")
      : (d.status || (summaryLang === "pt" ? "EM DIA" : summaryLang === "en" ? "CURRENT" : "AL DÍA"));
    clientSummary.innerHTML = `
      <div class="card client-summary-name">Cliente<div class="metric">${d.name}</div></div>
      <div class="card client-summary-code">Código<div class="metric">${d.client_code || "—"}</div></div>
      <div class="card client-summary-status">Estado<div class="metric ${summaryIsOverdue ? "status-overdue" : "status-current"}">${summaryStatusText}</div></div>
      <div class="card client-summary-route">Ruta<div class="metric">${d.route_name || "Sin ruta"}</div></div>

      <div class="card">Créditos realizados<div class="metric">${d.summary.loans_count}</div></div>
      <div class="card">Créditos activos<div class="metric">${d.summary.active_loans_count}</div></div>
      <div class="card">Créditos pagados<div class="metric">${d.summary.paid_loans_count}</div></div>
      <div class="card client-summary-balance">Saldo pendiente<div class="metric">${money(d.summary.remaining_balance)}</div></div>

      <div class="card">Capital total prestado<div class="metric">${money(d.summary.total_principal)}</div></div>
      <div class="card">Total contratado<div class="metric">${money(d.summary.total_contract)}</div></div>
      <div class="card">Total recibido<div class="metric">${money(d.summary.total_received)}</div></div>
      <div class="card">Interés generado<div class="metric">${money(d.summary.total_interest_generated)}</div></div>
      <div class="card">Ganancia estimada<div class="metric">${money(d.summary.estimated_profit)}</div></div>
      <div class="card">Interés cobrado<div class="metric">${money(d.summary.interest_received)}</div></div>

      <div class="card client-summary-installment">Cuotas pagadas<div class="metric status-current">${d.summary.installments_paid}</div></div>
      <div class="card client-summary-installment">Cuotas pendientes<div class="metric">${d.summary.installments_pending}</div></div>
      <div class="card client-summary-installment">Cuotas atrasadas<div class="metric ${d.summary.installments_overdue > 0 ? "status-overdue" : "status-current"}">${d.summary.installments_overdue}</div></div>`;
    const activeLoan = d.loans.find(l => l.status === "active");
    reportLossButton.style.display =
      activeLoan && !d.reported ? "inline-block" : "none";

    reportLossButton.onclick = async () => {
      const reason = await sutilPrompt("Motivo del reporte / pérdida:");
      if (!reason || reason.trim().length < 3) return;

      const ok = await sutilConfirm(
        "Se cancelará el interés pendiente y quedará solo el capital por recuperar. ¿Continuar?"
      );
      if (!ok) return;

      try {
        const result = await api(
          `/api/admin/clients/${d.id}/report-loss`,
          {
            method:"POST",
            headers:{"Content-Type":"application/json"},
            body:JSON.stringify({reason:reason.trim()})
          }
        );
        alert(
          `${result.message}\nCapital por recuperar: ${money(result.capital_loss_balance)}\nInterés cancelado: ${money(result.interest_cancelled)}`
        );
        await refreshClients();
        await loadClientDetail(d.id);
      } catch(e) {
        alert(e.message);
      }
    };

    selectedClientLoanRows = d.loans || [];
    if(document.getElementById("loanHistoryStatusFilter"))loanHistoryStatusFilter.value = "";
    if(document.getElementById("loanHistorySearch"))loanHistorySearch.value = "";
    renderClientLoanHistory();
  } catch(e) { alert(e.message); }
}


/* SUTIL FIX 12.15.28 · Documentos plegables en Nuevo/Editar cliente */
(function(){
  const style=document.createElement("style");
  style.textContent=`.sutil-client-doc-accordion{margin:14px 0;border:1px solid var(--form-border);border-radius:16px;overflow:hidden;background:var(--form-bg)}
.sutil-client-doc-accordion-head{width:100%;border:0;background:transparent;color:var(--form-text);display:flex;justify-content:space-between;align-items:center;gap:12px;text-align:left;padding:14px 16px;cursor:pointer}
.sutil-client-doc-accordion-head span:first-child{display:flex;flex-direction:column;gap:3px;min-width:0}
.sutil-client-doc-accordion-head strong{font-size:16px}
.sutil-client-doc-accordion-head small{color:var(--muted);font-size:12px;font-weight:600}
.sutil-client-doc-accordion-chevron{font-size:22px;font-weight:800;transition:transform .18s ease}
.sutil-client-doc-accordion.open .sutil-client-doc-accordion-chevron{transform:rotate(180deg)}
.sutil-client-doc-accordion-body{padding:0 12px 12px}
.sutil-client-doc-accordion-body .sutil-client-docs-head{display:none}
@media(max-width:650px){.sutil-client-doc-accordion{margin:12px 0}.sutil-client-doc-accordion-head{padding:13px 14px}.sutil-client-doc-accordion-body{padding:0 8px 10px}}`;
  document.head.appendChild(style);
})();

/* ============================================================
   SUTIL FIX 12.15.27 · DOCUMENTOS DE CLIENTES
   - 3 ranuras opcionales.
   - Los documentos de un cliente se consultan solo al abrir esta pestaña.
   - Archivos protegidos: la vista previa se obtiene con token y Blob URL.
   - OCR reservado para fase futura; nunca reemplaza datos automáticamente.
   ============================================================ */
const SUTIL_CLIENT_DOCUMENT_CATEGORIES=["personal_document","residence_proof","other"];
let sutilClientDocuments=[];
let sutilClientDocumentPreviewUrls=new Map();
let sutilNewClientDocumentFiles={};
let sutilNewClientDocumentPreviewUrls=new Map();

function sutilClientDocumentText(key){
  const lang=String(typeof SUTIL_ACTIVE_LANGUAGE!=="undefined"?SUTIL_ACTIVE_LANGUAGE:(document.documentElement.lang||"es")).toLowerCase().slice(0,2);
  const t={
    documents:{es:"Documentos / fotos",pt:"Documentos / fotos",en:"Documents / photos"},
    optional:{es:"Opcional. Puedes registrar al cliente sin adjuntar archivos.",pt:"Opcional. Você pode cadastrar o cliente sem anexar arquivos.",en:"Optional. You can register the client without attaching files."},
    personal_document:{es:"Documento personal",pt:"Documento pessoal",en:"Personal document"},
    residence_proof:{es:"Comprobante de residencia",pt:"Comprovante de residência",en:"Proof of residence"},
    other:{es:"Otro",pt:"Outro",en:"Other"},
    take_photo:{es:"📷 Tomar foto",pt:"📷 Tirar foto",en:"📷 Take photo"},
    attach:{es:"📎 Adjuntar archivo",pt:"📎 Anexar arquivo",en:"📎 Attach file"},
    attach_image:{es:"🖼️ Adjuntar imagen",pt:"🖼️ Anexar imagem",en:"🖼️ Attach image"},
    attach_pdf:{es:"📄 Adjuntar PDF",pt:"📄 Anexar PDF",en:"📄 Attach PDF"},
    replace_photo:{es:"📷 Reemplazar foto",pt:"📷 Substituir foto",en:"📷 Replace photo"},
    replace_file:{es:"📎 Reemplazar archivo",pt:"📎 Substituir arquivo",en:"📎 Replace file"},
    replace_image:{es:"🖼️ Reemplazar imagen",pt:"🖼️ Substituir imagem",en:"🖼️ Replace image"},
    replace_pdf:{es:"📄 Reemplazar PDF",pt:"📄 Substituir PDF",en:"📄 Replace PDF"},
    delete:{es:"🗑 Eliminar",pt:"🗑 Excluir",en:"🗑 Delete"},
    open:{es:"Abrir documento",pt:"Abrir documento",en:"Open document"},
    no_file:{es:"Sin archivo",pt:"Sem arquivo",en:"No file"},
    loading:{es:"Cargando documentos...",pt:"Carregando documentos...",en:"Loading documents..."},
    open_to_load:{es:"Abre Documentos / fotos para consultar los archivos de este cliente.",pt:"Abra Documentos / fotos para consultar os arquivos deste cliente.",en:"Open Documents / photos to view this client's files."},
    uploading:{es:"Guardando documento...",pt:"Salvando documento...",en:"Saving document..."},
    saved:{es:"Documento guardado.",pt:"Documento salvo.",en:"Document saved."},
    load_error:{es:"No fue posible cargar los documentos.",pt:"Não foi possível carregar os documentos.",en:"Documents could not be loaded."},
    upload_error:{es:"No fue posible guardar el documento.",pt:"Não foi possível salvar o documento.",en:"The document could not be saved."},
    format:{es:"JPG, PNG, WEBP o PDF · máximo 8 MB",pt:"JPG, PNG, WEBP ou PDF · máximo 8 MB",en:"JPG, PNG, WEBP or PDF · max 8 MB"},
    future_ocr:{es:"Preparado para lectura automática futura. Los datos detectados deberán compararse antes de reemplazar información ya guardada.",pt:"Preparado para leitura automática futura. Os dados detectados deverão ser comparados antes de substituir informações já salvas.",en:"Prepared for future automatic reading. Detected data must be reviewed before replacing saved information."},
    confirm_delete:{es:"¿Eliminar este documento del cliente?",pt:"Excluir este documento do cliente?",en:"Delete this client document?"},
    file_too_large:{es:"El archivo supera el límite de 8 MB.",pt:"O arquivo ultrapassa o limite de 8 MB.",en:"The file exceeds the 8 MB limit."},
    format_not_allowed:{es:"Formato no permitido. Usa JPG, PNG, WEBP o PDF.",pt:"Formato não permitido. Use JPG, PNG, WEBP ou PDF.",en:"File type not allowed. Use JPG, PNG, WEBP or PDF."},
    preview_error:{es:"Vista previa no disponible",pt:"Pré-visualização indisponível",en:"Preview unavailable"}
  };
  return t[key]?.[lang]||t[key]?.es||key;
}

function sutilClientDocumentLabel(category){return sutilClientDocumentText(category);}
function sutilClientDocumentIcon(category){return category==="personal_document"?"🪪":category==="residence_proof"?"🏠":"📄";}
function sutilClientDocumentEsc(value){return legacyEscapeHtml(String(value??""));}
function sutilClientDocumentHumanSize(value){
  const n=Number(value||0);if(!n)return "0 KB";if(n<1024*1024)return `${Math.max(1,Math.round(n/1024))} KB`;return `${(n/1024/1024).toFixed(1)} MB`;
}
function sutilClientDocumentAllowed(file){
  if(!file)return false;
  if(file.size>8*1024*1024)throw new Error(sutilClientDocumentText("file_too_large"));
  if(!["image/jpeg","image/png","image/webp","application/pdf"].includes(String(file.type||"").toLowerCase()))throw new Error(sutilClientDocumentText("format_not_allowed"));
  return true;
}

function sutilReleaseClientDocumentPreviewUrls(){
  sutilClientDocumentPreviewUrls.forEach(url=>{try{URL.revokeObjectURL(url)}catch(_){}});
  sutilClientDocumentPreviewUrls.clear();
}
function sutilReleaseNewClientDocumentPreviewUrls(){
  sutilNewClientDocumentPreviewUrls.forEach(url=>{try{URL.revokeObjectURL(url)}catch(_){}});
  sutilNewClientDocumentPreviewUrls.clear();
}

function sutilSetClientDocumentsAccordion(rootId,bodyId,open){
  const root=document.getElementById(rootId),body=document.getElementById(bodyId);if(!root||!body)return;
  root.classList.toggle("open",Boolean(open));body.style.display=open?"block":"none";
  const head=root.querySelector(".sutil-client-doc-accordion-head");if(head)head.setAttribute("aria-expanded",open?"true":"false");
}
function toggleNewClientDocumentsAccordion(){
  const root=document.getElementById("newClientDocumentsAccordion");const open=!root?.classList.contains("open");
  sutilSetClientDocumentsAccordion("newClientDocumentsAccordion","newClientDocumentsAccordionBody",open);
  if(open)renderNewClientDocuments();
}

let sutilEditClientDocuments=[];
let sutilEditClientDocumentPreviewUrls=new Map();
function sutilReleaseEditClientDocumentPreviewUrls(){sutilEditClientDocumentPreviewUrls.forEach(url=>{try{URL.revokeObjectURL(url)}catch(_){}});sutilEditClientDocumentPreviewUrls.clear();}
function toggleEditClientDocumentsAccordion(){
  const root=document.getElementById("editClientDocumentsAccordion");const open=!root?.classList.contains("open");
  sutilSetClientDocumentsAccordion("editClientDocumentsAccordion","editClientDocumentsAccordionBody",open);
  if(open&&editingClientId)loadEditClientDocuments(editingClientId);
}
async function loadEditClientDocuments(clientId){
  const root=document.getElementById("editClientDocumentsSection");if(!root)return;
  sutilReleaseEditClientDocumentPreviewUrls();root.innerHTML=`<div class="client-empty">${sutilClientDocumentText("loading")}</div>`;
  try{const data=await api(`/api/admin/clients/${Number(clientId)}/documents`);if(Number(editingClientId)!==Number(clientId))return;sutilEditClientDocuments=Array.isArray(data?.documents)?data.documents:[];renderEditClientDocuments(clientId);}
  catch(error){root.innerHTML=`<div class="client-empty">${sutilClientDocumentText("load_error")}<br>${sutilClientDocumentEsc(error.message)}</div>`;}
}
function renderEditClientDocuments(clientId){
  const root=document.getElementById("editClientDocumentsSection");if(!root)return;const byCategory=new Map((sutilEditClientDocuments||[]).map(doc=>[doc.category,doc]));
  root.innerHTML=`<div class="sutil-client-doc-grid">${SUTIL_CLIENT_DOCUMENT_CATEGORIES.map(category=>{const doc=byCategory.get(category)||null;return `<div class="sutil-client-doc-card"><div class="sutil-client-doc-title">${sutilClientDocumentIcon(category)} ${sutilClientDocumentLabel(category)}</div><div id="editClientDocPreview_${category}" class="sutil-client-doc-preview"><div class="sutil-client-doc-empty">${doc?sutilClientDocumentText("loading"):sutilClientDocumentText("no_file")}</div></div><div class="sutil-client-doc-meta">${doc?`${sutilClientDocumentEsc(doc.original_name)} · ${sutilClientDocumentHumanSize(doc.size_bytes)}`:sutilClientDocumentText("format")}</div><input id="editClientDocCamera_${category}" class="sutil-client-doc-hidden" type="file" accept="image/jpeg,image/png,image/webp" capture="environment" onchange="sutilEditClientDocumentSelected(${Number(clientId)},'${category}',this)"><input id="editClientDocImage_${category}" class="sutil-client-doc-hidden" type="file" accept="image/jpeg,image/png,image/webp" onchange="sutilEditClientDocumentSelected(${Number(clientId)},'${category}',this)"><input id="editClientDocPdf_${category}" class="sutil-client-doc-hidden" type="file" accept="application/pdf,.pdf" onchange="sutilEditClientDocumentSelected(${Number(clientId)},'${category}',this)"><div class="sutil-client-doc-actions">${doc?`<button class="btn secondary" type="button" onclick="sutilOpenEditClientDocument(${Number(doc.id)})">↗ ${sutilClientDocumentText("open")}</button>`:""}<button class="btn secondary" type="button" onclick="document.getElementById('editClientDocCamera_${category}').click()">${doc?sutilClientDocumentText("replace_photo"):sutilClientDocumentText("take_photo")}</button><button class="btn secondary" type="button" onclick="document.getElementById('editClientDocImage_${category}').click()">${doc?sutilClientDocumentText("replace_image"):sutilClientDocumentText("attach_image")}</button><button class="btn secondary" type="button" onclick="document.getElementById('editClientDocPdf_${category}').click()">${doc?sutilClientDocumentText("replace_pdf"):sutilClientDocumentText("attach_pdf")}</button>${doc?`<button class="btn secondary" type="button" onclick="sutilDeleteEditClientDocument(${Number(clientId)},${Number(doc.id)})">${sutilClientDocumentText("delete")}</button>`:""}</div><div id="editClientDocStatus_${category}" class="sutil-client-doc-status"></div></div>`;}).join("")}</div><div class="sutil-client-doc-future">🔎 ${sutilClientDocumentText("future_ocr")}</div>`;
  (sutilEditClientDocuments||[]).forEach(doc=>sutilHydrateEditClientDocumentPreview(doc));
}
async function sutilHydrateEditClientDocumentPreview(doc){const box=document.getElementById(`editClientDocPreview_${doc.category}`);if(!box)return;try{const blob=await sutilClientDocumentBlob(doc);if(!document.getElementById(`editClientDocPreview_${doc.category}`))return;const old=sutilEditClientDocumentPreviewUrls.get(doc.id);if(old){try{URL.revokeObjectURL(old)}catch(_){}}const url=URL.createObjectURL(blob);sutilEditClientDocumentPreviewUrls.set(doc.id,url);box.innerHTML=String(doc.mime_type)==="application/pdf"?`<iframe src="${url}#page=1&toolbar=0&navpanes=0" title="PDF"></iframe>`:`<img src="${url}" alt="${sutilClientDocumentEsc(doc.original_name)}">`;}catch(_){box.innerHTML=`<div class="sutil-client-doc-empty">${sutilClientDocumentText("preview_error")}</div>`;}}
async function sutilOpenEditClientDocument(documentId){const doc=(sutilEditClientDocuments||[]).find(row=>Number(row.id)===Number(documentId));if(!doc)return;try{let url=sutilEditClientDocumentPreviewUrls.get(doc.id);if(!url){const blob=await sutilClientDocumentBlob(doc);url=URL.createObjectURL(blob);sutilEditClientDocumentPreviewUrls.set(doc.id,url);}window.open(url,"_blank","noopener,noreferrer");}catch(error){alert(error.message);}}
async function sutilEditClientDocumentSelected(clientId,category,input){const status=document.getElementById(`editClientDocStatus_${category}`);try{const file=input?.files?.[0];if(!file)return;sutilClientDocumentAllowed(file);if(status)status.textContent=sutilClientDocumentText("uploading");await sutilUploadClientDocument(clientId,category,file);await loadEditClientDocuments(clientId);}catch(error){if(status){status.className="sutil-client-doc-status error";status.textContent=error.message||sutilClientDocumentText("upload_error");}else alert(error.message);}finally{if(input)input.value="";}}
async function sutilDeleteEditClientDocument(clientId,documentId){if(!await sutilConfirm(sutilClientDocumentText("confirm_delete")))return;try{await api(`/api/admin/clients/${Number(clientId)}/documents/${Number(documentId)}`,{method:"DELETE"});await loadEditClientDocuments(clientId);}catch(error){alert(error.message);}}

function renderNewClientDocuments(){
  const root=document.getElementById("newClientDocumentsSection");if(!root)return;
  root.innerHTML=`<div class="sutil-client-docs-head"><div><h4>📁 ${sutilClientDocumentText("documents")}</h4><small>${sutilClientDocumentText("optional")}</small></div></div>
    <div class="sutil-client-doc-grid">${SUTIL_CLIENT_DOCUMENT_CATEGORIES.map(category=>{
      const file=sutilNewClientDocumentFiles[category]||null;
      return `<div class="sutil-client-doc-card">
        <div class="sutil-client-doc-title">${sutilClientDocumentIcon(category)} ${sutilClientDocumentLabel(category)}</div>
        <div id="newClientDocPreview_${category}" class="sutil-client-doc-preview"><div class="sutil-client-doc-empty">${sutilClientDocumentText("no_file")}<br><small>${sutilClientDocumentText("format")}</small></div></div>
        <div class="sutil-client-doc-meta">${file?sutilClientDocumentEsc(file.name):sutilClientDocumentText("format")}</div>
        <input id="newClientDocCamera_${category}" class="sutil-client-doc-hidden" type="file" accept="image/jpeg,image/png,image/webp" capture="environment" onchange="sutilNewClientDocumentSelected('${category}',this)">
        <input id="newClientDocImage_${category}" class="sutil-client-doc-hidden" type="file" accept="image/jpeg,image/png,image/webp" onchange="sutilNewClientDocumentSelected('${category}',this)">
        <input id="newClientDocPdf_${category}" class="sutil-client-doc-hidden" type="file" accept="application/pdf,.pdf" onchange="sutilNewClientDocumentSelected('${category}',this)">
        <div class="sutil-client-doc-actions">
          <button class="btn secondary" type="button" onclick="document.getElementById('newClientDocCamera_${category}').click()">${sutilClientDocumentText("take_photo")}</button>
          <button class="btn secondary" type="button" onclick="document.getElementById('newClientDocImage_${category}').click()">${sutilClientDocumentText("attach_image")}</button>
          <button class="btn secondary" type="button" onclick="document.getElementById('newClientDocPdf_${category}').click()">${sutilClientDocumentText("attach_pdf")}</button>
          ${file?`<button class="btn secondary" type="button" onclick="sutilRemoveNewClientDocument('${category}')">${sutilClientDocumentText("delete")}</button>`:""}
        </div>
      </div>`;
    }).join("")}</div><div class="sutil-client-doc-future">🔎 ${sutilClientDocumentText("future_ocr")}</div>`;
  SUTIL_CLIENT_DOCUMENT_CATEGORIES.forEach(category=>sutilRenderLocalClientDocumentPreview(category));
}

function sutilRenderLocalClientDocumentPreview(category){
  const box=document.getElementById(`newClientDocPreview_${category}`);const file=sutilNewClientDocumentFiles[category];if(!box||!file)return;
  const old=sutilNewClientDocumentPreviewUrls.get(category);if(old){try{URL.revokeObjectURL(old)}catch(_){}}
  const url=URL.createObjectURL(file);sutilNewClientDocumentPreviewUrls.set(category,url);
  if(file.type==="application/pdf")box.innerHTML=`<iframe src="${url}#page=1&toolbar=0&navpanes=0" title="PDF"></iframe>`;
  else box.innerHTML=`<img src="${url}" alt="${sutilClientDocumentEsc(sutilClientDocumentLabel(category))}">`;
}

function sutilNewClientDocumentSelected(category,input){
  try{const file=input?.files?.[0];if(!file)return;sutilClientDocumentAllowed(file);sutilNewClientDocumentFiles[category]=file;renderNewClientDocuments();}
  catch(error){alert(error.message);if(input)input.value="";}
}
function sutilRemoveNewClientDocument(category){
  delete sutilNewClientDocumentFiles[category];const url=sutilNewClientDocumentPreviewUrls.get(category);if(url){try{URL.revokeObjectURL(url)}catch(_){}}sutilNewClientDocumentPreviewUrls.delete(category);renderNewClientDocuments();
}

async function sutilUploadClientDocument(clientId,category,file){
  sutilClientDocumentAllowed(file);
  const form=new FormData();form.append("category",category);form.append("file",file);
  return api(`/api/admin/clients/${Number(clientId)}/documents`,{method:"POST",body:form});
}

async function sutilClientDocumentBlob(doc){
  const response=await fetch(doc.file_endpoint,{headers:token?{Authorization:"Bearer "+token}:{}});
  if(!response.ok){let message="";try{message=(await response.json())?.detail||""}catch(_){}throw new Error(message||sutilClientDocumentText("preview_error"));}
  return response.blob();
}

function renderClientDocuments(clientId){
  if(!clientDocumentsContent)return;
  const byCategory=new Map((sutilClientDocuments||[]).map(doc=>[doc.category,doc]));
  const canWrite=canEditClients();
  clientDocumentsContent.innerHTML=`<div class="sutil-client-docs-head"><div><h4>📁 ${sutilClientDocumentText("documents")}</h4><small>${sutilClientDocumentText("optional")}</small></div></div>
    <div class="sutil-client-doc-grid">${SUTIL_CLIENT_DOCUMENT_CATEGORIES.map(category=>{
      const doc=byCategory.get(category)||null;
      return `<div class="sutil-client-doc-card">
        <div class="sutil-client-doc-title">${sutilClientDocumentIcon(category)} ${sutilClientDocumentLabel(category)}</div>
        <div id="clientDocPreview_${category}" class="sutil-client-doc-preview"><div class="sutil-client-doc-empty">${doc?sutilClientDocumentText("loading"):sutilClientDocumentText("no_file")}</div></div>
        <div class="sutil-client-doc-meta">${doc?`${sutilClientDocumentEsc(doc.original_name)} · ${sutilClientDocumentHumanSize(doc.size_bytes)}`:sutilClientDocumentText("format")}</div>
        ${canWrite?`<input id="clientDocCamera_${category}" class="sutil-client-doc-hidden" type="file" accept="image/jpeg,image/png,image/webp" capture="environment" onchange="sutilClientDocumentSelected(${Number(clientId)},'${category}',this)">
        <input id="clientDocImage_${category}" class="sutil-client-doc-hidden" type="file" accept="image/jpeg,image/png,image/webp" onchange="sutilClientDocumentSelected(${Number(clientId)},'${category}',this)">
        <input id="clientDocPdf_${category}" class="sutil-client-doc-hidden" type="file" accept="application/pdf,.pdf" onchange="sutilClientDocumentSelected(${Number(clientId)},'${category}',this)">`:""}
        <div class="sutil-client-doc-actions">
          ${doc?`<button class="btn secondary" type="button" onclick="sutilOpenClientDocument(${Number(doc.id)})">↗ ${sutilClientDocumentText("open")}</button>`:""}
          ${canWrite?`<button class="btn secondary" type="button" onclick="document.getElementById('clientDocCamera_${category}').click()">${doc?sutilClientDocumentText("replace_photo"):sutilClientDocumentText("take_photo")}</button>
          <button class="btn secondary" type="button" onclick="document.getElementById('clientDocImage_${category}').click()">${doc?sutilClientDocumentText("replace_image"):sutilClientDocumentText("attach_image")}</button>
          <button class="btn secondary" type="button" onclick="document.getElementById('clientDocPdf_${category}').click()">${doc?sutilClientDocumentText("replace_pdf"):sutilClientDocumentText("attach_pdf")}</button>
          ${doc?`<button class="btn secondary" type="button" onclick="sutilDeleteClientDocument(${Number(clientId)},${Number(doc.id)})">${sutilClientDocumentText("delete")}</button>`:""}`:""}
        </div>
        <div id="clientDocStatus_${category}" class="sutil-client-doc-status"></div>
      </div>`;
    }).join("")}</div><div class="sutil-client-doc-future">🔎 ${sutilClientDocumentText("future_ocr")}</div>`;
  (sutilClientDocuments||[]).forEach(doc=>sutilHydrateClientDocumentPreview(doc));
}

async function loadClientDocuments(clientId){
  if(!clientDocumentsContent)return;
  sutilReleaseClientDocumentPreviewUrls();
  clientDocumentsContent.innerHTML=`<div class="client-empty">${sutilClientDocumentText("loading")}</div>`;
  try{
    const data=await api(`/api/admin/clients/${Number(clientId)}/documents`);
    if(Number(selectedClientDetailData?.id)!==Number(clientId))return;
    sutilClientDocuments=Array.isArray(data?.documents)?data.documents:[];
    renderClientDocuments(clientId);
  }catch(error){clientDocumentsContent.innerHTML=`<div class="client-empty">${sutilClientDocumentText("load_error")}<br>${sutilClientDocumentEsc(error.message)}</div>`;}
}

async function sutilHydrateClientDocumentPreview(doc){
  const box=document.getElementById(`clientDocPreview_${doc.category}`);if(!box)return;
  try{
    const blob=await sutilClientDocumentBlob(doc);
    if(!document.getElementById(`clientDocPreview_${doc.category}`))return;
    const old=sutilClientDocumentPreviewUrls.get(doc.id);if(old){try{URL.revokeObjectURL(old)}catch(_){}}
    const url=URL.createObjectURL(blob);sutilClientDocumentPreviewUrls.set(doc.id,url);
    box.innerHTML=String(doc.mime_type)==="application/pdf"
      ? `<iframe src="${url}#page=1&toolbar=0&navpanes=0" title="PDF"></iframe>`
      : `<img src="${url}" alt="${sutilClientDocumentEsc(doc.original_name)}">`;
  }catch(_){box.innerHTML=`<div class="sutil-client-doc-empty">${sutilClientDocumentText("preview_error")}</div>`;}
}

async function sutilOpenClientDocument(documentId){
  const doc=(sutilClientDocuments||[]).find(row=>Number(row.id)===Number(documentId));if(!doc)return;
  try{
    let url=sutilClientDocumentPreviewUrls.get(doc.id);
    if(!url){const blob=await sutilClientDocumentBlob(doc);url=URL.createObjectURL(blob);sutilClientDocumentPreviewUrls.set(doc.id,url);}
    window.open(url,"_blank","noopener,noreferrer");
  }catch(error){alert(error.message);}
}

async function sutilClientDocumentSelected(clientId,category,input){
  const status=document.getElementById(`clientDocStatus_${category}`);
  try{
    const file=input?.files?.[0];if(!file)return;sutilClientDocumentAllowed(file);
    if(status){status.className="sutil-client-doc-status";status.textContent=sutilClientDocumentText("uploading");}
    await sutilUploadClientDocument(clientId,category,file);
    if(status){status.className="sutil-client-doc-status ok";status.textContent=sutilClientDocumentText("saved");}
    await loadClientDocuments(clientId);
  }catch(error){if(status){status.className="sutil-client-doc-status error";status.textContent=error.message||sutilClientDocumentText("upload_error");}else alert(error.message);}
  finally{if(input)input.value="";}
}

async function sutilDeleteClientDocument(clientId,documentId){
  if(!await sutilConfirm(sutilClientDocumentText("confirm_delete")))return;
  try{await api(`/api/admin/clients/${Number(clientId)}/documents/${Number(documentId)}`,{method:"DELETE"});await loadClientDocuments(clientId);}catch(error){alert(error.message);}
}

setTimeout(renderNewClientDocuments,0);


function closeNewClientCustomSelects(exceptId="") {
  document.querySelectorAll("#newClientSection .sutil-new-client-custom-select.open").forEach(box=>{
    if(!exceptId || box.dataset.clientSelect!==exceptId) box.classList.remove("open");
  });
}

function syncNewClientCustomSelect(selectId) {
  const select=document.getElementById(selectId);
  const trigger=document.getElementById(selectId+"Trigger");
  const menu=document.getElementById(selectId+"Menu");
  if(!select||!trigger||!menu)return;
  const options=Array.from(select.options||[]);
  const selected=options.find(o=>o.selected)||options[0];
  trigger.textContent=selected?.textContent||"";
  menu.innerHTML=options.map(o=>{
    const active=String(o.value)===String(select.value);
    return `<button type="button" class="sutil-new-client-select-option${active?" selected":""}" data-value="${legacyEscapeHtml(String(o.value))}">${legacyEscapeHtml(o.textContent||"")}</button>`;
  }).join("");
  menu.querySelectorAll(".sutil-new-client-select-option").forEach(btn=>{
    btn.addEventListener("click",()=>{
      select.value=btn.dataset.value||"";
      select.dispatchEvent(new Event("change",{bubbles:true}));
      syncNewClientCustomSelect(selectId);
      closeNewClientCustomSelects();
    });
  });
}

function closeNewClientSelectPortal(){
  document.getElementById("sutilClientSelectBackdrop")?.remove();
}

function toggleNewClientCustomSelect(selectId,event) {
  if(event){event.preventDefault();event.stopPropagation();}
  const select=document.getElementById(selectId);
  if(!select)return;
  closeNewClientCustomSelects();
  closeNewClientSelectPortal();
  syncNewClientCustomSelect(selectId);
  const label=document.querySelector(`#newClientSection .sutil-new-client-custom-select[data-client-select="${selectId}"]`)?.closest(".sutil-new-client-select-field")?.querySelector(".sutil-new-client-select-label")?.textContent?.trim() || (selectId==="clientRoute"?"Ruta":"Funcionario responsable");
  const backdrop=document.createElement("div");
  backdrop.id="sutilClientSelectBackdrop";
  backdrop.className="sutil-client-select-backdrop";
  backdrop.innerHTML=`<div class="sutil-client-select-sheet" role="dialog" aria-modal="true" aria-label="${legacyEscapeHtml(label)}"><div class="sutil-client-select-sheet-head"><span>${legacyEscapeHtml(label)}</span><button type="button" class="sutil-client-select-sheet-close" aria-label="Cerrar">×</button></div><div class="sutil-client-select-sheet-list"></div></div>`;
  const list=backdrop.querySelector(".sutil-client-select-sheet-list");
  Array.from(select.options||[]).forEach(o=>{
    const btn=document.createElement("button");
    btn.type="button";
    btn.className="sutil-client-select-sheet-option"+(String(o.value)===String(select.value)?" selected":"");
    btn.textContent=o.textContent||"";
    btn.addEventListener("click",()=>{
      select.value=String(o.value);
      select.dispatchEvent(new Event("change",{bubbles:true}));
      syncNewClientCustomSelect(selectId);
      closeNewClientSelectPortal();
    });
    list.appendChild(btn);
  });
  backdrop.addEventListener("click",e=>{if(e.target===backdrop)closeNewClientSelectPortal();});
  backdrop.querySelector(".sutil-client-select-sheet-close")?.addEventListener("click",closeNewClientSelectPortal);
  document.body.appendChild(backdrop);
}

document.addEventListener("keydown",event=>{if(event.key==="Escape")closeNewClientSelectPortal();});

async function loadClientFormOptions() {
  // Estos endpoints son opcionales por ahora. Si todavía no existen,
  // el formulario continúa funcionando con "Sin ruta/funcionario".
  try {
    const routes = await api("/api/admin/routes");
    window.__clientRoutes=routes;
    clientRoute.innerHTML = `<option value="">Sin ruta asignada</option>` +
      routes.map(r => `<option value="${r.id}">${r.name || ("Ruta " + r.id)}</option>`).join("");
    clientRoute.onchange=()=>{updateClientCountryLabels();syncNewClientCustomSelect("clientRoute");};
    updateClientCountryLabels();
    syncNewClientCustomSelect("clientRoute");
  } catch (_) {}
  try {
    const staff = await api("/api/admin/staff");
    clientStaff.innerHTML = `<option value="">Sin funcionario asignado</option>` +
      staff.map(s => `<option value="${s.id}">${s.name || s.full_name || ("Funcionario " + s.id)}</option>`).join("");
    clientStaff.onchange=()=>syncNewClientCustomSelect("clientStaff");
    syncNewClientCustomSelect("clientStaff");
  } catch (_) {}
}


function routeCountryForClient(){
 const route=window.__clientRoutes?.find(r=>String(r.id)===String(clientRoute.value));
 return route?.country_code||"BR";
}
function updateClientCountryLabels(){
 const code=routeCountryForClient();
 const names={BR:["CEP","Estado / UF","CNPJ"],CO:["Código postal","Departamento","NIT"],ES:["Código postal","Provincia","NIF/CIF"],US:["ZIP Code","Estado","EIN"],MX:["Código postal","Estado","RFC"]};
 const x=names[code]||["Código postal","Estado / Región","NIT / Registro fiscal"];
 clientPostalLabel.childNodes[0].textContent=x[0]; clientStateLabel.childNodes[0].textContent=x[1]; clientBusinessDocumentLabel.childNodes[0].textContent=x[2];
}
function toggleClientBusiness(){clientBusinessFields.style.display=clientHasBusiness.checked?"block":"none";}

function captureClientLocation() {
  const box = clientFormResult;
  box.style.display = "block";
  box.classList.remove("error");
  if (!navigator.geolocation) {
    box.classList.add("error");
    box.textContent = "Este navegador no permite obtener la ubicación.";
    return;
  }
  box.textContent = "Solicitando permiso de ubicación...";
  navigator.geolocation.getCurrentPosition(
    pos => {
      clientLatitude.value = pos.coords.latitude.toFixed(7);
      clientLongitude.value = pos.coords.longitude.toFixed(7);
      box.textContent = "Ubicación capturada correctamente.";
    },
    err => {
      box.classList.add("error");
      box.textContent = "No fue posible obtener la ubicación. Verifica el permiso de ubicación del navegador.";
    },
    {enableHighAccuracy:true, timeout:10000, maximumAge:0}
  );
}

function captureEditClientLocation() {
  const box = editClientMsg;
  box.style.display = "block";
  box.classList.remove("error");
  if (!navigator.geolocation) {
    box.classList.add("error");
    box.textContent = "Este navegador no permite obtener la ubicación.";
    return;
  }
  box.textContent = "Solicitando permiso de ubicación...";
  navigator.geolocation.getCurrentPosition(
    pos => {
      editClientLatitude.value = pos.coords.latitude.toFixed(7);
      editClientLongitude.value = pos.coords.longitude.toFixed(7);
      box.textContent = "Ubicación registrada actualizada. Presiona Guardar cambios para confirmar.";
    },
    () => {
      box.classList.add("error");
      box.textContent = "No fue posible obtener la ubicación. Verifica el permiso de ubicación del navegador.";
    },
    {enableHighAccuracy:true, timeout:10000, maximumAge:0}
  );
}

function clearClientForm() {
  ["clientName","clientDocument","clientPhone1","clientPhone2","clientAddress","clientNeighborhood",
   "clientPostalCode","clientStateRegion","clientCity","clientFixedPhone","clientEmail","clientAddressNumber","clientComplement","clientNotes","clientBusinessName","clientBusinessTradeName","clientBusinessDocument","clientBusinessActivity","clientBusinessRole","clientBusinessPhone","clientBusinessEmail","clientBusinessAddress","clientBusinessAddressNumber","clientBusinessComplement","clientBusinessNeighborhood","clientBusinessPostalCode","clientBusinessStateRegion","clientBusinessCity","clientLatitude","clientLongitude"].forEach(id => {
    document.getElementById(id).value = "";
  });
  clientRoute.value = ""; clientHasBusiness.checked=false; toggleClientBusiness();
  clientStaff.value = "";
  syncNewClientCustomSelect("clientRoute");
  syncNewClientCustomSelect("clientStaff");
  closeNewClientCustomSelects();
  clientPhoto.value = "";
  const clientPhotoCameraInput=document.getElementById("clientPhotoCamera");
  if(clientPhotoCameraInput) clientPhotoCameraInput.value="";
  const clientPhotoFileNameEl=document.getElementById("clientPhotoFileName");
  if(clientPhotoFileNameEl){clientPhotoFileNameEl.__sutilOriginal="Ningún archivo seleccionado";clientPhotoFileNameEl.textContent=sutilTranslateText("Ningún archivo seleccionado",SUTIL_ACTIVE_LANGUAGE);}
  clientPhotoPreview.removeAttribute("src");
  clientPhotoPreview.style.display = "none";
  sutilReleaseNewClientDocumentPreviewUrls();
  sutilNewClientDocumentFiles={};
  sutilSetClientDocumentsAccordion("newClientDocumentsAccordion","newClientDocumentsAccordionBody",false);
  renderNewClientDocuments();
}

async function createClient() {
  const box = clientFormResult;
  box.style.display = "block";
  box.classList.remove("error");
  try {
    const payload = {
      name: clientName.value.trim(),
      document_number: clientDocument.value.trim(),
      phone: clientPhone1.value.trim(),
      phone2: clientPhone2.value.trim() || null,
      fixed_phone: clientFixedPhone.value.trim() || null, email: clientEmail.value.trim() || null,
      address: clientAddress.value.trim(), address_number: clientAddressNumber.value.trim() || null, complement: clientComplement.value.trim() || null,
      neighborhood: clientNeighborhood.value.trim() || null,
      postal_code: clientPostalCode.value.trim() || null, state_region: clientStateRegion.value.trim() || null, notes: clientNotes.value.trim() || null,
      has_business: clientHasBusiness.checked, business_name: clientBusinessName.value.trim() || null, business_trade_name: clientBusinessTradeName.value.trim() || null, business_document: clientBusinessDocument.value.trim() || null, business_activity: clientBusinessActivity.value.trim() || null, business_role: clientBusinessRole.value.trim() || null, business_phone: clientBusinessPhone.value.trim() || null, business_email: clientBusinessEmail.value.trim() || null, business_address: clientBusinessAddress.value.trim() || null, business_address_number: clientBusinessAddressNumber.value.trim() || null, business_complement: clientBusinessComplement.value.trim() || null, business_neighborhood: clientBusinessNeighborhood.value.trim() || null, business_postal_code: clientBusinessPostalCode.value.trim() || null, business_state_region: clientBusinessStateRegion.value.trim() || null, business_city: clientBusinessCity.value.trim() || null, business_country_code: routeCountryForClient(),
      city: clientCity.value.trim(),
      route_id: clientRoute.value ? Number(clientRoute.value) : null,
      staff_id: clientStaff.value ? Number(clientStaff.value) : null,
      latitude: clientLatitude.value ? Number(clientLatitude.value) : null,
      longitude: clientLongitude.value ? Number(clientLongitude.value) : null
    };
    if (!payload.name) throw new Error("Escribe el nombre completo.");
    if (!payload.document_number) throw new Error("Escribe el documento personal.");
    if (!payload.phone) throw new Error("Escribe el teléfono 1.");
    if (!payload.address) throw new Error("Escribe la dirección.");
    if (!payload.city) throw new Error("Escribe la ciudad.");

    const pendingClientDocuments=Object.entries(sutilNewClientDocumentFiles).filter(([,file])=>file);
    box.textContent = "Guardando cliente...";
    const saved = await offlineMutationOrOnline({
      entityType:"client",
      action:"create",
      payload,
      path:"/api/admin/clients",
      localRef:offlineUuid("client"),
      options:{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body:JSON.stringify(payload)
      }
    });
    const photoFile = getNewClientPhotoFile();
    if(photoFile && !saved.offline_queued){
      box.textContent = "Guardando foto del cliente...";
      await uploadClientPhoto(saved.id,photoFile);
    }
    const failedDocuments=[];
    if(!saved.offline_queued && pendingClientDocuments.length){
      for(const [category,file] of pendingClientDocuments){
        try{box.textContent=`Guardando ${sutilClientDocumentLabel(category)}...`;await sutilUploadClientDocument(saved.id,category,file);}
        catch(error){failedDocuments.push(`${sutilClientDocumentLabel(category)}: ${error.message||sutilClientDocumentText("upload_error")}`);}
      }
    }
    const offlineDocumentsNote=saved.offline_queued&&pendingClientDocuments.length?"<br>Los documentos adjuntos deberán cargarse cuando tengas conexión.":"";
    const failedDocumentsNote=failedDocuments.length?`<br><strong>⚠ Cliente guardado, pero faltó cargar:</strong><br>${failedDocuments.map(sutilClientDocumentEsc).join("<br>")}`:"";
    box.innerHTML = saved.offline_queued
      ? `<strong>🟠 Cliente guardado sin Internet.</strong><br>
         Código provisional: <strong>${saved.client_code || "—"}</strong><br>
         Pendiente de sincronizar.${photoFile?"<br>La foto se subirá cuando registres/edites al cliente con conexión.":""}${offlineDocumentsNote}`
      : `<strong>Cliente guardado correctamente.</strong><br>
         Código: <strong>${saved.client_code || "—"}</strong>
         ${saved.route ? `<br>Ruta: ${saved.route}` : ""}${failedDocumentsNote}`;
    clearClientForm();
    await refreshClients();
    if(!saved.offline_queued)await refreshDashboard();
  } catch(e) {
    box.classList.add("error");
    box.textContent = e.message;
  }
}


// FIX 12.15.124 · Rutas: selector ligero, una sola vista a la vez.
function openRoutesPane(view){
  const target=(view==="create" || view==="registered") ? view : null;
  if(target==="registered" && routeCreatePendingOperationalId){
    // Si se abandona un segundo paso fallido, la ruta ya existe. No arrastrar ese ID
    // al formulario de una futura ruta nueva: la base pendiente se completa desde Editar.
    routeCreatePendingOperationalId=null;
    const btn=document.getElementById("routeCreateSubmitButton");
    if(btn){btn.disabled=false;btn.textContent="Crear ruta";}
    routeName.value="";routeCity.value="";routeDescription.value="";
    for(const id of ["routeOperationalStart","routeOperationalCash","routeOperationalPix"]){
      const input=document.getElementById(id);if(input)input.value="";
    }
    routeFormResult.style.display="block";
    routeFormResult.classList.remove("error");
    routeFormResult.textContent="La ruta ya fue creada. Para completar un punto de arranque pendiente, abre esa ruta desde Rutas registradas → Editar.";
  }
  const createPane=document.getElementById("routesCreatePane");
  const registeredPane=document.getElementById("routesRegisteredPane");
  if(target==="create"){
    // Misma autorización que al editar ruta; sin privilegios no se altera ninguna base.
    const canSetStart=Boolean(currentUser && ["company_owner","sutil_owner"].includes(currentUser.role));
    ["routeOperationalStart","routeOperationalCash","routeOperationalPix"].forEach(id=>{
      const field=document.getElementById(id);
      if(field)field.disabled=!canSetStart;
    });
    const help=document.getElementById("routeCreateOperationalOwnerHelp");
    if(help)help.style.display=canSetStart?"none":"block";
  }
  const createBtn=document.getElementById("routesOpenCreateBtn");
  const registeredBtn=document.getElementById("routesOpenRegisteredBtn");
  for(const [kind,pane,btn] of [
    ["create",createPane,createBtn], ["registered",registeredPane,registeredBtn]
  ]){
    const on=(kind===target);
    if(pane){pane.style.display=on?"block":"none";pane.setAttribute("aria-hidden",String(!on));}
    if(btn){btn.classList.toggle("active",on);btn.setAttribute("aria-pressed",String(on));}
  }
  // Cada vez que se elige una opción, la consulta comienza mostrando el listado.
  // Al abrir el detalle, loadRouteDetail oculta únicamente este listado, sin tocar la navegación.
  const listCard=document.getElementById("routesListCard");
  const detailCard=document.getElementById("routeDetailCard");
  if(listCard)listCard.style.display="block";
  if(detailCard)detailCard.style.display="none";
  if(target==="registered"){
    // Carga las opciones, pero el listado permanece vacío hasta que el usuario elija.
    Promise.resolve(refreshRoutes()).catch(()=>{});
  }
}

let registeredRoutesRows=[];

function registeredRoutesLanguage(){
  const raw=String(
    (typeof SUTIL_ACTIVE_LANGUAGE!=="undefined"&&SUTIL_ACTIVE_LANGUAGE)||
    (typeof accessLanguageCode!=="undefined"&&accessLanguageCode)||
    document.documentElement.lang||"es"
  ).toLowerCase().slice(0,2);
  return ["es","pt","en"].includes(raw)?raw:"es";
}

function registeredRoutesText(){
  const all={
    es:{title:"Seleccionar ruta",help:"Elige una ruta específica o “Todas las rutas”.",placeholder:"Selecciona una ruta",all:"Todas las rutas",emptyTitle:"Selecciona una ruta",emptyHelp:"El listado se mostrará después de elegir una ruta o “Todas las rutas”.",none:"Todavía no hay rutas registradas."},
    pt:{title:"Selecionar rota",help:"Escolha uma rota específica ou “Todas as rotas”.",placeholder:"Selecione uma rota",all:"Todas as rotas",emptyTitle:"Selecione uma rota",emptyHelp:"A lista será exibida depois de escolher uma rota ou “Todas as rotas”.",none:"Ainda não há rotas cadastradas."},
    en:{title:"Select route",help:"Choose a specific route or “All routes”.",placeholder:"Select a route",all:"All routes",emptyTitle:"Select a route",emptyHelp:"The list will appear after you choose a route or “All routes”.",none:"There are no registered routes yet."}
  };
  return all[registeredRoutesLanguage()]||all.es;
}

function populateRegisteredRouteFilter(rows,{preserve=true}={}){
  const select=document.getElementById("registeredRouteFilter");
  if(!select)return;
  const t=registeredRoutesText();
  const previous=preserve?String(select.value||""):"";
  select.innerHTML="";
  const placeholder=document.createElement("option");
  placeholder.value="";
  placeholder.textContent=t.placeholder;
  select.appendChild(placeholder);
  const allOption=document.createElement("option");
  allOption.value="__all__";
  allOption.textContent=t.all;
  allOption.dataset.sutilRouteAll="1";
  select.appendChild(allOption);
  (rows||[]).forEach(route=>{
    const option=document.createElement("option");
    option.value=String(route.id);
    option.textContent=route.name||`#${route.id}`;
    select.appendChild(option);
  });
  const valid=Array.from(select.options).some(option=>option.value===previous);
  select.value=valid?previous:"";
  const title=document.getElementById("registeredRouteFilterTitle");
  const help=document.getElementById("registeredRouteFilterHelp");
  if(title)title.textContent=t.title;
  if(help)help.textContent=t.help;
  if(select._sutilRouteTrigger){
    select.dispatchEvent(new Event("input",{bubbles:true}));
  }
}

function renderRegisteredRoutesRows(rows){
  const t=registeredRoutesText();
  routesTable.innerHTML = rows.length ? rows.map(r => `
      <tr class="client-row" onclick="loadRouteDetail(${r.id})">
        <td><strong>${r.name}</strong></td>
        <td>${r.city || "—"}</td>
        <td>${r.country_code || "—"}</td>
        <td>${r.language || "—"}</td>
        <td>${(r.currency_symbol || "")} ${r.currency_code || ""}</td>
        <td>${r.clients_count || 0}</td>
        <td class="${r.overdue_count > 0 ? "status-overdue" : "status-current"}">${r.overdue_count || 0}</td>
        <td>${r.active_loans || 0}</td>
        <td>${money(r.total_balance)}</td>
        <td>
          <button class="btn secondary" style="padding:6px 10px;font-size:12px" type="button" onclick="event.stopPropagation();editRoute(${JSON.stringify(r).replaceAll('"','&quot;')})">✏️ Editar</button>
          <button class="btn secondary route-view-detail-button" style="padding:6px 10px;font-size:12px" type="button" onclick="event.stopPropagation();loadRouteDetail(${r.id})">🔎 Ver detalle</button>
        </td>
      </tr>`).join("") : `<tr><td colspan="10">${t.none}</td></tr>`;
}

function renderRegisteredRoutesSelection(){
  const select=document.getElementById("registeredRouteFilter");
  const tableWrap=document.getElementById("routesRegisteredTableWrap");
  const empty=document.getElementById("routesRegisteredEmpty");
  const t=registeredRoutesText();
  if(!select||!tableWrap||!empty)return;
  const value=String(select.value||"");
  if(!value){
    tableWrap.style.display="none";
    empty.style.display="block";
    empty.innerHTML=`<strong>${t.emptyTitle}</strong>${t.emptyHelp}`;
    routesTable.innerHTML="";
    return;
  }
  const rows=value==="__all__"
    ? registeredRoutesRows
    : registeredRoutesRows.filter(route=>String(route.id)===value);
  empty.style.display="none";
  tableWrap.style.display="block";
  renderRegisteredRoutesRows(rows);
}

async function refreshRoutes() {
  try {
    const rows = await api("/api/admin/routes");
    registeredRoutesRows=Array.isArray(rows)?rows:[];
    populateRegisteredRouteFilter(registeredRoutesRows,{preserve:true});
    renderRegisteredRoutesSelection();
  } catch(e) {
    registeredRoutesRows=[];
    const tableWrap=document.getElementById("routesRegisteredTableWrap");
    const empty=document.getElementById("routesRegisteredEmpty");
    if(tableWrap)tableWrap.style.display="none";
    if(empty){empty.style.display="block";empty.innerHTML=`<strong>Error</strong>${e.message}`;}
  }
}


let editingRouteId = null;
let editingRouteGeneralCashOpen = false;
let editingRouteOperationalSummary = null;
let editingRouteOperationalStartDate = null;

function renderRouteOperationalSummary(){
  const box=document.getElementById("editRouteOperationalSummary");
  if(!box)return;

  if(!editingRouteGeneralCashOpen){
    box.style.display="none";
    box.innerHTML="";
    return;
  }

  box.style.display="block";

  if(!editingRouteOperationalStartDate){
    box.innerHTML=`
      <div class="result" style="display:block;margin:0">
        <strong>📅 Sin inicio operativo configurado</strong>
        <div class="muted" style="margin-top:4px">
          Define arriba la fecha de inicio operativo y la base inicial para que Sutil calcule los valores desde ese día.
        </div>
      </div>`;
    return;
  }

  const s=editingRouteOperationalSummary;
  if(!s){
    box.innerHTML=`
      <div class="muted">
        Calculando movimientos desde ${formatDateEs(editingRouteOperationalStartDate)}...
      </div>`;
    return;
  }

  box.innerHTML=`
    <div class="muted" style="margin-bottom:7px">
      <strong>Movimientos desde ${formatDateEs(s.from_date||editingRouteOperationalStartDate)}</strong>
    </div>
    <div class="cash-main-metrics" style="grid-template-columns:repeat(2,minmax(0,1fr));gap:8px">
      <div class="cash-main-metric">
        <small>Créditos entregados</small>
        <strong>${money(s.loans_total||0)}</strong>
        <div class="muted">${Number(s.loans_count||0)} movimiento(s)</div>
      </div>
      <div class="cash-main-metric">
        <small>Cuotas pagadas / cobros</small>
        <strong>${money(s.payments_total||0)}</strong>
        <div class="muted">${Number(s.payments_count||0)} movimiento(s)</div>
      </div>
      <div class="cash-main-metric">
        <small>Gastos</small>
        <strong>${money(s.expenses_total||0)}</strong>
        <div class="muted">${Number(s.expenses_count||0)} movimiento(s)</div>
      </div>
      <div class="cash-main-metric total">
        <small>Base operativa actual</small>
        <strong>${money(s.current_total||0)}</strong>
        <div class="muted">Dinero ${money(s.current_cash||0)} · PIX ${money(s.current_pix||0)}</div>
      </div>
    </div>`;
}

async function refreshRouteOperationalSummary(){
  if(!editingRouteId)return;
  try{
    const full=await api(`/api/admin/routes/${editingRouteId}`);
    editingRouteOperationalStartDate=full.operational_start_date||null;
    editingRouteOperationalSummary=full.operational_summary||null;
    renderRouteOperationalSummary();
  }catch(e){
    const box=document.getElementById("editRouteOperationalSummary");
    if(box && editingRouteGeneralCashOpen){
      box.style.display="block";
      box.innerHTML=`<div class="result error" style="display:block;margin:0">${e.message}</div>`;
    }
  }
}

function renderRouteGeneralCashState(){
  const status=document.getElementById("editRouteGeneralCashStatus");
  const button=document.getElementById("editRouteGeneralCashButton");
  const card=document.getElementById("editRouteGeneralCashCard");
  if(!status||!button||!card)return;

  const owner=Boolean(currentUser && ["company_owner","sutil_owner"].includes(currentUser.role));
  if(editingRouteGeneralCashOpen){
    status.innerHTML="<strong style='color:#148343'>🟢 ABIERTA EN MODO GENERAL</strong><br>El dueño puede realizar el traspaso con fechas distintas sin abrir cajas diarias históricas.";
    button.textContent="🔒 Cerrar caja general";
    button.className="btn danger";
  }else{
    status.innerHTML="<strong>⚫ CERRADA</strong><br>Las operaciones dependen de la caja diaria normal.";
    button.textContent="🔓 Abrir caja general";
    button.className="btn success";
  }

  button.style.display=owner?"inline-flex":"none";
  if(!owner){
    status.innerHTML += "<br><small>Solo el dueño de empresa puede cambiar este modo.</small>";
  }

  renderRouteOperationalSummary();
}

async function toggleRouteGeneralCash(){
  alert("La caja general de traspaso fue retirada. La carga histórica ya no altera la caja operativa.");
  return;
  if(!editingRouteId)return;
  if(!currentUser || !["company_owner","sutil_owner"].includes(currentUser.role)){
    alert("Solo el dueño de empresa puede abrir o cerrar la caja general de traspaso.");
    return;
  }

  const action=editingRouteGeneralCashOpen?"close":"open";
  const question=editingRouteGeneralCashOpen
    ? "¿Cerrar la caja general de traspaso? La caja diaria normal continuará exactamente en su estado actual."
    : "¿Abrir la caja general de traspaso? Podrás registrar créditos de distintas fechas sin abrir una caja diaria por cada fecha.";
  if(!await sutilConfirm(question))return;

  const button=document.getElementById("editRouteGeneralCashButton");
  button.disabled=true;
  try{
    const options={
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        note: action==="open" ? "Traspaso al sistema nuevo" : "Traspaso finalizado"
      })
    };
    const result=editingRouteGeneralCashOpen
      ? await api(`/api/admin/routes/${editingRouteId}/general-cash/close`,options)
      : await api(`/api/admin/routes/${editingRouteId}/general-cash/open`,options);
    editingRouteGeneralCashOpen=Boolean(result.general_cash_open);
    renderRouteGeneralCashState();
    await refreshRouteOperationalSummary();
    routeEditMessage.style.display="block";
    routeEditMessage.classList.remove("error");
    routeEditMessage.innerHTML=`<strong>✅ ${result.message}</strong>`;
    await refreshRoutes();
  }catch(e){
    routeEditMessage.style.display="block";
    routeEditMessage.classList.add("error");
    routeEditMessage.textContent=e.message;
  }finally{
    button.disabled=false;
  }
}

function syncEditRouteCountry(){
  const d=ROUTE_COUNTRY_DEFAULTS[editRouteCountry.value]||ROUTE_COUNTRY_DEFAULTS.OTHER;
  editRouteLanguage.value=d.language;
  editRouteCurrencyCode.value=d.currency;
  editRouteCurrencySymbol.value=d.symbol;
  fillCollectionAccountSelect(editRouteCollectionAccount,editRouteCountry.value,null,"Predeterminada de la empresa");
}

async function editRoute(route) {
  try{
    const full = route?.id
      ? await api(`/api/admin/routes/${route.id}`)
      : route;

    if(!full?.id)throw new Error("Ruta no encontrada.");

    editingRouteId = full.id;
    routeEditSubtitle.textContent = full.name || "Ruta";
    editRouteName.value = full.name || "";
    editRouteCity.value = full.city || "";
    editRouteCountry.value = full.country_code || "BR";
    editRouteLanguage.value = full.language || "pt";
    editRouteCurrencyCode.value = full.currency_code || "BRL";
    editRouteCurrencySymbol.value = full.currency_symbol || "R$";
    editRouteActive.value = full.active === false ? "false" : "true";
    editRouteDescription.value = full.description || "";
    editRouteOperationalStart.value = full.operational_start_date || "";
    editRouteOperationalCash.value = Number(full.operational_initial_cash || 0).toFixed(2);
    editRouteOperationalPix.value = Number(full.operational_initial_pix || 0).toFixed(2);
    editingRouteOperationalStartDate = full.operational_start_date || null;
    editingRouteOperationalSummary = full.operational_summary || null;

    const canConfigureOperational = currentUser && ["company_owner","sutil_owner"].includes(currentUser.role);
    editRouteOperationalStart.disabled = !canConfigureOperational;
    editRouteOperationalCash.disabled = !canConfigureOperational;
    editRouteOperationalPix.disabled = !canConfigureOperational;

    editingRouteGeneralCashOpen = Boolean(full.general_cash_open);
    renderRouteGeneralCashState();
    await fillCollectionAccountSelect(editRouteCollectionAccount,full.country_code,full.collection_account_id,"Predeterminada de la empresa");

    routeEditMessage.style.display="none";
    routeEditMessage.classList.remove("error");
    routeEditModal.classList.add("open");
  }catch(e){
    alert(e.message);
  }
}

function closeRouteEdit(){
  editingRouteId = null;
  editingRouteGeneralCashOpen = false;
  editingRouteOperationalSummary = null;
  editingRouteOperationalStartDate = null;
  routeEditModal.classList.remove("open");
}

function closeRouteEditFromBackdrop(event){
  if(event.target===routeEditModal)closeRouteEdit();
}

async function saveRouteEdit(){
  if(!editingRouteId)return;

  routeEditMessage.style.display="block";
  routeEditMessage.classList.remove("error");
  routeEditMessage.textContent="Guardando cambios...";

  try{
    const payload={
      name:editRouteName.value.trim(),
      city:editRouteCity.value.trim() || null,
      description:editRouteDescription.value.trim() || null,
      country_code:editRouteCountry.value,
      language:editRouteLanguage.value,
      currency_code:editRouteCurrencyCode.value.trim().toUpperCase(),
      currency_symbol:editRouteCurrencySymbol.value.trim(),
      active:editRouteActive.value==="true"
    };
    if(currentUser && ["company_owner","sutil_owner"].includes(currentUser.role)){
      payload.collection_account_id=editRouteCollectionAccount.value?Number(editRouteCollectionAccount.value):null;
    }

    if(currentUser && ["company_owner","sutil_owner"].includes(currentUser.role)){
      if(editRouteOperationalStart.value){
        payload.operational_start_date=editRouteOperationalStart.value;
        payload.operational_initial_cash=Number(editRouteOperationalCash.value||0);
        payload.operational_initial_pix=Number(editRouteOperationalPix.value||0);
      }
    }

    if(!payload.name)throw new Error("Escribe el nombre de la ruta.");

    const result=await api(`/api/admin/routes/${editingRouteId}`,{
      method:"PUT",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify(payload)
    });

    routeEditMessage.innerHTML=`<strong>✅ ${result.message} · ${result.active?"ACTIVA":"INACTIVA"}</strong>`;
    editingRouteOperationalStartDate = result.operational_start_date || editRouteOperationalStart.value || null;
    await refreshRouteOperationalSummary();
    await refreshRoutes();
    await loadClientFormOptions();
    await loadRouteDetail(editingRouteId);

    setTimeout(closeRouteEdit,450);
  }catch(e){
    routeEditMessage.classList.add("error");
    routeEditMessage.textContent=e.message;
  }
}


// La API POST crea los datos generales; la API PUT existente configura la base operativa.
// Si falla la segunda operación, se conserva el ID y el siguiente clic SOLO reintenta el PUT.
let routeCreatePendingOperationalId=null;
async function createRoute() {
  const btn=document.getElementById("routeCreateSubmitButton");
  if(btn && btn.disabled)return;
  routeFormResult.style.display="block";
  routeFormResult.classList.remove("error");
  try{
    const payload={
      name:routeName.value.trim(),
      city:routeCity.value.trim()||null,
      description:routeDescription.value.trim()||null,
      country_code:routeCountry.value,
      language:routeLanguage.value,
      currency_code:routeCurrencyCode.value.trim().toUpperCase(),
      currency_symbol:routeCurrencySymbol.value.trim()
    };
    if(!payload.name)throw new Error("Escribe el nombre de la ruta.");
    const startEl=document.getElementById("routeOperationalStart");
    const cashEl=document.getElementById("routeOperationalCash");
    const pixEl=document.getElementById("routeOperationalPix");
    const canSetStart=Boolean(currentUser && ["company_owner","sutil_owner"].includes(currentUser.role));
    const operationalDate=canSetStart ? (startEl?.value||"") : "";
    const cashRaw=canSetStart ? (cashEl?.value||"").trim() : "";
    const pixRaw=canSetStart ? (pixEl?.value||"").trim() : "";
    if((cashRaw!==""||pixRaw!=="")&&!operationalDate){
      throw new Error("Selecciona la fecha de inicio para guardar los saldos iniciales.");
    }
    if(routeCreatePendingOperationalId&&!operationalDate){
      throw new Error("La ruta ya fue creada. Indica la fecha de inicio para completar su punto de arranque; no se creará otra ruta.");
    }
    const cashAmount=cashRaw===""?0:Number(cashRaw);
    const pixAmount=pixRaw===""?0:Number(pixRaw);
    if(!Number.isFinite(cashAmount)||cashAmount<0||!Number.isFinite(pixAmount)||pixAmount<0){
      throw new Error("Los valores iniciales de Efectivo y PIX deben ser números válidos y no negativos.");
    }
    const configureStart=Boolean(operationalDate);
    if(btn){btn.disabled=true;btn.textContent=routeCreatePendingOperationalId?"Guardando punto de arranque...":"Creando ruta...";}
    routeFormResult.textContent="Guardando...";

    // Primera etapa: registro general de la ruta (solo una vez).
    let createdMessage="Ruta creada correctamente";
    if(!routeCreatePendingOperationalId){
      const saved=await api("/api/admin/routes",{
        method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(payload)
      });
      createdMessage=saved.message||createdMessage;
      if(configureStart){
        if(!Number.isInteger(Number(saved.id))||Number(saved.id)<=0){
          routeFormResult.textContent="La ruta fue creada, pero la respuesta no incluyó un identificador para guardar el punto de arranque. Entra en Rutas registradas → Editar y complétalo allí. No vuelvas a crearla.";
          return;
        }
        routeCreatePendingOperationalId=Number(saved.id);
      }
    }

    // Segunda etapa: se reutiliza el mismo endpoint/validaciones de Editar ruta.
    if(configureStart){
      await api(`/api/admin/routes/${routeCreatePendingOperationalId}`,{
        method:"PUT",headers:{"Content-Type":"application/json"},
        body:JSON.stringify({
          ...payload,
          operational_start_date:operationalDate,
          operational_initial_cash:cashAmount,
          operational_initial_pix:pixAmount
        })
      });
    }
    routeCreatePendingOperationalId=null;
    routeFormResult.textContent=configureStart
      ?"✅ Ruta creada y punto de arranque configurado correctamente."
      :`✅ ${createdMessage}`;
    routeName.value="";
    routeCity.value="";
    routeDescription.value="";
    routeCountry.value="BR";
    syncRouteCountry();
    if(startEl)startEl.value="";
    if(cashEl)cashEl.value="";
    if(pixEl)pixEl.value="";
    await Promise.allSettled([refreshRoutes(),loadClientFormOptions()]);
  }catch(e){
    routeFormResult.classList.add("error");
    routeFormResult.textContent=routeCreatePendingOperationalId
      ?`La ruta YA fue creada (ID ${routeCreatePendingOperationalId}), pero no se pudo guardar su punto de arranque: ${e.message}. Puedes reintentar aquí sin duplicar la ruta o entrar en Rutas registradas → Editar.`
      :e.message;
  }finally{
    if(btn){
      btn.disabled=false;
      btn.textContent=routeCreatePendingOperationalId?"Reintentar punto de arranque":"Crear ruta";
    }
  }
}


function showRegisteredRouteList(){
  const listCard=document.getElementById("routesListCard");
  const detailCard=document.getElementById("routeDetailCard");
  if(detailCard)detailCard.style.display="none";
  if(listCard){
    listCard.style.display="block";
    renderRegisteredRoutesSelection();
    listCard.scrollIntoView({block:"start",behavior:"auto"});
  }
}

async function loadRouteDetail(id) {
  const pane=document.getElementById("routesRegisteredPane");
  // Evita que cada toque vuelva a cargar el listado y desplace la ficha fuera de pantalla.
  if(pane && pane.style.display==="none")openRoutesPane("registered");
  try {
    const d = await api(`/api/admin/routes/${id}`);
    routeDetailTitle.innerHTML = `${d.name}${d.city ? " · " + d.city : ""}
      <button class="btn secondary" style="margin-left:10px" id="editRouteButton">Editar ruta</button>`;
    const detailEditButton=document.getElementById("editRouteButton");
    if(detailEditButton)detailEditButton.onclick = () => editRoute(d);
    routeSummary.innerHTML = `
      <div class="card">Clientes<div class="metric">${d.clients_count}</div></div>
      <div class="card">Morosos<div class="metric ${d.overdue_count > 0 ? "status-overdue" : "status-current"}">${d.overdue_count}</div></div>
      <div class="card">Cartera<div class="metric">${money(d.total_balance)}</div></div>`;
    routeClientsTable.innerHTML = d.clients.length ? d.clients.map(c => `
      <tr class="${c.is_overdue ? "client-overdue" : ""}">
        <td>${c.name}</td><td><strong>${c.client_code || "—"}</strong></td>
        <td>${c.document_number || "—"}</td><td>${c.phone}</td><td>${money(c.balance)}</td>
        <td>${c.next_due_date || "—"}</td>
        <td class="${c.is_overdue ? "status-overdue" : "status-current"}">${c.status}</td>
      </tr>`).join("") : `<tr><td colspan="7">Esta ruta todavía no tiene clientes.</td></tr>`;
    // Muestra solo la ficha elegida: ya no queda perdida debajo de todas las rutas.
    const listCard=document.getElementById("routesListCard");
    if(listCard)listCard.style.display="none";
    routeDetailCard.style.display="block";
    routeDetailCard.scrollIntoView({block:"start",behavior:"auto"});
  } catch(e) { alert(e.message); }
}


function escapeHtml(value){
  return String(value ?? "").replace(/[&<>"\']/g, function(ch){
    if(ch==="&") return "&amp;";
    if(ch==="<") return "&lt;";
    if(ch===">") return "&gt;";
    if(ch==="\"") return "&quot;";
    return "&#39;";
  });
}

let staffActiveView = "home";
let staffLocationSelectedId = null;
let staffLocationTimer = null;

function stopStaffLocationPolling(){
  if(staffLocationTimer){clearInterval(staffLocationTimer);staffLocationTimer=null;}
}

function openStaffSubmodule(view){
  staffActiveView = view || "home";
  const navCard=document.querySelector('#staffSection .staff-navigation-card');
  const panelIds={create:"staffCreatePanel",registered:"staffRegisteredPanel",locations:"staffLocationsPanel"};
  const buttonIds={create:"staffViewCreateBtn",registered:"staffViewListBtn",locations:"staffViewLocationBtn"};
  const isHome=staffActiveView==="home";

  if(navCard){
    navCard.style.setProperty("display", isHome ? "block" : "none", "important");
  }

  Object.entries(panelIds).forEach(([key,id])=>{
    const panel=document.getElementById(id);
    if(!panel) return;
    const active=key===staffActiveView;
    panel.classList.toggle("active",active);
    panel.style.setProperty("display",active ? "block" : "none","important");
  });

  Object.entries(buttonIds).forEach(([key,id])=>{
    const button=document.getElementById(id);
    if(button) button.classList.toggle("active",key===staffActiveView);
  });

  if(staffActiveView==="locations"){
    refreshStaffLocationsView(false);
    stopStaffLocationPolling();
    staffLocationTimer=setInterval(()=>{
      if(currentSectionId==="staffSection" && staffActiveView==="locations") refreshStaffLocationsView(false);
    },30000);
  }else{
    stopStaffLocationPolling();
    if(staffActiveView==="registered") refreshStaff();
  }

  window.scrollTo({top:0,behavior:"smooth"});
}

function showStaffView(view){
  openStaffSubmodule(view);
}

function validStaffLocation(staff){
  const lat=Number(staff?.location_lat ?? staff?.latitude);
  const lng=Number(staff?.location_lng ?? staff?.longitude);
  return Number.isFinite(lat) && Number.isFinite(lng) && lat>=-90 && lat<=90 && lng>=-180 && lng<=180;
}

function staffLocationCoords(staff){
  return {lat:Number(staff?.location_lat ?? staff?.latitude),lng:Number(staff?.location_lng ?? staff?.longitude)};
}

function refreshStaffLocationRouteOptions(){
  const select=document.getElementById("staffLocationRoute");
  if(!select)return;
  const prev=select.value;
  select.innerHTML='<option value="">Todas las rutas</option>'+staffRoutesCache.map(r=>`<option value="${r.id}">${escapeHtml(r.name)}</option>`).join("");
  if(Array.from(select.options).some(o=>o.value===prev))select.value=prev;
  syncStaffLocationCustomSelect("staffLocationRoute");
  syncStaffLocationCustomSelect("staffLocationState");
}

function closeStaffLocationCustomSelects(exceptId=""){
  document.querySelectorAll("#staffLocationsPanel .staff-location-custom-select.open").forEach(wrapper=>{
    if(exceptId && wrapper.dataset.staffLocationSelect===exceptId)return;
    wrapper.classList.remove("open");
  });
}

function syncStaffLocationCustomSelect(selectId){
  const select=document.getElementById(selectId);
  const wrapper=document.querySelector(`#staffLocationsPanel .staff-location-custom-select[data-staff-location-select="${selectId}"]`);
  const trigger=document.getElementById(`${selectId}Trigger`);
  const menu=document.getElementById(`${selectId}Menu`);
  if(!select || !wrapper || !trigger || !menu)return;
  const selected=select.options[select.selectedIndex] || select.options[0];
  trigger.textContent=selected?.textContent?.trim() || "—";
  trigger.title=trigger.textContent;
  menu.innerHTML="";
  Array.from(select.options).forEach(option=>{
    const item=document.createElement("button");
    item.type="button";
    item.className="staff-location-select-option"+(String(option.value)===String(select.value)?" selected":"");
    item.textContent=option.textContent;
    item.dataset.value=option.value;
    item.onclick=(event)=>{
      event.stopPropagation();
      select.value=option.value;
      select.dispatchEvent(new Event("change",{bubbles:true}));
      wrapper.classList.remove("open");
    };
    menu.appendChild(item);
  });
}

function toggleStaffLocationCustomSelect(selectId,event){
  if(event)event.stopPropagation();
  const wrapper=document.querySelector(`#staffLocationsPanel .staff-location-custom-select[data-staff-location-select="${selectId}"]`);
  if(!wrapper)return;
  const willOpen=!wrapper.classList.contains("open");
  closeStaffLocationCustomSelects(selectId);
  if(willOpen){
    syncStaffLocationCustomSelect(selectId);
    wrapper.classList.add("open");
  }else wrapper.classList.remove("open");
}

document.addEventListener("click",event=>{
  if(!event.target.closest("#staffLocationsPanel .staff-location-custom-select"))closeStaffLocationCustomSelects();
});

function renderStaffLocationsList(){
  const list=document.getElementById("staffLocationList");
  if(!list)return;
  const q=(document.getElementById("staffLocationSearch")?.value||"").trim().toLowerCase();
  const routeId=Number(document.getElementById("staffLocationRoute")?.value||0);
  const state=document.getElementById("staffLocationState")?.value||"";
  const rows=(staffRowsCache||[]).filter(s=>{
    const text=`${s.name||""} ${s.phone||""}`.toLowerCase();
    const routeOk=!routeId || (s.routes||[]).some(r=>Number(r.id)===routeId);
    const has=validStaffLocation(s);
    const stateOk=!state || (state==="with"?has:!has);
    return (!q || text.includes(q)) && routeOk && stateOk;
  });
  list.innerHTML=rows.length?rows.map(s=>{
    const has=validStaffLocation(s);
    const routes=(s.routes||[]).map(r=>r.name).join(", ")||"Sin ruta";
    const active=Number(staffLocationSelectedId)===Number(s.id)?" active":"";
    return `<div class="staff-location-row${active}" onclick="selectStaffLocation(${Number(s.id)})">
      <div class="staff-location-avatar">${escapeHtml((s.name||"?").trim().charAt(0).toUpperCase()||"?")}</div>
      <div class="staff-location-person"><strong>${escapeHtml(s.name||"Funcionario")}</strong><small>${escapeHtml(staffRoleLabel(s.role))} · ${escapeHtml(routes)}</small></div>
      <span class="staff-location-state ${has?"live":""}">${has?"● GPS":"Sin ubicación"}</span>
    </div>`;
  }).join(""):'<div class="muted" style="padding:18px">No hay personal que coincida con los filtros.</div>';
  if(staffLocationSelectedId && !rows.some(s=>Number(s.id)===Number(staffLocationSelectedId))){
    staffLocationSelectedId=null;
    renderSelectedStaffLocation();
  }
}

function selectStaffLocation(id){
  staffLocationSelectedId=Number(id);
  renderStaffLocationsList();
  renderSelectedStaffLocation();
}

function renderSelectedStaffLocation(){
  const staff=(staffRowsCache||[]).find(s=>Number(s.id)===Number(staffLocationSelectedId));
  const name=document.getElementById("staffLocationSelectedName");
  const meta=document.getElementById("staffLocationSelectedMeta");
  const area=document.getElementById("staffLocationMapArea");
  const mapBtn=document.getElementById("staffLocationOpenMap");
  if(!name||!meta||!area||!mapBtn)return;
  if(!staff){
    name.textContent="Selecciona un funcionario";
    meta.textContent="La ubicación aparecerá aquí cuando el dispositivo autorizado la envíe.";
    mapBtn.style.display="none";
    area.innerHTML='<div><div class="staff-location-empty-icon">📍</div><strong>Sin ubicación seleccionada</strong><br><span>Selecciona un funcionario de la lista.</span></div>';
    return;
  }
  name.textContent=staff.name||"Funcionario";
  const routes=(staff.routes||[]).map(r=>r.name).join(", ")||"Sin ruta";
  if(!validStaffLocation(staff)){
    meta.textContent=`${staffRoleLabel(staff.role)} · ${routes}`;
    mapBtn.style.display="none";
    area.innerHTML='<div><div class="staff-location-empty-icon">📱</div><strong>Sin ubicación recibida</strong><br><span>Cuando la app del funcionario envíe GPS autorizado, Sutil mostrará aquí su última posición.</span></div>';
    return;
  }
  const {lat,lng}=staffLocationCoords(staff);
  const updated=staff.location_updated_at||staff.location_time||staff.updated_at||"";
  meta.textContent=`${staffRoleLabel(staff.role)} · ${routes}${updated?` · Actualizado: ${updated}`:""}`;
  mapBtn.style.display="inline-block";
  area.innerHTML=`<iframe title="Ubicación de ${escapeHtml(staff.name||"funcionario")}" loading="lazy" referrerpolicy="no-referrer-when-downgrade" src="https://maps.google.com/maps?q=${encodeURIComponent(lat+','+lng)}&z=16&output=embed"></iframe>`;
}

function openSelectedStaffMap(){
  const staff=(staffRowsCache||[]).find(s=>Number(s.id)===Number(staffLocationSelectedId));
  if(!validStaffLocation(staff))return;
  const {lat,lng}=staffLocationCoords(staff);
  window.open(`https://www.google.com/maps?q=${encodeURIComponent(lat+','+lng)}`,"_blank","noopener");
}

async function refreshStaffLocationsView(showStatus=false){
  try{
    await refreshStaff();
    refreshStaffLocationRouteOptions();
    renderStaffLocationsList();
    renderSelectedStaffLocation();
  }catch(e){
    if(showStatus)alert(e.message);
  }
}

function updateStaffRoleHelp(){
  staffRoleHelp.textContent = staffRole.value === "company_admin"
    ? "Máximo 2 ADM por ruta. El empresario define sus permisos."
    : "Máximo 1 cobrador por ruta. Solo verá las funciones autorizadas.";
}


const staffPermissionLabels = {
  view_clients:"Ver clientes", create_clients:"Registrar clientes",
  edit_clients:"Editar datos del cliente", edit_client_identity:"Editar documento y código",
  create_loans:"Crear créditos", edit_loans:"Editar créditos sin pagos",
  delete_loans:"Eliminar créditos sin pagos", collect_payments:"Registrar cobros",
  edit_payments:"Corregir pagos registrados",
  review_pix:"Confirmar comprobantes PIX", manage_staff:"Crear y administrar cobradores",
  manage_routes:"Administrar rutas", view_chat:"Acceder al chat",
  manage_chat:"Administrar/eliminar chats",
  issue_receipts:"Emitir recibos", manage_cash:"Manejar caja",
  manage_cash_base:"Adicionar, retirar y transferir base",
  manage_expenses:"Registrar gastos", view_locations:"Ver ubicaciones",
  view_reports:"Ver reportes"
};
let staffRowsCache=[];
let staffRoutesCache=[];
let editingStaffId=null;

function canManageStaffRow(staff){
  if(!currentUser)return false;
  if(["company_owner","sutil_owner"].includes(currentUser.role))return true;
  return ["company_admin","admin"].includes(currentUser.role) &&
    currentUser.permissions?.manage_staff &&
    staff.role==="staff";
}
function staffRoleLabel(role){return ["company_admin","admin"].includes(role)?"ADM":"Cobrador"}
function staffRolePill(role){
  const adm=["company_admin","admin"].includes(role);
  return `<span class="staff-role-pill ${adm?"adm":"collector"}">${adm?"👨‍💼 ADM":"🪪 Cobrador"}</span>`;
}
function staffStatePill(active){
  return `<span class="staff-state-pill ${active?"active":"inactive"}">● ${active?"Activo":"Desactivado"}</span>`;
}
function staffRoutePills(routes){
  return routes?.length?routes.map(r=>`<span class="staff-route-pill">${r.name}</span>`).join(""):'<span class="muted">Sin ruta</span>';
}

async function refreshStaff() {
  try {
    const [routes,staff]=await Promise.all([api("/api/admin/routes"),api("/api/admin/staff")]);
    staffRoutesCache=routes; staffRowsCache=staff;
    if(staffActiveView==="locations"){refreshStaffLocationRouteOptions();renderStaffLocationsList();renderSelectedStaffLocation();}
    staffRoutes.innerHTML=routes.map(r=>`<label class="inline-check"><input class="staffRoute" type="checkbox" value="${r.id}">${r.name}</label>`).join("") || "Sin rutas";
    staffTable.innerHTML=staff.map(s=>{
      const allowed=canManageStaffRow(s);
      const controls=allowed?`
        <div class="staff-action-row">
          <button class="btn staff-btn-edit" onclick="openEditStaff(${s.id},'data')">✏️ Editar</button>
          <button class="btn staff-btn-permissions" onclick="openEditStaff(${s.id},'permissions')">🔐 Permisos</button>
          <button class="btn staff-btn-key" onclick="resetStaffPassword(${s.id})">🔑 Cambiar clave</button>
          <button class="btn ${s.active?"staff-btn-disable":"staff-btn-enable"}" onclick="quickToggleStaff(${s.id},${!s.active})">${s.active?"⛔ Desactivar":"✅ Activar"}</button>
        </div>`:'<span class="muted">Sin permiso para modificar</span>';
      return `<tr>
        <td>${staffRolePill(s.role)}</td>
        <td><div class="staff-person-name">${s.name}</div></td>
        <td>${s.phone}</td>
        <td>${staffRoutePills(s.routes)}</td>
        <td>${staffStatePill(s.active)}</td>
        <td>${controls}</td>
      </tr>`;
    }).join("") || `<tr><td colspan="6">Sin personal registrado.</td></tr>`;
  } catch(e){ staffTable.innerHTML=`<tr><td colspan="6">${e.message}</td></tr>`; }
}

function openEditStaff(id,focusSection="data"){
  const staff=staffRowsCache.find(s=>Number(s.id)===Number(id));
  if(!staff||!canManageStaffRow(staff)){alert("No tienes permiso para editar este usuario.");return}
  editingStaffId=id;
  editStaffName.value=staff.name||"";
  editStaffPhone.value=staff.phone||"";
  editStaffRoleLabel.value=staffRoleLabel(staff.role);
  editStaffActive.value=String(staff.active!==false);
  editStaffSubtitle.textContent=`${staffRoleLabel(staff.role)} · ${staff.name}`;
  const assigned=new Set((staff.routes||[]).map(r=>Number(r.id)));
  editStaffRoutes.innerHTML=staffRoutesCache.map(r=>`
    <label class="staff-choice"><input class="editStaffRoute" type="checkbox" value="${r.id}" ${assigned.has(Number(r.id))?"checked":""}><span>${r.name}${r.city?`<br><small class="muted">${r.city}</small>`:""}</span></label>`).join("")||'<div class="muted">No hay rutas registradas.</div>';
  editStaffPermissions.innerHTML=Object.entries(staffPermissionLabels).map(([key,label])=>`
    <label class="staff-choice"><input class="editStaffPerm" type="checkbox" value="${key}" ${staff.permissions?.[key]?"checked":""}><span>${label}</span></label>`).join("");
  const isAdmActor=["company_admin","admin"].includes(currentUser?.role);
  editStaffRestriction.textContent=isAdmActor
    ?"Como ADM, puedes administrar cobradores autorizados. No puedes modificar otros ADM."
    :"El empresario puede otorgar o revocar cualquier permiso.";
  editStaffMessage.textContent="Revisa los cambios antes de guardar.";

  [editStaffDataSection,editStaffRoutesSection,editStaffPermissionsSection].forEach(
    section=>section?.classList.remove("highlight")
  );

  editStaffModal.classList.add("open");

  setTimeout(()=>{
    const target = focusSection==="permissions"
      ? editStaffPermissionsSection
      : editStaffDataSection;
    target?.classList.add("highlight");
    target?.scrollIntoView({behavior:"smooth",block:"center"});
  },80);
}
function closeEditStaff(){editingStaffId=null;editStaffModal.classList.remove("open")}
function closeEditStaffFromBackdrop(e){if(e.target===editStaffModal)closeEditStaff()}

async function saveEditStaff(){
  if(!editingStaffId)return;
  const permissions={};document.querySelectorAll(".editStaffPerm").forEach(x=>permissions[x.value]=x.checked);
  const route_ids=Array.from(document.querySelectorAll(".editStaffRoute:checked")).map(x=>Number(x.value));
  editStaffMessage.textContent="Guardando...";
  try{
    const d=await api(`/api/admin/staff/${editingStaffId}`,{
      method:"PUT",headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        name:editStaffName.value.trim(),phone:editStaffPhone.value.trim(),
        active:editStaffActive.value==="true",route_ids,permissions
      })
    });
    editStaffMessage.textContent=d.message;
    await refreshStaff();
    setTimeout(closeEditStaff,450);
  }catch(e){editStaffMessage.textContent=e.message}
}

async function quickToggleStaff(id,newState){
  const staff=staffRowsCache.find(s=>Number(s.id)===Number(id));
  if(!staff)return;
  const action=newState?"activar":"desactivar";
  if(!await sutilConfirm(`¿Deseas ${action} el acceso de ${staff.name}?`))return;
  try{
    await api(`/api/admin/staff/${id}`,{
      method:"PUT",headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        name:staff.name,phone:staff.phone,active:newState,
        route_ids:(staff.routes||[]).map(r=>Number(r.id)),
        permissions:staff.permissions||{}
      })
    });
    await refreshStaff();
  }catch(e){alert(e.message)}
}

async function createStaff(){
  staffResult.style.display="block"; staffResult.classList.remove("error");
  try{
    const permissions={}; document.querySelectorAll(".staffPerm").forEach(x=>permissions[x.value]=x.checked);
    if(permissions.manage_chat)permissions.view_chat=true;
    const route_ids=Array.from(document.querySelectorAll(".staffRoute:checked")).map(x=>Number(x.value));
    const d=await api("/api/admin/staff",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({
      name:staffName.value.trim(),
      phone:staffPhone.value.trim(),
      password:staffPassword.value||null,
      role:staffRole.value,
      route_ids,
      permissions
    })});
    staffResult.innerHTML=
      `<strong>${d.role==="company_admin"?"ADM":"Cobrador"} creado.</strong><br>` +
      `Empresa: <strong>${d.company_name}</strong><br>` +
      `Llave de empresa: <strong>${d.company_key}</strong><br>` +
      `Clave temporal: <strong>${d.temporary_password}</strong>`;
    staffName.value="";
    staffPhone.value="";
    staffPassword.value="";
    document.querySelectorAll(".staffRoute,.staffPerm").forEach(x=>x.checked=false);
    await refreshStaff();
    await loadClientFormOptions();
  }catch(e){staffResult.classList.add("error");staffResult.textContent=e.message;}
}
async function resetStaffPassword(id){
  try{const d=await api(`/api/admin/staff/${id}/reset-password`,{method:"POST"});alert("Nueva clave temporal: "+d.temporary_password);}
  catch(e){alert(e.message);}
}


let collectionsMode = "debt";
let receivedPaymentRows = [];
let receivedPaymentsSummary = {count:0,total_amount:0,cash_total:0,pix_total:0,transfer_total:0,renewal_total:0};
let receivedPaymentsRoutesCache = [];
let receivedPaymentsRoutesLoadedAt = 0;
let receivedPaymentsStaffCache = [];
let receivedPaymentsStaffLoadedAt = 0;
let selectedClientPaymentsClient = null;
let clientPaymentsData = null;

function showCollectionsMode(mode){
  collectionsMode = mode || null;

  const map = {
    debt: ["collectionsDebtPane","collectionsDebtOption"],
    received: ["collectionsReceivedPane","collectionsReceivedOption"],
    clientPayments: ["collectionsClientPaymentsPane","collectionsClientPaymentsOption"]
  };

  Object.values(map).forEach(([paneId,buttonId])=>{
    const pane=document.getElementById(paneId);
    const button=document.getElementById(buttonId);
    if(pane)pane.classList.remove("active");
    if(button)button.classList.remove("active");
  });

  if(!collectionsMode || !map[collectionsMode]){
    return;
  }

  const target=map[collectionsMode];
  document.getElementById(target[0])?.classList.add("active");
  document.getElementById(target[1])?.classList.add("active");

  if(collectionsMode==="debt"){
    loadTodayCollections();
  }else if(collectionsMode==="received"){
    // Pagos recibidos abre siempre con HOY preseleccionado.
    setReceivedPaymentsPeriod("today",false);
    loadReceivedPayments();
  }else if(collectionsMode==="clientPayments"){
    renderClientPaymentsPane();
  }
}


function smartClientText(value){
  return normalizeSearchText(String(value??"")).trim();
}

function smartClientPool(){
  const map=new Map();

  const put=(raw={})=>{
    const id=Number(raw.client_id??raw.id);
    if(!Number.isFinite(id))return;

    const previous=map.get(id)||{};
    const accessRoutes=Array.isArray(raw.access_routes)
      ? raw.access_routes.map(r=>r?.name).filter(Boolean).join(", ")
      : "";

    map.set(id,{
      id,
      name:raw.name||raw.client_name||previous.name||"",
      client_code:raw.client_code||previous.client_code||"",
      document_number:raw.document_number||previous.document_number||"",
      phone:raw.phone||raw.phone1||previous.phone||"",
      phone2:raw.phone2||previous.phone2||"",
      fixed_phone:raw.fixed_phone||previous.fixed_phone||"",
      route_name:raw.route_name||accessRoutes||previous.route_name||""
    });
  };

  (Array.isArray(clientRows)?clientRows:[]).forEach(put);
  (Array.isArray(todayCollectionRows)?todayCollectionRows:[]).forEach(put);

  return [...map.values()];
}

function smartClientEditDistance(a,b,maxDistance=4){
  a=String(a||"");
  b=String(b||"");
  if(a===b)return 0;
  if(!a.length)return b.length;
  if(!b.length)return a.length;
  if(Math.abs(a.length-b.length)>maxDistance)return maxDistance+1;

  let prev=Array.from({length:b.length+1},(_,i)=>i);
  for(let i=1;i<=a.length;i++){
    const cur=[i];
    let rowMin=cur[0];
    for(let j=1;j<=b.length;j++){
      const cost=a[i-1]===b[j-1]?0:1;
      cur[j]=Math.min(
        cur[j-1]+1,
        prev[j]+1,
        prev[j-1]+cost
      );
      rowMin=Math.min(rowMin,cur[j]);
    }
    if(rowMin>maxDistance)return maxDistance+1;
    prev=cur;
  }
  return prev[b.length];
}

function smartClientFieldScore(field,term,weight=0){
  const value=smartClientText(field);
  if(!value || !term)return Infinity;

  if(value===term)return weight;
  if(value.startsWith(term))return 10+weight+(value.length-term.length)*0.01;

  const words=value.split(/\s+/).filter(Boolean);
  if(words.some(w=>w.startsWith(term)))return 20+weight;

  const at=value.indexOf(term);
  if(at>=0)return 30+weight+at*.05;

  // Tolera pequeños errores de escritura cuando el término ya tiene 3+ caracteres.
  if(term.length>=3){
    const candidates=[value,...words].filter(v=>Math.abs(v.length-term.length)<=4);
    let best=Infinity;
    for(const candidate of candidates){
      const distance=smartClientEditDistance(candidate,term,3);
      if(distance<=3){
        const relative=distance/Math.max(candidate.length,term.length,1);
        if(relative<=0.42)best=Math.min(best,55+weight+distance*6+relative*10);
      }
    }
    if(Number.isFinite(best))return best;
  }

  return Infinity;
}

function smartClientRank(term){
  const q=smartClientText(term);
  if(!q)return [];

  return smartClientPool()
    .map(client=>{
      const scores=[
        smartClientFieldScore(client.name,q,0),
        smartClientFieldScore(client.client_code,q,2),
        smartClientFieldScore(client.document_number,q,4),
        smartClientFieldScore(client.phone,q,6),
        smartClientFieldScore(client.phone2,q,7),
        smartClientFieldScore(client.fixed_phone,q,8),
        smartClientFieldScore(client.route_name,q,10)
      ];
      return {client,score:Math.min(...scores)};
    })
    .filter(row=>Number.isFinite(row.score))
    .sort((a,b)=>{
      if(a.score!==b.score)return a.score-b.score;
      return String(a.client.name||"").localeCompare(String(b.client.name||""),undefined,{sensitivity:"base"});
    })
    .slice(0,6)
    .map(row=>row.client);
}

function closeSmartClientSuggestions(exceptId=""){
  document.querySelectorAll(".client-smart-suggestions.open").forEach(box=>{
    if(box.id!==exceptId)box.classList.remove("open");
  });
}

function renderSmartClientSuggestions(inputId,boxId,mode){
  const input=document.getElementById(inputId);
  const box=document.getElementById(boxId);
  if(!input||!box)return;

  const term=String(input.value||"").trim();
  closeSmartClientSuggestions(boxId);

  if(!term){
    box.innerHTML="";
    box.classList.remove("open");
    return;
  }

  const matches=smartClientRank(term);

  if(!matches.length){
    box.innerHTML='<div class="client-smart-empty">No se encontraron coincidencias.</div>';
    box.classList.add("open");
    return;
  }

  box.innerHTML=matches.map((client,index)=>{
    const secondary=[
      client.client_code,
      client.document_number,
      client.phone||client.phone2||client.fixed_phone
    ].filter(Boolean).join(" · ");

    return `<button type="button" class="client-smart-item ${index===0?"best":""}"
      onclick="selectSmartClientSuggestion('${inputId}','${boxId}','${mode}',${Number(client.id)})">
      <span class="client-smart-avatar">${legacyEscapeHtml(String(client.name||"C").trim().charAt(0).toUpperCase()||"C")}</span>
      <span class="client-smart-copy">
        <strong>${legacyEscapeHtml(client.name||"Sin nombre")}</strong>
        <small>${legacyEscapeHtml(secondary||client.route_name||"")}</small>
      </span>
      ${index===0?'<span class="client-smart-best">Mejor coincidencia</span>':""}
    </button>`;
  }).join("");

  box.classList.add("open");
}

let collectionsSelectedClientId=null;

function collectionsSearchChanged(){
  collectionsSelectedClientId=null;
  const kpis=document.getElementById("collectionsClientKpis");
  if(kpis)kpis.style.display="none";
}

function selectSmartClientSuggestion(inputId,boxId,mode,clientId){
  const client=smartClientPool().find(row=>Number(row.id)===Number(clientId));
  if(!client)return;

  const input=document.getElementById(inputId);
  const box=document.getElementById(boxId);

  if(input)input.value=client.name||client.client_code||client.document_number||"";
  if(box){
    box.classList.remove("open");
    box.innerHTML="";
  }

  if(mode==="debt"){
    collectionsSelectedClientId=Number(client.id);
    const kpis=document.getElementById("collectionsClientKpis");
    if(kpis)kpis.style.display="grid";
    loadTodayCollections();
    return;
  }

  if(mode==="received"){
    loadReceivedPayments();
    return;
  }

  if(mode==="clientPayments"){
    selectClientPaymentsClient(client.id);
  }
}

document.addEventListener("click",event=>{
  if(!event.target.closest(".client-smart-search")){
    closeSmartClientSuggestions();
  }
});

function paymentMethodLabel(method){
  const key=String(method||"cash").toLowerCase();
  if(key==="pix")return "PIX";
  if(["transfer","transferencia"].includes(key))return "Transferencia";
  if(["renewal","renovacion","renovación"].includes(key))return "Renovación";
  return "Efectivo";
}

function paymentMethodIcon(method){
  const key=String(method||"cash").toLowerCase();
  if(key==="pix")return "📲";
  if(["transfer","transferencia"].includes(key))return "🏦";
  if(["renewal","renovacion","renovación"].includes(key))return "🔄";
  return "💰";
}

function formatDateTimeEs(value){
  if(!value)return "—";
  const raw=String(value).trim(); const d=new Date(/(Z|[+-]\d{2}:\d{2})$/.test(raw)?raw:raw+"Z");
  if(Number.isNaN(d.getTime()))return String(value);
  return d.toLocaleString("es-ES",{day:"2-digit",month:"2-digit",year:"numeric",hour:"2-digit",minute:"2-digit",second:"2-digit"});
}

function receivedPaymentDisplayDate(row){
  if(!row)return "—";
  const historical=!!row.historical ||
    (row.cash_movement_date && row.payment_date &&
     String(row.cash_movement_date).slice(0,10)!==String(row.payment_date).slice(0,10));
  if(historical){
    const dateOnly=String(row.payment_date || row.paid_at || "").slice(0,10);
    return dateOnly ? formatDateEs(dateOnly) : "—";
  }
  return formatDateTimeEs(row.paid_at);
}

function paymentEntryHtml(row,{showRoute=false,showBalance=false}={}){
  const allocations=(row.allocations||[]).map(a=>`#${a.installment_number}`).join(", ");
  return `<div class="payment-entry">
    <div class="payment-entry-main">
      <div class="payment-entry-icon">${paymentMethodIcon(row.payment_method)}</div>
      <div style="min-width:0">
        <div class="payment-entry-name">${legacyEscapeHtml(row.client_name || "Sin cliente")}</div>
        <div class="payment-entry-code">${legacyEscapeHtml(row.client_code || "Sin código")}</div>
        <div class="payment-entry-meta">Fecha del pago: ${legacyEscapeHtml(receivedPaymentDisplayDate(row))}</div>
        ${row.cash_movement_date && String(row.cash_movement_date).slice(0,10) !== String(row.paid_at||"").slice(0,10)
          ? `<div class="payment-entry-meta">Aplicado a caja: ${legacyEscapeHtml(formatDateEs(String(row.cash_movement_date).slice(0,10)))}</div>`
          : ""}
        <div class="payment-entry-meta">Forma: ${legacyEscapeHtml(paymentMethodLabel(row.payment_method))}</div>
        <div class="payment-entry-meta">Funcionario: ${legacyEscapeHtml(row.responsible || "Administrador")}</div>
        ${showRoute ? `<div class="payment-entry-meta">Ruta: ${legacyEscapeHtml(row.route_name || "Sin ruta")}</div>` : ""}
        ${showBalance ? `<div class="payment-entry-meta">Saldo después del pago: ${money(row.balance_after || 0)}</div>` : ""}
        <div class="payment-entry-tags">
          ${allocations ? `<span class="payment-entry-tag">🧾 Cuotas: ${legacyEscapeHtml(allocations)}</span>` : ""}
          ${row.receipt_id ? `<span class="payment-entry-tag">📎 Recibo #${row.receipt_id}</span>` : ""}
        </div>
      </div>
    </div>
    <div class="payment-entry-amount">${money(row.amount || 0)}</div>
  </div>`;
}

function renderReceivedPaymentsMethodCards(){
  receivedPaymentsMethodCards.innerHTML = `
    <div class="method-mini-card"><small>Efectivo</small><strong>${money(receivedPaymentsSummary.cash_total || 0)}</strong></div>
    <div class="method-mini-card"><small>PIX</small><strong>${money(receivedPaymentsSummary.pix_total || 0)}</strong></div>
    <div class="method-mini-card"><small>Transferencia</small><strong>${money(receivedPaymentsSummary.transfer_total || 0)}</strong></div>
    <div class="method-mini-card"><small>Renovación</small><strong>${money(receivedPaymentsSummary.renewal_total || 0)}</strong></div>`;
}

function renderReceivedPaymentsList(){
  receivedPaymentsCount.textContent = receivedPaymentsSummary.count || 0;
  receivedPaymentsTotal.textContent = money(receivedPaymentsSummary.total_amount || 0);
  renderReceivedPaymentsMethodCards();
  if(!receivedPaymentRows.length){
    receivedPaymentsList.innerHTML = '<div class="payments-empty">No hay pagos registrados para los filtros seleccionados.</div>';
    return;
  }
  receivedPaymentsList.innerHTML = receivedPaymentRows.map(row=>paymentEntryHtml(row,{showRoute:true})).join('');
}

function receivedPaymentsIsoDate(dateObj){
  const local=new Date(dateObj.getTime()-dateObj.getTimezoneOffset()*60000);
  return local.toISOString().slice(0,10);
}

function updateReceivedPaymentsDateVisibility(mode){
  const box=document.getElementById("receivedPaymentsDateRange");
  if(!box)return;
  const show=mode==="between";
  box.classList.toggle("open",show);
  box.setAttribute("aria-hidden",show?"false":"true");
}

function markReceivedPaymentsBetween(){
  const between=document.querySelector('input[name="receivedPaymentsPeriod"][value="between"]');
  if(between)between.checked=true;
  updateReceivedPaymentsDateVisibility("between");
}

function setReceivedPaymentsPeriod(mode,load=true){
  const today=new Date();

  updateReceivedPaymentsDateVisibility(mode);

  if(mode==="today"){
    const iso=receivedPaymentsIsoDate(today);
    receivedPaymentsDateFrom.value=iso;
    receivedPaymentsDateTo.value=iso;
  }else if(mode==="yesterday"){
    const yesterday=new Date(today);
    yesterday.setDate(today.getDate()-1);
    const iso=receivedPaymentsIsoDate(yesterday);
    receivedPaymentsDateFrom.value=iso;
    receivedPaymentsDateTo.value=iso;
  }

  if(load && collectionsMode==="received")loadReceivedPayments();
}


let receivedPaymentsPickerType="route";

function syncReceivedPaymentsPickerButtons(){
  const routeSelect=document.getElementById("receivedPaymentsRoute");
  const staffSelect=document.getElementById("receivedPaymentsStaff");
  const routeText=document.getElementById("receivedPaymentsRouteButtonText");
  const staffText=document.getElementById("receivedPaymentsStaffButtonText");

  if(routeText && routeSelect){
    routeText.textContent=routeSelect.selectedOptions?.[0]?.textContent||"Todas las rutas";
  }
  if(staffText && staffSelect){
    staffText.textContent=staffSelect.selectedOptions?.[0]?.textContent||"Todos los funcionarios";
  }
}

function receivedPaymentsStaffMeta(person){
  const role=["company_admin","admin"].includes(person?.role)?"ADM":"Cobrador";
  const routes=Array.isArray(person?.routes)
    ? person.routes.map(route=>route?.name).filter(Boolean).join(" · ")
    : "";
  return routes ? `${role} · ${routes}` : role;
}

function receivedPaymentsRouteMeta(route){
  return [route?.city,route?.country].filter(Boolean).join(" · ") || "Ruta";
}

function receivedPaymentsPickerItems(){
  const search=normalizeSearchText(document.getElementById("receivedPaymentsPickerSearch")?.value||"");

  if(receivedPaymentsPickerType==="route"){
    const items=[
      {id:"",name:"Todas las rutas",meta:"Ver todas las rutas",icon:"🗺️",all:true},
      ...receivedPaymentsRoutesCache.map(route=>({
        id:String(route.id),
        name:route.name||"Ruta",
        meta:receivedPaymentsRouteMeta(route),
        icon:"📍"
      }))
    ];

    return search
      ? items.filter(item=>normalizeSearchText(`${item.name} ${item.meta}`).includes(search))
      : items;
  }

  const items=[
    {id:"",name:"Todos los funcionarios",meta:"Ver todo el personal",icon:"👥",all:true},
    ...receivedPaymentsStaffCache.map(person=>({
      id:String(person.id),
      name:person.name||person.full_name||"Funcionario",
      meta:receivedPaymentsStaffMeta(person),
      icon:["company_admin","admin"].includes(person?.role)?"👨‍💼":"🧑‍💼"
    }))
  ];

  return search
    ? items.filter(item=>normalizeSearchText(`${item.name} ${item.meta}`).includes(search))
    : items;
}

function renderReceivedPaymentsPickerList(){
  const list=document.getElementById("receivedPaymentsPickerList");
  if(!list)return;

  const select=receivedPaymentsPickerType==="route"
    ? document.getElementById("receivedPaymentsRoute")
    : document.getElementById("receivedPaymentsStaff");

  const current=String(select?.value||"");
  const items=receivedPaymentsPickerItems();

  if(!items.length){
    list.innerHTML='<div class="received-filter-picker-empty">No se encontraron coincidencias.</div>';
    return;
  }

  list.innerHTML=items.map(item=>{
    const selected=String(item.id)===current;
    return `<button type="button" class="received-filter-picker-item ${selected?"selected":""}"
      onclick="selectReceivedPaymentsPickerValue('${legacyEscapeHtml(String(item.id))}')">
      <span class="received-filter-picker-item-icon">${item.icon}</span>
      <span class="received-filter-picker-item-copy">
        <strong>${legacyEscapeHtml(item.name)}</strong>
        <small>${legacyEscapeHtml(item.meta||"")}</small>
      </span>
      <span class="received-filter-picker-check">${selected?"✓":""}</span>
    </button>`;
  }).join("");
}

async function openReceivedPaymentsPicker(type){
  receivedPaymentsPickerType=type==="staff"?"staff":"route";

  if(receivedPaymentsPickerType==="route"){
    await ensureReceivedPaymentsRoutes(false);
  }else{
    await ensureReceivedPaymentsStaff(false);
  }

  const backdrop=document.getElementById("receivedPaymentsPickerBackdrop");
  const title=document.getElementById("receivedPaymentsPickerTitle");
  const eyebrow=document.getElementById("receivedPaymentsPickerEyebrow");
  const search=document.getElementById("receivedPaymentsPickerSearch");

  if(!backdrop)return;

  if(title)title.textContent=receivedPaymentsPickerType==="route"?"Seleccionar ruta":"Seleccionar funcionario";
  if(eyebrow)eyebrow.textContent=receivedPaymentsPickerType==="route"?"Rutas":"Personal";
  if(search){
    search.value="";
    search.placeholder=receivedPaymentsPickerType==="route"?"Buscar ruta...":"Buscar funcionario...";
  }

  renderReceivedPaymentsPickerList();
  backdrop.classList.add("open");
  document.body.classList.add("received-filter-picker-open");

  setTimeout(()=>search?.focus({preventScroll:true}),80);
}

function closeReceivedPaymentsPicker(event){
  if(event && event.target!==event.currentTarget)return;
  document.getElementById("receivedPaymentsPickerBackdrop")?.classList.remove("open");
  document.body.classList.remove("received-filter-picker-open");
}

function selectReceivedPaymentsPickerValue(value){
  const select=receivedPaymentsPickerType==="route"
    ? document.getElementById("receivedPaymentsRoute")
    : document.getElementById("receivedPaymentsStaff");

  if(!select)return;

  select.value=String(value??"");
  syncReceivedPaymentsPickerButtons();
  closeReceivedPaymentsPicker();
  select.dispatchEvent(new Event("change",{bubbles:true}));
}

async function ensureReceivedPaymentsRoutes(force=false){
  const select=document.getElementById("receivedPaymentsRoute");
  if(!select)return [];

  const now=Date.now();
  if(!force && receivedPaymentsRoutesCache.length && (now-receivedPaymentsRoutesLoadedAt)<60000){
    const current=select.value;
    select.innerHTML='<option value="">Todas las rutas</option>'+
      receivedPaymentsRoutesCache.map(route=>`<option value="${route.id}">${legacyEscapeHtml(route.name||"Ruta")}</option>`).join("");
    if(receivedPaymentsRoutesCache.some(route=>String(route.id)===String(current)))select.value=current;
    syncReceivedPaymentsPickerButtons();
    return receivedPaymentsRoutesCache;
  }

  try{
    const routes=await api("/api/admin/routes");
    receivedPaymentsRoutesCache=Array.isArray(routes)?routes:[];
    receivedPaymentsRoutesLoadedAt=Date.now();

    const current=select.value;
    select.innerHTML='<option value="">Todas las rutas</option>'+
      receivedPaymentsRoutesCache.map(route=>`<option value="${route.id}">${legacyEscapeHtml(route.name||"Ruta")}</option>`).join("");
    if(receivedPaymentsRoutesCache.some(route=>String(route.id)===String(current)))select.value=current;
    syncReceivedPaymentsPickerButtons();
  }catch(_){
    if(!select.options.length){
      select.innerHTML='<option value="">Todas las rutas</option>';
    }
  }

  return receivedPaymentsRoutesCache;
}


async function ensureReceivedPaymentsStaff(force=false){
  const select=document.getElementById("receivedPaymentsStaff");
  if(!select)return [];

  const now=Date.now();
  if(!force && receivedPaymentsStaffCache.length && (now-receivedPaymentsStaffLoadedAt)<60000){
    const current=select.value;
    select.innerHTML='<option value="">Todos los funcionarios</option>'+
      receivedPaymentsStaffCache.map(person=>`<option value="${person.id}">${legacyEscapeHtml(person.name||person.full_name||"Funcionario")}</option>`).join("");
    if(receivedPaymentsStaffCache.some(person=>String(person.id)===String(current)))select.value=current;
    syncReceivedPaymentsPickerButtons();
    return receivedPaymentsStaffCache;
  }

  try{
    const staff=await api("/api/admin/staff");
    receivedPaymentsStaffCache=Array.isArray(staff)?staff:[];
    receivedPaymentsStaffLoadedAt=Date.now();

    const current=select.value;
    select.innerHTML='<option value="">Todos los funcionarios</option>'+
      receivedPaymentsStaffCache.map(person=>`<option value="${person.id}">${legacyEscapeHtml(person.name||person.full_name||"Funcionario")}</option>`).join("");

    if(receivedPaymentsStaffCache.some(person=>String(person.id)===String(current)))select.value=current;
    syncReceivedPaymentsPickerButtons();
  }catch(_){
    if(!select.options.length){
      select.innerHTML='<option value="">Todos los funcionarios</option>';
    }
  }

  return receivedPaymentsStaffCache;
}

function receivedPaymentsStaffMatch(row,staffId){
  if(!staffId)return true;

  const directIds=[
    row?.staff_id,
    row?.responsible_id,
    row?.responsible_user_id,
    row?.user_id,
    row?.collector_id,
    row?.created_by_id,
    row?.registered_by_id
  ].filter(value=>value!==null && value!==undefined && value!=="");

  if(directIds.some(value=>String(value)===String(staffId)))return true;

  const staff=receivedPaymentsStaffCache.find(person=>String(person.id)===String(staffId));
  const selectedName=normalizeSearchText(staff?.name||staff?.full_name||"");
  const responsibleName=normalizeSearchText(
    row?.responsible||
    row?.responsible_name||
    row?.staff_name||
    row?.collector_name||
    row?.created_by_name||
    ""
  );

  return !!selectedName && !!responsibleName && selectedName===responsibleName;
}

function receivedPaymentsRouteMatch(row,routeId){
  if(!routeId)return true;

  if(row?.route_id!=null && String(row.route_id)===String(routeId))return true;

  const route=receivedPaymentsRoutesCache.find(item=>String(item.id)===String(routeId));
  if(route?.name && row?.route_name){
    return normalizeSearchText(row.route_name)===normalizeSearchText(route.name);
  }

  return false;
}

function summarizeReceivedPaymentRows(rows){
  const summary={
    count:0,
    total_amount:0,
    cash_total:0,
    pix_total:0,
    transfer_total:0,
    renewal_total:0
  };

  (rows||[]).forEach(row=>{
    const amount=Number(row?.amount||0);
    const method=String(row?.payment_method||"cash").toLowerCase();

    summary.count+=1;
    summary.total_amount+=amount;

    if(method==="pix"){
      summary.pix_total+=amount;
    }else if(method==="transfer" || method==="transferencia"){
      summary.transfer_total+=amount;
    }else if(["renewal","renovacion","renovación"].includes(method)){
      summary.renewal_total+=amount;
    }else{
      summary.cash_total+=amount;
    }
  });

  return summary;
}

async function loadReceivedPayments(){
  try{
    await Promise.all([
      ensureReceivedPaymentsRoutes(false),
      ensureReceivedPaymentsStaff(false)
    ]);

    const params = new URLSearchParams();
    if(receivedPaymentsSearch.value.trim())params.set('search',receivedPaymentsSearch.value.trim());
    if(receivedPaymentsDateFrom.value)params.set('date_from',receivedPaymentsDateFrom.value);
    if(receivedPaymentsDateTo.value)params.set('date_to',receivedPaymentsDateTo.value);
    if(receivedPaymentsMethod.value && receivedPaymentsMethod.value!=='all')params.set('payment_method',receivedPaymentsMethod.value);

    const selectedRoute=receivedPaymentsRoute?.value||"";
    const selectedStaff=receivedPaymentsStaff?.value||"";

    if(selectedRoute)params.set('route_id',selectedRoute);
    if(selectedStaff)params.set('staff_id',selectedStaff);

    const order = document.querySelector('input[name="receivedPaymentsOrder"]:checked')?.value || 'date';
    params.set('order_by',order);

    const data = await api('/api/admin/payments/received?' + params.toString());
    let rows = Array.isArray(data.rows)?data.rows:[];

    // Compatibilidad: además del filtro enviado al backend, se aplica respaldo
    // local por ruta y funcionario usando los datos disponibles en cada pago.
    if(selectedRoute){
      rows=rows.filter(row=>receivedPaymentsRouteMatch(row,selectedRoute));
    }
    if(selectedStaff){
      rows=rows.filter(row=>receivedPaymentsStaffMatch(row,selectedStaff));
    }

    const localSummary=summarizeReceivedPaymentRows(rows);
    if(selectedRoute||selectedStaff){
      receivedPaymentsSummary=localSummary;
    }else{
      const serverSummary=data.summary||{};
      receivedPaymentsSummary={
        ...localSummary,
        ...serverSummary,
        renewal_total:Number(serverSummary.renewal_total ?? localSummary.renewal_total ?? 0)
      };
    }

    receivedPaymentRows = rows;
    renderReceivedPaymentsList();
  }catch(e){
    receivedPaymentRows = [];
    receivedPaymentsSummary = {count:0,total_amount:0,cash_total:0,pix_total:0,transfer_total:0,renewal_total:0};
    renderReceivedPaymentsList();
    receivedPaymentsList.innerHTML = `<div class="error" style="display:block;margin:12px;border-radius:12px"><strong>No fue posible cargar los pagos recibidos.</strong><br>${legacyEscapeHtml(e.message)}</div>`;
  }
}

function receivedPaymentsPrintableHtml(){
  const selectedRouteName=receivedPaymentsRoute?.selectedOptions?.[0]?.textContent||"Todas las rutas";
  const selectedStaffName=receivedPaymentsStaff?.selectedOptions?.[0]?.textContent||"Todos los funcionarios";
  return `<!doctype html><html><head><meta charset="utf-8"><title>Pagos recibidos</title><style>body{font-family:Arial,sans-serif;padding:24px;color:#1d2249}h1{margin:0 0 8px}p{margin:6px 0 18px}.row{padding:10px 0;border-bottom:1px solid #ddd}.amount{float:right;font-weight:700}.meta{color:#555;font-size:13px;margin-top:4px}</style></head><body><h1>Pagos recibidos · Sutil</h1><p>Ruta: <strong>${legacyEscapeHtml(selectedRouteName)}</strong> · Funcionario: <strong>${legacyEscapeHtml(selectedStaffName)}</strong> · Listagem: <strong>${receivedPaymentsSummary.count || 0}</strong> · Total: <strong>${money(receivedPaymentsSummary.total_amount || 0)}</strong></p>${(receivedPaymentRows||[]).map(row=>`<div class="row"><div><strong>${legacyEscapeHtml(row.client_name || 'Sin cliente')}</strong><span class="amount">${money(row.amount || 0)}</span></div><div class="meta">${legacyEscapeHtml(receivedPaymentDisplayDate(row))} · ${legacyEscapeHtml(paymentMethodLabel(row.payment_method))} · ${legacyEscapeHtml(row.responsible || 'Administrador')}</div></div>`).join('') || '<p>Sin pagos.</p>'}


</body></html>`;
}

function printReceivedPaymentsReport(){
  const w=window.open('','_blank','width=900,height=700');
  if(!w){alert('El navegador bloqueó la ventana para imprimir.');return;}
  w.document.write(receivedPaymentsPrintableHtml());
  w.document.close();
  w.focus();
  setTimeout(()=>w.print(),300);
}

function renderClientPaymentsPicker(){
  const list=document.getElementById("clientPaymentsPickerList");
  if(!list)return;
  const rawTerm=String(clientPaymentsSearch.value||"").trim();
  const term=normalizeSearchText(rawTerm);
  const pool=smartClientPool();

  let rows;
  if(term){
    rows=smartClientRank(rawTerm);
  }else{
    rows=pool
      .slice()
      .sort((a,b)=>String(a.name||"").localeCompare(String(b.name||"")));
  }

  list.innerHTML=rows.length?rows.map(client=>`
    <div class="client-picker-row" onclick="selectClientPaymentsClient(${client.id})">
      <div>
        <div class="client-picker-name">${legacyEscapeHtml(client.name||"Sin nombre")}</div>
        <div class="client-picker-meta">${legacyEscapeHtml(client.client_code||"Sin código")} · ${legacyEscapeHtml(client.document_number||"Sin documento")}</div>
      </div>
      <div class="client-picker-meta">${legacyEscapeHtml(client.fixed_phone||"---")}</div>
      <div class="client-picker-meta">${legacyEscapeHtml(client.phone||client.phone2||"---")}</div>
    </div>`).join(""):'<div class="client-picker-empty">No se encontraron clientes.</div>';
}

function renderClientPaymentsSuggestions(){
  renderClientPaymentsPicker();
}

function selectClientPaymentsClient(clientId){
  const client=
    (Array.isArray(clientRows)?clientRows:[]).find(row=>Number(row.id)===Number(clientId))
    || smartClientPool().find(row=>Number(row.id)===Number(clientId));

  if(!client){
    const list=document.getElementById("clientPaymentsPickerList");
    if(list)list.innerHTML='<div class="client-picker-empty">No fue posible abrir este cliente. Actualiza la lista e intenta nuevamente.</div>';
    return;
  }

  selectedClientPaymentsClient=client;
  clientPaymentsData=null;

  if(clientPaymentsSearch)clientPaymentsSearch.value=client.name||client.client_code||client.document_number||"";
  closeSmartClientSuggestions();

  clientPaymentsPickerView.style.display="none";
  clientPaymentsDetailView.style.display="block";
  clientPaymentsHeaderName.textContent=(client.name||"CLIENTE").toUpperCase();
  clientPaymentsHeaderDocument.textContent=client.document_number||"---";
  clientPaymentsHeaderFixed.textContent=client.fixed_phone||"---";
  clientPaymentsHeaderMobile.textContent=client.phone||client.phone2||"---";

  setClientPaymentsPeriod("between",true);
  renderClientPaymentsPane();
  loadClientPaymentsHistory();
}

function clearClientPaymentsSelection(){
  selectedClientPaymentsClient=null;
  clientPaymentsData=null;
  clientPaymentsSearch.value="";
  clientPaymentsDetailView.style.display="none";
  clientPaymentsPickerView.style.display="block";
  renderClientPaymentsPicker();
}

function clientPaymentsIsoDate(dateObj){
  const local=new Date(dateObj.getTime()-dateObj.getTimezoneOffset()*60000);
  return local.toISOString().slice(0,10);
}

function updateClientPaymentsDateVisibility(mode){
  const box=document.getElementById("clientPaymentsDateRange");
  if(!box)return;
  const show=mode==="between";
  box.classList.toggle("open",show);
  box.setAttribute("aria-hidden",show?"false":"true");
}

function setClientPaymentsPeriod(mode,keepCurrentBetween=false){
  const today=new Date();

  updateClientPaymentsDateVisibility(mode);

  if(mode==="today"){
    const iso=clientPaymentsIsoDate(today);
    clientPaymentsDateFrom.value=iso;
    clientPaymentsDateTo.value=iso;
  }else if(mode==="yesterday"){
    const yesterday=new Date(today);
    yesterday.setDate(yesterday.getDate()-1);
    const iso=clientPaymentsIsoDate(yesterday);
    clientPaymentsDateFrom.value=iso;
    clientPaymentsDateTo.value=iso;
  }else if(!keepCurrentBetween){
    const firstDay=new Date(today.getFullYear(),today.getMonth(),1);
    clientPaymentsDateFrom.value=clientPaymentsIsoDate(firstDay);
    clientPaymentsDateTo.value=clientPaymentsIsoDate(today);
  }

  document.querySelectorAll('input[name="clientPaymentsPeriod"]').forEach(input=>{
    input.checked=input.value===mode;
  });

  if(mode!=="between" && selectedClientPaymentsClient)loadClientPaymentsHistory();
}

function renderClientPaymentsPane(){
  if(!selectedClientPaymentsClient){
    clientPaymentsPickerView.style.display="block";
    clientPaymentsDetailView.style.display="none";
    renderClientPaymentsPicker();
    return;
  }

  clientPaymentsPickerView.style.display="none";
  clientPaymentsDetailView.style.display="block";

  if(!clientPaymentsData){
    clientPaymentsSummary.innerHTML="";
    clientPaymentsList.innerHTML='<div class="payments-empty">Cargando pagos del cliente...</div>';
    clientPaymentsFooterTotal.textContent=money(0);
    return;
  }

  const summary=clientPaymentsData.summary||{};
  const client=clientPaymentsData.client||{};
  const rows=clientPaymentsData.payments||[];

  clientPaymentsSummary.innerHTML=`
    <div class="card"><small>Total pagos</small><div class="metric">${money(summary.payments_total||0)}</div></div>
    <div class="card"><small>Efectivo</small><div class="metric">${money(summary.cash_total||0)}</div></div>
    <div class="card"><small>PIX</small><div class="metric">${money(summary.pix_total||0)}</div></div>
    <div class="card"><small>Transferencia</small><div class="metric">${money(summary.transfer_total||0)}</div></div>`;

  clientPaymentsList.innerHTML=rows.length?rows.map(row=>paymentEntryHtml({
    ...row,
    client_name:client.name,
    client_code:client.client_code,
    route_name:row.route_name||client.route_name
  })).join(""):'<div class="payments-empty">No hay pagos del cliente en ese período.</div>';

  clientPaymentsFooterTotal.textContent=money(summary.payments_total||0);
  clientPaymentsNote.textContent=`${rows.length} pago(s) encontrados · Ruta: ${client.route_name||"Sin ruta"}`;
}

async function loadClientPaymentsHistory(){
  if(!selectedClientPaymentsClient){
    renderClientPaymentsPicker();
    return;
  }
  try{
    clientPaymentsList.innerHTML='<div class="payments-empty">Consultando pagos...</div>';
    const params=new URLSearchParams();
    if(clientPaymentsDateFrom.value)params.set("date_from",clientPaymentsDateFrom.value);
    if(clientPaymentsDateTo.value)params.set("date_to",clientPaymentsDateTo.value);
    clientPaymentsData=await api(`/api/admin/clients/${selectedClientPaymentsClient.id}/account-statement?${params.toString()}`);
    renderClientPaymentsPane();
  }catch(e){
    clientPaymentsData=null;
    clientPaymentsList.innerHTML=`<div class="error" style="display:block;margin:12px;border-radius:12px"><strong>No fue posible cargar los pagos.</strong><br>${legacyEscapeHtml(e.message)}</div>`;
    clientPaymentsFooterTotal.textContent=money(0);
  }
}

function clientPaymentsPrintableHtml(){
  const client=clientPaymentsData?.client||selectedClientPaymentsClient||{};
  const rows=clientPaymentsData?.payments||[];
  const summary=clientPaymentsData?.summary||{};
  return `<!doctype html><html><head><meta charset="utf-8"><title>Extracto de pagos</title><style>body{font-family:Arial,sans-serif;padding:24px;color:#1d2249}h1{margin:0 0 8px}.meta{color:#555;margin-bottom:18px}.row{padding:10px 0;border-bottom:1px solid #ddd}.amount{float:right;font-weight:700}

/* Sutil V1.6.17 · Personal y permisos · navegación por submódulos */
.staff-hub-card{padding:18px 20px;margin-bottom:16px}
.staff-hub-title{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex-wrap:wrap}
.staff-hub-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}
.staff-hub-btn{border:1px solid #d7e0e8;background:#fff;border-radius:16px;padding:16px 14px;min-height:108px;cursor:pointer;text-align:left;transition:.16s ease;box-shadow:0 2px 8px rgba(20,40,60,.04)}
.staff-hub-btn:hover{transform:translateY(-1px);border-color:var(--primary,#1769aa);box-shadow:0 6px 16px rgba(20,40,60,.08)}
.staff-hub-btn.active{border:2px solid var(--primary,#1769aa);background:linear-gradient(180deg,#f7fbff,#edf6ff)}
.staff-hub-btn .staff-hub-icon{font-size:27px;display:block;margin-bottom:8px}
.staff-hub-btn strong{display:block;font-size:16px;color:#123b69;margin-bottom:4px}
.staff-hub-btn small{display:block;color:#65717d;line-height:1.35}
.staff-view-panel{display:none}
.staff-view-panel.active{display:block}
.staff-location-layout{display:grid;grid-template-columns:minmax(270px,360px) minmax(0,1fr);gap:16px;margin-top:14px}
.staff-location-sidebar,.staff-location-mapbox{border:1px solid #dfe6ec;border-radius:16px;background:#fff;overflow:hidden}
.staff-location-filters{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px;border-bottom:1px solid #e4e9ee}
.staff-location-filters label:first-child{grid-column:1/-1}
.staff-location-list{max-height:520px;overflow:auto}
.staff-location-row{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid #edf1f4;cursor:pointer}
.staff-location-row:hover,.staff-location-row.active{background:#f3f8fd}
.staff-location-avatar{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#e8eef4;color:#34495e;font-weight:800;flex:0 0 auto}
.staff-location-person{min-width:0;flex:1}
.staff-location-person strong,.staff-location-person small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.staff-location-person small{color:#6c7883;margin-top:3px}
.staff-location-state{font-size:11px;font-weight:800;padding:5px 8px;border-radius:999px;background:#f0f2f4;color:#66717c;white-space:nowrap}
.staff-location-state.live{background:#dcfce7;color:#177442}
.staff-location-maphead{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid #e4e9ee;flex-wrap:wrap}
.staff-location-maparea{min-height:390px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#f7fafc,#edf2f6);padding:22px;text-align:center;color:#63717d}
.staff-location-maparea iframe{width:100%;height:390px;border:0;border-radius:0}
.staff-location-empty-icon{font-size:42px;margin-bottom:10px}
.staff-location-footer{padding:10px 16px;border-top:1px solid #e4e9ee;font-size:12px;color:#6a7681;background:#fbfcfd}
@media(max-width:850px){.staff-hub-actions{grid-template-columns:1fr}.staff-location-layout{grid-template-columns:1fr}.staff-location-list{max-height:300px}.staff-location-filters{grid-template-columns:1fr}.staff-location-filters label:first-child{grid-column:auto}}


/* Sutil V1.6.18 · Personal y permisos en pantallas internas independientes */
.staff-navigation-card{padding:18px 20px;margin-bottom:16px}
.staff-navigation-card .module-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:16px}
.staff-nav-module{min-height:145px}
.staff-nav-module.active{border:2px solid var(--sutil-primary,#1769aa) !important;background:var(--sutil-primary-soft,#eef6ff) !important;box-shadow:0 5px 16px color-mix(in srgb,var(--sutil-primary,#1769aa) 18%,transparent) !important}
.staff-nav-module .module-title{font-size:18px}
.staff-nav-module small{font-size:13px;line-height:1.35}
.staff-view-panel{display:none !important;margin-top:0}
.staff-view-panel.active{display:block !important}
.staff-subnav{display:flex;justify-content:flex-start;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid #e5e9ed}
@media(max-width:850px){.staff-navigation-card .module-grid{grid-template-columns:1fr}.staff-nav-module{min-height:118px}}
</style>
<style id="sutil-v82-pix-review-contrast">
/* v82 · contraste estable del modal Revisar comprobante */
.pix-review-card{
  background:#ffffff !important;
  color:#172033 !important;
}
.pix-review-head{
  background:#ffffff !important;
  border-bottom-color:#dfe5eb !important;
}
.pix-review-head h3{
  color:#172033 !important;
  opacity:1 !important;
}
#pixReviewSubtitle{
  color:#5b6675 !important;
  opacity:1 !important;
}
.pix-review-body{
  background:#ffffff !important;
  color:#172033 !important;
}
.pix-review-body .pix-decision-grid label{
  color:#172033 !important;
}
.pix-review-body .pix-decision-grid input,
.pix-review-body .pix-decision-grid textarea{
  background:#ffffff !important;
  color:#172033 !important;
  border-color:#aeb9c5 !important;
}
.pix-review-body .pix-decision-grid input::placeholder,
.pix-review-body .pix-decision-grid textarea::placeholder{
  color:#727d89 !important;
  opacity:1 !important;
}
/* Las tarjetas resumen conservan el tema, pero garantizan texto legible. */
body[data-sutil-theme="dark"] .pix-summary-box{
  color:#f7fbff !important;
}
body[data-sutil-theme="dark"] .pix-summary-box small{
  color:#cbd5e1 !important;
}
body[data-sutil-theme="dark"] .pix-summary-box strong{
  color:#ffffff !important;
}
body[data-sutil-theme="light"] .pix-summary-box{
  color:#172033 !important;
}
body[data-sutil-theme="light"] .pix-summary-box small{
  color:#5b6675 !important;
}
body[data-sutil-theme="light"] .pix-summary-box strong{
  color:#172033 !important;
}
@media(max-width:650px){
  .pix-review-head{padding:16px 18px !important;}
  .pix-review-head h3{font-size:22px !important;line-height:1.2 !important;}
  #pixReviewSubtitle{font-size:15px !important;line-height:1.35 !important;margin-top:5px !important;}
}
</style>

<style id="sutil-fix-12-15-55-contactos-ajuste">
@media(max-width:760px){
  #clientsSection #clientsTable tr.client-row > td:nth-child(5)::before{content:"" !important;}
  #clientsSection #clientsTable .client-phone-inline{
    display:flex;align-items:center;gap:6px;min-width:0;white-space:nowrap;
  }
  #clientsSection #clientsTable .client-inline-call-btn{
    width:30px;height:30px;min-width:30px;padding:0 !important;border:1px solid rgba(255,255,255,.18);
    border-radius:9px;background:#159a62;color:#fff;display:inline-flex;align-items:center;justify-content:center;
    font-size:15px;line-height:1;box-shadow:0 4px 10px rgba(0,0,0,.18);flex:0 0 30px;
  }
  #clientsSection #clientsTable .client-quick-contact{
    right:14px !important;top:58px !important;gap:7px !important;
  }
  #clientsSection #clientsTable .client-quick-contact-btn.call{display:none !important;}
}
</style>
</head><body><h1>Extracto de pagos · Sutil</h1><div class="meta"><strong>${legacyEscapeHtml(client.name||"Cliente")}</strong> · ${legacyEscapeHtml(client.client_code||"Sin código")}<br>Período: ${legacyEscapeHtml(clientPaymentsDateFrom.value||"—")} a ${legacyEscapeHtml(clientPaymentsDateTo.value||"—")}</div>${rows.map(row=>`<div class="row"><strong>${legacyEscapeHtml(formatDateTimeEs(row.paid_at))}</strong><span class="amount">${money(row.amount||0)}</span><br><small>${legacyEscapeHtml(paymentMethodLabel(row.payment_method))} · ${legacyEscapeHtml(row.responsible||"Administrador")}</small></div>`).join("")||"<p>Sin pagos.</p>"}<h2>Total: ${money(summary.payments_total||0)}</h2></body></html>`;
}

function printClientPaymentsReport(){
  if(!selectedClientPaymentsClient||!clientPaymentsData){
    alert("Primero selecciona y consulta un cliente.");
    return;
  }
  const w=window.open("","_blank","width=900,height=700");
  if(!w){alert("El navegador bloqueó la ventana para imprimir.");return;}
  w.document.write(clientPaymentsPrintableHtml());
  w.document.close();
  w.focus();
  setTimeout(()=>w.print(),300);
}

function collectionDebtPriority(row){
  const statusPriority = {
    overdue:0,
    partial_overdue:0,
    today:1,
    partial:2,
    upcoming:3,
    paid:9
  };
  const status = statusPriority[row.status] ?? 5;
  const due = row.due_date || "9999-12-31";
  const number = Number(row.installment_number || 0);
  return [status,due,number];
}

function compareCollectionDebtRows(a,b){
  const pa=collectionDebtPriority(a);
  const pb=collectionDebtPriority(b);
  if(pa[0]!==pb[0])return pa[0]-pb[0];
  if(pa[1]!==pb[1])return String(pa[1]).localeCompare(String(pb[1]));
  return pa[2]-pb[2];
}

function collectionCompactRowHtml(r){
  const client=collectionClientData(r);
  const photoClass=collectionPhotoStatusClass(r);
  return `<tr class="collections-mobile-card collections-mobile-compact">
    <td class="collections-client-cell collections-mobile-client" data-label="Cliente">
      <div class="collections-client-wrap">
        <button
          type="button"
          class="collections-photo-button ${photoClass}"
          title="Abrir ficha del cliente"
          onclick="loadClientDetail(${r.client_id});openSection('clientsSection')">
          ${clientPhotoHtml(client)}
        </button>
        <div class="collections-client-text">
          <span class="collections-client-name">${r.client_name}</span>
          <span class="collections-client-code">${r.client_code || "Sin código"}</span>
          ${r.loan_registered_late ? '<span style="display:inline-block;margin-top:3px;padding:2px 7px;border-radius:999px;background:#fff1cf;color:#8a5a00;font-size:11px;font-weight:800">🛠 Crédito registrado tarde</span>' : ''}
          ${collectionClientIcons(client)}
        </div>
      </div>
    </td>
    <td data-label="Cuota pendiente">
      <strong>#${r.installment_number}</strong><br>
      <span class="muted">${formatDateEs(r.due_date)}</span>
    </td>
    <td class="collections-compact-balance" data-label="Saldo">${money(r.amount_remaining)}</td>
    <td class="collections-mobile-actions-cell" data-label="Acciones">
      <div class="collections-actions">
        ${r.pix?.status==="checking"
          ? `<button class="btn secondary" style="padding:6px 9px;font-size:12px" disabled>${r.pix?.sync_failed?"PIX con error de sincronización":(r.pix?.offline_pending?"PIX pendiente de sincronizar":"PIX en comprobación")}</button>`
          : (r.amount_remaining > 0 ? `<button class="btn" style="padding:6px 9px;font-size:12px" onclick="openDirectPayment(${r.client_id},'${String(r.client_name).replaceAll("'","\'")}',${r.amount_remaining},${r.installment_number},${r.loan_id},'${r.due_date || ""}',${r.amount_due || r.amount_remaining},'${r.status || "upcoming"}',${r.installment_id},${r.route_id || 'null'},${r.loan_registered_late?"true":"false"},'${r.open_cash_date || ""}','${r.operational_start_date || ""}')">Agregar pago</button>` : "")}
        <button class="btn secondary" style="padding:6px 9px;font-size:12px" onclick="viewLoan(${r.loan_id})">Ver crédito</button>
      </div>
    </td>
  </tr>`;
}

function collectionDetailedRowHtml(r){
  const baseRowClass = r.status === "paid" ? "row-current" :
    (r.status === "today" ? "row-today" :
    (["overdue","partial_overdue"].includes(r.status) ? "row-overdue" : "row-inactive"));
  const rowClass = [
    baseRowClass,
    r.status === "today" ? "collections-row-today" : "",
    Number(r.days_overdue || 0) > 30 ? "collections-row-overdue-long" : ""
  ].filter(Boolean).join(" ");
  const client = collectionClientData(r);
  const photoClass = collectionPhotoStatusClass(r);
  const daysHtml = Number(r.days_overdue || 0) > 30
    ? `<span class="collections-days-long">${r.days_overdue}</span>`
    : (r.days_overdue || 0);

  return `<tr class="${rowClass} collections-mobile-card collections-mobile-detailed">
    <td class="collections-client-cell collections-mobile-client" data-label="Cliente">
      <div class="collections-client-wrap">
        <button
          type="button"
          class="collections-photo-button ${photoClass}"
          title="Abrir ficha del cliente"
          onclick="loadClientDetail(${r.client_id});openSection('clientsSection')">
          ${clientPhotoHtml(client)}
        </button>
        <div class="collections-client-text">
          <span class="collections-client-name">${r.client_name}</span>
          <span class="collections-client-code">${r.client_code || "Sin código"}</span>
          ${r.loan_registered_late ? '<span style="display:inline-block;margin-top:3px;padding:2px 7px;border-radius:999px;background:#fff1cf;color:#8a5a00;font-size:11px;font-weight:800">🛠 Crédito registrado tarde</span>' : ''}
          ${collectionClientIcons(client)}
        </div>
      </div>
    </td>
    <td data-label="Ruta">${r.route_name || "Sin ruta"}</td>
    <td data-label="Cuota">#${r.installment_number}</td>
    <td data-label="Vencimiento">${formatDateEs(r.due_date)}</td>
    <td data-label="Días atraso" class="${r.days_overdue>0?"status-overdue":""}">${daysHtml}</td>
    <td data-label="Valor">${money(r.amount_due)}</td>
    <td data-label="Pagado">${money(r.amount_paid)}</td>
    <td data-label="Saldo">${money(r.amount_remaining)}</td>
    <td data-label="Estado">${collectionStatusBadge(r)}</td>
    <td data-label="PIX">${collectionPixBadge(r)}</td>
    <td class="collections-mobile-actions-cell" data-label="Acciones">
      <div class="collections-actions">
        ${r.pix?.status==="checking"
          ? `<button class="btn secondary" style="padding:6px 9px;font-size:12px" disabled>${r.pix?.sync_failed?"PIX con error de sincronización":(r.pix?.offline_pending?"PIX pendiente de sincronizar":"PIX en comprobación")}</button>`
          : (r.amount_remaining > 0 ? `<button class="btn" style="padding:6px 9px;font-size:12px" onclick="openDirectPayment(${r.client_id},'${String(r.client_name).replaceAll("'","\'")}',${r.amount_remaining},${r.installment_number},${r.loan_id},'${r.due_date || ""}',${r.amount_due || r.amount_remaining},'${r.status || "upcoming"}',${r.installment_id},${r.route_id || 'null'},${r.loan_registered_late?"true":"false"},'${r.open_cash_date || ""}','${r.operational_start_date || ""}')">Agregar pago</button>` : "")}
        <button class="btn secondary" style="padding:6px 9px;font-size:12px" onclick="viewLoan(${r.loan_id})">Ver crédito</button>
      </div>
    </td>
  </tr>`;
}

let todayCollectionRows = [];
let selectedCollectionClientId = null;


async function mergeLocalPendingPixIntoCollections(rows){
  const result=(rows||[]).map(row=>({...row}));
  const queue=(await offlineStoreGetAll("queue"))
    .filter(row=>
      offlineRowBelongsToCurrentUser(row) &&
      row.entity_type==="payment" &&
      ["pending","failed","pending_confirmation"].includes(row.status) &&
      String(row.payload?.payment_method||"").toLowerCase()==="pix"
    )
    .sort((a,b)=>String(a.created_at||"").localeCompare(String(b.created_at||"")));

  for(const operation of queue){
    const payload=operation.payload||{};
    const clientRows=result
      .filter(row=>
        Number(row.client_id)===Number(payload.client_id) &&
        Number(row.amount_remaining||0)>0
      )
      .sort((a,b)=>{
        const d=String(a.due_date||"").localeCompare(String(b.due_date||""));
        return d!==0?d:Number(a.installment_number||0)-Number(b.installment_number||0);
      });

    let target=null;

    if(payload.installment_id){
      target=clientRows.find(row=>
        Number(row.installment_id)===Number(payload.installment_id) &&
        (
          !payload.installment_due_date ||
          String(row.due_date||"").slice(0,10)===String(payload.installment_due_date).slice(0,10)
        )
      );
    }

    if(!target && payload.loan_id && payload.installment_due_date){
      const dated=clientRows.filter(row=>
        Number(row.loan_id)===Number(payload.loan_id) &&
        String(row.due_date||"").slice(0,10)===String(payload.installment_due_date).slice(0,10)
      );
      if(dated.length===1)target=dated[0];
    }

    if(!target && payload.loan_id && payload.installment_number){
      const numbered=clientRows.filter(row=>
        Number(row.loan_id)===Number(payload.loan_id) &&
        Number(row.installment_number)===Number(payload.installment_number)
      );
      if(numbered.length===1)target=numbered[0];
    }

    if(!target){
      target=clientRows.find(row=>row.pix?.status!=="checking");
    }

    if(target && target.pix?.status!=="checking"){
      target.pix={
        id:operation.server_entity_id || operation.local_id || null,
        status:"checking",
        amount:Number(payload.amount||0),
        created_at:operation.occurred_at || operation.created_at,
        offline_pending:true,
        sync_failed:operation.status==="failed",
        sync_error:operation.error||null
      };
    }
  }

  return result;
}

async function loadTodayCollections(){
  try{
    if(
      navigator.onLine &&
      !sutilOperationalRefreshBusy
    ){
      const stats = await offlinePendingStats().catch(()=>({pending:0,failed:0,confirmation:0}));
      if(stats.pending || stats.failed){
        await offlineSyncPending(false);
      }
    }

    const routes = await api("/api/admin/routes");
    const currentRoute = collectionsRoute.value;
    collectionsRoute.innerHTML = '<option value="">Todas las rutas autorizadas</option>' +
      routes.map(r=>`<option value="${r.id}">${r.name}</option>`).join("");
    if(routes.some(r=>String(r.id)===String(currentRoute)))collectionsRoute.value=currentRoute;

    const params = new URLSearchParams();
    if(collectionsDate.value)params.set("target_date",collectionsDate.value);
    if(collectionsRoute.value)params.set("route_id",collectionsRoute.value);
    if(collectionsStatus.value)params.set("status",collectionsStatus.value);
    if(collectionsSearch.value.trim())params.set("search",collectionsSearch.value.trim());

    const data = await api("/api/admin/installments/collections?"+params.toString());
    todayCollectionRows = await mergeLocalPendingPixIntoCollections(data.rows || []);
    const clientKpis=document.getElementById("collectionsClientKpis");
    if(clientKpis)clientKpis.style.display=collectionsSelectedClientId?"grid":"none";
    collectionOverdueCount.textContent = data.overdue_count || 0;
    collectionTodayCount.textContent = data.today_count || 0;
    collectionPaidCount.textContent = data.paid_count || 0;
    todayPending.textContent = money(data.pending_total);
    todayPaid.textContent = money(data.paid_today);
    renderTodayCollections();
  }catch(e){
    todayCollectionRows = [];
    collectionOverdueCount.textContent = "0";
    collectionTodayCount.textContent = "0";
    collectionPaidCount.textContent = "0";
    todayPending.textContent = money(0);
    todayPaid.textContent = money(0);
    todayCollectionsTable.innerHTML = `
      <tr>
        <td colspan="11">
          <div class="error" style="display:block;padding:12px;border-radius:9px">
            <strong>No fue posible cargar los cobros.</strong><br>${e.message}
          </div>
        </td>
      </tr>`;
  }
}

function collectionStatusBadge(row){
  if(row.status === "paid")return '<span class="status-pill pill-current">PAGADA</span>';
  if(row.status === "today")return '<span class="status-pill pill-today">VENCE HOY</span>';
  if(["overdue","partial_overdue"].includes(row.status))return '<span class="status-pill pill-overdue">MOROSA</span>';
  if(row.status === "partial")return '<span class="status-pill pill-today">PARCIAL</span>';
  return '<span class="status-pill pill-inactive">PRÓXIMA</span>';
}

function collectionPixBadge(row){
  if(!row.pix)return '<span class="muted">Sin PIX</span>';
  if(row.pix.status === "confirmed")return '<span class="confirmed">PIX confirmado</span>';
  if(row.pix.status === "checking" && row.pix.sync_failed)return '<span class="checking">PIX con error de sincronización</span>';
  if(row.pix.status === "checking" && row.pix.offline_pending)return '<span class="checking">PIX pendiente de sincronizar</span>';
  if(row.pix.status === "checking")return '<span class="checking">PIX en comprobación</span>';
  return '<span class="not_confirmed">PIX rechazado</span>';
}

function collectionClientData(row){
  const cached = clientRows.find(client => Number(client.id) === Number(row.client_id));
  const hasLocation =
    cached?.location?.lat != null &&
    cached?.location?.lng != null;
  return {
    id: row.client_id,
    name: row.client_name,
    photo_url: cached?.photo_url || row.photo_url || null,
    has_business: Boolean(cached?.has_business || row.has_business),
    has_location: Boolean(hasLocation || row.has_location)
  };
}

function collectionPhotoStatusClass(row){
  if(row.status === "paid")return "collections-photo-current";
  if(row.status === "today")return "collections-photo-today";
  if(["overdue","partial_overdue"].includes(row.status))return "collections-photo-overdue";
  return "collections-photo-inactive";
}

function collectionClientIcons(client){
  const icons = [];
  if(client.has_location)icons.push('<span title="Ubicación registrada">📍</span>');
  if(client.has_business)icons.push('<span title="Empresa registrada">🏢</span>');
  return icons.length ? `<div class="collections-client-icons">${icons.join("")}</div>` : "";
}

function renderTodayCollections(){
  const term = normalizeSearchText(collectionsSearch.value);

  let rows = todayCollectionRows.filter(r=>{
    if(Number(r.amount_remaining || 0) <= 0)return false;
    if(!term)return true;
    return normalizeSearchText([
      r.client_name,r.client_code,r.document_number,r.phone,r.route_name
    ].filter(Boolean).join(" ")).includes(term);
  });

  if(term){
    // Búsqueda específica: mostrar TODAS las cuotas pendientes de los clientes coincidentes.
    rows = rows.slice().sort((a,b)=>{
      const clientCompare=String(a.client_name||"").localeCompare(String(b.client_name||""));
      if(clientCompare!==0)return clientCompare;
      return compareCollectionDebtRows(a,b);
    });

    todayCollectionsHead.innerHTML = `<tr>
      <th>Cliente</th><th>Ruta</th><th>Cuota</th><th>Vencimiento</th>
      <th>Días atraso</th><th>Valor</th><th>Pagado</th><th>Saldo</th>
      <th>Estado</th><th>PIX</th><th>Acciones</th>
    </tr>`;
    collectionsViewNote.innerHTML =
      `🔎 <strong>Búsqueda de cliente:</strong> se muestran todas las cuotas pendientes que coinciden con la búsqueda.`;
    todayCollectionsTable.innerHTML = rows.length
      ? rows.map(collectionDetailedRowHtml).join("")
      : '<tr><td colspan="11">No hay cuotas pendientes para ese cliente.</td></tr>';
    return;
  }

  // Vista general: una sola cuota pendiente por cliente.
  const byClient = new Map();
  rows.slice().sort(compareCollectionDebtRows).forEach(row=>{
    const key=Number(row.client_id);
    if(!byClient.has(key))byClient.set(key,row);
  });
  rows = Array.from(byClient.values()).sort(
    (a,b)=>String(a.client_name||"").localeCompare(String(b.client_name||""))
  );

  todayCollectionsHead.innerHTML = `<tr>
    <th>Cliente</th><th>Cuota pendiente</th><th>Saldo</th><th>Acciones</th>
  </tr>`;
  collectionsViewNote.innerHTML =
    `📌 <strong>Vista general:</strong> ${rows.length} clientes con saldo pendiente. Se muestra solo una cuota por cliente. Busca un cliente para ver todas sus cuotas pendientes.`;

  todayCollectionsTable.innerHTML = rows.length
    ? rows.map(collectionCompactRowHtml).join("")
    : '<tr><td colspan="4">No hay clientes con cuotas pendientes para los filtros seleccionados.</td></tr>';
}

let directPaymentContext = {
  clientId:null,
  clientName:"",
  installmentNumber:null,
  installmentId:null,
  loanId:null,
  installmentPending:0,
  installmentDueDate:null,
  installmentAmountDue:0,
  installmentStatus:"upcoming",
  routeId:null,
  loanRegisteredLate:false,
  openCashDate:null,
  operationalStartDate:null,
  lateCorrectionMode:false,
  lastPayment:null
};

function directPaymentStatusLabel(status){
  const key=String(status||"upcoming").toLowerCase();
  if(["overdue","partial_overdue"].includes(key))return "MOROSA";
  if(key==="today")return "VENCE HOY";
  if(key==="partial")return "PARCIAL";
  if(key==="paid")return "PAGADA";
  return "PENDIENTE";
}

function setDirectPaymentAmountMode(mode){
  const totalMode=mode==="total";
  directPaymentPartialOption.checked=!totalMode;
  directPaymentTotalOption.checked=totalMode;
  directPaymentAmount.readOnly=totalMode;
  if(totalMode){
    directPaymentAmount.value=Number(
      directPaymentContext.installmentPending || 0
    ).toFixed(2);
  }else{
    directPaymentAmount.readOnly=false;
    directPaymentAmount.focus();
    directPaymentAmount.select();
  }
}

function resetDirectPaymentForgottenMode(){
  directPaymentContext.lateCorrectionMode=false;
  if(directPaymentForgottenButton){
    directPaymentForgottenButton.textContent="🛠 Registrar como cobro olvidado";
    directPaymentForgottenButton.classList.remove("success");
    directPaymentForgottenButton.classList.add("secondary");
  }
}

let directPaymentDateUserChoice="";

// FIX 12.15.119: el pago normal siempre se registra con la fecha de hoy.
// El selector de fecha solo se muestra en Cobro olvidado / Histórico.
function syncDirectPaymentDateUi(){
  const dateBox=document.getElementById("directPaymentDateBox");
  const dateLabel=document.getElementById("directPaymentDateLabelText");
  const shortcut=document.getElementById("directPaymentForgottenShortcut");
  const shortcutText=document.getElementById("directPaymentForgottenShortcutText");
  const shortcutButton=document.getElementById("directPaymentForgottenShortcutButton");
  const specialMode=Boolean(historicalModeActive || forgottenOperationMode);
  const lang=(typeof sutilCollectionsWorkDateLanguage==="function")
    ? sutilCollectionsWorkDateLanguage()
    : String(typeof SUTIL_ACTIVE_LANGUAGE!=="undefined"?SUTIL_ACTIVE_LANGUAGE:"es").toLowerCase().slice(0,2);

  if(dateBox)dateBox.style.display=specialMode?"":"none";
  if(shortcut)shortcut.style.display=(!specialMode && canUseForgottenOperation())?"block":"none";

  if(dateLabel){
    dateLabel.textContent=forgottenOperationMode
      ? ({es:"Fecha real del pago",pt:"Data real do pagamento",en:"Actual payment date"}[lang]||"Fecha real del pago")
      : historicalModeActive
        ? ({es:"Fecha histórica del pago",pt:"Data histórica do pagamento",en:"Historical payment date"}[lang]||"Fecha histórica del pago")
        : ({es:"Fecha del pago",pt:"Data do pagamento",en:"Payment date"}[lang]||"Fecha del pago");
  }

  if(shortcutText){
    shortcutText.textContent=({
      es:"Los pagos registrados aquí usan automáticamente la fecha de hoy.",
      pt:"Os pagamentos registrados aqui usam automaticamente a data de hoje.",
      en:"Payments recorded here automatically use today's date."
    }[lang]||"Los pagos registrados aquí usan automáticamente la fecha de hoy.");
  }
  if(shortcutButton){
    shortcutButton.textContent=({
      es:"🛠️ ¿Pago de una fecha anterior? Ir a Cobro olvidado",
      pt:"🛠️ Pagamento de uma data anterior? Ir para Cobrança esquecida",
      en:"🛠️ Payment from an earlier date? Go to Forgotten collection"
    }[lang]||"🛠️ ¿Pago de una fecha anterior? Ir a Cobro olvidado");
  }
}

function goDirectPaymentToForgottenCollection(){
  if(!canUseForgottenOperation()){
    const lang=(typeof sutilCollectionsWorkDateLanguage==="function")?sutilCollectionsWorkDateLanguage():"es";
    alert(({
      es:"Cobro olvidado requiere ser empresario o ADM con permiso de caja.",
      pt:"Cobrança esquecida exige perfil de empresário ou ADM com permissão de caixa.",
      en:"Forgotten collection requires a company owner or ADM with cash permissions."
    }[lang])||"Cobro olvidado requiere ser empresario o ADM con permiso de caja.");
    return;
  }

  const clientId=Number(directPaymentContext.clientId||0);
  const clientName=String(directPaymentContext.clientName||"");
  directPaymentBackdrop.classList.remove("open");

  forgottenOperationGo("collectionsSection");

  if(collectionsSearch){
    collectionsSearch.value=clientName;
    collectionsSelectedClientId=clientId||null;
  }
  showCollectionsMode("debt");

  window.setTimeout(()=>{
    const target=document.getElementById("collectionsWorkDateLabel") || collectionsDate;
    target?.scrollIntoView({behavior:"smooth",block:"start"});
  },80);
}

function rememberDirectPaymentDate(value){
  if(value)directPaymentDateUserChoice=value;
}

function confirmDirectPaymentDate(value){
  if(value)directPaymentDateUserChoice=value;
  const chosen=directPaymentDateUserChoice;
  if(chosen && directPaymentDate && directPaymentDate.value!==chosen){
    directPaymentDate.value=chosen;
  }
  updateDirectPaymentDateMode();
  // En algunos navegadores Android el selector nativo vuelve a pintar hoy
  // al cerrarse. Reafirmamos una sola vez la fecha que el usuario confirmó.
  if(chosen){
    setTimeout(()=>{
      if(directPaymentDate && directPaymentDate.value!==chosen){
        directPaymentDate.value=chosen;
        updateDirectPaymentDateMode();
      }
    },120);
  }
}

function updateDirectPaymentDateMode(){
  if(!directPaymentDate || !directPaymentForgottenGuide)return;
  const selected=directPaymentDate.value || "";
  const openDate=String(directPaymentContext.openCashDate||"").slice(0,10);
  const operationalStart=String(directPaymentContext.operationalStartDate||"").slice(0,10);

  if(directPaymentContext.lateCorrectionMode){
    if(!selected || !openDate || selected>=openDate){
      resetDirectPaymentForgottenMode();
    }
  }

  const isBeforeOpen=Boolean(selected && openDate && selected<openDate);
  const isOperational=Boolean(!operationalStart || selected>=operationalStart);

  if(isBeforeOpen && isOperational){
    directPaymentForgottenGuide.style.display="block";
    directPaymentForgottenGuideTitle.textContent=directPaymentContext.loanRegisteredLate
      ? "🛠️ Cuota de un crédito registrado tarde"
      : "🛠️ Pago con fecha anterior a la caja actual";
    directPaymentForgottenGuideText.innerHTML=
      `La fecha real del pago es <strong>${formatDateEs(selected)}</strong>, pero la caja abierta de esta ruta es <strong>${formatDateEs(openDate)}</strong>. `+
      `Si el cliente realmente pagó en ${formatDateEs(selected)} y el registro se olvidó, usa <strong>Cobro olvidado</strong>. `+
      `Si el cliente está pagando ahora una cuota vencida, cambia la fecha del pago a ${formatDateEs(openDate)} y guarda normalmente.`;
    if(directPaymentForgottenButton){
      directPaymentForgottenButton.style.display="inline-flex";
    }
    return;
  }

  if(selected && operationalStart && selected<operationalStart){
    directPaymentForgottenGuide.style.display="block";
    directPaymentForgottenGuideTitle.textContent="📚 Fecha histórica";
    directPaymentForgottenGuideText.innerHTML=
      `Esta fecha es anterior al inicio operativo (${formatDateEs(operationalStart)}). Regístrala desde <strong>Migración / histórico</strong>; no debe afectar la caja actual.`;
    if(directPaymentForgottenButton)directPaymentForgottenButton.style.display="none";
    resetDirectPaymentForgottenMode();
    return;
  }

  directPaymentForgottenGuide.style.display="none";
  if(directPaymentForgottenButton)directPaymentForgottenButton.style.display="inline-flex";
  resetDirectPaymentForgottenMode();
}

function activateDirectPaymentForgotten(){
  const selected=directPaymentDate?.value || "";
  const openDate=String(directPaymentContext.openCashDate||"").slice(0,10);
  const operationalStart=String(directPaymentContext.operationalStartDate||"").slice(0,10);

  if(!selected){
    alert("Indica primero la fecha real del pago.");
    return;
  }
  if(operationalStart && selected<operationalStart){
    alert("Esta fecha pertenece al histórico. Usa Migración / histórico.");
    return;
  }
  if(!openDate){
    alert("Esta ruta no tiene una caja operativa abierta actualmente. Abre la caja actual antes de registrar el cobro olvidado.");
    return;
  }
  if(selected>=openDate){
    alert("Esta fecha corresponde a la caja actual o a una fecha posterior. Registra el pago normalmente.");
    return;
  }

  directPaymentContext.lateCorrectionMode=true;
  directPaymentForgottenGuide.style.display="block";
  directPaymentForgottenGuideTitle.textContent="✅ Cobro olvidado activado";
  directPaymentForgottenGuideText.innerHTML=
    `Se conservará la fecha real <strong>${formatDateEs(selected)}</strong> y el dinero se aplicará a la caja abierta del <strong>${formatDateEs(openDate)}</strong>, sin reabrir la caja antigua.`;
  directPaymentForgottenButton.textContent="✅ Cobro olvidado activado";
  directPaymentForgottenButton.classList.remove("secondary");
  directPaymentForgottenButton.classList.add("success");
}

function applyEnabledDirectPaymentMethods(settings){
  const select=document.getElementById("directPaymentMethod");
  if(!select || !settings)return;
  const enabled={
    cash:settings.default_payment_cash!==false,
    pix:settings.default_payment_pix!==false,
    transfer:settings.default_payment_transfer!==false,
    mixed:settings.default_payment_mixed!==false && settings.default_payment_cash!==false && settings.default_payment_pix!==false,
    renewal:settings.default_payment_renewal!==false
  };
  Array.from(select.options).forEach(option=>{
    option.hidden=!enabled[option.value];
    option.disabled=!enabled[option.value];
  });
  if(!enabled[select.value]){
    const first=Array.from(select.options).find(option=>!option.disabled);
    if(first)select.value=first.value;
  }
  updateDirectPaymentMethodFields();
}

async function updateDirectPaymentMethodFields(){
  const method=directPaymentMethod?.value || "cash";
  if(directPaymentMixedBox)directPaymentMixedBox.style.display=method==="mixed"?"block":"none";
  if(directPaymentRenewalGuide)directPaymentRenewalGuide.style.display=method==="renewal"?"block":"none";
  if(method!=="mixed"){
    if(directPaymentCashAmount)directPaymentCashAmount.value="";
    if(directPaymentPixAmount)directPaymentPixAmount.value="";
  }
}

function syncDirectPaymentMixedTotal(){
  if(directPaymentMethod?.value!=="mixed")return;
  const cash=Number(directPaymentCashAmount?.value||0);
  const pix=Number(directPaymentPixAmount?.value||0);
  const total=Math.round((cash+pix)*100)/100;
  if(total>0)directPaymentAmount.value=total.toFixed(2);
}

async function openDirectPayment(
  clientId,
  clientName,
  suggestedAmount,
  installmentNumber=null,
  loanId=null,
  dueDate=null,
  amountDue=null,
  installmentStatus="upcoming",
  installmentId=null,
  routeId=null,
  loanRegisteredLate=false,
  openCashDate=null,
  operationalStartDate=null
){
  if(navigator.onLine && installmentId){
    try{
      const params = new URLSearchParams();
      if(collectionsDate?.value)params.set("target_date",collectionsDate.value);
      if(collectionsRoute?.value)params.set("route_id",collectionsRoute.value);
      params.set("status","all");
      if(clientName)params.set("search",clientName);

      const fresh = await api("/api/admin/installments/collections?"+params.toString());
      const freshRows = await mergeLocalPendingPixIntoCollections(fresh.rows || []);
      const exact = freshRows.find(row =>
        Number(row.installment_id) === Number(installmentId)
      );

      if(exact?.pix?.status === "checking"){
        const local = todayCollectionRows.find(row =>
          Number(row.installment_id) === Number(installmentId)
        );
        if(local)local.pix = exact.pix;
        renderTodayCollections();
        alert("Esta cuota ya tiene un PIX en comprobación. No se puede registrar otro pago hasta que sea confirmado o rechazado.");
        return;
      }

      if(exact && Number(exact.amount_remaining || 0) <= 0){
        await loadTodayCollections();
        alert("Esta cuota ya fue pagada. La lista fue actualizada.");
        return;
      }
    }catch(error){
      if(!offlineNetworkFailure(error)){
        alert(error.message || "No fue posible verificar el estado actual de la cuota.");
        return;
      }
    }
  }

  selectedCollectionClientId = clientId;
  directPaymentContext = {
    clientId,
    clientName:clientName || "",
    installmentNumber,
    installmentId,
    loanId,
    installmentPending:Number(suggestedAmount || 0),
    installmentDueDate:dueDate,
    installmentAmountDue:Number(amountDue || suggestedAmount || 0),
    installmentStatus,
    routeId,
    loanRegisteredLate:Boolean(loanRegisteredLate),
    openCashDate:openCashDate || null,
    operationalStartDate:operationalStartDate || null,
    lateCorrectionMode:Boolean(forgottenOperationMode),
    lastPayment:null
  };

  directPaymentClient.textContent = clientName || "Cliente";
  directPaymentInstallment.textContent =
    installmentNumber ? `#${installmentNumber}` : "#—";

  directPaymentPending.textContent = money(
    Number(suggestedAmount || 0)
  );
  directPaymentRemaining.textContent = money(
    Number(suggestedAmount || 0)
  );
  directPaymentDueDate.textContent =
    dueDate ? formatDateEs(dueDate) : "—";
  directPaymentInitialValue.textContent = money(
    Number(amountDue || suggestedAmount || 0)
  );
  directPaymentStatus.textContent =
    directPaymentStatusLabel(installmentStatus);

  const cachedClient = clientRows.find(
    row => Number(row.id) === Number(clientId)
  );
  directPaymentTotalBalance.textContent = money(
    Number(cachedClient?.balance || 0)
  );

  directPaymentAmount.value =
    suggestedAmount > 0 ? Number(suggestedAmount).toFixed(2) : "";
  directPaymentAmount.readOnly=false;
  directPaymentPartialOption.checked=true;
  directPaymentTotalOption.checked=false;

  directPaymentMethod.value = "cash";
  if(directPaymentCashAmount)directPaymentCashAmount.value = "";
  if(directPaymentPixAmount)directPaymentPixAmount.value = "";
  updateDirectPaymentMethodFields();
  directPaymentNote.value = "";

  const todayIso = localTodayIso();
  directPaymentDate.max = todayIso;
  directPaymentDate.value = (historicalModeActive || forgottenOperationMode)
    ? (collectionsDate.value || historicalDateOrToday())
    : todayIso;
  directPaymentDateUserChoice="";
  syncDirectPaymentDateUi();

  directPaymentForgottenGuide.style.display="none";
  resetDirectPaymentForgottenMode();
  if(forgottenOperationMode)directPaymentContext.lateCorrectionMode=true;
  updateDirectPaymentDateMode();

  directPaymentResult.style.display = "none";
  directPaymentResult.classList.remove(
    "error","success-payment"
  );
  directPaymentReceiptActions.classList.remove("open");
  directPaymentReceipt.classList.remove("open");
  directPaymentReceipt.innerHTML = "";
  directPaymentApplyButton.disabled = false;

  directPaymentBackdrop.classList.add("open");
  setTimeout(()=>directPaymentAmount.focus(),50);
}

function closeDirectPayment(){
  selectedCollectionClientId = null;
  directPaymentContext.lastPayment = null;
  directPaymentContext.lateCorrectionMode = false;
  if(directPaymentForgottenGuide)directPaymentForgottenGuide.style.display="none";
  directPaymentBackdrop.classList.remove("open");
}

function directPaymentMethodLabel(method){
  return {
    cash:"Efectivo",
    pix:"PIX",
    mixed:"PIX + Efectivo",
    transfer:"Transferencia",
    renewal:"Renovación"
  }[method] || method || "—";
}

function directPaymentReceiptText(){
  const p=directPaymentContext.lastPayment;
  if(!p)return "";

  const lines=[
    "SUTIL · RECIBO DE PAGO",
    `Cliente: ${p.clientName}`,
    `Pago #${p.paymentId}`,
    `Cuota: ${p.installmentNumber ? "#"+p.installmentNumber : "—"}`,
    `Valor recibido: ${money(p.amount)}`,
    `Forma de pago: ${directPaymentMethodLabel(p.method)}`,
    ...(p.method==="mixed" ? [`Efectivo: ${money(p.cashAmount)}`, `PIX: ${money(p.pixAmount)}`] : []),
    `Saldo pendiente: ${money(p.balance)}`,
    `Fecha: ${p.dateText}`,
  ];
  if(p.note)lines.push(`Observación: ${p.note}`);
  return lines.join("\n");
}

function showDirectPaymentReceipt(){
  const p=directPaymentContext.lastPayment;
  if(!p)return;

  directPaymentReceipt.innerHTML=`
    <h4>🧾 Recibo de pago</h4>
    <div><strong>${legacyEscapeHtml(p.clientName)}</strong></div>
    <div style="margin-top:8px">Recibo / pago #${p.paymentId}</div>
    <div>Cuota: <strong>${p.installmentNumber ? "#"+p.installmentNumber : "—"}</strong></div>
    <div>Valor recibido: <strong>${money(p.amount)}</strong></div>
    <div>Forma de pago: ${legacyEscapeHtml(directPaymentMethodLabel(p.method))}</div>
    ${p.method==="mixed" ? `<div>Efectivo: <strong>${money(p.cashAmount)}</strong> · PIX: <strong>${money(p.pixAmount)}</strong></div>` : ""}
    <div>Saldo pendiente: <strong>${money(p.balance)}</strong></div>
    <div>Fecha: ${legacyEscapeHtml(p.dateText)}</div>
    ${p.note ? `<div>Observación: ${legacyEscapeHtml(p.note)}</div>` : ""}
  `;
  directPaymentReceipt.classList.add("open");
}

async function shareDirectPaymentReceipt(){
  const text=directPaymentReceiptText();
  if(!text)return;

  try{
    if(navigator.share){
      await navigator.share({
        title:"Recibo de pago · Sutil",
        text
      });
      return;
    }

    if(navigator.clipboard?.writeText){
      await navigator.clipboard.writeText(text);
      alert("Recibo copiado. Ya puedes pegarlo en WhatsApp u otra aplicación.");
      return;
    }

    await sutilPrompt(
      "Copia este recibo para compartir:",
      text
    );
  }catch(e){
    if(e?.name!=="AbortError"){
      alert("No fue posible compartir el recibo.");
    }
  }
}

async function saveDirectPayment(){
  directPaymentResult.style.display = "block";
  directPaymentResult.classList.remove(
    "error","success-payment"
  );
  directPaymentResult.textContent = "Aplicando pago...";
  directPaymentApplyButton.disabled = true;

  try{
    const amount=Number(directPaymentAmount.value);
    const method=directPaymentMethod.value;
    const mixedCash=method==="mixed"?Number(directPaymentCashAmount?.value||0):0;
    const mixedPix=method==="mixed"?Number(directPaymentPixAmount?.value||0):0;
    const note=directPaymentNote.value.trim() || null;

    const selectedPaymentDate = directPaymentDate.value;
    const todayIso = localTodayIso();
    const effectiveLateCorrection = Boolean(
      forgottenOperationMode || directPaymentContext.lateCorrectionMode
    );
    const useHistoricalDate = Boolean(historicalModeActive);
    const openCashDate = String(directPaymentContext.openCashDate||"").slice(0,10);
    const operationalStartDate = String(directPaymentContext.operationalStartDate||"").slice(0,10);

    if(
      !useHistoricalDate && !effectiveLateCorrection &&
      selectedPaymentDate && openCashDate && selectedPaymentDate < openCashDate
    ){
      updateDirectPaymentDateMode();
      if(operationalStartDate && selectedPaymentDate < operationalStartDate){
        throw new Error(`La fecha ${formatDateEs(selectedPaymentDate)} es anterior al inicio operativo ${formatDateEs(operationalStartDate)}. Debe registrarse desde Migración / histórico. No se guardará como pago de hoy.`);
      }
      throw new Error("Este pago tiene una fecha anterior a la caja abierta actual. Si realmente fue cobrado en esa fecha y se olvidó registrarlo, pulsa ‘Registrar como cobro olvidado’. Si lo estás cobrando ahora, usa la fecha de la caja actual.");
    }

    const paymentClient = clientRows.find(
      row => Number(row.id) === Number(selectedCollectionClientId)
    );

    const bootstrapIdentity=await offlineCacheGet("/api/sync/bootstrap");
    const identityClient=offlineClientFromBootstrap(bootstrapIdentity,selectedCollectionClientId);
    const identityLoan=(bootstrapIdentity?.loans||[]).find(l=>Number(l.id)===Number(directPaymentContext.loanId));
    const identityInstallment=offlineFindInstallmentIdentity(identityLoan,{
      installment_id:directPaymentContext.installmentId,
      installment_number:directPaymentContext.installmentNumber,
      installment_due_date:directPaymentContext.installmentDueDate
    });
    const identityRoute=(bootstrapIdentity?.routes||[]).find(r=>Number(r.id)===Number(identityClient?.route_id))
      || (bootstrapIdentity?.routes||[]).find(r=>Number(r.id)===Number(identityLoan?.route_id));

    const payload = {
      client_id:selectedCollectionClientId,
      client_uuid:identityClient?.client_uuid || paymentClient?.client_uuid || null,
      client_code:paymentClient?.client_code || identityClient?.client_code || null,
      client_document:paymentClient?.document_number || null,
      amount,
      payment_method:method,
      cash_amount:method==="mixed"?mixedCash:null,
      pix_amount:method==="mixed"?mixedPix:null,
      note,
      payment_date:selectedPaymentDate || todayIso,
      historical_mode:useHistoricalDate,
      late_correction_mode:effectiveLateCorrection,
      loan_id:directPaymentContext.loanId || null,
      loan_uuid:identityLoan?.loan_uuid || null,
      installment_id:directPaymentContext.installmentId || null,
      installment_uuid:identityInstallment?.installment_uuid || null,
      installment_number:directPaymentContext.installmentNumber || null,
      installment_due_date:directPaymentContext.installmentDueDate || null,
      installment_amount_due:directPaymentContext.installmentAmountDue || null,
      route_id:identityRoute?.id || directPaymentContext.routeId || null,
      route_uuid:identityRoute?.route_uuid || null,
      offline_protocol:3
    };

    if(!payload.client_id){
      throw new Error("Selecciona un cliente.");
    }
    if(!payload.amount || payload.amount <= 0){
      throw new Error("Indica un valor válido.");
    }
    if(method==="mixed"){
      if(mixedCash<=0 || mixedPix<=0){
        throw new Error("En PIX + Efectivo indica un valor mayor que cero en ambas partes.");
      }
      if(Math.abs((mixedCash+mixedPix)-amount)>0.009){
        throw new Error("Efectivo + PIX deben sumar exactamente el valor total del pago.");
      }
    }
    if(!payload.payment_date){
      throw new Error("Indica la fecha del pago.");
    }
    if(payload.payment_date > todayIso){
      throw new Error("La fecha del pago no puede ser futura.");
    }

    if(["mixed","renewal"].includes(method) && !navigator.onLine){
      throw new Error("PIX + Efectivo y Renovación requieren conexión para registrar correctamente la caja.");
    }
    if(effectiveLateCorrection && !navigator.onLine){
      throw new Error("La operación olvidada requiere conexión para validar la caja abierta actual y evitar duplicados.");
    }

    if(!navigator.onLine){
      if(payload.payment_date!==localTodayIso()){
        throw new Error("Sin Internet solo puedes registrar cobros del día actual.");
      }
      if(method!=="pix"){
        const bootstrap=await offlineCacheGet("/api/sync/bootstrap");
        const client=offlineClientFromBootstrap(bootstrap,payload.client_id);
        if(!client) throw new Error("No se encontró el cliente en los datos offline.");
        const selectedLoan=(bootstrap?.loans||[]).find(l=>
          Number(l.id)===Number(payload.loan_id) &&
          Number(l.client_id)===Number(payload.client_id)
        );
        const operationalRouteId=selectedLoan?.route_id || client.route_id;
        const cash=await offlineCashRow(operationalRouteId,payload.payment_date);
        if(!cash || cash.status!=="open"){
          throw new Error("CAJA CERRADA. Para registrar cobros sin Internet, primero debes tener abierta la caja del día.");
        }
      }
    }

    const result = await offlineMutationOrOnline({
      entityType:"payment",
      action:"create",
      payload,
      path:effectiveLateCorrection?"/api/admin/payments/direct?late_correction=true":"/api/admin/payments/direct",
      localRef:offlineUuid("payment"),
      options:{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body:JSON.stringify(payload)
      }
    });

    const remainingInstallment=result.pending_confirmation
      ? Number(directPaymentContext.installmentPending || 0)
      : Math.max(
          0,
          Number(directPaymentContext.installmentPending || 0)
          - amount
        );
    directPaymentPending.textContent =
      money(remainingInstallment);
    directPaymentRemaining.textContent =
      money(remainingInstallment);
    directPaymentTotalBalance.textContent =
      money(result.balance || 0);

    directPaymentContext.lastPayment=result.pending_confirmation
      ? null
      : {
          paymentId:result.payment_id,
          clientName:directPaymentContext.clientName,
          installmentNumber:directPaymentContext.installmentNumber,
          amount,
          method,
          cashAmount:method==="mixed"?mixedCash:0,
          pixAmount:method==="mixed"?mixedPix:0,
          note,
          balance:Number(result.balance || 0),
          dateText:formatDateEs(payload.payment_date)
        };

    directPaymentResult.classList.add("success-payment");
    const paymentSuccessMessage = effectiveLateCorrection && !result.pending_confirmation
      ? `🛠️ Cobro olvidado registrado · fecha real ${formatDateEs(payload.payment_date)} · aplicado a la caja abierta actual.`
      : result.message;
    directPaymentResult.innerHTML =
      `<strong>${result.pending_confirmation?"🟡":(result.offline_queued?"🟠":"✅")} ${paymentSuccessMessage}</strong><br>` +
      `${
        result.pending_confirmation
          ? "La deuda todavía no cambia hasta la confirmación."
          : `Saldo estimado pendiente: <strong>${money(result.balance)}</strong>`
      }`;

    if(result.pending_confirmation){
      directPaymentReceiptActions.classList.remove("open");
      directPaymentReceipt.innerHTML =
        `<div class="muted">PIX en comprobación. El recibo definitivo se habilita después de la confirmación.</div>`;
    }else{
      directPaymentReceiptActions.classList.add("open");
      showDirectPaymentReceipt();
    }

    if(result.pending_confirmation){
      const target=todayCollectionRows.find(r=>
        Number(r.client_id)===Number(selectedCollectionClientId) &&
        (
          (
            directPaymentContext.installmentId &&
            Number(r.installment_id)===Number(directPaymentContext.installmentId)
          ) ||
          (
            Number(r.loan_id)===Number(directPaymentContext.loanId) &&
            String(r.due_date||"").slice(0,10)===String(directPaymentContext.installmentDueDate||"").slice(0,10) &&
            Number(r.installment_number)===Number(directPaymentContext.installmentNumber)
          )
        )
      );

      if(target){
        target.pix={
          id:result.receipt_id || result.payment_id || null,
          status:"checking",
          amount,
          offline_pending:!!result.offline_queued,
          created_at:new Date().toISOString()
        };
      }

      renderTodayCollections();

      if(navigator.onLine){
        setTimeout(()=>{
          loadTodayCollections().catch(()=>{});
          refreshClients().catch(()=>{});
        },150);
      }else{
        await refreshClients().catch(()=>{});
      }

    }else if(result.offline_queued){
      if(method==="pix"){
        const target=todayCollectionRows.find(r=>
          Number(r.client_id)===Number(selectedCollectionClientId) &&
          (
            (directPaymentContext.installmentId && Number(r.installment_id)===Number(directPaymentContext.installmentId)) ||
            (
              Number(r.loan_id)===Number(directPaymentContext.loanId) &&
              Number(r.installment_number)===Number(directPaymentContext.installmentNumber)
            )
          )
        );
        if(target){
          target.pix={
            id:result.payment_id || null,
            status:"checking",
            amount,
            offline_pending:true,
            created_at:new Date().toISOString()
          };
        }
      }else{
        let remaining=amount;
        const ordered=todayCollectionRows
          .filter(r=>Number(r.client_id)===Number(selectedCollectionClientId) && Number(r.amount_remaining||0)>0)
          .sort((a,b)=>String(a.due_date||"").localeCompare(String(b.due_date||"")));
        for(const row of ordered){
          if(remaining<=0)break;
          const take=Math.min(remaining,Number(row.amount_remaining||0));
          row.amount_paid=Number(row.amount_paid||0)+take;
          row.amount_remaining=Math.max(0,Number(row.amount_remaining||0)-take);
          if(row.amount_remaining<=0)row.status="paid";
          else row.status=row.status==="overdue"?"partial_overdue":"partial";
          remaining-=take;
        }
      }
      renderTodayCollections();
      await refreshClients().catch(()=>{});
    }else{
      await Promise.all([
        loadTodayCollections(),
        refreshDashboard(),
        refreshClients()
      ]);
    }
  }catch(e){
    directPaymentResult.classList.add("error");
    directPaymentResult.textContent = e.message;
    directPaymentApplyButton.disabled = false;
  }
}

// Cerrar al tocar fuera del cuadro o presionar Escape.
document.addEventListener("click",event=>{
  if(
    event.target?.id==="directPaymentBackdrop"
    && directPaymentBackdrop.classList.contains("open")
  ){
    closeDirectPayment();
  }
});

document.addEventListener("keydown",event=>{
  if(
    event.key==="Escape"
    && directPaymentBackdrop?.classList.contains("open")
  ){
    closeDirectPayment();
  }
});


let editingLoanId = null;

function canEditLoans(){
  if(!currentUser)return false;
  if(["company_owner","sutil_owner"].includes(currentUser.role))return true;
  return Boolean(currentUser.permissions?.edit_loans);
}

function canDeleteLoans(){
  if(!currentUser)return false;
  if(["company_owner","sutil_owner"].includes(currentUser.role))return true;
  return Boolean(currentUser.permissions?.delete_loans);
}

function updateEditLoanFrequencyFields(){
  const value = editLoanFrequency.value;
  editLoanWeeklyBox.style.display = "none";
  editLoanMonthlyBox.style.display = value === "monthly" ? "block" : "none";
  if(value === "weekly")syncEditWeeklyDayFromFirstInstallment();
}

function loanDeliveryLabel(method){
  const labels={
    cash:"Efectivo",
    pix:"PIX",
    transfer:"Transferencia",
    mixed:"PIX + Dinero",
    historical:"Histórico / no informado"
  };
  return labels[method] || "Efectivo";
}

function openEditLoan(loan){
  if(!loan.can_edit){
    alert("Este crédito ya tiene pagos o abonos y no puede editarse.");
    return;
  }
  editingLoanId = loan.id;
  editLoanPrincipal.value = loan.principal_amount;
  editLoanDeliveryMethod.value = loan.delivery_method || "cash";
  editLoanInterest.value = loan.interest_rate;
  editLoanCount.value = loan.installment_count;
  editLoanInstallment.value = loan.installment_amount || "";
  editLoanFrequency.value = loan.frequency;
  editLoanDate.value = loan.loan_date || loan.start_date;
  editLoanDate.max = localTodayIso();
  editLoanStartDate.value = loan.first_installment_date || loan.start_date;
  editLoanIncludeSaturdays.checked = loan.include_saturdays !== false;
  editLoanIncludeSundays.checked = Boolean(loan.include_sundays);
  editLoanWeeklyDay.value = String(pythonWeekdayFromIso(editLoanStartDate.value) ?? loan.weekly_day ?? 0);
  editLoanMonthlyDay.value = loan.monthly_day ?? 1;
  editLoanMsg.textContent = "Al guardar se recalcularán todas las cuotas.";
  updateEditLoanFrequencyFields();
  editLoanModal.classList.add("open");
}

function closeEditLoan(){
  editingLoanId = null;
  editLoanModal.classList.remove("open");
}

function closeEditLoanFromBackdrop(event){
  if(event.target === editLoanModal)closeEditLoan();
}

async function saveEditLoan(){
  if(!editingLoanId)return;
  const f = editLoanFrequency.value;
  const payload = {
    principal_amount:Number(editLoanPrincipal.value),
    interest_rate:Number(editLoanInterest.value),
    installment_count:Number(editLoanCount.value),
    installment_amount:Number(editLoanInstallment.value || 0) || null,
    delivery_method:editLoanDeliveryMethod.value,
    frequency:f,
    loan_date:editLoanDate.value,
    first_installment_date:editLoanStartDate.value,
    start_date:editLoanStartDate.value,
    include_saturdays:editLoanIncludeSaturdays.checked,
    include_sundays:editLoanIncludeSundays.checked,
    weekly_day:f==="weekly"?pythonWeekdayFromIso(editLoanStartDate.value):null,
    monthly_day:f==="monthly"?Number(editLoanMonthlyDay.value):null
  };

  if(!payload.loan_date || !payload.start_date){
    editLoanMsg.textContent="Completa la fecha del préstamo y la primera cuota.";
    return;
  }
  if(payload.start_date<payload.loan_date){
    editLoanMsg.textContent="La primera cuota no puede quedar antes de la fecha del préstamo.";
    return;
  }

  editLoanMsg.textContent = "Guardando...";
  try{
    const result = await api(`/api/admin/loans/${editingLoanId}`,{
      method:"PUT",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify(payload)
    });
    editLoanMsg.textContent = result.message;
    const id = editingLoanId;
    closeEditLoan();
    await Promise.all([refreshClients(),refreshDashboard()]);
    await viewLoan(id);
  }catch(e){
    editLoanMsg.textContent = e.message;
  }
}

async function deleteLoan(loan){
  if(!loan.can_delete){
    alert("No se puede eliminar porque ya tiene pagos o abonos. Para corregir la caja debe usar un ajuste de base autorizado.");
    return;
  }

  const reason = await sutilPrompt("Motivo de eliminación del crédito:");
  if(!reason || reason.trim().length < 3)return;

  const confirmed = await sutilConfirm(
    `Se eliminará el crédito #${loan.id} de ${loan.client_name}. ` +
    "Esta acción solo es posible porque no tiene pagos registrados. ¿Continuar?"
  );
  if(!confirmed)return;

  try{
    const result = await api(`/api/admin/loans/${loan.id}`,{
      method:"DELETE",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({reason:reason.trim()})
    });
    alert(result.message);
    clientDetailCard.style.display = "none";
    await Promise.all([refreshClients(),refreshDashboard()]);
  }catch(e){
    alert(e.message);
  }
}


let editingRegisteredPayment = null;
const loanPaymentEditCache = new Map();

function canEditRegisteredPayments(){
  if(!currentUser)return false;
  if(["company_owner","sutil_owner"].includes(currentUser.role))return true;
  return Boolean(currentUser.permissions?.edit_payments);
}

function registeredPaymentMethodLabel(method){
  const normalized=String(method||"cash").toLowerCase();
  if(normalized==="pix")return "PIX";
  if(normalized==="transfer")return "Transferencia";
  return "Efectivo";
}

function openEditRegisteredPayment(paymentId){
  const payment=loanPaymentEditCache.get(Number(paymentId));
  if(!payment){
    alert("No se encontró el pago seleccionado. Actualiza el crédito e intenta nuevamente.");
    return;
  }
  if(!canEditRegisteredPayments()){
    alert("No tiene permiso para corregir pagos registrados.");
    return;
  }

  editingRegisteredPayment=payment;
  document.getElementById("editRegisteredPaymentSubtitle").textContent =
    `${payment.client_name} · Crédito #${payment.loan_id} · Pago #${payment.payment_id}`;
  document.getElementById("editRegisteredPaymentMethod").textContent =
    registeredPaymentMethodLabel(payment.payment_method);
  document.getElementById("editRegisteredPaymentDate").textContent =
    payment.paid_at ? new Date(payment.paid_at).toLocaleString() : "—";
  document.getElementById("editRegisteredPaymentAmount").value =
    Number(payment.payment_amount||0).toFixed(2);
  document.getElementById("editRegisteredPaymentReason").value="";
  document.getElementById("editRegisteredPaymentResult").textContent="";
  document.getElementById("editRegisteredPaymentBackdrop").classList.add("open");
}

function closeEditRegisteredPayment(){
  document.getElementById("editRegisteredPaymentBackdrop").classList.remove("open");
  editingRegisteredPayment=null;
}

async function saveEditRegisteredPayment(){
  if(!editingRegisteredPayment)return;

  const amount=Number(document.getElementById("editRegisteredPaymentAmount").value||0);
  const reason=document.getElementById("editRegisteredPaymentReason").value.trim();
  const resultBox=document.getElementById("editRegisteredPaymentResult");

  if(!(amount>0)){
    resultBox.textContent="Ingrese un valor válido.";
    return;
  }
  if(reason.length<3){
    resultBox.textContent="Escriba el motivo de la corrección.";
    return;
  }

  const confirmed=await sutilConfirm(
    `Pago #${editingRegisteredPayment.payment_id}: `+
    `${money(editingRegisteredPayment.payment_amount)} → ${money(amount)}.\n\n`+
    "Sutil recalculará cuotas, saldo y caja. ¿Guardar la corrección?"
  );
  if(!confirmed)return;

  resultBox.textContent="Guardando corrección...";
  try{
    const paymentId=editingRegisteredPayment.payment_id;
    const loanId=editingRegisteredPayment.loan_id;
    const response=await api(`/api/admin/payments/${paymentId}`,{
      method:"PUT",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({amount,reason})
    });

    resultBox.textContent=response.message||"Pago corregido.";
    closeEditRegisteredPayment();
    await Promise.all([
      refreshDashboard(),
      refreshCollections(),
      viewLoan(loanId)
    ]);
  }catch(e){
    resultBox.textContent=e.message;
  }
}

async function openLoanInstallmentPayment(loanId, installmentNumber){
  try{
    const loan=await api(`/api/admin/loans/${Number(loanId)}`);
    const installment=(loan.installments||[]).find(i=>Number(i.number)===Number(installmentNumber));
    if(!installment){
      alert(sutilTranslateText("No se encontró la cuota seleccionada.",SUTIL_ACTIVE_LANGUAGE||"es"));
      return;
    }
    const remaining=Number(installment.amount_remaining||0);
    if(!(remaining>0)){
      alert(sutilTranslateText("Esta cuota ya fue pagada.",SUTIL_ACTIVE_LANGUAGE||"es"));
      return;
    }
    const status=installment.is_overdue ? "overdue" : "upcoming";

    // FIX 12.15.75:
    // El modal real de pago vive dentro del módulo Cobros. Desde el detalle
    // del crédito, primero abrimos ese módulo para que el modal sea visible
    // y después reutilizamos exactamente el flujo existente de openDirectPayment.
    openSection("collectionsSection");
    await new Promise(resolve=>setTimeout(resolve,80));

    await openDirectPayment(
      Number(loan.client_id),
      String(loan.client_name||""),
      remaining,
      Number(installment.number||0),
      Number(loan.id),
      installment.due_date||"",
      Number(installment.amount_due||remaining),
      status,
      Number(installment.id||0),
      loan.route_id!=null?Number(loan.route_id):null,
      Boolean(loan.loan_registered_late),
      loan.open_cash_date||"",
      loan.operational_start_date||""
    );
  }catch(e){
    alert(e?.message||String(e));
  }
}

function installmentPaymentActions(loan, installment){
  const actions=[];
  const remaining=Number(installment.amount_remaining||0);
  if(remaining>0){
    const status=installment.is_overdue ? "overdue" : "upcoming";
    const safeName=String(loan.client_name||"").replaceAll("'","\\'");
    actions.push(`<button class="btn loan-installment-pay-btn" type="button" onclick="event.stopPropagation();openLoanInstallmentPayment(${Number(loan.id)},${Number(installment.number||0)})">💰 ${sutilTranslateText("Registrar pago",SUTIL_ACTIVE_LANGUAGE||"es")}</button>`);
  }
  if(loan.can_edit_payments && canEditRegisteredPayments()){
    const payments=Array.isArray(installment.payments)?installment.payments:[];
    actions.push(...payments.map(payment=>`<button class="btn secondary" style="padding:6px 8px;font-size:11px;margin:2px" onclick="openEditRegisteredPayment(${payment.payment_id})">✏️ Editar pago ${money(payment.payment_amount)}</button>`));
  }
  return actions.length?actions.join(""):"—";
}


function loanActionButtons(loan){
  const buttons = [];
  if(canEditLoans()){
    buttons.push(`<button class="btn secondary" id="editLoanActionBtn">✏️ Editar crédito</button>`);
  }
  if(canDeleteLoans()){
    buttons.push(`<button class="btn danger" id="deleteLoanActionBtn">🗑️ Eliminar crédito</button>`);
  }
  return buttons.join("");
}

async function viewLoan(id){
  try{
    const loan = await api(`/api/admin/loans/${id}`);

    openSection("clientsSection");

    // Carga primero el historial completo del cliente para no perder
    // los créditos anteriores ni los indicadores financieros.
    await loadClientDetail(loan.client_id);

    // Abrir directamente Créditos / Información financiera.
    showClientFileTab("loans");

    loanDetailCard.style.display = "block";
    loanDetailTitle.textContent = `Crédito #${loan.id}`;
    loanDetailSubtitle.textContent =
      `${loan.client_name} · ${loan.route_name || "Sin ruta histórica"} · Crédito ${loan.loan_date || loan.start_date}`;

    loanDetailSummary.innerHTML = `
      <div class="card">Fecha del préstamo<div class="metric" style="font-size:19px">${formatDateEs(loan.loan_date || loan.start_date)}</div></div>
      <div class="card">Primera cuota<div class="metric" style="font-size:19px">${formatDateEs(loan.first_installment_date || loan.start_date)}</div></div>
      <div class="card">Capital prestado<div class="metric">${money(loan.principal_amount)}</div></div>
      <div class="card">Método de entrega<div class="metric">${loanDeliveryLabel(loan.delivery_method)}</div></div>
      <div class="card">Interés contratado<div class="metric">${money(loan.interest_amount)}</div></div>
      <div class="card">Tasa<div class="metric">${loan.interest_rate}%</div></div>
      <div class="card">Total contratado<div class="metric">${money(loan.total_amount)}</div></div>
      <div class="card">Saldo pendiente<div class="metric">${money(loan.balance_remaining)}</div></div>
      <div class="card">Estado<div class="metric">${String(loan.status || "—").toUpperCase()}</div></div>`;

    loanDetailActions.innerHTML = `
      <div class="loan-actions">${loanActionButtons(loan)}</div>
      ${loan.has_registered_payments
        ? '<div class="muted">Este crédito tiene pagos registrados: no se puede editar ni eliminar.</div>'
        : '<div class="muted">Sin pagos registrados: se permite editar o eliminar según permisos.</div>'}`;

    const editBtn = document.getElementById("editLoanActionBtn");
    const deleteBtn = document.getElementById("deleteLoanActionBtn");
    if(editBtn)editBtn.onclick = () => openEditLoan(loan);
    if(deleteBtn)deleteBtn.onclick = () => deleteLoan(loan);

    loanPaymentEditCache.clear();
    for(const installment of (loan.installments||[])){
      for(const payment of (installment.payments||[])){
        if(!loanPaymentEditCache.has(Number(payment.payment_id))){
          loanPaymentEditCache.set(Number(payment.payment_id),{
            ...payment,
            loan_id:loan.id,
            client_id:loan.client_id,
            client_name:loan.client_name
          });
        }
      }
    }

    loanInstallmentsTable.innerHTML = loan.installments.length
      ? loan.installments.map(i=>`
        <tr class="${i.is_overdue ? "client-overdue" : ""} loan-installment-mobile-card">
          <td data-label="Cuota">#${i.number}</td>
          <td data-label="Fecha">${i.due_date}</td>
          <td data-label="Valor">${money(i.amount_due)}</td>
          <td data-label="Pagado">${money(i.amount_paid)}</td>
          <td data-label="Saldo">${money(i.amount_remaining)}</td>
          <td data-label="Estado" class="${
            i.display_status === "PAGADA"
              ? "status-current"
              : (i.display_status === "VENCIDA" ? "status-overdue" : "")
          }">${i.display_status}</td>
          <td data-label="Fecha de pago">${i.paid_at ? new Date(i.paid_at).toLocaleString() : "—"}</td>
          <td data-label="Acciones" class="loan-installment-actions-cell">${installmentPaymentActions(loan,i)}</td>
        </tr>`).join("")
      : '<tr><td colspan="8">Este crédito no tiene cuotas registradas.</td></tr>';

    loanDetailCard.scrollIntoView({behavior:"auto",block:"start"});
  }catch(e){
    alert(e.message);
  }
}


/* ============================================================
   SUTIL · CONCILIACIÓN BANCARIA · ETAPA 9
   Revisión profesional + auto-confirmación estricta opcional sobre el flujo estable.
   ============================================================ */

/* SUTIL Fix 12.2 · pestañas principales dentro de Comprobantes de pago */
function sutilReceiptsHubLang(){
  return String(typeof SUTIL_ACTIVE_LANGUAGE!=="undefined" ? SUTIL_ACTIVE_LANGUAGE : (document.documentElement.lang||"es")).toLowerCase().slice(0,2);
}
function sutilSetReceiptsHubLabels(){
  const lang=sutilReceiptsHubLang();
  const copy={
    es:{receipts:"Comprobantes de pago",reconciliation:"Conciliación bancaria"},
    pt:{receipts:"Comprovantes de pagamento",reconciliation:"Conciliação bancária"},
    en:{receipts:"Payment receipts",reconciliation:"Bank reconciliation"}
  }[lang]||{receipts:"Comprobantes de pago",reconciliation:"Conciliación bancaria"};
  const a=document.getElementById("receiptHubReceiptsLabel");
  const b=document.getElementById("receiptHubReconciliationLabel");
  if(a)a.textContent=copy.receipts;
  if(b)b.textContent=copy.reconciliation;
}
function sutilSwitchReceiptsHub(view="receipts",silent=false){
  const showRecon=view==="reconciliation";
  const receiptsPane=document.getElementById("receiptHubReceiptsPane");
  const reconciliationPane=document.getElementById("receiptHubReconciliationPane");
  const receiptsBtn=document.getElementById("receiptHubReceiptsBtn");
  const reconciliationBtn=document.getElementById("receiptHubReconciliationBtn");
  sutilSetReceiptsHubLabels();
  if(receiptsPane)receiptsPane.style.display=showRecon?"none":"block";
  if(reconciliationPane){
    reconciliationPane.style.display=showRecon?"block":"none";
    reconciliationPane.setAttribute("aria-hidden",showRecon?"false":"true");
  }
  if(receiptsBtn){receiptsBtn.classList.toggle("active",!showRecon);receiptsBtn.setAttribute("aria-selected",showRecon?"false":"true");}
  if(reconciliationBtn){reconciliationBtn.classList.toggle("active",showRecon);reconciliationBtn.setAttribute("aria-selected",showRecon?"true":"false");}
  if(showRecon && typeof loadReconciliationPanel==="function")loadReconciliationPanel();
  if(!silent && document.getElementById("receiptsSection")?.classList.contains("active")){
    const nav=document.querySelector("#receiptsSection .sutil-receipts-hub-nav-card");
    if(nav)nav.scrollIntoView({block:"start",behavior:"smooth"});
  }
}

let sutilReconciliationState={overview:null,accounts:[],cuts:[],matches:[],alerts:[],automation:{enabled:false,can_manage:false,runtime_ready:false},loaded:false,tab:"review",reviewFilter:"",search:""};

function sutilReconciliationLang(){
  const raw=String((typeof accessLanguageCode!=="undefined"&&accessLanguageCode)||localStorage.getItem("sutil_selected_language")||localStorage.getItem("sutil_access_language")||"es").toLowerCase();
  return ["es","pt","en"].includes(raw)?raw:"es";
}
function sutilReconciliationCopy(){
  const lang=sutilReconciliationLang();
  const copies={
    es:{title:"Conciliación bancaria",sub:"Revisa coincidencias, extractos y alertas. La confirmación automática es opcional y usa una política estricta.",safe:"Política estricta",autoOff:"Automática desactivada",autoOn:"Automática estricta activa",autoLabel:"Confirmación automática",autoHint:"Solo coincidencias únicas con evidencia bancaria fuerte.",autoEnableConfirm:"¿Activar la confirmación automática estricta? Solo se aplicarán pagos con comprobante completado, valor exacto y evidencia bancaria fuerte y única.",autoDisabled:"Confirmación automática desactivada.",autoEnabled:"Confirmación automática estricta activada.",analysisDoneAuto:"Análisis actualizado. Solo las coincidencias que superaron la política estricta pudieron confirmarse automáticamente.",pending:"Comprobantes pendientes",accounts:"Cuentas activas",cuts:"Extractos",alerts:"Alertas",review:"Revisión",statements:"Extractos",accountsTab:"Cuentas",alertsTab:"Alertas",analyze:"Analizar pendientes",search:"Buscar cliente",filter:"Estado",all:"Todos",matchFound:"Coincidencia fuerte",manualReview:"Revisión manual",ambiguous:"Ambiguo",pendingStatus:"Pendiente",score:"Confianza",candidate:"Ver candidatos",noMatches:"Todavía no hay comprobantes analizados. Puedes analizar los pendientes sin confirmar ningún pago.",accountsTitle:"Cuentas para conciliación",accountsSub:"Se sincronizan automáticamente desde Métodos de cobro. Empresario, ADM y cobrador autorizados pueden ver la referencia completa de la cuenta utilizada.",addAccount:"Gestionar en Métodos de cobro",cancel:"Cancelar",save:"Guardar cuenta",display:"Nombre para identificarla",displayPh:"Ej. Cora principal",bank:"Banco",bankPh:"Ej. Cora",code:"Código banco",country:"País",currency:"Moneda",agency:"Agencia",account:"Cuenta",pix:"Clave PIX",noAccounts:"No hay cuentas compatibles para conciliación. Regístralas en Métodos de cobro.",deactivate:"Desactivar",activate:"Activar",uploadTitle:"Subir extracto bancario",uploadSub:"PDF, CSV, XLS/XLSX, OFX o CNAB/TXT. Máximo 25 MB. El período y la fecha/hora de corte se detectan automáticamente.",selectAccount:"Cuenta receptora",choose:"Selecciona una cuenta",from:"Período desde",to:"Período hasta",generated:"Fecha/hora del corte",file:"Archivo del extracto",upload:"Subir extracto",history:"Historial de extractos",refresh:"Actualizar",noCuts:"Todavía no hay extractos cargados.",uploaded:"Cargado",processed:"Procesado",processing:"Procesando",error:"Error",unknown:"Pendiente",period:"Período",cut:"Corte",movements:"movimientos",newMovements:"nuevos",duplicate:"Ese extracto ya fue cargado.",loadError:"No fue posible cargar conciliación bancaria.",accountSaved:"Cuenta bancaria registrada.",accountUpdated:"Estado de la cuenta actualizado.",uploadOk:"Extracto recibido y analizado sin aplicar pagos.",ownerOnly:"La administración de cuentas está reservada al empresario o ADM autorizado.",alertsEmpty:"No hay alertas abiertas.",candidateTitle:"Candidatos bancarios",coverage:"Cobertura de extracto",coverageYes:"Sí",coverageNo:"No",target:"Objetivo",reasons:"Coincidencias",conflicts:"Conflictos",noCandidates:"No se encontraron movimientos candidatos.",close:"Cerrar",analysisDone:"Análisis actualizado. Ningún pago fue confirmado.",payer:"Pagador",bankMovement:"Movimiento bancario",reviewPayment:"Revisar pago",confirmMatched:"Confirmar conciliación",useCandidate:"Revisar con este movimiento",manualConfirmed:"Confirmado manualmente",autoConfirmed:"Confirmado por conciliación",rejectedRecon:"Rechazado",applyNote:"La aplicación usa el flujo actual de comprobantes; la conciliación se registra después.",reanalyze:"Reanalizar",reanalyzing:"Reanalizando…",reanalyzeOk:"Extracto reanalizado."},
    pt:{title:"Conciliação bancária",sub:"Revise correspondências, extratos e alertas. A confirmação automática é opcional e usa uma política estrita.",safe:"Política estrita",autoOff:"Automática desativada",autoOn:"Automática estrita ativa",autoLabel:"Confirmação automática",autoHint:"Somente correspondências únicas com evidência bancária forte.",autoEnableConfirm:"Ativar a confirmação automática estrita? Somente pagamentos com comprovante concluído, valor exato e evidência bancária forte e única serão aplicados.",autoDisabled:"Confirmação automática desativada.",autoEnabled:"Confirmação automática estrita ativada.",analysisDoneAuto:"Análise atualizada. Somente correspondências que passaram pela política estrita puderam ser confirmadas automaticamente.",pending:"Comprovantes pendentes",accounts:"Contas ativas",cuts:"Extratos",alerts:"Alertas",review:"Revisão",statements:"Extratos",accountsTab:"Contas",alertsTab:"Alertas",analyze:"Analisar pendentes",search:"Buscar cliente",filter:"Status",all:"Todos",matchFound:"Correspondência forte",manualReview:"Revisão manual",ambiguous:"Ambíguo",pendingStatus:"Pendente",score:"Confiança",candidate:"Ver candidatos",noMatches:"Ainda não há comprovantes analisados. Você pode analisar os pendentes sem confirmar nenhum pagamento.",accountsTitle:"Contas para conciliação",accountsSub:"São sincronizadas automaticamente a partir de Métodos de cobrança. Empresário, ADM e cobrador autorizados podem ver a referência completa da conta utilizada.",addAccount:"Gerenciar em Métodos de cobrança",cancel:"Cancelar",save:"Salvar conta",display:"Nome para identificar",displayPh:"Ex. Cora principal",bank:"Banco",bankPh:"Ex. Cora",code:"Código banco",country:"País",currency:"Moeda",agency:"Agência",account:"Conta",pix:"Chave PIX",noAccounts:"Não há contas compatíveis para conciliação. Cadastre-as em Métodos de cobrança.",deactivate:"Desativar",activate:"Ativar",uploadTitle:"Enviar extrato bancário",uploadSub:"PDF, CSV, XLS/XLSX, OFX ou CNAB/TXT. Máximo 25 MB. O período e a data/hora do corte são detectados automaticamente.",selectAccount:"Conta receptora",choose:"Selecione uma conta",from:"Período desde",to:"Período até",generated:"Data/hora do corte",file:"Arquivo do extrato",upload:"Enviar extrato",history:"Histórico de extratos",refresh:"Atualizar",noCuts:"Ainda não há extratos carregados.",uploaded:"Carregado",processed:"Processado",processing:"Processando",error:"Erro",unknown:"Pendente",period:"Período",cut:"Corte",movements:"movimentos",newMovements:"novos",duplicate:"Esse extrato já foi carregado.",loadError:"Não foi possível carregar a conciliação bancária.",accountSaved:"Conta bancária cadastrada.",accountUpdated:"Status da conta atualizado.",uploadOk:"Extrato recebido e analisado sem aplicar pagamentos.",ownerOnly:"A administração de contas é restrita ao empresário ou ADM autorizado.",alertsEmpty:"Não há alertas abertos.",candidateTitle:"Candidatos bancários",coverage:"Cobertura do extrato",coverageYes:"Sim",coverageNo:"Não",target:"Alvo",reasons:"Coincidências",conflicts:"Conflitos",noCandidates:"Nenhum movimento candidato foi encontrado.",close:"Fechar",analysisDone:"Análise atualizada. Nenhum pagamento foi confirmado.",payer:"Pagador",bankMovement:"Movimento bancário",reviewPayment:"Revisar pagamento",confirmMatched:"Confirmar conciliação",useCandidate:"Revisar com este movimento",manualConfirmed:"Confirmado manualmente",autoConfirmed:"Confirmado por conciliação",rejectedRecon:"Rejeitado",applyNote:"A aplicação usa o fluxo atual de comprovantes; a conciliação é registrada depois.",reanalyze:"Reanalisar",reanalyzing:"Reanalisando…",reanalyzeOk:"Extrato reanalisado."},
    en:{title:"Bank reconciliation",sub:"Review matches, statements and alerts. Automatic confirmation is optional and uses a strict policy.",safe:"Strict policy",autoOff:"Automatic off",autoOn:"Strict automatic on",autoLabel:"Automatic confirmation",autoHint:"Only unique matches with strong bank evidence.",autoEnableConfirm:"Enable strict automatic confirmation? Payments will only be applied for completed receipts with exact amounts and strong, unique bank evidence.",autoDisabled:"Automatic confirmation disabled.",autoEnabled:"Strict automatic confirmation enabled.",analysisDoneAuto:"Analysis updated. Only matches that passed the strict policy could be confirmed automatically.",pending:"Pending receipts",accounts:"Active accounts",cuts:"Statements",alerts:"Alerts",review:"Review",statements:"Statements",accountsTab:"Accounts",alertsTab:"Alerts",analyze:"Analyze pending",search:"Search client",filter:"Status",all:"All",matchFound:"Strong match",manualReview:"Manual review",ambiguous:"Ambiguous",pendingStatus:"Pending",score:"Confidence",candidate:"View candidates",noMatches:"No receipts have been analyzed yet. You can analyze pending items without confirming any payment.",accountsTitle:"Reconciliation accounts",accountsSub:"They are synchronized automatically from Collection methods. Authorized business owners, ADMs and collectors can see the full reference of the account in use.",addAccount:"Manage in Collection methods",cancel:"Cancel",save:"Save account",display:"Account label",displayPh:"E.g. Main Cora",bank:"Bank",bankPh:"E.g. Cora",code:"Bank code",country:"Country",currency:"Currency",agency:"Branch",account:"Account",pix:"PIX key",noAccounts:"There are no compatible reconciliation accounts. Add them in Collection methods.",deactivate:"Deactivate",activate:"Activate",uploadTitle:"Upload bank statement",uploadSub:"PDF, CSV, XLS/XLSX, OFX or CNAB/TXT. Maximum 25 MB. Statement period and cut date/time are detected automatically.",selectAccount:"Receiving account",choose:"Choose an account",from:"Period from",to:"Period to",generated:"Statement cut date/time",file:"Statement file",upload:"Upload statement",history:"Statement history",refresh:"Refresh",noCuts:"No statements have been uploaded yet.",uploaded:"Uploaded",processed:"Processed",processing:"Processing",error:"Error",unknown:"Pending",period:"Period",cut:"Cut",movements:"movements",newMovements:"new",duplicate:"That statement was already uploaded.",loadError:"Bank reconciliation could not be loaded.",accountSaved:"Bank account registered.",accountUpdated:"Account status updated.",uploadOk:"Statement received and analyzed without applying payments.",ownerOnly:"Account management is limited to the business owner or an authorized ADM.",alertsEmpty:"There are no open alerts.",candidateTitle:"Bank candidates",coverage:"Statement coverage",coverageYes:"Yes",coverageNo:"No",target:"Target",reasons:"Matches",conflicts:"Conflicts",noCandidates:"No candidate movements were found.",close:"Close",analysisDone:"Analysis updated. No payment was confirmed.",payer:"Payer",bankMovement:"Bank movement",reviewPayment:"Review payment",confirmMatched:"Confirm reconciliation",useCandidate:"Review with this movement",manualConfirmed:"Manually confirmed",autoConfirmed:"Reconciliation confirmed",rejectedRecon:"Rejected",applyNote:"Application uses the current receipt flow; reconciliation is recorded afterwards.",reanalyze:"Reanalyze",reanalyzing:"Reanalyzing…",reanalyzeOk:"Statement reanalyzed."}
  };
  return copies[lang]||copies.es;
}
function sutilReconEscape(v){return String(v??"").replace(/[&<>"']/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]));}
function sutilReconDate(v){
  if(!v)return "—";
  const raw=String(v).trim();
  const onlyDate=raw.match(/^(\d{4})-(\d{2})-(\d{2})$/);
  if(onlyDate){
    const d=new Date(Number(onlyDate[1]),Number(onlyDate[2])-1,Number(onlyDate[3]));
    return d.toLocaleDateString();
  }
  const d=new Date(raw.replace(" ","T"));
  return isNaN(d)?raw:d.toLocaleString();
}
function sutilReconReasonLabel(reason){
  const lang=sutilReconciliationLang();
  const labels={
    amount_exact:{es:"Valor exacto",pt:"Valor exato",en:"Exact amount"},
    date_same:{es:"Fecha exacta",pt:"Data exata",en:"Exact date"},
    payer_name_strong:{es:"Nombre compatible",pt:"Nome compatível",en:"Matching payer name"},
    client_payer_name_strong:{es:"Nombre del cliente compatible",pt:"Nome do cliente compatível",en:"Matching client name"},
    payer_name_close:{es:"Nombre cercano",pt:"Nome próximo",en:"Close payer name"},
    client_payer_name_close:{es:"Nombre del cliente cercano",pt:"Nome do cliente próximo",en:"Close client name"},
    payer_initials_compatible:{es:"Iniciales compatibles",pt:"Iniciais compatíveis",en:"Matching initials"},
    unique_name_date_amount:{es:"Coincidencia única",pt:"Correspondência única",en:"Unique match"},
    ambiguous_name_date_amount:{es:"Posible duplicidad",pt:"Possível duplicidade",en:"Possible duplicate"},
    strong_identifier_candidate:{es:"Identificador bancario",pt:"Identificador bancário",en:"Bank identifier"},
    e2e_match:{es:"E2E coincide",pt:"E2E confere",en:"E2E match"},
    bank_transaction_match:{es:"ID bancario coincide",pt:"ID bancário confere",en:"Bank ID match"},
    within_upload_history_window:{es:"Dentro de la ventana",pt:"Dentro da janela",en:"Within search window"}
  };
  const row=labels[String(reason||"")];
  return row?(row[lang]||row.es):String(reason||"").replaceAll("_"," ");
}
function sutilReconMoney(value){
  const n=Number(value||0);const code=(sutilReconciliationState.accounts.find(a=>a.active)?.currency_code||document.getElementById("settingCurrencyCode")?.value||"BRL").toUpperCase();
  try{return new Intl.NumberFormat(code==="BRL"?"pt-BR":(sutilReconciliationLang()==="en"?"en-US":"es-CO"),{style:"currency",currency:code}).format(n)}catch(_){return `${n.toFixed(2)} ${code}`;}
}
function sutilReconAccountReference(a){
  return String(a?.reference_visible||a?.account_masked||a?.pix_key_masked||"");
}
function sutilReconAccountOptionLabel(a){
  const name=String(a?.display_name||a?.bank_name||"Cuenta").trim();
  const ref=sutilReconAccountReference(a).trim();
  const bank=String(a?.bank_name||"").trim();
  const holder=String(a?.holder_name||"").trim();
  if(ref)return `${name} · ${ref}`;
  if(bank && bank.toLowerCase()!==name.toLowerCase())return `${name} · ${bank}`;
  if(holder)return `${name} · ${holder}`;
  return name;
}
function sutilReconCanManageAccounts(){return (!!currentUser && ["company_owner","sutil_owner"].includes(currentUser.role)) || !!currentUser?.permissions?.manage_bank_reconciliation;}
function sutilReconStatusLabel(status){
  const t=sutilReconciliationCopy();const key=String(status||"unknown").toLowerCase();
  const map={pending:t.pendingStatus,match_found:t.matchFound,manual_review:t.manualReview,ambiguous:t.ambiguous,manual_confirmed:t.manualConfirmed,auto_confirmed:t.autoConfirmed,rejected:t.rejectedRecon,uploaded:t.uploaded,processed:t.processed,processing:t.processing,error:t.error,needs_review:t.manualReview};
  return map[key]||key.replaceAll("_"," ");
}
function sutilReconAlertLabel(type){
  const lang=sutilReconciliationLang();const es={PAYMENT_FAILED:"Pago no realizado",PAYMENT_REFUNDED:"Pago devuelto",NOT_FOUND_IN_STATEMENT:"No aparece en extracto",MOVEMENT_ALREADY_LINKED:"Movimiento ya vinculado",AMOUNT_MISMATCH:"Valor no coincide",MULTIPLE_MATCHES:"Múltiples coincidencias",DUPLICATE_TRANSACTION_ID:"ID repetido",DUPLICATE_E2E:"E2E repetido",POSSIBLE_MANIPULATION:"Posible manipulación",AUTO_CONFIRM_DEFERRED:"Confirmación automática aplazada",AUTO_CONFIRM_BLOCKED:"Confirmación automática bloqueada"};
  const pt={PAYMENT_FAILED:"Pagamento não realizado",PAYMENT_REFUNDED:"Pagamento devolvido",NOT_FOUND_IN_STATEMENT:"Não aparece no extrato",MOVEMENT_ALREADY_LINKED:"Movimento já vinculado",AMOUNT_MISMATCH:"Valor não confere",MULTIPLE_MATCHES:"Múltiplas correspondências",DUPLICATE_TRANSACTION_ID:"ID repetido",DUPLICATE_E2E:"E2E repetido",POSSIBLE_MANIPULATION:"Possível manipulação",AUTO_CONFIRM_DEFERRED:"Confirmação automática adiada",AUTO_CONFIRM_BLOCKED:"Confirmação automática bloqueada"};
  const en={PAYMENT_FAILED:"Payment failed",PAYMENT_REFUNDED:"Payment refunded",NOT_FOUND_IN_STATEMENT:"Not found in statement",MOVEMENT_ALREADY_LINKED:"Movement already linked",AMOUNT_MISMATCH:"Amount mismatch",MULTIPLE_MATCHES:"Multiple matches",DUPLICATE_TRANSACTION_ID:"Repeated ID",DUPLICATE_E2E:"Repeated E2E",POSSIBLE_MANIPULATION:"Possible manipulation",AUTO_CONFIRM_DEFERRED:"Automatic confirmation deferred",AUTO_CONFIRM_BLOCKED:"Automatic confirmation blocked"};
  return ({es,pt,en}[lang]||es)[type]||String(type||"Alerta").replaceAll("_"," ");
}
function sutilReconFilteredMatches(){
  const term=String(sutilReconciliationState.search||"").trim().toLowerCase();const filter=sutilReconciliationState.reviewFilter||"";
  return (sutilReconciliationState.matches||[]).filter(m=>{
    const text=[m.client_name,m.client_code,m.status,m.bank_movement?.payer_name].filter(Boolean).join(" ").toLowerCase();
    return (!term||text.includes(term))&&(!filter||m.status===filter);
  });
}
function sutilReconSwitchTab(tab){sutilReconciliationState.tab=tab||"review";renderReconciliationPanel();}
function sutilReconSetReviewFilter(value){sutilReconciliationState.reviewFilter=value||"";renderReconciliationPanel();}
function sutilReconSetSearch(value){sutilReconciliationState.search=value||"";renderReconciliationPanel();}
function sutilReconScore(value){const n=Math.max(0,Math.min(100,Number(value||0)));return `<span class="sutil-recon-score"><span class="sutil-recon-score-bar"><span style="width:${n}%"></span></span>${Math.round(n)}%</span>`;}
function sutilReconDuplicateWarningText(){const lang=sutilReconciliationLang();return lang==="pt"?"⚠ Identificador bancário já utilizado em outro pagamento. Não confirme novamente.":lang==="en"?"⚠ Bank identifier already used by another payment. Do not confirm again.":"⚠ Identificador bancario ya utilizado en otro pago. No confirmar nuevamente.";}

function sutilReconRenderReview(t){
  const rows=sutilReconFilteredMatches();
  return `<div class="sutil-recon-panel">
    <div class="sutil-recon-toolbar">
      <label>${t.search}<input value="${sutilReconEscape(sutilReconciliationState.search||"")}" placeholder="${t.search}" oninput="sutilReconciliationState.search=this.value;sutilDebounceUi('recon-search',renderReconciliationPanel,100)"></label>
      <label>${t.filter}<select onchange="sutilReconSetReviewFilter(this.value)"><option value="">${t.all}</option><option value="match_found" ${sutilReconciliationState.reviewFilter==="match_found"?"selected":""}>${t.matchFound}</option><option value="manual_review" ${sutilReconciliationState.reviewFilter==="manual_review"?"selected":""}>${t.manualReview}</option><option value="ambiguous" ${sutilReconciliationState.reviewFilter==="ambiguous"?"selected":""}>${t.ambiguous}</option><option value="pending" ${sutilReconciliationState.reviewFilter==="pending"?"selected":""}>${t.pendingStatus}</option></select></label>
      <button id="sutilReconAnalyzeButton" class="btn secondary" type="button" onclick="sutilReconAnalyzePending()">⚙ ${t.analyze}</button>
    </div>
    <div class="sutil-recon-queue">${rows.length?rows.map(m=>{
      const bm=m.bank_movement||null;const score=Number(m.match_score||0);const ra=m.receipt_analysis||null;const bankLine=bm?`${sutilReconEscape(bm.payer_name||t.payer)} · ${sutilReconMoney(bm.amount||0)}`:"—";
      const bankMeta=bm?`${sutilReconEscape(bm.movement_type||"")} · ${sutilReconDate(bm.movement_at||bm.movement_date)}`:"";
      const receiptDetected=ra&&ra.transaction_at?`<small style="margin-top:4px">🧾 ${sutilReconEscape(ra.provider_detected||"")} · ${sutilReconDate(ra.transaction_at)}${ra.payer_name?` · ${sutilReconEscape(ra.payer_name)}`:""}</small>`:"";
      const duplicateAlerts=Array.isArray(m.duplicate_alerts)?m.duplicate_alerts:[];
      const duplicateWarning=duplicateAlerts.length?`<div style="margin-top:8px;padding:9px 11px;border:1px solid #dc5267;border-radius:12px;background:rgba(220,82,103,.14);color:#ffd6de;font-weight:800;font-size:12px;line-height:1.35">${sutilReconEscape(sutilReconDuplicateWarningText())}</div>`:"";
      const reviewLabel=duplicateAlerts.length?"⚠ "+(sutilReconciliationLang()==="pt"?"Revisar duplicado":sutilReconciliationLang()==="en"?"Review duplicate":"Revisar duplicado"):(m.status==="match_found"?"✓ "+t.confirmMatched:"📄 "+t.reviewPayment);
      return `<article class="sutil-recon-review-row"><div class="sutil-recon-review-main"><strong>${sutilReconEscape(m.client_name||"—")} · ${sutilReconMoney(m.receipt_amount||0)}</strong><small>${sutilReconEscape(m.client_code||"")} · ${sutilReconDate(m.receipt_created_at)}</small>${receiptDetected}<div style="margin-top:5px"><span class="sutil-recon-status ${sutilReconEscape(m.status||"")}">${sutilReconEscape(sutilReconStatusLabel(m.status))}</span></div>${duplicateWarning}</div><div class="sutil-recon-review-bank"><strong>${bankLine}</strong><small>${bankMeta}</small></div><div class="sutil-recon-review-actions">${sutilReconScore(score)}<button class="btn secondary" type="button" onclick="sutilReconOpenCandidates(${Number(m.receipt_id)})">🔎 ${t.candidate}</button>${!["manual_confirmed","auto_confirmed","rejected"].includes(String(m.status||""))?`<button class="btn secondary" type="button" onclick="sutilReconOpenReceiptForDecision(${Number(m.receipt_id)},${bm?Number(bm.id):"null"})">${reviewLabel}</button>`:""}</div></article>`;
    }).join(""):`<div class="sutil-recon-empty">${t.noMatches}</div>`}</div>
    <div id="sutilReconReviewMessage" class="sutil-recon-message"></div>
  </div>`;
}
function sutilReconRenderStatements(t,accounts,cuts){
  return `<div class="sutil-recon-grid"><div class="sutil-recon-panel"><h4>${t.uploadTitle}</h4><div class="muted">${t.uploadSub}</div><div class="sutil-recon-form"><label class="wide">${t.selectAccount}<select id="sutilReconUploadAccount"><option value="">${t.choose}</option>${accounts.filter(a=>a.active).map(a=>`<option value="${Number(a.id)}">${sutilReconEscape(sutilReconAccountOptionLabel(a))}</option>`).join("")}</select></label><label class="wide">${t.file}<input id="sutilReconFile" type="file" accept="application/pdf,.pdf,text/csv,.csv,application/vnd.ms-excel,.xls,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,.xlsx,application/x-ofx,.ofx,text/plain,.txt,.cnab,application/octet-stream"></label></div><div class="sutil-recon-actions"><button id="sutilReconUploadButton" class="btn success" type="button" onclick="sutilReconUploadStatement()">⬆ ${t.upload}</button></div><div id="sutilReconUploadMessage" class="sutil-recon-message"></div></div>
    <div class="sutil-recon-panel"><div class="sutil-recon-history-head"><h4>${t.history}</h4><button class="btn secondary" type="button" onclick="loadReconciliationPanel(true)">↻ ${t.refresh}</button></div><div class="sutil-recon-list">${cuts.length?cuts.map(c=>{const period=(c.period_start||c.period_end)?`${c.period_start||"…"} — ${c.period_end||"…"}`:"—";const canReanalyze=["error","needs_review","uploaded","processed"].includes(String(c.status||"").toLowerCase());return `<div class="sutil-recon-row"><div class="sutil-recon-row-main"><strong>${sutilReconEscape(c.bank_account_name||c.bank_name||"—")}</strong><small>${sutilReconEscape(c.original_filename||"Extracto")} · ${t.period}: ${sutilReconEscape(period)}</small><small>${Number(c.total_movements||0)} ${t.movements} · ${Number(c.new_movements||0)} ${t.newMovements} · ${t.cut}: ${sutilReconDate(c.statement_generated_at||c.created_at)}</small>${canReanalyze?`<div class="sutil-recon-actions" style="margin-top:8px"><button class="btn secondary" type="button" onclick="sutilReconReprocessStatement(${Number(c.id)})">↻ ${t.reanalyze}</button></div>`:""}</div><span class="sutil-recon-status ${sutilReconEscape(c.status||"")}">${sutilReconEscape(sutilReconStatusLabel(c.status))}</span></div>`;}).join(""):`<div class="sutil-recon-empty">${t.noCuts}</div>`}</div></div></div>`;
}
function sutilReconGoToCollectionMethods(){
  openSection("collectionMethodsSection");
  if(typeof loadCollectionAccounts==="function"){
    setTimeout(()=>loadCollectionAccounts().catch(()=>{}),0);
  }
}
function sutilReconRenderAccounts(t,accounts,manage){
  return `<div class="sutil-recon-panel"><div class="sutil-recon-head"><div><h4>${t.accountsTitle}</h4><div class="muted">${t.accountsSub}</div></div>${manage?`<button class="btn secondary" type="button" onclick="sutilReconGoToCollectionMethods()">⚙ ${t.addAccount}</button>`:""}</div><div class="sutil-recon-list">${accounts.length?accounts.map(a=>`<div class="sutil-recon-row"><div class="sutil-recon-row-main"><strong>${sutilReconEscape(a.display_name||a.bank_name||"—")}</strong><small>${sutilReconEscape(sutilReconAccountReference(a)?`${a.bank_name||"—"} · ${sutilReconAccountReference(a)}`:(a.bank_name||a.holder_name||"—"))}</small></div><span class="sutil-recon-status ${a.active?"processed":""}">${a.active?"●":"○"}</span></div>`).join(""):`<div class="sutil-recon-empty">${t.noAccounts}${manage?`<div class="sutil-recon-actions" style="justify-content:center;margin-top:10px"><button class="btn secondary" type="button" onclick="sutilReconGoToCollectionMethods()">⚙ ${t.addAccount}</button></div>`:"<br>"+t.ownerOnly}</div>`}</div></div>`;
}
function sutilReconRenderAlerts(t){
  const rows=sutilReconciliationState.alerts||[];
  return `<div class="sutil-recon-panel"><div class="sutil-recon-head"><div><h4>${t.alertsTab}</h4><div class="muted">${t.safe}</div></div></div><div class="sutil-recon-list">${rows.length?rows.map(a=>{const icon=a.severity==="critical"||a.severity==="high"?"⚠️":a.severity==="warning"?"🔸":"ℹ️";const client=a.client_name?`${sutilReconEscape(a.client_name)}${a.client_code?` · ${sutilReconEscape(a.client_code)}`:""}`:"—";const amount=a.receipt_amount!=null?sutilReconMoney(a.receipt_amount):"";return `<div class="sutil-recon-alert-row"><div class="sutil-recon-alert-icon">${icon}</div><div class="sutil-recon-alert-main"><strong>${sutilReconEscape(sutilReconAlertLabel(a.alert_type))}</strong><small>${client}${amount?` · ${amount}`:""} · ${sutilReconDate(a.created_at)}</small></div><span class="sutil-recon-status ${sutilReconEscape(a.severity||"warning")}">${sutilReconEscape(a.severity||"warning")}</span></div>`;}).join(""):`<div class="sutil-recon-empty">${t.alertsEmpty}</div>`}</div></div>`;
}
function sutilReconAutomationHtml(t){
  const a=sutilReconciliationState.automation||{};const enabled=Boolean(a.enabled);const label=enabled?t.autoOn:t.autoOff;
  if(a.can_manage){
    return `<div class="sutil-recon-auto-control ${enabled?"on":""}" title="${sutilReconEscape(t.autoHint)}"><label><input id="sutilReconAutomationToggle" type="checkbox" ${enabled?"checked":""} ${a.runtime_ready===false?"disabled":""} onchange="sutilReconToggleAutomation(this)"><strong>⚡ ${sutilReconEscape(label)}</strong></label><small>${sutilReconEscape(t.autoHint)}</small></div>`;
  }
  return `<div class="sutil-recon-auto-control ${enabled?"on":""}"><strong>⚡ ${sutilReconEscape(label)}</strong><small>${sutilReconEscape(t.autoHint)}</small></div>`;
}

async function sutilReconToggleAutomation(input){
  const t=sutilReconciliationCopy();const desired=Boolean(input?.checked);if(!input)return;
  if(desired){const ok=await sutilConfirm(t.autoEnableConfirm);if(!ok){input.checked=false;return;}}
  input.disabled=true;
  try{const data=await api("/api/admin/reconciliation/automation",{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({enabled:desired})});sutilReconciliationState.automation=data||{enabled:desired};renderReconciliationPanel();}
  catch(e){input.checked=!desired;input.disabled=false;alert(e.message||sutilReconciliationCopy().loadError);}
}

function renderReconciliationPanel(){
  const root=document.getElementById("reconciliationModule");if(!root)return;const t=sutilReconciliationCopy();const o=sutilReconciliationState.overview||{};const accounts=sutilReconciliationState.accounts||[];const cuts=sutilReconciliationState.cuts||[];const manage=sutilReconCanManageAccounts();const tab=sutilReconciliationState.tab||"review";
  root.innerHTML=`<div class="sutil-recon-card"><div class="sutil-recon-head"><div><h3>🏦 ${t.title}</h3><div class="muted">${t.sub}</div></div>${sutilReconAutomationHtml(t)}</div><div class="sutil-recon-kpis"><div class="sutil-recon-kpi"><small>${t.pending}</small><strong>${Number(o.pending_receipts||0)}</strong><small class="sutil-recon-kpi-sub">${sutilReconMoney(o.pending_receipts_total||0)}</small></div><div class="sutil-recon-kpi"><small>${t.accounts}</small><strong>${Number(o.active_bank_accounts||0)}</strong></div><div class="sutil-recon-kpi"><small>${t.cuts}</small><strong>${Number(o.statement_cuts||0)}</strong><small class="sutil-recon-kpi-sub">${Number(o.bank_movements||0)} ${t.movements}</small></div><div class="sutil-recon-kpi"><small>${t.alerts}</small><strong>${Number(o.open_alerts||0)}</strong><small class="sutil-recon-kpi-sub">${Number(o.pending_reconciliations||0)} ${t.review.toLowerCase()}</small></div></div><div class="sutil-recon-tabs" role="tablist"><button class="sutil-recon-tab ${tab==="review"?"active":""}" type="button" onclick="sutilReconSwitchTab('review')">🔎 ${t.review}<span class="sutil-recon-tab-count">${Number(o.pending_reconciliations||0)}</span></button><button class="sutil-recon-tab ${tab==="statements"?"active":""}" type="button" onclick="sutilReconSwitchTab('statements')">📄 ${t.statements}<span class="sutil-recon-tab-count">${cuts.length}</span></button><button class="sutil-recon-tab ${tab==="accounts"?"active":""}" type="button" onclick="sutilReconSwitchTab('accounts')">🏦 ${t.accountsTab}<span class="sutil-recon-tab-count">${accounts.filter(a=>a.active).length}</span></button><button class="sutil-recon-tab ${tab==="alerts"?"active":""}" type="button" onclick="sutilReconSwitchTab('alerts')">⚠️ ${t.alertsTab}<span class="sutil-recon-tab-count">${Number(o.open_alerts||0)}</span></button></div><div class="sutil-recon-pane active">${tab==="review"?sutilReconRenderReview(t):tab==="statements"?sutilReconRenderStatements(t,accounts,cuts):tab==="accounts"?sutilReconRenderAccounts(t,accounts,manage):sutilReconRenderAlerts(t)}</div><div id="sutilReconCandidateSheet" class="sutil-recon-sheet" aria-hidden="true" onclick="sutilReconCloseCandidatesFromBackdrop(event)"><div class="sutil-recon-sheet-card"><div class="sutil-recon-sheet-head"><div><h4>${t.candidateTitle}</h4><div id="sutilReconCandidateSubtitle" class="muted"></div></div><button class="sutil-recon-sheet-close" type="button" aria-label="${t.close}" onclick="sutilReconCloseCandidates()">×</button></div><div id="sutilReconCandidateBody"><div class="sutil-recon-empty">…</div></div></div></div></div>`;
}

async function loadReconciliationPanel(force=false){
  const root=document.getElementById("reconciliationModule");if(!root||!token)return;if(sutilReconciliationState.loaded&&!force){renderReconciliationPanel();return;}
  try{const automationRequest=api("/api/admin/reconciliation/automation").catch(()=>({enabled:false,can_manage:false,runtime_ready:false}));const [overview,accounts,cuts,matches,alerts,automation]=await Promise.all([api("/api/admin/reconciliation/overview"),api("/api/admin/reconciliation/bank-accounts"),api("/api/admin/reconciliation/statement-cuts?limit=30"),api("/api/admin/reconciliation/matches?limit=80"),api("/api/admin/reconciliation/alerts?status=open&limit=60"),automationRequest]);sutilReconciliationState={...sutilReconciliationState,overview:overview||{},accounts:Array.isArray(accounts)?accounts:[],cuts:Array.isArray(cuts)?cuts:[],matches:Array.isArray(matches)?matches:[],alerts:Array.isArray(alerts)?alerts:[],automation:automation||{enabled:false,can_manage:false,runtime_ready:false},loaded:true};renderReconciliationPanel();}
  catch(e){if(String(e?.message||"").includes("403")||String(e?.message||"").toLowerCase().includes("permiso")){root.innerHTML="";return;}root.innerHTML=`<div class="sutil-recon-card"><div class="sutil-recon-message error">${sutilReconEscape(sutilReconciliationCopy().loadError)} ${sutilReconEscape(e?.message||"")}</div></div>`;}
}
async function sutilReconAnalyzePending(){
  const t=sutilReconciliationCopy();const btn=document.getElementById("sutilReconAnalyzeButton");const msg=document.getElementById("sutilReconReviewMessage");
  try{if(btn)btn.disabled=true;if(msg){msg.className="sutil-recon-message";msg.textContent="…";}const d=await api("/api/admin/reconciliation/matches/run",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({limit:200})});sutilReconciliationState.loaded=false;await loadReconciliationPanel(true);const current=document.getElementById("sutilReconReviewMessage");if(current){current.className="sutil-recon-message ok";current.textContent=d?.automatic_confirmation_enabled?t.analysisDoneAuto:t.analysisDone;}}
  catch(e){if(msg){msg.className="sutil-recon-message error";msg.textContent=e.message||t.loadError;}}
  finally{const current=document.getElementById("sutilReconAnalyzeButton");if(current)current.disabled=false;}
}
async function sutilReconOpenCandidates(receiptId){
  const t=sutilReconciliationCopy();const sheet=document.getElementById("sutilReconCandidateSheet");const body=document.getElementById("sutilReconCandidateBody");const sub=document.getElementById("sutilReconCandidateSubtitle");if(!sheet||!body)return;sheet.classList.add("open");sheet.setAttribute("aria-hidden","false");body.innerHTML='<div class="sutil-recon-empty">…</div>';
  try{
    const d=await api(`/api/admin/reconciliation/matches/${Number(receiptId)}/candidates`);
    if(sub){
      const lang=sutilReconciliationLang();
      if(d.trusted_transaction_date){
        sub.textContent=`${t.coverage}: ${d.statement_coverage?t.coverageYes:t.coverageNo} · ${t.target}: ${sutilReconMoney(d.target_amount||0)} · ${String(d.target_date||"—")}`;
      }else{
        const label=lang==="pt"?"Janela de busca":(lang==="en"?"Search window":"Ventana de búsqueda");
        const note=lang==="pt"?"imagem sem data bancária extraída":(lang==="en"?"image without extracted bank date":"imagen sin fecha bancaria extraída");
        sub.textContent=`${t.target}: ${sutilReconMoney(d.target_amount||0)} · ${label}: ${String(d.search_date_from||"—")} → ${String(d.search_date_to||"—")} · ${note}`;
      }
    }
    const rows=Array.isArray(d.candidates)?d.candidates:[];body.innerHTML=rows.length?rows.map(c=>`<div class="sutil-recon-candidate"><div class="sutil-recon-candidate-top"><strong>${sutilReconEscape(c.payer_name||t.payer)} · ${sutilReconMoney(c.amount||0)}</strong>${sutilReconScore(c.score)}</div><small>${sutilReconDate(c.movement_at||c.movement_date)} · ${sutilReconEscape(c.movement_type||"")}${c.payer_document_masked?` · ${sutilReconEscape(c.payer_document_masked)}`:""}</small>${c.e2e_last8?`<small>E2E ••••${sutilReconEscape(c.e2e_last8)}</small>`:""}${(c.reasons||[]).length?`<div>${(c.reasons||[]).map(r=>`<span class="sutil-recon-reason">${sutilReconEscape(sutilReconReasonLabel(r))}</span>`).join("")}</div>`:""}${(c.conflicts||[]).length?`<div>${(c.conflicts||[]).map(r=>`<span class="sutil-recon-reason sutil-recon-conflict">${sutilReconEscape(r)}</span>`).join("")}</div>`:""}${!(c.conflicts||[]).length?`<div class="sutil-recon-actions" style="margin-top:7px"><button class="btn secondary" type="button" onclick="sutilReconOpenReceiptForDecision(${Number(receiptId)},${Number(c.bank_movement_id)})">✓ ${t.useCandidate}</button></div>`:""}</div>`).join(""):`<div class="sutil-recon-empty">${t.noCandidates}</div>`;
  }
  catch(e){body.innerHTML=`<div class="sutil-recon-message error">${sutilReconEscape(e.message||t.loadError)}</div>`;}
}
function sutilReconCloseCandidates(){const sheet=document.getElementById("sutilReconCandidateSheet");if(sheet){sheet.classList.remove("open");sheet.setAttribute("aria-hidden","true");}}
function sutilReconCloseCandidatesFromBackdrop(e){if(e.target===document.getElementById("sutilReconCandidateSheet"))sutilReconCloseCandidates();}
function sutilReconToggleAccountForm(show){const el=document.getElementById("sutilReconAccountForm");if(el)el.style.display=show?"block":"none";}
async function sutilReconCreateAccount(){
  const t=sutilReconciliationCopy();const msg=document.getElementById("sutilReconAccountMessage");const display=document.getElementById("sutilReconDisplayName")?.value.trim();const bank=document.getElementById("sutilReconBankName")?.value.trim();if(!display||!bank){if(msg){msg.className="sutil-recon-message error";msg.textContent=`${t.display} / ${t.bank}`;}return;}
  try{await api("/api/admin/reconciliation/bank-accounts",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({display_name:display,bank_name:bank,bank_code:document.getElementById("sutilReconBankCode")?.value.trim()||null,country_code:document.getElementById("sutilReconCountry")?.value||"BR",currency_code:(document.getElementById("sutilReconCurrency")?.value.trim()||"BRL").toUpperCase(),agency:document.getElementById("sutilReconAgency")?.value.trim()||null,account_number:document.getElementById("sutilReconAccountNumber")?.value.trim()||null,pix_key:document.getElementById("sutilReconPixKey")?.value.trim()||null})});sutilReconciliationState.loaded=false;await loadReconciliationPanel(true);sutilReconciliationState.tab="accounts";renderReconciliationPanel();const newMsg=document.getElementById("sutilReconAccountMessage");if(newMsg){newMsg.className="sutil-recon-message ok";newMsg.textContent=t.accountSaved;}}
  catch(e){if(msg){msg.className="sutil-recon-message error";msg.textContent=e.message;}}
}
async function sutilReconSetAccountActive(id,active){try{await api(`/api/admin/reconciliation/bank-accounts/${id}/active`,{method:"PATCH",headers:{"Content-Type":"application/json"},body:JSON.stringify({active:Boolean(active)})});sutilReconciliationState.loaded=false;await loadReconciliationPanel(true);sutilReconciliationState.tab="accounts";renderReconciliationPanel();}catch(e){alert(e.message);}}
async function sutilReconReprocessStatement(statementId){
  const t=sutilReconciliationCopy();
  const msg=document.getElementById("sutilReconUploadMessage");
  if(msg){msg.className="sutil-recon-message";msg.textContent=t.reanalyzing;}
  try{
    const result=await api(`/api/admin/reconciliation/statement-cuts/${Number(statementId)}/process`,{method:"POST"});
    if(msg){msg.className="sutil-recon-message success";msg.textContent=result?.status==="processed"?`${t.reanalyzeOk} ${Number(result.total_movements||0)} ${t.movements}.`:(result?.status||t.reanalyzeOk);}
    await loadReconciliationPanel(true);
  }catch(e){
    if(msg){msg.className="sutil-recon-message error";msg.textContent=e.message||String(e);}
  }
}

async function sutilReconUploadStatement(){
  const t=sutilReconciliationCopy();const msg=document.getElementById("sutilReconUploadMessage");const btn=document.getElementById("sutilReconUploadButton");const accountId=Number(document.getElementById("sutilReconUploadAccount")?.value||0);const file=document.getElementById("sutilReconFile")?.files?.[0];if(!accountId||!file){if(msg){msg.className="sutil-recon-message error";msg.textContent=!accountId?t.choose:t.file;}return;}if(file.size>25*1024*1024){if(msg){msg.className="sutil-recon-message error";msg.textContent="25 MB";}return;}
  const form=new FormData();form.append("bank_account_id",String(accountId));form.append("file",file);
  try{if(btn)btn.disabled=true;if(msg){msg.className="sutil-recon-message";msg.textContent="…";}const d=await api("/api/admin/reconciliation/statement-cuts/upload",{method:"POST",body:form});sutilReconciliationState.loaded=false;await loadReconciliationPanel(true);sutilReconciliationState.tab="statements";renderReconciliationPanel();const newMsg=document.getElementById("sutilReconUploadMessage");if(newMsg){newMsg.className="sutil-recon-message ok";newMsg.textContent=d?.message||t.uploadOk;}}
  catch(e){if(msg){msg.className="sutil-recon-message error";msg.textContent=e.message||t.loadError;}}
  finally{const current=document.getElementById("sutilReconUploadButton");if(current)current.disabled=false;}
}
let sutilReconFinalizeHint=null;
let sutilReconDuplicateReviewHint=null;

async function sutilReconOpenReceiptForDecision(receiptId,movementId=null){
  const id=Number(receiptId||0);
  if(!id)return;
  try{
    if(!Array.isArray(receiptRowsCache)||!receiptRowsCache.some(r=>Number(r.id)===id)){
      await refreshReceipts();
    }
    if(!receiptRowsCache.some(r=>Number(r.id)===id)){
      throw new Error(sutilReconciliationCopy().loadError);
    }
    const match=(sutilReconciliationState.matches||[]).find(m=>Number(m.receipt_id)===id)||null;
    const duplicateAlerts=Array.isArray(match?.duplicate_alerts)?match.duplicate_alerts:[];
    sutilReconDuplicateReviewHint=duplicateAlerts.length?{
      receiptId:id,
      duplicateAlerts:[...duplicateAlerts],
      receiptAnalysis:match?.receipt_analysis||null
    }:null;
    sutilReconFinalizeHint={receiptId:id,bankMovementId:movementId?Number(movementId):null};
    sutilReconCloseCandidates();
    openPixReview(id);
  }catch(e){alert(e.message||sutilReconciliationCopy().loadError);}
}

async function sutilReconciliationFinalizeExistingPayment(receiptId,approved){
  const id=Number(receiptId||0);
  if(!id)return;
  if(!approved){
    sutilReconFinalizeHint=null;
    sutilReconciliationState.loaded=false;
    try{await loadReconciliationPanel(true);}catch(_){ }
    return;
  }
  const hint=sutilReconFinalizeHint&&Number(sutilReconFinalizeHint.receiptId)===id?sutilReconFinalizeHint:null;
  const payload={};
  if(hint?.bankMovementId)payload.bank_movement_id=Number(hint.bankMovementId);
  try{
    await api(`/api/admin/reconciliation/matches/${id}/finalize`,{
      method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify(payload)
    });
  }catch(e){
    // El pago ya fue aplicado por el flujo estable. Si este enlace falla, no se
    // revierte el pago; la próxima carga de conciliación intentará autosincronizarlo.
    console.warn("[Sutil] Conciliación posterior al pago pendiente:",e?.message||e);
  }finally{
    sutilReconFinalizeHint=null;
    sutilReconciliationState.loaded=false;
    try{await loadReconciliationPanel(true);}catch(_){ }
  }
}

let receiptRowsCache=[];
let reviewingReceiptId=null;
let receiptPeriodMode="today";
let receiptPageOffset=0;
let receiptTotalCount=0;
let receiptHasMore=false;
const RECEIPT_PAGE_SIZE=50;
let receiptRoutesLoaded=false;

function sutilReceiptCopy(){
  const lang=String(typeof SUTIL_ACTIVE_LANGUAGE!=="undefined"?SUTIL_ACTIVE_LANGUAGE:(document.documentElement.lang||"es")).toLowerCase().slice(0,2);
  const copies={
    es:{today:"Hoy",yesterday:"Ayer",between:"Entre fechas",all:"Todos",loadMore:"＋ Cargar más",found:"comprobante(s) encontrado(s)",showing:"Mostrando",of:"de",noRows:"No hay comprobantes para los filtros seleccionados.",loading:"Consultando comprobantes..."},
    pt:{today:"Hoje",yesterday:"Ontem",between:"Entre datas",all:"Todos",loadMore:"＋ Carregar mais",found:"comprovante(s) encontrado(s)",showing:"Mostrando",of:"de",noRows:"Não há comprovantes para os filtros selecionados.",loading:"Consultando comprovantes..."},
    en:{today:"Today",yesterday:"Yesterday",between:"Date range",all:"All",loadMore:"＋ Load more",found:"receipt(s) found",showing:"Showing",of:"of",noRows:"No receipts match the selected filters.",loading:"Loading receipts..."}
  };
  return copies[lang]||copies.es;
}
function sutilSetReceiptFilterLabels(){
  const t=sutilReceiptCopy();
  const labels={receiptPeriodToday:t.today,receiptPeriodYesterday:t.yesterday,receiptPeriodBetween:t.between,receiptPeriodAll:t.all,receiptLoadMoreBtn:t.loadMore};
  Object.entries(labels).forEach(([id,value])=>{const el=document.getElementById(id);if(el)el.textContent=value;});
}
function sutilLocalIsoDate(d){
  const y=d.getFullYear();const m=String(d.getMonth()+1).padStart(2,"0");const day=String(d.getDate()).padStart(2,"0");
  return `${y}-${m}-${day}`;
}
function sutilReceiptLocalDayBounds(isoDate){
  if(!isoDate)return null;
  const parts=String(isoDate).split("-").map(Number);
  if(parts.length!==3||parts.some(n=>!Number.isFinite(n)))return null;
  const start=new Date(parts[0],parts[1]-1,parts[2],0,0,0,0);
  const end=new Date(parts[0],parts[1]-1,parts[2]+1,0,0,0,0);
  return {start:start.toISOString().slice(0,19),end:end.toISOString().slice(0,19)};
}
function sutilReceiptPeriodDates(){
  const today=new Date();
  if(receiptPeriodMode==="today"){
    const iso=sutilLocalIsoDate(today);return {from:iso,to:iso};
  }
  if(receiptPeriodMode==="yesterday"){
    const d=new Date(today.getFullYear(),today.getMonth(),today.getDate()-1);const iso=sutilLocalIsoDate(d);return {from:iso,to:iso};
  }
  if(receiptPeriodMode==="between"){
    return {from:document.getElementById("receiptDateFrom")?.value||"",to:document.getElementById("receiptDateTo")?.value||""};
  }
  return {from:"",to:""};
}
function sutilUpdateReceiptPeriodUi(){
  const map={today:"receiptPeriodToday",yesterday:"receiptPeriodYesterday",between:"receiptPeriodBetween",all:"receiptPeriodAll"};
  Object.entries(map).forEach(([mode,id])=>document.getElementById(id)?.classList.toggle("active",mode===receiptPeriodMode));
  const range=document.getElementById("receiptCustomDateRange");
  if(range){const show=receiptPeriodMode==="between";range.classList.toggle("open",show);range.setAttribute("aria-hidden",show?"false":"true");}
  sutilSetReceiptFilterLabels();
}
function setReceiptPeriod(mode){
  receiptPeriodMode=["today","yesterday","between","all"].includes(mode)?mode:"today";
  if(receiptPeriodMode==="between"){
    const from=document.getElementById("receiptDateFrom");const to=document.getElementById("receiptDateTo");
    if(from&&!from.value)from.value=sutilLocalIsoDate(new Date());
    if(to&&!to.value)to.value=sutilLocalIsoDate(new Date());
  }
  sutilUpdateReceiptPeriodUi();
  receiptPageOffset=0;
  refreshReceipts();
}
function sutilReceiptCustomDatesChanged(){
  if(receiptPeriodMode!=="between")receiptPeriodMode="between";
  sutilUpdateReceiptPeriodUi();
  const {from,to}=sutilReceiptPeriodDates();
  if(from&&to&&from>to)return;
  receiptPageOffset=0;
  refreshReceipts();
}
function sutilReceiptFiltersChanged(){
  receiptPageOffset=0;
  refreshReceipts();
}
function pixStatusLabel(status){
  if(status==="confirmed")return "Confirmado";
  if(status==="not_confirmed")return "Rechazado";
  return "En comprobación";
}
function pixRowClass(status){
  return status==="confirmed"?"pix-row-confirmed":status==="not_confirmed"?"pix-row-rejected":"pix-row-checking";
}
function pixLoanText(r){
  if(!r.loan)return '<span class="muted">Sin crédito activo</span>';
  const installment=r.next_installment;
  return `<strong>Crédito #${r.loan.id}</strong><br><small>${installment?`Cuota #${installment.number} · saldo ${money(installment.amount_remaining)}`:`Sin cuotas pendientes`}</small>`;
}
function pixFileButton(r){
  return `<button class="btn pix-file-btn" type="button" onclick="window.open('${r.file_url}','_blank','noopener,noreferrer')">📎 Abrir</button>`;
}
async function syncReceiptRouteFilter(){
  const select=document.getElementById("receiptRouteFilter");
  if(!select)return;
  const current=select.value;
  if(!receiptRoutesLoaded){
    try{
      const routes=await api("/api/admin/routes");
      select.innerHTML='<option value="">Todas</option>'+routes.map(r=>`<option value="${Number(r.id)}">${escapeHtml(r.name||"Ruta")}</option>`).join('');
      receiptRoutesLoaded=true;
    }catch(_){
      const routeMap=new Map(receiptRowsCache.filter(r=>r.route_id).map(r=>[Number(r.route_id),r.route_name||"Ruta"]));
      select.innerHTML='<option value="">Todas</option>'+[...routeMap.entries()].map(([id,name])=>`<option value="${id}">${escapeHtml(name)}</option>`).join('');
    }
  }
  if([...select.options].some(o=>o.value===String(current)))select.value=current;
}
function sutilReceiptRequestParams(offset=0){
  const params=new URLSearchParams();
  params.set("paged","true");
  params.set("limit",String(RECEIPT_PAGE_SIZE));
  params.set("offset",String(Math.max(0,Number(offset)||0)));
  const status=document.getElementById("receiptStatusFilter")?.value||"";
  const routeId=document.getElementById("receiptRouteFilter")?.value||"";
  const search=(document.getElementById("receiptSearch")?.value||"").trim();
  if(status)params.set("status",status);
  if(routeId)params.set("route_id",routeId);
  if(search)params.set("search",search);
  const {from,to}=sutilReceiptPeriodDates();
  if(from){const b=sutilReceiptLocalDayBounds(from);if(b)params.set("created_from",b.start);}
  if(to){const b=sutilReceiptLocalDayBounds(to);if(b)params.set("created_to",b.end);}
  return params;
}
function renderReceipts(){
  const rows=receiptRowsCache;
  const t=sutilReceiptCopy();
  const count=document.getElementById("receiptResultsCount");
  if(count)count.textContent=`${receiptTotalCount} ${t.found}`;
  const sub=document.getElementById("receiptResultsSubcount");
  if(sub)sub.textContent=receiptTotalCount>rows.length?`${t.showing} ${rows.length} ${t.of} ${receiptTotalCount}`:"";
  const more=document.getElementById("receiptLoadMoreBtn");
  if(more){more.classList.toggle("visible",receiptHasMore);more.disabled=false;more.textContent=t.loadMore;}
  receipts.innerHTML=rows.length?rows.map(r=>`
    <tr class="${pixRowClass(r.status)}">
      <td><strong>${r.client_name}</strong><br><small>${r.client_code||"Sin código"}</small></td>
      <td>${r.route_name||"Sin ruta"}</td>
      <td>${pixLoanText(r)}</td>
      <td><strong>${money(r.amount)}</strong><br><small>${r.provider_name||"Método de pago"}</small></td>
      <td>${pixFileButton(r)}<br><small>${r.filename||"Archivo"}</small></td>
      <td class="pix-status-only"><span class="pix-state ${r.status}">● ${pixStatusLabel(r.status)}</span></td>
      <td>${sutilLocalDateTime(r.created_at)}</td>
      <td>${r.status==="checking"
        ?`<button class="btn" type="button" onclick="openPixReview(${r.id})">🔎 Revisar</button>`
        :`<button class="btn secondary" type="button" onclick="openPixReview(${r.id})">👁 Ver detalle</button>`}</td>
    </tr>`).join(""):`<tr><td colspan="8">${t.noRows}</td></tr>`;

  const mobile=document.getElementById("receiptMobileCards");
  if(mobile){
    mobile.innerHTML=rows.length?rows.map(r=>{
      const detailLabel=r.status==="checking"?"🔎 Revisar":"👁 Ver detalle";
      const dateText=r.created_at?sutilLocalDateTime(r.created_at):"—";
      const fileHtml=pixFileButton(r);
      return `
      <article class="receipt-mobile-card ${r.status||""}">
        <div class="receipt-mobile-card-head">
          <span class="pix-state ${r.status}">● ${pixStatusLabel(r.status)}</span>
          <span class="receipt-mobile-card-date">${dateText}</span>
        </div>
        <div class="receipt-mobile-card-body">
          <div class="receipt-mobile-card-info">
            <div class="receipt-mobile-field"><small>Cliente</small><strong>${escapeHtml(r.client_name||"—")}</strong><div>${escapeHtml(r.client_code||"Sin código")}</div></div>
            <div class="receipt-mobile-field"><small>Ruta</small><strong>${escapeHtml(r.route_name||"Sin ruta")}</strong></div>
            <div class="receipt-mobile-field"><small>Crédito / Cuota</small><div>${pixLoanText(r)}</div></div>
            <div class="receipt-mobile-field"><small>Valor</small><strong>${money(r.amount)}</strong></div>
            <div class="receipt-mobile-field"><small>Método</small><div>${escapeHtml(r.provider_name||"Método de pago")}</div></div>
          </div>
          <div class="receipt-mobile-file">
            <small style="margin-bottom:6px">Archivo</small>
            ${fileHtml}
            <small>${escapeHtml(r.filename||"Archivo")}</small>
          </div>
        </div>
        <div class="receipt-mobile-actions">
          <button class="btn secondary" type="button" onclick="openPixReview(${r.id})">${detailLabel}</button>
          ${r.file_url?`<button class="btn" type="button" onclick="window.open('${String(r.file_url).replace(/'/g,"\\'")}','_blank')">📎 Abrir</button>`:`<button class="btn" type="button" disabled>📎 Sin archivo</button>`}
        </div>
      </article>`;
    }).join(""):`<div class="muted" style="padding:16px 4px">${t.noRows}</div>`;
  }
}
async function refreshReceipts(options={}) {
  const append=Boolean(options&&options.append);
  const offset=append?receiptRowsCache.length:0;
  const t=sutilReceiptCopy();
  const more=document.getElementById("receiptLoadMoreBtn");
  try{
    if(!append){
      receiptPageOffset=0;
      receiptRowsCache=[];
      receiptTotalCount=0;
      receiptHasMore=false;
      if(receipts)receipts.innerHTML=`<tr><td colspan="8">${t.loading}</td></tr>`;
      const mobile=document.getElementById("receiptMobileCards");if(mobile)mobile.innerHTML=`<div class="muted" style="padding:16px 4px">${t.loading}</div>`;
    }
    if(more){more.disabled=true;}
    await syncReceiptRouteFilter();
    const response=await api(`/api/admin/receipts?${sutilReceiptRequestParams(offset).toString()}`);
    const items=Array.isArray(response)?response:(Array.isArray(response?.items)?response.items:[]);
    if(append)receiptRowsCache=[...receiptRowsCache,...items];
    else receiptRowsCache=items;
    receiptTotalCount=Array.isArray(response)?receiptRowsCache.length:Number(response?.total??receiptRowsCache.length);
    receiptHasMore=Array.isArray(response)?false:Boolean(response?.has_more ?? (receiptRowsCache.length<receiptTotalCount));
    receiptPageOffset=receiptRowsCache.length;
    renderReceipts();
  }catch(e){
    if(!append){
      receiptRowsCache=[];receiptTotalCount=0;receiptHasMore=false;
      receipts.innerHTML=`<tr><td colspan="8">${escapeHtml(e.message||String(e))}</td></tr>`;
      const mobile=document.getElementById("receiptMobileCards");if(mobile)mobile.innerHTML=`<div class="error" style="display:block;margin-top:10px">${escapeHtml(e.message||String(e))}</div>`;
    }
  }finally{
    if(more)more.disabled=false;
  }
}
async function loadMoreReceipts(){
  if(!receiptHasMore)return;
  await refreshReceipts({append:true});
}

function openPixReview(id){
  const r=receiptRowsCache.find(x=>Number(x.id)===Number(id));
  if(!r)return;
  reviewingReceiptId=id;
  pixReviewSubtitle.textContent=`${r.client_name} · ${r.client_code||"Sin código"} · ${r.route_name||"Sin ruta"}`;
  pixReviewSummary.innerHTML=`
    <div class="pix-summary-box"><small>Valor informado</small><strong>${money(r.amount)}</strong></div>
    <div class="pix-summary-box"><small>Método</small><strong>${r.provider_name||"Pago electrónico"}</strong></div>
    <div class="pix-summary-box"><small>Estado</small><span class="pix-state ${r.status}">${pixStatusLabel(r.status)}</span></div>
    <div class="pix-summary-box"><small>Crédito</small><strong>${r.loan?`#${r.loan.id}`:"Sin crédito activo"}</strong></div>
    <div class="pix-summary-box"><small>Próxima cuota</small><strong>${r.next_installment?`#${r.next_installment.number} · ${money(r.next_installment.amount_remaining)}`:"—"}</strong></div>`;
  if(String(r.mime_type||"").startsWith("image/")){
    pixReviewPreview.innerHTML=`<img src="${r.file_url}" alt="Comprobante de pago">`;
  }else if(r.mime_type==="application/pdf"){
    pixReviewPreview.innerHTML=`<iframe src="${r.file_url}" title="Comprobante de pago"></iframe>`;
  }else{
    pixReviewPreview.innerHTML=`${pixFileButton(r)}`;
  }
  pixDecisionAmount.value=Number(r.amount||0).toFixed(2);
  pixDecisionPayer.value=r.client_name||"";
  pixDecisionTransaction.value="";
  pixDecisionTransaction.placeholder="Leyendo ID bancario / EndToEnd…";

function cleanReceiptObservationForDisplay(value,status){
  const raw=String(value||"").trim();
  if(!raw)return "";

  // Oculta metadatos internos (uuid, ids, fechas técnicas, etc.) y conserva
  // únicamente frases humanas de la observación.
  let humanParts=raw.split(/[;\n\r]+/).map(x=>x.trim()).filter(Boolean).filter(part=>{
    if(/^[A-Za-z][A-Za-z0-9_]*\s*=/.test(part))return false;
    if(/^[A-Za-z][A-Za-z0-9_]*\s*:\s*[0-9a-f-]{8,}$/i.test(part))return false;
    return true;
  });

  const normalizedStatus=String(status||"").toLowerCase();
  if(normalizedStatus!=="checking"){
    // Una observación histórica puede decir “pendiente de confirmación” aunque
    // el comprobante ya haya sido procesado. Esa frase deja de ser válida.
    const stalePending=/\b(?:pendiente\s+de\s+(?:confirmaci[oó]n|comprobaci[oó]n|revisi[oó]n)|en\s+(?:confirmaci[oó]n|comprobaci[oó]n|revisi[oó]n))\b/i;
    humanParts=humanParts.filter(part=>!stalePending.test(part));
  }

  return humanParts.join("; ")
    .replace(/\s{2,}/g," ")
    .replace(/^[\s;,.-]+|[\s;,.-]+$/g,"")
    .trim();
}

  pixDecisionNote.value=cleanReceiptObservationForDisplay(r.note||"",r.status);
  const editable=r.status==="checking";
  const duplicateHint=sutilReconDuplicateReviewHint&&Number(sutilReconDuplicateReviewHint.receiptId)===Number(id)
    ?sutilReconDuplicateReviewHint:null;
  [pixDecisionAmount,pixDecisionPayer,pixDecisionTransaction,pixDecisionNote].forEach(x=>x.disabled=!editable);

  if(editable&&duplicateHint){
    const ra=duplicateHint.receiptAnalysis||{};
    const last8=String(ra.e2e_last8||ra.bank_transaction_last8||"").trim();
    pixDecisionTransaction.value=last8?`••••${last8}`:"";
    pixDecisionTransaction.placeholder=last8?"Identificador detectado (oculto)":"Identificador duplicado detectado";
    pixDecisionTransaction.disabled=true;
    pixDecisionMessage.className="result error";
    pixDecisionMessage.textContent=sutilReconDuplicateWarningText();
    pixReviewActions.innerHTML=`
      <button class="btn secondary" type="button" onclick="closePixReview()">Cancelar</button>
      <button class="btn danger" type="button" onclick="submitPixDuplicate()">⚠ Marcar como duplicado</button>`;
    pixReviewModal.classList.add("open");
    loadPixDuplicateReviewInfo(id);
    return;
  }

  pixDecisionMessage.className="result";
  pixDecisionMessage.textContent=editable
    ?"Confirma los datos o escribe el motivo para rechazar."
    :`Este comprobante ya fue procesado como ${pixStatusLabel(r.status).toLowerCase()}.`;
  pixReviewActions.innerHTML=editable?`
    <button class="btn secondary" type="button" onclick="closePixReview()">Cancelar</button>
    <button class="btn danger" type="button" onclick="submitPixDecision(false)">Rechazar</button>
    <button class="btn success" type="button" onclick="submitPixDecision(true)">Confirmar pago</button>`
    :`<button class="btn secondary" type="button" onclick="closePixReview()">Cerrar</button>`;
  pixReviewModal.classList.add("open");
  if(editable)loadPixReceiptIdentifier(id);
}

function sutilPixDuplicateDetailText(d){
  const duplicate=d?.duplicate_review||{};
  const previous=duplicate?.previous_payment||null;
  let text=sutilReconDuplicateWarningText();
  if(previous?.id){
    text+=` Pago anterior #${Number(previous.id)}`;
    if(previous.amount!=null)text+=` · ${money(Number(previous.amount||0))}`;
    if(previous.paid_at)text+=` · ${sutilReconDate(previous.paid_at)}`;
    if(previous.client_code)text+=` · ${String(previous.client_code)}`;
    text+=".";
  }
  return text;
}

function applyPixDuplicateReviewState(d,receiptId){
  const id=Number(receiptId||0);
  if(Number(reviewingReceiptId||0)!==id)return false;
  const duplicate=d?.duplicate_review||{};
  if(!duplicate?.blocked)return false;
  const value=String(d?.identifier?.value||"").trim();
  const last8=String(duplicate.identifier_last8||d?.identifier?.last8||"").trim();
  pixDecisionTransaction.value=value||(last8?`••••${last8}`:"");
  pixDecisionTransaction.placeholder="Identificador duplicado detectado";
  pixDecisionTransaction.disabled=true;
  pixDecisionMessage.className="result error";
  pixDecisionMessage.textContent=sutilPixDuplicateDetailText(d);
  pixReviewActions.innerHTML=`
    <button class="btn secondary" type="button" onclick="closePixReview()">Cancelar</button>
    <button class="btn danger" type="button" onclick="submitPixDuplicate()">⚠ Marcar como duplicado</button>`;
  return true;
}

async function loadPixDuplicateReviewInfo(receiptId){
  const id=Number(receiptId||0);
  if(!id)return;
  try{
    const d=await api(`/api/admin/reconciliation/receipts/${id}/analysis?refresh=false&include_identifier=false`);
    if(Number(reviewingReceiptId||0)!==id)return;
    applyPixDuplicateReviewState(d,id);
  }catch(e){
    if(Number(reviewingReceiptId||0)!==id)return;
    pixDecisionMessage.className="result error";
    pixDecisionMessage.textContent=sutilReconDuplicateWarningText();
  }
}

async function loadPixReceiptIdentifier(receiptId){
  const id=Number(receiptId||0);
  if(!id)return;
  try{
    const d=await api(`/api/admin/reconciliation/receipts/${id}/analysis?refresh=true&include_identifier=true`);
    if(Number(reviewingReceiptId||0)!==id)return;
    if(applyPixDuplicateReviewState(d,id))return;
    const value=String(d?.identifier?.value||"").trim();
    if(value){
      pixDecisionTransaction.value=value;
      const kind=String(d?.identifier?.type||"");
      pixDecisionTransaction.placeholder=kind==="end_to_end"?"EndToEnd leído automáticamente":"ID bancario leído automáticamente";
    }else{
      pixDecisionTransaction.value="";
      pixDecisionTransaction.placeholder="Opcional, evita duplicados";
    }
  }catch(e){
    if(Number(reviewingReceiptId||0)!==id)return;
    pixDecisionTransaction.placeholder="Opcional, evita duplicados";
  }
}

async function submitPixDuplicate(){
  if(!reviewingReceiptId)return;
  const lang=sutilReconciliationLang();
  pixDecisionNote.value=lang==="pt"
    ?"Duplicado: identificador bancário já utilizado em outro pagamento"
    :lang==="en"
      ?"Duplicate: bank identifier already used by another payment"
      :"Duplicado: identificador bancario ya utilizado en otro pago";
  await submitPixDecision(false);
}

function closePixReview(){
  const closedId=Number(reviewingReceiptId||0);
  reviewingReceiptId=null;
  pixReviewModal.classList.remove("open");
  if(sutilReconFinalizeHint&&Number(sutilReconFinalizeHint.receiptId)===closedId)sutilReconFinalizeHint=null;
  if(sutilReconDuplicateReviewHint&&Number(sutilReconDuplicateReviewHint.receiptId)===closedId)sutilReconDuplicateReviewHint=null;
}
function closePixReviewFromBackdrop(e){if(e.target===pixReviewModal)closePixReview()}

async function submitPixDecision(approved){
  if(!reviewingReceiptId)return;
  const receiptId=Number(reviewingReceiptId);
  const note=pixDecisionNote.value.trim();
  if(!approved&&note.length<3){
    pixDecisionMessage.textContent="Escribe el motivo del rechazo.";
    return;
  }
  const amount=Number(pixDecisionAmount.value||0);
  if(approved&&amount<=0){
    pixDecisionMessage.textContent="El valor debe ser mayor que cero.";
    return;
  }
  if(!await sutilConfirm(approved?"¿Confirmar y aplicar este pago?":"¿Rechazar este comprobante?"))return;

  const actionButtons=[...pixReviewActions.querySelectorAll("button")];
  actionButtons.forEach(btn=>btn.disabled=true);
  pixDecisionMessage.textContent=approved?"Confirmando pago...":"Rechazando comprobante...";

  try{
    const d=await api(`/api/admin/receipts/${receiptId}/decision`,{
      method:"POST",headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        approved,amount:approved?amount:null,
        payer_name:approved?(pixDecisionPayer.value.trim()||null):null,
        bank_transaction_id:approved?(pixDecisionTransaction.value.trim()||null):null,
        note:note||null
      })
    });

    const row=receiptRowsCache.find(x=>Number(x.id)===receiptId);
    if(row){
      row.status=d.status || (approved?"confirmed":"not_confirmed");
      row.note=note||row.note||null;
      if(approved)row.amount=amount;
    }
    renderReceipts();

    if(checking && Number(checking.textContent||0)>0){
      checking.textContent=String(Math.max(0,Number(checking.textContent||0)-1));
    }

    pixDecisionMessage.textContent=`✅ ${d.message}`;
    setTimeout(closePixReview,180);

    Promise.allSettled([
      refreshReceipts(),
      refreshDashboard(),
      approved ? refreshClients() : Promise.resolve(),
      typeof offlineRefreshQueueStatuses==="function" ? offlineRefreshQueueStatuses() : Promise.resolve(),
      typeof updateOfflineBadgeFromQueue==="function" ? updateOfflineBadgeFromQueue("online") : Promise.resolve(),
      typeof sutilReconciliationFinalizeExistingPayment==="function" ? sutilReconciliationFinalizeExistingPayment(receiptId,approved) : Promise.resolve()
    ]).catch(()=>{});
  }catch(e){
    pixDecisionMessage.textContent=e.message;
    actionButtons.forEach(btn=>btn.disabled=false);
  }
}


function normalizeSearchText(value){
  return String(value || "")
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g,"")
    .toLowerCase()
    .trim();
}

function renderLoanClientOptions(rows){
  const currentValue = loanClient.value;

  loanClient.innerHTML = rows.length
    ? '<option value="">Selecciona un cliente</option>' + rows.map(c => `
        <option value="${c.id}">${escapeHtml(c.name || "Sin nombre")}</option>
      `).join("")
    : '<option value="">No se encontraron clientes</option>';

  if(currentValue && rows.some(c => String(c.id) === String(currentValue))){
    loanClient.value = currentValue;
  }else{
    loanClient.value = "";
  }

  updateLoanClientPreview();
}

function ensureLoanClientResultsVisible(){
  const box=document.getElementById("loanClientSearchResults");
  const input=document.getElementById("loanClientSearch");
  if(!box || !input || !box.classList.contains("open"))return;

  const vv=window.visualViewport;
  const visibleTop=vv ? vv.offsetTop : 0;
  const visibleBottom=vv ? vv.offsetTop + vv.height : window.innerHeight;
  const topMargin=20;
  const bottomMargin=14;
  const inputRect=input.getBoundingClientRect();

  // Prioridad en móvil: mantener visible la casilla donde el usuario escribe.
  // Los resultados pueden desplazarse dentro de su propia lista, por eso no
  // intentamos mostrar el cuadro completo cuando el teclado reduce la pantalla.
  if(inputRect.top < visibleTop + topMargin){
    window.scrollBy({
      top:inputRect.top-(visibleTop+topMargin),
      behavior:"smooth"
    });
    return;
  }

  const firstResult=box.querySelector('.loan-client-search-item, .loan-client-search-empty');
  const targetRect=(firstResult || box).getBoundingClientRect();
  if(targetRect.bottom > visibleBottom - bottomMargin){
    const wantedDown=targetRect.bottom-(visibleBottom-bottomMargin);
    const maxDown=Math.max(0,inputRect.top-(visibleTop+topMargin));
    const safeDown=Math.min(wantedDown,maxDown);
    if(safeDown>0){
      window.scrollBy({top:safeDown,behavior:"smooth"});
    }
  }
}

function scheduleLoanClientResultsVisibility(){
  requestAnimationFrame(()=>{
    ensureLoanClientResultsVisible();
    setTimeout(ensureLoanClientResultsVisible,90);
    setTimeout(ensureLoanClientResultsVisible,220);
  });
}

function renderLoanClientSearchResults(rows, term){
  const box=document.getElementById("loanClientSearchResults");
  if(!box)return;

  const cleanTerm=normalizeSearchText(term);
  if(!cleanTerm || loanClientSearch?.dataset?.selectedId){
    box.classList.remove("open");
    box.innerHTML="";
    return;
  }

  const visible=rows.slice(0,8);
  box.classList.add("open");

  if(!visible.length){
    box.innerHTML='<div class="loan-client-search-empty">No se encontraron clientes.</div>';
    scheduleLoanClientResultsVisibility();
    return;
  }

  box.innerHTML=visible.map(c=>{
    const code=c.client_code || "Sin código";
    const route=c.route_name || "Sin ruta";
    const status=c.status || (c.is_overdue ? "MOROSO" : "AL DÍA");
    return `
      <button type="button" class="loan-client-result" role="option" onclick="selectLoanClientFromSearch(${Number(c.id)})">
        <span class="loan-client-result-name">${escapeHtml(c.name || "Sin nombre")}</span>
        <span class="loan-client-result-meta">${escapeHtml(code)} · ${escapeHtml(route)} · ${escapeHtml(status)}</span>
      </button>`;
  }).join("");
  scheduleLoanClientResultsVisibility();
}

if(window.visualViewport){
  window.visualViewport.addEventListener("resize",()=>{
    if(document.activeElement===loanClientSearch){
      scheduleLoanClientResultsVisibility();
    }
  });
}

function resetLoanClientSelection({keepSearch=false}={}){
  if(loanClient){loanClient.value="";}
  if(loanClientSearch){
    delete loanClientSearch.dataset.selectedId;
    if(!keepSearch)loanClientSearch.value="";
  }
  const selected=document.getElementById("loanSelectedClient");
  if(selected){selected.style.display="none";selected.innerHTML="";}
  updateLoanClientPreview();
}

function selectLoanClientFromSearch(clientId){
  const client=clientRows.find(c=>Number(c.id)===Number(clientId));
  if(!client)return;

  if(!Array.from(loanClient.options).some(opt=>String(opt.value)===String(client.id))){
    renderLoanClientOptions(clientRows);
  }
  loanClient.value=String(client.id);
  loanClientSearch.value=client.name || client.client_code || "";
  loanClientSearch.dataset.selectedId=String(client.id);

  const results=document.getElementById("loanClientSearchResults");
  if(results){results.classList.remove("open");results.innerHTML="";}

  updateLoanClientPreview();
  try{loanClientSearch.blur();}catch(_){ }
}

function changeLoanSelectedClient(){
  resetLoanClientSelection();
  renderLoanClientOptions(clientRows);
  const results=document.getElementById("loanClientSearchResults");
  if(results){results.classList.remove("open");results.innerHTML="";}
  setTimeout(()=>loanClientSearch?.focus(),60);
}

function resetLoanCreateForm(){
  loanClientSearch.value = "";
  delete loanClientSearch.dataset.selectedId;
  loanClient.value = "";
  principal.value = "";
  interestRate.value = "";
  loanInterestManualOverride = false;
  loanInterestAutoFilled = false;
  installmentCount.value = "";
  manualInstallment.value = "";
  loanFirstInstallmentManual = false;
  loanDate.value = localTodayIso();
  loanDate.max = localTodayIso();
  syncFirstInstallmentFromLoanDate(true);

  loanRoutePreview.textContent = "—";
  loanClientStatus.textContent = "—";
  loanClientStatus.className = "metric";

  const selected=document.getElementById("loanSelectedClient");
  if(selected){selected.style.display="none";selected.innerHTML="";}
  const results=document.getElementById("loanClientSearchResults");
  if(results){results.classList.remove("open");results.innerHTML="";}

  loanCashStatus.className = "operation-cash-status not_opened";
  loanCashStatus.textContent =
    "🟠 Selecciona un cliente para consultar la caja de su ruta.";

  if(installmentEditorRows)installmentEditorRows.innerHTML = "";
  if(installmentEditorTotal)installmentEditorTotal.innerHTML = "";
  if(installmentEditorBox)installmentEditorBox.classList.remove("open");

  renderLoanClientOptions(clientRows);
  loanClient.value = "";
  updateLoanClientPreview();
  syncInterestCalculationMode(false);
  updatePreview();
}

async function filterLoanClients(){
  const initialTerm = normalizeSearchText(loanClientSearch.value);

  // Tras recargar/iniciar sesión la lista puede seguir llegando en segundo
  // plano. Si el usuario escribe antes, esperamos esa misma carga en vez de
  // mostrar falsamente "No se encontraron clientes".
  if(!sutilClientRowsLoadedAt && token){
    const results=document.getElementById("loanClientSearchResults");
    if(results && initialTerm){
      results.classList.add("open");
      results.innerHTML='<div class="loan-client-search-empty">Cargando clientes...</div>';
    }
    try{
      await sutilEnsureClientRowsReady(false);
    }catch(error){
      if(results && initialTerm){
        results.classList.add("open");
        results.innerHTML=`<div class="loan-client-search-empty">No fue posible cargar clientes. ${escapeHtml(error?.message||"")}</div>`;
      }
      return;
    }
  }

  const term = normalizeSearchText(loanClientSearch.value);
  const selectedId=Number(loanClientSearch?.dataset?.selectedId || 0);

  if(selectedId){
    const selectedClient=clientRows.find(c=>Number(c.id)===selectedId);
    const selectedName=normalizeSearchText(selectedClient?.name || "");
    if(term===selectedName){
      renderLoanClientSearchResults([], "");
      return;
    }
    resetLoanClientSelection({keepSearch:true});
  }

  if(!term){
    renderLoanClientOptions(clientRows);
    renderLoanClientSearchResults([], "");
    return;
  }

  const filtered = clientRows.filter(c => {
    const searchable = normalizeSearchText([
      c.name,
      c.client_code,
      c.document_number,
      c.phone,
      c.phone1,
      c.phone2,
      c.route_name
    ].filter(Boolean).join(" "));
    return searchable.includes(term);
  });

  renderLoanClientOptions(filtered);
  renderLoanClientSearchResults(filtered, term);
}

function updateLoanClientPreview() {
  const selectedId = Number(loanClient.value || 0);
  const client = clientRows.find(c => Number(c.id) === selectedId);
  const selected=document.getElementById("loanSelectedClient");

  if (!client) {
    if(selected){selected.style.display="none";selected.innerHTML="";}
    loanRoutePreview.textContent = "—";
    loanClientStatus.textContent = "—";
    loanClientStatus.className = "metric";
    if(loanCashStatus){
      loanCashStatus.className="operation-cash-status not_opened";
      loanCashStatus.textContent="🟠 Selecciona un cliente para consultar la caja de su ruta.";
    }
    loanRenewalAvailableValue=0;
    const renewalBox=document.getElementById("loanRenewalBalanceBox");
    const renewalApply=document.getElementById("loanApplyRenewal");
    if(renewalBox)renewalBox.style.display="none";
    if(renewalApply)renewalApply.checked=false;
    return;
  }

  loanClientSearch.dataset.selectedId=String(client.id);
  const code=client.client_code || "Sin código";
  const route=client.route_name || "Sin ruta";
  const status=client.status || (client.is_overdue ? "MOROSO" : "AL DÍA");
  if(selected){
    selected.style.display="block";
    selected.innerHTML=`
      <div class="loan-selected-client-head">
        <span class="loan-selected-client-label">✅ Cliente seleccionado</span>
        <button type="button" class="loan-change-client" onclick="changeLoanSelectedClient()">Cambiar cliente</button>
      </div>
      <div class="loan-selected-client-name">${escapeHtml(client.name || "Sin nombre")}</div>
      <div class="loan-selected-client-meta">${escapeHtml(code)} · ${escapeHtml(route)} · ${escapeHtml(status)}</div>`;
  }

  loanRoutePreview.textContent = route;
  loanClientStatus.textContent = status;
  loanClientStatus.className = "metric " + (client.is_overdue ? "status-overdue" : "status-current");
  loadLoanRenewalBalance();
  updateLoanCashStatus();
}

let loanFirstInstallmentManual = false;

function suggestedFirstInstallmentDate(){
  if(!loanDate?.value)return "";

  const base=localDateFromInput(loanDate.value);
  const selectedFrequency=frequency.value;
  let current=new Date(base.getFullYear(),base.getMonth(),base.getDate()+1);

  if(selectedFrequency==="daily"){
    let guard=0;
    while(!isAllowedCollectionDate(current) && guard<10){
      current=new Date(current.getFullYear(),current.getMonth(),current.getDate()+1);
      guard++;
    }
    return localDateToInput(current);
  }

  if(selectedFrequency==="weekly"){
    // En semanal manda la fecha. Sugerimos 7 días después del préstamo;
    // el usuario puede cambiar la primera cuota a cualquier fecha válida.
    current=new Date(base.getFullYear(),base.getMonth(),base.getDate()+7);
    let guard=0;
    while(!isAllowedCollectionDate(current) && guard<10){
      current=new Date(current.getFullYear(),current.getMonth(),current.getDate()+1);
      guard++;
    }
    return localDateToInput(current);
  }

  const targetDay=Number(monthlyDay.value||1);
  const buildCandidate=(year,month)=>{
    const lastDay=new Date(year,month+1,0).getDate();
    return new Date(year,month,Math.min(targetDay,lastDay));
  };

  let candidate=buildCandidate(base.getFullYear(),base.getMonth());
  if(candidate<=base){
    const nextMonth=new Date(base.getFullYear(),base.getMonth()+1,1);
    candidate=buildCandidate(nextMonth.getFullYear(),nextMonth.getMonth());
  }
  let guard=0;
  while(!isAllowedCollectionDate(candidate) && guard<10){
    candidate=new Date(candidate.getFullYear(),candidate.getMonth(),candidate.getDate()+1);
    guard++;
  }
  return localDateToInput(candidate);
}

function syncFirstInstallmentFromLoanDate(force=false){
  if(!loanDate?.value)return;
  if(!force && loanFirstInstallmentManual && startDate?.value)return;
  try{
    const suggested=suggestedFirstInstallmentDate();
    if(suggested){
      startDate.value=suggested;
      loanFirstInstallmentManual=false;
      if(editEachInstallment?.checked)generateInstallmentEditor();
    }
  }catch(error){
    // La validación visible se mostrará al generar la vista previa o guardar.
  }
}

async function updateLoanCashStatus(){
  const box=document.getElementById("loanCashStatus");
  if(!box)return;
  const client=clientRows.find(c=>Number(c.id)===Number(loanClient.value||0));
  if(!client||!client.route_id){
    box.className="operation-cash-status not_opened";
    box.textContent="🟠 El cliente no tiene una ruta válida para consultar la caja.";
    return;
  }
  if(!loanDate.value){
    box.className="operation-cash-status not_opened";
    box.textContent="🟠 Selecciona la fecha del préstamo.";
    return;
  }
  if(historicalModeActive){
    try{
      const d=await api(`/api/admin/cash/operation-status?route_id=${client.route_id}&business_date=${loanDate.value}`);
      if(d.operational_start_date && loanDate.value >= d.operational_start_date){
        box.className="operation-cash-status closed";
        box.textContent=`🔴 FECHA OPERATIVA · El histórico solo puede usar fechas anteriores al ${formatDateEs(d.operational_start_date)}. Si este crédito ocurrió después y olvidaste registrarlo, usa Operación olvidada.`;
        return;
      }
      box.className="operation-cash-status open";
      box.textContent=`📚 HISTÓRICO · Fecha ${formatDateEs(loanDate.value)} · No necesitas abrir caja y este crédito no afecta la base operativa.`;
    }catch(e){
      box.className="operation-cash-status closed";
      box.textContent=`🔴 ${e.message}`;
    }
    return;
  }
  if(forgottenOperationMode){
    try{
      if(!navigator.onLine)throw new Error("La operación olvidada requiere conexión.");
      const [status,pending]=await Promise.all([
        api(`/api/admin/cash/operation-status?route_id=${client.route_id}&business_date=${loanDate.value}`),
        api("/api/admin/cash/pending-open")
      ]);
      if(status.operational_start_date && loanDate.value < status.operational_start_date){
        box.className="operation-cash-status closed";
        box.textContent=`🔴 FECHA HISTÓRICA · Esta fecha es anterior al inicio operativo ${formatDateEs(status.operational_start_date)}. Registra el crédito desde Migración / histórico.`;
        return;
      }
      const open=(pending.rows||[]).find(row=>Number(row.route_id)===Number(client.route_id));
      if(!open){
        box.className="operation-cash-status not_opened";
        box.innerHTML=`<strong>🟠 CAJA ACTUAL NO ABIERTA</strong><br>Abre la caja operativa actual de esta ruta para aplicar la corrección. No se abrirá la caja antigua.<br><button class="btn secondary" type="button" style="margin-top:10px" onclick="goOpenCashForForgottenLoan()">💵 Ir a abrir caja actual</button>`;
        return;
      }
      if(String(open.business_date) < String(loanDate.value)){
        box.className="operation-cash-status closed";
        box.textContent=`🔴 La caja abierta es del ${formatDateEs(open.business_date)}, anterior a la fecha real del crédito. Avanza la caja antes de registrar la corrección.`;
        return;
      }
      box.className="operation-cash-status open";
      box.textContent=`🛠️ OPERACIÓN OLVIDADA · Fecha real ${formatDateEs(loanDate.value)} · Se descontará de la caja abierta del ${formatDateEs(open.business_date)}.`;
    }catch(e){
      box.className="operation-cash-status closed";
      box.textContent=`🔴 ${e.message}`;
    }
    return;
  }
  try{
    const d=await api(`/api/admin/cash/operation-status?route_id=${client.route_id}&business_date=${loanDate.value}`);
    if(d.status==="blocked_previous_open"){
      box.className="operation-cash-status closed";
      box.textContent=`🔴 CAJA ANTERIOR PENDIENTE · Primero cierra la caja del ${formatDateEs(d.blocking_date)} antes de trabajar esta fecha.`;
    }else if(d.status==="open"){
      box.className="operation-cash-status open";
      const electronic=["pix","transfer"].includes(loanDeliveryMethod.value);
      const available=electronic?d.available_pix:d.available_cash;
      const label=electronic?"PIX / transferencia":"dinero";
      box.textContent=`🟢 CAJA DEL PRÉSTAMO ABIERTA · ${formatDateEs(loanDate.value)} · Disponible en ${label}: ${money(available)} · Primera cuota: ${formatDateEs(startDate.value)} (no requiere caja futura).`;
    }else if(d.status==="general_open"){
      box.className="operation-cash-status open";
      box.textContent="🟢 CAJA GENERAL DE TRASPASO ABIERTA · Puedes usar esta fecha. Este crédito no alterará la caja diaria actual.";
    }else if(d.status==="closed"){
      box.className="operation-cash-status closed";
      box.textContent="🔴 CAJA CERRADA · No se puede crear el crédito hasta que el empresario o ADM autorizado la reabra.";
    }else{
      box.className="operation-cash-status not_opened";
      box.textContent="🟠 CAJA NO ABIERTA · Debe abrir la caja antes de crear el crédito.";
    }
  }catch(e){
    box.className="operation-cash-status closed";
    box.textContent=`🔴 ${e.message}`;
  }
}


let editableInstallments=[];

function localDateFromInput(value){
  const [year,month,day]=String(value).split("-").map(Number);
  return new Date(year,month-1,day);
}
function localDateToInput(value){
  const year=value.getFullYear();
  const month=String(value.getMonth()+1).padStart(2,"0");
  const day=String(value.getDate()).padStart(2,"0");
  return `${year}-${month}-${day}`;
}
function pythonWeekdayFromIso(value){
  if(!value)return null;
  const jsDay=localDateFromInput(value).getDay();
  return (jsDay+6)%7;
}
function syncWeeklyDayFromFirstInstallment(){
  if(frequency?.value!=="weekly" || !startDate?.value)return;
  weeklyDay.value=String(pythonWeekdayFromIso(startDate.value));
}
function syncEditWeeklyDayFromFirstInstallment(){
  if(editLoanFrequency?.value!=="weekly" || !editLoanStartDate?.value)return;
  editLoanWeeklyDay.value=String(pythonWeekdayFromIso(editLoanStartDate.value));
}
function isAllowedCollectionDate(value){
  const weekDay=value.getDay();
  if(weekDay===6&&!includeSaturdays.checked)return false;
  if(weekDay===0&&!includeSundays.checked)return false;
  return true;
}
function nextMonthCollectionDate(current,targetDay){
  const first=new Date(current.getFullYear(),current.getMonth()+1,1);
  const lastDay=new Date(first.getFullYear(),first.getMonth()+1,0).getDate();
  first.setDate(Math.min(targetDay,lastDay));
  return first;
}
function buildInstallmentDates(){
  const count=Number(installmentCount.value||0);
  if(count<1)throw new Error("Indica el número de cuotas.");
  if(!startDate.value)throw new Error("Selecciona la fecha de la primera cuota.");

  const result=[];
  const selectedFrequency=frequency.value;
  let current=localDateFromInput(startDate.value);
  if(loanDate.value && current<=localDateFromInput(loanDate.value)){
    throw new Error("La primera cuota debe quedar después de la fecha del préstamo.");
  }

  if(selectedFrequency==="daily"){
    while(result.length<count){
      if(isAllowedCollectionDate(current)){
        result.push(localDateToInput(current));
      }
      current=new Date(current.getFullYear(),current.getMonth(),current.getDate()+1);
    }
    return result;
  }

  if(selectedFrequency==="weekly"){
    if(!isAllowedCollectionDate(current)){
      const dayName=current.getDay()===6?"sábado":"domingo";
      throw new Error(`La fecha de primera cuota cae en ${dayName}, pero ese día está excluido.`);
    }
    syncWeeklyDayFromFirstInstallment();
    for(let index=0;index<count;index++){
      result.push(localDateToInput(current));
      current=new Date(current.getFullYear(),current.getMonth(),current.getDate()+7);
    }
    return result;
  }

  const targetDay=Number(monthlyDay.value||1);
  const lastDay=new Date(current.getFullYear(),current.getMonth()+1,0).getDate();
  current=new Date(current.getFullYear(),current.getMonth(),Math.min(targetDay,lastDay));
  if(current<localDateFromInput(startDate.value)){
    current=nextMonthCollectionDate(current,targetDay);
  }
  while(result.length<count){
    while(!isAllowedCollectionDate(current)){
      current=new Date(current.getFullYear(),current.getMonth(),current.getDate()+1);
    }
    result.push(localDateToInput(current));
    current=nextMonthCollectionDate(current,targetDay);
  }
  return result;
}
let loanInterestManualOverride=false;
let loanInterestAutoFilled=false;
function isAutomaticInterestMode(){
  return !loanInterestManualOverride && loanInterestAutoFilled;
}
function automaticInterestSnapshot(){
  const capital=Number(principal.value||0);
  const count=Number(installmentCount.value||0);
  const installment=Number(manualInstallment.value||0);
  if(!(capital>0) || !(count>0) || !(installment>0)){
    return {valid:false,capital,count,installment,total:0,rate:0,reason:"missing"};
  }
  const total=Math.round(installment*count*100)/100;
  if(total+0.009<capital){
    return {valid:false,capital,count,installment,total,rate:0,reason:"below_capital"};
  }
  const rate=((total-capital)/capital)*100;
  return {valid:true,capital,count,installment,total,rate};
}
function effectiveInterestRate(){
  if(isAutomaticInterestMode()){
    const snapshot=automaticInterestSnapshot();
    if(snapshot.valid)return snapshot.rate;
  }
  return Number(interestRate.value||0);
}
function effectiveLoanTotal(){
  if(isAutomaticInterestMode()){
    const snapshot=automaticInterestSnapshot();
    if(snapshot.valid)return snapshot.total;
  }
  const capital=Number(principal.value||0);
  const rate=Number(interestRate.value||0);
  return Math.round((capital+capital*rate/100)*100)/100;
}
function syncInterestCalculationMode(refreshEditor=false){
  if(!interestRate)return;
  interestRate.readOnly=false;
  interestRate.removeAttribute("aria-readonly");

  if(loanInterestManualOverride){
    loanInterestAutoFilled=false;
    interestAutoHelp.textContent=`✍️ Interés manual: ${Number(interestRate.value||0).toFixed(2)}%.`;
    interestAutoHelp.style.color="";
  }else{
    const snapshot=automaticInterestSnapshot();
    if(snapshot.valid){
      loanInterestAutoFilled=true;
      interestRate.value=snapshot.rate.toFixed(2);
      interestAutoHelp.textContent=`🧮 Calculado automáticamente: ${snapshot.rate.toFixed(2)}% · Total ${money(snapshot.total)} (${snapshot.count} × ${money(snapshot.installment)}). Puedes editar esta misma casilla si prefieres otro interés.`;
      interestAutoHelp.style.color="";
    }else if(snapshot.reason==="below_capital"){
      loanInterestAutoFilled=false;
      interestRate.value="";
      interestAutoHelp.textContent=`⚠️ El total de cuotas (${money(snapshot.total)}) no puede ser menor que el capital (${money(snapshot.capital)}).`;
      interestAutoHelp.style.color="#f59e0b";
    }else{
      loanInterestAutoFilled=false;
      interestRate.value="";
      interestAutoHelp.textContent="Escribe el interés manualmente o completa capital + número de cuotas + valor de cuota para calcularlo automáticamente.";
      interestAutoHelp.style.color="";
    }
  }
  updatePreview();
  if(refreshEditor && editEachInstallment.checked){
    try{generateInstallmentEditor();}catch(_){}
  }
}
function validateAutomaticInterest(){
  if(loanInterestManualOverride)return;
  const snapshot=automaticInterestSnapshot();
  if(snapshot.reason==="below_capital"){
    throw new Error("El total de las cuotas no puede ser menor que el capital prestado.");
  }
}
function buildInstallmentAmounts(){
  const capital=Number(principal.value||0);
  const rate=effectiveInterestRate();
  const count=Number(installmentCount.value||0);
  const total=effectiveLoanTotal();
  if(count<1)return [];

  const selected=Number(manualInstallment.value||0);
  const base=selected>0?selected:Math.round((total/count)*100)/100;
  const amounts=[];
  let remaining=total;

  for(let index=1;index<=count;index++){
    const amount=index<count?base:Math.round(remaining*100)/100;
    amounts.push(amount);
    remaining=Math.round((remaining-amount)*100)/100;
  }
  return amounts;
}
function moveLoanCreateButtonToEditor(){
  const button=document.getElementById("loanCreateButton");
  const footer=document.getElementById("loanEditorFinalAction");
  if(button&&footer&&button.parentElement!==footer){
    footer.appendChild(button);
  }
}
function restoreLoanCreateButtonToPrimaryActions(){
  const button=document.getElementById("loanCreateButton");
  const actions=document.getElementById("loanPrimaryActions");
  if(button&&actions&&button.parentElement!==actions){
    actions.appendChild(button);
  }
}
function scrollLoanPreviewIntoView(){
  requestAnimationFrame(()=>{
    const firstRow=document.querySelector("#installmentEditorRows .loan-manual-row");
    const target=firstRow||document.getElementById("installmentEditorBox");
    if(!target)return;
    const top=Math.max(0,target.getBoundingClientRect().top+window.scrollY-105);
    window.scrollTo({top,behavior:"smooth"});
  });
}
function toggleInstallmentEditor(){
  if(editEachInstallment.checked){
    generateInstallmentEditor();
  }else{
    editableInstallments=[];
    installmentEditorBox.classList.remove("open");
    installmentEditorRows.innerHTML="";
    restoreLoanCreateButtonToPrimaryActions();
  }
}
function generateInstallmentEditor(){
  try{
    const dates=buildInstallmentDates();
    const amounts=buildInstallmentAmounts();
    editableInstallments=dates.map((dueDate,index)=>({
      number:index+1,
      due_date:dueDate,
      amount:Number(amounts[index]||0)
    }));
    editEachInstallment.checked=true;
    installmentEditorBox.classList.add("open");
    renderInstallmentEditor();
    moveLoanCreateButtonToEditor();
    scrollLoanPreviewIntoView();
    hideLoanError();
  }catch(error){
    showLoanError(error.message);
  }
}
function renderInstallmentEditor(){
  installmentEditorRows.innerHTML=editableInstallments.map((row,index)=>`
    <div class="loan-manual-row">
      <label>Cuota<input value="${row.number}" disabled></label>
      <label>Fecha<input type="date" value="${row.due_date}" onchange="updateEditableInstallment(${index},'due_date',this.value)"></label>
      <label>Valor<input type="number" min="0.01" step="0.01" value="${Number(row.amount).toFixed(2)}" onchange="updateEditableInstallment(${index},'amount',this.value)"></label>
    </div>
  `).join("");
  refreshInstallmentEditorTotal();
}
function updateEditableInstallment(index,field,value){
  editableInstallments[index][field]=field==="amount"?Number(value):value;
  refreshInstallmentEditorTotal();
}
function refreshInstallmentEditorTotal(){
  const total=editableInstallments.reduce((sum,row)=>sum+Number(row.amount||0),0);
  const expected=effectiveLoanTotal();
  const ok=Math.abs(total-expected)<=0.01;
  installmentEditorTotal.className=`loan-manual-total ${ok?"ok":"bad"}`;
  installmentEditorTotal.textContent=
    `Suma de cuotas: ${money(total)} · Total del crédito: ${money(expected)} ${ok?"✓":"⚠"}`;
}
function validateEditableInstallments(){
  if(!editEachInstallment.checked)return null;
  if(!editableInstallments.length){
    throw new Error("Genera la vista previa de las cuotas antes de guardar.");
  }
  if(editableInstallments.length!==Number(installmentCount.value||0)){
    throw new Error("La cantidad de cuotas editadas no coincide con el número de cuotas.");
  }
  const total=editableInstallments.reduce((sum,row)=>sum+Number(row.amount||0),0);
  const expected=effectiveLoanTotal();
  if(Math.abs(total-expected)>0.01){
    throw new Error("La suma de las cuotas editadas debe coincidir con el total del crédito.");
  }
  for(const row of editableInstallments){
    if(!row.due_date||Number(row.amount)<=0){
      throw new Error("Revisa la fecha y el valor de todas las cuotas.");
    }
  }
  return editableInstallments.map(row=>({
    number:Number(row.number),
    due_date:row.due_date,
    amount:Number(row.amount)
  }));
}
function showLoanError(message){
  loanResult.style.display="block";
  loanResult.classList.add("error","loan-error-box");
  loanResult.innerHTML=`<strong>No fue posible crear el crédito.</strong><br>${message}`;
}
function hideLoanError(){
  loanResult.classList.remove("error","loan-error-box");
}


function updateFrequencyFields() {
  const f = frequency.value;
  weeklyDayBox.style.display = "none";
  monthlyDayBox.style.display = f === "monthly" ? "block" : "none";
  if(f === "weekly")syncWeeklyDayFromFirstInstallment();
}

function updatePreview() {
  const p = Number(principal.value || 0);
  const r = effectiveInterestRate();
  const n = Number(installmentCount.value || 0);
  const totalValue = effectiveLoanTotal();
  const suggested = n > 0 ? totalValue/n : 0;
  const chosen = Number(manualInstallment.value || 0);

  previewTotal.textContent = money(totalValue);
  previewInstallment.textContent = money(suggested);

  if (chosen > 0 && n > 0) {
    const last = totalValue - chosen * (n - 1);
    previewLastInstallment.textContent =
      last > 0 ? money(last) : "Cuota inválida";
  } else {
    previewLastInstallment.textContent = "Automática";
  }
}
let loanRenewalAvailableValue=0;

async function loadLoanRenewalBalance(){
  const box=document.getElementById("loanRenewalBalanceBox");
  const apply=document.getElementById("loanApplyRenewal");
  const clientId=Number(loanClient?.value||0);
  loanRenewalAvailableValue=0;
  if(apply)apply.checked=false;
  if(!clientId){
    if(box)box.style.display="none";
    updateLoanRenewalPreview();
    return;
  }
  try{
    const data=await api(`/api/admin/clients/${clientId}/renewal-balance`);
    loanRenewalAvailableValue=Number(data.renewal_balance||0);
    if(box)box.style.display=loanRenewalAvailableValue>0?"block":"none";
    const amount=document.getElementById("loanRenewalAvailable");
    if(amount)amount.textContent=money(loanRenewalAvailableValue);
  }catch(_){
    if(box)box.style.display="none";
  }
  updateLoanRenewalPreview();
}

function currentLoanRenewalApplied(){
  const checked=!!document.getElementById("loanApplyRenewal")?.checked;
  const capital=Number(principal?.value||0);
  return checked ? Math.min(loanRenewalAvailableValue, capital) : 0;
}

function currentLoanPhysicalDisbursement(){
  return Math.max(0, Number(principal?.value||0)-currentLoanRenewalApplied());
}

function updateLoanRenewalPreview(){
  const preview=document.getElementById("loanRenewalPreview");
  if(preview){
    const capital=Number(principal?.value||0);
    const applied=currentLoanRenewalApplied();
    const delivered=Math.max(0,capital-applied);
    preview.innerHTML=`Capital del nuevo crédito: <strong>${money(capital)}</strong> · Renovación aplicada: <strong>${money(applied)}</strong> · Valor real a entregar: <strong>${money(delivered)}</strong>`;
  }
  updateLoanMixedDelivery(true);
  updateLoanPreview();
}

let loanMixedLastEdited="";
let loanMixedSyncing=false;
let loanMixedUserStarted=false;

function resetLoanMixedAmounts(){
  const cashInput=document.getElementById("loanCashAmount");
  const pixInput=document.getElementById("loanPixAmount");
  loanMixedUserStarted=false;
  loanMixedLastEdited="";
  loanMixedSyncing=true;
  if(cashInput)cashInput.value="0.00";
  if(pixInput)pixInput.value="0.00";
  loanMixedSyncing=false;
  const help=document.getElementById("loanMixedAutoHelp");
  if(help)help.textContent="Escribe primero Dinero o PIX. SUTIL calculará automáticamente el otro.";
}

function syncLoanMixedTotal(changedField){
  if(loanMixedSyncing)return;
  const cashInput=document.getElementById("loanCashAmount");
  const pixInput=document.getElementById("loanPixAmount");
  if(!cashInput||!pixInput)return;

  if(!changedField){
    if(!loanMixedUserStarted){
      resetLoanMixedAmounts();
      return;
    }
    changedField=loanMixedLastEdited||"cash";
  }else{
    loanMixedUserStarted=true;
    loanMixedLastEdited=changedField;
  }

  const target=Math.max(0,currentLoanPhysicalDisbursement());
  const enteredInput=changedField==="pix"?pixInput:cashInput;
  const complementInput=changedField==="pix"?cashInput:pixInput;
  let entered=Number(enteredInput.value||0);
  if(!Number.isFinite(entered)||entered<0)entered=0;
  if(entered>target)entered=target;
  const complement=Math.max(0,target-entered);

  loanMixedSyncing=true;
  enteredInput.value=entered.toFixed(2);
  complementInput.value=complement.toFixed(2);
  loanMixedSyncing=false;

  const help=document.getElementById("loanMixedAutoHelp");
  if(help)help.textContent=`Entrega real: ${money(target)} · ${changedField==="pix"?"PIX":"Dinero"} ingresado: ${money(entered)} · ${changedField==="pix"?"Dinero":"PIX"} automático: ${money(complement)}.`;
  updateLoanPreview();
}
function updateLoanMixedDelivery(fromRenewalPreview=false){
  const mixed=loanDeliveryMethod.value==="mixed";
  const box=document.getElementById("loanMixedDeliveryFields");
  if(box)box.style.display=mixed?"grid":"none";
  // El capital siempre representa el crédito completo. Dinero/PIX solo distribuyen
  // el valor físico real a entregar, con o sin saldo de renovación.
  principal.readOnly=false;
  if(mixed){
    if(!fromRenewalPreview){
      resetLoanMixedAmounts();
    }else if(loanMixedUserStarted){
      syncLoanMixedTotal(loanMixedLastEdited);
    }
  }else{
    resetLoanMixedAmounts();
  }
}

async function createLoan() {
  loanResult.style.display = "block";
  loanResult.classList.remove("error");
  loanResult.textContent = "Verificando caja...";
  try {
    validateAutomaticInterest();
    if(forgottenOperationMode){
      if(!navigator.onLine)throw new Error("La operación olvidada requiere conexión para validar la caja abierta actual.");
      await updateLoanCashStatus();
      const cashBox=document.getElementById("loanCashStatus");
      if(!cashBox.classList.contains("open")){
        throw new Error("No se puede registrar la operación olvidada hasta resolver el estado de caja indicado arriba.");
      }
    }else if(!historicalModeActive){
      if(navigator.onLine){
        await updateLoanCashStatus();
        const cashBox=document.getElementById("loanCashStatus");
        if(!cashBox.classList.contains("open")){
          throw new Error("La caja de la ruta debe estar abierta para crear el crédito.");
        }
      }else{
        const client=(await offlineCacheGet("/api/sync/bootstrap"))?.clients?.find(c=>Number(c.id)===Number(loanClient.value));
        const cash=client ? await offlineCashRow(client.route_id,localTodayIso()) : null;
        if(!cash || cash.status!=="open"){
          throw new Error("Sin Internet: la caja de la ruta debe estar abierta para registrar el crédito.");
        }
        loanCashStatus.className="operation-cash-status open";
        loanCashStatus.textContent="🟠 SIN INTERNET · Crédito quedará pendiente de sincronizar.";
      }
    }else{
      if(!isCompanyOwner())throw new Error("La carga histórica es exclusiva del empresario.");
      await updateLoanCashStatus();
    }
    loanResult.textContent = "Creando...";
    const f = frequency.value;
    const payload = {
      client_id:Number(loanClient.value), principal_amount:Number(principal.value),
      interest_rate:effectiveInterestRate(), installment_count:Number(installmentCount.value),
      delivery_method:loanDeliveryMethod.value,
      cash_amount:loanDeliveryMethod.value==="mixed"?Number(document.getElementById("loanCashAmount")?.value||0):null,
      pix_amount:loanDeliveryMethod.value==="mixed"?Number(document.getElementById("loanPixAmount")?.value||0):null,
      apply_renewal_balance:!!document.getElementById("loanApplyRenewal")?.checked,
      frequency:f,
      loan_date:loanDate.value,
      first_installment_date:startDate.value,
      start_date:startDate.value,
      include_saturdays:includeSaturdays.checked, include_sundays:includeSundays.checked,
      weekly_day:f==="weekly"?pythonWeekdayFromIso(startDate.value):null,
      monthly_day:f==="monthly"?Number(monthlyDay.value):null,
      installment_amount:Number(manualInstallment.value || 0) || null,
      manual_installments:validateEditableInstallments(),
      historical_mode:historicalModeActive,
      late_correction_mode:forgottenOperationMode,
      correction_note:forgottenOperationMode ? "Operación olvidada registrada desde el panel administrativo" : null
    };
    if(payload.delivery_method==="mixed" && (!(payload.cash_amount>0) || !(payload.pix_amount>0))){
      throw new Error("En PIX + Dinero debes indicar un valor mayor que cero en las dos casillas.");
    }
    if (!payload.installment_count || payload.installment_count < 1) throw new Error("Indica el número de cuotas");
    if (!payload.loan_date) throw new Error("Selecciona la fecha del préstamo");
    if (!payload.start_date) throw new Error("Selecciona la fecha de la primera cuota");
    if(payload.start_date<=payload.loan_date){
      throw new Error("La primera cuota debe quedar después de la fecha del préstamo.");
    }
    if(!historicalModeActive && !forgottenOperationMode && !navigator.onLine && payload.loan_date!==localTodayIso()){
      throw new Error("Sin Internet, un crédito nuevo solo puede registrarse con la fecha operativa de hoy.");
    }
    const d = await offlineMutationOrOnline({
      entityType:"loan",
      action:"create",
      payload,
      path:forgottenOperationMode?"/api/admin/loans?late_correction=true":"/api/admin/loans",
      localRef:offlineUuid("loan"),
      options:{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body:JSON.stringify(payload)
      }
    });
    loanResult.innerHTML = `<strong>${d.offline_queued?"🟠 Crédito guardado sin Internet.":(historicalModeActive?"✅ Crédito histórico guardado · no afecta caja.":(forgottenOperationMode?`🛠️ Crédito olvidado registrado · fecha real ${formatDateEs(loanDate.value)} · primera cuota ${formatDateEs(d.first_installment_date||startDate.value)} · descontado de la caja abierta actual.`:"Crédito creado."))}</strong><br>
      Ruta: <strong>${d.route_name || "Sin ruta"}</strong><br>
      Entrega: <strong>${loanDeliveryLabel(d.delivery_method)}</strong><br>
      Total: ${money(d.total_amount)}<br>
      ${d.installment_count} cuotas de ${money(d.installment_amount)}<br>
      Próximo vencimiento: ${d.next_due_date}<br>
      Estado: <strong class="${d.offline_queued?"status-warning":(d.is_overdue ? "status-overdue" : "status-current")}">${d.client_status}</strong>`;
    if(d.offline_queued){
      await refreshClients().catch(()=>{});
    }else{
      await refreshAll();
    }
  } catch(e) {
    showLoanError(e.message);
  }
}


[principal,interestRate,installmentCount,manualInstallment,loanDate,startDate,frequency,weeklyDay,monthlyDay,includeSaturdays,includeSundays,loanDeliveryMethod].forEach(control=>{
  control.addEventListener("change",()=>{
    if(control===startDate){
      loanFirstInstallmentManual=true;
      if(frequency.value==="weekly")syncWeeklyDayFromFirstInstallment();
    }
    if(control===loanDate){
      loanFirstInstallmentManual=false;
      syncFirstInstallmentFromLoanDate(true);
      updateLoanCashStatus();
    }else if([frequency,weeklyDay,monthlyDay,includeSaturdays,includeSundays].includes(control) && !loanFirstInstallmentManual){
      syncFirstInstallmentFromLoanDate(true);
    }
    if([principal,installmentCount,manualInstallment].includes(control) && !loanInterestManualOverride){
      syncInterestCalculationMode(false);
    }else{
      updatePreview();
    }
    if(editEachInstallment.checked)generateInstallmentEditor();
  });
});

loanDate.value = localTodayIso();
loanDate.max = localTodayIso();
syncFirstInstallmentFromLoanDate(true);
collectionsDate.value = localTodayIso();
syncCollectionsWorkDateMode();
cashDate.value = localTodayIso();
baseMovementDate.value = localTodayIso();
transferDate.value = localTodayIso();
cashReportTo.value = localTodayIso();
cashReportFrom.value = new Date(new Date().getFullYear(),0,1).toISOString().slice(0,10);
expenseDate.value = localTodayIso();
reportDateTo.value = localTodayIso();
reportDateFrom.value = new Date(new Date().getFullYear(),0,1).toISOString().slice(0,10);
reportRoute.addEventListener("change",()=>{
  loadReports();
  const annualPane=document.getElementById("reportAnnualPane");
  if(annualPane && annualPane.style.display!=="none")loadAnnualReport();
});
reportDateFrom.addEventListener("change",loadReports);
reportDateTo.addEventListener("change",loadReports);
collectionsRoute.addEventListener("change",loadTodayCollections);
collectionsStatus.addEventListener("change",loadTodayCollections);
collectionsDate.addEventListener("change",()=>{
  updateCollectionsWorkDateDisplay();
  loadTodayCollections();
});

collectionsSearch.addEventListener("keydown",e=>{
  if(e.key!=="Enter")return;
  const best=smartClientRank(collectionsSearch.value||"")[0];
  if(best){
    collectionsSearch.value=best.name||best.client_code||"";
    closeSmartClientSuggestions();
    renderTodayCollections();
  }
});

receivedPaymentsSearch.addEventListener("keydown",e=>{
  if(e.key!=="Enter")return;
  const best=smartClientRank(receivedPaymentsSearch.value||"")[0];
  if(best){
    receivedPaymentsSearch.value=best.name||best.client_code||"";
    closeSmartClientSuggestions();
  }
  loadReceivedPayments();
});
receivedPaymentsDateFrom.addEventListener("change",()=>{markReceivedPaymentsBetween();if(collectionsMode==="received")loadReceivedPayments();});
receivedPaymentsDateTo.addEventListener("change",()=>{markReceivedPaymentsBetween();if(collectionsMode==="received")loadReceivedPayments();});
receivedPaymentsRoute.addEventListener("change",()=>{if(collectionsMode==="received")loadReceivedPayments();});
receivedPaymentsStaff.addEventListener("change",()=>{if(collectionsMode==="received")loadReceivedPayments();});
receivedPaymentsMethod.addEventListener("change",()=>{if(collectionsMode==="received")loadReceivedPayments();});
document.querySelectorAll('input[name="receivedPaymentsOrder"]').forEach(input=>input.addEventListener("change",()=>{if(collectionsMode==="received")loadReceivedPayments();}));
clientPaymentsSearch.addEventListener("keydown",e=>{
  if(e.key!=="Enter")return;
  const best=smartClientRank(clientPaymentsSearch.value||"")[0];
  if(best){
    closeSmartClientSuggestions();
    selectClientPaymentsClient(best.id);
  }else{
    renderClientPaymentsPicker();
  }
});
cashDate.addEventListener("change",prepareCashSelection);
cashRoute.addEventListener("change",prepareCashSelection);
expenseDate.addEventListener("change",loadExpenses);
expenseRoute.addEventListener("change",loadExpenses);

[
  "baseMovementDate",
  "baseMovementRoute",
  "baseMovementMethod",
  "baseMovementAmount",
  "baseMovementReason",
  "baseMovementObservation",
  "transferDate",
  "transferSourceRoute",
  "transferDestinationRoute",
  "transferMethod",
  "transferAmount",
  "transferObservation"
].forEach(id=>{
  const element=document.getElementById(id);
  if(!element)return;
  element.addEventListener("input",clearBaseMovementMessages);
  element.addEventListener("change",clearBaseMovementMessages);
});

["principal","installmentCount","manualInstallment"].forEach(id => document.getElementById(id).addEventListener("input",()=>{
  if(!loanInterestManualOverride)syncInterestCalculationMode(false);
  else updatePreview();
}));
interestRate.addEventListener("input",()=>{
  const hasValue=String(interestRate.value||"").trim()!=="";
  loanInterestManualOverride=hasValue;
  loanInterestAutoFilled=false;
  if(hasValue){
    interestAutoHelp.textContent=`✍️ Interés manual: ${Number(interestRate.value||0).toFixed(2)}%.`;
    interestAutoHelp.style.color="";
  }else{
    interestAutoHelp.textContent="Interés vacío: al salir de la casilla, Sutil intentará calcularlo con capital + cuotas + valor de cuota.";
    interestAutoHelp.style.color="";
  }
  updatePreview();
});
interestRate.addEventListener("change",()=>{
  if(!loanInterestManualOverride)syncInterestCalculationMode(true);
});
loanClient.addEventListener("change", updateLoanClientPreview);
syncInterestCalculationMode(false);
updatePreview();
updateFrequencyFields();
updateStaffRoleHelp();
clearBaseMovementMessages();


async function loadOperationalRoutes(){
  const routes = await api("/api/admin/routes");
  const normalOptions = routes.map(r=>`<option value="${r.id}">${r.name}</option>`).join("");
  const cashOptions = routes.map(r=>`<option value="${r.id}">${r.name}${r.active===false?" · INACTIVA":""}</option>`).join("");

  const preserve=(select,html)=>{
    if(!select)return;
    const current=select.value;
    select.innerHTML=html;
    if(routes.some(r=>String(r.id)===String(current)))select.value=current;
  };

  preserve(cashRoute,cashOptions);
  preserve(expenseRoute,normalOptions);
  return routes;
}

async function loadBaseMovementRoutes(){
  const routes = await loadOperationalRoutes();
  const options = routes.map(r=>`<option value="${r.id}">${r.name}</option>`).join("");
  baseMovementRoute.innerHTML=options;
  transferSourceRoute.innerHTML=options;
  transferDestinationRoute.innerHTML=options;
  if(routes.length>1)transferDestinationRoute.selectedIndex=1;
}

function syncExpenseMixedTotal(){
  const cash=Number(document.getElementById("expenseCashAmount")?.value||0);
  const pix=Number(document.getElementById("expensePixAmount")?.value||0);
  expenseAmount.value=(cash+pix)>0?(cash+pix).toFixed(2):"";
}
function updateExpenseMixedMethod(){
  const mixed=expenseMethod.value==="mixed";
  const box=document.getElementById("expenseMixedFields");
  if(box)box.style.display=mixed?"grid":"none";
  expenseAmount.readOnly=mixed;
  if(mixed)syncExpenseMixedTotal();
}

async function saveExpense(){
  expenseMessage.style.display="block";
  expenseMessage.classList.remove("error");
  try{
    await loadOperationalRoutes();
    const expensePayload={
      route_id:Number(expenseRoute.value),
      expense_date:expenseDate.value,
      category:expenseCategory.value,
      amount:Number(expenseAmount.value),
      payment_method:expenseMethod.value,
      cash_amount:expenseMethod.value==="mixed"?Number(document.getElementById("expenseCashAmount")?.value||0):null,
      pix_amount:expenseMethod.value==="mixed"?Number(document.getElementById("expensePixAmount")?.value||0):null,
      description:expenseDescription.value.trim()||null,
      historical_mode:historicalModeActive,
      late_correction_mode:forgottenOperationMode
    };
    if(expensePayload.payment_method==="mixed" && (!(expensePayload.cash_amount>0) || !(expensePayload.pix_amount>0))){
      throw new Error("En PIX + Dinero debes indicar un valor mayor que cero en las dos casillas.");
    }
    if(forgottenOperationMode && !navigator.onLine){
      throw new Error("La operación olvidada requiere conexión para validar la caja abierta actual.");
    }
    const result=await offlineMutationOrOnline({
      entityType:"expense",
      action:"create",
      payload:expensePayload,
      path:forgottenOperationMode?"/api/admin/expenses?late_correction=true":"/api/admin/expenses",
      localRef:offlineUuid("expense"),
      options:{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body:JSON.stringify(expensePayload)
      }
    });
    expenseMessage.textContent=historicalModeActive
      ? "✅ Gasto histórico guardado · no afecta la caja operativa."
      : (forgottenOperationMode
          ? `🛠️ Gasto olvidado registrado · fecha real ${formatDateEs(expenseDate.value)} · descontado de la caja abierta actual.`
          : (result.offline_queued?"🟠 ":"") + result.message);
    expenseAmount.value="";
    const expenseCashInput=document.getElementById("expenseCashAmount");
    const expensePixInput=document.getElementById("expensePixAmount");
    if(expenseCashInput)expenseCashInput.value="";
    if(expensePixInput)expensePixInput.value="";
    expenseDescription.value="";
    await loadExpenses().catch(()=>{});
  }catch(e){
    expenseMessage.classList.add("error");
    expenseMessage.textContent=e.message;
  }
}

async function loadExpenses(){
  try{
    await loadOperationalRoutes();
    const params=new URLSearchParams();
    if(expenseDate.value)params.set("expense_date",expenseDate.value);
    if(expenseRoute.value)params.set("route_id",expenseRoute.value);
    const rows=await api("/api/admin/expenses?"+params.toString());
    expensesTable.innerHTML=rows.length?rows.map(r=>`
      <tr><td>${r.expense_date}</td><td>${r.route_name}</td>
      <td>${r.category}</td><td>${money(r.amount)}</td>
      <td>${r.payment_method==="pix"?"PIX":(r.payment_method==="mixed"?"PIX + Dinero":"Dinero")}</td>
      <td>${r.description||"—"}</td></tr>`).join("")
      :'<tr><td colspan="6">Sin gastos registrados.</td></tr>';
  }catch(e){
    expenseMessage.style.display="block";
    expenseMessage.classList.add("error");
    expenseMessage.textContent=e.message;
  }
}

let currentCashSessionId=null;
let currentCashLocalRef=null;
let currentCashStatus="unknown";
let currentCashExists=false;
let currentCashAutoCloseCash=0;
let currentCashAutoClosePix=0;
let currentCashAutoCloseRenewal=0;
let currentCashAutoCloseTotal=0;
let currentCashCloseExpenses=0;
let currentCashReceiptSnapshot=null;
let sutilLastConfirmedCashReceipt=null;
let currentBaseOperation="add";
let currentRepairableFutureSessionId=null;
let currentRepairableFutureDate=null;


let cashPreviewCache = new Map();
let cashSelectionVersion = 0;

function cashSelectionKey(){
  return `${cashRoute.value || ""}|${cashDate.value || ""}`;
}


let cashActiveSubview="";
let cashMutationBusy=false;

function keepCashOperateVisible(scrollResult=false){
  const operatePane=document.getElementById("cashOperatePane");
  const pendingPane=document.getElementById("cashPendingPane");
  cashActiveSubview="operate";
  if(operatePane)operatePane.style.display="block";
  if(pendingPane)pendingPane.style.display="none";
  setCashSubviewButtons("operate");
  if(scrollResult && cashResultCard && cashResultCard.style.display!=="none"){
    setTimeout(()=>cashResultCard.scrollIntoView({behavior:"smooth",block:"start"}),60);
  }
}

function setCashSubviewButtons(view){
  const operate=document.getElementById("cashNavOperateButton");
  const pending=document.getElementById("cashNavPendingButton");
  if(operate)operate.classList.toggle("active",view==="operate");
  if(pending)pending.classList.toggle("active",view==="pending");
}

async function openCashSubview(view){
  showForgottenCashReturnCard();
  const operatePane=document.getElementById("cashOperatePane");
  const pendingPane=document.getElementById("cashPendingPane");
  cashActiveSubview=view;
  if(operatePane)operatePane.style.display=view==="operate"?"block":"none";
  if(pendingPane)pendingPane.style.display=view==="pending"?"block":"none";
  setCashSubviewButtons(view);

  if(view==="pending"){
    await loadPendingOpenCashSessions().catch(()=>{});
  }else if(view==="operate"){
    await prepareCashSelection().catch(()=>{});
  }
}

function resetCashCompactNavigation(){
  cashActiveSubview="";
  const operatePane=document.getElementById("cashOperatePane");
  const pendingPane=document.getElementById("cashPendingPane");
  if(operatePane)operatePane.style.display="none";
  if(pendingPane)pendingPane.style.display="none";
  setCashSubviewButtons("");
}

async function loadPendingOpenCashSessions(){
  const card=document.getElementById("pendingOpenCashCard");
  const summary=document.getElementById("pendingOpenCashSummary");
  const list=document.getElementById("pendingOpenCashList");
  if(!card||!summary||!list)return;

  summary.textContent="Consultando cajas abiertas...";
  try{
    const data=await api("/api/admin/cash/pending-open");
    const rows=Array.isArray(data.rows)?data.rows:[];
    const overdue=Number(data.overdue_count||0);
    const badge=document.getElementById("pendingCashNavBadge");
    if(badge){
      badge.textContent=String(rows.length);
      badge.classList.toggle("alert",overdue>0);
      badge.classList.toggle("ok",rows.length===0);
    }

    if(!rows.length){
      card.style.borderColor="#82b88b";
      card.style.background="#f4fbf5";
      summary.innerHTML="<strong>✅ No hay cajas pendientes de cierre.</strong>";
      list.innerHTML="";
      return;
    }

    card.style.borderColor=overdue>0?"#d08a35":"#d6a23a";
    card.style.background=overdue>0?"#fff6ea":"#fffaf0";
    summary.innerHTML=`<strong>${rows.length} caja(s) abierta(s)</strong>${overdue?` · <strong>${overdue} de día(s) anterior(es)</strong>`:" · Todas corresponden al día actual"}`;

    list.innerHTML=rows.map(row=>{
      const days=Number(row.days_open||0);
      const ageLabel=days===0?"ABIERTA HOY":(days===1?"1 DÍA SIN CERRAR":`${days} DÍAS SIN CERRAR`);
      const ageStyle=row.overdue
        ? "background:#fff0e0;color:#9a4d00;border:1px solid #e5b16e"
        : "background:#edf8ef;color:#23743a;border:1px solid #a9d5b3";
      const opened=row.opened_at?new Date(row.opened_at).toLocaleString():"—";
      return `
        <div style="display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 0;border-top:1px solid rgba(0,0,0,.08)">
          <div style="min-width:230px;flex:1">
            <strong>${legacyEscapeHtml(row.route_name||"Ruta")}</strong>
            <div style="margin-top:3px"><strong>Fecha:</strong> ${formatDateEs(row.business_date)}</div>
            <div class="muted" style="margin-top:3px">Abierta por ${legacyEscapeHtml(row.opened_by_name||"—")} · ${legacyEscapeHtml(opened)}</div>
            <div class="muted" style="margin-top:3px">Base estimada actual: ${money(row.expected_total||0)} · Dinero ${money(row.expected_cash||0)} · PIX ${money(row.expected_pix||0)}</div>
          </div>
          <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end">
            <span style="${ageStyle};padding:6px 9px;border-radius:999px;font-weight:800;font-size:12px">${ageLabel}</span>
            <button class="btn secondary" type="button" onclick="openPendingCashSession(${Number(row.route_id)},'${String(row.business_date)}')">👁 Ver caja</button>
          </div>
        </div>`;
    }).join("");
  }catch(e){
    const badge=document.getElementById("pendingCashNavBadge");
    if(badge){badge.textContent="!";badge.classList.add("alert");badge.classList.remove("ok");}
    card.style.borderColor="#d7a0a0";
    card.style.background="#fff7f7";
    summary.textContent=`No fue posible consultar cajas pendientes: ${e.message}`;
    list.innerHTML="";
  }
}

async function openPendingCashSession(routeId,businessDate){
  if(!cashRoute||!cashDate)return;
  await openCashSubview("operate");

  // Si la ruta no estaba en el selector por alguna actualización reciente,
  // recargamos las rutas antes de intentar seleccionarla.
  if(!Array.from(cashRoute.options).some(opt=>String(opt.value)===String(routeId))){
    await loadOperationalRoutes();
  }

  cashRoute.value=String(routeId);
  cashDate.value=String(businessDate);
  cashPreviewCache.delete(cashSelectionKey());
  await prepareCashSelection();
  await loadCashSession();
  document.getElementById("cashResultCard")?.scrollIntoView({behavior:"smooth",block:"start"});
}

async function prepareCashSection(){
  applyCashOpeningBaseVisibility();
  resetCashCompactNavigation();
  try{
    await loadOperationalRoutes();
    await loadPendingOpenCashSessions();

    if(forgottenCashBridge?.active){
      const routeId=String(forgottenCashBridge.routeId||"");
      if(routeId && !Array.from(cashRoute.options).some(opt=>String(opt.value)===routeId)){
        await loadOperationalRoutes();
      }
      if(routeId)cashRoute.value=routeId;
      cashDate.value=forgottenCashBridge.cashDate||localTodayIso();

      cashActiveSubview="operate";
      const operatePane=document.getElementById("cashOperatePane");
      const pendingPane=document.getElementById("cashPendingPane");
      if(operatePane)operatePane.style.display="block";
      if(pendingPane)pendingPane.style.display="none";
      setCashSubviewButtons("operate");
      showForgottenCashReturnCard();
      await prepareCashSelection();
      return;
    }

    await prepareCashSelection();
    showForgottenCashReturnCard();
    // La pantalla inicia compacta: el usuario elige Operar caja o Pendientes.
    resetCashCompactNavigation();
  }catch(e){
    cashMessage.style.display="block";
    cashMessage.classList.add("error");
    cashMessage.textContent=e.message;
  }
}

function setPreviousOpenCashShortcut(routeId,businessDate){
  const button=document.getElementById("goPreviousOpenCashButton");
  if(!button)return;
  if(routeId && businessDate){
    button.dataset.routeId=String(routeId);
    button.dataset.businessDate=String(businessDate);
    button.textContent=`⚠️ Ir a caja pendiente · ${formatDateEs(businessDate)}`;
    button.style.display="inline-flex";
  }else{
    button.dataset.routeId="";
    button.dataset.businessDate="";
    button.textContent="⚠️ Ir a caja pendiente";
    button.style.display="none";
  }
}

async function goToPreviousOpenCash(){
  const button=document.getElementById("goPreviousOpenCashButton");
  const routeId=Number(button?.dataset.routeId||cashRoute?.value||0);
  const businessDate=button?.dataset.businessDate||"";
  if(!routeId || !businessDate)return;
  button.disabled=true;
  try{
    await openPendingCashSession(routeId,businessDate);
  }finally{
    button.disabled=false;
  }
}

function canRepairFutureCash(){
  return !!currentUser && ["company_owner","sutil_owner"].includes(currentUser.role);
}

function setFutureCashRepairButton(d){
  const button=document.getElementById("repairFutureCashButton");
  currentRepairableFutureSessionId=Number(d?.repairable_future_session_id||0)||null;
  currentRepairableFutureDate=d?.repairable_future_date||null;
  if(!button)return;
  const show=!!currentRepairableFutureSessionId && canRepairFutureCash();
  button.style.display=show?"inline-flex":"none";
  button.disabled=!show;
  if(show){
    button.textContent=`🛠️ Corregir caja futura · ${formatDateEs(currentRepairableFutureDate)}`;
  }
}

function cashChronologyConflict(d){
  if(!d)return {blocked:false,kind:null,date:null,message:"",canCloseCurrent:false,navigateToDate:null};

  if(d.future_date_invalid){
    return {
      blocked:true,
      kind:"future_selected",
      date:d.business_date||cashDate.value,
      canCloseCurrent:false,
      navigateToDate:null,
      message:`🔎 FECHA FUTURA · Solo consulta. Hoy en esta ruta es ${formatDateEs(d.route_today||localTodayIso())}. No se puede abrir, reabrir, cerrar ni registrar movimientos en una caja futura.`
    };
  }

  if(d.later_cash_is_future && d.repairable_future_session_id){
    return {
      blocked:true,
      kind:"legacy_future",
      date:d.repairable_future_date||d.later_cash_date,
      canCloseCurrent:false,
      navigateToDate:null,
      message:`⚠️ Se detectó una caja futura heredada del ${formatDateEs(d.repairable_future_date||d.later_cash_date)}. No abras otra caja todavía. Usa “Corregir caja futura” para trasladarla de forma segura al día operativo actual sin borrar sus operaciones.`
    };
  }

  // Si ya existe una caja posterior, nunca se permite crear o reabrir hacia atrás.
  // Si la fecha antigua ya quedó abierta por una versión anterior, se permite
  // únicamente cerrarla para reparar la secuencia.
  if(d.blocked_by_later_cash && d.later_cash_date){
    const currentOpen=!!d.exists && d.status==="open";
    return {
      blocked:true,
      kind:"later",
      date:d.later_cash_date,
      canCloseCurrent:currentOpen,
      navigateToDate:null,
      message: currentOpen
        ? `⚠️ Existe una caja posterior del ${formatDateEs(d.later_cash_date)}. Esta caja anterior quedó abierta fuera de orden; ciérrala primero para corregir la secuencia. No registres movimientos aquí.`
        : `⚠️ Ya existe una caja posterior del ${formatDateEs(d.later_cash_date)}. Esta fecha anterior solo se puede consultar; no se puede abrir ni reabrir después de haber avanzado la caja.`
    };
  }

  const otherOpenDate=d.other_open_date || (d.blocked_by_previous_open ? d.previous_open_date : null);
  if((d.blocked_by_other_open || d.blocked_by_previous_open) && otherOpenDate){
    return {
      blocked:true,
      kind:"open",
      date:otherOpenDate,
      canCloseCurrent:false,
      navigateToDate:otherOpenDate,
      message:`⚠️ La caja del ${formatDateEs(otherOpenDate)} sigue abierta. Debes cerrarla primero; solo puede existir una caja abierta por ruta.`
    };
  }

  return {blocked:false,kind:null,date:null,message:"",canCloseCurrent:false,navigateToDate:null};
}

function showCashChronologyConflict(conflict){
  if(conflict?.navigateToDate){
    setPreviousOpenCashShortcut(Number(cashRoute.value),conflict.navigateToDate);
  }else{
    setPreviousOpenCashShortcut(null,null);
  }
}

async function prepareCashSelection(){
  setPreviousOpenCashShortcut(null,null);
  setFutureCashRepairButton(null);
  currentCashSessionId=null;
  currentCashLocalRef=null;
  currentCashExists=false;
  currentCashStatus="not_opened";
  currentCashAutoCloseCash=0;
  currentCashAutoClosePix=0;
  currentCashAutoCloseTotal=0;
  currentCashCloseExpenses=0;
  currentCashReceiptSnapshot=null;
  cashSelectionVersion += 1;
  cashMessage.style.display="block";
  cashMessage.classList.remove("error");
  cashResultCard.style.display="none";
  syncCashOpeningBasePair(null,canSetCashOpeningBase());

  openCashButton.style.display="inline-block";
  openCashButton.textContent="🔓 Abrir caja";
  closeCashTopButton.style.display="inline-block";
  closeCashTopButton.disabled=true;

  if(!cashRoute.value || !cashDate.value){
    openCashButton.disabled=true;
    cashMessage.textContent="Selecciona fecha y ruta.";
    return;
  }

  const futureConsultation=cashDate.value>localTodayIso();
  if(futureConsultation){
    openCashButton.disabled=true;
    closeCashTopButton.disabled=true;
    cashMessage.classList.remove("error");
    cashMessage.textContent="🔎 Fecha futura · modo consulta. No se puede abrir, reabrir, cerrar ni registrar movimientos.";
    cashInheritanceNote.textContent=`Consulta futura. Fecha operativa actual: ${formatDateEs(localTodayIso())}.`;
  }

  const routeName = cashRoute.options[cashRoute.selectedIndex]?.textContent || "Ruta";

  // No obliga a pulsar Consultar. Al cambiar fecha/ruta hacemos una verificación
  // liviana para dejar Abrir caja listo inmediatamente. En modo offline se
  // conserva el flujo local existente.
  if(!navigator.onLine){
    openCashButton.disabled=false;
    cashMessage.textContent=`${routeName} seleccionada. Puedes abrir la caja directamente.`;
    return;
  }

  openCashButton.disabled=true;
  openCashButton.textContent="⏳ Verificando...";
  cashMessage.textContent=`Verificando ${routeName}...`;

  try{
    const d=await previewCashOpening(false);
    if(!d)return;

    currentCashExists=!!d.exists;
    currentCashStatus=d.exists ? (d.status||"open") : "not_opened";

    const routeActive=d.route_active!==false;
    const canSetBase=d.can_set_opening_base ?? canSetCashOpeningBase();
    const conflict=cashChronologyConflict(d);
    const blocked=conflict.blocked;
    showCashChronologyConflict(conflict);

    if(currentCashStatus==="closed"){
      openCashButton.textContent="🔓 Reabrir caja";
    }else if(currentCashStatus==="open"){
      openCashButton.textContent="🔓 Caja abierta";
    }else{
      openCashButton.textContent="🔓 Abrir caja";
    }

    openCashButton.disabled =
      !routeActive ||
      blocked ||
      currentCashStatus==="open" ||
      (!d.exists && !d.inherited && !canSetBase);

    closeCashTopButton.disabled=currentCashStatus!=="open" || blocked;

    if(blocked){
      cashMessage.textContent=conflict.message;
    }else if(currentCashStatus==="closed"){
      cashMessage.textContent="Esta caja está cerrada. Puedes reabrirla directamente.";
    }else if(currentCashStatus==="open"){
      cashMessage.textContent="Esta caja ya está abierta. Mostrando la información automáticamente...";
    }else{
      cashMessage.textContent=`${routeName} lista. Puedes abrir la caja directamente.`;
    }

    // Solo las cajas ABIERTAS se muestran automáticamente al volver a la fecha.
    // Si la caja está CERRADA, el detalle permanece oculto hasta que el usuario
    // pulse Consultar. Reabrir sigue disponible directamente.
    if(d.exists && currentCashStatus==="open"){
      await loadCashSession();
      keepCashOperateVisible(false);
    }else if(d.exists && currentCashStatus==="closed" && !blocked){
      cashResultCard.style.display="none";
      cashMessage.textContent="Esta caja está cerrada. Pulsa Consultar para verla o Reabrir caja para continuar.";
    }
  }catch(e){
    openCashButton.textContent="🔓 Abrir caja";
    openCashButton.disabled=false;
    cashMessage.classList.add("error");
    cashMessage.textContent=e.message;
  }
}

function canSetCashOpeningBase(){
  if(!currentUser)return false;
  if(["company_owner","sutil_owner"].includes(currentUser.role))return true;
  return ["company_admin","admin"].includes(currentUser.role) &&
    !!(currentUser.permissions||{}).manage_cash_base;
}

// 12.15.128: en Operar caja no repetir los saldos heredados/consultados.
// Se conservan en el DOM porque la apertura sigue enviando estos valores al servidor.
// Excepción: primera caja sin base heredada, que aún requiere definición por un autorizado.
function syncCashOpeningBasePair(preview=null, canSet=canSetCashOpeningBase()){
  const pair=document.querySelector("#cashOperatePane .cash-base-pair");
  if(!pair)return;
  const firstOpeningNeedsBase=!!preview && !!canSet &&
    !preview.exists && !preview.inherited && preview.route_active!==false;
  // Sin conexión se mantiene la posibilidad previa de definir base al abrir la primera caja.
  const offlineAuthorized=!navigator.onLine && !!cashRoute?.value && !!canSet;
  pair.style.display=(firstOpeningNeedsBase || offlineAuthorized)?"grid":"none";
}
function applyCashOpeningBaseVisibility(){
  const canSet=canSetCashOpeningBase();
  if(openingCashField)openingCashField.style.display=canSet?"":"none";
  if(openingPixField)openingPixField.style.display=canSet?"":"none";
  syncCashOpeningBasePair(null,canSet);
}

async function previewCashOpening(useCache=false){
  if(!cashRoute.value||!cashDate.value)return null;
  const key=cashSelectionKey();

  try{
    let d = useCache ? cashPreviewCache.get(key) : null;
    if(!d){
      d=await api(`/api/admin/cash/opening-preview?route_id=${cashRoute.value}&business_date=${cashDate.value}`);
      cashPreviewCache.set(key,d);
    }

    if(key!==cashSelectionKey())return null;

    setFutureCashRepairButton(d);
    const canSetBase = d.can_set_opening_base ?? canSetCashOpeningBase();
    if(openingCashField)openingCashField.style.display=canSetBase?"":"none";
    if(openingPixField)openingPixField.style.display=canSetBase?"":"none";
    syncCashOpeningBasePair(d,canSetBase);

    openingCash.value=Number(d.opening_cash||0).toFixed(2);
    openingPix.value=Number(d.opening_pix||0).toFixed(2);
    openingCash.readOnly=d.inherited||d.exists||!canSetBase;
    openingPix.readOnly=d.inherited||d.exists||!canSetBase;
    const routeActive = d.route_active !== false;
    const conflict=cashChronologyConflict(d);
    openCashButton.style.display="inline-block";
    openCashButton.disabled=!routeActive || conflict.blocked;
    showCashChronologyConflict(conflict);

    if(!routeActive){
      cashInheritanceNote.textContent="Ruta inactiva: puedes consultar cajas anteriores, pero no abrir una nueva caja hasta activarla.";
    }else if(conflict.blocked){
      cashInheritanceNote.textContent=conflict.message;
    }else if(d.exists){
      cashInheritanceNote.textContent=`Ya existe una caja ${d.status==="closed"?"cerrada":"abierta"} para esta fecha.`;
    }else if(d.inherited){
      cashInheritanceNote.textContent=d.previous_date
        ? `Base heredada automáticamente del cierre del ${d.previous_date}.`
        : "Base disponible cargada por el empresario o ADM autorizado.";
    }else if(d.before_operational_start){
      cashInheritanceNote.textContent=`Fecha anterior al inicio operativo (${formatDateEs(d.operational_start_date)}): se conserva como histórico y no altera la base.`;
    }else if(canSetBase){
      cashInheritanceNote.textContent="Primera caja de la ruta: define la base inicial. Desde el siguiente cierre se heredará automáticamente.";
    }else{
      cashInheritanceNote.textContent="La base inicial debe ser definida por el empresario o un ADM con permiso de base. Después el cobrador podrá abrir y cerrar la caja normalmente.";
    }
    return d;
  }catch(e){
    cashInheritanceNote.textContent=e.message;
    throw e;
  }
}


function localTodayIso(){
  const now=new Date();
  const year=now.getFullYear();
  const month=String(now.getMonth()+1).padStart(2,"0");
  const day=String(now.getDate()).padStart(2,"0");
  return `${year}-${month}-${day}`;
}

function isCollectorRole(){
  return currentUser?.role==="staff";
}

async function handleCashOpenAction(){
  if(!cashRoute.value || !cashDate.value){
    alert("Selecciona fecha y ruta.");
    return;
  }
  if(cashDate.value>localTodayIso()){
    alert("No se puede abrir una caja con fecha futura.");
    return;
  }

  // Verifica el estado actual sin exigir que el usuario pulse Consultar.
  // El backend sigue siendo la autoridad final y vuelve a validar al abrir.
  if(navigator.onLine){
    try{
      const d=await previewCashOpening(false);
      if(!d)return;

      currentCashExists=!!d.exists;
      currentCashStatus=d.exists ? (d.status||"open") : "not_opened";

      const conflict=cashChronologyConflict(d);
      if(conflict.blocked){
        showCashChronologyConflict(conflict);
        cashMessage.style.display="block";
        cashMessage.classList.add("error");
        cashMessage.textContent=conflict.message;
        return;
      }

      if(d.route_active===false){
        alert("La ruta está inactiva. Actívala antes de abrir una nueva caja.");
        return;
      }

      if(currentCashExists && currentCashStatus==="open"){
        await loadCashSession();
        keepCashOperateVisible(true);
        return;
      }

      if(currentCashExists && currentCashStatus==="closed"){
        // Carga silenciosamente el id de la sesión y continúa con la reapertura.
        await loadCashSession();
        if(canAuthorizeCashReopen()){
          await reopenCashSession();
        }else{
          alert("Esta caja ya fue cerrada. Para reabrir la caja, comunícate con tu ADM.");
        }
        return;
      }
    }catch(e){
      cashMessage.style.display="block";
      cashMessage.classList.add("error");
      cashMessage.textContent=e.message;
      return;
    }
  }

  if(isCollectorRole() && cashDate.value!==localTodayIso()){
    alert("El cobrador solo puede abrir la caja del día actual. Para abrir una caja de un día anterior, comunícate con tu ADM.");
    return;
  }

  await openCashSession();
}

async function openCashSession(){
  if(cashMutationBusy)return;
  cashMutationBusy=true;
  keepCashOperateVisible(false);
  cashMessage.style.display="block";
  cashMessage.classList.remove("error");
  try{
    if(navigator.onLine)await previewCashOpening(false);
    const cashPayload={
      route_id:Number(cashRoute.value),
      business_date:cashDate.value,
      opening_cash:Number(openingCash.value||0),
      opening_pix:Number(openingPix.value||0),
      notes:cashNotes.value.trim()||null
    };
    const result=await offlineMutationOrOnline({
      entityType:"cash",
      action:"open",
      payload:cashPayload,
      path:"/api/admin/cash/open",
      localRef:`cash-${cashPayload.route_id}-${cashPayload.business_date}-${offlineDeviceId()}`,
      options:{
        method:"POST",
        headers:{"Content-Type":"application/json"},
        body:JSON.stringify(cashPayload)
      }
    });
    cashMessage.textContent=result.message;
    cashPreviewCache.delete(cashSelectionKey());
    await loadCashSession();
    keepCashOperateVisible(true);
    await loadPendingOpenCashSessions().catch(()=>{});
  }catch(e){
    cashMessage.classList.add("error");
    cashMessage.textContent=e.message;
  }finally{
    cashMutationBusy=false;
  }
}


function useSimpleCashView(){
  return !!currentUser && ["staff","company_admin","admin"].includes(currentUser.role);
}

function renderSimpleCashSummary(d){
  const basePrevious = Number(d.opening_cash||0) + Number(d.opening_pix||0);
  const collections = Number(d.cash_collected||0) + Number(d.pix_collected||0);
  const renewals = Number(d.renewal_collected||0);
  const loans = Number(d.loans_disbursed||0);
  const expenses = Number(d.total_expenses||0);

  const adjustments =
    Number(d.base_additions_cash||0) +
    Number(d.base_additions_pix||0) -
    Number(d.base_withdrawals_cash||0) -
    Number(d.base_withdrawals_pix||0) +
    Number(d.transfers_in_cash||0) +
    Number(d.transfers_in_pix||0) -
    Number(d.transfers_out_cash||0) -
    Number(d.transfers_out_pix||0);

  const adjustmentRow = (d.base_movements_visible!==false && (isSutilOwner()||sutilBaseShowToStaff) && Math.abs(adjustments) > 0.005)
    ? `<div class="simple-cash-row ${adjustments>=0?"in":"out"}">
         <span>Ajustes de base</span><strong>${money(adjustments)}</strong>
       </div>`
    : "";

  const expenseRows=(d.daily_expenses||[]).length
    ? (d.daily_expenses||[]).map(row=>`
        <div class="simple-day-item">
          <span title="${legacyEscapeHtml(row.label||"Gasto")}">${legacyEscapeHtml(row.label||"Gasto")}</span>
          <strong>${money(row.amount||0)}</strong>
        </div>`).join("")
    : `<div class="simple-day-empty">Sin gastos registrados este día</div>`;

  const loanRows=(d.daily_loans||[]).length
    ? (d.daily_loans||[]).map(row=>`
        <div class="simple-day-item">
          <span title="${legacyEscapeHtml(row.client_name||"Cliente")}">${legacyEscapeHtml(row.client_name||"Cliente")}</span>
          <strong>${money(row.amount||0)}</strong>
        </div>`).join("")
    : `<div class="simple-day-empty">Sin créditos entregados este día</div>`;

  return `
    <div class="simple-cash-workspace">
      <div class="simple-cash-sheet">
        <div class="simple-cash-row">
          <span>Base anterior</span>
          <strong>${money(basePrevious)}</strong>
        </div>
        <div class="simple-cash-row in">
          <span>Cobros Dinero + PIX</span>
          <strong>${money(collections)}</strong>
        </div>
        <div class="simple-cash-row in">
          <span>🔄 Renovaciones</span>
          <strong>${money(renewals)}</strong>
        </div>
        <div class="simple-cash-row out">
          <span>Créditos entregados</span>
          <strong>${money(loans)}</strong>
        </div>
        <div class="simple-cash-row out">
          <span>Gastos</span>
          <strong>${money(expenses)}</strong>
        </div>
        ${adjustmentRow}
        <div class="simple-cash-row total">
          <span>Base total</span>
          <strong>${money(d.expected_total||0)}</strong>
        </div>
        <div class="simple-cash-note">
          ${d.previous_date
            ? `Base anterior heredada del cierre del ${formatDateEs(d.previous_date)}.`
            : "Base inicial o saldo disponible de la ruta."}
        </div>
        <div class="simple-cash-mini-balance">
          <span>Dinero: <strong>${money(d.expected_cash||0)}</strong></span>
          <span>PIX: <strong>${money(d.expected_pix||0)}</strong></span>
        </div>
      </div>

      <div class="simple-day-lists">
        <div class="simple-day-card">
          <h4>🧾 Gastos del día</h4>
          <div class="simple-day-list">${expenseRows}</div>
          <div class="simple-day-total">
            <span>Total</span><strong>${money(expenses)}</strong>
          </div>
        </div>

        <div class="simple-day-card">
          <h4>💰 Créditos del día</h4>
          <div class="simple-day-list">${loanRows}</div>
          <div class="simple-day-total">
            <span>Total</span><strong>${money(loans)}</strong>
          </div>
        </div>
      </div>
    </div>`;
}

async function loadCashSession(){
  const version=++cashSelectionVersion;
  const key=cashSelectionKey();

  if(!cashRoute.value||!cashDate.value)return;

  consultCashButton.disabled=true;
  consultCashButton.textContent="⏳ Consultando...";
  openCashButton.style.display="inline-block";
  closeCashTopButton.style.display="inline-block";
  cashMessage.style.display="block";
  cashMessage.classList.remove("error");
  cashMessage.textContent="Consultando caja...";

  try{
    const d=await api(`/api/admin/cash?business_date=${cashDate.value}&route_id=${cashRoute.value}`);

    if(version!==cashSelectionVersion || key!==cashSelectionKey())return;
    currentCashReceiptSnapshot=d;
    setFutureCashRepairButton(d);

    const canSetBase=d.can_set_opening_base ?? canSetCashOpeningBase();
    const routeActive=d.route_active !== false;

    if(openingCashField)openingCashField.style.display=canSetBase?"":"none";
    if(openingPixField)openingPixField.style.display=canSetBase?"":"none";
    syncCashOpeningBasePair(d,canSetBase);

    openingCash.value=Number(d.opening_cash||0).toFixed(2);
    openingPix.value=Number(d.opening_pix||0).toFixed(2);
    openingCash.readOnly=!!d.inherited||!!d.exists||!canSetBase;
    openingPix.readOnly=!!d.inherited||!!d.exists||!canSetBase;

    const conflict=cashChronologyConflict(d);
    openCashButton.style.display=d.exists?"none":"inline-block";
    openCashButton.disabled=!routeActive || conflict.blocked || (!d.exists && !d.inherited && !canSetBase);
    closeCashTopButton.disabled=conflict.blocked;
    showCashChronologyConflict(conflict);

    if(!routeActive){
      cashInheritanceNote.textContent="Ruta inactiva: puedes consultar cajas anteriores, pero no abrir una nueva caja hasta activarla.";
    }else if(conflict.blocked){
      cashInheritanceNote.textContent=conflict.message;
    }else if(d.exists){
      cashInheritanceNote.textContent=`Ya existe una caja ${d.status==="closed"?"cerrada":"abierta"} para esta fecha.`;
    }else if(d.inherited){
      cashInheritanceNote.textContent=d.previous_date
        ? `Base heredada automáticamente del cierre del ${d.previous_date}.`
        : "Base disponible cargada por el empresario o ADM autorizado.";
    }else if(canSetBase){
      cashInheritanceNote.textContent="Primera caja de la ruta: define la base inicial. Desde el siguiente cierre se heredará automáticamente.";
    }else{
      cashInheritanceNote.textContent="La base inicial debe ser definida por el empresario o un ADM con permiso de base.";
    }

    currentCashSessionId=d.id;
    currentCashLocalRef=d.local_ref||null;
    currentCashExists=!!d.exists;
    currentCashStatus=d.exists ? (d.status||"open") : "not_opened";

    openCashButton.style.display="inline-block";
    closeCashTopButton.style.display="inline-block";
    openCashButton.textContent=currentCashStatus==="closed"?"🔓 Reabrir caja":"🔓 Abrir caja";
    if(conflict.blocked){
      openCashButton.disabled=true;
      closeCashTopButton.disabled=true;
    }

    cashResultCard.style.display="block";
    cashMainMetrics.classList.remove("cash-kpis-compact");
    cashResultTitle.textContent=`Caja · ${d.route_name} · ${d.business_date}`;

    if(!d.exists && d.reconstructed){
      cashStatusBanner.className="cash-status-banner closed";
      cashStatusBanner.innerHTML=`<strong>🧮 CAJA RECONSTRUIDA</strong><span>Movimientos registrados por su fecha real</span>`;
      cashActors.innerHTML="";

      cashMainMetrics.classList.add("cash-kpis-compact");
      cashMainMetrics.innerHTML=`
        <div class="cash-main-metric">
          <small>Programadas del día</small>
          <strong>${money(d.scheduled_due_total||0)}</strong>
          <div class="muted">${Number(d.scheduled_installment_count||0)} cuota(s)</div>
        </div>
        <div class="cash-main-metric">
          <small>Pagado de esas cuotas</small>
          <strong>${money(d.scheduled_paid_total||0)}</strong>
          <div class="muted">${Number(d.scheduled_paid_count||0)} completa(s)</div>
        </div>
        <div class="cash-main-metric total">
          <small>Pendiente por cobrar del día</small>
          <strong>${money(d.scheduled_pending_total||0)}</strong>
          <div class="muted">${Number(d.scheduled_pending_count||0)} pendiente(s)</div>
        </div>`;

      cashSummary.innerHTML=
        renderCashSummaryGroups(d)+
        reportMetricCard("Créditos entregados",money(d.loans_disbursed),"Fecha real")+
        reportMetricCard("Gastos",money(d.total_expenses),"Fecha real")+
        renderCashFinalTotal(d);

      cashCloseArea.style.display="none";
      openCashButton.style.display="inline-block";
      openCashButton.textContent="🔓 Abrir caja";
      closeCashTopButton.style.display="none";
      reopenCashButton.style.display="none";
      cashMessage.classList.remove("error");
      cashMessage.textContent="Caja reconstruida automáticamente. Los movimientos de esta fecha ya forman parte de la base de la ruta.";
      return;
    }

    if(!d.exists){
      cashStatusBanner.className="cash-status-banner missing";
      const pastCollector=isCollectorRole() && cashDate.value!==localTodayIso();
      if(conflict.blocked){
        cashStatusBanner.innerHTML=`<strong>⚠ Secuencia de caja bloqueada</strong><span>${conflict.message}</span>`;
      }else{
        cashStatusBanner.innerHTML=`<strong>⚠ Caja todavía no abierta</strong><span>${
          pastCollector
            ? "Día anterior: el cobrador solo puede consultar. Para abrirla, comunícate con tu ADM."
            : "Puede abrirla si tiene permiso."
        }</span>`;
      }
      cashActors.innerHTML="";
      const openingCashValue=Number(d.opening_cash||0);
      const openingPixValue=Number(d.opening_pix||0);

      if(useSimpleCashView()){
        cashMainMetrics.innerHTML="";
        cashSummary.innerHTML=`
          <div class="simple-cash-sheet">
            <div class="simple-cash-row total">
              <span>Base operativa disponible</span>
              <strong>${money(openingCashValue+openingPixValue)}</strong>
            </div>
          </div>
          <div class="simple-cash-balance-breakdown">
            <div><small>Dinero operativo</small><strong>${money(openingCashValue)}</strong></div>
            <div><small>PIX operativo</small><strong>${money(openingPixValue)}</strong></div>
          </div>`;
      }else{
        cashMainMetrics.innerHTML=`
          <div class="cash-main-metric"><small>Dinero operativo disponible</small><strong>${money(openingCashValue)}</strong></div>
          <div class="cash-main-metric"><small>PIX operativo disponible</small><strong>${money(openingPixValue)}</strong></div>
          <div class="cash-main-metric total"><small>Base operativa total</small><strong>${money(openingCashValue+openingPixValue)}</strong></div>`;
        cashSummary.innerHTML='<div class="muted" style="margin-top:8px">No incluye cartera histórica, créditos importados ni cobros históricos.</div>';
      }
      cashCloseArea.style.display="none";
      openCashButton.style.display="inline-block";
      openCashButton.textContent="🔓 Abrir caja";
      closeCashTopButton.style.display="inline-block";
      closeCashTopButton.disabled=true;
      reopenCashButton.style.display="none";
      cashMessage.textContent="Caja todavía no abierta.";
      return;
    }

    cashStatusBanner.className=`cash-status-banner ${d.status==="closed"?"closed":"open"}`;
    cashStatusBanner.innerHTML=`<strong>${d.status==="closed"?"🔒 CAJA CERRADA":"🟢 CAJA ABIERTA"}</strong><span>${d.status==="closed"?"Consulta final":"Operación en curso"}</span>`;

    if(useSimpleCashView()){
      cashActors.innerHTML="";
      cashMainMetrics.innerHTML="";
      cashSummary.innerHTML=renderSimpleCashSummary(d);
    }else{
      cashActors.innerHTML=`
        <div class="cash-actor-box"><small>Responsable</small><strong>${d.responsible_name||"—"}</strong></div>
        <div class="cash-actor-box"><small>Abierta por</small><strong>${d.opened_by_name||"—"}</strong><br><small>${d.opened_at?new Date(d.opened_at).toLocaleString():"—"}</small></div>
        <div class="cash-actor-box cash-actor-box-full"><small>Cerrada por</small><strong>${d.closed_by_name||"—"}</strong><br><small>${d.closed_at?new Date(d.closed_at).toLocaleString():"—"}</small></div>`;

      cashMainMetrics.classList.add("cash-kpis-compact");
      cashMainMetrics.innerHTML=`
        <div class="cash-main-metric">
          <small>Programadas del día</small>
          <strong>${money(d.scheduled_due_total||0)}</strong>
          <div class="muted">${Number(d.scheduled_installment_count||0)} cuota(s)</div>
        </div>
        <div class="cash-main-metric">
          <small>Pagado de esas cuotas</small>
          <strong>${money(d.scheduled_paid_total||0)}</strong>
          <div class="muted">${Number(d.scheduled_paid_count||0)} completa(s)</div>
        </div>
        <div class="cash-main-metric total">
          <small>Pendiente por cobrar del día</small>
          <strong>${money(d.scheduled_pending_total||0)}</strong>
          <div class="muted">${Number(d.scheduled_pending_count||0)} pendiente(s)</div>
        </div>`;

      cashSummary.innerHTML=
        renderCashSummaryGroups(d)+
        reportMetricCard("Créditos entregados",money(d.loans_disbursed),"Movimientos de esta caja")+
        reportMetricCard("Gastos",money(d.total_expenses),"Dinero + PIX")+
        renderCashFinalTotal(d);
    }

    cashCloseArea.style.display=d.status==="open"?"block":"none";
    openCashButton.style.display="inline-block";
    if(d.status==="closed"){
      openCashButton.textContent="🔓 Reabrir caja";
      openCashButton.disabled=!routeActive || conflict.blocked;
    }else{
      openCashButton.textContent="🟢 Caja abierta";
      openCashButton.disabled=true;
    }
    closeCashTopButton.style.display="inline-block";
    // Si quedaron dos cajas abiertas por una versión anterior, solo se deja cerrar
    // primero la cronológicamente más antigua; la más nueva queda bloqueada.
    const canCloseToRepair=!!conflict.canCloseCurrent;
    closeCashTopButton.disabled=d.status!=="open" || (conflict.blocked && !canCloseToRepair);
    reopenCashButton.style.display="none";

    currentCashAutoCloseCash=Number(d.expected_cash||0);
    currentCashAutoClosePix=Number(d.expected_pix||0);
    currentCashAutoCloseRenewal=Number(d.renewal_collected||0);
    currentCashCloseExpenses=Number(d.total_expenses||0);
    currentCashAutoCloseTotal=Number(d.expected_total||0);

    if(d.status==="open"){
      if(autoCloseCash)autoCloseCash.textContent=money(currentCashAutoCloseCash);
      if(autoClosePix)autoClosePix.textContent=money(currentCashAutoClosePix);
      if(autoCloseRenewal)autoCloseRenewal.textContent=money(currentCashAutoCloseRenewal);
      if(autoCloseTotal)autoCloseTotal.textContent=money(currentCashAutoCloseTotal);
      const expensesField=document.getElementById("autoCloseExpenses");
      if(expensesField)expensesField.textContent=money(currentCashCloseExpenses);
    }

    if(conflict.blocked){
      cashMessage.classList.add("error");
      cashMessage.textContent=conflict.message;
    }else{
      cashMessage.classList.remove("error");
      cashMessage.textContent=`Estado: ${d.status==="closed"?"CERRADA":"ABIERTA"}`;
    }
  }catch(e){
    if(version!==cashSelectionVersion)return;
    cashMessage.classList.add("error");
    cashMessage.textContent=e.message;
  }finally{
    if(version===cashSelectionVersion){
      consultCashButton.disabled=false;
      consultCashButton.textContent="🔎 Consultar";
    }
  }
}

async function showCashCloseForm(){
  if(!currentCashExists || currentCashStatus==="not_opened"){
    alert("La caja todavía no está abierta.");
    return;
  }
  if(currentCashStatus==="closed"){
    alert("Esta caja ya está cerrada.");
    return;
  }
  if(!currentCashSessionId){
    await loadCashSession();
  }
  if(!currentCashSessionId){
    alert("No fue posible cargar la caja. Intenta nuevamente.");
    return;
  }
  keepCashOperateVisible(false);
  cashCloseArea.style.display="block";
  if(autoCloseCash)autoCloseCash.textContent=money(currentCashAutoCloseCash);
  if(autoClosePix)autoClosePix.textContent=money(currentCashAutoClosePix);
  if(autoCloseRenewal)autoCloseRenewal.textContent=money(currentCashAutoCloseRenewal);
  if(autoCloseTotal)autoCloseTotal.textContent=money(currentCashAutoCloseTotal);
  const expensesField=document.getElementById("autoCloseExpenses");
  if(expensesField)expensesField.textContent=money(currentCashCloseExpenses);
  const expenseLabel=document.getElementById("cashCloseExpensesLabel");
  if(expenseLabel)expenseLabel.textContent=sutilCashReceiptTexts().expenses;
  cashCloseArea.scrollIntoView({behavior:"smooth",block:"center"});
}

// SUTIL FIX 12.15.141: exportación autónoma de un cierre confirmado, sin dependencias externas.
function sutilCashReceiptTexts(){
  const code=String((typeof accessLanguageCode!=="undefined" && accessLanguageCode)||document.documentElement.lang||"es").slice(0,2).toLowerCase();
  const t={
    es:{expenses:"Gastos del día",success:"Caja cerrada correctamente",subtitle:"Cierre guardado. Comparte o imprime el comprobante.",image:"🖼 Compartir imagen",pdf:"📄 Compartir PDF",print:"🖨 Imprimir",close:"Cerrar",ready:"Comprobante listo.",fallback:"No se abrió el menú para compartir; se descargó el archivo.",error:"No fue posible generar el comprobante: ",refreshLater:"Actualiza la consulta para ver el nuevo estado.",pendingSync:"Sin conexión: el cierre queda pendiente de sincronización; aún no se emite comprobante oficial.",receipt:"COMPROBANTE DE CIERRE",confirmed:"CIERRE CONFIRMADO",route:"Ruta",date:"Fecha",by:"Cerrada por",opening:"Base al inicio",cash:"Dinero",pix:"PIX",collected:"Cobros",pixCollected:"PIX + Banco",renewal:"Renovación",loans:"Créditos entregados",physical:"BASE FINAL FÍSICA",accounting:"Total contable con renovación",note:"Observación",foot:"Renovación es saldo interno: no incrementa Dinero ni PIX.",save:"Comprobante guardado",blocked:"El navegador bloqueó la impresión. Puedes utilizar Compartir PDF."},
    pt:{expenses:"Despesas do dia",success:"Caixa fechado com sucesso",subtitle:"Fechamento salvo. Compartilhe ou imprima o comprovante.",image:"🖼 Compartilhar imagem",pdf:"📄 Compartilhar PDF",print:"🖨 Imprimir",close:"Fechar",ready:"Comprovante pronto.",fallback:"O compartilhamento não abriu; o arquivo foi baixado.",error:"Não foi possível gerar o comprovante: ",refreshLater:"Atualize a consulta para ver o novo estado.",pendingSync:"Sem conexão: fechamento pendente de sincronização; comprovante oficial indisponível.",receipt:"COMPROVANTE DE FECHAMENTO",confirmed:"FECHAMENTO CONFIRMADO",route:"Rota",date:"Data",by:"Fechado por",opening:"Base inicial",cash:"Dinheiro",pix:"PIX",collected:"Recebimentos",pixCollected:"PIX + Banco",renewal:"Renovação",loans:"Créditos entregues",physical:"BASE FINAL FÍSICA",accounting:"Total contábil com renovação",note:"Observação",foot:"Renovação é saldo interno: não aumenta Dinheiro nem PIX.",save:"Comprovante salvo",blocked:"O navegador bloqueou a impressão. Use Compartilhar PDF."},
    en:{expenses:"Today's expenses",success:"Cash closed successfully",subtitle:"Closing saved. Share or print the receipt.",image:"🖼 Share image",pdf:"📄 Share PDF",print:"🖨 Print",close:"Close",ready:"Receipt ready.",fallback:"Share was unavailable; the file was downloaded.",error:"Couldn't generate the receipt: ",refreshLater:"Refresh the cash view to see the new status.",pendingSync:"Offline: closing is queued; no official receipt until synchronized.",receipt:"CASH CLOSING RECEIPT",confirmed:"CLOSING CONFIRMED",route:"Route",date:"Date",by:"Closed by",opening:"Opening balance",cash:"Cash",pix:"PIX",collected:"Collections",pixCollected:"PIX + Bank",renewal:"Renewal",loans:"Loans disbursed",physical:"FINAL PHYSICAL BALANCE",accounting:"Accounting total with renewal",note:"Note",foot:"Renewal is an internal balance: it does not increase cash or PIX.",save:"Receipt saved",blocked:"Printing was blocked. Use Share PDF instead."}
  };
  return t[code]||t.es;
}

function openSutilCashReceipt(data){
  if(!data)return;
  const t=sutilCashReceiptTexts();
  const el=document.getElementById("sutilCashReceiptModal");
  if(!el)return;
  document.getElementById("sutilCashReceiptTitle").textContent="✅ "+t.success;
  document.getElementById("sutilCashReceiptSubtitle").textContent=t.subtitle;
  document.getElementById("sutilCashReceiptSummary").textContent=
    `${data.route} · ${cashSummaryFullDate(data.date)} · ${money(data.finalTotal)}`;
  document.getElementById("sutilCashReceiptImage").textContent=t.image;
  document.getElementById("sutilCashReceiptPdf").textContent=t.pdf;
  document.getElementById("sutilCashReceiptPrint").textContent=t.print;
  document.getElementById("sutilCashReceiptDismiss").textContent=t.close;
  document.getElementById("sutilCashReceiptStatus").textContent=t.ready;
  el.classList.add("open");el.setAttribute("aria-hidden","false");
  document.getElementById("sutilCashReceiptImage")?.focus();
}
function closeSutilCashReceipt(){
  const el=document.getElementById("sutilCashReceiptModal");
  if(el){el.classList.remove("open");el.setAttribute("aria-hidden","true");}
}
function sutilCashReceiptCanvas(data){
  const t=sutilCashReceiptTexts();
  const canvas=document.createElement("canvas");
  canvas.width=1000;canvas.height=1414;
  const c=canvas.getContext("2d");
  c.fillStyle="#fff";c.fillRect(0,0,1000,1414);
  c.fillStyle="#253b58";c.fillRect(0,0,1000,176);
  c.fillStyle="#fff";c.font="bold 38px Arial";c.fillText("SUTIL",55,76);
  c.font="bold 26px Arial";c.fillText(t.receipt,55,120);
  c.fillStyle="#176a48";c.fillRect(55,205,890,54);
  c.fillStyle="#fff";c.font="bold 22px Arial";c.fillText(t.confirmed,78,241);
  let y=296;
  const wrap=(label,x,maxWidth,sz)=>{
    c.font=`${sz}px Arial`;
    const words=String(label||"—").split(/\s+/);let line="";
    for(const word of words){
      const candidate=line?line+" "+word:word;
      if(c.measureText(candidate).width>maxWidth && line){c.fillText(line,x,y);y+=sz+9;line=word;}
      else line=candidate;
    }
    if(line){c.fillText(line,x,y);}
  };
  const rule=()=>{c.strokeStyle="#d9e2ed";c.beginPath();c.moveTo(55,y+15);c.lineTo(945,y+15);c.stroke();y+=32;};
  const info=(label,value)=>{
    c.fillStyle="#596a80";c.font="20px Arial";c.fillText(label,58,y);
    c.fillStyle="#1e3148";c.font="bold 22px Arial";
    const txt=String(value ?? "—");
    if(c.measureText(txt).width>640){c.font="bold 19px Arial";}
    c.fillText(txt,305,y);y+=38;
  };
  const row=(label,value,bold=false)=>{
    c.fillStyle="#405168";c.font=(bold?"bold ":"")+"22px Arial";c.fillText(label,72,y);
    c.fillStyle=bold?"#145d80":"#182b42";c.font=(bold?"bold ":"")+"24px Arial";
    c.textAlign="right";c.fillText(money(value),918,y);c.textAlign="left";y+=48;
  };
  info(t.route,data.route);info(t.date,cashSummaryFullDate(data.date));info(t.by,data.closedBy);rule();
  c.fillStyle="#2b506f";c.font="bold 23px Arial";c.fillText(t.opening.toUpperCase(),70,y);y+=35;
  row(t.cash,data.openingCash);row(t.pix,data.openingPix);rule();
  c.fillStyle="#2b506f";c.font="bold 23px Arial";c.fillText(t.collected.toUpperCase(),70,y);y+=35;
  row(t.cash,data.cashCollected);row(t.pixCollected,data.pixCollected);row(t.renewal,data.renewal);rule();
  row(t.loans,data.loans);row(t.expenses,data.expenses,true);rule();
  row(t.cash+" final",data.finalCash,true);row(t.pix+" final",data.finalPix,true);
  c.fillStyle="#eaf3f7";c.fillRect(55,y-28,890,86);
  c.fillStyle="#183a5c";c.font="bold 23px Arial";c.fillText(t.physical,73,y+8);
  c.textAlign="right";c.font="bold 29px Arial";c.fillText(money(data.finalTotal),924,y+9);c.textAlign="left";y+=83;
  c.fillStyle="#53677a";c.font="19px Arial";c.fillText(t.accounting+": "+money(data.finalTotal+data.renewal),73,y);y+=35;
  c.fillStyle="#526575";c.font="17px Arial";c.fillText(t.foot,72,y);y+=38;
  if(data.note){
    c.fillStyle="#1a3b58";c.font="bold 19px Arial";c.fillText(t.note+":",72,y);y+=32;
    c.fillStyle="#516479";wrap(String(data.note).slice(0,220),72,850,18);
  }
  c.fillStyle="#b1bbca";c.fillRect(50,1367,900,1);
  c.fillStyle="#7a8999";c.font="16px Arial";c.fillText("Sutil · "+new Date(data.generatedAt).toLocaleString(),55,1393);
  return canvas;
}
function sutilReceiptDownload(blob,name){
  const url=URL.createObjectURL(blob);const a=document.createElement("a");
  a.href=url;a.download=name;document.body.appendChild(a);a.click();a.remove();
  setTimeout(()=>URL.revokeObjectURL(url),60000);
}
function sutilReceiptPdfBlob(canvas){
  // Un PDF A4 real de una página que incrusta el comprobante JPEG; sin librerías externas.
  const jpeg=canvas.toDataURL("image/jpeg",.92).split(",")[1];
  const binary=atob(jpeg),bytes=new Uint8Array(binary.length);
  for(let i=0;i<binary.length;i++)bytes[i]=binary.charCodeAt(i);
  const enc=new TextEncoder(), chunks=[];let offset=0;const refs=[0];
  const add=(v)=>{const part=typeof v==="string"?enc.encode(v):v;chunks.push(part);offset+=part.length;};
  const obj=(id,v)=>{refs[id]=offset;add(`${id} 0 obj\n`);add(v);add("\nendobj\n");};
  add("%PDF-1.4\n");add(new Uint8Array([37,255,255,255,255,10]));
  obj(1,"<</Type /Catalog /Pages 2 0 R>>");
  obj(2,"<</Type /Pages /Kids [3 0 R] /Count 1>>");
  obj(3,"<</Type /Page /Parent 2 0 R /MediaBox [0 0 595.28 841.89] /Resources <</XObject <</Im0 4 0 R>>>> /Contents 5 0 R>>");
  refs[4]=offset;add("4 0 obj\n");
  add(`<</Type /XObject /Subtype /Image /Width ${canvas.width} /Height ${canvas.height} /ColorSpace /DeviceRGB /BitsPerComponent 8 /Filter /DCTDecode /Length ${bytes.length}>>\nstream\n`);
  add(bytes);add("\nendstream\nendobj\n");
  const stream="q\n595.28 0 0 841.89 0 0 cm\n/Im0 Do\nQ\n";
  obj(5,`<</Length ${enc.encode(stream).length}>>\nstream\n${stream}endstream`);
  const xref=offset;add("xref\n0 6\n0000000000 65535 f \n");
  for(let id=1;id<=5;id++)add(String(refs[id]).padStart(10,"0")+" 00000 n \n");
  add(`trailer\n<</Size 6 /Root 1 0 R>>\nstartxref\n${xref}\n%%EOF\n`);
  return new Blob(chunks,{type:"application/pdf"});
}
async function exportSutilCashReceipt(kind){
  const data=sutilLastConfirmedCashReceipt;if(!data)return;
  const status=document.getElementById("sutilCashReceiptStatus");const t=sutilCashReceiptTexts();
  try{
    const canvas=sutilCashReceiptCanvas(data);
    const asPdf=kind==="pdf";
    let blob;
    if(asPdf)blob=sutilReceiptPdfBlob(canvas);
    else {
      const b64=canvas.toDataURL("image/png").split(",")[1],raw=atob(b64),arr=new Uint8Array(raw.length);
      for(let i=0;i<raw.length;i++)arr[i]=raw.charCodeAt(i);
      blob=new Blob([arr],{type:"image/png"});
    }
    const name=`Sutil_cierre_${String(data.date).replace(/[^0-9-]/g,"")}_${String(data.sessionId).replace(/[^0-9-]/g,"")}.${asPdf?"pdf":"png"}`;
    const file=new File([blob],name,{type:blob.type});
    let canFileShare=!!navigator.share;
    try{if(canFileShare && navigator.canShare)canFileShare=!!navigator.canShare({files:[file]});}
    catch(_){canFileShare=false;}
    if(canFileShare){
      try{await navigator.share({files:[file],title:t.receipt});if(status)status.textContent=t.ready;return;}
      catch(e){if(e?.name==="AbortError")return;}
    }
    sutilReceiptDownload(blob,name);
    if(status)status.textContent=t.fallback;
  }catch(e){if(status)status.textContent=t.error+String(e.message||e);}
}
function printSutilCashReceipt(){
  const data=sutilLastConfirmedCashReceipt;if(!data)return;
  const status=document.getElementById("sutilCashReceiptStatus"),t=sutilCashReceiptTexts();
  // Abrir sin await para mantener el permiso de apertura del navegador móvil.
  const win=window.open("","_blank");
  if(!win){if(status)status.textContent=t.blocked;return;}
  try{
    const image=sutilCashReceiptCanvas(data).toDataURL("image/png");
    win.document.open();win.document.write(`<!doctype html><html><head><meta name="viewport" content="width=device-width,initial-scale=1"><title>Sutil</title><style>@page{size:A4;margin:0}body{margin:0;text-align:center;background:#fff}img{display:block;width:100%;max-width:210mm;height:auto;margin:auto}</style></head><body><img id="receipt" alt="Sutil receipt"></body></html>`);win.document.close();
    const picture=win.document.getElementById("receipt");
    picture.onload=()=>setTimeout(()=>{win.focus();win.print();},200);
    picture.src=image;
  }catch(e){win.close();if(status)status.textContent=t.error+String(e.message||e);}
}

async function closeCashSession(){
  if(!currentCashSessionId || cashMutationBusy)return;
  cashMutationBusy=true;
  const t=sutilCashReceiptTexts();
  const receiptDraft={
    date:String(cashDate.value||""),
    route:String(currentCashReceiptSnapshot?.route_name || cashRoute.selectedOptions?.[0]?.textContent || "Ruta"),
    sessionId:Number(currentCashSessionId),
    openingCash:Number(currentCashReceiptSnapshot?.opening_cash||0),
    openingPix:Number(currentCashReceiptSnapshot?.opening_pix||0),
    cashCollected:Number(currentCashReceiptSnapshot?.cash_collected||0),
    pixCollected:Number(currentCashReceiptSnapshot?.pix_collected||0),
    renewal:Number(currentCashAutoCloseRenewal||0),
    expenses:Number(currentCashCloseExpenses||0),
    loans:Number(currentCashReceiptSnapshot?.loans_disbursed||0),
    finalCash:Number(currentCashAutoCloseCash||0),
    finalPix:Number(currentCashAutoClosePix||0),
    finalTotal:Number(currentCashAutoCloseTotal||0),
    closedBy:String(currentUser?.name||currentUser?.full_name||"—"),
    note:String(cashCloseNotes.value||"").trim(),
    generatedAt:new Date().toISOString()
  };
  const confirmed=await sutilConfirm(
    `¿Cerrar caja automáticamente?\n\n`+
    `Dinero final: ${money(receiptDraft.finalCash)}\n`+
    `PIX final: ${money(receiptDraft.finalPix)}\n`+
    `${t.expenses}: ${money(receiptDraft.expenses)}\n`+
    `Renovaciones del día: ${money(receiptDraft.renewal)}\n`+
    `Base final: ${money(receiptDraft.finalTotal)}`
  );
  if(!confirmed){cashMutationBusy=false;return;}
  try{
    const closePayload={
      counted_cash:Number(receiptDraft.finalCash),
      counted_pix:Number(receiptDraft.finalPix),
      notes:receiptDraft.note||null,
      route_id:Number(cashRoute.value),
      business_date:cashDate.value,
      session_id:Number(currentCashSessionId),
      session_local_ref:null
    };
    if(Number(currentCashSessionId)<0){
      const localCash=await offlineCashRow(Number(cashRoute.value),cashDate.value);
      closePayload.session_local_ref=localCash?.local_ref||null;
    }
    const result=await offlineMutationOrOnline({
      entityType:"cash",action:"close",payload:closePayload,
      path:`/api/admin/cash/${currentCashSessionId}/close`,
      localRef:offlineUuid("cash-close"),
      options:{
        method:"POST",headers:{"Content-Type":"application/json"},
        body:JSON.stringify({
          counted_cash:closePayload.counted_cash,
          counted_pix:closePayload.counted_pix,
          notes:closePayload.notes
        })
      }
    });
    cashMessage.style.display="block";
    cashMessage.classList.remove("error");
    cashMessage.textContent=
      `${result.message}. Base heredable al siguiente día: `+
      `${money(Number(result.final_total ?? currentCashAutoCloseTotal))}`;
    cashPreviewCache.delete(cashSelectionKey());

    // El comprobante definitivo solo se ofrece si el servidor confirmó el cierre;
    // una operación en cola sin Internet no es aún un cierre oficial.
    const serverConfirmed=result && result.ok===true && !result.offline_queued;
    if(serverConfirmed){
      receiptDraft.finalCash=Number(result.final_cash ?? receiptDraft.finalCash);
      receiptDraft.finalPix=Number(result.final_pix ?? receiptDraft.finalPix);
      receiptDraft.finalTotal=Number(result.final_total ?? (receiptDraft.finalCash+receiptDraft.finalPix));
      sutilLastConfirmedCashReceipt=Object.freeze(receiptDraft);
    }
    try{await loadCashSession();}catch(refreshError){
      cashMessage.textContent+=` (${t.refreshLater})`;
    }
    keepCashOperateVisible(true);
    await loadPendingOpenCashSessions().catch(()=>{});
    if(serverConfirmed){
      openSutilCashReceipt(sutilLastConfirmedCashReceipt);
    }else if(result?.offline_queued){
      cashMessage.textContent+=` ${t.pendingSync}`;
    }
  }catch(e){
    cashMessage.style.display="block";
    cashMessage.classList.add("error");
    cashMessage.textContent=e.message;
  }finally{cashMutationBusy=false;}
}

function canAuthorizeCashReopen(){
  if(!currentUser)return false;
  if(["company_owner","sutil_owner"].includes(currentUser.role))return true;
  return ["company_admin","admin"].includes(currentUser.role) &&
    Boolean(currentUser.permissions?.manage_cash);
}

async function reopenCashSession(){
  if(!currentCashSessionId || cashMutationBusy)return;
  if(cashDate.value>localTodayIso()){
    alert("No se puede reabrir una caja con fecha futura.");
    return;
  }
  if(!canAuthorizeCashReopen()){
    alert("Solo el empresario o un ADM con permiso de caja puede autorizar la reapertura.");
    return;
  }
  cashMutationBusy=true;
  const confirmed=await sutilConfirm("¿Reabrir esta caja? Los nuevos movimientos quedarán incluidos en el próximo cierre.");
  if(!confirmed){
    cashMutationBusy=false;
    return;
  }
  try{
    const result=await api(`/api/admin/cash/${currentCashSessionId}/reopen`,{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({})
    });
    cashMessage.style.display="block";
    cashMessage.classList.remove("error");
    cashMessage.textContent=result.message;
    cashPreviewCache.delete(cashSelectionKey());
    await loadCashSession();
    keepCashOperateVisible(true);
    await loadPendingOpenCashSessions().catch(()=>{});
  }catch(e){
    cashMessage.style.display="block";
    cashMessage.classList.add("error");
    cashMessage.textContent=e.message;
  }finally{
    cashMutationBusy=false;
  }
}


async function repairFutureCashSession(){
  if(!currentRepairableFutureSessionId || cashMutationBusy)return;
  if(!canRepairFutureCash()){
    alert("Por seguridad, solo el empresario puede corregir una caja futura heredada.");
    return;
  }
  if(!navigator.onLine){
    alert("La corrección de caja futura requiere conexión.");
    return;
  }

  const futureDate=currentRepairableFutureDate||"";
  const confirmed=await sutilConfirm(
    `Se detectó una caja con fecha futura ${formatDateEs(futureDate)}.

`+
    `Sutil verificará que no exista otra caja de hoy y que sus movimientos sean únicamente operaciones olvidadas válidas. `+
    `No se borrarán préstamos, pagos ni gastos.

¿Corregirla ahora?`
  );
  if(!confirmed)return;

  cashMutationBusy=true;
  const button=document.getElementById("repairFutureCashButton");
  if(button){button.disabled=true;button.textContent="⏳ Corrigiendo caja futura...";}
  try{
    const result=await api(`/api/admin/cash/${currentRepairableFutureSessionId}/repair-future-date`,{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({reason:"Corrección autorizada desde Operar caja · Fix 12.12"})
    });
    cashPreviewCache.clear();
    cashDate.max=localTodayIso();
    cashDate.value=result.business_date||localTodayIso();
    cashMessage.style.display="block";
    cashMessage.classList.remove("error");
    cashMessage.textContent=result.message;
    setFutureCashRepairButton(null);
    await loadCashSession();
    keepCashOperateVisible(true);
    await loadPendingOpenCashSessions().catch(()=>{});
  }catch(e){
    cashMessage.style.display="block";
    cashMessage.classList.add("error");
    cashMessage.textContent=e.message;
  }finally{
    cashMutationBusy=false;
    if(button && currentRepairableFutureSessionId){button.disabled=false;}
  }
}


function clearBaseMovementMessages(){
  if(baseMovementMessage){
    baseMovementMessage.textContent="";
    baseMovementMessage.style.display="none";
    baseMovementMessage.classList.remove("error");
  }
  if(transferMessage){
    transferMessage.textContent="";
    transferMessage.style.display="none";
    transferMessage.classList.remove("error");
  }
}

function showBaseOperation(type){
  clearBaseMovementMessages();
  currentBaseOperation=type;
  baseAdjustmentCard.style.display=type==="transfer"?"none":"block";
  baseTransferCard.style.display=type==="transfer"?"block":"none";
  if(type==="add"){
    baseAdjustmentTitle.textContent="Adicionar base";
    baseMovementReason.innerHTML=`
      <option>Aporte de capital</option>
      <option>Traslado externo</option>
      <option>Corrección positiva</option>
      <option>Otro</option>`;
  }else if(type==="remove"){
    baseAdjustmentTitle.textContent="Retirar base";
    baseMovementReason.innerHTML=`
      <option>Retiro de ganancia</option>
      <option>Retiro de capital</option>
      <option>Traslado externo</option>
      <option>Corrección negativa</option>
      <option>Otro</option>`;
  }
}

async function saveBaseAdjustment(){
  baseMovementMessage.style.display="block";
  if(historicalModeActive){
    baseMovementMessage.classList.add("error");
    baseMovementMessage.textContent="La carga histórica no modifica la base. Define el punto de arranque de la ruta para comenzar a operar en Sutil.";
    return;
  }
  baseMovementMessage.classList.remove("error");
  try{
    if(!baseMovementObservation.value.trim())throw new Error("La observación es obligatoria.");
    const params=new URLSearchParams({
      route_id:baseMovementRoute.value,
      business_date:baseMovementDate.value
    });
    const result=await api(`/api/admin/cash/adjustment?${params.toString()}`,{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        direction:currentBaseOperation,
        payment_method:baseMovementMethod.value,
        amount:Number(baseMovementAmount.value),
        reason_category:baseMovementReason.value,
        observation:baseMovementObservation.value.trim(),
        historical_mode:historicalModeActive
      })
    });
    baseMovementMessage.textContent=result.message + (historicalModeActive ? " · Movimiento histórico incorporado al saldo de la ruta." : "");
    baseMovementAmount.value="";
    baseMovementObservation.value="";
    await loadBaseMovements();
  }catch(e){
    baseMovementMessage.classList.add("error");
    baseMovementMessage.textContent=e.message;
  }
}


async function loadBaseMovements(){
  if(!baseMovementsTable)return;
  if(!isSutilOwner()&&!sutilBaseShowToStaff){
    baseMovementsTable.innerHTML='<tr><td colspan="9">El empresario ocultó estos movimientos al personal.</td></tr>';
    return;
  }
  try{
    // Solo lectura: abrir esta pantalla nunca debe crear movimientos de caja.
    baseMovementRows=await api("/api/admin/cash/base-movements");
    baseMovementsTable.innerHTML=baseMovementRows.length
      ? baseMovementRows.map(r=>`
        <tr>
          <td>${formatDateEs(r.business_date)}</td>
          <td>${r.route_name}</td>
          <td>${r.direction==="add"?"➕ Adición":"➖ Retiro"}</td>
          <td>${r.payment_method==="pix"?"PIX":"Efectivo"}</td>
          <td><strong>${money(r.amount)}</strong></td>
          <td>${r.reason_category||"—"}</td>
          <td>${r.description||"—"}</td>
          <td>${r.actor_name||"—"}</td>
          <td><button class="btn secondary" type="button" onclick="openEditBaseMovement(${r.id})">✏️ Editar</button></td>
        </tr>`).join("")
      : '<tr><td colspan="9">No hay movimientos de base registrados.</td></tr>';
  }catch(e){
    baseMovementsTable.innerHTML=`<tr><td colspan="9">${e.message}</td></tr>`;
  }
}

function openEditBaseMovement(id){
  const row=baseMovementRows.find(r=>Number(r.id)===Number(id));
  if(!row)return;
  editingBaseMovementId=row.id;
  editBaseDate.value=String(row.business_date||"").slice(0,10);
  editBaseRouteName.value=row.route_name||"";
  editBaseDirection.value=row.direction;
  editBaseMethod.value=row.payment_method||"cash";
  editBaseAmount.value=Number(row.amount||0);
  editBaseReason.value=row.reason_category||"Corrección";
  editBaseObservation.value=row.description||"";
  editBaseMessage.style.display="none";
  editBaseMessage.classList.remove("error");
  editBaseMovementCard.style.display="block";
  editBaseMovementCard.scrollIntoView({behavior:"smooth",block:"start"});
}

function cancelEditBaseMovement(){
  editingBaseMovementId=null;
  editBaseMovementCard.style.display="none";
}

async function saveEditedBaseMovement(){
  editBaseMessage.style.display="block";
  editBaseMessage.classList.remove("error");
  try{
    if(!editingBaseMovementId)throw new Error("Selecciona un movimiento.");
    if(!editBaseDate.value)throw new Error("Indica la fecha.");
    if(!Number(editBaseAmount.value)||Number(editBaseAmount.value)<=0)throw new Error("Indica un valor válido.");
    if(!editBaseReason.value.trim())throw new Error("Indica el motivo.");
    if(editBaseObservation.value.trim().length<3)throw new Error("La observación debe tener mínimo 3 caracteres.");

    const ok=await sutilConfirm(
      "Esta corrección puede modificar la base disponible actual de la ruta. " +
      "El valor anterior y el nuevo quedarán registrados en auditoría. ¿Continuar?"
    );
    if(!ok)return;

    const result=await api(`/api/admin/cash/base-movements/${editingBaseMovementId}`,{
      method:"PUT",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        business_date:editBaseDate.value,
        direction:editBaseDirection.value,
        payment_method:editBaseMethod.value,
        amount:Number(editBaseAmount.value),
        reason_category:editBaseReason.value.trim(),
        observation:editBaseObservation.value.trim()
      })
    });

    editBaseMessage.textContent=
      `${result.message}. Base actual: efectivo ${money(result.current_cash)} · PIX ${money(result.current_pix)} · Total ${money(result.current_total)}.`;
    await loadBaseMovements();
    await loadCashMovements().catch(()=>{});
    setTimeout(()=>cancelEditBaseMovement(),900);
  }catch(e){
    editBaseMessage.classList.add("error");
    editBaseMessage.textContent=e.message;
  }
}

async function saveRouteTransfer(){
  transferMessage.style.display="block";
  if(historicalModeActive){
    transferMessage.classList.add("error");
    transferMessage.textContent="Una transferencia histórica no modifica la base operativa.";
    return;
  }
  transferMessage.classList.remove("error");
  try{
    if(!transferObservation.value.trim())throw new Error("La observación es obligatoria.");
    const result=await api("/api/admin/cash/transfer",{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        source_route_id:Number(transferSourceRoute.value),
        destination_route_id:Number(transferDestinationRoute.value),
        business_date:transferDate.value,
        payment_method:transferMethod.value,
        amount:Number(transferAmount.value),
        observation:transferObservation.value.trim(),
        historical_mode:historicalModeActive
      })
    });
    transferMessage.textContent=`${result.message}. Código: ${result.transfer_code}`;
    transferAmount.value="";
    transferObservation.value="";
  }catch(e){
    transferMessage.classList.add("error");
    transferMessage.textContent=e.message;
  }
}


async function editBaseFromReport(id){
  openSection("baseMovementsSection");
  await loadBaseMovements();
  openEditBaseMovement(id);
}

let cashReportRoutesLoaded = false;
let cashReportLoading = false;

async function ensureCashReportRoutes(){
  if(cashReportRoutesLoaded && cashReportRoute.options.length > 1)return;

  const currentRoute = cashReportRoute.value;
  const routes = await api("/api/admin/routes");

  cashReportRoute.innerHTML =
    '<option value="">Todas las rutas</option>' +
    routes.map(r=>`<option value="${r.id}">${r.name}</option>`).join("");

  if(
    currentRoute &&
    routes.some(r=>String(r.id)===String(currentRoute))
  ){
    cashReportRoute.value=currentRoute;
  }

  cashReportRoutesLoaded=true;
}

async function reconcileCashReportHistory(){
  // Compatibilidad: ya no reconstruye movimientos históricos.
  await loadCashMovements(true);
}

async function loadCashMovements(force=false){
  if(cashReportLoading && !force)return;

  cashReportLoading=true;
  cashReportMessage.style.display="none";
  cashReportMessage.classList.remove("error");

  const button=document.getElementById("cashReportLoadButton");
  const originalText=button?.textContent || "🔎 Consultar";

  try{
    if(button){
      button.disabled=true;
      button.textContent="Consultando...";
    }

    await ensureCashReportRoutes();

    const params=new URLSearchParams();
    if(cashReportFrom.value)params.set("date_from",cashReportFrom.value);
    if(cashReportTo.value)params.set("date_to",cashReportTo.value);
    if(cashReportRoute.value)params.set("route_id",cashReportRoute.value);
    if(cashReportType.value)params.set("movement_type",cashReportType.value);

    const data=await api("/api/admin/cash/movements?"+params.toString());
    sutilReportData=data;
    const s=data.summary;

    cashReportSummary.innerHTML=
      reportMetricCard("Entradas",money(s.entries),"Movimientos de entrada","status-current")+
      reportMetricCard("Salidas",money(s.exits),"Movimientos de salida")+
      ((isSutilOwner()||sutilBaseShowToStaff) ? (
        reportMetricCard("Base adicionada",money(s.base_additions))+
        reportMetricCard("Base retirada",money(s.base_withdrawals))
      ) : "")+
      reportMetricCard("Saldo neto",money(s.net),"Entradas menos salidas",s.net<0?"status-overdue":"status-current")+
      reportMetricCard("Movimientos",String(s.count));

    cashMovementsTable.innerHTML=data.rows.length?data.rows.map(r=>`
      <tr>
        <td>
          <strong>${formatDateEs(r.business_date)}</strong>
          ${r.created_at ? `<br><small class="muted">Registrado: ${sutilLocalDateTime(r.created_at)}</small>` : ""}
        </td>
        <td>${r.route_name}</td>
        <td><strong>${r.movement_label}</strong>${r.counterpart_route_name?`<br><small>${r.direction==="out"?"Hacia":"Desde"} ${r.counterpart_route_name}</small>`:""}</td>
        <td>${r.payment_method==="pix"?"PIX":"Dinero"}</td>
        <td class="status-current">${r.direction==="in"?money(r.amount):"—"}</td>
        <td class="status-overdue">${r.direction==="out"?money(r.amount):"—"}</td>
        <td>${r.reason_category||"—"}</td>
        <td>${r.description||"—"}</td>
        <td>${r.actor_name}</td>
        <td>${r.transfer_code||r.payment_id||r.loan_id||r.expense_id||"—"}</td>
        <td>${r.cash_status==="closed"?"Cerrada":r.cash_status==="administrative"?"Histórica":"Abierta"}</td>
        <td>${["base_addition","base_withdrawal"].includes(r.movement_type)
          ? `<button class="btn secondary" type="button" onclick="editBaseFromReport(${r.id})">✏️ Editar</button>`
          : "—"}</td>
      </tr>`).join("")
      :'<tr><td colspan="12">No hay movimientos para los filtros seleccionados.</td></tr>';

  }catch(e){
    cashReportMessage.style.display="block";
    cashReportMessage.classList.add("error");
    cashReportMessage.textContent=e.message;
  }finally{
    cashReportLoading=false;
    if(button){
      button.disabled=false;
      button.textContent=originalText;
    }
  }
}

function compactMoney(value){
  return new Intl.NumberFormat("pt-BR",{
    notation:"compact",
    maximumFractionDigits:1
  }).format(Number(value || 0));
}

function reportMetricCard(title,value,subtext="",className=""){
  return `
    <div class="card report-metric-card">
      <div class="report-metric-title">${title}</div>
      <div class="metric report-metric-value ${className}">${value}</div>
      ${subtext ? `<div class="muted report-metric-subtext">${subtext}</div>` : ""}
    </div>`;
}

function reportInlineMetricCard(title,value,subtext="",className=""){
  // El importe completo se conserva. Si el número es largo, el bloque COBROS
  // muestra R$ en una línea propia para que nunca invada la tarjeta vecina.
  const printed=String(value ?? "");
  const parts=printed.match(/^(-?)R\$\s*(.+)$/);
  const integerDigits=parts ? parts[2].split(",")[0].replace(/\D/g,"").length : 0;
  const widthClass=integerDigits>=10 ? " cash-money-long cash-money-extreme" :
    integerDigits>=7 ? " cash-money-long cash-money-verylong" :
    integerDigits>=4 ? " cash-money-long" : "";
  const amountHtml=parts && integerDigits>=4
    ? `<span class="cash-money-currency">${parts[1]}R$</span> <span class="cash-money-digits">${parts[2]}</span>`
    : printed;
  return `
    <div class="card report-metric-card cash-summary-inline-card">
      <div class="report-metric-title">${title}</div>
      <div class="metric report-metric-value ${className}${widthClass}">${amountHtml}</div>
      ${subtext ? `<div class="muted report-metric-subtext">${subtext}</div>` : ""}
    </div>`;
}

function reportSummaryTotalCard(title,value,subtext="",className=""){
  return `
    <div class="card report-metric-card cash-summary-total-card">
      <div class="report-metric-title">${title}</div>
      <div class="metric report-metric-value ${className}">${value}</div>
      ${subtext ? `<div class="muted report-metric-subtext">${subtext}</div>` : ""}
    </div>`;
}

function cashSummaryFullDate(iso){
  const value=String(iso || (typeof cashDate!=="undefined" && cashDate?.value) || (typeof localTodayIso==="function" ? localTodayIso() : ""));
  try{
    if(typeof sutilFormatCollectionsFullDate==="function") return sutilFormatCollectionsFullDate(value);
  }catch(_){ }
  try{
    const parts=value.split("-").map(Number);
    const date=(parts.length===3 && parts.every(Number.isFinite)) ? new Date(parts[0],parts[1]-1,parts[2]) : new Date();
    return new Intl.DateTimeFormat("es-ES",{weekday:"long",day:"numeric",month:"long",year:"numeric"}).format(date);
  }catch(_){
    return value;
  }
}

function renderCashSummaryGroups(d){
  const openingTotal=Number(d.opening_cash||0)+Number(d.opening_pix||0);
  const collectedTotal=Number(d.cash_collected||0)+Number(d.pix_collected||0)+Number(d.renewal_collected||0);
  const baseAdditions=Number(d.base_additions_cash||0)+Number(d.base_additions_pix||0);
  const baseWithdrawals=Number(d.base_withdrawals_cash||0)+Number(d.base_withdrawals_pix||0);
  const fullDate=cashSummaryFullDate(d.business_date);
  return `
    <div class="cash-summary-group-title">Base del día · ${fullDate}</div>
    ${reportSummaryTotalCard("Base total",money(openingTotal),"Dinero + PIX")}
    <div class="cash-summary-inline-grid cols-2">
      ${reportInlineMetricCard("Dinero",money(d.opening_cash||0))}
      ${reportInlineMetricCard("PIX",money(d.opening_pix||0))}
    </div>
    ${(d.base_movements_visible!==false && (isSutilOwner()||sutilBaseShowToStaff) && Math.round(Math.abs(baseAdditions)*100)>0) ? reportMetricCard("Adiciones de base",money(baseAdditions)) : ""}
    ${(d.base_movements_visible!==false && (isSutilOwner()||sutilBaseShowToStaff) && Math.round(Math.abs(baseWithdrawals)*100)>0) ? reportMetricCard("Retiros de base",money(baseWithdrawals)) : ""}
    ${renderRouteTransferSummary(d)}
    <div class="cash-summary-group-title">Cobros del día</div>
    ${reportSummaryTotalCard("Cobro total",money(collectedTotal),"Dinero + PIX + Renovación","status-current")}
    <div class="cash-summary-inline-grid cols-3">
      ${reportInlineMetricCard("Dinero",money(d.cash_collected||0),"Confirmados","status-current")}
      ${reportInlineMetricCard("PIX + Banco",money(d.pix_collected||0),"Confirmados","status-current")}
      ${reportInlineMetricCard("Renovación",money(d.renewal_collected||0),"Saldo interno","status-current")}
    </div>
    <div class="cash-summary-context-note">PIX + Banco incluye cobros por PIX y transferencia bancaria del cliente. Renovación no aumenta las bases de Dinero ni PIX.</div>`;
}

/* FIX 12.15.140: el resultado físico debe proceder del cálculo del servidor,
   que incluye entradas y salidas efectivas una sola vez. Renovación es cobro
   contable, nunca ingreso de Dinero/PIX ni base heredable del siguiente día. */
function renderCashFinalTotal(d){
  const physical=Number(d.expected_total||0);
  const renewal=Number(d.renewal_collected||0);
  const informationalTotal=(Math.round(physical*100)+Math.round(renewal*100))/100;
  return `
    <div class="cash-summary-group-title cash-base-final-title">BASE TOTAL</div>
    <div class="card report-metric-card cash-base-final-card">
      <div class="report-metric-title">Total del día, incluyendo renovación</div>
      <div class="metric report-metric-value">${money(informationalTotal)}</div>
      <div class="cash-base-final-breakdown">
        <div><span>Base física · Dinero + PIX</span><strong>${money(physical)}</strong></div>
        <div><span>Renovación cobrada hoy</span><strong>${money(renewal)}</strong></div>
      </div>
      <div class="cash-base-final-note">Se incluyen cobros, movimientos de base y transferencias; los créditos y gastos se descuentan una sola vez. Renovación suma al total contable, pero no aumenta el efectivo, PIX ni la base heredable. Este importe no indica el saldo de renovación disponible si ya se aplicó a otro crédito.</div>
    </div>`;
}

function renderRouteTransferSummary(d){
  // Ocultar desgloses a empleados si el empresario lo desactivó (FIX 138).
  if(d.base_movements_visible===false || (!isSutilOwner()&&!sutilBaseShowToStaff))return "";
  const incoming=Number(d.transfers_in_cash||0)+Number(d.transfers_in_pix||0);
  const outgoing=Number(d.transfers_out_cash||0)+Number(d.transfers_out_pix||0);
  // Redondeo a centavos igual que Adiciones y Retiros: no se muestran importes R$ 0,00.
  const showIncoming=Math.round(Math.abs(incoming)*100)>0;
  const showOutgoing=Math.round(Math.abs(outgoing)*100)>0;
  if(!showIncoming&&!showOutgoing)return "";
  const gridColumns=showIncoming&&showOutgoing?"cols-2":"cols-1";
  return `
    <div class="cash-summary-group-title">TRANSFERENCIAS ENTRE RUTAS</div>
    <div class="cash-summary-inline-grid ${gridColumns}">
      ${showIncoming?reportInlineMetricCard("Recibidas (+)",money(incoming)):""}
      ${showOutgoing?reportInlineMetricCard("Enviadas (−)",money(outgoing)):""}
    </div>`;
}


function reportChartTheme(){
  const dark=document.body.getAttribute("data-sutil-theme")==="dark";
  return {
    text:dark?"#EAF0F8":"#3E4750",
    muted:dark?"#C3CDDC":"#68717C",
    grid:dark?"#6A7890":"#DFE4E9",
    principal:dark?"#67B7FF":"#1769AA",
    collected:dark?"#6FE0A5":"#148343",
    interest:dark?"#FFB85C":"#A66C00"
  };
}

function prepareCanvas(canvas,preferredHeight=390){
  const rect=canvas.getBoundingClientRect();
  const ratio=Math.max(1,Math.min(3,window.devicePixelRatio||1));
  const parentWidth=canvas.parentElement?.clientWidth||0;
  const viewportWidth=window.innerWidth||document.documentElement.clientWidth||360;
  const isMobile=viewportWidth<=760;
  // En móvil usamos el ancho REAL disponible; no se fuerza un lienzo de escritorio.
  const measuredWidth=Math.max(0,Number(rect.width||0),Number(parentWidth||0));
  const cssWidth=isMobile
    ? Math.max(280,Math.min(measuredWidth||viewportWidth-32,viewportWidth-24))
    : Math.max(640,measuredWidth||720);
  let cssHeight=Math.max(260,Number(preferredHeight||390));
  if(isMobile){
    if(canvas.id==="routeReportChart") cssHeight=Math.min(560,Math.max(340,110+Math.max(1,(sutilRouteReportState?.routes||[]).length)*48));
    else if(canvas.id==="annualReportChart") cssHeight=350;
    else cssHeight=330;
  }
  canvas.style.height=cssHeight+"px";
  canvas.width=Math.max(1,Math.floor(cssWidth*ratio));
  canvas.height=Math.max(1,Math.floor(cssHeight*ratio));
  const ctx=canvas.getContext("2d");
  ctx.setTransform(ratio,0,0,ratio,0,0);
  return {ctx,width:cssWidth,height:cssHeight,isMobile};
}

function drawLineChart(canvas, rows){
  const {ctx,width,height,isMobile}=prepareCanvas(canvas);
  ctx.clearRect(0,0,width,height);

  const pad=isMobile ? {left:54,right:14,top:40,bottom:48} : {left:65,right:25,top:25,bottom:55};
  const chartW = width-pad.left-pad.right;
  const chartH = height-pad.top-pad.bottom;
  const values = rows.flatMap(r=>[
    Number(r.principal||0),
    Number(r.collected||0),
    Number(r.interest_collected||0)
  ]);
  const max = Math.max(1,...values) * 1.12;

  const theme=reportChartTheme();
  ctx.strokeStyle = theme.grid;
  ctx.fillStyle = theme.muted;
  ctx.font = isMobile ? "10px Arial" : "12px Arial";
  ctx.lineWidth = 1;

  for(let i=0;i<=5;i++){
    const y = pad.top + chartH*(i/5);
    const value = max*(1-i/5);
    ctx.beginPath();
    ctx.moveTo(pad.left,y);
    ctx.lineTo(width-pad.right,y);
    ctx.stroke();
    ctx.fillText(compactMoney(value),5,y+4);
  }

  const series = [
    {key:"principal",label:"Crédito realizado"},
    {key:"collected",label:"Cobrado"},
    {key:"interest_collected",label:"Interés"}
  ];

  series.forEach((serie,seriesIndex)=>{
    ctx.lineWidth = seriesIndex===1 ? 3 : 2;
    ctx.strokeStyle = [theme.principal,theme.collected,theme.interest][seriesIndex];
    ctx.fillStyle = ctx.strokeStyle;
    ctx.beginPath();

    rows.forEach((row,index)=>{
      const x = rows.length===1
        ? pad.left+chartW/2
        : pad.left+chartW*(index/(rows.length-1));
      const y = pad.top+chartH-(Number(row[serie.key]||0)/max)*chartH;
      if(index===0)ctx.moveTo(x,y); else ctx.lineTo(x,y);
      ctx.beginPath();
      ctx.arc(x,y,3,0,Math.PI*2);
      ctx.fill();
      if(index===0){
        ctx.beginPath();
        ctx.moveTo(x,y);
      }
    });

    ctx.beginPath();
    rows.forEach((row,index)=>{
      const x = rows.length===1
        ? pad.left+chartW/2
        : pad.left+chartW*(index/(rows.length-1));
      const y = pad.top+chartH-(Number(row[serie.key]||0)/max)*chartH;
      if(index===0)ctx.moveTo(x,y); else ctx.lineTo(x,y);
    });
    ctx.stroke();
  });

  ctx.fillStyle=theme.text;
  rows.forEach((row,index)=>{
    const x=rows.length===1?pad.left+chartW/2:pad.left+chartW*(index/(rows.length-1));
    const monthLabel=isMobile ? row.month.slice(5) : row.month.slice(5)+"/"+row.month.slice(0,4);
    const mw=ctx.measureText(monthLabel).width;
    ctx.fillText(monthLabel,x-mw/2,height-20);
  });

  series.forEach((serie,index)=>{
    const legendGap=isMobile ? 92 : 135;
    const legendX=pad.left+index*legendGap;
    ctx.fillStyle=[theme.principal,theme.collected,theme.interest][index];
    ctx.fillRect(legendX,8,12,4);
    ctx.fillStyle=theme.text;
    ctx.font=isMobile?"10px Arial":"12px Arial";
    const label=isMobile && serie.label==="Crédito realizado" ? "Crédito" : serie.label;
    ctx.fillText(label,legendX+17,14);
  });
}

function drawRouteBars(canvas,rows){
  if(!canvas)return;
  const desiredHeight=Math.min(560,Math.max(320,110+Math.max(1,rows?.length||0)*46));
  const {ctx,width,height,isMobile}=prepareCanvas(canvas,desiredHeight);
  ctx.clearRect(0,0,width,height);
  const theme=reportChartTheme();
  if(!rows?.length){ctx.fillStyle=theme.muted;ctx.font="15px Arial";ctx.fillText("No hay datos de rutas para este período.",20,42);return;}
  const pad=isMobile?{left:44,right:66,top:18,bottom:18}:{left:52,right:92,top:24,bottom:24};
  const chartW=Math.max(120,width-pad.left-pad.right),chartH=Math.max(180,height-pad.top-pad.bottom);
  const values=rows.map(r=>Number(r[sutilRouteReportMetric]||0));
  const minValue=Math.min(0,...values),maxValue=Math.max(0,...values),scaleMax=Math.max(1,Math.abs(minValue),Math.abs(maxValue))*1.08;
  const zeroX=minValue<0?pad.left+chartW*(Math.abs(minValue)/(Math.abs(minValue)+Math.max(0,maxValue)||1)):pad.left;
  for(let i=0;i<=4;i++){const x=pad.left+chartW*(i/4);ctx.strokeStyle=theme.grid;ctx.globalAlpha=.22;ctx.beginPath();ctx.moveTo(x,pad.top);ctx.lineTo(x,height-pad.bottom);ctx.stroke();ctx.globalAlpha=1;}
  const rowH=chartH/rows.length,barH=Math.min(24,Math.max(12,rowH*.46));
  rows.forEach((row,index)=>{
    const value=values[index],y=pad.top+rowH*index+rowH/2,color=getRouteReportColor(index);
    ctx.fillStyle=color;ctx.beginPath();ctx.arc(20,y,13,0,Math.PI*2);ctx.fill();
    ctx.fillStyle="#fff";ctx.font="800 11px Arial";const n=String(index+1),nm=ctx.measureText(n);ctx.fillText(n,20-nm.width/2,y+4);
    const len=(Math.abs(value)/scaleMax)*chartW,x=value>=0?zeroX:zeroX-len;
    ctx.fillStyle=color;routeReportRoundRect(ctx,x,y-barH/2,len,barH,barH/2);ctx.fill();
    ctx.fillStyle=theme.text;ctx.font=isMobile?"800 10px Arial":"800 11px Arial";const txt=money(value),m=ctx.measureText(txt);const tx=value>=0?Math.min(width-m.width-3,x+len+6):Math.max(3,x-m.width-6);ctx.fillText(txt,tx,y+4);
    if(index<rows.length-1){ctx.strokeStyle=theme.grid;ctx.globalAlpha=.10;ctx.beginPath();ctx.moveTo(pad.left,y+rowH/2);ctx.lineTo(width-pad.right,y+rowH/2);ctx.stroke();ctx.globalAlpha=1;}
  });
  if(minValue<0){ctx.strokeStyle=theme.muted;ctx.globalAlpha=.4;ctx.beginPath();ctx.moveTo(zeroX,pad.top);ctx.lineTo(zeroX,height-pad.bottom);ctx.stroke();ctx.globalAlpha=1;}
}

let chartZoomModalState={scale:1,x:0,y:0,minScale:1,maxScale:5,startScale:1,startX:0,startY:0,startDistance:0,pointers:new Map()};
function getChartZoomElements(){
  return {
    modal:document.getElementById('reportChartZoomModal'),
    title:document.getElementById('reportChartZoomTitle'),
    viewport:document.getElementById('reportChartZoomViewport'),
    inner:document.getElementById('reportChartZoomInner'),
    image:document.getElementById('reportChartZoomImage')
  };
}
function applyChartZoomModalTransform(){
  const {inner}=getChartZoomElements();
  if(!inner)return;
  inner.style.transform=`translate(calc(-50% + ${chartZoomModalState.x}px), calc(-50% + ${chartZoomModalState.y}px)) scale(${chartZoomModalState.scale})`;
}
function resetChartZoomModal(){
  chartZoomModalState.scale=1;
  chartZoomModalState.x=0;
  chartZoomModalState.y=0;
  chartZoomModalState.pointers.clear();
  const {inner}=getChartZoomElements();
  if(inner) inner.classList.remove('dragging');
  applyChartZoomModalTransform();
}
function closeChartZoomModal(){
  const {modal,image}=getChartZoomElements();
  if(!modal) return;
  modal.style.display='none';
  modal.setAttribute('aria-hidden','true');
  document.body.style.overflow='';
  if(image) image.removeAttribute('src');
  resetChartZoomModal();
}
function openChartZoomModal(canvasId,title){
  const canvas=document.getElementById(canvasId);
  if(!canvas) return;
  const {modal,image,title:ttl}=getChartZoomElements();
  if(!modal || !image) return;
  if(ttl) ttl.textContent=title||'Gráfico ampliado';
  image.src=canvas.toDataURL('image/png');
  modal.style.display='flex';
  modal.setAttribute('aria-hidden','false');
  document.body.style.overflow='hidden';
  resetChartZoomModal();
}
function zoomChartModalBy(multiplier){
  chartZoomModalState.scale=Math.min(chartZoomModalState.maxScale,Math.max(chartZoomModalState.minScale,chartZoomModalState.scale*multiplier));
  if(chartZoomModalState.scale<=1.01){chartZoomModalState.scale=1;chartZoomModalState.x=0;chartZoomModalState.y=0;}
  applyChartZoomModalTransform();
}
function chartZoomDistance(a,b){ return Math.hypot(a.x-b.x,a.y-b.y); }
function chartZoomMidpoint(a,b){ return {x:(a.x+b.x)/2,y:(a.y+b.y)/2}; }
function initChartZoomModal(){
  const {modal,viewport,inner}=getChartZoomElements();
  if(!modal || !viewport || !inner || viewport.dataset.zoomReady==='1') return;
  viewport.dataset.zoomReady='1';
  modal.addEventListener('click',(e)=>{ if(e.target===modal) closeChartZoomModal(); });
  document.addEventListener('keydown',(e)=>{ if(e.key==='Escape' && modal.style.display==='flex') closeChartZoomModal(); });
  viewport.addEventListener('wheel',(e)=>{ if(modal.style.display!=='flex') return; e.preventDefault(); zoomChartModalBy(e.deltaY<0?1.12:1/1.12); },{passive:false});
  const onPointerDown=(e)=>{
    if(modal.style.display!=='flex') return;
    viewport.setPointerCapture?.(e.pointerId);
    chartZoomModalState.pointers.set(e.pointerId,{x:e.clientX,y:e.clientY});
    if(chartZoomModalState.pointers.size===1){
      chartZoomModalState.startX=e.clientX-chartZoomModalState.x;
      chartZoomModalState.startY=e.clientY-chartZoomModalState.y;
      inner.classList.add('dragging');
    }else if(chartZoomModalState.pointers.size===2){
      const [a,b]=[...chartZoomModalState.pointers.values()];
      chartZoomModalState.startDistance=chartZoomDistance(a,b)||1;
      chartZoomModalState.startScale=chartZoomModalState.scale;
    }
  };
  const onPointerMove=(e)=>{
    if(!chartZoomModalState.pointers.has(e.pointerId) || modal.style.display!=='flex') return;
    chartZoomModalState.pointers.set(e.pointerId,{x:e.clientX,y:e.clientY});
    if(chartZoomModalState.pointers.size===2){
      const [a,b]=[...chartZoomModalState.pointers.values()];
      const nextDistance=chartZoomDistance(a,b)||1;
      chartZoomModalState.scale=Math.min(chartZoomModalState.maxScale,Math.max(chartZoomModalState.minScale,chartZoomModalState.startScale*(nextDistance/chartZoomModalState.startDistance)));
      applyChartZoomModalTransform();
      return;
    }
    if(chartZoomModalState.scale>1 && chartZoomModalState.pointers.size===1){
      chartZoomModalState.x=e.clientX-chartZoomModalState.startX;
      chartZoomModalState.y=e.clientY-chartZoomModalState.startY;
      applyChartZoomModalTransform();
    }
  };
  const onPointerUp=(e)=>{
    chartZoomModalState.pointers.delete(e.pointerId);
    if(chartZoomModalState.pointers.size===0){ inner.classList.remove('dragging'); }
    if(chartZoomModalState.scale<=1.01){ chartZoomModalState.scale=1; chartZoomModalState.x=0; chartZoomModalState.y=0; }
    applyChartZoomModalTransform();
  };
  viewport.addEventListener('pointerdown',onPointerDown);
  viewport.addEventListener('pointermove',onPointerMove);
  viewport.addEventListener('pointerup',onPointerUp);
  viewport.addEventListener('pointercancel',onPointerUp);
}

let sutilRouteReportState={routes:[],summary:null,filters:null};
let sutilRouteReportMetric="principal";
const sutilRoutePalette=["#5b8def","#4dd0a8","#ffb547","#ff6b6b","#8f7cf7","#2ec7ff","#ff8ab5","#7fd45a","#00bfa5","#f7768e","#ffd166","#6c8cff"];
function getRouteReportColor(index){return sutilRoutePalette[index % sutilRoutePalette.length];}
function getRouteReportSelectedRouteName(){
  try{
    const select=document.getElementById("reportRoute");
    if(!select)return "Todas las rutas";
    const option=select.options[select.selectedIndex];
    return option && option.text ? option.text : "Todas las rutas";
  }catch(_){return "Todas las rutas";}
}
function routeMetricLabel(key){return {principal:"Crédito realizado",collected:"Cobrado",portfolio_balance:"Cartera",net_profit:"Utilidad"}[key]||"Crédito realizado";}
function setRouteReportMetric(metric,button){
  sutilRouteReportMetric=metric;
  document.querySelectorAll("[data-route-metric]").forEach(b=>b.classList.remove("active-route-metric"));
  if(button)button.classList.add("active-route-metric");
  drawRouteBars(document.getElementById("routeReportChart"),sutilRouteReportState.routes||[]);
  renderRouteMetricSummary(sutilRouteReportState.routes||[]);
}
function renderRouteMetricSummary(rows){
  const box=document.getElementById("routeMetricSummary"),caption=document.getElementById("routeChartCaption");
  if(!box)return;
  if(!rows?.length){box.innerHTML="";if(caption)caption.innerHTML="";return;}
  const values=rows.map(r=>Number(r[sutilRouteReportMetric]||0));
  const total=values.reduce((a,b)=>a+b,0),avg=total/Math.max(1,values.length);
  let maxIndex=0;values.forEach((v,i)=>{if(v>values[maxIndex])maxIndex=i;});
  const best=rows[maxIndex],label=routeMetricLabel(sutilRouteReportMetric);
  box.innerHTML=`<div class="route-summary-item"><span>Total</span><strong>${money(total)}</strong><small>${label}</small></div><div class="route-summary-item"><span>Promedio</span><strong>${money(avg)}</strong><small>${rows.length} ruta(s)</small></div><div class="route-summary-item"><span>Mayor valor</span><strong>${money(values[maxIndex])}</strong><small>#${maxIndex+1} · ${escapeHtml(best?.route_name||"—")}</small></div>`;
  if(caption)caption.innerHTML=`<span><strong>${label}</strong> · ${rows.length} ruta(s)</span><span>Mayor: <strong>#${maxIndex+1} ${escapeHtml(best?.route_name||"—")}</strong></span>`;
}
function renderRouteReportLegend(rows){
  const box=document.getElementById("routeReportLegend"),context=document.getElementById("routeReportContext");
  if(context){const from=document.getElementById("reportDateFrom")?.value||"—",to=document.getElementById("reportDateTo")?.value||"—";context.textContent=`Comparación por ruta · ${from} a ${to} · ${getRouteReportSelectedRouteName()}`;}
  if(!box)return;
  if(!rows?.length){box.innerHTML='<div class="muted">No hay rutas para mostrar en este período.</div>';renderRouteMetricSummary([]);return;}
  box.innerHTML=rows.map((row,index)=>{const color=getRouteReportColor(index);return `<div class="route-report-legend-item"><span class="route-report-legend-badge" style="background:${color}">${index+1}</span><div><div class="route-report-legend-name">${escapeHtml(row.route_name||"—")}</div><div class="route-report-legend-sub">Crédito ${money(row.principal)} · Cobrado ${money(row.collected)} · Cartera ${money(row.portfolio_balance)}</div></div></div>`;}).join("");
  renderRouteMetricSummary(rows);
}
function routeReportRoundRect(ctx,x,y,w,h,r){
  const ww=Math.max(0,Number(w)||0), hh=Math.max(0,Number(h)||0);
  const rr=Math.max(0,Math.min(Number(r)||0,ww/2,hh/2));
  ctx.beginPath();
  if(ww===0||hh===0){ctx.rect(x,y,ww,hh);ctx.closePath();return;}
  ctx.moveTo(x+rr,y);ctx.arcTo(x+ww,y,x+ww,y+hh,rr);ctx.arcTo(x+ww,y+hh,x,y+hh,rr);ctx.arcTo(x,y+hh,x,y,rr);ctx.arcTo(x,y,x+ww,y,rr);ctx.closePath();
}
function routeReportCircle(ctx,x,y,r){ ctx.beginPath(); ctx.arc(x,y,r,0,Math.PI*2); ctx.closePath(); }
function routeReportCenterText(ctx,text,x,y){ const m=ctx.measureText(text); ctx.fillText(text,x-(m.width/2),y); }
function downloadBlob(blob,filename){ const url=URL.createObjectURL(blob); const a=document.createElement("a"); a.href=url; a.download=filename; document.body.appendChild(a); a.click(); a.remove(); setTimeout(()=>URL.revokeObjectURL(url),1000); }
async function routeReportSnapshotBlob(){
  const chart=document.getElementById("routeReportChart");
  if(!chart || !sutilRouteReportState.routes?.length)throw new Error("Consulta primero el reporte por ruta.");
  const rows=sutilRouteReportState.routes;
  const cols=rows.length>6?1:2;
  const legendRows=Math.ceil(rows.length/cols);
  const width=1400, chartHeight=520, legendHeight=Math.max(150,legendRows*108), height=260+chartHeight+legendHeight+80;
  const canvas=document.createElement("canvas"); canvas.width=width; canvas.height=height;
  const ctx=canvas.getContext("2d");
  ctx.fillStyle="#f4f7fb"; ctx.fillRect(0,0,width,height);
  ctx.fillStyle="#1f2c3b"; ctx.font="700 42px Arial"; ctx.fillText("Rendimiento por ruta",70,78);
  ctx.font="22px Arial"; ctx.fillStyle="#5e6a76";
  const from=document.getElementById("reportDateFrom")?.value||"—";
  const to=document.getElementById("reportDateTo")?.value||"—";
  ctx.fillText(`Período: ${from} a ${to}`,70,118);
  ctx.fillText(`Filtro: ${getRouteReportSelectedRouteName()}`,70,148);
  ctx.fillStyle="#1f2c3b";ctx.font="700 22px Arial";ctx.fillText(`Métrica: ${routeMetricLabel(sutilRouteReportMetric)}`,70,188);
  ctx.fillStyle="#ffffff"; routeReportRoundRect(ctx,50,210,width-100,chartHeight,24); ctx.fill();
  ctx.drawImage(chart,70,230,width-140,chartHeight-40);
  const legendStartY=230+chartHeight+20; ctx.fillStyle="#1f2c3b"; ctx.font="700 28px Arial"; ctx.fillText("Rutas",70,legendStartY);
  const colWidth=(width-140-(cols-1)*24)/cols;
  rows.forEach((row,index)=>{
    const col=index % cols; const r=Math.floor(index/cols); const x=70 + col*(colWidth+24); const y=legendStartY+28+r*96;
    ctx.fillStyle="#ffffff"; routeReportRoundRect(ctx,x,y,colWidth,76,18); ctx.fill();
    const color=getRouteReportColor(index); ctx.fillStyle=color; routeReportCircle(ctx,x+28,y+28,16); ctx.fill();
    ctx.fillStyle="#ffffff"; ctx.font="700 16px Arial"; routeReportCenterText(ctx,String(index+1),x+28,y+34);
    ctx.fillStyle="#1f2c3b"; ctx.font="700 20px Arial"; ctx.fillText(String(row.route_name).slice(0,30),x+54,y+25);
    ctx.font="18px Arial"; ctx.fillStyle="#5e6a76"; ctx.fillText(`Crédito ${money(row.principal)}`,x+54,y+49); ctx.fillText(`Cobrado ${money(row.collected)} · Cartera ${money(row.portfolio_balance)}`,x+54,y+70);
  });
  ctx.fillStyle="#7b8794"; ctx.font="16px Arial"; ctx.fillText(`Generado: ${new Date().toLocaleString()}`,70,height-28);
  return await new Promise((resolve,reject)=>canvas.toBlob(b=>b?resolve(b):reject(new Error("No fue posible crear la imagen del reporte.")),"image/png"));
}
async function downloadRouteReportImage(){ try{ const blob=await routeReportSnapshotBlob(); downloadBlob(blob,`reporte_rutas_${Date.now()}.png`); }catch(e){ alert(e.message||String(e)); } }
async function shareRouteReport(){ try{ const blob=await routeReportSnapshotBlob(); const file=new File([blob],`reporte_rutas_${Date.now()}.png`,{type:"image/png"}); if(navigator.canShare && navigator.canShare({files:[file]}) && navigator.share){ await navigator.share({files:[file],title:"Reporte por ruta",text:"Reporte por ruta generado en Sutil"}); } else { downloadBlob(blob,file.name); alert("El menú para compartir no estuvo disponible; se descargó la imagen del reporte."); } }catch(e){ alert(e.message||String(e)); } }
async function printRouteReportPdf(){
  try{
    const png=await routeReportSnapshotBlob();
    const bitmap=await createImageBitmap(png);
    const canvas=document.createElement("canvas");
    canvas.width=bitmap.width;canvas.height=bitmap.height;
    canvas.getContext("2d").drawImage(bitmap,0,0);
    if(bitmap.close)bitmap.close();
    const pdf=sutilReceiptPdfBlob(canvas);
    downloadBlob(pdf,`reporte_rutas_${Date.now()}.pdf`);
  }catch(e){alert(e.message||String(e));}
}


function sutilPdfLocale(){
  const lang=String(accessLanguageCode||document.documentElement.lang||"es").toLowerCase();
  return lang.startsWith("pt")?"pt":lang.startsWith("en")?"en":"es";
}
function sutilCashSummaryPdfText(){
  const l=sutilPdfLocale();
  return ({
    es:{title:"Resumen de caja",route:"Ruta",date:"Fecha",base:"Base anterior",collections:"Cobros Dinero + PIX",renewals:"Renovaciones",loans:"Créditos entregados",expenses:"Gastos",total:"Base total",cash:"Dinero",pix:"PIX",dayExpenses:"Gastos del día",dayLoans:"Créditos del día",noneExpenses:"Sin gastos registrados",noneLoans:"Sin créditos entregados",generated:"Generado"},
    pt:{title:"Resumo de caixa",route:"Rota",date:"Data",base:"Base anterior",collections:"Cobranças Dinheiro + PIX",renewals:"Renovações",loans:"Créditos entregues",expenses:"Despesas",total:"Base total",cash:"Dinheiro",pix:"PIX",dayExpenses:"Despesas do dia",dayLoans:"Créditos do dia",noneExpenses:"Sem despesas registradas",noneLoans:"Sem créditos entregues",generated:"Gerado"},
    en:{title:"Cash summary",route:"Route",date:"Date",base:"Previous balance",collections:"Cash + PIX collections",renewals:"Renewals",loans:"Loans disbursed",expenses:"Expenses",total:"Total balance",cash:"Cash",pix:"PIX",dayExpenses:"Daily expenses",dayLoans:"Daily loans",noneExpenses:"No expenses recorded",noneLoans:"No loans disbursed",generated:"Generated"}
  })[l];
}
function sutilCanvasRoundedRect(ctx,x,y,w,h,r){
  const rr=Math.min(r,w/2,h/2);ctx.beginPath();ctx.moveTo(x+rr,y);ctx.arcTo(x+w,y,x+w,y+h,rr);ctx.arcTo(x+w,y+h,x,y+h,rr);ctx.arcTo(x,y+h,x,y,rr);ctx.arcTo(x,y,x+w,y,rr);ctx.closePath();
}
function sutilCanvasFitText(ctx,text,maxWidth,startSize=25,minSize=14,weight="700"){
  let size=startSize;const value=String(text??"—");
  while(size>minSize){ctx.font=`${weight} ${size}px Arial`;if(ctx.measureText(value).width<=maxWidth)break;size-=1;}
  return value;
}
function sutilCashSummaryPdfCanvas(){
  const d=currentCashReceiptSnapshot;if(!d)throw new Error("Consulta primero una caja.");
  const t=sutilCashSummaryPdfText(),canvas=document.createElement("canvas");canvas.width=1200;canvas.height=1550;const c=canvas.getContext("2d");
  c.fillStyle="#f4f7fb";c.fillRect(0,0,1200,1550);c.fillStyle="#203248";c.font="700 46px Arial";c.fillText(t.title,70,82);
  c.font="21px Arial";c.fillStyle="#667589";c.fillText(`${t.route}: ${String(d.route_name||cashRoute?.selectedOptions?.[0]?.textContent||"—")}`,70,122);c.fillText(`${t.date}: ${formatDateEs(d.business_date||cashDate?.value||"")}`,70,154);
  const base=Number(d.opening_cash||0)+Number(d.opening_pix||0),collections=Number(d.cash_collected||0)+Number(d.pix_collected||0),renewals=Number(d.renewal_collected||0),loans=Number(d.loans_disbursed||0),expenses=Number(d.total_expenses||0);
  const rows=[[t.base,base,"normal"],[t.collections,collections,"in"],[t.renewals,renewals,"in"],[t.loans,loans,"out"],[t.expenses,expenses,"out"],[t.total,Number(d.expected_total||0),"total"]];
  let y=205;rows.forEach(([label,value,type])=>{c.fillStyle=type==="total"?"#e8f0f8":"#ffffff";sutilCanvasRoundedRect(c,65,y,1070,type==="total"?105:88,18);c.fill();c.fillStyle="#405168";c.font="700 23px Arial";c.fillText(label,92,y+39);c.textAlign="right";c.fillStyle=type==="in"?"#148a4b":type==="out"?"#b33a3a":"#203248";c.font=type==="total"?"700 35px Arial":"700 30px Arial";c.fillText(money(value),1105,y+(type==="total"?66:54));c.textAlign="left";y+=type==="total"?120:100;});
  c.fillStyle="#203248";c.font="700 26px Arial";c.fillText(`${t.cash}: ${money(d.expected_cash||0)}   ·   ${t.pix}: ${money(d.expected_pix||0)}`,78,y+5);y+=55;
  const drawList=(title,items,empty)=>{c.fillStyle="#203248";c.font="700 28px Arial";c.fillText(title,70,y);y+=18;c.fillStyle="#ffffff";sutilCanvasRoundedRect(c,65,y,1070,Math.max(110,Math.min(7,items.length||1)*54+50),18);c.fill();y+=38;if(items.length){items.slice(0,7).forEach(row=>{c.fillStyle="#405168";c.font="21px Arial";const label=sutilCanvasFitText(c,row.label||row.client_name||"—",700,21,14,"400");c.fillText(label,92,y);c.textAlign="right";c.fillStyle="#203248";c.font="700 21px Arial";c.fillText(money(row.amount||0),1100,y);c.textAlign="left";y+=50;});if(items.length>7){c.fillStyle="#7a8794";c.font="18px Arial";c.fillText(`+ ${items.length-7}`,92,y);y+=38;}}else{c.fillStyle="#7a8794";c.font="20px Arial";c.fillText(empty,92,y);y+=48;}y+=32;};
  drawList(t.dayExpenses,Array.isArray(d.daily_expenses)?d.daily_expenses:[],t.noneExpenses);drawList(t.dayLoans,Array.isArray(d.daily_loans)?d.daily_loans:[],t.noneLoans);
  c.fillStyle="#7a8794";c.font="17px Arial";c.fillText(`${t.generated}: ${new Date().toLocaleString()}`,70,1510);return canvas;
}
async function downloadCashSummaryPdf(){
  try{const canvas=sutilCashSummaryPdfCanvas();downloadBlob(sutilReceiptPdfBlob(canvas),`Sutil_resumen_caja_${String(cashDate?.value||Date.now()).replace(/[^0-9-]/g,"")}.pdf`);}catch(e){alert(e.message||String(e));}
}

function sutilAnalysisPdfText(){
  const l=sutilPdfLocale();
  return ({
    es:{overview:"Resumen general",portfolio:"Cartera",expenses:"Gastos y utilidad",cash:"Disponibilidad",period:"Período",route:"Ruta",generated:"Generado",all:"Todas las rutas",client:"Cliente",code:"Código",collected:"Cobrado",balance:"Saldo",status:"Estado",category:"Categoría",value:"Valor",share:"Participación",month:"Mes",principal:"Crédito",profit:"Ganancia",expense:"Gastos",net:"Utilidad"},
    pt:{overview:"Resumo geral",portfolio:"Carteira",expenses:"Despesas e lucro",cash:"Disponibilidade",period:"Período",route:"Rota",generated:"Gerado",all:"Todas as rotas",client:"Cliente",code:"Código",collected:"Arrecadado",balance:"Saldo",status:"Status",category:"Categoria",value:"Valor",share:"Participação",month:"Mês",principal:"Crédito",profit:"Lucro",expense:"Despesas",net:"Lucro líquido"},
    en:{overview:"General summary",portfolio:"Portfolio",expenses:"Expenses and profit",cash:"Availability",period:"Period",route:"Route",generated:"Generated",all:"All routes",client:"Client",code:"Code",collected:"Collected",balance:"Balance",status:"Status",category:"Category",value:"Value",share:"Share",month:"Month",principal:"Loans",profit:"Profit",expense:"Expenses",net:"Net profit"}
  })[l];
}
function sutilAnalysisReportCanvas(paneId){
  const data=sutilAnalysisReportData;if(!data?.summary)throw new Error("Actualiza primero el Centro de reportes.");
  const t=sutilAnalysisPdfText(),s=data.summary,canvas=document.createElement("canvas");canvas.width=1400;canvas.height=1800;const c=canvas.getContext("2d");c.fillStyle="#f4f7fb";c.fillRect(0,0,1400,1800);
  const title=paneId==="reportPortfolioPane"?t.portfolio:paneId==="reportExpensesPane"?t.expenses:paneId==="reportCashPane"?t.cash:t.overview;
  c.fillStyle="#203248";c.font="700 46px Arial";c.fillText(title,70,80);c.font="21px Arial";c.fillStyle="#667589";c.fillText(`${t.period}: ${reportDateFrom?.value||"—"} — ${reportDateTo?.value||"—"}`,70,120);c.fillText(`${t.route}: ${reportRoute?.selectedOptions?.[0]?.textContent||t.all}`,70,151);
  let metrics=[];
  if(paneId==="reportPortfolioPane")metrics=[["Total contratado",s.total_contracted],["Cartera pendiente",s.portfolio_balance],["Cartera vencida",s.overdue_balance],["Créditos pagados",s.paid_loans,true],["Interés generado",s.interest_generated],["Tasa de recaudo",`${s.collection_rate||0}%`,true]];
  else if(paneId==="reportExpensesPane")metrics=[["Ganancia cobrada",s.interest_collected],["Gastos registrados",s.expenses],["Utilidad neta",s.net_profit],["Retiros de ganancia",s.profit_withdrawals]];
  else if(paneId==="reportCashPane")metrics=[["Dinero operativo",s.available_cash],["PIX operativo",s.available_pix],["Base operativa disponible",s.available_total],["Adiciones de base",s.base_additions],["Retiros de base",s.base_withdrawals],["Transferido entre rutas",s.route_transfers_out]];
  else metrics=[["Crédito realizado",s.total_principal],["Dinero cobrado",s.total_collected],["Ganancia cobrada",s.interest_collected],["Gastos",s.expenses],["Utilidad neta",s.net_profit],["Crecimiento mensual",s.growth_percent==null?"—":`${s.growth_percent>=0?"+":""}${s.growth_percent}%`,true]];
  let y=200;metrics.filter(row=>row[1]!==undefined&&row[1]!==null).forEach((row,i)=>{const col=i%2,rr=Math.floor(i/2),x=70+col*635,yy=y+rr*130;c.fillStyle="#ffffff";sutilCanvasRoundedRect(c,x,yy,610,108,18);c.fill();c.fillStyle="#667589";c.font="19px Arial";c.fillText(String(row[0]),x+22,yy+34);c.fillStyle="#203248";c.font="700 31px Arial";const value=row[2]?String(row[1]):money(row[1]);c.fillText(sutilCanvasFitText(c,value,560,31,18,"700"),x+22,yy+76);});
  y+=Math.ceil(metrics.length/2)*130+20;
  const line=(cols,widths)=>{let x=70;cols.forEach((val,i)=>{c.fillStyle=i===0?"#203248":"#405168";c.font=i===0?"700 18px Arial":"18px Arial";const txt=sutilCanvasFitText(c,val,widths[i]-16,18,12,i===0?"700":"400");c.fillText(txt,x+6,y);x+=widths[i];});y+=42;c.strokeStyle="#dde5ee";c.beginPath();c.moveTo(70,y-27);c.lineTo(1330,y-27);c.stroke();};
  if(paneId==="reportPortfolioPane"){
    c.fillStyle="#203248";c.font="700 28px Arial";c.fillText("Clientes",70,y);y+=38;(data.top_clients||[]).slice(0,16).forEach(r=>line([r.client_name||"—",r.client_code||"—",money(r.collected||0),money(r.current_balance||0),r.is_overdue?"MOROSO":"AL DÍA"],[480,180,210,220,170]));
  }else if(paneId==="reportExpensesPane"){
    c.fillStyle="#203248";c.font="700 28px Arial";c.fillText(t.category,70,y);y+=38;const total=Number(s.expenses||0);(data.expenses_by_category||[]).slice(0,18).forEach(r=>line([r.category||"—",money(r.amount||0),total>0?`${(Number(r.amount||0)/total*100).toFixed(1)}%`:"0.0%"],[760,300,200]));
  }else if(paneId==="reportOverviewPane" || !paneId){
    c.fillStyle="#203248";c.font="700 28px Arial";c.fillText("Detalle mensual",70,y);y+=38;(data.monthly||[]).slice(0,12).forEach(r=>line([String(r.month||"—"),money(r.principal||0),money(r.collected||0),money(r.interest_collected||0),money(r.expenses||0),money(r.net_profit||0)],[180,220,220,220,200,220]));
  }
  c.fillStyle="#7a8794";c.font="17px Arial";c.fillText(`${t.generated}: ${new Date().toLocaleString()}`,70,1760);return canvas;
}
async function downloadCurrentAnalysisPdf(){
  try{
    const pane=sutilCurrentReportPaneId||"reportOverviewPane";
    if(pane==="reportRoutesPane")return await printRouteReportPdf();
    if(pane==="reportAnnualPane")return await downloadAnnualReportPdf();
    const canvas=sutilAnalysisReportCanvas(pane);downloadBlob(sutilReceiptPdfBlob(canvas),`Sutil_reporte_${pane.replace(/Pane$/i,"")}_${Date.now()}.pdf`);
  }catch(e){alert(e.message||String(e));}
}

let sutilReportData=null;
let sutilAnalysisReportData=null;
let sutilCurrentReportPaneId="";

function showReportPane(paneId,button){
  sutilCurrentReportPaneId=paneId||"";
  document.querySelectorAll(".report-pane").forEach(p=>p.style.display="none");const pane=document.getElementById(paneId);if(pane)pane.style.display="block";const empty=document.getElementById("reportsEmptyState");if(empty)empty.style.display="none";document.querySelectorAll(".report-nav").forEach(n=>n.classList.remove("active-report-nav"));if(button)button.classList.add("active-report-nav");
  requestAnimationFrame(()=>{if(paneId==="reportRoutesPane"&&sutilRouteReportState?.routes)drawRouteBars(document.getElementById("routeReportChart"),sutilRouteReportState.routes);if(paneId==="reportAnnualPane"&&annualReportData)drawAnnualReportChart();if(paneId==="reportOverviewPane"&&sutilAnalysisReportData?.monthly)drawLineChart(document.getElementById("monthlyReportChart"),sutilAnalysisReportData.monthly);});
}

function resetReportsHubView(){
  sutilCurrentReportPaneId="";
  document.querySelectorAll(".report-pane").forEach(p=>p.style.display="none");
  document.querySelectorAll(".report-nav").forEach(n=>n.classList.remove("active-report-nav"));
  const empty=document.getElementById("reportsEmptyState");
  if(empty)empty.style.display="block";
}

async function loadReports(){
  try{
    const selectedRoute=reportRoute.value;
    const [routes,data] = await Promise.all([
      api("/api/admin/routes"),
      (async()=>{
        const params = new URLSearchParams();
        if(reportDateFrom.value)params.set("date_from",reportDateFrom.value);
        if(reportDateTo.value)params.set("date_to",reportDateTo.value);
        if(selectedRoute)params.set("route_id",selectedRoute);
        return api("/api/admin/reports/summary?"+params.toString());
      })()
    ]);

    reportRoute.innerHTML =
      '<option value="">Todas las rutas</option>' +
      routes.map(r=>`<option value="${r.id}">${r.name}</option>`).join("");
    if(routes.some(r=>String(r.id)===String(selectedRoute))){
      reportRoute.value=selectedRoute;
    }

    sutilAnalysisReportData=data;
    const s=data.summary;
    const growth=s.growth_percent==null
      ? "Sin comparación"
      : `${s.growth_percent>=0?"+":""}${s.growth_percent}%`;

    reportSummary.innerHTML =
      reportMetricCard("Crédito realizado",money(s.total_principal),`${s.loans_created} crédito(s)`) +
      reportMetricCard("Dinero cobrado",money(s.total_collected),`Tasa de recaudo: ${s.collection_rate}%`,"status-current") +
      reportMetricCard("Ganancia cobrada",money(s.interest_collected),"Interés efectivamente recibido","status-current") +
      reportMetricCard("Gastos",money(s.expenses),"Gastos operativos del período") +
      reportMetricCard("Utilidad neta",money(s.net_profit),"Ganancia cobrada menos gastos",s.net_profit<0?"status-overdue":"status-current") +
      reportMetricCard("Crecimiento mensual",growth,"Comparado con el mes anterior",s.growth_percent<0?"status-overdue":"status-current");

    reportPortfolioSummary.innerHTML =
      reportMetricCard("Total contratado",money(s.total_contracted),"Capital más interés") +
      reportMetricCard("Cartera pendiente",money(s.portfolio_balance),`${s.active_loans} crédito(s) activo(s)`) +
      reportMetricCard("Cartera vencida",money(s.overdue_balance),`${s.overdue_installments} cuota(s) vencida(s)`,s.overdue_balance>0?"status-overdue":"status-current") +
      reportMetricCard("Créditos pagados",String(s.paid_loans),"Historial finalizado") +
      reportMetricCard("Interés generado",money(s.interest_generated),"Ganancia contratada") +
      reportMetricCard("Tasa de recaudo",`${s.collection_rate}%`,"Cuotas pagadas frente a esperadas",s.collection_rate<80?"status-overdue":"status-current");

    reportProfitSummary.innerHTML =
      reportMetricCard("Ganancia cobrada",money(s.interest_collected),"Ingreso financiero") +
      reportMetricCard("Gastos registrados",money(s.expenses),"Costos operativos") +
      reportMetricCard("Utilidad neta",money(s.net_profit),"Ganancia menos gastos",s.net_profit<0?"status-overdue":"status-current") +
      ((isSutilOwner()||sutilBaseShowToStaff) ? reportMetricCard("Retiros de ganancia",money(s.profit_withdrawals),"No se descuentan como gasto") : "");

    reportCashSummary.innerHTML =
      reportMetricCard("Dinero operativo",money(s.available_cash),"Caja actual") +
      reportMetricCard("PIX operativo",money(s.available_pix),"Caja actual") +
      reportMetricCard("Base operativa disponible",money(s.available_total),"Dinero + PIX operativos","status-current") +
      ((isSutilOwner()||sutilBaseShowToStaff) ? (
        reportMetricCard("Adiciones de base",money(s.base_additions),"Aportes del período") +
        reportMetricCard("Retiros de base",money(s.base_withdrawals),"Capital o ganancias retiradas") +
        reportMetricCard("Transferido entre rutas",money(s.route_transfers_out),"No afecta la utilidad")
      ) : "");

    reportRoutesTable.innerHTML=data.routes.length
      ? data.routes.map((r,index)=>`
        <tr>
          <td><span class="route-report-legend-badge" style="background:${getRouteReportColor(index)}">${index+1}</span></td>
          <td><strong>${r.route_name}</strong></td>
          <td>${money(r.principal)}</td>
          <td class="status-current">${money(r.collected)}</td>
          <td>${money(r.interest_collected)}</td>
          <td>${money(r.expenses)}</td>
          <td class="${r.net_profit<0?"status-overdue":"status-current"}">${money(r.net_profit)}</td>
          <td>${money(r.portfolio_balance)}</td>
          <td class="${r.overdue_balance>0?"status-overdue":"status-current"}">${money(r.overdue_balance)}</td>
          <td>${r.collection_rate}%</td>
          <td><strong>${money(r.available_total)}</strong><br><small>Dinero ${money(r.available_cash)} · PIX ${money(r.available_pix)}</small></td>
        </tr>`).join("")
      : '<tr><td colspan="11">No hay datos por ruta para este período.</td></tr>';

    reportMonthlyTable.innerHTML=data.monthly.length
      ? data.monthly.map(m=>`
        <tr>
          <td>${m.month.slice(5)}/${m.month.slice(0,4)}</td>
          <td>${money(m.principal)}</td>
          <td>${money(m.collected)}</td>
          <td>${money(m.interest_collected)}</td>
          <td>${money(m.expenses)}</td>
          <td class="${m.net_profit<0?"status-overdue":"status-current"}">${money(m.net_profit)}</td>
          <td class="${m.growth_percent<0?"status-overdue":"status-current"}">
            ${m.growth_percent==null?"—":`${m.growth_percent>=0?"+":""}${m.growth_percent}%`}
          </td>
        </tr>`).join("")
      : '<tr><td colspan="7">No hay información mensual.</td></tr>';

    reportTopClientsTable.innerHTML=data.top_clients?.length
      ? data.top_clients.map(c=>`
        <tr>
          <td><span class="report-mobile-label">Cliente</span><strong>${c.client_name}</strong></td>
          <td><span class="report-mobile-label">Código</span>${c.client_code||"—"}</td>
          <td><span class="report-mobile-label">Ruta</span>${c.route_name||"Sin ruta"}</td>
          <td class="status-current"><span class="report-mobile-label">Cobrado</span>${money(c.collected)}</td>
          <td><span class="report-mobile-label">Saldo actual</span>${money(c.current_balance)}</td>
          <td class="${c.is_overdue?"status-overdue":"status-current"}"><span class="report-mobile-label">Estado</span>${c.is_overdue?"MOROSO":"AL DÍA"}</td>
        </tr>`).join("")
      : '<tr><td colspan="6">No hay recaudos de clientes en el período.</td></tr>';

    const totalExpenses=Number(s.expenses||0);
    reportExpensesTable.innerHTML=data.expenses_by_category?.length
      ? data.expenses_by_category.map(row=>`
        <tr>
          <td><strong>${row.category}</strong></td>
          <td>${money(row.amount)}</td>
          <td>${totalExpenses>0?(row.amount/totalExpenses*100).toFixed(1):"0.0"}%</td>
        </tr>`).join("")
      : '<tr><td colspan="3">No hay gastos registrados en el período.</td></tr>';

    reportNote.textContent =
      "Utilidad neta = ganancia cobrada − gastos operativos. " +
      "Las transferencias entre rutas y los retiros de base se muestran por separado.";

    sutilRouteReportState={
      routes:Array.isArray(data.routes)?data.routes:[],
      summary:s,
      filters:{date_from:reportDateFrom.value||"",date_to:reportDateTo.value||"",route_name:getRouteReportSelectedRouteName()}
    };
    drawLineChart(monthlyReportChart,data.monthly);
    drawRouteBars(routeReportChart,data.routes);
    renderRouteReportLegend(data.routes);
  }catch(e){
    alert(e.message);
  }
}


function showSutilSupportLauncher(){
  const launcher=document.getElementById("sutilSupportLauncher");
  const membership=document.getElementById("sutilSupportMembershipView");
  const assistant=document.getElementById("sutilSupportAssistantView");
  if(launcher) launcher.hidden=false;
  if(membership) membership.hidden=true;
  if(assistant) assistant.hidden=true;
}
function openSutilSupportView(view){
  const launcher=document.getElementById("sutilSupportLauncher");
  const membership=document.getElementById("sutilSupportMembershipView");
  const assistant=document.getElementById("sutilSupportAssistantView");
  if(launcher) launcher.hidden=true;
  if(membership) membership.hidden=view!=="membership";
  if(assistant) assistant.hidden=view!=="assistant";
  if(view==="membership") membership?.scrollIntoView({behavior:"smooth",block:"start"});
  if(view==="assistant") assistant?.scrollIntoView({behavior:"smooth",block:"start"});
}

let sutilSupportData=null;
let sutilSupportPollingTimer=null;

function sutilSupportEscape(v){
  return String(v??"").replace(/[&<>"']/g,c=>({"&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#39;"}[c]));
}
function sutilSupportMoney(value){
  const c=sutilSupportData?.company||{};
  const n=Number(value||0);
  try{return new Intl.NumberFormat(c.currency_code==="BRL"?"pt-BR":"es",{style:"currency",currency:c.currency_code||"BRL"}).format(n)}
  catch(_){return `${c.currency_symbol||"R$"} ${n.toFixed(2)}`}
}
function sutilSupportDate(v){
  if(!v)return "—";
  const raw=String(v).trim();
  // SQLite CURRENT_TIMESTAMP se guarda en UTC sin sufijo de zona.
  // Lo marcamos como UTC para que el navegador lo convierta a la hora local
  // del dispositivo (por ejemplo, Brasil UTC-03) sin alterar lo guardado.
  const normalized=/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}(?:\.\d+)?$/.test(raw)
    ? raw.replace(" ","T")+"Z"
    : raw;
  const d=new Date(normalized);
  return isNaN(d)?raw:d.toLocaleString();
}
function sutilSupportStatusLabel(s){
  return {
    open:"ABIERTA",waiting_quote:"ESPERANDO COTIZACIÓN",awaiting_payment:"PENDIENTE DE PAGO",
    submitted:"COMPROBANTE EN REVISIÓN",approved:"APROBADA",rejected:"RECHAZADA",cancelled:"CANCELADA"
  }[s]||String(s||"").toUpperCase();
}
async function copySutilSupportValue(value, button=null){
  const text=String(value||"").trim();
  if(!text){
    alert("No hay una llave PIX configurada para copiar.");
    return;
  }

  let copied=false;

  try{
    if(navigator.clipboard && typeof navigator.clipboard.writeText==="function"){
      await navigator.clipboard.writeText(text);
      copied=true;
    }
  }catch(_){}

  if(!copied){
    const helper=document.createElement("textarea");
    helper.value=text;
    helper.setAttribute("readonly","");
    helper.style.position="fixed";
    helper.style.left="-9999px";
    helper.style.top="0";
    document.body.appendChild(helper);
    helper.focus();
    helper.select();
    helper.setSelectionRange(0,helper.value.length);
    try{copied=document.execCommand("copy");}catch(_){copied=false}
    helper.remove();
  }

  if(copied){
    if(button){
      const original=button.dataset.originalText||button.textContent||"📋 Copiar llave PIX";
      button.dataset.originalText=original;
      button.textContent="✓ Llave PIX copiada";
      button.disabled=true;
      setTimeout(()=>{
        button.textContent=original;
        button.disabled=false;
      },1800);
    }else{
      alert("Llave PIX copiada.");
    }
    return;
  }

  await sutilPrompt("Copia la llave PIX:",text);
}
function renderSutilPaymentMethods(){
  const rows=sutilSupportData?.payment_methods||[];
  const target=document.getElementById("sutilMembershipMethods");
  const options=rows.map(r=>`<option value="${r.id}">${sutilSupportEscape(r.display_name)}</option>`).join("");
  const renewal=document.getElementById("sutilRenewalMethod"),routes=document.getElementById("sutilRoutesMethod");
  if(renewal)renewal.innerHTML=options||'<option value="">Sin medio configurado</option>';
  if(routes)routes.innerHTML=options||'<option value="">Sin medio configurado</option>';
  if(!target)return;
  target.innerHTML=rows.length?rows.map(r=>{
    const detail=[
      r.identifier_label&&r.identifier_value?`${sutilSupportEscape(r.identifier_label)}: <strong>${sutilSupportEscape(r.identifier_value)}</strong>`:"",
      r.account_holder?`Titular: ${sutilSupportEscape(r.account_holder)}`:"",
      r.bank_name?`Banco: ${sutilSupportEscape(r.bank_name)}`:"",
      r.agency?`Agencia: ${sutilSupportEscape(r.agency)}`:"",
      r.account_number?`Cuenta: ${sutilSupportEscape(r.account_number)}`:"",
      r.instructions?sutilSupportEscape(r.instructions):""
    ].filter(Boolean).join("<br>");
    const copy=r.identifier_value?`<button class="btn secondary sutil-copy-btn" type="button" data-copy-value="${sutilSupportEscape(String(r.identifier_value))}" onclick="copySutilSupportValue(this.dataset.copyValue,this)">📋 Copiar llave PIX</button>`:"";
    const link=r.payment_url?`<a class="btn secondary" href="${sutilSupportEscape(r.payment_url)}" target="_blank" rel="noopener" style="display:inline-block;text-decoration:none;margin-left:6px">Abrir pago</a>`:"";
    return `<div class="sutil-method-card"><strong>${sutilSupportEscape(r.display_name)}</strong><div class="sutil-method-data">${detail||"Método disponible"}</div><div style="margin-top:8px">${copy}${link}</div></div>`;
  }).join(""):'<div class="muted">Sutil todavía no configuró medios de pago para tu país/moneda. Puedes escribir por el chat.</div>';
}
const SUTIL_MEMBERSHIP_PLAN_LABELS={
  monthly_1:"Plan 1 · Mensual R$ 60",monthly_4:"Plan 2 · Mensual 4 rutas R$ 120",
  semiannual_2:"Plan 3 · Semestral R$ 500",semiannual_6:"Plan 4 · Semestral Pro R$ 600",annual_10:"Plan 5 · Anual R$ 900",demo10:"Demo · 10 días"
};
let sutilSelectedMembershipPlan="";
let sutilMembershipQuote=null;
function sutilActiveLanguageCode(){
  const raw=String(typeof SUTIL_ACTIVE_LANGUAGE!=="undefined"?SUTIL_ACTIVE_LANGUAGE:(document.documentElement.lang||"es")).toLowerCase();
  if(raw.startsWith("pt"))return "pt";
  if(raw.startsWith("en"))return "en";
  return "es";
}
function sutilMembershipPlanLabel(code){
  const key=String(code||"").trim().toLowerCase();
  const lang=sutilActiveLanguageCode();
  const labels={
    demo10:{es:"Demo · 10 días",pt:"Demo · 10 dias",en:"Demo · 10 days"},
    monthly_1:{es:"Plan 1 · Mensual",pt:"Plano 1 · Mensal",en:"Plan 1 · Monthly"},
    monthly_4:{es:"Plan 2 · Mensual · 4 rutas",pt:"Plano 2 · Mensal · 4 rotas",en:"Plan 2 · Monthly · 4 routes"},
    semiannual_2:{es:"Plan 3 · Semestral",pt:"Plano 3 · Semestral",en:"Plan 3 · Semiannual"},
    semiannual_6:{es:"Plan 4 · Semestral Pro",pt:"Plano 4 · Semestral Pro",en:"Plan 4 · Semiannual Pro"},
    annual_10:{es:"Plan 5 · Anual",pt:"Plano 5 · Anual",en:"Plan 5 · Annual"}
  };
  if(labels[key])return labels[key][lang]||labels[key].es;
  if(key==="monthly")return lang==="pt"?"Mensal":lang==="en"?"Monthly":"Mensual";
  if(key==="semiannual")return lang==="pt"?"Semestral":lang==="en"?"Semiannual":"Semestral";
  if(key==="annual")return lang==="pt"?"Anual":lang==="en"?"Annual":"Anual";
  if(key==="trial")return lang==="pt"?"Demonstração":lang==="en"?"Trial":"Demostración";
  return String(code||"—");
}
function sutilResolveCurrentPlanCode(company){
  const c=company||{};
  const commercial=String(c.commercial_plan||"").trim().toLowerCase();
  if(commercial && commercial!=="legacy")return commercial;
  const type=String(c.plan_type||"").trim().toLowerCase();
  const routes=Number(c.max_routes||0);
  if(type==="annual" && routes>=10)return "annual_10";
  if(type==="semiannual")return routes>=6?"semiannual_6":"semiannual_2";
  if(type==="monthly")return routes>=4?"monthly_4":"monthly_1";
  if(type==="trial")return "demo10";
  return type||commercial||"";
}
function sutilCurrentPlanHeading(){
  const lang=sutilActiveLanguageCode();
  return lang==="pt"?"Plano atual":lang==="en"?"Current plan":"Plan actual";
}
function renderSutilMembershipPlans(){
  const c=sutilSupportData?.company||{};
  const current=sutilResolveCurrentPlanCode(c);
  const badge=document.getElementById("sutilCurrentPlanBadge");
  if(badge)badge.textContent=`${sutilCurrentPlanHeading()}: ${sutilMembershipPlanLabel(current)}`;
  document.querySelectorAll(".sutil-plan-choice").forEach(btn=>{
    const code=btn.dataset.plan||"";
    btn.classList.toggle("current",code===current);
    btn.classList.toggle("selected",code===sutilSelectedMembershipPlan);
  });
}
async function selectSutilMembershipPlan(code){
  sutilSelectedMembershipPlan=String(code||"");
  const hidden=document.getElementById("sutilRenewalPlan");if(hidden)hidden.value=sutilSelectedMembershipPlan;
  const submit=document.getElementById("sutilRenewalSubmit");if(submit)submit.disabled=true;
  const box=document.getElementById("sutilPlanQuote");
  renderSutilMembershipPlans();
  if(box){box.className="sutil-plan-quote open";box.innerHTML='<strong>Calculando valor…</strong>';}
  try{
    const q=await api(`/api/admin/sutil-support/membership-quote/${encodeURIComponent(sutilSelectedMembershipPlan)}`);
    sutilMembershipQuote=q;
    if(box){
      const mode=q.change_mode==="renewal"?"Renovación del mismo plan":"Cambio de plan";
      const credit=Number(q.credit_amount||0);
      const carry=Number(q.carry_credit||0);
      box.innerHTML=`<strong>${mode}: ${sutilSupportEscape(q.plan_name||sutilMembershipPlanLabel(q.plan_code))}</strong>
        <div class="sutil-plan-quote-grid">
          <div class="sutil-plan-quote-item"><small>Valor del nuevo plan</small><strong>${sutilSupportMoney(q.original_amount)}</strong></div>
          <div class="sutil-plan-quote-item"><small>Días restantes</small><strong>${Number(q.remaining_days||0)}</strong></div>
          <div class="sutil-plan-quote-item"><small>Crédito aplicado</small><strong class="sutil-plan-credit">− ${sutilSupportMoney(credit)}</strong></div>
          <div class="sutil-plan-quote-item"><small>Valor a pagar</small><strong class="sutil-plan-quote-final">${sutilSupportMoney(q.quoted_amount)}</strong></div>
        </div>
        <div class="sutil-plan-note">${q.change_mode==="renewal"?"Tu tiempo actual no se pierde: el nuevo período comenzará después del vencimiento vigente.":`El crédito corresponde al valor proporcional del tiempo pagado no utilizado.${carry>0?` Quedarán ${sutilSupportMoney(carry)} como saldo a favor para una próxima renovación.`:""}`}</div>`;
    }
    if(submit)submit.disabled=false;
  }catch(e){sutilMembershipQuote=null;if(box)box.innerHTML=`<strong style="color:#a21d18">${sutilSupportEscape(e.message||"No fue posible calcular el plan")}</strong>`;}
}

function renderSutilSupportSummary(){
  const c=sutilSupportData?.company||{};
  const el=document.getElementById("sutilSupportSummary"); if(!el)return;
  el.innerHTML=`
    <div class="sutil-support-mini"><small>${sutilCurrentPlanHeading()}</small><strong>${sutilSupportEscape(sutilMembershipPlanLabel(sutilResolveCurrentPlanCode(c)))}</strong></div>
    <div class="sutil-support-mini"><small>Vencimiento</small><strong>${c.membership_end?new Date(c.membership_end).toLocaleDateString():"—"}</strong></div>
    <div class="sutil-support-mini"><small>Rutas contratadas</small><strong>${Number(c.max_routes||0)}</strong></div>
    <div class="sutil-support-mini"><small>Crédito a favor</small><strong>${sutilSupportMoney(c.membership_credit_balance||0)}</strong></div>`;
  renderSutilMembershipPlans();
}
function renderSutilSupportFaq(){
  const el=document.getElementById("sutilSupportFaq");if(!el)return;
  const search=document.getElementById("sutilSupportFaqSearch");
  const count=document.getElementById("sutilSupportFaqCount");
  const q=String(search?.value||"").trim().toLowerCase();
  const all=sutilSupportData?.faq||[];
  const rows=all.filter(row=>{
    if(!q)return true;
    return [row.category,row.question,row.answer].filter(Boolean).join(" ").toLowerCase().includes(q);
  });
  if(count)count.textContent=`${rows.length} de ${all.length} respuesta(s)`;
  if(!rows.length){
    el.innerHTML='<div class="sutil-faq-empty">No encontré esa pregunta. Escríbela en el chat de Soporte Sutil.</div>';
    return;
  }
  const groups=new Map();
  rows.forEach(row=>{
    const category=row.category||"Otras preguntas";
    if(!groups.has(category))groups.set(category,[]);
    groups.get(category).push(row);
  });
  el.innerHTML=Array.from(groups.entries()).map(([category,items])=>`
    <div class="sutil-faq-category">${sutilSupportEscape(category)}</div>
    ${items.map(row=>`<details ${q?"open":""}><summary>${sutilSupportEscape(row.question)}</summary><p>${sutilSupportEscape(row.answer)}</p></details>`).join("")}
  `).join("");
}

let sutilAiLastQuestion="";
let sutilAiLastAnswer="";
function renderSutilAi(){
  const target=document.getElementById("sutilAiMessages");
  const status=document.getElementById("sutilAiStatus");
  const ai=sutilSupportData?.ai||{};
  if(status){
    status.textContent=ai.configured?`IA activa · ${ai.model||""}`:"Base local · IA pendiente";
    status.classList.toggle("off",!ai.configured);
  }
  if(!target)return;
  const rows=ai.history||[];
  target.innerHTML=rows.length?rows.map(row=>{
    const mine=row.role==="user";
    return `<div class="sutil-ai-msg ${mine?"user":"assistant"}"><strong>${mine?"Mi empresa":"Asistente Sutil"}</strong><div style="margin-top:4px">${sutilSupportEscape(row.content||"")}</div><small>${row.ai_used?`IA · ${sutilSupportEscape(row.model||"")}`:(mine?"Consulta":"Base oficial")} · ${sutilSupportDate(row.created_at)}</small></div>`;
  }).join(""):'<div class="muted">Escribe una pregunta para comenzar.</div>';
  target.scrollTop=target.scrollHeight;
  setTimeout(()=>sutilRestoreAiActions(),0);
}
function showSutilGuide(category){const box=document.getElementById("sutilGuideChoices");if(!box)return;let rows=(sutilSupportData?.faq||[]).filter(r=>r.category===category).slice(0,12);box.innerHTML=`<div class="muted" style="width:100%;margin-bottom:6px"><strong>${sutilSupportEscape(category)}</strong> · Escoge la pregunta que más se parece:</div>`+rows.map(r=>`<button class="btn secondary" type="button" onclick='askSutilAiQuick(${JSON.stringify(r.question)})'>${sutilSupportEscape(r.question)}</button>`).join("")+`<button class="btn secondary" type="button" onclick="document.getElementById('sutilAiText')?.focus()">✍️ Otra pregunta</button>`;}
function askSutilAiQuick(text){const el=document.getElementById("sutilAiText");if(!el)return;el.value=text;sendSutilAiMessage();}
function scrollSutilSupportTo(id){document.getElementById(id)?.scrollIntoView({behavior:"smooth",block:"center"});}

async function sutilOpenActiveLoanClients(mode="active"){
  openSection('clientsSection');
  try{ await refreshClients(); }catch(_){}
  const status=document.getElementById("clientsStatusFilter");
  const search=document.getElementById("clientsSearch");
  if(search)search.value="";
  if(status){
    status.value = mode==="overdue" ? "overdue" : "active_loan";
  }
  renderClientsTable();
  document.getElementById("clientDirectoryCard")?.scrollIntoView({behavior:"smooth",block:"start"});
}

function sutilOpenLoanCreate(){
  openSection('loansSection');
  setTimeout(()=>document.getElementById("loanClientSearch")?.focus(),120);
}

function sutilOpenLoanInstallments(){
  openSection('collectionsSection');
  setTimeout(()=>{
    try{ showCollectionsMode('debt'); }catch(_){}
    document.getElementById("collectionsSearch")?.focus();
  },120);
}


let SUTIL_AI_LAST_ACTION_STATE = null;

function sutilRememberAiActions(result){
  if(!result || typeof result!=="object")return;
  const choices=Array.isArray(result.suggested_choices)?result.suggested_choices:[];
  const action=result.suggested_action||null;
  if(action || choices.length || result.needs_human){
    SUTIL_AI_LAST_ACTION_STATE={
      suggested_action:action,
      suggested_choices:choices,
      needs_human:!!result.needs_human
    };
    try{sessionStorage.setItem("sutil_ai_last_action",JSON.stringify(SUTIL_AI_LAST_ACTION_STATE));}catch(_){}
  }
}
function sutilRestoreAiActions(){
  if(!SUTIL_AI_LAST_ACTION_STATE){
    try{SUTIL_AI_LAST_ACTION_STATE=JSON.parse(sessionStorage.getItem("sutil_ai_last_action")||"null");}catch(_){}
  }
  if(!SUTIL_AI_LAST_ACTION_STATE)return;
  setTimeout(()=>{try{renderSutilAiActions(SUTIL_AI_LAST_ACTION_STATE,true);}catch(_){}},50);
}

function sutilAiActionHost(){
  // El historial real del Asistente Sutil se renderiza en #sutilAiMessages.
  // Antes se buscaba #sutilAiHistory (ID inexistente), por eso los botones
  // no se insertaban dentro de la respuesta o desaparecían al refrescar.
  const target=document.getElementById("sutilAiMessages");
  if(!target)return null;
  const msgs=target.querySelectorAll(".sutil-ai-msg.assistant");
  const last=msgs.length?msgs[msgs.length-1]:null;
  if(!last)return null;
  let host=last.querySelector(".sutil-ai-inline-actions");
  if(!host){
    host=document.createElement("div");
    host.className="sutil-ai-inline-actions";
    host.style.cssText="display:flex;gap:8px;flex-wrap:wrap;margin-top:10px";
    last.appendChild(host);
  }
  return host;
}

function renderSutilAiActions(result, restoring=false){
  if(!restoring)sutilRememberAiActions(result);
  const legacy=document.getElementById("sutilAiActions");
  if(legacy)legacy.innerHTML="";
  const box=sutilAiActionHost();
  if(!box)return;
  const b=[];
  const choices=Array.isArray(result?.suggested_choices)?result.suggested_choices:[];
  const action=String(result?.suggested_action||"");
  const quick=(label,message)=>b.push(`<button class="btn secondary" type="button" onclick="askSutilAiQuick(${JSON.stringify(message).replace(/"/g,"&quot;")})">${label}</button>`);
  const go=(label,section)=>b.push(`<button class="btn secondary" type="button" onclick="openSection('${section}')">${label}</button>`);

  // FILTRO 1: si todavía hay varias posibilidades, NO navegar.
  if(choices.length){
    b.push('<div class="muted" style="width:100%;margin-bottom:3px"><strong>Escoge lo que deseas hacer:</strong></div>');
    choices.forEach(choice=>{
      const label=sutilSupportEscape(choice?.label||"Continuar");
      const msg=String(choice?.message||"").replace(/\\/g,"\\\\").replace(/'/g,"\\'");
      b.push(`<button class="btn secondary" type="button" onclick="askSutilAiQuick('${msg}')">${label}</button>`);
    });
    box.innerHTML=b.join("");
    if(b.length)box.scrollIntoView({behavior:"smooth",block:"nearest"});
    return;
  }

  // FILTRO 2: destino final solamente cuando la intención ya es exacta.
  if(action==="renewal")b.push('<button class="btn success" type="button" onclick="scrollSutilSupportTo(\'sutilRenewalPlan\')">💳 Renovar membresía</button>');
  else if(action==="route_increase")b.push('<button class="btn" type="button" onclick="scrollSutilSupportTo(\'sutilExtraRoutes\')">➕ Aumentar rutas</button>');
  else if(action==="membership_payment")b.push('<button class="btn secondary" type="button" onclick="scrollSutilSupportTo(\'sutilMembershipMethods\')">💳 Ver medios de pago</button>');
  else if(action==="loan_list_active")b.push('<button class="btn secondary" type="button" onclick="sutilOpenActiveLoanClients(\'active\')">📋 Ver créditos activos</button>');
  else if(action==="loan_create")b.push('<button class="btn success" type="button" onclick="sutilOpenLoanCreate()">➕ Crear crédito</button>');
  else if(action==="loan_installments")b.push('<button class="btn secondary" type="button" onclick="sutilOpenLoanInstallments()">🧾 Consultar cuotas</button>');
  else if(action==="loan_overdue")b.push('<button class="btn secondary" type="button" onclick="sutilOpenActiveLoanClients(\'overdue\')">🔴 Ver atrasados</button>');
  else if(action==="collection_create")go("💰 Registrar cobro","collectionsSection");
  else if(action==="collections_today")go("💰 Ver cobros de hoy","collectionsSection");
  else if(action==="expense_create")go("🧾 Registrar gasto","expensesSection");
  else if(action==="new_client")go("➕ Registrar cliente","newClientSection");
  else if(action==="cash_today")go("📦 Ver caja de hoy","cashSection");
  else if(action==="cash_yesterday")go("📦 Ver caja de ayer","cashReportSection");
  else if(action==="cash_open")go("🔓 Abrir caja","cashSection");
  else if(action==="cash_close")go("🔒 Cerrar caja","cashSection");
  else if(action==="cash_transfer")go("↔ Transferir base","cashSection");
  else if(action==="cash_open_list")go("📦 Ver cajas abiertas","cashSection");
  else if(action==="cash_closed_list")go("📚 Ver cajas cerradas","cashReportSection");
  else if(action==="receipts")go("🧾 Ver comprobantes","receiptsSection");
  else if(action==="routes")go("🛣 Ver rutas","routesSection");
  else if(action==="reports")go("📊 Ver reportes","reportsSection");
  else if(action==="locations")go("📍 Ver ubicaciones","locationsSection");
  else if(action==="staff")go("👤 Ver personal","staffSection");
  else if(action==="historical")go("🗂 Migración histórica","historicalModule");
  else if(action==="collections")quick("💰 ¿Qué deseas hacer con cobros?","cobros");
  else if(action==="expenses")quick("🧾 ¿Qué deseas hacer con gastos?","gastos");
  else if(action==="clients")quick("👥 ¿Qué deseas hacer con clientes?","clientes");
  else if(action==="cash")quick("📦 ¿Qué deseas hacer con caja?","caja");
  else if(action==="loans")quick("💳 ¿Qué deseas hacer con créditos?","créditos");
  else if(action==="technical_menu")quick("🛠 Elegir problema técnico","problema técnico");

  if(action==="historical_clients")go("👥 Migración de clientes","historicalImportClientsSection");
  else if(action==="historical_backup")go("💾 Backup histórico","legacyBackupPreviewSection");
  else if(action==="historical_package")go("📦 Paquete histórico","historicalPackageSection");
  else if(action==="historical_rollback")go("↩ Revisar importación","historicalImportClientsSection");
  else if(action==="chats")go("💬 Abrir chats","chatsSection");
  else if(action==="loan_edit"||action==="loan_delete")b.push('<button class="btn secondary" type="button" onclick="sutilOpenActiveLoanClients(\'active\')">🔎 Buscar crédito</button>');
  else if(action==="payment_edit")go("✏️ Buscar pago","collectionsSection");
  else if(action==="forgotten_operation")go("🕘 Operación olvidada","forgottenOperationSection");
  else if(action==="collection_methods")go("🏦 Medios de cobro","collectionMethodsSection");
  else if(action==="cash_reopen"||action==="cash_adjustment"||action==="cash_reconcile")go("📦 Ir a Caja","cashSection");
  else if(action==="cash_movements")go("📜 Ver movimientos","baseMovementsSection");
  else if(action==="staff_permissions"||action==="staff_routes"||action==="staff_reset_password"||action==="staff_status")go("👤 Abrir Personal","staffSection");
  else if(action==="settings")go("⚙ Configuración","settingsSection");

  if(result?.needs_human||action==="human_support")
    b.push('<button class="btn secondary" type="button" onclick="escalateSutilAiToHuman()">👤 Hablar con soporte</button>');

  box.innerHTML=b.join("");
  if(b.length)box.scrollIntoView({behavior:"smooth",block:"nearest"});
}
async function sendSutilAiMessage(){
  const textEl=document.getElementById("sutilAiText"),button=document.getElementById("sutilAiSendButton"),resultBox=document.getElementById("sutilAiResult");
  const message=String(textEl?.value||"").trim();if(!message)return;
  sutilAiLastQuestion=message;if(button)button.disabled=true;if(resultBox)resultBox.textContent="Asistente Sutil está analizando...";
  try{
    const result=await api("/api/admin/sutil-support/ai",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({message})});
    sutilAiLastAnswer=result.answer||"";if(textEl)textEl.value="";await loadSutilSupport(true);renderSutilAiActions(result);
    if(resultBox)resultBox.textContent=result.ai_used?"Respuesta generada con IA y la base oficial de Sutil.":"Respuesta basada en la base oficial disponible.";
  }catch(e){if(resultBox)resultBox.textContent=e.message;}finally{if(button)button.disabled=false;}
}
function escalateSutilAiToHuman(){
  const category=document.getElementById("sutilSupportCategory"),target=document.getElementById("sutilSupportText");if(category)category.value="technical";
  if(target){const parts=["Solicitud de atención humana desde Asistente Sutil."];if(sutilAiLastQuestion)parts.push(`Consulta: ${sutilAiLastQuestion}`);if(sutilAiLastAnswer)parts.push(`Respuesta del asistente: ${sutilAiLastAnswer}`);target.value=parts.join("\n\n");target.scrollIntoView({behavior:"smooth",block:"center"});setTimeout(()=>target.focus(),300);}
}

function renderSutilSupportMessages(){
  const el=document.getElementById("sutilSupportMessages");if(!el)return;
  const rows=sutilSupportData?.messages||[];
  el.innerHTML=rows.length?rows.map(m=>`<div class="sutil-support-msg ${m.sender_side==="company"?"mine":""}">
    <strong>${m.sender_side==="company"?"Mi empresa":"Soporte Sutil"}</strong>
    <div style="margin-top:4px;white-space:pre-wrap">${sutilSupportEscape(m.message)}</div>
    <small>${sutilSupportEscape(m.category||"support")} · ${sutilSupportDate(m.created_at)}</small>
  </div>`).join(""):'<div class="muted">Todavía no hay mensajes. Puedes iniciar la conversación.</div>';
  el.scrollTop=el.scrollHeight;
}
function renderSutilSupportRequests(){
  const el=document.getElementById("sutilSupportRequests");if(!el)return;
  const rows=sutilSupportData?.requests||[];
  el.innerHTML=rows.length?rows.map(r=>{
    const title=r.request_type==="renewal"?`${r.change_mode==="change"?"Cambio de plan":"Renovación"} · ${sutilSupportEscape(sutilMembershipPlanLabel(r.plan_code||r.plan_type||""))}`:`Aumento de ${Number(r.routes_requested||0)} ruta(s)`;
    const amount=r.quoted_amount!=null?`<div style="margin-top:6px">Valor a pagar: <strong>${sutilSupportMoney(r.quoted_amount)}</strong>${r.credit_amount?` · Crédito aplicado: <strong>${sutilSupportMoney(r.credit_amount)}</strong>`:""}</div>`:"";
    const method=r.payment_method_name?`<div class="muted" style="margin-top:4px">Medio: ${sutilSupportEscape(r.payment_method_name)}</div>`:"";
    const note=r.owner_note?`<div class="muted" style="margin-top:5px"><strong>Respuesta Sutil:</strong> ${sutilSupportEscape(r.owner_note)}</div>`:"";
    const proof=r.proof_url?`<a href="${sutilSupportEscape(r.proof_url)}" target="_blank" rel="noopener">Ver comprobante enviado</a>`:"";
    const canUpload=!["approved","rejected","cancelled"].includes(r.status);
    const upload=canUpload?`<div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:9px">
      <input id="sutilProof${r.id}" type="file" accept="image/jpeg,image/png,image/webp,application/pdf" style="max-width:260px">
      <button class="btn secondary" type="button" onclick="uploadSutilSupportProof(${r.id})">📎 Enviar comprobante</button>
    </div>`:"";
    return `<div class="sutil-request-item"><div class="sutil-request-top"><strong>${title}</strong><span class="sutil-request-status ${r.status}">${sutilSupportStatusLabel(r.status)}</span></div>${amount}${method}${r.note?`<div class="muted" style="margin-top:4px">${sutilSupportEscape(r.note)}</div>`:""}${note}<div style="margin-top:6px">${proof}</div>${upload}</div>`;
  }).join(""):'<div class="muted">No tienes solicitudes todavía.</div>';
}
async function loadSutilSupport(silent=false){
  if(!currentUser || !["company_owner","sutil_owner"].includes(currentUser.role))return;
  try{
    sutilSupportData=await api("/api/admin/sutil-support/overview");
    renderSutilSupportSummary();renderSutilPaymentMethods();renderSutilSupportFaq();renderSutilAi();renderSutilSupportMessages();renderSutilSupportRequests();
    if(!silent)sutilSupportResult.textContent="";
  }catch(e){if(!silent)sutilSupportResult.textContent=e.message}
}
async function sendSutilSupportMessage(){
  const textEl=document.getElementById("sutilSupportText"),category=document.getElementById("sutilSupportCategory");
  const message=textEl.value.trim();if(!message)return;
  sutilSupportResult.textContent="Enviando...";
  try{
    await api("/api/admin/sutil-support/messages",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({message,category:category.value})});
    textEl.value="";await loadSutilSupport(true);sutilSupportResult.textContent="Mensaje enviado.";
  }catch(e){sutilSupportResult.textContent=e.message}
}
function selectedSutilRenewalPaymentMethod(){
  const methodId=Number(document.getElementById("sutilRenewalMethod")?.value||0)||null;
  const rows=sutilSupportData?.payment_methods||[];
  return rows.find(r=>Number(r.id)===Number(methodId))||null;
}

function openSutilRenewalModalSafe(event){
  if(event){event.preventDefault();event.stopPropagation();}
  try{
    openSutilRenewalModal();
  }catch(e){
    console.error("Sutil renovación modal:",e);
    const box=document.getElementById("sutilPlanQuote");
    if(box){
      box.className="sutil-plan-quote open";
      box.innerHTML=`<strong style="color:#a21d18">No fue posible abrir la confirmación: ${sutilSupportEscape(e?.message||String(e))}</strong>`;
    }else{
      alert("No fue posible abrir la confirmación: "+(e?.message||String(e)));
    }
  }
  return false;
}

function openSutilRenewalModal(){
  const plan=String(document.getElementById("sutilRenewalPlan")?.value||"").trim();
  if(!plan){
    alert("Selecciona primero el plan que deseas contratar o renovar.");
    return;
  }

  if(!sutilMembershipQuote){
    alert("Espera a que Sutil termine de calcular el valor del plan.");
    return;
  }

  const quotePlan=String(sutilMembershipQuote.plan_code||sutilSelectedMembershipPlan||"").trim();
  if(quotePlan && quotePlan!==plan){
    alert("El plan seleccionado cambió. Vuelve a seleccionar la tarjeta para recalcular el valor.");
    return;
  }

  const q=sutilMembershipQuote;
  const method=selectedSutilRenewalPaymentMethod();
  const backdrop=document.getElementById("sutilRenewalModalBackdrop");
  const summary=document.getElementById("sutilRenewalModalSummary");
  const methodName=document.getElementById("sutilRenewalModalMethodName");
  const methodDetails=document.getElementById("sutilRenewalModalMethodDetails");
  const pixKey=document.getElementById("sutilRenewalModalPixKey");
  const copyBtn=document.getElementById("sutilRenewalModalCopyPix");
  const proof=document.getElementById("sutilRenewalProofFile");
  const msg=document.getElementById("sutilRenewalModalMsg");

  const currentLabel=sutilMembershipPlanLabel(q.current_plan_code&&q.current_plan_code!=="legacy"?q.current_plan_code:sutilResolveCurrentPlanCode(sutilSupportData?.company||{}));
  const actionLabel=q.change_mode==="renewal"?"Renovación":"Cambio de plan";
  summary.innerHTML=`
    <div class="sutil-renewal-summary-grid">
      <div class="sutil-renewal-summary-box"><small>Operación</small><strong>${sutilSupportEscape(actionLabel)}</strong></div>
      <div class="sutil-renewal-summary-box"><small>Plan actual</small><strong>${sutilSupportEscape(currentLabel||"—")}</strong></div>
      <div class="sutil-renewal-summary-box"><small>Nuevo plan</small><strong>${sutilSupportEscape(sutilMembershipPlanLabel(plan))}</strong></div>
      <div class="sutil-renewal-summary-box"><small>Días restantes</small><strong>${Number(q.remaining_days||0)}</strong></div>
      <div class="sutil-renewal-summary-box"><small>Valor del plan</small><strong>${sutilSupportMoney(q.original_amount||0)}</strong></div>
      <div class="sutil-renewal-summary-box"><small>Crédito aplicado</small><strong>${sutilSupportMoney(q.credit_amount||0)}</strong></div>
    </div>
    <div class="sutil-renewal-total"><span><strong style="font-size:14px;color:#126b39">TOTAL A PAGAR</strong></span><strong>${sutilSupportMoney(q.quoted_amount||0)}</strong></div>`;

  methodName.textContent=method?.display_name||"Sin medio configurado";
  const detailParts=[];
  if(method?.account_holder)detailParts.push(`Titular: ${sutilSupportEscape(method.account_holder)}`);
  if(method?.bank_name)detailParts.push(`Banco: ${sutilSupportEscape(method.bank_name)}`);
  if(method?.agency)detailParts.push(`Agencia: ${sutilSupportEscape(method.agency)}`);
  if(method?.account_number)detailParts.push(`Cuenta: ${sutilSupportEscape(method.account_number)}`);
  if(method?.instructions)detailParts.push(sutilSupportEscape(method.instructions));
  methodDetails.innerHTML=detailParts.join("<br>");

  const identifier=String(method?.identifier_value||"").trim();
  if(identifier){
    pixKey.style.display="block";
    pixKey.innerHTML=`<small class="muted">${sutilSupportEscape(method?.identifier_label||"Llave PIX")}</small><br>${sutilSupportEscape(identifier)}`;
    copyBtn.style.display="inline-block";
    copyBtn.dataset.copyValue=identifier;
    copyBtn.onclick=()=>copySutilSupportValue(copyBtn.dataset.copyValue,copyBtn);
  }else{
    pixKey.style.display="none";
    pixKey.textContent="";
    copyBtn.style.display="none";
    copyBtn.dataset.copyValue="";
  }

  if(!backdrop || !summary || !methodName || !methodDetails || !pixKey || !copyBtn){
    throw new Error("No se cargaron los elementos del cuadro de confirmación. Actualiza la página con Ctrl+F5.");
  }

  if(proof)proof.value="";
  if(msg){msg.textContent="";msg.style.color="";}
  backdrop.classList.add("open");
  backdrop.setAttribute("aria-hidden","false");
}

function closeSutilRenewalModal(){
  const backdrop=document.getElementById("sutilRenewalModalBackdrop");
  if(backdrop){
    backdrop.classList.remove("open");
    backdrop.setAttribute("aria-hidden","true");
  }
}

async function submitSutilRenewalFromModal(withProof){
  const plan=document.getElementById("sutilRenewalPlan")?.value||"";
  const methodId=Number(document.getElementById("sutilRenewalMethod")?.value||0)||null;
  const note=document.getElementById("sutilRenewalNote")?.value.trim()||null;
  const proofInput=document.getElementById("sutilRenewalProofFile");
  const file=proofInput?.files?.[0]||null;
  const msg=document.getElementById("sutilRenewalModalMsg");
  const submitProof=document.getElementById("sutilRenewalModalSubmitProof");

  if(!plan || !sutilMembershipQuote || (String(sutilMembershipQuote.plan_code||sutilSelectedMembershipPlan||"").trim() && String(sutilMembershipQuote.plan_code||sutilSelectedMembershipPlan||"").trim()!==String(plan).trim())){
    if(msg){msg.style.color="#a21d18";msg.textContent="El cálculo del plan ya no está disponible. Cierra esta ventana y vuelve a seleccionar el plan.";}
    return;
  }
  if(withProof && !file){
    if(msg){msg.style.color="#a21d18";msg.textContent="Selecciona primero la foto o PDF del comprobante, o usa “Enviar comprobante después”.";}
    return;
  }

  const buttons=document.querySelectorAll("#sutilRenewalModalBackdrop button");
  buttons.forEach(b=>b.disabled=true);
  if(msg){msg.style.color="#1769aa";msg.textContent=withProof?"Creando solicitud y enviando comprobante…":"Creando solicitud…";}

  try{
    const r=await api("/api/admin/sutil-support/requests",{
      method:"POST",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({request_type:"renewal",plan_code:plan,payment_method_id:methodId,note})
    });

    if(withProof && file){
      const fd=new FormData();
      fd.append("file",file);
      await api(`/api/admin/sutil-support/requests/${r.id}/proof`,{method:"POST",body:fd});
    }

    if(msg){
      msg.style.color="#148343";
      msg.textContent=withProof
        ?"✓ Solicitud y comprobante enviados. Sutil revisará el pago."
        :"✓ Solicitud creada. Puedes adjuntar el comprobante después en “Mis solicitudes”.";
    }

    document.getElementById("sutilRenewalNote").value="";
    sutilSelectedMembershipPlan="";
    sutilMembershipQuote=null;
    const hidden=document.getElementById("sutilRenewalPlan");if(hidden)hidden.value="";
    const box=document.getElementById("sutilPlanQuote");if(box){box.className="sutil-plan-quote";box.innerHTML="";}
    const submit=document.getElementById("sutilRenewalSubmit");if(submit)submit.disabled=true;

    await loadSutilSupport();
    setTimeout(()=>closeSutilRenewalModal(),900);
  }catch(e){
    if(msg){msg.style.color="#a21d18";msg.textContent=e.message||"No fue posible enviar la solicitud.";}
  }finally{
    buttons.forEach(b=>b.disabled=false);
  }
}

async function createSutilRenewalRequest(){
  return openSutilRenewalModalSafe();
}
async function createSutilRoutesRequest(){
  const methodId=Number(document.getElementById("sutilRoutesMethod").value||0)||null;
  const routes=Number(document.getElementById("sutilExtraRoutes").value||0);
  const note=document.getElementById("sutilRoutesNote").value.trim()||null;
  if(routes<1)return alert("Indica cuántas rutas adicionales necesitas.");
  try{
    await api("/api/admin/sutil-support/requests",{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({request_type:"route_increase",routes_requested:routes,payment_method_id:methodId,note})});
    alert("Solicitud enviada. Sutil preparará la cotización.");
    document.getElementById("sutilRoutesNote").value="";await loadSutilSupport();
  }catch(e){alert(e.message)}
}
async function uploadSutilSupportProof(id){
  const input=document.getElementById(`sutilProof${id}`);const file=input?.files?.[0];
  if(!file)return alert("Selecciona el comprobante.");
  const fd=new FormData();fd.append("file",file);
  try{
    const r=await api(`/api/admin/sutil-support/requests/${id}/proof`,{method:"POST",body:fd});
    alert(r.message||"Comprobante enviado");await loadSutilSupport();
  }catch(e){alert(e.message)}
}


document.addEventListener("DOMContentLoaded",()=>{
  const modal=document.getElementById("sutilRenewalModalBackdrop");
  if(!modal){
    console.error("Sutil: modal de renovación no encontrado en el DOM.");
  }else{
    console.info("Sutil: modal de renovación cargado correctamente.");
  }
});

document.addEventListener("keydown",e=>{
  if(e.key==="Escape" && document.getElementById("sutilRenewalModalBackdrop")?.classList.contains("open")){
    closeSutilRenewalModal();
  }
});
document.addEventListener("click",e=>{
  const backdrop=document.getElementById("sutilRenewalModalBackdrop");
  if(backdrop && e.target===backdrop)closeSutilRenewalModal();
});

function startSutilSupportPolling(){
  stopSutilSupportPolling();
  sutilSupportPollingTimer=setInterval(()=>{if(currentSectionId==="sutilSupportSection"&&navigator.onLine)loadSutilSupport(true)},12000);
}
function stopSutilSupportPolling(){
  if(sutilSupportPollingTimer){clearInterval(sutilSupportPollingTimer);sutilSupportPollingTimer=null}
}


const annualMonthNames = [
  "ENERO","FEBRERO","MARZO","ABRIL","MAYO","JUNIO",
  "JULIO","AGOSTO","SEPTIEMBRE","OCTUBRE","NOVIEMBRE","DICIEMBRE"
];
const annualMetricLabels = {
  principal:"Crédito realizado",
  collected:"Cobrado",
  interest_collected:"Ganancia cobrada",
  expenses:"Gastos",
  net_profit:"Utilidad neta",
  pending_due:"Cuotas por cobrar",
  overdue_due:"Cuotas vencidas"
};
let annualReportData = null;
let annualSelectedMetric = "principal";
let annualChartMode = "line";

function annualGrowthHtml(value,key){
  if(value==null)return "";
  const n=Number(value||0);
  if(Math.abs(n)<0.005){
    return `<span class="annual-growth neutral">• 0%</span>`;
  }
  const up=n>0;
  // En gastos y cuotas vencidas, subir es desfavorable: rojo.
  // Bajar es favorable: verde. El resto usa la lectura normal.
  const inverseColor = key==="expenses" || key==="overdue_due";
  const favorable = inverseColor ? !up : up;
  const cls=favorable?"up":"down";
  return `<span class="annual-growth ${cls}">${up?"▲":"▼"} ${Math.abs(n).toFixed(1)}%</span>`;
}

function annualRow(label,value,growth,key,extra=""){
  return `
    <div class="annual-month-row">
      <div class="annual-label">${label}</div>
      <div class="annual-value">${money(value)}${annualGrowthHtml(growth,key)}${extra}</div>
    </div>`;
}

function renderAnnualReport(data){
  annualReportData=data;
  const totals=data.totals||{};
  const context=document.getElementById("annualReportContext");
  const routeText=data.route_name?` · Ruta: ${data.route_name}`:" · Todas las rutas";
  context.textContent=`Año ${data.year}${routeText}`;

  document.getElementById("annualReportSummary").innerHTML=
    reportMetricCard("Crédito realizado",money(totals.principal||0),`${totals.loans_count||0} crédito(s)`) +
    reportMetricCard("Pagos recibidos",money(totals.collected||0),`${totals.payments_count||0} pago(s)`,"status-current") +
    reportMetricCard("Ganancia cobrada",money(totals.interest_collected||0),"Interés efectivamente recibido","status-current") +
    reportMetricCard("Gastos",money(totals.expenses||0),`${totals.expenses_count||0} gasto(s)`) +
    reportMetricCard("Utilidad neta",money(totals.net_profit||0),"Ganancia cobrada menos gastos",Number(totals.net_profit||0)<0?"status-overdue":"status-current") +
    reportMetricCard("Cuotas por cobrar",money(totals.pending_due||0),`${totals.pending_installments||0} pendiente(s)`) +
    reportMetricCard("Cuotas vencidas",money(totals.overdue_due||0),`${totals.overdue_installments||0} vencida(s)`,Number(totals.overdue_due||0)>0?"status-overdue":"status-current");

  document.getElementById("annualReportMonths").innerHTML=(data.monthly||[]).map(row=>{
    const g=row.growth||{};
    return `
      <div class="card annual-month-card">
        <div class="annual-month-title"><span style="font-size:30px">📅</span><strong>${annualMonthNames[(row.month||1)-1]}</strong></div>
        <div class="annual-month-values">
          ${annualRow("Crédito realizado",row.principal,g.principal,"principal")}
          ${annualRow("Pagos recibidos",row.collected,g.collected,"collected")}
          ${annualRow("Ganancia cobrada",row.interest_collected,g.interest_collected,"interest_collected")}
          ${annualRow("Gastos",row.expenses,g.expenses,"expenses")}
          ${annualRow("Utilidad neta",row.net_profit,g.net_profit,"net_profit")}
          ${annualRow("Cuotas por cobrar",row.pending_due,g.pending_due,"pending_due",` <small>(${row.pending_installments||0})</small>`)}
          ${annualRow("Cuotas vencidas",row.overdue_due,g.overdue_due,"overdue_due",` <small>(${row.overdue_installments||0})</small>`)}
        </div>
      </div>`;
  }).join("");

  document.getElementById("annualReportNote").textContent=
    "Los porcentajes comparan cada mes con el mes anterior. Cuotas por cobrar y vencidas muestran el saldo pendiente actual de las cuotas programadas en cada mes.";

  setTimeout(drawAnnualReportChart,30);
}

function annualChartColor(){
  const theme=reportChartTheme();
  return theme.principal;
}

function renderAnnualMetricSummary(){
  const box=document.getElementById("annualMetricSummary");if(!box||!annualReportData)return;
  const rows=annualReportData.monthly||[];if(!rows.length){box.innerHTML="";return;}
  const values=rows.map(r=>Number(r[annualSelectedMetric]||0)),total=values.reduce((a,b)=>a+b,0),avg=total/Math.max(1,values.length);
  let maxIndex=0;values.forEach((v,i)=>{if(v>values[maxIndex])maxIndex=i;});const month=annualMonthNames[(rows[maxIndex]?.month||maxIndex+1)-1]||"—";
  box.innerHTML=`<div class="annual-summary-item"><span>Total anual</span><strong>${money(total)}</strong><small>${annualMetricLabels[annualSelectedMetric]||"Métrica"}</small></div><div class="annual-summary-item"><span>Promedio mensual</span><strong>${money(avg)}</strong><small>12 meses</small></div><div class="annual-summary-item"><span>Mejor mes</span><strong>${month}</strong><small>${money(values[maxIndex])}</small></div>`;
}
function drawAnnualReportChart(){
  if(!annualReportData)return;const canvas=document.getElementById("annualReportChart");if(!canvas)return;
  const rows=annualReportData.monthly||[],{ctx,width,height,isMobile}=prepareCanvas(canvas,420);ctx.clearRect(0,0,width,height);
  if(!rows.length){ctx.fillStyle=reportChartTheme().muted;ctx.font="15px Arial";ctx.fillText("No hay datos para este año.",20,45);renderAnnualMetricSummary();return;}
  const pad=isMobile?{left:52,right:12,top:28,bottom:50}:{left:68,right:24,top:30,bottom:56},chartW=Math.max(180,width-pad.left-pad.right),chartH=Math.max(220,height-pad.top-pad.bottom);
  const values=rows.map(r=>Number(r[annualSelectedMetric]||0)),rawMax=Math.max(0,...values),rawMin=Math.min(0,...values),span=Math.max(1,rawMax-rawMin),extra=span*.10,max=rawMax+extra,min=rawMin<0?rawMin-extra:0,range=Math.max(1,max-min),yFor=v=>pad.top+((max-v)/range)*chartH,zeroY=yFor(0),theme=reportChartTheme(),primary=annualChartColor();
  ctx.font=isMobile?"9px Arial":"10px Arial";ctx.fillStyle=theme.muted;for(let i=0;i<=4;i++){const y=pad.top+chartH*(i/4),value=max-range*(i/4);ctx.strokeStyle=theme.grid;ctx.globalAlpha=.22;ctx.beginPath();ctx.moveTo(pad.left,y);ctx.lineTo(width-pad.right,y);ctx.stroke();ctx.globalAlpha=1;ctx.fillText(compactMoney(value),4,y+4);}
  if(annualChartMode==="bar"){
    const slot=chartW/Math.max(1,rows.length),barW=Math.min(34,slot*.55);rows.forEach((row,index)=>{const value=values[index],valueY=yFor(value),x=pad.left+index*slot+(slot-barW)/2,y=Math.min(zeroY,valueY),h=Math.max(2,Math.abs(zeroY-valueY));ctx.fillStyle=primary;routeReportRoundRect(ctx,x,y,barW,h,Math.min(6,barW/2));ctx.fill();});
  }else{
    ctx.strokeStyle=primary;ctx.lineWidth=3;ctx.beginPath();rows.forEach((row,index)=>{const x=rows.length===1?pad.left+chartW/2:pad.left+chartW*(index/(rows.length-1)),y=yFor(values[index]);if(index===0)ctx.moveTo(x,y);else ctx.lineTo(x,y);});ctx.stroke();rows.forEach((row,index)=>{const x=rows.length===1?pad.left+chartW/2:pad.left+chartW*(index/(rows.length-1)),y=yFor(values[index]);ctx.fillStyle=primary;ctx.beginPath();ctx.arc(x,y,4.5,0,Math.PI*2);ctx.fill();});
  }
  ctx.fillStyle=theme.text;ctx.font=isMobile?"700 9px Arial":"700 10px Arial";rows.forEach((row,index)=>{const x=rows.length===1?pad.left+chartW/2:pad.left+chartW*(index/(rows.length-1));const lab=annualMonthNames[(row.month||index+1)-1].slice(0,3);const mw=ctx.measureText(lab).width;ctx.fillText(lab,x-mw/2,height-20);});renderAnnualMetricSummary();
}
function setAnnualMetric(metric,button){
  annualSelectedMetric=metric;
  document.querySelectorAll("[data-annual-metric]").forEach(b=>b.classList.remove("annual-metric-active"));
  if(button)button.classList.add("annual-metric-active");
  drawAnnualReportChart();
}

window.addEventListener("orientationchange",()=>setTimeout(()=>{try{fitReportTopKpiValues();}catch(_){ }},180));
let sutilReportResizeTimer=null;
window.addEventListener("resize",()=>{
  clearTimeout(sutilReportResizeTimer);
  sutilReportResizeTimer=setTimeout(()=>{
    try{fitReportTopKpiValues();}catch(_){ }
    try{
      if(document.getElementById("reportOverviewPane")?.style.display!=="none" && sutilReportData?.monthly) drawLineChart(document.getElementById("monthlyReportChart"),sutilReportData.monthly);
    }catch(_){ }
    try{
      if(document.getElementById("reportRoutesPane")?.style.display!=="none" && sutilRouteReportState?.routes) drawRouteBars(document.getElementById("routeReportChart"),sutilRouteReportState.routes);
    }catch(_){ }
    try{
      if(document.getElementById("reportAnnualPane")?.style.display!=="none" && annualReportData) drawAnnualReportChart();
    }catch(_){ }
  },160);
});

function setAnnualChartMode(mode){
  annualChartMode=mode;
  const line=document.getElementById("annualLineButton");
  const bar=document.getElementById("annualBarButton");
  line.classList.toggle("annual-mode-active",mode==="line");
  bar.classList.toggle("annual-mode-active",mode==="bar");
  drawAnnualReportChart();
}

async function loadAnnualReport(){
  try{
    const yearInput=document.getElementById("annualReportYear");
    const year=Number(yearInput.value||new Date().getFullYear());
    const params=new URLSearchParams({year:String(year)});
    if(reportRoute.value)params.set("route_id",reportRoute.value);
    const data=await api("/api/admin/reports/annual?"+params.toString());
    renderAnnualReport(data);
  }catch(e){
    alert(e.message);
  }
}

function showAnnualReportPane(button){
  showReportPane("reportAnnualPane",button);
  const yearInput=document.getElementById("annualReportYear");
  if(!yearInput.value)yearInput.value=String(new Date().getFullYear());
  loadAnnualReport();
}

function annualExportText(){
  const lang=String(window.SUTIL_ACTIVE_LANGUAGE||"es").toLowerCase();
  const dict={
    es:{title:"Resumen anual",year:"Año",route:"Ruta",allRoutes:"Todas las rutas",metric:"Métrica",mode:"Gráfico",line:"Línea",bar:"Columnas",summary:"Resumen",principal:"Crédito realizado",collected:"Pagos recibidos",interest:"Ganancia cobrada",expenses:"Gastos",profit:"Utilidad neta",pending:"Cuotas por cobrar",overdue:"Cuotas vencidas",generated:"Generado",consult:"Consulta primero el resumen anual.",imageError:"No fue posible crear la imagen del resumen anual.",shareFallback:"El menú para compartir no estuvo disponible; se descargó la imagen.",shareTitle:"Resumen anual de Sutil"},
    pt:{title:"Resumo anual",year:"Ano",route:"Rota",allRoutes:"Todas as rotas",metric:"Métrica",mode:"Gráfico",line:"Linha",bar:"Colunas",summary:"Resumo",principal:"Crédito realizado",collected:"Pagamentos recebidos",interest:"Ganho recebido",expenses:"Despesas",profit:"Lucro líquido",pending:"Parcelas a receber",overdue:"Parcelas vencidas",generated:"Gerado",consult:"Consulte primeiro o resumo anual.",imageError:"Não foi possível criar a imagem do resumo anual.",shareFallback:"O menu de compartilhamento não estava disponível; a imagem foi baixada.",shareTitle:"Resumo anual da Sutil"},
    en:{title:"Annual summary",year:"Year",route:"Route",allRoutes:"All routes",metric:"Metric",mode:"Chart",line:"Line",bar:"Columns",summary:"Summary",principal:"Credit issued",collected:"Payments received",interest:"Collected profit",expenses:"Expenses",profit:"Net profit",pending:"Installments due",overdue:"Overdue installments",generated:"Generated",consult:"Run the annual summary first.",imageError:"The annual summary image could not be created.",shareFallback:"Sharing was unavailable; the image was downloaded.",shareTitle:"Sutil annual summary"}
  };
  return dict[lang]||dict.es;
}
function annualMetricExportLabel(metric){
  const t=annualExportText();
  return {principal:t.principal,collected:t.collected,interest_collected:t.interest,expenses:t.expenses,net_profit:t.profit,pending_due:t.pending,overdue_due:t.overdue}[metric]||t.summary;
}
function annualExportRouteName(){
  if(annualReportData?.route_name)return annualReportData.route_name;
  const select=document.getElementById("reportRoute");
  const option=select?.options?.[select.selectedIndex];
  return option?.text||annualExportText().allRoutes;
}
function annualExportCanvas(){
  if(!annualReportData)throw new Error(annualExportText().consult);
  const t=annualExportText(), data=annualReportData, totals=data.totals||{}, rows=data.monthly||[];
  const width=1400, height=1760;
  const canvas=document.createElement("canvas"); canvas.width=width; canvas.height=height;
  const ctx=canvas.getContext("2d");
  ctx.fillStyle="#f4f7fb";ctx.fillRect(0,0,width,height);
  ctx.fillStyle="#1f2c3b";ctx.font="700 44px Arial";ctx.fillText(t.title,70,78);
  ctx.font="21px Arial";ctx.fillStyle="#5e6a76";
  ctx.fillText(`${t.year}: ${data.year||document.getElementById("annualReportYear")?.value||"—"}`,70,118);
  ctx.fillText(`${t.route}: ${annualExportRouteName()}`,70,150);
  ctx.fillText(`${t.metric}: ${annualMetricExportLabel(annualSelectedMetric)} · ${t.mode}: ${annualChartMode==="bar"?t.bar:t.line}`,70,182);

  const cards=[
    [t.principal,totals.principal||0],
    [t.collected,totals.collected||0],
    [t.interest,totals.interest_collected||0],
    [t.expenses,totals.expenses||0],
    [t.profit,totals.net_profit||0],
    [t.overdue,totals.overdue_due||0]
  ];
  const cardW=610, cardH=120, gap=24, startY=225;
  cards.forEach((card,index)=>{
    const col=index%2,row=Math.floor(index/2),x=70+col*(cardW+gap),y=startY+row*(cardH+18);
    ctx.fillStyle="#ffffff";routeReportRoundRect(ctx,x,y,cardW,cardH,20);ctx.fill();
    ctx.fillStyle="#5e6a76";ctx.font="20px Arial";ctx.fillText(card[0],x+24,y+36);
    ctx.fillStyle="#1f2c3b";ctx.font="700 31px Arial";ctx.fillText(money(card[1]),x+24,y+82);
  });

  const chartY=startY+3*(cardH+18)+24;
  ctx.fillStyle="#ffffff";routeReportRoundRect(ctx,50,chartY,width-100,500,24);ctx.fill();
  const chart=document.getElementById("annualReportChart");
  if(chart)ctx.drawImage(chart,75,chartY+28,width-150,420);
  ctx.fillStyle="#1f2c3b";ctx.font="700 27px Arial";ctx.fillText(annualMetricExportLabel(annualSelectedMetric),80,chartY+478);

  const tableY=chartY+535;
  ctx.fillStyle="#1f2c3b";ctx.font="700 29px Arial";ctx.fillText(annualMetricExportLabel(annualSelectedMetric)+" · "+t.year+" "+(data.year||""),70,tableY);
  const colW=(width-140)/3, rowH=72;
  rows.forEach((row,index)=>{
    const col=index%3,rr=Math.floor(index/3),x=70+col*colW,y=tableY+28+rr*rowH;
    ctx.fillStyle="#ffffff";routeReportRoundRect(ctx,x,y,colW-14,rowH-10,14);ctx.fill();
    ctx.fillStyle="#5e6a76";ctx.font="700 17px Arial";ctx.fillText(annualMonthNames[(row.month||1)-1],x+18,y+24);
    ctx.fillStyle="#1f2c3b";ctx.font="700 23px Arial";ctx.fillText(money(row[annualSelectedMetric]||0),x+18,y+50);
  });
  ctx.fillStyle="#7b8794";ctx.font="16px Arial";ctx.fillText(`${t.generated}: ${new Date().toLocaleString()}`,70,height-34);
  return canvas;
}
async function annualReportImageBlob(){
  const canvas=annualExportCanvas();
  return await new Promise((resolve,reject)=>canvas.toBlob(b=>b?resolve(b):reject(new Error(annualExportText().imageError)),"image/png"));
}
async function downloadAnnualReportImage(){
  try{const blob=await annualReportImageBlob();downloadBlob(blob,`resumen_anual_${annualReportData?.year||Date.now()}.png`);}catch(e){alert(e.message||String(e));}
}
async function shareAnnualReport(){
  try{
    const blob=await annualReportImageBlob();
    const file=new File([blob],`resumen_anual_${annualReportData?.year||Date.now()}.png`,{type:"image/png"});
    if(navigator.canShare&&navigator.canShare({files:[file]})&&navigator.share){await navigator.share({files:[file],title:annualExportText().shareTitle,text:annualExportText().shareTitle});}
    else{downloadBlob(blob,file.name);alert(annualExportText().shareFallback);}
  }catch(e){alert(e.message||String(e));}
}
async function downloadAnnualReportPdf(){
  try{
    const canvas=annualExportCanvas();
    const blob=sutilReceiptPdfBlob(canvas);
    downloadBlob(blob,`resumen_anual_${annualReportData?.year||Date.now()}.pdf`);
  }catch(e){alert(e.message||String(e));}
}
function printAnnualReport(){downloadAnnualReportPdf();}
window.addEventListener("afterprint",()=>document.body.classList.remove("printing-annual-report"));
window.addEventListener("resize",()=>{
  const pane=document.getElementById("reportAnnualPane");
  if(pane && pane.style.display!=="none")drawAnnualReportChart();
});

async function restoreAdminSession(){
  if(!token)return;
  try{
    currentUser=await api("/api/me");
    startSutilGeneralNotificationPolling();
    accessLanguageCode=["es","pt","en"].includes(String(accessLanguageCode||"").toLowerCase())
      ? String(accessLanguageCode).toLowerCase()
      : (readPersistedSutilCompanyLanguage?.() || currentUser?.language || "es");
    persistSutilCompanyLanguage(accessLanguageCode);
    const accessLanguageSelect=document.getElementById("accessLanguage");
    if(accessLanguageSelect)accessLanguageSelect.value=accessLanguageCode;
    const settingsLanguageSelect=document.getElementById("settingLanguage");
    if(settingsLanguageSelect)settingsLanguageSelect.value=accessLanguageCode;
    applySutilLanguage(accessLanguageCode);
    selectedProfile = currentUser.role === "company_owner"
      ? "owner"
      : (["admin","company_admin"].includes(currentUser.role) ? "admin" : "staff");
    document.getElementById("profileChooser").style.display="none";
    document.getElementById("login").style.display="none";
    await enterApplication();
  }catch(error){
    if(error?.sessionExpired)return;
    if(!navigator.onLine){
      setOfflineStatus("offline","abre Sutil una vez con Internet para preparar este dispositivo");
      return;
    }
    token="";
    localStorage.removeItem("sutil_admin_token");
    sessionStorage.removeItem("sutil_admin_token");
  }
}

prepareOfflineMode();
restoreAdminSession();


const countryDefaults = {
  BR:{currency:"BRL",symbol:"R$"}, CO:{currency:"COP",symbol:"$"}, PE:{currency:"PEN",symbol:"S/"},
  MX:{currency:"MXN",symbol:"$"}, AR:{currency:"ARS",symbol:"$"}, CR:{currency:"CRC",symbol:"₡"},
  PY:{currency:"PYG",symbol:"₲"}, CL:{currency:"CLP",symbol:"$"}, EC:{currency:"USD",symbol:"US$"},
  UY:{currency:"UYU",symbol:"$U"}, ES:{currency:"EUR",symbol:"€"}, US:{currency:"USD",symbol:"US$"}
};
function syncCountryCurrency(){
  const d=countryDefaults[settingCountry.value]; if(!d)return;
  settingCurrencyCode.value=d.currency; settingCurrencySymbol.value=d.symbol;
}
function sutilHexRgb(hex){
  const value=String(hex||"").trim().replace("#","");
  if(!/^[0-9a-fA-F]{6}$/.test(value))return null;
  return {
    r:parseInt(value.slice(0,2),16),
    g:parseInt(value.slice(2,4),16),
    b:parseInt(value.slice(4,6),16)
  };
}
function sutilContrast(hex){
  const rgb=sutilHexRgb(hex);
  if(!rgb)return "#ffffff";
  const luminance=(0.299*rgb.r + 0.587*rgb.g + 0.114*rgb.b);
  return luminance>165 ? "#17202a" : "#ffffff";
}
function sutilSoft(hex,opacity=.11){
  const rgb=sutilHexRgb(hex);
  if(!rgb)return "rgba(23,105,170,.11)";
  return `rgba(${rgb.r},${rgb.g},${rgb.b},${opacity})`;
}
function setCompanyTheme(primary,secondary,background){
  primary=primary||"#1769aa";
  secondary=secondary||"#148343";
  background=background||"#eef2f5";

  const root=document.documentElement;
  root.style.setProperty("--sutil-primary",primary);
  root.style.setProperty("--sutil-secondary",secondary);
  root.style.setProperty("--sutil-background",background);
  root.style.setProperty("--primary",primary);
  root.style.setProperty("--secondary",secondary);
  root.style.setProperty("--sutil-primary-text",sutilContrast(primary));
  root.style.setProperty("--sutil-secondary-text",sutilContrast(secondary));
  root.style.setProperty("--sutil-primary-soft",sutilSoft(primary,.10));
  root.style.setProperty("--sutil-secondary-soft",sutilSoft(secondary,.10));

  document.body.style.setProperty("background",background,"important");
}
function previewCompanyTheme(){
  // La apariencia del panel se controla únicamente con el modo Claro/Oscuro.
}
function applyCompanyTheme(data){
  // Se ignoran colores personalizados antiguos para evitar problemas de contraste.
  if(settingPrimaryColor) settingPrimaryColor.value="#1769aa";
  if(settingSecondaryColor) settingSecondaryColor.value="#148343";
  if(settingBackgroundColor) settingBackgroundColor.value="#eef2f5";
}
function restoreDefaultTheme(){
  if(settingPrimaryColor) settingPrimaryColor.value="#1769aa";
  if(settingSecondaryColor) settingSecondaryColor.value="#148343";
  if(settingBackgroundColor) settingBackgroundColor.value="#eef2f5";
}
function renderCompanyLogo(url,name){
  if(settingCompanyName)settingCompanyName.value=name||currentUser?.company_name||"Empresa";
  if(!settingCompanyLogoPreview)return;
  if(url){
    settingCompanyLogoPreview.innerHTML=`<img src="${url}?v=${Date.now()}" alt="Logo" style="width:100%;height:100%;object-fit:contain">`;
  }else{
    const initials=String(name||currentUser?.company_name||"E").trim().split(/\s+/).slice(0,2).map(x=>x[0]||"").join("").toUpperCase()||"E";
    settingCompanyLogoPreview.textContent=initials;
  }
}


async function saveCompanyName(){
  const input=document.getElementById("settingCompanyName");
  const result=document.getElementById("companyLogoResult");
  const name=String(input?.value||"").trim().replace(/\s+/g," ");
  if(!name){
    result.style.display="block"; result.className="result error";
    result.textContent="Escribe el nombre de la empresa."; return;
  }
  result.style.display="block"; result.className="result"; result.textContent="Guardando nombre...";
  try{
    const r=await api("/api/admin/company-name",{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify({name})});
    if(currentUser)currentUser.company_name=r.company_name||name;
    renderCompanyLogo(r.logo_url,r.company_name||name);
    result.className="result";
    result.textContent=r.message||"Nombre de la empresa guardado correctamente";
  }catch(e){ result.className="result error"; result.textContent=e.message; }
}

async function uploadCompanyLogo(){
  companyLogoResult.style.display="block";
  companyLogoResult.className="result";
  const file=settingCompanyLogo.files?.[0];
  if(!file){
    companyLogoResult.className="result error";
    companyLogoResult.textContent="Selecciona una imagen para el logo.";
    return;
  }
  companyLogoResult.textContent="Guardando logo...";
  const fd=new FormData();
  fd.append("file",file);
  try{
    const r=await api("/api/admin/company-logo",{method:"POST",body:fd});
    renderCompanyLogo(r.logo_url,r.company_name);
    settingCompanyLogo.value="";
    companyLogoResult.className="result";
    companyLogoResult.textContent=r.message||"Logo guardado correctamente";
  }catch(e){
    companyLogoResult.className="result error";
    companyLogoResult.textContent=e.message;
  }
}

async function removeCompanyLogo(){
  companyLogoResult.style.display="block";
  companyLogoResult.className="result";
  companyLogoResult.textContent="Quitando logo...";
  try{
    const r=await api("/api/admin/company-logo",{method:"DELETE"});
    renderCompanyLogo(null,document.getElementById("settingCompanyName")?.value||currentUser?.company_name||"Empresa");
    settingCompanyLogo.value="";
    companyLogoResult.textContent=r.message||"Logo eliminado correctamente";
  }catch(e){
    companyLogoResult.className="result error";
    companyLogoResult.textContent=e.message;
  }
}


function sutilBenefitsFieldSet(scope="legacy"){
  const prefix=scope==="client" ? "" : "legacy_";
  const get=id=>document.getElementById(prefix+id);
  return {
    programName:get("settingBenefitsProgramName"),
    headline:get("settingBenefitsHeadline"),
    description:get("settingBenefitsDescription"),
    benefit1Title:get("settingBenefit1Title"),
    benefit1Description:get("settingBenefit1Description"),
    benefit2Title:get("settingBenefit2Title"),
    benefit2Description:get("settingBenefit2Description"),
    benefit3Title:get("settingBenefit3Title"),
    benefit3Description:get("settingBenefit3Description"),
    terms:get("settingBenefitsTerms"),
    result:get("settingBenefitsResult")
  };
}

function sutilBenefitsSetValue(el,value){
  if(el)el.value=value??"";
}

function sutilBenefitsShowResult(result,message,isError=false){
  if(!result)return;
  result.style.display="block";
  result.className=isError ? "result error settings-save-status" : "result settings-save-status";
  result.textContent=message||"";
}

function sutilFriendlySettingsError(error,fallback="No fue posible guardar los cambios."){
  const detail=String(error?.message||"").trim();
  if(!detail)return fallback;
  if(/is not defined|ReferenceError|TypeError|Cannot read properties|undefined/i.test(detail)){
    return "No fue posible completar esta acción. Intenta nuevamente.";
  }
  return detail;
}

async function loadClientBenefitsProgramSettings(scope="legacy"){
  const fields=sutilBenefitsFieldSet(scope);
  try{
    const d=await api("/api/admin/client-benefits-settings");
    sutilBenefitsSetValue(fields.programName,d.program_name||"Benefícios VIP");
    sutilBenefitsSetValue(fields.headline,d.headline||"");
    sutilBenefitsSetValue(fields.description,d.description||"");
    sutilBenefitsSetValue(fields.benefit1Title,d.benefit_1_title||"");
    sutilBenefitsSetValue(fields.benefit1Description,d.benefit_1_description||"");
    sutilBenefitsSetValue(fields.benefit2Title,d.benefit_2_title||"");
    sutilBenefitsSetValue(fields.benefit2Description,d.benefit_2_description||"");
    sutilBenefitsSetValue(fields.benefit3Title,d.benefit_3_title||"");
    sutilBenefitsSetValue(fields.benefit3Description,d.benefit_3_description||"");
    sutilBenefitsSetValue(fields.terms,d.terms||"");
    if(fields.result){
      fields.result.style.display="none";
      fields.result.textContent="";
      fields.result.className="result settings-save-status";
    }
  }catch(e){
    sutilBenefitsShowResult(
      fields.result,
      sutilFriendlySettingsError(e,"No fue posible cargar los Beneficios."),
      true
    );
  }
}

async function saveClientBenefitsProgramSettings(scope="legacy"){
  const fields=sutilBenefitsFieldSet(scope);
  if(!fields.programName){
    const fallback=document.getElementById("settingsResult") || document.getElementById("clientAppConfigResult");
    sutilBenefitsShowResult(fallback,"No fue posible abrir la configuración de Beneficios.",true);
    return;
  }

  sutilBenefitsShowResult(fields.result,"Guardando...",false);

  try{
    const body={
      program_name:String(fields.programName?.value||"").trim()||"Benefícios VIP",
      headline:String(fields.headline?.value||"").trim(),
      description:String(fields.description?.value||"").trim(),
      benefit_1_title:String(fields.benefit1Title?.value||"").trim(),
      benefit_1_description:String(fields.benefit1Description?.value||"").trim(),
      benefit_2_title:String(fields.benefit2Title?.value||"").trim(),
      benefit_2_description:String(fields.benefit2Description?.value||"").trim(),
      benefit_3_title:String(fields.benefit3Title?.value||"").trim(),
      benefit_3_description:String(fields.benefit3Description?.value||"").trim(),
      terms:String(fields.terms?.value||"").trim()
    };

    const r=await api("/api/admin/client-benefits-settings",{
      method:"PUT",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify(body)
    });

    sutilBenefitsShowResult(
      fields.result,
      "✓ "+(r.message||"Beneficios guardados correctamente"),
      false
    );
  }catch(e){
    sutilBenefitsShowResult(
      fields.result,
      sutilFriendlySettingsError(e,"No fue posible guardar los Beneficios."),
      true
    );
  }
}

async function loadClientNotificationSettings(){
  try{
    const d=await api("/api/admin/client-notification-settings");
    settingClientNoticesEnabled.checked=d.enabled!==false;
    settingClientNoticeDays.value=Number.isFinite(Number(d.days_before))?Number(d.days_before):3;
    settingNoticeUpcoming.checked=d.upcoming_enabled!==false;
    settingNoticeDueToday.checked=d.due_today_enabled!==false;
    settingNoticeOverdue.checked=d.overdue_enabled!==false;
    settingNoticeReceiptPending.checked=d.receipt_pending_enabled!==false;
    settingNoticeReceiptRejected.checked=d.receipt_rejected_enabled!==false;
    settingClientNoticeResult.style.display="none";
  }catch(e){
    settingClientNoticeResult.style.display="block";
    settingClientNoticeResult.className="result error";
    settingClientNoticeResult.textContent=e.message;
  }
}

async function saveClientNotificationSettings(){
  settingClientNoticeResult.style.display="block";
  settingClientNoticeResult.className="result";
  settingClientNoticeResult.textContent="Guardando...";
  try{
    const days=Math.max(0,Math.min(30,parseInt(settingClientNoticeDays.value||"0",10)||0));
    settingClientNoticeDays.value=days;
    const body={
      enabled:settingClientNoticesEnabled.checked,
      days_before:days,
      upcoming_enabled:settingNoticeUpcoming.checked,
      due_today_enabled:settingNoticeDueToday.checked,
      overdue_enabled:settingNoticeOverdue.checked,
      receipt_pending_enabled:settingNoticeReceiptPending.checked,
      receipt_rejected_enabled:settingNoticeReceiptRejected.checked
    };
    const r=await api("/api/admin/client-notification-settings",{
      method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify(body)
    });
    settingClientNoticeResult.className="result";
    settingClientNoticeResult.textContent=r.message||"Recordatorios guardados";
  }catch(e){
    settingClientNoticeResult.className="result error";
    settingClientNoticeResult.textContent=e.message;
  }
}

async function loadCompanySettings(){
  try{
    const d=await api("/api/admin/company-settings");
    renderCompanyLogo(d.logo_url,d.company_name||currentUser?.company_name||"Empresa");
    const selectedUiLanguage=["es","pt","en"].includes(String(accessLanguageCode||"").toLowerCase()) ? String(accessLanguageCode).toLowerCase() : (d.language||"es");
    settingLanguage.value=selectedUiLanguage; settingCountry.value=d.country_code||"BR";
    persistSutilCompanyLanguage(selectedUiLanguage);
    applySutilLanguage(selectedUiLanguage);
    const accessLanguageSelect=document.getElementById("accessLanguage"); if(accessLanguageSelect)accessLanguageSelect.value=selectedUiLanguage;
    syncSutilMobileSelectButtons();
    settingCurrencyCode.value=d.currency_code||"BRL"; settingCurrencySymbol.value=d.currency_symbol||"R$";
    settingPrimaryColor.value="#1769aa"; settingSecondaryColor.value="#148343";
    settingBackgroundColor.value="#eef2f5"; settingFrequency.value=d.default_installment_frequency||"daily";
    settingIncludeSaturdays.checked=d.default_include_saturdays!==false;
    settingIncludeSundays.checked=!!d.default_include_sundays; settingPayCash.checked=!!d.default_payment_cash;
    settingPayPix.checked=!!d.default_payment_pix; settingPayTransfer.checked=d.default_payment_transfer!==false;
    const settingPayMixed=document.getElementById("settingPayMixed");
    const settingPayRenewal=document.getElementById("settingPayRenewal");
    if(settingPayMixed)settingPayMixed.checked=d.default_payment_mixed!==false;
    if(settingPayRenewal)settingPayRenewal.checked=d.default_payment_renewal!==false;
    applyEnabledDirectPaymentMethods(d);
    applyCompanyTheme(d);
    settingKeepSession.checked=keepSessionOpen.checked;
    const [access] = await Promise.all([
      api("/api/admin/access-settings"),
      loadClientBenefitsProgramSettings("legacy"),
      loadClientNotificationSettings()
    ]);
    settingAccessPhone.value=access.phone||"";
    settingAccessKey.value=access.access_key||"";
    settingAccessPassword.value="";
    settingLanguage.value=selectedUiLanguage;
    const accessLanguageSelectFinal=document.getElementById("accessLanguage");
    if(accessLanguageSelectFinal)accessLanguageSelectFinal.value=selectedUiLanguage;
    syncSutilMobileSelectButtons();
    reapplySutilLanguageOnce(0);
  }catch(e){ settingsResult.style.display="block";settingsResult.className="result error";settingsResult.textContent=e.message; }
}
function syncKeepSessionFromSettings(){
  keepSessionOpen.checked=settingKeepSession.checked;
  updateSessionPreference();
}

function openPasswordChangeFromSettings(){
  currentTempPassword.value="";
  newOwnerPassword.value="";
  confirmOwnerPassword.value="";
  forcePasswordMsg.textContent="";
  forcePasswordModal.classList.add("open");
}

async function saveAccessSettings(){
  accessSettingsResult.style.display="block";
  accessSettingsResult.className="result";
  accessSettingsResult.textContent="Guardando...";
  try{
    const r=await api("/api/admin/access-settings",{
      method:"PUT",
      headers:{"Content-Type":"application/json"},
      body:JSON.stringify({
        phone:settingAccessPhone.value.trim(),
        access_key:settingAccessKey.value.trim(),
        current_password:settingAccessPassword.value
      })
    });
    settingAccessPhone.value=r.phone||settingAccessPhone.value;
    settingAccessKey.value=r.access_key||settingAccessKey.value;
    settingAccessPassword.value="";
    if(currentUser){
      currentUser.company_key=r.access_key||currentUser.company_key;
    }
    if(activeCompanyBanner && currentUser){
      activeCompanyBanner.textContent=`${currentUser.company_name || "Empresa"} · ${r.access_key || ""}`;
    }
    accessSettingsResult.className="result";
    accessSettingsResult.textContent=r.message||"Datos de acceso actualizados";
  }catch(e){
    accessSettingsResult.className="result error";
    accessSettingsResult.textContent=e.message;
  }
}

function sutilCompanyLanguageStorageKey(){
  const companyId=currentUser?.company_id ?? "current";
  return `sutil_company_language_${companyId}`;
}
function persistSutilCompanyLanguage(lang){
  lang=["es","pt","en"].includes(String(lang||"").toLowerCase())?String(lang).toLowerCase():"es";
  try{localStorage.setItem(sutilCompanyLanguageStorageKey(),lang);}catch(_e){}
  if(currentUser) currentUser.language=lang;
  return lang;
}
function readPersistedSutilCompanyLanguage(){
  try{
    const lang=localStorage.getItem(sutilCompanyLanguageStorageKey());
    return ["es","pt","en"].includes(lang)?lang:null;
  }catch(_e){return null;}
}

async function saveCompanySettings(){
  settingsResult.style.display="block";settingsResult.className="result";settingsResult.textContent="Guardando...";
  try{
    const selectedLanguage=["es","pt","en"].includes(String(settingLanguage.value||"").toLowerCase())?String(settingLanguage.value).toLowerCase():"es";
    const body={language:selectedLanguage,country_code:settingCountry.value,currency_code:settingCurrencyCode.value,
      currency_symbol:settingCurrencySymbol.value,primary_color:settingPrimaryColor.value,secondary_color:settingSecondaryColor.value,
      background_color:settingBackgroundColor.value,
      default_include_saturdays:settingIncludeSaturdays.checked,
      default_include_sundays:settingIncludeSundays.checked,
      default_payment_cash:settingPayCash.checked,default_payment_pix:settingPayPix.checked,default_payment_transfer:settingPayTransfer.checked,
      default_payment_mixed:document.getElementById("settingPayMixed")?.checked!==false,
      default_payment_renewal:document.getElementById("settingPayRenewal")?.checked!==false,
      default_installment_frequency:settingFrequency.value};
    const r=await api("/api/admin/company-settings",{method:"PUT",headers:{"Content-Type":"application/json"},body:JSON.stringify(body)});
    const savedLanguage=persistSutilCompanyLanguage(r.language||body.language);
    accessLanguageCode=savedLanguage;
    try{localStorage.setItem("sutil_selected_language",savedLanguage);localStorage.setItem("sutil_access_language",savedLanguage);}catch(_e){}
    const accessLanguageSelect=document.getElementById("accessLanguage"); if(accessLanguageSelect)accessLanguageSelect.value=savedLanguage;
    settingLanguage.value=savedLanguage;
    applySutilLanguage(savedLanguage);
    syncSutilMobileSelectButtons();

    // Verificación real contra el servidor para no mostrar “guardado” si el backend no persistió el idioma.
    const verify=await api(`/api/admin/company-settings?_sutil_lang_verify=${Date.now()}`);
    const verifiedLanguage=["es","pt","en"].includes(String(verify.language||"").toLowerCase())?String(verify.language).toLowerCase():savedLanguage;
    persistSutilCompanyLanguage(verifiedLanguage);
    accessLanguageCode=verifiedLanguage;
    try{localStorage.setItem("sutil_selected_language",verifiedLanguage);localStorage.setItem("sutil_access_language",verifiedLanguage);}catch(_e){}
    const verifiedAccessLanguageSelect=document.getElementById("accessLanguage"); if(verifiedAccessLanguageSelect)verifiedAccessLanguageSelect.value=verifiedLanguage;
    settingLanguage.value=verifiedLanguage;
    applySutilLanguage(verifiedLanguage);
    syncSutilMobileSelectButtons();
    if(verifiedLanguage!==selectedLanguage){
      throw new Error("El idioma no quedó guardado en el servidor. Intenta guardar nuevamente.");
    }
    applyEnabledDirectPaymentMethods(verify);

    settingsResult.className="result settings-save-status";
    settingsResult.textContent="✓ "+(r.message||"Configuración guardada correctamente");
    applyCompanyTheme({
      primary_color:r.primary_color||body.primary_color,
      secondary_color:r.secondary_color||body.secondary_color,
      background_color:r.background_color||body.background_color
    });
  }catch(e){
    settingsResult.className="result error settings-save-status";
    settingsResult.textContent=sutilFriendlySettingsError(e,"No fue posible guardar la configuración.");
  }
}

document.addEventListener("keydown",event=>{
  if(event.key==="Escape")closeOwnerQuickMenu();
});

(function installSutilAiActionPersistence(){
  const install=()=>{
    const messages=document.getElementById("sutilAiMessages");
    if(!messages || messages.dataset.actionPersistence==="1")return;
    messages.dataset.actionPersistence="1";
    let busy=false;
    new MutationObserver(()=>{
      if(busy || !SUTIL_AI_LAST_ACTION_STATE)return;
      const assistants=messages.querySelectorAll(".sutil-ai-msg.assistant");
      const last=assistants[assistants.length-1];
      if(last && !last.querySelector(".sutil-ai-inline-actions")){
        busy=true;
        setTimeout(()=>{
          try{renderSutilAiActions(SUTIL_AI_LAST_ACTION_STATE,true);}finally{busy=false;}
        },20);
      }
    }).observe(messages,{childList:true,subtree:true});
  };
  if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",install);
  else install();
})();

initChartZoomModal();
</script>
<script>
/* SUTIL v1.3.78 · idioma global del panel empresario (ES/PT/EN).
   Traduce etiquetas estáticas y dinámicas sin alterar IDs, rutas, valores ni datos del cliente. */
const SUTIL_UI_I18N={
pt:{
"Sutil · Administración":"Sutil · Administração","Administración":"Administração","Configuración de la empresa":"Configurações da empresa","Estos ajustes son propios de esta empresa y solo pueden ser modificados por el empresario.":"Estas configurações pertencem a esta empresa e só podem ser alteradas pelo empresário.",
"Idioma, país y moneda":"Idioma, país e moeda","Idioma":"Idioma","País":"País","Moneda":"Moeda","Símbolo":"Símbolo","Nombre y logo de la empresa":"Nome e logotipo da empresa","Empresa":"Empresa","Guardar logo":"Salvar logotipo","Quitar logo":"Remover logotipo",
"Personal en operación":"Equipe em operação","Cajas abiertas":"Caixas abertas","Módulos":"Módulos","Gestión de clientes":"Gestão de clientes","Clientes, créditos, cobros, comprobantes y comunicación.":"Clientes, créditos, cobranças, comprovantes e comunicação.","Operación y rutas":"Operação e rotas","Equipo, rutas, caja, gastos y control de la operación diaria.":"Equipe, rotas, caixa, despesas e controle da operação diária.","Análisis y control":"Análise e controle","Indicadores, cartera, rutas y rendimiento de la empresa.":"Indicadores, carteira, rotas e desempenho da empresa.","Configuración y herramientas":"Configurações e ferramentas","Métodos de cobro e incorporación de información histórica.":"Métodos de cobrança e incorporação de informações históricas.","Métodos de cobro, WhatsApp Business e incorporación de información histórica.":"Métodos de cobrança, WhatsApp Business e incorporação de informações históricas.","Funciones organizadas por área para encontrar cada herramienta más rápido.":"Funções organizadas por área para encontrar cada ferramenta mais rapidamente.","Acceso principal":"Acesso principal","Ruta · Caja · Equipo":"Rota · Caixa · Equipe","Indicadores clave":"Indicadores-chave","Ajustes y soporte":"Ajustes e suporte","Área principal":"Área principal","Centro de reportes":"Central de relatórios","Información financiera, cartera, rutas, gastos y disponibilidad para tomar decisiones de la empresa.":"Informações financeiras, carteira, rotas, despesas e disponibilidade para apoiar decisões da empresa.","Áreas de análisis":"Áreas de análise","Selecciona el reporte que deseas consultar.":"Selecione o relatório que deseja consultar.","Selecciona un área de análisis":"Selecione uma área de análise","Los indicadores generales permanecen visibles arriba y aquí aparecerá únicamente el reporte elegido.":"Os indicadores gerais permanecem visíveis acima e aqui aparecerá somente o relatório selecionado.","Clientes":"Clientes","Nuevo, registrados, búsqueda y detalle completo":"Novo, cadastrados, busca e detalhes completos","Créditos":"Créditos","Créditos":"Créditos","Crear y consultar cuotas":"Criar e consultar parcelas","Cobros":"Cobranças","Efectivo, PIX y abonos":"Dinheiro, PIX e pagamentos","Comprobantes de pago":"Comprovantes de pagamento","Confirmar o rechazar":"Confirmar ou rejeitar","Chats con clientes":"Chats com clientes","Personal y permisos":"Equipe e permissões","ADM, cobradores, rutas y permisos":"ADM, cobradores, rotas e permissões","Caja diaria":"Caixa diária","Apertura, movimientos y cierre":"Abertura, movimentações e fechamento","Movimientos de base":"Movimentações de caixa","Adicionar, retirar o transferir":"Adicionar, retirar ou transferir","Reporte de caja":"Relatório de caixa","Historial completo de movimientos":"Histórico completo de movimentações","Gastos":"Despesas","Registrar gastos por ruta":"Registrar despesas por rota","Reportes":"Relatórios","Ruta, cliente y rendimiento":"Rota, cliente e desempenho","Métodos de cobro":"Métodos de cobrança","Llaves, QR y cuentas por país":"Chaves, QR e contas por país","Migración / histórico":"Migração / histórico","Traer datos del sistema anterior":"Trazer dados do sistema anterior","Conectar números y asignarlos a rutas":"Conectar números e atribuí-los às rotas","Configuración":"Configuração","Conecta la cuenta empresarial de WhatsApp y administra los números que usarán las rutas de la empresa.":"Conecte a conta empresarial do WhatsApp e administre os números que serão usados pelas rotas da empresa.","Integración preparada para la siguiente etapa":"Integração preparada para a próxima etapa","Sutil podrá conectar la cuenta de WhatsApp Business del empresario mediante la API oficial de Meta. No será necesario crear una cuenta Meta diferente para cada ruta.":"A Sutil poderá conectar a conta do WhatsApp Business do empresário por meio da API oficial da Meta. Não será necessário criar uma conta Meta diferente para cada rota.","Cuenta de la empresa":"Conta da empresa","Conectar la cuenta empresarial de WhatsApp Business":"Conectar a conta empresarial do WhatsApp Business","Números":"Números","Administrar los números conectados a la empresa":"Administrar os números conectados à empresa","Asignación por ruta":"Atribuição por rota","Usar un número general o asignar números diferentes por ruta":"Usar um número geral ou atribuir números diferentes por rota","Comprobantes":"Comprovantes","Recibir comprobantes por WhatsApp para enviarlos a comprobación":"Receber comprovantes pelo WhatsApp para enviá-los à conferência",
"Crear crédito":"Criar empréstimo","Crear crédito":"Criar crédito","Selecciona un cliente para consultar la caja de su ruta.":"Selecione um cliente para consultar o caixa da sua rota.","Buscar cliente":"Buscar cliente","Cliente encontrado":"Cliente encontrado","Cliente seleccionado":"Cliente selecionado","Cambiar cliente":"Trocar cliente","Las coincidencias aparecen mientras escribes.":"As correspondências aparecem enquanto você digita.","Escribe nombre o código":"Digite nome ou código","No se encontraron clientes.":"Nenhum cliente encontrado.","Selecciona un cliente":"Selecione um cliente","Capital prestado":"Capital emprestado","Método de entrega":"Método de entrega","Efectivo":"Dinheiro","Número de cuotas":"Número de parcelas","Cuota redondeada":"Parcela arredondada","Frecuencia":"Frequência","Fecha inicial":"Data inicial","Diaria":"Diária","Semanal":"Semanal","Quincenal":"Quinzenal","Mensual":"Mensal","Contar domingos":"Incluir domingos","Editar cada cuota antes de guardar":"Editar cada parcela antes de salvar","Ruta del cliente":"Rota do cliente","Estado del cliente":"Status do cliente","Total calculado":"Total calculado","Cuota matemática":"Parcela matemática","Vista previa de cuotas":"Pré-visualização das parcelas","Crear crédito y cuotas":"Criar empréstimo e parcelas",
"Documento personal":"Documento pessoal","Documento personal *":"Documento pessoal *","Registrar nuevo cliente":"Registrar novo cliente","Foto del cliente (opcional)":"Foto do cliente (opcional)","Vista previa":"Pré-visualização","En celular puedes tomar la foto con la cámara o elegirla de la galería. Máximo 5 MB.":"No celular você pode tirar a foto com a câmera ou escolhê-la da galeria. Máximo 5 MB.","Seleccionar archivo":"Selecionar arquivo","Tomar foto":"Tirar foto","Adjuntar foto":"Anexar foto","Ningún archivo seleccionado":"Nenhum arquivo selecionado","Nombre completo *":"Nome completo *","Teléfono 1 *":"Telefone 1 *","Teléfono 2":"Telefone 2","Teléfono fijo":"Telefone fixo","Correo electrónico":"E-mail","Dirección *":"Endereço *","Número":"Número","Complemento":"Complemento","CEP / Código postal":"CEP / Código postal","Estado / Departamento":"Estado / Departamento","Ciudad *":"Cidade *","Observaciones":"Observações","Sin ruta asignada":"Sem rota atribuída","Funcionario responsable":"Funcionário responsável","Sin funcionario asignado":"Sem funcionário atribuído","Latitud":"Latitude","Longitud":"Longitude","El cliente tiene empresa":"O cliente possui empresa","Información de la empresa (opcional)":"Informações da empresa (opcional)","Nombre de la empresa":"Nome da empresa","Nombre comercial":"Nome comercial","Actividad económica":"Atividade econômica","Cargo del cliente":"Cargo do cliente","Correo":"E-mail","Nuevo cliente":"Novo cliente","Registrar cliente":"Cadastrar cliente","Clientes registrados":"Clientes cadastrados","Buscar":"Buscar","Nombre":"Nome","Documento":"Documento","Teléfono":"Telefone","Dirección":"Endereço","Barrio":"Bairro","Ciudad":"Cidade","Ruta":"Rota","Estado":"Status","Activo":"Ativo","Inactivo":"Inativo","Editar":"Editar","Guardar":"Salvar","Cancelar":"Cancelar","Cerrar":"Fechar","Volver":"Voltar","Atrás":"Voltar","Inicio":"Início","Cerrar sesión":"Sair","Mantener sesión abierta":"Manter sessão aberta","Online":"Online","Offline":"Offline",
"Cobros / PIX":"Cobros / PIX","Registrar cobro":"Registrar cobrança","Cobros del día":"Cobros do dia","Monto":"Valor","Método de pago":"Método de pagamento","Transferencia":"Transferência","Abono":"Pagamento parcial","Confirmado":"Confirmado","En comprobación":"Em análise","Rechazado":"Rejeitado","Pendiente":"Pendente","Confirmar":"Confirmar","Rechazar":"Rejeitar",
"Caja":"Caixa","Abrir caja":"Abrir caixa","Cerrar caja":"Fechar caixa","Base inicial":"Base inicial","Base dinero":"Base em dinheiro","Base PIX":"Base PIX","Base total":"Base total","Adicionar base":"Adicionar base","Retirar base":"Retirar base","Transferir base":"Transferir base","Motivo":"Motivo","Fecha":"Data","Hoy":"Hoje","Ayer":"Ontem",
"Personal":"Equipe","Permisos":"Permissões","Cobrador":"Cobrador","Administrador":"Administrador","Rutas":"Rotas","Nueva ruta":"Nova rota","Crear ruta":"Criar rota","Ubicación":"Localização","Ubicación de un cobrador":"Localização de um cobrador","Ver personal":"Ver equipe",
"Migración":"Migração","Histórico":"Histórico","Importar":"Importar","Subir archivo":"Enviar arquivo","Ingresar historial manualmente":"Inserir histórico manualmente","Cliente nuevo":"Cliente novo","Cliente de migración":"Cliente de migração",
"Soporte humano":"Suporte humano","Soporte general":"Suporte geral","Membresía":"Assinatura","Problema técnico":"Problema técnico","Pagos":"Pagos","Enviar":"Enviar","Preguntar":"Perguntar","Asistente Sutil":"Assistente Sutil","Mi empresa":"Minha empresa","Escoge lo que deseas hacer:":"Escolha o que deseja fazer:",
"Clientes y responsables":"Clientes e responsáveis","Accede a las funciones del cliente sin llenar la pantalla de información.":"Acesse as funções do cliente sem encher a tela de informações.","Registrar datos personales, empresa, ruta, responsable, foto y ubicación.":"Cadastrar dados pessoais, empresa, rota, responsável, foto e localização.","Ver todos los clientes, estado, saldo, ruta, ubicación y acciones.":"Ver todos os clientes, status, saldo, rota, localização e ações.","Buscar por nombre, código, documento o teléfono y abrir su ficha.":"Buscar por nome, código, documento ou telefone e abrir seu cadastro.","Menú de empresa":"Menu da empresa","Empresa activa":"Empresa ativa","Llave:":"Chave:","Dueño de empresa":"Dono da empresa","Configuración":"Configurações","Empresa, seguridad, idioma y reglas":"Empresa, segurança, idioma e regras","Membresía, rutas y ayuda directa":"Assinatura, rotas e ajuda direta","Soporte Sutil":"Suporte Sutil","Ayuda directa con Sutil, renovación de membresía y aumento de rutas.":"Ajuda direta com a Sutil, renovação da assinatura e aumento de rotas.","Actualizar":"Atualizar","Membresía y rutas":"Assinatura e rotas","Renovar membresía, medios de pago, aumentar rutas y revisar solicitudes.":"Renovar assinatura, meios de pagamento, aumentar rotas e revisar solicitações.","Plan actual":"Plano atual","Rutas contratadas":"Rotas contratadas","Crédito a favor":"Crédito disponível","Asistente Sutil":"Assistente Sutil","Preguntar, navegar por funciones, resolver problemas y contactar soporte humano.":"Perguntar, navegar pelas funções, resolver problemas e entrar em contato com o suporte humano.","Nombre y logo de la empresa":"Nome e logotipo da empresa","Beneficios / VIP para clientes":"Benefícios / VIP para clientes","Recordatorios de la app del cliente":"Lembretes do app do cliente","Créditos y cuotas":"Empréstimos e parcelas","Métodos de pago habilitados":"Métodos de pagamento habilitados","Seguridad y acceso":"Segurança e acesso","Sesión en este dispositivo":"Sessão neste dispositivo","Guardar configuración":"Salvar configurações","Sonidos de notificaciones":"Sons de notificações","Oscuro":"Escuro","Configuración guardada":"Configuração salva","Configuración guardada correctamente":"Configuração salva com sucesso","Guardando...":"Salvando...","Cargando...":"Carregando...","Sin datos":"Sem dados","Sin resultados":"Sem resultados","Todos":"Todos","Todas":"Todas","Desde":"De","Hasta":"Até","Aplicar filtros":"Aplicar filtros","Limpiar filtros":"Limpar filtros","Ver detalle":"Ver detalhes","Detalle":"Detalhes","Acciones":"Ações","Observación":"Observação","Descripción":"Descrição","Categoría":"Categoria","Saldo pendiente":"Saldo pendente","Descargar reporte PDF":"Baixar relatório PDF","Cuotas pagadas":"Parcelas pagas","Cuotas restantes":"Parcelas restantes","Vencimiento":"Vencimento","Próxima cuota":"Próxima parcela","Crédito activo":"Empréstimo ativo","Moroso":"Em atraso","Al día":"Em dia","Reportado":"Reportado",
"Notificaciones del equipo":"Notificações da equipe","Push al celular y avisos de comprobantes":"Push no celular e avisos de comprovantes","Elige qué avisos quieres recibir. Las rutas siempre respetan tus permisos.":"Escolha quais avisos deseja receber. As rotas sempre respeitam suas permissões.","Configurar":"Configurar","Configuración de notificaciones":"Configuração de notificações","Preferencias personales de este usuario y dispositivo.":"Preferências pessoais deste usuário e dispositivo.","Push al celular":"Push no celular","Permite recibir avisos aunque Sutil no esté abierto.":"Permite receber avisos mesmo quando a Sutil não estiver aberta.","Activar push":"Ativar push","Desactivar push":"Desativar push","Qué quieres recibir":"O que deseja receber","Nuevo comprobante recibido":"Novo comprovante recebido","Cliente, valor y ruta.":"Cliente, valor e rota.","Resumen de pendientes":"Resumo de pendentes","Cantidad y total por conciliar.":"Quantidade e total a conciliar.","Conciliación confirmada":"Conciliação confirmada","Pago identificado por el extracto.":"Pagamento identificado pelo extrato.","Confirmación manual":"Confirmação manual","Pago confirmado por un usuario autorizado.":"Pagamento confirmado por um usuário autorizado.","Requiere revisión":"Requer revisão","Coincidencia ambigua o incompleta.":"Correspondência ambígua ou incompleta.","Duplicado o posible fraude":"Duplicado ou possível fraude","Alertas de seguridad prioritarias.":"Alertas de segurança prioritários.","Rechazado o devuelto":"Rejeitado ou devolvido","PIX fallido, reembolso o devolución.":"PIX falhou, reembolso ou devolução.","Vibración del dispositivo":"Vibração do dispositivo","Cuando el sistema operativo lo permita.":"Quando o sistema operacional permitir.","Horario y rutas":"Horário e rotas","Horario silencioso":"Horário silencioso","No enviar push durante este intervalo.":"Não enviar push durante este intervalo.","Notificaciones de rutas":"Notificações de rotas","Todas mis rutas":"Todas as minhas rotas","Todas mis rutas autorizadas":"Todas as minhas rotas autorizadas","Solo rutas seleccionadas":"Somente rotas selecionadas","Se usarán únicamente las rutas permitidas para este usuario.":"Serão usadas somente as rotas permitidas para este usuário.","No hay rutas disponibles.":"Não há rotas disponíveis.","Push activo":"Push ativo","Push pendiente de servidor":"Push pendente do servidor","Avisos internos activos":"Avisos internos ativos","Comprobando…":"Verificando…","Disponible":"Disponível","Pendiente de servidor":"Pendente do servidor","Activo":"Ativo","No disponible":"Indisponível","Sin conexión":"Sem conexão","Este navegador no admite Web Push.":"Este navegador não oferece suporte a Web Push.","La interfaz está lista; falta configurar las claves push del servidor.":"A interface está pronta; falta configurar as chaves push do servidor.","La interfaz push está preparada, pero faltan las claves VAPID del servidor.":"A interface push está preparada, mas faltam as chaves VAPID do servidor.","El push necesita HTTPS.":"O push precisa de HTTPS.","Permiso de notificaciones no concedido.":"Permissão de notificações não concedida.","El navegador no devolvió una suscripción push válida.":"O navegador não retornou uma assinatura push válida.","Push activado en este dispositivo.":"Push ativado neste dispositivo.","Push desactivado en este dispositivo.":"Push desativado neste dispositivo.","Configuración guardada.":"Configuração salva.","No fue posible cargar las notificaciones.":"Não foi possível carregar as notificações.","No fue posible guardar.":"Não foi possível salvar.","No fue posible activar push.":"Não foi possível ativar o push."
},
en:{
"Sutil · Administración":"Sutil · Administration","Administración":"Administration","Configuración de la empresa":"Company settings","Estos ajustes son propios de esta empresa y solo pueden ser modificados por el empresario.":"These settings belong to this company and can only be changed by the business owner.","Idioma, país y moneda":"Language, country and currency","Idioma":"Language","País":"Country","Moneda":"Currency","Símbolo":"Symbol","Nombre y logo de la empresa":"Company name and logo","Empresa":"Company","Guardar logo":"Save logo","Quitar logo":"Remove logo",
"Personal en operación":"Staff operating","Cajas abiertas":"Open cash boxes","Módulos":"Modules","Gestión de clientes":"Client management","Clientes, créditos, cobros, comprobantes y comunicación.":"Clients, loans, collections, receipts and communication.","Operación y rutas":"Operations and routes","Equipo, rutas, caja, gastos y control de la operación diaria.":"Staff, routes, cash, expenses and daily operations control.","Análisis y control":"Analysis and control","Indicadores, cartera, rutas y rendimiento de la empresa.":"Indicators, portfolio, routes and company performance.","Configuración y herramientas":"Settings and tools","Métodos de cobro e incorporación de información histórica.":"Collection methods and historical data import.","Métodos de cobro, WhatsApp Business e incorporación de información histórica.":"Collection methods, WhatsApp Business and historical data import.","Funciones organizadas por área para encontrar cada herramienta más rápido.":"Functions organized by area so each tool is easier to find.","Acceso principal":"Main access","Ruta · Caja · Equipo":"Routes · Cash · Team","Indicadores clave":"Key indicators","Ajustes y soporte":"Settings and support","Área principal":"Main area","Centro de reportes":"Reports center","Información financiera, cartera, rutas, gastos y disponibilidad para tomar decisiones de la empresa.":"Financial information, portfolio, routes, expenses and availability for company decision-making.","Áreas de análisis":"Analysis areas","Selecciona el reporte que deseas consultar.":"Select the report you want to review.","Selecciona un área de análisis":"Select an analysis area","Los indicadores generales permanecen visibles arriba y aquí aparecerá únicamente el reporte elegido.":"General indicators remain visible above and only the selected report will appear here.","Clientes":"Clients","Nuevo, registrados, búsqueda y detalle completo":"New, registered, search and full details","Créditos":"Credits","Créditos":"Credit","Crear y consultar cuotas":"Create and review installments","Cobros":"Collections","Efectivo, PIX y abonos":"Cash, PIX and partial payments","Comprobantes de pago":"Payment receipts","Confirmar o rechazar":"Confirm or reject","Chats con clientes":"Client chats","Personal y permisos":"Staff and permissions","ADM, cobradores, rutas y permisos":"Admins, collectors, routes and permissions","Caja diaria":"Daily cash","Apertura, movimientos y cierre":"Opening, movements and closing","Movimientos de base":"Cash movements","Adicionar, retirar o transferir":"Add, withdraw or transfer","Reporte de caja":"Cash report","Historial completo de movimientos":"Complete movement history","Gastos":"Expenses","Registrar gastos por ruta":"Record expenses by route","Reportes":"Reports","Ruta, cliente y rendimiento":"Route, client and performance","Métodos de cobro":"Collection methods","Llaves, QR y cuentas por país":"Keys, QR and accounts by country","Migración / histórico":"Migration / history","Traer datos del sistema anterior":"Bring data from the previous system","Conectar números y asignarlos a rutas":"Connect numbers and assign them to routes","Configuración":"Settings","Conecta la cuenta empresarial de WhatsApp y administra los números que usarán las rutas de la empresa.":"Connect the company WhatsApp account and manage the numbers used by company routes.","Integración preparada para la siguiente etapa":"Integration prepared for the next stage","Sutil podrá conectar la cuenta de WhatsApp Business del empresario mediante la API oficial de Meta. No será necesario crear una cuenta Meta diferente para cada ruta.":"Sutil will be able to connect the business owner's WhatsApp Business account through Meta's official API. A different Meta account will not be required for each route.","Cuenta de la empresa":"Company account","Conectar la cuenta empresarial de WhatsApp Business":"Connect the WhatsApp Business company account","Números":"Numbers","Administrar los números conectados a la empresa":"Manage numbers connected to the company","Asignación por ruta":"Route assignment","Usar un número general o asignar números diferentes por ruta":"Use one general number or assign different numbers by route","Comprobantes":"Receipts","Recibir comprobantes por WhatsApp para enviarlos a comprobación":"Receive receipts through WhatsApp and send them for verification",
"Crear crédito":"Create loan","Crear crédito":"Create credit","Selecciona un cliente para consultar la caja de su ruta.":"Select a client to check the cash box for their route.","Buscar cliente":"Search client","Cliente encontrado":"Client found","Cliente seleccionado":"Selected client","Cambiar cliente":"Change client","Las coincidencias aparecen mientras escribes.":"Matches appear as you type.","Escribe nombre o código":"Type name or code","No se encontraron clientes.":"No clients found.","Selecciona un cliente":"Select a client","Capital prestado":"Principal amount","Método de entrega":"Delivery method","Efectivo":"Cash","Número de cuotas":"Number of installments","Cuota redondeada":"Rounded installment","Frecuencia":"Frequency","Fecha inicial":"Start date","Diaria":"Daily","Semanal":"Weekly","Quincenal":"Biweekly","Mensual":"Monthly","Contar domingos":"Include Sundays","Editar cada cuota antes de guardar":"Edit each installment before saving","Ruta del cliente":"Client route","Estado del cliente":"Client status","Total calculado":"Calculated total","Cuota matemática":"Calculated installment","Vista previa de cuotas":"Installment preview","Crear crédito y cuotas":"Create loan and installments",
"Documento personal":"Personal document","Documento personal *":"Personal document *","Registrar nuevo cliente":"Register new client","Foto del cliente (opcional)":"Client photo (optional)","Vista previa":"Preview","En celular puedes tomar la foto con la cámara o elegirla de la galería. Máximo 5 MB.":"On mobile you can take a photo with the camera or choose one from the gallery. Maximum 5 MB.","Seleccionar archivo":"Choose file","Tomar foto":"Take photo","Adjuntar foto":"Attach photo","Ningún archivo seleccionado":"No file selected","Nombre completo *":"Full name *","Teléfono 1 *":"Phone 1 *","Teléfono 2":"Phone 2","Teléfono fijo":"Landline","Correo electrónico":"Email","Dirección *":"Address *","Número":"Number","Complemento":"Address complement","CEP / Código postal":"ZIP / Postal code","Estado / Departamento":"State / Department","Ciudad *":"City *","Observaciones":"Notes","Sin ruta asignada":"No route assigned","Funcionario responsable":"Responsible staff member","Sin funcionario asignado":"No staff member assigned","Latitud":"Latitude","Longitud":"Longitude","El cliente tiene empresa":"The client owns a business","Información de la empresa (opcional)":"Business information (optional)","Nombre de la empresa":"Business name","Nombre comercial":"Trade name","Actividad económica":"Business activity","Cargo del cliente":"Client role","Correo":"Email","Nuevo cliente":"New client","Registrar cliente":"Register client","Clientes registrados":"Registered clients","Buscar":"Search","Nombre":"Name","Documento":"Document","Teléfono":"Phone","Dirección":"Address","Barrio":"Neighborhood","Ciudad":"City","Ruta":"Route","Estado":"Status","Activo":"Active","Inactivo":"Inactive","Editar":"Edit","Guardar":"Save","Cancelar":"Cancel","Cerrar":"Close","Volver":"Back","Atrás":"Back","Inicio":"Home","Cerrar sesión":"Sign out","Mantener sesión abierta":"Keep session open","Online":"Online","Offline":"Offline",
"Cobros / PIX":"Collections / PIX","Registrar cobro":"Record collection","Cobros del día":"Today's collections","Monto":"Amount","Método de pago":"Payment method","Transferencia":"Transfer","Abono":"Partial payment","Confirmado":"Confirmed","En comprobación":"Under review","Rechazado":"Rejected","Pendiente":"Pending","Confirmar":"Confirm","Rechazar":"Reject",
"Caja":"Cash","Abrir caja":"Open cash box","Cerrar caja":"Close cash box","Base inicial":"Opening base","Base dinero":"Cash base","Base PIX":"PIX base","Base total":"Total base","Adicionar base":"Add base","Retirar base":"Withdraw base","Transferir base":"Transfer base","Motivo":"Reason","Fecha":"Date","Hoy":"Today","Ayer":"Yesterday",
"Personal":"Staff","Permisos":"Permissions","Cobrador":"Collector","Administrador":"Administrator","Rutas":"Routes","Nueva ruta":"New route","Crear ruta":"Create route","Ubicación":"Location","Ubicación de un cobrador":"Collector location","Ver personal":"View staff",
"Migración":"Migration","Histórico":"History","Importar":"Import","Subir archivo":"Upload file","Ingresar historial manualmente":"Enter history manually","Cliente nuevo":"New client","Cliente de migración":"Migration client",
"Soporte humano":"Human support","Soporte general":"General support","Membresía":"Membership","Problema técnico":"Technical issue","Pagos":"Payments","Enviar":"Send","Preguntar":"Ask","Asistente Sutil":"Sutil Assistant","Mi empresa":"My company","Escoge lo que deseas hacer:":"Choose what you want to do:",
"Configuración guardada":"Settings saved","Configuración guardada correctamente":"Settings saved successfully","Guardando...":"Saving...","Cargando...":"Loading...","Sin datos":"No data","Sin resultados":"No results","Todos":"All","Todas":"All","Desde":"From","Hasta":"To","Aplicar filtros":"Apply filters","Limpiar filtros":"Clear filters","Ver detalle":"View details","Detalle":"Details","Acciones":"Actions","Observación":"Notes","Descripción":"Description","Categoría":"Category","Saldo pendiente":"Outstanding balance","Descargar reporte PDF":"Download PDF report","Cuotas pagadas":"Paid installments","Cuotas restantes":"Remaining installments","Vencimiento":"Due date","Próxima cuota":"Next installment","Crédito activo":"Active loan","Moroso":"Overdue","Al día":"Current","Reportado":"Reported",
"Notificaciones del equipo":"Team notifications","Push al celular y avisos de comprobantes":"Mobile push and receipt alerts","Elige qué avisos quieres recibir. Las rutas siempre respetan tus permisos.":"Choose which alerts you want to receive. Routes always respect your permissions.","Configurar":"Configure","Configuración de notificaciones":"Notification settings","Preferencias personales de este usuario y dispositivo.":"Personal preferences for this user and device.","Push al celular":"Mobile push","Permite recibir avisos aunque Sutil no esté abierto.":"Receive alerts even when Sutil is not open.","Activar push":"Enable push","Desactivar push":"Disable push","Qué quieres recibir":"What you want to receive","Nuevo comprobante recibido":"New payment receipt","Cliente, valor y ruta.":"Client, amount and route.","Resumen de pendientes":"Pending summary","Cantidad y total por conciliar.":"Count and total pending reconciliation.","Conciliación confirmada":"Reconciliation confirmed","Pago identificado por el extracto.":"Payment identified in the bank statement.","Confirmación manual":"Manual confirmation","Pago confirmado por un usuario autorizado.":"Payment confirmed by an authorized user.","Requiere revisión":"Needs review","Coincidencia ambigua o incompleta.":"Ambiguous or incomplete match.","Duplicado o posible fraude":"Duplicate or possible fraud","Alertas de seguridad prioritarias.":"Priority security alerts.","Rechazado o devuelto":"Rejected or refunded","PIX failed, refund or return.":"Failed PIX, refund or return.","Vibración del dispositivo":"Device vibration","Cuando el sistema operativo lo permita.":"When supported by the operating system.","Horario y rutas":"Schedule and routes","Horario silencioso":"Quiet hours","No enviar push durante este intervalo.":"Do not send push during this interval.","Notificaciones de rutas":"Route notifications","Todas mis rutas":"All my routes","Todas mis rutas autorizadas":"All my authorized routes","Solo rutas seleccionadas":"Selected routes only","Se usarán únicamente las rutas permitidas para este usuario.":"Only routes allowed for this user will be used.","No hay rutas disponibles.":"No routes available.","Push activo":"Push active","Push pendiente de servidor":"Push pending server setup","Avisos internos activos":"Internal alerts active","Comprobando…":"Checking…","Disponible":"Available","Pendiente de servidor":"Pending server setup","Activo":"Active","No disponible":"Unavailable","Sin conexión":"Offline","Este navegador no admite Web Push.":"This browser does not support Web Push.","La interfaz está lista; falta configurar las claves push del servidor.":"The interface is ready; server push keys still need to be configured.","La interfaz push está preparada, pero faltan las claves VAPID del servidor.":"The push interface is ready, but the server VAPID keys are missing.","El push necesita HTTPS.":"Push requires HTTPS.","Permiso de notificaciones no concedido.":"Notification permission was not granted.","El navegador no devolvió una suscripción push válida.":"The browser did not return a valid push subscription.","Push activado en este dispositivo.":"Push enabled on this device.","Push desactivado en este dispositivo.":"Push disabled on this device.","Configuración guardada.":"Settings saved.","No fue posible cargar las notificaciones.":"Could not load notification settings.","No fue posible guardar.":"Could not save.","No fue posible activar push.":"Could not enable push."
}};
try{
  Object.assign(SUTIL_UI_I18N.pt,{
    "Crédito realizado":"Crédito realizado"
  });
  Object.assign(SUTIL_UI_I18N.en,{
    "Crédito realizado":"Credit issued"
  });
}catch(_){}

let SUTIL_ACTIVE_LANGUAGE="es";
// FIX 12.15.127 · Rutas > Crear: mismo punto de arranque que Editar.
try{
  Object.assign(SUTIL_UI_I18N.pt,{
    "Punto de arranque de caja en Sutil":"Ponto de partida do caixa no Sutil",
    "Define una sola referencia para comenzar a trabajar en la nueva ruta. Los registros históricos anteriores no reconstruyen ni modifican esta base.":"Defina uma única referência para começar a trabalhar na nova rota. Os registros históricos anteriores não reconstroem nem alteram esta base.",
    "Solo el dueño de empresa puede configurar el punto de arranque.":"Somente o proprietário da empresa pode configurar o ponto de partida.",
    "Fecha de corte / inicio en Sutil":"Data de corte / início no Sutil",
    "Efectivo disponible al iniciar":"Dinheiro disponível no início",
    "PIX / saldo electrónico disponible":"PIX / saldo eletrônico disponível",
    "Si defines una fecha, estos dos saldos se registran como la base inicial de la ruta. Los campos vacíos equivalen a cero. Si no defines una fecha, podrás configurar el punto después desde Editar ruta.":"Se informar uma data, esses saldos serão registrados como a base inicial da rota. Campos vazios equivalem a zero. Sem data, será possível configurar esse ponto depois em Editar rota."
  });
  Object.assign(SUTIL_UI_I18N.en,{
    "Punto de arranque de caja en Sutil":"Starting cash balance in Sutil",
    "Define una sola referencia para comenzar a trabajar en la nueva ruta. Los registros históricos anteriores no reconstruyen ni modifican esta base.":"Set one opening reference for the new route. Earlier historical records do not rebuild or change this balance.",
    "Solo el dueño de empresa puede configurar el punto de arranque.":"Only the company owner can configure the starting balance.",
    "Fecha de corte / inicio en Sutil":"Cutoff / start date in Sutil",
    "Efectivo disponible al iniciar":"Starting available cash",
    "PIX / saldo electrónico disponible":"Available PIX / electronic balance",
    "Si defines una fecha, estos dos saldos se registran como la base inicial de la ruta. Los campos vacíos equivalen a cero. Si no defines una fecha, podrás configurar el punto después desde Editar ruta.":"If you enter a date, these two balances are saved as the route opening balance. Blank amounts mean zero. Without a date, you can set this later under Edit route."
  });
}catch(_e){}
// FIX 12.15.124 · Nuevos textos del menú compacto de Rutas.
try{
  Object.assign(SUTIL_UI_I18N.pt,{
    "Rutas registradas":"Rotas cadastradas",
    "Selecciona la opción que deseas consultar o administrar.":"Selecione a opção que deseja consultar ou administrar."
  });
  Object.assign(SUTIL_UI_I18N.en,{
    "Rutas registradas":"Registered routes",
    "Selecciona la opción que deseas consultar o administrar.":"Select the option you want to view or manage."
  });
}catch(_e){}
// SUTIL FIX 12.15.130 · nota informativa de Operar caja con contraste correcto en modo oscuro.
// SUTIL FIX 12.15.123 · panel Cierre automático completamente integrado al modo oscuro.
// SUTIL FIX 12.15.133 · cobros PIX incluyen transferencia bancaria; transferencias entre rutas se identifican aparte.
// SUTIL FIX 12.15.132 · resumen de caja reorganizado en grupos BASE y COBROS, con tarjetas en línea.
// SUTIL FIX 12.15.122 · modo oscuro en Caja diaria: métricas con fondo oscuro y Resumen de caja legible.
// SUTIL FIX 12.15.121 · optimización móvil en Caja diaria: Base dinero/Base PIX en paralelo y Responsable/Abierta por lado a lado.
// SUTIL FIX 12.15.120 · texto correcto en Operar caja: las bases aquí son solo informativas.
try{
  Object.assign(SUTIL_UI_I18N.pt,{
    "Las bases se muestran solo para consulta. Los cambios de base se realizan desde Movimientos de base.":"As bases são exibidas apenas para consulta. As alterações de base são feitas em Movimentações de caixa."
  });
  Object.assign(SUTIL_UI_I18N.en,{
    "Las bases se muestran solo para consulta. Los cambios de base se realizan desde Movimientos de base.":"The bases are shown for reference only. Base changes are made from Cash movements."
  });
}catch(_e){}
// SUTIL FIX 12.15.29 · diferencia coordenadas fijas de la dirección frente a ubicación actual
try{
  Object.assign(SUTIL_UI_I18N.pt,{
    "Dirección registrada":"Endereço cadastrado"
  });
  Object.assign(SUTIL_UI_I18N.en,{
    "Dirección registrada":"Registered address"
  });
}catch(_e){}

// SUTIL FIX 12.15.20 · traducciones exactas para las nuevas secciones de la ficha cliente
try{
  Object.assign(SUTIL_UI_I18N.pt,{
    "Registro e información":"Cadastro e informações",
    "Datos, empresa y documentos":"Dados, empresa e documentos",
    "Financiero":"Financeiro",
    "Créditos, pagos, histórico y riesgo":"Créditos, pagamentos, histórico e risco",
    "Comunicación y seguimiento":"Comunicação e acompanhamento",
    "Ubicación, app, chat y alertas":"Localização, app, chat e alertas"
  });
  Object.assign(SUTIL_UI_I18N.en,{
    "Registro e información":"Registration and information",
    "Datos, empresa y documentos":"Details, company and documents",
    "Financiero":"Financial",
    "Créditos, pagos, histórico y riesgo":"Credits, payments, history and risk",
    "Comunicación y seguimiento":"Communication and tracking",
    "Ubicación, app, chat y alertas":"Location, app, chat and alerts"
  });
}catch(_e){}

/* SUTIL FIX 12.15.30 · traducción exacta del acceso a ubicación actual. */
try{
  Object.assign(SUTIL_UI_I18N.pt,{"Localización actual":"Localização atual"});
  Object.assign(SUTIL_UI_I18N.en,{"Localización actual":"Current location"});
  Object.assign(SUTIL_UI_I18N.pt,{"Ver seguimiento GPS":"Ver rastreamento GPS"});
  Object.assign(SUTIL_UI_I18N.en,{"Ver seguimiento GPS":"View GPS tracking"});
  Object.assign(SUTIL_UI_I18N.pt,{"Actualizado":"Atualizado"});
  Object.assign(SUTIL_UI_I18N.en,{"Actualizado":"Updated"});

}catch(_e){}


  Object.assign(SUTIL_UI_I18N.pt,{
    "¿Cómo funcionan las ubicaciones?":"Como funcionam as localizações?",
    "Residencia":"Residência",
    "Dirección registrada al crear o editar el cliente.":"Endereço cadastrado ao criar ou editar o cliente.",
    "Ubicación GPS enviada por la app del cliente. Requiere la app instalada y permiso de ubicación.":"Localização GPS enviada pelo app do cliente. Requer o app instalado e permissão de localização.",
    "Consultar créditos":"Consultar créditos","Todas las fechas":"Todas as datas","Por fechas":"Por datas","Funcionario":"Funcionário","Registrar pago":"Registrar pagamento",
    "Cargando créditos...":"Carregando créditos...","crédito(s) encontrado(s)":"crédito(s) encontrado(s)","No hay créditos para este filtro.":"Não há créditos para este filtro."
  });
  Object.assign(SUTIL_UI_I18N.en,{
    "¿Cómo funcionan las ubicaciones?":"How do locations work?",
    "Residencia":"Residence",
    "Dirección registrada al crear o editar el cliente.":"Address registered when creating or editing the client.",
    "Ubicación GPS enviada por la app del cliente. Requiere la app instalada y permiso de ubicación.":"GPS location sent by the client app. Requires the app to be installed and location permission enabled.",
    "Consultar créditos":"View credits","Todas las fechas":"All dates","Por fechas":"By dates","Funcionario":"Staff member","Registrar pago":"Record payment",
    "Cargando créditos...":"Loading credits...","crédito(s) encontrado(s)":"credit(s) found","No hay créditos para este filtro.":"No credits match this filter."
  });

  Object.assign(SUTIL_UI_I18N.pt,{
    "Estado de cuenta":"Extrato da conta",
    "Estado de cuenta, histórico y riesgo":"Extrato da conta, histórico e risco",
    "Resumen":"Resumo",
    "Pagos y abonos":"Pagamentos e pagamentos parciais",
    "Cuotas":"Parcelas"
  });
  Object.assign(SUTIL_UI_I18N.en,{
    "Estado de cuenta":"Account statement",
    "Estado de cuenta, histórico y riesgo":"Account statement, history and risk",
    "Resumen":"Summary",
    "Pagos y abonos":"Payments and partial payments",
    "Cuotas":"Installments"
  });

function sutilTranslateText(raw,lang){
  if(!raw||lang==="es")return raw;
  const lead=(raw.match(/^\s*/)||[""])[0], trail=(raw.match(/\s*$/)||[""])[0];
  const core=raw.trim(); if(!core)return raw;
  const dict=SUTIL_UI_I18N[lang]||{};
  if(dict[core])return lead+dict[core]+trail;
  /* v1.3.78: cobertura global para textos compuestos/dinámicos. Solo se activa
     cuando la frase contiene vocabulario inequívoco de interfaz Sutil. */
  const packs={
    pt:[
      ["Configuración","Configuración"],["configuración","configuração"],["Administración","Administração"],["administración","administração"],
      ["Créditos","Créditos"],["créditos","créditos"],["Créditos","Créditos"],["créditos","créditos"],["Crédito","Crédito"],["crédito","crédito"],
      ["Cuotas","Parcelas"],["cuotas","parcelas"],["Cuota","Parcela"],["cuota","parcela"],
      ["Cobros","Cobros"],["cobros","cobranças"],["Cobro","Cobrança"],["cobro","cobrança"],
      ["Clientes","Clientes"],["clientes","clientes"],["Cliente","Cliente"],["cliente","cliente"],
      ["Caja diaria","Caixa diário"],["caja diaria","caixa diário"],["Caja","Caixa"],["caja","caixa"],
      ["Gastos","Gastos"],["gastos","despesas"],["Gasto","Despesa"],["gasto","despesa"],
      ["Reportes","Relatórios"],["reportes","relatórios"],["Reporte","Relatório"],["reporte","relatório"],
      ["Rutas","Rotas"],["rutas","rotas"],["Ruta","Rota"],["ruta","rota"],
      ["Personal","Equipe"],["personal","equipe"],["Permisos","Permissões"],["permisos","permissões"],
      ["Ubicación","Localização"],["ubicación","localização"],["Migración","Migração"],["migración","migração"],
      ["Histórico","Histórico"],["histórico","histórico"],["Membresía","Assinatura"],["membresía","assinatura"],
      ["Comprobantes","Comprovantes"],["comprobantes","comprovantes"],["Comprobante","Comprovante"],["comprobante","comprovante"],
      ["Métodos de cobro","Métodos de cobrança"],["métodos de cobro","métodos de cobrança"],
      ["Crear","Criar"],["crear","criar"],["Registrar","Registrar"],["registrar","registrar"],["Agregar","Adicionar"],["agregar","adicionar"],
      ["Adicionar","Adicionar"],["Retirar","Retirar"],["Transferir","Transferir"],["Editar","Editar"],["Eliminar","Excluir"],["eliminar","excluir"],
      ["Guardar","Salvar"],["guardar","salvar"],["Cancelar","Cancelar"],["Cerrar","Fechar"],["cerrar","fechar"],["Abrir","Abrir"],["abrir","abrir"],
      ["Buscar","Buscar"],["buscar","buscar"],["Consultar","Consultar"],["consultar","consultar"],["Ver ","Ver "],["Detalle","Detalhes"],["detalle","detalhes"],
      ["Nombre","Nome"],["nombre","nome"],["Teléfono","Telefone"],["teléfono","telefone"],["Dirección","Endereço"],["dirección","endereço"],
      ["Barrio","Bairro"],["barrio","bairro"],["Ciudad","Cidade"],["ciudad","cidade"],["Estado","Status"],["estado","status"],
      ["Fecha","Data"],["fecha","data"],["Monto","Valor"],["monto","valor"],["Saldo","Saldo"],["saldo","saldo"],
      ["Efectivo","Dinheiro"],["efectivo","dinheiro"],["Dinero","Efectivo"],["dinero","dinheiro"],["Método de pago","Método de pagamento"],
      ["Pago","Pagamento"],["pago","pagamento"],["Pagos","Pagos"],["pagos","pagamentos"],
      ["Pendiente","Pendente"],["pendiente","pendente"],["Confirmado","Confirmado"],["Rechazado","Rejeitado"],["rechazado","rejeitado"],
      ["Confirmar","Confirmar"],["Rechazar","Rejeitar"],["Aprobado","Aprovado"],["aprobado","aprovado"],
      ["Hoy","Hoje"],["hoy","hoje"],["Ayer","Ontem"],["ayer","ontem"],["Desde","De"],["Hasta","Até"],
      ["Nuevo","Novo"],["nuevo","novo"],["Nueva","Nova"],["nueva","nova"],["Activos","Ativos"],["activos","ativos"],["Activo","Ativo"],["activo","ativo"],
      ["Inactivo","Inativo"],["inactivo","inativo"],["Moroso","Em atraso"],["moroso","em atraso"],["Atrasados","Em atraso"],["atrasados","em atraso"],
      ["Frecuencia","Frequência"],["frecuencia","frequência"],["Diaria","Diária"],["diaria","diária"],["Quincenal","Quinzenal"],["quincenal","quinzenal"],
      ["Número de","Número de"],["Interés","Juros"],["interés","juros"],["Capital prestado","Capital emprestado"],
      ["Base inicial","Base inicial"],["Movimientos","Movimentações"],["movimientos","movimentações"],["Cierre","Fechamento"],["cierre","fechamento"],
      ["Apertura","Abertura"],["apertura","abertura"],["Observación","Observação"],["observación","observação"],["Descripción","Descrição"],["descripción","descrição"],
      ["Categoría","Categoria"],["categoría","categoria"],["Selecciona","Selecione"],["selecciona","selecione"],["Seleccione","Selecione"],["seleccione","selecione"],
      ["Escribe","Digite"],["escribe","digite"],["Elige","Escolha"],["elige","escolha"],["Escoge","Escolha"],["escoge","escolha"],
      ["Cargando","Carregando"],["cargando","carregando"],["Guardando","Salvando"],["guardando","salvando"],["No encontré","Não encontrei"],["no encontré","não encontrei"],
      ["No hay","Não há"],["no hay","não há"],["Sin resultados","Sem resultados"],["Sin datos","Sem dados"],["Todos","Todos"],["Todas","Todas"],
      ["Empresa activa","Empresa ativa"],["Perfil","Perfil"],["Dueño de empresa","Dono da empresa"],["Mantener sesión abierta","Manter sessão aberta"],["Cerrar sesión","Sair"],
      ["Problema técnico","Problema técnico"],["Soporte humano","Suporte humano"],["Soporte","Suporte"],["soporte","suporte"],["Preguntar","Perguntar"],
      ["Asistente Sutil","Assistente Sutil"],["Mi empresa","Minha empresa"],["¿Qué deseas hacer","O que você deseja fazer"],["¿qué deseas hacer","o que você deseja fazer"],
      ["Puedes","Você pode"],["puedes","você pode"],["Debes","Você deve"],["debes","você deve"],["deseas","deseja"],["deseo","desejo"],
      ["para consultar","para consultar"],["para revisar","para revisar"],["correspondiente","correspondente"],["anterior","anterior"],
      ["de su ruta","da sua rota"],["de la ruta","da rota"],["del cliente","do cliente"],["del día","do dia"],["del sistema","do sistema"],
      ["de esta empresa","desta empresa"],["esta empresa","esta empresa"],["solo pueden","só podem"],["modificados","alterados"],
      ["próxima","próxima"],["restantes","restantes"],["pagadas","pagas"],["vencimiento","vencimento"],["atrasado","atrasado"],
      ["Subir archivo","Enviar arquivo"],["archivo","arquivo"],["Importar","Importar"],["importar","importar"],["datos","dados"],["sistema anterior","sistema anterior"]
    ],
    en:[
      ["Configuración","Settings"],["configuración","settings"],["Administración","Administration"],["administración","administration"],
      ["Créditos","Credit"],["créditos","credit"],["Créditos","Credits"],["créditos","credits"],["Crédito","Credit"],["crédito","credit"],["Cuotas","Installments"],["cuotas","installments"],["Cuota","Installment"],["cuota","installment"],
      ["Cobros","Collections"],["cobros","collections"],["Cobro","Collection"],["cobro","collection"],["Caja","Cash box"],["caja","cash box"],
      ["Gastos","Expenses"],["gastos","expenses"],["Reportes","Reports"],["reportes","reports"],["Rutas","Routes"],["rutas","routes"],["Ruta","Route"],["ruta","route"],
      ["Personal","Staff"],["personal","staff"],["Permisos","Permissions"],["permisos","permissions"],["Ubicación","Location"],["ubicación","location"],
      ["Migración","Migration"],["migración","migration"],["Membresía","Membership"],["membresía","membership"],["Comprobantes","Receipts"],["comprobantes","receipts"],
      ["Crear","Create"],["crear","create"],["Registrar","Record"],["registrar","record"],["Agregar","Add"],["agregar","add"],["Editar","Edit"],["Eliminar","Delete"],
      ["Guardar","Save"],["guardar","save"],["Cerrar","Close"],["cerrar","close"],["Abrir","Open"],["abrir","open"],["Buscar","Search"],["buscar","search"],
      ["Consultar","Check"],["consultar","check"],["Nombre","Name"],["nombre","name"],["Teléfono","Phone"],["teléfono","phone"],["Dirección","Address"],["dirección","address"],
      ["Barrio","Neighborhood"],["Ciudad","City"],["Estado","Status"],["Fecha","Date"],["fecha","date"],["Monto","Amount"],["monto","amount"],
      ["Efectivo","Cash"],["efectivo","cash"],["Pago","Payment"],["pago","payment"],["Pagos","Payments"],["pagos","payments"],
      ["Pendiente","Pending"],["Confirmado","Confirmed"],["Rechazado","Rejected"],["Confirmar","Confirm"],["Rechazar","Reject"],["Hoy","Today"],["hoy","today"],["Ayer","Yesterday"],["ayer","yesterday"],
      ["Nuevo","New"],["nuevo","new"],["Nueva","New"],["nueva","new"],["Activo","Active"],["activo","active"],["Inactivo","Inactive"],["Moroso","Overdue"],
      ["Frecuencia","Frequency"],["Diaria","Daily"],["Quincenal","Biweekly"],["Interés","Interest"],["interés","interest"],["Movimientos","Movements"],["movimientos","movements"],
      ["Cierre","Closing"],["cierre","closing"],["Apertura","Opening"],["apertura","opening"],["Observación","Notes"],["Descripción","Description"],["Categoría","Category"],
      ["Selecciona","Select"],["selecciona","select"],["Escribe","Type"],["escribe","type"],["Escoge","Choose"],["escoge","choose"],["Cargando","Loading"],["Guardando","Saving"],
      ["No encontré","I couldn't find"],["No hay","There are no"],["Sin resultados","No results"],["Sin datos","No data"],["Empresa activa","Active company"],["Dueño de empresa","Company owner"],
      ["Mantener sesión abierta","Keep session open"],["Cerrar sesión","Sign out"],["Problema técnico","Technical issue"],["Soporte humano","Human support"],["Soporte","Support"],["soporte","support"],
      ["Preguntar","Ask"],["Asistente Sutil","Sutil Assistant"],["Mi empresa","My company"],["¿Qué deseas hacer","What do you want to do"],["¿qué deseas hacer","what do you want to do"],
      ["Puedes","You can"],["puedes","you can"],["Debes","You must"],["debes","you must"],["archivo","file"],["datos","data"],["sistema anterior","previous system"]
    ]
  };
  const uiSignal=/(pr[eé]stam|cuota|cobro|caja|cliente|gasto|reporte|ruta|personal|permiso|ubicaci[oó]n|migraci[oó]n|membres[ií]a|comprobante|configuraci[oó]n|guardar|cerrar|abrir|buscar|consultar|registrar|crear|soporte|asistente|empresa|pago|fecha|monto|estado|frecuencia|inter[eé]s|movimiento|seleccion|cargando|guardando|archivo|datos|nombre|tel[eé]fono|correo|direcci[oó]n|barrio|ciudad|documento|observaci[oó]n|latitud|longitud|n[uú]mero|complemento|funcionario|foto|galer[ií]a)/i;
  if(uiSignal.test(core)){
    let out=core;
    for(const [a,b] of (packs[lang]||[])) out=out.split(a).join(b);
    if(out!==core)return lead+out+trail;
  }
  return raw;
}
function applySutilLanguage(lang){
  lang=["es","pt","en"].includes(String(lang||"").toLowerCase())?String(lang).toLowerCase():"es";
  SUTIL_ACTIVE_LANGUAGE=lang; document.documentElement.lang=lang;
  const root=document.body; if(!root)return;
  const walker=document.createTreeWalker(root,NodeFilter.SHOW_TEXT);
  const nodes=[]; while(walker.nextNode())nodes.push(walker.currentNode);
  nodes.forEach(n=>{
    const parent=n.parentElement;
    if(!parent||["SCRIPT","STYLE","TEXTAREA","OPTION"].includes(parent.tagName))return;
    if(n.__sutilOriginal===undefined)n.__sutilOriginal=n.nodeValue;
    n.nodeValue=sutilTranslateText(n.__sutilOriginal,lang);
  });
  root.querySelectorAll("input[placeholder],textarea[placeholder],[title],[aria-label],input[type=button],input[type=submit]").forEach(el=>{
    ["placeholder","title","aria-label","value"].forEach(attr=>{
      if(!el.hasAttribute(attr))return;
      const key="sutilOriginal"+attr.replace(/[^a-zA-Z0-9]/g,"").replace(/^./,c=>c.toUpperCase());
      if(el.dataset[key]===undefined)el.dataset[key]=el.getAttribute(attr)||"";
      el.setAttribute(attr,sutilTranslateText(el.dataset[key],lang));
    });
  });
  root.querySelectorAll("option").forEach(el=>{if(el.__sutilOriginalText===undefined)el.__sutilOriginalText=el.textContent;el.textContent=sutilTranslateText(el.__sutilOriginalText,lang);});
  document.title=sutilTranslateText("Sutil · Administración",lang);
  try{ updateCollectionsWorkDateDisplay(); }catch(_e){}
  try{ syncDirectPaymentDateUi(); }catch(_e){}
  try{ renderBaseVisibilityControl(); }catch(_e){}
}
/* v69: sin observador global de traducción.
   Los módulos de Sutil actualizan el DOM constantemente; observar todo el documento
   provocaba re-traducciones continuas y parpadeo entre textos originales/traducidos. */
document.addEventListener('DOMContentLoaded',()=>setAccessLanguage(accessLanguageCode));

function reapplySutilLanguageOnce(delay=0){
  window.setTimeout(()=>{
    try{ applySutilLanguage(SUTIL_ACTIVE_LANGUAGE || readPersistedSutilCompanyLanguage?.() || currentUser?.language || "es"); }catch(_e){}
  }, Math.max(0, Number(delay)||0));
}


/* ============================================================
   SUTIL · Centro general de notificaciones empresa v1
   ============================================================ */
let sutilNotifyItems=[];
let sutilNotifyUnread=0;
let sutilNotifyAudioContext=null;
let sutilNotifyPollTimer=null;
let sutilNotifyInitialTimer=null;
let sutilNotifyPollBusy=false;
let sutilNotifyInitialized=false;
let sutilNotifyKnownReceiptIds=new Set();
let sutilNotifySupportMessageKeys=new Set();
let sutilNotifySupportRequestStates=new Map();
let sutilNotifyLastClientMessageId=0;
const sutilNotifyChatKeys=new Map();


function sutilNotifyStorageKey(){
  const company=currentUser?.company_id||currentUser?.id||"guest";
  return `sutil_notify_sound_profile_${company}`;
}
function defaultSutilSoundProfile(){
  return {chat:"soft",pix:"cash",support:"chime",alert:"urgent"};
}
function loadSutilSoundProfile(){
  let profile=defaultSutilSoundProfile();
  try{
    const saved=JSON.parse(localStorage.getItem(sutilNotifyStorageKey())||"null");
    if(saved && typeof saved==="object")profile={...profile,...saved};
  }catch(_){}
  const map={chat:"sutilSoundChat",pix:"sutilSoundPix",support:"sutilSoundSupport",alert:"sutilSoundAlert"};
  Object.entries(map).forEach(([key,id])=>{
    const el=document.getElementById(id);
    if(el)el.value=profile[key]||defaultSutilSoundProfile()[key];
  });
  syncSutilSoundMobileButtons();
  syncSutilMobileSelectButtons();
  return profile;
}
function saveSutilSoundProfile(){
  const profile={
    chat:document.getElementById("sutilSoundChat")?.value||"soft",
    pix:document.getElementById("sutilSoundPix")?.value||"cash",
    support:document.getElementById("sutilSoundSupport")?.value||"chime",
    alert:document.getElementById("sutilSoundAlert")?.value||"urgent"
  };
  localStorage.setItem(sutilNotifyStorageKey(),JSON.stringify(profile));
}


function syncSutilMobileSelectButtons(){
  document.querySelectorAll(".sutil-mobile-select-btn").forEach(btn=>{
    const sel=document.getElementById(btn.dataset.selectId||"");
    if(!sel)return;
    const opt=sel.options[sel.selectedIndex];
    btn.textContent=opt?.textContent||sel.value||"Elegir opción";
  });
}
function openSutilMobileSelectPicker(button){
  const sel=document.getElementById(button?.dataset?.selectId||"");
  const wrap=document.getElementById("sutilMobileSelectPicker");
  const list=document.getElementById("sutilMobileSelectOptions");
  const title=document.getElementById("sutilMobileSelectTitle");
  if(!sel||!wrap||!list)return;
  if(title)title.textContent=button.dataset.selectTitle||"Elegir opción";
  list.innerHTML="";
  Array.from(sel.options).forEach(opt=>{
    const b=document.createElement("button");
    b.type="button";
    const isAccessLanguage=sel.id==="accessLanguage";
    b.className="sutil-mobile-select-option"+(isAccessLanguage?" sutil-language-option":"")+(opt.value===sel.value?" active":"");
    if(isAccessLanguage){
      const languageMeta={
        es:{code:"ES",sub:"Español"},
        pt:{code:"PT",sub:"Português"},
        en:{code:"EN",sub:"English"}
      }[opt.value]||{code:String(opt.value||"").toUpperCase(),sub:opt.textContent};
      b.innerHTML=`<span class="sutil-language-code">${languageMeta.code}</span><span class="sutil-language-label"><strong>${opt.textContent}</strong><small>${languageMeta.sub}</small></span><span class="sutil-language-check">✓</span>`;
    }else{
      b.textContent=opt.textContent;
    }
    b.onclick=()=>{
      sel.value=opt.value;
      sel.dispatchEvent(new Event("change",{bubbles:true}));
      syncSutilMobileSelectButtons();
      closeSutilMobileSelectPicker();
    };
    list.appendChild(b);
  });
  wrap.classList.add("open");
  wrap.setAttribute("aria-hidden","false");
}
function closeSutilMobileSelectPicker(){
  const wrap=document.getElementById("sutilMobileSelectPicker");
  if(!wrap)return;
  wrap.classList.remove("open");
  wrap.setAttribute("aria-hidden","true");
}

function sutilSoundSelectId(type){
  return {chat:"sutilSoundChat",pix:"sutilSoundPix",support:"sutilSoundSupport",alert:"sutilSoundAlert"}[type]||"";
}
function syncSutilSoundMobileButtons(){
  document.querySelectorAll(".sutil-sound-mobile-btn").forEach(btn=>{
    const type=btn.dataset.soundType||"";
    const sel=document.getElementById(sutilSoundSelectId(type));
    if(!sel)return;
    const opt=sel.options[sel.selectedIndex];
    btn.textContent=opt?.textContent||sel.value||"Elegir sonido";
  });
}
function openSutilSoundPicker(type){
  try{ event?.stopPropagation?.(); }catch(_){}
  const sel=document.getElementById(sutilSoundSelectId(type));
  const wrap=document.getElementById("sutilSoundPicker");
  const list=document.getElementById("sutilSoundPickerOptions");
  const title=document.getElementById("sutilSoundPickerTitle");
  if(!sel||!wrap||!list)return;
  const titles={chat:"Mensajes de clientes",pix:"Comprobante PIX / revisión",support:"Soporte / membresía",alert:"Alertas importantes"};
  if(title)title.textContent=titles[type]||"Elegir sonido";
  list.innerHTML="";
  Array.from(sel.options).forEach(opt=>{
    const b=document.createElement("button");
    b.type="button";
    b.className="sutil-sound-picker-option"+(opt.value===sel.value?" active":"");
    b.textContent=opt.textContent;
    b.onclick=()=>{
      sel.value=opt.value;
      sel.dispatchEvent(new Event("change",{bubbles:true}));
      saveSutilSoundProfile();
      syncSutilSoundMobileButtons();
      try{ playSutilNotificationSound(opt.value); }catch(_){}
      closeSutilSoundPicker();
    };
    list.appendChild(b);
  });
  wrap.classList.add("open");
  wrap.setAttribute("aria-hidden","false");
}
function closeSutilSoundPicker(){
  const wrap=document.getElementById("sutilSoundPicker");
  if(!wrap)return;
  wrap.classList.remove("open");
  wrap.setAttribute("aria-hidden","true");
}
function getSutilEventSound(type){
  let profile=defaultSutilSoundProfile();
  try{
    const saved=JSON.parse(localStorage.getItem(sutilNotifyStorageKey())||"null");
    if(saved && typeof saved==="object")profile={...profile,...saved};
  }catch(_){}
  if(type==="membership")return profile.support;
  return profile[type]||profile.alert||"urgent";
}
function previewSutilEventSound(type){
  playSutilNotificationSound(getSutilEventSound(type));
}

function sutilNotifyAudio(){
  if(!sutilNotifyAudioContext){
    const Ctx=window.AudioContext||window.webkitAudioContext;
    if(!Ctx)return null;
    sutilNotifyAudioContext=new Ctx();
  }
  if(sutilNotifyAudioContext.state==="suspended")sutilNotifyAudioContext.resume().catch(()=>{});
  return sutilNotifyAudioContext;
}
function sutilNotifyTone(ctx,freq,start,duration,volume=.055,type="sine"){
  const osc=ctx.createOscillator(),gain=ctx.createGain();
  osc.type=type;osc.frequency.setValueAtTime(freq,start);
  gain.gain.setValueAtTime(.0001,start);
  gain.gain.exponentialRampToValueAtTime(Math.max(.001,volume),start+.012);
  gain.gain.exponentialRampToValueAtTime(.0001,start+duration);
  osc.connect(gain);gain.connect(ctx.destination);osc.start(start);osc.stop(start+duration+.02);
}

function playSutilNotificationSound(sound="soft"){
  if(sound==="none")return;
  try{
    const ctx=sutilNotifyAudio();if(!ctx)return;
    const t=ctx.currentTime+.02;
    if(sound==="soft"){
      sutilNotifyTone(ctx,660,t,.16,.045);sutilNotifyTone(ctx,880,t+.16,.18,.04);
    }else if(sound==="bell"){
      sutilNotifyTone(ctx,1046.5,t,.22,.065);sutilNotifyTone(ctx,1318.5,t+.10,.28,.045);
    }else if(sound==="digital"){
      sutilNotifyTone(ctx,880,t,.10,.055,"square");sutilNotifyTone(ctx,1174.7,t+.12,.10,.05,"square");sutilNotifyTone(ctx,1568,t+.24,.12,.04,"square");
    }else if(sound==="double"){
      sutilNotifyTone(ctx,740,t,.13,.06,"triangle");sutilNotifyTone(ctx,740,t+.22,.13,.06,"triangle");
    }else if(sound==="urgent"){
      sutilNotifyTone(ctx,520,t,.13,.07,"square");sutilNotifyTone(ctx,780,t+.15,.13,.065,"square");sutilNotifyTone(ctx,520,t+.30,.13,.07,"square");sutilNotifyTone(ctx,780,t+.45,.13,.065,"square");
    }else if(sound==="pop"){
      sutilNotifyTone(ctx,900,t,.07,.055,"sine");sutilNotifyTone(ctx,1250,t+.06,.09,.045,"sine");
    }else if(sound==="chime"){
      sutilNotifyTone(ctx,523.25,t,.20,.045,"sine");sutilNotifyTone(ctx,659.25,t+.10,.22,.045,"sine");sutilNotifyTone(ctx,783.99,t+.20,.25,.04,"sine");
    }else if(sound==="bubble"){
      sutilNotifyTone(ctx,430,t,.08,.05,"sine");sutilNotifyTone(ctx,620,t+.07,.10,.045,"sine");sutilNotifyTone(ctx,810,t+.15,.11,.04,"sine");
    }else if(sound==="ping"){
      sutilNotifyTone(ctx,1450,t,.10,.05,"sine");
    }else if(sound==="cash"){
      sutilNotifyTone(ctx,880,t,.08,.06,"square");sutilNotifyTone(ctx,1320,t+.08,.08,.055,"square");sutilNotifyTone(ctx,1760,t+.16,.12,.045,"triangle");
    }else if(sound==="confirm"){
      sutilNotifyTone(ctx,620,t,.13,.05,"sine");sutilNotifyTone(ctx,930,t+.14,.18,.055,"sine");
    }else if(sound==="notify"){
      sutilNotifyTone(ctx,700,t,.10,.05,"triangle");sutilNotifyTone(ctx,980,t+.11,.12,.05,"triangle");
    }else if(sound==="alarm"){
      sutilNotifyTone(ctx,440,t,.16,.075,"square");sutilNotifyTone(ctx,660,t+.17,.16,.075,"square");sutilNotifyTone(ctx,440,t+.34,.16,.075,"square");sutilNotifyTone(ctx,660,t+.51,.16,.075,"square");
    }
  }catch(e){console.warn("Sutil sonido:",e)}
}

function sutilNotifyKey(prefix,obj,index=0){
  return `${prefix}:${obj?.id??obj?.message_id??obj?.created_at??index}:${obj?.created_at??""}`;
}
function addSutilNotification(type,title,textValue,meta={}){
  const item={
    id:`${Date.now()}-${Math.random().toString(36).slice(2,8)}`,
    type,title,text:String(textValue||""),created_at:new Date().toISOString(),unread:true,...meta
  };
  sutilNotifyItems.unshift(item);
  if(sutilNotifyItems.length>50)sutilNotifyItems.length=50;
  sutilNotifyUnread++;
  renderSutilNotifications();
  playSutilNotificationSound(getSutilEventSound(type));
  const toast=document.getElementById("sutilNotifyToast");
  if(toast){
    document.getElementById("sutilNotifyToastTitle").textContent=title;
    document.getElementById("sutilNotifyToastText").textContent=item.text;
    toast.classList.add("show");
    setTimeout(()=>toast.classList.remove("show"),5500);
  }
}
function renderSutilNotifications(){
  const badge=document.getElementById("sutilNotifyBadge");
  const menuCount=document.getElementById("sutilAiNotifyCount");
  const list=document.getElementById("sutilNotifyList");
  updateSutilAiFabVisibility();
  if(badge){
    badge.textContent=String(sutilNotifyUnread);
    badge.classList.toggle("show",sutilNotifyUnread>0);
  }
  if(menuCount){
    menuCount.textContent=String(sutilNotifyUnread);
    menuCount.style.display=sutilNotifyUnread>0?"inline-block":"none";
  }
  if(!list)return;
  list.innerHTML=sutilNotifyItems.length?sutilNotifyItems.map(n=>`
    <div class="sutil-notify-item ${n.unread?"unread":""}">
      <strong>${legacyEscapeHtml(n.title)}</strong>
      <div style="margin-top:3px;font-size:12px">${legacyEscapeHtml(n.text)}</div>
      <small>${sutilLocalDateTime(n.created_at)}</small>
    </div>`).join(""):'<div class="sutil-notify-empty">Sin notificaciones nuevas.</div>';
}
function toggleSutilNotifyPanel(){
  const panel=document.getElementById("sutilNotifyPanel");if(!panel)return;
  const open=!panel.classList.contains("open");
  panel.classList.toggle("open",open);panel.setAttribute("aria-hidden",open?"false":"true");
}
function markAllSutilNotificationsRead(){
  sutilNotifyItems.forEach(n=>n.unread=false);sutilNotifyUnread=0;renderSutilNotifications();
}
function observeSutilChatMessages(scopeId,messages=[]){
  if(!Array.isArray(messages))return;
  const inbound=messages.filter(m=>m && m.sender_is_client===true && (m.kind==="chat"||m.kind==="chat_attachment"));
  const latest=inbound.length?inbound[inbound.length-1]:null;
  const key=latest?sutilNotifyKey("chat",latest):"";
  const previous=sutilNotifyChatKeys.get(String(scopeId))||"";
  if(previous && key && key!==previous){
    addSutilNotification(
      "chat",
      "💬 Nuevo mensaje de cliente",
      latest.kind==="chat_attachment"?"El cliente envió un archivo o comprobante.":(latest.text||"Tienes un mensaje nuevo."),
      {scope_id:scopeId}
    );
  }
  if(key)sutilNotifyChatKeys.set(String(scopeId),key);
  if(latest?.id)sutilNotifyLastClientMessageId=Math.max(sutilNotifyLastClientMessageId,Number(latest.id));
}
async function pollSutilGeneralNotifications(initial=false){
  if(!currentUser || !navigator.onLine)return;
  try{
    const receiptRows=await api("/api/admin/receipts");
    const checking=(Array.isArray(receiptRows)?receiptRows:[]).filter(r=>r.status==="checking");
    const currentIds=new Set(checking.map(r=>Number(r.id)));
    if(!sutilNotifyInitialized || initial){
      sutilNotifyKnownReceiptIds=currentIds;
    }else{
      const fresh=checking.filter(r=>!sutilNotifyKnownReceiptIds.has(Number(r.id)));
      if(typeof sutilAdminNotificationEnabled!=="function" || sutilAdminNotificationEnabled("notify_new_receipt")){
        fresh.forEach(r=>addSutilNotification(
          "pix","💳 Nuevo comprobante PIX",
          `${r.client_name||"Cliente"} · ${money(r.amount||0)} · ${r.route_name||"Sin ruta"}`
        ));
      }
      sutilNotifyKnownReceiptIds=currentIds;
    }
  }catch(e){}

  /* Mensajes nuevos enviados por clientes, aunque el chat no esté abierto */
  try{
    const url=sutilNotifyLastClientMessageId>0
      ? `/api/admin/client-message-notifications?after_id=${encodeURIComponent(sutilNotifyLastClientMessageId)}`
      : "/api/admin/client-message-notifications";

    const chatOverview=await api(url);
    const clientMessages=Array.isArray(chatOverview?.messages)?chatOverview.messages:[];

    if(!sutilNotifyInitialized || initial){
      const responseLast=Number(chatOverview?.last_id||0);
      const listLast=clientMessages.reduce((max,m)=>Math.max(max,Number(m.id||0)),0);
      sutilNotifyLastClientMessageId=Math.max(responseLast,listLast,sutilNotifyLastClientMessageId);
    }else{
      clientMessages.forEach(m=>{
        const isAttachment=m.kind==="chat_attachment";
        let body=isAttachment
          ? "El cliente envió un archivo."
          : String(m.text||"Tienes un mensaje nuevo.");

        if(m.client_name){
          body=`${m.client_name}: ${body}`;
        }

        addSutilNotification(
          "chat",
          isAttachment ? "📎 Nuevo archivo de cliente" : "💬 Nuevo mensaje de cliente",
          body,
          {
            client_id:Number(m.client_id||0),
            message_id:Number(m.id||0)
          }
        );

        sutilNotifyLastClientMessageId=Math.max(
          sutilNotifyLastClientMessageId,
          Number(m.id||0)
        );
      });

      const responseLast=Number(chatOverview?.last_id||0);
      sutilNotifyLastClientMessageId=Math.max(
        sutilNotifyLastClientMessageId,
        responseLast
      );
    }
  }catch(e){
    console.warn("Sutil notificación chat cliente:",e);
  }

  if(["company_owner","sutil_owner"].includes(currentUser?.role)){
    try{
      const overview=await api("/api/admin/sutil-support/overview");
      const msgs=Array.isArray(overview?.messages)?overview.messages:[];
      const incoming=msgs.filter(m=>m.sender_side!=="company");
      const currentMsgKeys=new Set(incoming.map((m,i)=>sutilNotifyKey("support",m,i)));
      const reqs=Array.isArray(overview?.requests)?overview.requests:[];

      if(!sutilNotifyInitialized || initial){
        sutilNotifySupportMessageKeys=currentMsgKeys;
        sutilNotifySupportRequestStates=new Map(reqs.map(r=>[Number(r.id),String(r.status||"")]));
      }else{
        incoming.forEach((m,i)=>{
          const key=sutilNotifyKey("support",m,i);
          if(!sutilNotifySupportMessageKeys.has(key)){
            addSutilNotification("support","🛟 Nuevo mensaje de Soporte Sutil",m.message||"Tienes una respuesta nueva.");
          }
        });
        reqs.forEach(r=>{
          const id=Number(r.id),state=String(r.status||"");
          const before=sutilNotifySupportRequestStates.get(id);
          if(before && before!==state){
            addSutilNotification("membership","📌 Solicitud actualizada",`${sutilSupportStatusLabel(state)} · ${sutilMembershipPlanLabel(r.plan_code||r.plan_type||"")}`);
          }
        });
        sutilNotifySupportMessageKeys=currentMsgKeys;
        sutilNotifySupportRequestStates=new Map(reqs.map(r=>[Number(r.id),String(r.status||"")]));
      }
    }catch(e){}
  }
  sutilNotifyInitialized=true;
}
function startSutilGeneralNotificationPolling(){
  stopSutilGeneralNotificationPolling();
  loadSutilSoundProfile();renderSutilNotifications();
  if(typeof loadSutilNotificationSettings==="function")loadSutilNotificationSettings(false).catch(()=>{});
  // v90e: no competir con /api/me y dashboard durante el ingreso.
  sutilNotifyInitialTimer=setTimeout(()=>{
    if(!currentUser || document.hidden || sutilNotifyPollBusy)return;
    sutilNotifyPollBusy=true;
    pollSutilGeneralNotifications(true).catch(()=>{}).finally(()=>{sutilNotifyPollBusy=false;});
  },SUTIL_MOBILE_ADMIN?1800:900);
  const intervalMs=SUTIL_MOBILE_ADMIN?15000:10000;
  sutilNotifyPollTimer=setInterval(()=>{
    if(document.hidden || sutilNotifyPollBusy || !navigator.onLine)return;
    sutilNotifyPollBusy=true;
    pollSutilGeneralNotifications(false).catch(()=>{}).finally(()=>{sutilNotifyPollBusy=false;});
  },intervalMs);
}
function stopSutilGeneralNotificationPolling(){
  if(sutilNotifyInitialTimer){clearTimeout(sutilNotifyInitialTimer);sutilNotifyInitialTimer=null;}
  if(sutilNotifyPollTimer){clearInterval(sutilNotifyPollTimer);sutilNotifyPollTimer=null;}
  sutilNotifyPollBusy=false;
}
document.addEventListener("pointerdown",()=>{try{sutilNotifyAudio()}catch(_){}},{once:true});
document.addEventListener("click",e=>{
  const panel=document.getElementById("sutilNotifyPanel");
  const aiFab=document.getElementById("sutilAiFab");
  const aiFloatPanel=document.getElementById("sutilAiFloatPanel");
  if(
    panel?.classList.contains("open") &&
    !panel.contains(e.target) &&
    !aiFab?.contains(e.target) &&
    !aiFloatPanel?.contains(e.target)
  ){
    panel.classList.remove("open");
    panel.setAttribute("aria-hidden","true");
  }
});


/* SUTIL · Botón flotante de Asistente */
function updateSutilAiFabVisibility(){
  const fab=document.getElementById("sutilAiFab");
  if(!fab)return;
  fab.classList.toggle("show",Boolean(currentUser));
}
function toggleSutilAiFloatPanel(){
  const panel=document.getElementById("sutilAiFloatPanel");if(!panel)return;
  const notifications=document.getElementById("sutilNotifyPanel");
  if(notifications){notifications.classList.remove("open");notifications.setAttribute("aria-hidden","true");}
  const open=!panel.classList.contains("open");
  panel.classList.toggle("open",open);
  panel.setAttribute("aria-hidden",open?"false":"true");
}
function closeSutilAiFloatPanel(){
  const panel=document.getElementById("sutilAiFloatPanel");
  if(panel){panel.classList.remove("open");panel.setAttribute("aria-hidden","true");}
}
function openSutilNotificationsFromAi(){
  closeSutilAiFloatPanel();
  const panel=document.getElementById("sutilNotifyPanel");
  if(!panel)return;
  renderSutilNotifications();
  panel.classList.add("open");
  panel.setAttribute("aria-hidden","false");
}
async function openFloatingSutilAssistant(mode="ai"){
  closeSutilAiFloatPanel();
  openSection("sutilSupportSection");
  openSutilSupportView("assistant");
  try{await loadSutilSupport(true);}catch(_){}
  setTimeout(()=>{
    if(mode==="human"){
      const human=document.getElementById("sutilSupportText");
      if(human){
        human.scrollIntoView({behavior:"smooth",block:"center"});
        setTimeout(()=>human.focus(),350);
      }
    }else{
      const ai=document.getElementById("sutilAiText");
      if(ai){
        ai.scrollIntoView({behavior:"smooth",block:"center"});
        setTimeout(()=>ai.focus(),350);
      }
    }
  },180);
}
document.addEventListener("click",e=>{
  const panel=document.getElementById("sutilAiFloatPanel");
  const fab=document.getElementById("sutilAiFab");
  if(panel?.classList.contains("open") && !panel.contains(e.target) && !fab?.contains(e.target)){
    closeSutilAiFloatPanel();
  }
});
document.addEventListener("keydown",e=>{if(e.key==="Escape")closeSutilAiFloatPanel();});


/* ============================================================
   SUTIL · Motor de diálogos profesionales
   ============================================================ */
let sutilDialogResolver=null;

function sutilDialogTone(message=""){
  const value=String(message||"").toLowerCase();
  if(/error|no fue posible|no se puede|rechaz|elimin|desactiv|pérdida|fall|inválid|expir/.test(value))return "danger";
  if(/confirm|¿|continuar|cerrar|reabrir|corrección|importar|reemplaz|modificar/.test(value))return "warning";
  if(/guardad|cread|copiad|confirmado|éxito|eliminado|actualizad|registrad/.test(value))return "success";
  return "info";
}
function sutilDialogMeta(type,message,title){
  const tone=type==="confirm"?"warning":type==="prompt"?"info":sutilDialogTone(message);
  const icons={info:"ℹ",success:"✓",warning:"!",danger:"!"};
  const titles={
    alert:{info:"Información",success:"Operación realizada",warning:"Atención",danger:"No fue posible completar"},
    confirm:{warning:title||"Confirmar acción"},
    prompt:{info:title||"Información requerida"}
  };
  return {tone,icon:icons[tone]||"ℹ",title:title||titles[type]?.[tone]||"Sutil"};
}
function closeSutilDialog(value){
  const modal=document.getElementById("sutilGlobalDialog");
  if(modal){
    modal.classList.remove("open");
    modal.setAttribute("aria-hidden","true");
  }
  const resolver=sutilDialogResolver;
  sutilDialogResolver=null;
  if(resolver)resolver(value);
}
function openSutilDialog({
  type="alert",message="",title="",subtitle="",confirmText="",cancelText="Cancelar",defaultValue=""
}={}){
  return new Promise(resolve=>{
    if(sutilDialogResolver){
      const previous=sutilDialogResolver;
      sutilDialogResolver=null;
      previous(type==="prompt"?null:false);
    }
    sutilDialogResolver=resolve;
    const modal=document.getElementById("sutilGlobalDialog");
    const icon=document.getElementById("sutilDialogIcon");
    const titleEl=document.getElementById("sutilDialogTitle");
    const subtitleEl=document.getElementById("sutilDialogSubtitle");
    const messageEl=document.getElementById("sutilDialogMessage");
    const input=document.getElementById("sutilDialogInput");
    const cancel=document.getElementById("sutilDialogCancel");
    const confirm=document.getElementById("sutilDialogConfirm");
    const meta=sutilDialogMeta(type,message,title);

    icon.className=`sutil-dialog-icon ${meta.tone}`;
    icon.textContent=meta.icon;
    titleEl.textContent=meta.title;
    subtitleEl.textContent=subtitle||(
      type==="confirm" ? "Revisa la información antes de continuar." :
      type==="prompt" ? "Completa el dato solicitado para continuar." :
      ""
    );
    messageEl.textContent=String(message??"");

    input.style.display=type==="prompt"?"block":"none";
    input.value=type==="prompt"?String(defaultValue??""):"";

    cancel.style.display=type==="alert"?"none":"inline-block";
    cancel.textContent=cancelText||"Cancelar";
    confirm.textContent=confirmText||(
      type==="confirm"?"Confirmar":type==="prompt"?"Continuar":"Aceptar"
    );
    confirm.className=`sutil-dialog-action sutil-dialog-confirm ${meta.tone}`;

    cancel.onclick=()=>closeSutilDialog(type==="prompt"?null:false);
    confirm.onclick=()=>closeSutilDialog(type==="prompt"?input.value:true);

    modal.classList.add("open");
    modal.setAttribute("aria-hidden","false");

    setTimeout(()=>{
      if(type==="prompt"){
        input.focus();
        input.select();
      }else{
        confirm.focus();
      }
    },30);
  });
}
async function sutilAlert(message,options={}){
  return openSutilDialog({type:"alert",message,...options});
}
async function sutilConfirm(message,options={}){
  return openSutilDialog({type:"confirm",message,...options});
}
async function sutilPrompt(message,defaultValue="",options={}){
  return openSutilDialog({type:"prompt",message,defaultValue,...options});
}

/* Los alert() existentes también pasan automáticamente por el diseño Sutil. */
window.alert=function(message){
  sutilAlert(message);
};

document.addEventListener("keydown",event=>{
  const modal=document.getElementById("sutilGlobalDialog");
  if(!modal?.classList.contains("open"))return;
  if(event.key==="Escape"){
    event.preventDefault();
    const input=document.getElementById("sutilDialogInput");
    closeSutilDialog(input?.style.display!=="none"?null:false);
  }
  if(event.key==="Enter"){
    const input=document.getElementById("sutilDialogInput");
    const confirm=document.getElementById("sutilDialogConfirm");
    if(document.activeElement===input || input?.style.display==="none"){
      event.preventDefault();
      confirm?.click();
    }
  }
});


/* Sutil v12 · tema persistente para empresario / ADM / cobrador */
function setSutilTheme(theme){
  const value=theme==="light"?"light":"dark";
  document.body.setAttribute("data-sutil-theme",value);
  try{localStorage.setItem("sutil_admin_theme",value)}catch(_){}
  updateSutilThemeButtons();
  setTimeout(()=>{
    try{
      const monthly=document.getElementById("monthlyReportChart");
      const route=document.getElementById("routeReportChart");
      if(monthly && monthly.offsetParent!==null && typeof reportData!=="undefined" && reportData?.monthly)drawLineChart(monthly,reportData.monthly);
      if(route && route.offsetParent!==null && typeof reportData!=="undefined" && reportData?.routes)drawRouteBars(route,reportData.routes);
      if(typeof drawAnnualReportChart==="function")drawAnnualReportChart();
    }catch(_){}
  },30);
}
function updateSutilThemeButtons(){
  const value=document.body.getAttribute("data-sutil-theme")||"dark";
  const idsLight=["sutilThemeLight","sutilThemeFloatLight"];
  const idsDark=["sutilThemeDark","sutilThemeFloatDark"];
  idsLight.forEach(id=>{const el=document.getElementById(id);if(el)el.classList.toggle("active",value==="light")});
  idsDark.forEach(id=>{const el=document.getElementById(id);if(el)el.classList.toggle("active",value==="dark")});
}
function initSutilTheme(){
  let saved="dark";
  try{saved=localStorage.getItem("sutil_admin_theme")||"dark"}catch(_){}
  document.body.setAttribute("data-sutil-theme",saved==="light"?"light":"dark");
  updateSutilThemeButtons();
}
initSutilTheme();

</script>

<div id="sutilRenewalModalBackdrop" class="sutil-renewal-modal-backdrop" aria-hidden="true">
  <div class="sutil-renewal-modal" role="dialog" aria-modal="true" aria-labelledby="sutilRenewalModalTitle">
    <div class="sutil-renewal-modal-head">
      <div>
        <h3 id="sutilRenewalModalTitle">💳 Confirmar renovación o cambio de plan</h3>
        <p>Revisa el valor, realiza el pago y adjunta el comprobante si ya lo tienes.</p>
      </div>
      <button class="sutil-renewal-modal-close" type="button" onclick="closeSutilRenewalModal()" aria-label="Cerrar">×</button>
    </div>
    <div class="sutil-renewal-modal-body">
      <div id="sutilRenewalModalSummary"></div>

      <div class="sutil-renewal-payment">
        <div class="sutil-renewal-payment-head">
          <div><small class="muted">Medio de pago</small><strong id="sutilRenewalModalMethodName">—</strong></div>
          <button id="sutilRenewalModalCopyPix" class="btn secondary" type="button" style="display:none">📋 Copiar llave PIX</button>
        </div>
        <div id="sutilRenewalModalPixKey" class="sutil-renewal-pix-key" style="display:none"></div>
        <div id="sutilRenewalModalMethodDetails" class="muted" style="margin-top:8px"></div>
      </div>

      <div class="sutil-renewal-proof">
        <label for="sutilRenewalProofFile">📎 Adjuntar comprobante de pago</label>
        <input id="sutilRenewalProofFile" type="file" accept="image/jpeg,image/png,image/webp,application/pdf">
        <div class="sutil-renewal-proof-note">Puedes adjuntar una foto o PDF. Si todavía no realizaste el pago, puedes enviar la solicitud ahora y subir el comprobante después desde “Mis solicitudes”.</div>
      </div>

      <div id="sutilRenewalModalMsg" class="sutil-renewal-modal-msg"></div>
    </div>
    <div class="sutil-renewal-modal-actions">
      <button class="btn secondary" type="button" onclick="closeSutilRenewalModal()">Cancelar</button>
      <button class="btn" type="button" onclick="submitSutilRenewalFromModal(false)">Enviar comprobante después</button>
      <button id="sutilRenewalModalSubmitProof" class="btn success" type="button" onclick="submitSutilRenewalFromModal(true)">Enviar solicitud y comprobante</button>
    </div>
  </div>
</div>


<style id="sutil-admin-notification-settings-css-v1">
.sutil-notify-settings-summary{display:flex;align-items:center;justify-content:space-between;gap:14px}
.sutil-notify-head>div:first-child{min-width:0;flex:1}.sutil-notify-head>.btn{flex:0 0 auto}
.sutil-notify-settings-summary-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.sutil-notify-setting-badge{display:inline-flex;align-items:center;min-height:28px;padding:5px 9px;border-radius:999px;border:1px solid rgba(148,163,184,.45);background:rgba(148,163,184,.10);font-size:11px;font-weight:850;white-space:nowrap}
.sutil-notify-setting-badge.ok{border-color:rgba(22,163,74,.30);background:rgba(22,163,74,.10);color:#166534}
.sutil-notify-setting-badge.warn{border-color:rgba(217,119,6,.35);background:rgba(245,158,11,.12);color:#92400e}
.sutil-notify-settings-backdrop{position:fixed;inset:0;z-index:10080;background:rgba(15,23,42,.55);display:none;align-items:flex-end;justify-content:center;padding:14px}
.sutil-notify-settings-backdrop.open{display:flex}
.sutil-notify-settings-sheet{width:min(680px,100%);max-height:min(88vh,820px);overflow:auto;background:var(--ui-surface,#fff);color:var(--ui-text,#172033);border:1px solid var(--ui-border,#d9e1ea);border-radius:22px;box-shadow:0 26px 80px rgba(15,23,42,.28)}
.sutil-notify-settings-head{position:sticky;top:0;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 16px;background:var(--ui-surface,#fff);border-bottom:1px solid var(--ui-border,#d9e1ea)}
.sutil-notify-settings-head h3{margin:0;font-size:17px}.sutil-notify-settings-head small{display:block;margin-top:2px;color:var(--ui-muted,#64748b);font-size:11px}
.sutil-notify-settings-close{border:0;background:transparent;color:inherit;font-size:25px;line-height:1;padding:5px 8px;border-radius:10px;cursor:pointer}
.sutil-notify-settings-body{padding:14px 16px 18px}
.sutil-notify-device-card{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px;border:1px solid var(--ui-border,#d9e1ea);border-radius:16px;background:var(--ui-surface-2,#f7f9fc)}
.sutil-notify-device-title{display:flex;align-items:center;gap:8px;font-weight:900}.sutil-notify-device-sub{margin-top:3px;color:var(--ui-muted,#64748b);font-size:11px}
.sutil-notify-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.sutil-notify-option{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 11px;border:1px solid var(--ui-border,#d9e1ea);border-radius:14px;background:var(--ui-surface,#fff)}
.sutil-notify-option-text{min-width:0}.sutil-notify-option-text strong{display:block;font-size:12px;line-height:1.2}.sutil-notify-option-text small{display:block;margin-top:3px;color:var(--ui-muted,#64748b);font-size:10px;line-height:1.25}
.sutil-notify-switch{position:relative;width:42px;height:24px;flex:0 0 42px}.sutil-notify-switch input{position:absolute;opacity:0;pointer-events:none}.sutil-notify-switch span{position:absolute;inset:0;border-radius:999px;background:#cbd5e1;transition:.18s}.sutil-notify-switch span::after{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.25);transition:.18s}.sutil-notify-switch input:checked+span{background:#16a34a}.sutil-notify-switch input:checked+span::after{transform:translateX(18px)}
.sutil-notify-section-title{margin:16px 0 7px;font-size:12px;font-weight:950;letter-spacing:.02em;text-transform:uppercase;color:var(--ui-muted,#64748b)}
.sutil-notify-quiet{display:grid;grid-template-columns:minmax(0,1fr) 100px 100px;gap:8px;align-items:end;padding:10px 11px;border:1px solid var(--ui-border,#d9e1ea);border-radius:14px}.sutil-notify-quiet input[type=time],.sutil-notify-route-select{width:100%;min-height:38px}
.sutil-notify-route-row{display:grid;grid-template-columns:180px minmax(0,1fr);gap:10px;align-items:start}.sutil-notify-route-chips{display:flex;gap:7px;flex-wrap:wrap;max-height:116px;overflow:auto;padding:2px}.sutil-notify-route-chip{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:999px;border:1px solid var(--ui-border,#d9e1ea);font-size:11px;background:var(--ui-surface,#fff)}
.sutil-notify-settings-status{min-height:20px;margin-top:10px;font-size:11px;color:var(--ui-muted,#64748b)}
.sutil-notify-settings-status.ok{color:#15803d}.sutil-notify-settings-status.error{color:#b42318}
body[data-sutil-theme="dark"] .sutil-notify-setting-badge.ok{color:#86efac}body[data-sutil-theme="dark"] .sutil-notify-setting-badge.warn{color:#fcd34d}
@media(max-width:700px){.sutil-notify-head{flex-wrap:wrap}.sutil-notify-head>div:first-child{flex-basis:100%}.sutil-notify-settings-backdrop{padding:0;align-items:flex-end}.sutil-notify-settings-sheet{max-height:91vh;border-radius:22px 22px 0 0;border-bottom:0}.sutil-notify-grid{grid-template-columns:1fr}.sutil-notify-device-card{grid-template-columns:1fr}.sutil-notify-device-card .btn{width:100%}.sutil-notify-quiet{grid-template-columns:1fr 1fr}.sutil-notify-quiet>.sutil-notify-option-text{grid-column:1/-1}.sutil-notify-route-row{grid-template-columns:1fr}.sutil-notify-settings-summary{align-items:flex-start;flex-direction:column}.sutil-notify-settings-summary-actions{width:100%;justify-content:space-between}}
</style>

<div id="sutilNotifySettingsModal" class="sutil-notify-settings-backdrop" aria-hidden="true" onclick="if(event.target===this)closeSutilNotificationSettings()">
  <div class="sutil-notify-settings-sheet" role="dialog" aria-modal="true" aria-labelledby="sutilNotifySettingsTitle">
    <div class="sutil-notify-settings-head">
      <div><h3 id="sutilNotifySettingsTitle">🔔 Configuración de notificaciones</h3><small>Preferencias personales de este usuario y dispositivo.</small></div>
      <button class="sutil-notify-settings-close" type="button" onclick="closeSutilNotificationSettings()" aria-label="Cerrar">×</button>
    </div>
    <div class="sutil-notify-settings-body">
      <div class="sutil-notify-device-card">
        <div>
          <div class="sutil-notify-device-title">📲 Push al celular <span id="sutilNotifyDeviceBadge" class="sutil-notify-setting-badge">Comprobando…</span></div>
          <div id="sutilNotifyDeviceHelp" class="sutil-notify-device-sub">Permite recibir avisos aunque Sutil no esté abierto.</div>
        </div>
        <button id="sutilNotifyPushButton" class="btn success" type="button" onclick="toggleSutilPushThisDevice()">Activar push</button>
      </div>

      <div class="sutil-notify-section-title">Qué quieres recibir</div>
      <div class="sutil-notify-grid">
        <div class="sutil-notify-option"><div class="sutil-notify-option-text"><strong>Nuevo comprobante recibido</strong><small>Cliente, valor y ruta.</small></div><label class="sutil-notify-switch"><input id="sutilNotifyNewReceipt" type="checkbox" onchange="scheduleSutilNotificationSettingsSave()"><span></span></label></div>
        <div class="sutil-notify-option"><div class="sutil-notify-option-text"><strong>Resumen de pendientes</strong><small>Cantidad y total por conciliar.</small></div><label class="sutil-notify-switch"><input id="sutilNotifyPendingSummary" type="checkbox" onchange="scheduleSutilNotificationSettingsSave()"><span></span></label></div>
        <div class="sutil-notify-option"><div class="sutil-notify-option-text"><strong>Conciliación confirmada</strong><small>Pago identificado por el extracto.</small></div><label class="sutil-notify-switch"><input id="sutilNotifyReconConfirmed" type="checkbox" onchange="scheduleSutilNotificationSettingsSave()"><span></span></label></div>
        <div class="sutil-notify-option"><div class="sutil-notify-option-text"><strong>Confirmación manual</strong><small>Pago confirmado por un usuario autorizado.</small></div><label class="sutil-notify-switch"><input id="sutilNotifyManualConfirmed" type="checkbox" onchange="scheduleSutilNotificationSettingsSave()"><span></span></label></div>
        <div class="sutil-notify-option"><div class="sutil-notify-option-text"><strong>Requiere revisión</strong><small>Coincidencia ambigua o incompleta.</small></div><label class="sutil-notify-switch"><input id="sutilNotifyReviewRequired" type="checkbox" onchange="scheduleSutilNotificationSettingsSave()"><span></span></label></div>
        <div class="sutil-notify-option"><div class="sutil-notify-option-text"><strong>Duplicado o posible fraude</strong><small>Alertas de seguridad prioritarias.</small></div><label class="sutil-notify-switch"><input id="sutilNotifySecurity" type="checkbox" onchange="scheduleSutilNotificationSettingsSave()"><span></span></label></div>
        <div class="sutil-notify-option"><div class="sutil-notify-option-text"><strong>Rechazado o devuelto</strong><small>PIX fallido, reembolso o devolución.</small></div><label class="sutil-notify-switch"><input id="sutilNotifyRejectedRefunded" type="checkbox" onchange="scheduleSutilNotificationSettingsSave()"><span></span></label></div>
        <div class="sutil-notify-option"><div class="sutil-notify-option-text"><strong>Vibración del dispositivo</strong><small>Cuando el sistema operativo lo permita.</small></div><label class="sutil-notify-switch"><input id="sutilNotifyVibration" type="checkbox" onchange="scheduleSutilNotificationSettingsSave()"><span></span></label></div>
      </div>

      <div class="sutil-notify-section-title">Horario y rutas</div>
      <div class="sutil-notify-quiet">
        <div class="sutil-notify-option-text"><strong>Horario silencioso</strong><small>No enviar push durante este intervalo.</small><label class="sutil-notify-switch" style="margin-top:7px;display:block"><input id="sutilNotifyQuietEnabled" type="checkbox" onchange="scheduleSutilNotificationSettingsSave()"><span></span></label></div>
        <label>Desde<input id="sutilNotifyQuietStart" type="time" value="22:00" onchange="scheduleSutilNotificationSettingsSave()"></label>
        <label>Hasta<input id="sutilNotifyQuietEnd" type="time" value="07:00" onchange="scheduleSutilNotificationSettingsSave()"></label>
      </div>
      <div class="sutil-notify-route-row" style="margin-top:10px">
        <label>Notificaciones de rutas<select id="sutilNotifyRouteMode" class="sutil-notify-route-select" onchange="renderSutilNotificationRouteChoices();scheduleSutilNotificationSettingsSave()"></select></label>
        <div id="sutilNotifyRouteChoices" class="sutil-notify-route-chips"></div>
      </div>
      <div id="sutilNotifySettingsStatus" class="sutil-notify-settings-status"></div>
    </div>
  </div>
</div>

<div id="sutilNotifyPanel" class="sutil-notify-panel" aria-hidden="true">
  <div class="sutil-notify-head">
    <div><h4>🔔 Notificaciones</h4><small>Mensajes, PIX y actividad importante.</small></div>
    <button class="btn secondary" type="button" style="padding:6px 9px" onclick="openSutilNotificationSettings()" aria-label="Configurar notificaciones">⚙️</button>
    <button class="btn secondary" type="button" style="padding:6px 9px" onclick="markAllSutilNotificationsRead()">✓ Leer todo</button>
  </div>
  <div id="sutilNotifyList" class="sutil-notify-list"><div class="sutil-notify-empty">Sin notificaciones nuevas.</div></div>
</div>
<div id="sutilNotifyToast" class="sutil-notify-toast"><strong id="sutilNotifyToastTitle"></strong><small id="sutilNotifyToastText"></small></div>


<button id="sutilAiFab" class="sutil-ai-fab" type="button" onclick="toggleSutilAiFloatPanel()" aria-label="Centro Sutil AI">
  <span class="sutil-ai-fab-logo">AI<small>SUTIL</small></span>
  <span id="sutilNotifyBadge" class="sutil-notify-badge">0</span>
</button>

<div id="sutilAiFloatPanel" class="sutil-ai-float-panel" aria-hidden="true">
  <div class="sutil-ai-float-head">
    <strong>✦ Centro de asistencia</strong>
    <small>Asistencia, soporte humano y notificaciones en un solo lugar.</small>
  </div>
  <div class="sutil-ai-float-options">
    <button class="sutil-ai-float-option" type="button" onclick="openFloatingSutilAssistant('ai')">
      <span class="ico">AI</span>
      <span><strong>Asistente Sutil</strong><small>Preguntas, ayuda de uso, navegación y solución guiada.</small></span>
    </button>
    <button class="sutil-ai-float-option human" type="button" onclick="openFloatingSutilAssistant('human')">
      <span class="ico">👤</span>
      <span><strong>Asistente humano</strong><small>Habla directamente con soporte cuando necesites atención personal.</small></span>
    </button>
    <button class="sutil-ai-float-option notifications" type="button" onclick="event.stopPropagation();openSutilNotificationsFromAi()">
      <span class="ico">🔔</span>
      <span style="min-width:0;flex:1"><strong>Notificaciones <span id="sutilAiNotifyCount" style="display:none;margin-left:5px;background:#b42318;color:#fff;border-radius:999px;padding:2px 6px;font-size:9px">0</span></strong><small>Mensajes, comprobantes PIX, soporte y actividad importante.</small></span>
    </button>
  </div>
</div>


<div id="sutilCashReceiptModal" aria-hidden="true" onclick="if(event.target===this)closeSutilCashReceipt()">
  <div class="cash-receipt-panel" role="dialog" aria-modal="true" aria-labelledby="sutilCashReceiptTitle">
    <h3 id="sutilCashReceiptTitle">✅ Caja cerrada correctamente</h3>
    <p id="sutilCashReceiptSubtitle">El cierre fue guardado. Puedes compartir o imprimir el comprobante.</p>
    <div id="sutilCashReceiptSummary" style="font-weight:800;font-size:17px;margin:0 0 15px"></div>
    <div class="cash-receipt-actions">
      <button type="button" id="sutilCashReceiptImage" class="cash-receipt-primary" onclick="exportSutilCashReceipt('image')">🖼 Compartir imagen</button>
      <button type="button" id="sutilCashReceiptPdf" class="cash-receipt-primary" onclick="exportSutilCashReceipt('pdf')">📄 Compartir PDF</button>
      <button type="button" id="sutilCashReceiptPrint" onclick="printSutilCashReceipt()">🖨 Imprimir</button>
      <button type="button" id="sutilCashReceiptDismiss" onclick="closeSutilCashReceipt()">Cerrar</button>
    </div>
    <div class="cash-receipt-status" id="sutilCashReceiptStatus" role="status" aria-live="polite"></div>
  </div>
</div>

<div id="sutilGlobalDialog" class="sutil-dialog-backdrop" aria-hidden="true">
  <div class="sutil-dialog-card" role="dialog" aria-modal="true" aria-labelledby="sutilDialogTitle">
    <div class="sutil-dialog-head">
      <div id="sutilDialogIcon" class="sutil-dialog-icon info">ℹ</div>
      <div style="min-width:0">
        <h3 id="sutilDialogTitle" class="sutil-dialog-title">Sutil</h3>
        <p id="sutilDialogSubtitle" class="sutil-dialog-subtitle"></p>
      </div>
    </div>
    <div class="sutil-dialog-body">
      <div id="sutilDialogMessage"></div>
      <input id="sutilDialogInput" class="sutil-dialog-input" type="text" style="display:none" autocomplete="off">
    </div>
    <div class="sutil-dialog-actions">
      <button id="sutilDialogCancel" class="sutil-dialog-action sutil-dialog-cancel" type="button">Cancelar</button>
      <button id="sutilDialogConfirm" class="sutil-dialog-action sutil-dialog-confirm" type="button">Aceptar</button>
    </div>
  </div>
</div>


<div id="sutilMobileSelectPicker" class="sutil-mobile-select-picker" aria-hidden="true" onclick="if(event.target===this)closeSutilMobileSelectPicker()">
  <div class="sutil-mobile-select-sheet" role="dialog" aria-modal="true" aria-labelledby="sutilMobileSelectTitle">
    <div class="sutil-mobile-select-head">
      <div id="sutilMobileSelectTitle" class="sutil-mobile-select-title">Elegir opción</div>
      <button class="sutil-mobile-select-close" type="button" onclick="closeSutilMobileSelectPicker()">×</button>
    </div>
    <div id="sutilMobileSelectOptions" class="sutil-mobile-select-options"></div>
  </div>
</div>

<div id="sutilSoundPicker" class="sutil-sound-picker-backdrop" aria-hidden="true" onclick="if(event.target===this)closeSutilSoundPicker()">
  <div class="sutil-sound-picker-sheet" role="dialog" aria-modal="true" aria-labelledby="sutilSoundPickerTitle">
    <div class="sutil-sound-picker-head">
      <div id="sutilSoundPickerTitle" class="sutil-sound-picker-title">Elegir sonido</div>
      <button class="sutil-sound-picker-close" type="button" onclick="closeSutilSoundPicker()">×</button>
    </div>
    <div id="sutilSoundPickerOptions" class="sutil-sound-picker-options"></div>
  </div>
</div>


<div id="sutilModernSelectBackdrop" class="sutil-modern-select-backdrop" aria-hidden="true" onclick="if(event.target===this)closeSutilModernSelect()">
  <div class="sutil-modern-select-sheet" role="dialog" aria-modal="true" aria-labelledby="sutilModernSelectTitle">
    <div class="sutil-modern-select-head">
      <div class="sutil-modern-select-title-row">
        <div id="sutilModernSelectIcon" class="sutil-modern-select-head-icon">☰</div>
        <div class="sutil-modern-select-title-box">
          <div id="sutilModernSelectTitle" class="sutil-modern-select-title">Seleccionar opción</div>
          <div id="sutilModernSelectCount" class="sutil-modern-select-count"></div>
        </div>
      </div>
      <button class="sutil-modern-select-close" type="button" aria-label="Cerrar" onclick="closeSutilModernSelect()">×</button>
    </div>
    <div id="sutilModernSelectSearchWrap" class="sutil-modern-select-search-wrap" style="display:none">
      <input id="sutilModernSelectSearch" class="sutil-modern-select-search" type="search" autocomplete="off" placeholder="Buscar...">
    </div>
    <div id="sutilModernSelectOptions" class="sutil-modern-select-options"></div>
  </div>
</div>

<nav id="sutilMobileBottomNav" class="sutil-mobile-bottom-nav" aria-label="Navegación móvil">
  <button type="button" onclick="goBack()"><span class="ico">←</span><span>Atrás</span></button>
  <button type="button" onclick="showHome()"><span class="ico">⌂</span><span>Inicio</span></button>
</nav>

<script>
(function(){
  function mountAccessThemeSelector(){
    const floating=document.getElementById('sutilThemeFloating');
    const profileMount=document.getElementById('profileThemeMount');
    const loginMount=document.getElementById('loginThemeMount');
    if(!floating) return;
    const mobile=window.matchMedia('(max-width:650px)').matches;
    const chooser=document.getElementById('profileChooser');
    const login=document.getElementById('login');
    const chooserVisible=chooser && getComputedStyle(chooser).display!=='none';
    const loginVisible=login && getComputedStyle(login).display!=='none';
    const authenticated=document.body.classList.contains('sutil-admin-authenticated');

    let target=null;
    if(mobile && !authenticated){
      if(chooserVisible && profileMount) target=profileMount;
      else if(loginVisible && loginMount) target=loginMount;
    }

    if(target){
      if(floating.parentElement!==target) target.appendChild(floating);
    }else if(floating.parentElement!==document.body){
      document.body.appendChild(floating);
    }
  }
  window.addEventListener('resize',mountAccessThemeSelector,{passive:true});
  window.addEventListener('orientationchange',mountAccessThemeSelector,{passive:true});
  document.addEventListener('DOMContentLoaded',()=>setTimeout(mountAccessThemeSelector,0));
  const observer=new MutationObserver(()=>setTimeout(mountAccessThemeSelector,0));
  document.addEventListener('DOMContentLoaded',()=>{
    observer.observe(document.body,{attributes:true,attributeFilter:['class'],subtree:false});
    const chooser=document.getElementById('profileChooser');
    const login=document.getElementById('login');
    if(chooser) observer.observe(chooser,{attributes:true,attributeFilter:['style','class']});
    if(login) observer.observe(login,{attributes:true,attributeFilter:['style','class']});
  });
  window.sutilMountAccessThemeSelector=mountAccessThemeSelector;
})();
</script>

<div id="sutilThemeFloating" class="sutil-theme-floating" aria-label="Tema visual">
  <button id="sutilThemeFloatLight" type="button" onclick="setSutilTheme('light')">☀️ Claro</button>
  <button id="sutilThemeFloatDark" type="button" onclick="setSutilTheme('dark')">🌙 Oscuro</button>
</div>


<style>
.sutil-file-picker{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;padding:10px 12px;border:1px solid rgba(148,163,184,.45);border-radius:14px}
.sutil-file-input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.sutil-file-button{margin:0!important;white-space:nowrap}
.sutil-file-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
@media(max-width:700px){.sutil-file-picker{display:grid;grid-template-columns:auto minmax(0,1fr)}.sutil-file-button{max-width:100%}.sutil-file-name{font-size:.92rem}}
.sutil-client-photo-picker{display:block!important}
.sutil-client-photo-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.sutil-client-photo-actions .sutil-file-button{width:100%;min-height:48px}
.sutil-client-photo-picker .sutil-file-name{display:block;margin-top:10px;width:100%}
@media(max-width:700px){.sutil-client-photo-picker{display:block!important}.sutil-client-photo-actions{grid-template-columns:1fr 1fr;gap:8px}.sutil-client-photo-actions .sutil-file-button{padding-left:10px!important;padding-right:10px!important;font-size:.96rem}.sutil-client-photo-picker .sutil-file-name{font-size:.9rem}}

/* FIX 12.15.50 — Directorio de clientes compacto */
#clientsSection .clients-directory-filters{margin-top:12px;}
#clientsSection .clients-search-field{display:block;}
#clientsSection .clients-filter-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;margin-top:10px;}
#clientsSection .clients-filter-row label{min-width:0;}
#clientsSection .clients-filter-row select{min-width:0;}
@media (max-width:600px){
  #clientsSection .client-directory-card{padding-top:14px;}
  #clientsSection .clients-directory-head .muted{margin-top:3px;line-height:1.25;}
  #clientsSection .clients-directory-filters{margin-top:10px;}
  #clientsSection .clients-filter-row{gap:8px;margin-top:8px;}
  #clientsSection .clients-search-field input,
  #clientsSection .clients-filter-row select{margin-top:4px;}
}

/* FIX 12.15.72 — Crear crédito compacto móvil */
#loansSection .loan-delivery-full,
#loansSection .loan-compact-pair{grid-column:1 / -1}
#loansSection .loan-compact-pair{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  align-items:start;
}
#loansSection .loan-compact-pair > label{min-width:0;margin:0}
#loansSection .loan-compact-pair input,
#loansSection .loan-compact-pair select{width:100%;min-width:0;box-sizing:border-box}
#loansSection .loan-compact-pair small{font-size:.76rem;line-height:1.15;margin-top:4px}
#loansSection .loan-weekend-pair{align-items:stretch}
#loansSection .loan-switch{
  min-height:58px;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
}
#loansSection .loan-switch input[type="checkbox"]{
  width:24px!important;height:24px!important;flex:0 0 24px;
}
#loansSection .loan-preview-pair{width:100%}
#loansSection .loan-preview-pair .card{min-width:0;margin:0}
@media(max-width:420px){
  #loansSection .loan-compact-pair{gap:9px}
  #loansSection .loan-compact-pair label{font-size:.9rem}
  #loansSection .loan-compact-pair input,
  #loansSection .loan-compact-pair select{padding-left:10px;padding-right:10px}
  #loansSection .loan-switch{padding:9px 10px;font-size:.84rem}
}

/* FIX 12.15.73 — Información financiera compacta */
@media(max-width:650px){
  #clientSummary.grid{
    grid-template-columns:repeat(6,minmax(0,1fr)) !important;
    gap:7px !important;
  }
  #clientSummary > .card{
    grid-column:span 3 !important;
    min-width:0 !important;
  }
  /* Cliente conserva más ancho; Código + Estado comparten la derecha. */
  #clientSummary > .client-summary-name{
    grid-column:span 3 !important;
    grid-row:span 2;
  }
  #clientSummary > .client-summary-code,
  #clientSummary > .client-summary-status{
    grid-column:span 3 !important;
  }
  #clientSummary > .client-summary-route{
    grid-column:span 6 !important;
    min-height:64px !important;
  }
  /* Las tres cuotas comparten una sola fila. */
  #clientSummary > .client-summary-installment{
    grid-column:span 2 !important;
    padding:8px 6px !important;
    min-height:70px !important;
    font-size:11px !important;
    line-height:1.12 !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
  #clientSummary > .client-summary-installment .metric{
    font-size:17px !important;
    white-space:nowrap !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
}
@media(max-width:370px){
  #clientSummary > .client-summary-installment{
    font-size:10px !important;
    padding:7px 4px !important;
  }
  #clientSummary > .client-summary-installment .metric{font-size:16px !important}
}

/* FIX 12.15.74 — Oculta solo el acceso visual a Historial crediticio.
   Se conserva el elemento, ID, onclick, panel y lógica interna para no romper dependencias. */
#clientFinancePane .client-account-nav{
  grid-template-columns:1fr !important;
}
#clientFinancePane #clientHistoryTab{
  display:none !important;
}
#clientFinancePane #clientStatementTab{
  grid-column:1 / -1 !important;
  width:100% !important;
}
</style>
<script>
function updateClientPhotoFileName(input){
  const el=document.getElementById('clientPhotoFileName');
  if(!el)return;
  const fallback='Ningún archivo seleccionado';
  el.__sutilOriginal=(input && input.files && input.files[0]) ? input.files[0].name : fallback;
  el.textContent=(input && input.files && input.files[0]) ? input.files[0].name : sutilTranslateText(fallback,SUTIL_ACTIVE_LANGUAGE);
}

function handleNewClientPhotoInput(input,source){
  if(!input || !input.files || !input.files[0]) return;
  const other=document.getElementById(source==='camera'?'clientPhoto':'clientPhotoCamera');
  if(other) other.value='';
  updateClientPhotoFileName(input);
  previewClientPhoto(input,'clientPhotoPreview');
}

function getNewClientPhotoFile(){
  const camera=document.getElementById('clientPhotoCamera');
  const attach=document.getElementById('clientPhoto');
  return camera?.files?.[0] || attach?.files?.[0] || null;
}

// Admin v59: mantener botones móviles sincronizados con cambios programáticos.
document.addEventListener("DOMContentLoaded",()=>{
  setTimeout(()=>{syncSutilSoundMobileButtons();syncSutilMobileSelectButtons();},80);
  setTimeout(()=>{syncSutilSoundMobileButtons();syncSutilMobileSelectButtons();},600);
});
document.addEventListener("change",e=>{
  if(e.target && ["settingLanguage","settingCountry","settingFrequency","sutilSoundChat","sutilSoundPix","sutilSoundSupport","sutilSoundAlert"].includes(e.target.id)){
    setTimeout(()=>{syncSutilSoundMobileButtons();syncSutilMobileSelectButtons();},0);
  }
});
</script>

<script id="sutil-settings-accordion-js-v62">
(function(){
  function initSutilSettingsAccordionV62(){
    const section=document.getElementById('settingsSection');
    if(!section || section.dataset.accordionV62==='1') return;
    section.dataset.accordionV62='1';

    const cards=Array.from(section.children).filter(el=>el.classList && el.classList.contains('card'));
    cards.forEach((card,index)=>{
      const title=card.querySelector(':scope > h3');
      if(!title || index===0) return;
      if(card.classList.contains('sutil-settings-accordion')) return;

      const nodes=Array.from(card.childNodes).filter(n=>n!==title);
      if(!nodes.length) return;
      const content=document.createElement('div');
      content.className='sutil-settings-accordion-content';
      nodes.forEach(n=>content.appendChild(n));
      card.appendChild(content);
      card.classList.add('sutil-settings-accordion');
      title.setAttribute('role','button');
      title.setAttribute('tabindex','0');
      title.setAttribute('aria-expanded','false');

      const toggle=()=>{
        const opening=!card.classList.contains('is-open');
        section.querySelectorAll(':scope > .card.sutil-settings-accordion.is-open').forEach(other=>{
          if(other!==card){
            other.classList.remove('is-open');
            const oh=other.querySelector(':scope > h3');
            if(oh) oh.setAttribute('aria-expanded','false');
          }
        });
        card.classList.toggle('is-open',opening);
        title.setAttribute('aria-expanded',opening?'true':'false');
      };
      title.addEventListener('click',toggle);
      title.addEventListener('keydown',e=>{
        if(e.key==='Enter'||e.key===' '){e.preventDefault();toggle();}
      });
    });
  }
  if(document.readyState==='loading') document.addEventListener('DOMContentLoaded',initSutilSettingsAccordionV62);
  else initSutilSettingsAccordionV62();
})();
</script>


<script id="sutil-v74-i18n-root">
/* SUTIL v74 · i18n de raíz ES/PT/EN
   - Fuente canónica: español.
   - Traduce texto estático y contenido agregado dinámicamente.
   - Observer incremental con protección anti-bucle: no vuelve a traducir toda la pantalla.
   - No modifica IDs, rutas, endpoints, valores de inputs ni datos persistidos. */
(function(){
  const PH_PT={"de la":"da","de las":"das","de los":"dos","del":"do","a la":"à","al":"ao","en la":"na","en el":"no","en las":"nas","en los":"nos","por la":"pela","por el":"pelo","por las":"pelas","por los":"pelos","con la":"com a","con el":"com o","sin la":"sem a","sin el":"sem o","para la":"para a","para el":"para o","para los":"para os","para las":"para as","y el":"e o","y la":"e a","y los":"e os","y las":"e as","dueño de empresa":"dono da empresa","empresa activa":"empresa ativa","mantener sesión abierta":"manter sessão aberta","nuevo cliente":"novo cliente","clientes registrados":"clientes cadastrados","buscar cliente":"buscar cliente","crear crédito":"criar empréstimo","créditos y cuotas":"empréstimos e parcelas","número de cuotas":"número de parcelas","fecha inicial":"data inicial","método de pago":"método de pagamento","método de entrega":"método de entrega","comprobantes de pago":"comprovantes de pagamento","pagos recibidos":"pagamentos recebidos","pago recibido":"pagamento recebido","caja diaria":"caixa diária","movimientos de base":"movimentações de base","reporte de caja":"relatório de caixa","personal y permisos":"equipe e permissões","operación y rutas":"operação e rotas","gestión de clientes":"gestão de clientes","análisis y control":"análise e controle","personal en operación":"equipe em operação","cajas abiertas":"caixas abertas","configuración y herramientas":"configurações e ferramentas","métodos de cobro":"métodos de cobrança","idioma, país y moneda":"idioma, país e moeda","nombre y logo de la empresa":"nome e logotipo da empresa","beneficios / vip para clientes":"benefícios / vip para clientes","recordatorios de la app del cliente":"lembretes do app do cliente","métodos de pago habilitados":"métodos de pagamento habilitados","seguridad y acceso":"segurança e acesso","sesión en este dispositivo":"sessão neste dispositivo","sonidos de notificaciones":"sons de notificações","guardar configuración":"salvar configurações","configuración de la empresa":"configurações da empresa","menú de empresa":"menu da empresa","soporte sutil":"suporte sutil","asistente sutil":"assistente sutil","soporte humano":"suporte humano","membresía y rutas":"assinatura e rotas","plan actual":"plano atual","rutas contratadas":"rotas contratadas","crédito a favor":"crédito disponível","volver":"voltar","inicio":"início","cerrar sesión":"sair","actualizar":"atualizar","seleccionar archivo":"selecionar arquivo","ningún archivo seleccionado":"nenhum arquivo selecionado","documento personal":"documento pessoal","nombre completo":"nome completo","teléfono fijo":"telefone fixo","correo electrónico":"e-mail","funcionario responsable":"funcionário responsável","sin funcionario asignado":"sem funcionário atribuído","sin ruta asignada":"sem rota atribuída","actividad económica":"atividade econômica","cargo del cliente":"cargo do cliente","información de la empresa":"informações da empresa","ruta del cliente":"rota do cliente","estado del cliente":"status do cliente","capital prestado":"capital emprestado","cuota redondeada":"parcela arredondada","cuota matemática":"parcela matemática","última cuota":"última parcela","vista previa de cuotas":"pré-visualização das parcelas","crear crédito y cuotas":"criar empréstimo e parcelas","editar cada cuota antes de guardar":"editar cada parcela antes de salvar","contar sábados":"incluir sábados","contar domingos":"incluir domingos","día semanal":"dia da semana","día del mes":"dia do mês","selecciona un cliente":"selecione um cliente","cliente encontrado":"cliente encontrado","no se encontraron clientes":"nenhum cliente encontrado","saldo pendiente":"saldo pendente","cuotas pagadas":"parcelas pagas","cuotas restantes":"parcelas restantes","crédito activo":"empréstimo ativo","al día":"em dia","vence hoy":"vence hoje","sin crédito":"sem empréstimo","en comprobación":"em análise","en análisis":"em análise","abrir caja":"abrir caixa","cerrar caja":"fechar caixa","base dinero":"base em dinheiro","base total":"base total","adicionar base":"adicionar base","retirar base":"retirar base","transferir base":"transferir base","nueva ruta":"nova rota","crear ruta":"criar rota","rutas registradas":"rotas cadastradas","detalle de ruta":"detalhes da rota","clientes de la ruta":"clientes da rota","editar ruta":"editar rota","registrar nuevo funcionario":"cadastrar novo funcionário","personal registrado":"equipe cadastrada","rutas asignadas":"rotas atribuídas","ver clientes":"ver clientes","registrar clientes":"cadastrar clientes","crear créditos":"criar empréstimos","registrar cobros":"registrar cobranças","registrar gastos":"registrar despesas","ver ubicaciones":"ver localizações","ver reportes":"ver relatórios","ubicación de personal":"localização da equipe","tiempo real":"tempo real","última ubicación":"última localização","sin ubicación":"sem localização","con ubicación":"com localização","gastos por ruta":"despesas por rota","historial completo":"histórico completo","sistema anterior":"sistema anterior","subir archivo":"enviar arquivo","ingresar historial":"inserir histórico","plan mensual":"plano mensal","plan semestral":"plano semestral","plan anual":"plano anual","medio de pago":"meio de pagamento","medios de pago":"meios de pagamento","clave de acceso":"senha de acesso","llave de empresa":"chave da empresa","llave de la empresa":"chave da empresa","crear cuenta":"criar conta","acceso del dueño":"acesso do dono","accesos del empresario":"acessos do empresário","estos accesos son exclusivos del dueño de la empresa.":"estes acessos são exclusivos do dono da empresa.","empresa, seguridad, idioma y reglas":"empresa, segurança, idioma e regras","membresía, rutas y ayuda directa":"assinatura, rotas e ajuda direta","ayuda directa con sutil, renovación de membresía y aumento de rutas.":"ajuda direta com a Sutil, renovação da assinatura e aumento de rotas.","claro":"claro","oscuro":"escuro","acceso según ruta y permisos asignados":"acesso conforme rota e permissões atribuídas","selecciona cómo deseas ingresar a sutil.":"selecione como deseja entrar no Sutil.","control general, rutas, permisos y reportes":"controle geral, rotas, permissões e relatórios","administrador autorizado por el empresario":"administrador autorizado pelo empresário","entre fechas":"entre datas","seleccionar otro cliente":"selecionar outro cliente","cuenta de cobro de esta ruta":"conta de cobrança desta rota","localización de clientes":"localização de clientes","localización de funcionarios":"localização de funcionários","sin ubicación seleccionada":"sem localização selecionada","sin cliente seleccionado":"sem cliente selecionado","interés recibido":"juros recebidos","cobro olvidado":"cobrança esquecida","registrar como cobro olvidado":"registrar como cobrança esquecida","tengo archivos":"tenho arquivos","medio de cobro":"meio de cobrança","método de cobro":"método de cobrança","cuenta de cobro personalizada":"conta de cobrança personalizada","por defecto":"por padrão","se hace falta":"se necessário","plan que deseas":"plano que deseja"}, PH_EN={"de la":"of the","de las":"of the","de los":"of the","del":"of the","a la":"to the","al":"to the","en la":"in the","en el":"in the","en las":"in the","en los":"in the","por la":"by the","por el":"by the","por las":"by the","por los":"by the","con la":"with the","con el":"with the","sin la":"without the","sin el":"without the","para la":"for the","para el":"for the","para los":"for the","para las":"for the","y el":"and the","y la":"and the","y los":"and the","y las":"and the","dueño de empresa":"business owner","empresa activa":"active company","mantener sesión abierta":"keep session open","nuevo cliente":"new client","clientes registrados":"registered clients","buscar cliente":"search client","crear crédito":"create loan","créditos y cuotas":"loans and installments","número de cuotas":"number of installments","fecha inicial":"start date","método de pago":"payment method","método de entrega":"delivery method","comprobantes de pago":"payment receipts","pagos recibidos":"received payments","caja diaria":"daily cash","movimientos de base":"cash base movements","reporte de caja":"cash report","personal y permisos":"staff and permissions","operación y rutas":"operations and routes","gestión de clientes":"client management","análisis y control":"analysis and control","personal en operación":"staff operating","cajas abiertas":"open cash boxes","configuración y herramientas":"settings and tools","métodos de cobro":"collection methods","idioma, país y moneda":"language, country and currency","nombre y logo de la empresa":"company name and logo","beneficios / vip para clientes":"benefits / vip for clients","recordatorios de la app del cliente":"client app reminders","métodos de pago habilitados":"enabled payment methods","seguridad y acceso":"security and access","sesión en este dispositivo":"session on this device","sonidos de notificaciones":"notification sounds","guardar configuración":"save settings","configuración de la empresa":"company settings","menú de empresa":"company menu","soporte sutil":"sutil support","asistente sutil":"sutil assistant","soporte humano":"human support","membresía y rutas":"membership and routes","plan actual":"current plan","rutas contratadas":"contracted routes","crédito a favor":"available credit","volver":"back","inicio":"home","cerrar sesión":"sign out","actualizar":"refresh","seleccionar archivo":"select file","ningún archivo seleccionado":"no file selected","documento personal":"personal document","nombre completo":"full name","teléfono fijo":"landline phone","correo electrónico":"email","funcionario responsable":"responsible staff member","sin funcionario asignado":"no staff assigned","sin ruta asignada":"no route assigned","actividad económica":"business activity","cargo del cliente":"client position","información de la empresa":"company information","ruta del cliente":"client route","estado del cliente":"client status","capital prestado":"principal lent","cuota redondeada":"rounded installment","cuota matemática":"calculated installment","última cuota":"last installment","vista previa de cuotas":"installment preview","crear crédito y cuotas":"create loan and installments","editar cada cuota antes de guardar":"edit each installment before saving","contar sábados":"include Saturdays","contar domingos":"include Sundays","día semanal":"weekday","día del mes":"day of month","selecciona un cliente":"select a client","cliente encontrado":"client found","no se encontraron clientes":"no clients found","saldo pendiente":"outstanding balance","cuotas pagadas":"paid installments","cuotas restantes":"remaining installments","crédito activo":"active loan","al día":"current","vence hoy":"due today","sin crédito":"no loan","en comprobación":"under review","abrir caja":"open cash","cerrar caja":"close cash","base dinero":"cash base","base total":"total base","adicionar base":"add base","retirar base":"withdraw base","transferir base":"transfer base","nueva ruta":"new route","crear ruta":"create route","rutas registradas":"registered routes","detalle de ruta":"route details","clientes de la ruta":"route clients","editar ruta":"edit route","registrar nuevo funcionario":"register new staff member","personal registrado":"registered staff","rutas asignadas":"assigned routes","ver clientes":"view clients","registrar clientes":"register clients","crear créditos":"create loans","registrar cobros":"record collections","registrar gastos":"record expenses","ver ubicaciones":"view locations","ver reportes":"view reports","ubicación de personal":"staff location","tiempo real":"real time","última ubicación":"last location","sin ubicación":"no location","con ubicación":"with location","gastos por ruta":"expenses by route","historial completo":"full history","sistema anterior":"previous system","subir archivo":"upload file","ingresar historial":"enter history","plan mensual":"monthly plan","plan semestral":"six-month plan","plan anual":"annual plan","medio de pago":"payment method","medios de pago":"payment methods","clave de acceso":"access password","llave de empresa":"company key","llave de la empresa":"company key","crear cuenta":"create account","acceso del dueño":"owner access","accesos del empresario":"business owner access","estos accesos son exclusivos del dueño de la empresa.":"these accesses are exclusive to the business owner.","empresa, seguridad, idioma y reglas":"company, security, language and rules","membresía, rutas y ayuda directa":"membership, routes and direct help","ayuda directa con sutil, renovación de membresía y aumento de rutas.":"direct help with Sutil, membership renewal and additional routes.","claro":"light","oscuro":"dark","acceso según ruta y permisos asignados":"access according to assigned route and permissions","selecciona cómo deseas ingresar a sutil.":"select how you want to sign in to Sutil.","control general, rutas, permisos y reportes":"general control, routes, permissions and reports","administrador autorizado por el empresario":"administrator authorized by the business owner","entre fechas":"between dates","seleccionar otro cliente":"select another client","cuenta de cobro de esta ruta":"collection account for this route","localización de clientes":"client locations","localización de funcionarios":"staff locations","sin ubicación seleccionada":"no location selected","sin cliente seleccionado":"no client selected","interés recibido":"interest received","cobro olvidado":"forgotten collection","registrar como cobro olvidado":"record as forgotten collection","tengo archivos":"I have files","medio de cobro":"collection method","método de cobro":"collection method","cuenta de cobro personalizada":"custom collection account","por defecto":"by default","se hace falta":"if needed","plan que deseas":"plan you want","fecha real":"actual date","total recibido":"total received","documentos / fotos":"documents / photos"};
  const WD_PT={"de":"de","y":"e","la":"a","ruta":"rota","cliente":"cliente","el":"o","del":"do","rutas":"rotas","caja":"caixa","clientes":"clientes","fecha":"data","por":"por","en":"em","o":"ou","estado":"status","se":"se","gastos":"despesas","no":"não","a":"a","para":"para","crédito":"empréstimo","sutil":"Sutil","empresa":"empresa","base":"base","créditos":"empréstimos","sin":"sem","pago":"pagamento","pagos":"pagamentos","actual":"atual","cuotas":"parcelas","ubicación":"localização","nombre":"nome","una":"uma","valor":"valor","con":"com","los":"os","cada":"cada","historial":"histórico","solo":"somente","registrar":"registrar","cuota":"parcela","guardar":"salvar","permisos":"permissões","código":"código","un":"um","saldo":"saldo","que":"que","real":"real","importar":"importar","personal":"equipe","las":"as","teléfono":"telefone","selecciona":"selecione","datos":"dados","esta":"esta","acceso":"acesso","cuenta":"conta","cobros":"cobranças","si":"se","soporte":"suporte","actualizar":"atualizar","buscar":"buscar","antes":"antes","dinero":"dinheiro","plan":"plano","clave":"senha","hoy":"hoje","información":"informação","al":"ao","inicio":"início","celular":"celular","histórico":"histórico","todas":"todas","todos":"todos","documento":"documento","método":"método","cancelar":"cancelar","como":"como","observación":"observação","revisar":"revisar","abierta":"aberta","país":"país","su":"sua","editar":"editar","total":"total","operativa":"operacional","este":"este","etapa":"etapa","cerrar":"fechar","efectivo":"dinheiro","ver":"ver","capital":"capital","archivo":"arquivo","mes":"mês","disponible":"disponível","corrección":"correção","comprobante":"comprovante","volver":"voltar","membresía":"assinatura","general":"geral","crear":"criar","nuevo":"novo","detalle":"detalhes","consultar":"consultar","operación":"operação","anterior":"anterior","abrir":"abrir","día":"dia","vencimiento":"vencimento","ciudad":"cidade","funcionario":"funcionário","mensual":"mensal","predeterminada":"padrão","gasto":"despesa","después":"depois","backup":"backup","nueva":"nova","empresario":"empresário","idioma":"idioma","llave":"chave","registrados":"cadastrados","confirmar":"confirmar","diaria":"diária","movimientos":"movimentações","cartera":"carteira","histórica":"histórica","responsable":"responsável","foto":"foto","ganancia":"lucro","consulta":"consulta","desde":"desde","inicial":"inicial","vista":"visualização","olvidado":"esquecido","comenzar":"começar","motivo":"motivo","ya":"já","días":"dias","sesión":"sessão","reportes":"relatórios","cobrador":"cobrador","comprobantes":"comprovantes","completo":"completo","cobradores":"cobradores","última":"última","migración":"migração","acciones":"ações","dirección":"endereço","app":"app","interés":"juros","número":"número","activa":"ativa","contar":"incluir","conserva":"mantém","pendiente":"pendente","final":"final","moneda":"moeda","lo":"o","tipo":"tipo","dispositivo":"dispositivo","utilidad":"lucro","históricos":"históricos","notificaciones":"notificações","sonido":"som","configuración":"configuração","elige":"escolha","tu":"seu","autorizado":"autorizado","otro":"outro","abonos":"pagamentos parciais","transferir":"transferir","sistema":"sistema","resumen":"resumo","cuánto":"quanto","prestado":"emprestado","pendientes":"pendentes","período":"período","puedes":"você pode","tiene":"tem","usar":"usar","cuando":"quando","carga":"carga","lista":"lista","transferencia":"transferência","semanal":"semanal","automática":"automática","anteriores":"anteriores","recibidos":"recebidos","cobrado":"recebido","entre":"entre","descripción":"descrição","cambia":"muda","únicamente":"apenas","retiros":"retiradas","operativo":"operacional","queda":"fica","cambios":"alterações","opción":"opção","administrar":"administrar","paquete":"pacote","registros":"registros","importación":"importação","humano":"humano","enviar":"enviar","logo":"logotipo","perfil":"perfil","deseas":"deseja","ingresar":"entrar","control":"controle","funciones":"funções","más":"mais","cierre":"fechamento","adicionar":"adicionar","retirar":"retirar","reporte":"relatório","ubicaciones":"localizações","autorizada":"autorizada","análisis":"análise","métodos":"métodos","cargando":"carregando","personales":"pessoais","registrada":"registrada","vence":"vence","activos":"ativos","opcional":"opcional","máximo":"máximo","fijo":"fixo","correo":"e-mail","complemento":"complemento","barrio":"bairro","postal":"postal","departamento":"departamento","actividad":"atividade","descuenta":"desconta","olvidada":"esquecida","mientras":"enquanto","previa":"prévia","cajas":"caixas","sus":"seus","forma":"forma","ni":"nem","manualmente":"manualmente","tiempo":"tempo","eliminar":"excluir","mostrará":"mostrará","automáticamente":"automaticamente","puede":"pode","automático":"automático","modifica":"modifica","movimiento":"movimentação","categoría":"categoria","anual":"anual","recaudo":"arrecadação","trabajar":"trabalhar","importante":"importante","analizar":"analisar","esperando":"aguardando","mensajes":"mensagens","medio":"meio","renovar":"renovar","asistente":"assistente","campana":"campainha","doble":"duplo","aviso":"aviso","probar":"testar","ayuda":"ajuda","accesos":"acessos","exclusivos":"exclusivos","exclusivo":"exclusivo","dueño":"dono","reglas":"regras","regla":"regra","directa":"direta","directo":"direto","oscuro":"escuro","claro":"claro","son":"são","propios":"próprios","pueden":"podem","ser":"ser","modificados":"alterados","seguridad":"segurança","estos":"estes","cómo":"como","usuario":"usuário","comprobación":"análise","chats":"chats","rendimiento":"desempenho","herramienta":"ferramenta","herramientas":"ferramentas","rápido":"rápido","comunicación":"comunicação","equipo":"equipe","créditos":"créditos","incorporación":"incorporação","informaciones":"informações","traer":"trazer","conversaciones":"conversas","conversación":"conversa","recientes":"recentes","antiguos":"antigos","seleccione":"selecione","desea":"deseja","ficha":"cadastro","financiera":"financeira","acumulado":"acumulado","finalizados":"finalizados","crediticio":"de crédito","moroso":"em atraso","atrasados":"em atraso","pagadas":"pagas","acción":"ação","afectadas":"afetadas","posterior":"posterior","redondeada":"arredondada","matemática":"matemática","regenerar":"regenerar","incrementa":"aumenta","deuda":"dívida","ordenados":"ordenados","término":"termo","pesquisa":"pesquisa","ordenar":"ordenar","periodo":"período","generar":"gerar","extracto":"extrato","restante":"restante","deudor":"devedor","parcial":"parcial","compartir":"compartilhar","revisa":"revise","aplica":"aplica","confirmados":"confirmados","rechazados":"rejeitados","rechazar":"rejeitar","registradas":"cadastradas","morosos":"em atraso","define":"define","referencia":"referência","continuar":"continuar","trabajando":"trabalhando","permanecen":"permanecem","reconstruyen":"reconstroem","modifican":"modificam","corte":"corte","electrónico":"eletrônico","punto":"ponto","operaciones":"operações","nuevas":"novas","adiciones":"adições","traspaso":"transição","cargado":"carregado","exigir":"exigir","asignadas":"atribuídas","exactamente":"exatamente","utilizar":"utilizar","marca":"marque","agrupados":"agrupadas","función":"função","facilitar":"facilitar","emitir":"emitir","recibos":"recibos","manejar":"gerenciar","acceder":"acessar","seguimiento":"acompanhamento","actualización":"atualização","segundos":"segundos","envío":"envio","conectará":"conectará","autorización":"autorização","continúan":"continuam","pausa":"pausa","reabre":"reabre","antigua":"antiga","escritos":"escritos","conservarán":"serão preservados","hereda":"herdada","definir":"definir","consultada":"consultada","calcula":"calcula","abiertas":"abertas","exclusivas":"exclusivas","registran":"registradas","aporte":"aporte","positiva":"positiva","mueve":"move","afectar":"afetar","obligatoria":"obrigatória","ajusta":"ajusta","autorizar":"autorizar","corregir":"corrigir","relatório":"relatório","según":"conforme","asignado":"atribuído","asignados":"atribuídos","asignada":"atribuída","registrarse":"cadastrar-se","pérdida":"perda","fila":"linha","pagados":"pagos","visible":"visível","visibles":"visíveis","prestó":"emprestou","recibió":"recebeu","recibido":"recebido","generó":"gerou","seleccionado":"selecionado","seleccionada":"selecionada","cobro":"cobrança","actualizará":"atualizará","esa":"essa","ese":"esse","entrará":"entrará","necesitas":"precisa","necesita":"precisa","muestra":"mostra","sola":"única","fechas":"datas","seleccionar":"selecionar","abono":"pagamento parcial","confirma":"confirme","usará":"usará","eliges":"escolhe","transferencias":"transferências","úsala":"use-a","están":"estão","auditoría":"auditoria","respetando":"respeitando","comparación":"comparação","mayor":"maior","ocurrió":"ocorreu","fue":"foi","pero":"mas","reabren":"reabrem","cerradas":"fechadas","cerrada":"fechada","olvidó":"esqueceu","sencilla":"simples","sencillo":"simples","vas":"vai","tengo":"tenho","archivos":"arquivos","tienen":"têm","prefieren":"preferem","cargar":"carregar","realizados":"realizados","tienes":"tem","afectan":"afetam","indicas":"indica","comprobará":"verificará","estructura":"estrutura","relaciones":"relações","mediante":"por meio de","trae":"traz","misma":"mesma","mismo":"mesmo","columna":"coluna","mezclar":"misturar","apellido":"sobrenome","creados":"criados","existían":"existiam","fueron":"foram","omitidos":"omitidos","duplicados":"duplicados","eliminan":"excluem","llaves":"chaves","cuentas":"contas","luego":"depois","asigna":"atribui","hace":"faz","excepción":"exceção","instrucciones":"instruções","edición":"edição","planes":"planos","pregunta":"pergunta","respuestas":"respostas","oficiales":"oficiais","reconócelo":"reconheça-o","mirar":"olhar","pantalla":"tela","sonidos":"sons","quedan":"ficam","es":"é","ofrece":"oferece","contenido":"conteúdo","tengan":"tenham","activada":"ativada","casilla":"caixa de seleção","qué":"que","avisos":"avisos","verá":"verá","esto":"isto","envía":"envia","todavía":"ainda","esas":"essas","conectarán":"serão conectadas","versión":"versão","activar":"ativar","defecto":"padrão","escribe":"digite","relación":"relação","relaciona":"relaciona","reutiliza":"reutiliza","coinciden":"coincidem","inteligente":"inteligente","notas":"notas","códigos":"códigos","copia":"copia","pega":"cola","asignar":"atribuir","específica":"específica","personalizada":"personalizada","preguntar":"perguntar","guardados":"salvos","realmente":"realmente","aparecerá":"aparecerá","internos":"internos","push":"push","sábados":"sábados","domingos":"domingos","por defecto":"por padrão","solicitudes":"solicitações","aumento":"aumento","renovación":"renovação","medios":"meios","navegar":"navegar","resolver":"resolver","problemas":"problemas","contactar":"contatar","oscilación":"oscilação","prueba":"teste","reconoce":"reconhece","evento":"evento","eventos":"eventos","diferente":"diferente","beneficios":"benefícios","recordatorios":"lembretes","configura":"configure","notificación":"notificação","conectadas":"conectadas","android":"Android"}, WD_EN={"de":"of","y":"and","la":"the","ruta":"route","cliente":"client","el":"the","del":"of the","rutas":"routes","caja":"cash","clientes":"clients","fecha":"date","por":"by","en":"in","o":"or","estado":"status","se":"is","gastos":"expenses","no":"no","a":"to","para":"for","crédito":"loan","sutil":"Sutil","empresa":"company","base":"base","créditos":"loans","sin":"without","pago":"payment","pagos":"payments","actual":"current","cuotas":"installments","ubicación":"location","nombre":"name","una":"a","valor":"amount","con":"with","los":"the","cada":"each","historial":"history","solo":"only","registrar":"record","cuota":"installment","guardar":"save","permisos":"permissions","código":"code","un":"a","saldo":"balance","que":"that","real":"actual","importar":"import","personal":"staff","las":"the","teléfono":"phone","selecciona":"select","datos":"data","esta":"this","acceso":"access","cuenta":"account","cobros":"collections","si":"if","soporte":"support","actualizar":"refresh","buscar":"search","antes":"before","dinero":"cash","plan":"plan","clave":"password","hoy":"today","información":"information","al":"to the","inicio":"home","celular":"mobile","histórico":"historical","todas":"all","todos":"all","documento":"document","método":"method","cancelar":"cancel","como":"as","observación":"note","revisar":"review","abierta":"open","país":"country","su":"your","editar":"edit","total":"total","operativa":"operational","este":"this","etapa":"stage","cerrar":"close","efectivo":"cash","ver":"view","capital":"principal","archivo":"file","mes":"month","disponible":"available","corrección":"correction","comprobante":"receipt","volver":"back","membresía":"membership","general":"general","crear":"create","nuevo":"new","detalle":"details","consultar":"check","operación":"operation","anterior":"previous","abrir":"open","día":"day","vencimiento":"due date","ciudad":"city","funcionario":"staff member","mensual":"monthly","predeterminada":"default","gasto":"expense","después":"after","backup":"backup","nueva":"new","empresario":"business owner","idioma":"language","llave":"key","registrados":"registered","confirmar":"confirm","diaria":"daily","movimientos":"movements","cartera":"portfolio","histórica":"historical","responsable":"responsible","foto":"photo","ganancia":"profit","consulta":"query","desde":"from","inicial":"initial","vista":"view","olvidado":"forgotten","comenzar":"start","motivo":"reason","ya":"already","días":"days","sesión":"session","reportes":"reports","cobrador":"collector","comprobantes":"receipts","completo":"complete","cobradores":"collectors","última":"last","migración":"migration","acciones":"actions","dirección":"address","app":"app","interés":"interest","número":"number","activa":"active","contar":"include","conserva":"keeps","pendiente":"pending","final":"final","moneda":"currency","lo":"it","tipo":"type","dispositivo":"device","utilidad":"profit","históricos":"historical","notificaciones":"notifications","sonido":"sound","configuración":"settings","elige":"choose","tu":"your","autorizado":"authorized","otro":"other","abonos":"partial payments","transferir":"transfer","sistema":"system","resumen":"summary","cuánto":"how much","prestado":"lent","pendientes":"pending","período":"period","puedes":"you can","tiene":"has","usar":"use","cuando":"when","carga":"load","lista":"list","transferencia":"transfer","semanal":"weekly","automática":"automatic","anteriores":"previous","recibidos":"received","cobrado":"collected","entre":"between","descripción":"description","cambia":"changes","únicamente":"only","retiros":"withdrawals","operativo":"operational","queda":"remains","cambios":"changes","opción":"option","administrar":"manage","paquete":"package","registros":"records","importación":"import","humano":"human","enviar":"send","logo":"logo","perfil":"profile","deseas":"want","ingresar":"sign in","control":"control","funciones":"functions","más":"more","cierre":"closing","adicionar":"add","retirar":"withdraw","reporte":"report","ubicaciones":"locations","autorizada":"authorized","análisis":"analysis","métodos":"methods","cargando":"loading","personales":"personal","registrada":"registered","vence":"due","activos":"active","opcional":"optional","máximo":"maximum","fijo":"landline","correo":"email","complemento":"address complement","barrio":"neighborhood","postal":"postal","departamento":"state","actividad":"activity","descuenta":"deducts","olvidada":"forgotten","mientras":"while","previa":"preview","cajas":"cash sessions","sus":"their","forma":"method","ni":"nor","manualmente":"manually","tiempo":"time","eliminar":"delete","mostrará":"will show","automáticamente":"automatically","puede":"can","automático":"automatic","modifica":"changes","movimiento":"movement","categoría":"category","anual":"annual","recaudo":"collections","trabajar":"work","importante":"important","analizar":"analyze","esperando":"waiting","mensajes":"messages","medio":"method","renovar":"renew","asistente":"assistant","campana":"bell","doble":"double","aviso":"alert","probar":"test","ayuda":"help","accesos":"access","exclusivos":"exclusive","exclusivo":"exclusive","dueño":"owner","reglas":"rules","regla":"rule","directa":"direct","directo":"direct","oscuro":"dark","claro":"light","son":"are","propios":"own","pueden":"can","ser":"be","modificados":"modified","seguridad":"security","estos":"these","cómo":"how","usuario":"user","comprobación":"review","chats":"chats","rendimiento":"performance","herramienta":"tool","herramientas":"tools","rápido":"quickly","comunicación":"communication","equipo":"staff","créditos":"credits","incorporación":"incorporation","informaciones":"information","traer":"bring","conversaciones":"conversations","conversación":"conversation","recientes":"recent","antiguos":"oldest","seleccione":"select","desea":"want","ficha":"record","financiera":"financial","acumulado":"cumulative","finalizados":"completed","crediticio":"credit","moroso":"overdue","atrasados":"overdue","pagadas":"paid","acción":"action","afectadas":"affected","posterior":"after","redondeada":"rounded","matemática":"calculated","regenerar":"regenerate","incrementa":"increases","deuda":"debt","ordenados":"sorted","término":"search term","pesquisa":"search","ordenar":"sort","periodo":"period","generar":"generate","extracto":"statement","restante":"remaining","deudor":"outstanding","parcial":"partial","compartir":"share","revisa":"review","aplica":"applies","confirmados":"confirmed","rechazados":"rejected","rechazar":"reject","registradas":"registered","morosos":"overdue","define":"define","referencia":"reference","continuar":"continue","trabajando":"working","permanecen":"remain","reconstruyen":"rebuild","modifican":"modify","corte":"cutoff","electrónico":"electronic","punto":"point","operaciones":"operations","nuevas":"new","adiciones":"additions","traspaso":"transition","cargado":"loaded","exigir":"require","asignadas":"assigned","exactamente":"exactly","utilizar":"use","marca":"select","agrupados":"grouped","función":"function","facilitar":"make easier","emitir":"issue","recibos":"receipts","manejar":"manage","acceder":"access","seguimiento":"tracking","actualización":"update","segundos":"seconds","envío":"sending","conectará":"will connect","autorización":"authorization","continúan":"remain","pausa":"paused","reabre":"reopens","antigua":"old","escritos":"entered","conservarán":"will be kept","hereda":"inherits","definir":"define","consultada":"checked","calcula":"calculates","abiertas":"open","exclusivas":"exclusive","registran":"recorded","aporte":"deposit","positiva":"positive","mueve":"moves","afectar":"affect","obligatoria":"required","ajusta":"adjusts","autorizar":"authorize","corregir":"correct","según":"according to","asignado":"assigned","asignados":"assigned","asignada":"assigned","registrarse":"sign up","reportado":"reported","documentos":"documents","fotos":"photos","recibido":"received","seleccionado":"selected","seleccionada":"selected","cobro":"collection","actualizará":"will update","esa":"that","ese":"that","entrará":"will enter","reabrir":"reopen","necesitas":"need","necesita":"needs","muestra":"shows","sola":"single","fechas":"dates","seleccionar":"select","abono":"partial payment","confirma":"confirm","usará":"will use","eliges":"choose","transferencias":"transfers","úsala":"use it","están":"are","auditoría":"audit","respetando":"respecting","comparación":"comparison","mayor":"highest","ocurrió":"occurred","fue":"was","pero":"but","reabren":"reopen","cerradas":"closed","cerrada":"closed","olvidó":"forgot","sencilla":"simple","sencillo":"simple","vas":"will","tengo":"I have","archivos":"files","tienen":"have","prefieren":"prefer","cargar":"load","realizados":"completed","tienes":"have","afectan":"affect","indicas":"enter","comprobará":"will verify","estructura":"structure","relaciones":"relationships","mediante":"through","trae":"includes","misma":"same","mismo":"same","columna":"column","mezclar":"mix","apellido":"last name","creados":"created","existían":"existed","fueron":"were","omitidos":"skipped","duplicados":"duplicates","eliminan":"deleted","llaves":"keys","cuentas":"accounts","luego":"then","asigna":"assign","hace":"is","excepción":"exception","instrucciones":"instructions","edición":"editing","planes":"plans","pregunta":"question","respuestas":"answers","oficiales":"official","reconócelo":"recognize it","mirar":"look at","pantalla":"screen","sonidos":"sounds","quedan":"remain","es":"is","ofrece":"offers","contenido":"content","tengan":"have","activada":"enabled","casilla":"checkbox","qué":"what","avisos":"alerts","verá":"will see","esto":"this","envía":"sends","todavía":"yet","esas":"those","conectarán":"will be connected","versión":"version","activar":"enable","defecto":"default","escribe":"type","relación":"relationship","relaciona":"links","reutiliza":"reuses","coinciden":"match","inteligente":"smart","notas":"notes","códigos":"codes","copia":"copy","pega":"paste","asignar":"assign","específica":"specific","personalizada":"custom","preguntar":"ask","guardados":"saved","realmente":"actually","aparecerá":"will appear","internos":"internal","notificación":"notification","sábados":"Saturdays","domingos":"Sundays","solicitudes":"requests","aumento":"increase","renovación":"renewal","medios":"methods","navegar":"navigate","resolver":"solve","problemas":"problems","contactar":"contact","prueba":"test","evento":"event","eventos":"events","diferente":"different","beneficios":"benefits","recordatorios":"reminders","configura":"configure","android":"Android","administrador":"administrator","pérdida":"loss","fila":"row","pagados":"paid","visible":"visible","visibles":"visible","prestó":"lent","recibió":"received","generó":"generated","consultando":"checking","operacional":"operational","mapeo":"mapping","columnas":"columns"}, REV_PT={"administração":"administración","configuração":"configuración","configurações":"configuración","empréstimo":"crédito","empréstimos":"créditos","parcelas":"cuotas","parcela":"cuota","cobranças":"cobros","cobrança":"cobro","caixa":"caja","despesas":"gastos","despesa":"gasto","relatórios":"reportes","relatório":"reporte","rotas":"rutas","rota":"ruta","equipe":"personal","permissões":"permisos","localização":"ubicación","localizações":"ubicaciones","migração":"migración","assinatura":"membresía","comprovantes":"comprobantes","comprovante":"comprobante","criar":"crear","salvar":"guardar","fechar":"cerrar","excluir":"eliminar","nome":"nombre","telefone":"teléfono","endereço":"dirección","bairro":"barrio","cidade":"ciudad","data":"fecha","dinheiro":"efectivo","pagamento":"pago","pagamentos":"pagos","pendente":"pendiente","rejeitado":"rechazado","rejeitados":"rechazados","hoje":"hoy","ontem":"ayer","novo":"nuevo","nova":"nueva","cadastrados":"registrados","cadastradas":"registradas","ativo":"activo","ativa":"activa","ativos":"activos","inativo":"inactivo","frequência":"frecuencia","juros":"interés","movimentações":"movimientos","movimentação":"movimiento","fechamento":"cierre","abertura":"apertura","observação":"observación","descrição":"descripción","categoria":"categoría","selecione":"selecciona","digite":"escribe","escolha":"elige","carregando":"cargando","salvando":"guardando","suporte":"soporte","assistente":"asistente","dados":"datos","informação":"información","informações":"información","atualizar":"actualizar","atual":"actual","plano":"plan","chave":"llave","senha":"clave","sessão":"sesión","segurança":"seguridad","moeda":"moneda","notificações":"notificaciones","som":"sonido","sons":"sonidos","lembretes":"recordatorios","benefícios":"beneficios","responsável":"responsable","funcionário":"funcionario","funcionários":"funcionarios","atribuído":"asignado","atribuída":"asignada","atribuídas":"asignadas","lucro":"ganancia","disponível":"disponible","correção":"corrección","arquivo":"archivo","análise":"análisis","detalhes":"detalle","ações":"acciones","ação":"acción","início":"inicio","voltar":"volver","sair":"cerrar sesión","atraso":"atraso","arrecadação":"recaudo","alterações":"cambios","alterados":"modificados","operações":"operaciones","operação":"operación","operacional":"operativa","automáticamente":"automáticamente","automaticamente":"automáticamente","pré-visualização":"vista previa","e-mail":"correo electrónico","logotipo":"logo","ferramentas":"herramientas","ferramenta":"herramienta","desempenho":"rendimiento","conversas":"conversaciones","conversa":"conversación","recebidos":"recibidos","recebido":"cobrado","dívida":"deuda","padrão":"predeterminada","pessoais":"personales","econômica":"económica","eletrônico":"electrónico","transição":"traspaso","acompanhamento":"seguimiento","autorização":"autorización","atualização":"actualización","envio":"envío","gerenciar":"manejar","corrigir":"corregir","retiradas":"retiros","adições":"adiciones","obrigatória":"obligatoria","alterar":"modificar","alterada":"modificada","alteradas":"modificadas","apenas":"únicamente","sem":"sin","com":"con","uma":"una","um":"un","não":"no","você":"usted","vocês":"ustedes","seu":"su","sua":"su","seus":"sus","suas":"sus","da":"de la","das":"de las","do":"del","na":"en la","nas":"en las","ao":"al","aos":"a los","pela":"por la","pelo":"por el","pelas":"por las","pelos":"por los"};
  Object.assign(PH_PT,{"Tu sesión venció. Ingresa nuevamente.": "Sua sessão expirou. Entre novamente.", "Revisa los datos ingresados.": "Revise os dados informados.", "Ingresa con la llave de tu empresa, tu celular y tu clave.": "Entre com a chave da sua empresa, seu celular e sua senha.", "Ingresa con las credenciales y permisos asignados por el empresario.": "Entre com as credenciais e permissões atribuídas pelo empresário.", "Ingresa con las credenciales entregadas por tu empresa.": "Entre com as credenciais fornecidas pela sua empresa.", "No hay clientes para este filtro.": "Não há clientes para este filtro.", "No hay clientes para los filtros seleccionados.": "Não há clientes para os filtros selecionados.", "No hay pagos para los filtros seleccionados.": "Não há pagamentos para os filtros selecionados.", "No hay cuotas para los filtros seleccionados.": "Não há parcelas para os filtros selecionados.", "Documento y código protegidos por permiso especial.": "Documento e código protegidos por permissão especial.", "Ej. Clientes VIP": "Ex.: Clientes VIP", "Escribe un mensaje para el cliente...": "Digite uma mensagem para o cliente...", "Error al cargar la conversación": "Erro ao carregar a conversa", "El chat necesita conexión para enviar el mensaje.": "O chat precisa de conexão para enviar a mensagem.", "No fue posible enviar el mensaje.": "Não foi possível enviar a mensagem.", "Escribe un mensaje antes de enviar.": "Digite uma mensagem antes de enviar.", "Escribe el documento personal.": "Digite o documento pessoal.", "Otras preguntas": "Outras perguntas", "Pagados": "Pagos", "Reportados / pérdida": "Reportados / perda", "Selecciona la fecha real del cobro. La deuda se actualizará con esa fecha y el dinero entrará en la caja operativa abierta actual, sin reabrir cajas anteriores.": "Selecione a data real da cobrança. A dívida será atualizada com essa data e o dinheiro entrará na caixa operacional aberta atual, sem reabrir caixas anteriores.", "Vista general: se muestra una sola cuota pendiente por cliente. Escribe el nombre, código, documento o teléfono de un cliente para ver todas sus cuotas pendientes.": "Visão geral: é exibida uma única parcela pendente por cliente. Digite o nome, código, documento ou telefone de um cliente para ver todas as parcelas pendentes.", "Columnas": "Colunas", "columnas": "colunas", "Mapeo de columnas": "Mapeamento de colunas", "mapeo de columnas": "mapeamento de colunas", "Revisar columnas": "Revisar colunas", "Preguntas frecuentes / base de conocimiento": "Perguntas frequentes / base de conhecimento", "Si la IA no resuelve el caso, envíalo al propietario de Sutil.": "Se a IA não resolver o caso, envie-o ao responsável pela Sutil.", "Preguntas, ayuda de uso, navegación y solución guiada.": "Perguntas, ajuda de uso, navegação e solução guiada.", "Preguntas frecuentes": "Perguntas frequentes", "base de conocimiento": "base de conhecimento", "resuelve": "resolve", "envíalo": "envie-o", "propietario": "responsável", "navegación": "navegação", "solución": "solução", "preguntas": "perguntas", "conocimiento": "conhecimento", "mensaje": "mensagem", "mensajes": "mensagens", "conexión": "conexão", "posible": "possível", "ingresados": "informados", "credenciales": "credenciais", "entregadas": "fornecidas", "permiso": "permissão", "filtros": "filtros", "seleccionados": "selecionados", "cédula": "documento de identidade", "mapeo": "mapeamento", "dónde": "onde", "cualquier": "qualquer", "selección": "seleção", "corresponda": "corresponda", "módulo": "módulo", "ayuda": "ajuda", "uso": "uso", "guiada": "guiada", "frecuentes": "frequentes", "pregunta": "pergunta"});
  Object.assign(PH_EN,{"Tu sesión venció. Ingresa nuevamente.": "Your session expired. Sign in again.", "Revisa los datos ingresados.": "Review the entered data.", "Ingresa con la llave de tu empresa, tu celular y tu clave.": "Sign in with your company key, mobile number and password.", "Ingresa con las credenciales y permisos asignados por el empresario.": "Sign in with the credentials and permissions assigned by the business owner.", "Ingresa con las credenciales entregadas por tu empresa.": "Sign in with the credentials provided by your company.", "No hay clientes para este filtro.": "There are no clients for this filter.", "No hay clientes para los filtros seleccionados.": "There are no clients for the selected filters.", "No hay pagos para los filtros seleccionados.": "There are no payments for the selected filters.", "No hay cuotas para los filtros seleccionados.": "There are no installments for the selected filters.", "Documento y código protegidos por permiso especial.": "Document and code are protected by a special permission.", "Ej. Clientes VIP": "E.g. VIP Clients", "Escribe un mensaje para el cliente...": "Type a message for the client...", "Error al cargar la conversación": "Error loading the conversation", "El chat necesita conexión para enviar el mensaje.": "The chat needs a connection to send the message.", "No fue posible enviar el mensaje.": "The message could not be sent.", "Escribe un mensaje antes de enviar.": "Type a message before sending.", "Escribe el documento personal.": "Enter the personal document.", "Otras preguntas": "Other questions", "Pagados": "Paid", "Reportados / pérdida": "Reported / loss", "Selecciona la fecha real del cobro. La deuda se actualizará con esa fecha y el dinero entrará en la caja operativa abierta actual, sin reabrir cajas anteriores.": "Select the actual collection date. The debt will be updated with that date and the money will enter the currently open operational cash box, without reopening previous cash sessions.", "Vista general: se muestra una sola cuota pendiente por cliente. Escribe el nombre, código, documento o teléfono de un cliente para ver todas sus cuotas pendientes.": "Overview: one pending installment is shown per client. Type a client name, code, document or phone number to view all pending installments.", "Columnas": "Columns", "columnas": "columns", "Mapeo de columnas": "Column mapping", "mapeo de columnas": "column mapping", "Revisar columnas": "Review columns", "Preguntas frecuentes / base de conocimiento": "Frequently asked questions / knowledge base", "Si la IA no resuelve el caso, envíalo al propietario de Sutil.": "If AI does not resolve the case, send it to the Sutil owner.", "Preguntas, ayuda de uso, navegación y solución guiada.": "Questions, usage help, navigation and guided solutions.", "Preguntas frecuentes": "Frequently asked questions", "base de conocimiento": "knowledge base", "resuelve": "resolves", "envíalo": "send it", "propietario": "owner", "navegación": "navigation", "solución": "solution", "preguntas": "questions", "conocimiento": "knowledge", "mensaje": "message", "mensajes": "messages", "conexión": "connection", "posible": "possible", "ingresados": "entered", "credenciales": "credentials", "entregadas": "provided", "permiso": "permission", "filtros": "filters", "seleccionados": "selected", "cédula": "ID", "mapeo": "mapping", "dónde": "where", "cualquier": "any", "selección": "selection", "corresponda": "matches", "módulo": "module", "ayuda": "help", "uso": "use", "guiada": "guided", "frecuentes": "frequent"});
  Object.assign(WD_PT,{"Tu sesión venció. Ingresa nuevamente.": "Sua sessão expirou. Entre novamente.", "Revisa los datos ingresados.": "Revise os dados informados.", "Ingresa con la llave de tu empresa, tu celular y tu clave.": "Entre com a chave da sua empresa, seu celular e sua senha.", "Ingresa con las credenciales y permisos asignados por el empresario.": "Entre com as credenciais e permissões atribuídas pelo empresário.", "Ingresa con las credenciales entregadas por tu empresa.": "Entre com as credenciais fornecidas pela sua empresa.", "No hay clientes para este filtro.": "Não há clientes para este filtro.", "No hay clientes para los filtros seleccionados.": "Não há clientes para os filtros selecionados.", "No hay pagos para los filtros seleccionados.": "Não há pagamentos para os filtros selecionados.", "No hay cuotas para los filtros seleccionados.": "Não há parcelas para os filtros selecionados.", "Documento y código protegidos por permiso especial.": "Documento e código protegidos por permissão especial.", "Ej. Clientes VIP": "Ex.: Clientes VIP", "Escribe un mensaje para el cliente...": "Digite uma mensagem para o cliente...", "Error al cargar la conversación": "Erro ao carregar a conversa", "El chat necesita conexión para enviar el mensaje.": "O chat precisa de conexão para enviar a mensagem.", "No fue posible enviar el mensaje.": "Não foi possível enviar a mensagem.", "Escribe un mensaje antes de enviar.": "Digite uma mensagem antes de enviar.", "Escribe el documento personal.": "Digite o documento pessoal.", "Otras preguntas": "Outras perguntas", "Pagados": "Pagos", "Reportados / pérdida": "Reportados / perda", "Selecciona la fecha real del cobro. La deuda se actualizará con esa fecha y el dinero entrará en la caja operativa abierta actual, sin reabrir cajas anteriores.": "Selecione a data real da cobrança. A dívida será atualizada com essa data e o dinheiro entrará na caixa operacional aberta atual, sem reabrir caixas anteriores.", "Vista general: se muestra una sola cuota pendiente por cliente. Escribe el nombre, código, documento o teléfono de un cliente para ver todas sus cuotas pendientes.": "Visão geral: é exibida uma única parcela pendente por cliente. Digite o nome, código, documento ou telefone de um cliente para ver todas as parcelas pendentes.", "Columnas": "Colunas", "columnas": "colunas", "Mapeo de columnas": "Mapeamento de colunas", "mapeo de columnas": "mapeamento de colunas", "Revisar columnas": "Revisar colunas", "Preguntas frecuentes / base de conocimiento": "Perguntas frequentes / base de conhecimento", "Si la IA no resuelve el caso, envíalo al propietario de Sutil.": "Se a IA não resolver o caso, envie-o ao responsável pela Sutil.", "Preguntas, ayuda de uso, navegación y solución guiada.": "Perguntas, ajuda de uso, navegação e solução guiada.", "Preguntas frecuentes": "Perguntas frequentes", "base de conocimiento": "base de conhecimento", "resuelve": "resolve", "envíalo": "envie-o", "propietario": "responsável", "navegación": "navegação", "solución": "solução", "preguntas": "perguntas", "conocimiento": "conhecimento", "mensaje": "mensagem", "mensajes": "mensagens", "conexión": "conexão", "posible": "possível", "ingresados": "informados", "credenciales": "credenciais", "entregadas": "fornecidas", "permiso": "permissão", "filtros": "filtros", "seleccionados": "selecionados", "cédula": "documento de identidade", "mapeo": "mapeamento", "dónde": "onde", "cualquier": "qualquer", "selección": "seleção", "corresponda": "corresponda", "módulo": "módulo", "ayuda": "ajuda", "uso": "uso", "guiada": "guiada", "frecuentes": "frequentes", "pregunta": "pergunta"});
  Object.assign(WD_EN,{"Tu sesión venció. Ingresa nuevamente.": "Your session expired. Sign in again.", "Revisa los datos ingresados.": "Review the entered data.", "Ingresa con la llave de tu empresa, tu celular y tu clave.": "Sign in with your company key, mobile number and password.", "Ingresa con las credenciales y permisos asignados por el empresario.": "Sign in with the credentials and permissions assigned by the business owner.", "Ingresa con las credenciales entregadas por tu empresa.": "Sign in with the credentials provided by your company.", "No hay clientes para este filtro.": "There are no clients for this filter.", "No hay clientes para los filtros seleccionados.": "There are no clients for the selected filters.", "No hay pagos para los filtros seleccionados.": "There are no payments for the selected filters.", "No hay cuotas para los filtros seleccionados.": "There are no installments for the selected filters.", "Documento y código protegidos por permiso especial.": "Document and code are protected by a special permission.", "Ej. Clientes VIP": "E.g. VIP Clients", "Escribe un mensaje para el cliente...": "Type a message for the client...", "Error al cargar la conversación": "Error loading the conversation", "El chat necesita conexión para enviar el mensaje.": "The chat needs a connection to send the message.", "No fue posible enviar el mensaje.": "The message could not be sent.", "Escribe un mensaje antes de enviar.": "Type a message before sending.", "Escribe el documento personal.": "Enter the personal document.", "Otras preguntas": "Other questions", "Pagados": "Paid", "Reportados / pérdida": "Reported / loss", "Selecciona la fecha real del cobro. La deuda se actualizará con esa fecha y el dinero entrará en la caja operativa abierta actual, sin reabrir cajas anteriores.": "Select the actual collection date. The debt will be updated with that date and the money will enter the currently open operational cash box, without reopening previous cash sessions.", "Vista general: se muestra una sola cuota pendiente por cliente. Escribe el nombre, código, documento o teléfono de un cliente para ver todas sus cuotas pendientes.": "Overview: one pending installment is shown per client. Type a client name, code, document or phone number to view all pending installments.", "Columnas": "Columns", "columnas": "columns", "Mapeo de columnas": "Column mapping", "mapeo de columnas": "column mapping", "Revisar columnas": "Review columns", "Preguntas frecuentes / base de conocimiento": "Frequently asked questions / knowledge base", "Si la IA no resuelve el caso, envíalo al propietario de Sutil.": "If AI does not resolve the case, send it to the Sutil owner.", "Preguntas, ayuda de uso, navegación y solución guiada.": "Questions, usage help, navigation and guided solutions.", "Preguntas frecuentes": "Frequently asked questions", "base de conocimiento": "knowledge base", "resuelve": "resolves", "envíalo": "send it", "propietario": "owner", "navegación": "navigation", "solución": "solution", "preguntas": "questions", "conocimiento": "knowledge", "mensaje": "message", "mensajes": "messages", "conexión": "connection", "posible": "possible", "ingresados": "entered", "credenciales": "credentials", "entregadas": "provided", "permiso": "permission", "filtros": "filters", "seleccionados": "selected", "cédula": "ID", "mapeo": "mapping", "dónde": "where", "cualquier": "any", "selección": "selection", "corresponda": "matches", "módulo": "module", "ayuda": "help", "uso": "use", "guiada": "guided", "frecuentes": "frequent"});
  Object.assign(PH_PT,{"Chats con clientes":"Chats com clientes","Busca por nombre, código o ruta y abre la conversación.":"Busque por nome, código ou rota e abra a conversa.","Infraestructura preparada para conectar un asistente de IA en una versión futura":"Infraestrutura preparada para conectar um assistente de IA em uma versão futura","IA preparada · sin conectar":"IA preparada · sem conexão","Conversaciones":"Conversas","0 clientes":"0 clientes","Buscar nombre o código...":"Buscar nome ou código...","Todas las rutas":"Todas as rotas","Orden de conversaciones":"Ordem das conversas","Más recientes":"Mais recentes","Más antiguos":"Mais antigos","Cargando clientes...":"Carregando clientes...","Selecciona un cliente":"Selecione um cliente","Su conversación aparecerá aquí.":"A conversa aparecerá aqui."});
  Object.assign(PH_EN,{"Chats con clientes":"Client chats","Busca por nombre, código o ruta y abre la conversación.":"Search by name, code, or route and open the conversation.","Infraestructura preparada para conectar un asistente de IA en una versión futura":"Infrastructure ready to connect an AI assistant in a future version","IA preparada · sin conectar":"AI ready · not connected","Conversaciones":"Conversations","0 clientes":"0 clients","Buscar nombre o código...":"Search name or code...","Todas las rutas":"All routes","Orden de conversaciones":"Conversation order","Más recientes":"Most recent","Más antiguos":"Oldest","Cargando clientes...":"Loading clients...","Selecciona un cliente":"Select a client","Su conversación aparecerá aquí.":"The conversation will appear here."});
  Object.assign(WD_PT,{"Chats con clientes":"Chats com clientes","Busca por nombre, código o ruta y abre la conversación.":"Busque por nome, código ou rota e abra a conversa.","Infraestructura preparada para conectar un asistente de IA en una versión futura":"Infraestrutura preparada para conectar um assistente de IA em uma versão futura","IA preparada · sin conectar":"IA preparada · sem conexão","Conversaciones":"Conversas","0 clientes":"0 clientes","Buscar nombre o código...":"Buscar nome ou código...","Todas las rutas":"Todas as rotas","Orden de conversaciones":"Ordem das conversas","Más recientes":"Mais recentes","Más antiguos":"Mais antigos","Cargando clientes...":"Carregando clientes...","Selecciona un cliente":"Selecione um cliente","Su conversación aparecerá aquí.":"A conversa aparecerá aqui."});
  Object.assign(WD_EN,{"Chats con clientes":"Client chats","Busca por nombre, código o ruta y abre la conversación.":"Search by name, code, or route and open the conversation.","Infraestructura preparada para conectar un asistente de IA en una versión futura":"Infrastructure ready to connect an AI assistant in a future version","IA preparada · sin conectar":"AI ready · not connected","Conversaciones":"Conversations","0 clientes":"0 clients","Buscar nombre o código...":"Search name or code...","Todas las rutas":"All routes","Orden de conversaciones":"Conversation order","Más recientes":"Most recent","Más antiguos":"Oldest","Cargando clientes...":"Loading clients...","Selecciona un cliente":"Select a client","Su conversación aparecerá aquí.":"The conversation will appear here."});
  Object.assign(PH_PT,{"Revisar lo ingresado": "Revisar o que foi inserido", "Comprueba la información importada o ingresada manualmente antes de iniciar la operación.": "Confira as informações importadas ou inseridas manualmente antes de iniciar a operação.", "Configura únicamente lo que tu empresa realmente ofrece. Este contenido solo aparecerá a los clientes que tengan activada la casilla Beneficios en la app del cliente.": "Configure apenas o que sua empresa realmente oferece. Este conteúdo só aparecerá para os clientes que tiverem a opção Benefícios no app do cliente ativada.", "Cambia el celular o la llave de acceso de la empresa. Por seguridad debes confirmar tu clave actual.": "Altere o celular ou a chave de acesso da empresa. Por segurança, confirme sua senha atual.", "Cambiar contraseña": "Alterar senha", "Estás ingresando con una clave temporal. Debes cambiarla antes de usar el panel.": "Você está entrando com uma senha temporária. Altere-a antes de usar o painel.", "Escribe la clave temporal.": "Digite a senha temporária.", "La nueva clave debe ser diferente a la temporal.": "A nova senha deve ser diferente da senha temporária.", "Cambiar clave": "Alterar senha", "Beneficios en la app del cliente": "Benefícios no app do cliente", "ingresado": "inserido", "ingresada": "inserida", "comprueba": "confira", "debes": "deve", "cambiar": "alterar", "contraseña": "senha", "estás": "você está", "cambiarla": "alterá-la", "panel": "painel", "temporal": "temporária"});
  Object.assign(PH_EN,{"Revisar lo ingresado": "Review entered data", "Comprueba la información importada o ingresada manualmente antes de iniciar la operación.": "Review the imported or manually entered information before starting operations.", "Configura únicamente lo que tu empresa realmente ofrece. Este contenido solo aparecerá a los clientes que tengan activada la casilla Beneficios en la app del cliente.": "Configure only what your company actually offers. This content will appear only for clients who have the Benefits in the client app option enabled.", "Cambia el celular o la llave de acceso de la empresa. Por seguridad debes confirmar tu clave actual.": "Change the company mobile number or access key. For security, confirm your current password.", "Cambiar contraseña": "Change password", "Estás ingresando con una clave temporal. Debes cambiarla antes de usar el panel.": "You are signing in with a temporary password. Change it before using the panel.", "Escribe la clave temporal.": "Enter the temporary password.", "La nueva clave debe ser diferente a la temporal.": "The new password must be different from the temporary password.", "Cambiar clave": "Change password", "Beneficios en la app del cliente": "Benefits in the client app", "ingresado": "entered", "ingresada": "entered", "comprueba": "review", "debes": "must", "cambiar": "change", "contraseña": "password", "estás": "you are", "cambiarla": "change it", "panel": "panel", "temporal": "temporary"});
  Object.assign(WD_PT,{"Revisar lo ingresado": "Revisar o que foi inserido", "Comprueba la información importada o ingresada manualmente antes de iniciar la operación.": "Confira as informações importadas ou inseridas manualmente antes de iniciar a operação.", "Configura únicamente lo que tu empresa realmente ofrece. Este contenido solo aparecerá a los clientes que tengan activada la casilla Beneficios en la app del cliente.": "Configure apenas o que sua empresa realmente oferece. Este conteúdo só aparecerá para os clientes que tiverem a opção Benefícios no app do cliente ativada.", "Cambia el celular o la llave de acceso de la empresa. Por seguridad debes confirmar tu clave actual.": "Altere o celular ou a chave de acesso da empresa. Por segurança, confirme sua senha atual.", "Cambiar contraseña": "Alterar senha", "Estás ingresando con una clave temporal. Debes cambiarla antes de usar el panel.": "Você está entrando com uma senha temporária. Altere-a antes de usar o painel.", "Escribe la clave temporal.": "Digite a senha temporária.", "La nueva clave debe ser diferente a la temporal.": "A nova senha deve ser diferente da senha temporária.", "Cambiar clave": "Alterar senha", "Beneficios en la app del cliente": "Benefícios no app do cliente", "ingresado": "inserido", "ingresada": "inserida", "comprueba": "confira", "debes": "deve", "cambiar": "alterar", "contraseña": "senha", "estás": "você está", "cambiarla": "alterá-la", "panel": "painel", "temporal": "temporária"});
  Object.assign(WD_EN,{"Revisar lo ingresado": "Review entered data", "Comprueba la información importada o ingresada manualmente antes de iniciar la operación.": "Review the imported or manually entered information before starting operations.", "Configura únicamente lo que tu empresa realmente ofrece. Este contenido solo aparecerá a los clientes que tengan activada la casilla Beneficios en la app del cliente.": "Configure only what your company actually offers. This content will appear only for clients who have the Benefits in the client app option enabled.", "Cambia el celular o la llave de acceso de la empresa. Por seguridad debes confirmar tu clave actual.": "Change the company mobile number or access key. For security, confirm your current password.", "Cambiar contraseña": "Change password", "Estás ingresando con una clave temporal. Debes cambiarla antes de usar el panel.": "You are signing in with a temporary password. Change it before using the panel.", "Escribe la clave temporal.": "Enter the temporary password.", "La nueva clave debe ser diferente a la temporal.": "The new password must be different from the temporary password.", "Cambiar clave": "Change password", "Beneficios en la app del cliente": "Benefits in the client app", "ingresado": "entered", "ingresada": "entered", "comprueba": "review", "debes": "must", "cambiar": "change", "contraseña": "password", "estás": "you are", "cambiarla": "change it", "panel": "panel", "temporal": "temporary"});
  let active=(typeof SUTIL_ACTIVE_LANGUAGE!=="undefined"&&SUTIL_ACTIVE_LANGUAGE)||"es";
  let mutating=false;
  const esc=s=>String(s).replace(/[.*+?^${}()|[\\]\\]/g,'\\$&');

  // v90e: compila cada mapa de traducción una sola vez. En v90d se ordenaba
  // y construía un RegExp grande por cada nodo de texto, lo que bloqueaba el móvil.
  const compiledMapCache=new WeakMap();
  function compileMap(map){
    let compiled=compiledMapCache.get(map);
    if(compiled)return compiled;
    const entries=Object.entries(map).sort((a,b)=>b[0].length-a[0].length);
    const lookup=new Map(entries.map(([a,b])=>[String(a).toLocaleLowerCase('es'),String(b)]));
    const pattern=entries.map(([a])=>esc(a)).join('|');
    const re=pattern?new RegExp('(?<![\\p{L}\\p{N}_-])(?:'+pattern+')(?![\\p{L}\\p{N}_-])','giu'):null;
    compiled={lookup,re};
    compiledMapCache.set(map,compiled);
    return compiled;
  }
  function replaceMap(text,map){
    const {lookup,re}=compileMap(map);
    if(!re)return String(text);
    return String(text).replace(re,m=>{
      const b=lookup.get(String(m).toLocaleLowerCase('es'));
      if(b===undefined)return m;
      if(m===m.toUpperCase()&&m.length>1)return b.toUpperCase();
      if(m[0]&&m[0]===m[0].toUpperCase())return b.charAt(0).toUpperCase()+b.slice(1);
      return b;
    });
  }
  const MERGED_PT=Object.assign({},WD_PT,PH_PT);
  const MERGED_EN=Object.assign({},WD_EN,PH_EN);
  const reverseExact=new Map();
  try{
    if(typeof ACCESS_I18N!=="undefined"&&ACCESS_I18N.es){
      for(const lang of ['pt','en'])for(const [k,v] of Object.entries(ACCESS_I18N[lang]||{})){
        const es=ACCESS_I18N.es[k];
        if(es!=null&&v!=null&&String(v)!==String(es)&&!reverseExact.has(String(v)))reverseExact.set(String(v),String(es));
      }
    }
    if(typeof SUTIL_UI_I18N!=="undefined")for(const lang of ['pt','en'])for(const [es,v] of Object.entries(SUTIL_UI_I18N[lang]||{})){
      if(v!=null&&String(v)!==String(es)&&!reverseExact.has(String(v)))reverseExact.set(String(v),String(es));
    }
  }catch(_e){}
  const translateCache=new Map();
  function cacheTranslation(key,value){
    if(translateCache.size>3500)translateCache.clear();
    translateCache.set(key,value);
    return value;
  }
  function canonicalize(raw){
    const t=String(raw??'');
    const lead=(t.match(/^\s*/)||[''])[0], trail=(t.match(/\s*$/)||[''])[0];
    let core=t.trim(); if(!core)return t;
    const exact=reverseExact.get(core);
    if(exact!==undefined)return lead+exact+trail;
    core=replaceMap(core,REV_PT);
    return lead+core+trail;
  }
  function translateCore(raw,lang){
    const rawText=String(raw??'');
    const normalizedLang=['es','pt','en'].includes(String(lang||'').toLowerCase())?String(lang).toLowerCase():'es';
    const cacheKey=normalizedLang+'\u0000'+rawText;
    if(rawText.length<=220&&translateCache.has(cacheKey))return translateCache.get(cacheKey);
    const canonical=canonicalize(rawText);
    if(normalizedLang==='es')return rawText.length<=220?cacheTranslation(cacheKey,canonical):canonical;
    const lead=(canonical.match(/^\s*/)||[''])[0], trail=(canonical.match(/\s*$/)||[''])[0];
    let core=canonical.trim(); if(!core)return canonical;
    try{
      const exact=(typeof SUTIL_UI_I18N!=="undefined"?(SUTIL_UI_I18N[normalizedLang]||{}):{})[core];
      if(exact){
        const result=lead+exact+trail;
        return rawText.length<=220?cacheTranslation(cacheKey,result):result;
      }
    }catch(_e){}
    core=replaceMap(core,normalizedLang==='pt'?MERGED_PT:MERGED_EN);
    const result=lead+core+trail;
    return rawText.length<=220?cacheTranslation(cacheKey,result):result;
  }
  function shouldSkip(el){
    if(!el)return true;
    return !!el.closest('script,style,textarea,[data-sutil-no-i18n]');
  }
  function translateTextNode(n,force=false){
    if(!n||!n.parentElement||shouldSkip(n.parentElement))return;
    const now=n.nodeValue||'';
    if(!force && n.__sutilI18nLast===now)return;
    if(n.__sutilI18nCanonical===undefined || (n.__sutilI18nLast!==undefined && now!==n.__sutilI18nLast)) n.__sutilI18nCanonical=canonicalize(now);
    const next=translateCore(n.__sutilI18nCanonical,active);
    if(now!==next)n.nodeValue=next;
    n.__sutilI18nLast=next;
  }
  function translateAttrs(el,force=false){
    if(!el||el.nodeType!==1||shouldSkip(el))return;
    for(const attr of ['placeholder','title','aria-label']){
      if(!el.hasAttribute(attr))continue;
      const key='sutilV74Canonical'+attr.replace(/[^a-z]/gi,'');
      const lastKey=key+'Last';
      const now=el.getAttribute(attr)||'';
      if(!force && el.dataset[lastKey]===now)continue;
      if(el.dataset[key]===undefined || (el.dataset[lastKey]!==undefined && now!==el.dataset[lastKey])) el.dataset[key]=canonicalize(now);
      const next=translateCore(el.dataset[key],active);
      if(now!==next)el.setAttribute(attr,next);
      el.dataset[lastKey]=next;
    }
    if(el.tagName==='OPTION'){
      const now=el.textContent||'';
      if(el.__sutilV74Canonical===undefined || (el.__sutilV74Last!==undefined&&now!==el.__sutilV74Last))el.__sutilV74Canonical=canonicalize(now);
      const next=translateCore(el.__sutilV74Canonical,active);
      if(now!==next)el.textContent=next;
      el.__sutilV74Last=next;
    }
  }
  function translateSubtree(root,force=false){
    if(!root)return; mutating=true;
    try{
      if(root.nodeType===3)translateTextNode(root,force);
      else if(root.nodeType===1){
        translateAttrs(root,force);
        const w=document.createTreeWalker(root,NodeFilter.SHOW_TEXT);while(w.nextNode())translateTextNode(w.currentNode,force);
        root.querySelectorAll('input[placeholder],textarea[placeholder],[title],[aria-label],option').forEach(el=>translateAttrs(el,force));
      }
    }finally{mutating=false;}
  }
  function apply(lang){
    active=['es','pt','en'].includes(String(lang||'').toLowerCase())?String(lang).toLowerCase():'es';
    try{SUTIL_ACTIVE_LANGUAGE=active;}catch(_e){}
    document.documentElement.lang=active;
    // v90e: traducir únicamente lo visible. Los demás módulos se traducen
    // cuando se abren mediante reapplySutilLanguageOnce().
    translateVisible(true);
    document.title=translateCore('Sutil · Administración',active);
    const a=document.getElementById('accessLanguage'), c=document.getElementById('settingLanguage');
    if(a)a.value=active;if(c)c.value=active;
    try{syncSutilMobileSelectButtons();}catch(_e){}
  }
  // Replace the old translator with the canonical translator used by all existing hooks.
  try{window.sutilTranslateText=translateCore;}catch(_e){}
  try{window.applySutilLanguage=apply;}catch(_e){}
  // v77: traducción incremental optimizada para móvil.
  // No observamos carácter por carácter ni recorremos todo el documento en cada cambio.
  // Solo procesamos nodos nuevos dentro de la sección visible, menú lateral o panel AI.
  let pendingRoots=new Set(), flushTimer=null;
  function isVisibleTranslationArea(node){
    const el=node?.nodeType===1?node:node?.parentElement;
    if(!el||!document.body.contains(el))return false;
    return !!el.closest('.section.active,#ownerQuickMenu,#sutilAiFloatPanel,#sutilNotificationsPanel,#sutilNotifyPanel,#sutilNotifySettingsModal,#sutilDialogBackdrop,#sutilMobileSelectModal,#profileChooser,#login,#activeCompanyBanner,#sessionControls');
  }
  function flushPending(){
    flushTimer=null;
    if(mutating||!pendingRoots.size)return;
    const roots=[...pendingRoots];pendingRoots.clear();
    const run=()=>{
      if(mutating)return;
      for(const n of roots){
        if(isVisibleTranslationArea(n))translateSubtree(n,false);
      }
    };
    if('requestIdleCallback' in window)requestIdleCallback(run,{timeout:120});
    else setTimeout(run,0);
  }
  function queueRoot(n){
    if(!n||!isVisibleTranslationArea(n))return;
    const el=n.nodeType===1?n:n.parentElement;
    if(!el)return;
    // Si ya hay un ancestro pendiente, este nodo quedará incluido en ese recorrido.
    for(const root of pendingRoots){
      const rootEl=root?.nodeType===1?root:root?.parentElement;
      if(rootEl&&rootEl.contains(el))return;
    }
    for(const root of [...pendingRoots]){
      const rootEl=root?.nodeType===1?root:root?.parentElement;
      if(rootEl&&el.contains(rootEl))pendingRoots.delete(root);
    }
    pendingRoots.add(n);
    if(flushTimer===null)flushTimer=setTimeout(flushPending,90);
  }
  const observer=new MutationObserver(records=>{
    if(mutating)return;
    for(const r of records){
      if(r.type==='childList'){
        for(const n of r.addedNodes)queueRoot(n);
      }
      // attribute/characterData se omiten intencionalmente: textContent genera childList.
    }
  });
  function translateVisible(force=false){
    const activeSection=document.querySelector('.section.active');
    if(activeSection)translateSubtree(activeSection,force);
    for(const sel of ['#ownerQuickMenu','#sutilAiFloatPanel','#sutilNotificationsPanel','#sutilNotifyPanel','#sutilNotifySettingsModal','#profileChooser','#login','#activeCompanyBanner','#sessionControls']){
      const el=document.querySelector(sel);
      if(el)translateSubtree(el,force);
    }
    const a=document.getElementById('accessLanguage'), c=document.getElementById('settingLanguage');
    if(a)a.value=active;if(c)c.value=active;
  }
  const install=()=>{
    if(document.body)observer.observe(document.body,{subtree:true,childList:true});
    apply(active); // una sola traducción global al arrancar/cambiar idioma
  };
  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',install,{once:true});else install();

  // Los hooks antiguos llaman esta función al abrir módulos. En v77 traducimos solo lo visible.
  window.reapplySutilLanguageOnce=function(delay=0){
    window.setTimeout(()=>{try{translateVisible(false);}catch(_e){}},Math.max(0,Number(delay)||0));
  };

  // Los diálogos de Sutil también reciben el idioma antes de mostrarse.
  try{
    const oldAlert=window.sutilAlert;
    if(typeof oldAlert==='function')window.sutilAlert=(message,options={})=>oldAlert(translateCore(message,active),options);
  }catch(_e){}
  window.SUTIL_I18N_V77={apply,translate:translateCore,canonicalize,translateVisible,get language(){return active;}};
})();
</script>

<script id="sutil-admin-notification-settings-js-v1">
/* SUTIL · Etapa 6 · preferencias administrativas y Web Push opcional. */
let SUTIL_ADMIN_NOTIFY_PREFS=null;
let sutilNotifySettingsSaveTimer=null;
let sutilNotifySettingsLoading=false;
let sutilNotifyDeviceActive=false;

function sutilAdminNotificationEnabled(field){
  if(!SUTIL_ADMIN_NOTIFY_PREFS)return true;
  return SUTIL_ADMIN_NOTIFY_PREFS[field]!==false;
}

function sutilNotifyText(value){
  try{return typeof sutilTranslateText==='function'?sutilTranslateText(value,SUTIL_ACTIVE_LANGUAGE||'es'):value;}catch(_){return value;}
}

function setSutilNotifySettingsStatus(message='',mode=''){
  const el=document.getElementById('sutilNotifySettingsStatus');
  if(!el)return;
  el.textContent=message? sutilNotifyText(message):'';
  el.className=`sutil-notify-settings-status ${mode||''}`.trim();
}

function updateSutilNotificationSummary(){
  const badge=document.getElementById('sutilNotifySettingsSummaryBadge');
  if(!badge)return;
  const prefs=SUTIL_ADMIN_NOTIFY_PREFS;
  badge.classList.remove('ok','warn');
  if(!prefs){badge.textContent=sutilNotifyText('Cargando…');return;}
  if(prefs.push_enabled && Number(prefs.active_push_devices||0)>0){
    badge.textContent=sutilNotifyText('Push activo');badge.classList.add('ok');
  }else if(prefs.push_enabled && !prefs.push_server_configured){
    badge.textContent=sutilNotifyText('Push pendiente de servidor');badge.classList.add('warn');
  }else{
    badge.textContent=sutilNotifyText('Avisos internos activos');
  }
}

function sutilNotifyCheck(id,value){
  const el=document.getElementById(id);if(el)el.checked=Boolean(value);
}

function renderSutilNotificationRouteMode(){
  const select=document.getElementById('sutilNotifyRouteMode');
  if(!select||!SUTIL_ADMIN_NOTIFY_PREFS)return;
  const canAll=Boolean(SUTIL_ADMIN_NOTIFY_PREFS.can_choose_all_routes);
  const options=canAll
    ? [['all','Todas mis rutas'],['selected','Solo rutas seleccionadas']]
    : [['authorized','Todas mis rutas autorizadas'],['selected','Solo rutas seleccionadas']];
  select.innerHTML=options.map(([value,label])=>`<option value="${value}">${legacyEscapeHtml(sutilNotifyText(label))}</option>`).join('');
  const fallback=canAll?'all':'authorized';
  select.value=options.some(([value])=>value===SUTIL_ADMIN_NOTIFY_PREFS.route_mode)?SUTIL_ADMIN_NOTIFY_PREFS.route_mode:fallback;
}

function renderSutilNotificationRouteChoices(){
  const box=document.getElementById('sutilNotifyRouteChoices');
  const mode=document.getElementById('sutilNotifyRouteMode')?.value||SUTIL_ADMIN_NOTIFY_PREFS?.route_mode||'authorized';
  if(!box||!SUTIL_ADMIN_NOTIFY_PREFS)return;
  const routes=Array.isArray(SUTIL_ADMIN_NOTIFY_PREFS.routes)?SUTIL_ADMIN_NOTIFY_PREFS.routes:[];
  const selected=new Set((SUTIL_ADMIN_NOTIFY_PREFS.route_ids||[]).map(Number));
  const defaultAllSelected=(mode==='selected' && selected.size===0);
  if(mode!=='selected'){
    box.innerHTML=`<span class="muted" style="font-size:11px">${legacyEscapeHtml(sutilNotifyText('Se usarán únicamente las rutas permitidas para este usuario.'))}</span>`;
    return;
  }
  if(!routes.length){
    box.innerHTML=`<span class="muted" style="font-size:11px">${legacyEscapeHtml(sutilNotifyText('No hay rutas disponibles.'))}</span>`;
    return;
  }
  box.innerHTML=routes.map(route=>`<label class="sutil-notify-route-chip"><input class="sutil-notify-route-check" type="checkbox" value="${Number(route.id)}" ${(selected.has(Number(route.id))||defaultAllSelected)?'checked':''} onchange="scheduleSutilNotificationSettingsSave()"><span>${legacyEscapeHtml(route.name||'Ruta')}</span></label>`).join('');
}

function renderSutilNotificationSettings(){
  const p=SUTIL_ADMIN_NOTIFY_PREFS;if(!p)return;
  sutilNotifyCheck('sutilNotifyNewReceipt',p.notify_new_receipt);
  sutilNotifyCheck('sutilNotifyPendingSummary',p.notify_pending_summary);
  sutilNotifyCheck('sutilNotifyReconConfirmed',p.notify_reconciliation_confirmed);
  sutilNotifyCheck('sutilNotifyManualConfirmed',p.notify_manual_confirmed);
  sutilNotifyCheck('sutilNotifyReviewRequired',p.notify_review_required);
  sutilNotifyCheck('sutilNotifySecurity',p.notify_security_alerts);
  sutilNotifyCheck('sutilNotifyRejectedRefunded',p.notify_rejected_refunded);
  sutilNotifyCheck('sutilNotifyVibration',p.vibration_enabled);
  sutilNotifyCheck('sutilNotifyQuietEnabled',p.quiet_hours_enabled);
  const qStart=document.getElementById('sutilNotifyQuietStart');if(qStart)qStart.value=p.quiet_start||'22:00';
  const qEnd=document.getElementById('sutilNotifyQuietEnd');if(qEnd)qEnd.value=p.quiet_end||'07:00';
  renderSutilNotificationRouteMode();renderSutilNotificationRouteChoices();
  updateSutilNotificationSummary();
  refreshSutilPushDeviceStatus().catch(()=>{});
}

async function loadSutilNotificationSettings(render=true){
  if(!currentUser||!token||!navigator.onLine)return null;
  if(sutilNotifySettingsLoading)return SUTIL_ADMIN_NOTIFY_PREFS;
  sutilNotifySettingsLoading=true;
  try{
    const data=await api('/api/admin/notifications/settings');
    SUTIL_ADMIN_NOTIFY_PREFS=data||null;
    updateSutilNotificationSummary();
    if(render)renderSutilNotificationSettings();
    return data;
  }catch(error){
    if(render)setSutilNotifySettingsStatus(error.message||'No fue posible cargar las notificaciones.','error');
    return null;
  }finally{sutilNotifySettingsLoading=false;}
}

function collectSutilNotificationSettings(){
  const routeMode=document.getElementById('sutilNotifyRouteMode')?.value || SUTIL_ADMIN_NOTIFY_PREFS?.route_mode || (SUTIL_ADMIN_NOTIFY_PREFS?.can_choose_all_routes?'all':'authorized');
  const routeIds=[...document.querySelectorAll('.sutil-notify-route-check:checked')].map(el=>Number(el.value)).filter(Boolean);
  return {
    push_enabled:Boolean(SUTIL_ADMIN_NOTIFY_PREFS?.push_enabled),
    notify_new_receipt:Boolean(document.getElementById('sutilNotifyNewReceipt')?.checked),
    notify_pending_summary:Boolean(document.getElementById('sutilNotifyPendingSummary')?.checked),
    notify_reconciliation_confirmed:Boolean(document.getElementById('sutilNotifyReconConfirmed')?.checked),
    notify_manual_confirmed:Boolean(document.getElementById('sutilNotifyManualConfirmed')?.checked),
    notify_review_required:Boolean(document.getElementById('sutilNotifyReviewRequired')?.checked),
    notify_security_alerts:Boolean(document.getElementById('sutilNotifySecurity')?.checked),
    notify_rejected_refunded:Boolean(document.getElementById('sutilNotifyRejectedRefunded')?.checked),
    vibration_enabled:Boolean(document.getElementById('sutilNotifyVibration')?.checked),
    quiet_hours_enabled:Boolean(document.getElementById('sutilNotifyQuietEnabled')?.checked),
    quiet_start:document.getElementById('sutilNotifyQuietStart')?.value||'22:00',
    quiet_end:document.getElementById('sutilNotifyQuietEnd')?.value||'07:00',
    route_mode:routeMode,
    route_ids:routeIds
  };
}

async function saveSutilNotificationSettings(){
  if(!currentUser||!navigator.onLine)return;
  setSutilNotifySettingsStatus('Guardando…');
  try{
    const data=await api('/api/admin/notifications/settings',{
      method:'PUT',headers:{'Content-Type':'application/json'},body:JSON.stringify(collectSutilNotificationSettings())
    });
    SUTIL_ADMIN_NOTIFY_PREFS=data;
    renderSutilNotificationRouteMode();renderSutilNotificationRouteChoices();updateSutilNotificationSummary();
    setSutilNotifySettingsStatus('Configuración guardada.','ok');
  }catch(error){setSutilNotifySettingsStatus(error.message||'No fue posible guardar.','error');}
}

function scheduleSutilNotificationSettingsSave(){
  if(sutilNotifySettingsSaveTimer)clearTimeout(sutilNotifySettingsSaveTimer);
  sutilNotifySettingsSaveTimer=setTimeout(()=>{sutilNotifySettingsSaveTimer=null;saveSutilNotificationSettings();},420);
}

function openSutilNotificationSettings(){
  const panel=document.getElementById('sutilNotifyPanel');
  if(panel){panel.classList.remove('open');panel.setAttribute('aria-hidden','true');}
  const modal=document.getElementById('sutilNotifySettingsModal');if(!modal)return;
  modal.classList.add('open');modal.setAttribute('aria-hidden','false');
  setSutilNotifySettingsStatus('Cargando…');
  loadSutilNotificationSettings(true).then(()=>setSutilNotifySettingsStatus(''));
  try{reapplySutilLanguageOnce(0);}catch(_){}
}

function closeSutilNotificationSettings(){
  const modal=document.getElementById('sutilNotifySettingsModal');if(!modal)return;
  modal.classList.remove('open');modal.setAttribute('aria-hidden','true');
}

function sutilBase64UrlToUint8Array(base64String){
  const padding='='.repeat((4-base64String.length%4)%4);
  const base64=(base64String+padding).replace(/-/g,'+').replace(/_/g,'/');
  const raw=atob(base64);return Uint8Array.from([...raw].map(ch=>ch.charCodeAt(0)));
}

async function refreshSutilPushDeviceStatus(){
  const badge=document.getElementById('sutilNotifyDeviceBadge');
  const button=document.getElementById('sutilNotifyPushButton');
  const help=document.getElementById('sutilNotifyDeviceHelp');
  if(!badge||!button)return;
  badge.classList.remove('ok','warn');
  if(!('serviceWorker' in navigator)||!('PushManager' in window)||!('Notification' in window)){
    sutilNotifyDeviceActive=false;badge.textContent=sutilNotifyText('No disponible');badge.classList.add('warn');button.disabled=true;
    if(help)help.textContent=sutilNotifyText('Este navegador no admite Web Push.');return;
  }
  try{
    const status=await api(`/api/admin/notifications/device-status?device_id=${encodeURIComponent(offlineDeviceId())}`);
    sutilNotifyDeviceActive=Boolean(status?.active);
    if(sutilNotifyDeviceActive){badge.textContent=sutilNotifyText('Activo');badge.classList.add('ok');button.textContent=sutilNotifyText('Desactivar push');button.classList.remove('success');button.classList.add('secondary');}
    else{badge.textContent=status?.push_server_configured?sutilNotifyText('Disponible'):sutilNotifyText('Pendiente de servidor');badge.classList.toggle('warn',!status?.push_server_configured);button.textContent=sutilNotifyText('Activar push');button.classList.remove('secondary');button.classList.add('success');}
    button.disabled=false;
    if(help)help.textContent=status?.push_server_configured?sutilNotifyText('Permite recibir avisos aunque Sutil no esté abierto.'):sutilNotifyText('La interfaz está lista; falta configurar las claves push del servidor.');
  }catch(_){badge.textContent=sutilNotifyText('Sin conexión');badge.classList.add('warn');}
}

async function toggleSutilPushThisDevice(){
  const button=document.getElementById('sutilNotifyPushButton');if(button)button.disabled=true;
  try{
    if(sutilNotifyDeviceActive){
      const registration=await navigator.serviceWorker.ready;
      const subscription=await registration.pushManager.getSubscription();
      await api('/api/admin/notifications/push-subscriptions/deactivate',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({device_id:offlineDeviceId()})});
      try{if(subscription)await subscription.unsubscribe();}catch(_){}
      if(SUTIL_ADMIN_NOTIFY_PREFS){SUTIL_ADMIN_NOTIFY_PREFS.push_enabled=false;SUTIL_ADMIN_NOTIFY_PREFS.active_push_devices=Math.max(0,Number(SUTIL_ADMIN_NOTIFY_PREFS.active_push_devices||1)-1);}
      await saveSutilNotificationSettings();
      sutilNotifyDeviceActive=false;setSutilNotifySettingsStatus('Push desactivado en este dispositivo.','ok');
      await refreshSutilPushDeviceStatus();return;
    }

    if(!window.isSecureContext && location.hostname!=='localhost' && location.hostname!=='127.0.0.1')throw new Error(sutilNotifyText('El push necesita HTTPS.'));
    const keyInfo=await api('/api/admin/notifications/push-public-key');
    if(!keyInfo?.enabled||!keyInfo?.public_key)throw new Error(sutilNotifyText('La interfaz push está preparada, pero faltan las claves VAPID del servidor.'));
    const permission=await Notification.requestPermission();
    if(permission!=='granted')throw new Error(sutilNotifyText('Permiso de notificaciones no concedido.'));

    await prepareOfflineMode();
    const registration=await navigator.serviceWorker.ready;
    let subscription=await registration.pushManager.getSubscription();
    if(!subscription){
      subscription=await registration.pushManager.subscribe({userVisibleOnly:true,applicationServerKey:sutilBase64UrlToUint8Array(keyInfo.public_key)});
    }
    const json=subscription.toJSON();
    if(!json?.endpoint||!json?.keys?.p256dh||!json?.keys?.auth)throw new Error(sutilNotifyText('El navegador no devolvió una suscripción push válida.'));
    await api('/api/admin/notifications/push-subscriptions',{
      method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({device_id:offlineDeviceId(),endpoint:json.endpoint,p256dh:json.keys.p256dh,auth:json.keys.auth,user_agent:navigator.userAgent||''})
    });
    await loadSutilNotificationSettings(true);
    sutilNotifyDeviceActive=true;setSutilNotifySettingsStatus('Push activado en este dispositivo.','ok');
    await refreshSutilPushDeviceStatus();
  }catch(error){setSutilNotifySettingsStatus(error.message||'No fue posible activar push.','error');}
  finally{if(button)button.disabled=false;}
}

async function deactivateSutilPushOnLogout(){
  if(!token||!currentUser)return;
  try{
    await api('/api/admin/notifications/push-subscriptions/deactivate',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({device_id:offlineDeviceId()})});
  }catch(_){}
}


/* SUTIL FIX 12.15.4 · TECLADO MÓVIL SOLO BAJO TOQUE DIRECTO
   Regla general: las vistas, modales, búsquedas y desplazamientos no deben
   abrir el teclado por sí solos. Un campo editable recibe teclado únicamente
   cuando el usuario toca directamente ese campo (o navega con TAB en teclado
   físico). Al tocar fuera de un campo editable, se libera el foco actual. */
let sutilDirectEditableTarget=null;
let sutilDirectEditableAt=0;
let sutilKeyboardNavigationUntil=0;

function sutilKeyboardEditable(el){
  if(!(el instanceof Element))return null;
  const field=el.closest('input, textarea, [contenteditable="true"]');
  if(!field)return null;
  if(field.matches('input[type="hidden"],input[type="button"],input[type="submit"],input[type="reset"],input[type="checkbox"],input[type="radio"],input[type="range"],input[type="color"],input[type="file"]'))return null;
  if(field.disabled || field.readOnly)return null;
  const style=window.getComputedStyle(field);
  if(style.display==='none' || style.visibility==='hidden')return null;
  const rect=field.getBoundingClientRect();
  if(rect.width<2 || rect.height<2)return null;
  return field;
}

function sutilRememberDirectEditable(event){
  const field=sutilKeyboardEditable(event.target);
  if(field){
    sutilDirectEditableTarget=field;
    sutilDirectEditableAt=performance.now();
    return;
  }
  sutilDirectEditableTarget=null;
  sutilDirectEditableAt=0;
  const active=sutilKeyboardEditable(document.activeElement);
  if(active){
    try{active.blur();}catch(_){ }
  }
}

document.addEventListener('pointerdown',sutilRememberDirectEditable,true);
document.addEventListener('touchstart',sutilRememberDirectEditable,{capture:true,passive:true});

document.addEventListener('keydown',event=>{
  if(event.key==='Tab')sutilKeyboardNavigationUntil=performance.now()+1200;
},true);

document.addEventListener('focusin',event=>{
  const field=sutilKeyboardEditable(event.target);
  if(!field)return;
  const now=performance.now();
  const directTouch=(field===sutilDirectEditableTarget && (now-sutilDirectEditableAt)<1200);
  const keyboardNavigation=now<sutilKeyboardNavigationUntil;
  if(directTouch || keyboardNavigation)return;
  // El foco fue provocado por JavaScript al abrir una vista/modal: lo retiramos
  // antes de que Android muestre el teclado.
  try{field.blur();}catch(_){ }
},true);

document.addEventListener('keydown',event=>{if(event.key==='Escape'&&document.getElementById('sutilNotifySettingsModal')?.classList.contains('open'))closeSutilNotificationSettings();});
</script>


<script id="sutil-fix-12-15-146-route-picker-script">
(function(){
  const ROUTE_SELECT_IDS=new Set([
    "chatsCenterRoute","clientsRouteFilter","clientRoute","loansConsultRoute",
    "collectionsRoute","receivedPaymentsRoute","receiptRouteFilter","staffLocationRoute",
    "cashRoute","baseMovementRoute","transferSourceRoute","transferDestinationRoute",
    "cashReportRoute","expenseRoute","locationsRouteFilter","reportRoute",
    "historicalPackageDefaultRoute","legacyExpenseRoute","historicalImportDefaultRoute",
    "editClientRoute","registeredRouteFilter"
  ]);

  let activeSelect=null;
  let activeTrigger=null;
  let pickerRoot=null;
  let pickerSearch=null;
  let pickerList=null;
  let pickerTitle=null;
  let pickerCount=null;

  function language(){
    const raw=String(
      (typeof SUTIL_ACTIVE_LANGUAGE!=="undefined"&&SUTIL_ACTIVE_LANGUAGE)||
      (typeof accessLanguageCode!=="undefined"&&accessLanguageCode)||
      document.documentElement.lang||"es"
    ).toLowerCase().slice(0,2);
    return ["es","pt","en"].includes(raw)?raw:"es";
  }

  function tr(){
    const t={
      es:{title:"Seleccionar ruta",search:"Buscar ruta...",count:"rutas disponibles",empty:"No hay rutas que coincidan con la búsqueda."},
      pt:{title:"Selecionar rota",search:"Buscar rota...",count:"rotas disponíveis",empty:"Nenhuma rota corresponde à busca."},
      en:{title:"Select route",search:"Search route...",count:"routes available",empty:"No routes match your search."}
    };
    return t[language()]||t.es;
  }

  function ensurePicker(){
    if(pickerRoot)return;
    pickerRoot=document.createElement("div");
    pickerRoot.id="sutilRoutePickerBackdrop";
    pickerRoot.className="sutil-route-picker-backdrop";
    pickerRoot.setAttribute("aria-hidden","true");
    pickerRoot.innerHTML=`
      <div class="sutil-route-picker-sheet" role="dialog" aria-modal="true" aria-labelledby="sutilRoutePickerTitle">
        <div class="sutil-route-picker-head">
          <div class="sutil-route-picker-title-row">
            <div class="sutil-route-picker-title-box">
              <div class="sutil-route-picker-title-icon">🗺️</div>
              <div>
                <div id="sutilRoutePickerTitle" class="sutil-route-picker-title"></div>
                <div id="sutilRoutePickerCount" class="sutil-route-picker-count"></div>
              </div>
            </div>
            <button id="sutilRoutePickerClose" class="sutil-route-picker-close" type="button" aria-label="Cerrar">×</button>
          </div>
          <div class="sutil-route-picker-search-wrap">
            <span class="sutil-route-picker-search-icon">🔎</span>
            <input id="sutilRoutePickerSearch" class="sutil-route-picker-search" type="search" autocomplete="off" spellcheck="false">
          </div>
        </div>
        <div id="sutilRoutePickerList" class="sutil-route-picker-list"></div>
      </div>`;
    document.body.appendChild(pickerRoot);
    pickerSearch=pickerRoot.querySelector("#sutilRoutePickerSearch");
    pickerList=pickerRoot.querySelector("#sutilRoutePickerList");
    pickerTitle=pickerRoot.querySelector("#sutilRoutePickerTitle");
    pickerCount=pickerRoot.querySelector("#sutilRoutePickerCount");
    pickerRoot.querySelector("#sutilRoutePickerClose").addEventListener("click",closePicker);
    pickerRoot.addEventListener("click",e=>{if(e.target===pickerRoot)closePicker();});
    pickerSearch.addEventListener("input",renderOptions);
  }

  function selectableOptions(select){
    return Array.from(select.options||[]).filter(option=>!option.hidden);
  }

  function routeOptionCount(select){
    return selectableOptions(select).filter(option=>
      String(option.value||"").trim()!=="" && option.dataset.sutilRouteAll!=="1"
    ).length;
  }

  function optionDisplayText(option){
    return String(option?.textContent||option?.label||"").trim() || "—";
  }

  function currentText(select){
    const option=select?.selectedOptions?.[0] || select?.options?.[select.selectedIndex];
    return optionDisplayText(option);
  }

  function syncTrigger(select){
    const trigger=select?._sutilRouteTrigger;
    if(!trigger)return;
    const textNode=trigger.querySelector(".sutil-route-picker-trigger-text");
    if(textNode)textNode.textContent=currentText(select);
    trigger.disabled=!!select.disabled;
    trigger.setAttribute("aria-disabled",select.disabled?"true":"false");
    trigger.title=currentText(select);
  }

  function enhanceSelect(select){
    if(!select || select._sutilRouteEnhanced || select.multiple)return;
    select._sutilRouteEnhanced=true;
    select.classList.add("sutil-route-native-select");
    const trigger=document.createElement("button");
    trigger.type="button";
    trigger.className="sutil-route-picker-trigger";
    trigger.setAttribute("aria-haspopup","dialog");
    trigger.setAttribute("aria-expanded","false");
    trigger.innerHTML=`
      <span class="sutil-route-picker-trigger-main">
        <span class="sutil-route-picker-trigger-icon">📍</span>
        <span class="sutil-route-picker-trigger-text"></span>
      </span>
      <span class="sutil-route-picker-trigger-arrow">⌄</span>`;
    select.insertAdjacentElement("afterend",trigger);
    select._sutilRouteTrigger=trigger;
    syncTrigger(select);
    trigger.addEventListener("click",()=>openPicker(select,trigger));
    select.addEventListener("change",()=>syncTrigger(select));
    select.addEventListener("input",()=>syncTrigger(select));
    const observer=new MutationObserver(()=>{
      syncTrigger(select);
      if(activeSelect===select)renderOptions();
    });
    observer.observe(select,{childList:true,subtree:true,attributes:true,attributeFilter:["disabled","selected","hidden","label"]});
    select._sutilRouteObserver=observer;
  }

  function scan(){
    ROUTE_SELECT_IDS.forEach(id=>enhanceSelect(document.getElementById(id)));
  }

  function openPicker(select,trigger){
    if(!select || select.disabled)return;
    ensurePicker();
    activeSelect=select;
    activeTrigger=trigger;
    const t=tr();
    pickerTitle.textContent=t.title;
    pickerSearch.placeholder=t.search;
    pickerSearch.value="";
    renderOptions();
    pickerRoot.classList.add("open");
    pickerRoot.setAttribute("aria-hidden","false");
    trigger.setAttribute("aria-expanded","true");
    document.body.classList.add("sutil-route-picker-open");
  }

  function closePicker(){
    if(!pickerRoot)return;
    pickerRoot.classList.remove("open");
    pickerRoot.setAttribute("aria-hidden","true");
    if(activeTrigger)activeTrigger.setAttribute("aria-expanded","false");
    document.body.classList.remove("sutil-route-picker-open");
    const returnFocus=activeTrigger;
    activeSelect=null;
    activeTrigger=null;
    if(returnFocus){try{returnFocus.focus({preventScroll:true});}catch(_){}}
  }

  function renderOptions(){
    if(!activeSelect || !pickerList)return;
    const t=tr();
    const query=String(pickerSearch?.value||"").trim().toLocaleLowerCase();
    const options=selectableOptions(activeSelect);
    const available=options.filter(option=>!option.disabled);
    pickerCount.textContent=`${routeOptionCount(activeSelect)} ${t.count}`;
    const filtered=options.filter(option=>{
      if(!query)return true;
      return optionDisplayText(option).toLocaleLowerCase().includes(query);
    });
    pickerList.innerHTML="";
    if(!filtered.length){
      pickerList.innerHTML=`<div class="sutil-route-picker-empty">${t.empty}</div>`;
      return;
    }
    filtered.forEach(option=>{
      const button=document.createElement("button");
      button.type="button";
      button.className="sutil-route-picker-option"+(option.selected?" selected":"");
      button.disabled=!!option.disabled;
      button.dataset.value=option.value;
      button.innerHTML=`
        <span class="sutil-route-picker-option-dot">${option.value?"📍":"◉"}</span>
        <span class="sutil-route-picker-option-label"></span>
        <span class="sutil-route-picker-option-check">✓</span>`;
      button.querySelector(".sutil-route-picker-option-label").textContent=optionDisplayText(option);
      button.addEventListener("click",()=>{
        if(option.disabled)return;
        const before=activeSelect.value;
        activeSelect.value=option.value;
        syncTrigger(activeSelect);
        if(before!==activeSelect.value){
          activeSelect.dispatchEvent(new Event("input",{bubbles:true}));
          activeSelect.dispatchEvent(new Event("change",{bubbles:true}));
        }else{
          activeSelect.dispatchEvent(new Event("change",{bubbles:true}));
        }
        closePicker();
      });
      pickerList.appendChild(button);
    });
  }

  document.addEventListener("keydown",e=>{
    if(e.key==="Escape" && pickerRoot?.classList.contains("open")){
      e.preventDefault();
      closePicker();
    }
  },true);

  if(document.readyState==="loading")document.addEventListener("DOMContentLoaded",scan,{once:true});
  else scan();

  const rootObserver=new MutationObserver(scan);
  rootObserver.observe(document.documentElement,{childList:true,subtree:true});

  // Los listados de rutas se recargan por API. Este sincronizador liviano solo
  // mantiene el texto visible alineado con el <select> original cuando código
  // existente cambia .value de forma programática sin disparar change.
  setInterval(()=>{
    ROUTE_SELECT_IDS.forEach(id=>{
      const select=document.getElementById(id);
      if(select?._sutilRouteEnhanced)syncTrigger(select);
    });
  },900);
})();
</script>


<script id="sutil-fix-12-15-168-modern-select-js">
(function(){
  const ROUTE_IDS=new Set([
    "chatsCenterRoute","clientsRouteFilter","clientRoute","loansConsultRoute",
    "collectionsRoute","receivedPaymentsRoute","receiptRouteFilter","staffLocationRoute",
    "cashRoute","baseMovementRoute","transferSourceRoute","transferDestinationRoute",
    "cashReportRoute","expenseRoute","locationsRouteFilter","reportRoute",
    "historicalPackageDefaultRoute","legacyExpenseRoute","historicalImportDefaultRoute",
    "editClientRoute","registeredRouteFilter"
  ]);
  const SPECIAL_CLASSES=["loan-client-hidden-select","received-native-select","locations-native-select","staff-location-native-select","sutil-new-client-native-select"];
  let activeSelect=null,activeButton=null,uid=0;
  function lang(){
    const raw=String((typeof SUTIL_ACTIVE_LANGUAGE!=="undefined"&&SUTIL_ACTIVE_LANGUAGE)||document.documentElement.lang||"es").toLowerCase().slice(0,2);
    return ["es","pt","en"].includes(raw)?raw:"es";
  }
  function tx(){return {es:{choose:"Seleccionar opción",search:"Buscar opción...",available:"opciones disponibles",empty:"No hay opciones que coincidan."},pt:{choose:"Selecionar opção",search:"Buscar opção...",available:"opções disponíveis",empty:"Nenhuma opção corresponde à busca."},en:{choose:"Select option",search:"Search option...",available:"options available",empty:"No options match your search."}}[lang()];}
  function ensureId(select){if(select.id)return select.id;select.id='sutilModernSelect_'+(++uid);return select.id;}
  function hasSpecialClass(select){return SPECIAL_CLASSES.some(c=>select.classList.contains(c));}
  function existingCustom(select){
    const id=select.id;if(!id)return false;
    if(ROUTE_IDS.has(id))return true;
    if(document.querySelector('.sutil-mobile-select-btn[data-select-id="'+CSS.escape(id)+'"]'))return true;
    if(select.closest('.locations-custom-select,.staff-location-custom-select,.sutil-new-client-custom-select'))return true;
    return false;
  }
  function shouldSkip(select){
    if(!(select instanceof HTMLSelectElement))return true;
    if(select.multiple||select.hidden)return true;
    if(select.getAttribute('aria-hidden')==='true'||select.getAttribute('tabindex')==='-1')return true;
    if(hasSpecialClass(select))return true;
    ensureId(select);
    return existingCustom(select);
  }
  function labelText(select){
    if(select.dataset.selectTitle)return select.dataset.selectTitle;
    const explicit=document.querySelector('label[for="'+CSS.escape(select.id)+'"]');
    if(explicit&&explicit.textContent.trim())return explicit.textContent.trim().slice(0,70);
    const label=select.closest('label');
    if(label){
      const bits=[];
      label.childNodes.forEach(n=>{
        if(n===select)return;
        if(n.nodeType===Node.TEXT_NODE){const s=n.textContent.trim();if(s)bits.push(s);}
        else if(n.nodeType===Node.ELEMENT_NODE&&!n.matches('select,button,input')){const s=n.textContent?.trim();if(s)bits.push(s);}
      });
      const clean=bits.join(' ').replace(/\s+/g,' ').trim();if(clean)return clean.slice(0,70);
    }
    return select.getAttribute('aria-label')||tx().choose;
  }
  function buttonText(select){const opt=select.options[select.selectedIndex];return opt?.textContent?.trim()||select.value||tx().choose;}
  function syncButton(select){const btn=select?._sutilModernButton;if(!btn)return;const lab=btn.querySelector('.sutil-modern-select-button-label');if(lab)lab.textContent=buttonText(select);btn.disabled=!!select.disabled;}
  function enhance(select){
    if(shouldSkip(select)||select._sutilModernEnhanced)return;
    select._sutilModernEnhanced=true;select.classList.add('sutil-modern-select-native');
    const btn=document.createElement('button');btn.type='button';btn.className='sutil-modern-select-button';btn.dataset.selectId=select.id;
    btn.innerHTML='<span class="sutil-modern-select-button-label"></span><span class="sutil-modern-select-button-chevron">⌄</span>';
    btn.addEventListener('click',()=>openSutilModernSelect(select,btn));select.insertAdjacentElement('afterend',btn);select._sutilModernButton=btn;syncButton(select);
  }
  function scan(root=document){if(root instanceof HTMLSelectElement)enhance(root);root.querySelectorAll?.('select').forEach(enhance);}
  function iconFor(select,title){const s=(title+' '+select.id).toLowerCase();if(s.includes('estado')||s.includes('status'))return '◉';if(s.includes('funcionario')||s.includes('responsable')||s.includes('staff')||s.includes('perfil'))return '👤';if(s.includes('pago')||s.includes('método')||s.includes('metodo')||s.includes('method'))return '💳';if(s.includes('país')||s.includes('pais')||s.includes('country'))return '🌎';if(s.includes('idioma')||s.includes('language'))return '🌐';if(s.includes('frecuencia')||s.includes('frequency'))return '🗓️';if(s.includes('categor'))return '🏷️';return '☰';}
  function optionIcon(opt,index){const txt=opt.textContent||'';const emoji=txt.match(/\p{Extended_Pictographic}/u)?.[0];if(emoji)return emoji;return opt.value?String(index+1):'◉';}
  function render(query=''){
    const list=document.getElementById('sutilModernSelectOptions');if(!list||!activeSelect)return;
    const q=String(query||'').trim().toLocaleLowerCase();const opts=Array.from(activeSelect.options);const filtered=opts.filter(o=>!q||String(o.textContent||'').toLocaleLowerCase().includes(q));list.innerHTML='';
    if(!filtered.length){const empty=document.createElement('div');empty.className='sutil-modern-select-empty';empty.textContent=tx().empty;list.appendChild(empty);return;}
    filtered.forEach((opt,index)=>{
      const b=document.createElement('button');b.type='button';b.className='sutil-modern-select-option'+(opt.selected?' selected':'');b.disabled=!!opt.disabled;
      const ico=document.createElement('span');ico.className='sutil-modern-select-option-icon';ico.textContent=optionIcon(opt,index);
      const lab=document.createElement('span');lab.className='sutil-modern-select-option-label';lab.textContent=opt.textContent;
      const chk=document.createElement('span');chk.className='sutil-modern-select-option-check';chk.textContent='✓';b.append(ico,lab,chk);
      b.addEventListener('click',()=>{if(opt.disabled)return;activeSelect.value=opt.value;syncButton(activeSelect);activeSelect.dispatchEvent(new Event('input',{bubbles:true}));activeSelect.dispatchEvent(new Event('change',{bubbles:true}));closeSutilModernSelect();});
      list.appendChild(b);
    });
  }
  window.openSutilModernSelect=function(select,button){
    if(!select||select.disabled)return;activeSelect=select;activeButton=button;
    const back=document.getElementById('sutilModernSelectBackdrop');if(!back)return;
    const title=labelText(select),titleEl=document.getElementById('sutilModernSelectTitle'),countEl=document.getElementById('sutilModernSelectCount'),iconEl=document.getElementById('sutilModernSelectIcon'),searchWrap=document.getElementById('sutilModernSelectSearchWrap'),search=document.getElementById('sutilModernSelectSearch');
    if(titleEl)titleEl.textContent=title;if(iconEl)iconEl.textContent=iconFor(select,title);if(countEl)countEl.textContent=select.options.length+' '+tx().available;
    const searchable=select.options.length>=8;if(searchWrap)searchWrap.style.display=searchable?'block':'none';if(search){search.value='';search.placeholder=tx().search;}render('');back.classList.add('open');back.setAttribute('aria-hidden','false');document.body.style.overflow='hidden';if(searchable)setTimeout(()=>{try{search.focus({preventScroll:true});}catch(_){}},80);
  };
  window.closeSutilModernSelect=function(){const back=document.getElementById('sutilModernSelectBackdrop');if(back){back.classList.remove('open');back.setAttribute('aria-hidden','true');}document.body.style.overflow='';const btn=activeButton;activeSelect=null;activeButton=null;try{btn?.focus({preventScroll:true});}catch(_){}};
  function install(){
    scan(document);const search=document.getElementById('sutilModernSelectSearch');search?.addEventListener('input',()=>render(search.value));
    const obs=new MutationObserver(records=>{for(const rec of records){if(rec.type==='childList')rec.addedNodes.forEach(n=>{if(n.nodeType===1)scan(n)});if(rec.type==='attributes'&&rec.target instanceof HTMLSelectElement)syncButton(rec.target);}});
    obs.observe(document.body,{childList:true,subtree:true,attributes:true,attributeFilter:['disabled']});
    document.addEventListener('change',e=>{if(e.target instanceof HTMLSelectElement)syncButton(e.target)},true);
    document.addEventListener('keydown',e=>{if(e.key==='Escape'&&document.getElementById('sutilModernSelectBackdrop')?.classList.contains('open'))closeSutilModernSelect()},true);
    setInterval(()=>document.querySelectorAll('select.sutil-modern-select-native').forEach(syncButton),900);
  }
  if(document.readyState==='loading')document.addEventListener('DOMContentLoaded',install,{once:true});else install();
})();
</script>

</body>
</html>

<style>
/* SUTIL FIX 12.15.112 · navegación inferior móvil con espacio equilibrado.
   Atrás e Inicio ocupan los dos primeros espacios y se reserva el tercero para el botón flotante AI. */
@media(max-width:760px){
  .sutil-mobile-bottom-nav{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.62fr) !important;
  }
  .sutil-mobile-bottom-nav button:nth-child(1){grid-column:1 !important;}
  .sutil-mobile-bottom-nav button:nth-child(2){grid-column:2 !important;}
}
</style>


<style>
/* ============================================================
   SUTIL FIX 12.15.176 · Personal > Editar > Permisos
   Corrige contraste en ambos temas sin alterar permisos ni lógica.
   ============================================================ */
body[data-sutil-theme="dark"] #editStaffModal .staff-edit-card{
  background:#202838 !important;
  color:#f4f7ff !important;
  border:1px solid #4d5b75 !important;
}
body[data-sutil-theme="dark"] #editStaffModal .staff-edit-head h3,
body[data-sutil-theme="dark"] #editStaffModal .staff-edit-section h4{
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #editStaffModal .staff-edit-section{
  background:#293345 !important;
  border-color:#4d5b75 !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #editStaffModal .staff-choice{
  background:#263246 !important;
  border-color:#53627b !important;
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #editStaffModal .staff-choice span,
body[data-sutil-theme="dark"] #editStaffModal .staff-choice label{
  color:#f4f7ff !important;
}
body[data-sutil-theme="dark"] #editStaffModal .staff-choice small,
body[data-sutil-theme="dark"] #editStaffModal .staff-choice .muted,
body[data-sutil-theme="dark"] #editStaffModal .muted{
  color:#b8c4d6 !important;
}
body[data-sutil-theme="dark"] #editStaffModal input,
body[data-sutil-theme="dark"] #editStaffModal select,
body[data-sutil-theme="dark"] #editStaffModal textarea{
  background:#253044 !important;
  color:#f4f7ff !important;
  border-color:#596a88 !important;
}
body[data-sutil-theme="dark"] #editStaffModal input[type="checkbox"],
body[data-sutil-theme="dark"] #editStaffModal input[type="radio"]{
  background:transparent !important;
  accent-color:#6571e8;
}
body[data-sutil-theme="dark"] #editStaffModal #editStaffMessage{
  background:#263246 !important;
  border-color:#4d5b75 !important;
  color:#dce6f7 !important;
}

body[data-sutil-theme="light"] #editStaffModal .staff-edit-card{
  background:#ffffff !important;
  color:#1f2937 !important;
  border:1px solid #d7e0ea !important;
}
body[data-sutil-theme="light"] #editStaffModal .staff-edit-head h3,
body[data-sutil-theme="light"] #editStaffModal .staff-edit-section h4{
  color:#203a52 !important;
}
body[data-sutil-theme="light"] #editStaffModal .staff-edit-section{
  background:#f7f9fc !important;
  border-color:#d7e0ea !important;
  color:#1f2937 !important;
}
body[data-sutil-theme="light"] #editStaffModal .staff-choice{
  background:#ffffff !important;
  border-color:#d5dee8 !important;
  color:#26384a !important;
}
body[data-sutil-theme="light"] #editStaffModal .staff-choice span,
body[data-sutil-theme="light"] #editStaffModal .staff-choice label{
  color:#26384a !important;
}
body[data-sutil-theme="light"] #editStaffModal .staff-choice small,
body[data-sutil-theme="light"] #editStaffModal .staff-choice .muted,
body[data-sutil-theme="light"] #editStaffModal .muted{
  color:#657385 !important;
}
body[data-sutil-theme="light"] #editStaffModal input,
body[data-sutil-theme="light"] #editStaffModal select,
body[data-sutil-theme="light"] #editStaffModal textarea{
  background:#ffffff !important;
  color:#1f2937 !important;
  border-color:#c9d4df !important;
}
body[data-sutil-theme="light"] #editStaffModal input[type="checkbox"],
body[data-sutil-theme="light"] #editStaffModal input[type="radio"]{
  accent-color:#5968d8;
}
body[data-sutil-theme="light"] #editStaffModal #editStaffMessage{
  background:#f7f9fc !important;
  border-color:#d7e0ea !important;
  color:#425466 !important;
}

@media(max-width:650px){
  #editStaffModal .staff-choice-grid{
    grid-template-columns:1fr !important;
  }
  #editStaffModal .staff-choice{
    min-height:58px;
    align-items:center;
    padding:12px 14px !important;
  }
  #editStaffModal .staff-choice input{
    flex:0 0 auto;
    width:22px !important;
    height:22px !important;
    margin:0 !important;
  }
  #editStaffModal .staff-choice span{
    min-width:0;
    line-height:1.28;
  }
}
</style>