<!DOCTYPE html>
<html lang="es-PE">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Panel de Administración - GeoRenovaVida</title>
    
    <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=Poppins:wght@400;500;600;700&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster/dist/MarkerCluster.Default.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">

    <style>
        /* --- VARIAVEIS E RESET --- */
        :root {
            --header-height: 60px;
            --footer-height: 25px;
            --color-primary: #008000;
            --color-secondary: #006400;
            --color-accent: #FF5722;
            --color-bg-light: #f4f6f8;
            
            /* ATUALIZADO: Fonte Poppins */
            --font-family: 'Poppins', sans-serif;
            
            /* Camadas Z-Index */
            --z-map: 1;
            --z-controls: 1000;
            --z-drawer-backdrop: 1050;
            --z-drawer: 1100;
            --z-navbar: 2000;
            --z-modal: 3000;
            --z-guide: 4000;
        }

        * { margin: 0; padding: 0; box-sizing: border-box; font-family: var(--font-family); }
        body { height: 100vh; display: flex; flex-direction: column; overflow: hidden; background-color: var(--color-bg-light); font-size: 12px; }

        /* --- NAVBAR (Padronizado) --- */
        .navbar { 
            height: var(--header-height); background-color: white; display: flex; align-items: center; justify-content: space-between; 
            padding: 0 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); z-index: var(--z-navbar); position: relative; 
        }
        .nav-left { display: flex; align-items: center; gap: 15px; overflow: hidden; }
        
        /* ATUALIZADO: Tamanho do Logo */
        .nav-logo { height: 38px; filter: none; }
        
        .nav-divider { height: 25px; width: 1px; background-color: #ccc; display: block; }
        
        /* ATUALIZADO: Tamanho da Fonte do Título */
        .nav-title { 
            color: #555; 
            font-size: 14px; /* Padronizado com o código anterior */
            font-weight: 400; 
            white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
        }
        
        .nav-subtitle { 
            font-size: 10px; 
            color: white; 
            background-color: var(--color-primary); 
            padding: 2px 6px; 
            border-radius: 4px; 
            font-weight: 600; 
            margin-left: 5px;
        }
        
        .nav-right { display: flex; align-items: center; gap: 10px; }
        
        .user-info-box { 
            display: flex; align-items: center; gap: 12px; padding: 5px 15px; 
            border-radius: 5px; border: 1px solid #eee; background-color: #fafafa; 
            font-size: 12px;
        }

        /* --- MAP CONTAINER --- */
        .map-container { position: relative; width: 100%; height: calc(100vh - var(--header-height) - var(--footer-height)); background-color: #ddd; }
        #map { width: 100%; height: 100%; z-index: var(--z-map); outline: none; }
        .cursor-crosshair { cursor: crosshair !important; }

        /* --- LEGENDA --- */
        .map-legend { background: white; padding: 8px; border-radius: 4px; box-shadow: 0 2px 5px rgba(0,0,0,0.3); font-size: 11px; line-height: 1.5; color: #333; border: 1px solid #ccc; max-width: 150px; }
        .map-legend h4 { margin: 0 0 3px 0; font-size: 12px; border-bottom: 1px solid #eee; padding-bottom: 2px; color: var(--color-primary); font-weight: 600; }
        .legend-item { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
        .legend-color { width: 12px; height: 12px; border-radius: 50%; display: inline-block; border: 1px solid rgba(0,0,0,0.1); flex-shrink: 0; }

        /* --- PAINEL DE CONTROLE (Desktop) --- */
        .control-panel { 
            position: absolute; top: 20px; right: 20px; z-index: var(--z-controls); 
            background: white; border-radius: 4px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); 
            padding: 20px; width: 360px; 
            display: flex; flex-direction: column; gap: 15px; 
            max-height: calc(100vh - 150px); overflow-y: auto; 
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .panel-header { font-size: 14px; font-weight: 600; color: var(--color-primary); border-bottom: 1px solid #ddd; padding-bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
        
        .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        .stat-box { background: #f9f9f9; padding: 10px; border-radius: 4px; text-align: center; border: 1px solid #eee; }
        .stat-number { font-size: 18px; font-weight: 700; color: #333; }
        .stat-label { font-size: 10px; color: #666; text-transform: uppercase; }
        .color-primary { color: var(--color-primary); }
        .color-accent { color: var(--color-accent); }

        /* --- ACORDEÃO --- */
        .accordion-btn { 
            width: 100%; background: #fff; border: 1px solid #ddd; border-left: 4px solid #999; 
            padding: 12px 15px; text-align: left; font-weight: 600; font-size: 12px; color: #444; 
            cursor: pointer; margin-top: 10px; display: flex; justify-content: space-between; align-items: center; 
            border-radius: 4px; transition: all 0.2s; box-shadow: 0 1px 2px rgba(0,0,0,0.05);
            flex-shrink: 0;
            font-family: var(--font-family);
        }
        .accordion-btn:hover { background: #f9f9f9; }
        .accordion-btn.active { background: #e8f5e9; color: var(--color-primary); border-color: #c8e6c9; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-left-color: var(--color-primary); }
        .accordion-btn .arrow { transition: transform 0.3s; font-size: 10px; }
        .accordion-btn.active .arrow { transform: rotate(180deg); }

        .accordion-content { 
            display: none; border: 1px solid #ddd; border-top: none; background: #fff; 
            border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; 
            max-height: 250px; overflow-y: auto; padding: 5px; 
            flex-shrink: 0;
        }
        .accordion-content.active { display: block; animation: slideDown 0.3s ease-out; }
        @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

        /* --- GUIA (TUTORIAL) --- */
        .guide-popup { 
            position: fixed; background-color: var(--color-accent); color: white; padding: 10px 15px; 
            border-radius: 8px; font-size: 12px; font-weight: 600; width: max-content; max-width: 220px; 
            box-shadow: 0 4px 15px rgba(255, 87, 34, 0.4); display: none; text-align: right; 
            border: 2px solid white; animation: bounce-horizontal 1s infinite alternate ease-in-out; 
            pointer-events: none; z-index: var(--z-guide); 
        }
        .guide-popup::after { content: ''; position: absolute; top: 50%; left: 100%; transform: translateY(-50%); border-width: 8px; border-style: solid; border-color: transparent transparent transparent var(--color-accent); }
        .show-guide { display: block !important; }
        @keyframes bounce-horizontal { from { transform: translateX(0); } to { transform: translateX(-10px); } }

        /* --- FORMULÁRIOS E BOTÕES --- */
        .filter-group label { font-size: 11px; font-weight: 600; color: #555; display: block; margin-bottom: 3px; }
        select, input[type="text"], input[type="date"] { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; outline: none; background: white; color: #333; font-family: var(--font-family); }

        .btn-tool { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; background: #f5f5f5; cursor: pointer; color: #333; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.2s; margin-bottom: 5px; flex-shrink: 0; font-family: var(--font-family); }
        .btn-tool:hover { background-color: #e0e0e0; }
        .btn-tool.active { background-color: var(--color-accent); color: white; border-color: var(--color-accent); }
        .btn-tool.btn-blocked { opacity: 0.5; cursor: not-allowed; background-color: #eee; color: #999; border-color: #ddd; }
        .btn-primary { background-color: var(--color-primary); color: white; border: none; padding: 10px 20px; border-radius: 25px; font-weight: 600; cursor: pointer; transition: 0.3s; font-size: 12px; display: flex; align-items: center; justify-content: center; gap:8px; width: 100%; font-family: var(--font-family); }
        
        /* --- MOBILE FAB --- */
        .mobile-fab { 
            display: none; position: absolute; top: 80px; right: 15px; z-index: 1001; 
            width: 45px; height: 45px; border-radius: 50%; 
            background: var(--color-primary); color: white; 
            box-shadow: 0 4px 10px rgba(0,0,0,0.3); border: none; 
            font-size: 1.2rem; align-items: center; justify-content: center; cursor: pointer;
        }

        /* --- LISTAS SIDEBAR --- */
        .area-item { background: white; padding: 10px; margin-bottom: 5px; border-radius: 4px; border: 1px solid #eee; border-left: 4px solid var(--color-accent); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; }
        .area-item.point-item { border-left-color: #003366; }
        .area-item.my-item { border-left-color: #2196F3; } 
        .area-name { font-weight: 600; font-size: 12px; color: #333; }
        .area-meta { font-size: 10px; color: #777; display: block; margin-top: 2px; }

        /* --- FOOTER --- */
        .footer-info { height: var(--footer-height); background-color: #222; color: #fff; display: flex; align-items: center; justify-content: space-around; font-size: 10px; padding: 0 5px; white-space: nowrap; overflow: hidden; font-family: monospace; z-index: 1002; }
        .footer-item { padding: 0 5px; border-right: 1px solid #555; }
        .footer-item:last-child { border-right: none; }

        /* --- MODAIS GERAIS --- */
        .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: var(--z-modal); display: none; justify-content: center; align-items: center; padding: 10px; }
        .modal-content { background-color: white; padding: 25px; border-radius: 8px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); width: 95%; max-width: 500px; position: relative; max-height: 90vh; overflow-y: auto; }
        .modal-content h3, .modal-content h2 { color: var(--color-primary); margin-bottom: 15px; font-weight: 700; font-size: 16px; }
        .btn-close { position: absolute; top: 15px; right: 15px; cursor: pointer; color: #999; font-size: 1.2rem; padding: 5px; }
        
        .draw-instruction { background: white; color: #333; padding: 10px 20px; border-radius: 30px; position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 2000; font-size: 12px; pointer-events: none; display: none; box-shadow: 0 2px 5px rgba(0,0,0,0.3); border: 1px solid #eee; width: 90%; text-align: center; font-weight: 600; }

        /* --- KANBAN --- */
        #modal-kanban.modal-overlay { background-color: rgba(0,0,0,0.1); pointer-events: none; justify-content: flex-start; z-index: 1500; }
        #modal-kanban .modal-kanban { width: 400px; max-width: 100%; height: calc(100vh - var(--header-height)); margin-top: var(--header-height); margin-left: 0; border-radius: 0 10px 10px 0; box-shadow: 2px 0 10px rgba(0,0,0,0.2); pointer-events: auto; transform: translateX(-100%); transition: transform 0.3s ease-in-out; position: absolute; left: 0; top: 0; display: flex; flex-direction: column; background: #f4f6f8; padding: 20px; }
        #modal-kanban.active .modal-kanban { transform: translateX(0); }
        #modal-kanban .kanban-board { display: flex; flex-direction: column; gap: 20px; flex: 1; overflow-y: auto; margin-top: 15px; }
        .kanban-col { flex: 1; background: white; border-radius: 4px; padding: 15px; display: flex; flex-direction: column; border: 1px solid #ddd; min-height: 200px; }
        .kanban-header { border-bottom: 2px solid #f0f0f0; margin-bottom: 10px; padding-bottom: 10px; font-weight: 600; color: #444; font-size: 13px; }
        .note-card { background: #fff; padding: 10px; margin-bottom: 10px; border: 1px solid #eee; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); font-size: 12px; }

        /* --- CLUSTER ICONS --- */
        .marker-cluster-custom { background-clip: padding-box; border-radius: 20px; }
        .marker-cluster-custom div { width: 30px; height: 30px; margin-left: 5px; margin-top: 5px; text-align: center; border-radius: 50%; color: white; font: 12px "Poppins", sans-serif; display: flex; align-items: center; justify-content: center; font-weight: bold; }
        .cluster-renova { background-color: rgba(46, 125, 50, 0.4); } .cluster-renova div { background-color: #2E7D32; }
        .cluster-oriental { background-color: rgba(255, 143, 0, 0.4); } .cluster-oriental div { background-color: #FF8F00; }
        .cluster-citizen { background-color: rgba(33, 150, 243, 0.4); } .cluster-citizen div { background-color: #2196F3; }
        .cluster-conflict { background-color: rgba(211, 47, 47, 0.4); } .cluster-conflict div { background-color: #D32F2F; }

        /* --- DRAWER BACKDROP (Mobile) --- */
        .drawer-backdrop {
            display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
            background: rgba(0,0,0,0.5); z-index: var(--z-drawer-backdrop);
            opacity: 0; transition: opacity 0.3s;
        }
        .drawer-backdrop.active { display: block; opacity: 1; }
        
        /* --- TELA DE CARREGAMENTO AVANÇADA --- */
        .loader-overlay {
            position: fixed;
            top: 0; left: 0; width: 100vw; height: 100vh;
            background-color: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(4px);
            z-index: 9999;
            display: flex; justify-content: center; align-items: center; flex-direction: column;
        }

        .loader-content {
            background: white;
            padding: 30px;
            border-radius: 15px;
            box-shadow: 0 15px 35px rgba(0,0,0,0.3);
            text-align: center;
            width: 90%;
            max-width: 400px;
            border: 1px solid rgba(255,255,255,0.2);
            position: relative;
            overflow: hidden;
        }

        /* Ícone e Animação */
        .loader-icon-container {
            position: relative;
            width: 60px; height: 60px;
            margin: 0 auto 15px auto;
            display: flex; justify-content: center; align-items: center;
        }
        .loader-icon-container i {
            font-size: 2.5rem;
            color: var(--color-primary);
            z-index: 2;
        }
        .pulse-ring {
            position: absolute;
            width: 100%; height: 100%;
            border-radius: 50%;
            border: 3px solid var(--color-accent);
            opacity: 0;
            animation: pulse 1.5s infinite ease-out;
        }
        @keyframes pulse {
            0% { transform: scale(0.5); opacity: 0.8; }
            100% { transform: scale(1.5); opacity: 0; }
        }

        /* Textos */
        .loader-content h3 {
            font-size: 14px; color: #333; margin-bottom: 5px; font-weight: 700;
        }
        .loader-tip-text {
            font-size: 11px; color: #666; margin-bottom: 20px;
            min-height: 1.2em; 
            font-style: italic;
            transition: opacity 0.3s ease;
        }

        /* Barra de Progresso Infinita */
        .progress-bar-wrapper {
            width: 100%; height: 6px;
            background: #eee; border-radius: 3px; overflow: hidden;
            position: relative;
        }
        .progress-bar-fill {
            height: 100%; background: var(--color-primary);
            width: 50%; position: absolute; left: -50%;
            border-radius: 3px;
            animation: loadingBar 1.5s infinite ease-in-out;
        }
        @keyframes loadingBar {
            0% { left: -50%; width: 50%; }
            50% { left: 25%; width: 75%; }
            100% { left: 100%; width: 25%; }
        }

        /* --- MEDIA QUERIES (MOBILE) --- */
        @media (max-width: 768px) {
            .nav-title, .nav-divider { display: none; }
            .nav-left { gap: 5px; }
            .user-info-box { border: none; background: transparent; padding: 0; }
            #user-display-name { display: none; }
            
            .mobile-fab { display: flex; } 
            
            /* Drawer Mobile */
            .control-panel { 
                position: fixed; top: 0; right: 0; 
                width: 85%; height: 100vh; 
                border-radius: 0; transform: translateX(100%); 
                padding: 15px; padding-top: 70px; 
                z-index: var(--z-drawer);
                display: block; 
                max-height: 100vh; 
            }
            .control-panel.open-drawer { transform: translateX(0); }
            
            .accordion-content { 
                max-height: none !important; 
                overflow: visible !important; 
                min-height: 60px;
            }
            
            .panel-close-mobile { display: block !important; font-size: 1.5rem; color: #555; cursor: pointer; }

            /* Kanban Mobile */
            #modal-kanban.modal-overlay { background-color: rgba(0,0,0,0.5); pointer-events: auto; }
            #modal-kanban .modal-kanban { width: 95%; border-radius: 0 10px 10px 0; z-index: var(--z-modal); }

            /* Guias */
            .guide-popup { position: fixed; right: 5% !important; top: 150px !important; transform: none !important; width: 90%; text-align: center; max-width: none; }
            .guide-popup::after { display: none; }

            /* Footer Mobile */
            .footer-info { font-size: 9px; justify-content: space-between; }
            .footer-item:nth-child(1), .footer-item:nth-child(3) { display: none; }
            
            /* Modal Form */
            #modal-citizen-form .modal-content { width: 95%; max-width: 95%; padding: 15px; }
            #modal-citizen-form .filter-group { grid-column: span 2; }
        }
    </style>
</head>
<body>

    <div id="global-loader" class="loader-overlay" style="display: none;">
        <div class="loader-content">
            <div class="loader-icon-container">
                <i class="fas fa-globe-americas fa-spin" style="--fa-animation-duration: 3s;"></i>
                <div class="pulse-ring"></div>
            </div>
            
            <h3 id="loader-title">Cargando Datos...</h3>
            
            <p id="loader-tip" class="loader-tip-text">¿Sabías que Perú tiene 84 de los 117 microclimas del mundo?</p>
            
            <div class="progress-bar-wrapper">
                <div class="progress-bar-fill"></div>
            </div>
        </div>
    </div>

    <div id="drawer-backdrop" class="drawer-backdrop" onclick="UIManager.toggleMobileMenu()"></div>

    <button class="mobile-fab" id="btn-toggle-menu" onclick="UIManager.toggleMobileMenu()">
        <i class="fas fa-bars"></i>
    </button>

    <div id="guide-depto" class="guide-popup">
        <i class="fas fa-map"></i> Primero, seleccione el <strong>Departamento</strong>
    </div>
    <div id="guide-prov" class="guide-popup">
        <i class="fas fa-check-circle"></i> Ahora seleccione la <strong>Provincia</strong>
    </div>
    <div id="guide-dist" class="guide-popup">
        <i class="fas fa-city"></i> Finalmente, el <strong>Distrito</strong>
    </div>
    <div id="guide-tools" class="guide-popup">
        <i class="fas fa-tools"></i> ¡Listo! Herramientas habilitadas.
    </div>

    <nav class="navbar">
        <div class="nav-left">
            <img src="Logo-RenovaVida.F.png" alt="GeoRenovaVida" class="nav-logo" onerror="this.style.display='none'"> 
            <div class="nav-divider"></div>
            <span class="nav-title">Plataforma de Gestión - GeoRenovaVida</span>
            <span class="nav-subtitle" id="user-role-badge">AUTORIDAD</span>
        </div>
        
        <div class="nav-right">
            <div class="user-info-box">
                <span id="user-display-name" style="font-size: 12px; color: #555; font-weight: 500;">Usuario</span>
                <i class="fas fa-sign-out-alt" style="cursor:pointer; color:#c62828; font-size: 14px; padding: 5px;" onclick="AuthManager.logout()" title="Salir"></i>
            </div>
        </div>
    </nav>

    <div class="map-container">
        <div id="map"></div>
        <div id="draw-notification" class="draw-instruction">
            <i class="fas fa-mouse-pointer" style="color: var(--color-accent);"></i> Toque el mapa para marcar.<br>
            <i class="fas fa-check" style="color: var(--color-accent);"></i> Botón "Guardar" para terminar.
        </div>
        
        <div class="control-panel" id="main-control-panel">
            <div class="panel-header">
                <span><i class="fas fa-tools"></i> Herramientas</span>
                <i class="fas fa-times panel-close-mobile" style="display:none;" onclick="UIManager.toggleMobileMenu()"></i>
            </div>
            
            <div class="stats-grid">
                <div class="stat-box">
                    <div class="stat-number color-primary" id="stat-points-visible">0</div>
                    <div class="stat-label">Puntos Mapa</div>
                </div>
                <div class="stat-box">
                    <div class="stat-number color-accent" id="stat-records-saved">0</div>
                    <div class="stat-label">Registros Guardados</div>
                </div>
            </div>

            <div class="filters-section">
                <div style="background:#e8f5e9; color:#2e7d32; padding:10px; font-size:11px; border-radius:4px; border:1px solid #c8e6c9; margin: 10px 0;">
                    <i class="fas fa-info-circle"></i> <b>Modo Híbrido:</b> Seleccione región para descargar datos.
                </div>
                <div class="filter-group">
                    <label>Departamento</label>
                    <select id="sel-depto"> <option value="">Cargando límites...</option> </select>
                </div>
                <div class="filter-group">
                    <label>Provincia</label>
                    <select id="sel-prov" disabled> <option value="">Seleccione Depto primero</option> </select>
                </div>
                <div class="filter-group">
                    <label>Distrito</label>
                    <select id="sel-dist" disabled> <option value="">Seleccione Prov primero</option> </select>
                </div>
            </div>
            
            <button id="btn-draw" class="btn-tool btn-blocked" onclick="InteractionManager.safeToggleDraw()">
                <i class="fas fa-draw-polygon"></i> Registrar Área
            </button>
            <button id="btn-clear-draw" class="btn-tool" style="background:#ffebee; color:#c62828; border-color:#ef9a9a; display:none;" onclick="InteractionManager.clearDraw()">
                <i class="fas fa-times"></i> Cancelar Dibujo
            </button>
            <button id="btn-add-citizen" class="btn-tool btn-blocked" onclick="InteractionManager.safeTogglePointCapture()">
                <i class="fas fa-user-plus"></i> Registrar Ciudadano
            </button>

            <button class="accordion-btn" onclick="UIManager.toggleAccordion('acc-areas')">
                <span><i class="fas fa-draw-polygon" style="color:var(--color-accent)"></i> Áreas Dibujadas</span>
                <i class="fas fa-chevron-down arrow"></i>
            </button>
            <div id="acc-areas" class="accordion-content">
                <div class="sidebar-list" id="list-saved-areas">
                    <div style="text-align:center; color:#999; padding:10px; font-size:11px; font-style:italic;">Ninguna área guardada</div>
                </div>
            </div>

            <button class="accordion-btn" onclick="UIManager.toggleAccordion('acc-my-regs')">
                <span><i class="fas fa-user-tag" style="color:#2196F3"></i> Mis Registros</span>
                <i class="fas fa-chevron-down arrow"></i>
            </button>
            <div id="acc-my-regs" class="accordion-content">
                <div class="sidebar-list" id="list-my-registrations">
                    <div style="text-align:center; color:#999; padding:10px; font-size:11px; font-style:italic;">Cargando...</div>
                </div>
            </div>

            <button class="accordion-btn" onclick="UIManager.toggleAccordion('acc-points')">
                <span><i class="fas fa-map-marker-alt" style="color:#003366"></i> Puntos Comentados</span>
                <i class="fas fa-chevron-down arrow"></i>
            </button>
            <div id="acc-points" class="accordion-content">
                <div class="sidebar-list" id="list-saved-points">
                    <div style="text-align:center; color:#999; padding:10px; font-size:11px; font-style:italic;">Ningún punto comentado</div>
                </div>
            </div>

        </div>
    </div>

    <footer class="footer-info">
        <div class="footer-item">DATUM WGS84</div>
        <div class="footer-item" id="coords-display">Lat: - Long: -</div>
        <div class="footer-item">Sistema: GeoRenova</div>
        <div class="footer-item">En Línea</div>
    </footer>

    <div id="modal-welcome" class="modal-overlay">
        <div class="modal-content welcome-modal">
            <img src="Logo-RenovaVida.F.png" alt="GeoRenovaVida" style="height: 50px; display: block; margin: 0 auto 20px auto;" onerror="this.style.display='none'">
            <h2 class="welcome-title">Bienvenido</h2>
            <p style="text-align:justify; margin-bottom:10px; color:#555; font-size:12px;">Gracias por completar su registro como autoridad local. Desde este momento, tiene acceso a las funcionalidades habilitadas para la gestión de la infraestructura social de su territorio como: la verificación del avance del proyecto, la identificación de viviendas incluidas en el programa de electrificación rural, las viviendas que no están dentro del programa, entre otras funcionalidades.</p>
            <p style="text-align:justify; margin-bottom:20px; color:#555; font-size:12px;">Su rol es fundamental para garantizar un proceso transparente, ordenado y cercano a la comunidad.</p>
            <button class="btn-primary welcome-btn" onclick="AuthManager.finishOnboarding()">Continuar</button>
        </div>
    </div>

    <div id="modal-save-area" class="modal-overlay">
        <div class="modal-content">
            <h3><i class="fas fa-save"></i> Guardar Área</h3>
            <p style="font-size:12px; color:#666; margin-bottom:20px;">Puntos en área: <b><span id="save-area-count" style="color:var(--color-primary);">0</span></b></p>
            <div style="margin-bottom:25px;">
                <label style="display:block; margin-bottom:5px; font-weight:600;">Nombre del Área</label>
                <input type="text" id="input-area-name" placeholder="Ej: Zona Norte">
            </div>
            <div style="display:flex; justify-content:flex-end; gap:12px;">
                <button class="btn-tool" style="width:auto;" onclick="UIManager.closeModal('modal-save-area')">Cancelar</button>
                <button class="btn-primary" style="width:auto;" onclick="InteractionManager.saveArea()">Guardar</button>
            </div>
        </div>
    </div>

    <div id="modal-point-details" class="modal-overlay">
        <div class="modal-content">
            <i class="fas fa-times btn-close" onclick="UIManager.closeModal('modal-point-details')"></i>
            <h3 id="point-details-title">Detalles</h3>
            <div style="display: grid; grid-template-columns: 1fr; gap: 20px;">
                <div>
                    <div id="point-attributes" style="background: #f9f9f9; padding: 15px; border-radius: 4px; max-height: 250px; overflow-y: auto; font-size: 11px; border: 1px solid #eee;"></div>
                </div>
                <div style="border-top: 1px solid #eee; padding-top: 15px;">
                    <button class="btn-primary" style="width:100%;" id="btn-open-kanban"><i class="fas fa-columns"></i> Abrir Notas / Kanban</button>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-kanban" class="modal-overlay">
        <div class="modal-content modal-kanban">
            <i class="fas fa-times btn-close" onclick="UIManager.closeModal('modal-kanban')"></i>
            <h2 id="kanban-title" style="color:var(--color-primary); margin-bottom:5px; font-size:16px;">Detalles</h2>
            <div style="display: flex; gap: 10px; align-items: center; margin-bottom: 10px;">
                <span id="kanban-badge" style="background:#eee; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:bold; color:#555;">TIPO</span>
                <p id="kanban-subtitle" style="color:#777; font-size:11px; margin:0;"></p>
            </div>
            <div class="kanban-board">
                <div class="kanban-col" style="border-top: 4px solid #f57f17;">
                    <div class="kanban-header"><span style="color:#f57f17;"><i class="fas fa-lock"></i> Privadas</span></div>
                    <div id="kanban-list-private" style="flex:1; overflow-y:auto;"></div>
                    <div style="display:flex; gap:5px; margin-top:10px;">
                        <input type="text" id="input-note-private" placeholder="Nota privada..." style="font-size:12px;">
                        <button class="btn-primary" style="padding:0 15px; border-radius:4px; width: auto;" onclick="RemoteDB.addNote('private')"><i class="fas fa-plus"></i></button>
                    </div>
                </div>
                <div class="kanban-col" style="border-top: 4px solid #1565c0;">
                    <div class="kanban-header"><span style="color:#1565c0;"><i class="fas fa-users"></i> Compartido con RenovaVida</span></div>
                    <div id="kanban-list-shared" style="flex:1; overflow-y:auto;"></div>
                    <div style="display:flex; gap:5px; margin-top:10px;">
                        <input type="text" id="input-note-shared" placeholder="Nota equipo..." style="font-size:12px;">
                        <button class="btn-primary" style="padding:0 15px; border-radius:4px; width: auto;" onclick="RemoteDB.addNote('shared')"><i class="fas fa-plus"></i></button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div id="modal-citizen-form" class="modal-overlay">
        <div class="modal-content">
            <i class="fas fa-times btn-close" onclick="UIManager.closeModal('modal-citizen-form')"></i>
            <h3 style="text-align: center;"><i class="fas fa-id-card"></i> Datos del Ciudadano</h3>
            <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 15px;">
                <div class="filter-group"><label>Nombres</label><input type="text" id="cit-nombres"></div>
                <div class="filter-group"><label>Apellidos</label><input type="text" id="cit-apellidos"></div>
                <div class="filter-group"><label>DNI</label><input type="text" id="cit-dni"></div>
                <div class="filter-group"><label>Fecha Nacimiento</label><input type="date" id="cit-fecha-nasc"></div>
                <div class="filter-group"><label>Celular</label><input type="text" id="cit-celular"></div>
                <div class="filter-group"><label>Cel. Vecino</label><input type="text" id="cit-celular-vecino"></div>
                <div class="filter-group" style="grid-column: span 2;"><label>Dirección</label><input type="text" id="cit-direccion"></div>
            </div>
            <div style="margin-top: 20px; display: flex; gap: 10px;">
                <button class="btn-tool" style="flex: 1;" onclick="UIManager.closeModal('modal-citizen-form')">Cancelar</button>
                <button class="btn-primary" style="flex: 2;" onclick="InteractionManager.saveCitizenRegistration()">Registrar</button>
            </div>
        </div>
    </div>

    <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
    <script src="https://unpkg.com/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
    <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/alasql@4.0.0/dist/alasql.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <script src="config.js"></script> 

    <script>
        // Verificação de Segurança do Config.js
        if(typeof SUPABASE_URL === 'undefined' || typeof SUPABASE_KEY === 'undefined') {
            console.error("ERRO: Variáveis SUPABASE_URL e SUPABASE_KEY não encontradas. Verifique o arquivo config.js");
            alert("Error de configuración: Faltan claves de acceso.");
        }

        const STATE = {
            user: null, map: null,
            layers: { clusters: null, boundary: null, draw: null, previewLine: null, previewPoly: null, highlight: null },
            data: { deptos: null, provs: null, dists: null, currentPoints: [], cols: { depto: null, prov: null, dist: null, provDepto: null, distProv: null } },
            drawing: { active: false, points: [] },
            kanban: { activeId: null, activeType: null },
            capturingPoint: false, tempPoint: null,
            isMobile: window.innerWidth <= 768
        };

        const TABELA_PONTOS = 'pontos1';
        const GEOJSON_URLS = {
            DEPTO: 'https://raw.githubusercontent.com/orbisgeo/geojson-peru-data/main/peru_departamental_simple.geojson',
            PROV: 'https://raw.githubusercontent.com/orbisgeo/geojson-peru-data/main/peru_provincial_simple.geojson',
            DIST: 'https://raw.githubusercontent.com/orbisgeo/geojson-peru-data/main/peru_distrital_simple.geojson'
        };

        const supabaseClient = (typeof SUPABASE_URL !== 'undefined') ? supabase.createClient(SUPABASE_URL, SUPABASE_KEY) : null;

        /* --- GERENCIADOR DO TUTORIAL --- */
        const GuideManager = {
            guides: {}, targets: {},
            init: function() {
                this.guides = { depto: document.getElementById('guide-depto'), prov: document.getElementById('guide-prov'), dist: document.getElementById('guide-dist'), tools: document.getElementById('guide-tools') };
                this.targets = { depto: document.getElementById('sel-depto'), prov: document.getElementById('sel-prov'), dist: document.getElementById('sel-dist'), tools: document.getElementById('btn-draw') };
                window.addEventListener('resize', () => { STATE.isMobile = window.innerWidth <= 768; this.repositionActive(); });
            },
            show: function(step) {
                this.hideAll();
                const guide = this.guides[step]; const target = this.targets[step];
                if(guide && target) { 
                    guide.classList.add('show-guide'); 
                    if (!STATE.isMobile) this.positionGuide(guide, target);
                }
            },
            hideAll: function() { Object.values(this.guides).forEach(g => { if(g) g.classList.remove('show-guide'); }); },
            positionGuide: function(guide, target) {
                const rect = target.getBoundingClientRect();
                const top = rect.top + (rect.height / 2) - (guide.offsetHeight / 2);
                const left = rect.left - guide.offsetWidth - 15; 
                guide.style.top = `${top}px`; guide.style.left = `${left}px`;
            },
            repositionActive: function() {
                if(!STATE.isMobile) Object.keys(this.guides).forEach(key => { if(this.guides[key].classList.contains('show-guide')) this.positionGuide(this.guides[key], this.targets[key]); });
            }
        };

        /* --- GERENCIADOR DE CURIOSIDADES (LOADER) --- */
        const LoaderManager = {
            interval: null,
            // Lista de Curiosidades sobre o Peru
            tips: [
                "🥔 ¿Sabías que? Perú es el país de la papa, con más de 3,500 variedades nativas.",
                "🌊 El Río Amazonas, el más largo del mundo, nace en los Andes peruanos.",
                "🏙️ Cusco fue la capital del Imperio Inca, el más grande de la América precolombina.",
                "🌽 En Perú existe una variedad de maíz morado único en el mundo.",
                "🏔️ El Cañón de Cotahuasi (Arequipa) es uno de los más profundos del planeta.",
                "🚢 El Lago Titicaca es el lago navegable más alto del mundo (3.812 m.s.n.m).",
                "🦅 El Cóndor Andino es una de las aves voladoras más grandes del mundo.",
                "🎨 La Montaña de los 7 Colores (Vinicunca) debe sus colores a minerales milenarios.",
                "👽 Las Líneas de Nazca son tan grandes que solo se aprecian bien desde el aire.",
                "🍽️ Lima es considerada la Capital Gastronómica de América Latina.",
                "🏫 La Universidad San Marcos (1551) es la más antigua de América.",
                "🌉 El Puente Q'eswachaka es el último puente inca hecho de fibra vegetal."
            ],
            start: function() {
                const loader = document.getElementById('global-loader');
                const tipText = document.getElementById('loader-tip');
                const statDisplay = document.getElementById('stat-points-visible');
                
                loader.style.display = 'flex';
                statDisplay.innerHTML = '<i class="fas fa-sync fa-spin"></i>';
                
                // Troca o texto imediatamente
                tipText.innerText = this.tips[Math.floor(Math.random() * this.tips.length)];
                
                // Começa a rodar as frases a cada 3.5s (um pouco mais lento para dar tempo de ler)
                this.interval = setInterval(() => {
                    // Efeito de fade-out/fade-in suave
                    tipText.style.opacity = 0;
                    setTimeout(() => {
                        const randomTip = this.tips[Math.floor(Math.random() * this.tips.length)];
                        tipText.innerText = randomTip;
                        tipText.style.opacity = 1;
                    }, 300);
                }, 5000);
            },
            stop: function() {
                const loader = document.getElementById('global-loader');
                if (this.interval) clearInterval(this.interval);
                loader.style.display = 'none';
            }
        };

        /* --- 0. AUTH --- */
        const AuthManager = {
            init: async function() {
                if(!supabaseClient) return;
                GuideManager.init(); 
                const { data: { session } } = await supabaseClient.auth.getSession();
                if (!session) { window.location.href = 'login.html'; return; }
                const { data: profile } = await supabaseClient.from('profiles').select('*, primeiro_acesso').eq('id', session.user.id).single();
                if (!profile || !['autoridade', 'staff', 'admin'].includes(profile.role)) { alert("Acesso restrito."); await this.logout(); return; }
                STATE.user = session.user;
                document.getElementById('user-display-name').innerText = session.user.email;
                document.getElementById('user-role-badge').innerText = profile.role.toUpperCase();
                if (profile.primeiro_acesso === true) UIManager.openModal('modal-welcome'); else setTimeout(() => GuideManager.show('depto'), 1000);
                RemoteDB.init(); MapManager.init(); DataManager.init(); InteractionManager.updateButtonStates();
            },
            finishOnboarding: async function() {
                UIManager.closeModal('modal-welcome'); setTimeout(() => GuideManager.show('depto'), 500);
                await supabaseClient.from('profiles').update({ primeiro_acesso: false }).eq('id', STATE.user.id);
            },
            logout: async function() { await supabaseClient.auth.signOut(); window.location.href = 'login.html'; }
        };

        /* --- 1. REMOTE DATA --- */
        const RemoteDB = {
            init: function() { this.loadSidebarData(); },
            loadSidebarData: async function() {
                // Carrega Áreas
                const { data: areas } = await supabaseClient.from('areas').select('*').order('created_at', { ascending: false });
                
                // Carrega Notas para estatística
                const { data: notes } = await supabaseClient.from('kanban_notes').select('context_id').eq('context_type', 'point');
                const uniquePoints = notes ? [...new Set(notes.map(n => n.context_id))] : [];
                document.getElementById('stat-records-saved').innerText = (areas?.length || 0) + uniquePoints.length;

                // Carrega Meus Registros
                const { data: myCitizens } = await supabaseClient.from('registros_ciudadanos').select('*').eq('user_id', STATE.user.id).order('created_at', { ascending: false });

                this.renderSidebar(areas || [], uniquePoints, myCitizens || []);
            },
            renderSidebar: function(areas, points, myCitizens) {
                // Renderiza Áreas
                const listAreas = document.getElementById('list-saved-areas');
                listAreas.innerHTML = areas.length ? '' : '<div style="text-align:center; color:#999; padding:10px; font-size:11px; font-style:italic;">Ninguna área guardada</div>';
                areas.forEach(area => {
                    const el = document.createElement('div'); el.className = 'area-item';
                    el.innerHTML = `<div><span class="area-name">${area.name}</span><span class="area-meta"><i class="fas fa-map-marker-alt"></i> Ver Proyectos</span></div><i class="fas fa-chevron-right" style="color:#ccc;"></i>`;
                    el.onclick = () => { InteractionManager.handleAreaClick(area); UIManager.closeMobileMenu(); };
                    listAreas.appendChild(el);
                });

                // Renderiza Meus Registros
                const listMyReg = document.getElementById('list-my-registrations');
                listMyReg.innerHTML = myCitizens.length ? '' : '<div style="text-align:center; color:#999; padding:10px; font-size:11px; font-style:italic;">Ningún ciudadano registrado</div>';
                myCitizens.forEach(cit => {
                    const el = document.createElement('div'); el.className = 'area-item my-item';
                    el.innerHTML = `<div><span class="area-name">${cit.nombres.split(' ')[0]} ${cit.apellidos.split(' ')[0]}</span><span class="area-meta"><i class="fas fa-user"></i> DNI: ${cit.dni}</span></div><i class="fas fa-chevron-right" style="color:#ccc;"></i>`;
                    el.onclick = () => { InteractionManager.handleCitizenRecordClick(cit); UIManager.closeMobileMenu(); };
                    listMyReg.appendChild(el);
                });

                // Renderiza Pontos Comentados
                const listPoints = document.getElementById('list-saved-points');
                listPoints.innerHTML = points.length ? '' : '<div style="text-align:center; color:#999; padding:10px; font-size:11px; font-style:italic;">Ningún punto comentado</div>';
                points.forEach(pid => {
                    const el = document.createElement('div'); el.className = 'area-item point-item';
                    el.innerHTML = `<div><span class="area-name">Punto #${pid}</span><span class="area-meta"><i class="fas fa-comment"></i> Ver comentarios</span></div><i class="fas fa-chevron-right" style="color:#ccc;"></i>`;
                    el.onclick = () => { InteractionManager.handleSavedPointClick(pid); UIManager.closeMobileMenu(); };
                    listPoints.appendChild(el);
                });
            },
            addNote: async function(type) {
                const input = document.getElementById(type === 'private' ? 'input-note-private' : 'input-note-shared');
                const content = input.value.trim(); if(!content) return;
                const { error } = await supabaseClient.from('kanban_notes').insert({ content: content, type: type, context_type: STATE.kanban.activeType, context_id: String(STATE.kanban.activeId), user_id: STATE.user.id });
                if(error) return alert("Erro: " + error.message);
                input.value = ''; UIManager.renderKanbanNotes(); this.loadSidebarData();
            },
            deleteNote: async function(id) {
                if(!confirm("¿Eliminar?")) return;
                await supabaseClient.from('kanban_notes').delete().eq('id', id);
                UIManager.renderKanbanNotes();
            }
        };

        /* --- 2. DATA MANAGER (ATUALIZADO COM LOADER) --- */
        const DataManager = {
            init: async function() {
                try {
                    const [r1, r2, r3] = await Promise.all([fetch(GEOJSON_URLS.DEPTO), fetch(GEOJSON_URLS.PROV), fetch(GEOJSON_URLS.DIST)]);
                    STATE.data.deptos = await r1.json();
                    STATE.data.provs = await r2.json();
                    STATE.data.dists = await r3.json();

                    const detect = (props, candidates) => candidates.find(c => Object.keys(props).map(k => k.toUpperCase()).includes(c));
                    STATE.data.cols.depto = detect(STATE.data.deptos.features[0].properties, ['NOMBDEP', 'DEPARTAMENTO', 'NOM_DEP']);
                    STATE.data.cols.prov = detect(STATE.data.provs.features[0].properties, ['NOMBPROV', 'PROVINCIA']);
                    STATE.data.cols.provDepto = detect(STATE.data.provs.features[0].properties, ['FIRST_NOMB', 'DEPARTAM', 'NOMBDEP']);
                    STATE.data.cols.dist = detect(STATE.data.dists.features[0].properties, ['NOMBDIST', 'DISTRITO']);
                    STATE.data.cols.distProv = detect(STATE.data.dists.features[0].properties, ['NOMBPROV', 'PROVINCIA']);

                    UIManager.populateSelect('sel-depto', STATE.data.deptos.features, STATE.data.cols.depto);
                } catch (e) {
                    console.error(e);
                }
            },
            
            fetchPointsByRegion: async function(regionName) {
                if (!regionName) {
                    STATE.data.currentPoints = [];
                    MapManager.updatePoints([]);
                    return;
                }

                // ATIVA O LOADER E AS DICAS
                LoaderManager.start();

                try {
                    let projectFeatures = [], from = 0, fetchMore = true;

                    // Busca paginada de projetos
                    while (fetchMore) {
                        const { data: rows, error } = await supabaseClient
                            .from(TABELA_PONTOS)
                            .select('id, lat, lng, empresa, region, provincia, distrito, localidad, zona, norte, este')
                            .ilike('region', `%${regionName.trim()}%`)
                            .range(from, from + 999);

                        if (error || !rows.length) {
                            fetchMore = false;
                            break;
                        }

                        const chunk = rows.map((r, i) => ({
                            type: "Feature",
                            id: r.id || (from + i),
                            geometry: { type: "Point", coordinates: [parseFloat(r.lng), parseFloat(r.lat)] },
                            properties: { ...r, _internal_id: r.id ? String(r.id) : `supa_${from + i}`, type: 'proyecto' }
                        })).filter(f => !isNaN(f.geometry.coordinates[0]));

                        projectFeatures = projectFeatures.concat(chunk);

                        if (rows.length < 1000) fetchMore = false;
                        else from += 1000;
                    }

                    // Busca cidadãos
                    const { data: citizens, error: citError } = await supabaseClient
                        .from('registros_ciudadanos')
                        .select('*')
                        .ilike('departamento', `%${regionName.trim()}%`);

                    let citizenFeatures = [];
                    if (citizens && !citError) {
                        citizenFeatures = citizens.map(c => ({
                            type: "Feature",
                            id: `cit_${c.id}`,
                            geometry: { type: "Point", coordinates: [parseFloat(c.lng), parseFloat(c.lat)] },
                            properties: { ...c, type: 'ciudadano', _internal_id: c.id }
                        })).filter(f => !isNaN(f.geometry.coordinates[0]));
                    }

                    const allFeatures = [...projectFeatures, ...citizenFeatures];
                    STATE.data.currentPoints = allFeatures;
                    document.getElementById('stat-points-visible').innerText = allFeatures.length.toLocaleString();
                    MapManager.updatePoints(allFeatures);

                } catch (err) {
                    console.error(err);
                    document.getElementById('stat-points-visible').innerText = "Erro";
                    alert("Error al cargar los datos. Por favor intente nuevamente.");
                } finally {
                    // DESATIVA O LOADER
                    LoaderManager.stop();
                }
            }
        };

        /* --- 3. MAP MANAGER --- */
        const MapManager = {
            init: function() {
                STATE.map = L.map('map', { zoomControl: false, maxZoom: 28 }).setView([-9.19, -75.0152], 5);
                L.tileLayer('https://{s}.google.com/vt/lyrs=y&x={x}&y={y}&z={z}', { subdomains: ['mt0','mt1','mt2','mt3'], maxNativeZoom: 19, maxZoom: 28 }).addTo(STATE.map);
                L.control.zoom({ position: 'bottomright' }).addTo(STATE.map);
                STATE.layers.boundary = L.layerGroup().addTo(STATE.map);
                STATE.layers.draw = L.layerGroup().addTo(STATE.map);
                
                STATE.layers.clusters = L.markerClusterGroup({ 
                    chunkedLoading: true,
                    iconCreateFunction: function(cluster) {
                        var children = cluster.getAllChildMarkers();
                        var counts = { renova: 0, oriental: 0, citizen: 0, conflict: 0 };
                        for (var i = 0; i < children.length; i++) { var type = children[i].options.customType; if (counts[type] !== undefined) counts[type]++; else counts.conflict++; }
                        var winner = Object.keys(counts).reduce((a, b) => counts[a] > counts[b] ? a : b);
                        return new L.DivIcon({ html: '<div><span>' + cluster.getChildCount() + '</span></div>', className: 'marker-cluster-custom cluster-' + winner, iconSize: new L.Point(40, 40) });
                    }
                }).addTo(STATE.map);

                STATE.map.on('click', InteractionManager.onMapClick);
                STATE.map.on('mousemove', InteractionManager.onMapMove);
                document.addEventListener('keydown', (e) => { if(STATE.drawing.active && e.key === 'Enter') InteractionManager.finishDraw(); });
                this.addLegend();
            },
            addLegend: function() {
                const legend = L.control({position: 'bottomleft'});
                legend.onAdd = function (map) {
                    const div = L.DomUtil.create('div', 'map-legend');
                    div.innerHTML = `<h4>Leyenda</h4><div class="legend-item"><span class="legend-color" style="background:#2E7D32"></span> Renova</div><div class="legend-item"><span class="legend-color" style="background:#FF8F00"></span> Oriental</div><div class="legend-item"><span class="legend-color" style="background:#D32F2F"></span> Conflict</div><div class="legend-item"><span class="legend-color" style="background:#2196F3"></span> Ciudadano</div>`;
                    return div;
                };
                legend.addTo(STATE.map);
            },
            updatePoints: function(features) {
                STATE.layers.clusters.clearLayers();
                if(!features.length) { document.getElementById('stat-points-visible').innerText = "0"; return; }
                const markers = features.map(f => {
                    const isCitizen = f.properties.type === 'ciudadano';
                    let fillColor, typeCategory;
                    if (isCitizen) { fillColor = '#2196F3'; typeCategory = 'citizen'; } 
                    else {
                        const empresa = (f.properties.empresa || '').toString().trim().toUpperCase();
                        if (empresa === 'RENOVA') { fillColor = '#2E7D32'; typeCategory = 'renova'; } 
                        else if (empresa === 'ORIENTAL') { fillColor = '#FF8F00'; typeCategory = 'oriental'; } 
                        else { fillColor = '#D32F2F'; typeCategory = 'conflict'; }
                    }
                    const m = L.circleMarker([f.geometry.coordinates[1], f.geometry.coordinates[0]], { radius: isCitizen ? 7 : 6, color: '#fff', weight: 1, fillColor: fillColor, fillOpacity: 0.8, customType: typeCategory });
                    
                    m.on('click', (e) => { 
                        L.DomEvent.stopPropagation(e); 
                        if (isCitizen) UIManager.openCitizenModal(f); else UIManager.openPointModal(f); 
                    });
                    return m;
                });
                STATE.layers.clusters.addLayers(markers);
                document.getElementById('stat-points-visible').innerText = features.length.toLocaleString();
            },            
            drawBoundary: function(feature) {
                STATE.layers.boundary.clearLayers();
                if(feature) {
                    const l = L.geoJSON(feature, { style: { color: '#FF5722', weight: 3, fillOpacity: 0.05, dashArray: '5,5' } }).addTo(STATE.layers.boundary);
                    STATE.map.flyToBounds(l.getBounds(), { padding: [20,20] });
                }
            },
            highlightPoint: function(lat, lng) {
                if (STATE.layers.highlight) STATE.map.removeLayer(STATE.layers.highlight);
                STATE.map.flyTo([lat, lng], 18, { duration: 1.5 });
                const highlightMarker = L.circleMarker([lat, lng], { radius: 20, color: '#FF5722', weight: 4, opacity: 0.8, fillColor: 'transparent', dashArray: '10, 10' }).addTo(STATE.map);
                STATE.layers.highlight = highlightMarker;
                setTimeout(() => { if (STATE.layers.highlight) { STATE.map.removeLayer(STATE.layers.highlight); STATE.layers.highlight = null; } }, 5000);
            }
        };

        /* --- 4. INTERACTION --- */
        const InteractionManager = {
            checkPermissions: function() {
                if (!document.getElementById('sel-depto').value || !document.getElementById('sel-prov').value || !document.getElementById('sel-dist').value) {
                    alert("⚠️ Atención: Seleccione Depto, Provincia y Distrito."); return false;
                }
                return true;
            },
            updateButtonStates: function() {
                const allowed = (document.getElementById('sel-depto').value && document.getElementById('sel-prov').value && document.getElementById('sel-dist').value);
                const list = ['btn-draw', 'btn-add-citizen'];
                list.forEach(id => {
                    const el = document.getElementById(id);
                    if(allowed) el.classList.remove('btn-blocked'); else el.classList.add('btn-blocked');
                });
            },
            safeToggleDraw: function() { if (!this.checkPermissions()) return; this.toggleDraw(); },
            safeTogglePointCapture: function() { if (!this.checkPermissions()) return; this.togglePointCapture(); },
            toggleDraw: function() {
                STATE.drawing.active = !STATE.drawing.active;
                const btn = document.getElementById('btn-draw');
                if(STATE.drawing.active) {
                    InteractionManager.togglePointCapture(false);
                    btn.classList.add('active'); btn.innerHTML = '<i class="fas fa-pencil-alt"></i> Dibujando...';
                    document.getElementById('draw-notification').style.display = 'block';
                    document.getElementById('btn-clear-draw').style.display = 'flex';
                    document.getElementById('map').classList.add('cursor-crosshair');
                    STATE.map.doubleClickZoom.disable(); STATE.drawing.points = [];
                    // UX Mobile: Close menu when starting to draw
                    if(STATE.isMobile) UIManager.closeMobileMenu();
                } else { this.resetDraw(); }
            },
            resetDraw: function() {
                STATE.drawing.active = false;
                const btn = document.getElementById('btn-draw');
                btn.classList.remove('active'); btn.innerHTML = '<i class="fas fa-draw-polygon"></i> Dibujar Polígono';
                document.getElementById('draw-notification').style.display = 'none';
                document.getElementById('btn-clear-draw').style.display = 'none';
                document.getElementById('map').classList.remove('cursor-crosshair');
                STATE.map.doubleClickZoom.enable();
                if(STATE.layers.previewLine) STATE.map.removeLayer(STATE.layers.previewLine);
                if(STATE.layers.previewPoly) STATE.map.removeLayer(STATE.layers.previewPoly);
                STATE.layers.draw.clearLayers();
            },
            clearDraw: function() { this.resetDraw(); },
            togglePointCapture: function(forceState) {
                STATE.capturingPoint = (forceState !== undefined) ? forceState : !STATE.capturingPoint;
                const btn = document.getElementById('btn-add-citizen');
                if(STATE.capturingPoint) { 
                    this.resetDraw(); 
                    btn.classList.add('active'); 
                    document.getElementById('map').classList.add('cursor-crosshair');
                    // UX Mobile: Close menu
                    if(STATE.isMobile) UIManager.closeMobileMenu();
                    document.getElementById('draw-notification').style.display = 'block'; // Reutilizar aviso
                    document.getElementById('draw-notification').innerHTML = '<i class="fas fa-map-pin"></i> Toque el mapa para ubicar al ciudadano.';
                } else { 
                    btn.classList.remove('active'); 
                    if(!STATE.drawing.active) document.getElementById('map').classList.remove('cursor-crosshair'); 
                    document.getElementById('draw-notification').style.display = 'none';
                }
            },
            onMapClick: function(e) {
                if(STATE.capturingPoint) { 
                    STATE.tempPoint = e.latlng; 
                    UIManager.openModal('modal-citizen-form'); 
                    InteractionManager.togglePointCapture(false); 
                    return; 
                }
                if(!STATE.drawing.active) return;
                STATE.drawing.points.push([e.latlng.lat, e.latlng.lng]);
                L.circleMarker(e.latlng, { radius: 4, color: '#FF5722', fillColor: '#FF5722', fillOpacity: 1 }).addTo(STATE.layers.draw);
                if(STATE.drawing.points.length > 2) {
                    if(STATE.layers.previewPoly) STATE.map.removeLayer(STATE.layers.previewPoly);
                    STATE.layers.previewPoly = L.polygon(STATE.drawing.points, { color: '#FF5722', fillOpacity: 0.15, weight: 2 }).addTo(STATE.layers.draw);
                }
            },
            saveCitizenRegistration: async function() {
                const data = {
                    nombres: document.getElementById('cit-nombres').value, apellidos: document.getElementById('cit-apellidos').value,
                    dni: document.getElementById('cit-dni').value, celular: document.getElementById('cit-celular').value,
                    direccion: document.getElementById('cit-direccion').value, fecha_nacimiento: document.getElementById('cit-fecha-nasc').value,
                    celular_vecino: document.getElementById('cit-celular-vecino').value, departamento: document.getElementById('sel-depto').value, 
                    provincia: document.getElementById('sel-prov').value, distrito: document.getElementById('sel-dist').value,
                    lat: STATE.tempPoint.lat, lng: STATE.tempPoint.lng, created_at: new Date().toISOString(), user_id: STATE.user.id
                };
                if(!data.nombres || !data.dni) return alert("Ingrese datos.");
                const { error } = await supabaseClient.from('registros_ciudadanos').insert([data]);
                if(error) alert("Error: " + error.message);
                else { alert("Registrado."); UIManager.closeModal('modal-citizen-form'); RemoteDB.loadSidebarData(); }
            },
            onMapMove: function(e) {
                document.getElementById('coords-display').innerText = `Lon: ${e.latlng.lng.toFixed(5)} Lat: ${e.latlng.lat.toFixed(5)}`;
                if(!STATE.drawing.active || !STATE.drawing.points.length) return;
                const last = STATE.drawing.points[STATE.drawing.points.length-1];
                if(STATE.layers.previewLine) STATE.map.removeLayer(STATE.layers.previewLine);
                STATE.layers.previewLine = L.polyline([last, e.latlng], { color: '#FF5722', dashArray: '5,5' }).addTo(STATE.map);
            },
            finishDraw: function() {
                if(STATE.drawing.points.length < 3) return alert("Minimo 3 puntos.");
                const turfPts = STATE.drawing.points.map(p => [p[1], p[0]]); turfPts.push(turfPts[0]);
                const count = turf.pointsWithinPolygon({ type: "FeatureCollection", features: STATE.data.currentPoints }, turf.polygon([turfPts])).features.length;
                document.getElementById('save-area-count').innerText = count; UIManager.openModal('modal-save-area');
            },
            saveArea: async function() {
                const name = document.getElementById('input-area-name').value;
                if(!name) return alert("Ingrese nombre.");
                await supabaseClient.from('areas').insert({ name: name, point_count: parseInt(document.getElementById('save-area-count').innerText), geometry: STATE.drawing.points, user_id: STATE.user.id });
                UIManager.closeModal('modal-save-area'); this.resetDraw(); RemoteDB.loadSidebarData();
            },
            handleAreaClick: async function(area) {
                if(STATE.layers.draw) STATE.layers.draw.clearLayers();
                UIManager.openKanban(area.id, 'area'); 
                const turfPoints = area.geometry.map(p => [p[1], p[0]]);
                if (turfPoints[0][0] !== turfPoints[turfPoints.length - 1][0]) turfPoints.push(turfPoints[0]);
                const searchPolygon = turf.polygon([turfPoints]);
                const polyLayer = L.polygon(area.geometry, { color: '#008000', weight: 3, fillOpacity: 0.1 }).addTo(STATE.layers.draw);
                STATE.map.flyToBounds(polyLayer.getBounds(), { paddingTopLeft: [420, 20] });
                const centroid = turf.centroid(searchPolygon);
                const deptoFeature = STATE.data.deptos.features.find(f => turf.booleanPointInPolygon(centroid, f));
                if (deptoFeature) {
                    const deptoName = deptoFeature.properties[STATE.data.cols.depto];
                    const currentDeptoVal = document.getElementById('sel-depto').value;
                    if (currentDeptoVal !== deptoName) {
                        document.getElementById('sel-depto').value = deptoName;
                        UIManager.populateSelect('sel-prov', STATE.data.provs.features.filter(f => f.properties[STATE.data.cols.provDepto] == deptoName), STATE.data.cols.prov);
                        await DataManager.fetchPointsByRegion(deptoName);
                    }
                }
                let pointsInside = [];
                if (STATE.data.currentPoints.length) { pointsInside = turf.pointsWithinPolygon(turf.featureCollection(STATE.data.currentPoints), searchPolygon).features; }
                const projectPoints = pointsInside.filter(p => p.properties.type !== 'ciudadano');
                const citizenPoints = pointsInside.filter(p => p.properties.type === 'ciudadano');
                MapManager.updatePoints(pointsInside);
                const stats = { projects: projectPoints.length, citizens: citizenPoints.length, total: pointsInside.length };
                UIManager.openKanban(area.id, 'area', stats);
                document.getElementById('sel-prov').value = ""; document.getElementById('sel-dist').value = ""; document.getElementById('sel-dist').disabled = true; InteractionManager.updateButtonStates();
            },
            handleSavedPointClick: async function(pid) {
                UIManager.openKanban(pid, 'point');
                const { data: point, error } = await supabaseClient.from(TABELA_PONTOS).select('*').eq('id', pid).single();
                if (error || !point) return console.error("Error al cargar datos");
                const currentDepto = document.getElementById('sel-depto').value;
                if (currentDepto !== point.region) {
                    document.getElementById('sel-depto').value = point.region;
                    await DataManager.fetchPointsByRegion(point.region);
                }
                const districtPoints = STATE.data.currentPoints.filter(p => p.properties.distrito === point.distrito && p.properties.provincia === point.provincia);
                MapManager.updatePoints(districtPoints);
                const distBoundary = STATE.data.dists.features.find(f => f.properties[STATE.data.cols.dist] == point.distrito && f.properties[STATE.data.cols.distProv] == point.provincia);
                MapManager.drawBoundary(distBoundary);
                MapManager.highlightPoint(parseFloat(point.lat), parseFloat(point.lng));
                const deptoVal = point.region;
                UIManager.populateSelect('sel-prov', STATE.data.provs.features.filter(f => f.properties[STATE.data.cols.provDepto] == deptoVal), STATE.data.cols.prov);
                document.getElementById('sel-prov').value = point.provincia;
                UIManager.populateSelect('sel-dist', STATE.data.dists.features.filter(f => f.properties[STATE.data.cols.distProv] == point.provincia), STATE.data.cols.dist);
                document.getElementById('sel-dist').value = point.distrito;
                InteractionManager.updateButtonStates();
            },
            handleCitizenRecordClick: async function(citRecord) {
                const f = {
                    type: "Feature", id: `cit_${citRecord.id}`,
                    geometry: { type: "Point", coordinates: [parseFloat(citRecord.lng), parseFloat(citRecord.lat)] },
                    properties: { ...citRecord, type: 'ciudadano', _internal_id: citRecord.id }
                };
                const currentDepto = document.getElementById('sel-depto').value;
                if (currentDepto !== citRecord.departamento) {
                    document.getElementById('sel-depto').value = citRecord.departamento;
                    await DataManager.fetchPointsByRegion(citRecord.departamento);
                }
                const districtPoints = STATE.data.currentPoints.filter(p => p.properties.distrito === citRecord.distrito && p.properties.provincia === citRecord.provincia);
                MapManager.updatePoints(districtPoints);
                const distBoundary = STATE.data.dists.features.find(f => f.properties[STATE.data.cols.dist] == citRecord.distrito && f.properties[STATE.data.cols.distProv] == citRecord.provincia);
                MapManager.drawBoundary(distBoundary);
                MapManager.highlightPoint(parseFloat(citRecord.lat), parseFloat(citRecord.lng));
                UIManager.openCitizenModal(f);
                const deptoVal = citRecord.departamento;
                UIManager.populateSelect('sel-prov', STATE.data.provs.features.filter(f => f.properties[STATE.data.cols.provDepto] == deptoVal), STATE.data.cols.prov);
                document.getElementById('sel-prov').value = citRecord.provincia;
                UIManager.populateSelect('sel-dist', STATE.data.dists.features.filter(f => f.properties[STATE.data.cols.distProv] == citRecord.provincia), STATE.data.cols.dist);
                document.getElementById('sel-dist').value = citRecord.distrito;
                InteractionManager.updateButtonStates();
            },

            applyFilters: function() {
                const dVal = document.getElementById('sel-depto').value;
                const pVal = document.getElementById('sel-prov').value;
                const distVal = document.getElementById('sel-dist').value;
                let feature = null;
                if(distVal) feature = STATE.data.dists.features.find(f => f.properties[STATE.data.cols.dist] == distVal && f.properties[STATE.data.cols.distProv] == pVal);
                else if(pVal) feature = STATE.data.provs.features.find(f => f.properties[STATE.data.cols.prov] == pVal && f.properties[STATE.data.cols.provDepto] == dVal);
                else if(dVal) feature = STATE.data.deptos.features.find(f => f.properties[STATE.data.cols.depto] == dVal);
                MapManager.drawBoundary(feature);
                let points = STATE.data.currentPoints;
                if(pVal) points = points.filter(p => p.properties.provincia?.toUpperCase().trim() === pVal.toUpperCase().trim());
                if(distVal) points = points.filter(p => p.properties.distrito?.toUpperCase().trim() === distVal.toUpperCase().trim());
                MapManager.updatePoints(points);
            }
        };

        /* --- 5. UI --- */
        const UIManager = {
            toggleMobileMenu: function() {
                const panel = document.getElementById('main-control-panel');
                const backdrop = document.getElementById('drawer-backdrop');
                panel.classList.toggle('open-drawer');
                backdrop.classList.toggle('active');
            },
            closeMobileMenu: function() {
                document.getElementById('main-control-panel').classList.remove('open-drawer');
                document.getElementById('drawer-backdrop').classList.remove('active');
            },
            openModal: (id) => { const el = document.getElementById(id); el.style.display = 'flex'; setTimeout(() => el.classList.add('active'), 10); },
            closeModal: (id) => { const el = document.getElementById(id); el.classList.remove('active'); setTimeout(() => el.style.display = 'none', 300); },
            populateSelect: function(id, features, key) {
                const sel = document.getElementById(id); sel.innerHTML = '<option value="">Todos/Seleccione</option>';
                [...new Set(features.map(f => f.properties[key]))].sort().forEach(v => { const opt = document.createElement('option'); opt.value = v; opt.innerText = v; sel.appendChild(opt); });
                sel.disabled = false;
            },
            openPointModal: function(feature) {
                const props = feature.properties; document.getElementById('point-details-title').innerText = `Detalles del Punto #${props._internal_id}`;
                const list = document.getElementById('point-attributes'); list.innerHTML = '';
                ['empresa', 'region', 'provincia', 'distrito', 'localidad', 'zona', 'norte', 'este'].forEach(k => { if(props[k]) list.innerHTML += `<div style="display:flex; justify-content:space-between; padding:5px 0; border-bottom:1px solid #eee;"><span style="font-weight:600; color:#555;">${k.toUpperCase()}</span><span style="color:#333; text-align:right;">${props[k]}</span></div>`; });
                document.getElementById('btn-open-kanban').onclick = () => this.openKanban(props._internal_id, 'point');
                this.openModal('modal-point-details');
            },
            openCitizenModal: function(feature) {
                const props = feature.properties;
                document.getElementById('point-details-title').innerText = `Ciudadano: ${props.nombres.split(' ')[0]}`;
                const list = document.getElementById('point-attributes'); list.innerHTML = '';
                const fields = [{ key: 'nombres', label: 'Nombres Completos' }, { key: 'apellidos', label: 'Apellidos' }, { key: 'dni', label: 'DNI / Identificación' }, { key: 'celular', label: 'Celular Personal' }, { key: 'celular_vecino', label: 'Celular Vecino' }, { key: 'direccion', label: 'Dirección' }, { key: 'fecha_nacimiento', label: 'F. Nacimiento' }, { key: 'departamento', label: 'Departamento' }, { key: 'provincia', label: 'Provincia' }, { key: 'distrito', label: 'Distrito' }];
                fields.forEach(field => { if(props[field.key]) { list.innerHTML += `<div style="display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #eee; align-items:center;"><span style="font-weight:600; color:#555; font-size:11px;">${field.label.toUpperCase()}</span><span style="color:#333; text-align:right; font-weight:500;">${props[field.key]}</span></div>`; } });
                document.getElementById('btn-open-kanban').onclick = () => this.openKanban(props._internal_id, 'citizen'); 
                this.openModal('modal-point-details');
            },
            openKanban: async function(id, type, stats = null) {
                STATE.kanban.activeId = id; STATE.kanban.activeType = type; this.closeModal('modal-point-details');
                const titleEl = document.getElementById('kanban-title'); const badge = document.getElementById('kanban-badge'); const subtitle = document.getElementById('kanban-subtitle');
                const oldStats = document.getElementById('kanban-custom-stats'); if(oldStats) oldStats.remove();
                if(type === 'area') {
                    const { data } = await supabaseClient.from('areas').select('name').eq('id', id).single();
                    titleEl.innerText = data ? data.name : 'Área'; badge.innerText = "ÁREA"; badge.style.background = "#FF5722"; badge.style.color = "white"; subtitle.innerText = `Gestión de territorio`;
                    if(stats) {
                        const statsDiv = document.createElement('div'); statsDiv.id = 'kanban-custom-stats'; statsDiv.className = 'kanban-stats-box';
                        statsDiv.innerHTML = `<div style="display:flex; justify-content:space-between;"><span><i class="fas fa-bolt"></i> Proyectos: <b>${stats.projects}</b></span><span><i class="fas fa-users"></i> Ciudadanos: <b>${stats.citizens}</b></span></div><div style="margin-top:5px; border-top:1px solid rgba(0,0,0,0.1); padding-top:5px; font-weight:bold;">Total: ${stats.total} puntos</div>`;
                        subtitle.parentNode.after(statsDiv);
                    }
                } else if (type === 'citizen') {
                    titleEl.innerText = `Ciudadano #${id}`; badge.innerText = "CIUDADANO"; badge.style.background = "#2196F3"; badge.style.color = "white"; subtitle.innerText = `Historial y Seguimiento Social`;
                } else { 
                    titleEl.innerText = `Punto #${id}`; badge.innerText = "PUNTO"; badge.style.background = "#003366"; badge.style.color = "white"; subtitle.innerText = `Gestión de notas técnicas`; 
                }
                this.renderKanbanNotes(); this.openModal('modal-kanban');
            },
            renderKanbanNotes: async function() {
                const listP = document.getElementById('kanban-list-private'); const listS = document.getElementById('kanban-list-shared'); listP.innerHTML = 'Cargando...'; listS.innerHTML = 'Cargando...';
                const { data: notes } = await supabaseClient.from('kanban_notes').select('*').eq('context_type', STATE.kanban.activeType).eq('context_id', String(STATE.kanban.activeId)).order('created_at', { ascending: false });
                listP.innerHTML = ''; listS.innerHTML = '';
                if(notes) notes.forEach(n => {
                    const el = document.createElement('div'); el.className = 'note-card';
                    el.innerHTML = `<div style="font-size:11px; color:#333; line-height:1.5;">${n.content}</div><div class="note-footer" style="margin-top:5px; display:flex; justify-content:space-between; color:#999; font-size:10px;"><span><i class="far fa-clock"></i> ${new Date(n.created_at).toLocaleDateString()}</span><i class="fas fa-trash-alt" style="color:#ef5350; cursor:pointer;" onclick="RemoteDB.deleteNote(${n.id})"></i></div>`;
                    if(n.type === 'private') listP.appendChild(el); else listS.appendChild(el);
                });
            },
            toggleAccordion: function(id) {
                const content = document.getElementById(id);
                const btn = document.querySelector(`button[onclick="UIManager.toggleAccordion('${id}')"]`);
                const isOpen = content.classList.contains('active');
                document.querySelectorAll('.accordion-content').forEach(el => el.classList.remove('active'));
                document.querySelectorAll('.accordion-btn').forEach(el => el.classList.remove('active'));
                if (!isOpen) {
                    content.classList.add('active');
                    btn.classList.add('active');
                }
            }
        };

        /* --- LISTENERS --- */
        const selDepto = document.getElementById('sel-depto'); const selProv = document.getElementById('sel-prov'); const selDist = document.getElementById('sel-dist');
        selDepto.addEventListener('change', async () => {
            const val = selDepto.value; selProv.innerHTML = '<option value="">Cargando...</option>'; selProv.disabled = true; selDist.innerHTML = '<option value="">Todos</option>'; selDist.disabled = true;
            if(val) UIManager.populateSelect('sel-prov', STATE.data.provs.features.filter(f => f.properties[STATE.data.cols.provDepto] == val), STATE.data.cols.prov);
            GuideManager.show('prov'); InteractionManager.updateButtonStates(); await DataManager.fetchPointsByRegion(val); InteractionManager.applyFilters();
        });
        selProv.addEventListener('change', () => {
            const val = selProv.value; selDist.innerHTML = '<option value="">Cargando...</option>'; selDist.disabled = true;
            if(val) UIManager.populateSelect('sel-dist', STATE.data.dists.features.filter(f => f.properties[STATE.data.cols.distProv] == val), STATE.data.cols.dist);
            GuideManager.show('dist'); InteractionManager.updateButtonStates(); InteractionManager.applyFilters();
        });
        selDist.addEventListener('change', () => { 
            GuideManager.show('tools'); 
            setTimeout(() => GuideManager.hideAll(), 4000); 
            InteractionManager.updateButtonStates(); 
            InteractionManager.applyFilters(); 
            // UX Mobile: Cerrar menú al seleccionar distrito
            if(STATE.isMobile) UIManager.closeMobileMenu();
        });

        AuthManager.init();
    </script>
</body>
</html>