diff --git a/essenza/product/tests.py b/essenza/product/tests.py
index 2f03894..a68511e 100644
--- a/essenza/product/tests.py
+++ b/essenza/product/tests.py
@@ -1,14 +1,242 @@
+from decimal import Decimal
+
+from django.contrib.auth import get_user_model
 from django.test import TestCase
 from django.urls import reverse
-from django.contrib.auth import get_user_model
-from product.models import Product, Category
-from django.core.files.uploadedfile import SimpleUploadedFile  
-from decimal import Decimal
+from django.utils import timezone
+from order.models import Order, OrderProduct
+
+from .models import Category, Product
+
 User = get_user_model()
 
 
-class ProductCRUDTests(TestCase):
+class DashboardViewLogicTests(TestCase):
+    def setUp(self):
+        self.dashboard_url = reverse("dashboard")
+        self.login_url = reverse("login")
+        self.now = timezone.now()
+
+        # --- Usuarios (Usando tus roles 'admin' y 'user') ---
+        self.admin_user = User.objects.create_user(
+            username="admin", email="admin@test.com", password="pass", role="admin"
+        )
+        self.regular_user = User.objects.create_user(
+            username="user", email="user@test.com", password="pass", role="user"
+        )
+
+        # --- Productos ---
+        self.p_30_day = Product.objects.create(
+            name="Producto 30 Días",
+            description="Test Desc",
+            category=Category.MAQUILLAJE,
+            brand="TestBrand",
+            price=10.00,
+            stock=10,
+            is_active=True,
+        )
+        self.p_1_year = Product.objects.create(
+            name="Producto 1 Año",
+            description="Test Desc",
+            category=Category.CABELLO,
+            brand="TestBrand",
+            price=20.00,
+            stock=20,
+            is_active=True,
+        )
+        self.p_stock = Product.objects.create(
+            name="Producto Stock Alto",
+            description="Test Desc",
+            category=Category.PERFUME,
+            brand="TestBrand",
+            price=30.00,
+            stock=999,
+            is_active=True,
+        )
+        self.p_stock_low = Product.objects.create(
+            name="Producto Stock Bajo",
+            description="Test Desc",
+            category=Category.TRATAMIENTO,
+            brand="TestBrand",
+            price=40.00,
+            stock=1,
+            is_active=True,
+        )
+        self.p_inactive = Product.objects.create(
+            name="Producto Inactivo",
+            description="Test Desc",
+            category=Category.MAQUILLAJE,
+            brand="TestBrand",
+            price=50.00,
+            stock=1000,
+            is_active=False,
+        )
+
+    # --- 1. Tests de Permisos (test_func) ---
+
+    def test_anonymous_user_gets_200(self):
+        """Prueba que los anónimos pueden ver la vista."""
+        resp = self.client.get(self.dashboard_url)
+        self.assertEqual(resp.status_code, 200)
+        self.assertTemplateUsed(resp, "product/dashboard.html")
+
+    def test_regular_user_gets_200(self):
+        """Prueba que los usuarios 'user' pueden ver la vista."""
+        self.client.login(email="user@test.com", password="pass")
+        resp = self.client.get(self.dashboard_url)
+        self.assertEqual(resp.status_code, 200)
+        self.assertTemplateUsed(resp, "product/dashboard.html")
+
+    def test_admin_user_is_forbidden(self):
+        """Prueba que los 'admin' son bloqueados."""
+        self.client.login(email="admin@test.com", password="pass")
+        resp = self.client.get(self.dashboard_url)
+        self.assertEqual(resp.status_code, 403)
+
+    # --- 2. Tests de Lógica de Negocio (método get) ---
+
+    def test_logic_branch_1_shows_30_day_products(self):
+        """
+        Prueba el primer 'if': Muestra productos de 30 días.
+        Ignora ventas más antiguas aunque sean mayores.
+        """
+        # 1. Crear ventas recientes (hace 10 días)
+        order_recent = Order.objects.create(
+            user=self.regular_user,
+            address="Test Address 1",
+            placed_at=self.now
+            - timezone.timedelta(days=10),  # <-- Controlamos la fecha
+        )
+        OrderProduct.objects.create(
+            order=order_recent, product=self.p_30_day, quantity=100
+        )
+
+        # 2. Crear ventas antiguas (hace 100 días)
+        order_old = Order.objects.create(
+            user=self.regular_user,
+            address="Test Address 2",
+            placed_at=self.now - timezone.timedelta(days=100),
+        )
+        OrderProduct.objects.create(
+            order=order_old,
+            product=self.p_1_year,
+            quantity=500,  # Más ventas, pero antiguo
+        )
+
+        resp = self.client.get(self.dashboard_url)
+        products_in_context = list(resp.context["products"])
+
+        # ASERCIÓN: Solo debe aparecer el producto de 30 días
+        self.assertEqual(len(products_in_context), 1)
+        self.assertEqual(products_in_context[0], self.p_30_day)
+        self.assertEqual(products_in_context[0].total_quantity, 100)
+
+    def test_logic_branch_2_falls_back_to_1_year_products(self):
+        """
+        Prueba el segundo 'if': Falla 30 días, muestra 1 año.
+        Ignora ventas de hace más de 1 año.
+        """
+        # 1. NO crear ventas recientes
+
+        # 2. Crear ventas antiguas (hace 100 días)
+        order_old = Order.objects.create(
+            user=self.regular_user,
+            address="Test Address 1",
+            placed_at=self.now - timezone.timedelta(days=100),
+        )
+        OrderProduct.objects.create(
+            order=order_old, product=self.p_1_year, quantity=500
+        )
+
+        # 3. Crear ventas MUY antiguas (hace 400 días) - debe ignorarse
+        order_ancient = Order.objects.create(
+            user=self.regular_user,
+            address="Test Address 2",
+            placed_at=self.now - timezone.timedelta(days=400),
+        )
+        OrderProduct.objects.create(
+            order=order_ancient, product=self.p_30_day, quantity=999
+        )
+
+        resp = self.client.get(self.dashboard_url)
+        products_in_context = list(resp.context["products"])
+
+        # ASERCIÓN: Solo debe aparecer el producto de 1 año
+        self.assertEqual(len(products_in_context), 1)
+        self.assertEqual(products_in_context[0], self.p_1_year)
+        self.assertEqual(products_in_context[0].total_quantity, 500)
+
+    def test_logic_branch_3_falls_back_to_stock_products(self):
+        """
+        Prueba el tercer 'if': Falla 1 año, muestra por stock.
+        Ignora ventas de productos inactivos.
+        """
+        # 1. NO crear ventas recientes
+        # 2. NO crear ventas en el último año
+
+        # 3. Crear ventas MUY antiguas (hace 400 días) - para forzar el fallback
+        order_ancient = Order.objects.create(
+            user=self.regular_user,
+            address="Test Address 1",
+            placed_at=self.now - timezone.timedelta(days=400),
+        )
+        OrderProduct.objects.create(
+            order=order_ancient, product=self.p_30_day, quantity=999
+        )
+
+        # 4. Crear ventas de productos INACTIVOS (deben ignorarse siempre)
+        order_inactive = Order.objects.create(
+            user=self.regular_user,
+            address="Test Address 2",
+            placed_at=self.now - timezone.timedelta(days=10),  # Reciente, pero inactivo
+        )
+        OrderProduct.objects.create(
+            order=order_inactive, product=self.p_inactive, quantity=5000
+        )
+
+        resp = self.client.get(self.dashboard_url)
+        products_in_context = list(resp.context["products"])
+
+        # ASERCIÓN: Debe mostrar los productos activos por stock descendente
+        # p_stock (999) > p_1_year (20) > p_30_day (10) > p_stock_low (1)
+        # p_inactive (1000) debe ser ignorado.
 
+        self.assertIn(self.p_stock, products_in_context)
+        self.assertIn(self.p_1_year, products_in_context)
+        self.assertNotIn(self.p_inactive, products_in_context)  # Clave
+
+        # Comprobar el orden por stock
+        self.assertEqual(products_in_context[0], self.p_stock)  # stock 999
+        self.assertEqual(products_in_context[1], self.p_1_year)  # stock 20
+        self.assertEqual(products_in_context[2], self.p_30_day)  # stock 10
+        self.assertEqual(products_in_context[3], self.p_stock_low)  # stock 1
+
+        # Comprobar que no hay 'total_quantity' (viene de la consulta de stock)
+        self.assertFalse(hasattr(products_in_context[0], "total_quantity"))
+
+    def test_logic_branch_4_handles_empty_database(self):
+        """
+        Prueba el caso límite final: No hay productos activos en la BBDD.
+        La vista debe devolver una lista vacía, no romperse.
+        """
+
+        # 1. Borrar TODOS los productos creados en el setUp
+        #    (Esto deja la BBDD sin productos activos)
+        Product.objects.all().delete()
+
+        # Cargar la vista
+        resp = self.client.get(self.dashboard_url)
+        self.assertEqual(resp.status_code, 200)
+
+        # ASERCIÓN:
+        # El contexto 'products' debe existir, pero estar vacío.
+        self.assertIn("products", resp.context)
+        products_in_context = list(resp.context["products"])
+
+        self.assertEqual(len(products_in_context), 0)
+
+
+class ProductCRUDTests(TestCase):
     def setUp(self):
         self.user = User.objects.create_user(
             username="user",
@@ -29,10 +257,10 @@ def setUp(self):
             description="Descripción",
             brand="Marca X",
             price=10,
-            photo= None,
+            photo=None,
             stock=5,
             category="maquillaje",
-            is_active=True
+            is_active=True,
         )
         # URLs
         self.list_url = reverse("product_list")
@@ -66,7 +294,7 @@ def test_create_requires_login(self):
     def test_user_cannot_access_list(self):
         self.client.login(username="user", password="pass1234")
         resp = self.client.get(self.list_url)
-        self.assertEqual(resp.status_code, 302)   # Redirigido por permisos
+        self.assertEqual(resp.status_code, 302)  # Redirigido por permisos
 
     def test_user_cannot_access_detail(self):
         self.client.login(username="user", password="pass1234")
