Prompt Guía para IA

Copia este prompt para iniciar nuevos proyectos con estas reglas estrictas.

Antes de empezar, analiza mi design system en:
https://muni-surco.github.io/Design-system-C4-MSS/

Extrae tokens de color, tipografía (Chivo), espaciados, íconos, componentes y patrones visuales. Úsalos como guía estricta para todo lo que construyamos. No uses otros estilos ni componentes externos que no estén en el design system.

Proyecto a construir: [describe aquí tu nueva app]
Tokens de Diseño

Colores

Paleta Principal

Primary
#005ea5
P. Dark
#003D6B
P. Light
#E6EEF5
Secondary
#00C9A7
Sec. Dark
#00A88A
Sec. Light
#E0FAF5
Accent
#F5A623

Estados

Danger
#E03E3E
Warning
#F5A623
Success
#27AE60
Info
#2F80ED

Neutros

900
#1A1A2E
700
#4A4A6A
500
#8888AA
300
#D0D5E8
100
#F4F6FB

Tipografía

Font: Chivo — Tipografía corporativa moderna.

3xl / 700 · 38px
Seguridad Ciudadana
2xl / 700 · 30px
Panel de Incidentes
xl / 700 · 24px
Reporte Semanal
lg / 600 · 20px
Unidades Serenazgo
base / 400 · 15px
Texto de cuerpo principal para interfaces.
sm / 400 · 13px
Texto secundario, metadatos, descripciones.
xs UPPER / 11px
Etiquetas de sección

Espaciado & Border Radius

4px
8px
12px
16px
24px
32px
48px

Border Radius

4px sm
8px md
12px lg
16px xl
full pill

Íconos — Lucide

Librería recomendada: Lucide Icons — Open source, MIT license, más de 1,400 íconos de trazo consistente. Ideal para dashboards operativos internos.

<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script> Agregar en el <head> de tu app
<i data-lucide="shield"></i> lucide.createIcons() ↗ Ver todos los íconos

Tamaños & Stroke

16px
20px
24px
32px
40px
stroke 1
stroke 1.5
stroke 2 ✓
stroke 2.5

Colores de Estado

Danger
Warning
Success
Info
Primary
Secondary
Muted

Íconos para Seguridad Ciudadana

Operaciones
shield
shield-alert
shield-check
shield-off
siren
alert-triangle
alert-circle
alert-octagon
flag
flag-triangle
radio-tower
zap
Personas & Agentes
user
user-check
user-x
user-plus
users
users-round
contact
badge
id-card
handshake
person-standing
bot
Mapas & Ubicación
map-pin
map-pin-off
map
navigation
navigation-2
compass
locate
locate-fixed
globe
milestone
route
waypoints
Vehículos & Movilidad
car
car-front
truck
bike
ambulance
bus
fuel
traffic-cone
circle-parking
camera
cctv
walkie-2
UI & Acciones
search
filter
sliders-h
plus
plus-circle
pencil
trash-2
eye
eye-off
download
upload
share-2
copy
check
check-circle
x
x-circle
more-h
more-v
external-link
log-out
settings
settings-2
menu
Datos & Reportes
bar-chart-2
bar-chart-3
line-chart
pie-chart
trending-up
trending-down
clipboard-list
file-text
file-check
file-x
folder
database
table-2
list
dashboard
calendar
clock
history
activity
workflow
Comunicación
bell
bell-ring
bell-off
message-circle
message-square
mail
phone
phone-call
radio
wifi
wifi-off
send

Íconos en Botones

Íconos con Badges de Estado

Alta prioridad
GPS activo
Sin señal
Alerta activa
En servicio

Tokens de Diseño CSS

Copia estas variables al inicio de tu proyecto para mantener consistencia en todas las apps.

