3 Aplicación Web

La aplicación web de BrechaSnipApp es la interfaz principal para usuarios que desean calcular brechas de infraestructura y planificar inversiones. Esta sección cubre todos los aspectos del uso de la aplicación.

3.1 Visión General

La aplicación web está construida con tecnologías modernas:

Framework: Next.js 14 (React)
Lenguaje: TypeScript
Estilo: Tailwind CSS
Gestión de Estado: React Context API

3.2 Características Principales

⚙️ Configuración Global

Defina años de planificación, configure el plan de inversión (automático o manual) y gestione techos presupuestarios anuales.

🏗️ Navegación por Sectores

Acceda a una vista agregada de todos los sectores, con resúmenes de inversión y estado de indicadores.

📈 Indicadores Detallados

Examine resultados por provincia y año, ajuste parámetros específicos y visualice gráficos de evolución.

🔄 Gestión de Cambios

El sistema de “cambios pendientes” le permite ajustar múltiples parámetros y recalcular todo en un solo paso.

3.3 Estructura de la Aplicación

/                    → Página principal (sectores)
/sector/[id]         → Vista detallada de un sector
/[indicator]         → Vista detallada de un indicador

3.4 Requisitos del Usuario

Navegador: Chrome 90+, Firefox 88+, Edge 90+, Safari 14+
Conexión: Requiere acceso a la red interna donde se aloja la API
Resolución: Optimizado para escritorio (1280px+)

3.5 Guía del Usuario

Primeros Pasos Aprenda a iniciar sesión y navegar por la interfaz. Comenzar →

Configuración Global Aprenda a definir el horizonte de evaluación y techos presupuestarios. Ver Guía →

Resultados Cómo interpretar los gráficos de brechas, cobertura e inversión. Ver Guía →

# Aplicación Web {#sec-webapp}

La aplicación web de BrechaSnipApp es la interfaz principal para usuarios que desean calcular brechas de infraestructura y planificar inversiones. Esta sección cubre todos los aspectos del uso de la aplicación.

## Visión General

La aplicación web está construida con tecnologías modernas:

- **Framework**: Next.js 14 (React)
- **Lenguaje**: TypeScript
- **Estilo**: Tailwind CSS
- **Gestión de Estado**: React Context API

## Características Principales

::: {.features-grid}

::: {.feature-card}
### ⚙️ Configuración Global {-}
Defina años de planificación, configure el plan de inversión (automático o manual) y gestione techos presupuestarios anuales.
:::

::: {.feature-card}
### 🏗️ Navegación por Sectores {-}
Acceda a una vista agregada de todos los sectores, con resúmenes de inversión y estado de indicadores.
:::

::: {.feature-card}
### 📈 Indicadores Detallados {-}
Examine resultados por provincia y año, ajuste parámetros específicos y visualice gráficos de evolución.
:::

::: {.feature-card}
### 🔄 Gestión de Cambios {-}
El sistema de "cambios pendientes" le permite ajustar múltiples parámetros y recalcular todo en un solo paso.
:::

:::

## Estructura de la Aplicación

```
/                    → Página principal (sectores)
/sector/[id]         → Vista detallada de un sector
/[indicator]         → Vista detallada de un indicador
```

## Requisitos del Usuario

- **Navegador**: Chrome 90+, Firefox 88+, Edge 90+, Safari 14+
- **Conexión**: Requiere acceso a la red interna donde se aloja la API
- **Resolución**: Optimizado para escritorio (1280px+)

## Guía del Usuario

::: {.features-grid}

::: {.feature-card}
**Primeros Pasos**
Aprenda a iniciar sesión y navegar por la interfaz.
[Comenzar &rarr;](getting-started.qmd)
:::

::: {.feature-card}
**Configuración Global**
Aprenda a definir el horizonte de evaluación y techos presupuestarios.
[Ver Guía &rarr;](global-settings.qmd)
:::

::: {.feature-card}
**Resultados**
Cómo interpretar los gráficos de brechas, cobertura e inversión.
[Ver Guía &rarr;](results.qmd)
:::

:::