@@ -84,22 +312,21 @@ def test_user_cannot_access_create(self):
 
     def test_admin_can_access_list(self):
         self.client.force_login(self.admin)
-        url = reverse('product_list')
+        url = reverse("product_list")
         resp = self.client.get(url)
         self.assertEqual(resp.status_code, 200)
         self.assertContains(resp, "Producto Test")
 
-
     def test_admin_can_access_detail(self):
         self.client.force_login(self.admin)
-        url = reverse('product_detail', args=[self.product.pk])
+        url = reverse("product_detail", args=[self.product.pk])
         resp = self.client.get(url)
         self.assertEqual(resp.status_code, 200)
         self.assertContains(resp, self.product.name)
 
     def test_admin_can_delete_product(self):
         self.client.force_login(self.admin)
-        url = reverse('product_delete', args=[self.product.pk])
+        url = reverse("product_delete", args=[self.product.pk])
 
         # GET renderiza el confirm delete
         resp_get = self.client.get(url)
diff --git a/essenza/product/views.py b/essenza/product/views.py
index 0550e2a..4869951 100644
--- a/essenza/product/views.py
+++ b/essenza/product/views.py
@@ -1,37 +1,49 @@
 from django.contrib import messages
 from django.contrib.auth.mixins import LoginRequiredMixin, UserPassesTestMixin
+from django.db.models import Sum
 from django.shortcuts import get_object_or_404, redirect, render
 from django.utils import timezone
 from django.views import View
+
 from .forms import ProductForm
-from order.models import OrderProduct
 from .models import Product
-from django.shortcuts import render, get_object_or_404
 
-class DashboardView(View):
+
+class DashboardView(UserPassesTestMixin, View):
     template_name = "product/dashboard.html"
 
+    # Todos excepto los administradores pueden acceder a esta vista
+    def test_func(self):
+        return (
+            not self.request.user.is_authenticated or self.request.user.role != "admin"
+        )
+
     def get(self, request, *args, **kwargs):
-        # Obtenemos de los datos
-        order_products = OrderProduct.objects.all()
         month_ago = timezone.now() - timezone.timedelta(days=30)
-        times_purchased = {}
-        for order_product in order_products:
-            order = order_product.order
-            if order.placed_at >= month_ago:
-                if order_product.product.id in times_purchased:
-                    times_purchased[order_product.product.id] += order_product.quantity
-                else:
-                    times_purchased[order_product.product.id] = order_product.quantity
-        times_purchased_ordered = dict(
-            sorted(
-                times_purchased.items(), key=lambda quantity: quantity[1], reverse=True
+        year_ago = timezone.now() - timezone.timedelta(days=365)
+
+        def get_top_selling_products(since):
+            # Paso 1: Definir el filtro base.
+            base_query = Product.objects.filter(
+                is_active=True, product_orders__order__placed_at__gte=since
             )
-        )
-        most_purchased_products = list(times_purchased_ordered.keys())[:10]
-        products = Product.objects.filter(
-            is_active=True, id__in=most_purchased_products
-        )
+            # Paso 2: Anotar (calcular) el total vendido para esos productos.
+            query_with_totals = base_query.annotate(
+                total_quantity=Sum("product_orders__quantity")
+            )
+            # Paso 3: Filtrar de nuevo, sobre el campo calculado.
+            filtered_query = query_with_totals.filter(total_quantity__gt=0)
+            # Paso 4: Ordenar (descendente).
+            ordered_query = filtered_query.order_by("-total_quantity")
+            # Paso 5: Limitar.
+            top_products = ordered_query[:10]
+            return top_products
+
+        products = get_top_selling_products(since=month_ago)
+        if not products.exists():
+            products = get_top_selling_products(since=year_ago)
+        if not products.exists():
+            products = Product.objects.filter(is_active=True).order_by("-stock")[:10]
 
         return render(request, self.template_name, {"products": products})
 
@@ -68,80 +80,85 @@ def post(self, request):
 
         # Recarga la misma página
         return redirect("stock")
-    
 
-class ProductListView(LoginRequiredMixin, UserPassesTestMixin,View):
-    template_name = 'product/list.html'
+
+class ProductListView(LoginRequiredMixin, UserPassesTestMixin, View):
+    template_name = "product/list.html"
 
     def test_func(self):
         return self.request.user.is_authenticated and self.request.user.role == "admin"
 
     def get(self, request):
         products = Product.objects.all()
-        return render(request, self.template_name, {'products': products})
+        return render(request, self.template_name, {"products": products})
+
 
-class ProductDetailView(LoginRequiredMixin, UserPassesTestMixin,View):
-    template_name = 'product/detail.html'
+class ProductDetailView(LoginRequiredMixin, UserPassesTestMixin, View):
+    template_name = "product/detail.html"
 
     def test_func(self):
         return self.request.user.is_authenticated and self.request.user.role == "admin"
 
     def get(self, request, pk):
         product = get_object_or_404(Product, pk=pk)
-        return render(request, self.template_name, {'product': product})
-    
-class ProductCreateView(LoginRequiredMixin, UserPassesTestMixin,View):
-    template_name = 'product/form.html'
+        return render(request, self.template_name, {"product": product})
+
+
+class ProductCreateView(LoginRequiredMixin, UserPassesTestMixin, View):
+    template_name = "product/form.html"
     form_class = ProductForm
+
     def test_func(self):
         return self.request.user.is_authenticated and self.request.user.role == "admin"
 
     def get(self, request):
         form = self.form_class()
-        return render(request, self.template_name, {'form': form})
+        return render(request, self.template_name, {"form": form})
 
     def post(self, request):
         form = self.form_class(request.POST, request.FILES)
         if form.is_valid():
             form.save()
-            return redirect('product_list')
-        return render(request, self.template_name, {'form': form})
+            return redirect("product_list")
+        return render(request, self.template_name, {"form": form})
+
 
-class ProductUpdateView(LoginRequiredMixin, UserPassesTestMixin,View):
-    template_name = 'product/form.html'
+class ProductUpdateView(LoginRequiredMixin, UserPassesTestMixin, View):
+    template_name = "product/form.html"
     form_class = ProductForm
-    
+
     def test_func(self):
         return self.request.user.is_authenticated and self.request.user.role == "admin"
-   
+
     def get(self, request, pk):
         product = get_object_or_404(Product, pk=pk)
         form = self.form_class(instance=product)
-        return render(request, self.template_name, {'form': form, 'product': product})
-
+        return render(request, self.template_name, {"form": form, "product": product})
 
     def post(self, request, pk):
         product = get_object_or_404(Product, pk=pk)
         form = self.form_class(request.POST, request.FILES, instance=product)
         if form.is_valid():
             form.save()
-            return redirect('product_detail', pk=product.pk)
-        return render(request, self.template_name, {'form': form, 'product': product})
+            return redirect("product_list")
+        return render(request, self.template_name, {"form": form, "product": product})
+
+
+class ProductDeleteView(LoginRequiredMixin, UserPassesTestMixin, View):
+    template_name = "product/confirm_delete.html"
 
-class ProductDeleteView(LoginRequiredMixin, UserPassesTestMixin,View):
-    template_name = 'product/confirm_delete.html'
     def test_func(self):
         return self.request.user.is_authenticated and self.request.user.role == "admin"
-    
+
     def get(self, request, pk):
         product = get_object_or_404(Product, pk=pk)
-        return render(request, self.template_name, {'product': product})
-
+        return render(request, self.template_name, {"product": product})
 
     def post(self, request, pk):
         product = get_object_or_404(Product, pk=pk)
         product.delete()
-        return redirect('product_list')
+        return redirect("product_list")
+
 
 class CatalogView(View):
     template_name = "product/catalog.html"
diff --git a/essenza/static/images/default_photo.png b/essenza/static/images/default_product.png
similarity index 100%
rename from essenza/static/images/default_photo.png
rename to essenza/static/images/default_product.png
diff --git a/essenza/templates/product/catalog.html b/essenza/templates/product/catalog.html
index 2bf34da..974a580 100644
--- a/essenza/templates/product/catalog.html
+++ b/essenza/templates/product/catalog.html
@@ -1,291 +1,308 @@
-{% load static %}
-{% load humanize %}
+{% load static %} {% load humanize %}
 
 <!DOCTYPE html>
 <html lang="es">
-<head>
-    <meta charset="UTF-8">
+  <head>
+    <meta charset="UTF-8" />
     <title>Catálogo · Essenza</title>
 
     <style>
-        body {
-            margin: 0;
-            background-color: #faf7f2;
-            font-family: "Segoe UI", Arial, sans-serif;
-        }
+      body {
+        margin: 0;
+        background-color: #faf7f2;
+        font-family: "Segoe UI", Arial, sans-serif;
+      }
 
-        /* ====== CABECERA ====== */
-        header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 14px 30px;
-            background-color: #fff;
-            border-bottom: 2px solid #c06b3e;
-        }
-        .info-button {
-            margin-right: 15px;
-            width: 30px;
-            height: 30px;
-            background-color: #c06b3e;
-            border-radius: 50%;
-            text-align: center;
-            line-height: 30px;
-            font-size: 18px;
-            font-weight: bold;
-            color: white;
-            text-decoration: none;
-            cursor: pointer;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-        }
-        .brand {
-            font-size: 32px;
-            color: #c06b3e;
-            font-weight: bold;
-            letter-spacing: 1px;
-        }
-        .search-bar {
-            flex: 1;
-            margin: 0 20px;
-        }
-        .search-bar input {
-            width: 100%;
-            max-width: 380px;
-            padding: 8px 12px;
-            border: 1px solid #ccc;
-            border-radius: 20px;
-            background: #fafafa;
-        }
+      /* ====== CABECERA ====== */
+      header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 14px 30px;
+        background-color: #fff;
+        border-bottom: 2px solid #c06b3e;
+      }
+      .info-button {
+        margin-right: 15px;
+        width: 30px;
+        height: 30px;
+        background-color: #c06b3e;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 30px;
+        font-size: 18px;
+        font-weight: bold;
+        color: white;
+        text-decoration: none;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+      }
+      .brand {
+        font-size: 32px;
+        color: #c06b3e;
+        font-weight: bold;
+        letter-spacing: 1px;
+      }
+      .search-bar {
+        flex: 1;
+        margin: 0 20px;
+      }
+      .search-bar input {
+        width: 100%;
+        max-width: 380px;
+        padding: 8px 12px;
+        border: 1px solid #ccc;
+        border-radius: 20px;
+        background: #fafafa;
+      }
 
