feat: discovery automático + QR como fallback en PantallaUnirse

- Discovery: busca hosts cercanos automáticamente y los muestra en lista
- Cada host aparece como tile tocable con nombre de la sala
- QR fallback: botón 'Escanear QR' debajo de la lista
- ServicioNearby: hostsEncontrados map, pararBusqueda(), no auto-connect
- Flujo: nombre → buscar → lista de salas (o QR) → conectar → espera
- l10n: searchGames, searchingGames, noGamesFound, orScanQR (es/en)

lib/pantallas/pantalla_unirse.dart

@@ -5,7 +5,8 @@ import 'package:farolero/l10n/generated/app_localizations.dart';
 import '../servicios/servicio_nearby.dart';
 import '../tema/tema_app.dart';
 
-/// Pantalla para unirse a una partida multidispositivo
+/// Pantalla para unirse a una partida multidispositivo.
+/// Flujo: nombre → discovery automático (lista de salas) → fallback QR
 class PantallaUnirse extends StatefulWidget {
   const PantallaUnirse({super.key});
 
@@ -16,10 +17,13 @@ class PantallaUnirse extends StatefulWidget {
 class _PantallaUnirseState extends State<PantallaUnirse> {
   final _nombreController = TextEditingController();
   final _formKey = GlobalKey<FormState>();
-  bool _escaneando = false;
+
+  // Estados de la pantalla
+  bool _buscando = false;
+  bool _escaneandoQR = false;
   bool _conectando = false;
   String? _error;
-  String? _salaEncontrada;
+  String? _salaSeleccionada;
 
   @override
   void dispose() {
@@ -27,10 +31,51 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
     super.dispose();
   }
 
-  Future<void> _iniciarEscaneo() async {
+  /// Paso 1: validar nombre e iniciar discovery
+  Future<void> _iniciarBusqueda() async {
     if (!_formKey.currentState!.validate()) return;
+
+    final nearby = context.read<ServicioNearby>();
+    final ok = await nearby.buscarHosts(_nombreController.text.trim());
+
+    if (ok) {
+      setState(() {
+        _buscando = true;
+        _error = null;
+      });
+    } else {
+      setState(() {
+        _error = 'No se pudo iniciar la búsqueda. Verifica Bluetooth y ubicación.';
+      });
+    }
+  }
+
+  /// Conectar a un host de la lista
+  Future<void> _conectarAHost(String endpointId, String nombreHost) async {
     setState(() {
-      _escaneando = true;
+      _conectando = true;
+      _salaSeleccionada = nombreHost;
+    });
+
+    final nearby = context.read<ServicioNearby>();
+    // Parar discovery antes de conectar
+    await nearby.pararBusqueda();
+    final ok = await nearby.conectarAHost(endpointId, _nombreController.text.trim());
+
+    if (!ok && mounted) {
+      setState(() {
+        _conectando = false;
+        _error = 'No se pudo conectar a $nombreHost';
+      });
+      // Reiniciar búsqueda
+      _iniciarBusqueda();
+    }
+  }
+
+  /// Fallback: escanear QR
+  void _abrirEscaner() {
+    setState(() {
+      _escaneandoQR = true;
       _error = null;
     });
   }
@@ -45,20 +90,15 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
       final datos = ServicioNearby.parsearQR(valor);
       if (datos != null) {
         setState(() {
-          _escaneando = false;
+          _escaneandoQR = false;
           _conectando = true;
-          _salaEncontrada = datos['sala'] as String? ?? 'Sala';
+          _salaSeleccionada = datos['host'] as String? ?? datos['sala'] as String? ?? 'Sala';
         });
 
-        // Iniciar búsqueda de hosts via Nearby
+        // Iniciar búsqueda para que Nearby encuentre al host
         final nearby = context.read<ServicioNearby>();
-        final ok = await nearby.buscarHosts(_nombreController.text.trim());
-
-        if (!ok && mounted) {
-          setState(() {
-            _conectando = false;
-            _error = 'No se pudo iniciar la búsqueda. Verifica Bluetooth y ubicación.';
-          });
+        if (!nearby.buscando) {
+          await nearby.buscarHosts(_nombreController.text.trim());
         }
         return;
       }
@@ -70,98 +110,194 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
     final l10n = AppLocalizations.of(context)!;
     final nearby = context.watch<ServicioNearby>();
 
-    // Si estamos conectados, mostrar pantalla de espera
+    // Si estamos conectados → pantalla de espera
     if (nearby.conectado && !nearby.esHost) {
-      return _buildPantallaEspera(context, l10n, nearby);
+      return _buildPantallaEspera(context, l10n);
     }
 
+    // Si escaneando QR
+    if (_escaneandoQR) {
+      return _buildEscaner(context, l10n);
+    }
+
+    // Si buscando hosts o conectando
+    if (_buscando || _conectando) {
+      return _buildDiscovery(context, l10n, nearby);
+    }
+
+    // Formulario nombre
+    return _buildFormularioNombre(context, l10n);
+  }
+
+  // ==================== PASO 1: NOMBRE ====================
+
+  Widget _buildFormularioNombre(BuildContext context, AppLocalizations l10n) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(l10n.joinGameTitle),
+      ),
+      body: Padding(
+        padding: const EdgeInsets.all(32),
+        child: Form(
+          key: _formKey,
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              const Text('📱', style: TextStyle(fontSize: 64)),
+              const SizedBox(height: 24),
+              Text(
+                l10n.joinGameTitle,
+                style: Theme.of(context).textTheme.headlineMedium,
+              ),
+              const SizedBox(height: 8),
+              Text(
+                l10n.enterNameToSearch,
+                style: Theme.of(context).textTheme.bodyLarge,
+                textAlign: TextAlign.center,
+              ),
+              const SizedBox(height: 32),
+              TextFormField(
+                controller: _nombreController,
+                decoration: InputDecoration(
+                  labelText: l10n.yourName,
+                  prefixIcon: const Icon(Icons.person),
+                ),
+                validator: (v) {
+                  if (v == null || v.trim().isEmpty) return l10n.nameRequired;
+                  return null;
+                },
+                textCapitalization: TextCapitalization.words,
+                onFieldSubmitted: (_) => _iniciarBusqueda(),
+              ),
+              const SizedBox(height: 24),
+              SizedBox(
+                width: double.infinity,
+                child: ElevatedButton.icon(
+                  onPressed: _iniciarBusqueda,
+                  icon: const Icon(Icons.search),
+                  label: Text(l10n.searchGames),
+                ),
+              ),
+              if (_error != null) ...[
+                const SizedBox(height: 16),
+                _buildError(_error!),
+              ],
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+
+  // ==================== PASO 2: DISCOVERY ====================
+
+  Widget _buildDiscovery(BuildContext context, AppLocalizations l10n, ServicioNearby nearby) {
+    final hosts = nearby.hostsEncontrados;
+
     return Scaffold(
       appBar: AppBar(
         title: Text(l10n.joinGameTitle),
         leading: IconButton(
-          icon: const Icon(Icons.close),
+          icon: const Icon(Icons.arrow_back),
           onPressed: () async {
-            await nearby.desconectar();
-            if (context.mounted) Navigator.pop(context);
+            await nearby.pararBusqueda();
+            setState(() {
+              _buscando = false;
+              _conectando = false;
+            });
           },
         ),
       ),
-      body: _escaneando
-          ? _buildEscaner(context, l10n)
-          : _buildFormulario(context, l10n),
-    );
-  }
-
-  Widget _buildFormulario(BuildContext context, AppLocalizations l10n) {
-    return Padding(
-      padding: const EdgeInsets.all(32),
-      child: Form(
-        key: _formKey,
+      body: Padding(
+        padding: const EdgeInsets.all(24),
         child: Column(
-          mainAxisAlignment: MainAxisAlignment.center,
           children: [
-            const Text('📱', style: TextStyle(fontSize: 64)),
-            const SizedBox(height: 24),
-            Text(
-              l10n.joinGameTitle,
-              style: Theme.of(context).textTheme.headlineMedium,
-            ),
-            const SizedBox(height: 8),
-            Text(
-              l10n.enterNameAndScan,
-              style: Theme.of(context).textTheme.bodyLarge,
-              textAlign: TextAlign.center,
-            ),
-            const SizedBox(height: 32),
-
-            // Campo nombre
-            TextFormField(
-              controller: _nombreController,
-              decoration: InputDecoration(
-                labelText: l10n.yourName,
-                prefixIcon: const Icon(Icons.person),
-              ),
-              validator: (v) {
-                if (v == null || v.trim().isEmpty) {
-                  return l10n.nameRequired;
-                }
-                return null;
-              },
-              textCapitalization: TextCapitalization.words,
-            ),
-            const SizedBox(height: 24),
-
+            // Estado
             if (_conectando) ...[
               const CircularProgressIndicator(color: TemaApp.colorAcento),
               const SizedBox(height: 12),
               Text(
-                '${l10n.connectingTo} ${_salaEncontrada ?? ""}...',
-                style: Theme.of(context).textTheme.bodyMedium,
+                '${l10n.connectingTo} ${_salaSeleccionada ?? ""}...',
+                style: Theme.of(context).textTheme.bodyLarge,
               ),
+              const SizedBox(height: 24),
             ] else ...[
-              // Botón escanear QR
-              SizedBox(
-                width: double.infinity,
-                child: ElevatedButton.icon(
-                  onPressed: _iniciarEscaneo,
-                  icon: const Icon(Icons.qr_code_scanner),
-                  label: Text(l10n.scanQR),
-                ),
+              // Buscando
+              Row(
+                children: [
+                  const SizedBox(
+                    width: 20, height: 20,
+                    child: CircularProgressIndicator(
+                      strokeWidth: 2,
+                      color: TemaApp.colorNaranja,
+                    ),
+                  ),
+                  const SizedBox(width: 12),
+                  Text(
+                    l10n.searchingGames,
+                    style: Theme.of(context).textTheme.titleMedium,
+                  ),
+                ],
               ),
+              const SizedBox(height: 24),
             ],
 
+            // Lista de hosts encontrados
+            Expanded(
+              child: hosts.isEmpty && !_conectando
+                  ? Center(
+                      child: Column(
+                        mainAxisSize: MainAxisSize.min,
+                        children: [
+                          const Text('📡', style: TextStyle(fontSize: 48)),
+                          const SizedBox(height: 16),
+                          Text(
+                            l10n.noGamesFound,
+                            style: Theme.of(context).textTheme.bodyLarge,
+                            textAlign: TextAlign.center,
+                          ),
+                          const SizedBox(height: 8),
+                          Text(
+                            l10n.noGamesFoundHint,
+                            style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                              color: Colors.grey,
+                            ),
+                            textAlign: TextAlign.center,
+                          ),
+                        ],
+                      ),
+                    )
+                  : ListView.builder(
+                      itemCount: hosts.length,
+                      itemBuilder: (context, index) {
+                        final entry = hosts.entries.elementAt(index);
+                        return _buildHostTile(entry.key, entry.value);
+                      },
+                    ),
+            ),
+
             if (_error != null) ...[
-              const SizedBox(height: 16),
-              Container(
-                padding: const EdgeInsets.all(12),
-                decoration: BoxDecoration(
-                  color: TemaApp.colorAcento.withValues(alpha: 0.1),
-                  borderRadius: BorderRadius.circular(12),
+              _buildError(_error!),
+              const SizedBox(height: 12),
+            ],
+
+            // Fallback: escanear QR
+            if (!_conectando) ...[
+              const Divider(),
+              const SizedBox(height: 8),
+              Text(
+                l10n.orScanQR,
+                style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                  color: Colors.grey,
                 ),
-                child: Text(
-                  _error!,
-                  style: const TextStyle(color: TemaApp.colorAcento),
-                  textAlign: TextAlign.center,
+              ),
+              const SizedBox(height: 8),
+              SizedBox(
+                width: double.infinity,
+                child: OutlinedButton.icon(
+                  onPressed: _abrirEscaner,
+                  icon: const Icon(Icons.qr_code_scanner),
+                  label: Text(l10n.scanQR),
                 ),
               ),
             ],
@@ -171,68 +307,108 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
     );
   }
 
-  Widget _buildEscaner(BuildContext context, AppLocalizations l10n) {
-    return Stack(
-      children: [
-        MobileScanner(
-          onDetect: _onQRDetectado,
-        ),
-        // Overlay
-        Positioned(
-          bottom: 0,
-          left: 0,
-          right: 0,
-          child: Container(
-            padding: const EdgeInsets.all(24),
-            decoration: BoxDecoration(
-              gradient: LinearGradient(
-                begin: Alignment.topCenter,
-                end: Alignment.bottomCenter,
-                colors: [
-                  Colors.transparent,
-                  Colors.black.withValues(alpha: 0.8),
-                ],
-              ),
-            ),
-            child: Column(
-              mainAxisSize: MainAxisSize.min,
+  Widget _buildHostTile(String endpointId, String nombre) {
+    return Container(
+      margin: const EdgeInsets.only(bottom: 8),
+      child: Material(
+        color: TemaApp.colorTarjeta,
+        borderRadius: BorderRadius.circular(12),
+        child: InkWell(
+          borderRadius: BorderRadius.circular(12),
+          onTap: _conectando ? null : () => _conectarAHost(endpointId, nombre),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 16),
+            child: Row(
               children: [
-                Text(
-                  l10n.scanHostQR,
-                  style: Theme.of(context).textTheme.titleLarge?.copyWith(
-                    color: Colors.white,
+                const Text('🎭', style: TextStyle(fontSize: 28)),
+                const SizedBox(width: 16),
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        nombre,
+                        style: Theme.of(context).textTheme.titleMedium,
+                      ),
+                      Text(
+                        'Toca para unirte',
+                        style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                          color: Colors.grey,
+                        ),
+                      ),
+                    ],
                   ),
                 ),
-                const SizedBox(height: 16),
-                OutlinedButton(
-                  onPressed: () => setState(() => _escaneando = false),
-                  style: OutlinedButton.styleFrom(
-                    foregroundColor: Colors.white,
-                    side: const BorderSide(color: Colors.white),
-                  ),
-                  child: Text(l10n.cancel),
-                ),
+                const Icon(Icons.arrow_forward_ios, size: 16, color: Colors.grey),
               ],
             ),
           ),
         ),
-      ],
+      ),
     );
   }
 
-  Widget _buildPantallaEspera(
-    BuildContext context,
-    AppLocalizations l10n,
-    ServicioNearby nearby,
-  ) {
+  // ==================== ESCÁNER QR ====================
+
+  Widget _buildEscaner(BuildContext context, AppLocalizations l10n) {
     return Scaffold(
       appBar: AppBar(
-        title: Text(_salaEncontrada ?? l10n.joinGameTitle),
+        title: Text(l10n.scanQR),
+        leading: IconButton(
+          icon: const Icon(Icons.arrow_back),
+          onPressed: () => setState(() => _escaneandoQR = false),
+        ),
+      ),
+      body: Stack(
+        children: [
+          MobileScanner(onDetect: _onQRDetectado),
+          Positioned(
+            bottom: 0,
+            left: 0,
+            right: 0,
+            child: Container(
+              padding: const EdgeInsets.all(24),
+              decoration: BoxDecoration(
+                gradient: LinearGradient(
+                  begin: Alignment.topCenter,
+                  end: Alignment.bottomCenter,
+                  colors: [
+                    Colors.transparent,
+                    Colors.black.withValues(alpha: 0.8),
+                  ],
+                ),
+              ),
+              child: Text(
+                l10n.scanHostQR,
+                style: Theme.of(context).textTheme.titleLarge?.copyWith(
+                  color: Colors.white,
+                ),
+                textAlign: TextAlign.center,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  // ==================== ESPERA ====================
+
+  Widget _buildPantallaEspera(BuildContext context, AppLocalizations l10n) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text(_salaSeleccionada ?? l10n.joinGameTitle),
         leading: IconButton(
           icon: const Icon(Icons.close),
           onPressed: () async {
+            final nearby = context.read<ServicioNearby>();
             await nearby.desconectar();
-            if (context.mounted) Navigator.pop(context);
+            if (context.mounted) {
+              setState(() {
+                _buscando = false;
+                _conectando = false;
+              });
+            }
           },
         ),
       ),
@@ -267,4 +443,21 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
       ),
     );
   }
+
+  // ==================== HELPERS ====================
+
+  Widget _buildError(String msg) {
+    return Container(
+      padding: const EdgeInsets.all(12),
+      decoration: BoxDecoration(
+        color: TemaApp.colorAcento.withValues(alpha: 0.1),
+        borderRadius: BorderRadius.circular(12),
+      ),
+      child: Text(
+        msg,
+        style: const TextStyle(color: TemaApp.colorAcento),
+        textAlign: TextAlign.center,
+      ),
+    );
+  }
 }