DiagAuto utiliza una arquitectura desacoplada. Este repositorio contiene únicamente la aplicación de página única (SPA - Single Page Application) del frontend, la cual consume la API REST del backend a través de HTTPS/JSON.

• Frontend (Este Repositorio): SPA desarrollada en Angular 19 servida localmente por el servidor de desarrollo CLI (Esbuild/Vite) en https://localhost:4200.
• Repositorio Backend: API REST (Spring Boot / Node.js / etc.) alojada en https://localhost:8443, con todos sus endpoints estructurados bajo la ruta /api/v1.
• Comunicación: Intercambio de datos en formato JSON a través de HTTPS; la sesión de usuario se gestiona de forma segura mediante cookies JWT con atributos httpOnly y protección mediante tokens XSRF.

• Lenguaje: TypeScript (ES Modules) | Sintaxis moderna con tipado estricto, programación asíncrona (async/await) y programación reactiva.
• Framework: Angular 19+ | Arquitectura moderna basada en componentes autónomos (Standalone Components) y gestión del estado reactivo mediante la Signals API.
• Herramienta de compilación: Angular CLI (Esbuild/Vite builder bundle) | Servidor de desarrollo optimizado con recarga en caliente (HMR), HTTPS local y empaquetado de producción de alto rendimiento.
• Enrutamiento: Angular Router | Vistas con carga perezosa (Lazy-loaded views), rutas protegidas para la sección privada del usuario y guardas funcionales (CanActivateFn).
• Estado: Angular Signals | Estado reactivo local y global modularizado a través de servicios inyectables (AuthService, VehicleService, BillingService).
• HTTP: Angular HttpClient | Cliente HTTP integrado y nativo de Angular con soporte para interceptores globales (inyección de tokens, manejo de XSRF y control de errores).
• Estilos: Tailwind CSS 4 | Framework de CSS basado en utilidades generadas a partir de los design tokens (paleta de colores para alertas mecánicas y estados de vehículos) del proyecto.
• Pruebas (Testing): Jasmine + Karma | Framework de pruebas unitarias guiado por comportamiento (BDD) y ejecutor de tests en navegadores reales con reportes de cobertura locales.
• CI (Integración Continua): GitHub Actions | Pipeline automatizado que ejecuta la suite de pruebas unitarias y verifica los umbrales mínimos de cobertura en cada Pull Request hacia las ramas principales.

La aplicación sigue un patrón de diseño por capas donde cada nivel tiene una única responsabilidad. Los componentes nunca realizan peticiones HTTP directas ni gestionan llamadas crudas del cliente de red.

graph TD
    User[Usuario / Navegador] --> Router
    Router[Angular Router Guards<br/>Verifica Auth y Límite Freemium] --> View
    View[Vistas / Páginas<br/>Componentes a nivel de ruta] --> Component[Componentes de UI<br/>Estructuras reutilizables]
    
    Component --> ServiceState[Servicios de Estado / Signals<br/>Estado compartido + Reglas de negocio]
    Component --> ServiceHTTP[Servicios de API / HttpClient<br/>Un servicio por recurso de la API]
    ServiceState --> ServiceHTTP
    
    ServiceHTTP --> Interceptor[Interceptores HTTP<br/>HttpClient + Manejo de Cookies / XSRF]
    Interceptor -->|HTTPS JSON + cookies| Backend[(DiagAuto REST API)]

    Constants[Constantes<br/>Roles, Estados de avería, Límites] -.-> ServiceState
    Constants -.-> ServiceHTTP
    Utils[Utilidades / Utils<br/>Formateadores, Validaciones] -.-> Component

    style User fill:#f9f,stroke:#333,stroke-width:2px
    style Backend fill:#bbf,stroke:#333,stroke-width:2px