-        /* ====== PERFIL ====== */
-        .profile-dropdown {
-            position: relative;
-            display: inline-block;
-        }
-        .profile-icon-btn {
-            width: 34px;
-            height: 34px;
-            background-color: #c06b3e;
-            border-radius: 50%;
-            border: none;
-            cursor: pointer;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            right: 0;
-            top: 45px;
-            background-color: #ffffff;
-            min-width: 160px;
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
-            border-radius: 8px;
-            z-index: 10;
-            overflow: hidden;
-        }
-        .dropdown-content a {
-            padding: 12px 16px;
-            display: block;
-            color: #333;
-            text-decoration: none;
-            font-size: 14px;
-        }
-        .dropdown-content.show {
-            display: block;
-        }
+      /* ====== PERFIL ====== */
+      .profile-dropdown {
+        position: relative;
+        display: inline-block;
+      }
+      .profile-icon-btn {
+        width: 34px;
+        height: 34px;
+        background-color: #c06b3e;
+        border-radius: 50%;
+        border: none;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .dropdown-content {
+        display: none;
+        position: absolute;
+        right: 0;
+        top: 45px;
+        background-color: #ffffff;
+        min-width: 160px;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+        border-radius: 8px;
+        z-index: 10;
+        overflow: hidden;
+      }
+      .dropdown-content a {
+        padding: 12px 16px;
+        display: block;
+        color: #333;
+        text-decoration: none;
+        font-size: 14px;
+      }
+      .dropdown-content.show {
+        display: block;
+      }
 
-        /* ===== HERO ===== */
-        .hero {
-            text-align: center;
-            padding: 40px 20px 10px;
-        }
-        .hero h1 {
-            font-size: 36px;
-            font-weight: 700;
-            color: #c06b3e;
-        }
-        .hero p {
-            color: #666;
-            margin-top: 5px;
-        }
+      /* ===== HERO ===== */
+      .hero {
+        text-align: center;
+        padding: 40px 20px 10px;
+      }
+      .hero h1 {
+        font-size: 36px;
+        font-weight: 700;
+        color: #c06b3e;
+      }
+      .hero p {
+        color: #666;
+        margin-top: 5px;
+      }
 
-        /* ===== FILTROS ===== */
-        .filters {
-            max-width: 1100px;
-            margin: 25px auto 0 auto;
-            display: flex;
-            justify-content: center;
-            gap: 12px;
-            flex-wrap: wrap;
-        }
+      /* ===== FILTROS ===== */
+      .filters {
+        max-width: 1100px;
+        margin: 25px auto 0 auto;
+        display: flex;
+        justify-content: center;
+        gap: 12px;
+        flex-wrap: wrap;
+      }
 
-        .filter-btn {
-            padding: 10px 18px;
-            border-radius: 20px;
-            background: #fff;
-            border: 2px solid #c06b3e;
-            color: #c06b3e;
-            font-weight: bold;
-            cursor: pointer;
-            transition: .25s;
-        }
-        .filter-btn.active,
-        .filter-btn:hover {
-            background: #c06b3e;
-            color: white;
-        }
+      .filter-btn {
+        padding: 10px 18px;
+        border-radius: 20px;
+        background: #fff;
+        border: 2px solid #c06b3e;
+        color: #c06b3e;
+        font-weight: bold;
+        cursor: pointer;
+        transition: 0.25s;
+      }
+      .filter-btn.active,
+      .filter-btn:hover {
+        background: #c06b3e;
+        color: white;
+      }
 
-        /* ===== GRID ===== */
-        .grid {
-            max-width: 1100px;
-            margin: 30px auto;
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
-            gap: 22px;
-        }
-        .card {
-            background: white;
-            border-radius: 14px;
-            padding: 16px;
-            box-shadow: 0 3px 12px rgba(0,0,0,.1);
-            text-align: center;
-            transition: .25s;
-            cursor: pointer;
-        }
-        .card:hover {
-            transform: translateY(-6px);
-            box-shadow: 0 6px 20px rgba(0,0,0,.15);
-        }
-        .card img {
-            width: 100%;
-            height: 180px;
-            object-fit: contain;
-            border-radius: 10px;
-        }
-        .price {
-            margin-top: 8px;
-            color: #c06b3e;
-            font-weight: bold;
-        }
-        .category-tag {
-            display: inline-block;
-            margin-top: 8px;
-            background: #f2e5df;
-            color: #c06b3e;
-            padding: 4px 10px;
-            border-radius: 6px;
-            font-size: 12px;
-        }
+      /* ===== GRID ===== */
+      .grid {
+        max-width: 1100px;
+        margin: 30px auto;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
+        gap: 22px;
+      }
+      .card {
+        background: white;
+        border-radius: 14px;
+        padding: 16px;
+        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.1);
+        text-align: center;
+        transition: 0.25s;
+        cursor: pointer;
+      }
+      .card:hover {
+        transform: translateY(-6px);
+        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
+      }
+      .card img {
+        width: 100%;
+        height: 180px;
+        object-fit: contain;
+        border-radius: 10px;
+      }
+      .price {
+        margin-top: 8px;
+        color: #c06b3e;
+        font-weight: bold;
+      }
+      .category-tag {
+        display: inline-block;
+        margin-top: 8px;
+        background: #f2e5df;
+        color: #c06b3e;
+        padding: 4px 10px;
+        border-radius: 6px;
+        font-size: 12px;
+      }
     </style>
-</head>
-
-<body>
+  </head>
 
-    <!-- CABECERA -->
+  <body>
     <header>
-        <a href="/info/" class="info-button">i</a>
-        <div class="brand">ESSENZA</div>
-
-        <div class="search-bar">
-            <input id="searchInput" type="text" placeholder="Buscar productos...">
-        </div>
-
-        <div class="profile-dropdown">
-            <button onclick="toggleDropdown()" class="profile-icon-btn">
-                👤
-            </button>
-            <div id="myDropdown" class="dropdown-content">
-                {% if user.is_authenticated %}
-                    <a href="{% url 'profile' %}">Mi perfil</a>
-                    <a href="{% url 'logout' %}">Cerrar sesión</a>
-                {% else %}
-                    <a href="{% url 'register' %}">Registrarse</a>
-                    <a href="{% url 'login' %}">Iniciar sesión</a>
-                {% endif %}
-            </div>
+      <a
+        href="{% url 'info-home' %}"
+        class="info-button"
+        title="Información Legal y Contacto"
+        >i</a
+      >
+      <div class="brand">ESSENZA</div>
+      <div class="search-bar">
+        <input type="text" placeholder="Buscar..." />
+      </div>
+      <div class="profile-dropdown">
+        <button onclick="toggleDropdown()" class="profile-icon-btn">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            fill="none"
+            stroke="#fff"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+            <circle cx="12" cy="7" r="4"></circle>
+          </svg>
+        </button>
+        <div id="myDropdown" class="dropdown-content">
+          {% if user.is_authenticated %}
+          <a href="{% url 'profile' %}">Mi perfil</a>
+          <a href="{% url 'logout' %}">Cerrar sesión</a>
+          {% else %}
+          <a href="{% url 'register' %}">Registrarse</a>
+          <a href="{% url 'login' %}">Iniciar sesión</a>
+          {% endif %}
         </div>
+      </div>
     </header>
 
     <!-- TÍTULO -->
     <div class="hero">
-        <h1>Catálogo Essenza</h1>
-        <p>Explora nuestra selección de productos mejor valorados</p>
+      <h1>Catálogo Essenza</h1>
+      <p>Explora nuestra selección de productos mejor valorados</p>
     </div>
 
     <!-- FILTROS -->
     <div class="filters">
-        <button class="filter-btn active" data-category="all">Todos</button>
-        <button class="filter-btn" data-category="maquillaje">Maquillaje</button>
-        <button class="filter-btn" data-category="tratamiento">Tratamiento</button>
-        <button class="filter-btn" data-category="cabello">Cabello</button>
-        <button class="filter-btn" data-category="perfume">Perfume</button>
+      <button class="filter-btn active" data-category="all">Todos</button>
+      <button class="filter-btn" data-category="maquillaje">Maquillaje</button>
+      <button class="filter-btn" data-category="tratamiento">
+        Tratamiento
+      </button>
+      <button class="filter-btn" data-category="cabello">Cabello</button>
+      <button class="filter-btn" data-category="perfume">Perfume</button>
     </div>
 
     <!-- GRID PRODUCTOS -->
     <div class="grid" id="productGrid">
-        {% for product in products %}
-            <div class="card"
-                data-name="{{ product.name|lower }}"
-                data-category="{{ product.category }}"
-                onclick="location.href='{% url 'catalog_detail' product.pk %}'"
-            >
-                {% if product.photo %}
-                    <img src="{{ product.photo.url }}" alt="{{ product.name }}">
-                {% else %}
-                    <img src="{% static 'images/default_photo.png' %}" alt="{{ product.name }}">
-                {% endif %}
-
+      {% for product in products %}
+      <div
+        class="card"
+        data-name="{{ product.name|lower }}"
+        data-category="{{ product.category }}"
+        onclick="location.href='{% url 'catalog_detail' product.pk %}'"
+      >
+        {% if product.photo %}
+        <img src="{{ product.photo.url }}" alt="{{ product.name }}" />
+        {% else %}
+        <img
+          src="{% static 'images/default_product.png' %}"
+          alt="{{ product.name }}"
+        />
+        {% endif %}
 
-                <h3>{{ product.name }}</h3>
-                <p class="price">{{ product.price }} €</p>
-                <span class="category-tag">{{ product.get_category_display }}</span>
-            </div>
-        {% endfor %}
+        <h3>{{ product.name }}</h3>
+        <p class="price">{{ product.price }} €</p>
+        <span class="category-tag">{{ product.get_category_display }}</span>
+      </div>
+      {% endfor %}
     </div>
 
     <script>
