Completo y absoluto cambio de diseño

lib/tema/componentes_farolero.dart

@@ -0,0 +1,426 @@
+import 'dart:math' as math;
+
+import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
+
+import 'tema_app.dart';
+
+class FondoFarolero extends StatelessWidget {
+  final Widget child;
+  final bool intenso;
+
+  const FondoFarolero({
+    super.key,
+    required this.child,
+    this.intenso = false,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      decoration: const BoxDecoration(gradient: TemaApp.gradienteFondo),
+      child: CustomPaint(
+        painter: _FondoFaroleroPainter(intenso: intenso),
+        child: child,
+      ),
+    );
+  }
+}
+
+class PanelFarolero extends StatelessWidget {
+  final Widget child;
+  final EdgeInsetsGeometry padding;
+  final EdgeInsetsGeometry? margin;
+  final Color? color;
+  final Color? borderColor;
+
+  const PanelFarolero({
+    super.key,
+    required this.child,
+    this.padding = const EdgeInsets.all(16),
+    this.margin,
+    this.color,
+    this.borderColor,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      margin: margin,
+      padding: padding,
+      decoration: TemaApp.decoracionPanel(color: color, borderColor: borderColor),
+      child: child,
+    );
+  }
+}
+
+class LogoFarolero extends StatelessWidget {
+  final double size;
+
+  const LogoFarolero({super.key, this.size = 64});
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      alignment: Alignment.center,
+      children: [
+        Positioned(
+          top: 0,
+          child: Icon(
+            Icons.lightbulb,
+            color: TemaApp.colorDorado.withValues(alpha: 0.32),
+            size: size * 0.82,
+          ),
+        ),
+        Text(
+          'FAROLERO',
+          style: GoogleFonts.bangers(
+            fontSize: size,
+            color: TemaApp.colorNaranja,
+            letterSpacing: 0,
+            shadows: const [
+              Shadow(offset: Offset(3, 4), blurRadius: 0, color: Color(0xFF5E1205)),
+              Shadow(offset: Offset(0, 0), blurRadius: 16, color: Color(0xFFFFC247)),
+            ],
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+class BotonFarolero extends StatelessWidget {
+  final String texto;
+  final IconData icono;
+  final VoidCallback? onPressed;
+  final LinearGradient gradient;
+  final Color foreground;
+
+  const BotonFarolero({
+    super.key,
+    required this.texto,
+    required this.icono,
+    required this.onPressed,
+    this.gradient = TemaApp.gradientePrimario,
+    this.foreground = Colors.black,
+  });
+
+  const BotonFarolero.secundario({
+    super.key,
+    required this.texto,
+    required this.icono,
+    required this.onPressed,
+  })  : gradient = const LinearGradient(
+          colors: [TemaApp.colorPurpura, Color(0xFF2B1736)],
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+        ),
+        foreground = Colors.white;
+
+  const BotonFarolero.oscuro({
+    super.key,
+    required this.texto,
+    required this.icono,
+    required this.onPressed,
+  })  : gradient = const LinearGradient(
+          colors: [Color(0xFF151F27), Color(0xFF090E13)],
+          begin: Alignment.topCenter,
+          end: Alignment.bottomCenter,
+        ),
+        foreground = TemaApp.colorTexto;
+
+  @override
+  Widget build(BuildContext context) {
+    final habilitado = onPressed != null;
+
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        borderRadius: BorderRadius.circular(8),
+        onTap: onPressed,
+        child: Ink(
+          height: 54,
+          decoration: BoxDecoration(
+            gradient: habilitado
+                ? gradient
+                : const LinearGradient(
+                    colors: [TemaApp.colorTarjeta, TemaApp.colorSuperficie],
+                  ),
+            borderRadius: BorderRadius.circular(8),
+            border: Border.all(
+              color: habilitado
+                  ? TemaApp.colorDorado.withValues(alpha: 0.74)
+                  : TemaApp.colorBorde,
+            ),
+            boxShadow: [
+              BoxShadow(
+                color: Colors.black.withValues(alpha: 0.34),
+                blurRadius: 14,
+                offset: const Offset(0, 8),
+              ),
+            ],
+          ),
+          child: Row(
+            children: [
+              SizedBox(
+                width: 58,
+                child: Icon(icono, color: foreground, size: 28),
+              ),
+              Expanded(
+                child: Text(
+                  texto.toUpperCase(),
+                  textAlign: TextAlign.center,
+                  style: Theme.of(context).textTheme.titleMedium?.copyWith(
+                    color: foreground,
+                    fontSize: 18,
+                    fontWeight: FontWeight.w800,
+                  ),
+                ),
+              ),
+              const SizedBox(width: 58),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class AccesoFarolero extends StatelessWidget {
+  final String etiqueta;
+  final IconData icono;
+  final VoidCallback onPressed;
+
+  const AccesoFarolero({
+    super.key,
+    required this.etiqueta,
+    required this.icono,
+    required this.onPressed,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        borderRadius: BorderRadius.circular(8),
+        onTap: onPressed,
+        child: Ink(
+          height: 66,
+          decoration: TemaApp.decoracionPanel(color: TemaApp.colorSuperficie),
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: [
+              Icon(icono, color: TemaApp.colorNaranja, size: 22),
+              const SizedBox(height: 5),
+              Text(
+                etiqueta.toUpperCase(),
+                maxLines: 1,
+                overflow: TextOverflow.ellipsis,
+                style: Theme.of(context).textTheme.bodySmall?.copyWith(
+                  color: TemaApp.colorDorado,
+                  fontSize: 11,
+                  fontWeight: FontWeight.w700,
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class TarjetaPalabraFarolero extends StatelessWidget {
+  final String palabra;
+
+  const TarjetaPalabraFarolero({super.key, required this.palabra});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: double.infinity,
+      padding: const EdgeInsets.symmetric(horizontal: 18, vertical: 28),
+      decoration: BoxDecoration(
+        color: const Color(0xFFC48642),
+        borderRadius: BorderRadius.circular(8),
+        border: Border.all(color: const Color(0xFF6B3519), width: 2),
+        boxShadow: [
+          BoxShadow(
+            color: TemaApp.colorNaranja.withValues(alpha: 0.28),
+            blurRadius: 24,
+          ),
+        ],
+      ),
+      child: Text(
+        palabra.toUpperCase(),
+        textAlign: TextAlign.center,
+        style: GoogleFonts.oswald(
+          color: const Color(0xFF1B0C05),
+          fontSize: 42,
+          fontWeight: FontWeight.w900,
+          letterSpacing: 0,
+        ),
+      ),
+    );
+  }
+}
+
+class AvatarFarolero extends StatelessWidget {
+  final String texto;
+  final Color color;
+  final double size;
+
+  const AvatarFarolero({
+    super.key,
+    required this.texto,
+    this.color = TemaApp.colorNaranja,
+    this.size = 40,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      width: size,
+      height: size,
+      decoration: BoxDecoration(
+        shape: BoxShape.circle,
+        gradient: RadialGradient(
+          colors: [color.withValues(alpha: 0.9), TemaApp.colorSuperficie],
+        ),
+        border: Border.all(color: TemaApp.colorDorado, width: 2),
+      ),
+      child: Center(
+        child: Text(
+          texto,
+          style: TextStyle(
+            color: TemaApp.colorTexto,
+            fontWeight: FontWeight.bold,
+            fontSize: size * 0.36,
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _FondoFaroleroPainter extends CustomPainter {
+  final bool intenso;
+
+  const _FondoFaroleroPainter({required this.intenso});
+
+  @override
+  void paint(Canvas canvas, Size size) {
+    final paint = Paint()..isAntiAlias = true;
+    final alto = size.height;
+    final ancho = size.width;
+
+    paint.color = const Color(0xFF152845).withValues(alpha: intenso ? 0.34 : 0.22);
+    canvas.drawCircle(Offset(ancho * 0.78, alto * 0.16), 18, paint);
+
+    paint.color = const Color(0xFF07101A).withValues(alpha: 0.82);
+    final colinas = Path()
+      ..moveTo(0, alto * 0.34)
+      ..quadraticBezierTo(ancho * 0.28, alto * 0.21, ancho * 0.55, alto * 0.33)
+      ..quadraticBezierTo(ancho * 0.82, alto * 0.43, ancho, alto * 0.26)
+      ..lineTo(ancho, alto)
+      ..lineTo(0, alto)
+      ..close();
+    canvas.drawPath(colinas, paint);
+
+    _dibujarCasas(canvas, size, paint);
+    _dibujarFarol(canvas, size, paint);
+
+    paint.shader = RadialGradient(
+      colors: [
+        TemaApp.colorNaranja.withValues(alpha: intenso ? 0.26 : 0.16),
+        Colors.transparent,
+      ],
+    ).createShader(Rect.fromCircle(center: Offset(ancho * 0.52, alto * 0.36), radius: 160));
+    canvas.drawCircle(Offset(ancho * 0.52, alto * 0.36), 160, paint);
+    paint.shader = null;
+  }
+
+  void _dibujarCasas(Canvas canvas, Size size, Paint paint) {
+    final alto = size.height;
+    final ancho = size.width;
+    paint.color = const Color(0xFF020407).withValues(alpha: 0.72);
+
+    for (var i = 0; i < 5; i++) {
+      final w = ancho * (0.16 + i * 0.018);
+      final h = alto * (0.18 + (i % 2) * 0.05);
+      final x = -30 + i * ancho * 0.24;
+      final y = alto * (0.72 - i * 0.02);
+      final casa = Rect.fromLTWH(x, y - h, w, h);
+      canvas.drawRect(casa, paint);
+      final tejado = Path()
+        ..moveTo(x - 8, y - h)
+        ..lineTo(x + w * 0.48, y - h - 38)
+        ..lineTo(x + w + 8, y - h)
+        ..close();
+      canvas.drawPath(tejado, paint);
+
+      final ventana = Paint()
+        ..color = TemaApp.colorNaranja.withValues(alpha: 0.38)
+        ..isAntiAlias = true;
+      for (var j = 0; j < 2; j++) {
+        canvas.drawRRect(
+          RRect.fromRectAndRadius(
+            Rect.fromLTWH(x + 18 + j * 34, y - h + 36, 12, 22),
+            const Radius.circular(2),
+          ),
+          ventana,
+        );
+      }
+    }
+  }
+
+  void _dibujarFarol(Canvas canvas, Size size, Paint paint) {
+    final alto = size.height;
+    final ancho = size.width;
+    final centro = Offset(ancho * 0.5, alto * 0.28);
+    final glow = Paint()
+      ..shader = RadialGradient(
+        colors: [
+          TemaApp.colorNaranja.withValues(alpha: 0.44),
+          Colors.transparent,
+        ],
+      ).createShader(Rect.fromCircle(center: centro, radius: 92));
+    canvas.drawCircle(centro, 92, glow);
+
+    paint
+      ..shader = null
+      ..style = PaintingStyle.stroke
+      ..strokeWidth = 3
+      ..color = const Color(0xFF050507).withValues(alpha: 0.82);
+    canvas.drawArc(
+      Rect.fromCircle(center: centro.translate(0, -16), radius: 35),
+      math.pi,
+      math.pi,
+      false,
+      paint,
+    );
+    paint.style = PaintingStyle.fill;
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromCenter(center: centro, width: 38, height: 54),
+        const Radius.circular(5),
+      ),
+      paint,
+    );
+    paint.color = TemaApp.colorNaranja.withValues(alpha: 0.82);
+    canvas.drawRRect(
+      RRect.fromRectAndRadius(
+        Rect.fromCenter(center: centro, width: 21, height: 34),
+        const Radius.circular(4),
+      ),
+      paint,
+    );
+  }
+
+  @override
+  bool shouldRepaint(covariant _FondoFaroleroPainter oldDelegate) {
+    return oldDelegate.intenso != intenso;
+  }
+}

lib/tema/tema_app.dart

@@ -2,114 +2,212 @@ import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 
 class TemaApp {
-  static const colorFondo = Color(0xFF121212);
-  static const colorSuperficie = Color(0xFF1E1E1E);
-  static const colorTarjeta = Color(0xFF2A2A2A);
-  static const colorAcento = Color(0xFFE53935); // Rojo impostor
-  static const colorAcentoClaro = Color(0xFFFF6F61);
-  static const colorNaranja = Color(0xFFFF9800);
-  static const colorVerde = Color(0xFF4CAF50);
+  static const colorFondo = Color(0xFF05080D);
+  static const colorFondoAzul = Color(0xFF0A1520);
+  static const colorSuperficie = Color(0xFF0D151C);
+  static const colorTarjeta = Color(0xFF121B23);
+  static const colorBorde = Color(0xFF263947);
+  static const colorAcento = Color(0xFFC02824);
+  static const colorAcentoClaro = Color(0xFFF06A1A);
+  static const colorNaranja = Color(0xFFF49A13);
+  static const colorDorado = Color(0xFFFFCE55);
+  static const colorPurpura = Color(0xFF65306E);
+  static const colorAzul = Color(0xFF235BCE);
+  static const colorVerde = Color(0xFF61B944);
   static const colorTexto = Color(0xFFFFFFFF);
-  static const colorTextoSecundario = Color(0xFFB0B0B0);
+  static const colorTextoSecundario = Color(0xFFC2B9AA);
+
+  static const gradientePrimario = LinearGradient(
+    colors: [Color(0xFFFFB11A), Color(0xFFE87A08)],
+    begin: Alignment.topCenter,
+    end: Alignment.bottomCenter,
+  );
+
+  static const gradientePeligro = LinearGradient(
+    colors: [Color(0xFFC02824), Color(0xFF741112)],
+    begin: Alignment.topCenter,
+    end: Alignment.bottomCenter,
+  );
+
+  static const gradienteFondo = LinearGradient(
+    colors: [Color(0xFF09131E), Color(0xFF030507)],
+    begin: Alignment.topCenter,
+    end: Alignment.bottomCenter,
+  );
 
   static ThemeData obtenerTema() {
+    final base = ThemeData.dark(useMaterial3: true);
+    final cuerpo = GoogleFonts.robotoCondensedTextTheme(base.textTheme);
+
     return ThemeData(
       useMaterial3: true,
       brightness: Brightness.dark,
       scaffoldBackgroundColor: colorFondo,
       colorScheme: const ColorScheme.dark(
-        primary: colorAcento,
+        primary: colorNaranja,
         secondary: colorNaranja,
         surface: colorSuperficie,
         error: colorAcento,
+        onPrimary: Colors.black,
+        onSurface: colorTexto,
       ),
-      textTheme: GoogleFonts.poppinsTextTheme(
-        const TextTheme(
+      textTheme: cuerpo.copyWith(
           headlineLarge: TextStyle(
+            fontFamily: GoogleFonts.oswald().fontFamily,
             color: colorTexto,
             fontWeight: FontWeight.bold,
-            fontSize: 28,
+            fontSize: 30,
+            letterSpacing: 0,
           ),
           headlineMedium: TextStyle(
+            fontFamily: GoogleFonts.oswald().fontFamily,
             color: colorTexto,
             fontWeight: FontWeight.bold,
             fontSize: 22,
+            letterSpacing: 0,
           ),
           titleLarge: TextStyle(
-            color: colorTexto,
-            fontWeight: FontWeight.w600,
+            fontFamily: GoogleFonts.oswald().fontFamily,
+            color: colorDorado,
+            fontWeight: FontWeight.w700,
             fontSize: 18,
+            letterSpacing: 0,
           ),
           titleMedium: TextStyle(
+            fontFamily: GoogleFonts.oswald().fontFamily,
             color: colorTexto,
-            fontWeight: FontWeight.w500,
+            fontWeight: FontWeight.w600,
             fontSize: 16,
+            letterSpacing: 0,
           ),
-          bodyLarge: TextStyle(color: colorTexto, fontSize: 16),
-          bodyMedium: TextStyle(color: colorTextoSecundario, fontSize: 14),
-        ),
+          bodyLarge: const TextStyle(color: colorTexto, fontSize: 16),
+          bodyMedium: const TextStyle(color: colorTextoSecundario, fontSize: 14),
+          bodySmall: const TextStyle(color: colorTextoSecundario, fontSize: 12),
       ),
       cardTheme: CardThemeData(
-        color: colorTarjeta,
-        elevation: 4,
-        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
+        color: colorTarjeta.withValues(alpha: 0.82),
+        elevation: 0,
+        margin: EdgeInsets.zero,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(8),
+          side: const BorderSide(color: colorBorde),
+        ),
       ),
       elevatedButtonTheme: ElevatedButtonThemeData(
         style: ElevatedButton.styleFrom(
-          backgroundColor: colorAcento,
-          foregroundColor: colorTexto,
-          padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
-          textStyle: GoogleFonts.poppins(
-            fontWeight: FontWeight.w600,
+          backgroundColor: colorNaranja,
+          foregroundColor: Colors.black,
+          disabledBackgroundColor: colorTarjeta,
+          disabledForegroundColor: colorTextoSecundario,
+          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 15),
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+          textStyle: GoogleFonts.oswald(
+            fontWeight: FontWeight.w700,
             fontSize: 16,
+            letterSpacing: 0,
           ),
         ),
       ),
       outlinedButtonTheme: OutlinedButtonThemeData(
         style: OutlinedButton.styleFrom(
           foregroundColor: colorTexto,
-          side: const BorderSide(color: colorAcento),
-          padding: const EdgeInsets.symmetric(horizontal: 32, vertical: 16),
-          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+          side: const BorderSide(color: colorBorde),
+          padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 15),
+          shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+          textStyle: GoogleFonts.oswald(
+            fontWeight: FontWeight.w700,
+            fontSize: 16,
+            letterSpacing: 0,
+          ),
         ),
       ),
       inputDecorationTheme: InputDecorationTheme(
         filled: true,
-        fillColor: colorTarjeta,
+        fillColor: const Color(0xFF0B1117),
         border: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(12),
-          borderSide: BorderSide.none,
+          borderRadius: BorderRadius.circular(8),
+          borderSide: const BorderSide(color: colorBorde),
+        ),
+        enabledBorder: OutlineInputBorder(
+          borderRadius: BorderRadius.circular(8),
+          borderSide: const BorderSide(color: colorBorde),
         ),
         focusedBorder: OutlineInputBorder(
-          borderRadius: BorderRadius.circular(12),
-          borderSide: const BorderSide(color: colorAcento),
+          borderRadius: BorderRadius.circular(8),
+          borderSide: const BorderSide(color: colorNaranja),
         ),
         labelStyle: const TextStyle(color: colorTextoSecundario),
         hintStyle: const TextStyle(color: colorTextoSecundario),
       ),
       appBarTheme: AppBarTheme(
         backgroundColor: colorFondo,
-        foregroundColor: colorTexto,
+        foregroundColor: colorNaranja,
+        centerTitle: true,
         elevation: 0,
-        titleTextStyle: GoogleFonts.poppins(
-          color: colorTexto,
+        titleTextStyle: GoogleFonts.oswald(
+          color: colorDorado,
           fontWeight: FontWeight.bold,
           fontSize: 20,
+          letterSpacing: 0,
+        ),
+      ),
+      dividerTheme: const DividerThemeData(color: colorBorde, thickness: 1),
+      listTileTheme: const ListTileThemeData(
+        iconColor: colorNaranja,
+        textColor: colorTexto,
+        subtitleTextStyle: TextStyle(color: colorTextoSecundario),
+      ),
+      segmentedButtonTheme: SegmentedButtonThemeData(
+        style: ButtonStyle(
+          backgroundColor: WidgetStateProperty.resolveWith((states) {
+            if (states.contains(WidgetState.selected)) return colorNaranja;
+            return colorSuperficie;
+          }),
+          foregroundColor: WidgetStateProperty.resolveWith((states) {
+            if (states.contains(WidgetState.selected)) return Colors.black;
+            return colorTexto;
+          }),
+          side: const WidgetStatePropertyAll(BorderSide(color: colorBorde)),
+          shape: WidgetStatePropertyAll(
+            RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+          ),
         ),
       ),
       switchTheme: SwitchThemeData(
         thumbColor: WidgetStateProperty.resolveWith((states) {
-          if (states.contains(WidgetState.selected)) return colorAcento;
+          if (states.contains(WidgetState.selected)) return colorNaranja;
           return colorTextoSecundario;
         }),
         trackColor: WidgetStateProperty.resolveWith((states) {
           if (states.contains(WidgetState.selected)) {
-            return colorAcento.withValues(alpha: 0.5);
+            return colorNaranja.withValues(alpha: 0.5);
           }
           return colorTarjeta;
         }),
       ),
+      snackBarTheme: SnackBarThemeData(
+        backgroundColor: colorTarjeta,
+        contentTextStyle: cuerpo.bodyMedium?.copyWith(color: colorTexto),
+        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
+      ),
+    );
+  }
+
+  static BoxDecoration decoracionPanel({
+    Color? color,
+    Color? borderColor,
+  }) {
+    return BoxDecoration(
+      color: color ?? colorTarjeta.withValues(alpha: 0.84),
+      borderRadius: BorderRadius.circular(8),
+      border: Border.all(color: borderColor ?? colorBorde),
+      boxShadow: [
+        BoxShadow(
+          color: Colors.black.withValues(alpha: 0.35),
+          blurRadius: 18,
+          offset: const Offset(0, 10),
+        ),
+      ],
     );
   }
 }