Co-authored-by: eddgranados12 <eddgranados12@users.noreply.github.com>

Co-authored-by: MENDOZA BALLARDO GAEL RICARDO <gael-meb123@users.noreply.github.com>
Co-authored-by: Azareth-Tr <Azareth-Tr@users.noreply.github.com>

modificacion de vistas panel admin, login, animaciones y implementacion de mascota

recolecta_app/lib/shared/widgets/progress_steps.dart

@@ -0,0 +1,174 @@
+// lib/shared/widgets/progress_steps.dart
+// Barra de 4 pasos del servicio. Sin mapa ni coordenadas.
+// Los pasos mapean a los eventos de positionId del backend:
+//   0 = pendiente, 1 = ROUTE_START (pos 2), 2 = TRUCK_PROXIMITY (pos 4), 3 = ROUTE_COMPLETED (pos 8)
+ 
+import 'package:flutter/material.dart';
+ 
+class ProgressSteps extends StatelessWidget {
+  /// 0 = pendiente, 1 = en camino, 2 = cerca, 3 = completado
+  final int stepIndex;
+ 
+  const ProgressSteps({super.key, required this.stepIndex});
+ 
+  static const _steps = [
+    _StepData('Servicio pendiente', Icons.access_time_rounded),
+    _StepData('Salió al sector', Icons.arrow_forward_rounded),
+    _StepData('Cerca (~15 min)', Icons.local_shipping_rounded),
+    _StepData('Finalizado', Icons.check_circle_outline_rounded),
+  ];
+ 
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surface,
+        borderRadius: BorderRadius.circular(12),
+        border: Border.all(
+          color: Theme.of(context).colorScheme.outlineVariant,
+        ),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Padding(
+            padding: const EdgeInsets.fromLTRB(14, 10, 14, 8),
+            child: Row(
+              children: [
+                const Icon(Icons.route_rounded,
+                    size: 16, color: Color(0xFF1D9E75)),
+                const SizedBox(width: 6),
+                Text(
+                  'Progreso del servicio',
+                  style: TextStyle(
+                    fontSize: 13,
+                    fontWeight: FontWeight.w500,
+                    color: Theme.of(context).colorScheme.onSurface,
+                  ),
+                ),
+              ],
+            ),
+          ),
+          const Divider(height: 1, thickness: 0.5),
+          ...List.generate(_steps.length, (i) {
+            final status = _stepStatus(i);
+            return _StepRow(
+              data: _steps[i],
+              status: status,
+              isLast: i == _steps.length - 1,
+            );
+          }),
+        ],
+      ),
+    );
+  }
+ 
+  _Status _stepStatus(int i) {
+    if (i < stepIndex) return _Status.done;
+    if (i == stepIndex) return _Status.active;
+    return _Status.pending;
+  }
+}
+ 
+enum _Status { done, active, pending }
+ 
+class _StepData {
+  final String label;
+  final IconData icon;
+  const _StepData(this.label, this.icon);
+}
+ 
+class _StepRow extends StatelessWidget {
+  final _StepData data;
+  final _Status status;
+  final bool isLast;
+ 
+  const _StepRow({
+    required this.data,
+    required this.status,
+    required this.isLast,
+  });
+ 
+  @override
+  Widget build(BuildContext context) {
+    Color iconBg;
+    Color iconColor;
+    IconData displayIcon;
+ 
+    switch (status) {
+      case _Status.done:
+        iconBg = const Color(0xFFE1F5EE);
+        iconColor = const Color(0xFF1D9E75);
+        displayIcon = Icons.check_rounded;
+        break;
+      case _Status.active:
+        iconBg = const Color(0xFFFAEEDA);
+        iconColor = const Color(0xFFBA7517);
+        displayIcon = data.icon;
+        break;
+      case _Status.pending:
+        iconBg = Theme.of(context).colorScheme.surfaceContainerLow;
+        iconColor = Theme.of(context).colorScheme.onSurfaceVariant;
+        displayIcon = Icons.radio_button_unchecked_rounded;
+        break;
+    }
+ 
+    return Container(
+      decoration: BoxDecoration(
+        border: isLast
+            ? null
+            : Border(
+                bottom: BorderSide(
+                  color: Theme.of(context).colorScheme.outlineVariant,
+                  width: 0.5,
+                ),
+              ),
+      ),
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
+        child: Row(
+          children: [
+            Container(
+              width: 30,
+              height: 30,
+              decoration: BoxDecoration(
+                color: iconBg,
+                shape: BoxShape.circle,
+              ),
+              child: Icon(displayIcon, size: 15, color: iconColor),
+            ),
+            const SizedBox(width: 12),
+            Expanded(
+              child: Text(
+                data.label,
+                style: TextStyle(
+                  fontSize: 13,
+                  color: status == _Status.pending
+                      ? Theme.of(context).colorScheme.onSurfaceVariant
+                      : Theme.of(context).colorScheme.onSurface,
+                ),
+              ),
+            ),
+            if (status == _Status.active)
+              Container(
+                padding:
+                    const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
+                decoration: BoxDecoration(
+                  color: const Color(0xFFFAEEDA),
+                  borderRadius: BorderRadius.circular(100),
+                ),
+                child: const Text(
+                  'Ahora',
+                  style: TextStyle(
+                    fontSize: 11,
+                    fontWeight: FontWeight.w500,
+                    color: Color(0xFF633806),
+                  ),
+                ),
+              ),
+          ],
+        ),
+      ),
+    );
+  }
+}