-        /* ========== DROPDOWN PERFIL ========== */
-        function toggleDropdown() {
-            document.getElementById("myDropdown").classList.toggle("show");
+      /* ========== DROPDOWN PERFIL ========== */
+      function toggleDropdown() {
+        document.getElementById("myDropdown").classList.toggle("show");
+      }
+      window.onclick = function (e) {
+        if (!e.target.closest(".profile-icon-btn")) {
+          document.getElementById("myDropdown")?.classList.remove("show");
         }
-        window.onclick = function(e) {
-            if (!e.target.closest('.profile-icon-btn')) {
-                document.getElementById("myDropdown")?.classList.remove("show");
-            }
-        };
+      };
 
-        /* ========== FILTROS ========== */
-        const filterButtons = document.querySelectorAll(".filter-btn");
-        const cards = document.querySelectorAll(".card");
+      /* ========== FILTROS ========== */
+      const filterButtons = document.querySelectorAll(".filter-btn");
+      const cards = document.querySelectorAll(".card");
 
-        filterButtons.forEach(btn => {
-            btn.addEventListener("click", () => {
-                filterButtons.forEach(b => b.classList.remove("active"));
-                btn.classList.add("active");
+      filterButtons.forEach((btn) => {
+        btn.addEventListener("click", () => {
+          filterButtons.forEach((b) => b.classList.remove("active"));
+          btn.classList.add("active");
 
-                const category = btn.dataset.category;
-                cards.forEach(card => {
-                    const match = category === "all" || card.dataset.category === category;
-                    card.style.display = match ? "block" : "none";
-                });
-            });
+          const category = btn.dataset.category;
+          cards.forEach((card) => {
+            const match =
+              category === "all" || card.dataset.category === category;
+            card.style.display = match ? "block" : "none";
+          });
         });
+      });
 
-        /* ========== BUSCADOR ========== */
-        const searchInput = document.getElementById("searchInput");
+      /* ========== BUSCADOR ========== */
+      const searchInput = document.getElementById("searchInput");
 
-        searchInput.addEventListener("input", function() {
-            const searchText = this.value.toLowerCase();
+      searchInput.addEventListener("input", function () {
+        const searchText = this.value.toLowerCase();
 
-            cards.forEach(card => {
-                const name = card.dataset.name;
-                const visible = name.includes(searchText);
-                card.style.display = visible ? "block" : "none";
-            });
+        cards.forEach((card) => {
+          const name = card.dataset.name;
+          const visible = name.includes(searchText);
+          card.style.display = visible ? "block" : "none";
         });
+      });
     </script>
-
-</body>
+  </body>
 </html>
diff --git a/essenza/templates/product/dashboard.html b/essenza/templates/product/dashboard.html
index 92e5b7a..9e9be5f 100644
--- a/essenza/templates/product/dashboard.html
+++ b/essenza/templates/product/dashboard.html
@@ -281,7 +281,10 @@
 
   <body>
     <header>
-      <a href="/info/" class="info-button" title="Información Legal y Contacto"
+      <a
+        href="{% url 'info-home' %}"
+        class="info-button"
+        title="Información Legal y Contacto"
         >i</a
       >
       <div class="brand">ESSENZA</div>
@@ -316,15 +319,17 @@
       </div>
     </header>
 
+    {% if products|length > 1 %}
     <div class="showcase-title">
-      <h2>Top 10 Bestsellers</h2>
+      <h2>Top Bestsellers</h2>
       <p>Una cuidada selección de los productos estrella de la temporada.</p>
     </div>
+    {% endif %}
 
     <main>
       {% if products %} {% for p in products %}
       <div class="product-card">
-        <a href="#" class="card-link-overlay"></a>
+        <a href="{% url 'catalog_detail' p.pk %}" class="card-link-overlay"></a>
 
         {% if p.photo %}
         <img src="{{ p.photo.url }}" />
diff --git a/essenza/templates/product/detail.html b/essenza/templates/product/detail.html
index aa9f19c..5c6953d 100644
--- a/essenza/templates/product/detail.html
+++ b/essenza/templates/product/detail.html
@@ -1,229 +1,236 @@
+{% load static %}
 <!DOCTYPE html>
 <html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ product.name }} - Essenza</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            background-color: #faf7f2;
-            font-family: 'Segoe UI', Arial, sans-serif;
-            color: #333;
-            padding: 20px;
-        }
-        .container {
-            max-width: 900px;
-            margin: 0 auto;
-        }
-        .product-container {
-            background: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            padding: 30px;
-        }
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background-color: #faf7f2;
+        font-family: "Segoe UI", Arial, sans-serif;
+        color: #333;
+        padding: 20px;
+      }
+      .container {
+        max-width: 900px;
+        margin: 0 auto;
+      }
+      .product-container {
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        padding: 30px;
+      }
+      .product-header {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 30px;
+        margin-bottom: 30px;
+      }
+      .product-image {
+        width: 100%;
+        height: 400px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 16px;
+        overflow: hidden;
+      }
+      .product-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      .product-details h1 {
+        color: #c06b3e;
+        font-size: 28px;
+        margin-bottom: 10px;
+      }
+      .product-brand {
+        color: #666;
+        font-size: 16px;
+        margin-bottom: 15px;
+        font-weight: 500;
+      }
+      .product-price {
+        font-size: 32px;
+        color: #333;
+        font-weight: bold;
+        margin-bottom: 15px;
+      }
+      .product-category {
+        display: inline-block;
+        background-color: #e8dcd8;
+        color: #c06b3e;
+        padding: 6px 12px;
+        border-radius: 4px;
+        margin-bottom: 20px;
+        font-size: 14px;
+      }
+      .product-stock {
+        font-size: 16px;
+        margin-bottom: 15px;
+        color: #333;
+      }
+      .product-stock strong {
+        color: #c06b3e;
+      }
+      .product-description {
+        background-color: #f9f5f2;
+        padding: 20px;
+        border-left: 4px solid #c06b3e;
+        margin: 20px 0;
+        border-radius: 4px;
+        line-height: 1.6;
+      }
+      .actions {
+        display: flex;
+        gap: 10px;
+        margin-top: 30px;
+        padding-top: 30px;
+        border-top: 1px solid #ddd;
+      }
+      .btn {
+        padding: 12px 25px;
+        text-decoration: none;
+        border-radius: 5px;
+        font-weight: bold;
+        text-align: center;
+        transition: opacity 0.3s;
+        cursor: pointer;
+        border: none;
+        font-size: 14px;
+      }
+      .btn-edit {
+        background-color: #b7b099;
+        color: white;
+        flex: 1;
+      }
+      .btn-edit:hover {
+        opacity: 0.8;
+      }
+      .btn-delete {
+        background-color: #c85a54;
+        color: white;
+        flex: 1;
+      }
+      .btn-delete:hover {
+        opacity: 0.8;
+      }
+      .btn-back {
+        background-color: #ddd;
+        color: #333;
+        flex: 1;
+      }
+      .btn-back:hover {
+        opacity: 0.8;
+      }
+      .info-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 15px;
+        margin-top: 20px;
+      }
+      .info-item {
+        background-color: #f9f5f2;
+        padding: 12px;
+        border-radius: 4px;
+      }
+      .info-label {
+        color: #c06b3e;
+        font-weight: bold;
+        font-size: 12px;
+        text-transform: uppercase;
+      }
+      .info-value {
+        color: #333;
+        font-size: 14px;
+        margin-top: 4px;
+      }
+      @media (max-width: 768px) {
         .product-header {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 30px;
-            margin-bottom: 30px;
+          grid-template-columns: 1fr;
         }
         .product-image {
-            width: 100%;
-            height: 400px;
-            background-color: #e8dcd8;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #999;
-            font-size: 16px;
-            overflow: hidden;
-        }
-        .product-image img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        .product-details h1 {
-            color: #c06b3e;
-            font-size: 28px;
-            margin-bottom: 10px;
-        }
-        .product-brand {
-            color: #666;
-            font-size: 16px;
-            margin-bottom: 15px;
-            font-weight: 500;
-        }
-        .product-price {
-            font-size: 32px;
-            color: #333;
-            font-weight: bold;
-            margin-bottom: 15px;
-        }
-        .product-category {
-            display: inline-block;
-            background-color: #e8dcd8;
-            color: #c06b3e;
-            padding: 6px 12px;
-            border-radius: 4px;
-            margin-bottom: 20px;
-            font-size: 14px;
-        }
-        .product-stock {
-            font-size: 16px;
-            margin-bottom: 15px;
-            color: #333;
-        }
-        .product-stock strong {
-            color: #c06b3e;
-        }
-        .product-description {
-            background-color: #f9f5f2;
-            padding: 20px;
-            border-left: 4px solid #c06b3e;
-            margin: 20px 0;
-            border-radius: 4px;
-            line-height: 1.6;
+          height: 300px;
         }
         .actions {
-            display: flex;
-            gap: 10px;
-            margin-top: 30px;
-            padding-top: 30px;
-            border-top: 1px solid #ddd;
-        }
-        .btn {
-            padding: 12px 25px;
-            text-decoration: none;
-            border-radius: 5px;
-            font-weight: bold;
-            text-align: center;
-            transition: opacity 0.3s;
-            cursor: pointer;
-            border: none;
-            font-size: 14px;
-        }
-        .btn-edit {
-            background-color: #B7B099;
-            color: white;
-            flex: 1;
-        }
-        .btn-edit:hover {
-            opacity: 0.8;
-        }
-        .btn-delete {
-            background-color: #c85a54;
-            color: white;
-            flex: 1;
-        }
-        .btn-delete:hover {
-            opacity: 0.8;
-        }
-        .btn-back {
-            background-color: #ddd;
-            color: #333;
-            flex: 1;
-        }
-        .btn-back:hover {
-            opacity: 0.8;
+          flex-direction: column;
         }
         .info-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
-            margin-top: 20px;
-        }
-        .info-item {
-            background-color: #f9f5f2;
-            padding: 12px;
-            border-radius: 4px;
-        }
-        .info-label {
-            color: #c06b3e;
-            font-weight: bold;
-            font-size: 12px;
-            text-transform: uppercase;
-        }
-        .info-value {
-            color: #333;
-            font-size: 14px;
-            margin-top: 4px;
-        }
-        @media (max-width: 768px) {
-            .product-header {
-                grid-template-columns: 1fr;
-            }
-            .product-image {
-                height: 300px;
-            }
-            .actions {
-                flex-direction: column;
-            }
-            .info-grid {
-                grid-template-columns: 1fr;
-            }
+          grid-template-columns: 1fr;
         }
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="container">
-        <div class="product-container">
-            <div class="product-header">
-                <div class="product-image">
-                    {% if product.photo %}
-                        <img src="{{ product.photo.url }}" alt="{{ product.name }}">
-                    {% else %}
-                        <span>Sin imagen</span>
-                    {% endif %}
-                </div>
-                <div class="product-details">
-                    <h1>{{ product.name }}</h1>
-                    <div class="product-brand">{{ product.brand }}</div>
-                    <div class="product-price">€ {{ product.price }}</div>
-                    {% if product.get_categoria_display %}
-                        <span class="product-category">{{ product.get_categoria_display }}</span>
-                    {% endif %}
-                    <div class="product-stock">
-                        Stock: <strong>{{ product.stock }} unidades</strong>
-                    </div>
-                </div>
-            </div>
-
-
-            <div class="product-description">
-                <strong>Descripción:</strong>
-                <p style="margin-top: 8px;">{{ product.description }}</p>
+      <div class="product-container">
+        <div class="product-header">
+          <div class="product-image">
+            {% if product.photo %}
+            <img src="{{ product.photo.url }}" alt="{{ product.name }}" />
+            {% else %}
+            <img
+              src="{% static 'images/default_product.png' %}"
+              alt="Foto de producto por defecto"
+            />
+            {% endif %}
+          </div>
+          <div class="product-details">
+            <h1>{{ product.name }}</h1>
+            <div class="product-brand">{{ product.brand }}</div>
+            <div class="product-price">€ {{ product.price }}</div>
+            {% if product.get_categoria_display %}
+            <span class="product-category"
+              >{{ product.get_categoria_display }}</span
+            >
+            {% endif %}
+            <div class="product-stock">
+              Stock: <strong>{{ product.stock }} unidades</strong>
             </div>
