Tren El Insurgente MANUAL DE IDENTIDAD
Sistema de Diseño v1.0
Banobras Fonadin
Ver Código
ESTÁNDAR OFICIAL DE DESARROLLO

Manual de Identidad Visual y Componentes

Guía técnica y sistema de diseño unificado para el Tren Interurbano México-Toluca "El Insurgente". Consolida los colores, alertas, tipografías, logotipos y bibliotecas requeridas para futuros desarrollos en PHP, Python, React, Angular y Node.js, con soporte nativo para Antigravity AI y Temas Día / Noche.

🎨 Paleta TIMT Oficial ☀️/🌙 Temas Día & Noche 🔔 SweetAlert2 v11 Integrado 🤖 Antigravity AI Ready (AGENTS.md) 📦 Demos Copiar y Pegar 🚀 Probar Mockup Vivo (Login & Portal) ↗
01

Logotipos Oficiales

Logotipos vectoriales y rasterizados extraídos del proyecto institucional Reunion_2026. Utilízalos siempre en su formato original y respetando las proporciones.

Logo El Insurgente
El Insurgente (Horizontal)
Formato: SVG Vectorial | Uso: Navbar y encabezados
Logo Circular
Emblema Circular TIMT
Formato: SVG Vectorial | Uso: Sellos, avatares, diplomas
Logo Banobras
Banobras Oficial
Formato: SVG Vectorial | Uso: Co-patrocinador en headers/footers
Logo Fonadin
FONADIN Oficial
Formato: SVG Vectorial | Uso: Co-patrocinador institucional
Logo Transparente
Logo Transparente HD
Formato: PNG Alta Resolución | Uso: Fondos oscuros/impresión
El Insurgente PNG
El Insurgente Compacto
Formato: PNG | Uso: Íconos y miniaturas
02

Paleta de Colores Institucional

Haz clic sobre cualquier muestra para copiar su código HEX y token CSS al portapapeles.

A. Petróleo Institucional (Color Primario)

PRIMARIO
Petróleo Institucional
#103e4d
var(--timt-primary)
HOVER
Petróleo Profundo
#0c2d38
var(--timt-primary-hover)
FOOTER
Petróleo Footer
#0d3b43
var(--timt-primary-dark)
MEDIO
Petróleo Acento
#15404d
var(--timt-primary-light)
BORDE
Petróleo Borde
#1a5965
var(--timt-primary-border)

B. Rojo / Guinda Institucional (Color Secundario y Énfasis)

VINO
Vino / Guinda Social
#8b2b2b
var(--timt-wine)
VINO OSCURO
Vino Alerta / Confirm
#80242b
var(--timt-wine-dark)
VINO HOVER
Vino Profundo Hover
#552826
var(--timt-wine-hover)
CARMÍN
Rojo Acento / Pulse
#b63f35
var(--timt-red-accent)
PELIGRO
Rojo Error / Cupo
#d93025
var(--timt-danger)

C. Fondo Crema Institucional y Superficies

FONDO OFICIAL
Crema Institucional
#f2e9d3
var(--timt-bg-cream)
DIVISOR
Borde Crema Sutil
#dcd4c6
var(--timt-border-cream)
SUPERFICIE
Blanco Tarjeta / Card
#ffffff
var(--timt-surface)
TEXTO
Texto Principal
#1a1a1a
var(--timt-text-main)
03

Tipografía y Jerarquía

Las fuentes tipográficas oficiales combinan modernidad, legibilidad y el carácter institucional del Estado de México y la CDMX.

1. Principal UI / Sans-Serif
'Montserrat', sans-serif (Google Fonts) — Pesos: 400, 600, 700, 800
El Insurgente — Tren Interurbano México-Toluca 2026
2. Títulos Solemnes / Serif Institucional
'Times New Roman', Georgia, serif — Títulos principales solemnes
El Insurgente — Tren Interurbano México-Toluca 2026
3. Display / Innovación Tecnológica
'Audiowide', cursive (Google Fonts) — Fechas, cifras clave y display
El Insurgente — Tren Interurbano México-Toluca 2026
4. Movilidad CDMX / Metro DF
'MovilidadIntegrada' & 'Metro-DF' (Archivos OTF/TTF locales en assets/fonts/)
El Insurgente — Tren Interurbano México-Toluca 2026
HTML: Vinculación de fuentes recomendada 
<!-- Fuentes Google Fonts en el <head> -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Audiowide&family=Montserrat:wght@400;600;700;800&display=swap" rel="stylesheet">

<!-- Hoja de estilos TIMT que declara @font-face para fuentes locales -->
<link rel="stylesheet" href="assets/css/timt-identity.css">
04

Sistema de Alertas & Notificaciones (SweetAlert2)

Estandarización obligatoria de alertas modales con SweetAlert2 v11 y el envoltorio institucional timt-alerts.js. Inspirado en la documentación oficial de SweetAlert2 Examples, cada caso a continuación incluye su botón interactivo ¡Pruébame! y la fracción exacta de código lista para copiar y pegar.

1. Mensaje Básico

Alerta informativa directa sin íconos decorativos para anuncios generales.

JAVASCRIPT 
Swal.fire({
  title: "El Insurgente",
  text: "Bienvenido al Sistema de Pasajeros del Tren Interurbano México-Toluca.",
  confirmButtonColor: "#103e4d"
});

2. Título con Ícono Informativo

Modal descriptivo con ícono oficial y texto aclaratorio para el usuario.

