diff --git a/backend/tests/integration/test_comprobante.py b/backend/tests/integration/test_comprobante.py
index fff95e5..cca63c4 100644
--- a/backend/tests/integration/test_comprobante.py
+++ b/backend/tests/integration/test_comprobante.py
@@ -98,3 +98,28 @@ def test_comprobante_errores(client, url, cabeceras, status):
 
 def test_numero_de_factura():
     assert numero_factura(7) == "KEC-00000007"
+
+
+# ---------------------------------------------------------------- asientos en la factura
+
+
+def _con_asientos(*asientos):
+    base = _detalle()
+    return ReservaDetalle(base.reserva, base.vuelo, tuple(asientos))
+
+
+def test_la_factura_lista_los_asientos_de_la_reserva():
+    datos = armar_datos_factura(_con_asientos("1A", "2B"), ANA)
+    assert datos["detalles"][0]["asientos"] == "1A, 2B"
+    raiz = ElementTree.fromstring(generar_factura_xml(datos).encode("utf-8"))
+    producto = raiz.find("Detalle/producto")
+    assert [c.tag for c in producto] == ["Nombre", "Asientos", "Cantidad", "PrecioUnitario", "Subtotal"]
+    assert producto.findtext("Asientos") == "1A, 2B"
+
+
+def test_los_caracteres_especiales_del_cliente_no_rompen_el_xml():
+    cliente = un_usuario(id=1, nombre="Ana <script>&\"'", correo="ana@correo.com")
+    xml = generar_factura_xml(armar_datos_factura(_con_asientos("1A"), cliente))
+    raiz = ElementTree.fromstring(xml.encode("utf-8"))  # sigue siendo XML válido
+    assert raiz.findtext("cliente/nombre") == "Ana <script>&\"'"
+    assert "<script>" not in xml  # va escapado como &lt;script&gt;
diff --git a/backend/utils/factura_xml.py b/backend/utils/factura_xml.py
index 9ca1d6e..41c79fe 100644
--- a/backend/utils/factura_xml.py
+++ b/backend/utils/factura_xml.py
@@ -44,6 +44,7 @@ def armar_datos_factura(detalle: ReservaDetalle, cliente: Usuario) -> dict[str,
                     f"Pasaje {vuelo.codigo} {vuelo.origen} - {vuelo.destino} "
                     f"({vuelo.fecha} {vuelo.hora_salida:%H:%M})"
                 ),
+                **({"asientos": ", ".join(detalle.asientos)} if detalle.asientos else {}),  # "1A, 1B"
                 "cantidad": reserva.cantidad_asientos,
                 "precio": redondear(reserva.subtotal / reserva.cantidad_asientos),
                 "subtotal": reserva.subtotal,
@@ -81,6 +82,8 @@ def generar_factura_xml(datos: dict[str, Any]) -> str:
     for item in datos["detalles"]:
         producto = ET.SubElement(detalle, "producto")
         ET.SubElement(producto, "Nombre").text = item["nombre"]
+        if "asientos" in item:
+            ET.SubElement(producto, "Asientos").text = item["asientos"]
         ET.SubElement(producto, "Cantidad").text = str(item["cantidad"])
         ET.SubElement(producto, "PrecioUnitario").text = item["precio"]
         ET.SubElement(producto, "Subtotal").text = item["subtotal"]
diff --git a/docs/PLANIFICACION.md b/docs/PLANIFICACION.md
index 49b74dc..c878f52 100644
--- a/docs/PLANIFICACION.md
+++ b/docs/PLANIFICACION.md
@@ -161,7 +161,7 @@ Excepción documentada: `flasgger==0.9.7.1` (la 0.9.4 no funciona con Flask 3).
 | F1 | Frontend: tema Ecuador, login, registro, sesión persistente y rutas protegidas | ✅ Hecho |
 | F2 | Frontend: lista paginada y búsqueda de vuelos, detalle, crear vuelo (admin), panel de administración con IVA | ✅ Hecho |
 | F3 | Frontend: reservar desde el detalle, mis reservas (paginadas), modificar con versión y cancelar. **El administrador no reserva** (403 en el API, sin pantallas) | ✅ Hecho |
-| F4 | Frontend: comprobante XML (panel "Factura XML") | ⏳ Siguiente (F4) |
+| F4 | Frontend: comprobante (factura legible + panel "Factura XML" con copiar) y mejoras de usabilidad con las heurísticas de Nielsen (barra de navegación inferior, logo → inicio, menú de cuenta, migas de pan, aviso al salir con cambios). Ver `docs/USABILIDAD.md` | ✅ Hecho |
 | P | Pruebas funcionales y capturas | Pendiente |
 | D | Diagrama SOA + informe PDF | Pendiente |
 
diff --git a/docs/USABILIDAD.md b/docs/USABILIDAD.md
new file mode 100644
index 0000000..6869990
--- /dev/null
+++ b/docs/USABILIDAD.md
@@ -0,0 +1,32 @@
+# Kuntur EC · Usabilidad (heurísticas de Nielsen)
+
+Revisión de la interfaz con las 10 heurísticas de usabilidad de Jakob Nielsen y lo que se hizo con cada una.
+El caso que la disparó: en el detalle de una reserva un usuario común solo tenía la flecha "Volver"; no
+sabía cómo ir al inicio ni a sus reservas.
+
+## Hallazgos y mejoras
+
+| # | Heurística | Problema detectado | Mejora aplicada |
+|---|---|---|---|
+| 1 | Visibilidad del estado del sistema | El usuario no sabía en qué sección estaba. | Barra de navegación inferior con la sección resaltada y migas de pan ("Mis reservas › KEC-0058 › Comprobante"). Contadores ("12 vuelos disponibles", "Asientos 3 de 10"), indicadores de carga y avisos de éxito. |
+| 2 | Relación con el mundo real | Datos técnicos o en inglés. | Todo en español; fechas "mar 1 dic 2026", horas 24 h, dinero "$75.50", asientos como en un avión (1A, 2B) con pasillo. |
+| 3 | Control y libertad del usuario | Solo se podía retroceder con la flecha; no había salida clara. | Logo siempre lleva al inicio; barra inferior a cualquier sección; migas tocables; "Reiniciar selección" / "Restablecer"; aviso "¿Salir sin guardar?" al abandonar el mapa con cambios; confirmación al cancelar una reserva y al cerrar sesión. |
+| 4 | Consistencia y estándares | Íconos sueltos sin texto (escudo, ticket, nube) y acciones distintas según la pantalla. | Menú de cuenta único (avatar) y barra inferior con **texto** en cada destino; misma barra superior en todas las pantallas; botones con el mismo nombre para la misma acción. |
+| 5 | Prevención de errores | Se podían escribir datos fuera de rango. | Campos que no dejan escribir lo inválido (letras en precio, más de 200 asientos, emojis); máximo 10 asientos por reserva (el resto se atenúa); asientos ocupados bloqueados; botones desactivados si no hay nada que enviar; protección contra doble toque. |
+| 6 | Reconocer antes que recordar | El usuario debía recordar cómo llegó. | Migas de pan, filtros que se conservan al volver, leyenda del mapa (Disponible / Seleccionado / Ocupado), resumen fijo con asientos y total. |
+| 7 | Flexibilidad y eficiencia | — | Búsqueda por origen/destino/fecha, paginación, Enter envía los formularios, copiar el XML con un toque. |
+| 8 | Diseño estético y minimalista | — | Una acción principal por pantalla; paleta sobria de Ecuador; el panel del administrador separado del resto. |
+| 9 | Ayudar a reconocer, diagnosticar y recuperarse de errores | — | Mensajes en español que dicen qué pasó y qué hacer ("Actualice el mapa y elija de nuevo"), botón "Reintentar", y si alguien toma un asiento la app lo quita de la selección y recarga el mapa. |
+| 10 | Ayuda y documentación | El mapa no explicaba cómo usarse. | Texto de ayuda breve sobre el mapa ("Toque los asientos que quiere (hasta 10)…"), textos auxiliares en los formularios ("Máximo $10000, hasta 2 decimales"). |
+
+## Navegación (resumen)
+
+- **Cliente:** Vuelos · Mis reservas (barra inferior). **Administrador:** Vuelos · Administración.
+- Arriba, siempre: logo (→ inicio), flecha Volver (cuando hay a dónde volver) y el avatar de la cuenta
+  (nombre, correo, rol, estado del servicio y cerrar sesión).
+- El mapa de asientos no lleva barra inferior a propósito: es un paso a medio camino con su propio resumen y
+  botón de confirmar; se sale con la flecha, el logo o las migas (y avisa si hay una selección sin guardar).
+
+## Pendiente (ideas, no bloquea)
+- Descargar el comprobante como archivo `.xml`/PDF.
+- Recordar la sesión en varias pestañas y mostrar el tiempo restante del token.
diff --git a/frontend/lib/config/app_router.dart b/frontend/lib/config/app_router.dart
index d376684..ac4f519 100644
--- a/frontend/lib/config/app_router.dart
+++ b/frontend/lib/config/app_router.dart
@@ -5,6 +5,7 @@ import 'package:go_router/go_router.dart';
 import '../controllers/sesion_controller.dart';
 import '../pages/estado_api_page.dart';
 import '../pages/admin_page.dart';
+import '../pages/comprobante_page.dart';
 import '../pages/crear_vuelo_page.dart';
 import '../pages/login_page.dart';
 import '../pages/no_encontrada_page.dart';
@@ -27,6 +28,7 @@ class AppRoutes {
   static const estado = '/estado';
   static const reservas = '/reservas';
   static String reserva(int id) => '/reservas/$id';
+  static String comprobante(int id) => '/reservas/$id/comprobante';
   static String asientosDelVuelo(int id) => '/vuelos/$id/asientos';
   static String asientosDeLaReserva(int id) => '/reservas/$id/asientos';
   static const admin = '/admin';
@@ -85,6 +87,10 @@ final appRouterProvider = Provider<GoRouter>((ref) {
             path: 'asientos',
             builder: (_, state) => SeleccionAsientosPage(reservaId: int.parse(state.pathParameters['id']!)),
           ),
+          GoRoute(
+            path: 'comprobante',
+            builder: (_, state) => ComprobantePage(reservaId: int.parse(state.pathParameters['id']!)),
+          ),
         ],
       ),
       GoRoute(path: AppRoutes.admin, builder: (_, _) => const AdminPage()),
diff --git a/frontend/lib/config/app_theme.dart b/frontend/lib/config/app_theme.dart
index 935ff18..593ad6e 100644
--- a/frontend/lib/config/app_theme.dart
+++ b/frontend/lib/config/app_theme.dart
@@ -196,6 +196,23 @@ class AppTheme {
           textStyle: const TextStyle(fontWeight: FontWeight.w700),
         ),
       ),