+          </div>
+        </div>
 
+        <div class="product-description">
+          <strong>Descripción:</strong>
+          <p style="margin-top: 8px">{{ product.description }}</p>
+        </div>
 
-            <div class="info-grid">
-                <div class="info-item">
-                    <div class="info-label">Estado</div>
-                    <div class="info-value">
-                        {% if product.is_active %}
-                            <span style="color: #4caf50;">✓ Activo</span>
-                        {% else %}
-                            <span style="color: #f44336;">✗ Inactivo</span>
-                        {% endif %}
-                    </div>
-                </div>
-                <div class="info-item">
-                    <div class="info-label">ID Producto</div>
-                    <div class="info-value">#{{ product.id }}</div>
-                </div>
+        <div class="info-grid">
+          <div class="info-item">
+            <div class="info-label">Estado</div>
+            <div class="info-value">
+              {% if product.is_active %}
+              <span style="color: #4caf50">✓ Activo</span>
+              {% else %}
+              <span style="color: #f44336">✗ Inactivo</span>
+              {% endif %}
             </div>
+          </div>
+          <div class="info-item">
+            <div class="info-label">ID Producto</div>
+            <div class="info-value">#{{ product.id }}</div>
+          </div>
+        </div>
 
-
-            <div class="actions">
-                <a href="{% url 'product_list' %}" class="btn btn-back">← Volver</a>
-            </div>
+        <div class="actions">
+          <a
+            href="#"
+            onclick="history.back(); return false;"
+            class="btn btn-back"
+            title="Volver"
+            >← Volver</a
+          >
         </div>
+      </div>
     </div>
-</body>
+  </body>
 </html>