JAVASCRIPT 
Swal.fire({
  icon: "info",
  title: "¿Deseas consultar tu saldo TUMI?",
  text: "Acerca tu tarjeta de movilidad integrada al lector de torniquetes.",
  confirmButtonColor: "#103e4d"
});

3. Alerta de Éxito Institucional

Confirmación positiva estándar con botón Petróleo (#103e4d).

JAVASCRIPT (TIMTALERT WRAPPER) 
TimtAlert.success(
  "¡Operación Exitosa!",
  "Tu tarjeta de movilidad ha sido vinculada correctamente al sistema."
);

4. Advertencia y Cupo Limitado

Aviso de advertencia o cupos con botón Vino/Guinda institucional (#80242b).

JAVASCRIPT 
TimtAlert.warning(
  "¡Cupo Limitado!",
  "Quedan únicamente <b>5 lugares</b> disponibles para esta corrida."
);

5. Alerta de Error con Enlace al Pie

Modal de error crítico con enlace de soporte técnico en el footer.

JAVASCRIPT 
Swal.fire({
  icon: "error",
  title: "Error de Validación",
  text: "No se pudo sincronizar con el validador central.",
  footer: '<a href="#">¿Necesitas asistencia técnica de torniquetes?</a>',
  confirmButtonColor: "#d93025"
});

6. Diálogo de Confirmación (¿Estás seguro?)

Pregunta con dos botones ("Sí, confirmar" en Petróleo y "Cancelar" en Vino).

JAVASCRIPT (CON CALLBACKS) 
TimtAlert.confirm(
  "¿Desea cancelar el boleto?",
  "Esta acción liberará el asiento seleccionado para otro usuario.",
  () => TimtAlert.toast("success", "✓ Boleto cancelado y cupo liberado"),
  () => TimtAlert.toast("info", "Operación no realizada")
);

7. Diálogo con Tres Botones

Acciones múltiples: Guardar cambios, No guardar o Cancelar la operación.

JAVASCRIPT 
Swal.fire({
  title: "¿Deseas guardar los cambios del itinerario?",
  showDenyButton: true,
  showCancelButton: true,
  confirmButtonText: "Guardar",
  denyButtonText: "No guardar",
  cancelButtonText: "Cancelar",
  confirmButtonColor: "#103e4d",
  denyButtonColor: "#8b2b2b"
}).then((result) => {
  if (result.isConfirmed) Swal.fire("¡Guardado!", "", "success");
  else if (result.isDenied) Swal.fire("Cambios descartados", "", "info");
});

8. Contenido HTML Enriquecido

Modal con etiquetas HTML personalizadas, negritas y badges de estación.

JAVASCRIPT 
Swal.fire({
  title: "<strong>Estación <u>Metepec</u></strong>",
  icon: "info",
  html: `
    El siguiente convoy arriba en <b>4 minutos</b>.<br>
    <span class="timt-status-badge timt-status-resuelto">Vía 1: Despejada</span>
  `,
  confirmButtonText: "Ver Horarios",
  confirmButtonColor: "#103e4d"
});

9. Carga Asíncrona (Loading / AJAX)

Spinner animado no cerrable mientras se completa una petición HTTP.

JAVASCRIPT 
TimtAlert.loading("Sincronizando...", "Consultando telemetría de trenes en vía...");
setTimeout(() => {
  TimtAlert.close();
  TimtAlert.success("¡Sincronizado!", "7 trenes operando puntualmente.");
}, 2000);

10. Notificación Flotante (Toast)

Toast no intrusivo en esquina superior derecha con auto-cierre y barra de progreso.

JAVASCRIPT 
TimtAlert.toast("success", "✓ Datos sincronizados con el servidor central");

11. Emisión Oficial de Folio (Atención)

Genera ficha de folio con tipografía display y botón para copiar en un clic.

JAVASCRIPT (ATENCIÓN CIUDADANA) 
TimtAlert.ticketCreated("FE-132", "ciudadano@ejemplo.com");

12. Ficha Técnica de Estatus de Folio

Consulta de reporte de queja o sugerencia con desglose de coordinación técnica.

JAVASCRIPT 
TimtAlert.ticketStatus({
  folio: "QS-2026-089",
  estatus: "En Proceso",
  estacion: "Estación Metepec",
  fecha: "2026-10-27 10:15 hrs",
  coordinacion: "Gerencia de Operaciones y Seguimiento Ferroviario"
});

Banners Nativos en Línea (HTML / CSS Puro)

Para avisos permanentes o alertas contextuales dentro del cuerpo de la página sin bloquear la pantalla:

Operación Completada
Los cambios han sido guardados satisfactoriamente en la base de datos institucional.
¡Últimos Cupos Disponibles!
La actividad seleccionada cuenta con alta demanda y podría agotarse pronto.
Error en la Conexión
No se pudo validar el número de empleado en el sistema TIMT. Verifica tu número.
Información para Asistentes
El evento se llevará a cabo en los Talleres y Cocheras de Zinacantepec.
HTML: Banners Nativos en Línea 
<!-- Banner de Éxito -->
<div class="timt-alert timt-alert-success">
  <div class="timt-alert-content">
    <div class="timt-alert-title">Operación Exitosa</div>
    <div>Tus cambios han sido registrados.</div>
  </div>
  <button class="timt-alert-close" onclick="this.parentElement.remove()">&times;</button>
</div>

<!-- Banner de Advertencia -->
<div class="timt-alert timt-alert-warning">
  <div class="timt-alert-content">
    <div class="timt-alert-title">Advertencia</div>
    <div>Verifique los campos requeridos.</div>
  </div>
</div>
05

Componentes de Interfaz (UI)

Botones, tarjetas, badges pulsantes y controles de formulario diseñados con la identidad de El Insurgente.

Botones y Badges

Badges Institucionales:

Oficial ¡Últimos 3 lugares! 28 OCT 2026

Botones Sociales Oficiales:

Formulario de Entrada

HTML / CSS: Botones, Badges y Formularios TIMT 
<!-- Botones Oficiales -->
<button class="timt-btn timt-btn-primary">Botón Primario</button>
<button class="timt-btn timt-btn-secondary">Botón Secundario (Vino)</button>
<button class="timt-btn timt-btn-outline">Botón Contorno</button>
<button class="timt-btn timt-btn-danger">Botón Peligro</button>

<!-- Badges Institucionales -->
<span class="timt-badge timt-badge-petroleo">Oficial</span>
<span class="timt-badge-cupo">¡Últimos 3 lugares!</span>
<span class="timt-badge timt-badge-date">28 OCT 2026</span>

<!-- Control de Formulario Estilizado -->
<div class="timt-form-group">
  <label class="timt-label" for="txtNombre">Nombre Completo</label>
  <input type="text" id="txtNombre" class="timt-input" placeholder="Ingresa tu nombre...">
</div>
06

Guía de Implementación Multilenguaje

Selecciona tu lenguaje o framework para ver qué librerías instalar, cómo mandarlas a traer y el código listo para copiar y pegar.

Integración en PHP (Vanilla / Laravel / CodeIgniter)

Librerías Requeridas: SweetAlert2 (CDN o NPM) y Google Fonts.

php / header.php y alerta 
<?php
// 1. Incluir el CSS en el <head>
// <link rel="stylesheet" href="assets/css/timt-identity.css">
// <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
// <script src="assets/js/timt-alerts.js"></script>

// 2. Disparar alerta desde PHP tras procesar un formulario:
if ($registro_exitoso) {
    echo "<script>
        document.addEventListener('DOMContentLoaded', function() {
            TimtAlert.success('¡Registro Exitoso!', 'Tus datos fueron guardados.');
        });
    </script>";
}
?>
Archivo de plantilla completo: templates/php/index.php

Integración en Python (Flask / Django / FastAPI)

Librerías Requeridas: pip install flask (o django), SweetAlert2 v11 en plantilla base Jinja2.

python / app.py & base.html 
# app.py (Flask)
from flask import Flask, render_template, flash, redirect

app = Flask(__name__)
app.secret_key = 'timt_secreto'

@app.route('/guardar', methods=['POST'])
def guardar():
    # Enviar mensaje flash con la identidad TIMT
    flash({'type': 'success', 'title': '¡Guardado!', 'msg': 'Operación en Python finalizada.'})
    return redirect('/')

# En base.html (Jinja2):
# {% with messages = get_flashed_messages() %}
#   {% for m in messages %}
#     <script>TimtAlert.{{ m.type }}("{{ m.title }}", "{{ m.msg }}");</script>
#   {% endfor %}
# {% endwith %}
Archivo de plantilla completo: templates/python/app.py y templates/python/templates/base.html

Integración en React (Vite / Next.js)

Librería Requerida: npm install sweetalert2

react / TimtAlert.jsx 
import Swal from 'sweetalert2';
import 'assets/css/timt-identity.css';

export const showTimtSuccess = (title, message) => {
    Swal.fire({
        icon: 'success',
        title: title || '¡Operación Exitosa!',
        html: message,
        confirmButtonColor: '#103e4d',
        confirmButtonText: 'Aceptar'
    });
};

export const showTimtWarning = (title, message) => {
    Swal.fire({
        icon: 'warning',
        title: title || '¡Atención!',
        html: message,
        confirmButtonColor: '#80242b',
        confirmButtonText: 'Entendido'
    });
};
Archivos de plantilla completos: templates/react/TimtAlert.js y templates/react/TimtComponents.jsx

Integración en Angular (17+)

Librería Requerida: npm install sweetalert2

angular / timt-alert.service.ts 
import { Injectable } from '@angular/core';
import Swal from 'sweetalert2';

@Injectable({ providedIn: 'root' })
export class TimtAlertService {
  success(title: string, msg: string) {
    return Swal.fire({
      icon: 'success',
      title,
      html: msg,
      confirmButtonColor: '#103e4d'
    });
  }

  warning(title: string, msg: string) {
    return Swal.fire({
      icon: 'warning',
      title,
      html: msg,
      confirmButtonColor: '#80242b'
    });
  }
}
Archivo de plantilla completo: templates/angular/timt-alert.service.ts

Integración en Node.js (Express / EJS)

Librerías Requeridas: npm install express ejs y SweetAlert2 en el front-end.

nodejs / server.js 
const express = require('express');
const app = express();

// Servir la carpeta de assets de identidad
app.use('/assets', express.static('assets'));
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
    res.render('index', { pageTitle: 'Panel TIMT' });
});

