<!--
  ══════════════════════════════════════════════════════════════════
  SGM — VENTANILLA ÚNICA DE EMERGENCIAS
  eleccion_incidencias.html — v1.0 (Incorporación B, auditoría 2026-09)

  Nueva puerta de entrada del portal ciudadano: por la premura de una
  emergencia, el ciudadano elige acá mismo entre 2 caminos —
    (a) Registro Rápido: esta misma página, sin texto libre obligatorio,
        pensada para completarse en segundos desde un teléfono.
    (b) Registro Detallado: Portal_Seguridad_Ciudadana.html, el
        formulario completo que ya existía, para quien prefiera dar
        más contexto desde el principio.
  AMBOS caminos escriben al MISMO backend — enviarReporteCiudadano()
  de SEG_BACKEND_v5_10.gs, la función que ya usa el Registro Detallado
  — así que un incidente creado por cualquiera de los 2 caminos es
  indistinguible en la Bandeja, el Mapa y los Dashboards.

  ORIGEN: se partió de una maqueta estática (index.html, sin ninguna
  llamada real — solo alert()/confirm()/prompt()) que el equipo ya
  tenía armada visualmente. Este archivo es esa misma maqueta
  conectada de punta a punta al backend real. Se mantuvo el diseño
  visual casi intacto (colores, layout, grilla de categorías) — lo que
  cambió es todo lo que hace falta para que apretar los botones
  realmente registre un incidente.

  DECISIONES DE DISEÑO tomadas al conectar la maqueta a datos reales
  (documentadas acá porque la maqueta no las resolvía):

  1) SELECCIÓN DE TIPO — la maqueta dejaba togglear varios botones de
     incidente a la vez (.selected en cada uno independiente). El
     esquema real (_validarPayloadIncidente en v5_10.gs) solo admite
     UN `hecho.tipo` por incidente. Se cambió a selección única (estilo
     radio): elegir un tipo nuevo deselecciona el anterior. Si el
     ciudadano necesita reportar 2 cosas distintas a la vez, son 2
     reportes separados — mismo criterio que el Registro Detallado.

  2) BOTONES DE AGENCIA (arriba) — en la maqueta original NO tenían
     ningún onclick (ver index.html: son puramente decorativos, un
     legend de a qué instituciones puede llegar un reporte). Se
     mantienen así a propósito: _construirDocumentoIncidente() calcula
     `gestion.organismosAsignados` SIEMPRE a partir de
     `_segOrganismosSugeridos(hecho.tipo)` — enrutamiento automático
     por tipo, igual que el Registro Detallado. No se agregó una
     selección manual de institución acá porque tocaría esa función
     compartida por los 3 caminos de registro (interno, detallado,
     WhatsApp) — cambio de mayor alcance que el de esta incorporación,
     que el equipo puede pedir aparte si lo necesita.

  3) "OCURRIENDO AHORA" / "YA SUCEDIÓ" — no hay ningún campo estructural
     para esto en el esquema (`hecho` no tiene un booleano de este
     tipo). Se guarda como prefijo de `hecho.descripcion`, igual que la
     categoría elegida — ver construirDescripcionAutomatica().

  4) DESCRIPCIÓN — _validarPayloadIncidente() exige
     `hecho.descripcion` de al menos 10 caracteres. La maqueta no tenía
     ningún campo de texto (ese es justo el punto de ser "rápido"). Se
     arma automáticamente a partir de la categoría + gravedad + tiempo
     elegidos (siempre supera los 10 caracteres) — el ciudadano puede
     opcionalmente ampliarla en un campo de texto que se muestra
     recién en el modal de confirmación, nunca bloquea el flujo rápido.

  5) UBICACIÓN — _validarPayloadIncidente() exige, sin excepción,
     Estado/Municipio/Parroquia (catálogo geográfico oficial) Y
     sector/calle/referencia como texto. No hay atajo real posible sin
     inventar un valor por defecto que podría no corresponder al
     municipio real de este despliegue — así que se reutiliza el MISMO
     catálogo en cascada que ya usa el Registro Detallado
     (getListaMunicipios/getListaParroquias), pero comprimido a un
     modal de 1 paso, y sector/calle/referencia se piden como UN solo
     campo de texto libre ("punto de referencia") que se manda para
     los 3 — más rápido que 3 preguntas separadas, sin dejar de cumplir
     lo que el backend exige. El GPS (si el navegador lo entrega) se
     adjunta además, no en lugar de esto.

  6) ANÓNIMO SIEMPRE — el Registro Rápido no pide identidad. Se manda
     esAnonimo:true siempre (el esquema ya contempla esto — sin eso,
     _validarPayloadIncidente exigiría un Reportante con nombre). Quien
     quiera dejar sus datos de contacto para seguimiento usa el
     Registro Detallado.

  ✅ RUTA EN doGet — CONFIRMADA Y AGREGADA (ver _02_BACKEND_doGet_v32.gs,
  ya entregado en una ronda anterior):
    - 'seguridad_publico' → Portal_Seguridad_Ciudadana (Registro
      Detallado) — NO se tocó, sigue exactamente igual.
    - 'seguridad_publico_rapido' → esta página (eleccion_incidencias) —
      ruta pública nueva, mismo criterio que 'seguridad_publico' (sin
      IAM), ya agregada a doGet.

  ✅ DECISIÓN DE PRODUCTO — YA TOMADA (2026-09): el enlace/QR que
  publique el municipio para el ciudadano debe ser
  '?page=seguridad_publico_rapido' — ESTA página es la entrada
  principal. 'seguridad_publico' (Registro Detallado) sigue existiendo
  como alternativa — se llega a ella desde el botón de esta página, o
  directo si alguien ya tiene ese enlace viejo guardado (bookmark,
  búsqueda, etc.); para ese caso, Portal_Seguridad_Ciudadana.html
  también agregó un aviso con enlace de vuelta hacia esta página.

  (El bloque de ruta que antes iba acá como "patch a pegar a mano" ya
  se aplicó directamente en _02_BACKEND_doGet_v32.gs — ver ese archivo
  si hace falta consultar el código exacto de la ruta
  'seguridad_publico_rapido'.)

  ══════════════════════════════════════════════════════════════════