diff --git a/essenza/templates/product/detail_user.html b/essenza/templates/product/detail_user.html
index 49db3f2..19d40c1 100644
--- a/essenza/templates/product/detail_user.html
+++ b/essenza/templates/product/detail_user.html
@@ -1,326 +1,348 @@
 {% load static %}
 <!DOCTYPE html>
 <html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>{{ product.name }} - Essenza</title>
 
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background-color: #faf7f2;
+        font-family: "Segoe UI", Arial, sans-serif;
+        color: #333;
+        padding: 20px;
+      }
+      .container {
+        max-width: 900px;
+        margin: 0 auto;
+      }
+      .product-container {
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        padding: 30px;
+      }
+      .product-header {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 30px;
+        margin-bottom: 30px;
+      }
+      .product-image {
+        width: 100%;
+        height: 400px;
+        border-radius: 8px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        overflow: hidden;
+      }
+      .product-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      .product-details h1 {
+        color: #c06b3e;
+        font-size: 28px;
+        margin-bottom: 10px;
+      }
+      .product-brand {
+        color: #666;
+        font-size: 16px;
+        margin-bottom: 15px;
+        font-weight: 500;
+      }
+      .product-price {
+        font-size: 32px;
+        color: #333;
+        font-weight: bold;
+        margin-bottom: 15px;
+      }
+      .product-category {
+        display: inline-block;
+        background-color: #e8dcd8;
+        color: #c06b3e;
+        padding: 6px 12px;
+        border-radius: 4px;
+        margin-bottom: 20px;
+        font-size: 14px;
+      }
+      .product-stock {
+        font-size: 16px;
+        margin-bottom: 15px;
+      }
+      .product-stock strong {
+        color: #c06b3e;
+      }
+      .product-description {
+        background-color: #f9f5f2;
+        padding: 20px;
+        border-left: 4px solid #c06b3e;
+        margin: 30px 0;
+        border-radius: 4px;
+        line-height: 1.6;
+      }
+      .info-grid {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: 15px;
+        margin-top: 20px;
+      }
+      .info-item {
+        background-color: #f9f5f2;
+        padding: 12px;
+        border-radius: 4px;
+      }
+      .info-label {
+        color: #c06b3e;
+        font-weight: bold;
+        font-size: 12px;
+      }
+      .info-value {
+        margin-top: 6px;
+        font-size: 14px;
+      }
+
+      /* -------- BOTONES -------- */
+      .actions {
+        display: flex;
+        gap: 12px;
+        margin-top: 30px;
+        padding-top: 25px;
+        border-top: 1px solid #ddd;
+      }
+
+      .btn {
+        padding: 12px 20px;
+        border-radius: 8px;
+        font-weight: bold;
+        font-size: 15px;
+        border: none;
+        cursor: pointer;
+        transition: 0.25s ease;
+        flex: 1;
+        text-align: center;
+      }
+
+      .btn-back {
+        background: #ddd;
+        color: #333;
+      }
+      .btn-back:hover {
+        background: #c4c4c4;
+      }
+
+      /* ---- Botón PRO ---- */
+      .btn-add {
+        background: #c06b3e;
+        color: white;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 10px;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .btn-add:hover {
+        background: #a54f2b;
+      }
+
+      /* Icono + texto normal */
+      .add-text {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+      }
+
+      /* Animación de vibración */
+      .shake {
+        animation: shake 0.3s ease;
+      }
+
+      @keyframes shake {
+        0% {
+          transform: translateX(0);
         }
-        body {
-            background-color: #faf7f2;
-            font-family: 'Segoe UI', Arial, sans-serif;
-            color: #333;
-            padding: 20px;
+        25% {
+          transform: translateX(-4px);
         }
-        .container {
-            max-width: 900px;
-            margin: 0 auto;
+        50% {
+          transform: translateX(4px);
         }
-        .product-container {
-            background: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            padding: 30px;
+        75% {
+          transform: translateX(-4px);
         }
-        .product-header {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 30px;
-            margin-bottom: 30px;
-        }
-        .product-image {
-            width: 100%;
-            height: 400px;
-            background-color: #e8dcd8;
-            border-radius: 8px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            overflow: hidden;
-        }
-        .product-image img {
-            width: 100%;
-            height: 100%;
-            object-fit: cover;
-        }
-        .product-details h1 {
-            color: #c06b3e;
-            font-size: 28px;
-            margin-bottom: 10px;
-        }
-        .product-brand {
-            color: #666;
-            font-size: 16px;
-            margin-bottom: 15px;
-            font-weight: 500;
-        }
-        .product-price {
-            font-size: 32px;
-            color: #333;
-            font-weight: bold;
-            margin-bottom: 15px;
-        }
-        .product-category {
-            display: inline-block;
-            background-color: #e8dcd8;
-            color: #c06b3e;
-            padding: 6px 12px;
-            border-radius: 4px;
-            margin-bottom: 20px;
-            font-size: 14px;
-        }
-        .product-stock {
-            font-size: 16px;
-            margin-bottom: 15px;
-        }
-        .product-stock strong {
-            color: #c06b3e;
-        }
-        .product-description {
-            background-color: #f9f5f2;
-            padding: 20px;
-            border-left: 4px solid #c06b3e;
-            margin: 30px 0;
-            border-radius: 4px;
-            line-height: 1.6;
-        }
-        .info-grid {
-            display: grid;
-            grid-template-columns: 1fr 1fr;
-            gap: 15px;
-            margin-top: 20px;
-        }
-        .info-item {
-            background-color: #f9f5f2;
-            padding: 12px;
-            border-radius: 4px;
-        }
-        .info-label {
-            color: #c06b3e;
-            font-weight: bold;
-            font-size: 12px;
-        }
-        .info-value {
-            margin-top: 6px;
-            font-size: 14px;
-        }
-
-        /* -------- BOTONES -------- */
-        .actions {
-            display: flex;
-            gap: 12px;
-            margin-top: 30px;
-            padding-top: 25px;
-            border-top: 1px solid #ddd;
-        }
-
-        .btn {
-            padding: 12px 20px;
-            border-radius: 8px;
-            font-weight: bold;
-            font-size: 15px;
-            border: none;
-            cursor: pointer;
-            transition: .25s ease;
-            flex: 1;
-            text-align: center;
+        100% {
+          transform: translateX(0);
         }
-
-        .btn-back {
-            background: #ddd;
-            color: #333;
-        }
-        .btn-back:hover {
-            background: #c4c4c4;
+      }
+
+      /* Mensaje check verde */
+      .added-message {
+        display: none;
+        position: absolute;
+        inset: 0;
+        background: #4caf50;
+        color: white;
+        font-weight: bold;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+      }
+
+      .added-message.show {
+        display: flex;
+        animation: fade 1.8s ease;
+      }
+
+      @keyframes fade {
+        0% {
+          opacity: 0;
         }
-
-        /* ---- Botón PRO ---- */
-        .btn-add {
-            background: #c06b3e;
-            color: white;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            position: relative;
-            overflow: hidden;
+        10% {
+          opacity: 1;
         }
-
-        .btn-add:hover {
-            background: #a54f2b;
+        80% {
+          opacity: 1;
         }
-
-        /* Icono + texto normal */
-        .add-text {
-            display: flex;
-            align-items: center;
-            gap: 10px;
-        }
-
-        /* Animación de vibración */
-        .shake {
-            animation: shake 0.3s ease;
-        }
-
-        @keyframes shake {
-            0% { transform: translateX(0); }
-            25% { transform: translateX(-4px); }
-            50% { transform: translateX(4px); }
-            75% { transform: translateX(-4px); }
-            100% { transform: translateX(0); }
-        }
-
-        /* Mensaje check verde */
-        .added-message {
-            display: none;
-            position: absolute;
-            inset: 0;
-            background: #4caf50;
-            color: white;
-            font-weight: bold;
-            align-items: center;
-            justify-content: center;
-            border-radius: 8px;
+        100% {
+          opacity: 0;
         }
+      }
 
-        .added-message.show {
-            display: flex;
-            animation: fade 1.8s ease;
-        }
-
-        @keyframes fade {
-            0% { opacity: 0; }
-            10% { opacity: 1; }
-            80% { opacity: 1; }
-            100% { opacity: 0; }
+      @media (max-width: 768px) {
+        .product-header {
+          grid-template-columns: 1fr;
         }
-
-        @media (max-width: 768px) {
-            .product-header {
-                grid-template-columns: 1fr;
-            }
-            .actions {
-                flex-direction: column;
-            }
+        .actions {
+          flex-direction: column;
         }
+      }
     </style>
-</head>
-
-<body>
+  </head>
 
+  <body>
     <div class="container">
-        <div class="product-container">
-
-            <!-- -------- CABECERA DEL PRODUCTO -------- -->
-            <div class="product-header">
-
-                <div class="product-image">
-                    {% if product.photo %}
-                        <img src="{{ product.photo.url }}" alt="{{ product.name }}">
-                    {% else %}
-                        <img src="{% static 'images/default_photo.png' %}" alt="{{ product.name }}">
-                    {% endif %}
-
-
-                </div>
-
-                <div class="product-details">
-                    <h1>{{ product.name }}</h1>
-                    <div class="product-brand">{{ product.brand }}</div>
-                    <div class="product-price">€ {{ product.price }}</div>
-
-                    {% if product.get_categoria_display %}
-                        <span class="product-category">{{ product.get_categoria_display }}</span>
-                    {% endif %}
-
-                    <div class="product-stock">
-                        Stock: <strong>{{ product.stock }} unidades</strong>
-                    </div>
-                </div>
-            </div>
-
-            <!-- -------- DESCRIPCIÓN -------- -->
-            <div class="product-description">
-                <strong>Descripción:</strong>
-                <p style="margin-top: 10px;">{{ product.description }}</p>
+      <div class="product-container">
+        <!-- -------- CABECERA DEL PRODUCTO -------- -->
+        <div class="product-header">
+          <div class="product-image">
+            {% if product.photo %}
+            <img src="{{ product.photo.url }}" alt="{{ product.name }}" />
+            {% else %}
+            <img
+              src="{% static 'images/default_product.png' %}"
+              alt="{{ product.name }}"
+            />
+            {% endif %}
+          </div>
+
+          <div class="product-details">
+            <h1>{{ product.name }}</h1>
+            <div class="product-brand">{{ product.brand }}</div>
+            <div class="product-price">€ {{ product.price }}</div>
+
+            {% if product.get_categoria_display %}
+            <span class="product-category"
+              >{{ product.get_categoria_display }}</span
+            >
+            {% endif %}
+
+            <div class="product-stock">
+              Stock: <strong>{{ product.stock }} unidades</strong>
             </div>
+          </div>
+        </div>
 
-            <!-- -------- INFO EXTRA -------- -->
-            <div class="info-grid">
-                <div class="info-item">
-                    <div class="info-label">Estado</div>
-                    <div class="info-value">
-                        {% if product.is_active %}
-                            <span style="color: #4caf50;">✓ Activo</span>
-                        {% else %}
-                            <span style="color: #f44336;">✗ Inactivo</span>
-                        {% endif %}
-                    </div>
-                </div>
-                <div class="info-item">
-                    <div class="info-label">ID Producto</div>
-                    <div class="info-value">#{{ product.id }}</div>
-                </div>
-            </div>
-
-            <!-- -------- BOTONES -------- -->
-            <div class="actions">
-                
-                <!-- Botón PRO con animación -->
-                <button class="btn btn-add" id="addToCartBtn">
-
-                    <span class="add-text" id="normalText">
-                        <!-- Icono carrito -->
-                        <svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" fill="none" stroke="white" stroke-width="2"
-                            stroke-linecap="round" stroke-linejoin="round">
-                            <circle cx="9" cy="19" r="2"></circle>
-                            <circle cx="17" cy="19" r="2"></circle>
-                            <path d="M5 6h16l-1.5 9h-13z"></path>
-                            <path d="M5 6L4 3H1"></path>
-                        </svg>
-                        Añadir al carrito
-                    </span>
-
-                    <!-- Mensaje de añadido -->
-                    <span class="added-message" id="addedMessage">
-                        ✓ Añadido
-                    </span>
-
-                </button>
+        <!-- -------- DESCRIPCIÓN -------- -->
+        <div class="product-description">
+          <strong>Descripción:</strong>
+          <p style="margin-top: 10px">{{ product.description }}</p>
+        </div>
 
-                <a href="{% url 'catalog' %}" class="btn btn-back">← Volver</a>
+        <!-- -------- INFO EXTRA -------- -->
+        <div class="info-grid">
+          <div class="info-item">
+            <div class="info-label">Estado</div>
+            <div class="info-value">
+              {% if product.is_active %}
+              <span style="color: #4caf50">✓ Activo</span>
+              {% else %}
+              <span style="color: #f44336">✗ Inactivo</span>
+              {% endif %}
             </div>
+          </div>
+          <div class="info-item">
+            <div class="info-label">ID Producto</div>
+            <div class="info-value">#{{ product.id }}</div>
+          </div>
+        </div>
 
+        <!-- -------- BOTONES -------- -->
+        <div class="actions">
+          <!-- Botón PRO con animación -->
+          <button class="btn btn-add" id="addToCartBtn">
+            <span class="add-text" id="normalText">
+              <!-- Icono carrito -->
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="21"
+                height="21"
+                fill="none"
+                stroke="white"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <circle cx="9" cy="19" r="2"></circle>
+                <circle cx="17" cy="19" r="2"></circle>
+                <path d="M5 6h16l-1.5 9h-13z"></path>
+                <path d="M5 6L4 3H1"></path>
+              </svg>
+              Añadir al carrito
+            </span>
+
+            <!-- Mensaje de añadido -->
+            <span class="added-message" id="addedMessage"> ✓ Añadido </span>
+          </button>
+
+          <a
+            href="#"
+            onclick="history.back(); return false;"
+            class="btn btn-back"
+            title="Volver"
+            >← Volver</a
+          >
         </div>
+      </div>
     </div>
 
     <!-- -------- JS para animaciones -------- -->
     <script>
-        const btn = document.getElementById("addToCartBtn");
-        const addedMsg = document.getElementById("addedMessage");
-
-        btn.addEventListener("click", () => {
-
-            // Vibración ligera del botón
-            btn.classList.add("shake");
-
-            // Mostrar mensaje PRO animado
-            addedMsg.classList.add("show");
-
-            // Ocultarlo después de 1.8s
-            setTimeout(() => {
-                addedMsg.classList.remove("show");
-                btn.classList.remove("shake");
-            }, 1800);
-
-        });
+      const btn = document.getElementById("addToCartBtn");
+      const addedMsg = document.getElementById("addedMessage");
+
+      btn.addEventListener("click", () => {
+        // Vibración ligera del botón
+        btn.classList.add("shake");
+
+        // Mostrar mensaje PRO animado
+        addedMsg.classList.add("show");
+
+        // Ocultarlo después de 1.8s
+        setTimeout(() => {
+          addedMsg.classList.remove("show");
+          btn.classList.remove("shake");
+        }, 1800);
+      });
     </script>
-
-</body>
+  </body>
 </html>
diff --git a/essenza/templates/product/list.html b/essenza/templates/product/list.html
index c47b7c0..38f4cb6 100644
--- a/essenza/templates/product/list.html
+++ b/essenza/templates/product/list.html
@@ -1,400 +1,427 @@
 {% load static %}
 <!DOCTYPE html>
 <html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Lista de Productos - Essenza</title>
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            background-color: #faf7f2;
-            font-family: 'Segoe UI', Arial, sans-serif;
-            color: #333;
-            padding: 0;
-        }
-        .container {
-            /* Mantenemos el contenedor principal centrado para el contenido */
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 20px;
-        }
-        h1 {
-            color: #c06b3e;
-            text-align: center;
-            margin-bottom: 30px;
-            font-size: 32px;
-        }
-        .header-actions {
-            text-align: center;
-            margin-bottom: 30px;
-        }
-        .btn-create {
-            display: inline-block;
-            padding: 12px 30px;
-            background-color: #c06b3e;
-            color: white;
-            text-decoration: none;
-            border-radius: 5px;
-            font-weight: bold;
-            transition: background-color 0.3s;
-        }
-        .btn-create:hover {
-            background-color: #a35a34;
-        }
-        .products-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-            gap: 20px;
-        }
-        .product-card {
-            background: white;
-            border-radius: 8px;
-            overflow: hidden;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s, box-shadow 0.3s;
-        }
-        .product-card:hover {
-            transform: translateY(-5px);
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-        }
-        .product-image {
-            width: 100%;
-            height: 200px;
-            object-fit: cover;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            color: #999;
-            font-size: 14px;
-        }
-        .product-image img {
-            width: 100%;
-            height: 100%;
-            object-fit: contain;
-        }
-        .product-info {
-            padding: 15px;
-        }
-        .product-name {
-            font-size: 18px;
-            font-weight: bold;
-            color: #c06b3e;
-            margin-bottom: 8px;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        .product-brand {
-            font-size: 14px;
-            color: #666;
-            margin-bottom: 8px;
-        }
-        .product-price {
-            font-size: 20px;
-            font-weight: bold;
-            color: #333;
-            margin-bottom: 8px;
-        }
-        .product-stock {
-            font-size: 13px;
-            color: #999;
-            margin-bottom: 12px;
-        }
-        .product-actions {
-            display: flex;
-            gap: 8px;
-        }
-        .btn-small {
-            flex: 1;
-            padding: 8px 0px; 
-            text-decoration: none;
-            border-radius: 4px;
-            text-align: center;
-            font-size: 16px; 
-            font-weight: bold;
-            transition: opacity 0.3s;
-        }
-        
-        /* === ESTILO DE BOTÓN === */
-        .btn-detail {
-            background-color: #c06b3e; 
-            color: white;
-        }
-        .btn-detail:hover {
-            opacity: 0.8;
-        }
-        .btn-edit {
-            background-color: #B7B099; 
-            color: white;
-        }
-        .btn-edit:hover {
-            opacity: 0.8;
-        }
-        .btn-delete {
-            background-color: #c85a54; 
-            color: white;
-        }
-        .btn-delete:hover {
-            opacity: 0.8;
-        }
-        /* ======================== */
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      body {
+        background-color: #faf7f2;
+        font-family: "Segoe UI", Arial, sans-serif;
+        color: #333;
+        padding: 0;
+      }
+      .container {
+        /* Mantenemos el contenedor principal centrado para el contenido */
+        max-width: 1200px;
+        margin: 0 auto;
+        padding: 20px;
+      }
+      h1 {
+        color: #c06b3e;
+        text-align: center;
+        margin-bottom: 30px;
+        font-size: 32px;
+      }
+      .header-actions {
+        text-align: center;
+        margin-bottom: 30px;
+      }
+      .btn-create {
+        display: inline-block;
+        padding: 12px 30px;
+        background-color: #c06b3e;
+        color: white;
+        text-decoration: none;
+        border-radius: 5px;
+        font-weight: bold;
+        transition: background-color 0.3s;
+      }
+      .btn-create:hover {
+        background-color: #a35a34;
+      }
+      .products-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+        gap: 20px;
+      }
+      .product-card {
+        background: white;
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        transition: transform 0.3s, box-shadow 0.3s;
+      }
+      .product-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      }
+      .product-image {
+        width: 100%;
+        height: 200px;
+        object-fit: contain;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #999;
+        font-size: 14px;
+      }
+      .product-image img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
+      .product-info {
+        padding: 15px;
+      }
+      .product-name {
+        font-size: 18px;
+        font-weight: bold;
+        color: #c06b3e;
+        margin-bottom: 8px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .product-brand {
+        font-size: 14px;
+        color: #666;
+        margin-bottom: 8px;
+      }
+      .product-price {
+        font-size: 20px;
+        font-weight: bold;
+        color: #333;
+        margin-bottom: 8px;
+      }
+      .product-stock {
+        font-size: 13px;
+        color: #999;
+        margin-bottom: 12px;
+      }
+      .product-actions {
+        display: flex;
+        gap: 8px;
+      }
+      .btn-small {
+        flex: 1;
+        padding: 8px 0px;
+        text-decoration: none;
+        border-radius: 4px;
+        text-align: center;
+        font-size: 16px;
+        font-weight: bold;
+        transition: opacity 0.3s;
+      }
 
-        .empty-message {
-            text-align: center;
-            padding: 40px 20px;
-            color: #999;
-            font-size: 16px;
-        }
-        .footer {
-            text-align: center;
-            margin-top: 30px;
-            padding-top: 20px;
-            border-top: 1px solid #ddd;
-            color: #666;
-        }
-        
-        /* ====== CABECERA - CORRECCIÓN FINAL PARA PEGAR A EXTREMOS ====== */
-        header {
-            background-color: #fff;
-            border-bottom: 2px solid #c06b3e;
-            
-            /* CLAVE: Aplica FLEX al header para separar los grupos */
-            display: flex;     
-            justify-content: space-between; /* Separa left-group del profile-dropdown */
-            align-items: center;
-            
-            /* CLAVE: Añade padding a los lados para crear el margen visible */
-            padding: 14px 20px; 
-        }
+      /* === ESTILO DE BOTÓN === */
+      .btn-detail {
+        background-color: #c06b3e;
+        color: white;
+      }
+      .btn-detail:hover {
+        opacity: 0.8;
+      }
+      .btn-edit {
+        background-color: #b7b099;
+        color: white;
+      }
+      .btn-edit:hover {
+        opacity: 0.8;
+      }
+      .btn-delete {
+        background-color: #c85a54;
+        color: white;
+      }
+      .btn-delete:hover {
+        opacity: 0.8;
+      }
+      /* ======================== */
 
-        /* ELIMINAMOS .header-inner (ya no es necesario) */
-        
-        /* NUEVO: Contenedor para agrupar (i + ESSENZA + Buscar) */
-        .left-group {
-            display: flex;
-            align-items: center;
-            gap: 15px; /* Espacio entre los elementos i, ESSENZA y Buscar... */
-        }
-        
-        .info-button {
-            width: 30px;
-            height: 30px;
-            background-color: #c06b3e;
-            border-radius: 50%;
-            text-align: center;
-            line-height: 30px;
-            font-size: 18px;
-            font-weight: bold;
-            color: white;
-            text-decoration: none;
-            cursor: pointer;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-            transition: background-color 0.3s;
-        }
-        .info-button:hover {
-            background-color: #a35a34;
-        }
+      .empty-message {
+        text-align: center;
+        padding: 40px 20px;
+        color: #999;
+        font-size: 16px;
+      }
+      .footer {
+        text-align: center;
+        margin-top: 30px;
+        padding-top: 20px;
+        border-top: 1px solid #ddd;
+        color: #666;
+      }
 
-        .brand {
-            font-size: 32px;
-            color: #c06b3e;
-            font-weight: bold;
-            letter-spacing: 1px;
-        }
+      /* ====== CABECERA - CORRECCIÓN FINAL PARA PEGAR A EXTREMOS ====== */
+      header {
+        background-color: #fff;
+        border-bottom: 2px solid #c06b3e;
 
-        /* Barra de búsqueda: No debe crecer, solo tener un ancho fijo. */
-        .search-bar {
-            width: 250px; 
-            margin-left: 30px; /* Separación estética del logo */
-        }
+        /* CLAVE: Aplica FLEX al header para separar los grupos */
+        display: flex;
+        justify-content: space-between; /* Separa left-group del profile-dropdown */
+        align-items: center;
 
-        .search-bar input {
-            width: 100%;
-            max-width: 100%; 
-            padding: 8px 12px;
-            border: 1px solid #ccc;
-            border-radius: 20px;
-            background: #fafafa;
-        }
-        
-        /* ====== DESPLEGABLE DE PERFIL ====== */
-        .profile-dropdown {
-            position: relative;
-            display: inline-block;
-        }
-        .profile-icon-btn {
-            width: 34px;
-            height: 34px;
-            background-color: #c06b3e;
-            border-radius: 50%;
-            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
-            transition: background-color 0.3s;
-            border: none;
-            cursor: pointer;
-            padding: 0;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-        }
-        .profile-icon-btn:hover {
-            background-color: #a35a34;
-        }
-        .profile-icon-btn img {
-            display: block;
-        }
-        .dropdown-content {
-            display: none;
-            position: absolute;
-            right: 0;
-            top: 45px;
-            background-color: #ffffff;
-            min-width: 160px;
-            box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
-            border-radius: 8px;
-            z-index: 10;
-            overflow: hidden;
-        }
-        .dropdown-content a,
-        .dropdown-logout-btn {
-            color: #333;
-            padding: 12px 16px;
-            text-decoration: none;
-            display: block;
-            font-size: 14px;
-        }
-        .dropdown-logout-btn {
-            width: 100%;
-            text-align: left;
-            background: none;
-            border: none;
-            cursor: pointer;
-        }
-        .dropdown-content a:hover,
-        .dropdown-logout-btn:hover {
-            background-color: #f1f1f1;
-        }
-        .dropdown-content.show {
-            display: block;
-        }
+        /* CLAVE: Añade padding a los lados para crear el margen visible */
+        padding: 14px 20px;
+      }
+
+      /* ELIMINAMOS .header-inner (ya no es necesario) */
+
+      /* NUEVO: Contenedor para agrupar (i + ESSENZA + Buscar) */
+      .left-group {
+        display: flex;
+        align-items: center;
+        gap: 15px; /* Espacio entre los elementos i, ESSENZA y Buscar... */
+      }
+
+      .info-button {
+        width: 30px;
+        height: 30px;
+        background-color: #c06b3e;
+        border-radius: 50%;
+        text-align: center;
+        line-height: 30px;
+        font-size: 18px;
+        font-weight: bold;
+        color: white;
+        text-decoration: none;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        transition: background-color 0.3s;
+      }
+      .info-button:hover {
+        background-color: #a35a34;
+      }
+
+      .brand {
+        font-size: 32px;
+        color: #c06b3e;
+        font-weight: bold;
+        letter-spacing: 1px;
+      }
+
+      /* Barra de búsqueda: No debe crecer, solo tener un ancho fijo. */
+      .search-bar {
+        width: 250px;
+        margin-left: 30px; /* Separación estética del logo */
+      }
+
+      .search-bar input {
+        width: 100%;
+        max-width: 100%;
+        padding: 8px 12px;
+        border: 1px solid #ccc;
+        border-radius: 20px;
+        background: #fafafa;
+      }
+
+      /* ====== DESPLEGABLE DE PERFIL ====== */
+      .profile-dropdown {
+        position: relative;
+        display: inline-block;
+      }
+      .profile-icon-btn {
+        width: 34px;
+        height: 34px;
+        background-color: #c06b3e;
+        border-radius: 50%;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+        transition: background-color 0.3s;
+        border: none;
+        cursor: pointer;
+        padding: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .profile-icon-btn:hover {
+        background-color: #a35a34;
+      }
+      .profile-icon-btn img {
+        display: block;
+      }
+      .dropdown-content {
+        display: none;
+        position: absolute;
+        right: 0;
+        top: 45px;
+        background-color: #ffffff;
+        min-width: 160px;
+        box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
+        border-radius: 8px;
+        z-index: 10;
+        overflow: hidden;
+      }
+      .dropdown-content a,
+      .dropdown-logout-btn {
+        color: #333;
+        padding: 12px 16px;
+        text-decoration: none;
+        display: block;
+        font-size: 14px;
+      }
+      .dropdown-logout-btn {
+        width: 100%;
+        text-align: left;
+        background: none;
+        border: none;
+        cursor: pointer;
+      }
+      .dropdown-content a:hover,
+      .dropdown-logout-btn:hover {
+        background-color: #f1f1f1;
+      }
+      .dropdown-content.show {
+        display: block;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <header>
-        <div class="left-group"> 
-            <a href="/info/" class="info-button" title="Información Legal y Contacto">i</a>
-            <div class="brand">ESSENZA</div>
-            
-            <div class="search-bar">
-                <input type="text" placeholder="Buscar..." />
-            </div>
+      <div class="left-group">
+        <a
+          href="/info/"
+          class="info-button"
+          title="Información Legal y Contacto"
+          >i</a
+        >
+        <div class="brand">ESSENZA</div>
+
+        <div class="search-bar">
+          <input type="text" placeholder="Buscar..." />
         </div>
+      </div>
 
-        <div class="profile-dropdown">
-            <button onclick="toggleDropdown()" class="profile-icon-btn">
-                <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    width="24"
-                    height="24"
-                    fill="none"
-                    stroke="#fff"
-                    stroke-width="2"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                >
-                    <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
-                    <circle cx="12" cy="7" r="4"></circle>
-                </svg>
-            </button>
+      <div class="profile-dropdown">
+        <button onclick="toggleDropdown()" class="profile-icon-btn">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            fill="none"
+            stroke="#fff"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
+            <circle cx="12" cy="7" r="4"></circle>
+          </svg>
+        </button>
 
-            <div id="myDropdown" class="dropdown-content">
-                {% if user.is_authenticated %}
-                <a href="{% url 'profile' %}">Mi perfil</a>
-                {% if user.role == 'admin' %}
-                <a href="{% url 'stock' %}">Gestión de Stock</a>
-                <a href="{% url 'product_list' %}">Gestión de Productos</a>
-                {% endif %}
-                <a href="{% url 'logout' %}">Cerrar sesión</a>
-                {% else %}
-                <a href="{% url 'register' %}">Registrarse</a>
-                <a href="{% url 'login' %}">Iniciar sesión</a>
-                {% endif %}
-            </div>
+        <div id="myDropdown" class="dropdown-content">
+          {% if user.is_authenticated %}
+          <a href="{% url 'profile' %}">Mi perfil</a>
+          {% if user.role == 'admin' %}
+          <a href="{% url 'stock' %}">Gestión de Stock</a>
+          <a href="{% url 'product_list' %}">Gestión de Productos</a>
+          {% endif %}
+          <a href="{% url 'logout' %}">Cerrar sesión</a>
+          {% else %}
+          <a href="{% url 'register' %}">Registrarse</a>
+          <a href="{% url 'login' %}">Iniciar sesión</a>
+          {% endif %}
         </div>
+      </div>
     </header>
 
     <div class="container">
-        <h1>🌸 Productos Essenza</h1>
-        <div class="header-actions">
-            <a href="{% url 'product_create' %}" class="btn-create"> Crear producto</a>
-        </div>
-
+      <h1>🌸 Productos Essenza</h1>
+      <div class="header-actions">
+        <a href="{% url 'product_create' %}" class="btn-create">
+          Crear producto</a
+        >
+      </div>
 
-        {% if products %}
-            <div class="products-grid">
-                {% for product in products %}
-                    <div class="product-card">
-                        <div class="product-image">
-                            {% if product.photo %}
-                                <img src="{{ product.photo.url }}" alt="{{ product.name }}">
-                            {% else %}
-                                <span>Sin imagen</span>
-                            {% endif %}
-                        </div>
-                        <div class="product-info">
-                            <div class="product-name">{{ product.name }}</div>
-                            <div class="product-brand">{{ product.brand }}</div>
-                            <div class="product-price">€ {{ product.price }}</div>
-                            <div class="product-stock">Stock: {{ product.stock }}</div>
-                            <div class="product-actions">
-                                <a href="{% url 'product_detail' product.pk %}" class="btn-small btn-detail">Ver</a>
-                                <a href="{% url 'product_update' product.pk %}" class="btn-small btn-edit">Editar</a>
-                                <a href="{% url 'product_delete' product.pk %}" class="btn-small btn-delete">Borrar</a>
-                            </div>
-                        </div>
-                    </div>
-                {% endfor %}
+      {% if products %}
+      <div class="products-grid">
+        {% for product in products %}
+        <div class="product-card">
+          <div class="product-image">
+            {% if product.photo %}
+            <img src="{{ product.photo.url }}" alt="{{ product.name }}" />
+            {% else %}
+            <span>Sin imagen</span>
+            {% endif %}
+          </div>
+          <div class="product-info">
+            <div class="product-name">{{ product.name }}</div>
+            <div class="product-brand">{{ product.brand }}</div>
+            <div class="product-price">€ {{ product.price }}</div>
+            <div class="product-stock">Stock: {{ product.stock }}</div>
+            <div class="product-actions">
+              <a
+                href="{% url 'product_detail' product.pk %}"
+                class="btn-small btn-detail"
+                >Ver</a
+              >
+              <a
+                href="{% url 'product_update' product.pk %}"
+                class="btn-small btn-edit"
+                >Editar</a
+              >
+              <a
+                href="{% url 'product_delete' product.pk %}"
+                class="btn-small btn-delete"
+                >Borrar</a
+              >
             </div>
-        {% else %}
-            <div class="empty-message">
-                <p>No hay productos disponibles. <a href="{% url 'product_create' %}">¡Crea uno!</a></p>
-            </div>
-        {% endif %}
-
-
-        <div class="footer">
-            <p><a href="/product/stock" style="color: #c06b3e; text-decoration: none;">← Volver a inicio</a></p>
+          </div>
         </div>
+        {% endfor %}
+      </div>
+      {% else %}
+      <div class="empty-message">
+        <p>
+          No hay productos disponibles.
+          <a href="{% url 'product_create' %}">¡Crea uno!</a>
+        </p>
+      </div>
+      {% endif %}
+
+      <div class="footer">
+        <p>
+          <a
+            href="#"
+            onclick="history.back(); return false;"
+            style="color: #c06b3e; text-decoration: none"
+            >← Volver</a
+          >
+        </p>
+      </div>
     </div>
     <script>
-       /*
-        * Función para mostrar/ocultar el desplegable
-        */
-       function toggleDropdown() {
+      /*
+       * Función para mostrar/ocultar el desplegable
+       */
+      function toggleDropdown() {
         document.getElementById("myDropdown").classList.toggle("show");
       }
- 
+
       /*
-        * Cierra el desplegable si el usuario hace clic fuera de él
-        */
-       window.onclick = function (event) {
-         // Comprueba si el clic NO fue en el botón del ícono
-         if (!event.target.closest(".profile-icon-btn")) {
-           var dropdowns = document.getElementsByClassName("dropdown-content");
-           var i;
-           for (i = 0; i < dropdowns.length; i++) {
-             var openDropdown = dropdowns[i];
-             // Si el menú está abierto (tiene la clase .show), la cierra
-             if (openDropdown.classList.contains("show")) {
-               openDropdown.classList.remove("show");
-             }
-           }
-         }
-       };
-     </script>
-</body>
-</html>
\ No newline at end of file
+       * Cierra el desplegable si el usuario hace clic fuera de él
+       */
+      window.onclick = function (event) {
+        // Comprueba si el clic NO fue en el botón del ícono
+        if (!event.target.closest(".profile-icon-btn")) {
+          var dropdowns = document.getElementsByClassName("dropdown-content");
+          var i;
+          for (i = 0; i < dropdowns.length; i++) {
+            var openDropdown = dropdowns[i];
+            // Si el menú está abierto (tiene la clase .show), la cierra
+            if (openDropdown.classList.contains("show")) {
+              openDropdown.classList.remove("show");
+            }
+          }
+        }
+      };
+    </script>
+  </body>
+</html>
diff --git a/essenza/templates/product/stock.html b/essenza/templates/product/stock.html
index 60ae8f0..e4779cf 100644
--- a/essenza/templates/product/stock.html
+++ b/essenza/templates/product/stock.html
@@ -157,7 +157,7 @@
       .product-card img {
         width: 140px;
         height: 140px;
-        object-fit: cover;
+        object-fit: contain;
         border-radius: 10px;
         flex-shrink: 0;
       }
@@ -302,7 +302,7 @@
         {% if p.photo %}
         <img src="{{ p.photo.url }}" />
         {% else %}
-        <img src="{% static 'images/default_photo.png' %}" />
+        <img src="{% static 'images/default_product.png' %}" />
         {% endif %}
 
         <div class="product-info">
diff --git a/essenza/templates/user/profile.html b/essenza/templates/user/profile.html
index 7bd27ee..35ec3b9 100644
--- a/essenza/templates/user/profile.html
+++ b/essenza/templates/user/profile.html
@@ -80,7 +80,7 @@
         width: 150px;
         height: 150px;
         border-radius: 50%;
-        object-fit: cover;
+        object-fit: contain;
         display: block;
         margin: 10px auto;
         border: 2px solid var(--color-principal);