app.listen(3000, () => console.log('Servidor en http://localhost:3000'));
Archivo de plantilla completo: templates/nodejs/server.js y templates/nodejs/views/index.ejs
07

Integración con Antigravity AI

Diseñado para que todo tu equipo pueda utilizar Antigravity AI en cualquier lenguaje y la IA genere automáticamente interfaces que cumplan con la identidad sin tener que explicarle los colores ni las alertas cada vez.

CARACTERÍSTICA NATIVA DE ANTIGRAVITY

¿Cómo funciona para tus compañeros de equipo?

El proyecto incluye los archivos AGENTS.md, GEMINI.md y la regla en .agents/rules/timt-design-system.md. Cuando cualquier desarrollador abra este proyecto o copie esta carpeta en su nuevo repositorio, Antigravity leerá automáticamente las reglas y aplicará el fondo crema, el petróleo institucional, el vino y las alertas SweetAlert2 en cualquier desarrollo.

Prompt recomendado para pedir código a Antigravity:

Desarrolla [NOMBRE DE LA VISTA O MÓDULO] en [PHP / PYTHON / REACT / ANGULAR / NODE.JS] siguiendo estrictamente el manual de identidad visual de El Insurgente (TIMT) especificado en AGENTS.md. Utiliza los tokens de color (--timt-primary, --timt-wine, --timt-bg-cream), tipografía Montserrat y el sistema oficial de alertas SweetAlert2 con botón primario #103e4d y botón secundario #8b2b2b.
08

