<!doctype html>
<html lang="es">

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
  <meta name="mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <title>WorkPlan · Planificación de Mantenimiento</title>

  <script defer src="/__/firebase/9.8.1/firebase-app-compat.js"></script>
  <!-- include only the Firebase features as you need -->
  <script defer src="/__/firebase/9.8.1/firebase-auth-compat.js"></script>
  <script defer src="/__/firebase/9.8.1/firebase-database-compat.js"></script>
  <script defer src="/__/firebase/9.8.1/firebase-firestore-compat.js"></script>
  <script defer src="/__/firebase/9.8.1/firebase-functions-compat.js"></script>
  <script defer src="/__/firebase/9.8.1/firebase-messaging-compat.js"></script>
  <script defer src="/__/firebase/9.8.1/firebase-storage-compat.js"></script>
  <script defer src="/__/firebase/9.8.1/firebase-analytics-compat.js"></script>
  <script defer src="/__/firebase/9.8.1/firebase-remote-config-compat.js"></script>
  <script defer src="/__/firebase/9.8.1/firebase-performance-compat.js"></script>

  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link
    href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Ubuntu:wght@300;400;500;700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="material-theme.css" />
  <script>
    (function () {
      const savedTheme = localStorage.getItem('wp_theme') || 'dark';
      document.documentElement.setAttribute('data-theme', savedTheme);
      // Pre-flight check for material font
      if (savedTheme.startsWith('material')) {
        const link = document.createElement('link');
        link.rel = 'stylesheet';
        link.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap';
        document.head.appendChild(link);
      }
    })();
  </script>

  <script defer src="/__/firebase/init.js"></script>


  <!-- SheetJS for Excel export -->
  <script src="https://cdn.sheetjs.com/xlsx-0.20.0/package/dist/xlsx.full.min.js"></script>

  <!-- Chart.js for planning resources chart -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
  <script
    src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.2.0/dist/chartjs-plugin-datalabels.min.js"></script>

  <!-- jsPDF for PDF generation -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.23/jspdf.plugin.autotable.min.js"></script>

  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
    integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
    integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>

  <link rel="stylesheet" href="style.css" />
  <link rel="stylesheet" href="sidebar.css" />
  <link rel="stylesheet" href="p6_style.css" />
  <script defer src="script.js"></script>
  <script defer src="proyecto_planner.js"></script>
  <script defer src="p6_planner.js"></script>
  <script defer src="sidebar.js"></script>
  <script defer src="backlog.js"></script>
  <script defer src="planning_local.js"></script>
  <!-- Lucide Icons -->
  <script src='https://unpkg.com/lucide@latest/dist/umd/lucide.min.js'></script>
  <!-- Font Awesome 6 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
  
  <style>
    /* Colored Icons System */
    .icon-psm { color: #3b82f6; } /* Blue */
    .icon-kpi { color: #10b981; } /* Green */
    .icon-gantt { color: #8b5cf6; } /* Violet */
    .icon-planning { color: #f59e0b; } /* Orange */
    .icon-map { color: #06b6d4; } /* Teal */
    .icon-report { color: #ec4899; } /* Pink */
    .icon-order { color: #6366f1; } /* Indigo */
    .icon-project { color: #f97316; } /* Amber/Orange */
    .icon-backlog { color: #f43f5e; } /* Rose */
    .icon-admin { color: #94a3b8; } /* Slate */
    .icon-excel { color: #10b981; } /* Emerald */
    .icon-success { color: #22c55e; } /* Green */
    
    .nav-icon i, .nav-item-icon i {
      font-size: 1.1rem;
      transition: transform 0.2s;
    }
    .nav-item:hover .nav-item-icon i {
      transform: scale(1.2);
    }
  </style>

</head>

<body>
  <!-- SECCION BIENVENIDA -->
  <section id="section-welcome" class="welcome-page">
    <div class="welcome-overlay"></div>
    <div class="welcome-card">
      <div class="welcome-logo">WP</div>
      <h1 class="welcome-title">Bienvenido a <span>WorkPlan</span></h1>
      <p class="welcome-desc">
        Plataforma técnica avanzada para la planificación, seguimiento y control de operaciones de mantenimiento.
        Optimice la gestión de recursos y visualice el progreso en tiempo real.
      </p>
      <div class="welcome-actions" style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
        <button id="btnStartDemo" class="btn-start"
          style="background: var(--panel-inner); border: 1px solid var(--accent);">Demo</button>
        <button id="btnStartLogin" class="btn-start" onclick="showLoginForm()">Ingresar</button>
      </div>
    </div>
  </section>

  <!-- SECCION INFO LANDING -->
  <section id="section-landing-info" class="welcome-page landing-page" style="display: none; padding-bottom: 50px;">
    <div class="welcome-overlay"></div>
    <div class="welcome-card"
      style="max-width: 96%; padding: 50px; text-align: left; overflow-y: auto; max-height: 90vh;">
      <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px;">
        <div class="welcome-logo" style="margin: 0; width: 60px; height: 60px; font-size: 24px;">WP</div>
        <button id="btnBackFromLanding" class="btn secondary" style="padding: 10px 20px;">← Volver</button>
      </div>

      <h1 class="welcome-title" style="text-align: left; font-size: 28px; line-height: 1.1;">Módulos disponibles en
        WorkPlan</h1>

      <div class="info-grid"
        style="display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; margin-top: 40px;">
        <div class="info-item" data-img="Cap-KPI.png" style="cursor: pointer;">
          <div style="font-size: 40px; margin-bottom: 15px; color: var(--accent);">
            <i class="fa-solid fa-chart-pie icon-kpi"></i>
          </div>
          <h3 style="color: var(--accent); margin-bottom: 10px;">Control de KPIs</h3>
          <p style="color: var(--muted); font-size: 14px; line-height: 1.5;">Visualice indicadores críticos (HH,
            Avances, Emergentes) con fórmulas precisas y filtros automáticos por planta y área.</p>
          <div style="margin-top: 10px; font-size: 10px; color: var(--blue); opacity: 0.7; display: flex; align-items: center; gap: 4px;">Ver captura <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 10px;"></i></div>
        </div>
        <div class="info-item" data-img="Cap-Plan.png" style="cursor: pointer;">
          <div style="font-size: 40px; margin-bottom: 15px; color: var(--accent);">
            <i class="fa-solid fa-calendar-check icon-planning"></i>
          </div>
          <h3 style="color: var(--accent); margin-bottom: 10px;">Planificación de Mantención</h3>
          <p style="color: var(--muted); font-size: 14px; line-height: 1.5;">Planifica las tareas en un entorno
            dinámico, con asistente para nivelacion de recursos y alertas por sobreasignación</p>
          <div style="margin-top: 10px; font-size: 10px; color: var(--blue); opacity: 0.7;">Ver captura <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 10px;"></i></div>
        </div>
        <div class="info-item" data-img="Cap-Gantt.png" style="cursor: pointer;">
          <div style="font-size: 40px; margin-bottom: 15px; color: var(--accent);">
            <i class="fa-solid fa-chart-gantt icon-gantt"></i>
          </div>
          <h3 style="color: var(--accent); margin-bottom: 10px;">Control via Gantt Dinámica</h3>
          <p style="color: var(--muted); font-size: 14px; line-height: 1.5;">Gestión jerárquica de WBS y actividades
            con
            actualización en tiempo real y detección de desviaciones críticas.</p>
          <div style="margin-top: 10px; font-size: 10px; color: var(--blue); opacity: 0.7;">Ver captura <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 10px;"></i></div>
        </div>
        <div class="info-item" data-img="Cap-Mapa.png" style="cursor: pointer;">
          <div style="font-size: 40px; margin-bottom: 15px;"></div>
          <h3 style="color: var(--accent); margin-bottom: 10px;">Geo-Referencias</h3>
          <p style="color: var(--muted); font-size: 14px; line-height: 1.5;">Mapa interactivo de puntos de trabajo
            vinculados a órdenes reales, optimizando el despliegue logístico en terreno.</p>
          <div style="margin-top: 10px; font-size: 10px; color: var(--blue); opacity: 0.7;">Ver captura <i class="fa-solid fa-arrow-up-right-from-square" style="font-size: 10px;"></i></div>
        </div>
        <div class="info-item" data-img="Cap-Proy.png,Cap-Proy-2.png" style="cursor: pointer;">
          <div style="font-size: 40px; margin-bottom: 15px;">ðŸ“</div>
          <h3 style="color: var(--accent); margin-bottom: 10px;">Proyectos</h3>
          <p style="color: var(--muted); font-size: 14px; line-height: 1.5;">Visualiza, actualiza y comparte tus
            proyectos desde primavera P6 de manera rápida y amigable.</p>
          <div style="margin-top: 10px; font-size: 10px; color: var(--blue); opacity: 0.7;">Ver capturas (2) </div>
        </div>
      </div>

      <div
        style="margin-top: 50px; background: rgba(0,0,0,0.2); padding: 30px; border-radius: 20px; border: 1px solid var(--border);">
        <h3 style="margin-top: 0; color: #fff;">¿Listo para optimizar su planificación?</h3>
        <p style="color: var(--muted); margin-bottom: 25px;">WorkPlan integra toda la cadena de valor del mantenimiento
          en una sola plataforma técnica de alta precisión.</p>
        <div style="display: flex; gap: 15px;">
          <button class="btn-start" style="padding: 12px 30px; font-size: 14px;" onclick="showLoginForm()">Ingresar al
            Sistema</button>
          <button class="btn secondary" style="padding: 12px 30px;"
            onclick="window.location.href='mailto:contacto@workplan.cl'">Solicitar Información</button>
        </div>
      </div>
    </div>
  </section>

  <!-- SECCION SELECCION DE PROYECTO -->
  <section id="section-project-select" class="welcome-page" style="display: none; z-index: 2100;">
    <div class="welcome-overlay"></div>
    <div class="welcome-card" style="max-width: 500px; padding: 40px;">
      <div class="welcome-logo" style="width: 60px; height: 60px; font-size: 24px;">WP</div>
      <h2 class="welcome-title" style="font-size: 28px; margin-bottom: 10px;">Seleccióna un <span>Proyecto</span></h2>
      <p class="welcome-desc" style="font-size: 14px; margin-bottom: 30px;">
        Elige el entorno de trabajo al que deseas acceder con tu cuenta.
      </p>

      <div class="field wide" style="margin-bottom: 25px; text-align: left;">
        <span
          style="color: var(--muted); margin-bottom: 8px; display: block; font-size: 12px; text-transform: uppercase; font-weight: 700;">Proyecto
          Disponible</span>
        <select id="projectSelect" style="width: 100%; padding: 12px; font-size: 16px;">
          <option value="Proyecto1/Enap">Industria (Enap)</option>
          <option value="Proyecto1/DEMO">Entorno DEMO</option>
        </select>
      </div>

      <button id="btnEnterProject" class="btn-start" style="width: 100%; padding: 14px; font-size: 16px; display: flex; align-items: center; justify-content: center; gap: 8px;">
        Continuar 
      </button>

      <div style="margin-top: 20px;">
        <button id="btnBackToWelcome" class="btn-link" style="color: var(--muted); font-weight: 400;">Cancelar y
          Volver</button>
      </div>
    </div>
  </section>

  <div id="app-content" class="app-hidden">
    <!-- Sidebar Navigation -->
    <aside class="sidebar" id="sidebar">
      <div class="sidebar-header">
        <div class="sidebar-brand">
          <div class="logo">WP</div>
          <div>
            <div class="title">WorkPlan</div>
            <div class="subtitle">Planificación</div>
          </div>
        </div>
        <button class="sidebar-toggle" id="sidebarToggle">
          <i class="fa-solid fa-bars"></i>
        </button>
      </div>

      <nav class="sidebar-nav">
        <!-- Programa Semanal Mantenimiento -->
        <div class="nav-section">
          <button class="nav-section-header" data-section="psm">
            <span class="nav-icon"><i class="fa-solid fa-calendar-week icon-psm"></i></span>
            <span class="nav-text">Programa Semanal</span>
            <span class="nav-arrow"><i class="fa-solid fa-chevron-right"></i></span>
          </button>
          <div class="nav-section-content" data-content="psm">
            <a href="#" class="nav-item" data-target="section-kpi">
              <span class="nav-item-icon"><i class="fa-solid fa-chart-line icon-kpi"></i></span>
              <div class="nav-item-text">
                <div class="nav-item-title">Indicadores KPI</div>
                <div class="nav-item-desc">Panel estratégico que mide el desempeño del PSM</div>
              </div>
            </a>
            <a href="#" class="nav-item" data-target="section-gantt">
              <span class="nav-item-icon"><i class="fa-solid fa-chart-gantt icon-gantt"></i></span>
              <div class="nav-item-text">
                <div class="nav-item-title">Carta Gantt PSM</div>
                <div class="nav-item-desc">Vista temporal para monitorear ejecución y desviaciones</div>
              </div>
            </a>
            <a href="#" class="nav-item" data-target="section-planning">
              <span class="nav-item-icon"><i class="fa-solid fa-calendar-check icon-planning"></i></span>
              <div class="nav-item-text">
                <div class="nav-item-title">Planificación PSM</div>
                <div class="nav-item-desc">Construcción y distribución del programa semanal</div>
              </div>
            </a>
            <a href="#" class="nav-item" data-target="section-map">
              <span class="nav-item-icon"><i class="fa-solid fa-map-location-dot icon-map"></i></span>
              <div class="nav-item-text">
                <div class="nav-item-title">Mapa de Trabajo</div>
                <div class="nav-item-desc">Visualización espacial de actividades</div>
              </div>
            </a>
            <a href="#" class="nav-item" data-target="section-reports">
              <span class="nav-item-icon"><i class="fa-solid fa-clipboard-check icon-report"></i></span>
              <div class="nav-item-text">
                <div class="nav-item-title">Reportes Diarios</div>
                <div class="nav-item-desc">Ingreso digital de reportes de terreno</div>
              </div>
            </a>
            <a href="#" class="nav-item" data-target="section-orders-list">
              <span class="nav-item-icon"><i class="fa-solid fa-rectangle-list icon-order"></i></span>
              <div class="nav-item-text">
                <div class="nav-item-title">Lista de Ordenes</div>
                <div class="nav-item-desc">Visualiza de manera global las ordenes del sistema</div>
              </div>
            </a>
          </div>
        </div>

        <!-- Proyectos -->
        <div class="nav-section">
          <button class="nav-section-header" data-section="proyectos-group">
            <span class="nav-icon"><i class="fa-solid fa-diagram-project" style="color: #f97316;"></i></span>
            <span class="nav-text">Proyectos</span>
            <span class="nav-arrow"><i class="fa-solid fa-chevron-down"></i></span>
          </button>
          <div class="nav-section-content" data-content="proyectos-group">
            <a href="#" class="nav-item" data-target="section-proyectos">
              <span class="nav-item-icon"><i class="fa-solid fa-gauge-high icon-kpi"></i></span>
              <div class="nav-item-text">
                <div class="nav-item-title">Panel de Control</div>
                <div class="nav-item-desc">Métricas y status de proyectos</div>
              </div>
            </a>
            <a href="#" class="nav-item" data-target="section-proyectos-planificacion">
              <span class="nav-item-icon"><i class="fa-solid fa-calendar-days icon-planning"></i></span>
              <div class="nav-item-text">
                <div class="nav-item-title">Planificación de Proyectos</div>
                <div class="nav-item-desc">Herramientas en línea</div>
              </div>
            </a>
          </div>
        </div>

        <!-- Gestión de Backlog -->
        <div class="nav-section">
          <a href="#" class="nav-section-header nav-section-single" data-target="section-backlog">
            <span class="nav-icon"><i class="fa-solid fa-boxes-stacked icon-backlog"></i></span>
            <span class="nav-text">Gestión de Backlog</span>
          </a>
        </div>

        <!-- Panel Admin -->
        <div class="nav-section">
          <a href="#" class="nav-section-header nav-section-single" data-target="section-admin">
            <span class="nav-icon"><i class="fa-solid fa-user-gear" style="color: #94a3b8;"></i></span>
            <span class="nav-text">Panel Admin</span>
          </a>
        </div>
      </nav>

      <!-- Sidebar Footer with Auth only -->
      <div class="sidebar-footer">
        <div class="sidebar-auth">
          <button class="btn btn-primary btn-sm" id="btnShowLogin">Iniciar Sesión</button>
          <div id="userInfo" class="user-info-compact" style="display: none;">
            <button id="btnOpenProfile" class="btn-icon-profile" title="Ver Perfil" style="background:none; border:none; color:inherit; cursor:pointer;"><i class="fa-solid fa-circle-user" style="font-size: 1.2rem; color:#3b82f6;"></i></button>
            <span id="userEmail" class="user-email-text"></span>
            <button class="btn-link btn-sm" id="btnLogout" style="display:flex; align-items:center; gap:4px;"><i class="fa-solid fa-right-from-bracket"></i> Salir</button>
          </div>
        </div>
      </div>
    </aside>

    <header class="topbar">
      <div class="topbar-content">
        <button class="mobile-menu-toggle" id="mobileMenuToggle">
          <i class="fa-solid fa-bars"></i>
        </button>
        <div class="topbar-title" id="topbarTitle">Indicadores KPI</div>
        <div class="topbar-actions" style="margin-left: auto; display: flex; gap: 8px; align-items: center;">
          <select id="themeSelector" class="theme-select"
            style="padding: 4px 8px; font-size: 12px; border-radius: 20px; background: rgba(0,0,0,0.2); color: var(--text); border: 1px solid var(--border);">
            <option value="dark">Industrial Dark</option>
            <option value="light">Industrial Light</option>
            <option value="material-dark">Material Dark (M3)</option>
            <option value="material-light">Material Light (M3)</option>
          </select>
          <script>
            document.addEventListener('DOMContentLoaded', () => {
              const selector = document.getElementById('themeSelector');
              const currentTheme = localStorage.getItem('wp_theme') || 'dark';
              selector.value = currentTheme;
              selector.addEventListener('change', (e) => {
                const theme = e.target.value;
                document.documentElement.setAttribute('data-theme', theme);
                localStorage.setItem('wp_theme', theme);
                // Force reload of some components if needed or just let CSS do its thing
                if (theme.startsWith('material') && !document.querySelector('link[href*="Roboto"]')) {
                  const link = document.createElement('link');
                  link.rel = 'stylesheet';
                  link.href = 'https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap';
                  document.head.appendChild(link);
                }
              });
            });
          </script>
        </div>
      </div>
    </header>

    <main class="wrap">
      <!-- SECCION KPI -->
      <section id="section-kpi" class="app-section">
        <div class="panel">
          <div class="panel-head"
            style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
            <h2><i class="fa-solid fa-chart-column" style="color: #10b981; margin-right: 10px;"></i>Dashboard de Desempeño</h2>
            <div class="filter-bar">
              <label class="field" style="margin:0;">
                <span>Revisión</span>
                <select id="kpiRevision"></select>
              </label>
              <label class="field" style="margin:0;">
                <span>Área</span>
                <select id="kpiArea">
                  <option value="">Todas</option>
                </select>
              </label>
            </div>
          </div>
          <!-- GRID DE INDICADORES-->
          <!-- GRID DE INDICADORES (Nuevos KPIs) -->
          <div class="kpi-grid" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
            <!-- 1) Cumplimiento del Programa (CPS) -->
            <div class="kpi-card">
              <div class="kpi-label"><i class="fa-solid fa-circle-check" style="color: #10b981; margin-right: 6px;"></i>Cumplimiento (CPS)</div>
              <div class="kpi-split">
                <div class="kpi-sub" style="cursor: pointer;" onclick="showKpiToast('cps_ops')">
                  <span class="kpi-val-sm" id="cps_ops">0%</span>
                  <span class="kpi-lbl-sm">[OP]</span>
                </div>
                <div class="kpi-sub" style="cursor: pointer;" onclick="showKpiToast('cps_hh')">
                  <span class="kpi-val-sm" id="cps_hh">0%</span>
                  <span class="kpi-lbl-sm">[HH]</span>
                </div>
              </div>
            </div>

            <!-- 5) Ritmo PSM (RITMO) -->
            <div class="kpi-card">
              <div class="kpi-label"><i class="fa-solid fa-bolt" style="color: #f59e0b; margin-right: 6px;"></i>Ritmo PSM</div>
              <div class="kpi-split">
                <div class="kpi-sub" style="cursor: pointer;" onclick="showKpiToast('ritmo_ops')">
                  <span class="kpi-val-sm" id="ritmo_ops">0%</span>
                  <span class="kpi-lbl-sm">[OP]</span>
                </div>
                <div class="kpi-sub" style="cursor: pointer;" onclick="showKpiToast('ritmo_hh')">
                  <span class="kpi-val-sm" id="ritmo_hh">0%</span>
                  <span class="kpi-lbl-sm">[HH]</span>
                </div>
              </div>
            </div>

            <!-- 2) Índice de Emergentes (IE) -->
            <div class="kpi-card">
              <div class="kpi-label"><i class="fa-solid fa-triangle-exclamation" style="color: #f59e0b; margin-right: 6px;"></i>Emergentes (IE)</div>
              <div class="kpi-split">
                <div class="kpi-sub" style="cursor: pointer;" onclick="showKpiToast('ie_ops')">
                  <span class="kpi-val-sm" id="ie_ops">0%</span>
                  <span class="kpi-lbl-sm">[OP]</span>
                </div>
                <div class="kpi-sub" style="cursor: pointer;" onclick="showKpiToast('ie_hh')">
                  <span class="kpi-val-sm" id="ie_hh">0%</span>
                  <span class="kpi-lbl-sm">[HH]</span>
                </div>
              </div>
            </div>

            <!-- 3) Uso de HH (USO) -->
            <div class="kpi-card">
              <div class="kpi-label"><i class="fa-solid fa-hard-hat" style="color: #3b82f6; margin-right: 6px;"></i>Uso de Recursos Real</div>
              <div class="kpi-split">
                <div class="kpi-sub" style="cursor: pointer; flex: 1.5;" onclick="showKpiToast('uso_hh')">
                  <span class="kpi-val-sm" id="uso_hh">0%</span>
                  <span class="kpi-lbl-sm">[HH]</span>
                </div>
              </div>
            </div>

            <!-- 4) Backlog (BL) -->
            <div class="kpi-card">
              <div class="kpi-label">Backlog PSM</div>
              <div class="kpi-split">
                <div class="kpi-sub" style="cursor: pointer;" onclick="showKpiToast('bl_ops')">
                  <span class="kpi-val-sm" id="bl_ops">0%</span>
                  <span class="kpi-lbl-sm">[OP]</span>
                </div>
                <div class="kpi-sub" style="cursor: pointer;" onclick="showKpiToast('bl_hh')">
                  <span class="kpi-val-sm" id="bl_hh">0%</span>
                  <span class="kpi-lbl-sm">[HH])</span>
                </div>
              </div>
            </div>
            <!-- Toast container for KPI details -->
            <div id="kpi-toast-container">
              <div class="kpi-toast-title">Cálculo del Indicador <div class="kpi-toast-close" onclick="hideKpiToast()">
                  &times;</div>
              </div>
              <div class="kpi-toast-formula" id="kpi-toast-formula"></div>
              <div class="kpi-toast-data" id="kpi-toast-data"></div>
            </div>

            <!-- Totales (Info Extra) -->
            <div class="kpi-card">
              <div class="kpi-label">Totales</div>
              <div class="kpi-split">
                <div class="kpi-sub">
                  <span class="kpi-val-sm" id="kpiOps">0</span>
                  <span class="kpi-lbl-sm">Ops Totales</span>
                </div>
                <div class="kpi-sub">
                  <span class="kpi-val-sm" id="kpiHHRep">0</span>
                  <span class="kpi-lbl-sm">HH Report.</span>
                </div>
              </div>
            </div>
          </div>

          <div class="grid-2" style="margin-top:14px;">
            <!-- Panel Izquierda: Distribución por Estado -->
            <div class="panel inner">
              <div class="inner-head">
                <h3>Distribución por Estado</h3>
                <div class="hint">Estado actual de las operaciones seleccionadas</div>
              </div>
              <div class="chart-container" style="display:flex; align-items:center; gap:20px; height:180px;">
                <div style="position: relative; flex: 1.2; height: 100%;">
                  <canvas id="kpiStateChart"></canvas>
                </div>
                <div id="kpiStateLegend" style="flex: 1; display:flex; flex-direction:column; gap:4px;"></div>
              </div>
            </div>

            <!-- Panel Derecha: Uso de HH -->
            <div class="panel inner">
              <div class="inner-head">
                <h3>Uso de HH</h3>
                <div class="hint">% HH Ejecutado vs Planificadas por día</div>
              </div>
              <div class="chart-container" style="position: relative; height: 180px;">
                <canvas id="usageChart"></canvas>
              </div>
            </div>
          </div>

          <div class="grid-2">
            <div class="panel inner">
              <div class="inner-head">
                <h3>Backlog vs No Backlog (HH)</h3>
                <div class="hint">Reporte diario acumulado por categoría</div>
              </div>
              <div class="chart-container" style="position: relative; height: 230px;">
                <canvas id="backlogChart"></canvas>
              </div>
            </div>
            <div class="panel inner">
              <div class="inner-head">
                <h3>Curva de avance PSM</h3>
                <div class="hint">Acumulado Plan vs Real</div>
              </div>
              <div class="chart-container" style="position: relative; height: 250px; width: 100%;">
                <canvas id="curveChart"></canvas>
              </div>
            </div>
          </div>
        </div>
      </section>



      <!-- SECCION MAPA -->
      <section id="section-map" class="app-section" style="display:none;">
        <div class="panel inner" style="margin-top:0;">
          <div class="inner-head"
            style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
            <h3>Mapa de Puntos de Trabajo</h3>
            <div class="filter-bar">
              <label class="field" style="margin:0;">
                <span>Revisión</span>
                <select id="mapRevision"></select>
              </label>
              <label class="field" style="margin:0;">
                <span>Área</span>
                <select id="mapArea">
                  <option value="">Todas</option>
                </select>
              </label>
              <button id="btnMapEditMode" class="btn secondary"
                style="display:none; margin-left: 10px; font-size: 11px;">ðŸ“ Editar Ubicaciones</button>
            </div>
          </div>
          <div id="mapInfoBanner" class="note"
            style="display:none; margin-bottom: 10px; background: #fffbe6; color: #b7791f; border-color: #f6e05e;">
            Modo Edición: Haz clic en el mapa para asignar la ubicación de una planta.
          </div>
          <div id="mapContainer" class="map-container" style="height: 75vh; z-index: 1;"></div>
        </div>
      </section>

      <!-- MODAL SELECTOR PLANTA PARA MAPA -->
      <div id="mapPlantModal" class="modal" aria-hidden="true" style="z-index: 10000;">
        <div class="modal-backdrop" id="mapPlantModalBackdrop"></div>
        <div class="modal-card" style="max-width: 400px;">
          <div class="modal-head">
            <div class="modal-title">Asignar Ubicación</div>
            <button class="icon-btn" id="mapPlantModalClose"></button>
          </div>
          <div class="modal-body">
            <p style="font-size:13px; color:var(--muted); margin-bottom:15px;">Seleccióna la planta que corresponde a
              esta ubicación:</p>
            <label class="field wide">
              <span>Planta</span>
              <select id="mapPlantSelector">
                <!-- Llenado dinámico -->
              </select>
            </label>
            <div style="margin-top:20px; display:flex; justify-content:flex-end;">
              <button id="btnSaveMapLocation" class="btn">Guardar Ubicación</button>
            </div>
          </div>
        </div>
      </div>

      <!-- SECCION GANTT -->
      <section id="section-gantt" class="app-section" style="display:none;">
        <div class="panel inner" style="margin-top:0;">
          <div class="inner-head">
            <h3>Programa Semanal (Diagrama de Gantt)</h3>
            <div style="display: flex; flex-direction: column; gap: 10px; width: 100%;">
              <!-- Fila 1: Filtros alineados a la izquierda -->
              <div class="filters" style="width: 100%;">
                <div class="filter-bar">
                  <label class="field">
                    <span>Revisión</span>
                    <select id="ganttRevision"></select>
                  </label>
                  <label class="field">
                    <span>Área</span>
                    <select id="ganttArea">
                      <option value="">Todas</option>
                    </select>
                  </label>
                  <label class="field">
                    <span>Planta</span>
                    <select id="kpiPlanta">
                      <option value="">Todas</option>
                    </select>
                  </label>
                  <label class="field">
                    <span>Especialidad</span>
                    <select id="kpiEspecialidad">
                      <option value="">Todas</option>
                    </select>
                  </label>
                  <label class="field">
                    <span>Estado</span>
                    <select id="kpiEstado">
                      <option value="">Todos</option>
                    </select>
                  </label>
                  <label class="field">
                    <span>Tipo</span>
                    <select id="kpiTipo">
                      <option value="">Todos</option>
                    </select>
                  </label>
                  <label class="field">
                    <span>Backlog</span>
                    <select id="kpiBacklog">
                      <option value="">Todos</option>
                    </select>
                  </label>
                  <div style="margin-left: auto;">
                    <button class="btn btn-secondary" id="btnOpenMetaPSM" style="padding: 8px 16px; font-size: 13px;">
                      <span style="margin-right: 6px;">âš™ï¸</span>Metadatos
                    </button>
                  </div>
                </div>
              </div>

              <!-- Fila 2: Botones de Acción e Informe Diario -->
              <div
                style="display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; margin-top: 5px; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 15px;">

                <!-- Reporte Diario -->
                <div style="display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap;">
                  <label class="field" style="margin-bottom: 0;">
                    <span>Fecha Informe</span>
                    <input type="date" id="dailyReportDate" style="min-width: 140px;" />
                  </label>
                  <label class="field" style="margin-bottom: 0;">
                    <span>Planificador</span>
                    <select id="dailyReportPlanner" style="min-width: 180px;">
                      <option value="Carlos Rodriguez Godoy">Carlos Rodriguez Godoy</option>
                      <option value="Oscar Zapata Bodevin" selected>Oscar Zapata Bodevin</option>
                      <option value="Oscar Tapia Arroyo">Oscar Tapia Arroyo</option>
                      <option value="Jorge Aviles Illanes">Jorge Aviles Illanes</option>
                    </select>
                  </label>
                  <label class="field"
                    style="margin-bottom: 0; display: flex; align-items: center; gap: 8px; flex-direction: row;">
                    <input type="checkbox" id="dailyReportWeekend" style="width: auto; margin: 0;" />
                    <span>Trabaja el Fin de Semana</span>
                  </label>
                    <button class="btn btn-primary" id="btnExportDailyReportPdf" style="padding: 10px 20px; background: #27ae60; border-color: #27ae60; height: 38px; display: flex; align-items: center; gap: 8px;"><i class="fa-solid fa-file-invoice" style="font-size: 1.1rem;"></i> Emitir Informe Diario
                  </button>
                </div>

                <!-- Otros Botones -->
                <div style="display: flex; gap: 10px;">
                  <button class="btn btn-secondary" id="btnOpenOccupancyModal" style="padding: 8px 16px; font-size: 13px; display:inline-flex; align-items:center; gap:6px;"><i class="fa-solid fa-percent" style="color:#10b981;"></i> % Ocupación
                  </button>
                  <button class="btn btn-primary" id="btnExportPsmOrdersExcel" style="padding: 8px 16px; font-size: 13px; display:inline-flex; align-items:center; gap:6px;"><i class="fa-solid fa-file-export" style="color:#6366f1;"></i> Descargar Ordenes
                  </button>
                  <button class="btn btn-secondary" id="btnExportExcel" style="padding: 8px 16px; font-size: 13px; display:inline-flex; align-items:center; gap:6px;"><i class="fa-solid fa-file-excel" style="color:#10b981;"></i> Excel
                  </button>
                  <button class="btn btn-primary" id="btnNewEmergencyOrder" style="padding: 8px 16px; font-size: 13px; display:inline-flex; align-items:center; gap:6px;"><i class="fa-solid fa-plus-circle" style="color:#f59e0b;"></i> + Emergente
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div id="ganttChart" class="gantt-container"></div>

        </div>
      </section>

      <!-- SECCION PLANIFICACION PSM -->
      <section id="section-planning" class="app-section" style="display:none;">
        <div class="panel inner" style="margin-top:0;">
          <div class="inner-head">
            <h3><i class="fa-solid fa-route" style="color: #f59e0b; margin-right: 10px;"></i>Planificación PSM - Diagrama Interactivo</h3>
            <div class="filter-bar">
              <label class="field" style="margin: 0;">
                <span>Planta</span>
                <select id="planningPlanta" onchange="window.planningModule.onFilterChange()">
                  <option value="">Todas</option>
                </select>
              </label>
              <label class="field" style="margin: 0;">
                <span>Especialidad</span>
                <select id="planningSpecialty">
                  <option value="">Todas</option>
                </select>
              </label>
            </div>
          </div>

          <!-- MODAL: Configuración de Impresión Gantt PSM (estilo P6) -->
          <div id="modalGanttPrintConfig"
            style="display:none; position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,0.6); align-items:center; justify-content:center;">
            <div
              style="background:var(--panel,#1e293b); border:1px solid var(--border,#334155); border-radius:12px; width:min(760px,95vw); max-height:90vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,0.5);">
              <!-- Encabezado del modal -->
              <div
                style="display:flex; align-items:center; justify-content:space-between; padding:16px 22px; border-bottom:1px solid var(--border,#334155);">
                <div style="display:flex; align-items:center; gap:10px;">
                  <i class="fa-solid fa-print" style="font-size:20px; color:var(--accent,#f97316);"></i>
                  <div>
                    <div style="font-size:15px; font-weight:700; color:var(--accent,#f97316);">Configurar Impresión - Gantt PSM</div>
                    <div style="font-size:11px; color:#94a3b8;">Configure el encabezado, pie de página y contenido del informe</div>
                  </div>
                </div>
                <button onclick="document.getElementById('modalGanttPrintConfig').style.display='none'"
                  style="background:none;border:none;color:#94a3b8;font-size:20px;cursor:pointer;line-height:1;"></button>
              </div>

              <!-- Tabs -->
              <div style="display:flex; gap:3px; padding:10px 22px 0; border-bottom:1px solid var(--border,#334155);">
                <button onclick="p6PrintSwitchTab('header')" id="tabBtnHeader" class="p6-tab p6-tab-active">
                  Encabezado</button>
                <button onclick="p6PrintSwitchTab('footer')" id="tabBtnFooter" class="p6-tab"> Pie de
                  Página</button>
                <button onclick="p6PrintSwitchTab('content')" id="tabBtnContent" class="p6-tab"><i class="fa-solid fa-gears" style="font-size: 10px; margin-right: 4px;"></i> Contenido</button>
              </div>

              <!-- Cuerpo de tabs -->
              <div style="padding:20px 22px;">

                <!-- TAB: Encabezado -->
                <div id="tabHeader">
                  <p style="font-size:11px;color:#94a3b8;margin:0 0 14px;">Una sola fila: logo cliente (izq.) · nombre
                    del proyecto (centro) · logo empresa (der.)</p>
                  <div style="display:grid;grid-template-columns:1fr 2fr 1fr;gap:14px;align-items:start;">

                    <!-- Logo Cliente -->
                    <div style="display:flex;flex-direction:column;align-items:center;gap:8px;">
                      <div id="prevLogoClient"
                        style="width:100%;height:64px;border:2px dashed #334155;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.15);overflow:hidden;">
                        <span style="font-size:10px;color:#64748b;text-align:center;">Sin logo</span>
                      </div>
                      <label
                        style="cursor:pointer;font-size:11px;color:var(--accent,#f97316);font-weight:600;display:flex;align-items:center;gap:5px;">
                        <input type="file" id="inpLogoClient" accept="image/*" style="display:none;"
                          onchange="p6LoadLogo(this,'prevLogoClient','logoClientB64')">
                        <i class="fa-solid fa-image"></i> Logo Cliente
                      </label>
                      <input type="hidden" id="logoClientB64">
                    </div>

                    <!-- Nombre del Proyecto -->
                    <div style="display:flex;flex-direction:column;gap:8px;">
                      <label style="font-size:11px;color:#94a3b8;font-weight:600;">Nombre del Proyecto</label>
                      <input id="phProjectName" class="p6-input" placeholder="Ej: PSM - Parada Programada Unidad 1"
                        style="font-size:14px;font-weight:600;text-align:center;padding:10px;"
                        value="Propuesta de planificación semanal N° ">
                      <label style="font-size:11px;color:#94a3b8;font-weight:600;margin-top:4px;">Subtítulo
                        (opcional)</label>
                      <input id="phSubtitle" class="p6-input" placeholder="Ej: Planta Bío-Bío · Semana 13 · Rev. A"
                        value="Contrato de mantención Civil Mecánico ERBB">
                    </div>

                    <!-- Logo Empresa -->
                    <div style="display:flex;flex-direction:column;align-items:center;gap:8px;">
                      <div id="prevLogoCompany"
                        style="width:100%;height:64px;border:2px dashed #334155;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.15);overflow:hidden;">
                        <span style="font-size:10px;color:#64748b;text-align:center;">Sin logo</span>
                      </div>
                      <label
                        style="cursor:pointer;font-size:11px;color:var(--accent,#f97316);font-weight:600;display:flex;align-items:center;gap:5px;">
                        <input type="file" id="inpLogoCompany" accept="image/*" style="display:none;"
                          onchange="p6LoadLogo(this,'prevLogoCompany','logoCompanyB64')">
                        <i class="fa-solid fa-image"></i> Logo Empresa
                      </label>
                      <input type="hidden" id="logoCompanyB64">
                    </div>
                  </div>

                  <!-- Preview del encabezado -->
                  <div
                    style="margin-top:16px;padding:10px 14px;background:rgba(249,115,22,0.06);border:1px solid rgba(249,115,22,0.2);border-radius:8px;">
                    <div style="font-size:10px;color:#94a3b8;margin-bottom:8px;font-weight:600;">VISTA PREVIA DEL
                      ENCABEZADO</div>
                    <div
                      style="display:grid;grid-template-columns:1fr 2fr 1fr;gap:8px;background:#fff;padding:8px 12px;border-radius:6px;min-height:42px;align-items:center;">
                      <div id="prevHdrL" style="font-size:9px;color:#6b7280;font-style:italic;">[Logo Cliente]</div>
                      <div id="prevHdrC" style="text-align:center;font-size:12px;font-weight:700;color:#111827;">
                        Planificación PSM</div>
                      <div id="prevHdrR" style="text-align:right;font-size:9px;color:#6b7280;font-style:italic;">[Logo
                        Empresa]</div>
                    </div>
                  </div>

                  <script>
                    const updateHdrPreview = () => {
                      const title = document.getElementById('phProjectName').value || 'Planificación PSM';
                      const subtitle = document.getElementById('phSubtitle').value;
                      document.getElementById('prevHdrC').innerHTML = `
                        <div style="font-weight:700;">${title}</div>
                        ${subtitle ? `<div style="font-size:8px;color:#64748b;font-weight:500;">${subtitle}</div>` : ''}
                      `;
                    };
                    document.getElementById('phProjectName').addEventListener('input', updateHdrPreview);
                    document.getElementById('phSubtitle').addEventListener('input', updateHdrPreview);
                  </script>
                </div>

                <!-- TAB: Pie de Página -->
                <div id="tabFooter" style="display:none;">
                  <p style="font-size:11px;color:#94a3b8;margin:0 0 14px;">Define los datos que aparecerán en la banda
                    inferior del documento.</p>

                  <div style="display:grid;grid-template-columns:1fr 1fr;gap:25px;">
                    <!-- Columna Izquierda: Identificación -->
                    <div style="display:flex;flex-direction:column;gap:12px;">
                      <div
                        style="font-size:10px;font-weight:700;color:var(--accent,#f97316);letter-spacing:0.5px;text-transform:uppercase;">
                        Identificación</div>
                      <div>
                        <label style="font-size:10px;color:#94a3b8;display:block;margin-bottom:3px;">Fecha de
                          Emisión</label>
                        <input type="date" id="pfEmitDate" class="p6-input" style="color-scheme:dark;">
                      </div>
                      <div>
                        <label style="font-size:10px;color:#94a3b8;display:block;margin-bottom:3px;">Empresa</label>
                        <input id="pfCompany" class="p6-input" placeholder="Ej: Haug S.A.">
                      </div>
                      <div>
                        <label style="font-size:10px;color:#94a3b8;display:block;margin-bottom:3px;">Cliente</label>
                        <input id="pfClient" class="p6-input" placeholder="Ej: Compañía Minera Erbb">
                      </div>
                    </div>

                    <!-- Columna Derecha: Responsables -->
                    <div style="display:flex;flex-direction:column;gap:12px;">
                      <div
                        style="font-size:10px;font-weight:700;color:var(--accent,#f97316);letter-spacing:0.5px;text-transform:uppercase;">
                        Responsables</div>
                      <div>
                        <label
                          style="font-size:10px;color:#94a3b8;display:block;margin-bottom:3px;">Planificador</label>
                        <input id="pfPlanner" class="p6-input" placeholder="Nombre del Planificador">
                      </div>
                      <div>
                        <label style="font-size:10px;color:#94a3b8;display:block;margin-bottom:3px;">Jefe de
                          Terreno</label>
                        <input id="pfSupervisor" class="p6-input" placeholder="Nombre del Jefe de Terreno">
                      </div>
                      <div>
                        <label style="font-size:10px;color:#94a3b8;display:block;margin-bottom:3px;">Jefe de
                          Planificación</label>
                        <input id="pfPlanManager" class="p6-input" placeholder="Nombre del Jefe de Planificación">
                      </div>
                    </div>
                  </div>

                  <div style="margin-top:16px;padding-top:12px;border-top:1px solid #334155;">
                    <label
                      style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text,#e2e8f0);cursor:pointer;">
                      <input type="checkbox" id="pfBorderTop" checked style="width:14px;height:14px;"> Mostrar línea
                      divisoria superior en pie de página
                    </label>
                  </div>
                </div>

                <!-- TAB: Contenido -->
                <div id="tabContent" style="display:none;">
                  <p style="font-size:11px;color:#94a3b8;margin:0 0 14px;">Seleccióna los elementos y el orden del
                    informe.</p>
                  <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;">
                    <label
                      style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text,#e2e8f0);cursor:pointer;"><input
                        type="checkbox" id="pcIncOcupacion" checked style="width:14px;height:14px;"> Tabla % Ocupación
                      PSM</label>
                    <label
                      style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text,#e2e8f0);cursor:pointer;"><input
                        type="checkbox" id="pcIncPersonal" checked style="width:14px;height:14px;"> Tabla Cantidad de
                      Personal</label>
                    <label
                      style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text,#e2e8f0);cursor:pointer;"><input
                        type="checkbox" id="pcIncGraph" checked style="width:14px;height:14px;"> Gráfico de %
                      Utilización Diaria</label>
                    <label
                      style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text,#e2e8f0);cursor:pointer;"><input
                        type="checkbox" id="pcIncGantt" checked style="width:14px;height:14px;"> Diagrama de
                      Gantt</label>
                    <label
                      style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text,#e2e8f0);cursor:pointer;"><input
                        type="checkbox" id="pcIncLegend" checked style="width:14px;height:14px;"> Incluir Leyenda de
                      Estados</label>
                  </div>
                  <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px;">
                    <div>
                      <label
                        style="font-size:12px;color:var(--text,#e2e8f0);display:block;margin-bottom:8px;font-weight:600;">Orientación
                        de página</label>
                      <div style="display:flex;gap:10px;">
                        <label
                          style="display:flex;align-items:center;gap:6px;font-size:12px;color:#94a3b8;cursor:pointer;"><input
                            type="radio" name="pcOrientation" id="pcOrLandscape" value="landscape" checked>
                          Horizontal</label>
                        <label
                          style="display:flex;align-items:center;gap:6px;font-size:12px;color:#94a3b8;cursor:pointer;"><input
                            type="radio" name="pcOrientation" id="pcOrPortrait" value="portrait"> Vertical</label>
                      </div>
                    </div>
                    <div>
                      <label
                        style="font-size:12px;color:var(--text,#e2e8f0);display:block;margin-bottom:6px;font-weight:600;">Escala:
                        <span id="pcScaleVal">90%</span></label>
                      <input type="range" id="pcScale" min="50" max="110" value="90"
                        style="width:100%;accent-color:var(--accent,#f97316);"
                        oninput="document.getElementById('pcScaleVal').textContent=this.value+'%'">
                    </div>
                  </div>
                </div>
              </div>

              <!-- Acciones -->
              <div
                style="display:flex; justify-content:flex-end; gap:10px; padding:14px 22px; border-top:1px solid var(--border,#334155);">
                <button onclick="document.getElementById('modalGanttPrintConfig').style.display='none'"
                  style="padding:8px 18px;border-radius:8px;border:1px solid #475569;background:transparent;color:#94a3b8;cursor:pointer;font-size:13px;">Cancelar</button>
                <button onclick="window.printPlanningGanttP6()"
                  style="padding:8px 22px;border-radius:8px;border:none;background:var(--accent,#f97316);color:#fff;cursor:pointer;font-size:13px;font-weight:600;">
                  <i class="fa-solid fa-print"></i> Imprimir ahora</button>
              </div>
            </div>
          </div>
          <div
            style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; flex-wrap: wrap; gap: 10px;">
            <div
              style="display: flex; gap: 10px; align-items: center; background: rgba(0,0,0,0.1); padding: 5px 10px; border-radius: 8px;">
              <span style="font-size: 13px; font-weight: bold; color: var(--text);"><i class="fa-solid fa-folder-tree" style="color:#f59e0b;"></i> Flujo Excel:</span>
              <input type="file" id="inpImportXLSX" accept=".xlsx" style="display:none;"
                onchange="window.planningModule.importFromExcel(event)" />
              <button class="btn btn-secondary"
                style="padding: 6px 12px; font-size: 12px; background:#10b981; color:#fff;"
                onclick="document.getElementById('inpImportXLSX').click()"><i class="fa-solid fa-file-import"></i> Importar XLSX</button>
              <button class="btn btn-secondary"
                style="padding: 6px 12px; font-size: 12px; background:#3b82f6; color:#fff;"
                onclick="window.planningModule.exportToExcel()"><i class="fa-solid fa-file-export"></i> Exportar XLSX</button>
              <button class="btn btn-secondary"
                style="padding: 6px 12px; font-size: 12px; background:#ef4444; color:#fff;"
                onclick="window.planningModule.clearPlanningData()"><i class="fa-solid fa-trash-can"></i> Limpiar</button>
            </div>

            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
              <button id="btnPrintPlanningGantt"
                onclick="document.getElementById('modalGanttPrintConfig').style.display='flex'" class="btn btn-primary"
                style="padding: 8px 16px; font-size: 13px; background-color: #64748b; border-color: #64748b; color: #fff;">
                <i class="fa-solid fa-print"></i> Reporte PSM
              </button>
              <button class="btn btn-primary" id="btnNewPlannedOrder" style="padding: 8px 16px; font-size: 13px;">
                <i class="fa-solid fa-plus-circle"></i> + Operación
              </button>
            </div>
          </div>
          <div class="hint" style="margin-top: 10px;">Arrastra las barras de HH planificadas para reorganizar la carga
            de trabajo</div>



          <!-- P6 Modal Buscar/Selecciónar Recurso -->
          <div class="planning-tables-grid">
            <!-- Tabla de HH Disponibles -->
            <div class="panel" style="padding: 15px;">
              <div id="headerAvailableHH"
                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                <h4 style="margin: 0; font-size: 14px; font-weight: 600; color: var(--accent);"><i class="fa-solid fa-users" style="color:#f97316; margin-right:8px;"></i>Cantidad de Personas Disponibles</h4>
              </div>
              <div id="contentAvailableHH" style="overflow-x: auto;">
                <table id="tblAvailableHH" class="table-compact">
                  <thead>
                    <tr>
                      <th style="min-width: 80px;">Especialidad</th>
                      <th>Mar</th>
                      <th>Mié</th>
                      <th>Jue</th>
                      <th>Vie</th>
                      <th>Sáb</th>
                      <th>Dom</th>
                      <th>Lun</th>
                    </tr>
                  </thead>
                  <tbody>
                    <!-- Se llenará dinámicamente -->
                  </tbody>
                </table>
              </div>
            </div>

            <!-- Gráfico de Barras -->
            <div class="panel" style="padding: 15px;">
              <div id="headerUtilization"
                style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px;">
                <h4 style="margin: 0; font-size: 14px; font-weight: 600; color: var(--blue);"><i class="fa-solid fa-percent" style="color:#3b82f6; margin-right:8px;"></i>% de Ocupación PSM</h4>
              </div>
              <div id="contentUtilization" style="overflow-x: auto;">
                <table id="tblUtilizationStats" class="table-compact tbl-utilization">
                  <thead>
                    <tr>
                      <th>Especialidad</th>
                      <th>Mar</th>
                      <th>Mié</th>
                      <th>Jue</th>
                      <th>Vie</th>
                      <th>Sáb</th>
                      <th>Dom</th>
                      <th>Lun</th>
                      <th class="col-total">Total</th>
                    </tr>
                  </thead>
                  <tbody></tbody>
                </table>
              </div>
            </div>
          </div>



          <div class="panel" style="padding: 15px; margin-bottom: 20px;">
            <h4 style="margin: 0 0 15px 0; font-size: 14px; font-weight: 600;"><i class="fa-solid fa-chart-area" style="color:#10b981; margin-right:8px;"></i>% Utilización de HH por Especialidad
            </h4>
            <canvas id="planningUtilizationChart" style="max-height: 300px; width: 100%;"></canvas>
          </div>

          <div id="planningGanttChart" class="gantt-container"></div>
        </div>
      </section>

      <!-- SECCION LISTA DE ORDENES GLOBAL -->
      <section id="section-orders-list" class="app-section" style="display:none;">
        <div class="panel">
          <div class="panel-head"
            style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;">
            <div>
              <h2> Lista Global de Ordenes</h2>
              <p style="color:var(--muted); font-size:13px; margin:4px 0 0 0;">Visualización consolidada de todas las
                órdenes en el sistema</p>
            </div>
            <div class="filter-bar" style="flex-wrap:wrap; gap:10px;">
              <label class="field" style="margin:0;">
                <span>Área</span>
                <select id="olFilterArea" onchange="renderGlobalOrdersList()">
                  <option value="">Todas</option>
                </select>
              </label>
              <label class="field" style="margin:0;">
                <span>Planta</span>
                <select id="olFilterPlanta" onchange="renderGlobalOrdersList()">
                  <option value="">Todas</option>
                </select>
              </label>
              <label class="field" style="margin:0;">
                <span>Estado</span>
                <select id="olFilterStatus" onchange="renderGlobalOrdersList()">
                  <option value="">Todos</option>
                  <option value="Terminada">Terminada</option>
                  <option value="En Proceso">En Proceso</option>
                  <option value="Programada">Programada</option>
                </select>
              </label>
              <label class="field" style="margin:0;">
                <span>PSM Desde</span>
                <select id="olFilterPsmStart" onchange="renderGlobalOrdersList()">
                  <option value="">Todas</option>
                </select>
              </label>
              <label class="field" style="margin:0;">
                <span>PSM Hasta</span>
                <select id="olFilterPsmEnd" onchange="renderGlobalOrdersList()">
                  <option value="">Todas</option>
                </select>
              </label>
              <button class="btn btn-primary" onclick="exportGlobalOrdersToExcel()"
                style="font-size:12px; padding:10px 16px; border-radius:10px; background-color: #27ae60; border-color: #27ae60;">
                <span style="margin-right:6px;"></span>Excel
              </button>
            </div>
          </div>

          <div class="panel inner" style="margin-top:20px; padding:0; overflow:hidden;">
            <div style="overflow-x:auto;">
              <table id="tblGlobalOrdersList" class="table-compact">
                <thead>
                  <tr>
                    <th>Área</th>
                    <th>Planta</th>
                    <th>Orden</th>
                    <th>Descripción de la Orden</th>
                    <th>Tipo</th>
                    <th>Estado</th>
                    <th>PSM Inicio</th>
                    <th>PSM Fin</th>
                    <th>N° Ops</th>
                    <th>HH Plan</th>
                    <th>HH Real</th>
                    <th>Inicio Plan</th>
                    <th>Fin Plan</th>
                    <th>Inicio Real</th>
                    <th>Fin Real</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td colspan="15" style="text-align:center; padding:20px; color:var(--muted);">Haz clic en
                      "Actualizar" para cargar la lista global.</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      <!-- SECCION BACKLOG -->
      <section id="section-backlog" class="app-section" style="display:none;">
        <div class="panel">
          <div class="panel-head"
            style="display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;">
            <div>
              <h2> Gestión de Backlog</h2>
              <p style="color:var(--muted); font-size:13px; margin:4px 0 0 0;">Gestiona de manera rápida y eficiente
                los
                alcances de trabajos en categoría Backlog</p>
            </div>
            <div class="filter-bar" style="flex-wrap:wrap; gap:10px;">
              <label class="field" style="margin:0;">
                <span>Área</span>
                <select id="blArea">
                  <option value="">Todas</option>
                </select>
              </label>
              <label class="field" style="margin:0;">
                <span>Planta</span>
                <select id="blPlanta">
                  <option value="">Todas</option>
                </select>
              </label>
              <label class="field" style="margin:0;">
                <span>Pto. Tbjo. Operación</span>
                <select id="blEspecialidad">
                  <option value="">Todas</option>
                </select>
              </label>
              <label class="field" style="margin:0;">
                <span>Estatus</span>
                <select id="blEstatus">
                  <option value="">Todos</option>
                </select>
              </label>
              <label class="field" style="margin:0;">
                <span>OT Terminada</span>
                <select id="blFilterOtTerminada" onchange="renderBacklogTable()">
                  <option value="">Todas</option>
                  <option value="SI">SÍ</option>
                  <option value="NO">NO</option>
                </select>
              </label>
              <input type="text" id="blSearch" placeholder="Buscar orden o descripciónâ€¦"
                style="padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--panel-inner); color:var(--text); font-size:13px; min-width:200px;"
                oninput="renderBacklogTable()">
              <div style="display:flex; align-items:center; gap:8px;">
                <!-- Data Date con mayor énfasis -->
                <div
                  style="display:flex; align-items:center; gap:10px; padding:6px 14px; background:var(--surface-container-high); border:1px solid var(--accent); border-radius:12px; box-shadow: 0 4px 10px rgba(0,0,0,0.15);">
                  <span
                    style="font-size:11px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.5px;">Data
                    Date</span>
                  <input type="date" id="blDataDate"
                    style="padding:6px 12px; border:none; border-bottom:2px solid var(--accent); border-radius:0; background:transparent; color:var(--text); font-size:14px; font-weight:800; outline:none; cursor:pointer;"
                    onchange="renderBacklogTable()">
                </div>

                <button class="btn btn-primary" id="btnNewBacklogOrder" onclick="openBacklogModal(null)"
                  style="font-size:12px; padding:10px 16px; border-radius:10px;">+ Nueva Orden</button>
                <label id="btnImportBacklogExcel" class="btn secondary"
                  style="font-size:12px; padding:10px 16px; border-radius:10px; cursor:pointer; display:flex; align-items:center; gap:5px; margin:0; display:none;">
                   Importar Excel
                  <input type="file" id="blImportExcel" style="display:none;" accept=".xlsx, .xls"
                    onchange="importBacklogFromExcel(this)">
                </label>
                <button class="btn secondary" onclick="exportBacklogToExcel()"
                  style="font-size:12px; padding:10px 16px; border-radius:10px; display:flex; align-items:center; gap:5px;">
                  <i class="fa-solid fa-file-export"></i> Exportar Excel
                </button>
              </div>
            </div>
          </div>

          <!-- 1. KPIs rápidos (Arriba) -->
          <div class="kpi-grid" style="margin-top:16px; grid-template-columns:repeat(auto-fit,minmax(150px,1fr));">
            <div class="kpi-card" style="cursor:pointer;" onclick="showBacklogKpiDetail('total', event)">
              <div class="kpi-label">Total Ã“rdenes</div>
              <div class="kpi-val" id="bl_kpi_total">0</div>
              <div class="kpi-lbl-sm">en Backlog</div>
            </div>
            <div class="kpi-card" style="cursor:pointer;" onclick="showBacklogKpiDetail('term', event)">
              <div class="kpi-label">OT Terminadas</div>
              <div class="kpi-val" id="bl_kpi_ter">0</div>
              <div class="kpi-lbl-sm">Completadas</div>
            </div>
            <div class="kpi-card" style="cursor:pointer;" onclick="showBacklogKpiDetail('hh', event)">
              <div class="kpi-label">Total HH</div>
              <div class="kpi-val" id="bl_kpi_hh">0</div>
              <div class="kpi-lbl-sm">Horas Hombre planificadas</div>
            </div>
            <div class="kpi-card" style="cursor:pointer;" onclick="showBacklogKpiDetail('pct', event)">
              <div class="kpi-label">% Terminado</div>
              <div class="kpi-val" id="bl_kpi_pct">0%</div>
              <div class="kpi-lbl-sm">por operaciones</div>
            </div>
          </div>

          <!-- 2. Gráficos (Debajo de KPIs) -->
          <div style="display:flex; gap:16px; margin-top:16px; flex-wrap:wrap;">
            <!-- Gráfico de Estatus -->
            <div class="panel"
              style="margin:0; padding:16px; min-width:300px; flex:1; display:flex; flex-direction:column; background:var(--surface-container-low); border-radius:16px;">
              <div
                style="font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:8px;">
                <span style="font-size:16px;"></span> Distribución por Estatus Backlog
              </div>
              <div style="flex:1; position:relative; min-height:180px;">
                <canvas id="blStatusChartCanvas"></canvas>
              </div>
            </div>

            <!-- Gráfico de HH por Puesto Trabajo -->
            <div class="panel"
              style="margin:0; padding:16px; min-width:300px; flex:1.5; display:flex; flex-direction:column; background:var(--surface-container-low); border-radius:16px;">
              <div
                style="font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:8px;">
                <span style="font-size:16px;">â³</span> HH Planificadas por Puesto de Trabajo
              </div>
              <div style="flex:1; position:relative; min-height:180px;">
                <canvas id="blPuestoHhChartCanvas"></canvas>
              </div>
            </div>

          </div>

          <!-- 3. Cálculo de KPI - Backlog (NUEVO) -->
          <div class="panel"
            style="margin-top:16px; padding:16px; background:var(--surface-container-low); border-radius:16px;">
            <div
              style="font-size:14px; font-weight:700; color:var(--primary); text-transform:uppercase; margin-bottom:16px; display:flex; align-items:center; gap:8px;">
              <span style="font-size:18px;"><i class="fa-solid fa-calculator"></i></span> Cálculo de KPI - Backlog
            </div>

            <div style="display:grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap:20px;">

              <!-- Tabla HH por Especialidad -->
              <div class="panel-inner" style="background:var(--surface-container); padding:12px; border-radius:12px;">
                <div
                  style="font-size:11px; font-weight:700; color:var(--muted); margin-bottom:8px; text-transform:uppercase;">
                  HH Backlog por Especialidad</div>
                <table class="table" id="tblKpiHhSpec"
                  style="font-size:10px; margin:0; table-layout: fixed; width: 100%;">
                  <thead>
                    <tr>
                      <th style="width: 70%;">Especialidad</th>
                      <th style="text-align:right; width: 30%;">HH Sum</th>
                    </tr>
                  </thead>
                  <tbody>
                    <!-- Dinámico -->
                  </tbody>
                </table>
              </div>

              <!-- Tabla Dotación (Editable) -->
              <div class="panel-inner" style="background:var(--surface-container); padding:12px; border-radius:12px;">
                <div
                  style="font-size:11px; font-weight:700; color:var(--muted); margin-bottom:8px; text-transform:uppercase;">
                  Dotación por Especialidad</div>
                <table class="table" id="tblKpiDotation"
                  style="font-size:10px; margin:0; table-layout: fixed; width: 100%;">
                  <thead>
                    <tr>
                      <th style="width: 70%;">Especialidad</th>
                      <th style="width:30%; text-align:center;">Pers.</th>
                    </tr>
                  </thead>
                  <tbody>
                    <!-- Dinámico -->
                  </tbody>
                </table>
              </div>

              <!-- Configuración y Filtros -->
              <div style="display:flex; flex-direction:column; gap:12px;">
                <div class="panel-inner" style="background:var(--surface-container); padding:12px; border-radius:12px;">
                  <label class="field" style="margin:0;">
                    <span style="font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase;">Horas
                      Trabajo Semanal</span>
                    <input type="number" id="kpiWeeklyHours" value="40"
                      style="font-size:13px; font-weight:700; text-align:center;" oninput="updateBacklogKpiResult()">
                  </label>
                </div>

                <div class="panel-inner"
                  style="background:var(--surface-container); padding:12px; border-radius:12px; flex:1; display:flex; flex-direction:column; gap:10px;">
                  <div>
                    <div
                      style="font-size:11px; font-weight:700; color:var(--muted); margin-bottom:8px; text-transform:uppercase;">
                      Filtrar por Área</div>
                    <div id="kpiAreaFilter"
                      style="display:flex; flex-direction:column; gap:6px; max-height:100px; overflow-y:auto; padding-right:4px;">
                      <!-- Checkboxes Dinámicos -->
                    </div>
                  </div>
                  <div style="border-top: 1px solid var(--border); padding-top:10px;">
                    <div
                      style="font-size:11px; font-weight:700; color:var(--muted); margin-bottom:8px; text-transform:uppercase;">
                      Filtrar por Estatus Backlog</div>
                    <div style="margin-bottom: 8px; border-bottom: 1px dashed var(--border); padding-bottom: 8px;">
                      <label
                        style="display:flex; align-items:center; gap:8px; font-size:11px; cursor:pointer; color:var(--primary); font-weight:700;">
                        <input type="checkbox" id="kpiIncludeFinished" onchange="updateBacklogKpiResult()">
                        Incluir OT Terminadas
                      </label>
                    </div>
                    <div id="kpiStatusFilter"
                      style="flex:1; display:flex; flex-direction:column; gap:6px; max-height:160px; overflow-y:auto; padding-right:4px;">
                      <!-- Checkboxes Dinámicos -->
                    </div>
                  </div>
                </div>

                <!-- Resultados KPIs -->
                <div style="display:flex; flex-direction:column; gap:12px; justify-content:center;">
                  <div class="kpi-card"
                    style="margin:0; background:linear-gradient(135deg, var(--blue), var(--blue2)); color:#fff; box-shadow:0 4px 15px rgba(0,0,0,0.1); cursor:pointer;"
                    onclick="showBacklogKpiDetail('weeks', event)">
                    <div class="kpi-label" style="color:rgba(255,255,255,0.85)">Backlog (Semanas)</div>
                    <div class="kpi-val" id="resultWeeks" style="font-size:32px;">0.0</div>
                    <div class="kpi-lbl-sm" style="color:rgba(255,255,255,0.7)">Carga de trabajo</div>
                  </div>

                  <div class="kpi-card"
                    style="margin:0; background:linear-gradient(135deg, #6366f1, #4f46e5); color:#fff; box-shadow:0 4px 15px rgba(0,0,0,0.1); cursor:pointer;"
                    onclick="showBacklogKpiDetail('months', event)">
                    <div class="kpi-label" style="color:rgba(255,255,255,0.85)">Backlog (Meses)</div>
                    <div class="kpi-val" id="resultMonths" style="font-size:32px;">0.0</div>
                    <div class="kpi-lbl-sm" style="color:rgba(255,255,255,0.7)">Tiempo estimado</div>
                  </div>
                </div>


              </div>
            </div>

            <!-- Tabla de órdenes -->
            <div class="table-wrap" style="margin-top:16px;">
              <table class="table" id="tblBacklog">
                <thead>
                  <tr>
                    <th>Planta</th>
                    <th>Orden</th>
                    <th>Descripción</th>
                    <th>Estatus Backlog</th>
                    <th style="text-align:center;">OT Term.</th>
                    <th>Prioridad ENAP</th>
                    <th>Pto. Tbjo. Operación</th>
                    <th>Cant. Ops</th>
                    <th>HH Trabajo</th>
                    <th>PSM</th>
                    <th>Acciones</th>
                  </tr>
                </thead>
                <tbody id="tblBacklogBody">
                  <tr>
                    <td colspan="10" style="text-align:center; color:var(--muted);">Cargando datosâ€¦</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
      </section>

      <!-- MODAL DETALLE ORDEN BACKLOG -->
      <div id="backlogOrderModal" class="modal" aria-hidden="true" style="z-index:10500;">
        <div class="modal-backdrop" id="backlogOrderModalBackdrop" onclick="closeBacklogModal()"></div>
        <div class="modal-card" style="width: 96%; max-width: 98vw; max-height: 90vh; overflow-y:auto;">
          <div class="modal-head" style="position:sticky; top:0; z-index:2; background:var(--panel);">
            <div class="modal-title"> Detalle Orden Backlog</div>
            <button class="icon-btn" onclick="closeBacklogModal()"></button>
          </div>
          <div class="modal-body" style="padding:20px;">

            <!-- TABS -->
            <div
              style="display:flex; gap:8px; margin-bottom:20px; border-bottom:1px solid var(--border); padding-bottom:8px;">
              <button class="btn secondary bl-tab-btn active" id="blTab-orden" onclick="switchBLTab('orden')"
                style="font-size:12px;"> Datos de la Orden</button>
              <button class="btn secondary bl-tab-btn" id="blTab-ops" onclick="switchBLTab('ops')"
                style="font-size:12px;">âš™ï¸ Operaciones</button>
            </div>

            <!-- TAB: DATOS ORDEN -->
            <div id="blTabContent-orden">
              <div style="display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:14px;">
                <label class="field wide" style="display:flex; align-items:center; gap:10px; cursor:pointer;">
                  <span style="color:var(--accent); font-weight:700;">OT Terminada</span>
                  <input type="checkbox" id="bl_otTerminada" oninput="blMarkDirty()" style="width:24px; height:24px;">
                </label>
                <label class="field wide"><span>Orden</span><input type="text" id="bl_orden"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Texto Breve</span><input type="text" id="bl_textoBreve"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Área de Empresa</span><input type="text" id="bl_areaEmpresa"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Emplazamiento (Planta)</span>
                  <select id="bl_emplazamiento" oninput="blMarkDirty()">
                    <option value="">-- Selecciónar Planta --</option>
                  </select>
                </label>
                <label class="field wide"><span>Pto. Tbjo. Responsable</span><input type="text" id="bl_ptoResp"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Fecha Entrada</span><input type="date" id="bl_fechaEntrada"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Fecha Inicio Extrema</span><input type="date" id="bl_fechaInicioExtrema"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Fecha Correo Terminada</span><input type="date" id="bl_fechaCorreo"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Prioridad ENAP</span><input type="text" id="bl_prioridadEnap"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Estatus Backlog</span>
                  <select id="bl_estatusBacklog" oninput="blMarkDirty()">
                    <option value="">-- Selecciónar Estatus --</option>
                    <option value="SOLICITUD">SOLICITUD</option>
                    <option value="EVALUADO">EVALUADO</option>
                    <option value="BACK_PLAN">BACK_PLAN</option>
                    <option value="PROGRAMADO">PROGRAMADO</option>
                    <option value="EN PROCESO">EN PROCESO</option>
                    <option value="TERMINADO">TERMINADO</option>
                  </select>
                </label>
                <label class="field wide"><span>Status del Sistema</span><input type="text" id="bl_statusSistema"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Status del Usuario</span><input type="text" id="bl_statusUsuario"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Local</span><input type="text" id="bl_local"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Fecha BAC_PLAN</span><input type="date" id="bl_fechaBacPlan"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Fecha Evaluada</span><input type="date" id="bl_fechaEvaluada"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Fecha Sin Información</span><input type="date" id="bl_fechaSinInfo"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Fecha Inicio M. Tard.</span><input type="date" id="bl_fechaInicioTard"
                    oninput="blMarkDirty()"></label>
                <label class="field wide"><span>Foto (URL)</span><input type="text" id="bl_foto"
                    oninput="blMarkDirty()"></label>
              </div>
            </div>

            <!-- TAB: OPERACIONES -->
            <div id="blTabContent-ops" style="display:none;">
              <div style="display:flex; justify-content:flex-end; margin-bottom:12px;">
                <button class="btn btn-primary" onclick="addBLOperation()" style="font-size:12px;">+ Agregar
                  Operación</button>
              </div>
              <div id="blOpsContainer"></div>
            </div>

            <!-- Botones acción -->
            <div
              style="display:flex; justify-content:flex-end; gap:10px; margin-top:24px; padding-top:16px; border-top:1px solid var(--border);">
              <button class="btn secondary" onclick="closeBacklogModal()">Cancelar</button>
              <button class="btn btn-primary" id="btnSaveBacklogOrder" onclick="saveBacklogOrder()"><i class="fa-solid fa-floppy-disk"></i>
                Guardar</button>
            </div>
          </div>
        </div>
      </div>

      <!-- SECCION PROYECTOS -->
      <section id="section-proyectos" class="app-section" style="display:none;">
        <div class="panel">
          <div class="panel-head">
            <div style="display:flex; align-items:center; gap:20px; flex-wrap:wrap;">
              <h2 style="margin:0;"><i class="fa-solid fa-diagram-project" style="color: #f97316; margin-right: 12px;"></i>PROYECTOS</h2>
              <div class="field" style="margin:0; min-width:200px;">
                <select id="pjProjectSelector">
                  <option value="">-- Selecciónar Proyecto --</option>
                </select>
              </div>
              <div style="display:flex; gap:10px;">
                <input type="text" id="pjManualId" placeholder="ID Proyecto (ej: MANT-E150B-2026)"
                  style="padding:8px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); width:200px;">
                <button id="pjBtnLoad" class="btn btn-primary"><i class="fa-solid fa-cloud-arrow-down"></i> Cargar</button>
              </div>
            </div>
          </div>

          <!-- META INFO -->
          <div id="pjMetaBox" class="panel inner"
            style="margin-top:10px; display:none; background: var(--panel-inner); padding: 15px; border: 1px solid var(--border);">
            <div
              style="display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 20px;">

              <!-- Left: Meta Info Grid -->
              <div
                style="display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 15px; flex: 1; min-width: 300px;">
                <div>
                  <label
                    style="font-size:10px; color:var(--muted); text-transform:uppercase; display:block; margin-bottom: 2px;">Código</label>
                  <div id="pj_meta_codigo" style="font-weight:700;">-</div>
                </div>
                <div>
                  <label
                    style="font-size:10px; color:var(--muted); text-transform:uppercase; display:block; margin-bottom: 2px;">Fuente</label>
                  <div id="pj_meta_fuente" style="font-weight:700;">-</div>
                </div>
                <div>
                  <label
                    style="font-size:10px; color:var(--muted); text-transform:uppercase; display:block; margin-bottom: 2px;">Total
                    OT</label>
                  <div id="pj_meta_totalOT" style="font-weight:700;">-</div>
                </div>
                <div>
                  <label
                    style="font-size:10px; color:var(--muted); text-transform:uppercase; display:block; margin-bottom: 2px;">Total
                    Ops</label>
                  <div id="pj_meta_totalOps" style="font-weight:700;">-</div>
                </div>
                <div>
                  <label
                    style="font-size:10px; color:var(--muted); text-transform:uppercase; display:block; margin-bottom: 2px;">Data
                    Date</label>
                  <div id="pj_meta_dataDate" style="font-weight:700; color:var(--success);">-</div>
                </div>
                <div>
                  <label
                    style="font-size:10px; color:var(--muted); text-transform:uppercase; display:block; margin-bottom: 2px;">Actualizado</label>
                  <div id="pj_meta_actualizadoEn" style="font-weight:700;">-</div>
                </div>
              </div>

              <!-- Right: Action Buttons -->
              <div
                style="display: flex; gap: 10px; align-items: center; align-self: center; background: rgba(0,0,0,0.1); padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.05);">
                <button id="pjBtnOpenReport" class="btn secondary"
                  style="font-size:11px; padding:6px 12px; height: 32px;"><i class="fa-solid fa-calendar-days"></i> Reportar</button>
                <button id="pjBtnClientReport" class="btn btn-primary"
                  style="font-size:11px; padding:6px 15px; background: #2c3e50; border:none; height: 32px; box-shadow: 0 4px 10px rgba(44,62,80,0.3);">
                  <i class="fa-solid fa-file-pdf"></i> Informe Cliente</button>
              </div>

            </div>
          </div>

          <!-- KPI CARDS -->
          <div class="kpi-grid" style="margin-top:20px;">
            <div class="kpi-card">
              <div class="kpi-label">Uso de HH (%)</div>
              <div class="kpi-val" id="pj_kpi_hh_pct">0%</div>
              <div class="kpi-lbl-sm">Reportado / Planificado</div>
            </div>
            <div class="kpi-card">
              <div class="kpi-label">HH Planificadas</div>
              <div class="kpi-val" id="pj_kpi_hh_plan">0</div>
              <div class="kpi-lbl-sm">Total Horas Hombre</div>
            </div>
            <div class="kpi-card">
              <div class="kpi-label">HH Reportadas</div>
              <div class="kpi-val" id="pj_kpi_hh_report">0</div>
              <div class="kpi-lbl-sm">Total Horas Hombre</div>
            </div>
            <div class="kpi-card">
              <div class="kpi-label">% Avance Proyecto</div>
              <div class="kpi-val" id="pj_kpi_avance_pct">0%</div>
              <div class="kpi-lbl-sm">Ponderado por HH Plan</div>
            </div>
            <div class="kpi-card">
              <div class="kpi-label">Estatus Ejecución</div>
              <div class="kpi-val" id="pj_kpi_status_count">0/0</div>
              <div class="kpi-lbl-sm">Ops Terminadas / Total</div>
            </div>
          </div>
        </div>

        <!-- CURVA S -->
        <div class="panel inner" style="margin-top:20px;">
          <div class="inner-head">
            <h3>Curva S de Avance</h3>
            <div class="hint">Acumulado diario de HH Plan vs HH Report</div>
          </div>
          <div class="chart-container" style="height:350px;">
            <canvas id="pjCurveChart"></canvas>
          </div>
        </div>

        <!-- GANTT SECTION -->
        <div class="panel inner space-bottom" style="margin-top:20px;">
          <div class="inner-head">
            <h3>Gantt de Proyecto</h3>
            <div class="filter-bar" style="margin-top:12px; gap:8px;">
              <label class="field"><span>OT</span><input type="text" id="pjFilterOT" placeholder="OT..."></label>
              <label class="field"><span>Especialidad</span><select id="pjFilterEsp">
                  <option value="">Todas</option>
                </select></label>
              <label class="field"><span>Estado</span><select id="pjFilterEstado">
                  <option value="">Todos</option>
                </select></label>
              <label class="field"><span>Tipo</span><select id="pjFilterTipo">
                  <option value="">Todos</option>
                </select></label>
              <label class="field"><span>Backlog</span><select id="pjFilterBacklog">
                  <option value="">Todos</option>
                  <option value="SI">Sí</option>
                  <option value="NO">No</option>
                </select></label>
              <label class="field"><span>Buscador</span><input type="text" id="pjFilterSearch"
                  placeholder="Descripción..."></label>
            </div>
          </div>
          <div style="margin: 10px 0 5px 0; display: flex; justify-content: flex-end;">
            <button id="btnNewAlcance" class="btn btn-primary" style="padding: 5px 15px; font-weight: bold; border-radius: 6px; display: flex; align-items: center; gap: 8px;">
              <i class="fa-solid fa-circle-plus"></i> NUEVO ALCANCE
            </button>
          </div>
          <div id="pjGanttContainer" class="gantt-container"
            style="min-height:400px; border:1px solid var(--border); border-radius:8px; margin-top:10px; background:var(--bg);">
            <!-- Renderizado dinámico -->
          </div>
        </div>

        <!-- BITÁCORA DE COMENTARIOS (PROYECTOS) -->
        <div class="panel inner space-bottom" style="margin-top:20px;">
          <div class="inner-head">
            <h3><i class="fa-solid fa-comments"></i> Bitácora de Comentarios</h3>
            <div class="hint">Registro histórico agrupado por OT y Operación</div>
          </div>
          <div id="pjCommentsLogContainer" style="padding:15px; max-height:600px; overflow-y:auto;">
            <!-- Se llenará dinámicamente -->
            <div style="text-align:center; color:var(--muted); padding:20px;">No hay comentarios registrados.</div>
          </div>
        </div>
      </section>

      <!-- SECCION PLANIFICACIÃ“N DE PROYECTOS (ESTILO P6) -->
      <section id="section-proyectos-planificacion" class="app-section"
        style="display:none; padding:5px; background:var(--bg);">
        <div class="p6-container">
          <!-- P6 Side Mode Bar -->
          <aside class="p6-modes-bar">
            <div class="p6-mode-btn active" onclick="p6SwitchMode('activities')" title="Actividades"><i class="fa-solid fa-list-check icon-gantt"></i></div>
            <div class="p6-mode-btn" id="btnP6Resources" onclick="p6SwitchMode('resources')" title="Recursos"><i class="fa-solid fa-users icon-planning"></i></div>
            <div class="p6-mode-btn" id="btnP6Histogram" onclick="p6SwitchMode('histogram')" title="Histograma Global"><i class="fa-solid fa-chart-column icon-psm"></i></div>
            <div class="p6-mode-btn" onclick="p6SwitchMode('tracking')" title="Seguimiento"><i class="fa-solid fa-gauge-high icon-kpi"></i></div>
            <div class="p6-sidebar-divider"></div>
            <div class="p6-mode-btn" onclick="p6OpenWbsModal()" title="Estructura WBS"><i class="fa-solid fa-sitemap"></i></div>
            <div class="p6-mode-btn" id="btnP6ToggleDetails" onclick="p6ToggleDetailsPane()"
              title="Mostrar/Ocultar Panel de Detalles"><i class="fa-solid fa-circle-info"></i></div>
            <div class="p6-mode-btn" onclick="p6OpenCalendarModal()" title="Gestionar Calendario y Feriados"><i class="fa-solid fa-calendar-days"></i></div>
            <div class="p6-mode-btn" onclick="document.getElementById('modalP6PrintConfig').style.display='flex'"
              title="Imprimir Gantt y Histograma"><i class="fa-solid fa-print"></i></div>
            <div style="margin-top:auto; margin-bottom:15px;">
              <div class="p6-mode-btn" onclick="p6OpenSettings()" title="Configuración"><i class="fa-solid fa-gear"></i></div>
            </div>
          </aside>

          <!-- Workspace -->
          <main class="p6-workspace">
            <header class="p6-toolbar">
              <div
                style="font-weight:700; color:var(--accent); font-size:13px; display:flex; align-items:center; gap:8px;">
                <span id="p6ProjectIcon"><i class="fa-solid fa-box-archive icon-planning"></i></span>
                <span id="p6ActiveProjectName">Cargando Proyecto...</span>
              </div>
              <div style="margin-left:auto; display:flex; gap:8px;">
                <button class="btn secondary" style="padding:4px 10px; font-size:11px;" onclick="p6NewProject()"><i class="fa-solid fa-file-circle-plus"></i> Nuevo</button>
                <button class="btn secondary" style="padding:4px 10px; font-size:11px;" onclick="p6Recalculate()"><i class="fa-solid fa-arrows-rotate icon-psm"></i> Recalcular</button>
                <button class="btn btn-primary" style="padding:4px 12px; font-size:11px;" onclick="p6AddTask()"><i class="fa-solid fa-circle-plus"></i> Actividad</button>
                <button class="btn secondary" style="padding:4px 10px; font-size:11px;" onclick="p6SaveProject()"><i class="fa-solid fa-floppy-disk"></i>
                  Guardar</button>
                <input type="file" id="p6ImportXlsxInput" accept=".xlsx" style="display:none;"
                  onchange="p6ImportExcel(event)">
                <button class="btn secondary"
                  style="padding:4px 10px; font-size:11px; color:#10b981; border-color:#10b981;"
                  onclick="document.getElementById('p6ImportXlsxInput').click()"><i class="fa-solid fa-file-import"></i> Importar</button>
                <button class="btn secondary" style="padding:4px 10px; font-size:11px;" onclick="p6ExportExcel()"><i class="fa-solid fa-file-export icon-excel"></i> Exportar</button>
                <button class="btn secondary"
                  style="padding:4px 10px; font-size:11px; color:var(--accent); border-color:var(--accent);"
                  onclick="p6OpenUdfManager()"><i class="fa-solid fa-sliders"></i> 
                  CDU</button>
                <button class="btn secondary"
                  style="padding:4px 10px; font-size:11px; color:#22c55e; border-color:#22c55e;"
                  onclick="p6UploadToFirebase()"><i class="fa-solid fa-cloud-arrow-up"></i> Subir</button>
              </div>
            </header>

            <div id="p6-mode-activities" class="p6-split-v">
              <!-- Left: Operations table -->
              <div class="p6-table-pane" id="p6TablePane">
                <table class="p6-table">
                  <thead>
                    <tr id="p6TableHeader" style="height:60px; box-sizing:border-box;">
                      <th style="width:60px;">WBS</th>
                      <th style="width:100px;">ID Actividad</th>
                      <th>Nombre de la Actividad</th>
                      <th style="width:80px; text-align:center;">Dur Reg</th>
                      <th style="width:80px; text-align:center;">HH</th>
                      <th style="width:100px;">Inicio</th>
                      <th style="width:100px;">Fin</th>
                      <th style="width:60px;">% Av</th>
                      <th style="width:30px;"></th>
                    </tr>
                  </thead>
                  <tbody id="p6TableBody">
                    <!-- Filas dinámicas -->
                  </tbody>
                </table>
              </div>
              <div id="p6Splitter"
                style="width: 6px; cursor: col-resize; background: rgba(120,120,120,0.2); z-index: 10; transition: background 0.2s;"
                onmouseover="this.style.background='var(--accent)'"
                onmouseout="this.style.background='rgba(120,120,120,0.2)'"></div>
              <!-- Right: Gantt chart -->
              <div class="p6-gantt-pane" id="p6GanttContainer" style="position:relative;">
                <div class="gantt-timeline-header" id="p6GanttTimeline">
                  <!-- Cabecera de fechas -->
                </div>
                <div id="p6GanttRows" style="position:relative; z-index:1;">
                  <!-- Barras de Gantt -->
                </div>
                <!-- Capa de enlaces SVG -->
                <svg id="p6GanttSVG"
                  style="position:absolute; top:60px; left:0; width:100%; height:100%; pointer-events:none; z-index:0;"></svg>
              </div>
            </div>

            <!-- Mode: Resources (Full Screen in workspace) -->
            <div id="p6-mode-resources" style="display:none; flex:1; flex-direction:column; padding:20px;">
              <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px;">
                <h3>Gestionar Recursos del Proyecto</h3>
                <button class="btn btn-primary" onclick="p6OpenNewResource()"><i class="fa-solid fa-user-plus"></i> Nuevo Recurso</button>
              </div>
              <div class="table-wrap" style="flex:1;">
                <table class="table">
                  <thead>
                    <tr>
                      <th>Identificador</th>
                      <th>Nombre de Recurso</th>
                      <th>Tipo de Recurso</th>
                      <th>Especialidad</th>
                      <th>Max Unid/Hora</th>
                      <th>Acción</th>
                    </tr>
                  </thead>
                  <tbody id="p6ResourcesListTable"></tbody>
                </table>
              </div>
            </div>

            <!-- Mode: Global Histogram (Full Space) -->
            <div id="p6-mode-histogram" style="display:none; flex:1; flex-direction:column; padding:20px;">
              <div
                style="display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; font-family:var(--p6-font);">
                <h3> Histograma Global de Recursos</h3>
                <div style="font-size:12px; color:var(--muted);">Demanda acumulada por especialidad.</div>
              </div>
              <div
                style="flex:1; background:var(--panel-inner); border-radius:12px; padding:20px; border:1px solid var(--border); min-height:400px; position:relative;">
                <canvas id="p6GlobalHistogramCanvas"></canvas>
              </div>
            </div>

            <!-- Bottom Panel (Details) -->
            <div class="p6-details-pane" id="p6DetailsPane">
              <div class="p6-details-tabs">
                <div class="p6-tab active" data-tab="general" onclick="p6SwitchTab('general')">General</div>
                <div class="p6-tab" data-tab="resources" onclick="p6SwitchTab('resources')">Recursos</div>
                <div class="p6-tab" data-tab="relationships" onclick="p6SwitchTab('relationships')">Relaciones</div>
              </div>
              <div class="p6-tab-content" id="p6TabContent">
                <div id="p6Tab-general" style="display:block;"></div>
                <div id="p6Tab-resources" style="display:none;"></div>
                <div id="p6Tab-relationships" style="display:none;"></div>
              </div>
            </div>


                  <option value="four_three">Turno 4x3 (Adm)</option>
                </select>
              </label>
              <label class="field"><span>Capacidad Diaria (Unidades)</span><input type="number" id="p6_res_max"
                  value="8" step="0.5"></label>
            </div>
            <div style="margin-top:20px; display:flex; gap:10px;">
              <button class="btn btn-primary wide" onclick="p6SaveResource()">Guardar Recurso</button>
            </div>
          </div>
        </div>
      </div>


  </div>

  <!-- MODAL RELACIONES P6 -->
  <div id="p6RelModal" class="modal" aria-hidden="true" style="z-index:11000;">
    <div class="modal-backdrop" onclick="p6CloseRelModal()"></div>
    <div class="modal-card compact-modal" style="max-width: 450px;">
      <div class="modal-head">
        <div class="modal-title">Asignar Relación</div>
        <button class="icon-btn" onclick="p6CloseRelModal()"></button>
      </div>
      <div class="modal-body" style="padding:20px;">
        <div class="form-grid" style="grid-template-columns:1fr;">
          <label class="field"><span>Actividad Selecciónada</span><input type="text" id="p6_rel_active_id"
              readonly></label>
          <label class="field"><span>Actividad Vinculada</span>
            <select id="p6_rel_target_id" style="width:100%;">
              <option value="">-- Selecciónar Actividad --</option>
            </select>
          </label>
          <label class="field"><span>Tipo de Relación</span>
            <select id="p6_rel_type">
              <option value="FS">Fin a Comienzo (FS)</option>
              <option value="SS">Comienzo a Comienzo (SS)</option>
              <option value="FF">Fin a Fin (FF)</option>
              <option value="SF">Comienzo a Fin (SF)</option>
            </select>
          </label>
          <label class="field"><span>Demora (Lag) en Días</span><input type="number" id="p6_rel_lag" value="0"></label>
        </div>
        <div style="margin-top:20px; display:flex; gap:10px;">
          <button class="btn btn-primary wide" onclick="p6SaveRelationship()">Vincular Actividad</button>
        </div>
      </div>
    </div>
  </div>

  <!-- MODAL CALENDARIOS P6 -->
  <!-- MODAL: GESTOR DE CALENDARIOS AVANZADO -->
  <div id="p6CalendarModal" class="modal" aria-hidden="true" style="z-index:11000;">
    <div class="modal-backdrop" onclick="document.getElementById('p6CalendarModal').style.display='none'"></div>
    <div class="modal-card" style="max-width: 900px; width: 95%; height: 85vh; display: flex; flex-direction: column;">
      <div class="modal-head">
        <div class="modal-title"> Gestor de Calendarios del Proyecto</div>
        <button class="icon-btn" onclick="document.getElementById('p6CalendarModal').style.display='none'"></button>
      </div>

      <div class="modal-body" style="flex:1; display:flex; gap:0; padding:0; overflow:hidden;">
        <!-- Sidebar: Listado de Calendarios -->
        <div
          style="width:240px; border-right:1px solid var(--border); background:rgba(0,0,0,0.1); display:flex; flex-direction:column;">
          <div style="padding:15px; border-bottom:1px solid var(--border);">
            <button class="btn btn-primary wide" style="font-size:11px;" onclick="p6CreateNewCalendar()">âž• Nuevo
              Calendario</button>
          </div>
          <div id="p6CalendarList"
            style="flex:1; overflow-y:auto; padding:10px; display:flex; flex-direction:column; gap:6px;">
            <!-- Lista de calendarios -->
          </div>
        </div>

        <!-- Main Content: Editor de Calendario -->
        <div style="flex:1; display:flex; flex-direction:column; background:var(--panel);">
          <!-- Header del Editor -->
          <div
            style="padding:12px 20px; border-bottom:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
            <div id="p6CalEditorTitle" style="font-weight:700; color:var(--accent);">Selecciónar Calendario</div>
            <div style="display:flex; gap:10px;">
              <select id="p6CalViewMode" onchange="p6RenderCalendarGrid()"
                style="font-size:10px; background:rgba(255,255,255,0.05); color:#fff; border:1px solid var(--border); border-radius:4px; padding:2px 5px;">
                <option value="month">Mensual</option>
                <option value="week">Semanal</option>
              </select>
              <button class="btn secondary" style="font-size:10px; padding:4px 8px;"
                onclick="p6PrevMonth()">â—€</button>
              <div id="p6CalCurrentMonth" style="font-size:12px; font-weight:700; width:120px; text-align:center;">Junio
                2024</div>
              <button class="btn secondary" style="font-size:10px; padding:4px 8px;"
                onclick="p6NextMonth()">â–¶</button>
            </div>
          </div>

          <!-- Vista de Calendario (Grid) -->
          <div style="flex:1; display:flex; flex-direction:column; overflow:hidden;">
            <div id="p6CalendarGrid"
              style="flex:1; display:grid; grid-template-columns: repeat(7, 1fr); grid-auto-rows: 1fr; overflow-y:auto;">
              <!-- Días del mes -->
            </div>
          </div>

          <!-- Footer/Sidebar Derecha: Configuración del Día Selecciónado -->
          <div id="p6DayEditor"
            style="height:150px; border-top:2px solid var(--border); background:var(--p6-header); padding:12px 20px; display:none;">
            <div style="display:flex; justify-content:space-between; margin-bottom:10px;">
              <div id="p6SelectedDayLabel" style="font-size:11px; font-weight:700; color:var(--accent);">Detalle del
                Día</div>
              <label style="font-size:11px; display:flex; align-items:center; gap:6px; cursor:pointer;">
                <input type="checkbox" id="p6DayIsWorking" onchange="p6ToggleDayWorking()"> Laborable
              </label>
            </div>
            <div style="display:flex; gap:15px; align-items:flex-start;">
              <div style="flex:1;">
                <div style="font-size:9px; color:var(--muted); margin-bottom:5px;">RANGOS DE TRABAJO</div>
                <div id="p6DayRanges" style="display:flex; flex-wrap:wrap; gap:8px;">
                  <!-- Input de rangos -->
                </div>
              </div>
              <button class="btn btn-primary" style="font-size:10px; padding:6px 12px;" onclick="p6AddRangeToDay()">+
                Rango</button>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-foot"
        style="padding:10px 20px; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center;">
        <div style="font-size:10px; color:var(--muted);">* Los calendarios se guardan globalmente en el proyecto.</div>
        <div style="display:flex; gap:10px;">
          <button class="btn secondary"
            onclick="document.getElementById('p6CalendarModal').style.display='none'">Cerrar</button>
          <button class="btn btn-primary" onclick="p6SaveAllCalendars()">Guardar Cambios</button>
        </div>
      </div>
    </div>
  </div>

  <!-- UDF (CDU) Manager Modal -->
  <div id="p6UdfModal" class="modal-overlay"
    style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:20000; background:rgba(0,0,0,0.6); backdrop-filter:blur(5px); align-items:center; justify-content:center;">
    <div class="modal-content"
      style="width:600px; border-radius:20px; border:1px solid var(--border); box-shadow:0 40px 100px rgba(0,0,0,1); background:var(--bg-panel); display:flex; flex-direction:column; max-height:85vh; transform:none; position:relative;">
      <div class="modal-head"
        style="background:var(--p6-header); padding:15px 20px; border-bottom:1px solid var(--border);">
        <div style="font-weight:900; color:var(--accent);">âš™ï¸ GESTIÃ“N DE CAMPOS DEFINIDOS POR USUARIO (CDU)</div>
        <button class="btn-icon" onclick="document.getElementById('p6UdfModal').style.display='none'"></button>
      </div>
      <div class="modal-body" style="padding:20px;">
        <div
          style="display:flex; gap:10px; margin-bottom:20px; background:rgba(0,0,0,0.1); padding:12px; border-radius:8px; align-items:flex-end;">
          <div style="flex:1;">
            <label style="font-size:10px; display:block; margin-bottom:4px;">Nombre del Campo</label>
            <input type="text" id="p6NewUdfName" placeholder="Ej: Fase, Contratista..."
              style="width:100%; font-size:12px; padding:6px;">
          </div>
          <div style="width:120px;">
            <label style="font-size:10px; display:block; margin-bottom:4px;">Tipo</label>
            <select id="p6NewUdfType" style="width:100%; font-size:12px; padding:6px;">
              <option value="text">Texto</option>
              <option value="number">Número</option>
              <option value="date">Fecha</option>
            </select>
          </div>
          <button class="btn btn-primary" style="padding:8px 15px;" onclick="p6AddUdfDefinition()">+ Agregar</button>
        </div>

        <div style="font-size:11px; font-weight:700; color:var(--muted); margin-bottom:10px; text-transform:uppercase;">
          Campos Actuales</div>
        <div id="p6UdfList"
          style="max-height:150px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; margin-bottom:20px;">
          <!-- Lista de UDFs -->
        </div>

        <div style="font-size:11px; font-weight:700; color:var(--muted); margin-bottom:10px; text-transform:uppercase;">
          Configuración de Columnas</div>
        <div id="p6ColumnConfigList"
          style="max-height:200px; overflow-y:auto; border:1px solid var(--border); border-radius:8px;">
          <!-- Lista de configuración de columnas -->
        </div>
      </div>
      <div class="modal-foot" style="padding:15px 20px; border-top:1px solid var(--border); text-align:right;">
        <button class="btn secondary"
          onclick="document.getElementById('p6UdfModal').style.display='none'">Cerrar</button>
        <button class="btn btn-primary"
          onclick="p6SaveProject(); p6RenderAll(); document.getElementById('p6UdfModal').style.display='none';">Guardar
          y Aplicar</button>
      </div>
    </div>
  </div>

  <style>
    .p6-cal-dow {
      font-size: 9px;
      font-weight: 700;
      color: var(--muted);
      text-align: center;
      padding: 6px;
    }

    .p6-cal-day {
      border-right: 1px solid rgba(255, 255, 255, 0.05);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      padding: 6px;
      cursor: pointer;
      min-height: 60px;
      transition: all 0.2s;
    }

    .p6-cal-day:hover {
      background: rgba(255, 255, 255, 0.05);
    }

    .p6-cal-day.today {
      border: 1px solid var(--accent);
    }

    .p6-cal-day.selected {
      background: rgba(249, 115, 22, 0.1);
      box-shadow: inset 0 0 0 1px var(--accent);
    }

    .p6-cal-day.non-working {
      background: rgba(239, 68, 68, 0.05);
    }

    .p6-cal-day.other-month {
      opacity: 0.3;
      pointer-events: none;
    }

    .p6-cal-day-num {
      font-size: 10px;
      font-weight: 700;
      margin-bottom: 4px;
    }

    .p6-cal-day-info {
      font-size: 8px;
      line-height: 1.2;
      color: var(--muted);
    }

    .p6-cal-item {
      padding: 10px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 11px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.2s;
    }

    .p6-cal-item:hover {
      background: rgba(255, 255, 255, 0.1);
    }

    .p6-cal-item.active {
      background: var(--accent);
      color: #fff;
    }

    .p6-range-tag {
      background: var(--panel-inner);
      border: 1px solid var(--border);
      border-radius: 4px;
      padding: 3px 6px;
      display: flex;
      align-items: center;
      gap: 5px;
      font-size: 10px;
    }

    .p6-range-tag input {
      background: transparent;
      border: none;
      color: inherit;
      font-size: 10px;
      width: 45px;
    }
  </style>
  <section id="section-reports" class="app-section" style="display:none;">
    <div class="panel inner" style="margin-top:0;">
      <div class="inner-head">
        <h3>Reportes Diarios de Trabajo</h3>
        <div class="hint">Ingresa reportes diarios de manera digital facilitando el analisis de datos de terreno
        </div>
      </div>
      <div
        style="padding: 40px; text-align: center; background: rgba(0,0,0,0.1); border-radius: 12px; margin-top: 20px; border: 1px dashed var(--border);">
        <div style="font-size: 60px; margin-bottom: 20px; color: var(--accent);"><i class="fa-solid fa-file-invoice"></i></div>
        <h2 style="color: var(--accent); margin-bottom: 15px;">Formulario Digital de Terreno</h2>
        <p style="color: var(--muted); max-width: 500px; margin: 0 auto 30px; line-height: 1.6;">
          Optimice la captura de datos en terreno. Complete el reporte digital para sincronizar automáticamente HH,
          avances y observaciones con el sistema central.
        </p>
        <button class="btn btn-primary" id="btnOpenDailyReportForm" onclick="AbrirReporte()"
          style="padding: 18px 40px; font-size: 16px; border-radius: 12px; box-shadow: 0 10px 20px rgba(247, 148, 113, 0.3); display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 auto;">
          <i class="fa-solid fa-file-pen" style="font-size: 20px;"></i> INGRESAR REPORTE
        </button>
      </div>
    </div>
  </section>

  <section id="section-search" class="app-section" style="display:none;">
    <div class="panel inner" style="margin-top:0;">
      <div class="inner-head">
        <h3>Buscador Global de Ã“rdenes</h3>
        <div class="hint">Busca una Orden de Trabajo (OT) en todas las revisiones del PSM.</div>
      </div>
      <div class="filter-bar">
        <label class="field" style="flex: 0 0 250px;">
          <span>Número de OT</span>
          <input type="text" id="searchOtInput" placeholder="Ej: OT-10025" />
        </label>
        <label class="field">
          <span>Área de Búsqueda</span>
          <select id="searchAreaSelect">
            <!-- Se llenará dinámicamente -->
          </select>
        </label>
        <button class="btn btn-primary" id="btnSearchGlobal"><i class="fa-solid fa-magnifying-glass"></i> Buscar en Histórico</button>
      </div>

      <div id="searchResults" style="margin-top: 20px;">
        <!-- Resultados o mensajes aquí -->
        <div class="note" style="display:none;" id="searchStatus"></div>
      </div>
    </div>
  </section>

  <!-- SECCION ORDENES -->
  <section id="section-orders" class="app-section" style="display:none;">
    <div class="panel inner" style="margin-top:0;">
      <div class="inner-head"
        style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px;">
        <h3>Listado de Ã“rdenes (Global)</h3>
        <div class="filter-bar">
          <label class="field" style="margin:0;">
            <span>Área</span>
            <select id="ordersArea">
              <option value="">Seleccióna Área</option>
              <option value="BEEARE1">BEEARE1</option>
              <option value="BEEARE2">BEEARE2</option>
              <option value="BEEARE3">BEEARE3</option>
            </select>
          </label>
          <label class="field" style="margin:0;">
            <span>Revisión (Opcional)</span>
            <select id="ordersRevision"></select>
          </label>
          <label class="field" style="margin:0;">
            <span>Estatus</span>
            <select id="ordersStatusFilter"></select>
          </label>
          <button id="btnExportOrdersExcel" class="btn primary"
            style="padding: 8px 16px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2); margin-top: auto;">
            <i class="fas fa-file-excel"></i> EXPORTAR EXCEL
          </button>
        </div>
      </div>
      <div class="table-wrap">
        <table class="table" id="tblOrdenes">
          <thead>
            <tr>
              <th>OT</th>
              <th>Descripción</th>
              <th>Área</th>
              <th>Planta</th>
              <th>Tipo</th>
              <th>Estatus</th>
              <th>Ops</th>
              <th>HH Plan</th>
              <th>HH Rep</th>
              <th>Ini Plan</th>
              <th>Fin Plan</th>
              <th>Ini Real</th>
              <th>Fin Real</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </section>

  <!-- SECCION OPERACIONES -->
  <section id="section-ops" class="app-section" style="display:none;">
    <div class="panel inner" style="margin-top:0;">
      <div class="inner-head" style="flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 20px;">
        <h3 style="flex-shrink: 0;">Operaciones (filtradas)</h3>

        <div class="filters-actions"
          style="display: flex; gap: 15px; align-items: center; flex-wrap: wrap; margin-left: auto;">
          <div class="field" style="margin:0; display:flex; align-items:center; gap:8px;">
            <label for="opsStatusFilter"
              style="font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px;">Estatus:</label>
            <select id="opsStatusFilter" class="technical-select"
              style="min-width: 150px; padding: 5px 10px; font-size: 13px;">
              <option value="">TODOS</option>
            </select>
          </div>

          <button id="btnExportOpsExcel" class="btn primary"
            style="padding: 8px 16px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 12px rgba(56, 189, 248, 0.2);">
            <i class="fas fa-file-excel"></i> EXPORTAR EXCEL
          </button>
        </div>

        <div class="hint"
          style="width: 100%; border-top: 1px solid var(--border); padding-top: 5px; margin-top: -10px;">Click sobre
          una
          fila para editar detalles de la operación.</div>
      </div>
      <div class="table-wrap" id="wrapOrdenes">
        <table class="table" id="tblOps">
          <thead>
            <tr>
              <th>OT</th>
              <th style="width:1%; white-space:nowrap;">Op</th>
              <th>Descripción Operación</th>
              <th>Área</th>
              <th>Planta</th>
              <th>Tipo</th>
              <th>Especialidad</th>

              <th>Estatus</th>
              <th class="day" title="HH planificadas">
                <div class="day-name">Mar</div>
                <div class="day-sums"><span class="hh hh-plan day-plan" data-day="Mar">0</span><span
                    class="hh hh-rep day-rep" data-day="Mar">0</span></div>
              </th>
              <th class="day" title="HH planificadas">
                <div class="day-name">Mié</div>
                <div class="day-sums"><span class="hh hh-plan day-plan" data-day="Mié">0</span><span
                    class="hh hh-rep day-rep" data-day="Mié">0</span></div>
              </th>
              <th class="day" title="HH planificadas">
                <div class="day-name">Jue</div>
                <div class="day-sums"><span class="hh hh-plan day-plan" data-day="Jue">0</span><span
                    class="hh hh-rep day-rep" data-day="Jue">0</span></div>
              </th>
              <th class="day" title="HH planificadas">
                <div class="day-name">Vie</div>
                <div class="day-sums"><span class="hh hh-plan day-plan" data-day="Vie">0</span><span
                    class="hh hh-rep day-rep" data-day="Vie">0</span></div>
              </th>
              <th class="day" title="HH planificadas">
                <div class="day-name">Sáb</div>
                <div class="day-sums"><span class="hh hh-plan day-plan" data-day="Sáb">0</span><span
                    class="hh hh-rep day-rep" data-day="Sáb">0</span></div>
              </th>
              <th class="day" title="HH planificadas">
                <div class="day-name">Dom</div>
                <div class="day-sums"><span class="hh hh-plan day-plan" data-day="Dom">0</span><span
                    class="hh hh-rep day-rep" data-day="Dom">0</span></div>
              </th>
              <th class="day" title="HH planificadas">
                <div class="day-name">Lun</div>
                <div class="day-sums"><span class="hh hh-plan day-plan" data-day="Lun">0</span><span
                    class="hh hh-rep day-rep" data-day="Lun">0</span></div>
              </th>

              <th>Plan</th>
              <th>Rep</th>
              <th>Acción</th>
            </tr>
          </thead>
          <tbody></tbody>
        </table>
      </div>
    </div>
  </section>

  <div class="modal" id="opModal" aria-hidden="true">
    <div class="modal-backdrop" data-close="1"></div>
    <div class="modal-card" id="DetalleOp" role="dialog" aria-modal="true" aria-labelledby="opModalTitle">
      <div class="modal-head">
        <div>
          <div class="modal-title" id="opModalTitle">Editar operación</div>
          <div class="modal-sub" id="opModalSub">â€”</div>
        </div>
        <button class="icon-btn" id="opModalClose" title="Cerrar"></button>
      </div>


      <div class="modal-body">
        <div class="modal-subtitle">Identificación, roles, HH, backlog, cobro, ítems económicos y cambios de
          alcance.
        </div>

        <div class="acc" id="opAcc">
          <button class="acc-item is-open" type="button" data-target="acc_ident">
            <span class="acc-title">Identificación</span>
            <span class="acc-meta">OT, N° Operación, revisión</span>
          </button>
          <div class="acc-panel" id="acc_ident">
            <div class="form-grid">
              <label class="field wide"><span>Descripción</span><input id="op_desc" /></label>
              <label class="field"><span>OT</span><input id="op_ot" disabled /></label>
              <label class="field"><span>Operación</span><input id="op_id" disabled /></label>
              <label class="field"><span>Revisión</span><input id="op_rev" /></label>
              <label class="field"><span>Planta</span><select id="op_planta"></select></label>
              <label class="field"><span>Área</span><select id="op_area"></select></label>
              <label class="field"><span>Puesto Trabajo</span>
                <select id="op_puesto">
                  <option value="BEEMECA">BEEMECA (Mecï¿½nica)"></option>
                  <option value="BEEPINT1">BEEPINT1 (Pintura)</option>
                  <option value="BEEPINT2">BEEPINT2 (Pintura)</option>
                  <option value="BEEPINT3">BEEPINT3 (Pintura)</option>
                  <option value="BEESOLD">BEESOLD (Sol/Pip)</option>
                  <option value="BEEANDA">BEEANDA (And)</option>
                  <option value="BEEAISLA">BEEAISLA (Ais)</option>
                  <option value="BEEAREX">BEEAREX (Ext)</option>
                </select>
              </label>
              <label class="field">
                <span>Especialidad</span>
                <select id="op_esp">
                  <option value="">-- Selecciónar --</option>
                  <option value="Mecánico">Mecánico</option>
                  <option value="Pintura">Pintura (BEEPINT)</option>
                  <option value="Piping">Piping</option>
                  <option value="Soldador">Soldador</option>
                  <option value="Andamio">Andamio</option>
                  <option value="Aislación">Aislación</option>
                  <option value="Electricista">Electricista</option>
                  <option value="Instrumentista">Instrumentista</option>
                  <option value="Civil">Civil</option>
                  <option value="Multidisciplina">Multidisciplina</option>
                </select>
              </label>

              <label class="field">
                <span>Tipo</span>
                <select id="op_tipo">
                  <option value="PSM">PSM</option>
                  <option value="EMERGENTE">Emergente</option>
                </select>
              </label>
              <label class="field">
                <span>Backlog</span>
                <select id="op_backlogFlag">
                  <option value="false">No</option>
                  <option value="true">Sí</option>
                </select>
              </label>
              <label class="field">
                <span>Estatus</span>
                <select id="op_status">
                  <option value="Programada">Programada</option>
                  <option value="Atrasada">Atrasada</option>
                  <option value="En Proceso">En Proceso</option>
                  <option value="Terminada">Terminada</option>
                </select>
              </label>
            </div>
          </div>

          <button class="acc-item" type="button" data-target="acc_dates">
            <span class="acc-title">Fechas de ejecución</span>
            <span class="acc-meta">inicio y término planificado vs reporte</span>
          </button>
          <div class="acc-panel" id="acc_dates">
            <div class="form-grid">
              <label class="field"><span>Inicio planificado</span><input id="op_iniPlan" type="date" /></label>
              <label class="field"><span>Término planificado</span><input id="op_finPlan" type="date" /></label>
              <label class="field"><span>Inicio reporte</span><input id="op_iniRep" type="date" /></label>
              <label class="field"><span>Término reporte</span><input id="op_finRep" type="date" /></label>
            </div>
          </div>

          <button class="acc-item" type="button" data-target="acc_roles">
            <span class="acc-title">Roles en operación</span>
            <span class="acc-meta">capataz, supervisor, prevencionista, QAQC</span>
          </button>
          <div class="acc-panel" id="acc_roles">
            <div class="form-grid">
              <label class="field"><span>Capataz contratista</span><input id="op_capataz"
                  placeholder="Nombre" /></label>
              <label class="field"><span>Supervisor contratista</span><input id="op_supervisor"
                  placeholder="Nombre" /></label>
              <label class="field"><span>Prevencionista contratista</span><input id="op_prevencion"
                  placeholder="Nombre" /></label>
              <label class="field"><span>QAQC contratista</span><input id="op_qaqc" placeholder="Nombre" /></label>
            </div>
            <div class="note">Campos opcionales para trazabilidad de roles en terreno.</div>
          </div>

          <button class="acc-item" type="button" data-target="acc_hh">
            <span class="acc-title">HH y tiempos</span>
            <span class="acc-meta">HH diarias, total, fechas</span>
          </button>
          <div class="acc-panel" id="acc_hh">
            <div class="section">
              <h4>HH por día (Marâ€“Lun)</h4>
              <div class="hh-grid">
                <div class="hh-col">
                  <div class="hh-title">Plan</div>
                  <!-- Fila Header Días -->
                  <div class="hh-row hh-header"
                    style="margin-bottom:4px; font-size:10px; color:var(--muted); font-weight:bold; text-align:center;">
                    <div>Mar</div>
                    <div>Mié</div>
                    <div>Jue</div>
                    <div>Vie</div>
                    <div>Sáb</div>
                    <div>Dom</div>
                    <div>Lun</div>
                  </div>
                  <div class="hh-row" id="hhPlanRow"></div>
                  <div class="hh-sum">Total: <strong id="hhPlanSum">0</strong></div>
                </div>
                <div class="hh-col">
                  <div class="hh-title">Reporte</div>
                  <!-- Fila Header Días -->
                  <div class="hh-row hh-header"
                    style="margin-bottom:4px; font-size:10px; color:var(--muted); font-weight:bold; text-align:center;">
                    <div>Mar</div>
                    <div>Mié</div>
                    <div>Jue</div>
                    <div>Vie</div>
                    <div>Sáb</div>
                    <div>Dom</div>
                    <div>Lun</div>
                  </div>
                  <div class="hh-row" id="hhRepRow"></div>
                  <div class="hh-sum">Total: <strong id="hhRepSum">0</strong></div>
                </div>
              </div>
            </div>
          </div>

          <button class="acc-item" type="button" data-target="acc_backlog">
            <span class="acc-title">Backlog y cobro</span>
            <span class="acc-meta">revisión backlog, estado de cobro</span>
          </button>
          <div class="acc-panel" id="acc_backlog">
            <div class="form-grid">
              <label class="field"><span>¿Es Backlog?</span>
                <select id="op_backlog">
                  <option value="false">No</option>
                  <option value="true">Sí</option>
                </select>
              </label>
              <label class="field"><span>Estado de cobro</span>
                <select id="op_cobro">
                  <option>Pendiente</option>
                  <option>Facturado</option>
                  <option>Cobrado</option>
                  <option>No Facturable</option>
                </select>
              </label>
            </div>
          </div>

          <button class="acc-item" type="button" data-target="acc_items">
            <span class="acc-title">Ítems económicos</span>
            <span class="acc-meta">oferta económica: cantidad, unidad, costo</span>
          </button>
          <div class="acc-panel" id="acc_items">
            <div class="note">Puedes pegar aquí los ítems en formato texto/JSON (opcional).</div>
            <label class="field wide">
              <span>Ítems</span>
              <textarea id="op_items" rows="4"
                placeholder='Ej: [{"codigo":"X","desc":"Servicio","cantidad":1,"unidad":"gl","precio":1000}]'></textarea>
            </label>
          </div>

          <button class="acc-item" type="button" data-target="acc_scope">
            <span class="acc-title">Aumento de obra / cambios de alcance</span>
            <span class="acc-meta">control de alcance</span>
          </button>
          <div class="acc-panel" id="acc_scope">
            <label class="field wide">
              <span>Detalle</span>
              <textarea id="op_scope" rows="4"
                placeholder="Describe aumento de obra, cambios de alcance, aprobaciones, etc."></textarea>
            </label>
          </div>

          <button class="acc-item" type="button" data-target="acc_comment">
            <span class="acc-title">Comentarios</span>
            <span class="acc-meta">observaciones y registro histórico</span>
          </button>
          <div class="acc-panel" id="acc_comment">
            <div id="op_comments_list"
              style="max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border);">
              <!-- Listado de comentarios registrados -->
            </div>
            <div style="display: flex; flex-direction: column; gap: 8px;">
              <label class="field wide">
                <span>Nuevo Comentario</span>
                <textarea id="op_new_comment" rows="2" placeholder="Escribe un comentario..."></textarea>
              </label>
              <button type="button" class="btn secondary" id="btn_add_comment" style="align-self: flex-end;">Agregar
                Comentario</button>
            </div>
          </div>
        </div>
      </div>

      <div class="modal-foot">
        <button class="btn secondary" id="opModalCancel">Cancelar</button>
        <button class="btn" id="opModalSave">Guardar</button>
      </div>
    </div>
  </div>

        </div>
      </div>
    </div>
    <div id="v2CduModal" class="v2-modal-overlay" style="display:none; align-items:center; justify-content:center;">
      <div class="v2-modal-box">
        <div class="v2-modal-head"><span class="v2-modal-title">Campos Definidos por Usuario (CDU)</span><button
            class="btn-icon" onclick="v2CloseModal('v2CduModal')">X</button></div>
        <div class="v2-modal-body">
          <div style="display:grid; grid-template-columns:1fr auto auto; gap:8px; align-items:end; margin-bottom:14px;">
            <div><label style="font-size:10px; display:block; margin-bottom:4px;">NOMBRE</label><input id="v2CduName"
                type="text" placeholder="Nombre del campo"
                style="width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:8px; font-size:11px;">
            </div>
            <div><label style="font-size:10px; display:block; margin-bottom:4px;">TIPO</label>
              <select id="v2CduType"
                style="background:var(--bg); border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:8px; font-size:11px;">
                <option value="text">Texto</option>
                <option value="number">Numero</option>
                <option value="date">Fecha</option>
              </select>
            </div>
            <button onclick="v2AddCdu()" class="v2-btn primary" style="height:32px; margin-top:auto;">Agregar</button>
          </div>
          <div id="v2CduList"></div>
        </div>
        <div class="v2-modal-footer"><button class="v2-btn" onclick="v2CloseModal('v2CduModal')">Cerrar</button></div>
      </div>
    </div>
    <div id="v2WbsModal" class="v2-modal-overlay" style="display:none; align-items:center; justify-content:center;">
      <div class="v2-modal-box">
        <div class="v2-modal-head"><span class="v2-modal-title">Estructura WBS</span><button class="btn-icon"
            onclick="v2CloseModal('v2WbsModal')">X</button></div>
        <div class="v2-modal-body">
          <div style="display:grid; grid-template-columns:80px 1fr auto; gap:8px; align-items:end; margin-bottom:14px;">
            <div><label style="font-size:10px; display:block; margin-bottom:4px;">CODIGO</label><input id="v2WbsCode"
                type="text" placeholder="1.1"
                style="width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:8px; font-size:11px;">
            </div>
            <div><label style="font-size:10px; display:block; margin-bottom:4px;">DESCRIPCION</label><input
                id="v2WbsDesc" type="text" placeholder="Descripcion"
                style="width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:8px; font-size:11px;">
            </div>
            <button onclick="v2AddWbs()" class="v2-btn primary" style="height:32px; margin-top:auto;">Agregar</button>
          </div>
          <div id="v2WbsList"></div>
        </div>
        <div class="v2-modal-footer"><button class="v2-btn" onclick="v2CloseModal('v2WbsModal')">Cerrar</button></div>
      </div>
    </div>
    <div id="v2ResModal" class="v2-modal-overlay" style="display:none; align-items:center; justify-content:center;">
      <div class="v2-modal-box" style="width:560px;">
        <div class="v2-modal-head"><span class="v2-modal-title">Gestion de Recursos</span><button class="btn-icon"
            onclick="v2CloseModal('v2ResModal')">X</button></div>
        <div class="v2-modal-body">
          <div style="display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:14px;">
            <div><label style="font-size:10px; display:block; margin-bottom:4px;">NOMBRE</label><input id="v2ResName"
                type="text" placeholder="Nombre"
                style="width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:8px; font-size:11px;">
            </div>
            <div><label style="font-size:10px; display:block; margin-bottom:4px;">ESPECIALIDAD</label><input
                id="v2ResSpecialty" type="text" placeholder="Especialidad"
                style="width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:8px; font-size:11px;">
            </div>
            <div><label style="font-size:10px; display:block; margin-bottom:4px;">UNIDAD</label><input id="v2ResUnit"
                type="text" placeholder="HH, m2..."
                style="width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:8px; font-size:11px;">
            </div>
            <div><label style="font-size:10px; display:block; margin-bottom:4px;">COSTO/HORA</label><input
                id="v2ResCost" type="number" placeholder="0"
                style="width:100%; background:var(--bg); border:1px solid var(--border); color:var(--text); padding:6px 10px; border-radius:8px; font-size:11px;">
            </div>
          </div>
          <button onclick="v2AddResource()" class="v2-btn primary" style="width:100%;">Agregar Recurso</button>
          <div style="margin-top:12px;" id="v2ResList"></div>
        </div>
        <div class="v2-modal-footer"><button class="v2-btn" onclick="v2CloseModal('v2ResModal')">Cerrar</button></div>
      </div>
    </div>
  </section>
  </main>


  <!-- Modal: Detalle de Orden -->
  <div class="modal" id="orderModal" aria-hidden="true">
    <div class="modal-backdrop" data-close="1"></div>
    <div class="modal-card modal-wide" id="detalleOt" role="dialog" aria-modal="true" aria-labelledby="orderModalTitle">
      <div class="modal-head">
        <div>
          <div class="modal-title" id="orderModalTitle">Detalle orden</div>
          <div class="modal-sub" id="orderModalSub">â€”</div>
        </div>
        <button class="icon-btn" data-close="1" title="Cerrar"></button>
      </div>

      <div class="modal-body">
        <div class="modal-subtitle">Resumen de la OT y sus operaciones en el PSM. Puedes agregar nuevas operaciones
          desde aquí.</div>

        <div class="form-grid">
          <label class="field"><span>OT</span><input id="ord_id" disabled /></label>
          <label class="field"><span>Área</span><select id="ord_area"></select></label>
          <label class="field"><span>Planta</span><select id="ord_planta"></select></label>
          <label class="field wide"><span>Descripción</span><input id="ord_desc" /></label>
        </div>

        <div class="section">
          <div class="section-head">
            <h4>Operaciones de la orden</h4>
            <button class="btn btn-primary" id="btnAddOp">+ Nueva operación</button>
          </div>

          <div class="table-wrap">
            <table class="table" id="tblOrderOps">
              <thead>
                <tr>
                  <th>Op</th>
                  <th>Especialidad</th>
                  <th>Revisión</th>
                  <th>Descripción</th>
                  <th class="day">
                    <div class="day-name">Mar</div>
                    <div class="day-sums"><span class="hh hh-plan day-plan" data-day="Mar">0</span><span
                        class="hh hh-rep day-rep" data-day="Mar">0</span></div>
                  </th>
                  <th class="day">
                    <div class="day-name">Mié</div>
                    <div class="day-sums"><span class="hh hh-plan day-plan" data-day="Mié">0</span><span
                        class="hh hh-rep day-rep" data-day="Mié">0</span></div>
                  </th>
                  <th class="day">
                    <div class="day-name">Jue</div>
                    <div class="day-sums"><span class="hh hh-plan day-plan" data-day="Jue">0</span><span
                        class="hh hh-rep day-rep" data-day="Jue">0</span></div>
                  </th>
                  <th class="day">
                    <div class="day-name">Vie</div>
                    <div class="day-sums"><span class="hh hh-plan day-plan" data-day="Vie">0</span><span
                        class="hh hh-rep day-rep" data-day="Vie">0</span></div>
                  </th>
                  <th class="day">
                    <div class="day-name">Sáb</div>
                    <div class="day-sums"><span class="hh hh-plan day-plan" data-day="Sáb">0</span><span
                        class="hh hh-rep day-rep" data-day="Sáb">0</span></div>
                  </th>
                  <th class="day">
                    <div class="day-name">Dom</div>
                    <div class="day-sums"><span class="hh hh-plan day-plan" data-day="Dom">0</span><span
                        class="hh hh-rep day-rep" data-day="Dom">0</span></div>
                  </th>
                  <th class="day">
                    <div class="day-name">Lun</div>
                    <div class="day-sums"><span class="hh hh-plan day-plan" data-day="Lun">0</span><span
                        class="hh hh-rep day-rep" data-day="Lun">0</span></div>
                  </th>
                  <th>HH Plan</th>
                  <th>HH Rep</th>
                  <th>Estado</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>

          <div class="note">Tip: haz click en <strong>Editar</strong> para abrir el detalle de la operación.</div>
        </div>
      </div>

      <div class="modal-foot">
        <button class="btn" data-close="1">Cerrar</button>
        <button class="btn btn-primary" id="btnSaveOrder">Guardar</button>
      </div>
    </div>
  </div>
  <!-- MODAL META PSM -->
  <div class="modal" id="metaModal" aria-hidden="true">
    <div class="modal-backdrop" data-close="1"></div>
    <div class="modal-card compact-modal">
      <div class="modal-head">
        <div>
          <h2 class="modal-title">Configuración del PSM</h2>
          <div class="modal-sub" id="metaModalSub">Metadatos de la revisión actual</div>
        </div>
        <button class="btn btn-close" data-close="1">&times;</button>
      </div>
      <div class="modal-body">
        <div class="form-grid">
          <label class="field">
            <span>Área</span>
            <select id="meta_area">
              <option value="BEEARE1">BEEARE1</option>
              <option value="BEEARE2">BEEARE2</option>
              <option value="BEEARE3">BEEARE3</option>
            </select>
          </label>
          <label class="field"><span>Fecha Inicio</span><input id="meta_ini" type="date" /></label>
          <label class="field"><span>Fecha Fin</span><input id="meta_fin" type="date" /></label>
          <label class="field"><span>Fuente</span><input id="meta_fuente" disabled /></label>
          <label class="field"><span>Hoja</span><input id="meta_hoja" disabled /></label>
          <label class="field"><span>Revisión</span><input id="meta_rev" disabled /></label>
        </div>

        <!-- SECCIÃ“N DOTACIÃ“N PROYECTADA -->
        <div class="section" style="margin-top: 15px;">
          <div class="section-head" style="display: flex; justify-content: space-between; align-items: center;">
            <div>
              <h4>Dotación Proyectada (Planificación Inicial)</h4>
              <div class="hint">Personal enviado previamente al cliente para la planificación del PSM</div>
            </div>
            <button class="btn btn-secondary btn-sm" id="btnReplicateDotation"
              title="Copia el valor de Martes a Lun-Vie, Sáb-Dom en 0">
               Replicar Martes
            </button>
          </div>
          <div class="table-wrap">
            <table class="table table-asistencia" id="tblDotacion">
              <thead>
                <tr class="red-header">
                  <th rowspan="2" style="vertical-align: middle;">Especialidad</th>
                  <th>Mar</th>
                  <th>Mié</th>
                  <th>Jue</th>
                  <th>Vie</th>
                  <th>Sáb</th>
                  <th>Dom</th>
                  <th>Lun</th>
                </tr>
                <tr class="date-header" id="dotacionDatesRow">
                  <th>-</th>
                  <th>-</th>
                  <th>-</th>
                  <th>-</th>
                  <th>-</th>
                  <th>-</th>
                  <th>-</th>
                </tr>
              </thead>
              <tbody>
                <tr data-role="MECANICO">
                  <td class="role-label">MECÁNICO</td>
                  <td><input type="number" step="1" min="0" data-day="0" /></td>
                  <td><input type="number" step="1" min="0" data-day="1" /></td>
                  <td><input type="number" step="1" min="0" data-day="2" /></td>
                  <td><input type="number" step="1" min="0" data-day="3" /></td>
                  <td><input type="number" step="1" min="0" data-day="4" /></td>
                  <td><input type="number" step="1" min="0" data-day="5" /></td>
                  <td><input type="number" step="1" min="0" data-day="6" /></td>
                </tr>
                <tr data-role="ANDAMIO">
                  <td class="role-label">ANDAMIO</td>
                  <td><input type="number" step="1" min="0" data-day="0" /></td>
                  <td><input type="number" step="1" min="0" data-day="1" /></td>
                  <td><input type="number" step="1" min="0" data-day="2" /></td>
                  <td><input type="number" step="1" min="0" data-day="3" /></td>
                  <td><input type="number" step="1" min="0" data-day="4" /></td>
                  <td><input type="number" step="1" min="0" data-day="5" /></td>
                  <td><input type="number" step="1" min="0" data-day="6" /></td>
                </tr>
                <tr data-role="AISLACION">
                  <td class="role-label">AISLACIÃ“N</td>
                  <td><input type="number" step="1" min="0" data-day="0" /></td>
                  <td><input type="number" step="1" min="0" data-day="1" /></td>
                  <td><input type="number" step="1" min="0" data-day="2" /></td>
                  <td><input type="number" step="1" min="0" data-day="3" /></td>
                  <td><input type="number" step="1" min="0" data-day="4" /></td>
                  <td><input type="number" step="1" min="0" data-day="5" /></td>
                  <td><input type="number" step="1" min="0" data-day="6" /></td>
                </tr>
                <tr data-role="SOLDADURA">
                  <td class="role-label">SOLDADURA</td>
                  <td><input type="number" step="1" min="0" data-day="0" /></td>
                  <td><input type="number" step="1" min="0" data-day="1" /></td>
                  <td><input type="number" step="1" min="0" data-day="2" /></td>
                  <td><input type="number" step="1" min="0" data-day="3" /></td>
                  <td><input type="number" step="1" min="0" data-day="4" /></td>
                  <td><input type="number" step="1" min="0" data-day="5" /></td>
                  <td><input type="number" step="1" min="0" data-day="6" /></td>
                </tr>
                <tr data-role="PINTURA">
                  <td class="role-label">PINTURA</td>
                  <td><input type="number" step="1" min="0" data-day="0" /></td>
                  <td><input type="number" step="1" min="0" data-day="1" /></td>
                  <td><input type="number" step="1" min="0" data-day="2" /></td>
                  <td><input type="number" step="1" min="0" data-day="3" /></td>
                  <td><input type="number" step="1" min="0" data-day="4" /></td>
                  <td><input type="number" step="1" min="0" data-day="5" /></td>
                  <td><input type="number" step="1" min="0" data-day="6" /></td>
                </tr>
                <tr data-role="CIVIL">
                  <td class="role-label">CIVIL</td>
                  <td><input type="number" step="1" min="0" data-day="0" /></td>
                  <td><input type="number" step="1" min="0" data-day="1" /></td>
                  <td><input type="number" step="1" min="0" data-day="2" /></td>
                  <td><input type="number" step="1" min="0" data-day="3" /></td>
                  <td><input type="number" step="1" min="0" data-day="4" /></td>
                  <td><input type="number" step="1" min="0" data-day="5" /></td>
                  <td><input type="number" step="1" min="0" data-day="6" /></td>
                </tr>
                <tr data-role="EXTERNOS">
                  <td class="role-label">EXTERNOS</td>
                  <td><input type="number" step="1" min="0" data-day="0" /></td>
                  <td><input type="number" step="1" min="0" data-day="1" /></td>
                  <td><input type="number" step="1" min="0" data-day="2" /></td>
                  <td><input type="number" step="1" min="0" data-day="3" /></td>
                  <td><input type="number" step="1" min="0" data-day="4" /></td>
                  <td><input type="number" step="1" min="0" data-day="5" /></td>
                  <td><input type="number" step="1" min="0" data-day="6" /></td>
                </tr>
              </tbody>
              <tfoot>
                <tr class="row-total" id="rowTotalDotacion">
                  <td>TOTAL PERSONAS</td>
                  <td data-day="0">0</td>
                  <td data-day="1">0</td>
                  <td data-day="2">0</td>
                  <td data-day="3">0</td>
                  <td data-day="4">0</td>
                  <td data-day="5">0</td>
                  <td data-day="6">0</td>
                </tr>
                <tr class="row-hours" id="rowHorasProyectadas">
                  <td>HORAS JORNADA</td>
                  <td><input type="number" step="0.5" min="0" value="0" /></td>
                  <td><input type="number" step="0.5" min="0" value="0" /></td>
                  <td><input type="number" step="0.5" min="0" value="0" /></td>
                  <td><input type="number" step="0.5" min="0" value="0" /></td>
                  <td><input type="number" step="0.5" min="0" value="0" /></td>
                  <td><input type="number" step="0.5" min="0" value="0" /></td>
                  <td><input type="number" step="0.5" min="0" value="0" /></td>
                </tr>
                <tr class="row-available" id="rowHHDotacionDisponible">
                  <td>HH DISPONIBLES (PROY)</td>
                  <td data-day="0">0</td>
                  <td data-day="1">0</td>
                  <td data-day="2">0</td>
                  <td data-day="3">0</td>
                  <td data-day="4">0</td>
                  <td data-day="5">0</td>
                  <td data-day="6">0</td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>

        <!-- SECCIÃ“N ASISTENCIA -->
        <div class="section" style="margin-top: 24px;">
          <div class="section-head">
            <h4>Registro de Asistencia Global (Todas las Áreas)</h4>
            <div class="hint">Cálculo de HH Reales para el PSM completo</div>
          </div>
          <div class="table-wrap">
            <table class="table table-asistencia" id="tblAsistencia">
              <thead>
                <tr class="red-header">
                  <th rowspan="2" style="vertical-align: middle;">Especialidad</th>
                  <th>Mar</th>
                  <th>Mié</th>
                  <th>Jue</th>
                  <th>Vie</th>
                  <th>Sáb</th>
                  <th>Dom</th>
                  <th>Lun</th>
                </tr>
                <tr class="date-header" id="asistenciaDatesRow">
                  <th>-</th>
                  <th>-</th>
                  <th>-</th>
                  <th>-</th>
                  <th>-</th>
                  <th>-</th>
                  <th>-</th>
                </tr>
              </thead>
              <tbody>
                <tr data-role="MECANICO">
                  <td class="role-label">MECÁNICO</td>
                  <td><input type="number" step="1" min="0" data-day="0" /></td>
                  <td><input type="number" step="1" min="0" data-day="1" /></td>
                  <td><input type="number" step="1" min="0" data-day="2" /></td>
                  <td><input type="number" step="1" min="0" data-day="3" /></td>
                  <td><input type="number" step="1" min="0" data-day="4" /></td>
                  <td><input type="number" step="1" min="0" data-day="5" /></td>
                  <td><input type="number" step="1" min="0" data-day="6" /></td>
                </tr>
                <tr data-role="ANDAMIO">
                  <td class="role-label">ANDAMIO</td>
                  <td><input type="number" step="1" min="0" data-day="0" /></td>
                  <td><input type="number" step="1" min="0" data-day="1" /></td>
                  <td><input type="number" step="1" min="0" data-day="2" /></td>
                  <td><input type="number" step="1" min="0" data-day="3" /></td>
                  <td><input type="number" step="1" min="0" data-day="4" /></td>
                  <td><input type="number" step="1" min="0" data-day="5" /></td>
                  <td><input type="number" step="1" min="0" data-day="6" /></td>
                </tr>
                <tr data-role="AISLACION">
                  <td class="role-label">AISLACIÃ“N</td>
                  <td><input type="number" step="1" min="0" data-day="0" /></td>
                  <td><input type="number" step="1" min="0" data-day="1" /></td>
                  <td><input type="number" step="1" min="0" data-day="2" /></td>
                  <td><input type="number" step="1" min="0" data-day="3" /></td>
                  <td><input type="number" step="1" min="0" data-day="4" /></td>
                  <td><input type="number" step="1" min="0" data-day="5" /></td>
                  <td><input type="number" step="1" min="0" data-day="6" /></td>
                </tr>
                <tr data-role="SOLDADURA">
                  <td class="role-label">SOLDADURA</td>
                  <td><input type="number" step="1" min="0" data-day="0" /></td>
                  <td><input type="number" step="1" min="0" data-day="1" /></td>
                  <td><input type="number" step="1" min="0" data-day="2" /></td>
                  <td><input type="number" step="1" min="0" data-day="3" /></td>
                  <td><input type="number" step="1" min="0" data-day="4" /></td>
                  <td><input type="number" step="1" min="0" data-day="5" /></td>
                  <td><input type="number" step="1" min="0" data-day="6" /></td>
                </tr>
                <tr data-role="PINTURA">
                  <td class="role-label">PINTURA</td>
                  <td><input type="number" step="1" min="0" data-day="0" /></td>
                  <td><input type="number" step="1" min="0" data-day="1" /></td>
                  <td><input type="number" step="1" min="0" data-day="2" /></td>
                  <td><input type="number" step="1" min="0" data-day="3" /></td>
                  <td><input type="number" step="1" min="0" data-day="4" /></td>
                  <td><input type="number" step="1" min="0" data-day="5" /></td>
                  <td><input type="number" step="1" min="0" data-day="6" /></td>
                </tr>
                <tr data-role="CIVIL">
                  <td class="role-label">CIVIL</td>
                  <td><input type="number" step="1" min="0" data-day="0" /></td>
                  <td><input type="number" step="1" min="0" data-day="1" /></td>
                  <td><input type="number" step="1" min="0" data-day="2" /></td>
                  <td><input type="number" step="1" min="0" data-day="3" /></td>
                  <td><input type="number" step="1" min="0" data-day="4" /></td>
                  <td><input type="number" step="1" min="0" data-day="5" /></td>
                  <td><input type="number" step="1" min="0" data-day="6" /></td>
                </tr>
                <tr data-role="EXTERNOS">
                  <td class="role-label">EXTERNOS</td>
                  <td><input type="number" step="1" min="0" data-day="0" /></td>
                  <td><input type="number" step="1" min="0" data-day="1" /></td>
                  <td><input type="number" step="1" min="0" data-day="2" /></td>
                  <td><input type="number" step="1" min="0" data-day="3" /></td>
                  <td><input type="number" step="1" min="0" data-day="4" /></td>
                  <td><input type="number" step="1" min="0" data-day="5" /></td>
                  <td><input type="number" step="1" min="0" data-day="6" /></td>
                </tr>
              </tbody>
              <tfoot>
                <tr class="row-total" id="rowTotalDirectos">
                  <td>TOTAL PERSONAS</td>
                  <td data-day="0">0</td>
                  <td data-day="1">0</td>
                  <td data-day="2">0</td>
                  <td data-day="3">0</td>
                  <td data-day="4">0</td>
                  <td data-day="5">0</td>
                  <td data-day="6">0</td>
                </tr>
                <tr class="row-hours" id="rowHorasTurno">
                  <td>HORAS TURNO</td>
                  <td><input type="number" step="0.5" min="0" value="0" /></td>
                  <td><input type="number" step="0.5" min="0" value="0" /></td>
                  <td><input type="number" step="0.5" min="0" value="0" /></td>
                  <td><input type="number" step="0.5" min="0" value="0" /></td>
                  <td><input type="number" step="0.5" min="0" value="0" /></td>
                  <td><input type="number" step="0.5" min="0" value="0" /></td>
                  <td><input type="number" step="0.5" min="0" value="0" /></td>
                </tr>
                <tr class="row-available" id="rowHHDisponible">
                  <td>HH DISPONIBLES</td>
                  <td data-day="0">0</td>
                  <td data-day="1">0</td>
                  <td data-day="2">0</td>
                  <td data-day="3">0</td>
                  <td data-day="4">0</td>
                  <td data-day="5">0</td>
                  <td data-day="6">0</td>
                </tr>
              </tfoot>
            </table>
          </div>
        </div>
      </div>
      <div class="modal-foot">
        <button class="btn" data-close="1">Cerrar</button>
        <button class="btn btn-primary" id="btnSaveMeta">Guardar Cambios</button>
      </div>
    </div>
  </div>

  <!-- MODAL % OCUPACIÃ“N -->
  <div class="modal" id="occupancyModal" aria-hidden="true">
    <div class="modal-backdrop" data-close="1"></div>
    <div class="modal-card" style="max-width: 900px;">
      <div class="modal-head">
        <div>
          <h2 class="modal-title">% de Ocupación por Especialidad</h2>
          <div class="modal-sub" id="occupancyModalSub">HH Planificadas vs HH Disponibles (Dotación Proyectada)</div>
        </div>
        <button class="btn btn-close" data-close="1">&times;</button>
      </div>
      <div class="modal-body">
        <div class="table-wrap">
          <table class="table table-asistencia" id="tblOccupancy">
            <thead>
              <tr class="red-header">
                <th rowspan="2" style="vertical-align: middle;">Especialidad</th>
                <th>Mar</th>
                <th>Mié</th>
                <th>Jue</th>
                <th>Vie</th>
                <th>Sáb</th>
                <th>Dom</th>
                <th>Lun</th>
                <th rowspan="2" style="vertical-align: middle;">Total %</th>
              </tr>
              <tr class="date-header" id="occupancyDatesRow">
                <th>-</th>
                <th>-</th>
                <th>-</th>
                <th>-</th>
                <th>-</th>
                <th>-</th>
                <th>-</th>
              </tr>
            </thead>
            <tbody>
              <!-- Se poblará dinámicamente -->
            </tbody>
            <tfoot>
              <tr id="rowOccupancyGlobalTotal" class="row-total">
                <td class="role-label">TOTAL GLOBAL %</td>
                <td data-day="0">-</td>
                <td data-day="1">-</td>
                <td data-day="2">-</td>
                <td data-day="3">-</td>
                <td data-day="4">-</td>
                <td data-day="5">-</td>
                <td data-day="6">-</td>
                <td id="cellOccupancyGlobalTotal">-</td>
              </tr>
            </tfoot>
          </table>
        </div>
        <div class="note" style="margin-top: 15px;">
          Cálculo: (HH Planificadas en PSM / HH Disponibles según Dotación Proyectada) * 100
        </div>
      </div>
      <div class="modal-foot">
        <button class="btn" data-close="1">Cerrar</button>
      </div>
    </div>
  </div>
  <!-- MODAL NUEVO ALCANCE PROYECTISTAS -->
  <div id="pjNewAlcanceModal" class="modal" aria-hidden="true" style="z-index: 10002;">
    <div class="modal-backdrop" data-pj-na-close="1"></div>
    <div class="modal-card" style="max-width: 800px;">
      <div class="modal-head">
        <div class="modal-title">Registrar Nuevo Alcance</div>
        <button class="icon-btn" data-pj-na-close="1"></button>
      </div>
      <div class="modal-body">
        <div class="form-grid">
          <label class="field wide">
            <span>Orden de Trabajo</span>
            <select id="na_order_selector">
              <option value="">-- Selecciónar Orden --</option>
            </select>
          </label>
          <label class="field wide">
            <span>Estructura WBS (Selecciónar Existente)</span>
            <select id="na_wbs_selector">
              <option value="">-- Selecciónar WBS --</option>
            </select>
          </label>
          <label class="field wide">
            <span>Descripción del Trabajo</span>
            <input id="na_descripcion" placeholder="Describa la tarea..." />
          </label>
          <label class="field">
            <span>Especialidad</span>
            <select id="na_especialidad">
              <option value="Mecánico">Mecánico</option>
              <option value="Soldador">Soldador</option>
              <option value="Andamio">Andamio</option>
              <option value="Aislación">Aislación</option>
              <option value="Pintura">Pintura (BEEPINT)</option>
              <option value="Civil">Civil</option>
              <option value="Piping">Piping</option>
            </select>
          </label>
          <label class="field">
            <span>ID Actividad (Correlativo)</span>
            <input id="na_activity_id" readonly style="background:var(--panel-inner); opacity:0.7;" />
          </label>
          <label class="field">
            <span>HH Planificadas</span>
            <input type="number" id="na_hh_plan" value="0" />
          </label>
          <label class="field">
            <span>Tipo</span>
            <input id="na_tipo" value="EMERGENTE" readonly style="background:var(--panel-inner); opacity:0.7;" />
          </label>
          <label class="field">
            <span>Fecha Inicio (Plan)</span>
            <input type="date" id="na_plan_ini" />
          </label>
          <label class="field">
            <span>Fecha Fin (Plan)</span>
            <input type="date" id="na_plan_fin" />
          </label>
        </div>
      </div>
      <div class="modal-foot">
        <button class="btn" data-pj-na-close="1">Cancelar</button>
        <button class="btn btn-primary" id="btnSaveNewAlcance">Guardar Alcance</button>
      </div>
    </div>
  </div>

  <!-- SECCION ADMIN -->
  <section id="section-admin" class="app-section" style="display: none;">
    <div class="panel">
      <div class="panel-head">
        <h2>Panel de Administración</h2>
      </div>
      <div class="modal-body">
        <div class="note">Herramientas avanzadas para gestión de datos y configuración global.</div>
        <div style="display: flex; gap: 15px; margin-top: 20px; flex-wrap: wrap;">
          <div
            style="display: flex; flex-direction: column; gap: 5px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: rgba(0,0,0,0.1); min-width: 180px;">
            <span style="font-size: 11px; font-weight: bold; color: var(--muted); text-transform: uppercase;">Estilo
              Visual</span>
            <select id="themeSelectorAdmin"
              style="padding: 10px 15px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font-size: 14px; cursor: pointer; width: 100%; outline: none;"
              onchange="document.documentElement.setAttribute('data-theme', this.value); localStorage.setItem('wp_theme', this.value);">
              <option value="dark">ðŸŒ™ Dark Mode (Original)</option>
              <option value="light">â˜€ï¸ Light Mode (Ejecutivo)</option>
            </select>
            <script>
              // Self-executing script to align the select choice correctly when it loads
              (function () {
                const t = localStorage.getItem('wp_theme') || 'dark';
                document.getElementById('themeSelectorAdmin').value = t;
              })();
            </script>
          </div>
          <button class="btn secondary" id="btnConfigMetaAdmin" style="padding: 15px 25px; min-width: 150px;">
            <span style="font-size: 24px; display: block; margin-bottom: 8px;">âš™ï¸</span>
            Metadatos PSM
          </button>
          <!-- Botones Super Admin (Ocultos por defecto) -->
          <div id="adminSuperUserActions" class="filters"
            style="display: none; border: 1px dashed var(--danger); padding: 10px; border-radius: 12px; margin-right: auto;">
            <button class="btn secondary" id="btnMigrateCommentsAdmin" style="padding: 15px 25px; min-width: 150px;">
              <span style="font-size: 24px; display: block; margin-bottom: 8px;">ðŸ”„</span>
              Migrar Historial
            </button>
            <button class="btn secondary" id="btnAssignDates" style="padding: 15px 25px; min-width: 150px;">
              <span style="font-size: 24px; display: block; margin-bottom: 8px;"><i class="fa-solid fa-calendar-days"></i></span>
              Asignar Fechas
            </button>
          </div>
          <button class="btn secondary" id="btnExportAdmin" style="padding: 15px 25px; min-width: 150px;">
            <span style="font-size: 24px; display: block; margin-bottom: 8px;"><i class="fa-solid fa-floppy-disk"></i></span>
            Exportar JSON
          </button>


          <div
            style="border-left: 1px solid var(--border); padding-left: 15px; display: flex; gap: 10px; align-items: flex-end;">
            <label class="field" style="margin-bottom: 0;">
              <span>Revisión Informe</span>
              <select id="adminPsmSelector" style="min-width: 150px;">
                <option value="">Selecciónar...</option>
              </select>
            </label>
            <button class="btn btn-primary" id="btnExportPsmPdf" style="padding: 15px 25px;">
              <span style="font-size: 24px; display: block; margin-bottom: 8px;"></span>
              Informe PSM (PDF)
            </button>
          </div>

          <!-- SECCIÃ“N ELIMINADA (Movida a Gantt) -->
        </div>

        <!-- Gestión de Usuarios (Solo Super Admin) -->
        <div id="adminUserManagement"
          style="display: none; margin-top: 30px; border-top: 1px solid var(--border); padding-top: 25px;">
          <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
            <h3 style="margin: 0; display: flex; align-items: center; gap: 10px;">
              <span style="font-size: 22px;">ðŸ‘¥</span> Gestión de Usuarios
            </h3>
            <div style="display: flex; gap: 10px;">
              <button class="btn secondary" id="btnRefreshUserList">ðŸ”„ Actualizar Lista</button>
              <button class="btn btn-primary" id="btnOpenCreateUser">âž• Nuevo Usuario</button>
            </div>
          </div>
          <div class="table-wrap">
            <table class="table" id="tblAdminUsers">
              <thead>
                <tr>
                  <th>Nombre</th>
                  <th>Email / Usuario</th>
                  <th>Cargo</th>
                  <th>Perfil</th>
                  <th>Estado</th>
                  <th>Acción</th>
                </tr>
              </thead>
              <tbody>
                <!-- Se llenará dinámicamente -->
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- MODAL PERFIL USUARIO -->
  <div class="modal" id="profileModal" aria-hidden="true">
    <div class="modal-backdrop" data-close="1"></div>
    <div class="modal-card compact-modal" style="max-width: 450px;">
      <div class="modal-head">
        <div style="text-align: center; width: 100%;">
          <h2 class="modal-title">Mi Perfil</h2>
          <div class="modal-sub">Actualiza tu información personal y cargo</div>
        </div>
        <button class="btn btn-close" data-close="1" style="position: absolute; right: 20px;">&times;</button>
      </div>
      <div class="modal-body" style="padding: 24px 30px;">
        <div class="form-grid" style="grid-template-columns: 1fr;">
          <label class="field"><span>Nombre Completo</span>
            <input type="text" id="prof_name" placeholder="Ej: Juan Pérez" /></label>

          <label class="field" style="margin-top: 10px;"><span>Correo Electrónico (Solo lectura)</span>
            <input type="email" id="prof_email" readonly style="opacity: 0.7; cursor: not-allowed;" /></label>

          <label class="field" style="margin-top: 10px;"><span>Cargo / Función</span>
            <input type="text" id="prof_cargo" placeholder="Ej: Supervisor de Terreno" /></label>

          <label class="field" style="margin-top: 10px;"><span>Tipo de Perfil</span>
            <select id="prof_type">
              <option value="INVITADO">INVITADO</option>
              <option value="TERRENO">TERRENO</option>
              <option value="PLANIFICADOR">PLANIFICADOR</option>
              <option value="ADMIN">ADMIN</option>
            </select>
          </label>

          <label class="field" style="margin-top: 10px;"><span>Estado</span>
            <select id="prof_estado">
              <option value="activo">Activo</option>
              <option value="inactivo">Inactivo</option>
            </select>
          </label>

          <label class="field" style="margin-top: 10px;"><span>Bases de Datos (JSON)</span>
            <textarea id="prof_bases" rows="3" placeholder='{"ENAP_BIOBIO": true}'></textarea>
          </label>
        </div>

        <div style="margin-top: 30px; display: flex; gap: 15px;">
          <button class="btn secondary wide" data-close="1">Cancelar</button>
          <button class="btn btn-primary wide" id="btnSaveProfile">Guardar Cambios</button>
        </div>
      </div>
    </div>
  </div>
  <!-- MODAL DETALLE OPERACIÃ“N PLANIFICACIÃ“N -->
  <div class="modal" id="planningDetailModal" aria-hidden="true">
    <div class="modal-backdrop" data-close="1"></div>
    <div class="modal-card">
      <div class="modal-head">
        <div class="modal-title">Detalle de Operación</div>
        <button class="icon-btn" data-close="1" title="Cerrar"></button>
      </div>
      <div class="modal-body">
        <div class="form-grid">
          <label class="field"><span>Planta</span><select id="pd_planta"></select></label>
          <label class="field"><span>Puesto Trabajo</span>
            <select id="pd_puesto">
              <option value="BEEMECA">BEEMECA (Mecï¿½nica)"></option>
              <option value="BEEPINT1">BEEPINT1 (Pintura)</option>
              <option value="BEEPINT2">BEEPINT2 (Pintura)</option>
              <option value="BEEPINT3">BEEPINT3 (Pintura)</option>
              <option value="BEESOLD">BEESOLD (Sol/Pip)</option>
              <option value="BEEANDA">BEEANDA (And)</option>
              <option value="BEEAISLA">BEEAISLA (Ais)</option>
              <option value="BEEAREX">BEEAREX (Ext)</option>
            </select>
          </label>
          <label class="field"><span>Especialidad</span>
            <select id="pd_esp">
              <option value="Mecánico">Mecánico</option>
              <option value="Pintura">Pintura (BEEPINT)</option>
              <option value="Civil">Civil</option>
              <option value="Soldador">Soldador</option>
              <option value="Piping">Piping</option>
              <option value="Andamio">Andamio</option>
              <option value="Aislación">Aislación</option>
              <option value="Externos">Externos</option>
            </select>
          </label>
          <label class="field"><span>Orden</span><input id="pd_orden" readonly></label>
          <label class="field"><span>Operación</span><input id="pd_op_id" readonly></label>
        </div>
        <div class="field" style="margin-top:10px;">
          <span>Descripción Orden</span>
          <input id="pd_desc_orden" readonly style="width:100%;">
        </div>
        <div class="field" style="margin-top:10px;">
          <span>Descripción Operación</span>
          <textarea id="pd_desc_op" readonly style="width:100%;" rows="2"></textarea>
        </div>
        <div class="field" style="margin-top:10px;">
          <span>Comentarios</span>
          <textarea id="pd_comentarios" readonly style="width:100%;" rows="2"></textarea>
        </div>

        <div style="margin-top:20px;">
          <h4 style="font-size: 14px; font-weight: 600; margin-bottom: 10px;">Planificación de Horas (Semana)</h4>
          <div id="pd_hh_horizontal"
            style="display:flex; gap:8px; justify-content:space-between; background:rgba(0,0,0,0.05); padding:10px; border-radius:8px;">
            <!-- Se poblará dinámicamente -->
          </div>
        </div>
      </div>
      <div class="modal-foot">
        <button class="btn btn-primary" id="pd_save_btn">Guardar</button>
        <button class="btn secondary" data-close="1">Cerrar</button>
      </div>
    </div>
  </div>
  <!-- MODAL EDICION OPERACION PROYECTO -->
  <div class="modal" id="pjOpModal" aria-hidden="true">
    <div class="modal-backdrop" data-pj-close="1"></div>
    <div class="modal-card" style="max-width: 95%; width: 95%;">
      <div class="modal-head">
        <div>
          <div class="modal-title" id="pjOpModalTitle">Editar Operación de Proyecto</div>
          <div class="modal-sub" id="pjOpModalSub">â€”</div>
        </div>
        <button class="icon-btn" id="pjOpModalClose"></button>
      </div>
      <div class="modal-body" style="padding-top:10px;">
        <div class="form-grid">
          <label class="field"><span>Tipo</span>
            <select id="pj_op_tipo">
              <option value="PSM">PSM</option>
              <option value="EMERGENTE">Emergente</option>
            </select>
          </label>
          <label class="field"><span>Backlog</span>
            <select id="pj_op_backlog">
              <option value="NO">No</option>
              <option value="SI">Sí</option>
            </select>
          </label>
          <label class="field"><span>Estatus</span>
            <select id="pj_op_status">
              <option value="Programada">Programada</option>
              <option value="Atrasada">Atrasada</option>
              <option value="En Proceso">En Proceso</option>
              <option value="Terminada">Terminada</option>
            </select>
          </label>
          <label class="field"><span>Avance (%)</span><input type="number" id="pj_op_avance" min="0" max="100"
              step="1"></label>
          <label class="field"><span>HH Plan</span><input type="number" id="pj_op_hh_plan" step="0.5"></label>
          <label class="field"><span>HH Report</span><input type="number" id="pj_op_hh_report" step="0.5"></label>
          <label class="field"><span>Duración (Hrs)</span><input type="number" id="pj_op_duracion" step="0.5"></label>
        </div>
        <div class="form-grid" style="margin-top:15px;">
          <label class="field"><span>Inicio Plan</span><input type="date" id="pj_op_plan_ini"></label>
          <label class="field"><span>Fin Plan</span><input type="date" id="pj_op_plan_fin"></label>
          <label class="field"><span>Inicio Report</span><input type="date" id="pj_op_report_ini"></label>
          <label class="field"><span>Fin Report</span><input type="date" id="pj_op_report_fin"></label>
        </div>
        <div class="form-grid" style="margin-top:15px;">
          <label class="field"><span>External Activity ID</span><input type="text" id="pj_op_ext_id"></label>
          <label class="field"><span>External WBS Code</span><input type="text" id="pj_op_ext_wbs"></label>
          <label class="field"><span>External Status</span><input type="text" id="pj_op_ext_status"></label>
        </div>

        <!-- CHAT COMENTARIOS -->
        <div style="margin-top:20px;">
          <label style="font-weight:600; margin-bottom:10px; display:block;">Comentarios / Bitácora</label>
          <div id="pj_op_comments"
            style="max-height: 250px; overflow-y: auto; background: var(--panel-inner); border-radius:8px; padding:15px; display:flex; flex-direction:column; gap:10px; border:1px solid var(--border);">
            <!-- Mensajes aquí -->
          </div>
          <div style="display:flex; gap:10px; margin-top:15px;">
            <input type="text" id="pj_op_new_comment" placeholder="Escribe un comentario..."
              style="flex:1; padding:10px; border-radius:6px; border:1px solid var(--border); background:var(--bg); color:var(--text);">
            <button id="pj_btn_add_comment" class="btn secondary" style="white-space:nowrap;">Agregar
              Comentario</button>
          </div>
        </div>
      </div>
      <div class="modal-foot"
        style="display:flex; justify-content:flex-end; gap:10px; padding:15px; border-top:1px solid var(--border); margin-top:10px;">
        <button id="pj_btn_terminar" class="btn secondary"
          style="background:var(--success); color:white; border:none; margin-right:auto;">Marcar Terminada</button>
        <button id="pj_btn_cancel" class="btn secondary" data-pj-close="1">Cancelar</button>
        <button id="pj_btn_save" class="btn btn-primary" style="padding-left:30px; padding-right:30px;">Guardar
          cambios</button>
      </div>
    </div>
  </div>
  <!-- MODAL DATA DATE (REPORTAR) -->
  <div class="modal" id="pjDataDateModal" aria-hidden="true">
    <div class="modal-backdrop" data-pj-dd-close="1"></div>
    <div class="modal-card" style="max-width: 350px;">
      <div class="modal-head">
        <div class="modal-title">Fecha de Reporte (Data Date)</div>
        <button class="icon-btn" data-pj-dd-close="1"></button>
      </div>
      <div class="modal-body">
        <p style="font-size:13px; margin-bottom:15px; opacity:0.8;">Seleccióne la fecha de corte para el reporte del
          proyecto. Esta fecha marcará la línea de tiempo en el Gantt y Curva S.</p>
        <label class="field">
          <span>Data Date</span>
          <input type="date" id="pjInputDataDate">
        </label>
      </div>
      <div class="modal-foot"
        style="display:flex; justify-content:flex-end; gap:10px; padding:15px; border-top:1px solid var(--border);">
        <button class="btn secondary" data-pj-dd-close="1">Cancelar</button>
        <button id="pjBtnSaveDataDate" class="btn btn-primary">Aceptar</button>
      </div>
    </div>
  </div>
  <!-- MODAL ADMIN EDITAR USUARIO -->
  <div class="modal" id="adminUserEditModal" aria-hidden="true">
    <div class="modal-backdrop" data-close="1"></div>
    <div class="modal-card compact-modal" style="max-width: 500px;">
      <div class="modal-head">
        <div style="text-align: center; width: 100%;">
          <h2 class="modal-title">Editar Usuario (Admin)</h2>
          <div class="modal-sub">Módulo de gestión centralizada de accesos</div>
        </div>
        <button class="btn btn-close" data-close="1" style="position: absolute; right: 20px;">&times;</button>
      </div>
      <div class="modal-body" style="padding: 24px 30px;">
        <input type="hidden" id="admin_edit_user_uid" />
        <div class="form-grid" style="grid-template-columns: 1fr;">
          <label class="field"><span>Nombre Completo</span>
            <input type="text" id="admin_prof_name" /></label>

          <label class="field" style="margin-top: 10px;"><span>Correo Electrónico</span>
            <input type="email" id="admin_prof_email" readonly style="opacity: 0.7;" /></label>

          <label class="field" style="margin-top: 10px;"><span>Cargo / Función</span>
            <input type="text" id="admin_prof_cargo" /></label>

          <label class="field" style="margin-top: 10px;"><span>Tipo de Perfil</span>
            <select id="admin_prof_type">
              <option value="INVITADO">INVITADO</option>
              <option value="TERRENO">TERRENO</option>
              <option value="PLANIFICADOR">PLANIFICADOR</option>
              <option value="ADMIN">ADMIN</option>
            </select>
          </label>

          <label class="field" style="margin-top: 10px;"><span>Estado</span>
            <select id="admin_prof_estado">
              <option value="activo">Activo</option>
              <option value="inactivo">Inactivo</option>
            </select>
          </label>

          <label class="field" style="margin-top: 10px;"><span>Bases de Datos (JSON)</span>
            <textarea id="admin_prof_bases" rows="4"></textarea>
          </label>
        </div>

        <div style="margin-top: 30px; display: flex; gap: 15px;">
          <button class="btn secondary wide" data-close="1">Cancelar</button>
          <button class="btn btn-primary wide" id="btnAdminSaveUser">Guardar Cambios</button>
        </div>
      </div>
    </div>
  </div>
  <!-- MODAL ADMIN CREAR USUARIO -->
  <div class="modal" id="adminUserCreateModal" aria-hidden="true">
    <div class="modal-backdrop" data-close="1"></div>
    <div class="modal-card compact-modal" style="max-width: 500px;">
      <div class="modal-head">
        <div style="text-align: center; width: 100%;">
          <h2 class="modal-title">Registrar Nuevo Usuario</h2>
          <div class="modal-sub">Creación de cuenta y perfil técnico</div>
        </div>
        <button class="btn btn-close" data-close="1" style="position: absolute; right: 20px;">&times;</button>
      </div>
      <div class="modal-body" style="padding: 24px 30px;">
        <div class="form-grid" style="grid-template-columns: 1fr;">
          <label class="field"><span>Nombre Completo</span>
            <input type="text" id="admin_create_name" placeholder="Ej: Juan Pérez" /></label>

          <label class="field" style="margin-top: 10px;"><span>Correo Electrónico (Usuario)</span>
            <input type="email" id="admin_create_email" placeholder="usuario@workplan.cl" /></label>

          <label class="field" style="margin-top: 10px;"><span>Contraseña Inicial</span>
            <input type="password" id="admin_create_pass" placeholder="Mínimo 6 caracteres" /></label>

          <label class="field" style="margin-top: 10px;"><span>Cargo / Función</span>
            <input type="text" id="admin_create_cargo" placeholder="Ej: Planificador Senior" /></label>

          <label class="field" style="margin-top: 10px;"><span>Tipo de Perfil</span>
            <select id="admin_create_type">
              <option value="INVITADO">INVITADO</option>
              <option value="TERRENO">TERRENO</option>
              <option value="PLANIFICADOR">PLANIFICADOR</option>
              <option value="ADMIN">ADMIN</option>
            </select>
          </label>

          <label class="field" style="margin-top: 10px;"><span>Bases de Datos (JSON)</span>
            <textarea id="admin_create_bases" rows="3">{"ENAP_BIOBIO": true}</textarea>
          </label>
        </div>

        <div style="margin-top: 30px; display: flex; gap: 15px;">
          <button class="btn secondary wide" data-close="1">Cancelar</button>
          <button class="btn btn-primary wide" id="btnAdminSaveNewUser">Crear Usuario</button>
        </div>
      </div>
    </div>
  </div>
  
  <!-- MODAL: AUTENTICACION -->
  <div id="authModal" aria-hidden="true"
    style="display:none; position:fixed; inset:0; z-index:9999; align-items:center; justify-content:center; padding:20px;">
    <!-- Backdrop -->
    <div onclick="wpCloseAuth()"
      style="position:absolute; inset:0; background:rgba(13,27,36,0.9); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);">
    </div>
    <!-- Card -->
    <div style="position:relative; z-index:1; width:100%; max-width:400px;
                background:var(--panel); border:1px solid var(--border); border-radius:24px;
                overflow:hidden; box-shadow:0 30px 60px -12px rgba(0,0,0,0.7);">
      <!-- Header -->
      <div style="padding:28px 28px 22px; text-align:center; position:relative; background:var(--panel-inner); border-bottom:1px solid var(--border);">
        <button onclick="wpCloseAuth()" title="Cerrar"
          style="position:absolute; right:14px; top:14px; background:transparent;
                 border:1px solid var(--border); color:var(--muted);
                 width:30px; height:30px; border-radius:50%; cursor:pointer;
                 font-size:17px; line-height:1; display:flex; align-items:center;
                 justify-content:center; transition:all 0.2s; font-family:var(--font);"
          onmouseover="this.style.background='var(--accent-soft)'; this.style.borderColor='var(--accent)'; this.style.color='var(--accent)'"
          onmouseout="this.style.background='transparent'; this.style.borderColor='var(--border)'; this.style.color='var(--muted)'"
        >&times;</button>
        <!-- Logo con gradiente del tema -->
        <div style="width:60px; height:60px; background:var(--accent-grad); border-radius:16px;
                    margin:0 auto 14px; display:flex; align-items:center; justify-content:center;
                    box-shadow:0 10px 24px rgba(247,148,113,0.4);">
          <i class="fa-solid fa-hard-hat" style="color:#fff; font-size:24px;"></i>
        </div>
        <h2 id="authModalTitle" style="margin:0 0 4px; font-size:19px; font-weight:800; color:var(--text); letter-spacing:-0.3px;">Iniciar Sesión</h2>
        <p style="margin:0; font-size:12px; color:var(--muted);">Accede a la plataforma WorkPlan Pro</p>
      </div>

      <!-- Body -->
      <div style="padding:24px 28px 26px;">

        <!-- LOGIN FORM -->
        <div id="loginForm">
          <form onsubmit="wpDoLogin(); return false;" autocomplete="on">
            <div style="display:flex; flex-direction:column; gap:13px;">
              <div>
                <label style="display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted); margin-bottom:6px;">Correo Electrónico</label>
                <div style="position:relative;">
                  <i class="fa-solid fa-envelope" style="position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--accent); font-size:13px; pointer-events:none;"></i>
                  <input type="email" id="loginEmail" placeholder="usuario@workplan.cl" autocomplete="username"
                    style="width:100%; box-sizing:border-box; padding:11px 12px 11px 36px;
                           background:var(--panel-inner); border:1px solid var(--border);
                           border-radius:10px; color:var(--text); font-size:14px;
                           font-family:var(--font); outline:none; transition:all 0.2s;"
                    onfocus="this.style.borderColor='var(--accent)'; this.style.background='var(--input-focus-bg)'"
                    onblur="this.style.borderColor='var(--border)'; this.style.background='var(--panel-inner)'" />
                </div>
              </div>
              <div>
                <label style="display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted); margin-bottom:6px;">Contraseña</label>
                <div style="position:relative;">
                  <i class="fa-solid fa-lock" style="position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--accent); font-size:13px; pointer-events:none;"></i>
                  <input type="password" id="loginPass" placeholder="••••••••" autocomplete="current-password"
                    style="width:100%; box-sizing:border-box; padding:11px 12px 11px 36px;
                           background:var(--panel-inner); border:1px solid var(--border);
                           border-radius:10px; color:var(--text); font-size:14px;
                           font-family:var(--font); outline:none; transition:all 0.2s;"
                    onfocus="this.style.borderColor='var(--accent)'; this.style.background='var(--input-focus-bg)'"
                    onblur="this.style.borderColor='var(--border)'; this.style.background='var(--panel-inner)'" />
                </div>
              </div>
            </div>

            <!-- Error box -->
            <div id="authLoginError"
              style="display:none; margin-top:11px; padding:9px 12px;
                     background:rgba(239,68,68,0.1); border:1px solid rgba(239,68,68,0.3);
                     border-radius:8px; font-size:12px; color:#f87171;
                     align-items:center; gap:8px;">
              <i class="fa-solid fa-triangle-exclamation"></i>
              <span id="authLoginErrorText"></span>
            </div>

            <!-- Boton principal con gradiente del tema -->
            <button type="submit" id="btnLoginSubmit"
              style="width:100%; margin-top:18px; padding:13px;
                     background:var(--accent-grad); border:none; border-radius:11px;
                     color:#fff; font-size:14px; font-weight:700; letter-spacing:0.5px;
                     cursor:pointer; transition:all 0.25s; font-family:var(--font);
                     display:flex; align-items:center; justify-content:center; gap:9px;
                     box-shadow:0 8px 20px rgba(247,148,113,0.3);"
              onmouseover="this.style.transform='translateY(-2px)'; this.style.boxShadow='0 14px 28px rgba(247,148,113,0.45)'"
              onmouseout="this.style.transform=''; this.style.boxShadow='0 8px 20px rgba(247,148,113,0.3)'">
              <i class="fa-solid fa-right-to-bracket"></i> INGRESAR AL SISTEMA
            </button>
          </form>
          <div style="text-align:center; margin-top:16px; font-size:12px; color:var(--muted);">
            ¿¿No tienes cuenta?
            <a href="#" id="goRegister"
              onclick="document.getElementById('loginForm').style.display='none'; document.getElementById('registerForm').style.display='block'; document.getElementById('authModalTitle').textContent='Crear Cuenta'; return false;"
              style="color:var(--accent); text-decoration:none; font-weight:600; margin-left:4px;">Regístrate aquí</a>
          </div>
        </div>

        <!-- REGISTER FORM -->
        <div id="registerForm" style="display:none;">
          <form onsubmit="wpDoRegister(); return false;" autocomplete="on">
            <div style="display:flex; flex-direction:column; gap:13px;">
              <div>
                <label style="display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted); margin-bottom:6px;">Correo Electrónico</label>
                <input type="email" id="regEmail" placeholder="usuario@workplan.cl" autocomplete="username"
                  style="width:100%; box-sizing:border-box; padding:11px 12px; background:var(--panel-inner); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:14px; font-family:var(--font); outline:none; transition:all 0.2s;"
                  onfocus="this.style.borderColor='var(--accent)'; this.style.background='var(--input-focus-bg)'"
                  onblur="this.style.borderColor='var(--border)'; this.style.background='var(--panel-inner)'" />
              </div>
              <div>
                <label style="display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted); margin-bottom:6px;">Contraseña</label>
                <input type="password" id="regPass" placeholder="Mínimo 6 caracteres" autocomplete="new-password"
                  style="width:100%; box-sizing:border-box; padding:11px 12px; background:var(--panel-inner); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:14px; font-family:var(--font); outline:none; transition:all 0.2s;"
                  onfocus="this.style.borderColor='var(--accent)'; this.style.background='var(--input-focus-bg)'"
                  onblur="this.style.borderColor='var(--border)'; this.style.background='var(--panel-inner)'" />
              </div>
              <div>
                <label style="display:block; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:0.8px; color:var(--muted); margin-bottom:6px;">Confirmar Contraseña</label>
                <input type="password" id="regPassConfirm" placeholder="••••••••" autocomplete="new-password"
                  style="width:100%; box-sizing:border-box; padding:11px 12px; background:var(--panel-inner); border:1px solid var(--border); border-radius:10px; color:var(--text); font-size:14px; font-family:var(--font); outline:none; transition:all 0.2s;"
                  onfocus="this.style.borderColor='var(--accent)'; this.style.background='var(--input-focus-bg)'"
                  onblur="this.style.borderColor='var(--border)'; this.style.background='var(--panel-inner)'" />
              </div>
            </div>
            <button type="submit" id="btnRegisterSubmit"
              style="width:100%; margin-top:18px; padding:13px;
                     background:var(--accent-grad); border:none; border-radius:11px;
                     color:#fff; font-size:14px; font-weight:700; letter-spacing:0.5px;
                     cursor:pointer; transition:all 0.25s; font-family:var(--font);
                     display:flex; align-items:center; justify-content:center; gap:9px;
                     box-shadow:0 8px 20px rgba(247,148,113,0.3);"
              onmouseover="this.style.transform='translateY(-2px)'"
              onmouseout="this.style.transform=''">
              <i class="fa-solid fa-user-plus"></i> CREAR CUENTA
            </button>
          </form>
          <div style="text-align:center; margin-top:16px; font-size:12px; color:var(--muted);">
            ¿¿Ya tienes cuenta?
            <a href="#" id="goLogin"
              onclick="document.getElementById('registerForm').style.display='none'; document.getElementById('loginForm').style.display='block'; document.getElementById('authModalTitle').textContent='Iniciar Sesión'; return false;"
              style="color:var(--accent); text-decoration:none; font-weight:600; margin-left:4px;">Inicia sesión aquí</a>
          </div>
        </div>

      </div><!-- /body -->
    </div><!-- /card -->
  </div><!-- /authModal -->

  <!-- MODAL VISOR DE CAPTURAS -->
  <div class="modal" id="screenshotModal" aria-hidden="true">
    <div class="modal-backdrop" data-close="1"></div>
    <div class="modal-card" style="max-width: 95vw; width: 1200px; padding: 0; overflow: hidden; background: #000;">
      <div class="modal-head"
        style="position: absolute; top: 0; right: 0; z-index: 10; background: rgba(0,0,0,0.5); width: auto; border: none; padding: 10px; gap: 15px; display: flex;">
        <div id="screenNav" style="display: none; align-items: center; gap: 10px;">
          <button id="btnPrevImg" class="btn btn-sm secondary"
            style="background: rgba(255,255,255,0.1); border: none; font-size: 20px;">«</button>
          <span id="screenCount" style="color: #fff; font-size: 13px; font-weight: 600;">1 / 1</span>
          <button id="btnNextImg" class="btn btn-sm secondary"
            style="background: rgba(255,255,255,0.1); border: none; font-size: 20px;">»</button>
        </div>
        <button class="btn btn-close" data-close="1"
          style="color: #fff; font-size: 30px; line-height: 1;">&times;</button>
      </div>
      <div class="modal-body"
        style="padding: 0; display: flex; justify-content: center; align-items: center; min-height: 50vh;">
        <img id="screenshotImg" src="" style="max-width: 100%; max-height: 90vh; display: block;"
          alt="Captura de pantalla">
      </div>
    </div>
  </div>

  <!-- ======= GANTT CELL EDITOR POPUP ======= -->
  <div id="ganttCellPopup"
    style="display:none;position:fixed;z-index:9999;min-width:300px;max-width:380px;background:var(--panel);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);overflow:hidden;font-family:var(--font);">
    <div
      style="background:var(--panel-inner);padding:12px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);">
      <div style="flex:1;min-width:0;">
        <div id="gcpDayLabel"
          style="font-size:11px;color:var(--blue);font-weight:700;text-transform:uppercase;letter-spacing:0.5px;"></div>
        <div id="gcpOpDesc"
          style="font-size:12px;color:var(--text);font-weight:500;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">
        </div>
        <div id="gcpOpId" style="font-size:10px;color:var(--muted);margin-top:1px;"></div>
      </div>
      <button id="gcpClose"
        style="background:rgba(255,255,255,0.08);border:none;color:var(--muted);font-size:18px;width:28px;height:28px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-left:8px;">&times;</button>
    </div>
    <div style="padding:14px 16px;display:flex;flex-direction:column;gap:12px;">
      <div>
        <label
          style="font-size:11px;color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:0.4px;display:block;margin-bottom:6px;">&#9203;
          Horas Reportadas</label>
        <div style="display:flex;align-items:center;gap:10px;">
          <input id="gcpHHInput" type="number" min="0" max="24" step="0.5" placeholder="0.0"
            style="flex:1;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:22px;font-weight:700;font-family:var(--font);padding:8px 14px;text-align:center;outline:none;box-sizing:border-box;" />
          <span style="font-size:12px;color:var(--muted);white-space:nowrap;">HH</span>
          <div style="font-size:10px;color:var(--muted);text-align:right;min-width:60px;">Plan:<br><span id="gcpHHPlan"
              style="color:var(--blue);font-weight:600;">0.0 h</span></div>
        </div>
        <div id="gcpQuickBtns" style="display:flex;gap:6px;margin-top:8px;flex-wrap:wrap;"></div>
      </div>
      <div>
        <label
          style="font-size:11px;color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:0.4px;display:block;margin-bottom:6px;">&#128221;
          Estatus Operaci&oacute;n</label>
        <select id="gcpStatusInput"
          style="width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;font-family:var(--font);padding:8px 12px;outline:none;box-sizing:border-box;">
          <option value="Programada">Programada</option>
          <option value="Atrasada">Atrasada</option>
          <option value="En Proceso">En Proceso</option>
          <option value="Terminada">Terminada</option>
        </select>
      </div>
      <div>
        <label
          style="font-size:11px;color:var(--blue);font-weight:600;text-transform:uppercase;letter-spacing:0.4px;display:block;margin-bottom:6px;">&#128172;
          Comentario del d&iacute;a</label>
        <textarea id="gcpCommentInput" rows="2" placeholder="Observaci&oacute;n del d&iacute;a (opcional)..."
          style="width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:12px;font-family:var(--font);padding:8px 12px;resize:vertical;outline:none;box-sizing:border-box;"></textarea>
      </div>
      <div id="gcpPrevComments" style="display:none;">
        <div style="font-size:11px;color:var(--muted);font-weight:600;margin-bottom:6px;">&#128203; Comentarios
          anteriores:</div>
        <div id="gcpPrevCommentsList"
          style="max-height:100px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;"></div>
      </div>
      <button id="gcpSaveBtn" class="btn btn-primary" style="width:100%;justify-content:center;gap:8px;">
        &#128190; Guardar cambios
      </button>
      <div id="gcpStatus" style="display:none;font-size:11px;padding:6px 10px;border-radius:6px;text-align:center;">
      </div>
    </div>
  </div>

  <!-- MODAL REPORTE DIARIO DE ACTIVIDADES -->
  <div class="modal" id="dailyReportModal" aria-hidden="true">
    <div class="modal-backdrop" onclick="CerrarReporte()"></div>
    <div class="modal-card"
      style="max-width: 98%; width: 98%; max-height: 95vh; overflow: hidden; display: flex; flex-direction: column;">
      <div id="report2" style="overflow-y: scroll; padding: 30px; background: #fff; color: #333; border-radius: 12px;">
        <div style="display: grid; grid-template-columns: auto min-content; margin-bottom: 20px;">
          <p
            style="text-align: center; font-size: 28px; font-weight: 800; color: #2c3e50; margin: 0; text-transform: uppercase; letter-spacing: 1px;">
            REPORTE DIARIO DE ACTIVIDADES</p>
          <div id="btn_cerrar_reporte"
            style="cursor: pointer; display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: #e74c3c; border-radius: 10px; transition: all 0.2s;"
            onclick="CerrarReporte()">
            <span style="font-size: 20px; font-weight: 900; color: #fff;"></span>
          </div>
        </div>

        <div id="div_folio_reporte"
          style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding: 15px; background: #f8f9fa; border-radius: 8px; border: 1px solid #dee2e6;">
          <div style="display: flex; align-items: center; gap: 15px;">
            <span class="texto_report" style="color: #495057; font-weight: 800;">FOLIO N°</span>
            <input id="folio_report" value="" class="input_reporte"
              style="width: 150px; font-weight: 800; color: #e74c3c; border: 2px solid #e74c3c; background: #fff;">
          </div>
          <div id="div_subir_foto_report" style="display:flex; gap:10px;">
            <button class="btn" style="background: #3498db; display: flex; align-items: center; gap: 8px;"
              onclick="SubirFotoReporte()">
              <i class="fa-solid fa-camera"></i> FOTO
            </button>
            <label class="btn"
              style="background: #7f8c8d; cursor:pointer; display: flex; align-items: center; gap: 8px; font-size:11px;">
              <i class="fa-solid fa-folder-open"></i> IMPORTAR FOE
              <input type="file" style="display:none;" onchange="importFOEFromExcel(this.files[0])">
            </label>
          </div>
        </div>

        <div id="nuevo_div_encabezado_reporte"
          style="display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 25px; margin-bottom: 30px;">

          <!-- Datos Actividad -->
          <div style="background: #fff; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden;">
            <div
              style="background: #34495e; color: #fff; padding: 8px 15px; font-size: 11px; font-weight: 700; text-transform: uppercase;">
              Información General</div>
            <div style="padding: 15px; display: grid; gap: 12px;">
              <label class="field_report">
                <span>Orden de Trabajo</span>
                <input type="text" placeholder="Ej: 1002543" id="ot_report" class="input_reporte">
              </label>
              <label class="field_report">
                <span>Área</span>
                <select id="area_report" class="input_reporte">
                  <option value="No Asignado">No Asignado</option>
                  <option value="BEEARE1">BEEARE1</option>
                  <option value="BEEARE2">BEEARE2</option>
                  <option value="BEEARE3">BEEARE3</option>
                </select>
              </label>
              <label class="field_report">
                <span>Puesto Trabajo</span>
                <select id="puesto_report" class="input_reporte">
                  <option value="">-- Selecciónar --</option>
                  <option value="BEEMECA">Mecánico (BEEMECA)</option>
                  <option value="BEEANDA">Andamio (BEEANDA)</option>
                  <option value="BEEAISLA">Aislación (BEEAISLA)</option>
                  <option value="BEESOLD">Soldadura (BEESOLD)</option>
                  <option value="BEEPINT">Pintura (BEEPINT)</option>
                  <option value="BEEAREX">Externo (BEEAREX)</option>
                </select>
              </label>
              <label class="field_report">
                <span>Planta</span>
                <select id="planta_report" class="input_reporte">
                  <option value="No Asignado">No Asignado</option>
                  <option value="BADES">BADES - PLANTA AGUA DESMINERALIZADA</option>
                  <option value="BAETI">BAETI - AREA ANTORCHA ETILENO</option>
                  <option value="BAEX">BAEX - AREAS EXTERIORES</option>
                  <option value="BAHCK">BAHCK - AREA ANTORCHA HIDROCRACKING</option>
                  <option value="BAREF">BAREF - AREA ANTORCHA FRACCIONAMIENTO</option>
                  <option value="BBOC0">BBOC0 - PLANTA BOCATOMA</option>
                  <option value="BBSU0">BBSU0 - PLANTA DE SATURACION DE BENCENO</option>
                  <option value="BCCR0">BCCR0 - PLANTA REFORMACION CATALITICA CONTINUA</option>
                  <option value="BCHBB">BCHBB - PLANTA HIDROGENO BIO BIO</option>
                  <option value="BCHT0">BCHT0 - PLANTA COMPAÃ‘IA HIDROGENO TALCAHUANO</option>
                  <option value="BCOG0">BCOG0 - COGENERADORA ERB</option>
                  <option value="BCOK0">BCOK0 - PLANTA COKER</option>
                  <option value="BDCS">BDCS - SISTEMAS DE CONTROL DISTRIBUIDO</option>
                  <option value="BDIMA">BDIMA - DIVISIONES DE MANTENCION</option>
                  <option value="BETI0">BETI0 - PLANTA ETILENO</option>
                  <option value="BFCCU">BFCCU - PLANTA CRACKING CATALÍTICO</option>
                  <option value="BFLOT">BFLOT - SISTEMA DE FLOTACION Y PISCINAS</option>
                  <option value="BFOIL">BFOIL - ZONA DE FUEL OIL</option>
                  <option value="BHCK0">BHCK0 - PLANTA HIDROCRAKING</option>
                  <option value="BHDS0">BHDS0 - PLANTA HIDRODESULFURIZACIÃ“N DE HDG</option>
                  <option value="BHDS1">BHDS1 - PLANTA HIDRODESULFURIZADORA DE DIESEL 1</option>
                  <option value="BHDS2">BHDS2 - PLANTA HIDRODESULFURIZADORA DE DIESEL 2</option>
                  <option value="BHDT0">BHDT0 - PLANTA HIDROTRATAMIENTO</option>
                  <option value="BHMAP">BHMAP - PTA. HIDROTRAT METILACETILENOPROPADIENO</option>
                  <option value="BISOM">BISOM - PLANTA ISOMERIZACION DE NAFTA</option>
                  <option value="BLABO">BLABO - LABORATORIO QUIMICO</option>
                  <option value="BMDE2">BMDE2 - PLANTA TRATAMIENTO DE GASES ACIDOS 2</option>
                  <option value="BMDE3">BMDE3 - PLANTA REGENERADORA DE AMINAS 3</option>
                  <option value="BMHC0">BMHC0 - PLANTA HIDROCRACKING MEDIO</option>
                  <option value="BMROX">BMROX - PLANTA MEROX</option>
                  <option value="BMUEL">BMUEL - MUELLE PETROLERO SAN VICENTE</option>
                  <option value="BNHT0">BNHT0 - PLANTA HIDROTRATAMIENTO DE NAFTA</option>
                  <option value="BNHU0">BNHU0 - AREA DE HIDROTRATAMIENTO DE NAFTA</option>
                  <option value="BOLEO">BOLEO - AREA OLEODUCTOS</option>
                  <option value="BOLT0">BOLT0 - OLEODUCTO TRASANDINO</option>
                  <option value="BPCRG">BPCRG - ÁREA PATIO DE CARGA</option>
                  <option value="BPSA0">BPSA0 - PLANTA PURIFICADORA DE HIDROGENO</option>
                  <option value="BPTQ0">BPTQ0 - PLANTA POLIPROPILENO PETROQUIM</option>
                  <option value="BSEEL">BSEEL - SUMINISTROS SISTEMA ELECTRICO</option>
                  <option value="BSHU0">BSHU0 - PLANTA HIDROGENACIÃ“N SELECTIVA DE HDG</option>
                  <option value="BSPL0">BSPL0 - AREA SEPARADORA DE NAFTA</option>
                  <option value="BSPP0">BSPP0 - PLANTA SEPARADORA PROPANO/PROPILENO</option>
                  <option value="BSRU1">BSRU1 - PLANTA DE AZUFRE N°1</option>
                  <option value="BSRU2">BSRU2 - PLANTA DE AZUFRE Nº 2</option>
                  <option value="BSUMI">BSUMI - PLANTA SUMINISTRO</option>
                  <option value="BSWS2">BSWS2 - PLANTA TRATAMIENTO AGUAS ACIDAS 2</option>
                  <option value="BSWS3">BSWS3 - PLANTA TRATAMIENTO AGUAS ACIDAS3</option>
                  <option value="BTMTO">BTMTO - PLANTA DE TRATAMIENTO</option>
                  <option value="BTOP1">BTOP1 - PLANTA TOPPING 1</option>
                  <option value="BTOP2">BTOP2 - PLANTA TOPPING 2</option>
                  <option value="BTSF0">BTSF0 - OLEODUCTO Y TERMINAL A SAN FERNANDO</option>
                  <option value="BTSV0">BTSV0 - OLEODUCTOS Y TERM. SAN VICENTE</option>
                  <option value="BURL0">BURL0 - UNIDAD RECUPERADORA DE LIVIANOS</option>
                  <option value="BVAC1">BVAC1 - PLANTA VACIO 1</option>
                  <option value="BVAC2">BVAC2 - PLANTA VACIO 2</option>
                  <option value="BVISB">BVISB - PLANTA VISBREAKING</option>
                  <option value="BWGS0">BWGS0 - WET GAS SCRUBBER</option>
                  <option value="BZCRU">BZCRU - ZONA DE CRUDO</option>
                  <option value="BZINT">BZINT - ZONA INTERMEDIA</option>
                  <option value="BZLPG">BZLPG - ZONA LPG</option>
                  <option value="PTCON">PTCON - PATIO CONTRATISTA</option>
                  <option value="PTLV0">PTLV0 - PATIO DE LAVADO</option>
                  <option value="LABO0">LAVO0 - LABORATORIO</option>
                  <option value="BMOP0">BMOP0 - MOVIMIENTO DE PRODUCTO</option>
                </select>
              </label>
              <label class="field_report">
                <span>Equipo</span>
                <input type="text" placeholder="Ej: 10-C-01" id="equipo_report" class="input_reporte">
              </label>
            </div>
          </div>

          <!-- Datos Fechas -->
          <div style="background: #fff; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden;">
            <div
              style="background: #34495e; color: #fff; padding: 8px 15px; font-size: 11px; font-weight: 700; text-transform: uppercase;">
              Tiempos y Turno</div>
            <div style="padding: 15px; display: grid; gap: 12px;">
              <label class="field_report">
                <span>Fecha Ejecución</span>
                <input type="date" id="fecha_report" class="input_reporte">
              </label>
              <label class="field_report">
                <span>Hora Inicio</span>
                <input type="time" id="hora_inicio_report" class="input_reporte">
              </label>
              <label class="field_report">
                <span>Hora Término</span>
                <input type="time" id="hora_termino_report" class="input_reporte">
              </label>
              <label class="field_report">
                <span>Sistema de Turno</span>
                <select id="turno_report" class="input_reporte">
                  <option value="HN">HN - Horario Normal</option>
                  <option value="FH">FH - Fuera de Horario</option>
                  <option value="TN-DF">TN-DF - Turno Nocturno / Festivo</option>
                </select>
              </label>
            </div>
          </div>

          <!-- Datos Responsables -->
          <div style="background: #fff; border: 1px solid #dee2e6; border-radius: 8px; overflow: hidden;">
            <div
              style="background: #34495e; color: #fff; padding: 8px 15px; font-size: 11px; font-weight: 700; text-transform: uppercase;">
              Personal Responsable</div>
            <div style="padding: 15px; display: grid; gap: 10px;">
              <select id="super_erbb_report" class="input_reporte">
                <option value="0">Supervisor ERBB</option>
                <option value="Cesar Ruiz">Cesar Ruiz</option>
                <option value="Jaime Jara">Jaime Jara</option>
                <option value="Aldo Fernandez">Aldo Fernandez</option>
              </select>
              <select id="inspector_erbb_report" class="input_reporte">
                <option value="0">Inspector ERBB</option>
                <option value="Jorge Quiroga">Jorge Quiroga</option>
                <option value="Patricio Rubilar">Patricio Rubilar</option>
                <option value="Carlos Lepe">Carlos Lepe</option>
                <option value="Cristian Rojas">Cristian Rojas</option>
                <option value="Jorge Montiel">Jorge Montiel</option>
              </select>
              <select id="super_contrat_report" class="input_reporte">
                <option value="0">Supervisor Haug</option>
                <option value="Rene Santos">Rene Santos</option>
                <option value="Juan Vega">Juan Vega</option>
                <option value="Alexander Puentes">Alexander Puentes</option>
              </select>
              <select id="capataz_contrat_report" class="input_reporte">
                <option value="0">Capataz Haug</option>
                <option value="Hector Parra">Hector Parra</option>
                <option value="Braulio Peña">Braulio Peña</option>
                <option value="Miguiel Rivera">Miguel Rivera</option>
                <option value="Marcelo Oviedo">Marcelo Oviedo</option>
              </select>
              <select id="inspector_qaqc_report" class="input_reporte">
                <option value="0">Inspector QA/QC</option>
                <option value="Rodrigo Esparza">Rodrigo Esparza</option>
                <option value="William Amaya">William Amaya</option>
              </select>
              <select id="prevencionista_report" class="input_reporte">
                <option value="0">Prevencionista</option>
                <option value="Natalie Villagra">Natalie Villagra</option>
                <option value="Victor Puentes">Victor Puentes</option>
                <option value="Freddy Lagos">Freddy Lagos</option>
              </select>
            </div>
          </div>
        </div>

        <div style="margin-top: 20px; margin-bottom: 10px; border-bottom: 2px solid #34495e; padding-bottom: 5px;">
          <span style="font-size: 14px; font-weight: 800; color: #34495e;">DETALLE HORAS POR ACTIVIDAD (CONTROL
            HH)</span>
        </div>

        <div id="div_tablas_report" style="overflow-x: auto;">
          <table class="table_report" style="width: 100%; border-collapse: collapse; margin-bottom: 20px;">
            <thead style="background: #34495e; color: #fff;">
              <tr>
                <th style="padding: 10px; font-size: 11px;">ROL</th>
                <th style="padding: 10px; font-size: 11px; text-align: left;">NOMBRE DEL TRABAJADOR</th>
                <th style="padding: 10px; font-size: 11px;">CATEGORÍA</th>
                <th colspan="10" style="padding: 10px; font-size: 11px;">HORAS POR BLOQUE (1 a 10)</th>
                <th style="padding: 10px; font-size: 11px;">TOTAL</th>
              </tr>
            </thead>
            <tbody id="tabla_hh">
              <!-- Se repite para los 10 trabajadores -->
              <script>
                // Generado dinámicamente o por bloque estático
              </script>
              <!-- Bloque estático 1-10 -->
              <tr>
                <td><input type="text" placeholder="ROL" class="input_node_report" id="rol_trabajador_report_1"></td>
                <td><input type="text" placeholder="NOMBRE COMPLETO" class="input_node_report"
                    id="nombre_trabajador_report_1" style="text-align:left;"></td>
                <td><input type="text" placeholder="CATEGORÍA" class="input_node_report"
                    id="categoria_trabajador_report_1"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_1-1"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_1-2"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_1-3"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_1-4"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_1-5"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_1-6"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_1-7"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_1-8"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_1-9"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_1-10"></td>
                <td style="background: #ecf0f1;"><input type="text" class="input_hh_total" id="hh_report_1-total"
                    readonly></td>
              </tr>
              <tr>
                <td><input type="text" placeholder="ROL" class="input_node_report" id="rol_trabajador_report_2"></td>
                <td><input type="text" placeholder="NOMBRE COMPLETO" class="input_node_report"
                    id="nombre_trabajador_report_2" style="text-align:left;"></td>
                <td><input type="text" placeholder="CATEGORÍA" class="input_node_report"
                    id="categoria_trabajador_report_2"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_2-1"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_2-2"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_2-3"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_2-4"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_2-5"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_2-6"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_2-7"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_2-8"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_2-9"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_2-10"></td>
                <td style="background: #ecf0f1;"><input type="text" class="input_hh_total" id="hh_report_2-total"
                    readonly></td>
              </tr>
              <tr>
                <td><input type="text" placeholder="ROL" class="input_node_report" id="rol_trabajador_report_3"></td>
                <td><input type="text" placeholder="NOMBRE COMPLETO" class="input_node_report"
                    id="nombre_trabajador_report_3" style="text-align:left;"></td>
                <td><input type="text" placeholder="CATEGORÍA" class="input_node_report"
                    id="categoria_trabajador_report_3"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_3-1"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_3-2"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_3-3"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_3-4"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_3-5"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_3-6"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_3-7"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_3-8"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_3-9"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_3-10"></td>
                <td style="background: #ecf0f1;"><input type="text" class="input_hh_total" id="hh_report_3-total"
                    readonly></td>
              </tr>
              <tr>
                <td><input type="text" placeholder="ROL" class="input_node_report" id="rol_trabajador_report_4"></td>
                <td><input type="text" placeholder="NOMBRE COMPLETO" class="input_node_report"
                    id="nombre_trabajador_report_4" style="text-align:left;"></td>
                <td><input type="text" placeholder="CATEGORÍA" class="input_node_report"
                    id="categoria_trabajador_report_4"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_4-1"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_4-2"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_4-3"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_4-4"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_4-5"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_4-6"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_4-7"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_4-8"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_4-9"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_4-10"></td>
                <td style="background: #ecf0f1;"><input type="text" class="input_hh_total" id="hh_report_4-total"
                    readonly></td>
              </tr>
              <tr>
                <td><input type="text" placeholder="ROL" class="input_node_report" id="rol_trabajador_report_5"></td>
                <td><input type="text" placeholder="NOMBRE COMPLETO" class="input_node_report"
                    id="nombre_trabajador_report_5" style="text-align:left;"></td>
                <td><input type="text" placeholder="CATEGORÍA" class="input_node_report"
                    id="categoria_trabajador_report_5"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_5-1"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_5-2"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_5-3"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_5-4"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_5-5"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_5-6"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_5-7"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_5-8"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_5-9"></td>
                <td><input type="text" class="input_hh_node" id="hh_report_5-10"></td>
                <td style="background: #ecf0f1;"><input type="text" class="input_hh_total" id="hh_report_5-total"
                    readonly></td>
              </tr>
            </tbody>
          </table>

          <div style="margin-top: 20px; margin-bottom: 10px; border-bottom: 2px solid #34495e; padding-bottom: 5px;">
            <span style="font-size: 14px; font-weight: 800; color: #34495e;">DETALLE DE ACTIVIDADES Y MATERIALES
              (HITOS)</span>
          </div>

          <table class="table_report" style="width: 100%; border-collapse: collapse;">
            <thead style="background: #34495e; color: #fff;">
              <tr>
                <th style="padding: 10px; font-size: 11px;">N°</th>
                <th style="padding: 10px; font-size: 11px;">CÓDIGO P6</th>
                <th style="padding: 10px; font-size: 11px;">TURNO</th>
                <th style="padding: 10px; font-size: 11px;">UNIDAD</th>
                <th style="padding: 10px; font-size: 11px;">CANT.</th>
                <th style="padding: 10px; font-size: 11px; text-align: left;">DESCRIPCIÃ“N DEL TRABAJO / HITOS</th>
                <th style="padding: 10px; font-size: 11px;">HH ESTIM.</th>
                <th style="padding: 10px; font-size: 11px;">PRECIO/UNI</th>
              </tr>
            </thead>
            <tbody>
              <!-- Bloque estático 1-10 -->
              ${Array.from({length: 10}, (_, i) => i + 1).map(n => `
              <tr>
                <td style="text-align:center; font-weight:800; background:#f1f1f1;">${n}</td>
                <td><input type="text" class="input_node_report" id="item_report_${n}" placeholder="Código"></td>
                <td><select id="turno_report_${n}" class="input_node_report">
                    <option value="HN">HN</option>
                    <option value="FH">FH</option>
                    <option value="TN">TN</option>
                  </select></td>
                <td><input type="text" class="input_node_report" id="unidad_report_${n}"></td>
                <td><input type="number" class="input_node_report cantidad-foe" id="cantidad_report_${n}"
                    placeholder="0"></td>
                <td><input type="text" class="input_node_report" id="detalle_item_report_${n}" style="text-align:left;">
                </td>
                <td><input type="text" class="input_node_report" id="detalle_hh_item_report_${n}"></td>
                <td><input type="text" class="input_node_report" id="detalle_precio_item_report_${n}"></td>
              </tr>`).join("")}
            </tbody>
          </table>
        </div>

        <div id="div_firmas_reporte_actividad"
          style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-top: 30px;">
          <div style="border: 2px solid #34495e; padding: 10px; border-radius: 8px;">
            <label
              style="display: block; background: #34495e; color: #fff; text-align: center; font-size: 10px; font-weight: 800; padding: 4px; margin-bottom: 5px;">FIRMA
              CAPATAZ</label>
            <div
              style="height: 80px; background: #fdfdfd; display: flex; justify-content: center; align-items: center; border: 1px dashed #ccc;">
              <span style="color: #bbb; font-size: 10px;">Captura Digital</span>
            </div>
          </div>
          <div style="border: 2px solid #34495e; padding: 10px; border-radius: 8px;">
            <label
              style="display: block; background: #34495e; color: #fff; text-align: center; font-size: 10px; font-weight: 800; padding: 4px; margin-bottom: 5px;">FIRMA
              SUPERVISOR</label>
            <div
              style="height: 80px; background: #fdfdfd; display: flex; justify-content: center; align-items: center; border: 1px dashed #ccc;">
              <span style="color: #bbb; font-size: 10px;">Captura Digital</span>
            </div>
          </div>
          <div style="border: 2px solid #34495e; padding: 10px; border-radius: 8px;">
            <label
              style="display: block; background: #34495e; color: #fff; text-align: center; font-size: 10px; font-weight: 800; padding: 4px; margin-bottom: 5px;">FIRMA
              INSPECTOR ERBB</label>
            <div
              style="height: 80px; background: #fdfdfd; display: flex; justify-content: center; align-items: center; border: 1px dashed #ccc;">
              <span style="color: #bbb; font-size: 10px;">Captura Digital</span>
            </div>
          </div>
          <div style="border: 2px solid #34495e; padding: 10px; border-radius: 8px;">
            <label
              style="display: block; background: #34495e; color: #fff; text-align: center; font-size: 10px; font-weight: 800; padding: 4px; margin-bottom: 5px;">FIRMA
              OFICINA TÉCNICA</label>
            <div
              style="height: 80px; background: #fdfdfd; display: flex; justify-content: center; align-items: center; border: 1px dashed #ccc;">
              <span style="color: #bbb; font-size: 10px;">Validación Final</span>
            </div>
          </div>
        </div>

        <div id="div_btn_subir_reporte"
          style="width: 100%; display: flex; justify-content: flex-end; gap: 15px; margin-top: 30px; padding: 20px; border-top: 1px solid #dee2e6;">
          <button class="btn" style="background: #95a5a6; padding: 12px 25px;"
            onclick="CerrarReporte()">CANCELAR</button>
          <button id="btn_subir_report" onclick="SubirReporteFinal()"
            style="padding: 12px 40px; background-color: #27ae60; border: none; border-radius: 8px; color: #fff; font-weight: 800; font-size: 15px; cursor: pointer; display: flex; align-items: center; gap: 10px;">
            <i class="fa-solid fa-cloud-arrow-up"></i> SUBIR REPORTE AL SISTEMA
          </button>
        </div>

      </div>
    </div>
  </div>
  <!-- P6 Modal Editar WBS -->
  <div id="modalP6WbsEdit" class="modal-overlay"
    style="display:none; z-index:9000; align-items:center; justify-content:center; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5);">
    <div class="modal-content"
      style="width:500px; padding:20px; border-radius:12px; background:var(--bg); border:1px solid var(--border); box-shadow:0 10px 25px rgba(0,0,0,0.3); position:relative;">
      <div
        style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; border-bottom:1px solid var(--border); padding-bottom:10px;">
        <h3 style="margin:0; font-size:16px; color:var(--text);">ðŸ“ <i class="fa-solid fa-book"></i> Diccionario WBS</h3>
        <button onclick="document.getElementById('modalP6WbsEdit').style.display='none'"
          style="background:transparent; border:none; font-size:18px; cursor:pointer; color:var(--text);">&times;</button>
      </div>
      <div style="font-size:12px; color:var(--muted); margin-bottom:15px;">
        Asigne nombres a los códigos WBS para que se muestren en lugar de "WBS 1.1" en los grupos.
      </div>

      <div
        style="display:grid; grid-template-columns: 100px 1fr; gap:10px; margin-bottom:15px; font-weight:700; font-size:11px; padding:0 5px;">
        <div>Código WBS</div>
        <div>Descripción</div>
      </div>

      <div id="p6WbsListContainer"
        style="max-height:300px; overflow-y:auto; display:flex; flex-direction:column; gap:8px;">
        <!-- Filled via JS -->
      </div>

      <div style="margin-top:20px; display:flex; justify-content:flex-end; gap:10px;">
        <button class="btn secondary"
          onclick="document.getElementById('modalP6WbsEdit').style.display='none'">Cancelar</button>
        <button class="btn btn-primary" onclick="p6SaveWbsDictionary()">Guardar</button>
      </div>
    </div>
  </div>

  <!-- MODAL: DETALLE OPERACIONES DE UNA ORDEN (GLOBAL) -->
  <div id="modal-order-ops-detail" class="modal" aria-hidden="true">
    <div class="modal-backdrop" onclick="closeModal('#modal-order-ops-detail')"></div>
    <div class="modal-card" style="width: 96%; max-width: 98vw; max-height: 90vh;">
      <div class="modal-head">
        <h2 class="modal-title" id="orderOpsDetailTitle">Detalle de Operaciones</h2>
        <button class="btn-close" onclick="closeModal('#modal-order-ops-detail')">&times;</button>
      </div>
      <div class="modal-body" style="padding: 20px; overflow-y: auto;">
        <div class="table-wrap">
          <table id="tblOrderOpsDetail" class="table">
            <thead>
              <tr>
                <th style="width:120px;">N° Operación</th>
                <th>Tipo</th>
                <th>Especialidad</th>
                <th>Descripción Operación</th>
                <th>Revisión (PSM)</th>
                <th style="text-align:right;">HH Plan</th>
                <th style="text-align:right;">HH Real</th>
                <th>Estado</th>
                <th>Inicio Plan</th>
                <th>Fin Plan</th>
                <th>Inicio Real</th>
                <th>Fin Real</th>
              </tr>
            </thead>
            <tbody></tbody>
          </table>
        </div>
      </div>
      <div class="modal-foot" style="justify-content: flex-end; padding: 15px 24px;">
        <button class="btn secondary" onclick="closeModal('#modal-order-ops-detail')">Cerrar</button>
      </div>
    </div>
  </div>
  <!-- Toast container for Backlog KPI details (Moved for absolute positioning) -->
  <div id="bl-kpi-toast"
    style="display:none; position:absolute; z-index:11000; width:450px; background:var(--panel); border:1px solid var(--accent); padding:24px; border-radius:16px; box-shadow: 0 20px 60px rgba(0,0,0,0.7);">
    <div
      style="display:flex; justify-content:space-between; align-items:center; margin-bottom:15px; border-bottom:1px solid var(--border); padding-bottom:10px;">
      <h3 id="bl-kpi-toast-title" style="margin:0; font-size:14px; color:var(--accent);">Detalle de Cálculo Backlog
      </h3>
      <button onclick="document.getElementById('bl-kpi-toast').style.display='none'"
        style="background:none; border:none; color:var(--muted); cursor:pointer; font-size:18px;"></button>
    </div>
    <div id="bl-kpi-toast-content" style="font-size:12px; color:var(--text); line-height:1.5;"></div>



  <!-- Global Toast -->
  <div id="globalToast" class="toast-hidden" style="position: fixed; bottom: 20px; right: 20px; z-index: 9999; padding: 12px 24px; border-radius: 8px; background: #1e293b; color: white; display:flex; align-items:center; gap:10px; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4); transform: translateY(100px); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid rgba(255,255,255,0.1);"></div>

  <script>
    function showGlobalToast(msg, icon = 'fa-info-circle') {
      const toast = document.getElementById('globalToast');
      if (!toast) return;
      toast.innerHTML = `<i class="fa-solid ${icon}"></i> <span>${msg}</span>`;
      toast.style.transform = 'translateY(0)';
      setTimeout(() => {
        toast.style.transform = 'translateY(100px)';
      }, 3000);
    }
  </script>
</body>
</html>