diff --git a/backend/app/api/addresses.py b/backend/app/api/addresses.py
index 75e142e..3b02662 100644
--- a/backend/app/api/addresses.py
+++ b/backend/app/api/addresses.py
@@ -96,3 +96,61 @@ def get_address(
         raise HTTPException(status_code=403, detail="No tienes acceso a este domicilio")
 
     return address
+
+
+@router.get("/{address_id}/unit")
+def get_address_unit(
+    address_id: str,
+    current_user: dict = Depends(get_current_user),
+):
+    """
+    Devuelve la unidad asignada al domicilio (a través de su ruta).
+    Cadena: addresses.route_id → routes.truck_id → units.
+    El ciudadano sólo puede consultar sus propios domicilios.
+    """
+    addr_res = (
+        supabase_admin.table("addresses")
+        .select("id, user_id, route_id")
+        .eq("id", address_id)
+        .maybe_single()
+        .execute()
+    )
+    if not addr_res.data:
+        raise HTTPException(status_code=404, detail="Domicilio no encontrado")
+
+    address = addr_res.data
+    if current_user["role"] != "admin" and address["user_id"] != current_user["user_id"]:
+        raise HTTPException(status_code=403, detail="No tienes acceso a este domicilio")
+
+    route_id = address.get("route_id")
+    if not route_id:
+        raise HTTPException(
+            status_code=404,
+            detail="El domicilio no tiene una ruta asociada",
+        )
+
+    route_res = (
+        supabase_admin.table("routes")
+        .select("id, truck_id")
+        .eq("id", route_id)
+        .maybe_single()
+        .execute()
+    )
+    if not route_res.data or route_res.data.get("truck_id") is None:
+        raise HTTPException(
+            status_code=404,
+            detail="La ruta asignada no tiene unidad activa",
+        )
+
+    truck_id = route_res.data["truck_id"]
+    unit_res = (
+        supabase_admin.table("units")
+        .select("id, plate, status")
+        .eq("id", truck_id)
+        .maybe_single()
+        .execute()
+    )
+    if not unit_res.data:
+        raise HTTPException(status_code=404, detail="Unidad no encontrada")
+
+    return unit_res.data
diff --git a/backend/app/api/admin.py b/backend/app/api/admin.py
index a937e96..470eea8 100644
--- a/backend/app/api/admin.py
+++ b/backend/app/api/admin.py
@@ -6,7 +6,7 @@ Operan directamente contra Supabase (RLS bypaseado por service_role).
 from typing import Optional
 from fastapi import APIRouter, Depends, HTTPException
 
-from app.core.deps import require_role
+from app.core.deps import get_current_user, require_role
 from app.core.supabase_client import supabase_admin
 from app.schemas.admin import (
     AdminUser,
@@ -375,3 +375,156 @@ def delete_driver(driver_id: str):
     except Exception as e:
         raise HTTPException(400, f"Error al borrar el conductor: {e}")
     return None
+
+
+# ── Incidents por unidad ──────────────────────────────────────────────────────
+_INCIDENT_CATEGORIES = {
+    "derrame",
+    "dano_propiedad",
+    "conducta",
+    "no_recoleccion",
+    "otro",
+}
+
+
+def _route_for_unit(unit_id: int) -> Optional[str]:
+    """Devuelve el route_id que actualmente tiene asignada la unidad
+    (vía routes.truck_id), o None si no está asignada a ninguna ruta."""
+    try:
+        res = (
+            supabase_admin.table("routes")
+            .select("id")
+            .eq("truck_id", unit_id)
+            .limit(1)
+            .execute()
+        )
+        rows = res.data or []
+        return rows[0]["id"] if rows else None
+    except Exception:
+        return None
+
+
+def _driver_for_unit(unit_id: int, users_map: dict[str, dict]) -> Optional[str]:
+    """Devuelve el nombre del chofer asignado a la unidad (drivers.unit_id)."""
+    try:
+        res = (
+            supabase_admin.table("drivers")
+            .select("user_id")
+            .eq("unit_id", unit_id)
+            .limit(1)
+            .execute()
+        )
+        rows = res.data or []
+        if not rows:
+            return None
+        user_id = str(rows[0].get("user_id"))
+        return (users_map.get(user_id) or {}).get("name")
+    except Exception:
+        return None
+
+
+def _serialize_incident(row: dict, route_id: Optional[str], driver_name: Optional[str]) -> dict:
+    """Da la forma que espera el cliente Flutter (admin_incident.dart)."""
+    return {
+        "id": str(row.get("id")),
+        "unit_id": row.get("unit_id"),
+        "route_id": route_id,
+        "type": row.get("category"),
+        "description": row.get("description"),
+        "driver_name": driver_name,
+        "status": row.get("status") or "open",
+        "photo_url": row.get("photo_url"),
+        "created_at": row.get("created_at") and str(row["created_at"]),
+    }
+
+
+@router.get("/units/{unit_id}/incidents")
+def list_unit_incidents(unit_id: int):
+    """Reportes ciudadanos asociados a esta unidad, más reciente primero."""
+    # Verifica que la unidad exista (devuelve 404 si no)
+    unit_res = (
+        supabase_admin.table("units")
+        .select("id")
+        .eq("id", unit_id)
+        .maybe_single()
+        .execute()
+    )
+    if not unit_res.data:
+        raise HTTPException(404, "Unidad no encontrada")
+
+    try:
+        res = (
+            supabase_admin.table("incidents")
+            .select("id, unit_id, user_id, category, description, status, photo_url, created_at")
+            .eq("unit_id", unit_id)
+            .order("created_at", desc=True)
+            .execute()
+        )
+    except Exception as e:
+        raise HTTPException(500, f"Error al listar incidencias: {e}")
+
+    rows = res.data or []
+    route_id = _route_for_unit(unit_id)
+
+    # Pre-cargar el mapa de nombres una sola vez
+    users_res = supabase_admin.table("users").select("id, name").execute()
+    users_map: dict[str, dict] = {
+        str(u["id"]): {"name": u.get("name")} for u in (users_res.data or [])
+    }
+    driver_name = _driver_for_unit(unit_id, users_map)
+
+    return [_serialize_incident(r, route_id, driver_name) for r in rows]
+
+
+@router.post("/units/{unit_id}/incidents", status_code=201)
+def create_unit_incident(
+    unit_id: int,
+    body: dict,
+    current_user: dict = Depends(get_current_user),
+):
+    """Crea una incidencia para esta unidad. El admin queda como reporter."""
+    category = (body.get("type") or body.get("category") or "").strip()
+    description = (body.get("description") or "").strip()
+
+    if category not in _INCIDENT_CATEGORIES:
+        raise HTTPException(
+            400,
+            f"Categoría inválida. Use una de: {sorted(_INCIDENT_CATEGORIES)}",
+        )
+    if len(description) < 3:
+        # La tabla requiere description NOT NULL y un mínimo razonable.
+        description = description or category
+
+    # La unidad debe existir
+    unit_res = (
+        supabase_admin.table("units")
+        .select("id")
+        .eq("id", unit_id)
+        .maybe_single()
+        .execute()
+    )
+    if not unit_res.data:
+        raise HTTPException(404, "Unidad no encontrada")
+
+    payload = {
+        "user_id": current_user["user_id"],
+        "unit_id": unit_id,
+        "category": category,
+        "description": description,
+    }
+    try:
+        res = supabase_admin.table("incidents").insert(payload).execute()
+    except Exception as e:
+        raise HTTPException(500, f"Error al crear la incidencia: {e}")
+
+    row = (res.data or [None])[0]
+    if not row:
+        raise HTTPException(500, "Supabase no devolvió la fila creada")
+
+    route_id = _route_for_unit(unit_id)
+    users_res = supabase_admin.table("users").select("id, name").execute()
+    users_map: dict[str, dict] = {
+        str(u["id"]): {"name": u.get("name")} for u in (users_res.data or [])
+    }
+    driver_name = _driver_for_unit(unit_id, users_map)
+    return _serialize_incident(row, route_id, driver_name)
diff --git a/backend/app/api/feedback.py b/backend/app/api/feedback.py
new file mode 100644
index 0000000..4da2fe2
--- /dev/null
+++ b/backend/app/api/feedback.py
@@ -0,0 +1,93 @@
+"""Endpoint de retroalimentación ciudadana.
+
+Reglas:
+- El user_id se toma del token (nunca del body).
+- target_unit_id es la UNIDAD (camión), no el chofer.
+- La inserción usa supabase_admin (service_role) que bypassea RLS.
+"""
+from fastapi import APIRouter, Depends, HTTPException
+
+from app.core.deps import get_current_user
+from app.core.supabase_client import supabase_admin
+from app.schemas.feedback import FeedbackCreate, FeedbackOut
+
+router = APIRouter(prefix="/feedback", tags=["feedback"])
+
+
+@router.post("", response_model=FeedbackOut, status_code=201)
+def create_feedback(
+    body: FeedbackCreate,
+    current_user: dict = Depends(get_current_user),
+):
+    user_id = current_user["user_id"]
+
+    # Validar que la unidad exista si se envió
+    if body.target_unit_id is not None:
+        try:
+            unit = (
+                supabase_admin.table("units")
+                .select("id")
+                .eq("id", body.target_unit_id)
+                .limit(1)
+                .execute()
+            )
+        except Exception as e:
+            raise HTTPException(status_code=500, detail=f"Error al validar unidad: {e}")
+        if not unit.data:
+            raise HTTPException(status_code=400, detail="Unidad inexistente")
+
+    payload = {
+        "user_id": user_id,
+        "address_id": body.address_id,
+        "type": body.type,
+        "target_unit_id": body.target_unit_id,
+        "message": body.message,
+        "rating": body.rating,
+    }
+
+    try:
+        res = supabase_admin.table("feedback").insert(payload).execute()
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error al guardar feedback: {e}")
+
+    row = (res.data or [{}])[0]
+    return FeedbackOut(
+        id=str(row.get("id")),
+        user_id=str(row.get("user_id")),
+        address_id=row.get("address_id") and str(row["address_id"]),
+        type=row.get("type") or body.type,
+        target_unit_id=row.get("target_unit_id"),
+        message=row.get("message"),
+        rating=row.get("rating"),
+        created_at=row.get("created_at") and str(row["created_at"]),
+    )
+
+
+@router.get("/me", response_model=list[FeedbackOut])
+def my_feedback(current_user: dict = Depends(get_current_user)):
+    try:
+        res = (
+            supabase_admin.table("feedback")
+            .select("*")
+            .eq("user_id", current_user["user_id"])
+            .order("created_at", desc=True)
+            .execute()
+        )
+    except Exception as e:
+        raise HTTPException(status_code=500, detail=f"Error al listar feedback: {e}")
+
+    out: list[FeedbackOut] = []
+    for row in res.data or []:
+        out.append(
+            FeedbackOut(
+                id=str(row.get("id")),
+                user_id=str(row.get("user_id")),
+                address_id=row.get("address_id") and str(row["address_id"]),
+                type=row.get("type") or "",
+                target_unit_id=row.get("target_unit_id"),
+                message=row.get("message"),
+                rating=row.get("rating"),
+                created_at=row.get("created_at") and str(row["created_at"]),
+            )
+        )
+    return out
diff --git a/backend/app/schemas/feedback.py b/backend/app/schemas/feedback.py
new file mode 100644
index 0000000..9342fb4
--- /dev/null
+++ b/backend/app/schemas/feedback.py
@@ -0,0 +1,28 @@
+"""Esquemas Pydantic para retroalimentación ciudadana."""
+from typing import Optional
+from pydantic import BaseModel, Field
+
+
+class FeedbackCreate(BaseModel):
+    """Cuerpo enviado por el ciudadano al crear una queja/sugerencia.
+
+    Importante: NUNCA se acepta driver_id; solo el número de la unidad.
+    """
+
+    address_id: Optional[str] = None  # UUID
+    type: str = Field(min_length=1, max_length=40)
+    rating: int = Field(ge=1, le=5)
+    # Llega como string ("101") desde Flutter; Pydantic lo coacciona a int.
+    target_unit_id: Optional[int] = None
+    message: Optional[str] = Field(default=None, max_length=1000)
+
+
+class FeedbackOut(BaseModel):
+    id: str
+    user_id: str
+    address_id: Optional[str] = None
+    type: str
+    target_unit_id: Optional[int] = None
+    message: Optional[str] = None
+    rating: Optional[int] = None
+    created_at: Optional[str] = None
diff --git a/backend/app/services/notifications.py b/backend/app/services/notifications.py
index 193b073..01fbdab 100644
--- a/backend/app/services/notifications.py
+++ b/backend/app/services/notifications.py
@@ -1,5 +1,7 @@
 import os
 import firebase_admin
+import urllib.parse
+import urllib.request
 from firebase_admin import credentials, messaging
 
 _firebase_initialized = False
@@ -27,9 +29,13 @@ def send_to_topic(topic: str, payload: dict):
     """Envía una notificación push a todos los dispositivos suscritos a un topic (ej. RUTA-01)."""
     title = payload.get("title", "")
     body = payload.get("body", "")
+    # `data` viaja como Dict[str, str] en FCM; permite que el cliente
+    # clasifique el evento (event, routeId) en notifications_screen.dart.
+    raw_data = payload.get("data") or {}
+    data: dict[str, str] = {str(k): str(v) for k, v in raw_data.items() if v is not None}
 
     if not _firebase_initialized:
-        print(f"[MOCK PUSH] -> Topic: {topic} | Título: '{title}' | Mensaje: '{body}'")
+        print(f"[MOCK PUSH] -> Topic: {topic} | Título: '{title}' | Mensaje: '{body}' | Data: {data}")
         return
 
     try:
@@ -38,9 +44,29 @@ def send_to_topic(topic: str, payload: dict):
                 title=title,
                 body=body,
             ),
+            data=data or None,
             topic=topic,
         )
         response = messaging.send(message)
         print(f"Push enviado al topic '{topic}' exitosamente. MessageID: {response}")
     except Exception as e:
-        print(f"Error al enviar push al topic '{topic}': {e}")
\ No newline at end of file
+        print(f"Error al enviar push al topic '{topic}': {e}")
+
+def send_whatsapp_alert(phone: str, message: str):
+    """
+    Envía un WhatsApp usando la API gratuita de CallMeBot.
+    """
+    print("\n" + "="*50)
+    print(f"🟢 [WHATSAPP TRIGGER] Preparando mensaje para {phone}")
+    print(f"💬 Mensaje: {message}")
+    print("="*50 + "\n")
+
+    # REEMPLAZA ESTO POR EL CÓDIGO QUE TE DIO EL BOT EN WHATSAPP:
+    apikey = "6756808"  # <--- BORRA "TU_API_KEY_AQUI" Y PON TU CÓDIGO REAL AQUÍ            
+    safe_msg = urllib.parse.quote(message)
+    url = f"https://api.callmebot.com/whatsapp.php?phone={phone}&text={safe_msg}&apikey={apikey}"
+    
+    try:
+        urllib.request.urlopen(url, timeout=5)
+    except Exception as e:
+        print(f"Error enviando WhatsApp real: {e}")
\ No newline at end of file
diff --git a/backend/app/services/simulation.py b/backend/app/services/simulation.py
index 72d6299..9a3784b 100644
--- a/backend/app/services/simulation.py
+++ b/backend/app/services/simulation.py
@@ -1,5 +1,6 @@
 import json
 import os
+import time
 from typing import Dict, List, Optional
 from app.services import notifications
 
@@ -58,34 +59,65 @@ def _find_notif(event_name: str) -> Optional[Dict]:
 
 
 def tick() -> List[Dict]:
-    """Avanza todas las rutas en memoria (pos 1..8) y devuelve eventos disparados."""
-    global ESTADO, LAST_EVENTS
+    """Avanza todas las rutas en memoria (pos 1→8) y devuelve eventos disparados.
+    Al llegar a pos 8, reinicia la ruta para que la demo sea un ciclo continuo."""
+    global ESTADO, STATUS, LAST_EVENTS
     events = []
     for route_id, pos in list(ESTADO.items()):
-        if pos < 8:
-            antes = pos
-            ahora = pos + 1
-            ESTADO[route_id] = ahora
-            evt = None
-            if antes == 1 and ahora == 2:
-                evt = "ROUTE_START"
-            elif ahora == 4:
-                evt = "TRUCK_PROXIMITY"
-            elif ahora == 8:
-                evt = "ROUTE_COMPLETED"
+        # Ciclo: cuando la ruta completó, reiniciar en el siguiente tick
+        if pos >= 8:
+            ESTADO[route_id] = 1
+            STATUS[route_id] = "PENDIENTE"
+            print(f"[SIM RESET] {route_id} reiniciado para nuevo ciclo.")
+            continue
 
-            if evt:
-                notif = _find_notif(evt)
-                payload = notif.get("pushPayload") if notif else {"title": evt, "body": ""}
-                simulated = {"routeId": route_id, "event": evt, "payload": payload}
-                events.append(simulated)
-                LAST_EVENTS.append(simulated)
-                # Enviar push vía servicio de notificaciones (FCM) o mock
-                topic = f"topic_{route_id}"
-                try:
-                    notifications.send_to_topic(topic, payload)
-                except Exception:
-                    print(f"[SIM PUSH FAIL] {route_id} -> {evt}: {payload.get('title')} - {payload.get('body')}")
+        antes = pos
+        ahora = pos + 1
+        ESTADO[route_id] = ahora
+
+        # Actualizar STATUS según la nueva posición
+        if ahora == 2:
+            STATUS[route_id] = "en_ruta"
+        elif ahora == 8:
+            STATUS[route_id] = "completada"
+
+        evt = None
+        if antes == 1 and ahora == 2:
+            evt = "ROUTE_START"
+        elif ahora == 4:
+            evt = "TRUCK_PROXIMITY"
+        elif ahora == 8:
+            evt = "ROUTE_COMPLETED"
+
+        if evt:
+            notif = _find_notif(evt)
+            payload = notif.get("pushPayload") if notif else {"title": evt, "body": ""}
+            # Adjuntar event + routeId en `data` para que el cliente Flutter
+            # los clasifique (notifications_screen.dart usa msg.data['event']).
+            payload = {
+                **payload,
+                "data": {
+                    **(payload.get("data") or {}),
+                    "event": evt,
+                    "routeId": route_id,
+                },
+            }
+            simulated = {"routeId": route_id, "event": evt, "payload": payload}
+            events.append(simulated)
+            LAST_EVENTS.append(simulated)
+            topic = f"topic_{route_id}"
+            try:
+                notifications.send_to_topic(topic, payload)
+                
+                # ── WHATSAPP: Se dispara cuando el camión está cerca (posición 4) ──
+                if evt == "TRUCK_PROXIMITY":
+                    # Para evitar saturar el bot y bloquear el servidor, 
+                    # enviamos el WhatsApp de demostración solo para la primera ruta.
+                    if route_id == "RUTA-01":
+                        msg = f"¡Hola! Soy Eco 🍃. El camión recolector de tu ruta ({route_id}) está a menos de 15 minutos. ¡Saca la basura! ♻️"
+                        notifications.send_whatsapp_alert("5214131060699", msg)
+            except Exception:
+                print(f"[SIM PUSH FAIL] {route_id} -> {evt}: {payload.get('title')} - {payload.get('body')}")
 
     return events
 
diff --git a/backend/main.py b/backend/main.py
index 316643d..5bdda04 100644
--- a/backend/main.py
+++ b/backend/main.py
@@ -13,6 +13,7 @@ from app.api.admin import router as admin_router
 from app.api.simulation import router as simulation_router
 from app.api.chat import router as chat_router
 from app.api.incidents import router as incidents_router
+from app.api.feedback import router as feedback_router
 from app.services import simulation, notifications
 
 scheduler = AsyncIOScheduler()
@@ -67,3 +68,4 @@ app.include_router(admin_router)
 app.include_router(simulation_router)
 app.include_router(chat_router)
 app.include_router(incidents_router)
+app.include_router(feedback_router)
diff --git a/recolecta_app/android/app/src/main/AndroidManifest.xml b/recolecta_app/android/app/src/main/AndroidManifest.xml
index d7bb893..717e6ec 100644
--- a/recolecta_app/android/app/src/main/AndroidManifest.xml
+++ b/recolecta_app/android/app/src/main/AndroidManifest.xml
@@ -1,4 +1,7 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
+    <!-- Necesario para mostrar notificaciones en Android 13 (API 33) y superiores -->
+    <uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
+
     <application
         android:label="recolecta_app"
         android:name="${applicationName}"
@@ -30,6 +33,17 @@
         <meta-data
             android:name="flutterEmbedding"
             android:value="2" />
+
+        <!-- Canal Android por defecto para los push de FCM cuando la app está
+             en background/terminated. Debe coincidir con el id usado en
+             lib/features/notifications/notification_service.dart -->
+        <meta-data
+            android:name="com.google.firebase.messaging.default_notification_channel_id"
+            android:value="recolecta_alerts" />
+        <!-- Ícono por defecto para las notificaciones FCM (evita ícono blanco/cuadrado) -->
+        <meta-data
+            android:name="com.google.firebase.messaging.default_notification_icon"
+            android:resource="@mipmap/ic_launcher" />
     </application>
     <!-- Required to query activities that can process text, see:
          https://developer.android.com/training/package-visibility and
diff --git a/recolecta_app/lib/core/router/app_router.dart b/recolecta_app/lib/core/router/app_router.dart
index a95e9e5..8ec05ff 100644
--- a/recolecta_app/lib/core/router/app_router.dart
+++ b/recolecta_app/lib/core/router/app_router.dart
@@ -26,10 +26,16 @@ import '../../features/help/screens/help_faq_screen.dart';
 import '../../features/incidents/screens/report_issue_screen.dart';
 import '../../features/about/screens/about_screen.dart';
 