Estructura del Proyecto para Copiar y Pegar

Organización de carpetas lista para ser clonada o transferida a nuevos repositorios de trabajo:

Árbol de Directorios: manual_identidad/ 
c:/xampp/htdocs/manual_identidad/
├── AGENTS.md                          # Reglas para Antigravity AI en todos los lenguajes
├── GEMINI.md                          # Compatibilidad nativa con modelos de IA
├── README.md                          # Documentación rápida y guía de inicio
├── index.html                         # Visor interactivo del Manual de Identidad
├── .agents/
│   └── rules/
│       └── timt-design-system.md     # Regla global de Antigravity (alwaysApply)
├── config/
│   └── identity-tokens.json           # Tokens de diseño en JSON (para scripts y builds)
├── assets/
│   ├── css/
│   │   ├── timt-identity.css          # CSS Maestro con variables, alertas y utilidades
│   │   └── showcase.css              # Estilos del visualizador web
│   ├── js/
│   │   ├── timt-alerts.js             # Módulo de alertas unificado SweetAlert2 + Toasts
│   │   └── showcase.js               # Interactividad del manual
│   ├── img/
│   │   ├── favicon.ico
│   │   ├── fondo_tren.png             # Banner hero oficial del tren
│   │   └── logos/
│   │       ├── logo_elinsurgente.svg  # Logo oficial horizontal
│   │       ├── logo_circular.svg      # Emblema circular
│   │       ├── logo_banobras.svg      # Co-patrocinador
│   │       ├── logo_fonadin.svg       # Co-patrocinador
│   │       └── Logo transparente.png  # PNG alta resolución
│   └── fonts/
│       ├── MOVILIDAD_INTEGRADA_CDMX.otf
│       └── METRO-DF.TTF
└── templates/                         # Plantillas de inicio rápido por lenguaje
    ├── php/                           # header.php, footer.php, timt_helper.php, index.php
    ├── python/                        # app.py, templates/base.html, templates/index.html
    ├── react/                         # TimtAlert.js, TimtComponents.jsx, AppExample.jsx
    ├── angular/                       # timt-alert.service.ts, header.component.ts/.html
    └── nodejs/                        # server.js, views/index.ejs
09

Atención Ciudadana: Quejas, Sugerencias y Folios

Estandarización técnica derivada del sistema operativo QuejasySugerencias. Incluye el flujo completo de captura ciudadana, generación y consulta de números de folio, análisis de sentimiento con Inteligencia Artificial y plantillas de actas oficiales imprimibles.

1. Sistema de Folios

Búsqueda y Seguimiento de Caso Ciudadano

FE-132 BF-971 QS-2026-089

El ciudadano o el personal de atención ingresa el folio emitido por el sistema para conocer el dictamen, la fecha y la coordinación responsable:

Línea de Tiempo del Folio (Ciclo de Vida):

✓
1. Registrado
✓
2. Turnado a Coordinación
3
3. En Revisión / Dictamen
4
4. Atendido / Concluido

Badges de Estatus de Quejas (.timt-status-badge):

● Abierto / Nuevo ● En Proceso ● Atendido / Resuelto ● Concluido ● No Procede
2. Inteligencia Artificial

Mapeo de Sentimiento en Quejas y Sugerencias

El sistema clasifica automáticamente el impacto emocional del usuario y asigna la coordinación interna adecuada. Utiliza los activos visuales estandarizados en assets/img/sentiment/:

Positivo
Positivo (POS)
Felicitación / Satisfacción
ia_sentimiento: "POS"
Neutro
Neutro (NEU)
Consulta / Sugerencia
ia_sentimiento: "NEU"
Negativo
Negativo (NEG)
Queja / Reclamación
ia_sentimiento: "NEG"
En Análisis
En Análisis
Procesando Modelo
ia_sentimiento: "Sin analizar"
Campos de Base de Datos Vinculados: ia_sentimiento (POS/NEU/NEG), ia_respuesta_sugerida (Borrador de disculpa o agradecimiento generado por IA) y ia_coordinacion_sugerida (Asignación automática a Operaciones, Mantenimiento, TIC o Atención al Usuario).
3. Formulario Oficial

Captura Ciudadana de Quejas y Sugerencias

0 / 1000 caracteres
📁
Arrastra aquí tus archivos o haz clic para examinar
Formatos admitidos: JPG, PNG o PDF con evidencia del suceso
4. Estándar de Impresión Oficial (@media print)