• Guardas de Ruta (Router Guards): Interceptan la navegación para asegurar que el usuario esté autenticado (ROLE_USER) y controlan el acceso al formulario de creación redirigiendo al Paywall si se alcanza el límite de 4 vehículos.
• Vistas y Componentes: Capa de presentación construida con componentes autónomos (Standalone Components). Los componentes consumen datos mediante la lectura de Angular Signals.
• Servicios de Estado (Signals State): Servicios inyectables globales (@Injectable({ providedIn: 'root' })) que actúan como almacenes de datos reactivos (reemplazando el concepto de Pinia). Gestionan de forma centralizada el estado del usuario, la lista de vehículos privada y los filtros aplicados en la agenda.
• Servicios de API: Clases encargadas exclusivamente de estructurar las peticiones HTTP (GET, POST, PATCH) utilizando el módulo nativo HttpClient de Angular.
• Interceptores: Capa de red global que adjunta automáticamente las cabeceras de seguridad, gestiona la protección XSRF y captura de forma centralizada los errores de comunicación (como el código 403 de pago requerido o el 401 de sesión expirada).

En Angular, las pruebas unitarias (.spec.ts) se guardan siempre justo al lado del archivo que prueban (por ejemplo, vehicle-card.component.ts junto a vehicle-card.component.spec.ts).

src/
├── main.ts                       # Punto de entrada de la aplicación Angular (Bootstraping)
├── index.html                    # Archivo HTML principal del servidor
├── styles.css                    # Configuración de Tailwind CSS 4 (@theme) y estilos base
├── app/
│   ├── app.config.ts             # Proveedores globales: HttpClient, Rutas, Animaciones
│   ├── app.routes.ts             # Definición de URLs y guardas funcionales (incluye Paywall)
│   ├── app.component.ts          # Componente raíz: contenedor global de la aplicación
│   │
│   ├── core/                     # INFRAESTRUCTURA GLOBAL (Solo se configura una vez)
│   │   ├── constants/            # Enumeraciones de la API, textos de error y límite Freemium (4)
│   │   ├── interceptors/         # Captura de errores (401, 403) e inyección de tokens de seguridad
│   │   ├── services/             # Cliente HTTP base y servicios de utilidad global
│   │   └── utils/                # Funciones puras (validadores de matrículas, formateadores de fechas)
│   │
│   ├── shared/                   # COMPONENTES DE ESTRUCTURA Y UI REUTILIZABLES
│   │   ├── header/               # Componente del menú de navegación superior de la web
│   │   ├── footer/               # Componente del pie de página de la web
│   │   └── components/           # Botones genéricos, insignias de estado (verde/rojo) y modales
│   │
│   ├── features/                 # MÓDULOS DEL NEGOCIO (Lógica de la aplicación)
│   │   │
│   │   ├── auth/                 # Registro e Inicio de sesión (Autenticación)
│   │   │   ├── pages/            # Destinos de ruta (LoginPageComponent, RegisterPageComponent)
│   │   │   ├── components/       # Secciones (Formulario de login, Campos con validación)
│   │   │   └── services/         # Gestión del estado de la sesión (AuthStore con Angular Signals)
│   │   │
│   │   ├── vehicles/             # Agenda y Registro de coches públicos/privados
│   │   │   ├── pages/            # Destinos de ruta (DashboardPageComponent, VehicleNewPageComponent)
│   │   │   ├── components/       # Secciones (Tarjeta de coche, Conmutador de filtros, Alerta visual)
│   │   │   └── services/         # API Cliente de vehículos y Estado reactivo (VehicleSignalsState)
│   │   │
│   │   └── billing/              # Control de suscripciones y Pasarela Freemium
│   │       ├── pages/            # Destinos de ruta (PaywallPageComponent / Pantalla de pago)
│   │       ├── components/       # Secciones (Formulario de tarjeta, Simulador de checkout exitoso)
│   │       └── services/         # Gestión de límites e historial de facturación
│   │
│   └── mocks/                    # Datos JSON temporales para simular respuestas del backend
│
├── assets/                       # Imágenes estáticas importadas en el código (Logos, ilustraciones)
└── .github/workflows/tests.yml   # CI: Automatización de tests y cobertura en cada Pull Request

1. Separación Clara: Las carpetas dentro de features/ dividen las partes internas del código. Las pages/ contienen los componentes que se cargan directamente al cambiar de URL en el navegador. Los components/ son las piezas visuales internas que se importan dentro de esas páginas (cuerpo, cabecera, barras de control).
2. Servicios Locales: Cada característica (auth, vehicles, billing) tiene sus propios servicios a mano para realizar llamadas HTTP y controlar sus propias Signals, evitando tener un único archivo de estado gigantesco e inmantenible.