-->
<!DOCTYPE html>
<html lang="es">
<head>
<base target="_top">
<link rel="stylesheet" href="/assets/tema.css">
<script src="/assets/tema.js"></script>
<script src="/assets/rpc.js"></script>
<script src="/assets/pwa.js"></script>
<script src="/assets/registrar.js"></script>
<script src="/assets/fotos.js"></script>
<script src="/assets/marca.js"></script>
<script src="/assets/filtros.js"></script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registro Rápido de Incidentes — Ventanilla Única de Emergencias</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<style>
    :root {
        --policia: #1565c0; --ambulancia: #c62828; --paramedicos: #29b6f6;
        --bomberos: #ef6c00; --pcivil: #f9a825; --detallado: #673ab7; --ubicacion: #0277bd;
        --critico: #d32f2f; --alto: #f57c00; --medio: #fbc02d; --bajo: #388e3c;
        --bg-body: #f4f7f6; --bg-card: #ffffff; --border-color: #e0e0e0;
    }
    * { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; }
    body { background-color: var(--bg-body); color: #333; padding: 10px; padding-bottom: 150px; }
    .categories-grid { margin-bottom: 70px; }
    .container { max-width: 1200px; margin: 0 auto; }
    .franja-reporte { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; text-decoration: none; background: #e8f4ff; color: #0b3d6b; border: 1px solid #9ccaf0; border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: .92rem; }
    .franja-reporte b { font-weight: 700; } .franja-reporte .ver { margin-left: 4px; font-weight: 700; text-decoration: underline; }
    .aviso-territorio { background: #fff7e0; color: #5c4400; border: 1px solid #f0d78a; border-radius: 10px; padding: 7px 12px; margin: 0 0 10px; font-size: .88rem; text-align: center; line-height: 1.3; }
    .choice-bar { display: flex; justify-content: center; gap: 12px; margin-bottom: 15px; flex-wrap: wrap; }
    .choice-option { flex: 0 1 auto; width: 100%; max-width: 560px; min-width: 260px; justify-content: center; text-align: center; display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    .choice-option i.choice-icon { font-size: 1.6rem; }
    .choice-texts { display: flex; flex-direction: column; }
    .choice-titulo { font-size: 1.05rem; font-weight: 800; line-height: 1.15; }
    .choice-sub { font-size: 0.7rem; font-weight: 400; opacity: .85; margin-top: 2px; }
    /* Lado izquierdo — dónde ya está parado el ciudadano, no es un link */
    .choice-option.activa { background: var(--bg-card); border: 2px solid var(--critico); cursor: default; }
    .choice-option.activa i.choice-icon { color: var(--critico); }
    /* Lado derecho — la alternativa, sí es un link */
    .choice-option.alterna { background-color: var(--detallado); color: #fff; border: none; cursor: pointer; transition: transform 0.1s, background-color 0.2s; }
    .choice-option.alterna:hover { background-color: #512da8; }
    .choice-option.alterna:active { transform: scale(0.98); }
    .btn-salir { position: fixed; top: 12px; right: 12px; z-index: 300; background: #fff; color: #555; border: 1px solid var(--border-color); border-radius: 50%; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
    .btn-salir:hover { background: #f5f5f5; color: var(--critico); }
    .pantalla-despedida { display: none; position: fixed; inset: 0; background: #fff; z-index: 400; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }
    .pantalla-despedida.abierta { display: flex; }
    .pantalla-despedida i { font-size: 3rem; color: var(--bajo); margin-bottom: 16px; }
    .pantalla-despedida h2 { font-size: 1.3rem; margin-bottom: 8px; }
    .pantalla-despedida p { color: #666; max-width: 420px; }
    .choice-option.alterna i.choice-icon { color: #fff; }
    .agencies { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 8px; }
    .agency-btn { padding: 15px; border: none; border-radius: 8px; color: white; font-weight: bold; font-size: 1rem; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); cursor: pointer; opacity: .55; transition: opacity .15s, box-shadow .15s, transform .1s; border: 3px solid transparent; }
    .agency-btn:hover { opacity: .8; }
    .agency-btn.seleccionada { opacity: 1; border-color: #222; box-shadow: 0 0 0 2px rgba(0,0,0,.25), 0 4px 8px rgba(0,0,0,.25); transform: translateY(-1px); }
    .agency-btn.seleccionada::after { content: "✓"; margin-left: 4px; }
    .btn-policia { background-color: var(--policia); } .btn-ambulancia { background-color: var(--ambulancia); }
    .btn-paramedicos { background-color: var(--paramedicos); color: #000; } .btn-bomberos { background-color: var(--bomberos); }
    .btn-pcivil { background-color: var(--pcivil); color: #000; }
    .agencies-nota { text-align: center; font-size: 0.7rem; color: #888; margin-bottom: 20px; }
    .global-controls { background: var(--bg-card); padding: 15px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; }
    .control-group { display: flex; flex: 1; min-width: 300px; gap: 10px; }
    .toggle-btn { flex: 1; padding: 12px; border: 2px solid var(--border-color); background: #fff; border-radius: 6px; font-weight: bold; cursor: pointer; }
    .toggle-btn.active { background-color: #455a64; color: white; border-color: #455a64; }
    .severity-btn { flex: 1; padding: 12px; border: none; border-radius: 6px; color: white; font-weight: bold; cursor: pointer; opacity: 0.5; }
    .severity-btn.active { opacity: 1; box-shadow: inset 0 0 0 3px rgba(0,0,0,0.4); }
    .sev-critico { background-color: var(--critico); } .sev-alto { background-color: var(--alto); }
    .sev-medio { background-color: var(--medio); color: #000; } .sev-bajo { background-color: var(--bajo); }
    .categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 15px; }
    .category-card { background: var(--bg-card); border-radius: 10px; padding: 15px; border-top: 5px solid #999; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
    /*CATS-CSS-INICIO*/
    .cat-medica { border-top-color: #E53935; }
    .cat-fuego { border-top-color: #FB8C00; }
    .cat-vial { border-top-color: #FDD835; }
    .cat-pcivil { border-top-color: #1E88E5; }
    .cat-seguridad { border-top-color: #8E24AA; }
    .cat-propiedad { border-top-color: #6D4C41; }
    .cat-servicios { border-top-color: #FBC02D; }
    .cat-rural { border-top-color: #43A047; }
    /*CATS-CSS-FIN*/
    .category-header { font-size: 1rem; font-weight: bold; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; color: #444; }
    .incident-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .incident-btn { background: #fff; border: 1px solid var(--border-color); border-radius: 8px; padding: 10px 5px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: all 0.2s; min-height: 80px; }
    .incident-btn:hover { background-color: #f5f5f5; border-color: #999; }
    .incident-btn.selected { border-color: var(--policia); background-color: #e3f2fd; box-shadow: 0 0 0 2px var(--policia); }
    .incident-btn i { font-size: 1.5rem; margin-bottom: 8px; color: #555; }
    /*CATS-ICON-INICIO*/
    .cat-medica .incident-btn i { color: #E53935; } .cat-medica .category-header i { color: #E53935; }
    .cat-fuego .incident-btn i { color: #E65100; } .cat-fuego .category-header i { color: #FB8C00; }
    .cat-vial .incident-btn i { color: #B38F00; } .cat-vial .category-header i { color: #FDD835; }
    .cat-pcivil .incident-btn i { color: #1E88E5; } .cat-pcivil .category-header i { color: #1E88E5; }
    .cat-seguridad .incident-btn i { color: #8E24AA; } .cat-seguridad .category-header i { color: #8E24AA; }
    .cat-propiedad .incident-btn i { color: #6D4C41; } .cat-propiedad .category-header i { color: #6D4C41; }
    .cat-servicios .incident-btn i { color: #B7860B; } .cat-servicios .category-header i { color: #FBC02D; }
    .cat-rural .incident-btn i { color: #2E7D32; } .cat-rural .category-header i { color: #43A047; }
    /*CATS-ICON-FIN*/
    .incident-btn span { overflow-wrap: anywhere; font-size: 0.65rem; font-weight: 600; line-height: 1.1; }
    .bottom-bar { position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; padding: 12px 20px; box-shadow: 0 -4px 15px rgba(0,0,0,0.1); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 100; }
    .fila-ayuda { display: flex; width: 100%; max-width: 600px; justify-content: flex-end; }
    .btn-ayuda { background: none; border: none; color: var(--detallado); font-size: .85rem; font-weight: bold; cursor: pointer; display: flex; align-items: center; gap: 6px; padding: 4px 8px; }
    .btn-ayuda:hover { text-decoration: underline; }
    .bottom-actions-row { display: flex; width: 100%; max-width: 600px; gap: 10px; justify-content: center; }
    .btn-location { background-color: var(--ubicacion); color: white; border: none; border-radius: 10px; height: 55px; font-size: 1rem; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; flex-grow: 1; }
    .btn-location.completo { background-color: var(--bajo); }
    .btn-location:active { background-color: #01579b; }
    .btn-submit { background-color: #2e7d32; color: white; border: none; border-radius: 10px; height: 60px; width: 100%; max-width: 600px; font-size: 1.2rem; font-weight: bold; cursor: pointer; }
    .btn-submit:active { background-color: #1b5e20; }
    .btn-submit:disabled { background-color: #9e9e9e; cursor: not-allowed; }
    /* Modal de ubicación — sin Bootstrap, para no arrastrar su CSS al resto de esta página */
    .modal-ubi-fondo { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 200; align-items: center; justify-content: center; padding: 15px; }
    .modal-ubi-fondo.abierto { display: flex; }
    .modal-ubi { background: #fff; border-radius: 12px; padding: 20px; max-width: 480px; width: 100%; max-height: 90vh; overflow-y: auto; }
    .modal-ubi h3 { margin-bottom: 14px; font-size: 1.1rem; }
    .modal-ubi label { display: block; font-size: 0.8rem; font-weight: bold; margin: 10px 0 4px; }
    .modal-ubi select, .modal-ubi input, .modal-ubi textarea { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; font-size: 0.95rem; }
    .modal-ubi .fila-gps { display: flex; align-items: center; gap: 10px; background: #f4f7f6; padding: 10px; border-radius: 8px; margin-top: 12px; }
    .modal-ubi .fila-gps .estado-gps { flex: 1; font-size: 0.8rem; }
    .modal-ubi .btn-gps { background: var(--ubicacion); color: #fff; border: none; padding: 8px 12px; border-radius: 6px; font-size: 0.8rem; cursor: pointer; white-space: nowrap; }
    .modal-ubi .botones { display: flex; gap: 10px; margin-top: 16px; }
    .modal-ubi .btn-cancelar { flex: 1; background: #eee; border: none; padding: 12px; border-radius: 8px; font-weight: bold; cursor: pointer; }
    .modal-ubi .btn-confirmar { flex: 2; background: var(--bajo); color: #fff; border: none; padding: 12px; border-radius: 8px; font-weight: bold; cursor: pointer; }
    /* Modal de ayuda — reutiliza el fondo de .modal-ubi-fondo, contenido propio */
    .modal-ayuda { background: #fff; border-radius: 12px; padding: 24px; max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; }
    .modal-ayuda h3 { font-size: 1.25rem; margin-bottom: 4px; display: flex; align-items: center; gap: 8px; }
    .modal-ayuda .subtitulo-ayuda { color: #777; font-size: .85rem; margin-bottom: 16px; }
    .modal-ayuda h4 { font-size: .95rem; margin: 18px 0 6px; color: var(--detallado); display: flex; align-items: center; gap: 8px; }
    .paso-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--detallado); color: #fff; font-size: .75rem; font-weight: bold; flex-shrink: 0; }
    .modal-ayuda p, .modal-ayuda li { font-size: .88rem; color: #333; line-height: 1.5; }
    .modal-ayuda ul { padding-left: 20px; margin-bottom: 0; }
    .modal-ayuda .nota-ayuda { background: #fff3cd; border-radius: 8px; padding: 10px 14px; font-size: .82rem; margin-top: 18px; }
    .modal-ayuda .btn-cerrar-ayuda { width: 100%; background: var(--detallado); color: #fff; border: none; padding: 12px; border-radius: 8px; font-weight: bold; cursor: pointer; margin-top: 20px; }
    .desc-opcional { margin-top: 12px; }
    .desc-opcional summary { cursor: pointer; font-size: 0.8rem; color: var(--detallado); font-weight: bold; }
    @media (max-width: 650px) {
        .choice-bar { flex-direction: column; }
        .incident-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
        .agencies { grid-template-columns: repeat(2, 1fr); }
        .bottom-bar { padding: 10px; }
        .btn-location { height: 45px; font-size: 0.9rem; }
        .btn-submit { height: 50px; font-size: 1.1rem; }
        body { padding-bottom: 130px; }
    }
</style>
</head>
<body>

<button class="btn-salir" onclick="salirModulo()" title="Salir"><i class="fa-solid fa-xmark"></i></button>

<div class="pantalla-despedida" id="pantalla_despedida">
    <i class="fa-solid fa-circle-check"></i>
    <h2>Puede cerrar esta pestaña</h2>
    <p>Gracias por usar la Ventanilla Única de Emergencias. Si necesita reportar otro incidente, vuelva a abrir el enlace o el código QR.</p>
</div>

<div class="container">
    <a id="franja_reporte" class="franja-reporte" href="#" style="display:none" role="status" aria-live="polite"></a>
    <div class="choice-bar">
        <div class="choice-option activa">
            <i class="fa-solid fa-bolt choice-icon"></i>
            <div class="choice-texts">
                <div class="choice-titulo">REGISTRO RÁPIDO DE INCIDENTES</div>
                <div class="choice-sub" id="sub_municipio">Ventanilla Única de Emergencias — está aquí ahora</div>
            </div>
        </div>
        <!-- Botón REGISTRO DETALLADO retirado de la pantalla (irRegistroDetallado() y portal_detallado.html se conservan). -->
    </div>

    <div id="aviso_territorio" class="aviso-territorio" style="display:none" role="note"></div>

    <div class="agencies">
        <button class="agency-btn btn-ambulancia" data-institucion="AMBULANCIA" onclick="toggleAgencia(this)"><i class="fa-solid fa-truck-medical"></i> AMBULANCIA</button>
        <button class="agency-btn btn-bomberos" data-institucion="BOMBEROS" onclick="toggleAgencia(this)"><i class="fa-solid fa-fire-extinguisher"></i> BOMBEROS</button>
        <button class="agency-btn btn-policia" data-institucion="POLICIA" onclick="toggleAgencia(this)"><i class="fa-solid fa-user-shield"></i> POLICÍA</button>
        <button class="agency-btn btn-pcivil" data-institucion="PROTECCION_CIVIL" onclick="toggleAgencia(this)"><i class="fa-solid fa-triangle-exclamation"></i> PROTECCIÓN CIVIL</button>
    </div>
    <div class="agencies-nota">Puede marcar qué institución(es) cree que deben responder — es opcional y ayuda con más contexto. El sistema igual enruta automáticamente al organismo correspondiente según el tipo de incidente que elija abajo.</div>

    <div class="global-controls">
        <div class="control-group">
            <button class="toggle-btn active" data-tiempo="AHORA" onclick="toggleActive(this, 'time')">OCURRIENDO AHORA</button>
            <button class="toggle-btn" data-tiempo="YA_SUCEDIO" onclick="toggleActive(this, 'time')">YA SUCEDIÓ</button>
        </div>
        <div class="control-group">
            <button class="severity-btn sev-critico active" data-gravedad="CRITICO" onclick="toggleActive(this, 'sev')">CRÍTICO</button>
            <button class="severity-btn sev-alto" data-gravedad="ALTO" onclick="toggleActive(this, 'sev')">ALTO</button>
            <button class="severity-btn sev-medio" data-gravedad="MEDIO" onclick="toggleActive(this, 'sev')">MEDIO</button>
            <button class="severity-btn sev-bajo" data-gravedad="BAJO" onclick="toggleActive(this, 'sev')">BAJO</button>
        </div>
    </div>

    <div class="categories-grid">
<!--CATEGORIAS-INICIO-->
        <div class="category-card cat-medica">
            <div class="category-header"><i class="fa-solid fa-heart-pulse"></i> EMERGENCIA MÉDICA</div>
            <div class="incident-grid">
                <button class="incident-btn" data-tipo="PARO_CARDIORESPIRATORIO" title="Paro cardiorrespiratorio / emergencia cardíaca" onclick="selectIncident(this)"><i class="fa-solid fa-heart-pulse"></i><span>Cardíaco</span></button>
                <button class="incident-btn" data-tipo="PERSONA_INCONSCIENTE" title="Persona inconsciente o convulsionando" onclick="selectIncident(this)"><i class="fa-solid fa-user-clock"></i><span>Inconsciente</span></button>
                <button class="incident-btn" data-tipo="HEMORRAGIA_TRAUMA" title="Hemorragia o trauma grave" onclick="selectIncident(this)"><i class="fa-solid fa-droplet"></i><span>Hemorragia / Trauma</span></button>
                <button class="incident-btn" data-tipo="DIFICULTAD_RESPIRATORIA" title="Falta de aire / atragantamiento" onclick="selectIncident(this)"><i class="fa-solid fa-lungs"></i><span>Falta de Aire</span></button>
                <button class="incident-btn" data-tipo="SOSPECHA_ACV" title="Sospecha de ACV / derrame cerebral" onclick="selectIncident(this)"><i class="fa-solid fa-brain"></i><span>Sospecha ACV</span></button>
                <button class="incident-btn" data-tipo="HERIDA_ARMA" title="Herida por arma blanca o de fuego" onclick="selectIncident(this)"><i class="fa-solid fa-hand-holding-medical"></i><span>Herida por Arma</span></button>
                <button class="incident-btn" data-tipo="ELECTROCUCION" title="Electrocución / descarga eléctrica" onclick="selectIncident(this)"><i class="fa-solid fa-bolt"></i><span>Electrocución</span></button>
                <button class="incident-btn" data-tipo="PARTO_EMERGENCIA" title="Parto de emergencia / trabajo de parto" onclick="selectIncident(this)"><i class="fa-solid fa-baby"></i><span>Parto</span></button>
                <button class="incident-btn" data-tipo="AHOGAMIENTO" title="Ahogamiento o casi ahogamiento" onclick="selectIncident(this)"><i class="fa-solid fa-water"></i><span>Ahogamiento</span></button>
                <button class="incident-btn" data-tipo="QUEMADURA" title="Quemadura" onclick="selectIncident(this)"><i class="fa-solid fa-fire-flame-curved"></i><span>Quemadura</span></button>
                <button class="incident-btn" data-tipo="INTOXICACION_ENVENENAMIENTO" title="Intoxicación o envenenamiento" onclick="selectIncident(this)"><i class="fa-solid fa-skull-crossbones"></i><span>Intoxicación</span></button>
                <button class="incident-btn" data-tipo="REACCION_ALERGICA_SEVERA" title="Reacción alérgica severa" onclick="selectIncident(this)"><i class="fa-solid fa-head-side-cough"></i><span>Alergia Severa</span></button>
                <button class="incident-btn" data-tipo="MORDEDURA_PICADURA" title="Mordedura o picadura de animal" onclick="selectIncident(this)"><i class="fa-solid fa-bug"></i><span>Mordedura / Picadura</span></button>
                <button class="incident-btn" data-tipo="CAIDA_LESION" title="Caída con lesión o posible fractura" onclick="selectIncident(this)"><i class="fa-solid fa-bone"></i><span>Caída / Fractura</span></button>
                <button class="incident-btn" data-tipo="CRISIS_SALUD_MENTAL" title="Crisis emocional grave / riesgo de autolesión" onclick="selectIncident(this)"><i class="fa-solid fa-hand-holding-heart"></i><span>Crisis Emocional</span></button>
                <button class="incident-btn" data-tipo="TRASLADO_PACIENTE_CRITICO" title="Traslado de paciente crítico" onclick="selectIncident(this)"><i class="fa-solid fa-truck-medical"></i><span>Traslado Crítico</span></button>
                <button class="incident-btn" data-tipo="INTOXICACION_MASIVA" title="Intoxicación masiva" onclick="selectIncident(this)"><i class="fa-solid fa-biohazard"></i><span>Intoxicación Masiva</span></button>
                <button class="incident-btn" data-tipo="BROTE_EPIDEMICO" title="Brote epidémico" onclick="selectIncident(this)"><i class="fa-solid fa-virus"></i><span>Brote Epidémico</span></button>
                <button class="incident-btn" data-tipo="SINIESTRO_MULTIPLES_VICTIMAS" title="Siniestro con múltiples víctimas (MVI)" onclick="selectIncident(this)"><i class="fa-solid fa-people-group"></i><span>Múltiples Víctimas (MVI)</span></button>
            </div>
        </div>
        <div class="category-card cat-fuego">
            <div class="category-header"><i class="fa-solid fa-fire-extinguisher"></i> FUEGO Y RESCATE</div>
            <div class="incident-grid">
                <button class="incident-btn" data-tipo="INCENDIO_ESTRUCTURAL" title="Incendio estructural (vivienda, comercio o edificio)" onclick="selectIncident(this)"><i class="fa-solid fa-house-fire"></i><span>Incendio Estructuras</span></button>
                <button class="incident-btn" data-tipo="INCENDIO_VEHICULAR" title="Incendio vehicular" onclick="selectIncident(this)"><i class="fa-solid fa-car-burst"></i><span>Incendio Vehicular</span></button>
                <button class="incident-btn" data-tipo="INCENDIO_FORESTAL_PROVOCADO" title="Incendio forestal provocado" onclick="selectIncident(this)"><i class="fa-solid fa-tree"></i><span>Incendio Forestal</span></button>
                <button class="incident-btn" data-tipo="INCENDIO_EMERGENCIA" title="Incendio / emergencia (general)" onclick="selectIncident(this)"><i class="fa-solid fa-fire"></i><span>Incendio (Otro)</span></button>
                <button class="incident-btn" data-tipo="EXPLOSION" title="Explosión" onclick="selectIncident(this)"><i class="fa-solid fa-bomb"></i><span>Explosión</span></button>
                <button class="incident-btn" data-tipo="FUGA_GAS" title="Fuga de gas" onclick="selectIncident(this)"><i class="fa-solid fa-faucet-drip"></i><span>Fuga de Gas</span></button>
                <button class="incident-btn" data-tipo="DERRAME_MATERIAL_PELIGROSO" title="Derrame o fuga de material peligroso" onclick="selectIncident(this)"><i class="fa-solid fa-radiation"></i><span>Derrame Peligroso / HAZMAT</span></button>
                <button class="incident-btn" data-tipo="CORTOCIRCUITO_RIESGO_ELECTRICO" title="Cortocircuito o riesgo eléctrico" onclick="selectIncident(this)"><i class="fa-solid fa-plug-circle-exclamation"></i><span>Riesgo Eléctrico</span></button>
                <button class="incident-btn" data-tipo="RESCATE_VEHICULAR" title="Rescate vehicular (persona atrapada)" onclick="selectIncident(this)"><i class="fa-solid fa-car-side"></i><span>Rescate Vehicular</span></button>
                <button class="incident-btn" data-tipo="RESCATE_ACUATICO" title="Rescate acuático" onclick="selectIncident(this)"><i class="fa-solid fa-life-ring"></i><span>Rescate Acuático</span></button>
                <button class="incident-btn" data-tipo="RESCATE_ALTURA_CONFINADO" title="Rescate en altura o espacio confinado" onclick="selectIncident(this)"><i class="fa-solid fa-mountain"></i><span>Rescate en Altura</span></button>
                <button class="incident-btn" data-tipo="PERSONA_ATRAPADA" title="Persona atrapada (ascensor, derrumbe, vehículo)" onclick="selectIncident(this)"><i class="fa-solid fa-person-falling"></i><span>Persona Atrapada</span></button>
                <button class="incident-btn" data-tipo="ENJAMBRE_INSECTOS" title="Enjambre de insectos peligrosos (avispas / abejas)" onclick="selectIncident(this)"><i class="fa-solid fa-bugs"></i><span>Enjambre de Insectos</span></button>
                <button class="incident-btn" data-tipo="ANIMAL_PELIGROSO" title="Animal peligroso suelto (serpiente, fiera, jauría)" onclick="selectIncident(this)"><i class="fa-solid fa-paw"></i><span>Animal Peligroso</span></button>
                <button class="incident-btn" data-tipo="RUPTURA_TUBERIA_POLIDUCTO" title="Ruptura de tubería o poliducto" onclick="selectIncident(this)"><i class="fa-solid fa-water"></i><span>Ruptura Tubería / Poliducto</span></button>
            </div>
        </div>
        <div class="category-card cat-vial">
            <div class="category-header"><i class="fa-solid fa-car-burst"></i> ACCIDENTE VIAL</div>
            <div class="incident-grid">
                <button class="incident-btn" data-tipo="ACCIDENTE_TRANSITO" title="Accidente de tránsito" onclick="selectIncident(this)"><i class="fa-solid fa-car-burst"></i><span>Accidente de Tránsito</span></button>
                <button class="incident-btn" data-tipo="ATROPELLO_MOTO" title="Atropello / accidente de moto" onclick="selectIncident(this)"><i class="fa-solid fa-person-walking-arrow-right"></i><span>Atropello</span></button>
                <button class="incident-btn" data-tipo="ACCIDENTE_COLECTIVO_MASIVO" title="Accidente colectivo o masivo" onclick="selectIncident(this)"><i class="fa-solid fa-bus"></i><span>Accidente Colectivo / Masivo</span></button>
                <button class="incident-btn" data-tipo="ACCIDENTE_MATERIAL_PELIGROSO_VIA" title="Accidente con material peligroso en la vía" onclick="selectIncident(this)"><i class="fa-solid fa-truck-droplet"></i><span>Material Peligroso en Vía</span></button>
                <button class="incident-btn" data-tipo="VIA_OBSTRUIDA_BLOQUEADA" title="Vía obstruida o bloqueada" onclick="selectIncident(this)"><i class="fa-solid fa-road-barrier"></i><span>Vía Obstruida</span></button>
                <button class="incident-btn" data-tipo="COLAPSO_PUENTE_ENLACE_VIAL" title="Colapso de puente o enlace vial" onclick="selectIncident(this)"><i class="fa-solid fa-bridge-circle-exclamation"></i><span>Colapso de Puente / Enlace Vial</span></button>
            </div>
        </div>
        <div class="category-card cat-pcivil">
            <div class="category-header"><i class="fa-solid fa-shield-halved"></i> PROTECCIÓN CIVIL Y AMBIENTAL</div>
            <div class="incident-grid">
                <button class="incident-btn" data-tipo="SISMO_DANOS" title="Sismo con daños o personas afectadas" onclick="selectIncident(this)"><i class="fa-solid fa-house-crack"></i><span>Sismo con Daños</span></button>
                <button class="incident-btn" data-tipo="COLAPSO_ESTRUCTURAL" title="Colapso o riesgo de colapso estructural" onclick="selectIncident(this)"><i class="fa-solid fa-building-circle-exclamation"></i><span>Colapso Estructural</span></button>
                <button class="incident-btn" data-tipo="INUNDACION_ANEGAMIENTO" title="Inundación o anegamiento" onclick="selectIncident(this)"><i class="fa-solid fa-house-flood-water"></i><span>Inundación / Anegación</span></button>
                <button class="incident-btn" data-tipo="CRECIDA_RIO_QUEBRADA" title="Crecida de río o quebrada" onclick="selectIncident(this)"><i class="fa-solid fa-water"></i><span>Crecida de Río o Quebrada</span></button>
                <button class="incident-btn" data-tipo="DESLIZAMIENTO_TIERRA" title="Deslizamiento de tierra o derrumbe" onclick="selectIncident(this)"><i class="fa-solid fa-mountain"></i><span>Deslizamiento / Derrumbe</span></button>
                <button class="incident-btn" data-tipo="DANOS_TORMENTA_VIENTO" title="Daños por tormenta o vientos fuertes" onclick="selectIncident(this)"><i class="fa-solid fa-wind"></i><span>Tormenta / Viento Extremo</span></button>
                <button class="incident-btn" data-tipo="ARBOL_CAIDO" title="Árbol caído u obstrucción por vegetación" onclick="selectIncident(this)"><i class="fa-solid fa-tree"></i><span>Árbol Caído</span></button>
                <button class="incident-btn" data-tipo="FALLA_INFRAESTRUCTURA_RIESGO" title="Falla de infraestructura pública con riesgo (poste, cableado, etc.)" onclick="selectIncident(this)"><i class="fa-solid fa-triangle-exclamation"></i><span>Falla de Infraestructura</span></button>
                <button class="incident-btn" data-tipo="BUSQUEDA_RESCATE_PERSONA" title="Búsqueda y rescate de persona extraviada" onclick="selectIncident(this)"><i class="fa-solid fa-magnifying-glass-location"></i><span>Búsqueda y Rescate</span></button>
                <button class="incident-btn" data-tipo="EVACUACION_PREVENTIVA" title="Evacuación preventiva por riesgo inminente" onclick="selectIncident(this)"><i class="fa-solid fa-person-running"></i><span>Evacuación Masiva</span></button>
            </div>
        </div>
        <div class="category-card cat-seguridad">
            <div class="category-header"><i class="fa-solid fa-user-shield"></i> SEGURIDAD Y ORDEN PÚBLICO</div>
            <div class="incident-grid">
                <button class="incident-btn" data-tipo="DISPAROS_BALACERA" title="Disparos / balacera" onclick="selectIncident(this)"><i class="fa-solid fa-gun"></i><span>Disparos / Balacera</span></button>
                <button class="incident-btn" data-tipo="RINA_PELEA" title="Riña o pelea callejera" onclick="selectIncident(this)"><i class="fa-solid fa-people-arrows"></i><span>Riña</span></button>
                <button class="incident-btn" data-tipo="ALTERACION_ORDEN" title="Alteración del orden público" onclick="selectIncident(this)"><i class="fa-solid fa-bullhorn"></i><span>Alteración del Orden</span></button>
                <button class="incident-btn" data-tipo="AGRESION" title="Agresión / Lesiones" onclick="selectIncident(this)"><i class="fa-solid fa-hand-fist"></i><span>Agresión Física</span></button>
                <button class="incident-btn" data-tipo="AMENAZA" title="Amenazas" onclick="selectIncident(this)"><i class="fa-solid fa-triangle-exclamation"></i><span>Amenaza</span></button>
                <button class="incident-btn" data-tipo="PORTE_ILICITO_ARMA" title="Porte ilícito de arma" onclick="selectIncident(this)"><i class="fa-solid fa-shield-dog"></i><span>Arma / Porte Ilícito</span></button>
                <button class="incident-btn" data-tipo="HOMICIDIO" title="Homicidio" onclick="selectIncident(this)"><i class="fa-solid fa-skull"></i><span>Homicidio</span></button>
                <button class="incident-btn" data-tipo="SECUESTRO" title="Secuestro / privación ilegítima de libertad" onclick="selectIncident(this)"><i class="fa-solid fa-user-lock"></i><span>Secuestro</span></button>
                <button class="incident-btn" data-tipo="DELITO_SEXUAL" title="Delito sexual (abuso, acoso o violación)" onclick="selectIncident(this)"><i class="fa-solid fa-ban"></i><span>Delito Sexual</span></button>
                <button class="incident-btn" data-tipo="VIOLENCIA_INTRAFAMILIAR" title="Violencia intrafamiliar" onclick="selectIncident(this)"><i class="fa-solid fa-house-chimney-crack"></i><span>Violencia Intrafamiliar</span></button>
                <button class="incident-btn" data-tipo="VIOLENCIA_GENERO" title="Violencia de género" onclick="selectIncident(this)"><i class="fa-solid fa-venus-mars"></i><span>Violencia de Género</span></button>
                <button class="incident-btn" data-tipo="PERSONA_DESAPARECIDA" title="Persona desaparecida" onclick="selectIncident(this)"><i class="fa-solid fa-person-circle-question"></i><span>Persona Desaparecida</span></button>
                <button class="incident-btn" data-tipo="DISTURBIOS_CIVILES" title="Disturbios civiles" onclick="selectIncident(this)"><i class="fa-solid fa-users-rays"></i><span>Disturbios Civiles</span></button>
                <button class="incident-btn" data-tipo="SAQUEO_INTENTO" title="Saqueo o intento de saqueo" onclick="selectIncident(this)"><i class="fa-solid fa-store-slash"></i><span>Saqueo / Intento</span></button>
                <button class="incident-btn" data-tipo="TOMA_INVASION_VIOLENTA" title="Toma o invasión violenta" onclick="selectIncident(this)"><i class="fa-solid fa-building-shield"></i><span>Toma o Invasión Violenta</span></button>
                <button class="incident-btn" data-tipo="ATAQUE_INSTALACIONES" title="Ataque a instalaciones" onclick="selectIncident(this)"><i class="fa-solid fa-explosion"></i><span>Ataque a Instalaciones</span></button>
                <button class="incident-btn" data-tipo="EXTORSION_SICARIATO" title="Extorsión o sicariato" onclick="selectIncident(this)"><i class="fa-solid fa-user-secret"></i><span>Extorsión / Sicariato</span></button>
                <button class="incident-btn" data-tipo="OTROS" title="Otros / no especificado" onclick="selectIncident(this)"><i class="fa-solid fa-ellipsis"></i><span>Otros</span></button>
            </div>
        </div>
        <div class="category-card cat-propiedad">
            <div class="category-header"><i class="fa-solid fa-handcuffs"></i> DELITOS CONTRA LA PROPIEDAD</div>
            <div class="incident-grid">
                <button class="incident-btn" data-tipo="ROBO" title="Robo a mano armada" onclick="selectIncident(this)"><i class="fa-solid fa-gun"></i><span>Robo Armado</span></button>
                <button class="incident-btn" data-tipo="HURTO" title="Hurto" onclick="selectIncident(this)"><i class="fa-solid fa-mask"></i><span>Hurto</span></button>
            </div>
        </div>
        <div class="category-card cat-servicios">
            <div class="category-header"><i class="fa-solid fa-tower-cell"></i> SERVICIOS PÚBLICOS E INFRAESTRUCTURA</div>
            <div class="incident-grid">
                <button class="incident-btn" data-tipo="FALLA_ELECTRICA_GENERALIZADA" title="Falla eléctrica generalizada (blackout)" onclick="selectIncident(this)"><i class="fa-solid fa-plug-circle-xmark"></i><span>Falla Eléctrica (Blackout)</span></button>
                <button class="incident-btn" data-tipo="FUGA_TUBERIA_MATRIZ_AGUA" title="Fuga o rotura de tubería matriz de agua" onclick="selectIncident(this)"><i class="fa-solid fa-faucet"></i><span>Rotura Tubería Matriz de Agua</span></button>
                <button class="incident-btn" data-tipo="SABOTAJE_SUBESTACION_TELECOM" title="Sabotaje a subestación o telecomunicaciones" onclick="selectIncident(this)"><i class="fa-solid fa-satellite-dish"></i><span>Sabotaje Subestación / Telecom.</span></button>
                <button class="incident-btn" data-tipo="DESABASTECIMIENTO_CRITICO" title="Desabastecimiento crítico de servicio vital" onclick="selectIncident(this)"><i class="fa-solid fa-triangle-exclamation"></i><span>Desabastecimiento Crítico</span></button>
            </div>
        </div>
        <div class="category-card cat-rural">
            <div class="category-header"><i class="fa-solid fa-tractor"></i> EMERGENCIA RURAL Y AGRÍCOLA</div>
            <div class="incident-grid">
                <button class="incident-btn" data-tipo="ACCIDENTE_MAQUINARIA_AGRICOLA" title="Accidente con maquinaria agrícola" onclick="selectIncident(this)"><i class="fa-solid fa-tractor"></i><span>Maquinaria Agrícola</span></button>
                <button class="incident-btn" data-tipo="ACCIDENTE_OFIDICO_ZOONOSIS" title="Accidente ofídico o zoonosis" onclick="selectIncident(this)"><i class="fa-solid fa-worm"></i><span>Accidente Ofídico / Zoonosis</span></button>
                <button class="incident-btn" data-tipo="INTOXICACION_LABORAL" title="Intoxicación laboral (agroquímicos/gases)" onclick="selectIncident(this)"><i class="fa-solid fa-flask"></i><span>Intoxicación Agroquímicos</span></button>
                <button class="incident-btn" data-tipo="PICADURA_MASIVA_AGRICOLA" title="Picadura masiva en zona agrícola" onclick="selectIncident(this)"><i class="fa-solid fa-bugs"></i><span>Picadura Masiva en Zona Agrícola</span></button>
                <button class="incident-btn" data-tipo="MORDEDURA_SILVESTRE_RABIA" title="Mordedura de animal silvestre o riesgo de rabia" onclick="selectIncident(this)"><i class="fa-solid fa-paw"></i><span>Mordedura Animal Silvestre / Rabia</span></button>
                <button class="incident-btn" data-tipo="ATRAPAMIENTO_SEMOVIENTE" title="Atrapamiento por semoviente" onclick="selectIncident(this)"><i class="fa-solid fa-cow"></i><span>Atrapamiento por Semoviente</span></button>
                <button class="incident-btn" data-tipo="ATAQUE_ANIMALES_GANADO" title="Ataque de animales a ganado" onclick="selectIncident(this)"><i class="fa-solid fa-skull-crossbones"></i><span>Ataque de Animales a Ganado</span></button>
                <button class="incident-btn" data-tipo="ABIGEATO_MAYOR" title="Abigeato mayor (bovino/bufalino/equino)" onclick="selectIncident(this)"><i class="fa-solid fa-shield-cat"></i><span>Abigeato / Hurto Mayor de Cosecha</span></button>
                <button class="incident-btn" data-tipo="INCENDIO_DEPOSITOS_COSECHAS" title="Incendio de depósitos o cosechas" onclick="selectIncident(this)"><i class="fa-solid fa-warehouse"></i><span>Incendio de Depósitos o Cosechas</span></button>
                <button class="incident-btn" data-tipo="ELECTROCUCION_CERCA_ARTESANAL" title="Electrocución por cerca artesanal" onclick="selectIncident(this)"><i class="fa-solid fa-bolt"></i><span>Electrocución por Cerca Artesanal</span></button>
                <button class="incident-btn" data-tipo="INUNDACION_UNIDADES_PRODUCCION" title="Inundación de unidades de producción" onclick="selectIncident(this)"><i class="fa-solid fa-water"></i><span>Inundación de Unidades de Producción</span></button>
                <button class="incident-btn" data-tipo="CONTAMINACION_FUENTES_AGUA" title="Contaminación de fuentes de agua" onclick="selectIncident(this)"><i class="fa-solid fa-droplet-slash"></i><span>Contaminación de Fuentes de Agua</span></button>
                <button class="incident-btn" data-tipo="BROTE_FITOSANITARIO" title="Brote fitosanitario o plaga agrícola" onclick="selectIncident(this)"><i class="fa-solid fa-seedling"></i><span>Brote Fitosanitario / Plaga</span></button>
                <button class="incident-btn" data-tipo="PERDIDA_COSECHA_CLIMA" title="Pérdida crítica de cosecha por clima" onclick="selectIncident(this)"><i class="fa-solid fa-cloud-showers-heavy"></i><span>Pérdida Crítica de Cosecha por Clima</span></button>
                <button class="incident-btn" data-tipo="AISLAMIENTO_VIAL" title="Aislamiento vial (vía intransitable)" onclick="selectIncident(this)"><i class="fa-solid fa-road"></i><span>Aislamiento Vial / Trochas</span></button>
                <button class="incident-btn" data-tipo="VIOLENCIA_INTRAFAMILIAR_RURAL" title="Violencia intrafamiliar en zona rural" onclick="selectIncident(this)"><i class="fa-solid fa-house-chimney-user"></i><span>Violencia Intrafamiliar Rural</span></button>
            </div>
        </div>
<!--CATEGORIAS-FIN-->
    </div>
</div>


<div class="bottom-bar">
    <div class="fila-ayuda">
        <button class="btn-ayuda" onclick="abrirModalAyuda()"><i class="fa-solid fa-circle-question"></i> ¿Cómo usar esto?</button>
    </div>
    <div class="bottom-actions-row">
        <button class="btn-location" id="btn_ubicacion" onclick="abrirModalUbicacion()">
            <i class="fa-solid fa-location-crosshairs"></i> <span id="txt_ubicacion">UBICACIÓN</span>
        </button>
    </div>
    <button class="btn-submit" id="btn_enviar" onclick="enviarReporteRapido()" disabled>ENVIAR REPORTE YA</button>
</div>

<!-- Modal de ayuda — redactado solo para el ciudadano que reporta, sin
     lenguaje técnico ni de operador. Ver salirModulo()/toggleAgencia()
     etc. para lo que hace cada botón; este texto solo explica QUÉ
     hacer, no CÓMO está construido. -->
<div class="modal-ubi-fondo" id="modal_ayuda_fondo">
  <div class="modal-ayuda">
    <h3><i class="fa-solid fa-circle-question" style="color:var(--detallado);"></i> ¿Cómo usar el Registro Rápido?</h3>
    <div class="subtitulo-ayuda">Esta página sirve para avisarle a la Alcaldía de una emergencia en pocos pasos, desde su teléfono.</div>

    <h4><span class="paso-num">1</span> Elija qué tan grave es</h4>
    <p>Toque uno de los 4 botones de color (Crítico, Alto, Medio, Bajo) según qué tan urgente es. Si hay riesgo de vida, elija <strong>Crítico</strong>.</p>

    <h4><span class="paso-num">2</span> Diga si está pasando ahora o ya pasó</h4>
    <p>Toque "Ocurriendo ahora" si está sucediendo en este momento, o "Ya sucedió" si ya terminó y solo lo está reportando.</p>

    <h4><span class="paso-num">3</span> Busque el tipo de incidente</h4>
    <p>Más abajo hay varias tarjetas con íconos, ordenadas por prioridad (por ejemplo "Emergencia Médica", "Fuego y Rescate", "Accidente Vial"). Toque el que mejor describa lo que está pasando. Solo puede elegir uno — si tiene que reportar dos cosas distintas, hágalo en dos reportes separados.</p>

    <h4><span class="paso-num">4</span> (Opcional) Marque qué institución cree que debe ir</h4>
    <p>Arriba de todo puede tocar Ambulancia (incluye paramédicos), Bomberos, Policía o Protección Civil si sabe cuál necesita. No es obligatorio — el sistema igual decide solo, según el tipo de incidente que eligió, a quién avisarle.</p>

    <h4><span class="paso-num">5</span> Indique dónde es</h4>
    <p>Toque el botón <strong>UBICACIÓN</strong> (abajo). Ahí puede:</p>
    <ul>
      <li>Elegir su Estado, Municipio y Parroquia.</li>
      <li>Escribir un punto de referencia (por ejemplo: "cerca del abasto Don Pedro").</li>
      <li>Tocar "Usar mi ubicación" para que el teléfono mande su posición exacta por GPS — esto ayuda mucho a encontrarlo más rápido. El teléfono le va a preguntar si le da permiso; si dice que no por error, puede intentarlo de nuevo o seguir solo con el punto de referencia.</li>
      <li>Si hace falta, dejar un teléfono o correo <strong>opcional</strong> — es solo por si necesitan hacerle una pregunta puntual sobre lo que está reportando. No es obligatorio, y su nombre nunca se pide.</li>
    </ul>

    <h4><span class="paso-num">6</span> Envíe el reporte</h4>
    <p>Cuando termine, el botón verde "ENVIAR REPORTE YA" se activa. Al tocarlo, le va a aparecer un <strong>código y un PIN</strong> — guárdelos (haga una captura de pantalla), porque es la única forma de consultar más adelante en qué va su reporte, ya que el Registro Rápido es anónimo.</p>

    <div class="nota-ayuda"><i class="fa-solid fa-circle-info me-1"></i>Este reporte queda registrado en el sistema de la Alcaldía — no es una llamada telefónica. Si la emergencia es de vida o muerte y usted puede llamar, hágalo además de reportar acá.</div>

    <button class="btn-cerrar-ayuda" onclick="cerrarModalAyuda()">Entendido, cerrar</button>
  </div>
</div>

<!-- Modal de ubicación — 1 solo paso: cascada geográfica oficial + GPS opcional + 1 campo de referencia -->
<div class="modal-ubi-fondo" id="modal_ubi_fondo">
  <div class="modal-ubi">
    <h3><i class="fa-solid fa-location-dot"></i> ¿Dónde es el incidente?</h3>

    <div class="estado-gps" id="txt_autoubi" style="margin-bottom:6px;"></div>
    <label>Estado</label>
    <select id="ubi_estado" onchange="cargarMunicipiosRapido()"><option value="">Cargando…</option></select>
    <label>Municipio</label>
    <select id="ubi_municipio" onchange="cargarParroquiasRapido()" disabled><option value="">Elija Estado primero…</option></select>
    <label>Parroquia <span style="font-weight:400;color:#777;">(si no aparece en la lista, escríbala)</span></label>
    <select id="ubi_parroquia" onchange="parroquiaCambio()" disabled><option value="">Elija Municipio primero…</option></select>
    <input type="text" id="ubi_parroquia_otra" maxlength="80" placeholder="Escriba su parroquia" style="display:none;margin-top:6px;">

    <div class="row g-2">
      <div class="col-6"><label>Sector</label><input type="text" id="ubi_sector" maxlength="120" placeholder="Ej: Los Mangos"></div>
      <div class="col-6"><label>Zona</label><input type="text" id="ubi_zona" maxlength="120" placeholder="Ej: Zona norte / Calle 5"></div>
    </div>

    <label>Punto de referencia (calle, algo cercano y conocido)</label>
    <textarea id="ubi_referencia" rows="2" placeholder="Ej: cerca del abasto Don Pedro, frente a la plaza"></textarea>

    <label>Nota corta de la emergencia (opcional)</label>
    <textarea id="ubi_nota" rows="2" maxlength="300" placeholder="Ej: Hombre de unos 60 años, no responde, hay 2 personas con él"></textarea>

    <div class="fila-gps">
      <span class="estado-gps" id="txt_gps">Sin coordenadas GPS todavía (opcional, ayuda a ubicar más rápido).</span>
      <button class="btn-gps" onclick="capturarGPS()"><i class="fa-solid fa-crosshairs"></i> Usar mi ubicación</button>
    </div>

    <!-- A pedido: contacto opcional — el reporte SIGUE siendo anónimo
         (no se pide nombre); esto es solo para que, si hace falta una
         pregunta puntual (ej. "¿cada cuánto son las contracciones?"),
         el operador tenga cómo comunicarse. Queda protegido con la
         MISMA redacción que ya existe para datos de contacto — solo
         lo ve quien tenga el permiso de atención a víctimas, igual
         que en el Registro Detallado. -->
    <label class="mt-2">¿Quiere dejar un teléfono o correo por si hace falta contactarlo? (opcional — el reporte sigue siendo anónimo, no se pide su nombre)</label>
    <div class="row g-2">
      <div class="col-6"><input type="tel" id="ubi_telefono" placeholder="Teléfono (opcional)"></div>
      <div class="col-6"><input type="email" id="ubi_correo" placeholder="Correo (opcional)"></div>
    </div>

    <div class="botones">
      <button class="btn-cancelar" onclick="cerrarModalUbicacion()">Cancelar</button>
      <button class="btn-confirmar" onclick="confirmarUbicacion()">Confirmar ubicación</button>
    </div>
  </div>
</div>

<script>
// Ruta real, confirmada contra _02_BACKEND_doGet_v31.gs: 'seguridad_publico'
// sirve Portal_Seguridad_Ciudadana (el Registro Detallado) como portal
// público, sin sesión — mismo patrón para esta página, ver la ruta
// 'seguridad_publico_rapido' que hay que agregar a doGet (ver nota más
// abajo, junto a irRegistroDetallado).
var PAGE_REGISTRO_DETALLADO = 'seguridad_publico';

function apiCall() { return window.sgmRpc.apply(null, arguments); }

// ── Estado del formulario ────────────────────────────────────────
var TIPO_SELECCIONADO = null;   // código real de SEG_CATALOGO_TIPOS
var LABEL_SELECCIONADO = null;  // texto visible del botón, para armar la descripción
var GRAVEDAD_SELECCIONADA = 'CRITICO';
var TIEMPO_SELECCIONADO = 'AHORA';
var UBICACION_CONFIRMADA = null; // { estado, municipio, parroquia, referencia, lat, lon, precision }
var CONTACTO_TELEFONO = ''; var CONTACTO_CORREO = ''; // opcionales — ver nota en el modal de ubicación
// FASE — corrección a pedido: los botones de agencia (arriba) ahora sí
// son interactivos. Siguen sin cambiar a qué institución se asigna
// realmente el incidente (eso lo sigue calculando el backend solo,
// por tipo — ver nota de cabecera) — lo que el ciudadano marca acá se
// agrega como contexto informativo en la descripción del reporte, y
// SÍ queda visualmente marcado como elegido (opacidad completa +
// borde + ✓), que es lo que se pidió corregir.
var AGENCIAS_SELECCIONADAS = []; // etiquetas visibles, ej. ['Policía', 'Ambulancia']
var AGENCIAS_CODIGOS = [];       // códigos reales (POLICIA, AMBULANCIA…) → se envían como institucionesSolicitadas

var ETIQUETAS_AGENCIA_BTN = { POLICIA: 'Policía', AMBULANCIA: 'Ambulancia', BOMBEROS: 'Bomberos', PROTECCION_CIVIL: 'Protección Civil' };

// ══════════════════════════════════════════════════════════════════
// A pedido: al marcar una agencia arriba, la grilla de tipos de abajo
// se filtra para mostrar solo los que esa institución suele atender.
// Es EXACTAMENTE la misma tabla que usa el backend para el
// enrutamiento automático real (SEG_ORGANISMO_POR_TIPO, en
// SEG_BACKEND_v5_10.gs) — copiada tal cual para que lo que se ve acá
// como "relacionado" coincida siempre con a quién se le asigna de
// verdad, sin mantener 2 tablas por separado que se puedan
// desincronizar. Ambulancia y Paramédicos son ahora UNA sola
// institución (AMBULANCIA), por eso ya no hay botón de Paramédicos.
// ══════════════════════════════════════════════════════════════════
var ORGANISMOS_POR_TIPO = /*ORG-INICIO*/{HURTO:['POLICIA'],ROBO:['POLICIA'],AGRESION:['POLICIA','AMBULANCIA'],HOMICIDIO:['POLICIA'],VIOLENCIA_GENERO:['POLICIA','AMBULANCIA'],VIOLENCIA_INTRAFAMILIAR:['POLICIA','AMBULANCIA'],DANOS_PROPIEDAD:['POLICIA'],SECUESTRO:['POLICIA'],AMENAZA:['POLICIA'],DELITO_SEXUAL:['POLICIA','AMBULANCIA'],ESTAFA_FRAUDE:['POLICIA'],PORTE_ILICITO_ARMA:['POLICIA'],TRAFICO_SUSTANCIAS:['POLICIA'],PERSONA_DESAPARECIDA:['POLICIA','PROTECCION_CIVIL'],ACCIDENTE_TRANSITO:['POLICIA','AMBULANCIA','BOMBEROS'],ALTERACION_ORDEN:['POLICIA'],INCENDIO_EMERGENCIA:['BOMBEROS','PROTECCION_CIVIL'],DISPAROS_BALACERA:['POLICIA','AMBULANCIA'],ATROPELLO_MOTO:['POLICIA','AMBULANCIA','BOMBEROS'],ACCIDENTE_COLECTIVO_MASIVO:['POLICIA','AMBULANCIA','BOMBEROS','PROTECCION_CIVIL'],DISTURBIOS_CIVILES:['POLICIA','AMBULANCIA'],SAQUEO_INTENTO:['POLICIA'],TOMA_INVASION_VIOLENTA:['POLICIA'],ATAQUE_INSTALACIONES:['POLICIA','BOMBEROS','AMBULANCIA'],EXTORSION_SICARIATO:['POLICIA'],CONFLICTO_VECINAL:['POLICIA'],RUIDO_MOLESTIAS:['POLICIA'],CONSUMO_VIA_PUBLICA:['POLICIA'],ESPACIO_PUBLICO:['POLICIA'],RINA_PELEA:['POLICIA','AMBULANCIA'],OCUPACION_ILEGAL_INMUEBLE:['POLICIA'],MALTRATO_ANIMAL:['POLICIA','PROTECCION_CIVIL'],VEHICULO_MAL_ESTACIONADO:['POLICIA'],OTROS:['POLICIA','AMBULANCIA','PROTECCION_CIVIL','BOMBEROS'],ABIGEATO_MAYOR:['POLICIA'],ABIGEATO_MENOR:['POLICIA'],BENEFICIO_CLANDESTINO:['POLICIA'],ROBO_INSUMOS_MAQUINARIA:['POLICIA'],ROBO_AGROQUIMICOS_VETERINARIA:['POLICIA'],ROBO_COSECHA_PRODUCCION:['POLICIA'],EXTORSION_COBRO_VACUNA:['POLICIA'],INVASION_USURPACION_TIERRAS:['POLICIA'],CONFLICTO_LINDEROS_SERVIDUMBRE:['POLICIA'],CONFLICTO_RECURSOS_HIDRICOS:['POLICIA'],DANOS_PROPIEDAD_CULTIVOS:['POLICIA'],DANOS_POR_ANIMALES_AJENOS:['POLICIA'],TALA_CAZA_MINERIA_ILEGAL:['POLICIA','PROTECCION_CIVIL'],INCENDIO_FORESTAL_PROVOCADO:['BOMBEROS','PROTECCION_CIVIL'],MOVILIZACION_SIN_GUIAS_SANITARIAS:['POLICIA'],CONTAMINACION_AGROQUIMICA:['PROTECCION_CIVIL'],ACCIDENTE_MAQUINARIA_AGRICOLA:['AMBULANCIA','PROTECCION_CIVIL'],ACCIDENTE_OFIDICO_ZOONOSIS:['AMBULANCIA'],INTOXICACION_LABORAL:['AMBULANCIA','PROTECCION_CIVIL'],AISLAMIENTO_VIAL:['PROTECCION_CIVIL'],PICADURA_MASIVA_AGRICOLA:['AMBULANCIA','BOMBEROS'],MORDEDURA_SILVESTRE_RABIA:['AMBULANCIA'],ATRAPAMIENTO_SEMOVIENTE:['AMBULANCIA','BOMBEROS'],ATAQUE_ANIMALES_GANADO:['PROTECCION_CIVIL'],INCENDIO_DEPOSITOS_COSECHAS:['BOMBEROS','PROTECCION_CIVIL'],ELECTROCUCION_CERCA_ARTESANAL:['AMBULANCIA','BOMBEROS'],INUNDACION_UNIDADES_PRODUCCION:['PROTECCION_CIVIL'],CONTAMINACION_FUENTES_AGUA:['PROTECCION_CIVIL'],BROTE_FITOSANITARIO:['PROTECCION_CIVIL'],PERDIDA_COSECHA_CLIMA:['PROTECCION_CIVIL'],VIOLENCIA_INTRAFAMILIAR_RURAL:['POLICIA','AMBULANCIA'],DESMANTELAMIENTO_SERVICIOS_PUBLICOS:['POLICIA'],PARO_CARDIORESPIRATORIO:['AMBULANCIA'],PERSONA_INCONSCIENTE:['AMBULANCIA'],PARTO_EMERGENCIA:['AMBULANCIA'],INTOXICACION_ENVENENAMIENTO:['AMBULANCIA'],CAIDA_LESION:['AMBULANCIA'],QUEMADURA:['AMBULANCIA','BOMBEROS'],AHOGAMIENTO:['AMBULANCIA','BOMBEROS'],REACCION_ALERGICA_SEVERA:['AMBULANCIA'],HERIDA_ARMA:['AMBULANCIA','POLICIA'],MORDEDURA_PICADURA:['AMBULANCIA'],TRASLADO_PACIENTE_CRITICO:['AMBULANCIA'],HEMORRAGIA_TRAUMA:['AMBULANCIA'],DIFICULTAD_RESPIRATORIA:['AMBULANCIA'],SOSPECHA_ACV:['AMBULANCIA'],ELECTROCUCION:['AMBULANCIA','BOMBEROS'],CRISIS_SALUD_MENTAL:['AMBULANCIA','POLICIA'],INTOXICACION_MASIVA:['AMBULANCIA','PROTECCION_CIVIL','BOMBEROS'],BROTE_EPIDEMICO:['AMBULANCIA','PROTECCION_CIVIL'],SINIESTRO_MULTIPLES_VICTIMAS:['AMBULANCIA','BOMBEROS','PROTECCION_CIVIL','POLICIA'],INCENDIO_ESTRUCTURAL:['BOMBEROS'],INCENDIO_VEHICULAR:['BOMBEROS'],EXPLOSION:['BOMBEROS','AMBULANCIA'],FUGA_GAS:['BOMBEROS','PROTECCION_CIVIL'],RESCATE_VEHICULAR:['BOMBEROS','AMBULANCIA'],RESCATE_ALTURA_CONFINADO:['BOMBEROS'],RESCATE_ACUATICO:['BOMBEROS','AMBULANCIA'],DERRAME_MATERIAL_PELIGROSO:['BOMBEROS','PROTECCION_CIVIL'],CORTOCIRCUITO_RIESGO_ELECTRICO:['BOMBEROS','PROTECCION_CIVIL'],ENJAMBRE_INSECTOS:['BOMBEROS'],PERSONA_ATRAPADA:['BOMBEROS','PROTECCION_CIVIL'],ANIMAL_PELIGROSO:['BOMBEROS','PROTECCION_CIVIL'],RUPTURA_TUBERIA_POLIDUCTO:['BOMBEROS','PROTECCION_CIVIL'],ACCIDENTE_MATERIAL_PELIGROSO_VIA:['BOMBEROS','PROTECCION_CIVIL','POLICIA'],INUNDACION_ANEGAMIENTO:['PROTECCION_CIVIL'],DESLIZAMIENTO_TIERRA:['PROTECCION_CIVIL'],COLAPSO_ESTRUCTURAL:['PROTECCION_CIVIL','BOMBEROS'],ARBOL_CAIDO:['PROTECCION_CIVIL'],VIA_OBSTRUIDA_BLOQUEADA:['PROTECCION_CIVIL'],DANOS_TORMENTA_VIENTO:['PROTECCION_CIVIL'],BUSQUEDA_RESCATE_PERSONA:['PROTECCION_CIVIL','POLICIA'],EVACUACION_PREVENTIVA:['PROTECCION_CIVIL'],FALLA_INFRAESTRUCTURA_RIESGO:['PROTECCION_CIVIL','BOMBEROS'],SISMO_DANOS:['PROTECCION_CIVIL','BOMBEROS','AMBULANCIA'],COLAPSO_PUENTE_ENLACE_VIAL:['PROTECCION_CIVIL','BOMBEROS','POLICIA'],CRECIDA_RIO_QUEBRADA:['PROTECCION_CIVIL','BOMBEROS'],FALLA_ELECTRICA_GENERALIZADA:['PROTECCION_CIVIL'],FUGA_TUBERIA_MATRIZ_AGUA:['PROTECCION_CIVIL'],SABOTAJE_SUBESTACION_TELECOM:['POLICIA','PROTECCION_CIVIL'],DESABASTECIMIENTO_CRITICO:['PROTECCION_CIVIL']}/*ORG-FIN*/;

function toggleAgencia(btn) {
  btn.classList.toggle('seleccionada');
  var etiqueta = ETIQUETAS_AGENCIA_BTN[btn.dataset.institucion] || btn.dataset.institucion;
  var idx = AGENCIAS_SELECCIONADAS.indexOf(etiqueta);
  var cod = btn.dataset.institucion, ic = AGENCIAS_CODIGOS.indexOf(cod);
  if (btn.classList.contains('seleccionada')) {
    if (idx < 0) AGENCIAS_SELECCIONADAS.push(etiqueta);
    if (ic < 0) AGENCIAS_CODIGOS.push(cod);
  } else {
    if (idx >= 0) AGENCIAS_SELECCIONADAS.splice(idx, 1);
    if (ic >= 0) AGENCIAS_CODIGOS.splice(ic, 1);
  }
  aplicarFiltroPorAgencias();
}

/**
 * Filtra la grilla de tipos según las agencias marcadas arriba (unión
 * — si marca Bomberos Y Protección Civil, ve lo de ambas). Sin nada
 * marcado, se ve todo (comportamiento original). Oculta tarjetas de
 * categoría enteras si ninguno de sus tipos queda visible. Si el tipo
 * que ya tenía elegido queda oculto por el filtro, lo deselecciona
 * (para no dejar seleccionado algo que ya no se ve).
 */
function aplicarFiltroPorAgencias() {
  var seleccionadas = Array.prototype.map.call(document.querySelectorAll('.agency-btn.seleccionada'), function (b) { return b.dataset.institucion; });
  var activos = seleccionadas;
  var sinFiltro = activos.length === 0;

  document.querySelectorAll('.incident-btn').forEach(function (b) {
    var organismos = ORGANISMOS_POR_TIPO[b.dataset.tipo] || [];
    var visible = sinFiltro || organismos.some(function (o) { return activos.indexOf(o) >= 0; });
    b.style.display = visible ? '' : 'none';
    if (!visible && b.classList.contains('selected')) {
      b.classList.remove('selected');
      TIPO_SELECCIONADO = null; LABEL_SELECCIONADO = null;
      actualizarBotonEnviar();
    }
  });
  document.querySelectorAll('.category-card').forEach(function (card) {
    var algunoVisible = Array.prototype.some.call(card.querySelectorAll('.incident-btn'), function (b) { return b.style.display !== 'none'; });
    card.style.display = algunoVisible ? '' : 'none';
  });
}

window.onload = function () {
  apiCall('getAlcaldiaConfig').then(function (config) {
    if (config && config.nombre) document.getElementById('sub_municipio').textContent = config.nombre + (config.gestion ? ' — ' + config.gestion : '');
    if (config && config.logo_url) { var ic = document.querySelector('.choice-option.activa i.choice-icon'); if (ic) { var im = document.createElement('img'); im.src = config.logo_url; im.alt = ''; im.style.cssText = 'height:46px;width:46px;object-fit:contain'; ic.parentNode.replaceChild(im, ic); } }
    var t = config && config.territorio;
    if (t && t.configurado) {
      var av = document.getElementById('aviso_territorio');
      av.textContent = 'Solo atendemos emergencias dentro del municipio ' + t.municipio + '. Los equipos solo pueden actuar en ese territorio.';
      av.style.display = 'block';
    }
  }).catch(function () { /* branding es cosmético, no bloquea el registro rápido si falla */ });
  iniciarFranjaReporte();
};

/* Franja «Su reporte…»: solo aparece en el teléfono que ya envió un reporte reciente y mientras el caso siga en curso. */
var FRANJA_TIMER = null;
var PASOS_TXT = { 1: 'Recibido', 2: 'Asignado', 3: 'En camino', 4: 'En sitio', 5: 'Finalizado' };
function franjaQuitar() {
  try { localStorage.removeItem('sgm_seguimiento'); } catch (e) {}
  var f = document.getElementById('franja_reporte'); if (f) f.style.display = 'none';
  if (FRANJA_TIMER) { clearInterval(FRANJA_TIMER); FRANJA_TIMER = null; }
}
function franjaActualizar() {
  var g = null; try { g = JSON.parse(localStorage.getItem('sgm_seguimiento') || 'null'); } catch (e) {}
  var m = g && typeof g.url === 'string' && /^\/seguimiento\/[A-Za-z0-9_-]{22}$/.test(g.url) ? g.url.split('/')[2] : '';
  if (!m || !g.ts || Date.now() - g.ts > 8 * 86400e3) { if (g) franjaQuitar(); return; }
  apiCall('seguimientoEstado', m).then(function (r) {
    if (!r || r.success === false || !r.data) { franjaQuitar(); return; }          // enlace vencido o inexistente
    var s = r.data; if (s.global && s.global.finalizado) { franjaQuitar(); return; }
    var f = document.getElementById('franja_reporte');
    f.innerHTML = 'Su reporte <b></b> · <span class="est"></span> <span class="ver">Ver</span>';
    f.querySelector('b').textContent = s.codigo; f.querySelector('.est').textContent = PASOS_TXT[(s.global && s.global.paso) || 1] || 'Recibido';
    f.href = g.url; f.style.display = 'flex';
  }).catch(function (e) { if (e && /enlace|venci|v[aá]lido/i.test(e.message || '')) franjaQuitar(); /* sin conexión: se deja lo último mostrado */ });
}
function iniciarFranjaReporte() {
  var g = null; try { g = localStorage.getItem('sgm_seguimiento'); } catch (e) {}
  if (!g) return;                                  // quien nunca reportó no ve nada
  franjaActualizar();
  if (FRANJA_TIMER) return;
  FRANJA_TIMER = setInterval(franjaActualizar, 20000);
  if (!window.__franjaVis) { window.__franjaVis = true; document.addEventListener('visibilitychange', function () { if (!document.hidden) franjaActualizar(); }); }
}

function irRegistroDetallado() {
  window.top.location.href = '/?page=' + PAGE_REGISTRO_DETALLADO;
}

/**
 * Botón "Salir" (✕, arriba a la derecha). Pide confirmación solo si
 * hay algo cargado que se perdería (evita el cartel molesto si todavía
 * no tocó nada). Intenta cerrar la pestaña con window.top.close() —
 * SOLO funciona si esta pestaña la abrió otro script (poco común
 * llegando por un enlace/QR, que es la vía normal de esta página); los
 * navegadores no dejan que ninguna página cierre una pestaña que el
 * propio usuario abrió a mano, por seguridad — ningún código puede
 * saltarse esa regla. Por eso, si no se cerró sola en un momento, se
 * muestra una pantalla de despedida clara en vez de dejar al usuario
 * sin saber qué hacer.
 */
function salirModulo() {
  var hayAlgoCargado = TIPO_SELECCIONADO || UBICACION_CONFIRMADA || AGENCIAS_SELECCIONADAS.length;
  if (hayAlgoCargado && !confirm('¿Salir sin enviar el reporte? Se perderá lo que completó hasta ahora.')) return;

  try { window.top.close(); } catch (e) { /* algunos navegadores lanzan al intentar cerrar sin permiso — se ignora, sigue el fallback */ }

  setTimeout(function () {
    document.getElementById('pantalla_despedida').classList.add('abierta');
  }, 300);
}

// ── Categoría, gravedad y tiempo (todo selección única) ──────────
function toggleActive(element, group) {
  var siblings = element.parentElement.children;
  for (var i = 0; i < siblings.length; i++) siblings[i].classList.remove('active');
  element.classList.add('active');
  if (group === 'sev') GRAVEDAD_SELECCIONADA = element.dataset.gravedad;
  if (group === 'time') TIEMPO_SELECCIONADO = element.dataset.tiempo;
}

function selectIncident(element) {
  // Selección ÚNICA (ver nota de cabecera, punto 1) — no multi-select
  // como parecía sugerir la maqueta original.
  document.querySelectorAll('.incident-btn.selected').forEach(function (b) { b.classList.remove('selected'); });
  element.classList.add('selected');
  TIPO_SELECCIONADO = element.dataset.tipo;
  LABEL_SELECCIONADO = element.querySelector('span').textContent;
  actualizarBotonEnviar();
}

// ── Modal de ubicación ────────────────────────────────────────────
var GEO_CARGADO = false;

function abrirModalAyuda() {
  document.getElementById('modal_ayuda_fondo').classList.add('abierto');
}
function cerrarModalAyuda() {
  document.getElementById('modal_ayuda_fondo').classList.remove('abierto');
}

function abrirModalUbicacion() {
  document.getElementById('modal_ubi_fondo').classList.add('abierto');
  if (!GEO_CARGADO) { GEO_CARGADO = true; cargarEstadosRapido().then(autoDetectarUbicacion); }
}
function cerrarModalUbicacion() {
  document.getElementById('modal_ubi_fondo').classList.remove('abierto');
}

function parroquiaCambio() {
  var sel = document.getElementById('ubi_parroquia'), t = document.getElementById('ubi_parroquia_otra');
  var soloTexto = sel.getAttribute('data-sin-lista') === '1';
  sel.style.display = soloTexto ? 'none' : '';
  t.style.display = (soloTexto || sel.value === '__OTRA__') ? '' : 'none';
  t.disabled = false; t.readOnly = false;
}
function normTxt(x) { return String(x || '').toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g, '').replace(/^(parroquia|municipio|estado|distrito)\s+/, '').replace(/[^a-z0-9]+/g, ' ').trim(); }
function selPorTexto(sel, texto) {
  var n = normTxt(texto); if (!n) return false;
  for (var i = 0; i < sel.options.length; i++) { var o = sel.options[i]; if (o.value && o.value !== '__OTRA__' && normTxt(o.value) === n) { sel.value = o.value; return true; } }
  return false;
}
// Coincidencia parcial ÚNICA (p. ej. OSM «Guanape» ↔ catálogo «Valle de Guanape»); si es ambigua no se elige ninguna.
function selPorParcial(sel, texto) {
  var n = normTxt(texto); if (n.length < 4) return false; var hit = null, cnt = 0;
  for (var i = 0; i < sel.options.length; i++) { var o = sel.options[i]; if (!o.value || o.value === '__OTRA__') continue; var m = normTxt(o.value); if (m.indexOf(n) >= 0 || n.indexOf(m) >= 0) { hit = o; cnt++; } }
  if (cnt === 1) { sel.value = hit.value; return true; } return false;
}
// Detección automática de Estado/Municipio (servidor, offline, por coordenadas) y Parroquia (OpenStreetMap, desde el navegador).
var AUTOUBI_EN_CURSO = false;
function autoDetectarUbicacion() {
  var msg = document.getElementById('txt_autoubi');
  if (AUTOUBI_EN_CURSO) return; AUTOUBI_EN_CURSO = true;
  if (!navigator.geolocation) { msg.textContent = 'Su navegador no permite detectar la ubicación — elija manualmente.'; AUTOUBI_EN_CURSO = false; return; }
  msg.textContent = '📡 Detectando su ubicación…';
  navigator.geolocation.getCurrentPosition(function (pos) {
    GPS_CAPTURADO = { lat: pos.coords.latitude, lon: pos.coords.longitude, precision: pos.coords.accuracy };
    document.getElementById('txt_gps').textContent = '📍 Ubicación capturada (precisión ~' + Math.round(pos.coords.accuracy) + ' m).';
    var lat = pos.coords.latitude, lon = pos.coords.longitude;
    var pNom = fetch('https://nominatim.openstreetmap.org/reverse?format=jsonv2&zoom=14&addressdetails=1&accept-language=es&lat=' + lat + '&lon=' + lon)
      .then(function (r) { return r.json(); }).catch(function () { return null; });
    apiCall('ubicarCoordenadas', lat, lon).then(function (res) {
      var d = res && res.success && res.data;
      if (!d || !d.encontrado) { msg.textContent = 'No se pudo identificar la zona (¿fuera de Venezuela?) — elija manualmente.'; AUTOUBI_EN_CURSO = false; return; }
      if (d.cobertura && d.cobertura.ok === false) { msg.textContent = ''; AUTOUBI_EN_CURSO = false; Swal.fire({ icon: 'info', title: 'Fuera de la zona de cobertura', text: d.cobertura.mensaje, confirmButtonText: 'Entendido' }); return; }
      var selE = document.getElementById('ubi_estado'), selM = document.getElementById('ubi_municipio'), selP = document.getElementById('ubi_parroquia');
      selE.value = d.estado;
      return cargarMunicipiosRapido().then(function () {
        selM.value = d.municipio;
        return cargarParroquiasRapido();
      }).then(function () { return pNom; }).then(function (nom) {
        var parr = '';
        var a = (nom && nom.address) || {};
        // Solo se acepta una coincidencia REAL con el catálogo oficial de parroquias del municipio (nunca una zona aproximada).
        var cand = [a.city_district, a.suburb, a.village, a.town, a.hamlet, a.neighbourhood, a.quarter, a.city];
        var lista = [].filter.call(selP.options, function (o) { return o.value && o.value !== '__OTRA__'; });
        if (lista.length === 1 && !(d.cobertura && d.cobertura.hayInactivas)) { selP.value = lista[0].value; parr = selP.value; }   // municipio de una sola parroquia: es esa
        for (var i = 0; !parr && i < cand.length; i++) { if (cand[i] && selPorTexto(selP, cand[i])) { parr = selP.value; } }
        for (var j = 0; !parr && j < cand.length; j++) { if (cand[j] && selPorParcial(selP, cand[j])) { parr = selP.value; } }
        // lo que OSM llama barrio/urbanización sirve de pista para el Sector (el ciudadano lo corrige si no es)
        var sec = document.getElementById('ubi_sector'), pista = a.suburb || a.neighbourhood || a.quarter || a.hamlet || '';
        if (sec && !sec.value && pista && normTxt(pista) !== normTxt(parr)) sec.value = pista.replace(/^(Urbanización|Urb\.|Barrio|Sector)\s+/i, '');
        parroquiaCambio();
        msg.innerHTML = '✅ Detectado: <strong>' + d.estado + ' › ' + d.municipio + (parr ? ' › ' + (selP.value === '__OTRA__' ? document.getElementById('ubi_parroquia_otra').value : selP.value) : '') + '</strong>' + (parr ? '' : ' — <strong>seleccione su parroquia</strong> de la lista.') + ' Ahora escriba un punto de referencia.';
        AUTOUBI_EN_CURSO = false;
        setTimeout(function () { document.getElementById('ubi_referencia').focus(); }, 50);
      });
    }).catch(function (e) { console.error(e); msg.textContent = 'No se pudo detectar automáticamente — elija manualmente.'; AUTOUBI_EN_CURSO = false; });
  }, function (err) {
    msg.textContent = (err.code === err.PERMISSION_DENIED ? 'Ubicación no permitida — ' : 'No se pudo obtener la ubicación — ') + 'elija Estado, Municipio y Parroquia manualmente o toque «Usar mi ubicación».';
    AUTOUBI_EN_CURSO = false;
  }, { enableHighAccuracy: true, timeout: 12000, maximumAge: 30000 });
}

function cargarEstadosRapido() {
  var sel = document.getElementById('ubi_estado');
  return apiCall('getGeografiaUI').then(function (res) {
    var estados = (res && res.success && res.data && res.data.estados) ? res.data.estados : [];
    sel.innerHTML = '<option value="" disabled selected>Seleccione…</option>';
    estados.sort().forEach(function (e) { var o = document.createElement('option'); o.value = o.textContent = e; sel.appendChild(o); });
  }).catch(function (err) { sel.innerHTML = '<option value="">Error al cargar catálogo</option>'; console.error(err); });
}
function cargarMunicipiosRapido() {
  var estado = document.getElementById('ubi_estado').value;
  var selMun = document.getElementById('ubi_municipio'), selParr = document.getElementById('ubi_parroquia');
  selParr.innerHTML = '<option value="">Elija Municipio primero…</option>'; selParr.disabled = true;
  document.getElementById('ubi_parroquia_otra').style.display = 'none';
  if (!estado) { selMun.innerHTML = '<option value="">Elija Estado primero…</option>'; selMun.disabled = true; return Promise.resolve(); }
  selMun.innerHTML = '<option value="">Cargando…</option>'; selMun.disabled = true;
  return apiCall('getListaMunicipios', estado).then(function (municipios) {
    selMun.innerHTML = '<option value="" disabled selected>Seleccione…</option>';
    (municipios || []).sort().forEach(function (m) { var o = document.createElement('option'); o.value = o.textContent = m; selMun.appendChild(o); });
    selMun.disabled = false;
  }).catch(function (err) { selMun.innerHTML = '<option value="">Error al cargar</option>'; console.error(err); });
}
function cargarParroquiasRapido() {
  var estado = document.getElementById('ubi_estado').value, municipio = document.getElementById('ubi_municipio').value;
  var selParr = document.getElementById('ubi_parroquia');
  if (!estado || !municipio) { selParr.innerHTML = '<option value="">Elija Municipio primero…</option>'; selParr.disabled = true; return Promise.resolve(); }
  selParr.removeAttribute('data-sin-lista'); selParr.style.display = '';
  selParr.innerHTML = '<option value="">Cargando…</option>'; selParr.disabled = true;
  return apiCall('getListaParroquias', estado, municipio).then(function (parroquias) {
    selParr.innerHTML = '<option value="" disabled selected>Seleccione…</option>';
    (parroquias || []).sort().forEach(function (p) { var o = document.createElement('option'); o.value = o.textContent = p; selParr.appendChild(o); });
    var oo = document.createElement('option'); oo.value = '__OTRA__'; oo.textContent = (parroquias && parroquias.length) ? 'Otra / no aparece en la lista' : 'Escribir parroquia'; selParr.appendChild(oo);
    selParr.disabled = false;
    selParr.setAttribute('data-sin-lista', (!parroquias || !parroquias.length) ? '1' : '0');
    if (!parroquias || !parroquias.length) { selParr.value = '__OTRA__'; }
    parroquiaCambio();
  }).catch(function (err) { selParr.innerHTML = '<option value="">Error al cargar</option>'; console.error(err); });
}

var GPS_CAPTURADO = null;
function capturarGPS() { AUTOUBI_EN_CURSO = false; autoDetectarUbicacion(); }
function capturarGPSSimple() {
  var txt = document.getElementById('txt_gps');
  if (!navigator.geolocation) { txt.innerHTML = 'Su navegador no soporta GPS — puede seguir solo con el punto de referencia.'; return; }
  txt.textContent = 'Obteniendo su ubicación…';
  navigator.geolocation.getCurrentPosition(function (pos) {
    GPS_CAPTURADO = { lat: pos.coords.latitude, lon: pos.coords.longitude, precision: pos.coords.accuracy };
    txt.textContent = '📍 Ubicación capturada (precisión ~' + Math.round(pos.coords.accuracy) + ' m).';
  }, function (err) {
    // CORRECCIÓN: "denegado" sin que el navegador vuelva a preguntar no
    // es un bug de esta página — es el propio navegador recordando una
    // respuesta anterior (si antes se tocó "Bloquear" alguna vez para
    // este sitio, o el sistema operativo tiene la ubicación desactivada
    // para el navegador). Ningún código puede volver a forzar el cartel
    // de permiso una vez que el navegador ya "recuerda" una decisión —
    // solo se puede reintentar (por si cambia) y explicar cómo
    // restablecerlo a mano.
    if (err.code === err.PERMISSION_DENIED) {
      txt.innerHTML = '📍 Ubicación bloqueada para este sitio. Para habilitarla: toque el ícono de candado/información junto a la dirección del navegador → Permisos → Ubicación → Permitir, y presione "Reintentar". Mientras tanto puede seguir solo con el punto de referencia.'
        + '<br><button type="button" class="btn-gps" style="margin-top:6px;" onclick="capturarGPS()"><i class="fa-solid fa-rotate-right"></i> Reintentar</button>';
    } else {
      txt.innerHTML = 'No se pudo obtener el GPS (' + err.message + ') — puede seguir solo con el punto de referencia. <button type="button" class="btn-gps" style="margin-left:6px;" onclick="capturarGPS()"><i class="fa-solid fa-rotate-right"></i> Reintentar</button>';
    }
  }, { enableHighAccuracy: true, timeout: 10000 });
}

function confirmarUbicacion() {
  var estado = document.getElementById('ubi_estado').value;
  var municipio = document.getElementById('ubi_municipio').value;
  var parroquia = document.getElementById('ubi_parroquia').value;
  if (parroquia === '__OTRA__') parroquia = document.getElementById('ubi_parroquia_otra').value.trim();
  var referencia = document.getElementById('ubi_referencia').value.trim();
  var sector = document.getElementById('ubi_sector').value.trim(), zona = document.getElementById('ubi_zona').value.trim(), nota = document.getElementById('ubi_nota').value.trim();
  if (!estado || !municipio || !parroquia) { Swal.fire('Falta un dato', 'Indique Estado, Municipio y Parroquia (escríbala si no aparece en la lista).', 'warning'); return; }
  if (!referencia) { Swal.fire('Falta un dato', 'Describa un punto de referencia (aunque sea breve).', 'warning'); return; }

  CONTACTO_TELEFONO = document.getElementById('ubi_telefono').value.trim();
  CONTACTO_CORREO = document.getElementById('ubi_correo').value.trim();

  UBICACION_CONFIRMADA = {
    estado: estado, municipio: municipio, parroquia: parroquia,
    referencia: referencia, sector: sector, zona: zona, nota: nota,
    lat: GPS_CAPTURADO ? GPS_CAPTURADO.lat : null, lon: GPS_CAPTURADO ? GPS_CAPTURADO.lon : null,
    precision: GPS_CAPTURADO ? GPS_CAPTURADO.precision : null
  };
  cerrarModalUbicacion();
  document.getElementById('btn_ubicacion').classList.add('completo');
  document.getElementById('txt_ubicacion').textContent = parroquia.toUpperCase() + (GPS_CAPTURADO ? ' · GPS ✓' : '');
  actualizarBotonEnviar();
}

function actualizarBotonEnviar() {
  document.getElementById('btn_enviar').disabled = !(TIPO_SELECCIONADO && UBICACION_CONFIRMADA);
}

// ── Envío ──────────────────────────────────────────────────────────
function construirDescripcionAutomatica() {
  var etiquetasTiempo = { AHORA: 'Ocurriendo ahora', YA_SUCEDIO: 'Ya sucedió' };
  var base = 'Reporte vía Registro Rápido — ' + LABEL_SELECCIONADO + '. Gravedad ' + GRAVEDAD_SELECCIONADA + '. '
    + etiquetasTiempo[TIEMPO_SELECCIONADO] + '.';
  if (AGENCIAS_SELECCIONADAS.length) base += ' Instituciones sugeridas por el ciudadano: ' + AGENCIAS_SELECCIONADAS.join(', ') + '.';
  return base;
}

function enviarReporteRapido() {
  if (!TIPO_SELECCIONADO || !UBICACION_CONFIRMADA) { actualizarBotonEnviar(); return; }

  var payload = {
    institucionesSolicitadas: AGENCIAS_CODIGOS.slice(),
    esAnonimo: true, // ver nota de cabecera, punto 6 — Registro Rápido siempre anónimo (el nombre real nunca se pide, aunque deje teléfono/correo abajo)
    hecho: {
      fecha: new Date().toISOString(),
      tipo: TIPO_SELECCIONADO,
      gravedad: GRAVEDAD_SELECCIONADA,
      descripcion: construirDescripcionAutomatica() + (UBICACION_CONFIRMADA.nota ? ' Nota del reportante: ' + UBICACION_CONFIRMADA.nota : '')
    },
    ubicacion: {
      estado: UBICACION_CONFIRMADA.estado, municipio: UBICACION_CONFIRMADA.municipio, parroquia: UBICACION_CONFIRMADA.parroquia,
      // sector/calle/referencia comprimidos a 1 solo campo — ver nota de cabecera, punto 5
      sector: UBICACION_CONFIRMADA.sector || UBICACION_CONFIRMADA.referencia, zona: UBICACION_CONFIRMADA.zona, calle: UBICACION_CONFIRMADA.referencia, referencia: UBICACION_CONFIRMADA.referencia,
      lat: UBICACION_CONFIRMADA.lat, lon: UBICACION_CONFIRMADA.lon, precision: UBICACION_CONFIRMADA.precision
    },
    // Contacto opcional (a pedido) — NO identifica a la persona (no se
    // pide nombre), solo deja un teléfono/correo por si hace falta una
    // pregunta puntual. nombreAlias es necesario para que el backend no
    // descarte esta entrada (_construirArregloPersonas exige nombre O
    // alias) — sigue protegido por la misma redacción de siempre, solo
    // lo ve quien tenga el permiso de atención a víctimas.
    personas: (CONTACTO_TELEFONO || CONTACTO_CORREO) ? [{ rol: 'REPORTANTE', nombreAlias: 'Reportante (Registro Rápido, anónimo)', telefono: CONTACTO_TELEFONO, email: CONTACTO_CORREO }] : []
  };

  var btn = document.getElementById('btn_enviar');
  btn.disabled = true; btn.textContent = 'ENVIANDO…';
  apiCall('enviarReporteCiudadano', payload).then(function (resp) {
    if (!resp || !resp.success) {
      btn.disabled = false; btn.textContent = 'ENVIAR REPORTE YA';
      Swal.fire('No se pudo registrar', (resp && resp.error) || 'Intente nuevamente.', 'error');
      return;
    }
    var urlSeg = resp.data.seguimientoToken ? '/seguimiento/' + resp.data.seguimientoToken : '';
    try { if (urlSeg) localStorage.setItem('sgm_seguimiento', JSON.stringify({ codigo: resp.data.codigo, url: urlSeg, ts: Date.now() })); } catch (e) {}
    Swal.fire({
      icon: 'success', title: 'Reporte registrado', allowOutsideClick: false,
      confirmButtonText: 'Ver estado de mi caso en tiempo real', showDenyButton: true, denyButtonText: 'Finalizar y cerrar',
      html: (resp.data.vinculado ? '<p style="margin:0 0 8px">' + resp.data.mensaje + '</p>' : '') + 'Su número: <strong>' + resp.data.codigo + '</strong><br>PIN: <strong>' + resp.data.pin + '</strong>'
        + '<br><small>Las instituciones le confirmarán cuando vayan en camino, estén en el sitio y finalicen. Guarde el caso y el PIN.</small>',
      preConfirm: function () { if (urlSeg) { var w = null; try { w = window.open(urlSeg, '_blank'); } catch (e) {} if (!w) { window.location.href = urlSeg; return false; } } }
    }).then(function () { limpiarFormularioCompleto(); iniciarFranjaReporte(); franjaActualizar(); });
  }).catch(function (err) {
    btn.disabled = false; btn.textContent = 'ENVIAR REPORTE YA';
    Swal.fire('Error de conexión', err.message, 'error');
  });
}

/**
 * CORRECCIÓN: usaba window.location.reload() — dentro del sandbox de
 * iframe donde Apps Script sirve HtmlService, recargar la ubicación
 * de la propia página (en vez de la del padre) puede dejar la pantalla
 * en blanco (no vuelve a pasar por doGet correctamente). Se reemplaza
 * por un reset completo en memoria: mismo resultado que el usuario
 * necesitaba (formulario limpio, listo para el próximo reporte) sin
 * ninguna navegación de por medio.
 */
function limpiarFormularioCompleto() {
  // Tipo de incidente
  document.querySelectorAll('.incident-btn.selected').forEach(function (b) { b.classList.remove('selected'); });
  TIPO_SELECCIONADO = null; LABEL_SELECCIONADO = null;

  // Agencias sugeridas
  document.querySelectorAll('.agency-btn.seleccionada').forEach(function (b) { b.classList.remove('seleccionada'); });
  AGENCIAS_SELECCIONADAS = []; AGENCIAS_CODIGOS = [];
  aplicarFiltroPorAgencias(); // sin nada marcado, esto vuelve a mostrar todos los tipos

  // Gravedad y tiempo — vuelven a su valor por defecto (CRÍTICO / AHORA),
  // mismo estado con el que carga la página la primera vez.
  document.querySelectorAll('.severity-btn').forEach(function (b) { b.classList.toggle('active', b.dataset.gravedad === 'CRITICO'); });
  document.querySelectorAll('.toggle-btn').forEach(function (b) { b.classList.toggle('active', b.dataset.tiempo === 'AHORA'); });
  GRAVEDAD_SELECCIONADA = 'CRITICO'; TIEMPO_SELECCIONADO = 'AHORA';

  // Ubicación
  UBICACION_CONFIRMADA = null; GPS_CAPTURADO = null;
  document.getElementById('btn_ubicacion').classList.remove('completo');
  document.getElementById('txt_ubicacion').textContent = 'UBICACIÓN';
  document.getElementById('ubi_referencia').value = '';
  ['ubi_sector', 'ubi_zona', 'ubi_nota'].forEach(function (id) { document.getElementById(id).value = ''; });
  document.getElementById('txt_gps').textContent = 'Sin coordenadas GPS todavía (opcional, ayuda a ubicar más rápido).';
  // Contacto opcional
  CONTACTO_TELEFONO = ''; CONTACTO_CORREO = '';
  document.getElementById('ubi_telefono').value = ''; document.getElementById('ubi_correo').value = '';
  // Los <select> de Estado/Municipio/Parroquia se dejan con su última
  // selección — es común que el próximo reporte sea de la misma zona,
  // y GEO_CARGADO sigue en true, así que no hace falta recargarlos.

  // Botón de envío
  var btn = document.getElementById('btn_enviar');
  btn.disabled = true; btn.textContent = 'ENVIAR REPORTE YA';
}
</script>

</body>
</html>