Carátula de Dictamen y Acta de Atención Ciudadana

Estandarizado a partir de reporte_folio.php. Al presionar Ctrl + P o imprimir, se activa automáticamente la hoja membretada institucional en tamaño carta, eliminando navegación web y añadiendo los bloques de firmas de los responsables:

El Insurgente
ACTA DE ATENCIÓN CIUDADANA
FOLIO: FE-132

Asunto: Resolución y atención formal a reporte de usuario en Tren Interurbano México-Toluca.
Estación: Metepec | Fecha del Suceso: 2026-10-27 10:15 hrs

Dictamen Técnico: Se realizó la inspección de cámaras del CCO y se implementaron las acciones preventivas con el personal de seguridad privada del andén.
Lic. Responsable de Atención Ciudadana
TIMT El Insurgente
Coordinación de Operaciones
Seguimiento Ferroviario
HTML / JS: Generación de Folios y Atención Ciudadana 
<!-- Disparar Alerta con Folio Generado -->
<script>
// Al guardar el formulario de queja o sugerencia:
const nuevoFolio = "QS-2026-089";
TimtAlert.ticketCreated(nuevoFolio, "usuario@correo.com");

// Para consultar un folio existente:
TimtAlert.ticketStatus({
  folio: "FE-132",
  estatus: "En Proceso",
  estacion: "Estación Metepec",
  fecha: "2026-10-27 10:15 hrs",
  coordinacion: "Gerencia de Operaciones"
});
</script>
10

Boletos de Pasaje y Escáner QR de Trazabilidad

Estandarización visual para la emisión de Pases de Abordaje / Boletos Térmicos y la interfaz de Escaneo QR y Trazabilidad de Activos con visor de cámara, esquinas de enfoque y haz láser animado.

Demo Interactivo 1

Boleto / Pase de Abordaje Oficial

Incluye muescas de corte perimetral, franja petróleo institucional, código QR y código de barras térmico:

El Insurgente
Pase de Abordaje / TVM
ZIN
Zinacantepec
➔
OBS
Observatorio
Fecha y Hora: 27-10-2026 10:30 hrs
Código de Viaje: VIA-7482
Tarifa Oficial: $100.00 MXN
Medio de Pago: Tarjeta TUMI / Código QR
QR Acceso
* TIMT-98421048-2026 *
HTML / CSS: Boleto de Transporte TIMT 
<div class="timt-transport-ticket">
  <div class="timt-ticket-header">
    <img src="assets/img/logos/logo_elinsurgente.svg" alt="El Insurgente">
  </div>
  <div class="timt-ticket-route">
    <div class="timt-ticket-station">
      <div class="timt-ticket-station-code">ZIN</div>
      <div class="timt-ticket-station-name">Zinacantepec</div>
    </div>
    <div class="timt-ticket-arrow">➔</div>
    <div class="timt-ticket-station destination">
      <div class="timt-ticket-station-code">OBS</div>
      <div class="timt-ticket-station-name">Observatorio</div>
    </div>
  </div>
  <div class="timt-ticket-body">
    <div class="timt-ticket-row">
      <span class="timt-ticket-label">Tarifa:</span>
      <span class="timt-ticket-value">$100.00 MXN</span>
    </div>
    <div class="timt-ticket-qr-box">
      <img src="assets/img/logos/logo_circular.svg" alt="QR">
      <div class="timt-ticket-barcode"></div>
    </div>
  </div>
</div>
Demo Interactivo 2

Visor de Escáner QR de Trazabilidad

Visor de cámara con esquinas HUD, línea de escaneo láser en rojo institucional y detección con audio beep:

⚡ Apunta el código QR o código de barras al recuadro
HTML / JS: Visor Escáner con html5-qrcode 
<!-- Librería oficial recomendada: html5-qrcode -->
<script src="https://unpkg.com/html5-qrcode"></script>

<div class="timt-scanner-box" id="reader">
  <div class="timt-scanner-frame">
    <div class="timt-scanner-laser"></div>
  </div>
</div>

<script>
const html5QrCode = new Html5Qrcode("reader");
html5QrCode.start(
  { facingMode: "environment" },
  { fps: 10, qrbox: { width: 220, height: 220 } },
  (decodedText) => {
    TimtAlert.success("¡Código Escaneado!", decodedText);
  }
);
</script>
11

Monitoreo de Nodos, Servidores y Telemetría

Tarjetas de estado en tiempo real para servidores, torniquetes y validadores del TIMT. Incluye indicadores de latido (ping pulse) en verde, ámbar y rojo con medición de latencia.

Panel de Salud de la Red TIMT

4 Nodos Monitoreados

Servidor Central TIMT

192.168.10.1 (CCO Zinacantepec)
En Línea
14 ms ↻

Torniquetes Estación Metepec

10.20.15.54 (Pasaje TVM)
En Línea
22 ms ↻

Concentrador Santa Fe

10.30.22.12 (Subestación)
Alta Latencia
128 ms ↻

Validador Observatorio 03

10.40.8.99 (Andén Sur)
Desconectado
Timeout ↻
HTML / CSS: Tarjeta de Monitoreo de Nodo & Ping 
<div class="timt-node-card">
  <div class="timt-node-info">
    <h4>Servidor Central TIMT</h4>
    <div class="timt-node-ip">192.168.10.1</div>
  </div>
  <div style="text-align: right;">
    <div class="timt-node-status" style="color: #1b7a43;">
      <!-- timt-ping-online (verde) | timt-ping-warn (ámbar) | timt-ping-offline (rojo) -->
      <span class="timt-ping-dot timt-ping-online"></span> En Línea
    </div>
    <span class="timt-latency-pill">14 ms</span>
  </div>
