Completo y absoluto cambio de diseño

2026-05-04 13:57:55 +02:00
parent ab0d4dc2ba
commit 841f94e543
18 changed files with 1012 additions and 319 deletions
--- a/lib/pantallas/pantalla_ajustes.dart
+++ b/lib/pantallas/pantalla_ajustes.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:farolero/l10n/generated/app_localizations.dart';
 import 'package:provider/provider.dart';
 import '../servicios/servicio_idioma.dart';
+import '../tema/componentes_farolero.dart';
 import '../tema/tema_app.dart';

 class PantallaAjustes extends StatefulWidget {
@@ -22,9 +23,10 @@ class _PantallaAjustesState extends State<PantallaAjustes> {

    return Scaffold(
      appBar: AppBar(title: Text(l10n.settingsTitle)),
-      body: SingleChildScrollView(
-        padding: const EdgeInsets.all(16),
-        child: Column(
+      body: FondoFarolero(
+        child: SingleChildScrollView(
+          padding: const EdgeInsets.all(16),
+          child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Selector de idioma
@@ -133,6 +135,7 @@ class _PantallaAjustesState extends State<PantallaAjustes> {
            ),
            const SizedBox(height: 16),
          ],
+          ),
        ),
      ),
    );
--- a/lib/pantallas/pantalla_crear_partida.dart
+++ b/lib/pantallas/pantalla_crear_partida.dart
@@ -8,6 +8,7 @@ import '../modelos/partida.dart';
 import '../modelos/usuario.dart';
 import '../servicios/servicio_nearby.dart';
 import '../servicios/servicio_permisos.dart';
+import '../tema/componentes_farolero.dart';
 import '../tema/tema_app.dart';
 import 'pantalla_gestor_host.dart';
 import 'pantalla_lobby_host.dart';
@@ -409,11 +410,38 @@ class _PantallaCrearPartidaState extends State<PantallaCrearPartida> {

    return Scaffold(
      appBar: AppBar(title: Text(l10n.createGame)),
-      body: SingleChildScrollView(
-        padding: const EdgeInsets.all(16),
-        child: Column(
+      body: FondoFarolero(
+        child: SingleChildScrollView(
+          padding: const EdgeInsets.all(16),
+          child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
+            PanelFarolero(
+              padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 18),
+              child: Row(
+                children: [
+                  const Icon(Icons.groups, color: TemaApp.colorNaranja, size: 42),
+                  const SizedBox(width: 14),
+                  Expanded(
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Text(
+                          '¿Cómo quieres jugar?',
+                          style: Theme.of(context).textTheme.titleLarge,
+                        ),
+                        const SizedBox(height: 3),
+                        Text(
+                          l10n.playersRange,
+                          style: Theme.of(context).textTheme.bodyMedium,
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+            const SizedBox(height: 12),
            // Modo de juego
            Card(
              child: Padding(
@@ -648,6 +676,7 @@ class _PantallaCrearPartidaState extends State<PantallaCrearPartida> {
            ),
            const SizedBox(height: 16),
          ],
+          ),
        ),
      ),
    );
--- a/lib/pantallas/pantalla_debate.dart
+++ b/lib/pantallas/pantalla_debate.dart
@@ -3,6 +3,7 @@ import 'package:flutter/material.dart';
 import 'package:farolero/l10n/generated/app_localizations.dart';
 import 'package:provider/provider.dart';
 import '../estado/estado_juego.dart';
+import '../tema/componentes_farolero.dart';
 import '../tema/tema_app.dart';
 import 'pantalla_notas.dart';
 import 'pantalla_votacion.dart';
@@ -75,9 +76,10 @@ class _PantallaDebateState extends State<PantallaDebate> {
        title: Text(l10n.debateRound(partida.rondaActual)),
        automaticallyImplyLeading: false,
      ),
-      body: Padding(
-        padding: const EdgeInsets.all(16),
-        child: Column(
+      body: FondoFarolero(
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Column(
          children: [
            // Temporizador
            if (tieneTemporizador) ...[
@@ -223,6 +225,7 @@ class _PantallaDebateState extends State<PantallaDebate> {
              ],
            ),
          ],
+          ),
        ),
      ),
    );
--- a/lib/pantallas/pantalla_gestor_host.dart
+++ b/lib/pantallas/pantalla_gestor_host.dart
@@ -6,6 +6,7 @@ import '../estado/estado_juego.dart';
 import '../modelos/inicio_partida_multijugador.dart';
 import '../modelos/partida.dart';
 import '../servicios/servicio_nearby.dart';
+import '../tema/componentes_farolero.dart';
 import '../tema/tema_app.dart';
 import 'pantalla_votacion_cliente.dart';
 import 'pantalla_palabras_cliente.dart';
@@ -139,9 +140,10 @@ class _PantallaGestorHostState extends State<PantallaGestorHost> {
          ),
        ],
      ),
-      body: Padding(
-        padding: const EdgeInsets.all(16),
-        child: Column(
+      body: FondoFarolero(
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Column(
          children: [
            _buildFaseIndicator(context, partida.fase, l10n),
            const SizedBox(height: 16),
@@ -163,6 +165,7 @@ class _PantallaGestorHostState extends State<PantallaGestorHost> {
              todosVotaron,
            ),
          ],
+          ),
        ),
      ),
    );
@@ -674,10 +677,12 @@ class _PantallaRevelarPalabraHostState

    return Scaffold(
      appBar: AppBar(title: Text(widget.nombre)),
-      body: Center(
-        child: Padding(
-          padding: const EdgeInsets.all(32),
-          child: Column(
+      body: FondoFarolero(
+        intenso: true,
+        child: Center(
+          child: Padding(
+            padding: const EdgeInsets.all(32),
+            child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
@@ -726,12 +731,7 @@ class _PantallaRevelarPalabraHostState
                          ),
                          if (!widget.esImpostor) ...[
                            const SizedBox(height: 12),
-                            Text(
-                              widget.palabra,
-                              style: Theme.of(context).textTheme.headlineLarge
-                                  ?.copyWith(fontSize: 32, color: Colors.white),
-                              textAlign: TextAlign.center,
-                            ),
+                            TarjetaPalabraFarolero(palabra: widget.palabra),
                          ],
                          if (widget.esImpostor && widget.pistaActiva) ...[
                            const SizedBox(height: 12),
@@ -788,6 +788,7 @@ class _PantallaRevelarPalabraHostState
                ),
              ),
            ],
+            ),
          ),
        ),
      ),
--- a/lib/pantallas/pantalla_lobby_host.dart
+++ b/lib/pantallas/pantalla_lobby_host.dart
@@ -4,6 +4,7 @@ import 'package:qr_flutter/qr_flutter.dart';
 import 'package:farolero/l10n/generated/app_localizations.dart';
 import '../modelos/usuario.dart';
 import '../servicios/servicio_nearby.dart';
+import '../tema/componentes_farolero.dart';
 import '../tema/tema_app.dart';

 /// Lobby del host. El host es autoridad de sala y también cliente local.
@@ -45,9 +46,10 @@ class _PantallaLobbyHostState extends State<PantallaLobbyHost> {
          },
        ),
      ),
-      body: Padding(
-        padding: const EdgeInsets.all(24),
-        child: Column(
+      body: FondoFarolero(
+        child: Padding(
+          padding: const EdgeInsets.all(24),
+          child: Column(
          children: [
            Container(
              padding: const EdgeInsets.all(16),
@@ -128,6 +130,7 @@ class _PantallaLobbyHostState extends State<PantallaLobbyHost> {
              ),
            ),
          ],
+          ),
        ),
      ),
    );
@@ -176,6 +179,7 @@ class _PantallaLobbyHostState extends State<PantallaLobbyHost> {
      decoration: BoxDecoration(
        color: color.withValues(alpha: 0.18),
        borderRadius: BorderRadius.circular(12),
+        border: Border.all(color: color.withValues(alpha: 0.55)),
      ),
      child: Row(
        children: [
@@ -202,12 +206,16 @@ class _PantallaLobbyHostState extends State<PantallaLobbyHost> {

    return ListTile(
      leading: CircleAvatar(
-        backgroundColor: seleccionadoPorMi
-            ? TemaApp.colorVerde
-            : seleccionadoPorOtro
-                ? TemaApp.colorNaranja
-                : TemaApp.colorTarjeta,
-        child: Text(usuario.avatar ?? '👤'),
+        backgroundColor: Colors.transparent,
+        child: AvatarFarolero(
+          texto: usuario.avatar ?? (usuario.nombre.isEmpty ? '?' : usuario.nombre[0]),
+          color: seleccionadoPorMi
+              ? TemaApp.colorVerde
+              : seleccionadoPorOtro
+                  ? TemaApp.colorNaranja
+                  : TemaApp.colorAzul,
+          size: 38,
+        ),
      ),
      title: Text(usuario.nombre),
      subtitle: Text(
--- a/lib/pantallas/pantalla_palabra_cliente.dart
+++ b/lib/pantallas/pantalla_palabra_cliente.dart
@@ -1,6 +1,7 @@
 import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:farolero/l10n/generated/app_localizations.dart';
+import 'package:farolero/tema/componentes_farolero.dart';
 import 'package:farolero/tema/tema_app.dart';

 /// Pantalla que ve cada jugador cuando recibe su palabra (modo multidispositivo).
@@ -44,8 +45,9 @@ class _PantallaPalabraClienteState extends State<PantallaPalabraCliente> {
    final l10n = AppLocalizations.of(context)!;

    return Scaffold(
-      backgroundColor: TemaApp.colorFondo,
-      body: SafeArea(
+      body: FondoFarolero(
+        intenso: true,
+        child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
@@ -58,15 +60,18 @@ class _PantallaPalabraClienteState extends State<PantallaPalabraCliente> {
                  duration: const Duration(milliseconds: 300),
                  width: double.infinity,
                  padding: const EdgeInsets.symmetric(vertical: 48, horizontal: 24),
-                  decoration: BoxDecoration(
+                  decoration: TemaApp.decoracionPanel(
                    color: _palabraVisible
-                        ? TemaApp.colorAcento
+                        ? TemaApp.colorSuperficie
                        : TemaApp.colorTarjeta,
-                    borderRadius: BorderRadius.circular(24),
+                    borderColor: _palabraVisible
+                        ? TemaApp.colorNaranja
+                        : TemaApp.colorBorde,
+                  ).copyWith(
                    boxShadow: _palabraVisible
                        ? [
                            BoxShadow(
-                              color: TemaApp.colorAcento.withValues(alpha: 0.4),
+                              color: TemaApp.colorNaranja.withValues(alpha: 0.32),
                              blurRadius: 24,
                              spreadRadius: 2,
                            ),
@@ -83,17 +88,17 @@ class _PantallaPalabraClienteState extends State<PantallaPalabraCliente> {
                        size: 32,
                      ),
                      const SizedBox(height: 16),
-                      Text(
-                        _palabraVisible ? widget.palabra : '???',
-                        textAlign: TextAlign.center,
-                        style: TextStyle(
-                          fontSize: 32,
-                          fontWeight: FontWeight.bold,
-                          color: _palabraVisible
-                              ? Colors.white
-                              : TemaApp.colorTextoSecundario,
-                        ),
-                      ),
+                      _palabraVisible
+                          ? TarjetaPalabraFarolero(palabra: widget.palabra)
+                          : const Text(
+                              '???',
+                              textAlign: TextAlign.center,
+                              style: TextStyle(
+                                fontSize: 32,
+                                fontWeight: FontWeight.bold,
+                                color: TemaApp.colorTextoSecundario,
+                              ),
+                            ),
                    ],
                  ),
                ),
@@ -164,6 +169,7 @@ class _PantallaPalabraClienteState extends State<PantallaPalabraCliente> {
          ),
        ),
      ),
+      ),
    );
  }
 }
--- a/lib/pantallas/pantalla_palabras_cliente.dart
+++ b/lib/pantallas/pantalla_palabras_cliente.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:farolero/l10n/generated/app_localizations.dart';
 import 'package:farolero/modelos/inicio_partida_multijugador.dart';
+import 'package:farolero/tema/componentes_farolero.dart';
 import 'package:farolero/tema/tema_app.dart';

 /// Reveal secuencial para clientes que manejan uno o varios jugadores.
@@ -44,8 +45,9 @@ class _PantallaPalabrasClienteState extends State<PantallaPalabrasCliente> {
    final actual = _actual;

    return Scaffold(
-      backgroundColor: TemaApp.colorFondo,
-      body: SafeArea(
+      body: FondoFarolero(
+        intenso: true,
+        child: SafeArea(
        child: Padding(
          padding: const EdgeInsets.all(24),
          child: Column(
@@ -71,8 +73,11 @@ class _PantallaPalabrasClienteState extends State<PantallaPalabrasCliente> {
                    horizontal: 24,
                  ),
                  decoration: BoxDecoration(
-                    color: _visible ? TemaApp.colorAcento : TemaApp.colorTarjeta,
-                    borderRadius: BorderRadius.circular(24),
+                    color: _visible ? TemaApp.colorSuperficie : TemaApp.colorTarjeta,
+                    borderRadius: BorderRadius.circular(8),
+                    border: Border.all(
+                      color: _visible ? TemaApp.colorNaranja : TemaApp.colorBorde,
+                    ),
                  ),
                  child: Column(
                    children: [
@@ -82,21 +87,20 @@ class _PantallaPalabrasClienteState extends State<PantallaPalabrasCliente> {
                        size: 32,
                      ),
                      const SizedBox(height: 16),
-                      Text(
-                        _visible
-                            ? (actual.esImpostor
-                                ? l10n.youAreImpostor
-                                : actual.palabra ?? '')
-                            : '???',
-                        textAlign: TextAlign.center,
-                        style: TextStyle(
-                          fontSize: 32,
-                          fontWeight: FontWeight.bold,
-                          color: _visible
-                              ? Colors.white
-                              : TemaApp.colorTextoSecundario,
+                      if (_visible && !actual.esImpostor)
+                        TarjetaPalabraFarolero(palabra: actual.palabra ?? '')
+                      else
+                        Text(
+                          _visible ? l10n.youAreImpostor : '???',
+                          textAlign: TextAlign.center,
+                          style: TextStyle(
+                            fontSize: 32,
+                            fontWeight: FontWeight.bold,
+                            color: _visible
+                                ? TemaApp.colorDorado
+                                : TemaApp.colorTextoSecundario,
+                          ),
                        ),
-                      ),
                    ],
                  ),
                ),
@@ -123,6 +127,7 @@ class _PantallaPalabrasClienteState extends State<PantallaPalabrasCliente> {
          ),
        ),
      ),
+      ),
    );
  }
 }
--- a/lib/pantallas/pantalla_principal.dart
+++ b/lib/pantallas/pantalla_principal.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:farolero/l10n/generated/app_localizations.dart';
+import '../tema/componentes_farolero.dart';
 import '../tema/tema_app.dart';
 import 'pantalla_ajustes.dart';
 import 'pantalla_crear_partida.dart';
@@ -14,134 +15,152 @@ class PantallaPrincipal extends StatelessWidget {
    final l10n = AppLocalizations.of(context)!;

    return Scaffold(
-      body: SafeArea(
-        child: Center(
-          child: SingleChildScrollView(
-            padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 24),
-            child: Column(
-              mainAxisAlignment: MainAxisAlignment.center,
-              children: [
-                // Logo
-                Container(
-                  width: 120,
-                  height: 120,
-                  decoration: BoxDecoration(
-                    shape: BoxShape.circle,
-                    gradient: const LinearGradient(
-                      colors: [TemaApp.colorAcento, TemaApp.colorNaranja],
-                      begin: Alignment.topLeft,
-                      end: Alignment.bottomRight,
+      body: FondoFarolero(
+        intenso: true,
+        child: SafeArea(
+          child: Center(
+            child: SingleChildScrollView(
+              padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 18),
+              child: ConstrainedBox(
+                constraints: const BoxConstraints(maxWidth: 420),
+                child: Column(
+                  children: [
+                    Row(
+                      children: [
+                        const AvatarFarolero(texto: 'A', size: 48),
+                        const SizedBox(width: 10),
+                        Expanded(
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
+                            children: [
+                              Text(
+                                'Alex',
+                                style: Theme.of(context).textTheme.titleMedium,
+                              ),
+                              Text(
+                                'Nivel 12',
+                                style: Theme.of(context).textTheme.bodySmall,
+                              ),
+                              const SizedBox(height: 3),
+                              ClipRRect(
+                                borderRadius: BorderRadius.circular(4),
+                                child: LinearProgressIndicator(
+                                  value: 0.68,
+                                  minHeight: 4,
+                                  color: TemaApp.colorPurpura,
+                                  backgroundColor: Colors.black.withValues(alpha: 0.45),
+                                ),
+                              ),
+                            ],
+                          ),
+                        ),
+                        IconButton.filledTonal(
+                          tooltip: l10n.settings,
+                          onPressed: () {
+                            Navigator.push(
+                              context,
+                              MaterialPageRoute(
+                                builder: (_) => const PantallaAjustes(),
+                              ),
+                            );
+                          },
+                          icon: const Icon(Icons.settings),
+                        ),
+                      ],
                    ),
-                    boxShadow: [
-                      BoxShadow(
-                        color: TemaApp.colorAcento.withValues(alpha: 0.4),
-                        blurRadius: 30,
-                        spreadRadius: 5,
+                    const SizedBox(height: 38),
+                    const LogoFarolero(size: 70),
+                    const SizedBox(height: 12),
+                    Text(
+                      l10n.subtitle,
+                      style: Theme.of(context).textTheme.bodyMedium?.copyWith(
+                        color: TemaApp.colorTexto,
+                        fontSize: 15,
                      ),
-                    ],
-                  ),
-                  child: const Center(
-                    child: Text(
-                      '🎭',
-                      style: TextStyle(fontSize: 56),
                    ),
-                  ),
-                ),
-                const SizedBox(height: 24),
-
-                // Título
-                Text(
-                  l10n.appTitle,
-                  style: Theme.of(context).textTheme.headlineLarge?.copyWith(
-                    fontSize: 36,
-                    letterSpacing: 1.2,
-                  ),
-                ),
-                const SizedBox(height: 8),
-                Text(
-                  l10n.subtitle,
-                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                    fontSize: 16,
-                  ),
-                ),
-                const SizedBox(height: 48),
-
-                // Botones
-                SizedBox(
-                  width: double.infinity,
-                  child: ElevatedButton.icon(
-                    onPressed: () {
-                      Navigator.push(
-                        context,
-                        MaterialPageRoute(
-                          builder: (_) => const PantallaCrearPartida(),
+                    const SizedBox(height: 54),
+                    BotonFarolero(
+                      texto: 'Jugar',
+                      icono: Icons.play_arrow,
+                      onPressed: () {
+                        Navigator.push(
+                          context,
+                          MaterialPageRoute(
+                            builder: (_) => const PantallaCrearPartida(),
+                          ),
+                        );
+                      },
+                    ),
+                    const SizedBox(height: 12),
+                    BotonFarolero.secundario(
+                      texto: l10n.joinGame,
+                      icono: Icons.bolt,
+                      onPressed: () {
+                        Navigator.push(
+                          context,
+                          MaterialPageRoute(
+                            builder: (_) => const PantallaUnirse(),
+                          ),
+                        );
+                      },
+                    ),
+                    const SizedBox(height: 12),
+                    BotonFarolero.oscuro(
+                      texto: l10n.howToPlay,
+                      icono: Icons.question_mark,
+                      onPressed: () {
+                        Navigator.push(
+                          context,
+                          MaterialPageRoute(
+                            builder: (_) => const PantallaReglas(),
+                          ),
+                        );
+                      },
+                    ),
+                    const SizedBox(height: 18),
+                    Row(
+                      children: [
+                        Expanded(
+                          child: AccesoFarolero(
+                            etiqueta: 'Historial',
+                            icono: Icons.history,
+                            onPressed: () {},
+                          ),
                        ),
-                      );
-                    },
-                    icon: const Text('🎮', style: TextStyle(fontSize: 20)),
-                    label: Text(l10n.createGame),
-                  ),
-                ),
-                const SizedBox(height: 16),
-
-                SizedBox(
-                  width: double.infinity,
-                  child: OutlinedButton.icon(
-                    onPressed: () {
-                      Navigator.push(
-                        context,
-                        MaterialPageRoute(
-                          builder: (_) => const PantallaUnirse(),
+                        const SizedBox(width: 8),
+                        Expanded(
+                          child: AccesoFarolero(
+                            etiqueta: 'Logros',
+                            icono: Icons.emoji_events,
+                            onPressed: () {},
+                          ),
                        ),
-                      );
-                    },
-                    icon: const Text('📱', style: TextStyle(fontSize: 20)),
-                    label: Text(l10n.joinGame),
-                  ),
-                ),
-                const SizedBox(height: 16),
-
-                SizedBox(
-                  width: double.infinity,
-                  child: OutlinedButton.icon(
-                    onPressed: () {
-                      Navigator.push(
-                        context,
-                        MaterialPageRoute(
-                          builder: (_) => const PantallaReglas(),
+                        const SizedBox(width: 8),
+                        Expanded(
+                          child: AccesoFarolero(
+                            etiqueta: 'Ranking',
+                            icono: Icons.bar_chart,
+                            onPressed: () {},
+                          ),
                        ),
-                      );
-                    },
-                    icon: const Text('📖', style: TextStyle(fontSize: 20)),
-                    label: Text(l10n.howToPlay),
-                  ),
-                ),
-                const SizedBox(height: 16),
-
-                SizedBox(
-                  width: double.infinity,
-                  child: OutlinedButton.icon(
-                    onPressed: () {
-                      Navigator.push(
-                        context,
-                        MaterialPageRoute(
-                          builder: (_) => const PantallaAjustes(),
+                        const SizedBox(width: 8),
+                        Expanded(
+                          child: AccesoFarolero(
+                            etiqueta: 'Tienda',
+                            icono: Icons.storefront,
+                            onPressed: () {},
+                          ),
                        ),
-                      );
-                    },
-                    icon: const Icon(Icons.settings, size: 20),
-                    label: Text(l10n.settings),
-                  ),
+                      ],
+                    ),
+                    const SizedBox(height: 28),
+                    Text(
+                      l10n.playersRange,
+                      style: Theme.of(context).textTheme.bodySmall,
+                    ),
+                  ],
                ),
-                const SizedBox(height: 48),
-
-                Text(
-                  l10n.playersRange,
-                  style: Theme.of(context).textTheme.bodyMedium?.copyWith(
-                    fontSize: 12,
-                  ),
-                ),
-              ],
+              ),
            ),
          ),
        ),
--- a/lib/pantallas/pantalla_reglas.dart
+++ b/lib/pantallas/pantalla_reglas.dart
@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:farolero/l10n/generated/app_localizations.dart';
+import '../tema/componentes_farolero.dart';
 import '../tema/tema_app.dart';

 class PantallaReglas extends StatelessWidget {
@@ -11,56 +12,117 @@ class PantallaReglas extends StatelessWidget {

    return Scaffold(
      appBar: AppBar(title: Text(l10n.rulesTitle)),
-      body: SingleChildScrollView(
-        padding: const EdgeInsets.all(16),
-        child: Column(
+      body: FondoFarolero(
+        child: SingleChildScrollView(
+          padding: const EdgeInsets.all(16),
+          child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
-            _seccion(context, l10n.rulesWhatIsTitle, l10n.rulesWhatIsBody),
-            _seccion(context, l10n.rulesHowToPlayTitle, l10n.rulesHowToPlayBody),
-            _seccion(context, l10n.rulesWhoWinsTitle, l10n.rulesWhoWinsBody),
-            _seccion(context, l10n.rulesTipsPlayersTitle, l10n.rulesTipsPlayersBody),
-            _seccion(context, l10n.rulesTipsImpostorTitle, l10n.rulesTipsImpostorBody),
-            _seccion(context, l10n.rulesModesTitle, l10n.rulesModesBody),
+            _seccion(
+              context,
+              1,
+              Icons.person_search,
+              l10n.rulesWhatIsTitle,
+              l10n.rulesWhatIsBody,
+            ),
+            _seccion(
+              context,
+              2,
+              Icons.chat_bubble,
+              l10n.rulesHowToPlayTitle,
+              l10n.rulesHowToPlayBody,
+            ),
+            _seccion(
+              context,
+              3,
+              Icons.how_to_vote,
+              l10n.rulesWhoWinsTitle,
+              l10n.rulesWhoWinsBody,
+            ),
+            _seccion(
+              context,
+              4,
+              Icons.lightbulb,
+              l10n.rulesTipsPlayersTitle,
+              l10n.rulesTipsPlayersBody,
+            ),
+            _seccion(
+              context,
+              5,
+              Icons.theater_comedy,
+              l10n.rulesTipsImpostorTitle,
+              l10n.rulesTipsImpostorBody,
+            ),
+            _seccion(
+              context,
+              6,
+              Icons.devices,
+              l10n.rulesModesTitle,
+              l10n.rulesModesBody,
+            ),
            _ejemplo(context, l10n.rulesExampleTitle, l10n.rulesExampleBody),
            const SizedBox(height: 32),
          ],
-        ),
-      ),
-    );
-  }
-
-  Widget _seccion(BuildContext context, String titulo, String contenido) {
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 16),
-      child: Card(
-        child: Padding(
-          padding: const EdgeInsets.all(16),
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            children: [
-              Text(titulo,
-                  style: Theme.of(context).textTheme.titleLarge),
-              const SizedBox(height: 8),
-              Text(contenido,
-                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
-                    height: 1.5,
-                  )),
-            ],
          ),
        ),
      ),
    );
  }

+  Widget _seccion(
+    BuildContext context,
+    int numero,
+    IconData icono,
+    String titulo,
+    String contenido,
+  ) {
+    return Padding(
+      padding: const EdgeInsets.only(bottom: 16),
+      child: PanelFarolero(
+        padding: const EdgeInsets.all(12),
+        child: Row(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            Container(
+              width: 54,
+              height: 54,
+              decoration: BoxDecoration(
+                color: TemaApp.colorNaranja.withValues(alpha: 0.16),
+                borderRadius: BorderRadius.circular(8),
+                border: Border.all(color: TemaApp.colorNaranja),
+              ),
+              child: Icon(icono, color: TemaApp.colorNaranja, size: 30),
+            ),
+            const SizedBox(width: 12),
+            Expanded(
+              child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+                  Text(
+                    '$numero. ${titulo.toUpperCase()}',
+                    style: Theme.of(context).textTheme.titleLarge,
+                  ),
+              const SizedBox(height: 8),
+              Text(contenido,
+                  style: Theme.of(context).textTheme.bodyLarge?.copyWith(
+                    height: 1.5,
+                  )),
+            ],
+              ),
+            ),
+          ],
+          ),
+        ),
+    );
+  }
+
  Widget _ejemplo(BuildContext context, String titulo, String contenido) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 16),
-      child: Card(
+      child: PanelFarolero(
        color: TemaApp.colorNaranja.withValues(alpha: 0.15),
-        child: Padding(
-          padding: const EdgeInsets.all(16),
-          child: Column(
+        borderColor: TemaApp.colorNaranja,
+        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(titulo,
@@ -73,7 +135,6 @@ class PantallaReglas extends StatelessWidget {
                    height: 1.5,
                  )),
            ],
-          ),
        ),
      ),
    );
--- a/lib/pantallas/pantalla_resultado.dart
+++ b/lib/pantallas/pantalla_resultado.dart
@@ -3,6 +3,7 @@ import 'package:farolero/l10n/generated/app_localizations.dart';
 import 'package:provider/provider.dart';
 import '../estado/estado_juego.dart';
 import '../modelos/partida.dart';
+import '../tema/componentes_farolero.dart';
 import '../tema/tema_app.dart';
 import 'pantalla_adivinanza.dart';
 import 'pantalla_debate.dart';
@@ -62,10 +63,11 @@ class _PantallaResultadoState extends State<PantallaResultado>
        title: Text(l10n.result),
        automaticallyImplyLeading: false,
      ),
-      body: Center(
-        child: SingleChildScrollView(
-          padding: const EdgeInsets.all(32),
-          child: Column(
+      body: FondoFarolero(
+        child: Center(
+          child: SingleChildScrollView(
+            padding: const EdgeInsets.all(32),
+            child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Animación de suspense
@@ -172,6 +174,7 @@ class _PantallaResultadoState extends State<PantallaResultado>
                ),
              ],
            ],
+            ),
          ),
        ),
      ),
--- a/lib/pantallas/pantalla_unirse.dart
+++ b/lib/pantallas/pantalla_unirse.dart
@@ -7,6 +7,7 @@ import '../modelos/inicio_partida_multijugador.dart';
 import '../modelos/usuario.dart';
 import '../servicios/servicio_nearby.dart';
 import '../servicios/servicio_permisos.dart';
+import '../tema/componentes_farolero.dart';
 import '../tema/tema_app.dart';
 import 'pantalla_palabra_cliente.dart';
 import 'pantalla_palabras_cliente.dart';
@@ -323,14 +324,19 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
  Widget _buildFormularioNombre(BuildContext context, AppLocalizations l10n) {
    return Scaffold(
      appBar: AppBar(title: Text(l10n.joinGameTitle)),
-      body: Padding(
-        padding: const EdgeInsets.all(32),
-        child: Form(
+      body: FondoFarolero(
+        child: Padding(
+          padding: const EdgeInsets.all(32),
+          child: Form(
          key: _formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
-              const Text('📱', style: TextStyle(fontSize: 64)),
+              const Icon(
+                Icons.bluetooth_searching,
+                color: TemaApp.colorAzul,
+                size: 70,
+              ),
              const SizedBox(height: 24),
              Text(
                l10n.joinGameTitle,
@@ -373,6 +379,7 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
          ),
        ),
      ),
+      ),
    );
  }

@@ -399,9 +406,10 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
          },
        ),
      ),
-      body: Padding(
-        padding: const EdgeInsets.all(24),
-        child: Column(
+      body: FondoFarolero(
+        child: Padding(
+          padding: const EdgeInsets.all(24),
+          child: Column(
          children: [
            // Estado
            if (_conectando) ...[
@@ -495,6 +503,7 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
          ],
        ),
      ),
+      ),
    );
  }

@@ -610,9 +619,10 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
          },
        ),
      ),
-      body: SingleChildScrollView(
-        padding: const EdgeInsets.all(24),
-        child: Column(
+      body: FondoFarolero(
+        child: SingleChildScrollView(
+          padding: const EdgeInsets.all(24),
+          child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            // Estado de conexión
@@ -677,6 +687,7 @@ class _PantallaUnirseState extends State<PantallaUnirse> {
              ),
            ],
          ],
+          ),
        ),
      ),
    );
--- a/lib/pantallas/pantalla_ver_palabra.dart
+++ b/lib/pantallas/pantalla_ver_palabra.dart
@@ -3,6 +3,7 @@ import 'package:farolero/l10n/generated/app_localizations.dart';
 import 'package:provider/provider.dart';
 import '../estado/estado_juego.dart';
 import '../modelos/palabra.dart';
+import '../tema/componentes_farolero.dart';
 import '../tema/tema_app.dart';
 import 'pantalla_debate.dart';

@@ -31,9 +32,10 @@ class _PantallaVerPalabraState extends State<PantallaVerPalabra> {
        title: Text(l10n.seeYourWord),
        automaticallyImplyLeading: false,
      ),
-      body: Padding(
-        padding: const EdgeInsets.all(16),
-        child: Column(
+      body: FondoFarolero(
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Column(
          children: [
            Text(
              l10n.eachPlayerMustSee,
@@ -109,6 +111,7 @@ class _PantallaVerPalabraState extends State<PantallaVerPalabra> {
              ),
            ),
          ],
+          ),
        ),
      ),
    );
@@ -169,10 +172,12 @@ class _PantallaRevelarPalabraState extends State<_PantallaRevelarPalabra> {

    return Scaffold(
      appBar: AppBar(title: Text(widget.nombre)),
-      body: Center(
-        child: Padding(
-          padding: const EdgeInsets.all(32),
-          child: Column(
+      body: FondoFarolero(
+        intenso: true,
+        child: Center(
+          child: Padding(
+            padding: const EdgeInsets.all(32),
+            child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
@@ -225,17 +230,7 @@ class _PantallaRevelarPalabraState extends State<_PantallaRevelarPalabra> {
                          ),
                          if (!widget.esImpostor) ...[
                            const SizedBox(height: 12),
-                            Text(
-                              widget.palabra,
-                              style: Theme.of(context)
-                                  .textTheme
-                                  .headlineLarge
-                                  ?.copyWith(
-                                    fontSize: 32,
-                                    color: Colors.white,
-                                  ),
-                              textAlign: TextAlign.center,
-                            ),
+                            TarjetaPalabraFarolero(palabra: widget.palabra),
                          ],
                          if (widget.esImpostor && widget.pistaActiva) ...[
                            const SizedBox(height: 12),
@@ -324,6 +319,7 @@ class _PantallaRevelarPalabraState extends State<_PantallaRevelarPalabra> {
          ),
        ),
      ),
+      ),
    );
  }
 }
--- a/lib/pantallas/pantalla_votacion.dart
+++ b/lib/pantallas/pantalla_votacion.dart
@@ -2,6 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:farolero/l10n/generated/app_localizations.dart';
 import 'package:provider/provider.dart';
 import '../estado/estado_juego.dart';
+import '../tema/componentes_farolero.dart';
 import '../tema/tema_app.dart';
 import 'pantalla_resultado.dart';

@@ -58,9 +59,10 @@ class _PantallaVotacionState extends State<PantallaVotacion> {
        title: Text(l10n.voting),
        automaticallyImplyLeading: false,
      ),
-      body: Padding(
-        padding: const EdgeInsets.all(16),
-        child: Column(
+      body: FondoFarolero(
+        child: Padding(
+          padding: const EdgeInsets.all(16),
+          child: Column(
          children: [
            // Progreso de votos
            Container(
@@ -161,6 +163,7 @@ class _PantallaVotacionState extends State<PantallaVotacion> {
              ),
            ),
          ],
+          ),
        ),
      ),
    );
@@ -174,10 +177,11 @@ class _PantallaVotacionState extends State<PantallaVotacion> {
        title: Text(l10n.votingComplete),
        automaticallyImplyLeading: false,
      ),
-      body: Center(
-        child: Padding(
-          padding: const EdgeInsets.all(32),
-          child: Column(
+      body: FondoFarolero(
+        child: Center(
+          child: Padding(
+            padding: const EdgeInsets.all(32),
+            child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text('🗳️', style: TextStyle(fontSize: 64)),
@@ -213,6 +217,7 @@ class _PantallaVotacionState extends State<PantallaVotacion> {
                ),
              ),
            ],
+            ),
          ),
        ),
      ),