+/// Clave global del Navigator raíz. La expone GoRouter y la usa
+/// `NotificationService` para navegar a `/notifications` cuando el usuario
+/// toca un push (foreground, background o terminated).
+final rootNavigatorKey = GlobalKey<NavigatorState>();
+
 final routerProvider = Provider<GoRouter>((ref) {
   final authState = ref.watch(authControllerProvider);
 
   return GoRouter(
+    navigatorKey: rootNavigatorKey,
     initialLocation: '/splash',
     redirect: (BuildContext context, GoRouterState state) {
       final isAuthenticated = authState.value?.isAuthenticated ?? false;
diff --git a/recolecta_app/lib/core/theme/app_theme.dart b/recolecta_app/lib/core/theme/app_theme.dart
index 843031c..3b7c30c 100644
--- a/recolecta_app/lib/core/theme/app_theme.dart
+++ b/recolecta_app/lib/core/theme/app_theme.dart
@@ -1,38 +1,60 @@
 import 'package:flutter/material.dart';
 
+/// Paleta institucional — Gobierno Municipal
+/// ─────────────────────────────────────────
+/// Vino principal   #9B1B4A
+/// Rosa institucional #C9A8B2
+/// Beige dorado     #C8A36A
+/// Rosa claro fondo #E8D5DB
+/// Verde acento     #1E7A46
+/// Azul accesibilidad #004A7C
+/// Texto oscuro     #1F1F1F
+/// Fondo blanco     #F8F8F8
 class AppTheme {
-  static const Color primary       = Color(0xFF1D9E75);
-  static const Color primaryDark   = Color(0xFF0F6E56);
-  static const Color primaryLight  = Color(0xFFE1F5EE);
-  static const Color primaryMid    = Color(0xFF9FE1CB);
+  // ── Primarios ──────────────────────────────────────────────────────────────
+  static const Color primary      = Color(0xFF9B1B4A);
+  static const Color primaryDark  = Color(0xFF6D1234);
+  static const Color primaryLight = Color(0xFFE8D5DB);
+  static const Color primaryMid   = Color(0xFFC9A8B2);
 
-  static const Color blue          = Color(0xFF185FA5);
-  static const Color blueLight     = Color(0xFFE6F1FB);
+  // ── Azul accesibilidad ─────────────────────────────────────────────────────
+  static const Color blue         = Color(0xFF004A7C);
+  static const Color blueLight    = Color(0xFFDCEAF3);
 
-  static const Color amber         = Color(0xFF854F0B);
-  static const Color amberLight    = Color(0xFFFAEEDA);
+  // ── Beige dorado (alertas / acento cálido) ─────────────────────────────────
+  static const Color amber        = Color(0xFF8B6914);
+  static const Color amberLight   = Color(0xFFF5EDD8);
 
-  static const Color danger        = Color(0xFFE24B4A);
-  static const Color dangerLight   = Color(0xFFFCEBEB);
+  // ── Verde acento (éxito / estados activos) ─────────────────────────────────
+  static const Color accent       = Color(0xFF1E7A46);
+  static const Color accentLight  = Color(0xFFDFF0E8);
 
-  static const Color textPrimary   = Color(0xFF1A1A1A);
+  // ── Peligro ────────────────────────────────────────────────────────────────
+  static const Color danger       = Color(0xFFD93040);
+  static const Color dangerLight  = Color(0xFFFCEBEB);
+
+  // ── Texto ─────────────────────────────────────────────────────────────────
+  static const Color textPrimary   = Color(0xFF1F1F1F);
   static const Color textSecondary = Color(0xFF6B7280);
   static const Color textHint      = Color(0xFFAAAAAA);
 
-  static const Color surface       = Color(0xFFFFFFFF);
-  static const Color background    = Color(0xFFF5F7F5);
-  static const Color border        = Color(0xFFE5E7EB);
-  static const Color borderLight   = Color(0xFFF0F2F0);
+  // ── Superficies ────────────────────────────────────────────────────────────
+  static const Color surface      = Color(0xFFFFFFFF);
+  static const Color background   = Color(0xFFF8F8F8);
+  static const Color border       = Color(0xFFE0D5D8);
+  static const Color borderLight  = Color(0xFFF0ECF0);
 
+  // ── Radios ────────────────────────────────────────────────────────────────
   static const double radiusSm   = 8.0;
   static const double radiusMd   = 12.0;
   static const double radiusLg   = 16.0;
   static const double radiusXl   = 24.0;
   static const double radiusFull = 100.0;
 
+  // ── Sombras ───────────────────────────────────────────────────────────────
   static List<BoxShadow> get cardShadow => [
     BoxShadow(
-      color: Colors.black.withValues(alpha: 0.06),
+      color: const Color(0xFF9B1B4A).withValues(alpha: 0.07),
       blurRadius: 12,
       offset: const Offset(0, 4),
     ),
@@ -46,12 +68,13 @@ class AppTheme {
     ),
   ];
 
+  // ── Tema global ───────────────────────────────────────────────────────────
   static ThemeData get lightTheme => ThemeData(
     useMaterial3: true,
     colorScheme: ColorScheme.fromSeed(
       seedColor: primary,
       primary: primary,
-      secondary: primaryDark,
+      secondary: accent,
       surface: surface,
     ),
     scaffoldBackgroundColor: background,
@@ -62,9 +85,10 @@ class AppTheme {
       centerTitle: false,
       titleTextStyle: TextStyle(
         inherit: false,
-        fontSize: 18,
-        fontWeight: FontWeight.w600,
+        fontSize: 17,
+        fontWeight: FontWeight.w700,
         color: Colors.white,
+        letterSpacing: 0.1,
       ),
       iconTheme: IconThemeData(color: Colors.white),
     ),
@@ -126,5 +150,15 @@ class AppTheme {
       labelStyle: const TextStyle(color: textSecondary, fontSize: 13),
       hintStyle: const TextStyle(color: textHint, fontSize: 13),
     ),
+    switchTheme: SwitchThemeData(
+      thumbColor: WidgetStateProperty.resolveWith(
+        (s) => s.contains(WidgetState.selected) ? primary : Colors.white,
+      ),
+      trackColor: WidgetStateProperty.resolveWith(
+        (s) => s.contains(WidgetState.selected)
+            ? primary.withValues(alpha: 0.5)
+            : Colors.grey.shade300,
+      ),
+    ),
   );
 }
diff --git a/recolecta_app/lib/core/widgets/app_widgets.dart b/recolecta_app/lib/core/widgets/app_widgets.dart
index b8a073e..45402b6 100644
--- a/recolecta_app/lib/core/widgets/app_widgets.dart
+++ b/recolecta_app/lib/core/widgets/app_widgets.dart
@@ -79,14 +79,29 @@ class AppCard extends StatelessWidget {
       onTap: onTap,
       child: Container(
         width: double.infinity,
-        padding: padding ?? const EdgeInsets.all(16),
         decoration: BoxDecoration(
           color: AppTheme.surface,
           borderRadius: BorderRadius.circular(AppTheme.radiusLg),
           border: Border.all(color: borderColor ?? AppTheme.border, width: 0.5),
           boxShadow: AppTheme.softShadow,
         ),
-        child: child,
+        child: ClipRRect(
+          borderRadius: BorderRadius.circular(AppTheme.radiusLg - 0.5),
+          child: IntrinsicHeight(
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                Container(width: 3, color: AppTheme.primary),
+                Expanded(
+                  child: Padding(
+                    padding: padding ?? const EdgeInsets.all(16),
+                    child: child,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
       ),
     );
   }
@@ -110,50 +125,65 @@ class AppInfoRow extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.all(14),
       decoration: BoxDecoration(
         color: AppTheme.surface,
         borderRadius: BorderRadius.circular(AppTheme.radiusLg),
         border: Border.all(color: AppTheme.border, width: 0.5),
         boxShadow: AppTheme.softShadow,
       ),
-      child: Row(
-        children: [
-          Container(
-            width: 40,
-            height: 40,
-            decoration: BoxDecoration(
-              color: AppTheme.primaryLight,
-              borderRadius: BorderRadius.circular(10),
-            ),
-            child: Icon(icon, color: AppTheme.primary, size: 20),
-          ),
-          const SizedBox(width: 12),
-          Expanded(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(
-                  value,
-                  style: const TextStyle(
-                    fontSize: 14,
-                    fontWeight: FontWeight.w500,
-                    color: AppTheme.textPrimary,
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(AppTheme.radiusLg - 0.5),
+        child: IntrinsicHeight(
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Container(width: 3, color: AppTheme.primary),
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.all(14),
+                  child: Row(
+                    children: [
+                      Container(
+                        width: 40,
+                        height: 40,
+                        decoration: BoxDecoration(
+                          color: AppTheme.primaryLight,
+                          borderRadius: BorderRadius.circular(10),
+                        ),
+                        child: Icon(icon, color: AppTheme.primary, size: 20),
+                      ),
+                      const SizedBox(width: 12),
+                      Expanded(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(
+                              value,
+                              style: const TextStyle(
+                                fontSize: 14,
+                                fontWeight: FontWeight.w500,
+                                color: AppTheme.textPrimary,
+                              ),
+                            ),
+                            const SizedBox(height: 2),
+                            Text(
+                              label,
+                              style: const TextStyle(
+                                fontSize: 12,
+                                color: AppTheme.textSecondary,
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                      ?trailing,
+                    ],
                   ),
                 ),
-                const SizedBox(height: 2),
-                Text(
-                  label,
-                  style: const TextStyle(
-                    fontSize: 12,
-                    color: AppTheme.textSecondary,
-                  ),
-                ),
-              ],
-            ),
+              ),
+            ],
           ),
-          ?trailing,
-        ],
+        ),
       ),
     );
   }
@@ -305,53 +335,69 @@ class AppMenuTile extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return GestureDetector(
-      onTap: onTap,
-      child: Container(
-        margin: const EdgeInsets.only(bottom: 8),
-        padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 13),
-        decoration: BoxDecoration(
-          color: AppTheme.surface,
-          borderRadius: BorderRadius.circular(AppTheme.radiusMd),
-          border: Border.all(color: AppTheme.border, width: 0.5),
-          boxShadow: AppTheme.softShadow,
-        ),
-        child: Row(
-          children: [
-            Icon(icon, color: iconColor ?? AppTheme.primary, size: 20),
-            const SizedBox(width: 12),
-            Expanded(
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  Text(
-                    title,
-                    style: TextStyle(
-                      fontSize: 14,
-                      fontWeight: FontWeight.w500,
-                      color: titleColor ?? AppTheme.textPrimary,
-                    ),
-                  ),
-                  if (subtitle != null) ...[
-                    const SizedBox(height: 2),
+    return Material(
+      color: Colors.transparent,
+      child: InkWell(
+        onTap: onTap,
+        borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+        child: Container(
+          margin: const EdgeInsets.only(bottom: 8),
+          padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 13),
+          decoration: BoxDecoration(
+            color: AppTheme.surface,
+            borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+            border: Border.all(color: AppTheme.border, width: 0.5),
+            boxShadow: AppTheme.softShadow,
+          ),
+          child: Row(
+            children: [
+              Container(
+                width: 38,
+                height: 38,
+                decoration: BoxDecoration(
+                  color: (iconColor ?? AppTheme.primary).withValues(alpha: 0.1),
+                  borderRadius: BorderRadius.circular(AppTheme.radiusSm),
+                ),
+                child: Icon(
+                  icon,
+                  color: iconColor ?? AppTheme.primary,
+                  size: 20,
+                ),
+              ),
+              const SizedBox(width: 12),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
                     Text(
-                      subtitle!,
-                      style: const TextStyle(
-                        fontSize: 12,
-                        color: AppTheme.textSecondary,
+                      title,
+                      style: TextStyle(
+                        fontSize: 14,
+                        fontWeight: FontWeight.w500,
+                        color: titleColor ?? AppTheme.textPrimary,
                       ),
                     ),
+                    if (subtitle != null) ...[
+                      const SizedBox(height: 2),
+                      Text(
+                        subtitle!,
+                        style: const TextStyle(
+                          fontSize: 12,
+                          color: AppTheme.textSecondary,
+                        ),
+                      ),
+                    ],
                   ],
-                ],
-              ),
-            ),
-            trailing ??
-                const Icon(
-                  Icons.chevron_right,
-                  color: AppTheme.textSecondary,
-                  size: 18,
                 ),
-          ],
+              ),
+              trailing ??
+                  const Icon(
+                    Icons.chevron_right,
+                    color: AppTheme.textSecondary,
+                    size: 18,
+                  ),
+            ],
+          ),
         ),
       ),
     );
@@ -375,39 +421,58 @@ class AppFormCard extends StatelessWidget {
   Widget build(BuildContext context) {
     return Container(
       width: double.infinity,
-      padding: const EdgeInsets.all(16),
       decoration: BoxDecoration(
         color: AppTheme.surface,
         borderRadius: BorderRadius.circular(AppTheme.radiusLg),
         border: Border.all(color: AppTheme.border, width: 0.5),
         boxShadow: AppTheme.softShadow,
       ),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Row(
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(AppTheme.radiusLg - 0.5),
+        child: IntrinsicHeight(
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
             children: [
-              Icon(icon, color: AppTheme.primary, size: 18),
-              const SizedBox(width: 8),
-              Text(
-                title,
-                style: const TextStyle(
-                  fontSize: 14,
-                  fontWeight: FontWeight.w600,
-                  color: AppTheme.textPrimary,
+              Container(width: 3, color: AppTheme.primary),
+              Expanded(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  children: [
+                    Container(
+                      width: double.infinity,
+                      padding: const EdgeInsets.fromLTRB(16, 14, 16, 12),
+                      color: AppTheme.primaryLight,
+                      child: Row(
+                        children: [
+                          Icon(icon, color: AppTheme.primaryDark, size: 18),
+                          const SizedBox(width: 8),
+                          Text(
+                            title,
+                            style: const TextStyle(
+                              fontSize: 14,
+                              fontWeight: FontWeight.w700,
+                              color: AppTheme.primaryDark,
+                            ),
+                          ),
+                        ],
+                      ),
+                    ),
+                    Padding(
+                      padding: const EdgeInsets.all(16),
+                      child: child,
+                    ),
+                  ],
                 ),
               ),
             ],
           ),
-          const SizedBox(height: 16),
-          child,
-        ],
+        ),
       ),
     );
   }
 }
 
-// ── Bottom Nav Bar ────────────────────────────────────────────────────────────
+// ── Bottom Nav Bar (Material 3) ───────────────────────────────────────────────
 class AppBottomNav extends StatelessWidget {
   final int currentIndex;
   final Function(int) onTap;
@@ -420,35 +485,34 @@ class AppBottomNav extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return BottomNavigationBar(
-      currentIndex: currentIndex,
-      onTap: onTap,
-      type: BottomNavigationBarType.fixed,
+    return NavigationBar(
+      selectedIndex: currentIndex,
+      onDestinationSelected: onTap,
       backgroundColor: AppTheme.surface,
-      selectedItemColor: AppTheme.primary,
-      unselectedItemColor: AppTheme.textSecondary,
-      selectedFontSize: 11,
-      unselectedFontSize: 11,
-      elevation: 12,
-      items: const [
-        BottomNavigationBarItem(
-          icon: Icon(Icons.notifications_outlined),
-          activeIcon: Icon(Icons.notifications),
+      indicatorColor: AppTheme.primaryLight,
+      surfaceTintColor: Colors.transparent,
+      shadowColor: AppTheme.primary.withValues(alpha: 0.08),
+      elevation: 4,
+      labelBehavior: NavigationDestinationLabelBehavior.alwaysShow,
+      destinations: const [
+        NavigationDestination(
+          icon: Icon(Icons.notifications_outlined, color: AppTheme.textSecondary),
+          selectedIcon: Icon(Icons.notifications, color: AppTheme.primary),
           label: 'ETA',
         ),
-        BottomNavigationBarItem(
-          icon: Icon(Icons.history_outlined),
-          activeIcon: Icon(Icons.history),
+        NavigationDestination(
+          icon: Icon(Icons.history_outlined, color: AppTheme.textSecondary),
+          selectedIcon: Icon(Icons.history, color: AppTheme.primary),
           label: 'Alertas',
         ),
-        BottomNavigationBarItem(
-          icon: Icon(Icons.home_outlined),
-          activeIcon: Icon(Icons.home),
+        NavigationDestination(
+          icon: Icon(Icons.home_outlined, color: AppTheme.textSecondary),
+          selectedIcon: Icon(Icons.home, color: AppTheme.primary),
           label: 'Mi casa',
         ),
-        BottomNavigationBarItem(
-          icon: Icon(Icons.person_outline),
-          activeIcon: Icon(Icons.person),
+        NavigationDestination(
+          icon: Icon(Icons.person_outline, color: AppTheme.textSecondary),
+          selectedIcon: Icon(Icons.person, color: AppTheme.primary),
           label: 'Perfil',
         ),
       ],
diff --git a/recolecta_app/lib/features/about/screens/about_screen.dart b/recolecta_app/lib/features/about/screens/about_screen.dart
index 39944b8..e18288d 100644
--- a/recolecta_app/lib/features/about/screens/about_screen.dart
+++ b/recolecta_app/lib/features/about/screens/about_screen.dart
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
 import 'package:package_info_plus/package_info_plus.dart';
 
 import '../../../core/theme/app_theme.dart';
-import '../../../core/widgets/app_widgets.dart';
 
 class AboutScreen extends StatelessWidget {
   const AboutScreen({super.key});
@@ -11,93 +10,52 @@ class AboutScreen extends StatelessWidget {
   Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: AppTheme.background,
-      appBar: AppBar(title: const Text('Acerca de la app')),
       body: FutureBuilder<PackageInfo>(
         future: PackageInfo.fromPlatform(),
         builder: (context, snap) {
           final version = snap.data?.version ?? '1.0.0';
           final build = snap.data?.buildNumber ?? '1';
-          return ListView(
-            padding: const EdgeInsets.all(16),
-            children: [
-              AppCard(
-                child: Column(
-                  children: [
-                    Container(
-                      width: 72,
-                      height: 72,
-                      decoration: BoxDecoration(
-                        color: AppTheme.primaryLight,
-                        shape: BoxShape.circle,
-                      ),
-                      child: const Icon(
-                        Icons.recycling_rounded,
-                        size: 40,
-                        color: AppTheme.primaryDark,
-                      ),
-                    ),
-                    const SizedBox(height: 12),
-                    const Text(
-                      'Recolecta',
-                      style: TextStyle(
-                        fontSize: 20,
-                        fontWeight: FontWeight.w700,
-                        color: AppTheme.textPrimary,
-                      ),
-                    ),
-                    const SizedBox(height: 4),
-                    Text(
-                      'Versión $version (build $build)',
-                      style: const TextStyle(
-                        fontSize: 13,
-                        color: AppTheme.textSecondary,
-                      ),
-                    ),
-                  ],
-                ),
+          return CustomScrollView(
+            slivers: [
+              SliverToBoxAdapter(
+                child: _buildPageHeader(context, version, build),
               ),
-              const SizedBox(height: 16),
-              AppCard(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: const [
-                    AppSectionTitle(title: 'Acerca de'),
-                    Text(
-                      'Recolecta es una aplicación del Servicio de Limpia de Celaya '
-                      'para informar al ciudadano sobre rutas, horarios y separación '
-                      'correcta de residuos.',
-                      style: TextStyle(
-                        fontSize: 14,
-                        height: 1.5,
-                        color: AppTheme.textPrimary,
+              SliverPadding(
+                padding: const EdgeInsets.fromLTRB(20, 24, 20, 32),
+                sliver: SliverList(
+                  delegate: SliverChildListDelegate([
+                    _SectionLabel('Descripción'),
+                    const SizedBox(height: 10),
+                    _InfoCard(
+                      icon: Icons.info_outline_rounded,
+                      content: 'RecolectApp es una aplicación del Servicio de Limpia de Celaya '
+                          'para informar al ciudadano sobre rutas, horarios y separación '
+                          'correcta de residuos.',
+                    ),
+                    const SizedBox(height: 20),
+                    _SectionLabel('Créditos'),
+                    const SizedBox(height: 10),
+                    _InfoCard(
+                      icon: Icons.people_outline_rounded,
+                      content: 'Desarrollado por el equipo ONLINCESHACK.\nServicio de Limpia · Celaya, Gto.',
+                    ),
+                    const SizedBox(height: 20),
+                    _SectionLabel('Tecnología'),
+                    const SizedBox(height: 10),
+                    _TechRow(icon: Icons.phone_android_rounded, label: 'Flutter · Dart'),
+                    const SizedBox(height: 8),
+                    _TechRow(icon: Icons.cloud_outlined, label: 'FastAPI · Supabase'),
+                    const SizedBox(height: 8),
+                    _TechRow(icon: Icons.notifications_outlined, label: 'Firebase Cloud Messaging'),
+                    const SizedBox(height: 32),
+                    Center(
+                      child: Text(
+                        '© 2025 RecolectApp · Todos los derechos reservados',
+                        style: const TextStyle(fontSize: 11, color: AppTheme.textHint),
+                        textAlign: TextAlign.center,
                       ),
                     ),
-                  ],
-                ),
-              ),
-              const SizedBox(height: 16),
-              AppCard(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: const [
-                    AppSectionTitle(title: 'Créditos'),
-                    Text(
-                      'Desarrollado por el equipo ONLINCESHACK.\n'
-                      'Servicio de Limpia · Celaya, Gto.',
-                      style: TextStyle(
-                        fontSize: 14,
-                        height: 1.5,
-                        color: AppTheme.textPrimary,
-                      ),
-                    ),
-                  ],
-                ),
-              ),
-              const SizedBox(height: 24),
-              const Center(
-                child: Text(
-                  '© 2025 Recolecta',
-                  style: TextStyle(fontSize: 12, color: AppTheme.textHint),
+                  ]),
                 ),
               ),
             ],
@@ -106,4 +64,208 @@ class AboutScreen extends StatelessWidget {
       ),
     );
   }
+
+  Widget _buildPageHeader(BuildContext context, String version, String build) {
+    return Container(
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+          stops: [0.0, 0.6, 1.0],
+          colors: [Color(0xFF4A0E26), Color(0xFF6D1234), Color(0xFF9B1B4A)],
+        ),
+      ),
+      child: SafeArea(
+        bottom: false,
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(20, 8, 20, 32),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Row(
+                children: [
+                  IconButton(
+                    icon: const Icon(Icons.arrow_back_ios_new_rounded,
+                        color: Colors.white, size: 20),
+                    onPressed: () => Navigator.of(context).pop(),
+                    padding: EdgeInsets.zero,
+                    constraints: const BoxConstraints(),
+                  ),
+                ],
+              ),
+              const SizedBox(height: 16),
+              Center(
+                child: Column(
+                  children: [
+                    Container(
+                      width: 80,
+                      height: 80,
+                      decoration: BoxDecoration(
+                        color: Colors.white.withValues(alpha: 0.15),
+                        shape: BoxShape.circle,
+                        border: Border.all(
+                          color: Colors.white.withValues(alpha: 0.3),
+                          width: 2,
+                        ),
+                      ),
+                      child: const Icon(
+                        Icons.recycling_rounded,
+                        size: 42,
+                        color: Colors.white,
+                      ),
+                    ),
+                    const SizedBox(height: 14),
+                    const Text(
+                      'RecolectApp',
+                      style: TextStyle(
+                        fontSize: 24,
+                        fontWeight: FontWeight.w800,
+                        color: Colors.white,
+                        letterSpacing: -0.5,
+                      ),
+                    ),
+                    const SizedBox(height: 4),
+                    Text(
+                      'Versión $version (build $build)',
+                      style: TextStyle(
+                        fontSize: 13,
+                        color: Colors.white.withValues(alpha: 0.75),
+                      ),
+                    ),
+                    const SizedBox(height: 6),
+                    Container(
+                      padding: const EdgeInsets.symmetric(
+                          horizontal: 12, vertical: 4),
+                      decoration: BoxDecoration(
+                        color: Colors.white.withValues(alpha: 0.15),
+                        borderRadius: BorderRadius.circular(100),
+                        border: Border.all(
+                            color: Colors.white.withValues(alpha: 0.25)),
+                      ),
+                      child: Text(
+                        'Servicio de Limpia · Celaya, Gto.',
+                        style: TextStyle(
+                          fontSize: 11,
+                          color: Colors.white.withValues(alpha: 0.9),
+                          fontWeight: FontWeight.w500,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _SectionLabel extends StatelessWidget {
+  final String text;
+  const _SectionLabel(this.text);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      text.toUpperCase(),
+      style: TextStyle(
+        fontSize: 11,
+        fontWeight: FontWeight.w600,
+        letterSpacing: 0.8,
+        color: Theme.of(context).colorScheme.onSurfaceVariant,
+      ),
+    );
+  }
+}
+
+class _InfoCard extends StatelessWidget {
+  final IconData icon;
+  final String content;
+  const _InfoCard({required this.icon, required this.content});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surface,
+        borderRadius: BorderRadius.circular(10),
+        border: Border.all(
+          color: Theme.of(context).colorScheme.outlineVariant,
+          width: 0.5,
+        ),
+      ),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(9.5),
+        child: IntrinsicHeight(
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Container(width: 3, color: AppTheme.primary),
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.all(14),
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Container(
+                        width: 34,
+                        height: 34,
+                        decoration: BoxDecoration(
+                          color: AppTheme.primaryLight,
+                          borderRadius: BorderRadius.circular(8),
+                        ),
+                        child: Icon(icon, size: 18, color: AppTheme.primary),
+                      ),
+                      const SizedBox(width: 12),
+                      Expanded(
+                        child: Text(
+                          content,
+                          style: const TextStyle(
+                            fontSize: 13,
+                            height: 1.5,
+                            color: AppTheme.textPrimary,
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
+class _TechRow extends StatelessWidget {
+  final IconData icon;
+  final String label;
+  const _TechRow({required this.icon, required this.label});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surface,
+        borderRadius: BorderRadius.circular(10),
+        border: Border.all(
+            color: Theme.of(context).colorScheme.outlineVariant, width: 0.5),
+      ),
+      child: Row(
+        children: [
+          Icon(icon, size: 18, color: AppTheme.primary),
+          const SizedBox(width: 12),
+          Text(
+            label,
+            style: const TextStyle(fontSize: 13, color: AppTheme.textPrimary),
+          ),
+        ],
+      ),
+    );
+  }
 }
diff --git a/recolecta_app/lib/features/addresses/add_address_page.dart b/recolecta_app/lib/features/addresses/add_address_page.dart
index 9c1ba32..9b56f1d 100644
--- a/recolecta_app/lib/features/addresses/add_address_page.dart
+++ b/recolecta_app/lib/features/addresses/add_address_page.dart
@@ -213,202 +213,279 @@ class _AddAddressPageState extends ConsumerState<AddAddressPage> {
 
     return Scaffold(
       backgroundColor: AppTheme.background,
-      appBar: AppBar(
-        backgroundColor: Colors.transparent,
-        elevation: 0,
-        iconTheme: const IconThemeData(color: AppTheme.textPrimary),
-        title: const Text(
-          'Agregar dirección',
-          style: TextStyle(
-            color: AppTheme.textPrimary,
-            fontSize: 16,
-            fontWeight: FontWeight.w600,
-          ),
-        ),
-      ),
-      body: SingleChildScrollView(
-        padding: const EdgeInsets.all(24),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            AppFormCard(
-              icon: Icons.home_outlined,
-              title: 'Dirección de tu casa',
-              child: Column(
-                children: [
-                  AppFormField(
-                    label: 'Etiqueta',
-                    hint: 'Ej. Mi Casa, Trabajo',
-                    controller: _labelCtrl,
-                  ),
-                  const SizedBox(height: 14),
-                  AppFormField(
-                    label: 'Código Postal',
-                    hint: 'Ej. 38000',
-                    controller: _cpCtrl,
-                    keyboardType: TextInputType.number,
-                    onChanged: (v) => _validarCP(v, coloniasList),
-                  ),
-                  if (_selectedColonia != null) ...[
-                    const SizedBox(height: 14),
-                    Container(
-                      padding: const EdgeInsets.all(14),
-                      decoration: BoxDecoration(
-                        color: AppTheme.primaryLight.withValues(alpha: 0.5),
-                        borderRadius: BorderRadius.circular(AppTheme.radiusSm),
-                        border: Border.all(color: AppTheme.primaryMid),
+      body: CustomScrollView(
+        slivers: [
+          SliverToBoxAdapter(child: _buildPageHeader(context)),
+          SliverPadding(
+            padding: const EdgeInsets.fromLTRB(24, 24, 24, 0),
+            sliver: SliverList(
+              delegate: SliverChildListDelegate([
+                AppFormCard(
+                  icon: Icons.home_outlined,
+                  title: 'Dirección de tu casa',
+                  child: Column(
+                    children: [
+                      AppFormField(
+                        label: 'Etiqueta',
+                        hint: 'Ej. Mi Casa, Trabajo',
+                        controller: _labelCtrl,
                       ),
-                      child: Column(
-                        crossAxisAlignment: CrossAxisAlignment.start,
-                        children: [
-                          Row(
+                      const SizedBox(height: 14),
+                      AppFormField(
+                        label: 'Código Postal',
+                        hint: 'Ej. 38000',
+                        controller: _cpCtrl,
+                        keyboardType: TextInputType.number,
+                        onChanged: (v) => _validarCP(v, coloniasList),
+                      ),
+                      if (_selectedColonia != null) ...[
+                        const SizedBox(height: 14),
+                        Container(
+                          padding: const EdgeInsets.all(14),
+                          decoration: BoxDecoration(
+                            color: AppTheme.primaryLight.withValues(alpha: 0.5),
+                            borderRadius:
+                                BorderRadius.circular(AppTheme.radiusSm),
+                            border: Border.all(color: AppTheme.primaryMid),
+                          ),
+                          child: Column(
+                            crossAxisAlignment: CrossAxisAlignment.start,
                             children: [
-                              const Icon(
-                                Icons.check_circle_outline,
-                                color: AppTheme.primary,
-                                size: 18,
+                              Row(
+                                children: [
+                                  const Icon(
+                                    Icons.check_circle_outline,
+                                    color: AppTheme.primary,
+                                    size: 18,
+                                  ),
+                                  const SizedBox(width: 8),
+                                  Expanded(
+                                    child: Text(
+                                      'Colonia: ${_selectedColonia!.nombre}',
+                                      style: const TextStyle(
+                                        fontWeight: FontWeight.w600,
+                                        color: AppTheme.primaryDark,
+                                      ),
+                                    ),
+                                  ),
+                                ],
                               ),
-                              const SizedBox(width: 8),
-                              Expanded(
-                                child: Text(
-                                  'Colonia: ${_selectedColonia!.nombre}',
+                              if (_selectedColonia!.horarioEstimado !=
+                                  null) ...[
+                                const SizedBox(height: 8),
+                                Text(
+                                  'Horario ${_selectedColonia!.turno?.toLowerCase() ?? ''}',
                                   style: const TextStyle(
-                                    fontWeight: FontWeight.w600,
-                                    color: AppTheme.primaryDark,
+                                    fontSize: 13,
+                                    color: AppTheme.textPrimary,
                                   ),
                                 ),
-                              ),
-                            ],
-                          ),
-                          if (_selectedColonia!.horarioEstimado != null) ...[
-                            const SizedBox(height: 8),
-                            Text(
-                              'Horario ${_selectedColonia!.turno?.toLowerCase() ?? ''}',
-                              style: const TextStyle(
-                                fontSize: 13,
-                                color: AppTheme.textPrimary,
-                              ),
-                            ),
-                            Text(
-                              _selectedColonia!.horarioEstimado!,
-                              style: const TextStyle(
-                                fontSize: 14,
-                                fontWeight: FontWeight.bold,
-                                color: AppTheme.textPrimary,
-                              ),
-                            ),
-                          ],
-                        ],
-                      ),
-                    ),
-                    const SizedBox(height: 14),
-                    AppFormField(
-                      label: 'Calle y número',
-                      hint: 'Av. Insurgentes 245',
-                      controller: _calleCtrl,
-                    ),
-                    const SizedBox(height: 16),
-                    const Text(
-                      'Toca el mapa para ubicar tu casa exacta:',
-                      style: TextStyle(
-                        fontSize: 12,
-                        fontWeight: FontWeight.w500,
-                        color: AppTheme.textSecondary,
-                      ),
-                    ),
-                    const SizedBox(height: 8),
-                    Container(
-                      height: 200,
-                      decoration: BoxDecoration(
-                        borderRadius: BorderRadius.circular(AppTheme.radiusSm),
-                        border: Border.all(color: AppTheme.border),
-                      ),
-                      clipBehavior: Clip.hardEdge,
-                      child: FlutterMap(
-                        mapController: _mapController,
-                        options: MapOptions(
-                          initialCenter: mapCenter,
-                          initialZoom: 15.0,
-                          cameraConstraint: bounds != null
-                              ? CameraConstraint.containCenter(bounds: bounds)
-                              : const CameraConstraint.unconstrained(),
-                          onTap: (_, latlng) => _fetchStreetName(latlng),
-                        ),
-                        children: [
-                          TileLayer(
-                            urlTemplate:
-                                'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                            userAgentPackageName: 'com.onlineshack.recolecta',
-                          ),
-                          if (_selectedLocation != null)
-                            MarkerLayer(
-                              markers: [
-                                Marker(
-                                  point: _selectedLocation!,
-                                  width: 40,
-                                  height: 40,
-                                  child: const Icon(
-                                    Icons.location_on,
-                                    color: AppTheme.danger,
-                                    size: 40,
+                                Text(
+                                  _selectedColonia!.horarioEstimado!,
+                                  style: const TextStyle(
+                                    fontSize: 14,
+                                    fontWeight: FontWeight.bold,
+                                    color: AppTheme.textPrimary,
                                   ),
                                 ),
                               ],
-                            ),
-                        ],
-                      ),
-                    ),
-                  ] else ...[
-                    const SizedBox(height: 24),
-                    const Center(
-                      child: Text(
-                        'Ingresa un código postal con servicio\npara asignar tu colonia.',
-                        textAlign: TextAlign.center,
-                        style: TextStyle(
-                          color: AppTheme.textSecondary,
-                          fontSize: 13,
-                        ),
-                      ),
-                    ),
-                  ],
-                ],
-              ),
-            ),
-            const SizedBox(height: 28),
-            SizedBox(
-              width: double.infinity,
-              height: 52,
-              child: ElevatedButton(
-                onPressed: _loading ? null : _guardar,
-                child: AnimatedSwitcher(
-                  duration: const Duration(milliseconds: 200),
-                  child: _loading
-                      ? const SizedBox(
-                          key: ValueKey('loading'),
-                          width: 20,
-                          height: 20,
-                          child: CircularProgressIndicator(
-                            strokeWidth: 2,
-                            color: Colors.white,
-                          ),
-                        )
-                      : const FittedBox(
-                          key: ValueKey('text'),
-                          fit: BoxFit.scaleDown,
-                          child: Row(
-                            mainAxisAlignment: MainAxisAlignment.center,
-                            children: [
-                              Icon(Icons.check, size: 18),
-                              SizedBox(width: 8),
-                              Text('Guardar dirección'),
                             ],
                           ),
                         ),
+                        const SizedBox(height: 14),
+                        AppFormField(
+                          label: 'Calle y número',
+                          hint: 'Av. Insurgentes 245',
+                          controller: _calleCtrl,
+                        ),
+                        const SizedBox(height: 16),
+                        const Text(
+                          'Toca el mapa para ubicar tu casa exacta:',
+                          style: TextStyle(
+                            fontSize: 12,
+                            fontWeight: FontWeight.w500,
+                            color: AppTheme.textSecondary,
+                          ),
+                        ),
+                        const SizedBox(height: 8),
+                        Container(
+                          height: 220,
+                          decoration: BoxDecoration(
+                            borderRadius:
+                                BorderRadius.circular(AppTheme.radiusMd),
+                            border: Border.all(color: AppTheme.border),
+                            boxShadow: AppTheme.softShadow,
+                          ),
+                          clipBehavior: Clip.hardEdge,
+                          child: FlutterMap(
+                            mapController: _mapController,
+                            options: MapOptions(
+                              initialCenter: mapCenter,
+                              initialZoom: 15.0,
+                              cameraConstraint: bounds != null
+                                  ? CameraConstraint.containCenter(
+                                      bounds: bounds)
+                                  : const CameraConstraint.unconstrained(),
+                              onTap: (_, latlng) => _fetchStreetName(latlng),
+                            ),
+                            children: [
+                              TileLayer(
+                                urlTemplate:
+                                    'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
+                                userAgentPackageName:
+                                    'com.onlineshack.recolecta',
+                              ),
+                              if (_selectedLocation != null)
+                                MarkerLayer(
+                                  markers: [
+                                    Marker(
+                                      point: _selectedLocation!,
+                                      width: 40,
+                                      height: 40,
+                                      child: const Icon(
+                                        Icons.location_on,
+                                        color: AppTheme.danger,
+                                        size: 40,
+                                      ),
+                                    ),
+                                  ],
+                                ),
+                            ],
+                          ),
+                        ),
+                      ] else ...[
+                        const SizedBox(height: 24),
+                        const Center(
+                          child: Text(
+                            'Ingresa un código postal con servicio\npara asignar tu colonia.',
+                            textAlign: TextAlign.center,
+                            style: TextStyle(
+                              color: AppTheme.textSecondary,
+                              fontSize: 13,
+                            ),
+                          ),
+                        ),
+                      ],
+                    ],
+                  ),
                 ),
+                const SizedBox(height: 32),
+              ]),
+            ),
+          ),
+        ],
+      ),
+      bottomNavigationBar: _buildSaveButton(),
+    );
+  }
+
+  Widget _buildPageHeader(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.fromLTRB(
+        20,
+        MediaQuery.of(context).padding.top + 12,
+        20,
+        24,
+      ),
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
+          colors: [Color(0xFF4A0E26), Color(0xFF9B1B4A)],
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+        ),
+        borderRadius: BorderRadius.only(
+          bottomLeft: Radius.circular(28),
+          bottomRight: Radius.circular(28),
+        ),
+      ),
+      child: Row(
+        children: [
+          GestureDetector(
+            onTap: () => Navigator.of(context).pop(),
+            child: Container(
+              width: 36,
+              height: 36,
+              decoration: BoxDecoration(
+                color: Colors.white.withValues(alpha: 0.15),
+                borderRadius: BorderRadius.circular(10),
+              ),
+              child: const Icon(
+                Icons.arrow_back,
+                color: Colors.white,
+                size: 20,
               ),
             ),
-            const SizedBox(height: 24),
-          ],
+          ),
+          const SizedBox(width: 14),
+          const Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'Agregar dirección',
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.w700,
+                    color: Colors.white,
+                  ),
+                ),
+                SizedBox(height: 2),
+                Text(
+                  'Registra tu domicilio de recolección',
+                  style: TextStyle(fontSize: 13, color: Colors.white70),
+                ),
+              ],
+            ),
+          ),
+          Container(
+            width: 44,
+            height: 44,
+            decoration: BoxDecoration(
+              color: Colors.white.withValues(alpha: 0.15),
+              borderRadius: BorderRadius.circular(12),
+            ),
+            child: const Icon(
+              Icons.add_home_outlined,
+              color: Colors.white,
+              size: 22,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildSaveButton() {
+    return SafeArea(
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(24, 12, 24, 16),
+        child: SizedBox(
+          width: double.infinity,
+          child: ElevatedButton(
+            onPressed: _loading ? null : _guardar,
+            child: AnimatedSwitcher(
+              duration: const Duration(milliseconds: 200),
+              child: _loading
+                  ? const SizedBox(
+                      key: ValueKey('loading'),
+                      width: 20,
+                      height: 20,
+                      child: CircularProgressIndicator(
+                        strokeWidth: 2,
+                        color: Colors.white,
+                      ),
+                    )
+                  : const Row(
+                      key: ValueKey('text'),
+                      mainAxisSize: MainAxisSize.min,
+                      children: [
+                        Icon(Icons.check, size: 18),
+                        SizedBox(width: 8),
+                        Text('Guardar dirección'),
+                      ],
+                    ),
+            ),
+          ),
         ),
       ),
     );
diff --git a/recolecta_app/lib/features/addresses/address_map_card.dart b/recolecta_app/lib/features/addresses/address_map_card.dart
index e767b8c..2390ede 100644
--- a/recolecta_app/lib/features/addresses/address_map_card.dart
+++ b/recolecta_app/lib/features/addresses/address_map_card.dart
@@ -26,7 +26,7 @@ class AddressMapCard extends StatelessWidget {
     // Si existen coordenadas exactas las usa, de lo contrario cae al centro de la colonia
     final center = (lat != null && lng != null)
         ? LatLng(lat!, lng!)
-        : kColoniaCenter(colonia);
+        : kColoniasCoordinates[colonia] ?? const LatLng(20.5222, -100.8123);
 
     return Container(
       margin: const EdgeInsets.only(bottom: 16),
diff --git a/recolecta_app/lib/features/admin/admin_screen.dart b/recolecta_app/lib/features/admin/admin_screen.dart
index ae23389..8d748ae 100644
--- a/recolecta_app/lib/features/admin/admin_screen.dart
+++ b/recolecta_app/lib/features/admin/admin_screen.dart
@@ -7,6 +7,7 @@ import '../../core/theme/app_theme.dart';
 import '../../core/widgets/app_widgets.dart';
 import 'data/admin_service.dart';
 import 'models/admin_driver.dart';
+import 'models/admin_incident.dart';
 import 'models/admin_route.dart';
 import 'models/admin_unit.dart';
 import 'models/admin_user.dart';
@@ -67,6 +68,23 @@ class _AdminScreenState extends ConsumerState<AdminScreen>
     }
   }
 
+  Future<void> _handleSimulationTick() async {
+    try {
+      final events = await _service.simulationTick();
+      if (events.isEmpty) {
+        _snack('Tick enviado · sin eventos nuevos en esta posición');
+      } else {
+        final tipos = events
+            .map((e) => e['event']?.toString() ?? '?')
+            .toSet()
+            .join(', ');
+        _snack('Tick enviado · ${events.length} push FCM ($tipos)');
+      }
+    } catch (e) {
+      _snack('No se pudo avanzar la simulación: $e', error: true);
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
@@ -74,6 +92,11 @@ class _AdminScreenState extends ConsumerState<AdminScreen>
       appBar: AppBar(
         title: const Text('Panel de administración'),
         actions: [
+          IconButton(
+            tooltip: 'Avanzar simulación (envía push FCM)',
+            icon: const Icon(Icons.play_circle_fill_rounded),
+            onPressed: _handleSimulationTick,
+          ),
           IconButton(
             tooltip: 'Refrescar',
             icon: const Icon(Icons.refresh),
@@ -101,7 +124,7 @@ class _AdminScreenState extends ConsumerState<AdminScreen>
           tabs: const [
             Tab(text: 'Usuarios'),
             Tab(text: 'Rutas'),
-            Tab(text: 'Camiones'),
+            Tab(text: 'Unidades'),
           ],
         ),
       ),
@@ -118,7 +141,7 @@ class _AdminScreenState extends ConsumerState<AdminScreen>
               ? 'Nuevo usuario'
               : _activeTab == 1
               ? 'Nueva ruta'
-              : 'Nuevo camión',
+              : 'Nueva unidad',
         ),
       ),
     );
@@ -372,7 +395,7 @@ class _AdminScreenState extends ConsumerState<AdminScreen>
                       DropdownButtonFormField<int?>(
                         initialValue: truckId,
                         decoration: InputDecoration(
-                          labelText: 'Camión asignado',
+                          labelText: 'Unidad asignada',
                           border: OutlineInputBorder(
                             borderRadius: BorderRadius.circular(
                               AppTheme.radiusMd,
@@ -445,7 +468,7 @@ class _AdminScreenState extends ConsumerState<AdminScreen>
     }
   }
 
-  // ── Formulario camión (unit) ────────────────────────────────────────────────
+  // ── Formulario unidad ───────────────────────────────────────────────────────
   Future<void> _showUnitForm({AdminUnitModel? unit}) async {
     final isEdit = unit != null;
     final idCtrl = TextEditingController(text: unit?.id.toString() ?? '');
@@ -463,7 +486,7 @@ class _AdminScreenState extends ConsumerState<AdminScreen>
               shape: RoundedRectangleBorder(
                 borderRadius: BorderRadius.circular(AppTheme.radiusLg),
               ),
-              title: Text(isEdit ? 'Editar camión' : 'Nuevo camión'),
+              title: Text(isEdit ? 'Editar unidad' : 'Nueva unidad'),
               content: Form(
                 key: formKey,
                 child: SingleChildScrollView(
@@ -561,7 +584,7 @@ class _AdminScreenState extends ConsumerState<AdminScreen>
     if (saved == true) {
       ref.invalidate(adminUnitsProvider);
       ref.invalidate(adminRoutesProvider);
-      _snack(isEdit ? 'Camión actualizado' : 'Camión creado');
+      _snack(isEdit ? 'Unidad actualizada' : 'Unidad creada');
     }
   }
 
@@ -774,7 +797,7 @@ class _RoutesTab extends ConsumerWidget {
                       style: const TextStyle(fontSize: 13),
                     ),
                   Text(
-                    'Camión: ${unit?.displayPlate ?? (r.truckId == null ? 'Sin asignar' : '#${r.truckId}')}',
+                    'Unidad: ${unit?.displayPlate ?? (r.truckId == null ? 'Sin asignar' : '#${r.truckId}')}',
                     style: const TextStyle(
                       fontSize: 13,
                       color: AppTheme.textSecondary,
@@ -845,6 +868,7 @@ class _RoutesTab extends ConsumerWidget {
   }
 }
 
+// ── Tab Unidades ──────────────────────────────────────────────────────────────
 class _TrucksTab extends ConsumerWidget {
   const _TrucksTab();
 
@@ -866,7 +890,7 @@ class _TrucksTab extends ConsumerWidget {
       ),
       data: (units) {
         if (units.isEmpty) {
-          return const _EmptyView('No hay camiones registrados.');
+          return const _EmptyView('No hay unidades registradas.');
         }
         return ListView.separated(
           padding: const EdgeInsets.fromLTRB(16, 16, 16, 96),
@@ -892,6 +916,7 @@ class _TrucksTab extends ConsumerWidget {
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
+                  // ── Encabezado: placa + badge estado ─────────────────
                   Row(
                     children: [
                       Expanded(
@@ -907,6 +932,7 @@ class _TrucksTab extends ConsumerWidget {
                     ],
                   ),
                   const SizedBox(height: 6),
+                  // ── Detalles ──────────────────────────────────────────
                   Text(
                     'ID: #${t.id}',
                     style: const TextStyle(
@@ -926,9 +952,21 @@ class _TrucksTab extends ConsumerWidget {
                     ),
                   ),
                   const SizedBox(height: 12),
+                  // ── Botones de acción ─────────────────────────────────
                   Row(
                     mainAxisAlignment: MainAxisAlignment.end,
                     children: [
+                      // Ver incidencias
+                      TextButton.icon(
+                        onPressed: () => _showIncidentsSheet(context, ref, t),
+                        icon: const Icon(Icons.warning_amber_rounded, size: 18),
+                        label: const Text('Incidencias'),
+                        style: TextButton.styleFrom(
+                          foregroundColor: Colors.orange.shade700,
+                        ),
+                      ),
+                      const SizedBox(width: 4),
+                      // Editar
                       TextButton.icon(
                         onPressed: () {
                           final state = context
@@ -938,11 +976,12 @@ class _TrucksTab extends ConsumerWidget {
                         icon: const Icon(Icons.edit_outlined, size: 18),
                         label: const Text('Editar'),
                       ),
-                      const SizedBox(width: 8),
+                      const SizedBox(width: 4),
+                      // Eliminar
                       TextButton.icon(
                         onPressed: () => _confirmAndDelete(
                           context,
-                          tipo: 'camión',
+                          tipo: 'unidad',
                           onConfirm: () async {
                             await ref
                                 .read(adminServiceProvider)
@@ -968,6 +1007,23 @@ class _TrucksTab extends ConsumerWidget {
     );
   }
 
+  // ── Abre el bottom sheet de incidencias ───────────────────────────────────
+  void _showIncidentsSheet(
+    BuildContext context,
+    WidgetRef ref,
+    AdminUnitModel unit,
+  ) {
+    showModalBottomSheet(
+      context: context,
+      isScrollControlled: true,
+      backgroundColor: AppTheme.surface,
+      shape: const RoundedRectangleBorder(
+        borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
+      ),
+      builder: (_) => _IncidentsSheet(unit: unit),
+    );
+  }
+
   Widget _unitStatusBadge(String status) {
     switch (status) {
       case 'inactive':
@@ -980,6 +1036,374 @@ class _TrucksTab extends ConsumerWidget {
   }
 }
 
+// ── Bottom sheet de incidencias ───────────────────────────────────────────────
+class _IncidentsSheet extends ConsumerStatefulWidget {
+  const _IncidentsSheet({required this.unit});
+  final AdminUnitModel unit;
+
+  @override
+  ConsumerState<_IncidentsSheet> createState() => _IncidentsSheetState();
+}
+
+class _IncidentsSheetState extends ConsumerState<_IncidentsSheet> {
+  @override
+  Widget build(BuildContext context) {
+    final async = ref.watch(adminIncidentsByUnitProvider(widget.unit.id));
+
+    return DraggableScrollableSheet(
+      expand: false,
+      initialChildSize: 0.6,
+      maxChildSize: 0.92,
+      builder: (_, controller) => Column(
+        children: [
+          // ── Handle ─────────────────────────────────────────────────
+          const SizedBox(height: 12),
+          Container(
+            width: 40,
+            height: 4,
+            decoration: BoxDecoration(
+              color: Colors.grey.shade300,
+              borderRadius: BorderRadius.circular(2),
+            ),
+          ),
+          const SizedBox(height: 12),
+          // ── Header ─────────────────────────────────────────────────
+          Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 20),
+            child: Row(
+              children: [
+                const Icon(
+                  Icons.warning_amber_rounded,
+                  color: Colors.orange,
+                  size: 22,
+                ),
+                const SizedBox(width: 8),
+                Expanded(
+                  child: Text(
+                    'Incidencias — ${widget.unit.displayPlate}',
+                    style: const TextStyle(
+                      fontSize: 16,
+                      fontWeight: FontWeight.w700,
+                    ),
+                  ),
+                ),
+                IconButton(
+                  icon: const Icon(
+                    Icons.add_circle_outline,
+                    color: AppTheme.primary,
+                  ),
+                  tooltip: 'Nueva incidencia',
+                  onPressed: () => _showCreateIncidentDialog(context),
+                ),
+              ],
+            ),
+          ),
+          const Divider(height: 1),
+          // ── Lista ───────────────────────────────────────────────────
+          Expanded(
+            child: async.when(
+              loading: () => const Center(child: CircularProgressIndicator()),
+              error: (e, _) => Center(
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    const Icon(
+                      Icons.error_outline,
+                      color: AppTheme.danger,
+                      size: 40,
+                    ),
+                    const SizedBox(height: 8),
+                    Text(
+                      e.toString(),
+                      textAlign: TextAlign.center,
+                      style: const TextStyle(
+                        fontSize: 13,
+                        color: AppTheme.textSecondary,
+                      ),
+                    ),
+                    const SizedBox(height: 12),
+                    ElevatedButton(
+                      onPressed: () => ref.invalidate(
+                        adminIncidentsByUnitProvider(widget.unit.id),
+                      ),
+                      child: const Text('Reintentar'),
+                    ),
+                  ],
+                ),
+              ),
+              data: (incidents) {
+                if (incidents.isEmpty) {
+                  return const Center(
+                    child: Padding(
+                      padding: EdgeInsets.all(24),
+                      child: Text(
+                        'Sin incidencias registradas.',
+                        style: TextStyle(color: AppTheme.textSecondary),
+                      ),
+                    ),
+                  );
+                }
+                return ListView.separated(
+                  controller: controller,
+                  padding: const EdgeInsets.fromLTRB(16, 12, 16, 32),
+                  itemCount: incidents.length,
+                  separatorBuilder: (_, __) => const SizedBox(height: 10),
+                  itemBuilder: (_, i) => _IncidentCard(incident: incidents[i]),
+                );
+              },
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Future<void> _showCreateIncidentDialog(BuildContext context) async {
+    String type = 'otro';
+    final desc = TextEditingController();
+    final formKey = GlobalKey<FormState>();
+
+    final saved = await showDialog<bool>(
+      context: context,
+      builder: (ctx) => StatefulBuilder(
+        builder: (ctx, setStateDialog) => AlertDialog(
+          backgroundColor: AppTheme.surface,
+          shape: RoundedRectangleBorder(
+            borderRadius: BorderRadius.circular(AppTheme.radiusLg),
+          ),
+          title: const Text('Nueva incidencia'),
+          content: Form(
+            key: formKey,
+            child: Column(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                DropdownButtonFormField<String>(
+                  initialValue: type,
+                  decoration: InputDecoration(
+                    labelText: 'Categoría',
+                    border: OutlineInputBorder(
+                      borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+                    ),
+                  ),
+                  items: const [
+                    DropdownMenuItem(
+                      value: 'derrame',
+                      child: Text('💧 Derrame'),
+                    ),
+                    DropdownMenuItem(
+                      value: 'dano_propiedad',
+                      child: Text('💥 Daño a propiedad'),
+                    ),
+                    DropdownMenuItem(
+                      value: 'conducta',
+                      child: Text('😠 Conducta'),
+                    ),
+                    DropdownMenuItem(
+                      value: 'no_recoleccion',
+                      child: Text('🗑 No recolección'),
+                    ),
+                    DropdownMenuItem(value: 'otro', child: Text('📋 Otro')),
+                  ],
+                  onChanged: (v) {
+                    if (v != null) setStateDialog(() => type = v);
+                  },
+                ),
+                const SizedBox(height: 10),
+                TextFormField(
+                  controller: desc,
+                  maxLines: 3,
+                  decoration: InputDecoration(
+                    labelText: 'Descripción',
+                    helperText: 'Mínimo 3 caracteres',
+                    border: OutlineInputBorder(
+                      borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+                    ),
+                  ),
+                  validator: (v) {
+                    final t = (v ?? '').trim();
+                    if (t.length < 3) return 'Describe brevemente lo ocurrido';
+                    return null;
+                  },
+                ),
+              ],
+            ),
+          ),
+          actions: [
+            TextButton(
+              onPressed: () => Navigator.pop(ctx, false),
+              child: const Text('Cancelar'),
+            ),
+            ElevatedButton(
+              onPressed: () async {
+                if (!(formKey.currentState?.validate() ?? false)) return;
+                try {
+                  await ref
+                      .read(adminServiceProvider)
+                      .createIncident(
+                        unitId: widget.unit.id,
+                        type: type,
+                        description: desc.text.trim(),
+                      );
+                  if (ctx.mounted) Navigator.pop(ctx, true);
+                } catch (e) {
+                  if (ctx.mounted) {
+                    ScaffoldMessenger.of(ctx).showSnackBar(
+                      SnackBar(
+                        content: Text('Error: $e'),
+                        backgroundColor: AppTheme.danger,
+                      ),
+                    );
+                  }
+                }
+              },
+              child: const Text('Guardar'),
+            ),
+          ],
+        ),
+      ),
+    );
+
+    if (saved == true) {
+      ref.invalidate(adminIncidentsByUnitProvider(widget.unit.id));
+    }
+  }
+}
+
+// ── Tarjeta individual de incidencia ──────────────────────────────────────────
+class _IncidentCard extends StatelessWidget {
+  const _IncidentCard({required this.incident});
+  final AdminIncidentModel incident;
+
+  @override
+  Widget build(BuildContext context) {
+    return AppCard(
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          _typeIcon(incident.type),
+          const SizedBox(width: 12),
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                // ── Tipo + fecha ──────────────────────────────────────
+                Row(
+                  children: [
+                    _typeBadge(incident.type),
+                    const Spacer(),
+                    Text(
+                      _formatDate(incident.createdAt),
+                      style: const TextStyle(
+                        fontSize: 11,
+                        color: AppTheme.textSecondary,
+                      ),
+                    ),
+                  ],
+                ),
+                // ── Conductor ─────────────────────────────────────────
+                if (incident.driverName != null) ...[
+                  const SizedBox(height: 6),
+                  Row(
+                    children: [
+                      const Icon(
+                        Icons.person_outline,
+                        size: 14,
+                        color: AppTheme.textSecondary,
+                      ),
+                      const SizedBox(width: 4),
+                      Expanded(
+                        child: Text(
+                          incident.driverName!,
+                          style: const TextStyle(
+                            fontSize: 13,
+                            fontWeight: FontWeight.w500,
+                          ),
+                          overflow: TextOverflow.ellipsis,
+                        ),
+                      ),
+                    ],
+                  ),
+                ],
+                // ── Ruta ─────────────────────────────────────────────
+                if (incident.routeId != null) ...[
+                  const SizedBox(height: 2),
+                  Text(
+                    'Ruta: ${incident.routeId}',
+                    style: const TextStyle(
+                      fontSize: 12,
+                      color: AppTheme.textSecondary,
+                    ),
+                  ),
+                ],
+                // ── Descripción ───────────────────────────────────────
+                if (incident.description != null &&
+                    incident.description!.isNotEmpty) ...[
+                  const SizedBox(height: 6),
+                  Text(
+                    incident.description!,
+                    style: const TextStyle(fontSize: 13),
+                  ),
+                ],
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _typeIcon(String type) {
+    IconData icon;
+    Color color;
+    switch (type) {
+      case 'derrame':
+        icon = Icons.water_drop_outlined;
+        color = Colors.blue;
+        break;
+      case 'dano_propiedad':
+        icon = Icons.report_gmailerrorred_outlined;
+        color = AppTheme.danger;
+        break;
+      case 'conducta':
+        icon = Icons.sentiment_very_dissatisfied_outlined;
+        color = Colors.orange;
+        break;
+      case 'no_recoleccion':
+        icon = Icons.delete_forever_outlined;
+        color = Colors.deepOrange;
+        break;
+      default:
+        icon = Icons.info_outline;
+        color = AppTheme.textSecondary;
+    }
+    return Icon(icon, color: color, size: 22);
+  }
+
+  Widget _typeBadge(String type) {
+    switch (type) {
+      case 'derrame':
+        return AppStatusBadge.amber('Derrame');
+      case 'dano_propiedad':
+        return AppStatusBadge.danger('Daño');
+      case 'conducta':
+        return AppStatusBadge.amber('Conducta');
+      case 'no_recoleccion':
+        return AppStatusBadge.danger('No recolección');
+      default:
+        return AppStatusBadge.gray('Otro');
+    }
+  }
+
+  String _formatDate(DateTime dt) {
+    final d = dt.toLocal();
+    final day = d.day.toString().padLeft(2, '0');
+    final month = d.month.toString().padLeft(2, '0');
+    final hour = d.hour.toString().padLeft(2, '0');
+    final minute = d.minute.toString().padLeft(2, '0');
+    return '$day/$month/${d.year} $hour:$minute';
+  }
+}
+
 // ── Shared widgets ────────────────────────────────────────────────────────────
 class _EmptyView extends StatelessWidget {
   const _EmptyView(this.message);
@@ -1079,4 +1503,3 @@ void _confirmAndDelete(
 }
 
 // EOF
-
diff --git a/recolecta_app/lib/features/admin/data/admin_service.dart b/recolecta_app/lib/features/admin/data/admin_service.dart
index 23936de..2d599ff 100644
--- a/recolecta_app/lib/features/admin/data/admin_service.dart
+++ b/recolecta_app/lib/features/admin/data/admin_service.dart
@@ -3,6 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import '../../../core/network/api_client.dart';
 import '../models/admin_driver.dart';
+import '../models/admin_incident.dart';
 import '../models/admin_route.dart';
 import '../models/admin_unit.dart';
 import '../models/admin_user.dart';
@@ -188,4 +189,42 @@ class AdminService {
   Future<void> deleteDriver(String id) async {
     await _dio.delete<void>('/admin/drivers/$id');
   }
+
+  // ── Incidents ────────────────────────────────────────────────────────────────
+  Future<List<AdminIncidentModel>> listIncidentsByUnit(int unitId) async {
+    final res = await _dio.get<List<dynamic>>('/admin/units/$unitId/incidents');
+    return (res.data ?? [])
+        .whereType<Map>()
+        .map((e) => AdminIncidentModel.fromJson(Map<String, dynamic>.from(e)))
+        .toList();
+  }
+
+  Future<AdminIncidentModel> createIncident({
+    required int unitId,
+    required String type,
+    String? description,
+  }) async {
+    final res = await _dio.post<Map<String, dynamic>>(
+      '/admin/units/$unitId/incidents',
+      data: {
+        'unit_id': unitId,
+        'type': type,
+        if (description != null && description.isNotEmpty)
+          'description': description,
+      },
+    );
+    return AdminIncidentModel.fromJson(res.data!);
+  }
+
+  // ── Simulación ──────────────────────────────────────────────────────────────
+  /// Avanza una vez la simulación (`positionId += 1` en todas las rutas) y
+  /// dispara los push FCM correspondientes. Devuelve los eventos disparados.
+  Future<List<Map<String, dynamic>>> simulationTick() async {
+    final res = await _dio.post<Map<String, dynamic>>('/simulation/tick');
+    final events = (res.data?['events'] as List?) ?? const [];
+    return events
+        .whereType<Map>()
+        .map((e) => Map<String, dynamic>.from(e))
+        .toList();
+  }
 }
diff --git a/recolecta_app/lib/features/admin/models/admin_incident.dart b/recolecta_app/lib/features/admin/models/admin_incident.dart
new file mode 100644
index 0000000..97caf73
--- /dev/null
+++ b/recolecta_app/lib/features/admin/models/admin_incident.dart
@@ -0,0 +1,67 @@
+// lib/features/admin/models/admin_incident.dart
+
+class AdminIncidentModel {
+  final String id;
+  final int unitId;
+  final String? routeId;
+  // Mapea a `incidents.category` en la base de datos.
+  final String type;
+  final String? description;
+  final String? driverName;
+  final String status; // open | in_review | resolved
+  final String? photoUrl;
+  final DateTime createdAt;
+
+  const AdminIncidentModel({
+    required this.id,
+    required this.unitId,
+    this.routeId,
+    required this.type,
+    this.description,
+    this.driverName,
+    this.status = 'open',
+    this.photoUrl,
+    required this.createdAt,
+  });
+
+  factory AdminIncidentModel.fromJson(Map<String, dynamic> json) =>
+      AdminIncidentModel(
+        // El id en DB es BIGSERIAL; el backend lo serializa como string,
+        // pero por defensa aceptamos number también.
+        id: json['id'].toString(),
+        unitId: (json['unit_id'] as num).toInt(),
+        routeId: json['route_id'] as String?,
+        type: (json['type'] as String?) ?? 'otro',
+        description: json['description'] as String?,
+        driverName: json['driver_name'] as String?,
+        status: (json['status'] as String?) ?? 'open',
+        photoUrl: json['photo_url'] as String?,
+        createdAt: DateTime.parse(json['created_at'] as String),
+      );
+
+  String get typeLabel {
+    switch (type) {
+      case 'derrame':
+        return 'Derrame';
+      case 'dano_propiedad':
+        return 'Daño a propiedad';
+      case 'conducta':
+        return 'Conducta';
+      case 'no_recoleccion':
+        return 'No recolección';
+      default:
+        return 'Otro';
+    }
+  }
+
+  String get statusLabel {
+    switch (status) {
+      case 'in_review':
+        return 'En revisión';
+      case 'resolved':
+        return 'Resuelta';
+      default:
+        return 'Abierta';
+    }
+  }
+}
diff --git a/recolecta_app/lib/features/admin/providers/admin_providers.dart b/recolecta_app/lib/features/admin/providers/admin_providers.dart
index 50be3c1..9e2f51f 100644
--- a/recolecta_app/lib/features/admin/providers/admin_providers.dart
+++ b/recolecta_app/lib/features/admin/providers/admin_providers.dart
@@ -2,6 +2,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import '../data/admin_service.dart';
 import '../models/admin_driver.dart';
+import '../models/admin_incident.dart';
 import '../models/admin_route.dart';
 import '../models/admin_unit.dart';
 import '../models/admin_user.dart';
@@ -21,3 +22,8 @@ final adminUnitsProvider = FutureProvider<List<AdminUnitModel>>((ref) {
 final adminDriversProvider = FutureProvider<List<AdminDriverModel>>((ref) {
   return ref.read(adminServiceProvider).listDrivers();
 });
+
+final adminIncidentsByUnitProvider =
+    FutureProvider.family<List<AdminIncidentModel>, int>((ref, unitId) {
+  return ref.read(adminServiceProvider).listIncidentsByUnit(unitId);
+});
diff --git a/recolecta_app/lib/features/alerts/alerts_provider.dart b/recolecta_app/lib/features/alerts/alerts_provider.dart
new file mode 100644
index 0000000..3dd4f35
--- /dev/null
+++ b/recolecta_app/lib/features/alerts/alerts_provider.dart
@@ -0,0 +1,38 @@
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+class AppAlert {
+  final String id;
+  final String title;
+  final String body;
+  final DateTime timestamp;
+
+  AppAlert({
+    required this.id,
+    required this.title,
+    required this.body,
+    required this.timestamp,
+  });
+}
+
+class AlertsNotifier extends Notifier<List<AppAlert>> {
+  @override
+  List<AppAlert> build() => [];
+
+  void addAlert(String title, String body) {
+    state = [
+      AppAlert(
+        id: DateTime.now().millisecondsSinceEpoch.toString(),
+        title: title,
+        body: body,
+        timestamp: DateTime.now(),
+      ),
+      ...state,
+    ];
+  }
+
+  void clearAll() => state = [];
+}
+
+final alertsProvider = NotifierProvider<AlertsNotifier, List<AppAlert>>(
+  AlertsNotifier.new,
+);
diff --git a/recolecta_app/lib/features/alerts/alerts_screen.dart b/recolecta_app/lib/features/alerts/alerts_screen.dart
index d9b29a7..f93ced6 100644
--- a/recolecta_app/lib/features/alerts/alerts_screen.dart
+++ b/recolecta_app/lib/features/alerts/alerts_screen.dart
@@ -1,218 +1,65 @@
 import 'package:flutter/material.dart';
-import '../../core/theme/app_theme.dart';
-import '../../core/models/ui_models.dart';
-import '../../core/widgets/app_widgets.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-class AlertsScreen extends StatefulWidget {
+import '../../core/theme/app_theme.dart';
+import 'alerts_provider.dart';
+
+class AlertsScreen extends ConsumerWidget {
   const AlertsScreen({super.key});
 
   @override
-  State<AlertsScreen> createState() => _AlertsScreenState();
-}
+  Widget build(BuildContext context, WidgetRef ref) {
+    final alerts = ref.watch(alertsProvider);
 
-class _AlertsScreenState extends State<AlertsScreen> {
-  final UIAlertaModel _alertaActiva = UIAlertaModel(
-    id: 'alerta-001',
-    tipo: TipoAlerta.cercana,
-    distanciaMetros: 180,
-    fecha: DateTime.now(),
-    direccionCasa: 'Av. Insurgentes 245',
-    leida: false,
-  );
-
-  final List<UIAlertaModel> _historial = [
-    UIAlertaModel(
-      id: 'h-001',
-      tipo: TipoAlerta.cercana,
-      distanciaMetros: 200,
-      fecha: DateTime.now().subtract(const Duration(hours: 1)),
-      direccionCasa: 'Av. Insurgentes 245',
-      leida: true,
-    ),
-    UIAlertaModel(
-      id: 'h-002',
-      tipo: TipoAlerta.cercana,
-      distanciaMetros: 200,
-      fecha: DateTime.now().subtract(const Duration(days: 2, hours: 2)),
-      direccionCasa: 'Av. Insurgentes 245',
-      leida: true,
-    ),
-    UIAlertaModel(
-      id: 'h-003',
-      tipo: TipoAlerta.cercana,
-      distanciaMetros: 200,
-      fecha: DateTime.now().subtract(
-          const Duration(days: 4, hours: 1, minutes: 30)),
-      direccionCasa: 'Av. Insurgentes 245',
-      leida: true,
-    ),
-    UIAlertaModel(
-      id: 'h-004',
-      tipo: TipoAlerta.cercana,
-      distanciaMetros: 200,
-      fecha: DateTime.now().subtract(const Duration(days: 7, hours: 3)),
-      direccionCasa: 'Av. Insurgentes 245',
-      leida: true,
-    ),
-  ];
-
-  @override
-  Widget build(BuildContext context) {
     return Scaffold(
       backgroundColor: AppTheme.background,
       appBar: AppBar(
-        title: const Text('Alertas'),
+        title: const Text('Mis Alertas'),
         actions: [
-          TextButton(
-            onPressed: () {},
-            child: const Text('Limpiar',
-                style: TextStyle(color: Colors.white, fontSize: 13)),
-          ),
+          if (alerts.isNotEmpty)
+            IconButton(
+              icon: const Icon(Icons.delete_sweep_outlined),
+              tooltip: 'Limpiar historial',
+              onPressed: () => ref.read(alertsProvider.notifier).clearAll(),
+            ),
         ],
       ),
-      body: RefreshIndicator(
-        color: AppTheme.primary,
-        onRefresh: () async =>
-            Future.delayed(const Duration(milliseconds: 800)),
-        child: ListView(
-          padding: const EdgeInsets.all(16),
-          children: [
-            _AlertaActivaCard(alerta: _alertaActiva),
-            const SizedBox(height: 20),
-            if (_historial.isEmpty)
-              const _EmptyState()
-            else ...[
-              const AppSectionTitle(title: 'Historial de alertas'),
-              ..._historial.map((a) => _AlertaHistorialItem(alerta: a)),
-            ],
-          ],
-        ),
-      ),
+      body: alerts.isEmpty
+          ? _buildEmptyState()
+          : ListView.separated(
+              padding: const EdgeInsets.all(16),
+              itemCount: alerts.length,
+              separatorBuilder: (_, __) => const SizedBox(height: 12),
+              itemBuilder: (context, index) {
+                return _AlertCard(alert: alerts[index]);
+              },
+            ),
     );
   }
-}
 
-// ── Alerta activa ─────────────────────────────────────────────────────────────
-class _AlertaActivaCard extends StatelessWidget {
-  final UIAlertaModel alerta;
-  const _AlertaActivaCard({required this.alerta});
-
-  @override
-  Widget build(BuildContext context) {
-    final progreso = (1 - (alerta.distanciaMetros / 400)).clamp(0.0, 1.0);
-
-    return Container(
-      padding: const EdgeInsets.all(18),
-      decoration: BoxDecoration(
-        color: AppTheme.primaryLight,
-        borderRadius: BorderRadius.circular(AppTheme.radiusLg),
-        border: Border.all(color: AppTheme.primaryMid),
-        boxShadow: AppTheme.softShadow,
-      ),
+  Widget _buildEmptyState() {
+    return const Center(
       child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
+        mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          Row(
-            children: [
-              Container(
-                width: 40,
-                height: 40,
-                decoration: BoxDecoration(
-                  color: AppTheme.primary,
-                  borderRadius: BorderRadius.circular(12),
-                ),
-                child: const Icon(Icons.notifications_active,
-                    color: Colors.white, size: 22),
-              ),
-              const SizedBox(width: 12),
-              Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    const Text('¡El camión está cerca!',
-                        style: TextStyle(
-                            fontSize: 15,
-                            fontWeight: FontWeight.w700,
-                            color: AppTheme.primaryDark)),
-                    Text(alerta.fechaFormateada,
-                        style: const TextStyle(
-                            fontSize: 12, color: AppTheme.primary)),
-                  ],
-                ),
-              ),
-              Container(
-                padding:
-                    const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-                decoration: BoxDecoration(
-                  color: AppTheme.primary,
-                  borderRadius: BorderRadius.circular(20),
-                ),
-                child: const Text('Ahora',
-                    style: TextStyle(
-                        fontSize: 11,
-                        fontWeight: FontWeight.w600,
-                        color: Colors.white)),
-              ),
-            ],
+          Icon(
+            Icons.notifications_off_outlined,
+            size: 64,
+            color: AppTheme.textSecondary,
           ),
-          const SizedBox(height: 16),
-          const Text('El camión se encuentra a',
-              style: TextStyle(fontSize: 13, color: AppTheme.primaryDark)),
-          Row(
-            crossAxisAlignment: CrossAxisAlignment.end,
-            children: [
-              Text(
-                alerta.distanciaTexto,
-                style: const TextStyle(
-                    fontSize: 36,
-                    fontWeight: FontWeight.w700,
-                    color: AppTheme.primary,
-                    height: 1.1),
-              ),
-              const SizedBox(width: 8),
-              Padding(
-                padding: const EdgeInsets.only(bottom: 6),
-                child: Text('de tu casa en ${alerta.direccionCasa}',
-                    style: const TextStyle(
-                        fontSize: 13, color: AppTheme.primaryDark)),
-              ),
-            ],
-          ),
-          const SizedBox(height: 14),
-          Row(
-            children: [
-              const Text('Llegada estimada:',
-                  style:
-                      TextStyle(fontSize: 12, color: AppTheme.primaryDark)),
-              const SizedBox(width: 6),
-              Text(alerta.tiempoEstimadoTexto,
-                  style: const TextStyle(
-                      fontSize: 13,
-                      fontWeight: FontWeight.w700,
-                      color: AppTheme.primary)),
-            ],
-          ),
-          const SizedBox(height: 8),
-          ClipRRect(
-            borderRadius: BorderRadius.circular(4),
-            child: LinearProgressIndicator(
-              value: progreso,
-              backgroundColor:
-                  AppTheme.primaryMid.withValues(alpha: 0.4),
-              valueColor:
-                  const AlwaysStoppedAnimation<Color>(AppTheme.primary),
-              minHeight: 7,
+          SizedBox(height: 16),
+          Text(
+            'No tienes notificaciones nuevas',
+            style: TextStyle(
+              fontSize: 16,
+              fontWeight: FontWeight.w600,
+              color: AppTheme.textPrimary,
             ),
           ),
-          const SizedBox(height: 4),
-          const Row(
-            children: [
-              Text('Lejos',
-                  style: TextStyle(fontSize: 10, color: AppTheme.primary)),
-              Spacer(),
-              Text('Tu casa',
-                  style: TextStyle(fontSize: 10, color: AppTheme.primary)),
-            ],
+          SizedBox(height: 8),
+          Text(
+            'Aquí aparecerán los avisos del camión.',
+            style: TextStyle(fontSize: 14, color: AppTheme.textSecondary),
           ),
         ],
       ),
@@ -220,108 +67,77 @@ class _AlertaActivaCard extends StatelessWidget {
   }
 }
 
-// ── Ítem de historial ─────────────────────────────────────────────────────────
-class _AlertaHistorialItem extends StatelessWidget {
-  final UIAlertaModel alerta;
-  const _AlertaHistorialItem({required this.alerta});
+class _AlertCard extends StatelessWidget {
+  final AppAlert alert;
+
+  const _AlertCard({required this.alert});
+
+  String _timeAgo(DateTime date) {
+    final diff = DateTime.now().difference(date);
+    if (diff.inMinutes < 1) return 'Justo ahora';
+    if (diff.inHours < 1) return 'Hace ${diff.inMinutes} min';
+    if (diff.inDays < 1) return 'Hace ${diff.inHours} h';
+    return 'Hace ${diff.inDays} d';
+  }
 
   @override
   Widget build(BuildContext context) {
     return Container(
-      margin: const EdgeInsets.only(bottom: 8),
-      padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
+      padding: const EdgeInsets.all(16),
       decoration: BoxDecoration(
         color: AppTheme.surface,
-        borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+        borderRadius: BorderRadius.circular(AppTheme.radiusLg),
         border: Border.all(color: AppTheme.border, width: 0.5),
         boxShadow: AppTheme.softShadow,
       ),
       child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           Container(
-            width: 36,
-            height: 36,
-            decoration: BoxDecoration(
-              color: AppTheme.background,
-              borderRadius: BorderRadius.circular(10),
+            padding: const EdgeInsets.all(10),
+            decoration: const BoxDecoration(
+              color: AppTheme.primaryLight,
+              shape: BoxShape.circle,
+            ),
+            child: const Icon(
+              Icons.notifications_active_outlined,
+              color: AppTheme.primary,
+              size: 24,
             ),
-            child: const Icon(Icons.notifications_outlined,
-                color: AppTheme.textSecondary, size: 18),
           ),
-          const SizedBox(width: 12),
+          const SizedBox(width: 14),
           Expanded(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                Text('Camión a ${alerta.distanciaTexto}',
-                    style: const TextStyle(
-                        fontSize: 14,
-                        fontWeight: FontWeight.w500,
-                        color: AppTheme.textPrimary)),
-                const SizedBox(height: 2),
-                Text(alerta.fechaFormateada,
-                    style: const TextStyle(
-                        fontSize: 12, color: AppTheme.textSecondary)),
+                Text(
+                  alert.title,
+                  style: const TextStyle(
+                    fontSize: 15,
+                    fontWeight: FontWeight.w700,
+                    color: AppTheme.primaryDark,
+                  ),
+                ),
+                const SizedBox(height: 4),
+                Text(
+                  alert.body,
+                  style: const TextStyle(
+                    fontSize: 14,
+                    color: AppTheme.textPrimary,
+                    height: 1.4,
+                  ),
+                ),
+                const SizedBox(height: 8),
+                Text(
+                  _timeAgo(alert.timestamp),
+                  style: const TextStyle(
+                    fontSize: 12,
+                    color: AppTheme.textHint,
+                  ),
+                ),
               ],
             ),
           ),
-          _EtiquetaDia(texto: alerta.etiquetaFecha),
-        ],
-      ),
-    );
-  }
-}
-
-class _EtiquetaDia extends StatelessWidget {
-  final String texto;
-  const _EtiquetaDia({required this.texto});
-
-  @override
-  Widget build(BuildContext context) {
-    final esHoy = texto == 'Hoy';
-    return Container(
-      padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
-      decoration: BoxDecoration(
-        color: esHoy ? AppTheme.primaryLight : AppTheme.background,
-        borderRadius: BorderRadius.circular(20),
-      ),
-      child: Text(
-        texto,
-        style: TextStyle(
-          fontSize: 11,
-          fontWeight: FontWeight.w600,
-          color: esHoy ? AppTheme.primaryDark : AppTheme.textSecondary,
-        ),
-      ),
-    );
-  }
-}
-
-// ── Sin alertas ───────────────────────────────────────────────────────────────
-class _EmptyState extends StatelessWidget {
-  const _EmptyState();
-
-  @override
-  Widget build(BuildContext context) {
-    return const Padding(
-      padding: EdgeInsets.symmetric(vertical: 60),
-      child: Column(
-        children: [
-          Icon(Icons.notifications_outlined,
-              color: AppTheme.primary, size: 48),
-          SizedBox(height: 16),
-          Text('Sin alertas por ahora',
-              style: TextStyle(
-                  fontSize: 16,
-                  fontWeight: FontWeight.w600,
-                  color: AppTheme.textPrimary)),
-          SizedBox(height: 6),
-          Text(
-            'Te notificaremos cuando el camión\nesté cerca de tu casa.',
-            textAlign: TextAlign.center,
-            style: TextStyle(
-                fontSize: 13, color: AppTheme.textSecondary, height: 1.5),
-          ),
         ],
       ),
     );
diff --git a/recolecta_app/lib/features/auth/login_page.dart b/recolecta_app/lib/features/auth/login_page.dart
index 3f1a723..ad8a93c 100644
--- a/recolecta_app/lib/features/auth/login_page.dart
+++ b/recolecta_app/lib/features/auth/login_page.dart
@@ -145,6 +145,7 @@ class _LoginPageState extends ConsumerState<LoginPage> {
                                   key: ValueKey('loading'),
                                   fit: BoxFit.scaleDown,
                                   child: Row(
+                                    mainAxisSize: MainAxisSize.min,
                                     mainAxisAlignment: MainAxisAlignment.center,
                                     children: [
                                       VideoMascot(size: 34, zoom: 1.5),
@@ -227,7 +228,7 @@ class _GreenHeader extends StatelessWidget {
             begin: Alignment.topLeft,
             end: Alignment.bottomRight,
             stops: [0.0, 0.6, 1.0],
-            colors: [Color(0xFF0A4A38), Color(0xFF0F6E56), Color(0xFF1D9E75)],
+            colors: [Color(0xFF4A0E26), Color(0xFF6D1234), Color(0xFF9B1B4A)],
           ),
         ),
         child: SafeArea(
diff --git a/recolecta_app/lib/features/auth/register_page.dart b/recolecta_app/lib/features/auth/register_page.dart
index 465dbeb..aa291fc 100644
--- a/recolecta_app/lib/features/auth/register_page.dart
+++ b/recolecta_app/lib/features/auth/register_page.dart
@@ -112,7 +112,6 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
     setState(() => _currentPage = 1);
   }
 
-  // Llama a la API de OpenStreetMap (Nominatim) para obtener la calle automáticamente
   Future<void> _fetchStreetName(LatLng latlng) async {
     setState(() => _selectedLocation = latlng);
 
@@ -200,7 +199,7 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
       _selectedColonia = backendC;
       _selectedLocation = kColoniasCoordinates[nombre];
     });
-    FocusScope.of(context).unfocus(); // Cierra el teclado
+    FocusScope.of(context).unfocus();
   }
 
   void _onRegister() {
@@ -226,36 +225,88 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
 
     return Scaffold(
       backgroundColor: AppTheme.background,
-      appBar: AppBar(
-        backgroundColor: Colors.transparent,
-        elevation: 0,
-        iconTheme: const IconThemeData(color: AppTheme.textPrimary),
-        title: Text(
-          _currentPage == 0 ? 'Crear cuenta' : 'Mi dirección',
-          style: const TextStyle(color: AppTheme.textPrimary, fontSize: 16),
-        ),
-        bottom: PreferredSize(
-          preferredSize: const Size.fromHeight(8),
-          child: _StepIndicator(current: _currentPage, total: 2),
-        ),
-      ),
-      body: PageView(
-        controller: _pageController,
-        physics: const NeverScrollableScrollPhysics(),
+      body: Column(
         children: [
-          _buildStep1(context),
-          _buildStep2(context, loading, coloniasList),
+          _buildPageHeader(context),
+          Expanded(
+            child: PageView(
+              controller: _pageController,
+              physics: const NeverScrollableScrollPhysics(),
+              children: [
+                _buildStep1(context),
+                _buildStep2(context, loading, coloniasList),
+              ],
+            ),
+          ),
         ],
       ),
       bottomNavigationBar: _buildBottomControls(context, loading),
     );
   }
 
+  Widget _buildPageHeader(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.fromLTRB(
+        20,
+        MediaQuery.of(context).padding.top + 12,
+        20,
+        20,
+      ),
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
+          colors: [Color(0xFF4A0E26), Color(0xFF9B1B4A)],
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+        ),
+        borderRadius: BorderRadius.only(
+          bottomLeft: Radius.circular(28),
+          bottomRight: Radius.circular(28),
+        ),
+      ),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Row(
+            children: [
+              GestureDetector(
+                onTap: () => Navigator.of(context).pop(),
+                child: Container(
+                  width: 36,
+                  height: 36,
+                  decoration: BoxDecoration(
+                    color: Colors.white.withValues(alpha: 0.15),
+                    borderRadius: BorderRadius.circular(10),
+                  ),
+                  child: const Icon(
+                    Icons.arrow_back,
+                    color: Colors.white,
+                    size: 20,
+                  ),
+                ),
+              ),
+              const SizedBox(width: 14),
+              Text(
+                _currentPage == 0 ? 'Crear cuenta' : 'Mi dirección',
+                style: const TextStyle(
+                  fontSize: 20,
+                  fontWeight: FontWeight.w700,
+                  color: Colors.white,
+                ),
+              ),
+            ],
+          ),
+          const SizedBox(height: 16),
+          _HorizontalStepIndicator(current: _currentPage, total: 2),
+        ],
+      ),
+    );
+  }
+
   Widget _buildStep1(BuildContext context) {
     return Form(
       key: _step1FormKey,
       child: ListView(
-        padding: const EdgeInsets.fromLTRB(20, 24, 20, 40),
+        padding: const EdgeInsets.fromLTRB(24, 24, 24, 40),
         children: [
           const Text(
             'Crea tu cuenta',
@@ -265,54 +316,88 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
               color: AppTheme.textPrimary,
             ),
           ),
-          const SizedBox(height: 8),
+          const SizedBox(height: 6),
           const Text(
             'Ingresa tus datos para registrarte.',
             style: TextStyle(fontSize: 15, color: AppTheme.textSecondary),
           ),
-          const SizedBox(height: 28),
-          AppFormField(
-            controller: _nameCtrl,
-            label: 'Nombre completo',
-            validator: (val) =>
-                val!.isEmpty ? 'Ingresa tu nombre completo' : null,
+          const SizedBox(height: 24),
+          AppFormCard(
+            icon: Icons.person_outline,
+            title: 'Información de cuenta',
+            child: Column(
+              children: [
+                AppFormField(
+                  controller: _nameCtrl,
+                  label: 'Nombre completo',
+                  validator: (val) =>
+                      val!.isEmpty ? 'Ingresa tu nombre completo' : null,
+                ),
+                const SizedBox(height: 14),
+                AppFormField(
+                  controller: _emailCtrl,
+                  label: 'Correo electrónico',
+                  hint: 'tu@correo.com',
+                  keyboardType: TextInputType.emailAddress,
+                  validator: (v) {
+                    if (v == null || v.trim().isEmpty)
+                      return 'Ingresa tu correo';
+                    final emailRegex = RegExp(r'^[^@]+@[^@]+\.[^@]+');
+                    if (!emailRegex.hasMatch(v.trim())) {
+                      return 'Ingresa un correo válido';
+                    }
+                    return null;
+                  },
+                ),
+                const SizedBox(height: 14),
+                _PhoneField(controller: _telefonoCtrl),
+                const SizedBox(height: 14),
+                AppFormField(
+                  label: 'Contraseña',
+                  hint: '••••••••',
+                  controller: _passCtrl,
+                  obscureText: _obscurePass,
+                  validator: (v) {
+                    if (v == null || v.isEmpty) return 'Ingresa una contraseña';
+                    if (v.length < 6) return 'Mínimo 6 caracteres';
+                    return null;
+                  },
+                  suffix: IconButton(
+                    icon: Icon(
+                      _obscurePass
+                          ? Icons.visibility_outlined
+                          : Icons.visibility_off_outlined,
+                      size: 18,
+                      color: AppTheme.textSecondary,
+                    ),
+                    onPressed: () =>
+                        setState(() => _obscurePass = !_obscurePass),
+                  ),
+                ),
+              ],
+            ),
           ),
-          const SizedBox(height: 16),
-          AppFormField(
-            controller: _emailCtrl,
-            label: 'Correo electrónico',
-            hint: 'tu@correo.com',
-            keyboardType: TextInputType.emailAddress,
-            validator: (v) {
-              if (v == null || v.trim().isEmpty) return 'Ingresa tu correo';
-              final emailRegex = RegExp(r'^[^@]+@[^@]+\.[^@]+');
-              if (!emailRegex.hasMatch(v.trim()))
-                return 'Ingresa un correo válido';
-              return null;
-            },
-          ),
-          const SizedBox(height: 14),
-          _PhoneField(controller: _telefonoCtrl),
-          const SizedBox(height: 14),
-          AppFormField(
-            label: 'Contraseña',
-            hint: '••••••••',
-            controller: _passCtrl,
-            obscureText: _obscurePass,
-            validator: (v) {
-              if (v == null || v.isEmpty) return 'Ingresa una contraseña';
-              if (v.length < 6) return 'Mínimo 6 caracteres';
-              return null;
-            },
-            suffix: IconButton(
-              icon: Icon(
-                _obscurePass
-                    ? Icons.visibility_outlined
-                    : Icons.visibility_off_outlined,
-                size: 18,
-                color: AppTheme.textSecondary,
-              ),
-              onPressed: () => setState(() => _obscurePass = !_obscurePass),
+          const SizedBox(height: 20),
+          Center(
+            child: Row(
+              mainAxisSize: MainAxisSize.min,
+              children: [
+                const Text(
+                  '¿Ya tienes cuenta? ',
+                  style: TextStyle(fontSize: 13, color: AppTheme.textSecondary),
+                ),
+                GestureDetector(
+                  onTap: () => context.go('/login'),
+                  child: const Text(
+                    'Inicia sesión',
+                    style: TextStyle(
+                      fontSize: 13,
+                      fontWeight: FontWeight.w600,
+                      color: AppTheme.primary,
+                    ),
+                  ),
+                ),
+              ],
             ),
           ),
         ],
@@ -326,11 +411,24 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
     List<Colonia> coloniasList,
   ) {
     return SingleChildScrollView(
-      padding: const EdgeInsets.all(24),
+      padding: const EdgeInsets.fromLTRB(24, 24, 24, 40),
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          const SizedBox(height: 4),
+          const Text(
+            'Tu dirección',
+            style: TextStyle(
+              fontSize: 22,
+              fontWeight: FontWeight.w700,
+              color: AppTheme.textPrimary,
+            ),
+          ),
+          const SizedBox(height: 6),
+          const Text(
+            'Ubica tu domicilio para recibir alertas.',
+            style: TextStyle(fontSize: 15, color: AppTheme.textSecondary),
+          ),
+          const SizedBox(height: 24),
           AppFormCard(
             icon: Icons.home_outlined,
             title: 'Dirección de tu casa',
@@ -453,10 +551,11 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
                   ),
                   const SizedBox(height: 8),
                   Container(
-                    height: 200,
+                    height: 220,
                     decoration: BoxDecoration(
-                      borderRadius: BorderRadius.circular(AppTheme.radiusSm),
+                      borderRadius: BorderRadius.circular(AppTheme.radiusMd),
                       border: Border.all(color: AppTheme.border),
+                      boxShadow: AppTheme.softShadow,
                     ),
                     clipBehavior: Clip.hardEdge,
                     child: FlutterMap(
@@ -510,7 +609,6 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
           ),
           const SizedBox(height: 16),
 
-          // ── Sección OCR (Privacidad por diseño) ──
           AppFormCard(
             icon: Icons.document_scanner_outlined,
             title: 'Verificación de Domicilio',
@@ -538,6 +636,9 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
                       'Escanear recibo (OCR)',
                       style: TextStyle(color: AppTheme.primary),
                     ),
+                    style: OutlinedButton.styleFrom(
+                      side: const BorderSide(color: AppTheme.primary),
+                    ),
                     onPressed: () {
                       ScaffoldMessenger.of(context).showSnackBar(
                         const SnackBar(
@@ -552,65 +653,21 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
           ),
           const SizedBox(height: 16),
 
-          // ── Sección WhatsApp ──
           AppFormCard(
             icon: Icons.chat_outlined,
             title: 'Notificaciones Externas',
-            child: Column(
-              children: [
-                Material(
-                  color: Colors.transparent,
-                  child: CheckboxListTile(
-                    contentPadding: EdgeInsets.zero,
-                    controlAffinity: ListTileControlAffinity.leading,
-                    activeColor: AppTheme.primary,
-                    value: _whatsappNotif,
-                    onChanged: (v) =>
-                        setState(() => _whatsappNotif = v ?? false),
-                    title: const Text(
-                      'Recibir alertas del camión vía WhatsApp (Próximamente)',
-                      style: TextStyle(
-                        fontSize: 14,
-                        color: AppTheme.textPrimary,
-                      ),
-                    ),
-                  ),
+            child: Material(
+              color: Colors.transparent,
+              child: CheckboxListTile(
+                contentPadding: EdgeInsets.zero,
+                controlAffinity: ListTileControlAffinity.leading,
+                activeColor: AppTheme.primary,
+                value: _whatsappNotif,
+                onChanged: (v) => setState(() => _whatsappNotif = v ?? false),
+                title: const Text(
+                  'Recibir alertas del camión vía WhatsApp',
+                  style: TextStyle(fontSize: 14, color: AppTheme.textPrimary),
                 ),
-              ],
-            ),
-          ),
-          const SizedBox(height: 28),
-          SizedBox(
-            width: double.infinity,
-            height: 52,
-            child: ElevatedButton(
-              onPressed: loading ? null : _onRegister,
-              child: AnimatedSwitcher(
-                duration: const Duration(milliseconds: 200),
-                child: loading
-                    ? const SizedBox(
-                        key: ValueKey('loading'),
-                        width: 20,
-                        height: 20,
-                        child: CircularProgressIndicator(
-                          strokeWidth: 2,
-                          color: Colors.white,
-                        ),
-                      )
-                    : const Row(
-                        key: ValueKey('text'),
-                        mainAxisSize: MainAxisSize.min,
-                        children: [
-                          Icon(Icons.check, size: 18),
-                          SizedBox(width: 8),
-                          Flexible(
-                            child: Text(
-                              'Registrarme',
-                              overflow: TextOverflow.ellipsis,
-                            ),
-                          ),
-                        ],
-                      ),
               ),
             ),
           ),
@@ -633,9 +690,12 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
 
   Widget _buildBottomControls(BuildContext context, bool isLoading) {
     return Container(
-      padding: const EdgeInsets.all(
-        20,
-      ).copyWith(bottom: MediaQuery.of(context).padding.bottom + 20),
+      padding: EdgeInsets.fromLTRB(
+        24,
+        12,
+        24,
+        MediaQuery.of(context).padding.bottom + 16,
+      ),
       decoration: const BoxDecoration(
         color: AppTheme.background,
         border: Border(top: BorderSide(color: AppTheme.border, width: 0.5)),
@@ -670,511 +730,107 @@ class _RegisterPageState extends ConsumerState<RegisterPage> {
   }
 }
 
-// ── Indicador de pasos ────────────────────────────────────────────────────────
-class _StepIndicator extends StatelessWidget {
+// ── Indicador horizontal de pasos ─────────────────────────────────────────────
+class _HorizontalStepIndicator extends StatelessWidget {
   final int current;
   final int total;
-  const _StepIndicator({required this.current, required this.total});
+  const _HorizontalStepIndicator({required this.current, required this.total});
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 6),
-      child: Row(
-        children: List.generate(total, (i) {
-          final active = i <= current;
-          return Expanded(
-            child: Container(
-              margin: EdgeInsets.only(right: i < total - 1 ? 6 : 0),
-              height: 4,
-              decoration: BoxDecoration(
-                color: active ? AppTheme.primary : AppTheme.border,
-                borderRadius: BorderRadius.circular(4),
+    return Row(
+      children: List.generate(total, (i) {
+        final isCompleted = i < current;
+        final isActive = i == current;
+        return Expanded(
+          child: Row(
+            children: [
+              _StepCircle(
+                index: i + 1,
+                isCompleted: isCompleted,
+                isActive: isActive,
               ),
-            ),
-          );
-        }),
-      ),
+              if (i < total - 1)
+                Expanded(
+                  child: Container(
+                    height: 2,
+                    color: isCompleted
+                        ? Colors.white.withValues(alpha: 0.8)
+                        : Colors.white.withValues(alpha: 0.3),
+                  ),
+                ),
+            ],
+          ),
+        );
+      }),
     );
   }
 }
 
-// ── Paso 1: Cuenta ────────────────────────────────────────────────────────────
-class _Step1 extends StatelessWidget {
-  final GlobalKey<FormState> formKey;
-  final TextEditingController emailCtrl, telefonoCtrl, passCtrl;
-  final bool obscurePass;
-  final VoidCallback onTogglePass;
-  final VoidCallback onNext;
-
-  const _Step1({
-    required this.formKey,
-    required this.emailCtrl,
-    required this.telefonoCtrl,
-    required this.passCtrl,
-    required this.obscurePass,
-    required this.onTogglePass,
-    required this.onNext,
+class _StepCircle extends StatelessWidget {
+  final int index;
+  final bool isCompleted;
+  final bool isActive;
+  const _StepCircle({
+    required this.index,
+    required this.isCompleted,
+    required this.isActive,
   });
 
   @override
   Widget build(BuildContext context) {
-    return SingleChildScrollView(
-      padding: const EdgeInsets.all(24),
-      child: Form(
-        key: formKey,
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            const SizedBox(height: 4),
-            AppFormCard(
-              icon: Icons.person_outline,
-              title: 'Información de cuenta',
-              child: Column(
-                children: [
-                  AppFormField(
-                    label: 'Correo electrónico',
-                    hint: 'tu@correo.com',
-                    controller: emailCtrl,
-                    keyboardType: TextInputType.emailAddress,
-                    validator: (v) {
-                      if (v == null || v.trim().isEmpty)
-                        return 'Ingresa tu correo';
-                      final emailRegex = RegExp(r'^[^@]+@[^@]+\.[^@]+');
-                      if (!emailRegex.hasMatch(v.trim()))
-                        return 'Ingresa un correo válido';
-                      return null;
-                    },
-                  ),
-                  const SizedBox(height: 14),
-                  _PhoneField(controller: telefonoCtrl),
-                  const SizedBox(height: 14),
-                  AppFormField(
-                    label: 'Contraseña',
-                    hint: '••••••••',
-                    controller: passCtrl,
-                    obscureText: obscurePass,
-                    validator: (v) {
-                      if (v == null || v.isEmpty)
-                        return 'Ingresa una contraseña';
-                      if (v.length < 6) return 'Mínimo 6 caracteres';
-                      return null;
-                    },
-                    suffix: IconButton(
-                      icon: Icon(
-                        obscurePass
-                            ? Icons.visibility_outlined
-                            : Icons.visibility_off_outlined,
-                        size: 18,
-                        color: AppTheme.textSecondary,
-                      ),
-                      onPressed: onTogglePass,
-                    ),
-                  ),
-                ],
-              ),
+    return Column(
+      children: [
+        AnimatedContainer(
+          duration: const Duration(milliseconds: 250),
+          width: 32,
+          height: 32,
+          decoration: BoxDecoration(
+            shape: BoxShape.circle,
+            color: (isCompleted || isActive)
+                ? Colors.white
+                : Colors.white.withValues(alpha: 0.2),
+            border: Border.all(
+              color: Colors.white.withValues(alpha: 0.6),
+              width: 1.5,
             ),
-            const SizedBox(height: 28),
-            SizedBox(
-              width: double.infinity,
-              height: 52,
-              child: ElevatedButton(
-                onPressed: onNext,
-                child: const Row(
-                  mainAxisSize: MainAxisSize.min,
-                  children: [
-                    Text('Siguiente'),
-                    SizedBox(width: 8),
-                    Icon(Icons.arrow_forward, size: 18),
-                  ],
-                ),
-              ),
-            ),
-            const SizedBox(height: 20),
-            Center(
-              child: Row(
-                mainAxisSize: MainAxisSize.min,
-                children: [
-                  const Text(
-                    '¿Ya tienes cuenta? ',
+          ),
+          child: Center(
+            child: isCompleted
+                ? const Icon(Icons.check, size: 16, color: AppTheme.primary)
+                : Text(
+                    '$index',
                     style: TextStyle(
                       fontSize: 13,
-                      color: AppTheme.textSecondary,
+                      fontWeight: FontWeight.w700,
+                      color: isActive
+                          ? AppTheme.primary
+                          : Colors.white.withValues(alpha: 0.6),
                     ),
                   ),
-                  GestureDetector(
-                    onTap: () => context.go('/login'),
-                    child: const Text(
-                      'Inicia sesión',
-                      style: TextStyle(
-                        fontSize: 13,
-                        fontWeight: FontWeight.w600,
-                        color: AppTheme.primary,
-                      ),
-                    ),
-                  ),
-                ],
-              ),
-            ),
-          ],
+          ),
         ),
-      ),
-    );
-  }
-}
-
-// ── Paso 2: Dirección ─────────────────────────────────────────────────────────
-class _Step2 extends StatelessWidget {
-  final MapController mapController;
-  final TextEditingController cpCtrl;
-  final TextEditingController calleCtrl;
-  final Colonia? selectedColonia;
-  final LatLng? selectedLocation;
-  final String tipoInmueble;
-  final bool whatsappNotif;
-  final bool loading;
-  final ValueChanged<String> onTipoChanged;
-  final ValueChanged<String> onCPChanged;
-  final ValueChanged<LatLng> onLocationChanged;
-  final ValueChanged<bool?> onWhatsappChanged;
-  final VoidCallback onRegister;
-
-  const _Step2({
-    required this.mapController,
-    required this.cpCtrl,
-    required this.calleCtrl,
-    required this.selectedColonia,
-    required this.selectedLocation,
-    required this.tipoInmueble,
-    required this.whatsappNotif,
-    required this.loading,
-    required this.onTipoChanged,
-    required this.onCPChanged,
-    required this.onLocationChanged,
-    required this.onWhatsappChanged,
-    required this.onRegister,
-  });
-
-  @override
-  Widget build(BuildContext context) {
-    // Usamos el centro original de la colonia para los límites estáticos
-    final baseCenter = selectedColonia != null
-        ? kColoniasCoordinates[selectedColonia!.nombre] ??
-              const LatLng(20.5222, -100.8123)
-        : const LatLng(20.5222, -100.8123);
-
-    final mapCenter = selectedLocation ?? baseCenter;
-
-    return SingleChildScrollView(
-      padding: const EdgeInsets.all(24),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          const SizedBox(height: 4),
-          AppFormCard(
-            icon: Icons.home_outlined,
-            title: 'Dirección de tu casa',
-            child: Column(
-              children: [
-                const Text(
-                  'Tipo de inmueble',
-                  style: TextStyle(
-                    fontSize: 12,
-                    fontWeight: FontWeight.w500,
-                    color: AppTheme.textSecondary,
-                  ),
-                ),
-                Row(
-                  children: [
-                    Expanded(
-                      child: Material(
-                        color: Colors.transparent,
-                        child: RadioListTile<String>(
-                          title: const Text(
-                            'Casa',
-                            style: TextStyle(fontSize: 14),
-                          ),
-                          value: 'Casa',
-                          groupValue: tipoInmueble,
-                          onChanged: (v) => onTipoChanged(v!),
-                        ),
-                      ),
-                    ),
-                    Expanded(
-                      child: Material(
-                        color: Colors.transparent,
-                        child: RadioListTile<String>(
-                          title: const Text(
-                            'Negocio',
-                            style: TextStyle(fontSize: 14),
-                          ),
-                          value: 'Negocio',
-                          groupValue: tipoInmueble,
-                          onChanged: (v) => onTipoChanged(v!),
-                        ),
-                      ),
-                    ),
-                  ],
-                ),
-                const SizedBox(height: 8),
-                AppFormField(
-                  label: 'Código Postal',
-                  hint: 'Ej. 38000',
-                  controller: cpCtrl,
-                  keyboardType: TextInputType.number,
-                  onChanged: onCPChanged,
-                ),
-
-                if (selectedColonia != null) ...[
-                  const SizedBox(height: 14),
-                  Container(
-                    padding: const EdgeInsets.all(14),
-                    decoration: BoxDecoration(
-                      color: AppTheme.primaryLight.withValues(alpha: 0.5),
-                      borderRadius: BorderRadius.circular(AppTheme.radiusSm),
-                      border: Border.all(color: AppTheme.primaryMid),
-                    ),
-                    child: Column(
-                      crossAxisAlignment: CrossAxisAlignment.start,
-                      children: [
-                        Row(
-                          children: [
-                            const Icon(
-                              Icons.check_circle_outline,
-                              color: AppTheme.primary,
-                              size: 18,
-                            ),
-                            const SizedBox(width: 8),
-                            Expanded(
-                              child: Text(
-                                'Colonia: ${selectedColonia!.nombre}',
-                                style: const TextStyle(
-                                  fontWeight: FontWeight.w600,
-                                  color: AppTheme.primaryDark,
-                                ),
-                              ),
-                            ),
-                          ],
-                        ),
-                        const SizedBox(height: 8),
-                        Text(
-                          'Horario ${selectedColonia!.turno?.toLowerCase() ?? 'asignado'}',
-                          style: const TextStyle(
-                            fontSize: 13,
-                            color: AppTheme.textPrimary,
-                          ),
-                        ),
-                        Text(
-                          selectedColonia!.horarioEstimado ??
-                              'Sin horario especificado',
-                          style: const TextStyle(
-                            fontSize: 14,
-                            fontWeight: FontWeight.bold,
-                            color: AppTheme.textPrimary,
-                          ),
-                        ),
-                      ],
-                    ),
-                  ),
-                  const SizedBox(height: 14),
-                  AppFormField(
-                    label: 'Calle y número',
-                    hint: 'Av. Insurgentes 245',
-                    controller: calleCtrl,
-                  ),
-                  const SizedBox(height: 16),
-                  const Text(
-                    'Toca el mapa para ubicar tu casa exacta:',
-                    style: TextStyle(
-                      fontSize: 12,
-                      fontWeight: FontWeight.w500,
-                      color: AppTheme.textSecondary,
-                    ),
-                  ),
-                  const SizedBox(height: 8),
-                  Container(
-                    height: 200,
-                    decoration: BoxDecoration(
-                      borderRadius: BorderRadius.circular(AppTheme.radiusSm),
-                      border: Border.all(color: AppTheme.border),
-                    ),
-                    clipBehavior: Clip.hardEdge,
-                    child: FlutterMap(
-                      mapController: mapController,
-                      options: MapOptions(
-                        initialCenter: mapCenter,
-                        initialZoom: 15.0,
-                        onTap: (_, latlng) => onLocationChanged(latlng),
-                      ),
-                      children: [
-                        TileLayer(
-                          urlTemplate:
-                              'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                          userAgentPackageName: 'com.onlineshack.recolecta',
-                        ),
-                        if (selectedLocation != null)
-                          MarkerLayer(
-                            markers: [
-                              Marker(
-                                point: selectedLocation!,
-                                width: 40,
-                                height: 40,
-                                child: const Icon(
-                                  Icons.location_on,
-                                  color: AppTheme.danger,
-                                  size: 40,
-                                ),
-                              ),
-                            ],
-                          ),
-                      ],
-                    ),
-                  ),
-                ] else ...[
-                  const SizedBox(height: 24),
-                  const Center(
-                    child: Text(
-                      'Ingresa un código postal con servicio\npara asignar tu colonia.',
-                      textAlign: TextAlign.center,
-                      style: TextStyle(
-                        color: AppTheme.textSecondary,
-                        fontSize: 13,
-                      ),
-                    ),
-                  ),
-                ],
-              ],
-            ),
+        const SizedBox(height: 4),
+        Text(
+          index == 1 ? 'Cuenta' : 'Dirección',
+          style: TextStyle(
+            fontSize: 10,
+            color: isActive || isCompleted
+                ? Colors.white
+                : Colors.white.withValues(alpha: 0.5),
+            fontWeight: isActive ? FontWeight.w600 : FontWeight.normal,
           ),
-          const SizedBox(height: 16),
-
-          // ── Sección OCR (Privacidad por diseño) ──
-          AppFormCard(
-            icon: Icons.document_scanner_outlined,
-            title: 'Verificación de Domicilio',
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                const Text(
-                  'Para prevenir abusos, requerimos validar tu dirección con un recibo (luz o agua). '
-                  'Por privacidad, la imagen será borrada inmediatamente después de la lectura.',
-                  style: TextStyle(
-                    fontSize: 13,
-                    color: AppTheme.textSecondary,
-                    height: 1.4,
-                  ),
-                ),
-                const SizedBox(height: 14),
-                SizedBox(
-                  width: double.infinity,
-                  child: OutlinedButton.icon(
-                    icon: const Icon(
-                      Icons.upload_file,
-                      color: AppTheme.primary,
-                    ),
-                    label: const Text(
-                      'Escanear recibo (OCR)',
-                      style: TextStyle(color: AppTheme.primary),
-                    ),
-                    onPressed: () {
-                      ScaffoldMessenger.of(context).showSnackBar(
-                        const SnackBar(
-                          content: Text('Abriendo cámara... (Próximamente)'),
-                        ),
-                      );
-                    },
-                  ),
-                ),
-              ],
-            ),
-          ),
-          const SizedBox(height: 16),
-
-          // ── Sección WhatsApp ──
-          AppFormCard(
-            icon: Icons.chat_outlined,
-            title: 'Notificaciones Externas',
-            child: Column(
-              children: [
-                Material(
-                  color: Colors.transparent,
-                  child: CheckboxListTile(
-                    contentPadding: EdgeInsets.zero,
-                    controlAffinity: ListTileControlAffinity.leading,
-                    activeColor: AppTheme.primary,
-                    value: whatsappNotif,
-                    onChanged: onWhatsappChanged,
-                    title: const Text(
-                      'Recibir alertas del camión vía WhatsApp (Próximamente)',
-                      style: TextStyle(
-                        fontSize: 14,
-                        color: AppTheme.textPrimary,
-                      ),
-                    ),
-                  ),
-                ),
-              ],
-            ),
-          ),
-          const SizedBox(height: 28),
-          SizedBox(
-            width: double.infinity,
-            height: 52,
-            child: ElevatedButton(
-              onPressed: loading ? null : onRegister,
-              child: AnimatedSwitcher(
-                duration: const Duration(milliseconds: 200),
-                child: loading
-                    ? const SizedBox(
-                        key: ValueKey('loading'),
-                        width: 20,
-                        height: 20,
-                        child: CircularProgressIndicator(
-                          strokeWidth: 2,
-                          color: Colors.white,
-                        ),
-                      )
-                    : const FittedBox(
-                        key: ValueKey('text'),
-                        fit: BoxFit.scaleDown,
-                        child: Row(
-                          mainAxisAlignment: MainAxisAlignment.center,
-                          children: [
-                            Icon(Icons.check, size: 18),
-                            SizedBox(width: 8),
-                            Text('Registrarme'),
-                          ],
-                        ),
-                      ),
-              ),
-            ),
-          ),
-          const SizedBox(height: 16),
-          const Center(
-            child: Text(
-              'Al registrarte aceptas los Términos de Servicio\ny la Política de Privacidad.',
-              textAlign: TextAlign.center,
-              style: TextStyle(
-                fontSize: 11,
-                color: AppTheme.textSecondary,
-                height: 1.5,
-              ),
-            ),
-          ),
-        ],
-      ),
+        ),
+      ],
     );
   }
 }
 
 // ── Campo de teléfono con lada ────────────────────────────────────────────────
-// Muestra +52 🇲🇽 fijo (escalable a selector multi-país en el futuro).
-// Formatea la entrada como 000-000-0000 y valida exactamente 10 dígitos.
 class _PhoneField extends StatelessWidget {
   final TextEditingController controller;
   const _PhoneField({required this.controller});
 
-  // Países disponibles (lista para escalamiento futuro)
   static const _ladas = [(flag: '🇲🇽', code: '+52', name: 'México')];
 
   @override
@@ -1195,7 +851,6 @@ class _PhoneField extends StatelessWidget {
         Row(
           crossAxisAlignment: CrossAxisAlignment.start,
           children: [
-            // Selector de lada (por ahora solo +52)
             Container(
               height: 50,
               padding: const EdgeInsets.symmetric(horizontal: 12),
@@ -1221,7 +876,6 @@ class _PhoneField extends StatelessWidget {
               ),
             ),
             const SizedBox(width: 8),
-            // Número (solo dígitos, formato 000-000-0000)
             Expanded(
               child: TextFormField(
                 controller: controller,
@@ -1275,7 +929,7 @@ class _PhoneField extends StatelessWidget {
                   ),
                 ),
                 validator: (v) {
-                  if (v == null || v.isEmpty) return null; // opcional
+                  if (v == null || v.isEmpty) return null;
                   final digits = v.replaceAll('-', '');
                   if (digits.length != 10)
                     return 'Ingresa exactamente 10 dígitos';
@@ -1290,7 +944,6 @@ class _PhoneField extends StatelessWidget {
   }
 }
 
-// Formatea dígitos en tiempo real: 4611234567 → 461-123-4567
 class _PhoneInputFormatter extends TextInputFormatter {
   @override
   TextEditingValue formatEditUpdate(
diff --git a/recolecta_app/lib/features/auth/widgets/video_mascot.dart b/recolecta_app/lib/features/auth/widgets/video_mascot.dart
index 0b40e5c..f205ca8 100644
--- a/recolecta_app/lib/features/auth/widgets/video_mascot.dart
+++ b/recolecta_app/lib/features/auth/widgets/video_mascot.dart
@@ -23,9 +23,9 @@ class VideoMascot extends StatelessWidget {
           'assets/animations/blink_saludo.gif',
           fit: BoxFit.cover,
           errorBuilder: (context, error, stackTrace) {
-            // Plan B: si el archivo no existe o hay error, mostramos la huellita
+            // Plan B: si el archivo no existe o hay error, mostramos el bote
             return const Center(
-              child: Icon(Icons.pets, color: Colors.white, size: 48),
+              child: Icon(Icons.delete_outline, color: Colors.white, size: 48),
             );
           },
         ),
diff --git a/recolecta_app/lib/features/eta/eta_screen.dart b/recolecta_app/lib/features/eta/eta_screen.dart
index 56ac2dd..14528a9 100644
--- a/recolecta_app/lib/features/eta/eta_screen.dart
+++ b/recolecta_app/lib/features/eta/eta_screen.dart
@@ -123,6 +123,12 @@ class _EtaNotifier extends AsyncNotifier<_EtaResult> {
     if (items.isEmpty) return const _EtaResult.noAddress();
 
     final addressId = items.first['id'] as String;
+    final routeId = items.first['route_id'] as String?;
+    // Publica el routeId activo para que `_FcmStatusBadge` deje de mostrar
+    // "suscribiendo..." y refleje el topic real al que está suscrito el cliente.
+    Future.microtask(() {
+      ref.read(activeRouteIdProvider.notifier).set(routeId);
+    });
     final etaResp = await dio.get<dynamic>(
       '/eta',
       queryParameters: {'address_id': addressId},
@@ -149,6 +155,10 @@ final etaProvider = AsyncNotifierProvider<_EtaNotifier, _EtaResult>(
 class ActiveRouteIdNotifier extends Notifier<String?> {
   @override
   String? build() => null;
+
+  void set(String? value) {
+    if (state != value) state = value;
+  }
 }
 
 final activeRouteIdProvider = NotifierProvider<ActiveRouteIdNotifier, String?>(
@@ -312,7 +322,11 @@ class _EcoChatBanner extends StatelessWidget {
                 color: Colors.white24,
                 shape: BoxShape.circle,
               ),
-              child: const Icon(Icons.pets, color: Colors.white, size: 28),
+              child: const Icon(
+                Icons.delete_outline,
+                color: Colors.white,
+                size: 28,
+              ),
             ),
             const SizedBox(width: 16),
             const Expanded(
@@ -408,14 +422,14 @@ class _EtaHeroCard extends StatelessWidget {
   Color _bgColor(BuildContext context) {
     final cs = Theme.of(context).colorScheme;
     if (result.isCompleted) return cs.surfaceContainerHighest;
-    if (result.isNearby) return const Color(0xFFFFF8E1); // amber-50
-    return const Color(0xFFE1F5EE); // teal-50
+    if (result.isNearby) return const Color(0xFFF5EDD8); // beige dorado claro
+    return const Color(0xFFE8D5DB); // rosa claro institucional
   }
 
   Color _accentColor(BuildContext context) {
     if (result.isCompleted) return Theme.of(context).colorScheme.outline;
-    if (result.isNearby) return const Color(0xFFBA7517); // amber-400
-    return const Color(0xFF1D9E75); // teal-400
+    if (result.isNearby) return const Color(0xFFC8A36A); // beige dorado
+    return const Color(0xFF9B1B4A); // vino principal
   }
 
   @override
@@ -693,7 +707,7 @@ class _FcmStatusBadge extends ConsumerWidget {
             width: 8,
             height: 8,
             decoration: const BoxDecoration(
-              color: Color(0xFF1D9E75),
+              color: Color(0xFF1E7A46),
               shape: BoxShape.circle,
             ),
           ),
diff --git a/recolecta_app/lib/features/feedback/feedback_provider.dart b/recolecta_app/lib/features/feedback/feedback_provider.dart
index e69de29..182f0e5 100644
--- a/recolecta_app/lib/features/feedback/feedback_provider.dart
+++ b/recolecta_app/lib/features/feedback/feedback_provider.dart
@@ -0,0 +1,112 @@
+// lib/features/feedback/feedback_provider.dart
+
+import 'package:dio/dio.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../core/network/api_client.dart';
+import 'feedback_model.dart';
+
+// ──────────────────────────────────────────
+// Service
+// ──────────────────────────────────────────
+class FeedbackService {
+  final Dio _dio;
+  FeedbackService(this._dio);
+
+  Future<void> submit(FeedbackRequest req) async {
+    await _dio.post<void>('/feedback', data: req.toJson());
+  }
+}
+
+final feedbackServiceProvider = Provider<FeedbackService>(
+  (ref) => FeedbackService(ref.read(apiClientProvider)),
+);
+
+// ──────────────────────────────────────────
+// Estado del formulario
+// ──────────────────────────────────────────
+enum FeedbackFormStatus { idle, loading, success, error }
+
+class FeedbackFormState {
+  final FeedbackType selectedType;
+  final int rating;
+  final String message;
+  final FeedbackFormStatus status;
+  final String? errorMessage;
+
+  const FeedbackFormState({
+    this.selectedType = FeedbackType.noPaso,
+    this.rating = 3,
+    this.message = '',
+    this.status = FeedbackFormStatus.idle,
+    this.errorMessage,
+  });
+
+  FeedbackFormState copyWith({
+    FeedbackType? selectedType,
+    int? rating,
+    String? message,
+    FeedbackFormStatus? status,
+    String? errorMessage,
+  }) {
+    return FeedbackFormState(
+      selectedType: selectedType ?? this.selectedType,
+      rating: rating ?? this.rating,
+      message: message ?? this.message,
+      status: status ?? this.status,
+      errorMessage: errorMessage ?? this.errorMessage,
+    );
+  }
+}
+
+// ──────────────────────────────────────────
+// Notifier
+// ──────────────────────────────────────────
+class FeedbackNotifier extends Notifier<FeedbackFormState> {
+  @override
+  FeedbackFormState build() => const FeedbackFormState();
+
+  void setType(FeedbackType type) => state = state.copyWith(selectedType: type);
+
+  void setRating(int r) => state = state.copyWith(rating: r);
+
+  void setMessage(String m) => state = state.copyWith(message: m);
+
+  void reset() => state = const FeedbackFormState();
+
+  Future<void> submit({
+    required String addressId,
+    required String unitId,
+  }) async {
+    state = state.copyWith(status: FeedbackFormStatus.loading);
+    try {
+      final req = FeedbackRequest(
+        addressId: addressId,
+        type: state.selectedType,
+        rating: state.rating,
+        message: state.message,
+        targetUnitId: unitId,
+      );
+      await ref.read(feedbackServiceProvider).submit(req);
+      state = state.copyWith(status: FeedbackFormStatus.success);
+    } on DioException catch (e) {
+      final data = e.response?.data;
+      final detail = (data is Map && data['detail'] != null)
+          ? data['detail'].toString()
+          : null;
+      state = state.copyWith(
+        status: FeedbackFormStatus.error,
+        errorMessage: detail ?? e.message ?? 'Error al enviar',
+      );
+    } catch (e) {
+      state = state.copyWith(
+        status: FeedbackFormStatus.error,
+        errorMessage: 'Error al enviar: $e',
+      );
+    }
+  }
+}
+
+final feedbackProvider = NotifierProvider<FeedbackNotifier, FeedbackFormState>(
+  FeedbackNotifier.new,
+);
diff --git a/recolecta_app/lib/features/feedback/feedback_screen.dart b/recolecta_app/lib/features/feedback/feedback_screen.dart
index be78862..84a3843 100644
--- a/recolecta_app/lib/features/feedback/feedback_screen.dart
+++ b/recolecta_app/lib/features/feedback/feedback_screen.dart
@@ -1,17 +1,564 @@
-import 'package:flutter/material.dart';
+// lib/features/feedback/feedback_screen.dart
+// Buzón de retroalimentación. Expone "Unidad 101", nunca el nombre del chofer.
 
-class FeedbackScreen extends StatelessWidget {
+import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../core/theme/app_theme.dart';
+import '../eta/eta_provider.dart'; // activeAddressIdProvider
+import '../incidents/providers/incident_providers.dart'; // assignedUnitProvider
+import 'feedback_model.dart';
+import 'feedback_provider.dart';
+
+class FeedbackScreen extends ConsumerStatefulWidget {
   const FeedbackScreen({super.key});
 
+  @override
+  ConsumerState<FeedbackScreen> createState() => _FeedbackScreenState();
+}
+
+class _FeedbackScreenState extends ConsumerState<FeedbackScreen> {
+  final _messageController = TextEditingController();
+
+  @override
+  void dispose() {
+    _messageController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
+    final formState = ref.watch(feedbackProvider);
+
+    if (formState.status == FeedbackFormStatus.success) {
+      return _SuccessView(
+        onReset: () {
+          ref.read(feedbackProvider.notifier).reset();
+          _messageController.clear();
+        },
+      );
+    }
+
     return Scaffold(
-      appBar: AppBar(title: const Text('Retroalimentación')),
-      body: const Center(
-        child: Text(
-          'TODO: Feedback Screen - Formulario de queja hacia la unidad',
+      backgroundColor: AppTheme.background,
+      body: CustomScrollView(
+        slivers: [
+          SliverToBoxAdapter(child: _buildPageHeader(context)),
+          SliverPadding(
+            padding: const EdgeInsets.fromLTRB(24, 24, 24, 0),
+            sliver: SliverList(
+              delegate: SliverChildListDelegate([
+                // Tipo de reporte
+                _SectionLabel('Tipo de reporte'),
+                const SizedBox(height: 10),
+                _TypeChips(
+                  selected: formState.selectedType,
+                  onSelect: (t) =>
+                      ref.read(feedbackProvider.notifier).setType(t),
+                ),
+                const SizedBox(height: 24),
+
+                // Rating
+                _SectionLabel('Calificación del servicio'),
+                const SizedBox(height: 12),
+                Center(
+                  child: _StarRating(
+                    rating: formState.rating,
+                    onRate: (r) =>
+                        ref.read(feedbackProvider.notifier).setRating(r),
+                  ),
+                ),
+                const SizedBox(height: 24),
+
+                // Unidad (sin exponer chofer)
+                _SectionLabel('Unidad involucrada'),
+                const SizedBox(height: 10),
+                const _UnitBadge(),
+                const SizedBox(height: 24),
+
+                // Mensaje libre
+                _SectionLabel('Descripción (opcional)'),
+                const SizedBox(height: 10),
+                Container(
+                  decoration: BoxDecoration(
+                    color: AppTheme.surface,
+                    borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+                    border: Border.all(color: AppTheme.border),
+                    boxShadow: AppTheme.softShadow,
+                  ),
+                  child: TextField(
+                    controller: _messageController,
+                    maxLines: 4,
+                    maxLength: 300,
+                    onChanged: (v) =>
+                        ref.read(feedbackProvider.notifier).setMessage(v),
+                    style: const TextStyle(
+                      fontSize: 14,
+                      color: AppTheme.textPrimary,
+                    ),
+                    decoration: const InputDecoration(
+                      hintText: 'Cuéntanos qué pasó...',
+                      border: InputBorder.none,
+                      contentPadding: EdgeInsets.all(14),
+                    ),
+                  ),
+                ),
+                const SizedBox(height: 12),
+
+                // Error
+                if (formState.status == FeedbackFormStatus.error)
+                  _ErrorBanner(
+                    message: formState.errorMessage ?? 'Error',
+                  ),
+
+                const SizedBox(height: 32),
+              ]),
+            ),
+          ),
+        ],
+      ),
+      bottomNavigationBar: _buildSubmitButton(context, formState, ref),
+    );
+  }
+
+  Widget _buildPageHeader(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.fromLTRB(
+        20,
+        MediaQuery.of(context).padding.top + 12,
+        20,
+        24,
+      ),
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
+          colors: [Color(0xFF4A0E26), Color(0xFF9B1B4A)],
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+        ),
+        borderRadius: BorderRadius.only(
+          bottomLeft: Radius.circular(28),
+          bottomRight: Radius.circular(28),
+        ),
+      ),
+      child: Row(
+        children: [
+          GestureDetector(
+            onTap: () => Navigator.of(context).pop(),
+            child: Container(
+              width: 36,
+              height: 36,
+              decoration: BoxDecoration(
+                color: Colors.white.withValues(alpha: 0.15),
+                borderRadius: BorderRadius.circular(10),
+              ),
+              child: const Icon(
+                Icons.arrow_back,
+                color: Colors.white,
+                size: 20,
+              ),
+            ),
+          ),
+          const SizedBox(width: 14),
+          const Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'Buzón de retroalimentación',
+                  style: TextStyle(
+                    fontSize: 18,
+                    fontWeight: FontWeight.w700,
+                    color: Colors.white,
+                  ),
+                ),
+                SizedBox(height: 2),
+                Text(
+                  'Tu opinión mejora el servicio',
+                  style: TextStyle(fontSize: 13, color: Colors.white70),
+                ),
+              ],
+            ),
+          ),
+          Container(
+            width: 44,
+            height: 44,
+            decoration: BoxDecoration(
+              color: Colors.white.withValues(alpha: 0.15),
+              borderRadius: BorderRadius.circular(12),
+            ),
+            child: const Icon(
+              Icons.rate_review_outlined,
+              color: Colors.white,
+              size: 22,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildSubmitButton(
+    BuildContext context,
+    FeedbackFormState formState,
+    WidgetRef ref,
+  ) {
+    return SafeArea(
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(24, 12, 24, 16),
+        child: SizedBox(
+          width: double.infinity,
+          child: FilledButton(
+            onPressed: formState.status == FeedbackFormStatus.loading
+                ? null
+                : () {
+                    final addressId = ref.read(activeAddressIdProvider);
+                    final unit = ref.read(assignedUnitProvider).value;
+                    if (addressId == null) {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        const SnackBar(
+                          content: Text(
+                            'Selecciona una dirección activa antes de enviar.',
+                          ),
+                        ),
+                      );
+                      return;
+                    }
+                    if (unit == null) {
+                      ScaffoldMessenger.of(context).showSnackBar(
+                        const SnackBar(
+                          content: Text(
+                            'Tu zona aún no tiene una unidad asignada.',
+                          ),
+                        ),
+                      );
+                      return;
+                    }
+                    ref.read(feedbackProvider.notifier).submit(
+                          addressId: addressId,
+                          unitId: unit.id.toString(),
+                        );
+                  },
+            child: formState.status == FeedbackFormStatus.loading
+                ? const SizedBox(
+                    height: 18,
+                    width: 18,
+                    child: CircularProgressIndicator(
+                      strokeWidth: 2,
+                      color: Colors.white,
+                    ),
+                  )
+                : const Text('Enviar reporte'),
+          ),
         ),
       ),
     );
   }
 }
+
+// ── Chips de tipo ─────────────────────────────────────────────────────────────
+class _TypeChips extends StatelessWidget {
+  final FeedbackType selected;
+  final ValueChanged<FeedbackType> onSelect;
+  const _TypeChips({required this.selected, required this.onSelect});
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Row(
+        children: FeedbackType.values.map((t) {
+          final isSelected = t == selected;
+          return Padding(
+            padding: const EdgeInsets.only(right: 8),
+            child: ChoiceChip(
+              label: Text(t.label),
+              selected: isSelected,
+              onSelected: (_) => onSelect(t),
+              selectedColor: AppTheme.primaryLight,
+              backgroundColor: AppTheme.surface,
+              side: BorderSide(
+                color: isSelected ? AppTheme.primary : AppTheme.border,
+                width: isSelected ? 1.5 : 0.5,
+              ),
+              labelStyle: TextStyle(
+                color: isSelected ? AppTheme.primaryDark : AppTheme.textSecondary,
+                fontSize: 13,
+                fontWeight:
+                    isSelected ? FontWeight.w600 : FontWeight.normal,
+              ),
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
+            ),
+          );
+        }).toList(),
+      ),
+    );
+  }
+}
+
+// ── Stars ─────────────────────────────────────────────────────────────────────
+class _StarRating extends StatelessWidget {
+  final int rating;
+  final ValueChanged<int> onRate;
+  const _StarRating({required this.rating, required this.onRate});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: List.generate(5, (i) {
+        final filled = i < rating;
+        return GestureDetector(
+          onTap: () => onRate(i + 1),
+          child: Padding(
+            padding: const EdgeInsets.symmetric(horizontal: 6),
+            child: Icon(
+              filled ? Icons.star_rounded : Icons.star_outline_rounded,
+              size: 42,
+              color: filled ? const Color(0xFFEF9F27) : AppTheme.border,
+            ),
+          ),
+        );
+      }),
+    );
+  }
+}
+
+// ── Badge de unidad (sin exponer chofer) ──────────────────────────────────────
+class _UnitBadge extends ConsumerWidget {
+  const _UnitBadge();
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final unitAsync = ref.watch(assignedUnitProvider);
+    final unitLabel = unitAsync.when(
+      loading: () => 'Detectando unidad…',
+      error: (_, _) => 'Unidad no disponible',
+      data: (u) => u == null ? 'Sin unidad asignada' : 'Unidad ${u.id}',
+    );
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Container(
+          padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
+          decoration: BoxDecoration(
+            color: AppTheme.primaryLight,
+            borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+            border: Border.all(color: AppTheme.primaryMid),
+          ),
+          child: Row(
+            mainAxisSize: MainAxisSize.min,
+            children: [
+              const Icon(
+                Icons.local_shipping_outlined,
+                size: 18,
+                color: AppTheme.primaryDark,
+              ),
+              const SizedBox(width: 8),
+              Text(
+                unitLabel,
+                style: const TextStyle(
+                  fontSize: 13,
+                  fontWeight: FontWeight.w500,
+                  color: AppTheme.primaryDark,
+                ),
+              ),
+            ],
+          ),
+        ),
+        const SizedBox(height: 8),
+        Row(
+          children: [
+            const Icon(
+              Icons.shield_outlined,
+              size: 13,
+              color: AppTheme.textSecondary,
+            ),
+            const SizedBox(width: 4),
+            const Expanded(
+              child: Text(
+                'Solo se registra el número de unidad. El operador no es identificado.',
+                style: TextStyle(
+                  fontSize: 11,
+                  color: AppTheme.textSecondary,
+                ),
+              ),
+            ),
+          ],
+        ),
+      ],
+    );
+  }
+}
+
+// ── Error banner ──────────────────────────────────────────────────────────────
+class _ErrorBanner extends StatelessWidget {
+  final String message;
+  const _ErrorBanner({required this.message});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.all(12),
+      decoration: BoxDecoration(
+        color: AppTheme.dangerLight,
+        borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+        border: Border.all(color: AppTheme.danger.withValues(alpha: 0.3)),
+      ),
+      child: Row(
+        children: [
+          const Icon(Icons.error_outline, size: 16, color: AppTheme.danger),
+          const SizedBox(width: 8),
+          Expanded(
+            child: Text(
+              message,
+              style: const TextStyle(
+                fontSize: 12,
+                color: AppTheme.danger,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+// ── Success view ──────────────────────────────────────────────────────────────
+class _SuccessView extends StatelessWidget {
+  final VoidCallback onReset;
+  const _SuccessView({required this.onReset});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: AppTheme.background,
+      body: Column(
+        children: [
+          Container(
+            padding: EdgeInsets.fromLTRB(
+              20,
+              MediaQuery.of(context).padding.top + 12,
+              20,
+              24,
+            ),
+            decoration: const BoxDecoration(
+              gradient: LinearGradient(
+                colors: [Color(0xFF4A0E26), Color(0xFF9B1B4A)],
+                begin: Alignment.topLeft,
+                end: Alignment.bottomRight,
+              ),
+              borderRadius: BorderRadius.only(
+                bottomLeft: Radius.circular(28),
+                bottomRight: Radius.circular(28),
+              ),
+            ),
+            child: Row(
+              children: [
+                GestureDetector(
+                  onTap: () => Navigator.of(context).pop(),
+                  child: Container(
+                    width: 36,
+                    height: 36,
+                    decoration: BoxDecoration(
+                      color: Colors.white.withValues(alpha: 0.15),
+                      borderRadius: BorderRadius.circular(10),
+                    ),
+                    child: const Icon(
+                      Icons.arrow_back,
+                      color: Colors.white,
+                      size: 20,
+                    ),
+                  ),
+                ),
+                const SizedBox(width: 14),
+                const Text(
+                  'Buzón de retroalimentación',
+                  style: TextStyle(
+                    fontSize: 18,
+                    fontWeight: FontWeight.w700,
+                    color: Colors.white,
+                  ),
+                ),
+              ],
+            ),
+          ),
+          Expanded(
+            child: Center(
+              child: Padding(
+                padding: const EdgeInsets.all(32),
+                child: Column(
+                  mainAxisSize: MainAxisSize.min,
+                  children: [
+                    Container(
+                      width: 72,
+                      height: 72,
+                      decoration: const BoxDecoration(
+                        color: AppTheme.primaryLight,
+                        shape: BoxShape.circle,
+                      ),
+                      child: const Icon(
+                        Icons.check_circle_outline_rounded,
+                        size: 40,
+                        color: AppTheme.primary,
+                      ),
+                    ),
+                    const SizedBox(height: 20),
+                    const Text(
+                      'Reporte enviado',
+                      style: TextStyle(
+                        fontSize: 20,
+                        fontWeight: FontWeight.w700,
+                        color: AppTheme.textPrimary,
+                      ),
+                    ),
+                    const SizedBox(height: 10),
+                    const Text(
+                      'Gracias. Tu retroalimentación ayuda a mejorar el servicio. El reporte fue registrado de forma anónima.',
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 14,
+                        color: AppTheme.textSecondary,
+                        height: 1.5,
+                      ),
+                    ),
+                    const SizedBox(height: 28),
+                    SizedBox(
+                      width: double.infinity,
+                      child: OutlinedButton(
+                        onPressed: onReset,
+                        style: OutlinedButton.styleFrom(
+                          foregroundColor: AppTheme.primary,
+                          side: const BorderSide(color: AppTheme.primary),
+                        ),
+                        child: const Text('Enviar otro reporte'),
+                      ),
+                    ),
+                  ],
+                ),
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}
+
+// ── Helpers ───────────────────────────────────────────────────────────────────
+class _SectionLabel extends StatelessWidget {
+  final String text;
+  const _SectionLabel(this.text);
+
+  @override
+  Widget build(BuildContext context) {
+    return Text(
+      text.toUpperCase(),
+      style: const TextStyle(
+        fontSize: 11,
+        fontWeight: FontWeight.w600,
+        color: AppTheme.textSecondary,
+        letterSpacing: 0.8,
+      ),
+    );
+  }
+}
diff --git a/recolecta_app/lib/features/help/screens/help_faq_screen.dart b/recolecta_app/lib/features/help/screens/help_faq_screen.dart
index 88d6fe9..7c9b680 100644
--- a/recolecta_app/lib/features/help/screens/help_faq_screen.dart
+++ b/recolecta_app/lib/features/help/screens/help_faq_screen.dart
@@ -48,20 +48,14 @@ class _HelpFaqScreenState extends ConsumerState<HelpFaqScreen> {
 
     return Scaffold(
       backgroundColor: AppTheme.background,
-      appBar: AppBar(
-        title: const Text('Ayuda y preguntas frecuentes'),
-        actions: [
-          IconButton(
-            tooltip: 'Reiniciar conversación',
-            icon: const Icon(Icons.refresh),
-            onPressed: state.messages.isEmpty
+      body: Column(
+        children: [
+          _GradientHeader(
+            hasMessages: state.messages.isNotEmpty,
+            onReset: state.messages.isEmpty
                 ? null
                 : () => ref.read(helpChatControllerProvider.notifier).reset(),
           ),
-        ],
-      ),
-      body: Column(
-        children: [
           if (state.messages.isEmpty) _QuickQuestions(onSelect: _send),
           Expanded(
             child: state.messages.isEmpty
@@ -80,7 +74,7 @@ class _HelpFaqScreenState extends ConsumerState<HelpFaqScreen> {
             Container(
               width: double.infinity,
               padding: const EdgeInsets.all(12),
-              color: AppTheme.danger.withOpacity(0.1),
+              color: AppTheme.danger.withValues(alpha: 0.1),
               child: Text(
                 state.error!,
                 style: const TextStyle(color: AppTheme.danger, fontSize: 13),
@@ -97,20 +91,120 @@ class _HelpFaqScreenState extends ConsumerState<HelpFaqScreen> {
   }
 }
 
+class _GradientHeader extends StatelessWidget {
+  final bool hasMessages;
+  final VoidCallback? onReset;
+  const _GradientHeader({required this.hasMessages, this.onReset});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+          stops: [0.0, 0.6, 1.0],
+          colors: [Color(0xFF4A0E26), Color(0xFF6D1234), Color(0xFF9B1B4A)],
+        ),
+      ),
+      child: SafeArea(
+        bottom: false,
+        child: Padding(
+          padding: const EdgeInsets.fromLTRB(8, 4, 8, 18),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Row(
+                children: [
+                  IconButton(
+                    icon: const Icon(Icons.arrow_back_ios_new_rounded,
+                        color: Colors.white, size: 20),
+                    onPressed: () => Navigator.of(context).pop(),
+                  ),
+                  const Spacer(),
+                  if (hasMessages)
+                    IconButton(
+                      tooltip: 'Reiniciar conversación',
+                      icon: const Icon(Icons.refresh_rounded,
+                          color: Colors.white, size: 20),
+                      onPressed: onReset,
+                    ),
+                ],
+              ),
+              Padding(
+                padding: const EdgeInsets.fromLTRB(16, 4, 16, 0),
+                child: Row(
+                  children: [
+                    Container(
+                      width: 42,
+                      height: 42,
+                      decoration: BoxDecoration(
+                        color: Colors.white.withValues(alpha: 0.15),
+                        shape: BoxShape.circle,
+                      ),
+                      child: const Icon(Icons.support_agent_rounded,
+                          color: Colors.white, size: 22),
+                    ),
+                    const SizedBox(width: 14),
+                    Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        const Text(
+                          'Ayuda y soporte',
+                          style: TextStyle(
+                            fontSize: 18,
+                            fontWeight: FontWeight.w700,
+                            color: Colors.white,
+                          ),
+                        ),
+                        Text(
+                          'Pregunta lo que necesites',
+                          style: TextStyle(
+                            fontSize: 12,
+                            color: Colors.white.withValues(alpha: 0.75),
+                          ),
+                        ),
+                      ],
+                    ),
+                  ],
+                ),
+              ),
+            ],
+          ),
+        ),
+      ),
+    );
+  }
+}
+
 class _QuickQuestions extends StatelessWidget {
   final ValueChanged<String> onSelect;
   const _QuickQuestions({required this.onSelect});
 
   @override
   Widget build(BuildContext context) {
-    return Padding(
-      padding: const EdgeInsets.fromLTRB(16, 12, 16, 0),
+    return Container(
+      width: double.infinity,
+      padding: const EdgeInsets.fromLTRB(16, 12, 16, 12),
+      decoration: BoxDecoration(
+        color: Theme.of(context).colorScheme.surface,
+        border: Border(
+          bottom: BorderSide(
+              color: Theme.of(context).colorScheme.outlineVariant, width: 0.5),
+        ),
+      ),
       child: Wrap(
         spacing: 8,
         runSpacing: 8,
         children: [
           for (final q in _quickQuestions)
-            ActionChip(label: Text(q), onPressed: () => onSelect(q)),
+            ActionChip(
+              label: Text(q, style: const TextStyle(fontSize: 12)),
+              onPressed: () => onSelect(q),
+              backgroundColor: AppTheme.primaryLight,
+              side: const BorderSide(color: AppTheme.primary, width: 0.5),
+              labelStyle: const TextStyle(color: AppTheme.primaryDark),
+            ),
         ],
       ),
     );
diff --git a/recolecta_app/lib/features/home/citizen_home_screen.dart b/recolecta_app/lib/features/home/citizen_home_screen.dart
index 74a77f3..2e568ba 100644
--- a/recolecta_app/lib/features/home/citizen_home_screen.dart
+++ b/recolecta_app/lib/features/home/citizen_home_screen.dart
@@ -1,3 +1,4 @@
+import 'dart:async';
 import 'package:flutter/material.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
@@ -11,6 +12,7 @@ import '../../core/network/api_client.dart';
 import '../notifications/notification_service.dart';
 import '../../shared/widgets/prevention_banner.dart';
 import '../../shared/widgets/progress_steps.dart';
+import '../separation_guide/ai_pet_chat_screen.dart';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Modelo de resultado ETA
@@ -75,11 +77,19 @@ class _EtaResult {
 // Provider de ETA
 // ─────────────────────────────────────────────────────────────────────────────
 class _EtaNotifier extends AsyncNotifier<_EtaResult> {
+  Timer? _timer;
+
   @override
-  Future<_EtaResult> build() => _fetch();
+  Future<_EtaResult> build() {
+    // Consulta silenciosa cada 10 segundos para ver el avance en tiempo real
+    _timer?.cancel();
+    _timer = Timer.periodic(const Duration(seconds: 10), (_) => refresh());
+    ref.onDispose(() => _timer?.cancel());
+
+    return _fetch();
+  }
 
   Future<void> refresh() async {
-    state = const AsyncValue.loading();
     state = await AsyncValue.guard(_fetch);
   }
 
@@ -127,6 +137,20 @@ final etaProvider = AsyncNotifierProvider<_EtaNotifier, _EtaResult>(
 class ActiveRouteIdNotifier extends Notifier<String?> {
   @override
   String? build() => null;
+
+  void set(String? value) {
+    debugPrint('📡 [FCM] Evaluando suscripción a la ruta: $value');
+    if (state != value) {
+      final oldRoute = state;
+      state = value;
+      if (oldRoute != null) NotificationService.unsubscribeFromRoute(oldRoute);
+      if (value != null) {
+        NotificationService.subscribeToRoute(
+          value,
+        ).catchError((e) => debugPrint('❌ Error FCM: $e'));
+      }
+    }
+  }
 }
 
 final activeRouteIdProvider = NotifierProvider<ActiveRouteIdNotifier, String?>(
@@ -149,7 +173,7 @@ class _CitizenHomeScreenState extends ConsumerState<CitizenHomeScreen>
   void initState() {
     super.initState();
     WidgetsBinding.instance.addObserver(this);
-    // Refresca al recibir push FCM (RUTA_PROXIMITY, ROUTE_START, etc.)
+    // Refresca al recibir push FCM (RUTA_PROXIMITY, ROUTE_START, etc.)F
     NotificationService.onFcmMessage.addListener(_onPush);
   }
 
@@ -242,11 +266,15 @@ class _EtaContent extends StatelessWidget {
           const PreventionBanner(),
           const SizedBox(height: 12),
 
-          // ── 5. Badge de suscripción FCM ─────────────────────────────────
+          // ── 5. Banner del Chat IA (Eco) ─────────────────────────────────
+          const _EcoChatBanner(),
+          const SizedBox(height: 12),
+
+          // ── 6. Badge de suscripción FCM ─────────────────────────────────
           const _FcmStatusBadge(),
           const SizedBox(height: 16),
 
-          // ── 6. Horario semanal ──────────────────────────────────────────
+          // ── 7. Horario semanal ──────────────────────────────────────────
           AppSectionTitle(title: 'Horario del camión'),
           _HorarioCard(),
           const SizedBox(height: 24),
@@ -256,6 +284,71 @@ class _EtaContent extends StatelessWidget {
   }
 }
 
+// ─────────────────────────────────────────────────────────────────────────────
+// Banner de Eco (Chat IA)
+// ─────────────────────────────────────────────────────────────────────────────
+class _EcoChatBanner extends StatelessWidget {
+  const _EcoChatBanner();
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      onTap: () {
+        Navigator.push(
+          context,
+          MaterialPageRoute(builder: (_) => const AiPetChatScreen()),
+        );
+      },
+      child: Container(
+        padding: const EdgeInsets.all(16),
+        decoration: BoxDecoration(
+          color: AppTheme.primaryDark,
+          borderRadius: BorderRadius.circular(AppTheme.radiusLg),
+          boxShadow: AppTheme.softShadow,
+        ),
+        child: Row(
+          children: [
+            Container(
+              padding: const EdgeInsets.all(8),
+              decoration: const BoxDecoration(
+                color: Colors.white24,
+                shape: BoxShape.circle,
+              ),
+              child: const Icon(
+                Icons.delete_outline,
+                color: Colors.white,
+                size: 28,
+              ),
+            ),
+            const SizedBox(width: 16),
+            const Expanded(
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  Text(
+                    '¿Dudas sobre reciclaje?',
+                    style: TextStyle(
+                      color: Colors.white,
+                      fontSize: 15,
+                      fontWeight: FontWeight.w700,
+                    ),
+                  ),
+                  SizedBox(height: 4),
+                  Text(
+                    'Pregúntale a Eco, tu asistente inteligente',
+                    style: TextStyle(color: Colors.white70, fontSize: 13),
+                  ),
+                ],
+              ),
+            ),
+            const Icon(Icons.chevron_right, color: Colors.white),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
 // ─────────────────────────────────────────────────────────────────────────────
 // Mapa de ubicación del domicilio (no interactivo)
 // ─────────────────────────────────────────────────────────────────────────────
@@ -322,13 +415,13 @@ class _EtaHeroCard extends StatelessWidget {
     final cs = Theme.of(context).colorScheme;
     if (result.isCompleted) return cs.surfaceContainerHighest;
     if (result.isNearby) return const Color(0xFFFFF8E1); // amber-50
-    return const Color(0xFFE1F5EE); // teal-50
+    return const Color(0xFFE8D5DB); // rosa claro institucional
   }
 
   Color _accentColor(BuildContext context) {
     if (result.isCompleted) return Theme.of(context).colorScheme.outline;
-    if (result.isNearby) return const Color(0xFFBA7517); // amber-400
-    return const Color(0xFF1D9E75); // teal-400
+    if (result.isNearby) return const Color(0xFFC8A36A); // beige dorado
+    return const Color(0xFF9B1B4A); // vino principal
   }
 
   @override
@@ -606,7 +699,7 @@ class _FcmStatusBadge extends ConsumerWidget {
             width: 8,
             height: 8,
             decoration: const BoxDecoration(
-              color: Color(0xFF1D9E75),
+              color: Color(0xFF1E7A46),
               shape: BoxShape.circle,
             ),
           ),
diff --git a/recolecta_app/lib/features/home/citizen_shell.dart b/recolecta_app/lib/features/home/citizen_shell.dart
index 06aafc5..864f009 100644
--- a/recolecta_app/lib/features/home/citizen_shell.dart
+++ b/recolecta_app/lib/features/home/citizen_shell.dart
@@ -1,13 +1,95 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 
+import '../../core/theme/app_theme.dart';
 import '../../core/widgets/app_widgets.dart';
 import '../../shared/widgets/eco_floating_button.dart';
+import '../notifications/notification_service.dart';
+import '../alerts/alerts_provider.dart';
 
-class CitizenShell extends StatelessWidget {
+class CitizenShell extends ConsumerStatefulWidget {
   const CitizenShell({super.key, required this.child});
   final Widget child;
 
+  @override
+  ConsumerState<CitizenShell> createState() => _CitizenShellState();
+}
+
+class _CitizenShellState extends ConsumerState<CitizenShell> {
+  @override
+  void initState() {
+    super.initState();
+    NotificationService.onFcmMessage.addListener(_onGlobalPush);
+  }
+
+  @override
+  void dispose() {
+    NotificationService.onFcmMessage.removeListener(_onGlobalPush);
+    super.dispose();
+  }
+
+  void _onGlobalPush() {
+    final msg = NotificationService.onFcmMessage.lastMessage;
+    if (msg?.notification != null) {
+      final title = msg!.notification!.title ?? 'Nueva Alerta';
+      final body = msg.notification!.body ?? '';
+
+      // Guardamos la alerta en el historial
+      ref.read(alertsProvider.notifier).addAlert(title, body);
+
+      // Mostramos un globo de notificación amigable dentro de la app
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            backgroundColor: AppTheme.primaryDark,
+            behavior: SnackBarBehavior.floating,
+            margin: const EdgeInsets.all(16),
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(12),
+            ),
+            duration: const Duration(seconds: 5),
+            content: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Row(
+                  children: [
+                    const Icon(
+                      Icons.notifications_active,
+                      color: Colors.white,
+                      size: 20,
+                    ),
+                    const SizedBox(width: 8),
+                    Expanded(
+                      child: Text(
+                        title,
+                        style: const TextStyle(
+                          fontWeight: FontWeight.bold,
+                          color: Colors.white,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+                const SizedBox(height: 4),
+                Text(
+                  body,
+                  style: const TextStyle(color: Colors.white70, fontSize: 13),
+                ),
+              ],
+            ),
+            action: SnackBarAction(
+              label: 'VER',
+              textColor: AppTheme.primaryLight,
+              onPressed: () => context.go('/alerts'),
+            ),
+          ),
+        );
+      }
+    }
+  }
+
   int _currentIndex(BuildContext context) {
     final location = GoRouterState.of(context).matchedLocation;
     if (location.startsWith('/alerts')) return 1;
@@ -32,7 +114,7 @@ class CitizenShell extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      body: child,
+      body: widget.child,
       floatingActionButton: const EcoFloatingButton(),
       bottomNavigationBar: AppBottomNav(
         currentIndex: _currentIndex(context),
diff --git a/recolecta_app/lib/features/home/house_screen.dart b/recolecta_app/lib/features/home/house_screen.dart
index af9de52..bcd9482 100644
--- a/recolecta_app/lib/features/home/house_screen.dart
+++ b/recolecta_app/lib/features/home/house_screen.dart
@@ -75,95 +75,170 @@ class _MyHouseScreenState extends State<MyHouseScreen> {
     if (_casa == null) {
       return Scaffold(
         backgroundColor: AppTheme.background,
-        appBar: AppBar(title: const Text('Mi casa')),
-        body: const Center(child: Text('No tienes un domicilio registrado.')),
+        body: Column(
+          children: [
+            _buildPageHeader(context, showEdit: false),
+            const Expanded(
+              child: Center(
+                child: Text(
+                  'No tienes un domicilio registrado.',
+                  style: TextStyle(fontSize: 15, color: AppTheme.textSecondary),
+                ),
+              ),
+            ),
+            _buildAddressButton(context),
+          ],
+        ),
       );
     }
 
     return Scaffold(
       backgroundColor: AppTheme.background,
-      appBar: AppBar(
-        title: const Text('Mi casa'),
-        actions: [
-          IconButton(
-            icon: const Icon(Icons.edit_outlined),
-            onPressed: () => _mostrarEditarDireccion(context),
-            tooltip: 'Editar dirección',
+      body: CustomScrollView(
+        slivers: [
+          SliverToBoxAdapter(child: _buildPageHeader(context, showEdit: true)),
+          SliverPadding(
+            padding: const EdgeInsets.fromLTRB(24, 24, 24, 0),
+            sliver: SliverList(
+              delegate: SliverChildListDelegate([
+                const AppSectionTitle(title: 'Domicilio registrado'),
+                _CasaCard(casa: _casa!),
+                const SizedBox(height: 20),
+                const AppSectionTitle(title: 'Mapa del Sector (Restringido)'),
+                _MapaColoniaRestringido(
+                  colonia: _casa!.colonia,
+                  lat: _casa!.lat,
+                  lng: _casa!.lng,
+                ),
+                const SizedBox(height: 20),
+                const AppSectionTitle(title: 'Radio de alerta'),
+                _RadioAlertaCard(
+                  radioActual: _casa!.radioAlertaMetros,
+                  onChanged: (v) => setState(
+                    () => _casa = _casa!.copyWith(radioAlertaMetros: v),
+                  ),
+                ),
+                const SizedBox(height: 20),
+                const AppSectionTitle(title: 'Notificaciones'),
+                _NotificacionesCard(
+                  casa: _casa!,
+                  onAlertaCercanaChanged: (v) =>
+                      setState(() => _casa = _casa!.copyWith(alertaCercana: v)),
+                  onAlertaMediaChanged: (v) =>
+                      setState(() => _casa = _casa!.copyWith(alertaMedia: v)),
+                  onRecordatorioChanged: (v) => setState(
+                    () => _casa = _casa!.copyWith(recordatorioDiario: v),
+                  ),
+                ),
+                const SizedBox(height: 20),
+                const AppSectionTitle(title: 'Horario del camión'),
+                _HorarioCard(),
+                const SizedBox(height: 24),
+              ]),
+            ),
           ),
+          SliverToBoxAdapter(child: _buildAddressButton(context)),
         ],
       ),
-      body: ListView(
-        padding: const EdgeInsets.all(16),
+    );
+  }
+
+  Widget _buildPageHeader(BuildContext context, {required bool showEdit}) {
+    return Container(
+      padding: EdgeInsets.fromLTRB(
+        20,
+        MediaQuery.of(context).padding.top + 12,
+        20,
+        24,
+      ),
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
+          colors: [Color(0xFF4A0E26), Color(0xFF9B1B4A)],
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+        ),
+        borderRadius: BorderRadius.only(
+          bottomLeft: Radius.circular(28),
+          bottomRight: Radius.circular(28),
+        ),
+      ),
+      child: Row(
         children: [
-          _CasaCard(casa: _casa!),
-          const SizedBox(height: 16),
-          const AppSectionTitle(title: 'Mapa del Sector (Restringido)'),
-          _MapaColoniaRestringido(
-            colonia: _casa!.colonia,
-            lat: _casa!.lat,
-            lng: _casa!.lng,
+          Container(
+            width: 44,
+            height: 44,
+            decoration: BoxDecoration(
+              color: Colors.white.withValues(alpha: 0.15),
+              borderRadius: BorderRadius.circular(12),
+            ),
+            child: const Icon(
+              Icons.home_outlined,
+              color: Colors.white,
+              size: 24,
+            ),
           ),
-          const SizedBox(height: 16),
-          const AppSectionTitle(title: 'Radio de alerta'),
-          _RadioAlertaCard(
-            radioActual: _casa!.radioAlertaMetros,
-            onChanged: (v) =>
-                setState(() => _casa = _casa!.copyWith(radioAlertaMetros: v)),
+          const SizedBox(width: 14),
+          const Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'Mi Casa',
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.w700,
+                    color: Colors.white,
+                  ),
+                ),
+                SizedBox(height: 2),
+                Text(
+                  'Domicilio registrado',
+                  style: TextStyle(fontSize: 13, color: Colors.white70),
+                ),
+              ],
+            ),
           ),
-          const SizedBox(height: 16),
-          const AppSectionTitle(title: 'Notificaciones'),
-          _NotificacionesCard(
-            casa: _casa!,
-            onAlertaCercanaChanged: (v) =>
-                setState(() => _casa = _casa!.copyWith(alertaCercana: v)),
-            onAlertaMediaChanged: (v) =>
-                setState(() => _casa = _casa!.copyWith(alertaMedia: v)),
-            onRecordatorioChanged: (v) =>
-                setState(() => _casa = _casa!.copyWith(recordatorioDiario: v)),
-          ),
-          const SizedBox(height: 16),
-          const AppSectionTitle(title: 'Horario del camión'),
-          _HorarioCard(),
-          const SizedBox(height: 16),
-          GestureDetector(
-            onTap: () async {
+          if (showEdit)
+            GestureDetector(
+              onTap: () => _mostrarEditarDireccion(context),
+              child: Container(
+                width: 36,
+                height: 36,
+                decoration: BoxDecoration(
+                  color: Colors.white.withValues(alpha: 0.15),
+                  borderRadius: BorderRadius.circular(10),
+                ),
+                child: const Icon(
+                  Icons.edit_outlined,
+                  color: Colors.white,
+                  size: 18,
+                ),
+              ),
+            ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildAddressButton(BuildContext context) {
+    return SafeArea(
+      top: false,
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(24, 12, 24, 96),
+        child: SizedBox(
+          width: double.infinity,
+          child: ElevatedButton.icon(
+            onPressed: () async {
               final added = await context.push<bool>('/add-address');
               if (added == true && mounted) {
                 setState(() => _isLoading = true);
                 _cargarDomicilio();
               }
             },
-            child: Container(
-              padding: const EdgeInsets.all(16),
-              decoration: BoxDecoration(
-                color: AppTheme.surface,
-                borderRadius: BorderRadius.circular(AppTheme.radiusLg),
-                border: Border.all(color: AppTheme.primaryMid),
-                boxShadow: AppTheme.softShadow,
-              ),
-              child: const Row(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Icon(
-                    Icons.add_home_outlined,
-                    color: AppTheme.primary,
-                    size: 20,
-                  ),
-                  SizedBox(width: 8),
-                  Text(
-                    'Agregar otra dirección',
-                    style: TextStyle(
-                      fontSize: 14,
-                      fontWeight: FontWeight.w500,
-                      color: AppTheme.primary,
-                    ),
-                  ),
-                ],
-              ),
-            ),
+            icon: const Icon(Icons.add_home_outlined, size: 20),
+            label: const Text('Agregar otra dirección'),
           ),
-          const SizedBox(height: 24),
-        ],
+        ),
       ),
     );
   }
@@ -191,64 +266,82 @@ class _CasaCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Container(
-      padding: const EdgeInsets.all(16),
       decoration: BoxDecoration(
         color: AppTheme.surface,
         borderRadius: BorderRadius.circular(AppTheme.radiusLg),
-        border: Border.all(color: AppTheme.primaryMid, width: 0.8),
+        border: Border.all(color: AppTheme.border, width: 0.5),
         boxShadow: AppTheme.softShadow,
       ),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Row(
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(AppTheme.radiusLg - 0.5),
+        child: IntrinsicHeight(
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
             children: [
-              Container(
-                width: 44,
-                height: 44,
-                decoration: BoxDecoration(
-                  color: AppTheme.primaryLight,
-                  borderRadius: BorderRadius.circular(12),
-                ),
-                child: const Icon(
-                  Icons.home_outlined,
-                  color: AppTheme.primary,
-                  size: 24,
-                ),
-              ),
-              const SizedBox(width: 12),
+              Container(width: 3, color: AppTheme.primary),
               Expanded(
-                child: Column(
-                  crossAxisAlignment: CrossAxisAlignment.start,
-                  children: [
-                    Text(
-                      casa.alias,
-                      style: const TextStyle(
-                        fontSize: 15,
-                        fontWeight: FontWeight.w600,
-                        color: AppTheme.textPrimary,
+                child: Padding(
+                  padding: const EdgeInsets.all(16),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Row(
+                        children: [
+                          Container(
+                            width: 44,
+                            height: 44,
+                            decoration: BoxDecoration(
+                              color: AppTheme.primaryLight,
+                              borderRadius: BorderRadius.circular(12),
+                            ),
+                            child: const Icon(
+                              Icons.home_outlined,
+                              color: AppTheme.primary,
+                              size: 24,
+                            ),
+                          ),
+                          const SizedBox(width: 12),
+                          Expanded(
+                            child: Column(
+                              crossAxisAlignment: CrossAxisAlignment.start,
+                              children: [
+                                Text(
+                                  casa.alias,
+                                  style: const TextStyle(
+                                    fontSize: 15,
+                                    fontWeight: FontWeight.w600,
+                                    color: AppTheme.textPrimary,
+                                  ),
+                                ),
+                                const SizedBox(height: 4),
+                                AppStatusBadge.green(
+                                  casa.activa ? 'Activa' : 'Inactiva',
+                                ),
+                              ],
+                            ),
+                          ),
+                        ],
                       ),
-                    ),
-                    const SizedBox(height: 4),
-                    AppStatusBadge.green(casa.activa ? 'Activa' : 'Inactiva'),
-                  ],
+                      const SizedBox(height: 14),
+                      const Divider(color: AppTheme.borderLight),
+                      const SizedBox(height: 10),
+                      _DetailRow(
+                        icon: Icons.location_on_outlined,
+                        text: casa.direccionCompleta,
+                      ),
+                      const SizedBox(height: 8),
+                      _DetailRow(
+                        icon: Icons.radar_outlined,
+                        text:
+                            'Alerta a ${casa.radioAlertaMetros} m de distancia',
+                      ),
+                    ],
+                  ),
                 ),
               ),
             ],
           ),
-          const SizedBox(height: 14),
-          const Divider(color: AppTheme.borderLight),
-          const SizedBox(height: 10),
-          _DetailRow(
-            icon: Icons.location_on_outlined,
-            text: casa.direccionCompleta,
-          ),
-          const SizedBox(height: 8),
-          _DetailRow(
-            icon: Icons.radar_outlined,
-            text: 'Alerta a ${casa.radioAlertaMetros} m de distancia',
-          ),
-        ],
+        ),
       ),
     );
   }
@@ -263,14 +356,16 @@ class _MapaColoniaRestringido extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final center = kColoniaCenter(colonia);
+    final center =
+        kColoniasCoordinates[colonia] ?? const LatLng(20.5222, -100.8123);
     final pin = (lat != null && lng != null) ? LatLng(lat!, lng!) : center;
 
     return Container(
-      height: 200,
+      height: 220,
       decoration: BoxDecoration(
         borderRadius: BorderRadius.circular(AppTheme.radiusLg),
         border: Border.all(color: AppTheme.border, width: 1),
+        boxShadow: AppTheme.softShadow,
       ),
       clipBehavior: Clip.hardEdge,
       child: FlutterMap(
diff --git a/recolecta_app/lib/features/home/main_shell.dart b/recolecta_app/lib/features/home/main_shell.dart
index e166d49..40c96a6 100644
--- a/recolecta_app/lib/features/home/main_shell.dart
+++ b/recolecta_app/lib/features/home/main_shell.dart
@@ -1,18 +1,23 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_riverpod/flutter_riverpod.dart';
+
+import '../../core/theme/app_theme.dart';
 import '../../core/widgets/app_widgets.dart';
+import '../notifications/notification_service.dart';
+import '../alerts/alerts_provider.dart';
 import 'citizen_home_screen.dart';
 import '../alerts/alerts_screen.dart';
 import 'house_screen.dart';
 import '../profile/profile_screen.dart';
 
-class MainShell extends StatefulWidget {
+class MainShell extends ConsumerStatefulWidget {
   const MainShell({super.key});
 
   @override
-  State<MainShell> createState() => _MainShellState();
+  ConsumerState<MainShell> createState() => _MainShellState();
 }
 
-class _MainShellState extends State<MainShell> {
+class _MainShellState extends ConsumerState<MainShell> {
   int _currentIndex = 0;
 
   static const List<Widget> _screens = [
@@ -22,6 +27,77 @@ class _MainShellState extends State<MainShell> {
     ProfileScreen(),
   ];
 
+  @override
+  void initState() {
+    super.initState();
+    NotificationService.onFcmMessage.addListener(_onGlobalPush);
+  }
+
+  @override
+  void dispose() {
+    NotificationService.onFcmMessage.removeListener(_onGlobalPush);
+    super.dispose();
+  }
+
+  void _onGlobalPush() {
+    final msg = NotificationService.onFcmMessage.lastMessage;
+    if (msg?.notification != null) {
+      final title = msg!.notification!.title ?? 'Nueva Alerta';
+      final body = msg.notification!.body ?? '';
+
+      ref.read(alertsProvider.notifier).addAlert(title, body);
+
+      if (mounted) {
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            backgroundColor: AppTheme.primaryDark,
+            behavior: SnackBarBehavior.floating,
+            margin: const EdgeInsets.all(16),
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(12),
+            ),
+            duration: const Duration(seconds: 5),
+            content: Column(
+              mainAxisSize: MainAxisSize.min,
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Row(
+                  children: [
+                    const Icon(
+                      Icons.notifications_active,
+                      color: Colors.white,
+                      size: 20,
+                    ),
+                    const SizedBox(width: 8),
+                    Expanded(
+                      child: Text(
+                        title,
+                        style: const TextStyle(
+                          fontWeight: FontWeight.bold,
+                          color: Colors.white,
+                        ),
+                      ),
+                    ),
+                  ],
+                ),
+                const SizedBox(height: 4),
+                Text(
+                  body,
+                  style: const TextStyle(color: Colors.white70, fontSize: 13),
+                ),
+              ],
+            ),
+            action: SnackBarAction(
+              label: 'VER',
+              textColor: AppTheme.primaryLight,
+              onPressed: () => setState(() => _currentIndex = 1),
+            ),
+          ),
+        );
+      }
+    }
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
diff --git a/recolecta_app/lib/features/incidents/data/incident_service.dart b/recolecta_app/lib/features/incidents/data/incident_service.dart
index 2d4f836..820e9cc 100644
--- a/recolecta_app/lib/features/incidents/data/incident_service.dart
+++ b/recolecta_app/lib/features/incidents/data/incident_service.dart
@@ -16,13 +16,38 @@ class IncidentService {
   final Dio _dio;
 
   Future<List<UnitOption>> listUnits() async {
-    final res = await _dio.get<List<dynamic>>('/incidents/units');
+    final res = await _dio.get<List<dynamic>>(
+      '/incidents/units',
+      options: Options(
+        receiveTimeout: const Duration(seconds: 6),
+        sendTimeout: const Duration(seconds: 6),
+      ),
+    );
     return (res.data ?? [])
         .whereType<Map>()
         .map((e) => UnitOption.fromJson(Map<String, dynamic>.from(e)))
         .toList();
   }
 
+  /// Devuelve la unidad asignada al domicilio (vía su ruta).
+  /// `null` si el backend responde 404 (sin ruta o sin unidad).
+  Future<UnitOption?> getAddressUnit(String addressId) async {
+    try {
+      final res = await _dio.get<Map<String, dynamic>>(
+        '/addresses/$addressId/unit',
+        options: Options(
+          receiveTimeout: const Duration(seconds: 6),
+          sendTimeout: const Duration(seconds: 6),
+        ),
+      );
+      if (res.data == null) return null;
+      return UnitOption.fromJson(res.data!);
+    } on DioException catch (e) {
+      if (e.response?.statusCode == 404) return null;
+      rethrow;
+    }
+  }
+
   Future<IncidentReport> createIncident({
     required String category,
     required String description,
diff --git a/recolecta_app/lib/features/incidents/providers/incident_providers.dart b/recolecta_app/lib/features/incidents/providers/incident_providers.dart
index ac3126b..a89fcc2 100644
--- a/recolecta_app/lib/features/incidents/providers/incident_providers.dart
+++ b/recolecta_app/lib/features/incidents/providers/incident_providers.dart
@@ -1,5 +1,6 @@
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
+import '../../eta/eta_provider.dart';
 import '../data/incident_service.dart';
 import '../models/incident.dart';
 
@@ -10,3 +11,13 @@ final unitsProvider = FutureProvider<List<UnitOption>>((ref) async {
 final myIncidentsProvider = FutureProvider<List<IncidentReport>>((ref) async {
   return ref.read(incidentServiceProvider).myIncidents();
 });
+
+/// Unidad asignada al domicilio activo del ciudadano.
+/// Se deriva en backend a partir de `addresses.route_id → routes.truck_id`.
+/// Devuelve `null` si el ciudadano aún no tiene una dirección activa
+/// o si su ruta no tiene unidad asignada.
+final assignedUnitProvider = FutureProvider<UnitOption?>((ref) async {
+  final addressId = ref.watch(activeAddressIdProvider);
+  if (addressId == null) return null;
+  return ref.read(incidentServiceProvider).getAddressUnit(addressId);
+});
diff --git a/recolecta_app/lib/features/incidents/screens/report_issue_screen.dart b/recolecta_app/lib/features/incidents/screens/report_issue_screen.dart
index 6c2b38a..5d285f8 100644
--- a/recolecta_app/lib/features/incidents/screens/report_issue_screen.dart
+++ b/recolecta_app/lib/features/incidents/screens/report_issue_screen.dart
@@ -22,7 +22,6 @@ class _ReportIssueScreenState extends ConsumerState<ReportIssueScreen> {
   final _formKey = GlobalKey<FormState>();
   final _descCtrl = TextEditingController();
 
-  int? _unitId;
   String _category = 'no_recoleccion';
   File? _photo;
   bool _submitting = false;
@@ -49,12 +48,13 @@ class _ReportIssueScreenState extends ConsumerState<ReportIssueScreen> {
     if (!(_formKey.currentState?.validate() ?? false)) return;
     setState(() => _submitting = true);
     try {
+      final assignedUnit = ref.read(assignedUnitProvider).value;
       await ref
           .read(incidentServiceProvider)
           .createIncident(
             category: _category,
             description: _descCtrl.text.trim(),
-            unitId: _unitId,
+            unitId: assignedUnit?.id,
             photo: _photo,
           );
       ref.invalidate(myIncidentsProvider);
@@ -76,169 +76,357 @@ class _ReportIssueScreenState extends ConsumerState<ReportIssueScreen> {
   String _friendly(Object e) {
     if (e is DioException) {
       final data = e.response?.data;
-      if (data is Map && data['detail'] != null)
+      if (data is Map && data['detail'] != null) {
         return data['detail'].toString();
+      }
     }
     return 'No se pudo enviar el reporte';
   }
 
   @override
   Widget build(BuildContext context) {
-    final unitsAsync = ref.watch(unitsProvider);
+    final assignedUnitAsync = ref.watch(assignedUnitProvider);
 
     return Scaffold(
       backgroundColor: AppTheme.background,
-      appBar: AppBar(title: const Text('Reportar un problema')),
-      body: SingleChildScrollView(
-        padding: const EdgeInsets.all(16),
-        child: Form(
-          key: _formKey,
-          child: AppCard(
+      body: Form(
+        key: _formKey,
+        child: CustomScrollView(
+          slivers: [
+            SliverToBoxAdapter(child: _buildPageHeader(context)),
+            SliverPadding(
+              padding: const EdgeInsets.fromLTRB(24, 24, 24, 0),
+              sliver: SliverList(
+                delegate: SliverChildListDelegate([
+                  const AppSectionTitle(title: 'Detalles del reporte'),
+                  AppFormCard(
+                    icon: Icons.local_shipping_outlined,
+                    title: 'Unidad asignada a tu zona',
+                    child: _AssignedUnitBadge(
+                      assignedUnitAsync: assignedUnitAsync,
+                    ),
+                  ),
+                  const SizedBox(height: 16),
+                  AppFormCard(
+                    icon: Icons.category_outlined,
+                    title: 'Categoría del problema',
+                    child: DropdownButtonFormField<String>(
+                      initialValue: _category,
+                      isExpanded: true,
+                      decoration: const InputDecoration(
+                        border: OutlineInputBorder(),
+                        contentPadding: EdgeInsets.symmetric(
+                          horizontal: 12,
+                          vertical: 10,
+                        ),
+                      ),
+                      items: [
+                        for (final entry in incidentCategories.entries)
+                          DropdownMenuItem<String>(
+                            value: entry.key,
+                            child: Text(entry.value),
+                          ),
+                      ],
+                      onChanged: (v) {
+                        if (v != null) setState(() => _category = v);
+                      },
+                      validator: (v) => (v == null || v.isEmpty)
+                          ? 'Selecciona una categoría'
+                          : null,
+                    ),
+                  ),
+                  const SizedBox(height: 16),
+                  AppFormCard(
+                    icon: Icons.description_outlined,
+                    title: 'Descripción',
+                    child: AppFormField(
+                      label: 'Cuéntanos qué pasó',
+                      controller: _descCtrl,
+                      hint: 'Cuéntanos qué pasó…',
+                      maxLines: 5,
+                      keyboardType: TextInputType.multiline,
+                      validator: (v) {
+                        final t = (v ?? '').trim();
+                        if (t.length < 3) {
+                          return 'Describe el problema (mínimo 3 caracteres)';
+                        }
+                        return null;
+                      },
+                    ),
+                  ),
+                  const SizedBox(height: 16),
+                  AppFormCard(
+                    icon: Icons.photo_camera_outlined,
+                    title: 'Evidencia fotográfica',
+                    child: Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        Row(
+                          children: [
+                            Expanded(
+                              child: OutlinedButton.icon(
+                                onPressed: _submitting ? null : _pickPhoto,
+                                style: OutlinedButton.styleFrom(
+                                  foregroundColor: AppTheme.primary,
+                                  side: const BorderSide(
+                                    color: AppTheme.primary,
+                                  ),
+                                ),
+                                icon: const Icon(Icons.photo_camera_outlined),
+                                label: Text(
+                                  _photo == null
+                                      ? 'Adjuntar foto'
+                                      : 'Cambiar foto',
+                                ),
+                              ),
+                            ),
+                            if (_photo != null) ...[
+                              const SizedBox(width: 8),
+                              IconButton(
+                                tooltip: 'Quitar foto',
+                                icon: const Icon(
+                                  Icons.close,
+                                  color: AppTheme.danger,
+                                ),
+                                onPressed: _submitting
+                                    ? null
+                                    : () => setState(() => _photo = null),
+                              ),
+                            ],
+                          ],
+                        ),
+                        if (_photo != null) ...[
+                          const SizedBox(height: 12),
+                          ClipRRect(
+                            borderRadius:
+                                BorderRadius.circular(AppTheme.radiusMd),
+                            child: Image.file(
+                              _photo!,
+                              height: 180,
+                              width: double.infinity,
+                              fit: BoxFit.cover,
+                            ),
+                          ),
+                        ],
+                      ],
+                    ),
+                  ),
+                  const SizedBox(height: 32),
+                ]),
+              ),
+            ),
+          ],
+        ),
+      ),
+      bottomNavigationBar: _buildSubmitButton(),
+    );
+  }
+
+  Widget _buildPageHeader(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.fromLTRB(
+        20,
+        MediaQuery.of(context).padding.top + 12,
+        20,
+        24,
+      ),
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
+          colors: [Color(0xFF4A0E26), Color(0xFF9B1B4A)],
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+        ),
+        borderRadius: BorderRadius.only(
+          bottomLeft: Radius.circular(28),
+          bottomRight: Radius.circular(28),
+        ),
+      ),
+      child: Row(
+        children: [
+          GestureDetector(
+            onTap: () => Navigator.of(context).pop(),
+            child: Container(
+              width: 36,
+              height: 36,
+              decoration: BoxDecoration(
+                color: Colors.white.withValues(alpha: 0.15),
+                borderRadius: BorderRadius.circular(10),
+              ),
+              child: const Icon(
+                Icons.arrow_back,
+                color: Colors.white,
+                size: 20,
+              ),
+            ),
+          ),
+          const SizedBox(width: 14),
+          const Expanded(
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                const AppSectionTitle(title: 'Detalles del reporte'),
-
-                // Unidad
                 Text(
-                  'Unidad relacionada (opcional)',
-                  style: const TextStyle(
-                    fontSize: 12,
-                    fontWeight: FontWeight.w500,
-                    color: AppTheme.textSecondary,
+                  'Reportar un problema',
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.w700,
+                    color: Colors.white,
                   ),
                 ),
-                const SizedBox(height: 6),
-                unitsAsync.when(
-                  loading: () => const LinearProgressIndicator(),
-                  error: (e, _) => Text(
-                    'No se pudieron cargar las unidades',
-                    style: const TextStyle(
-                      color: AppTheme.danger,
-                      fontSize: 12,
-                    ),
-                  ),
-                  data: (units) => DropdownButtonFormField<int?>(
-                    initialValue: _unitId,
-                    isExpanded: true,
-                    items: [
-                      const DropdownMenuItem<int?>(
-                        value: null,
-                        child: Text('Sin unidad'),
-                      ),
-                      for (final u in units)
-                        DropdownMenuItem<int?>(
-                          value: u.id,
-                          child: Text(u.label),
-                        ),
-                    ],
-                    onChanged: (v) => setState(() => _unitId = v),
-                  ),
-                ),
-
-                const SizedBox(height: 16),
-
-                // Categoría
+                SizedBox(height: 2),
                 Text(
-                  'Categoría',
-                  style: const TextStyle(
-                    fontSize: 12,
-                    fontWeight: FontWeight.w500,
-                    color: AppTheme.textSecondary,
-                  ),
-                ),
-                const SizedBox(height: 6),
-                DropdownButtonFormField<String>(
-                  initialValue: _category,
-                  isExpanded: true,
-                  items: [
-                    for (final entry in incidentCategories.entries)
-                      DropdownMenuItem<String>(
-                        value: entry.key,
-                        child: Text(entry.value),
-                      ),
-                  ],
-                  onChanged: (v) {
-                    if (v != null) setState(() => _category = v);
-                  },
-                  validator: (v) => (v == null || v.isEmpty)
-                      ? 'Selecciona una categoría'
-                      : null,
-                ),
-
-                const SizedBox(height: 16),
-
-                AppFormField(
-                  label: 'Descripción',
-                  controller: _descCtrl,
-                  hint: 'Cuéntanos qué pasó…',
-                  maxLines: 5,
-                  keyboardType: TextInputType.multiline,
-                  validator: (v) {
-                    final t = (v ?? '').trim();
-                    if (t.length < 3)
-                      return 'Describe el problema (mínimo 3 caracteres)';
-                    return null;
-                  },
-                ),
-
-                const SizedBox(height: 16),
-
-                // Foto
-                Row(
-                  children: [
-                    OutlinedButton.icon(
-                      onPressed: _submitting ? null : _pickPhoto,
-                      icon: const Icon(Icons.photo_camera_outlined),
-                      label: Text(
-                        _photo == null ? 'Adjuntar foto' : 'Cambiar foto',
-                      ),
-                    ),
-                    if (_photo != null) ...[
-                      const SizedBox(width: 8),
-                      IconButton(
-                        tooltip: 'Quitar foto',
-                        icon: const Icon(Icons.close, color: AppTheme.danger),
-                        onPressed: _submitting
-                            ? null
-                            : () => setState(() => _photo = null),
-                      ),
-                    ],
-                  ],
-                ),
-                if (_photo != null) ...[
-                  const SizedBox(height: 12),
-                  ClipRRect(
-                    borderRadius: BorderRadius.circular(AppTheme.radiusLg),
-                    child: Image.file(
-                      _photo!,
-                      height: 180,
-                      width: double.infinity,
-                      fit: BoxFit.cover,
-                    ),
-                  ),
-                ],
-
-                const SizedBox(height: 20),
-
-                SizedBox(
-                  width: double.infinity,
-                  child: ElevatedButton(
-                    onPressed: _submitting ? null : _submit,
-                    child: _submitting
-                        ? const SizedBox(
-                            height: 18,
-                            width: 18,
-                            child: CircularProgressIndicator(strokeWidth: 2),
-                          )
-                        : const Text('Enviar reporte'),
-                  ),
+                  'Ayúdanos a mejorar el servicio',
+                  style: TextStyle(fontSize: 13, color: Colors.white70),
                 ),
               ],
             ),
           ),
+          Container(
+            width: 44,
+            height: 44,
+            decoration: BoxDecoration(
+              color: Colors.white.withValues(alpha: 0.15),
+              borderRadius: BorderRadius.circular(12),
+            ),
+            child: const Icon(
+              Icons.bug_report_outlined,
+              color: Colors.white,
+              size: 22,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildSubmitButton() {
+    return SafeArea(
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(24, 12, 24, 16),
+        child: SizedBox(
+          width: double.infinity,
+          child: ElevatedButton(
+            onPressed: _submitting ? null : _submit,
+            child: _submitting
+                ? const SizedBox(
+                    height: 18,
+                    width: 18,
+                    child: CircularProgressIndicator(
+                      strokeWidth: 2,
+                      color: Colors.white,
+                    ),
+                  )
+                : const Text('Enviar reporte'),
+          ),
         ),
       ),
     );
   }
 }
+
+class _AssignedUnitBadge extends StatelessWidget {
+  const _AssignedUnitBadge({required this.assignedUnitAsync});
+
+  final AsyncValue<UnitOption?> assignedUnitAsync;
+
+  @override
+  Widget build(BuildContext context) {
+    return assignedUnitAsync.when(
+      loading: () => Container(
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+        decoration: BoxDecoration(
+          color: AppTheme.background,
+          borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+          border: Border.all(color: AppTheme.border),
+        ),
+        child: const Row(
+          children: [
+            SizedBox(
+              height: 14,
+              width: 14,
+              child: CircularProgressIndicator(strokeWidth: 2),
+            ),
+            SizedBox(width: 10),
+            Text(
+              'Detectando unidad asignada…',
+              style: TextStyle(fontSize: 13),
+            ),
+          ],
+        ),
+      ),
+      error: (_, _) => Container(
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+        decoration: BoxDecoration(
+          color: AppTheme.dangerLight,
+          borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+          border: Border.all(color: AppTheme.danger.withValues(alpha: 0.3)),
+        ),
+        child: const Row(
+          children: [
+            Icon(Icons.error_outline, size: 16, color: AppTheme.danger),
+            SizedBox(width: 8),
+            Expanded(
+              child: Text(
+                'No se pudo obtener la unidad asignada. El reporte se enviará sin unidad.',
+                style: TextStyle(fontSize: 12, color: AppTheme.danger),
+              ),
+            ),
+          ],
+        ),
+      ),
+      data: (unit) {
+        if (unit == null) {
+          return Container(
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+            decoration: BoxDecoration(
+              color: AppTheme.amberLight,
+              borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+              border: Border.all(
+                color: AppTheme.amber.withValues(alpha: 0.4),
+              ),
+            ),
+            child: const Row(
+              children: [
+                Icon(Icons.info_outline, size: 16, color: AppTheme.amber),
+                SizedBox(width: 8),
+                Expanded(
+                  child: Text(
+                    'Tu zona aún no tiene una unidad asignada.',
+                    style: TextStyle(fontSize: 13, color: AppTheme.amber),
+                  ),
+                ),
+              ],
+            ),
+          );
+        }
+        return Container(
+          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+          decoration: BoxDecoration(
+            color: AppTheme.primaryLight,
+            borderRadius: BorderRadius.circular(AppTheme.radiusMd),
+            border: Border.all(color: AppTheme.primaryMid),
+          ),
+          child: Row(
+            children: [
+              const Icon(
+                Icons.local_shipping_outlined,
+                size: 18,
+                color: AppTheme.primaryDark,
+              ),
+              const SizedBox(width: 8),
+              Expanded(
+                child: Text(
+                  unit.label,
+                  style: const TextStyle(
+                    fontSize: 13,
+                    fontWeight: FontWeight.w500,
+                    color: AppTheme.primaryDark,
+                  ),
+                ),
+              ),
+            ],
+          ),
+        );
+      },
+    );
+  }
+}
diff --git a/recolecta_app/lib/features/notifications/notification_service.dart b/recolecta_app/lib/features/notifications/notification_service.dart
index 587c9ef..8f64d10 100644
--- a/recolecta_app/lib/features/notifications/notification_service.dart
+++ b/recolecta_app/lib/features/notifications/notification_service.dart
@@ -3,16 +3,20 @@
 //
 // Regla de privacidad: los payloads de push NUNCA contienen lat/lng.
 // El backend solo manda title/body desde notificaciones.json.
- 
+
 import 'package:firebase_messaging/firebase_messaging.dart';
 import 'package:flutter/foundation.dart';
+import 'package:flutter/widgets.dart';
 import 'package:flutter_local_notifications/flutter_local_notifications.dart';
- 
+import 'package:go_router/go_router.dart';
+
+import '../../core/router/app_router.dart';
+
 // Canal Android de alta prioridad para alertas de proximidad
 const _kChannelId = 'recolecta_alerts';
 const _kChannelName = 'Alertas de recolección';
 const _kChannelDesc = 'Notificaciones de llegada del camión recolector';
- 
+
 /// Notifier simple: la EtaScreen lo escucha para refrescar sin polling.
 class _FcmMessageNotifier extends ChangeNotifier {
   RemoteMessage? lastMessage;
@@ -21,26 +25,26 @@ class _FcmMessageNotifier extends ChangeNotifier {
     notifyListeners();
   }
 }
- 
+
 // Handler de background/terminated (top-level, fuera de clase)
 @pragma('vm:entry-point')
 Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
   // Solo loguear; la EtaScreen se refrescará cuando la app vuelva a foreground.
   debugPrint('[FCM background] ${message.notification?.title}');
 }
- 
+
 class NotificationService {
   NotificationService._();
- 
+
   static final _messaging = FirebaseMessaging.instance;
   static final _localNotifications = FlutterLocalNotificationsPlugin();
   static final onFcmMessage = _FcmMessageNotifier();
- 
+
   /// Inicializar una sola vez en main.dart
   static Future<void> initialize() async {
     // Registrar handler de background
     FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
- 
+
     // Solicitar permisos (iOS + Android 13+)
     final settings = await _messaging.requestPermission(
       alert: true,
@@ -48,7 +52,7 @@ class NotificationService {
       sound: true,
     );
     debugPrint('[FCM] Permission: ${settings.authorizationStatus}');
- 
+
     // Canal Android
     const androidChannel = AndroidNotificationChannel(
       _kChannelId,
@@ -58,34 +62,61 @@ class NotificationService {
     );
     await _localNotifications
         .resolvePlatformSpecificImplementation<
-            AndroidFlutterLocalNotificationsPlugin>()
+          AndroidFlutterLocalNotificationsPlugin
+        >()
         ?.createNotificationChannel(androidChannel);
- 
+
     // Inicializar flutter_local_notifications
     const initSettings = InitializationSettings(
       android: AndroidInitializationSettings('@mipmap/ic_launcher'),
       iOS: DarwinInitializationSettings(),
     );
-    await _localNotifications.initialize(initSettings);
- 
+    await _localNotifications.initialize(
+      initSettings,
+      onDidReceiveNotificationResponse: (response) {
+        // Tap del banner mostrado en foreground por flutter_local_notifications
+        _openNotificationsScreen();
+      },
+    );
+
     // Foreground: mostrar notificación local + notificar EtaScreen
     FirebaseMessaging.onMessage.listen((message) {
       _showLocalNotification(message);
       onFcmMessage.notify(message);
     });
- 
+
     // Tap en notificación cuando la app estaba en background
     FirebaseMessaging.onMessageOpenedApp.listen((message) {
       onFcmMessage.notify(message);
+      _openNotificationsScreen();
     });
- 
+
     // Verificar si la app abrió desde una notificación (terminated)
     final initial = await _messaging.getInitialMessage();
     if (initial != null) {
       onFcmMessage.notify(initial);
+      // Esperar a que el router termine de montar el árbol antes de navegar.
+      WidgetsBinding.instance.addPostFrameCallback((_) {
+        _openNotificationsScreen();
+      });
     }
   }
- 
+
+  /// Navega a `/notifications` usando el Navigator raíz. Tolerante a que
+  /// la app aún no esté montada (no hace nada en ese caso).
+  static void _openNotificationsScreen() {
+    final ctx = rootNavigatorKey.currentContext;
+    if (ctx == null) {
+      debugPrint('[FCM] tap recibido pero el navigator aún no está listo');
+      return;
+    }
+    try {
+      GoRouter.of(ctx).push('/notifications');
+    } catch (e) {
+      debugPrint('[FCM] no se pudo navegar a /notifications: $e');
+    }
+  }
+
   /// Suscribir al topic de la ruta del ciudadano.
   /// Llamar justo después de que verified = true en el domicilio.
   static Future<void> subscribeToRoute(String routeId) async {
@@ -93,18 +124,18 @@ class NotificationService {
     await _messaging.subscribeToTopic(topic);
     debugPrint('[FCM] Suscrito a $topic');
   }
- 
+
   /// Desuscribir (al cambiar de domicilio / colonia)
   static Future<void> unsubscribeFromRoute(String routeId) async {
     final topic = 'topic_$routeId';
     await _messaging.unsubscribeFromTopic(topic);
     debugPrint('[FCM] Desuscrito de $topic');
   }
- 
+
   static Future<void> _showLocalNotification(RemoteMessage message) async {
     final notification = message.notification;
     if (notification == null) return;
- 
+
     // El payload del backend es solo title+body; NUNCA contiene coordenadas.
     await _localNotifications.show(
       notification.hashCode,
@@ -127,4 +158,4 @@ class NotificationService {
       ),
     );
   }
-}
\ No newline at end of file
+}
diff --git a/recolecta_app/lib/features/notifications/notifications_screen.dart b/recolecta_app/lib/features/notifications/notifications_screen.dart
index ef7a4b3..c0cd543 100644
--- a/recolecta_app/lib/features/notifications/notifications_screen.dart
+++ b/recolecta_app/lib/features/notifications/notifications_screen.dart
@@ -74,7 +74,14 @@ class NotificationsNotifier extends Notifier<List<NotificationItem>> {
     );
     state = [item, ...state];
   }
- 
+
+  void addSimulationEvent(String title, String body, FcmEventType type) {
+    state = [
+      NotificationItem(title: title, body: body, type: type, receivedAt: DateTime.now()),
+      ...state,
+    ];
+  }
+
   void clearAll() => state = [];
 }
  
@@ -148,7 +155,7 @@ class _FcmTopicBadge extends StatelessWidget {
             width: 8,
             height: 8,
             decoration: const BoxDecoration(
-              color: Color(0xFF1D9E75),
+              color: Color(0xFF1E7A46),
               shape: BoxShape.circle,
             ),
           ),
@@ -188,7 +195,7 @@ class _PrivacyNote extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.all(12),
       decoration: BoxDecoration(
-        color: const Color(0xFFFAEEDA), // amber-50
+        color: const Color(0xFFF5EDD8), // beige dorado claro
         borderRadius: BorderRadius.circular(10),
         border: Border.all(color: const Color(0xFFFAC775)),
       ),
@@ -196,12 +203,12 @@ class _PrivacyNote extends StatelessWidget {
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
           const Icon(Icons.info_outline_rounded,
-              size: 18, color: Color(0xFFBA7517)),
+              size: 18, color: Color(0xFFC8A36A)),
           const SizedBox(width: 8),
           Expanded(
             child: Text(
               'Los mensajes no revelan la ubicación del camión. Solo se muestra el tiempo estimado de llegada.',
-              style: const TextStyle(fontSize: 12, color: Color(0xFF633806)),
+              style: const TextStyle(fontSize: 12, color: Color(0xFF7A5410)),
               maxLines: 3,
             ),
           ),
@@ -254,13 +261,13 @@ class _NotificationCard extends StatelessWidget {
   Color _accentColor() {
     switch (item.type) {
       case FcmEventType.routeStart:
-        return const Color(0xFF1D9E75);
+        return const Color(0xFF9B1B4A);
       case FcmEventType.truckProximity:
-        return const Color(0xFFBA7517);
+        return const Color(0xFFC8A36A);
       case FcmEventType.routeCompleted:
-        return Colors.grey;
+        return const Color(0xFF1E7A46);
       case FcmEventType.reassignment:
-        return const Color(0xFF378ADD);
+        return const Color(0xFF004A7C);
       default:
         return Colors.grey;
     }
@@ -279,62 +286,75 @@ class _NotificationCard extends StatelessWidget {
     final accent = _accentColor();
     return Container(
       margin: const EdgeInsets.only(bottom: 8),
-      padding: const EdgeInsets.all(12),
       decoration: BoxDecoration(
         color: Theme.of(context).colorScheme.surface,
         borderRadius: BorderRadius.circular(10),
-        border: Border(
-          left: BorderSide(color: accent, width: 3),
-          top: BorderSide(color: Theme.of(context).colorScheme.outlineVariant, width: 0.5),
-          right: BorderSide(color: Theme.of(context).colorScheme.outlineVariant, width: 0.5),
-          bottom: BorderSide(color: Theme.of(context).colorScheme.outlineVariant, width: 0.5),
+        border: Border.all(
+          color: Theme.of(context).colorScheme.outlineVariant,
+          width: 0.5,
         ),
       ),
-      child: Row(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Container(
-            width: 32,
-            height: 32,
-            decoration: BoxDecoration(
-              color: accent.withOpacity(0.1),
-              borderRadius: BorderRadius.circular(8),
-            ),
-            child: Icon(_icon, size: 16, color: accent),
+      child: ClipRRect(
+        borderRadius: BorderRadius.circular(9.5),
+        child: IntrinsicHeight(
+          child: Row(
+            crossAxisAlignment: CrossAxisAlignment.stretch,
+            children: [
+              Container(width: 3, color: accent),
+              Expanded(
+                child: Padding(
+                  padding: const EdgeInsets.all(12),
+                  child: Row(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Container(
+                        width: 32,
+                        height: 32,
+                        decoration: BoxDecoration(
+                          color: accent.withValues(alpha: 0.1),
+                          borderRadius: BorderRadius.circular(8),
+                        ),
+                        child: Icon(_icon, size: 16, color: accent),
+                      ),
+                      const SizedBox(width: 10),
+                      Expanded(
+                        child: Column(
+                          crossAxisAlignment: CrossAxisAlignment.start,
+                          children: [
+                            Text(
+                              item.title,
+                              style: const TextStyle(
+                                fontSize: 13,
+                                fontWeight: FontWeight.w500,
+                              ),
+                            ),
+                            const SizedBox(height: 2),
+                            Text(
+                              item.body,
+                              style: TextStyle(
+                                fontSize: 12,
+                                color: Theme.of(context).colorScheme.onSurfaceVariant,
+                                height: 1.4,
+                              ),
+                            ),
+                            const SizedBox(height: 4),
+                            Text(
+                              _relativeTime(),
+                              style: TextStyle(
+                                fontSize: 11,
+                                color: Theme.of(context).colorScheme.onSurfaceVariant,
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+              ),
+            ],
           ),
-          const SizedBox(width: 10),
-          Expanded(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(
-                  item.title,
-                  style: const TextStyle(
-                    fontSize: 13,
-                    fontWeight: FontWeight.w500,
-                  ),
-                ),
-                const SizedBox(height: 2),
-                Text(
-                  item.body,
-                  style: TextStyle(
-                    fontSize: 12,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                    height: 1.4,
-                  ),
-                ),
-                const SizedBox(height: 4),
-                Text(
-                  _relativeTime(),
-                  style: TextStyle(
-                    fontSize: 11,
-                    color: Theme.of(context).colorScheme.onSurfaceVariant,
-                  ),
-                ),
-              ],
-            ),
-          ),
-        ],
+        ),
       ),
     );
   }
diff --git a/recolecta_app/lib/features/profile/edit_profile_screen.dart b/recolecta_app/lib/features/profile/edit_profile_screen.dart
index e505c14..bc29a5c 100644
--- a/recolecta_app/lib/features/profile/edit_profile_screen.dart
+++ b/recolecta_app/lib/features/profile/edit_profile_screen.dart
@@ -48,7 +48,6 @@ class _EditProfileScreenState extends ConsumerState<EditProfileScreen> {
     _prefilled = true;
   }
 
-  // Normaliza un teléfono almacenado (con o sin lada/guiones) al formato 000-000-0000
   String _formatPhoneInitial(String? raw) {
     if (raw == null || raw.isEmpty) return '';
     final digits = raw.replaceAll(RegExp(r'\D'), '');
@@ -132,7 +131,6 @@ class _EditProfileScreenState extends ConsumerState<EditProfileScreen> {
 
     return Scaffold(
       backgroundColor: AppTheme.background,
-      appBar: AppBar(title: const Text('Editar perfil')),
       body: userAsync.when(
         loading: () => const Center(child: CircularProgressIndicator()),
         error: (e, _) => Center(
@@ -154,114 +152,225 @@ class _EditProfileScreenState extends ConsumerState<EditProfileScreen> {
 
           return Form(
             key: _formKey,
-            child: ListView(
-              padding: const EdgeInsets.all(16),
-              children: [
-                const AppSectionTitle(title: 'Datos personales'),
-                AppCard(
-                  child: Column(
-                    children: [
-                      AppFormField(
-                        label: 'Nombre',
-                        controller: _nameCtrl,
-                        validator: (v) => (v == null || v.trim().isEmpty)
-                            ? 'Ingresa tu nombre'
-                            : null,
-                      ),
-                      const SizedBox(height: 12),
-                      AppFormField(
-                        label: 'Correo electrónico',
-                        controller: _emailCtrl,
-                        keyboardType: TextInputType.emailAddress,
-                        validator: (v) {
-                          if (v == null || v.trim().isEmpty) return null;
-                          if (!v.contains('@')) return 'Correo inválido';
-                          return null;
-                        },
-                      ),
-                      const SizedBox(height: 12),
-                      _PhoneField(controller: _phoneCtrl),
-                    ],
-                  ),
-                ),
-                const SizedBox(height: 20),
-                const AppSectionTitle(title: 'Cambiar contraseña'),
-                AppCard(
-                  child: Column(
-                    children: [
-                      AppFormField(
-                        label: 'Contraseña actual',
-                        controller: _currentPasswordCtrl,
-                        obscureText: true,
-                        validator: (v) {
-                          if (!_wantsPasswordChange) return null;
-                          if (v == null || v.length < 6) {
-                            return 'Mínimo 6 caracteres';
-                          }
-                          return null;
-                        },
-                      ),
-                      const SizedBox(height: 12),
-                      AppFormField(
-                        label: 'Nueva contraseña',
-                        controller: _newPasswordCtrl,
-                        obscureText: true,
-                        validator: (v) {
-                          if (!_wantsPasswordChange) return null;
-                          if (v == null || v.length < 6) {
-                            return 'Mínimo 6 caracteres';
-                          }
-                          return null;
-                        },
-                      ),
-                      const SizedBox(height: 12),
-                      AppFormField(
-                        label: 'Confirmar nueva contraseña',
-                        controller: _confirmPasswordCtrl,
-                        obscureText: true,
-                        validator: (v) {
-                          if (!_wantsPasswordChange) return null;
-                          if (v == null || v.isEmpty) {
-                            return 'Confirma la contraseña';
-                          }
-                          if (v != _newPasswordCtrl.text) return 'No coincide';
-                          return null;
-                        },
-                      ),
-                      const SizedBox(height: 8),
-                      const Align(
-                        alignment: Alignment.centerLeft,
-                        child: Text(
-                          'Déjalo en blanco si no deseas cambiarla.',
-                          style: TextStyle(
-                            fontSize: 12,
-                            color: AppTheme.textSecondary,
-                          ),
+            child: CustomScrollView(
+              slivers: [
+                SliverToBoxAdapter(child: _buildPageHeader(context)),
+                SliverPadding(
+                  padding: const EdgeInsets.fromLTRB(24, 24, 24, 0),
+                  sliver: SliverList(
+                    delegate: SliverChildListDelegate([
+                      const AppSectionTitle(title: 'Datos personales'),
+                      AppFormCard(
+                        icon: Icons.person_outline,
+                        title: 'Información personal',
+                        child: Column(
+                          children: [
+                            AppFormField(
+                              label: 'Nombre',
+                              controller: _nameCtrl,
+                              validator: (v) =>
+                                  (v == null || v.trim().isEmpty)
+                                      ? 'Ingresa tu nombre'
+                                      : null,
+                            ),
+                            const SizedBox(height: 12),
+                            AppFormField(
+                              label: 'Correo electrónico',
+                              controller: _emailCtrl,
+                              keyboardType: TextInputType.emailAddress,
+                              validator: (v) {
+                                if (v == null || v.trim().isEmpty) return null;
+                                if (!v.contains('@')) return 'Correo inválido';
+                                return null;
+                              },
+                            ),
+                            const SizedBox(height: 12),
+                            _PhoneField(controller: _phoneCtrl),
+                          ],
                         ),
                       ),
-                    ],
+                      const SizedBox(height: 20),
+                      const AppSectionTitle(title: 'Cambiar contraseña'),
+                      AppFormCard(
+                        icon: Icons.lock_outline,
+                        title: 'Seguridad',
+                        child: Column(
+                          children: [
+                            AppFormField(
+                              label: 'Contraseña actual',
+                              controller: _currentPasswordCtrl,
+                              obscureText: true,
+                              validator: (v) {
+                                if (!_wantsPasswordChange) return null;
+                                if (v == null || v.length < 6) {
+                                  return 'Mínimo 6 caracteres';
+                                }
+                                return null;
+                              },
+                            ),
+                            const SizedBox(height: 12),
+                            AppFormField(
+                              label: 'Nueva contraseña',
+                              controller: _newPasswordCtrl,
+                              obscureText: true,
+                              validator: (v) {
+                                if (!_wantsPasswordChange) return null;
+                                if (v == null || v.length < 6) {
+                                  return 'Mínimo 6 caracteres';
+                                }
+                                return null;
+                              },
+                            ),
+                            const SizedBox(height: 12),
+                            AppFormField(
+                              label: 'Confirmar nueva contraseña',
+                              controller: _confirmPasswordCtrl,
+                              obscureText: true,
+                              validator: (v) {
+                                if (!_wantsPasswordChange) return null;
+                                if (v == null || v.isEmpty) {
+                                  return 'Confirma la contraseña';
+                                }
+                                if (v != _newPasswordCtrl.text) {
+                                  return 'No coincide';
+                                }
+                                return null;
+                              },
+                            ),
+                            const SizedBox(height: 8),
+                            const Align(
+                              alignment: Alignment.centerLeft,
+                              child: Text(
+                                'Déjalo en blanco si no deseas cambiarla.',
+                                style: TextStyle(
+                                  fontSize: 12,
+                                  color: AppTheme.textSecondary,
+                                ),
+                              ),
+                            ),
+                          ],
+                        ),
+                      ),
+                      const SizedBox(height: 32),
+                    ]),
                   ),
                 ),
-                const SizedBox(height: 24),
-                SizedBox(
-                  width: double.infinity,
-                  child: ElevatedButton(
-                    onPressed: _saving ? null : _save,
-                    child: _saving
-                        ? const SizedBox(
-                            height: 20,
-                            width: 20,
-                            child: CircularProgressIndicator(strokeWidth: 2),
-                          )
-                        : const Text('Guardar cambios'),
-                  ),
-                ),
-                const SizedBox(height: 24),
               ],
             ),
           );
         },
       ),
+      bottomNavigationBar: _buildSaveButton(),
+    );
+  }
+
+  Widget _buildPageHeader(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.fromLTRB(
+        20,
+        MediaQuery.of(context).padding.top + 12,
+        20,
+        24,
+      ),
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
+          colors: [Color(0xFF4A0E26), Color(0xFF9B1B4A)],
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+        ),
+        borderRadius: BorderRadius.only(
+          bottomLeft: Radius.circular(28),
+          bottomRight: Radius.circular(28),
+        ),
+      ),
+      child: Row(
+        children: [
+          GestureDetector(
+            onTap: () => Navigator.of(context).pop(),
+            child: Container(
+              width: 36,
+              height: 36,
+              decoration: BoxDecoration(
+                color: Colors.white.withValues(alpha: 0.15),
+                borderRadius: BorderRadius.circular(10),
+              ),
+              child: const Icon(
+                Icons.arrow_back,
+                color: Colors.white,
+                size: 20,
+              ),
+            ),
+          ),
+          const SizedBox(width: 16),
+          const Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Text(
+                  'Editar perfil',
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.w700,
+                    color: Colors.white,
+                  ),
+                ),
+                SizedBox(height: 2),
+                Text(
+                  'Actualiza tu información personal',
+                  style: TextStyle(
+                    fontSize: 13,
+                    color: Colors.white70,
+                  ),
+                ),
+              ],
+            ),
+          ),
+          GestureDetector(
+            onTap: _saving ? null : _save,
+            child: Container(
+              width: 36,
+              height: 36,
+              decoration: BoxDecoration(
+                color: Colors.white.withValues(alpha: 0.15),
+                borderRadius: BorderRadius.circular(10),
+              ),
+              child: _saving
+                  ? const Padding(
+                      padding: EdgeInsets.all(8),
+                      child: CircularProgressIndicator(
+                        strokeWidth: 2,
+                        color: Colors.white,
+                      ),
+                    )
+                  : const Icon(Icons.save_outlined, color: Colors.white, size: 20),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildSaveButton() {
+    return SafeArea(
+      child: Padding(
+        padding: const EdgeInsets.fromLTRB(24, 12, 24, 16),
+        child: SizedBox(
+          width: double.infinity,
+          child: ElevatedButton(
+            onPressed: _saving ? null : _save,
+            child: _saving
+                ? const SizedBox(
+                    height: 20,
+                    width: 20,
+                    child: CircularProgressIndicator(
+                      strokeWidth: 2,
+                      color: Colors.white,
+                    ),
+                  )
+                : const Text('Guardar cambios'),
+          ),
+        ),
+      ),
     );
   }
 }
@@ -369,7 +478,7 @@ class _PhoneField extends StatelessWidget {
                   ),
                 ),
                 validator: (v) {
-                  if (v == null || v.isEmpty) return null; // opcional
+                  if (v == null || v.isEmpty) return null;
                   final digits = v.replaceAll('-', '');
                   if (digits.length != 10) {
                     return 'Ingresa exactamente 10 dígitos';
diff --git a/recolecta_app/lib/features/profile/profile_screen.dart b/recolecta_app/lib/features/profile/profile_screen.dart
index d29e00e..7786955 100644
--- a/recolecta_app/lib/features/profile/profile_screen.dart
+++ b/recolecta_app/lib/features/profile/profile_screen.dart
@@ -5,7 +5,6 @@ import 'package:go_router/go_router.dart';
 import '../../core/theme/app_theme.dart';
 import '../../core/widgets/app_widgets.dart';
 import '../../core/services/auth_controller.dart';
-import '../separation_guide/ai_pet_chat_screen.dart';
 import 'models/profile_user.dart';
 import 'providers/profile_providers.dart';
 
@@ -20,91 +19,95 @@ class ProfileScreen extends ConsumerWidget {
 
     return Scaffold(
       backgroundColor: AppTheme.background,
-      appBar: AppBar(title: const Text('Mi perfil')),
       body: RefreshIndicator(
+        color: AppTheme.primary,
         onRefresh: () async {
           ref.invalidate(currentUserProvider);
           await ref.read(currentUserProvider.future);
         },
-        child: ListView(
-          padding: const EdgeInsets.all(16),
-          children: [
-            _ProfileHeader(
-              user: userAsync.asData?.value,
-              fallbackRole: authRole,
-            ),
-            const SizedBox(height: 20),
-
-            const AppSectionTitle(title: 'Mi cuenta'),
-            AppMenuTile(
-              icon: Icons.person_outline,
-              title: 'Editar perfil',
-              subtitle: 'Nombre, correo, teléfono y contraseña',
-              onTap: () => context.push('/edit-profile'),
-            ),
-            if ((userAsync.asData?.value.isAdmin ?? false) ||
-                authRole == 'admin')
-              AppMenuTile(
-                icon: Icons.admin_panel_settings_outlined,
-                title: 'Panel de administración',
-                subtitle: 'Gestiona usuarios, rutas y camiones',
-                onTap: () => context.go('/admin'),
-              ),
-
-            const SizedBox(height: 16),
-            const AppSectionTitle(title: 'Soporte'),
-            AppMenuTile(
-              icon: Icons.pets,
-              title: 'Hablar con Eco (Asistente IA)',
-              subtitle: 'Guía de separación de residuos',
-              onTap: () {
-                Navigator.push(
-                  context,
-                  MaterialPageRoute(builder: (_) => const AiPetChatScreen()),
-                );
-              },
-            ),
-            AppMenuTile(
-              icon: Icons.help_outline,
-              title: 'Ayuda y preguntas frecuentes',
-              subtitle: 'Chatea con nuestro asistente',
-              onTap: () => context.push('/help'),
-            ),
-            AppMenuTile(
-              icon: Icons.bug_report_outlined,
-              title: 'Reportar un problema',
-              subtitle: 'Reporta una unidad o incidente',
-              onTap: () => context.push('/report-issue'),
-            ),
-            AppMenuTile(
-              icon: Icons.info_outline,
-              title: 'Acerca de la app',
-              onTap: () => context.push('/about'),
-            ),
-
-            const SizedBox(height: 16),
-            AppMenuTile(
-              icon: Icons.logout_rounded,
-              title: 'Cerrar sesión',
-              iconColor: AppTheme.danger,
-              titleColor: AppTheme.danger,
-              trailing: const SizedBox.shrink(),
-              onTap: () => _confirmarCerrarSesion(context, ref),
-            ),
-
-            const SizedBox(height: 32),
-            const Center(
-              child: Text(
-                'Recolecta v1.0.0\nServicio de Limpia · Celaya, Gto.',
-                textAlign: TextAlign.center,
-                style: TextStyle(
-                  fontSize: 12,
-                  color: AppTheme.textHint,
-                  height: 1.6,
-                ),
+        child: CustomScrollView(
+          slivers: [
+            SliverToBoxAdapter(
+              child: _ProfileHeroHeader(
+                user: userAsync.asData?.value,
+                fallbackRole: authRole,
+              ),
+            ),
+            SliverPadding(
+              padding: const EdgeInsets.fromLTRB(24, 24, 24, 0),
+              sliver: SliverList(
+                delegate: SliverChildListDelegate([
+                  const AppSectionTitle(title: 'Cuenta'),
+                  AppMenuTile(
+                    icon: Icons.person_outline,
+                    title: 'Editar perfil',
+                    subtitle: 'Nombre, correo, teléfono y contraseña',
+                    onTap: () => context.push('/edit-profile'),
+                  ),
+                  if ((userAsync.asData?.value.isAdmin ?? false) ||
+                      authRole == 'admin')
+                    AppMenuTile(
+                      icon: Icons.admin_panel_settings_outlined,
+                      title: 'Panel de administración',
+                      subtitle: 'Gestiona usuarios, rutas y camiones',
+                      onTap: () => context.go('/admin'),
+                    ),
+
+                  const SizedBox(height: 16),
+                  const AppSectionTitle(title: 'Herramientas'),
+                  AppMenuTile(
+                    icon: Icons.feedback_outlined,
+                    title: 'Buzón de retroalimentación',
+                    subtitle: 'Califica el servicio de recolección',
+                    onTap: () => context.push('/feedback'),
+                  ),
+
+                  const SizedBox(height: 16),
+                  const AppSectionTitle(title: 'Soporte'),
+                  AppMenuTile(
+                    icon: Icons.help_outline,
+                    title: 'Ayuda y preguntas frecuentes',
+                    subtitle: 'Chatea con nuestro asistente',
+                    onTap: () => context.push('/help'),
+                  ),
+                  AppMenuTile(
+                    icon: Icons.bug_report_outlined,
+                    title: 'Reportar un problema',
+                    subtitle: 'Reporta una unidad o incidente',
+                    onTap: () => context.push('/report-issue'),
+                  ),
+                  AppMenuTile(
+                    icon: Icons.info_outline,
+                    title: 'Acerca de la app',
+                    onTap: () => context.push('/about'),
+                  ),
+
+                  const SizedBox(height: 16),
+                  AppMenuTile(
+                    icon: Icons.logout_rounded,
+                    title: 'Cerrar sesión',
+                    iconColor: AppTheme.danger,
+                    titleColor: AppTheme.danger,
+                    trailing: const SizedBox.shrink(),
+                    onTap: () => _confirmarCerrarSesion(context, ref),
+                  ),
+
+                  const SizedBox(height: 32),
+                  const Center(
+                    child: Text(
+                      'Recolecta v1.0.0\nServicio de Limpia · Celaya, Gto.',
+                      textAlign: TextAlign.center,
+                      style: TextStyle(
+                        fontSize: 12,
+                        color: AppTheme.textHint,
+                        height: 1.6,
+                      ),
+                    ),
+                  ),
+                  const SizedBox(height: 24),
+                ]),
               ),
             ),
-            const SizedBox(height: 24),
           ],
         ),
       ),
@@ -157,11 +160,11 @@ class ProfileScreen extends ConsumerWidget {
   }
 }
 
-// ── Encabezado ────────────────────────────────────────────────────────────────
-class _ProfileHeader extends StatelessWidget {
+// ── Hero header con gradiente ─────────────────────────────────────────────────
+class _ProfileHeroHeader extends StatelessWidget {
   final ProfileUser? user;
   final String fallbackRole;
-  const _ProfileHeader({required this.user, required this.fallbackRole});
+  const _ProfileHeroHeader({required this.user, required this.fallbackRole});
 
   @override
   Widget build(BuildContext context) {
@@ -171,66 +174,89 @@ class _ProfileHeader extends StatelessWidget {
     final initials = user?.initials ?? 'U';
     final displayName = user?.displayName ?? 'Usuario';
     final email = user?.email ?? '…';
+    final roleLabel = isAdmin
+        ? 'Administrador'
+        : isDriver
+        ? 'Chofer'
+        : 'Ciudadano';
 
     return Container(
-      padding: const EdgeInsets.all(16),
-      decoration: BoxDecoration(
-        color: AppTheme.surface,
-        borderRadius: BorderRadius.circular(AppTheme.radiusLg),
-        border: Border.all(color: AppTheme.border, width: 0.5),
-        boxShadow: AppTheme.softShadow,
+      padding: EdgeInsets.fromLTRB(
+        24,
+        MediaQuery.of(context).padding.top + 20,
+        24,
+        32,
       ),
-      child: Row(
+      decoration: const BoxDecoration(
+        gradient: LinearGradient(
+          colors: [Color(0xFF4A0E26), Color(0xFF9B1B4A)],
+          begin: Alignment.topLeft,
+          end: Alignment.bottomRight,
+        ),
+        borderRadius: BorderRadius.only(
+          bottomLeft: Radius.circular(28),
+          bottomRight: Radius.circular(28),
+        ),
+      ),
+      child: Column(
         children: [
+          // Avatar con iniciales
           Container(
-            width: 56,
-            height: 56,
+            width: 80,
+            height: 80,
             decoration: BoxDecoration(
-              color: AppTheme.primaryLight,
+              color: Colors.white.withValues(alpha: 0.15),
               shape: BoxShape.circle,
-              border: Border.all(color: AppTheme.primaryMid, width: 1.5),
+              border: Border.all(
+                color: Colors.white.withValues(alpha: 0.4),
+                width: 2,
+              ),
             ),
             child: Center(
               child: Text(
                 initials,
                 style: const TextStyle(
-                  fontSize: 20,
+                  fontSize: 28,
                   fontWeight: FontWeight.w700,
-                  color: AppTheme.primaryDark,
+                  color: Colors.white,
                 ),
               ),
             ),
           ),
-          const SizedBox(width: 14),
-          Expanded(
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.start,
-              children: [
-                Text(
-                  displayName,
-                  style: const TextStyle(
-                    fontSize: 16,
-                    fontWeight: FontWeight.w700,
-                    color: AppTheme.textPrimary,
-                  ),
-                ),
-                const SizedBox(height: 2),
-                Text(
-                  email,
-                  style: const TextStyle(
-                    fontSize: 13,
-                    color: AppTheme.textSecondary,
-                  ),
-                ),
-                const SizedBox(height: 6),
-                AppStatusBadge.green(
-                  isAdmin
-                      ? 'Administrador'
-                      : isDriver
-                      ? 'Chofer'
-                      : 'Ciudadano',
-                ),
-              ],
+          const SizedBox(height: 14),
+          Text(
+            displayName,
+            style: const TextStyle(
+              fontSize: 20,
+              fontWeight: FontWeight.w700,
+              color: Colors.white,
+            ),
+          ),
+          const SizedBox(height: 4),
+          Text(
+            email,
+            style: TextStyle(
+              fontSize: 13,
+              color: Colors.white.withValues(alpha: 0.8),
+            ),
+          ),
+          const SizedBox(height: 10),
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 5),
+            decoration: BoxDecoration(
+              color: Colors.white.withValues(alpha: 0.18),
+              borderRadius: BorderRadius.circular(AppTheme.radiusFull),
+              border: Border.all(
+                color: Colors.white.withValues(alpha: 0.3),
+              ),
+            ),
+            child: Text(
+              roleLabel,
+              style: const TextStyle(
+                fontSize: 12,
+                fontWeight: FontWeight.w600,
+                color: Colors.white,
+              ),
             ),
           ),
         ],
@@ -238,4 +264,3 @@ class _ProfileHeader extends StatelessWidget {
     );
   }
 }
-
diff --git a/recolecta_app/lib/features/splash/splash_screen.dart b/recolecta_app/lib/features/splash/splash_screen.dart
index cfb6a44..59aafae 100644
--- a/recolecta_app/lib/features/splash/splash_screen.dart
+++ b/recolecta_app/lib/features/splash/splash_screen.dart
@@ -2,6 +2,8 @@ import 'dart:math';
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
+import '../auth/widgets/video_mascot.dart';
+
 class SplashScreen extends StatefulWidget {
   const SplashScreen({super.key});
 
@@ -38,9 +40,10 @@ class _SplashScreenState extends State<SplashScreen>
       duration: const Duration(seconds: 6),
     )..repeat();
 
-    _logoScale = Tween<double>(begin: 0.2, end: 1.0).animate(
-      CurvedAnimation(parent: _logoCtrl, curve: Curves.elasticOut),
-    );
+    _logoScale = Tween<double>(
+      begin: 0.5,
+      end: 1.0,
+    ).animate(CurvedAnimation(parent: _logoCtrl, curve: Curves.easeOutBack));
     _logoOpacity = Tween<double>(begin: 0.0, end: 1.0).animate(
       CurvedAnimation(
         parent: _logoCtrl,
@@ -95,11 +98,7 @@ class _SplashScreenState extends State<SplashScreen>
             begin: Alignment.topLeft,
             end: Alignment.bottomRight,
             stops: [0.0, 0.55, 1.0],
-            colors: [
-              Color(0xFF0A4A38),
-              Color(0xFF0F6E56),
-              Color(0xFF1D9E75),
-            ],
+            colors: [Color(0xFF4A0E26), Color(0xFF6D1234), Color(0xFF9B1B4A)],
           ),
         ),
         child: Stack(
@@ -114,89 +113,83 @@ class _SplashScreenState extends State<SplashScreen>
             ),
 
             SafeArea(
-              child: Column(
-                children: [
-                  const Spacer(flex: 3),
+              child: SizedBox(
+                width: double.infinity,
+                child: Column(
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  crossAxisAlignment: CrossAxisAlignment.center,
+                  children: [
+                    const Spacer(flex: 3),
 
-                  // Logo central
-                  ScaleTransition(
-                    scale: _logoScale,
-                    child: FadeTransition(
-                      opacity: _logoOpacity,
-                      child: Container(
-                        width: 118,
-                        height: 118,
-                        decoration: BoxDecoration(
-                          color: Colors.white.withValues(alpha: 0.15),
-                          borderRadius: BorderRadius.circular(34),
-                          border: Border.all(
-                            color: Colors.white.withValues(alpha: 0.35),
-                            width: 2,
+                    // Logo central
+                    ScaleTransition(
+                      scale: _logoScale,
+                      child: FadeTransition(
+                        opacity: _logoOpacity,
+                        child: Container(
+                          decoration: BoxDecoration(
+                            shape: BoxShape.circle,
+                            boxShadow: [
+                              BoxShadow(
+                                color: Colors.black.withValues(alpha: 0.2),
+                                blurRadius: 24,
+                                offset: const Offset(0, 8),
+                              ),
+                            ],
                           ),
-                          boxShadow: [
-                            BoxShadow(
-                              color: Colors.black.withValues(alpha: 0.2),
-                              blurRadius: 24,
-                              offset: const Offset(0, 8),
-                            ),
-                          ],
-                        ),
-                        child: const Icon(
-                          Icons.recycling_rounded,
-                          size: 64,
-                          color: Colors.white,
+                          child: const VideoMascot(size: 130, zoom: 6.5),
                         ),
                       ),
                     ),
-                  ),
 
-                  const SizedBox(height: 36),
+                    const SizedBox(height: 36),
 
-                  // Nombre de la app
-                  SlideTransition(
-                    position: _textSlide,
-                    child: FadeTransition(
-                      opacity: _textOpacity,
-                      child: const Text(
-                        'RecolectApp',
+                    // Nombre de la app
+                    SlideTransition(
+                      position: _textSlide,
+                      child: FadeTransition(
+                        opacity: _textOpacity,
+                        child: const Text(
+                          'RecolectApp',
+                          style: TextStyle(
+                            fontSize: 38,
+                            fontWeight: FontWeight.w800,
+                            color: Colors.white,
+                            letterSpacing: -1.0,
+                            height: 1.1,
+                          ),
+                        ),
+                      ),
+                    ),
+
+                    const SizedBox(height: 10),
+
+                    // Subtítulo
+                    FadeTransition(
+                      opacity: _subtitleOpacity,
+                      child: Text(
+                        'Sistema de Recolección Inteligente',
                         style: TextStyle(
-                          fontSize: 38,
-                          fontWeight: FontWeight.w800,
-                          color: Colors.white,
-                          letterSpacing: -1.0,
-                          height: 1.1,
+                          fontSize: 14,
+                          color: Colors.white.withValues(alpha: 0.8),
+                          letterSpacing: 0.4,
+                          fontWeight: FontWeight.w400,
                         ),
                       ),
                     ),
-                  ),
 
-                  const SizedBox(height: 10),
+                    const Spacer(flex: 3),
 
-                  // Subtítulo
-                  FadeTransition(
-                    opacity: _subtitleOpacity,
-                    child: Text(
-                      'Sistema de Recolección Inteligente',
-                      style: TextStyle(
-                        fontSize: 14,
-                        color: Colors.white.withValues(alpha: 0.8),
-                        letterSpacing: 0.4,
-                        fontWeight: FontWeight.w400,
+                    // Indicador de carga
+                    FadeTransition(
+                      opacity: _subtitleOpacity,
+                      child: const Padding(
+                        padding: EdgeInsets.only(bottom: 52),
+                        child: _DotsLoader(),
                       ),
                     ),
-                  ),
-
-                  const Spacer(flex: 3),
-
-                  // Indicador de carga
-                  FadeTransition(
-                    opacity: _subtitleOpacity,
-                    child: const Padding(
-                      padding: EdgeInsets.only(bottom: 52),
-                      child: _DotsLoader(),
-                    ),
-                  ),
-                ],
+                  ],
+                ),
               ),
             ),
           ],
diff --git a/recolecta_app/lib/main.dart b/recolecta_app/lib/main.dart
index 8ffe7d0..0f2b57c 100644
--- a/recolecta_app/lib/main.dart
+++ b/recolecta_app/lib/main.dart
@@ -1,22 +1,12 @@
 import 'package:firebase_core/firebase_core.dart';
-import 'package:firebase_messaging/firebase_messaging.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
 import 'package:flutter_riverpod/flutter_riverpod.dart';
 
 import 'app/app.dart';
+import 'features/notifications/notification_service.dart';
 import 'firebase_options.dart';
 
-@pragma('vm:entry-point')
-Future<void> _firebaseMessagingBackgroundHandler(RemoteMessage message) async {
-  try {
-    await Firebase.initializeApp(
-      options: DefaultFirebaseOptions.currentPlatform,
-    );
-  } catch (_) {}
-  debugPrint('FCM background: ${message.messageId} | data: ${message.data}');
-}
-
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
   try {
@@ -31,6 +21,8 @@ Future<void> main() async {
   } on UnsupportedError {
     await Firebase.initializeApp();
   }
-  FirebaseMessaging.onBackgroundMessage(_firebaseMessagingBackgroundHandler);
+  // Registra handlers FCM (foreground + background), pide permisos
+  // POST_NOTIFICATIONS y crea el canal Android `recolecta_alerts`.
+  await NotificationService.initialize();
   runApp(const ProviderScope(child: RecolectaApp()));
 }
diff --git a/recolecta_app/lib/shared/widgets/eco_floating_button.dart b/recolecta_app/lib/shared/widgets/eco_floating_button.dart
index f7a8c94..88dfcf1 100644
--- a/recolecta_app/lib/shared/widgets/eco_floating_button.dart
+++ b/recolecta_app/lib/shared/widgets/eco_floating_button.dart
@@ -42,7 +42,7 @@ class EcoFloatingButton extends StatelessWidget {
               ),
             ),
           ),
-          
+
           // ── Mascota Circular (GIF) ──
           Container(
             width: 65,
@@ -55,13 +55,14 @@ class EcoFloatingButton extends StatelessWidget {
             ),
             clipBehavior: Clip.hardEdge,
             child: Transform.scale(
-              scale: 1.5, // Ajusta este número si quieres el GIF más grande o pequeño
+              scale:
+                  1.5, // Ajusta este número si quieres el GIF más grande o pequeño
               child: Image.asset(
                 'assets/animations/info.gif',
                 fit: BoxFit.cover,
                 errorBuilder: (context, error, stackTrace) {
                   return const Icon(
-                    Icons.pets,
+                    Icons.delete_outline,
                     color: AppTheme.primary,
                     size: 32,
                   );
@@ -73,4 +74,4 @@ class EcoFloatingButton extends StatelessWidget {
       ),
     );
   }
-}
\ No newline at end of file
+}
diff --git a/recolecta_app/lib/shared/widgets/prevention_banner.dart b/recolecta_app/lib/shared/widgets/prevention_banner.dart
index 4edb065..ff9bf88 100644
--- a/recolecta_app/lib/shared/widgets/prevention_banner.dart
+++ b/recolecta_app/lib/shared/widgets/prevention_banner.dart
@@ -15,7 +15,7 @@ class PreventionBanner extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.all(12),
       decoration: BoxDecoration(
-        color: const Color(0xFFFAEEDA), // amber-50
+        color: const Color(0xFFF5EDD8), // amber-50
         borderRadius: BorderRadius.circular(10),
         border: Border.all(color: const Color(0xFFFAC775)),
       ),
@@ -27,7 +27,7 @@ class PreventionBanner extends StatelessWidget {
             child: Icon(
               Icons.warning_amber_rounded,
               size: 18,
-              color: Color(0xFFBA7517),
+              color: Color(0xFFC8A36A),
             ),
           ),
           const SizedBox(width: 8),
@@ -39,7 +39,7 @@ class PreventionBanner extends StatelessWidget {
                   'No persigas ni detengas la unidad recolectora.',
               style: const TextStyle(
                 fontSize: 12,
-                color: Color(0xFF633806),
+                color: Color(0xFF7A5410),
                 height: 1.5,
               ),
             ),
diff --git a/recolecta_app/lib/shared/widgets/progress_steps.dart b/recolecta_app/lib/shared/widgets/progress_steps.dart
index 0a95e31..d051b4d 100644
--- a/recolecta_app/lib/shared/widgets/progress_steps.dart
+++ b/recolecta_app/lib/shared/widgets/progress_steps.dart
@@ -36,7 +36,7 @@ class ProgressSteps extends StatelessWidget {
             child: Row(
               children: [
                 const Icon(Icons.route_rounded,
-                    size: 16, color: Color(0xFF1D9E75)),
+                    size: 16, color: Color(0xFF9B1B4A)),
                 const SizedBox(width: 6),
                 Text(
                   'Progreso del servicio',
@@ -97,13 +97,13 @@ class _StepRow extends StatelessWidget {
  
     switch (status) {
       case _Status.done:
-        iconBg = const Color(0xFFE1F5EE);
-        iconColor = const Color(0xFF1D9E75);
+        iconBg = const Color(0xFFE8D5DB);
+        iconColor = const Color(0xFF9B1B4A);
         displayIcon = Icons.check_rounded;
         break;
       case _Status.active:
-        iconBg = const Color(0xFFFAEEDA);
-        iconColor = const Color(0xFFBA7517);
+        iconBg = const Color(0xFFF5EDD8);
+        iconColor = const Color(0xFFC8A36A);
         displayIcon = data.icon;
         break;
       case _Status.pending:
@@ -154,7 +154,7 @@ class _StepRow extends StatelessWidget {
                 padding:
                     const EdgeInsets.symmetric(horizontal: 8, vertical: 3),
                 decoration: BoxDecoration(
-                  color: const Color(0xFFFAEEDA),
+                  color: const Color(0xFFF5EDD8),
                   borderRadius: BorderRadius.circular(100),
                 ),
                 child: const Text(
@@ -162,7 +162,7 @@ class _StepRow extends StatelessWidget {
                   style: TextStyle(
                     fontSize: 11,
                     fontWeight: FontWeight.w500,
-                    color: Color(0xFF633806),
+                    color: Color(0xFF7A5410),
                   ),
                 ),
               ),