</div>
12

Contador Regresivo Digital (Countdown)

Estandarización de temporizadores para aperturas de servicio, convocatorias, salidas de trenes o eventos institucionales.

Próxima Salida de Convoy (Zinacantepec ➔ Observatorio)

Tiempo Restante:

14
Horas
35
Minutos
20
Segundos
HTML / JS: Contador Regresivo Oficial 
<div class="timt-countdown">
  <div class="timt-countdown-unit">
    <div class="timt-countdown-num" id="cd-hours">00</div>
    <div class="timt-countdown-label">Horas</div>
  </div>
  <div class="timt-countdown-unit">
    <div class="timt-countdown-num" id="cd-minutes">00</div>
    <div class="timt-countdown-label">Minutos</div>
  </div>
  <div class="timt-countdown-unit">
    <div class="timt-countdown-num" id="cd-seconds">00</div>
    <div class="timt-countdown-label">Segundos</div>
  </div>
</div>
13

Credencial Digital y Gaffete Oficial

Estandarización de credenciales de identificación institucional para personal técnico, maquinistas, inspectores y directivos del TIMT. Diseñado bajo la norma de tarjetas plásticas PVC CR-80 con ranura para cordón, cabecera de alto contraste para logotipos sin fondo, área fotográfica nítida y módulo de seguridad QR.

Gaffete Oficial TIMT (Anverso) VIGENTE 2026
Logotipo oficial de El Insurgente
Tren Interurbano México-Toluca • CCO
Fotografía oficial del personal
VIGENTE | OPERACIONES CCO
Ing. Carlos Mier
Coordinador de Operaciones
No. Empleado
#0482
Base Asignada
Zinacantepec
Nivel de Acceso
CCO - A1 (MASTER)
Vigencia
2026 - 2028
Código QR oficial de acceso
Validación CCO Central
FOLIO: CCO-A1-0482
📶 CHIP RFID / NFC ACTIVO
Escanee en torniquetes y CCO

Especificaciones del Gaffete Institucional