/* ─────────────────────────────────────────── */ /* Design System · Municipalidad de Surco */ /* Seguridad Ciudadana · v1.0 · 2026 */ /* ─────────────────────────────────────────── */ :root { /* Brand */ --color-primary: #005ea5; --color-primary-dark: #003D6B; --color-primary-light: #E6EEF5; --color-secondary: #00C9A7; --color-secondary-dark: #00A88A; --color-accent: #F5A623; /* Status */ --color-danger: #E03E3E; --color-warning: #F5A623; --color-success: #27AE60; --color-info: #2F80ED; /* Neutrals */ --gray-900: #1A1A2E; --gray-700: #4A4A6A; --gray-500: #8888AA; --gray-300: #D0D5E8; --gray-100: #F4F6FB; /* Font */ --font: 'Segoe UI', system-ui, -apple-system, sans-serif; /* Type Scale */ --text-xs:11px; --text-sm:13px; --text-base:15px; --text-md:17px; --text-lg:20px; --text-xl:24px; --text-2xl:30px; --text-3xl:38px; /* Spacing (base 4px) */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; /* Border Radius */ :12px; --r-xl:16px; --r-full:9999px; /* Shadows */ --shadow-sm:0 1px 3px rgba(0,0,0,.08); --shadow-md:0 4px 12px rgba(0,0,0,.10); --shadow-lg:0 8px 24px rgba(0,0,0,.12); }
Componentes Atómicos

Botones

Variantes
<!-- Variantes de botón --> <button class="btn bp bmd">Nuevo Incidente</button> <button class="btn bse bmd">Ver Reportes</button> <button class="btn bo bmd">Exportar</button> <button class="btn bg2 bmd">Cancelar</button> <button class="btn bda bmd">Eliminar</button> <!-- bp=primary bse=secondary bo=outline bg2=ghost bda=danger bwa=warning -->
Tamaños
<button class="btn bp bsm">Pequeño</button> <button class="btn bp bmd">Mediano</button> <button class="btn bp blg">Grande</button> <!-- bsm=small bmd=medium blg=large -->
Con Ícono
<button class="btn bp bmd"> <i data-lucide="plus" style="width:15px;height:15px;stroke:white; stroke-width:2.5;fill:none;flex-shrink:0"></i> Registrar </button> <button class="btn bda bmd" style="padding:9px 12px"> <i data-lucide="trash-2" style="width:15px;height:15px;stroke:white; stroke-width:2;fill:none;flex-shrink:0"></i> </button>

Badges & Chips

Badges de Estado
Activo Crítico Pendiente En proceso Cerrado Nuevo
<span class="bdg dok"><span class="dot"></span>Activo</span> <span class="bdg dng"><span class="dot"></span>Crítico</span> <span class="bdg dwn"><span class="dot"></span>Pendiente</span> <span class="bdg dinf"><span class="dot"></span>En proceso</span> <span class="bdg dnt"><span class="dot"></span>Cerrado</span> <span class="bdg dpr">Nuevo</span> <!-- dok=ok/danger dng=danger dwn=warning dinf=info dnt=neutral dpr=primary -->
Chips / Categorías
Robo Vehículos Ruidos Ambiente Urgente Invasión
<span class="chip"> <i data-lucide="siren" style="width:13px;height:13px;stroke:var(--g7); stroke-width:2;fill:none;flex-shrink:0"></i> Robo </span> <span class="chip"> <i data-lucide="car" style="width:13px;height:13px;stroke:var(--g7); stroke-width:2;fill:none;flex-shrink:0"></i> Vehículos </span>

Avatares

JP ML CR TS AD
<span class="av avsm" style="background:var(--cs)">JP</span> <span class="av avmd" style="background:var(--cpd)">ML</span> <span class="av avlg" style="background:var(--cd)">CR</span> <span class="av avlg" style="background:var(--ca)">TS</span> <span class="av avmd" style="background:var(--g7)">AD</span> <!-- avsm=28px avmd=38px avlg=52px --> <!-- Color de fondo con style="background:..." -->

Inputs & Forms

Inputs Estándar
DNI debe tener 8 dígitos.
<!-- Input estándar --> <div class="iw"> <label class="il">Nombre Agente <span>*</span></label> <input class="inp" type="text" placeholder="Ej: Juan Pérez" /> </div> <!-- Select --> <div class="iw"> <label class="il">Zona</label> <select class="sel"> <option>Seleccionar...</option> </select> </div> <!-- Input con error --> <input class="inp err" type="text" value="12345" /> <span class="ih err">DNI debe tener 8 dígitos.</span> <!-- Input group (botón + input) --> <div class="ig"> <input class="inp" type="text" placeholder="Nro. o descripción..." /> <button class="btn bp bmd">Buscar</button> </div> <!-- Textarea --> <textarea class="inp" rows="3" style="resize:vertical" placeholder="Descripción..."></textarea> <!-- Date con ícono --> <div class="inp-date-wrap"> <i data-lucide="calendar" class="inp-date-icon"></i> <input type="date" class="inp" /> </div>

Date Range Picker

→

Multiselect & Autocomplete

Seleccionar zonas...
Buscar agente por nombre...

File Upload

Haz clic o arrastra archivos aquí
Soporta imágenes, PDF y documentos (Máx. 10MB)
reporte_incidente_surco.pdf
2.4 MB · Completado

Signature Pad

Validación de Campos
El nombre debe tener al menos 10 caracteres.
<!-- Validación con error --> <div class="iw"> <label class="il">Nombre</label> <input type="text" class="inp is-invalid" value="Juan" /> <div class="invalid-feedback"> <i data-lucide="alert-circle" style="width:12px"></i> El nombre debe tener al menos 10 caracteres. </div> </div> <!-- .is-invalid = borde rojo + focus rojo .is-valid = borde verde + focus verde .invalid-feedback se muestra con CSS -->

Alertas

Alerta Alta PrioridadIncidente crítico en Av. Primavera.
AdvertenciaSin reporte de posición por 2 horas.
ResueltoCaso cerrado satisfactoriamente.
InformaciónMantenimiento programado sábado.
<div class="al ang"> <div class="al-i"> <i data-lucide="shield-alert" style="width:20px;height:20px;stroke:var(--cd); stroke-width:2;fill:none;flex-shrink:0"></i> </div> <div><strong>Alerta Alta Prioridad</strong> Incidente crítico en Av. Primavera. </div> </div> <!-- Variantes de alerta: ang = danger (rojo) awn = warning (amarillo) aok = success (verde) ainf = info (azul) --> <div class="al awn">...</div> <div class="al aok">...</div> <div class="al ainf">...</div>

Toggle / Switch

Control para activar o desactivar configuraciones del sistema. Disponible en tres tamaños y con estado deshabilitado.

Tamaños
Small
Medium
Large
Disabled
<!-- Small --> <label class="tg2 tg-sm"> <input type="checkbox" checked> <span class="tsl2"></span> </label> <!-- Medium (default) --> <label class="tg2"> <input type="checkbox" checked> <span class="tsl2"></span> </label> <!-- Large --> <label class="tg2 tg-lg"> <input type="checkbox" checked> <span class="tsl2"></span> </label> <!-- Disabled --> <label class="tg2"> <input type="checkbox" disabled> <span class="tsl2"></span> </label>
Toggle Cards — Con descripción
Alertas sonoras
Reproduce un sonido al recibir nuevos incidentes críticos.
Rastreo GPS en tiempo real
Actualiza la posición de las unidades cada 30 segundos.
Modo oscuro
Cambia la interfaz a tema oscuro para turnos nocturnos.
<div class="tg-card"> <div class="tg-info"> <div class="tg-title"> <i data-lucide="bell" style="width:15px;height:15px"></i> Alertas sonoras </div> <div class="tg-desc"> Reproduce un sonido al recibir incidentes. </div> </div> <label class="tg2"> <input type="checkbox" checked> <span class="tsl2"></span> </label> </div>

Toggle en línea — Inline

Notificaciones activas
Modo nocturno
GPS habilitado
Reportes automáticos
Componentes Compuestos

Cards & Stats

Card Estándar
Reporte DiarioAl día

Se atendieron 14 incidentes en el turno nocturno.

Actualizado: hoy 06:45 AM
<div class="card"> <div class="ch2"> <span class="cht">Reporte Diario</span> <span class="bdg dok"> <span class="dot"></span>Al día </span> </div> <div class="cb"> <p>Se atendieron <strong>14 incidentes</strong>.</p> </div> <div class="cf">Actualizado: hoy 06:45 AM</div> </div> <!-- ch2=card header cht=card header title cb=card body cf=card footer -->
Cards KPI
142
Incidentes mes
↑ 8%
28
Agentes activos
↑ 3 nuevos
<div class="sc2"> <div class="si t"> <i data-lucide="siren" style="width:22px;height:22px;stroke:var(--cpd); stroke-width:2;fill:none"></i> </div> <div> <div class="sv">142</div> <div class="sl">Incidentes mes</div> <div class="str up">↑ 8%</div> </div> </div> <!-- sc2=stat card si t=icon primary si n=icon secondary si r=icon danger si a=icon accent sv=stat value sl=stat label str.up=trend up str.dn=trend down -->

Tablas

N° Caso Tipo Zona Hora Agente Prioridad Estado Acciones
#2026-0041 Vehículo sospechoso Norte 08:32
JPJ. Pérez
 Alta Pendiente
#2026-0040 Ruidos molestos Sur 07:15
MLM. López
Media En proceso
#2026-0039 Robo transeúnte Centro 06:50
CRC. Ríos
 Alta Resuelto
<div class="tw wf"> <table> <thead> <tr> <th>N° Caso</th> <th>Tipo</th> <th>Estado</th> </tr> </thead> <tbody> <tr> <td><code>#2026-0041</code></td> <td>Vehículo sospechoso</td> <td><span class="bdg dng"> <span class="dot"></span>Alta </span></td> <td><span class="bdg dwn"> <span class="dot"></span>Pendiente </span></td> </tr> </tbody> </table> </div>

Tabs

Activos
Pendientes
Resueltos
Archivados
Contenido de la pestaña seleccionada...
<div class="tabs"> <div class="tab act">Activos</div> <div class="tab">Pendientes</div> <div class="tab">Resueltos</div> <div class="tab">Archivados</div> </div> <!-- .act = tab activo -->

Accordion

Agrupa contenido colapsable para mostrar información progresivamente. Ideal para FAQs, procedimientos y configuración.

Accordion Estándar
Protocolo ante robo a transeúnte
Pasos obligatorios del agente de serenazgo
  1. Garantizar la seguridad del denunciante y del área.
  2. Registrar el incidente en el sistema con ubicación exacta.
  3. Solicitar refuerzos si el sospechoso sigue en la zona.
  4. Coordinar con la comisaría más cercana y trasladar al afectado.
  5. Completar el parte policial antes de finalizar el turno.
Configuración de zonas de cobertura
Define los sectores asignados por turno

Cada zona se puede configurar con su área geográfica, número mínimo de unidades y horario de cobertura. Los cambios entran en vigencia en el siguiente turno programado.

Zona NorteZona SurZona CentroZona Este
Generación de reportes y estadísticas
Exporta datos del turno en PDF o Excel

Los reportes incluyen total de incidentes, tiempo promedio de respuesta, agentes activos y cobertura por zona. Se generan automáticamente al cierre de cada turno.

Preguntas frecuentes del sistema
Soporte técnico y dudas operativas

Para soporte técnico contacta al área de TI al interno 1234 o escribe a [email protected]. El horario de atención es de lunes a viernes de 8am a 6pm.

<div class="acc-wrap wf"> <div class="acc-item"> <div class="acc-header open" onclick="toggleAcc(this)"> <div class="acc-icon-wrap" style="background:var(--cpl)"> <i data-lucide="siren"></i> </div> <div class="acc-label"> <div class="acc-title">Título</div> <div class="acc-sub">Subtítulo</div> </div> <svg class="acc-chevron">...</svg> </div> <div class="acc-body open"> <div class="acc-body-inner"> Contenido colapsable aquí... </div> </div> </div> </div> <!-- .open = contenido expandido onclick="toggleAcc(this)" en .acc-header -->
Accordion Minimal — Sin íconos
¿Cómo registrar un incidente?
Usa el botón + Nuevo en la barra superior o accede a Incidentes → Registrar. Completa todos los campos obligatorios marcados con asterisco.
¿Cómo asignar un agente a un caso?
Abre el incidente y selecciona el botón Asignar. El sistema mostrará los agentes disponibles en la zona. La asignación se notifica automáticamente al agente.
¿Qué significa cada nivel de prioridad?
Alta Riesgo inmediato — responder en menos de 5 min.  Media Situación controlable — atender en 20 min.  Baja Sin urgencia — resolver en el turno.
<div class="acc-wrap wf"> <div class="acc-item"> <div class="acc-header open" onclick="toggleAcc(this)" style="padding:var(--s3) var(--s4)"> <div class="acc-label"> <div class="acc-title" style="font-size:var(--tsm)"> ¿Pregunta? </div> </div> <svg class="acc-chevron">...</svg> </div> <div class="acc-body open" style="padding:0 var(--s4) var(--s4)"> <div class="acc-body-inner" style="font-size:var(--tsm)"> Respuesta... </div> </div> </div> </div> <!-- Sin .acc-icon-wrap = variante minimal font-size:var(--tsm) para texto compacto -->

Breadcrumb

Indica la ubicación del usuario dentro de la jerarquía de la aplicación.

Estándar
Inicio › Incidentes › Caso #2026-0041
Dashboard / Agentes / Zona Norte / Juan Pérez
Configuración Zonas de cobertura Zona Centro
<div class="bcr"> <i data-lucide="house"></i> <a href="#">Inicio</a> <span class="bcr-sep">›</span> <a href="#">Incidentes</a> <span class="bcr-sep">›</span> <span class="bcr-current">Caso #2026-0041</span> </div> <!-- .bcr = contenedor breadcrumb .bcr-sep = separador (› / ó SVG) .bcr-current = página actual -->
Variante Pill
› Reportes › Turno Mañana
Panel › Unidades › SER-04
<div class="bcr-pill"> <a href="#"><i data-lucide="house"></i></a> <span class="bcr-sep">›</span> <a href="#">Reportes</a> <span class="bcr-sep">›</span> <span class="bcr-current">Turno Mañana</span> </div> <!-- .bcr-pill = variante con bordes redondeados -->

Paginación

Navegación entre páginas de tablas y listados de incidentes.

Estándar
…
Mostrando 1–10 de 142 resultados
<div class="pgn"> <button class="pgn-btn" disabled>‹</button> <button class="pgn-btn act">1</button> <button class="pgn-btn">2</button> <button class="pgn-btn">3</button> <span class="pgn-ellipsis">…</span> <button class="pgn-btn">12</button> <button class="pgn-btn">›</button> </div> <span class="pgn-info">Mostrando 1–10 de 142</span> <!-- .act = página activa .pgn-sm = variante compacta disabled = botón deshabilitado -->

Modales

Modal Estándar

Modal Estándar

<div class="modal"> <div class="mh"> <h4>Modal Estándar</h4> <button class="mc">✕</button> </div> <div class="mb"> <div class="iw"> <label class="il">Título</label> <input class="inp" type="text" placeholder="..." /> </div> </div> <div class="mf"> <button class="btn bg2 bmd">Cerrar</button> <button class="btn bp bmd">Guardar</button> </div> </div> <!-- .mh = modal header .mc = close button .mb = modal body .mf = modal footer -->
Modal de Confirmación

Confirmar Eliminación

Usted está a punto de eliminar el registro #2026-0041. Esta acción es irreversible.

¿Desea continuar con la eliminación?

<div class="modal"> <div class="mh" style="background:var(--cd)"> <h4>Confirmar Eliminación</h4> <button class="mc">✕</button> </div> <div class="mb"> <p>¿Desea continuar?</p> </div> <div class="mf"> <button class="btn bg2 bmd">Cancelar</button> <button class="btn bda bmd">Eliminar</button> </div> </div> <!-- Cambia .mh background a var(--cd) para modal de peligro bda = botón de acción destructiva -->

Tooltip & Popover

Información contextual al hacer hover (tooltip) o clic (popover). Pasa el cursor sobre los elementos para verlos.

Tooltips — posiciones
Tooltip posición superior
Tooltip posición derecha
Tooltip posición inferior
Crítico
3 incidentes activos en zona norte
<div class="ttp-wrap"> <button class="btn bse bmd">Top</button> <div class="ttp">Tooltip texto</div> </div> <!-- .ttp-wrap = contenedor relativo .ttp = tooltip (default: top) .ttp-right = posición derecha .ttp-bottom = posición inferior -->
Popover
Juan Pérez — SER-04
JP
Juan Pérez
Serenazgo · Turno mañana
Zona Norte
Interno: 1204
Alerta crítica activa
Robo a transeúnte reportado en Av. Primavera.
<div class="pop-wrap"> <button class="btn bse bmd" onclick="togglePop('pop1')">Agente info</button> <div class="pop-box open" id="pop1"> <div class="pop-title">Título</div> <div class="pop-body">Contenido</div> <div class="pop-footer"> <button class="btn bp bsm">Acción</button> </div> </div> </div> <!-- .pop-wrap = contenedor relativo .pop-box = caja del popover .open = visible por defecto togglePop('id') para abrir/cerrar -->

Toast / Notificaciones

Mensajes emergentes que aparecen en esquina de pantalla. Se desvanecen automáticamente o el usuario los cierra.

Variantes
Incidente crítico registrado
Robo en Av. Primavera · Zona Norte
hace un momento
Caso cerrado exitosamente
#2026-0041 marcado como resuelto
hace 2 min
Unidad sin señal GPS
SER-07 no reporta posición
hace 5 min
Turno actualizado
Cambio de turno registrado a las 14:00
hace 8 min
<div class="toast-stack"> <div class="toast toast-danger"> <div class="toast-icon"> <i data-lucide="siren"></i> </div> <div class="toast-body"> <div class="toast-title">Título</div> <div class="toast-msg">Mensaje</div> <div class="toast-time">hace 2 min</div> </div> <button class="toast-close">×</button> </div> </div> <!-- toast-danger / toast-success / toast-warning / toast-info showToast(título, mensaje, tipo) para JS -->

Feedback UI

Toggle / Switch
Notificaciones
Modo nocturno
GPS habilitado
<div class="tgw"> <label class="tg"> <input type="checkbox" checked> <span class="tsl"></span> </label> <span style="font-size:var(--tsm)"> Notificaciones </span> </div> <!-- .tgw = toggle wrapper .tg = label del toggle .tsl = slider visual -->
Progress Bars
Resueltos91%
Cobertura zona65%
Alertas críticas28%
<div class="pw"> <div class="flex ic" style="justify-content:space-between;margin-bottom:4px"> <span>Resueltos</span> <strong>91%</strong> </div> <div class="pb2"> <div class="pf" style="width:91%;background:var(--cok)"></div> </div> </div> <!-- .pw = progress wrapper .pb2 = progress bar track .pf = progress fill (ajusta width%) -->
Skeleton Loading
<div class="skel" style="height:16px;width:60%"></div> <div class="skel" style="height:12px;width:80%"></div> <div class="skel" style="height:80px;width:100%;border-radius:var(--rmd)"></div> <!-- .skel = elemento skeleton animado Ajusta height/width según el contenido que reemplaza -->
Patrones

Patrón — Tarjeta de Incidente

Tarjeta de Incidente
#2026-0041 · hace 12 min
Vehículo sospechoso estacionado
Av. Primavera 1240, Zona Norte
AltaVehículos
JPJuan Pérez · SER-04
#2026-0040 · hace 45 min
Ruidos molestos nocturnos
Jr. Los Cóndores 456, Zona Sur
MediaRuidos
#2026-0038 · hace 2h
Desmonte en vía pública
Ca. Los Álamos 120, Zona Este
Resuelto
<div class="inc"> <div class="ip palt"></div> <div class="ib"> <div class="iid">#2026-0041 · hace 12 min</div> <div class="itit">Título</div> <div class="imet">Dirección</div> <div class="flex g2 mt2"> <span class="bdg dng">Alta</span> <span class="chip">Categoría</span> </div> </div> <button class="btn bp bsm">Asignar</button> </div> <!-- .inc = tarjeta incidente .ip = indicador de prioridad (palt/pmed/pbja) .ib = body del incidente .iid = id + timestamp .itit = título .imet = metadata (ubicación) -->

Timeline — Historial de Incidente

Secuencia cronológica de eventos de un caso de seguridad. Esencial para auditoría y seguimiento.

Timeline de Caso
08:32 AM — Hoy
Incidente registrado Alta
Se reportó vehículo sospechoso en Av. Primavera 1240.
SIS Sistema — Registro automático
08:35 AM — Hoy
Agente asignado En proceso
Unidad SER-04 asignada. ETA: 4 minutos.
09:10 AM — Hoy
Caso cerrado Resuelto
Vehículo sin antecedentes. Caso archivado.
<div class="tmln"> <div class="tmln-item"> <div class="tmln-dot dng"></div> <div class="tmln-time">08:32 AM</div> <div class="tmln-card"> <div class="tmln-header"> <span class="tmln-title">Título</span> <span class="bdg dng">Alta</span> </div> <div class="tmln-body">Descripción</div> <div class="tmln-actor"> <span class="av">SIS</span> Actor responsable </div> </div> </div> </div> <!-- .tmln-dot: dng=danger, dinf=info dwn=warning, dok=success, dnt=neutral -->

Stepper — Flujo de Registro

Guía al operador a través de un proceso de múltiples pasos. Ideal para registrar incidentes, crear reportes o configurar zonas.

Horizontal
Tipo
Completado
Ubicación
Completado
3
Agente
En progreso
4
Evidencia
Pendiente
5
Confirmar
Pendiente
Datos básicos
!
Validación
Error
3
Revisión
4
Envío
<div class="stp"> <div class="stp-item done"> <div class="stp-circle"> <i data-lucide="check"></i> </div> <div class="stp-label">Nombre</div> <div class="stp-sublabel">Estado</div> </div> <div class="stp-item active">...</div> <div class="stp-item">...</div> </div> <!-- .stp-item done = completado .stp-item active = en progreso .stp-item error = con error (sin clase) = pendiente -->
Vertical — Con contenido
Tipo de incidente
Vehículo sospechoso
Ubicación
Av. Primavera 1240, Zona Norte
3
Asignar agente
4
Evidencia fotográfica
Opcional — adjuntar imagen del incidente
5
Confirmar y registrar
Revisión final y envío al sistema
<div class="stp-v"> <div class="stp-v-item done"> <div class="stp-v-left"> <div class="stp-circle" style="width:32px;height:32px"> <i data-lucide="check"></i> </div> </div> <div class="stp-v-right"> <div class="stp-v-title">Título</div> <div class="stp-v-body">Contenido</div> </div> </div> </div> <!-- .stp-v = contenedor vertical .stp-v-left = columna del círculo .stp-v-right = columna de contenido .active en step muestra form/acción -->

Data Filter Bar

Barra de filtros avanzada para tablas de incidentes, agentes y reportes. Combina búsqueda libre con filtros contextuales.

Filter Bar completa
Zona
Estado
Filtros activos:
Zona Norte Alta prioridad
14 resultados
<div class="flt-bar"> <div class="flt-search"> <i data-lucide="search"></i> <input type="text" placeholder="Buscar..." /> </div> <div class="flt-divider"></div> <div class="flt-group"> <span class="flt-label">Zona</span> <select class="flt-sel">...</select> </div> <button class="btn bp bmd">Filtrar</button> </div> <div class="flex ic g3 fw"> <div class="flt-active-chips"> <span class="flt-chip">Filtro ×</span> </div> <span class="flt-results">14 resultados</span> </div> <!-- .flt-bar = barra de filtros .flt-search = campo de búsqueda .flt-group = grupo label+select .flt-chip = chip de filtro activo -->
Filter Bar compacta — Tabs + filtro
Todos
Activos
Pendientes
Resueltos
142 casos
<div class="flex ic g3 fw"> <div class="tabs" style="border-bottom:none;gap:var(--s1)"> <div class="tab act" style="border:1px solid var(--g3);border-radius:var(--rmd);margin:0"> Todos </div> <div class="tab" style="...">Activos</div> </div> <div class="flt-search">...</div> <select class="flt-sel">...</select> <span class="flt-results">142 casos</span> </div> <!-- Combina tabs de estado + búsqueda + filtro Variante compacta para espacios reducidos -->
Maquetaciones

Patrón — Mapa UI

Integrar con Leaflet.js o Google Maps API.

● Incidente activo ● Unidad en patrulla ● Zona de alerta ● Cámara vigilancia

Mapa interactivo — Santiago de Surco

Leaflet.js / Google Maps API

Widgets Estadísticos

Distribución de Recursos
100%
Serenos
Tránsito
Otros
Tendencia de Reportes
↑ 8%
Estado de Flota
Operativos85%
Mantenimiento10%
Fuera de Servicio5%

Dashboard Operaciones

14
Incidentes hoy
3
Críticos activos
12
Agentes activos
⏱
4.2m
T. respuesta
Incidentes Recientes
Vehículo sospechoso
Zona Norte · 12 min
Alta
Ruidos molestos
Zona Sur · 45 min
Media
Robo transeúnte
Zona Centro · 2h
Resuelto
Ver todos los incidentes →
Mapa en VivoEn línea

Santiago de Surco

Historial Detallado de Turno
Hora Evento / Actividad Agente Estado
08:45 Patrullaje Preventivo — Sector 4 J. Pérez Normal
08:12 Atención Incidente #2026-0041 M. López En proceso
07:55 Cambio de unidad — Central C. Ríos Finalizado
Ver historial completo →
Reporte Rápido de Incidente