+      navigationBarTheme: NavigationBarThemeData(
+        backgroundColor: AppColors.superficie,
+        indicatorColor: AppColors.amarillo.withValues(alpha: 0.55),
+        height: 68,
+        labelTextStyle: WidgetStateProperty.resolveWith(
+          (estados) => TextStyle(
+            fontSize: 12.5,
+            fontWeight: estados.contains(WidgetState.selected) ? FontWeight.w800 : FontWeight.w600,
+            color: estados.contains(WidgetState.selected) ? AppColors.textoPrincipal : AppColors.textoSecundario,
+          ),
+        ),
+        iconTheme: WidgetStateProperty.resolveWith(
+          (estados) => IconThemeData(
+            color: estados.contains(WidgetState.selected) ? AppColors.azulNoche : AppColors.textoSecundario,
+          ),
+        ),
+      ),
       snackBarTheme: SnackBarThemeData(
         behavior: SnackBarBehavior.floating,
         backgroundColor: AppColors.azulNoche,
diff --git a/frontend/lib/controllers/comprobante_controller.dart b/frontend/lib/controllers/comprobante_controller.dart
new file mode 100644
index 0000000..ce00a7a
--- /dev/null
+++ b/frontend/lib/controllers/comprobante_controller.dart
@@ -0,0 +1,24 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../config/providers.dart';
+import '../models/factura.dart';
+import 'con_sesion.dart';
+
+/// Controlador (C) del comprobante: pide el XML de la factura al servidor y lo convierte en un [Factura].
+/// Un estado por reserva; se descarta al salir de la pantalla.
+class ComprobanteController extends AsyncNotifier<Factura> {
+  ComprobanteController(this.reservaId);
+
+  final int reservaId;
+
+  @override
+  Future<Factura> build() async {
+    final xml = await conSesion(ref, () => ref.read(reservaServiceProvider).comprobanteXml(reservaId));
+    return Factura.desdeXml(xml);
+  }
+}
+
+final comprobanteControllerProvider = AsyncNotifierProvider.autoDispose.family<ComprobanteController, Factura, int>(
+  ComprobanteController.new,
+  retry: (_, _) => null,
+);
diff --git a/frontend/lib/models/factura.dart b/frontend/lib/models/factura.dart
new file mode 100644
index 0000000..6f92e64
--- /dev/null
+++ b/frontend/lib/models/factura.dart
@@ -0,0 +1,116 @@
+import 'package:xml/xml.dart';
+
+import '../services/api_exception.dart';
+import 'vuelo.dart';
+
+/// Comprobante (factura) de una reserva, leído del XML que genera el servidor.
+///
+/// Estructura del XML (la de la práctica de clase):
+/// `factura/{cabecera/{numero,fecha}, cliente/{nombre,correo}, Detalle/producto/{Nombre,Asientos?,Cantidad,
+/// PrecioUnitario,Subtotal}, Totales/{Subtotal,PorcentajeIVA,IVA,Total}, Estado}`.
+/// Los montos son los guardados en la reserva; la app solo los muestra.
+class Factura {
+  const Factura({
+    required this.numero,
+    required this.fecha,
+    required this.clienteNombre,
+    required this.clienteCorreo,
+    required this.descripcion,
+    required this.asientos,
+    required this.cantidad,
+    required this.precioUnitarioCentavos,
+    required this.subtotalCentavos,
+    required this.ivaPorcentaje,
+    required this.ivaCentavos,
+    required this.totalCentavos,
+    required this.estado,
+    required this.xml,
+  });
+
+  /// Lee el XML. Cualquier cosa que no sea una factura válida lanza [InvalidResponseFailure].
+  factory Factura.desdeXml(String texto) {
+    final XmlDocument documento;
+    try {
+      documento = XmlDocument.parse(texto);
+    } on XmlException {
+      throw const InvalidResponseFailure();
+    }
+    final raiz = documento.rootElement;
+    if (raiz.name.local != 'factura') throw const InvalidResponseFailure();
+
+    String? dato(String ruta) {
+      XmlElement? nodo = raiz;
+      for (final parte in ruta.split('/')) {
+        nodo = nodo?.getElement(parte);
+      }
+      final valor = nodo?.innerText.trim();
+      return valor == null || valor.isEmpty ? null : valor;
+    }
+
+    final numero = dato('cabecera/numero');
+    final fecha = RegExp(r'^(\d{4})-(\d{2})-(\d{2})$').firstMatch(dato('cabecera/fecha') ?? '');
+    final nombre = dato('cliente/nombre');
+    final correo = dato('cliente/correo');
+    final descripcion = dato('Detalle/producto/Nombre');
+    final cantidad = int.tryParse(dato('Detalle/producto/Cantidad') ?? '');
+    final unitario = Formatos.centavosDe(dato('Detalle/producto/PrecioUnitario'));
+    final subtotalLinea = Formatos.centavosDe(dato('Detalle/producto/Subtotal'));
+    final subtotal = Formatos.centavosDe(dato('Totales/Subtotal'));
+    final porcentaje = dato('Totales/PorcentajeIVA');
+    final iva = Formatos.centavosDe(dato('Totales/IVA'));
+    final total = Formatos.centavosDe(dato('Totales/Total'));
+    final estado = dato('Estado');
+
+    if (numero == null ||
+        fecha == null ||
+        nombre == null ||
+        correo == null ||
+        descripcion == null ||
+        cantidad == null ||
+        unitario == null ||
+        subtotalLinea == null ||
+        subtotal == null ||
+        porcentaje == null ||
+        !RegExp(r'^\d{1,3}(\.\d{1,2})?$').hasMatch(porcentaje) ||
+        iva == null ||
+        total == null ||
+        estado == null) {
+      throw const InvalidResponseFailure();
+    }
+    return Factura(
+      numero: numero,
+      fecha: DateTime(int.parse(fecha[1]!), int.parse(fecha[2]!), int.parse(fecha[3]!)),
+      clienteNombre: nombre,
+      clienteCorreo: correo,
+      descripcion: descripcion,
+      asientos: (dato('Detalle/producto/Asientos') ?? '').split(',').map((a) => a.trim()).where((a) => a.isNotEmpty).toList(),
+      cantidad: cantidad,
+      precioUnitarioCentavos: unitario,
+      subtotalCentavos: subtotal,
+      ivaPorcentaje: porcentaje,
+      ivaCentavos: iva,
+      totalCentavos: total,
+      estado: estado,
+      xml: texto,
+    );
+  }
+
+  final String numero;
+  final DateTime fecha;
+  final String clienteNombre;
+  final String clienteCorreo;
+  final String descripcion;
+  final List<String> asientos;
+  final int cantidad;
+  final int precioUnitarioCentavos;
+  final int subtotalCentavos;
+  final String ivaPorcentaje;
+  final int ivaCentavos;
+  final int totalCentavos;
+  final String estado;
+
+  /// El XML tal como lo entregó el servidor (para el panel "Factura XML").
+  final String xml;
+
+  bool get anulada => estado.toLowerCase() == 'cancelada';
+}
diff --git a/frontend/lib/models/reserva.dart b/frontend/lib/models/reserva.dart
index 633454f..1948e1c 100644
--- a/frontend/lib/models/reserva.dart
+++ b/frontend/lib/models/reserva.dart
@@ -137,7 +137,10 @@ class Reserva {
   bool puedeEditarse({DateTime? ahora}) => !cancelada && !vuelo.yaPartio(ahora: ahora);
 
   /// Número de comprobante: "KEC-00000058".
-  String get numero => 'KEC-${id.toString().padLeft(8, '0')}';
+  String get numero => numeroDe(id);
+
+  /// "KEC-00000058" a partir del id (el mismo formato que usa el servidor en la factura).
+  static String numeroDe(int id) => 'KEC-${id.toString().padLeft(8, '0')}';
 }
 
 /// Una página del historial. Contrato: {"total", "pagina", "por_pagina", "total_paginas", "reservas": [...]}.
diff --git a/frontend/lib/pages/admin_page.dart b/frontend/lib/pages/admin_page.dart
index ce2e26e..016b7c8 100644
--- a/frontend/lib/pages/admin_page.dart
+++ b/frontend/lib/pages/admin_page.dart
@@ -13,6 +13,7 @@ import '../widgets/aviso.dart';
 import '../widgets/barra_kuntur.dart';
 import '../widgets/boton_degradado.dart';
 import '../widgets/campo_selector.dart';
+import '../widgets/navegacion_principal.dart';
 
 /// Panel del administrador (V): acceso a crear vuelos y gestión del IVA.
 /// Solo lo ve quien tiene rol admin (lo garantiza el router y, además, el servidor con 403).
@@ -24,7 +25,8 @@ class AdminPage extends ConsumerWidget {
     final iva = ref.watch(ivaControllerProvider);
 
     return Scaffold(
-      appBar: const BarraKuntur(conAtras: true),
+      appBar: const BarraKuntur(),
+      bottomNavigationBar: const NavegacionPrincipal(actual: Seccion.administracion),
       body: SafeArea(
         child: Center(
           child: ConstrainedBox(
diff --git a/frontend/lib/pages/comprobante_page.dart b/frontend/lib/pages/comprobante_page.dart
new file mode 100644
index 0000000..e84b7b3
--- /dev/null
+++ b/frontend/lib/pages/comprobante_page.dart
@@ -0,0 +1,243 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../config/app_router.dart';
+import '../config/app_theme.dart';
+import '../controllers/comprobante_controller.dart';
+import '../models/factura.dart';
+import '../models/reserva.dart';
+import '../models/vuelo.dart';
+import '../services/api_exception.dart';
+import '../widgets/aviso.dart';
+import '../widgets/barra_kuntur.dart';
+import '../widgets/logo_kuntur.dart';
+import '../widgets/migas.dart';
+import '../widgets/navegacion_principal.dart';
+
+enum _Vista { factura, xml }
+
+/// Comprobante de una reserva (V): la factura legible y, en otra pestaña, el XML tal como lo entrega el servidor.
+class ComprobantePage extends ConsumerStatefulWidget {
+  const ComprobantePage({super.key, required this.reservaId});
+
+  final int reservaId;
+
+  @override
+  ConsumerState<ComprobantePage> createState() => _ComprobantePageState();
+}
+
+class _ComprobantePageState extends ConsumerState<ComprobantePage> {
+  _Vista _vista = _Vista.factura;
+
+  @override
+  Widget build(BuildContext context) {
+    final factura = ref.watch(comprobanteControllerProvider(widget.reservaId));
+    final numero = Reserva.numeroDe(widget.reservaId);
+
+    return Scaffold(
+      appBar: const BarraKuntur(conAtras: true),
+      bottomNavigationBar: const NavegacionPrincipal(actual: Seccion.reservas),
+      body: SafeArea(
+        child: Center(
+          child: ConstrainedBox(
+            constraints: const BoxConstraints(maxWidth: 640),
+            child: ListView(
+              padding: const EdgeInsets.all(16),
+              children: [
+                Migas([
+                  const Miga('Mis reservas', ruta: AppRoutes.reservas),
+                  Miga(numero, ruta: AppRoutes.reserva(widget.reservaId)),
+                  const Miga('Comprobante'),
+                ]),
+                const SizedBox(height: 10),
+                const Text('Comprobante', style: AppTextStyles.titulo),
+                const SizedBox(height: 4),
+                const Text('La factura de su reserva, tal como la emitió el sistema.', style: AppTextStyles.cuerpo),
+                const SizedBox(height: 16),
+                if (factura.isLoading && !factura.hasValue)
+                  const Padding(padding: EdgeInsets.all(48), child: Center(child: CircularProgressIndicator()))
+                else if (factura.hasError && !factura.hasValue) ...[
+                  AvisoInline(texto: mensajeDeError(factura.error!)),
+                  const SizedBox(height: 12),
+                  Align(
+                    child: OutlinedButton.icon(
+                      onPressed: () => ref.invalidate(comprobanteControllerProvider(widget.reservaId)),
+                      icon: const Icon(Icons.refresh),
+                      label: const Text('Reintentar'),
+                    ),
+                  ),
+                ] else ...[
+                  SegmentedButton<_Vista>(
+                    showSelectedIcon: false,
+                    segments: const [
+                      ButtonSegment(value: _Vista.factura, icon: Icon(Icons.receipt_long_outlined), label: Text('Factura')),
+                      ButtonSegment(value: _Vista.xml, icon: Icon(Icons.code), label: Text('Factura XML')),
+                    ],
+                    selected: {_vista},
+                    onSelectionChanged: (v) => setState(() => _vista = v.first),
+                  ),
+                  const SizedBox(height: 16),
+                  if (_vista == _Vista.factura) _VistaFactura(factura: factura.value!) else _VistaXml(factura: factura.value!),
+                ],
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _VistaFactura extends StatelessWidget {
+  const _VistaFactura({required this.factura});
+
+  final Factura factura;
+
+  @override
+  Widget build(BuildContext context) {
+    final f = factura;
+    return Container(
+      padding: const EdgeInsets.all(22),
+      decoration: AppDecorations.tarjeta,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            children: [
+              const MarcaKuntur(tamanoLogo: 36, vertical: false),
+              const Spacer(),
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
+                decoration: BoxDecoration(
+                  color: f.anulada ? AppColors.errorSuave : AppColors.exitoSuave,
+                  borderRadius: BorderRadius.circular(20),
+                ),
+                child: Text(
+                  f.anulada ? 'Anulada' : f.estado,
+                  style: TextStyle(
+                    color: f.anulada ? AppColors.error : AppColors.exito,
+                    fontSize: 12.5,
+                    fontWeight: FontWeight.w800,
+                  ),
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 18),
+          Text('Factura ${f.numero}', style: AppTextStyles.titulo.copyWith(fontSize: 22)),
+          Text('Emitida el ${Formatos.fecha(f.fecha)}', style: AppTextStyles.cuerpo),
+          const Divider(height: 28, color: AppColors.divisor),
+          const _Etiqueta('Cliente'),
+          Text(f.clienteNombre, style: AppTextStyles.subtitulo.copyWith(fontSize: 16)),
+          Text(f.clienteCorreo, style: AppTextStyles.cuerpo),
+          const Divider(height: 28, color: AppColors.divisor),
+          const _Etiqueta('Detalle'),
+          Text(f.descripcion, style: AppTextStyles.subtitulo.copyWith(fontSize: 15)),
+          if (f.asientos.isNotEmpty) ...[
+            const SizedBox(height: 8),
+            Wrap(
+              spacing: 6,
+              runSpacing: 6,
+              children: [
+                for (final a in f.asientos)
+                  Container(
+                    padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
+                    decoration: BoxDecoration(color: AppColors.infoSuave, borderRadius: BorderRadius.circular(8)),
+                    child: Text('Asiento $a', style: const TextStyle(fontWeight: FontWeight.w700, color: AppColors.azul, fontSize: 12.5)),
+                  ),
+              ],
+            ),
+          ],
+          const SizedBox(height: 10),
+          _Linea('${f.cantidad} × ${Formatos.dinero(f.precioUnitarioCentavos)}', Formatos.dinero(f.subtotalCentavos)),
+          const Divider(height: 28, color: AppColors.divisor),
+          _Linea('Subtotal', Formatos.dinero(f.subtotalCentavos)),
+          _Linea('IVA (${Formatos.porcentaje(f.ivaPorcentaje)})', Formatos.dinero(f.ivaCentavos)),
+          const SizedBox(height: 6),
+          _Linea('Total', Formatos.dinero(f.totalCentavos), destacado: true),
+        ],
+      ),
+    );
+  }
+}
+
+class _VistaXml extends StatelessWidget {
+  const _VistaXml({required this.factura});
+
+  final Factura factura;
+
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Row(
+          children: [
+            const Expanded(
+              child: Text('Así lo entrega el servidor (application/xml).', style: AppTextStyles.nota),
+            ),
+            const SizedBox(width: 8),
+            OutlinedButton.icon(
+              onPressed: () async {
+                await Clipboard.setData(ClipboardData(text: factura.xml));
+                if (context.mounted) mostrarAviso(context, 'XML copiado al portapapeles.');
+              },
+              icon: const Icon(Icons.copy, size: 18),
+              label: const Text('Copiar XML'),
+              style: OutlinedButton.styleFrom(padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 14)),
+            ),
+          ],
+        ),
+        const SizedBox(height: 10),
+        Container(
+          padding: const EdgeInsets.all(16),
+          decoration: BoxDecoration(
+            color: AppColors.azulNoche,
+            borderRadius: BorderRadius.circular(16),
+          ),
+          child: SelectableText(
+            factura.xml,
+            style: const TextStyle(fontFamily: 'monospace', fontSize: 12.5, height: 1.5, color: Color(0xFFD6E4FF)),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class _Etiqueta extends StatelessWidget {
+  const _Etiqueta(this.texto);
+
+  final String texto;
+
+  @override
+  Widget build(BuildContext context) => Padding(
+        padding: const EdgeInsets.only(bottom: 4),
+        child: Text(texto.toUpperCase(), style: AppTextStyles.nota.copyWith(fontWeight: FontWeight.w800, letterSpacing: 0.8)),
+      );
+}
+
+class _Linea extends StatelessWidget {
+  const _Linea(this.etiqueta, this.valor, {this.destacado = false});
+
+  final String etiqueta;
+  final String valor;
+  final bool destacado;
+
+  @override
+  Widget build(BuildContext context) => Padding(
+        padding: const EdgeInsets.symmetric(vertical: 3),
+        child: Row(
+          children: [
+            Expanded(child: Text(etiqueta, style: destacado ? AppTextStyles.subtitulo.copyWith(fontSize: 16) : AppTextStyles.cuerpo)),
+            Text(
+              valor,
+              style: destacado
+                  ? const TextStyle(fontSize: 24, fontWeight: FontWeight.w800, color: AppColors.azul)
+                  : AppTextStyles.subtitulo.copyWith(fontSize: 15),
+            ),
+          ],
+        ),
+      );
+}
diff --git a/frontend/lib/pages/crear_vuelo_page.dart b/frontend/lib/pages/crear_vuelo_page.dart
index eb8df78..f8c3b7d 100644
--- a/frontend/lib/pages/crear_vuelo_page.dart
+++ b/frontend/lib/pages/crear_vuelo_page.dart
@@ -12,6 +12,8 @@ import '../widgets/aviso.dart';
 import '../widgets/barra_kuntur.dart';
 import '../widgets/boton_degradado.dart';
 import '../widgets/campo_selector.dart';
+import '../widgets/migas.dart';
+import '../widgets/navegacion_principal.dart';
 
 /// Formulario "Nuevo vuelo" (V). Solo el administrador llega aquí (lo garantiza el router
 /// y, en última instancia, el servidor con 403).
@@ -199,13 +201,19 @@ class _CrearVueloPageState extends ConsumerState<CrearVueloPage> {
 
     return Scaffold(
       appBar: const BarraKuntur(conAtras: true),
+      bottomNavigationBar: const NavegacionPrincipal(actual: Seccion.administracion),
       body: SafeArea(
         child: Center(
           child: ConstrainedBox(
             constraints: const BoxConstraints(maxWidth: 640),
             child: SingleChildScrollView(
               padding: const EdgeInsets.all(16),
-              child: Container(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  const Migas([Miga('Administración', ruta: AppRoutes.admin), Miga('Nuevo vuelo')]),
+                  const SizedBox(height: 12),
+                  Container(
                 padding: const EdgeInsets.all(22),
                 decoration: AppDecorations.tarjeta,
                 child: Form(
@@ -249,6 +257,8 @@ class _CrearVueloPageState extends ConsumerState<CrearVueloPage> {
                   ),
                 ),
               ),
+                ],
+              ),
             ),
           ),
         ),
diff --git a/frontend/lib/pages/reserva_detalle_page.dart b/frontend/lib/pages/reserva_detalle_page.dart
index 1dc3045..e1b66a6 100644
--- a/frontend/lib/pages/reserva_detalle_page.dart
+++ b/frontend/lib/pages/reserva_detalle_page.dart
@@ -12,6 +12,8 @@ import '../widgets/aviso.dart';
 import '../widgets/barra_kuntur.dart';
 import '../widgets/tarjeta_reserva.dart';
 import '../widgets/tarjeta_vuelo.dart';
+import '../widgets/migas.dart';
+import '../widgets/navegacion_principal.dart';
 
 /// Detalle de una reserva (V): asientos, montos y las acciones de cambiar asientos o cancelar.
 class ReservaDetallePage extends ConsumerWidget {
@@ -25,29 +27,23 @@ class ReservaDetallePage extends ConsumerWidget {
 
     return Scaffold(
       appBar: const BarraKuntur(conAtras: true),
+      bottomNavigationBar: const NavegacionPrincipal(actual: Seccion.reservas),
       body: SafeArea(
         child: Center(
           child: ConstrainedBox(
             constraints: const BoxConstraints(maxWidth: 640),
             child: SingleChildScrollView(
               padding: const EdgeInsets.all(16),
-              child: reserva.when(
-                loading: () => const Padding(padding: EdgeInsets.all(48), child: Center(child: CircularProgressIndicator())),
-                error: (error, _) => Column(
-                  crossAxisAlignment: CrossAxisAlignment.stretch,
-                  children: [
-                    AvisoInline(texto: mensajeDeError(error)),
-                    const SizedBox(height: 12),
-                    Align(
-                      child: OutlinedButton.icon(
-                        onPressed: () => ref.invalidate(reservaDetalleControllerProvider(reservaId)),
-                        icon: const Icon(Icons.refresh),
-                        label: const Text('Reintentar'),
-                      ),
-                    ),
-                  ],
-                ),
-                data: (r) => _Contenido(reserva: r),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  Migas([
+                    const Miga('Mis reservas', ruta: AppRoutes.reservas),
+                    Miga(Reserva.numeroDe(reservaId)),
+                  ]),
+                  const SizedBox(height: 12),
+                  _cuerpo(ref, reserva),
+                ],
               ),
             ),
           ),
@@ -55,6 +51,27 @@ class ReservaDetallePage extends ConsumerWidget {
       ),
     );
   }
+
+  Widget _cuerpo(WidgetRef ref, AsyncValue<Reserva> reserva) {
+    return reserva.when(
+      loading: () => const Padding(padding: EdgeInsets.all(48), child: Center(child: CircularProgressIndicator())),
+      error: (error, _) => Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          AvisoInline(texto: mensajeDeError(error)),
+          const SizedBox(height: 12),
+          Align(
+            child: OutlinedButton.icon(
+              onPressed: () => ref.invalidate(reservaDetalleControllerProvider(reservaId)),
+              icon: const Icon(Icons.refresh),
+              label: const Text('Reintentar'),
+            ),
+          ),
+        ],
+      ),
+      data: (r) => _Contenido(reserva: r),
+    );
+  }
 }
 
 class _Contenido extends ConsumerStatefulWidget {
@@ -160,6 +177,12 @@ class _ContenidoState extends ConsumerState<_Contenido> {
           ),
         ),
         const SizedBox(height: 14),
+        FilledButton.icon(
+          onPressed: () => context.push(AppRoutes.comprobante(r.id)),
+          icon: const Icon(Icons.receipt_long_outlined),
+          label: const Text('Ver comprobante (factura XML)'),
+        ),
+        const SizedBox(height: 10),
         if (r.cancelada)
           const AvisoInline(tipo: TipoAviso.info, texto: 'Esta reserva fue cancelada. Los asientos volvieron al vuelo.')
         else if (!editable)
diff --git a/frontend/lib/pages/reservas_page.dart b/frontend/lib/pages/reservas_page.dart
index c6a4426..2dfb338 100644
--- a/frontend/lib/pages/reservas_page.dart
+++ b/frontend/lib/pages/reservas_page.dart
@@ -10,6 +10,7 @@ import '../widgets/aviso.dart';
 import '../widgets/barra_kuntur.dart';
 import '../widgets/control_paginas.dart';
 import '../widgets/tarjeta_reserva.dart';
+import '../widgets/navegacion_principal.dart';
 
 /// "Mis reservas" (V): historial paginado del cliente.
 class ReservasPage extends ConsumerWidget {
@@ -20,7 +21,8 @@ class ReservasPage extends ConsumerWidget {
     final reservas = ref.watch(reservasControllerProvider);
 
     return Scaffold(
-      appBar: const BarraKuntur(conAtras: true),
+      appBar: const BarraKuntur(),
+      bottomNavigationBar: const NavegacionPrincipal(actual: Seccion.reservas),
       body: SafeArea(
         child: RefreshIndicator(
           onRefresh: () => ref.read(reservasControllerProvider.notifier).recargar(),
diff --git a/frontend/lib/pages/seleccion_asientos_page.dart b/frontend/lib/pages/seleccion_asientos_page.dart
index 4156950..79c214c 100644
--- a/frontend/lib/pages/seleccion_asientos_page.dart
+++ b/frontend/lib/pages/seleccion_asientos_page.dart
@@ -17,6 +17,7 @@ import '../widgets/asiento_boton.dart';
 import '../widgets/aviso.dart';
 import '../widgets/barra_kuntur.dart';
 import '../widgets/boton_degradado.dart';
+import '../widgets/migas.dart';
 import '../widgets/tarjeta_vuelo.dart';
 
 /// Elegir asientos en el mapa del avión (V).
@@ -164,13 +165,36 @@ class _MapaState extends ConsumerState<_Mapa> {
     final iva = ref.watch(ivaVigenteProvider).value;
     ref.watch(reservarControllerProvider); // lo mantiene vivo mientras se reserva (guarda el error del servidor)
 
-    return Scaffold(
-      appBar: const BarraKuntur(conAtras: true),
-      body: SafeArea(
-        child: Center(
-          child: ConstrainedBox(
-            constraints: const BoxConstraints(maxWidth: 640),
-            child: _contenido(vuelo, mapa, iva?.porcentaje),
+    // Con asientos elegidos (o cambios sin guardar) la flecha "Volver" pregunta antes de salir.
+    final conCambios = !_enviando && (_editando ? !_sinCambios : !_seleccion.vacia);
+
+    return PopScope(
+      canPop: !conCambios,
+      onPopInvokedWithResult: (salio, _) async {
+        if (salio) return;
+        final salir = await showDialog<bool>(
+          context: context,
+          builder: (ctx) => AlertDialog(
+            title: const Text('¿Salir sin guardar?'),
+            content: Text(_editando
+                ? 'Los cambios en sus asientos no se guardarán.'
+                : 'Los asientos que eligió no se reservarán.'),
+            actions: [
+              TextButton(onPressed: () => Navigator.pop(ctx, false), child: const Text('Seguir eligiendo')),
+              FilledButton(onPressed: () => Navigator.pop(ctx, true), child: const Text('Salir')),
+            ],
+          ),
+        );
+        if (salir == true && context.mounted) context.pop();
+      },
+      child: Scaffold(
+        appBar: const BarraKuntur(conAtras: true),
+        body: SafeArea(
+          child: Center(
+            child: ConstrainedBox(
+              constraints: const BoxConstraints(maxWidth: 640),
+              child: _contenido(vuelo, mapa, iva?.porcentaje),
+            ),
           ),
         ),
       ),
@@ -218,8 +242,27 @@ class _MapaState extends ConsumerState<_Mapa> {
           child: ListView(
             padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
             children: [
+              Migas(_editando
+                  ? [
+                      const Miga('Mis reservas', ruta: AppRoutes.reservas),
+                      Miga(widget.reserva!.numero, ruta: AppRoutes.reserva(widget.reserva!.id)),
+                      const Miga('Cambiar asientos'),
+                    ]
+                  : [
+                      const Miga('Vuelos', ruta: AppRoutes.inicio),
+                      Miga(v.codigo, ruta: AppRoutes.vuelo(v.id)),
+                      const Miga('Elegir asientos'),
+                    ]),
+              const SizedBox(height: 10),
               _CabeceraVuelo(vuelo: v, onActualizar: actualizando ? null : _actualizarMapa, libres: m.libres),
-              const SizedBox(height: 14),
+              const SizedBox(height: 12),
+              Text(
+                _editando
+                    ? 'Toque un asiento para soltarlo o elegir otro. Los marcados en rojo son de otras personas.'
+                    : 'Toque los asientos que quiere (hasta ${SeleccionAsientos.maximo}). Los marcados en rojo ya están ocupados.',
+                style: AppTextStyles.cuerpo,
+              ),
+              const SizedBox(height: 10),
               const _Leyenda(),
               const SizedBox(height: 12),
               Opacity(
diff --git a/frontend/lib/pages/vuelo_detalle_page.dart b/frontend/lib/pages/vuelo_detalle_page.dart
index d4b90a9..5b472d3 100644
--- a/frontend/lib/pages/vuelo_detalle_page.dart
+++ b/frontend/lib/pages/vuelo_detalle_page.dart
@@ -11,6 +11,9 @@ import '../widgets/barra_kuntur.dart';
 import '../widgets/etiqueta_asientos.dart';
 import '../widgets/panel_reserva.dart';
 import '../widgets/tarjeta_vuelo.dart';
+import '../config/app_router.dart';
+import '../widgets/migas.dart';
+import '../widgets/navegacion_principal.dart';
 
 /// Detalle de un vuelo (V): datos del vuelo y, para clientes, el panel para reservar.
 class VueloDetallePage extends ConsumerWidget {
@@ -24,22 +27,33 @@ class VueloDetallePage extends ConsumerWidget {
 
     return Scaffold(
       appBar: const BarraKuntur(conAtras: true),
+      bottomNavigationBar: const NavegacionPrincipal(actual: Seccion.vuelos),
       body: SafeArea(
         child: Center(
           child: ConstrainedBox(
             constraints: const BoxConstraints(maxWidth: 640),
             child: SingleChildScrollView(
               padding: const EdgeInsets.all(16),
-              child: vuelo.when(
-                loading: () => const Padding(
-                  padding: EdgeInsets.all(48),
-                  child: Center(child: CircularProgressIndicator()),
-                ),
-                error: (error, _) => _Error(
-                  mensaje: mensajeDeError(error),
-                  onReintentar: () => ref.invalidate(vueloDetalleControllerProvider(vueloId)),
-                ),
-                data: (v) => _Detalle(vuelo: v),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  Migas([
+                    const Miga('Vuelos', ruta: AppRoutes.inicio),
+                    Miga(vuelo.value?.codigo ?? 'Detalle del vuelo'),
+                  ]),
+                  const SizedBox(height: 12),
+                  vuelo.when(
+                    loading: () => const Padding(
+                      padding: EdgeInsets.all(48),
+                      child: Center(child: CircularProgressIndicator()),
+                    ),
+                    error: (error, _) => _Error(
+                      mensaje: mensajeDeError(error),
+                      onReintentar: () => ref.invalidate(vueloDetalleControllerProvider(vueloId)),
+                    ),
+                    data: (v) => _Detalle(vuelo: v),
+                  ),
+                ],
               ),
             ),
           ),
diff --git a/frontend/lib/pages/vuelos_page.dart b/frontend/lib/pages/vuelos_page.dart
index 651b047..9759a84 100644
--- a/frontend/lib/pages/vuelos_page.dart
+++ b/frontend/lib/pages/vuelos_page.dart
@@ -14,6 +14,7 @@ import '../widgets/barra_kuntur.dart';
 import '../widgets/control_paginas.dart';
 import '../widgets/campo_selector.dart';
 import '../widgets/tarjeta_vuelo.dart';
+import '../widgets/navegacion_principal.dart';
 
 /// Pantalla principal (V): búsqueda y lista de vuelos. No llama a la API: delega en
 /// [VuelosController] y en [FiltroVuelosController].
@@ -29,27 +30,8 @@ class VuelosPage extends ConsumerWidget {
     final filtro = ref.watch(filtroVuelosProvider);
 
     return Scaffold(
-      appBar: BarraKuntur(
-        acciones: [
-          if (!usuario.esAdmin)
-            IconButton(
-              tooltip: 'Mis reservas',
-              icon: const Icon(Icons.confirmation_number_outlined),
-              onPressed: () => context.push(AppRoutes.reservas),
-            ),
-          if (usuario.esAdmin)
-            IconButton(
-              tooltip: 'Panel de administración',
-              icon: const Icon(Icons.admin_panel_settings_outlined),
-              onPressed: () => context.push(AppRoutes.admin),
-            ),
-          IconButton(
-            tooltip: 'Estado del servicio',
-            icon: const Icon(Icons.cloud_done_outlined),
-            onPressed: () => context.push(AppRoutes.estado),
-          ),
-        ],
-      ),
+      appBar: const BarraKuntur(),
+      bottomNavigationBar: const NavegacionPrincipal(actual: Seccion.vuelos),
       floatingActionButton: usuario.esAdmin
           ? FloatingActionButton.extended(
               onPressed: () => context.push(AppRoutes.nuevoVuelo),
diff --git a/frontend/lib/widgets/barra_kuntur.dart b/frontend/lib/widgets/barra_kuntur.dart
index 9fa8b54..f833cab 100644
--- a/frontend/lib/widgets/barra_kuntur.dart
+++ b/frontend/lib/widgets/barra_kuntur.dart
@@ -3,16 +3,20 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 
 import '../config/app_router.dart';
+import '../config/app_theme.dart';
 import '../controllers/sesion_controller.dart';
 import 'franja_tricolor.dart';
 import 'logo_kuntur.dart';
 
-/// Barra superior de las pantallas con sesión: marca, botón atrás (si [conAtras]) y cerrar sesión.
+/// Barra superior de las pantallas con sesión.
+///
+/// - Logo y nombre: tocarlos lleva siempre al inicio (así nadie se pierde).
+/// - Flecha "Volver" (si [conAtras]).
+/// - Menú de cuenta: quién está conectado, estado del servicio y cerrar sesión (con confirmación).
 class BarraKuntur extends ConsumerWidget implements PreferredSizeWidget {
-  const BarraKuntur({super.key, this.conAtras = false, this.acciones = const []});
+  const BarraKuntur({super.key, this.conAtras = false});
 
   final bool conAtras;
-  final List<Widget> acciones;
 
   @override
   Size get preferredSize => const Size.fromHeight(kToolbarHeight + 5);
@@ -23,22 +27,124 @@ class BarraKuntur extends ConsumerWidget implements PreferredSizeWidget {
       automaticallyImplyLeading: false,
       leading: conAtras
           ? IconButton(
-              tooltip: 'Volver a los vuelos',
+              tooltip: 'Volver',
               icon: const Icon(Icons.arrow_back),
-              onPressed: () => context.canPop() ? context.pop() : context.go(AppRoutes.inicio),
+              // maybePop (y no pop) respeta los avisos de "¿Salir sin guardar?" de las pantallas que los tengan.
+              onPressed: () => context.canPop() ? Navigator.of(context).maybePop() : context.go(AppRoutes.inicio),
             )
           : null,
-      title: const MarcaKuntur(tamanoLogo: 34, vertical: false, enOscuro: true),
+      titleSpacing: conAtras ? 0 : null,
+      title: Semantics(
+        button: true,
+        label: 'Kuntur EC, ir al inicio',
+        excludeSemantics: true,
+        child: Tooltip(
+          message: 'Ir al inicio',
+          child: InkWell(
+            borderRadius: BorderRadius.circular(10),
+            onTap: () => context.go(AppRoutes.inicio),
+            child: const Padding(
+              padding: EdgeInsets.symmetric(vertical: 4, horizontal: 4),
+              child: MarcaKuntur(tamanoLogo: 34, vertical: false, enOscuro: true),
+            ),
+          ),
+        ),
+      ),
       bottom: const PreferredSize(preferredSize: Size.fromHeight(5), child: FranjaTricolor()),
-      actions: [
-        ...acciones,
-        IconButton(
-          tooltip: 'Cerrar sesión',
-          icon: const Icon(Icons.logout),
-          onPressed: () => ref.read(sesionControllerProvider.notifier).cerrarSesion(),
+      actions: const [MenuCuenta(), SizedBox(width: 8)],
+    );
+  }
+}
+
+/// Avatar con las iniciales del usuario; al tocarlo muestra sus datos y las opciones de la cuenta.
+class MenuCuenta extends ConsumerWidget {
+  const MenuCuenta({super.key});
+
+  static const _estado = 'estado';
+  static const _salir = 'salir';
+
+  Future<void> _cerrarSesion(BuildContext context, WidgetRef ref) async {
+    final confirmado = await showDialog<bool>(
+      context: context,
+      builder: (ctx) => AlertDialog(
+        title: const Text('¿Cerrar sesión?'),
+        content: const Text('Tendrá que volver a ingresar su correo y contraseña para entrar.'),
+        actions: [
+          TextButton(onPressed: () => Navigator.pop(ctx, false), child: const Text('Seguir conectado')),
+          FilledButton(onPressed: () => Navigator.pop(ctx, true), child: const Text('Sí, cerrar sesión')),
+        ],
+      ),
+    );
+    if (confirmado == true) await ref.read(sesionControllerProvider.notifier).cerrarSesion();
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final usuario = ref.watch(sesionControllerProvider).value;
+    if (usuario == null) return const SizedBox.shrink();
+
+    return PopupMenuButton<String>(
+      tooltip: 'Cuenta de ${usuario.nombre}',
+      offset: const Offset(0, 48),
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
+      onSelected: (valor) {
+        if (valor == _estado) context.push(AppRoutes.estado);
+        if (valor == _salir) _cerrarSesion(context, ref);
+      },
+      itemBuilder: (_) => [
+        PopupMenuItem<String>(
+          enabled: false,
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Text(usuario.nombre, style: AppTextStyles.subtitulo.copyWith(fontSize: 15)),
+              Text(usuario.correo, style: AppTextStyles.nota),
+              const SizedBox(height: 6),
+              Container(
+                padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 3),
+                decoration: BoxDecoration(
+                  color: usuario.esAdmin ? AppColors.avisoSuave : AppColors.infoSuave,
+                  borderRadius: BorderRadius.circular(20),
+                ),
+                child: Text(
+                  usuario.esAdmin ? 'Administrador' : 'Cliente',
+                  style: const TextStyle(fontSize: 12, fontWeight: FontWeight.w700, color: AppColors.textoPrincipal),
+                ),
+              ),
+            ],
+          ),
+        ),
+        const PopupMenuDivider(),
+        const PopupMenuItem<String>(
+          value: _estado,
+          child: ListTile(
+            dense: true,
+            contentPadding: EdgeInsets.zero,
+            leading: Icon(Icons.cloud_done_outlined),
+            title: Text('Estado del servicio'),
+          ),
+        ),
+        const PopupMenuItem<String>(
+          value: _salir,
+          child: ListTile(
+            dense: true,
+            contentPadding: EdgeInsets.zero,
+            leading: Icon(Icons.logout, color: AppColors.error),
+            title: Text('Cerrar sesión', style: TextStyle(color: AppColors.error, fontWeight: FontWeight.w700)),
+          ),
         ),
-        const SizedBox(width: 8),
       ],
+      child: Padding(
+        padding: const EdgeInsets.all(6),
+        child: CircleAvatar(
+          radius: 18,
+          backgroundColor: AppColors.amarillo,
+          child: Text(
+            usuario.iniciales,
+            style: const TextStyle(color: AppColors.azulNoche, fontWeight: FontWeight.w800, fontSize: 14),
+          ),
+        ),
+      ),
     );
   }
 }
diff --git a/frontend/lib/widgets/migas.dart b/frontend/lib/widgets/migas.dart
new file mode 100644
index 0000000..61b6b12
--- /dev/null
+++ b/frontend/lib/widgets/migas.dart
@@ -0,0 +1,57 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+import '../config/app_theme.dart';
+
+/// Un tramo del camino: "Mis reservas" (con [ruta], se puede tocar) o "KEC-0058" (el último, sin [ruta]).
+class Miga {
+  const Miga(this.texto, {this.ruta});
+
+  final String texto;
+  final String? ruta;
+}
+
+/// Migas de pan: "Vuelos › KT101 › Elegir asientos". Muestran dónde está el usuario y permiten
+/// volver a cualquier nivel anterior con un toque.
+class Migas extends StatelessWidget {
+  const Migas(this.items, {super.key});
+
+  final List<Miga> items;
+
+  @override
+  Widget build(BuildContext context) {
+    final tramos = <Widget>[];
+    for (var i = 0; i < items.length; i++) {
+      final miga = items[i];
+      final ultima = i == items.length - 1;
+      if (i > 0) {
+        tramos.add(const Icon(Icons.chevron_right, size: 18, color: AppColors.textoSuave));
+      }
+      tramos.add(
+        ultima || miga.ruta == null
+            ? Text(miga.texto, style: AppTextStyles.nota.copyWith(fontWeight: FontWeight.w800, color: AppColors.textoPrincipal))
+            : Semantics(
+                button: true,
+                label: 'Ir a ${miga.texto}',
+                excludeSemantics: true,
+                child: InkWell(
+                  borderRadius: BorderRadius.circular(6),
+                  onTap: () => context.go(miga.ruta!),
+                  child: Padding(
+                    padding: const EdgeInsets.symmetric(vertical: 4, horizontal: 2),
+                    child: Text(
+                      miga.texto,
+                      style: AppTextStyles.nota.copyWith(color: AppColors.azul, fontWeight: FontWeight.w700, decoration: TextDecoration.underline),
+                    ),
+                  ),
+                ),
+              ),
+      );
+    }
+    return Semantics(
+      container: true,
+      label: 'Ruta de navegación',
+      child: Wrap(crossAxisAlignment: WrapCrossAlignment.center, spacing: 2, runSpacing: 0, children: tramos),
+    );
+  }
+}
diff --git a/frontend/lib/widgets/navegacion_principal.dart b/frontend/lib/widgets/navegacion_principal.dart
new file mode 100644
index 0000000..6c6fabd
--- /dev/null
+++ b/frontend/lib/widgets/navegacion_principal.dart
@@ -0,0 +1,60 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:go_router/go_router.dart';
+
+import '../config/app_router.dart';
+import '../controllers/sesion_controller.dart';
+
+/// Secciones principales de la app.
+enum Seccion { vuelos, reservas, administracion }
+
+/// Barra de navegación inferior, siempre visible: el usuario sabe dónde está y puede ir a
+/// cualquier sección con un toque, sin depender del botón "Volver".
+///
+/// Cliente: Vuelos · Mis reservas. Administrador: Vuelos · Administración.
+class NavegacionPrincipal extends ConsumerWidget {
+  const NavegacionPrincipal({super.key, required this.actual});
+
+  /// Sección a la que pertenece la pantalla actual (se resalta).
+  final Seccion actual;
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final usuario = ref.watch(sesionControllerProvider).value;
+    if (usuario == null) return const SizedBox.shrink();
+
+    final secciones = usuario.esAdmin
+        ? const [Seccion.vuelos, Seccion.administracion]
+        : const [Seccion.vuelos, Seccion.reservas];
+    final indice = secciones.indexOf(actual).clamp(0, secciones.length - 1);
+
+    return NavigationBar(
+      selectedIndex: indice,
+      onDestinationSelected: (i) => context.go(switch (secciones[i]) {
+        Seccion.vuelos => AppRoutes.inicio,
+        Seccion.reservas => AppRoutes.reservas,
+        Seccion.administracion => AppRoutes.admin,
+      }),
+      destinations: [
+        for (final s in secciones)
+          switch (s) {
+            Seccion.vuelos => const NavigationDestination(
+                icon: Icon(Icons.flight_takeoff_outlined),
+                selectedIcon: Icon(Icons.flight_takeoff),
+                label: 'Vuelos',
+              ),
+            Seccion.reservas => const NavigationDestination(
+                icon: Icon(Icons.confirmation_number_outlined),
+                selectedIcon: Icon(Icons.confirmation_number),
+                label: 'Mis reservas',
+              ),
+            Seccion.administracion => const NavigationDestination(
+                icon: Icon(Icons.admin_panel_settings_outlined),
+                selectedIcon: Icon(Icons.admin_panel_settings),
+                label: 'Administración',
+              ),
+          },
+      ],
+    );
+  }
+}
diff --git a/frontend/test/app_router_test.dart b/frontend/test/app_router_test.dart
index e73285d..a18af37 100644
--- a/frontend/test/app_router_test.dart
+++ b/frontend/test/app_router_test.dart
@@ -132,8 +132,7 @@ void main() {
       });
       await abrirApp(tester, client: client, tokens: tokens);
 
-      await tester.tap(find.byTooltip('Cerrar sesión'));
-      await tester.pumpAndSettle();
+      await cerrarSesionDesdeElMenu(tester);
 
       expect(client.rutasSolicitadas, ['GET /auth/perfil', 'GET /vuelos', 'POST /auth/logout']);
       expect(await tokens.leer(), isNull);
@@ -149,8 +148,7 @@ void main() {
       });
       await abrirApp(tester, client: client, tokens: tokens);
 
-      await tester.tap(find.byTooltip('Cerrar sesión'));
-      await tester.pumpAndSettle();
+      await cerrarSesionDesdeElMenu(tester);
 
       expect(await tokens.leer(), isNull);
       expect(find.byType(LoginPage), findsOneWidget);
diff --git a/frontend/test/helpers/app_helper.dart b/frontend/test/helpers/app_helper.dart
index ba67faf..01a802c 100644
--- a/frontend/test/helpers/app_helper.dart
+++ b/frontend/test/helpers/app_helper.dart
@@ -52,3 +52,13 @@ Future<void> tocarBoton(WidgetTester tester, String texto) async {
   await tester.tap(find.text(texto));
   await tester.pump();
 }
+
+/// Abre el menú de cuenta (el avatar de la barra superior) y cierra la sesión confirmando el aviso.
+Future<void> cerrarSesionDesdeElMenu(WidgetTester tester) async {
+  await tester.tap(find.byWidgetPredicate((w) => w is PopupMenuButton));
+  await tester.pumpAndSettle();
+  await tester.tap(find.text('Cerrar sesión'));
+  await tester.pumpAndSettle();
+  await tester.tap(find.text('Sí, cerrar sesión'));
+  await tester.pumpAndSettle();
+}
diff --git a/frontend/test/helpers/fakes.dart b/frontend/test/helpers/fakes.dart
index f5ee5bb..1bc472b 100644
--- a/frontend/test/helpers/fakes.dart
+++ b/frontend/test/helpers/fakes.dart
@@ -262,3 +262,47 @@ Map<String, Object?> mapaJson({int vueloId = 3, int capacidad = 12, List<String>
       'columnas': ['A', 'B', 'C', 'D'],
       'ocupados': ocupados,
     };
+
+/// XML de una factura tal como lo genera el servidor (con sangría y declaración).
+String facturaXml({
+  String numero = 'KEC-00000058',
+  String fecha = '2026-11-11',
+  String nombre = 'Ana Torres',
+  String correo = 'ana@correo.com',
+  String descripcion = 'Pasaje KT101 Quito - Guayaquil (2030-12-01 07:00)',
+  String? asientos = '1A, 1B',
+  String cantidad = '2',
+  String unitario = '89.00',
+  String subtotal = '178.00',
+  String porcentaje = '15.00',
+  String iva = '26.70',
+  String total = '204.70',
+  String estado = 'Confirmada',
+}) =>
+    '''<?xml version="1.0" encoding="utf-8"?>
+<factura>
+  <cabecera>
+    <numero>$numero</numero>
+    <fecha>$fecha</fecha>
+  </cabecera>
+  <cliente>
+    <nombre>$nombre</nombre>
+    <correo>$correo</correo>
+  </cliente>
+  <Detalle>
+    <producto>
+      <Nombre>$descripcion</Nombre>
+${asientos == null ? '' : '      <Asientos>$asientos</Asientos>\n'}      <Cantidad>$cantidad</Cantidad>
+      <PrecioUnitario>$unitario</PrecioUnitario>
+      <Subtotal>$subtotal</Subtotal>
+    </producto>
+  </Detalle>
+  <Totales>
+    <Subtotal>$subtotal</Subtotal>
+    <PorcentajeIVA>$porcentaje</PorcentajeIVA>
+    <IVA>$iva</IVA>
+    <Total>$total</Total>
+  </Totales>
+  <Estado>$estado</Estado>
+</factura>
+''';
diff --git a/frontend/test/models/factura_test.dart b/frontend/test/models/factura_test.dart
new file mode 100644
index 0000000..2434b7b
--- /dev/null
+++ b/frontend/test/models/factura_test.dart
@@ -0,0 +1,74 @@
+import 'package:flutter_test/flutter_test.dart';
+import 'package:vuelos_app/models/factura.dart';
+import 'package:vuelos_app/services/api_exception.dart';
+
+import '../helpers/fakes.dart';
+
+void main() {
+  group('Factura.desdeXml', () {
+    test('lee la factura que genera el servidor', () {
+      final f = Factura.desdeXml(facturaXml());
+      expect(f.numero, 'KEC-00000058');
+      expect(f.fecha, DateTime(2026, 11, 11));
+      expect(f.clienteNombre, 'Ana Torres');
+      expect(f.clienteCorreo, 'ana@correo.com');
+      expect(f.descripcion, contains('KT101'));
+      expect(f.asientos, ['1A', '1B']);
+      expect(f.cantidad, 2);
+      expect((f.precioUnitarioCentavos, f.subtotalCentavos, f.ivaCentavos, f.totalCentavos), (8900, 17800, 2670, 20470));
+      expect(f.ivaPorcentaje, '15.00');
+      expect(f.estado, 'Confirmada');
+      expect(f.anulada, isFalse);
+    });
+
+    test('conserva el XML original para mostrarlo', () {
+      final xml = facturaXml();
+      expect(Factura.desdeXml(xml).xml, xml);
+    });
+
+    test('una factura sin asientos (reservas antiguas) también se lee', () {
+      expect(Factura.desdeXml(facturaXml(asientos: null)).asientos, isEmpty);
+    });
+
+    test('una reserva cancelada se reconoce como anulada', () {
+      expect(Factura.desdeXml(facturaXml(estado: 'Cancelada')).anulada, isTrue);
+    });
+
+    test('los caracteres especiales del XML llegan como texto, no se interpretan', () {
+      final f = Factura.desdeXml(facturaXml(nombre: 'Ana &lt;script&gt;alert(1)&lt;/script&gt; &amp; Co'));
+      expect(f.clienteNombre, 'Ana <script>alert(1)</script> & Co');
+    });
+
+    test('los montos se leen en centavos exactos, sin decimales flotantes', () {
+      final f = Factura.desdeXml(facturaXml(unitario: '0.10', subtotal: '0.30', iva: '0.05', total: '0.35', cantidad: '3'));
+      expect((f.precioUnitarioCentavos, f.subtotalCentavos, f.ivaCentavos, f.totalCentavos), (10, 30, 5, 35));
+    });
+
+    test('todo lo que no sea una factura válida es InvalidResponseFailure', () {
+      for (final malo in <String>[
+        '',
+        'esto no es xml',
+        '<factura><cabecera>',
+        '<otra><cosa/></otra>',
+        '<factura/>',
+        '{"json": true}',
+        facturaXml(total: 'mucho'),
+        facturaXml(cantidad: 'dos'),
+        facturaXml(fecha: '11/11/2026'),
+        facturaXml(porcentaje: '1500'),
+        facturaXml(numero: ''),
+        facturaXml(correo: ''),
+        facturaXml().replaceAll('<Estado>Confirmada</Estado>', ''),
+        facturaXml().replaceAll('<Totales>', '<Totales2>').replaceAll('</Totales>', '</Totales2>'),
+        '<?xml version="1.0"?><!DOCTYPE x [<!ENTITY e SYSTEM "file:///etc/passwd">]><factura>&e;</factura>',
+      ]) {
+        expect(() => Factura.desdeXml(malo), throwsA(isA<InvalidResponseFailure>()), reason: malo.length > 60 ? malo.substring(0, 60) : malo);
+      }
+    });
+
+    test('un XML enorme no rompe el lector', () {
+      final grande = facturaXml(descripcion: 'Pasaje ${'x' * 200000}');
+      expect(Factura.desdeXml(grande).descripcion.length, greaterThan(200000));
+    });
+  });
+}
diff --git a/frontend/test/pages/admin_y_paginacion_test.dart b/frontend/test/pages/admin_y_paginacion_test.dart
index 066920d..12870a8 100644
--- a/frontend/test/pages/admin_y_paginacion_test.dart
+++ b/frontend/test/pages/admin_y_paginacion_test.dart
@@ -152,7 +152,7 @@ void main() {
   group('panel de administración', () {
     testWidgets('el cliente no ve el botón del panel y la ruta lo devuelve a la lista', (tester) async {
       await _abrir(tester, {'GET /vuelos': sinVuelos});
-      expect(find.byTooltip('Panel de administración'), findsNothing);
+      expect(find.text('Administración'), findsNothing);
 
       _irA(tester, AppRoutes.admin);
       await tester.pumpAndSettle();
@@ -163,7 +163,7 @@ void main() {
     testWidgets('el administrador abre el panel y ve el IVA vigente y el historial', (tester) async {
       await _abrir(tester, {'GET /vuelos': sinVuelos, 'GET /iva': respuestaIva}, usuario: usuarioAdmin);
 
-      await tester.tap(find.byTooltip('Panel de administración'));
+      await tester.tap(find.text('Administración'));
       await tester.pumpAndSettle();
 
       expect(find.byType(AdminPage), findsOneWidget);
diff --git a/frontend/test/pages/comprobante_test.dart b/frontend/test/pages/comprobante_test.dart
new file mode 100644
index 0000000..bfbba52
--- /dev/null
+++ b/frontend/test/pages/comprobante_test.dart
@@ -0,0 +1,184 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:vuelos_app/config/app_router.dart';
+import 'package:vuelos_app/pages/comprobante_page.dart';
+import 'package:vuelos_app/pages/login_page.dart';
+import 'package:vuelos_app/pages/vuelos_page.dart';
+import 'package:vuelos_app/services/api_exception.dart';
+
+import '../helpers/app_helper.dart';
+import '../helpers/fakes.dart';
+
+Future<RouteFakeRestClient> _abrir(WidgetTester tester, Map<String, Object?> rutas, {Object usuario = usuarioAna}) async {
+  final client = RouteFakeRestClient({
+    'GET /auth/perfil': {'usuario': usuario},
+    'GET /vuelos': respuestaVuelos,
+    'GET /iva': respuestaIva,
+    'GET /reservas/58': reservaJson(),
+    ...rutas,
+  });
+  await abrirApp(tester, client: client, tokens: InMemoryTokenStorage('jwt'));
+  return client;
+}
+
+Future<void> _ir(WidgetTester tester, String ruta) async {
+  ProviderScope.containerOf(tester.element(find.byType(MaterialApp))).read(appRouterProvider).push(ruta);
+  await tester.pumpAndSettle();
+}
+
+void main() {
+  group('desde la reserva', () {
+    testWidgets('el botón "Ver comprobante" abre la factura', (tester) async {
+      await _abrir(tester, {'GET /reservas/58/comprobante': facturaXml()});
+      await _ir(tester, AppRoutes.reserva(58));
+
+      await tester.tap(find.text('Ver comprobante (factura XML)'));
+      await tester.pumpAndSettle();
+
+      expect(find.byType(ComprobantePage), findsOneWidget);
+    });
+
+    testWidgets('también se ofrece en una reserva cancelada (queda como anulada)', (tester) async {
+      await _abrir(tester, {
+        'GET /reservas/58': reservaJson(estado: 'cancelada'),
+        'GET /reservas/58/comprobante': facturaXml(estado: 'Cancelada'),
+      });
+      await _ir(tester, AppRoutes.reserva(58));
+      await tester.tap(find.text('Ver comprobante (factura XML)'));
+      await tester.pumpAndSettle();
+
+      expect(find.text('Anulada'), findsOneWidget);
+    });
+  });
+
+  group('la factura', () {
+    testWidgets('muestra número, fecha, cliente, asientos, montos e IVA', (tester) async {
+      await _abrir(tester, {'GET /reservas/58/comprobante': facturaXml()});
+      await _ir(tester, AppRoutes.comprobante(58));
+
+      expect(find.text('Factura KEC-00000058'), findsOneWidget);
+      expect(find.textContaining('Emitida el'), findsOneWidget);
+      expect(find.text('Ana Torres'), findsOneWidget);
+      expect(find.text('ana@correo.com'), findsOneWidget);
+      expect(find.textContaining('Pasaje KT101'), findsOneWidget);
+      expect(find.text('Asiento 1A'), findsOneWidget);
+      expect(find.text('Asiento 1B'), findsOneWidget);
+      expect(find.text(r'2 × $89.00'), findsOneWidget);
+      expect(find.text(r'$178.00'), findsWidgets);
+      expect(find.text('IVA (15 %)'), findsOneWidget);
+      expect(find.text(r'$26.70'), findsOneWidget);
+      expect(find.text(r'$204.70'), findsOneWidget);
+      expect(find.text('Confirmada'), findsOneWidget);
+    });
+
+    testWidgets('pide el comprobante a la ruta correcta', (tester) async {
+      final api = await _abrir(tester, {'GET /reservas/58/comprobante': facturaXml()});
+      await _ir(tester, AppRoutes.comprobante(58));
+      expect(api.rutasSolicitadas, contains('GET /reservas/58/comprobante'));
+    });
+
+    testWidgets('un nombre con caracteres raros se ve como texto, sin interpretarse', (tester) async {
+      await _abrir(tester, {'GET /reservas/58/comprobante': facturaXml(nombre: 'Ana &lt;b&gt;Negrita&lt;/b&gt; &amp; Co')});
+      await _ir(tester, AppRoutes.comprobante(58));
+      expect(find.text('Ana <b>Negrita</b> & Co'), findsOneWidget);
+    });
+  });
+
+  group('el panel Factura XML', () {
+    testWidgets('muestra el XML tal como lo entrega el servidor', (tester) async {
+      await _abrir(tester, {'GET /reservas/58/comprobante': facturaXml()});
+      await _ir(tester, AppRoutes.comprobante(58));
+
+      await tester.tap(find.text('Factura XML'));
+      await tester.pumpAndSettle();
+
+      expect(find.textContaining('<factura>', findRichText: true), findsOneWidget);
+      expect(find.textContaining('<numero>KEC-00000058</numero>', findRichText: true), findsOneWidget);
+      expect(find.text('Copiar XML'), findsOneWidget);
+      expect(find.text('Factura KEC-00000058'), findsNothing); // la vista legible ya no está
+    });
+
+    testWidgets('Copiar XML lo deja en el portapapeles y avisa', (tester) async {
+      String? copiado;
+      tester.binding.defaultBinaryMessenger.setMockMethodCallHandler(SystemChannels.platform, (llamada) async {
+        if (llamada.method == 'Clipboard.setData') copiado = (llamada.arguments as Map)['text'] as String?;
+        return null;
+      });
+      addTearDown(() => tester.binding.defaultBinaryMessenger.setMockMethodCallHandler(SystemChannels.platform, null));
+      final xml = facturaXml();
+      await _abrir(tester, {'GET /reservas/58/comprobante': xml});
+      await _ir(tester, AppRoutes.comprobante(58));
+      await tester.tap(find.text('Factura XML'));
+      await tester.pumpAndSettle();
+
+      await tester.tap(find.text('Copiar XML'));
+      await tester.pump();
+
+      expect(copiado, xml);
+      expect(find.text('XML copiado al portapapeles.'), findsOneWidget);
+    });
+
+    testWidgets('se puede volver a la vista de la factura', (tester) async {
+      await _abrir(tester, {'GET /reservas/58/comprobante': facturaXml()});
+      await _ir(tester, AppRoutes.comprobante(58));
+      await tester.tap(find.text('Factura XML'));
+      await tester.pumpAndSettle();
+      await tester.tap(find.text('Factura').first);
+      await tester.pumpAndSettle();
+      expect(find.text('Factura KEC-00000058'), findsOneWidget);
+    });
+  });
+
+  group('cuando algo falla', () {
+    testWidgets('reserva ajena o inexistente (404): muestra el mensaje y permite reintentar', (tester) async {
+      var intento = 0;
+      await _abrir(tester, {
+        'GET /reservas/58/comprobante': (_) => ++intento == 1 ? throw const ServerFailure('La reserva solicitada no existe.', statusCode: 404) : facturaXml(),
+      });
+      await _ir(tester, AppRoutes.comprobante(58));
+      expect(find.text('La reserva solicitada no existe.'), findsOneWidget);
+
+      await tester.tap(find.text('Reintentar'));
+      await tester.pumpAndSettle();
+      expect(find.text('Factura KEC-00000058'), findsOneWidget);
+    });
+
+    testWidgets('sin conexión: avisa y permite reintentar', (tester) async {
+      await _abrir(tester, {'GET /reservas/58/comprobante': const NetworkFailure()});
+      await _ir(tester, AppRoutes.comprobante(58));
+      expect(find.text('No se pudo conectar con el servidor.'), findsOneWidget);
+      expect(find.text('Reintentar'), findsOneWidget);
+    });
+
+    testWidgets('si el servidor manda algo que no es una factura, lo dice sin romperse', (tester) async {
+      await _abrir(tester, {'GET /reservas/58/comprobante': '<html>error de un proxy</html>'});
+      await _ir(tester, AppRoutes.comprobante(58));
+      expect(find.text('El servidor envió una respuesta no válida.'), findsOneWidget);
+      expect(tester.takeException(), isNull);
+    });
+
+    testWidgets('un 401 cierra la sesión y lleva al login', (tester) async {
+      await _abrir(tester, {'GET /reservas/58/comprobante': const UnauthorizedFailure()});
+      await _ir(tester, AppRoutes.comprobante(58));
+      expect(find.byType(LoginPage), findsOneWidget);
+    });
+
+    testWidgets('el administrador no tiene comprobantes: vuelve a la lista', (tester) async {
+      final api = await _abrir(tester, {}, usuario: usuarioAdmin);
+      await _ir(tester, AppRoutes.comprobante(58));
+      expect(find.byType(VuelosPage), findsOneWidget);
+      expect(api.rutasSolicitadas.where((r) => r.contains('comprobante')), isEmpty);
+    });
+
+    testWidgets('ids absurdos en la URL no llegan al servidor', (tester) async {
+      final api = await _abrir(tester, {});
+      for (final id in ['0', 'abc', '99999999999999999999', '-1']) {
+        await _ir(tester, '/reservas/$id/comprobante');
+        expect(find.byType(ComprobantePage), findsNothing, reason: id);
+      }
+      expect(api.rutasSolicitadas.where((r) => r.contains('comprobante')), isEmpty);
+    });
+  });
+}
diff --git a/frontend/test/pages/navegacion_test.dart b/frontend/test/pages/navegacion_test.dart
new file mode 100644
index 0000000..34e42a6
--- /dev/null
+++ b/frontend/test/pages/navegacion_test.dart
@@ -0,0 +1,261 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:vuelos_app/config/app_router.dart';
+import 'package:vuelos_app/pages/admin_page.dart';
+import 'package:vuelos_app/pages/estado_api_page.dart';
+import 'package:vuelos_app/pages/login_page.dart';
+import 'package:vuelos_app/pages/reserva_detalle_page.dart';
+import 'package:vuelos_app/pages/reservas_page.dart';
+import 'package:vuelos_app/pages/seleccion_asientos_page.dart';
+import 'package:vuelos_app/pages/vuelo_detalle_page.dart';
+import 'package:vuelos_app/pages/vuelos_page.dart';
+import 'package:vuelos_app/widgets/migas.dart';
+
+import '../helpers/app_helper.dart';
+import '../helpers/fakes.dart';
+
+Future<RouteFakeRestClient> _abrir(WidgetTester tester, {Object usuario = usuarioAna, Map<String, Object?> rutas = const {}}) async {
+  final client = RouteFakeRestClient({
+    'GET /auth/perfil': {'usuario': usuario},
+    'GET /vuelos': respuestaVuelos,
+    'GET /vuelos/3': vueloQuitoGuayaquil,
+    'GET /vuelos/3/asientos': mapaJson(),
+    'GET /iva': respuestaIva,
+    'GET /reservas': paginaDeReservas(total: 1, pagina: 1),
+    'GET /reservas/58': reservaJson(),
+    'GET /health': healthOk,
+    ...rutas,
+  });
+  await abrirApp(tester, client: client, tokens: InMemoryTokenStorage('jwt'));
+  return client;
+}
+
+Future<void> _ir(WidgetTester tester, String ruta) async {
+  ProviderScope.containerOf(tester.element(find.byType(MaterialApp))).read(appRouterProvider).push(ruta);
+  await tester.pumpAndSettle();
+}
+
+Finder get _barraInferior => find.byType(NavigationBar);
+
+void main() {
+  group('barra de navegación inferior', () {
+    testWidgets('el cliente ve Vuelos y Mis reservas (y no Administración)', (tester) async {
+      await _abrir(tester);
+      expect(find.descendant(of: _barraInferior, matching: find.text('Vuelos')), findsOneWidget);
+      expect(find.descendant(of: _barraInferior, matching: find.text('Mis reservas')), findsOneWidget);
+      expect(find.descendant(of: _barraInferior, matching: find.text('Administración')), findsNothing);
+    });
+
+    testWidgets('el administrador ve Vuelos y Administración (y no Mis reservas)', (tester) async {
+      await _abrir(tester, usuario: usuarioAdmin);
+      expect(find.descendant(of: _barraInferior, matching: find.text('Vuelos')), findsOneWidget);
+      expect(find.descendant(of: _barraInferior, matching: find.text('Administración')), findsOneWidget);
+      expect(find.descendant(of: _barraInferior, matching: find.text('Mis reservas')), findsNothing);
+    });
+
+    testWidgets('resalta la sección en la que está el usuario', (tester) async {
+      await _abrir(tester);
+      expect(tester.widget<NavigationBar>(_barraInferior).selectedIndex, 0);
+      await _ir(tester, AppRoutes.reserva(58));
+      expect(tester.widget<NavigationBar>(_barraInferior).selectedIndex, 1); // el detalle de una reserva es de "Mis reservas"
+    });
+
+    testWidgets('desde un detalle profundo se llega a cualquier sección con un toque', (tester) async {
+      await _abrir(tester);
+      await _ir(tester, AppRoutes.reserva(58));
+      expect(find.byType(ReservaDetallePage), findsOneWidget);
+
+      await tester.tap(find.descendant(of: _barraInferior, matching: find.text('Vuelos')));
+      await tester.pumpAndSettle();
+      expect(find.byType(VuelosPage), findsOneWidget);
+
+      await tester.tap(find.descendant(of: _barraInferior, matching: find.text('Mis reservas')));
+      await tester.pumpAndSettle();
+      expect(find.byType(ReservasPage), findsOneWidget);
+    });
+
+    testWidgets('el administrador va a su panel desde la barra', (tester) async {
+      await _abrir(tester, usuario: usuarioAdmin);
+      await tester.tap(find.descendant(of: _barraInferior, matching: find.text('Administración')));
+      await tester.pumpAndSettle();
+      expect(find.byType(AdminPage), findsOneWidget);
+    });
+
+    testWidgets('el mapa de asientos NO tiene barra inferior (es un paso a medio camino, con su propio resumen)', (tester) async {
+      await _abrir(tester);
+      await _ir(tester, AppRoutes.asientosDelVuelo(3));
+      expect(find.byType(SeleccionAsientosPage), findsOneWidget);
+      expect(_barraInferior, findsNothing);
+    });
+  });
+
+  group('inicio desde cualquier parte', () {
+    testWidgets('tocar el logo lleva al inicio', (tester) async {
+      await _abrir(tester);
+      await _ir(tester, AppRoutes.reserva(58));
+      expect(find.byType(VuelosPage), findsNothing);
+
+      await tester.tap(find.byTooltip('Ir al inicio'));
+      await tester.pumpAndSettle();
+      expect(find.byType(VuelosPage), findsOneWidget);
+    });
+
+    testWidgets('también desde el mapa de asientos', (tester) async {
+      await _abrir(tester);
+      await _ir(tester, AppRoutes.asientosDelVuelo(3));
+      await tester.tap(find.byTooltip('Ir al inicio'));
+      await tester.pumpAndSettle();
+      expect(find.byType(VuelosPage), findsOneWidget);
+    });
+
+    testWidgets('el botón Volver regresa a la pantalla anterior', (tester) async {
+      await _abrir(tester);
+      await tester.tap(find.text('KT101'));
+      await tester.pumpAndSettle();
+      expect(find.byType(VueloDetallePage), findsOneWidget);
+
+      await tester.tap(find.byTooltip('Volver'));
+      await tester.pumpAndSettle();
+      expect(find.byType(VuelosPage), findsOneWidget);
+    });
+  });
+
+  group('migas de pan', () {
+    testWidgets('en el detalle del vuelo: Vuelos › KT101, y "Vuelos" regresa', (tester) async {
+      await _abrir(tester);
+      await tester.tap(find.text('KT101'));
+      await tester.pumpAndSettle();
+      expect(find.byType(Migas), findsOneWidget);
+      expect(find.descendant(of: find.byType(Migas), matching: find.text('KT101')), findsOneWidget);
+
+      await tester.tap(find.descendant(of: find.byType(Migas), matching: find.text('Vuelos')));
+      await tester.pumpAndSettle();
+      expect(find.byType(VuelosPage), findsOneWidget);
+    });
+
+    testWidgets('en una reserva: Mis reservas › KEC-…, y "Mis reservas" regresa', (tester) async {
+      await _abrir(tester);
+      await _ir(tester, AppRoutes.reserva(58));
+      expect(find.descendant(of: find.byType(Migas), matching: find.text('KEC-00000058')), findsOneWidget);
+
+      await tester.tap(find.descendant(of: find.byType(Migas), matching: find.text('Mis reservas')));
+      await tester.pumpAndSettle();
+      expect(find.byType(ReservasPage), findsOneWidget);
+    });
+
+    testWidgets('en el mapa de asientos se puede volver al vuelo desde las migas', (tester) async {
+      await _abrir(tester);
+      await _ir(tester, AppRoutes.asientosDelVuelo(3));
+      await tester.tap(find.descendant(of: find.byType(Migas), matching: find.text('KT101')));
+      await tester.pumpAndSettle();
+      expect(find.byType(VueloDetallePage), findsOneWidget);
+    });
+  });
+
+  group('menú de cuenta', () {
+    testWidgets('muestra quién está conectado y su rol', (tester) async {
+      await _abrir(tester);
+      await tester.tap(find.byWidgetPredicate((w) => w is PopupMenuButton));
+      await tester.pumpAndSettle();
+      expect(find.text('Ana Torres'), findsOneWidget);
+      expect(find.text('ana@correo.com'), findsOneWidget);
+      expect(find.text('Cliente'), findsOneWidget);
+    });
+
+    testWidgets('el administrador figura como Administrador', (tester) async {
+      await _abrir(tester, usuario: usuarioAdmin);
+      await tester.tap(find.byWidgetPredicate((w) => w is PopupMenuButton));
+      await tester.pumpAndSettle();
+      expect(find.text('Administrador'), findsOneWidget);
+    });
+
+    testWidgets('lleva al estado del servicio', (tester) async {
+      await _abrir(tester);
+      await tester.tap(find.byWidgetPredicate((w) => w is PopupMenuButton));
+      await tester.pumpAndSettle();
+      await tester.tap(find.text('Estado del servicio'));
+      await tester.pumpAndSettle();
+      expect(find.byType(EstadoApiPage), findsOneWidget);
+    });
+
+    testWidgets('cerrar sesión pide confirmación: "Seguir conectado" la conserva', (tester) async {
+      final api = await _abrir(tester);
+      await tester.tap(find.byWidgetPredicate((w) => w is PopupMenuButton));
+      await tester.pumpAndSettle();
+      await tester.tap(find.text('Cerrar sesión'));
+      await tester.pumpAndSettle();
+      expect(find.text('¿Cerrar sesión?'), findsOneWidget);
+
+      await tester.tap(find.text('Seguir conectado'));
+      await tester.pumpAndSettle();
+      expect(find.byType(VuelosPage), findsOneWidget);
+      expect(api.llamadas.where((l) => l.ruta == '/auth/logout'), isEmpty);
+    });
+  });
+
+  group('salir del mapa de asientos con cambios', () {
+    Future<void> elegir(WidgetTester tester, String asiento) async {
+      await tester.tap(find.text(asiento));
+      await tester.pump();
+    }
+
+    testWidgets('sin asientos elegidos, "Volver" sale sin preguntar', (tester) async {
+      await _abrir(tester);
+      await _ir(tester, AppRoutes.asientosDelVuelo(3));
+      await tester.tap(find.byTooltip('Volver'));
+      await tester.pumpAndSettle();
+      expect(find.byType(SeleccionAsientosPage), findsNothing);
+      expect(find.text('¿Salir sin guardar?'), findsNothing);
+    });
+
+    testWidgets('con asientos elegidos pregunta antes de salir; "Seguir eligiendo" los conserva', (tester) async {
+      await _abrir(tester);
+      await _ir(tester, AppRoutes.asientosDelVuelo(3));
+      await elegir(tester, '1A');
+
+      await tester.tap(find.byTooltip('Volver'));
+      await tester.pumpAndSettle();
+      expect(find.text('¿Salir sin guardar?'), findsOneWidget);
+
+      await tester.tap(find.text('Seguir eligiendo'));
+      await tester.pumpAndSettle();
+      expect(find.byType(SeleccionAsientosPage), findsOneWidget);
+      expect(find.text('Asientos (1 de 10): 1A'), findsOneWidget);
+    });
+
+    testWidgets('con asientos elegidos, "Salir" abandona la selección', (tester) async {
+      await _abrir(tester);
+      await _ir(tester, AppRoutes.asientosDelVuelo(3));
+      await elegir(tester, '1A');
+      await tester.tap(find.byTooltip('Volver'));
+      await tester.pumpAndSettle();
+      await tester.tap(find.text('Salir'));
+      await tester.pumpAndSettle();
+      expect(find.byType(SeleccionAsientosPage), findsNothing);
+    });
+
+    testWidgets('al cambiar los asientos de una reserva también avisa si hay cambios sin guardar', (tester) async {
+      await _abrir(tester, rutas: {'GET /vuelos/3/asientos': mapaJson(ocupados: ['1A', '1B'])});
+      await _ir(tester, AppRoutes.asientosDeLaReserva(58));
+      await tester.tap(find.byTooltip('Volver'));
+      await tester.pumpAndSettle();
+      expect(find.text('¿Salir sin guardar?'), findsNothing); // sin cambios: sale directo
+
+      await _ir(tester, AppRoutes.asientosDeLaReserva(58));
+      await elegir(tester, '2A');
+      await tester.tap(find.byTooltip('Volver'));
+      await tester.pumpAndSettle();
+      expect(find.text('¿Salir sin guardar?'), findsOneWidget);
+      expect(find.text('Los cambios en sus asientos no se guardarán.'), findsOneWidget);
+    });
+  });
+
+  testWidgets('sin sesión no hay barra de navegación ni menú (login)', (tester) async {
+    final client = RouteFakeRestClient({});
+    await abrirApp(tester, client: client);
+    expect(find.byType(LoginPage), findsOneWidget);
+    expect(_barraInferior, findsNothing);
+    expect(find.byWidgetPredicate((w) => w is PopupMenuButton), findsNothing);
+  });
+}
diff --git a/frontend/test/pages/seleccion_asientos_test.dart b/frontend/test/pages/seleccion_asientos_test.dart
index cad3b27..6b17a98 100644
--- a/frontend/test/pages/seleccion_asientos_test.dart
+++ b/frontend/test/pages/seleccion_asientos_test.dart
@@ -43,7 +43,7 @@ void main() {
       await _ir(tester, AppRoutes.asientosDelVuelo(3));
 
       expect(find.byType(SeleccionAsientosPage), findsOneWidget);
-      expect(find.text('KT101'), findsOneWidget);
+      expect(find.text('KT101'), findsWidgets); // en las migas y en la cabecera
       expect(find.text('Disponible'), findsOneWidget);
       expect(find.text('Seleccionado'), findsOneWidget);
       expect(find.text('Ocupado'), findsOneWidget);
diff --git a/frontend/test/pages/vuelos_page_test.dart b/frontend/test/pages/vuelos_page_test.dart
index 7194809..be609f9 100644
--- a/frontend/test/pages/vuelos_page_test.dart
+++ b/frontend/test/pages/vuelos_page_test.dart
@@ -137,7 +137,7 @@ void main() {
       expect(find.text('42 libres de 80'), findsOneWidget);
       expect(find.text('Precio por persona'), findsOneWidget);
 
-      await tester.tap(find.byTooltip('Volver a los vuelos'));
+      await tester.tap(find.byTooltip('Volver'));
       await tester.pumpAndSettle();
       expect(find.byType(VuelosPage), findsOneWidget);
     });