Lineamientos oficiales de diseño y reglas de ensamble para credenciales de identificación:

  • Alto Contraste para Imágenes sin Fondo: Cabecera con fondo blanco puro (#ffffff) para que la tipografía negra (#2d2a26) y el isotipo guinda resalten sin perderse en fondos oscuros.
  • Sin Superposiciones: El avatar circular mantiene flujo vertical independiente con margen de respiro, evitando invadir o tapar el logotipo oficial.
  • Código QR con Marco de Lectura: Módulo contenedor con fondo blanco y padding protector que garantiza el contraste térmico requerido por escáneres 2D de torniquetes.
  • Soporte Día / Noche: La tarjeta se concibe como objeto físico PVC CR-80 con sombreado de elevación natural en ambos temas.
HTML / CSS: Credencial Oficial TIMT 
<div class="timt-id-badge">
  <!-- Ranura porta-lanyard -->
  <div class="timt-badge-top-slot">
    <div class="timt-badge-lanyard-hole"></div>
  </div>
  <div class="timt-badge-strip">Tren Interurbano México-Toluca</div>

  <!-- Cabecera de logotipo en fondo blanco puro -->
  <div class="timt-badge-header">
    <img src="assets/img/logos/logo_elinsurgente.svg" alt="El Insurgente">
  </div>

  <!-- Fotografía oficial en marco formal -->
  <div style="padding: 14px 18px 6px; text-align: center;">
    <div style="width: 100px; height: 118px; border-radius: 12px; border: 2.5px solid #103e4d; overflow: hidden; margin: 0 auto 8px;">
      <img src="assets/img/avatar_empleado.svg" alt="Foto" style="width: 100%; height: 100%; object-fit: cover;">
    </div>
    <div class="timt-badge-status-chip">● VIGENTE | OPERACIONES CCO</div>
  </div>
  
  <!-- Datos y adscripción en cuadrícula 2x2 -->
  <div class="timt-badge-info">
    <div class="timt-badge-name">Ing. Carlos Mier</div>
    <div class="timt-badge-role">Coordinador de Operaciones</div>
    <div class="timt-badge-meta-grid">
      <div class="timt-badge-meta-item">
        <span class="timt-badge-meta-label">Empleado</span>
        <span class="timt-badge-meta-val">#0482</span>
      </div>
      <div class="timt-badge-meta-item">
        <span class="timt-badge-meta-label">Base</span>
        <span class="timt-badge-meta-val">Zinacantepec</span>
      </div>
      <div class="timt-badge-meta-item">
        <span class="timt-badge-meta-label">Nivel</span>
        <span class="timt-badge-meta-val">CCO - A1</span>
      </div>
      <div class="timt-badge-meta-item">
        <span class="timt-badge-meta-label">Vigencia</span>
        <span class="timt-badge-meta-val">2026 - 2028</span>
      </div>
    </div>
  </div>

  <!-- Validación QR Real y Chip RFID -->
  <div class="timt-badge-qr">
    <div class="timt-badge-qr-box">
      <img src="assets/img/qr_acceso.svg" alt="QR Acceso">
    </div>
    <div class="timt-badge-qr-info">
      <div class="timt-badge-qr-title">Validación CCO Central</div>
      <div class="timt-badge-qr-folio">FOLIO: CCO-A1-0482</div>
      <div style="font-size: 0.64rem; color: #047857; font-weight: 700;">📶 CHIP RFID ACTIVO</div>
    </div>
  </div>
  <div class="timt-badge-footer-ribbon"></div>
</div>
14

Temas Día y Noche (Light & Dark Mode)

Soporte de color dinámico para aplicaciones del TIMT. Modo Día (Crema institucional cálido para portales ciudadanos y administrativos) y Modo Noche (Sleek Ferroviario Slate de alto contraste para cabinas de tren, centros de control CCO y visualización nocturna en andenes). Incluye persistencia en localStorage, detección automática de preferencia de sistema operativo (prefers-color-scheme) y sincronización con SweetAlert2.

Demostración Interactiva de Temas

Haz clic en cualquiera de las siguientes opciones para conmutar el tema del sistema completo en tiempo real:

☀️

Modo Día Institucional

Fondo Crema (#f2e9d3), tarjetas blancas y tipografía en Petróleo.

🌙

Modo Noche Ferroviario

Fondo Slate Medianoche (#091519), superficies #10232a y resplandor cyan.

💻

Automático (Sistema)

Sincroniza con el modo claro/oscuro del dispositivo del usuario.

Laboratorio de Prueba de Componentes en el Tema Actual:
Badge Activo Operacional FE-132
IMPLEMENTACIÓN COMPLETA DÍA / NOCHE 
<!-- Botón Switcher para colocar en el Navbar o Header -->
<div class="timt-theme-switcher" role="group" aria-label="Cambiar tema de color">
  <button type="button" class="timt-theme-btn active" data-set-theme="light" title="Modo Día" onclick="setManualTheme('light')">
    <span class="theme-icon">☀️</span>
    <span>Día</span>
  </button>
  <button type="button" class="timt-theme-btn" data-set-theme="dark" title="Modo Noche" onclick="setManualTheme('dark')">
    <span class="theme-icon">🌙</span>
    <span>Noche</span>
  </button>
  <button type="button" class="timt-theme-btn" data-set-theme="auto" title="Automático según Sistema" onclick="setManualTheme('auto')">
    <span class="theme-icon">💻</span>
    <span>Auto</span>
  </button>
</div>
/* --- Variables de Modo Día (Por defecto) --- */
:root,
[data-theme="light"] {
  --timt-bg-cream: #f2e9d3;
  --timt-surface: #ffffff;
  --timt-surface-alt: #fbf8f1;
  --timt-text-main: #1a1a1a;
  --timt-text-muted: #555555;
  --timt-border-color: #e2e8f0;
  --timt-header-bg: #f2e9d3;
}

/* --- Variables de Modo Noche (Dark Mode Ferroviario) --- */
[data-theme="dark"],
body.timt-dark {
  --timt-bg-cream: #091519;
  --timt-surface: #10232a;
  --timt-surface-alt: #0b1a20;
  --timt-text-main: #edf6f9;
  --timt-text-muted: #9bb7c2;
  --timt-border-color: #1e3a45;
  --timt-header-bg: #0c1c22;
}

/* Fallback automático si el usuario no ha forzado un tema */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --timt-bg-cream: #091519;
    --timt-surface: #10232a;
    --timt-text-main: #edf6f9;
    --timt-text-muted: #9bb7c2;
    --timt-border-color: #1e3a45;
  }
}
// Inicializar Tema al cargar la página
function initTheme() {
  const savedTheme = localStorage.getItem('timt_theme_mode') || 'auto';
  applyTheme(savedTheme, false);

  if (window.matchMedia) {
    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
      if ((localStorage.getItem('timt_theme_mode') || 'auto') === 'auto') {
        applyTheme('auto', false);
      }
    });
  }
}

function applyTheme(mode, showFeedback = true) {
  let resolved = mode;
  if (mode === 'auto') {
    resolved = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
  }

  document.documentElement.setAttribute('data-theme', resolved);
  document.body.classList.toggle('timt-dark', resolved === 'dark');

  // Actualizar clases de botones
  document.querySelectorAll('.timt-theme-switcher .timt-theme-btn').forEach(btn => {
    btn.classList.toggle('active', btn.getAttribute('data-set-theme') === mode);
  });
}

function setManualTheme(mode) {
  localStorage.setItem('timt_theme_mode', mode);
  applyTheme(mode, true);
}

document.addEventListener('DOMContentLoaded', initTheme);
import { useState, useEffect } from 'react';

export function useTimtTheme() {
  const [theme, setTheme] = useState(() => localStorage.getItem('timt_theme_mode') || 'auto');

  useEffect(() => {
    let resolved = theme;
    if (theme === 'auto') {
      resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }
    document.documentElement.setAttribute('data-theme', resolved);
    document.body.classList.toggle('timt-dark', resolved === 'dark');
    localStorage.setItem('timt_theme_mode', theme);
  }, [theme]);

  return { theme, setTheme };
}
15

Mockup Integral de Aplicación (Login, Menú Lateral, Header y Footer)

Prototipo interactivo en vivo con la arquitectura completa recomendada para sistemas del Tren Interurbano México-Toluca. Integra autenticación con cuentas demo a 1 clic, menú lateral colapsable, header institucional con notificaciones, buscador global (Ctrl + K), dashboard con KPIs y mapa de vía, gestión de folios de quejas y emisión de boletos térmicos con soporte Día/Noche.

⚡ Aplicación Interactiva en Vivo

Portal Operativo TIMT "El Insurgente"

Desarrollado para que todos los participantes puedan interactuar con la experiencia de usuario final, probar las alertas SweetAlert2 en contexto real y copiar las estructuras de código listas para producción.

Vista 1: Autenticación 100% Funcional

Inicio de Sesión (Login Oficial)

Pantalla con la identidad visual oficial, card elevada con franja superior bicolor (petróleo y vino), soporte de Modo Día / Noche, visor de contraseñas y cuentas demo instantáneas.

Características incluidas:
  • Logotipos oficiales El Insurgente, Banobras y Fonadin.
  • 3 Cuentas demo (1-clic): Operaciones, Atención Ciudadana y TIC.
  • Spinner de validación asíncrona con SweetAlert2.
  • Almacenamiento de sesión en sessionStorage.
Vista 2: Aplicación Master 100% Funcional

Portal Operativo con Sidebar & Header

Plantilla maestro para sistemas de gestión: Menú lateral colapsable, barra superior con buscador Ctrl + K, campana con dropdown de notificaciones y 4 módulos navegables en tiempo real.

Módulos y herramientas integradas en el Mockup:
  • Ticker CCO en Vivo: Reloj digital CST, tensión de catenaria y atajos [ ? ].
  • Dashboard: 4 KPIs vivos, mapa de 57.7 km con inspección de trenes y gráfica horaria.
  • Quejas y Folios: Tabla filtrable, exportación a Excel (CSV) y desglose de sentimiento IA.
  • Boletaje: Pase de abordaje térmico con código QR y simulador de escáner móvil de revisor.
  • Telemetría: Ping masivo a subestaciones y consola de eventos SCADA en tiempo real.
  • Atajos de Teclado: Teclas 1-5 para cambiar módulos, D para tema y T para despacho.

Arquitectura de Componentes de la Plantilla

Estructura estándar modular para que los equipos de desarrollo integren la identidad visual en sus lenguajes de programación:

Componente Clase CSS Principal Descripción y Funcionalidad Ubicación en Archivos
1. Menú Lateral (Sidebar) .app-sidebar Navegación colapsable con estado activo, badges numéricos y perfil del usuario autenticado. mockups/dashboard.html
2. Header Superior (Navbar) .app-header Logos institucionales, buscador global con atajo Ctrl+K, notificaciones y switcher de tema. mockups/dashboard.html
3. Tarjetas KPI (Dashboard) .kpi-card, .kpi-value Contadores métricos con íconos temáticos y tendencias porcentuales en verde, ámbar o rojo. mockups/dashboard.html
4. Mapa de Línea (Track) .line-track, .station-node Trazo esquemático de las 7 estaciones con badges de posición de trenes en circulación. mockups/dashboard.html
5. Tabla de Gestión .timt-data-table Tablas con estilos oficiales, folios clicables, sentimiento IA y acciones modales. mockups/dashboard.html
6. Footer Institucional .app-footer Franja inferior con logotipos del Gobierno de México, Banobras y Fonadin. mockups/dashboard.html
7. Login Card .login-card Contenedor central con borde superior gradiente, botones de acceso demo y formulario oficial. mockups/login.html
HTML: Estructura Master Layout para Implementar en Proyectos 
<!-- Estructura Oficial del Portal TIMT (Header y Footer de Ancho Completo) -->
<div class="app-layout">
  <!-- 1. HEADER SUPERIOR OFICIAL (ANCHO COMPLETO 100%) -->
  <header class="app-header">
    <button class="sidebar-toggle-btn" onclick="toggleSidebar()">☰</button>
    <a href="dashboard.html" class="header-brand">
      <img src="assets/img/logos/logo_circular.svg" height="36">
      <img src="assets/img/logos/logo_elinsurgente.svg" height="30">
      <div class="header-brand-title">PORTAL TIMT</div>
    </a>
    <!-- Perfil con Dropdown de Temas Día/Noche y Cerrar Sesión -->
    <div class="header-user-wrapper">
      <div class="header-user-pill" onclick="toggleUserDropdown()">...</div>
      <div class="user-dropdown" id="userDropdown">...</div>
    </div>
  </header>

  <!-- 2. CUERPO DE LA APLICACIÓN (SIDEBAR + CONTENIDO) -->
  <div class="app-body">
    <!-- MENÚ LATERAL (SIDEBAR COLAPSABLE) -->
    <aside class="app-sidebar collapsed" id="appSidebar">
      <nav class="sidebar-nav">
        <a class="sidebar-link active" onclick="switchView('dashboard', this)">📊 Dashboard</a>
        <a class="sidebar-link" onclick="switchView('quejas', this)">📑 Quejas y Folios</a>
        <a class="sidebar-link" onclick="switchView('boletos', this)">🎫 Pases y Boletaje</a>
        <a class="sidebar-link" onclick="switchView('telemetria', this)">📡 Telemetría</a>
      </nav>
    </aside>

    <!-- PANEL DE CONTENIDO DINÁMICO -->
    <div class="app-main">
      <main class="app-content">
        <section id="view-dashboard" class="tab-view-pane active">...</section>
        <section id="view-quejas" class="tab-view-pane">...</section>
        <section id="view-boletos" class="tab-view-pane">...</section>
      </main>
    </div>
  </div>

  <!-- 3. FOOTER INSTITUCIONAL (ANCHO COMPLETO 100%) -->
  <footer class="app-footer">
    <div class="footer-content">...</div>
  </footer>
</div>