diff --git a/essenza/product/forms.py b/essenza/product/forms.py
index c9369a9..6d54eab 100644
--- a/essenza/product/forms.py
+++ b/essenza/product/forms.py
@@ -4,6 +4,18 @@
 
 
 class ProductForm(forms.ModelForm):
+    photo = forms.ImageField(
+        label="Foto (Opcional)", required=False, widget=forms.FileInput
+    )
+    remove_photo = forms.BooleanField(required=False, label="Eliminar foto actual")
+    stock = forms.IntegerField(label="Cantidad en stock", min_value=0, required=False)
+    is_active = forms.BooleanField(
+        required=False, label="Producto activo", initial=True
+    )
+    description = forms.CharField(
+        label="Descripción", widget=forms.Textarea(attrs={"rows": 4})
+    )
+
     class Meta:
         model = Product
         fields = [
diff --git a/essenza/product/models.py b/essenza/product/models.py
index cb526a4..fe62df7 100644
--- a/essenza/product/models.py
+++ b/essenza/product/models.py
@@ -16,7 +16,7 @@ class Product(models.Model):
     brand = models.CharField(max_length=255)
     price = models.DecimalField(max_digits=10, decimal_places=2)
     photo = models.ImageField(upload_to="products/", null=True, blank=True)
-    stock = models.IntegerField()
+    stock = models.IntegerField(default=0)
     is_active = models.BooleanField(default=False)
 
     def __str__(self):
diff --git a/essenza/product/sample/sample.json b/essenza/product/sample/sample.json
index 260c486..9237432 100644
--- a/essenza/product/sample/sample.json
+++ b/essenza/product/sample/sample.json
@@ -1,282 +1,282 @@
 [
-    {
-        "model": "product.product",
-        "pk": 1,
-        "fields": {
-            "name": "Maquillaje Base",
-            "description": "Base líquida para rostro, de acabado mate, 30ml.",
-            "category": "maquillaje",
-            "brand": "L'Oréal",
-            "price": 19.99,
-            "photo": "products/maquillaje_base.jpg",
-            "stock": 50,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 2,
-        "fields": {
-            "name": "Shampoo Reconstructivo",
-            "description": "Shampoo nutritivo para cabellos dañados, 500ml.",
-            "category": "tratamiento",
-            "brand": "Pantene",
-            "price": 6.99,
-            "photo": "products/shampoo_reconstructivo.jpg",
-            "stock": 100,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 3,
-        "fields": {
-            "name": "Secador de Pelo",
-            "description": "Secador de pelo con 3 niveles de temperatura, 2000W.",
-            "category": "cabello",
-            "brand": "Braun",
-            "price": 45.99,
-            "photo": "products/secador_pelo.jpg",
-            "stock": 30,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 4,
-        "fields": {
-            "name": "Perfume Floral",
-            "description": "Perfume con notas de jazmín y rosa, 100ml.",
-            "category": "perfume",
-            "brand": "Chanel",
-            "price": 79.99,
-            "photo": "products/perfume_floral.jpg",
-            "stock": 20,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 5,
-        "fields": {
-            "name": "Crema Hidratante",
-            "description": "Crema hidratante para piel seca, 50ml.",
-            "category": "tratamiento",
-            "brand": "Nivea",
-            "price": 12.99,
-            "photo": "products/crema_hidratante.jpg",
-            "stock": 150,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 6,
-        "fields": {
-            "name": "Rizador de Pelo",
-            "description": "Rizador de pelo con control de temperatura, 25mm.",
-            "category": "cabello",
-            "brand": "Remington",
-            "price": 29.99,
-            "photo": "products/rizador_pelo.jpg",
-            "stock": 40,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 7,
-        "fields": {
-            "name": "Gel Antibacterial",
-            "description": "Gel antibacterial para manos, 250ml.",
-            "category": "tratamiento",
-            "brand": "Dettol",
-            "price": 4.99,
-            "photo": "products/gel_antibacterial.jpg",
-            "stock": 200,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 8,
-        "fields": {
-            "name": "Shampoo Anticaspa",
-            "description": "Shampoo anticaspa para cuero cabelludo sensible, 400ml.",
-            "category": "tratamiento",
-            "brand": "Head & Shoulders",
-            "price": 7.99,
-            "photo": "products/shampoo_anticaspa.jpg",
-            "stock": 90,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 9,
-        "fields": {
-            "name": "Aceite Capilar",
-            "description": "Aceite nutritivo para el cabello, 150ml.",
-            "category": "tratamiento",
-            "brand": "Argan Oil",
-            "price": 15.99,
-            "photo": "products/aceite_capilar.jpg",
-            "stock": 60,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 10,
-        "fields": {
-            "name": "Tinte de Cabello",
-            "description": "Tinte permanente para cabello, color castaño claro.",
-            "category": "cabello",
-            "brand": "Garnier",
-            "price": 8.99,
-            "photo": "products/tinte_cabello.jpg",
-            "stock": 110,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 11,
-        "fields": {
-            "name": "Mascarilla Facial",
-            "description": "Mascarilla hidratante para todo tipo de piel, 100ml.",
-            "category": "tratamiento",
-            "brand": "L'Oréal",
-            "price": 18.99,
-            "photo": "products/mascarilla_facial.jpg",
-            "stock": 80,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 12,
-        "fields": {
-            "name": "Shampoo Voluminizador",
-            "description": "Shampoo voluminizador para cabellos finos, 300ml.",
-            "category": "tratamiento",
-            "brand": "TRESemmé",
-            "price": 5.99,
-            "photo": "products/shampoo_voluminizador.jpg",
-            "stock": 120,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 13,
-        "fields": {
-            "name": "Laca de Pelo",
-            "description": "Laca fijadora para todo el día, 400ml.",
-            "category": "cabello",
-            "brand": "Schwarzkopf",
-            "price": 10.99,
-            "photo": "products/laca_pelo.jpg",
-            "stock": 70,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 14,
-        "fields": {
-            "name": "Crema Solar",
-            "description": "Protección solar SPF 50+, 200ml.",
-            "category": "tratamiento",
-            "brand": "Hawaiian Tropic",
-            "price": 14.99,
-            "photo": "products/crema_solar.jpg",
-            "stock": 40,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 15,
-        "fields": {
-            "name": "Crema Antiedad",
-            "description": "Crema antiarrugas para el rostro, 50ml.",
-            "category": "tratamiento",
-            "brand": "Olay",
-            "price": 25.99,
-            "photo": "products/crema_antiedad.jpg",
-            "stock": 30,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 16,
-        "fields": {
-            "name": "Desodorante",
-            "description": "Desodorante en barra, 75g.",
-            "category": "tratamiento",
-            "brand": "Dove",
-            "price": 3.99,
-            "photo": "products/desodorante.jpg",
-            "stock": 150,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 17,
-        "fields": {
-            "name": "Toallitas Desmaquillantes",
-            "description": "Toallitas para desmaquillar, 25 unidades.",
-            "category": "tratamiento",
-            "brand": "Neutrogena",
-            "price": 4.49,
-            "photo": "products/toallitas_desmaquillantes.jpg",
-            "stock": 90,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 18,
-        "fields": {
-            "name": "Pincel de Maquillaje",
-            "description": "Pincel para base líquida, cerdas suaves.",
-            "category": "maquillaje",
-            "brand": "Real Techniques",
-            "price": 12.99,
-            "photo": "products/pincel_maquillaje.jpg",
-            "stock": 110,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 19,
-        "fields": {
-            "name": "Crema para Pies",
-            "description": "Crema reparadora para pies agrietados, 100ml.",
-            "category": "tratamiento",
-            "brand": "Eucerin",
-            "price": 9.99,
-            "photo": "products/crema_pies.jpg",
-            "stock": 80,
-            "is_active": true
-        }
-    },
-    {
-        "model": "product.product",
-        "pk": 20,
-        "fields": {
-            "name": "Limpieza Facial",
-            "description": "Gel limpiador facial suave, 200ml.",
-            "category": "tratamiento",
-            "brand": "Neutrogena",
-            "price": 7.49,
-            "photo": "products/limpieza_facial.jpg",
-            "stock": 130,
-            "is_active": true
-        }
+  {
+    "model": "product.product",
+    "pk": 1,
+    "fields": {
+      "name": "Maquillaje Base",
+      "description": "Base líquida para rostro, de acabado mate, 30ml.",
+      "category": "maquillaje",
+      "brand": "L'Oréal",
+      "price": 19.99,
+      "photo": "products/maquillaje_base.jpg",
+      "stock": 50,
+      "is_active": true
     }
+  },
+  {
+    "model": "product.product",
+    "pk": 2,
+    "fields": {
+      "name": "Champú Reconstructivo",
+      "description": "Champú nutritivo para cabellos dañados, 500ml.",
+      "category": "tratamiento",
+      "brand": "Pantene",
+      "price": 6.99,
+      "photo": "products/shampoo_reconstructivo.jpg",
+      "stock": 100,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 3,
+    "fields": {
+      "name": "Secador de Pelo",
+      "description": "Secador de pelo con 3 niveles de temperatura, 2000W.",
+      "category": "cabello",
+      "brand": "Braun",
+      "price": 45.99,
+      "photo": "products/secador_pelo.jpg",
+      "stock": 30,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 4,
+    "fields": {
+      "name": "Perfume Floral",
+      "description": "Perfume con notas de jazmín y rosa, 100ml.",
+      "category": "perfume",
+      "brand": "Chanel",
+      "price": 79.99,
+      "photo": "products/perfume_floral.jpg",
+      "stock": 20,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 5,
+    "fields": {
+      "name": "Crema Hidratante",
+      "description": "Crema hidratante para piel seca, 50ml.",
+      "category": "tratamiento",
+      "brand": "Nivea",
+      "price": 12.99,
+      "photo": "products/crema_hidratante.jpg",
+      "stock": 150,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 6,
+    "fields": {
+      "name": "Rizador de Pelo",
+      "description": "Rizador de pelo con control de temperatura, 25mm.",
+      "category": "cabello",
+      "brand": "Remington",
+      "price": 29.99,
+      "photo": "products/rizador_pelo.jpg",
+      "stock": 40,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 7,
+    "fields": {
+      "name": "Gel Antibacterial",
+      "description": "Gel antibacterial para manos, 250ml.",
+      "category": "tratamiento",
+      "brand": "Dettol",
+      "price": 4.99,
+      "photo": "products/gel_antibacterial.jpg",
+      "stock": 200,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 8,
+    "fields": {
+      "name": "Champú Anticaspa",
+      "description": "Champú anticaspa para cuero cabelludo sensible, 400ml.",
+      "category": "tratamiento",
+      "brand": "Head & Shoulders",
+      "price": 7.99,
+      "photo": "products/shampoo_anticaspa.jpg",
+      "stock": 90,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 9,
+    "fields": {
+      "name": "Aceite Capilar",
+      "description": "Aceite nutritivo para el cabello, 150ml.",
+      "category": "tratamiento",
+      "brand": "Argan Oil",
+      "price": 15.99,
+      "photo": "products/aceite_capilar.jpg",
+      "stock": 60,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 10,
+    "fields": {
+      "name": "Tinte de Pelo",
+      "description": "Tinte permanente para pelo, color castaño claro.",
+      "category": "cabello",
+      "brand": "Garnier",
+      "price": 8.99,
+      "photo": "products/tinte_cabello.jpg",
+      "stock": 110,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 11,
+    "fields": {
+      "name": "Mascarilla Facial",
+      "description": "Mascarilla hidratante para todo tipo de piel, 100ml.",
+      "category": "tratamiento",
+      "brand": "L'Oréal",
+      "price": 18.99,
+      "photo": "products/mascarilla_facial.jpg",
+      "stock": 80,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 12,
+    "fields": {
+      "name": "Champú Voluminizador",
+      "description": "Champú voluminizador para cabellos finos, 300ml.",
+      "category": "tratamiento",
+      "brand": "TRESemmé",
+      "price": 5.99,
+      "photo": "products/shampoo_voluminizador.jpg",
+      "stock": 120,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 13,
+    "fields": {
+      "name": "Laca de Pelo",
+      "description": "Laca fijadora para todo el día, 400ml.",
+      "category": "cabello",
+      "brand": "Schwarzkopf",
+      "price": 10.99,
+      "photo": "products/laca_pelo.jpg",
+      "stock": 70,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 14,
+    "fields": {
+      "name": "Crema Solar",
+      "description": "Protección solar SPF 50+, 200ml.",
+      "category": "tratamiento",
+      "brand": "Hawaiian Tropic",
+      "price": 14.99,
+      "photo": "products/crema_solar.jpg",
+      "stock": 40,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 15,
+    "fields": {
+      "name": "Crema Antiedad",
+      "description": "Crema antiarrugas para el rostro, 50ml.",
+      "category": "tratamiento",
+      "brand": "Olay",
+      "price": 25.99,
+      "photo": "products/crema_antiedad.jpg",
+      "stock": 30,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 16,
+    "fields": {
+      "name": "Desodorante",
+      "description": "Desodorante en barra, 75g.",
+      "category": "tratamiento",
+      "brand": "Dove",
+      "price": 3.99,
+      "photo": "products/desodorante.jpg",
+      "stock": 150,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 17,
+    "fields": {
+      "name": "Toallitas Desmaquillantes",
+      "description": "Toallitas para desmaquillar, 25 unidades.",
+      "category": "tratamiento",
+      "brand": "Neutrogena",
+      "price": 4.49,
+      "photo": "products/toallitas_desmaquillantes.jpg",
+      "stock": 90,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 18,
+    "fields": {
+      "name": "Pincel de Maquillaje",
+      "description": "Pincel para base líquida, cerdas suaves.",
+      "category": "maquillaje",
+      "brand": "Real Techniques",
+      "price": 12.99,
+      "photo": "products/pincel_maquillaje.jpg",
+      "stock": 110,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 19,
+    "fields": {
+      "name": "Crema para Pies",
+      "description": "Crema reparadora para pies agrietados, 100ml.",
+      "category": "tratamiento",
+      "brand": "Eucerin",
+      "price": 9.99,
+      "photo": "products/crema_pies.jpg",
+      "stock": 80,
+      "is_active": true
+    }
+  },
+  {
+    "model": "product.product",
+    "pk": 20,
+    "fields": {
+      "name": "Limpieza Facial",
+      "description": "Gel limpiador facial suave, 200ml.",
+      "category": "tratamiento",
+      "brand": "Neutrogena",
+      "price": 7.49,
+      "photo": "products/limpieza_facial.jpg",
+      "stock": 130,
+      "is_active": true
+    }
+  }
 ]
diff --git a/essenza/product/views.py b/essenza/product/views.py
index 783a03f..bb824ea 100644
--- a/essenza/product/views.py
+++ b/essenza/product/views.py
@@ -118,7 +118,7 @@ def get(self, request, pk):
 
 
 class ProductCreateView(LoginRequiredMixin, UserPassesTestMixin, View):
-    template_name = "product/form.html"
+    template_name = "product/create_product.html"
     form_class = ProductForm
 
     def test_func(self):
@@ -137,7 +137,7 @@ def post(self, request):
 
 
 class ProductUpdateView(LoginRequiredMixin, UserPassesTestMixin, View):
-    template_name = "product/form.html"
+    template_name = "product/update_product.html"
     form_class = ProductForm
 
     def test_func(self):
diff --git a/essenza/templates/base.html b/essenza/templates/base.html
index 81e3c78..5e04e96 100644
--- a/essenza/templates/base.html
+++ b/essenza/templates/base.html
@@ -1,313 +1,363 @@
 {% load static %}
-<!doctype html>
+<!DOCTYPE html>
 <html lang="es">
-<head>
-  <meta charset="utf-8">
-  <title>{% block title %}Essenza{% endblock %}</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-
-  <style>
-    body { margin: 0; background-color: #faf7f2; font-family: 'Segoe UI', Arial, sans-serif; }
-
-    /* ====== NAVBAR / CABECERA ====== */
-    header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 18px 40px;
-      background: linear-gradient(to bottom, #ffffff 0%, #fcfcfc 100%);
-      border-bottom: 1px solid #e8e0d8;
-      box-shadow: 0 2px 12px rgba(192, 107, 62, 0.08);
-    }
-
-    .nav-left, .nav-center, .nav-right { display: flex; align-items: center; }
-
-    .brand { 
-      font-size: 30px; 
-      color: #c06b3e; 
-      font-weight: 700; 
-      letter-spacing: 2px; 
-      text-decoration: none;
-      transition: all 0.3s ease;
-    }
-    .brand:hover { 
-      color: #a35a34;
-      letter-spacing: 2.5px;
-    }
-
-    .nav-links { margin-left: 30px; display: flex; gap: 8px; }
-    .nav-links a { 
-      color: #c06b3e; 
-      text-decoration: none; 
-      padding: 10px 18px; 
-      border-radius: 20px;
-      font-size: 15px;
-      font-weight: 600;
-      transition: all 0.3s ease;
-      border: 2px solid transparent;
-    }
-    .nav-links a:hover { 
-      background: #c06b3e;
-      color: #fff;
-      border-color: #c06b3e;
-      transform: translateY(-2px);
-      box-shadow: 0 4px 12px rgba(192, 107, 62, 0.25);
-    }
-
-    /* Centrar el buscador */
-    .nav-center {
-      flex: 1;
-      justify-content: center;
-    }
+  <head>
+    <meta charset="utf-8" />
+    <title>{% block title %}Essenza{% endblock %}</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+    <style>
+      body {
+        margin: 0;
+        background-color: #faf7f2;
+        font-family: "Segoe UI", Arial, sans-serif;
+      }
 
-    .search-bar input { 
-      width: 100%; 
-      max-width: 420px; 
-      padding: 11px 20px; 
-      border: 1px solid #e0d5ca; 
-      border-radius: 24px; 
-      background: #fafafa;
-      font-size: 14px;
-      transition: all 0.3s ease;
-      box-shadow: 0 2px 6px rgba(0,0,0,0.04);
-    }
-    .search-bar input:focus {
-      outline: none;
-      border-color: #c06b3e;
-      background: #fff;
-      box-shadow: 0 4px 12px rgba(192, 107, 62, 0.12);
-    }
+      /* ====== NAVBAR / CABECERA ====== */
+      header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 18px 40px;
+        background: linear-gradient(to bottom, #ffffff 0%, #fcfcfc 100%);
+        border-bottom: 1px solid #e8e0d8;
+        box-shadow: 0 2px 12px rgba(192, 107, 62, 0.08);
+        position: sticky;
+        top: 0;
+        z-index: 1000;
+      }
 
-    /* Info link en la derecha */
-    .nav-info a {
-      color: #c06b3e; 
-      text-decoration: none; 
-      margin-right: 20px;
-      font-weight: 600;
-      transition: all 0.3s ease;
-    }
-    .nav-info a:hover {
-      color: #a35a34;
-    }
+      .nav-left,
+      .nav-center,
+      .nav-right {
+        display: flex;
+        align-items: center;
+      }
 
-    /* Profile dropdown */
-    .profile-dropdown { position: relative; display: inline-block; }
-    .profile-icon-btn { 
-      background-color: #fff; 
-      border: 2px solid #c06b3e; 
-      border-radius: 50%; 
-      cursor: pointer; 
-      padding: 6px; 
-      display: flex; 
-      align-items: center; 
-      justify-content: center; 
-      transition: all 0.3s ease;
-      box-shadow: 0 2px 6px rgba(192, 107, 62, 0.15);
-    }
-    .profile-icon-btn:hover { 
-      background-color: #faf7f2;
-      transform: scale(1.05);
-      box-shadow: 0 4px 12px rgba(192, 107, 62, 0.25);
-    }
-    .dropdown-content { 
-      display: none; 
-      position: absolute; 
-      right: 0; 
-      top: 50px; 
-      background-color: #ffffff; 
-      min-width: 180px; 
-      box-shadow: 0 12px 24px rgba(0,0,0,0.15);
-      border-radius: 12px; 
-      z-index: 10; 
-      overflow: hidden;
-      border: 1px solid #f0e8e0;
-    }
-    .dropdown-content a, .dropdown-logout-btn { 
-      color: #333; 
-      padding: 14px 20px; 
-      text-decoration: none; 
-      display: block; 
-      font-size: 14.5px;
-      font-weight: 500;
-      transition: all 0.2s ease;
-    }
-    .dropdown-logout-btn { 
-      width: 100%; 
-      text-align: left; 
-      background: none; 
-      border: none; 
-      cursor: pointer; 
-      font-family: inherit;
-    }
-    .dropdown-content a:hover, .dropdown-logout-btn:hover { 
-      background: linear-gradient(to right, #faf7f2 0%, #f5f0ea 100%);
-      color: #c06b3e;
-      padding-left: 24px;
-    }
-    .dropdown-content.show { display: block; }
+      .brand {
+        font-size: 30px;
+        color: #c06b3e;
+        font-weight: 700;
+        letter-spacing: 2px;
+        text-decoration: none;
+        transition: all 0.3s ease;
+      }
+      .brand:hover {
+        color: #a35a34;
+        letter-spacing: 2.5px;
+      }
 
-    /* ====== ESCAPARATE ====== */
-    main {
-      max-width: 1100px;
-      margin: 40px auto;
-      display: grid;
-      grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-      gap: 20px;
-      padding: 0 24px;
-    }
+      .nav-links {
+        margin-left: 30px;
+        display: flex;
+        gap: 8px;
+      }
+      .nav-links a {
+        color: #c06b3e;
+        text-decoration: none;
+        padding: 10px 18px;
+        border-radius: 20px;
+        font-size: 15px;
+        font-weight: 600;
+        transition: all 0.3s ease;
+        border: 2px solid transparent;
+      }
+      .nav-links a:hover {
+        background: #c06b3e;
+        color: #fff;
+        border-color: #c06b3e;
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(192, 107, 62, 0.25);
+      }
 
-    .product-card {
-      background: #fff;
-      border: 1px solid #eee;
-      border-radius: 12px;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
-      text-align: center;
-      padding: 16px;
-      transition: transform .2s ease;
-    }
+      /* Centrar el buscador */
+      .nav-center {
+        flex: 1;
+        justify-content: center;
+      }
 
-    .product-card:hover {
-      transform: translateY(-4px);
-    }
+      .search-bar input {
+        width: 100%;
+        max-width: 420px;
+        padding: 11px 20px;
+        border: 1px solid #e0d5ca;
+        border-radius: 24px;
+        background: #fafafa;
+        font-size: 14px;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
+      }
+      .search-bar input:focus {
+        outline: none;
+        border-color: #c06b3e;
+        background: #fff;
+        box-shadow: 0 4px 12px rgba(192, 107, 62, 0.12);
+      }
 
-    .product-card img {
-      width: 100%;
-      height: 180px;
-      object-fit: cover;
-      border-radius: 10px;
-    }
+      /* Info link en la derecha */
+      .nav-info a {
+        color: #c06b3e;
+        text-decoration: none;
+        margin-right: 20px;
+        font-weight: 600;
+        transition: all 0.3s ease;
+      }
+      .nav-info a:hover {
+        color: #a35a34;
+      }
 
-    .product-name {
-      font-size: 15px;
-      color: #333;
-      margin-top: 10px;
-      font-weight: 500;
-    }
+      /* Profile dropdown */
+      .profile-dropdown {
+        position: relative;
+        display: inline-block;
+      }
+      .profile-icon-btn {
+        background-color: #fff;
+        border: 2px solid #c06b3e;
+        border-radius: 50%;
+        cursor: pointer;
+        padding: 6px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        transition: all 0.3s ease;
+        box-shadow: 0 2px 6px rgba(192, 107, 62, 0.15);
+      }
+      .profile-icon-btn:hover {
+        background-color: #faf7f2;
+        transform: scale(1.05);
+        box-shadow: 0 4px 12px rgba(192, 107, 62, 0.25);
+      }
+      .dropdown-content {
+        display: none;
+        position: absolute;
+        right: 0;
+        top: 50px;
+        background-color: #ffffff;
+        min-width: 180px;
+        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
+        border-radius: 12px;
+        z-index: 10;
+        overflow: hidden;
+        border: 1px solid #f0e8e0;
+      }
+      .dropdown-content a,
+      .dropdown-logout-btn {
+        color: #333;
+        padding: 14px 20px;
+        text-decoration: none;
+        display: block;
+        font-size: 14.5px;
+        font-weight: 500;
+        transition: all 0.2s ease;
+      }
+      .dropdown-logout-btn {
+        width: 100%;
+        text-align: left;
+        background: none;
+        border: none;
+        cursor: pointer;
+        font-family: inherit;
+      }
+      .dropdown-content a:hover,
+      .dropdown-logout-btn:hover {
+        background: linear-gradient(to right, #faf7f2 0%, #f5f0ea 100%);
+        color: #c06b3e;
+        padding-left: 24px;
+      }
+      .dropdown-content.show {
+        display: block;
+      }
 
-    .product-price {
-      color: #c06b3e;
-      font-weight: bold;
-      margin-top: 6px;
-    }
+      /* ====== ESCAPARATE ====== */
+      main {
+        max-width: 1100px;
+        margin: 40px auto;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+        gap: 20px;
+        padding: 0 24px;
+      }
 
-    .info-button {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      width: 28px;
-      height: 28px;
-      margin-right: 25px; /* 🔹 más separación del perfil */
-      background: linear-gradient(145deg, #c06b3e, #d77b46);
-      border: 1.5px solid #b35f35;
-      border-radius: 50%;
-      color: #fff;
-      font-family: 'Georgia', 'Times New Roman', serif;
-      font-style: italic;
-      font-weight: bold;
-      font-size: 16px;
-      text-decoration: none;
-      cursor: pointer;
-      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.25);
-      transition: all 0.25s ease;
-    }
+      .product-card {
+        background: #fff;
+        border: 1px solid #eee;
+        border-radius: 12px;
+        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+        text-align: center;
+        padding: 16px;
+        transition: transform 0.2s ease;
+      }
 
-    .info-button:hover {
-      background: linear-gradient(145deg, #a35a34, #c06b3e);
-      transform: scale(1.08);
-      box-shadow: 0 3px 8px rgba(192, 107, 62, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.25);
-    }
+      .product-card:hover {
+        transform: translateY(-4px);
+      }
 
+      .product-card img {
+        width: 100%;
+        height: 180px;
+        object-fit: cover;
+        border-radius: 10px;
+      }
 
+      .product-name {
+        font-size: 15px;
+        color: #333;
+        margin-top: 10px;
+        font-weight: 500;
+      }
 
+      .product-price {
+        color: #c06b3e;
+        font-weight: bold;
+        margin-top: 6px;
+      }
 
-    /* Responsive */
-    @media (max-width: 768px) {
-      header { flex-wrap: wrap; padding: 12px 20px; }
-      .nav-center { order: 3; width: 100%; margin-top: 12px; }
-      .search-bar input { max-width: 100%; }
-    }
-  </style>
+      .info-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 28px;
+        height: 28px;
+        margin-right: 25px; /* 🔹 más separación del perfil */
+        background: linear-gradient(145deg, #c06b3e, #d77b46);
+        border: 1.5px solid #b35f35;
+        border-radius: 50%;
+        color: #fff;
+        font-family: "Georgia", "Times New Roman", serif;
+        font-style: italic;
+        font-weight: bold;
+        font-size: 16px;
+        text-decoration: none;
+        cursor: pointer;
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25),
+          inset 0 1px 1px rgba(255, 255, 255, 0.25);
+        transition: all 0.25s ease;
+      }
 
-  {% block extra_head %}{% endblock %}
-</head>
-<body>
+      .info-button:hover {
+        background: linear-gradient(145deg, #a35a34, #c06b3e);
+        transform: scale(1.08);
+        box-shadow: 0 3px 8px rgba(192, 107, 62, 0.35),
+          inset 0 1px 2px rgba(255, 255, 255, 0.25);
+      }
 
-  <header>
-    
-    <div class="nav-left">
-      <a href="/info/" class="info-button" title="Información">i</a>
-      <a href="/" class="brand">ESSENZA</a>
-      <nav class="nav-links" aria-label="Navegación principal">
-        {% if not user.is_staff and not user.is_superuser %}
-        <a href="/">Escaparate</a>
-        <a href="/catalogo">Catalogo</a>
-        {% endif %}
-        {% if user.is_staff or user.is_superuser %}
+      /* Responsive */
+      @media (max-width: 768px) {
+        header {
+          flex-wrap: wrap;
+          padding: 12px 20px;
+        }
+        .nav-center {
+          order: 3;
+          width: 100%;
+          margin-top: 12px;
+        }
+        .search-bar input {
+          max-width: 100%;
+        }
+      }
+    </style>
+
+    {% block extra_head %}{% endblock %}
+  </head>
+  <body>
+    <header>
+      <div class="nav-left">
+        <a href="/info/" class="info-button" title="Información">i</a>
+        <a href="/" class="brand">ESSENZA</a>
+        <nav class="nav-links" aria-label="Navegación principal">
+          {% if not user.is_staff and not user.is_superuser %}
+          <a href="/">Escaparate</a>
+          <a href="/catalogo">Catalogo</a>
+          {% endif %} {% if user.is_staff or user.is_superuser %}
           <a href="/product/stock/">Stock</a>
           <a href="/product/">Productos</a>
-        {% endif %}
-      </nav>
-    </div>
-
-    <div class="nav-center">
-      <div class="search-bar">
-        <input type="text" placeholder="Buscar..." aria-label="Buscar productos">
+          {% endif %}
+        </nav>
       </div>
-    </div>
 
-    <div class="nav-right">
-      <div class="profile-dropdown">
-        <button id="profileBtn" class="profile-icon-btn" aria-haspopup="true" aria-expanded="false" aria-label="Menú de usuario">
-          <svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="#c06b3e" stroke-width="3" 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="nav-center">
+        <div class="search-bar">
+          <input
+            type="text"
+            placeholder="Buscar..."
+            aria-label="Buscar productos"
+          />
+        </div>
+      </div>
 
-        <div id="myDropdown" class="dropdown-content" role="menu">
-          {% if user.is_authenticated %}
+      <div class="nav-right">
+        <div class="profile-dropdown">
+          <button
+            id="profileBtn"
+            class="profile-icon-btn"
+            aria-haspopup="true"
+            aria-expanded="false"
+            aria-label="Menú de usuario"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="28"
+              height="28"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="#c06b3e"
+              stroke-width="3"
+              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" role="menu">
+            {% if user.is_authenticated %}
             <a href="{% url 'profile' %}" role="menuitem">Mi perfil</a>
-            <form action="{% url 'logout' %}" method="post" style="margin:0;">
+            <form action="{% url 'logout' %}" method="post" style="margin: 0">
               {% csrf_token %}
-              <button type="submit" class="dropdown-logout-btn" role="menuitem">Log out</button>
+              <button type="submit" class="dropdown-logout-btn" role="menuitem">
+                Cerrar Sesión
+              </button>
             </form>
-          {% else %}
+            {% else %}
             <a href="{% url 'register' %}" role="menuitem">Registrarse</a>
             <a href="{% url 'login' %}" role="menuitem">Iniciar sesión</a>
-          {% endif %}
+            {% endif %}
+          </div>
         </div>
       </div>
-    </div>
-  </header>
-
-  {% block content %}{% endblock %}
-
-  <script>
-    const profileBtn = document.getElementById('profileBtn');
-    const dropdown = document.getElementById('myDropdown');
-
-    profileBtn.addEventListener('click', function(e) {
-      e.stopPropagation();
-      const isOpen = dropdown.classList.toggle('show');
-      profileBtn.setAttribute('aria-expanded', isOpen);
-    });
-
-    document.addEventListener('click', function(e) {
-      if (!e.target.closest('.profile-dropdown')) {
-        dropdown.classList.remove('show');
-        profileBtn.setAttribute('aria-expanded', 'false');
-      }
-    });
-
-    document.addEventListener('keydown', function(e) {
-      if (e.key === 'Escape' && dropdown.classList.contains('show')) {
-        dropdown.classList.remove('show');
-        profileBtn.setAttribute('aria-expanded', 'false');
-        profileBtn.focus();
-      }
-    });
-  </script>
-
-  {% block extra_js %}{% endblock %}
-</body>
+    </header>
+
+    {% block content %}{% endblock %}
+
+    <script>
+      const profileBtn = document.getElementById("profileBtn");
+      const dropdown = document.getElementById("myDropdown");
+
+      profileBtn.addEventListener("click", function (e) {
+        e.stopPropagation();
+        const isOpen = dropdown.classList.toggle("show");
+        profileBtn.setAttribute("aria-expanded", isOpen);
+      });
+
+      document.addEventListener("click", function (e) {
+        if (!e.target.closest(".profile-dropdown")) {
+          dropdown.classList.remove("show");
+          profileBtn.setAttribute("aria-expanded", "false");
+        }
+      });
+
+      document.addEventListener("keydown", function (e) {
+        if (e.key === "Escape" && dropdown.classList.contains("show")) {
+          dropdown.classList.remove("show");
+          profileBtn.setAttribute("aria-expanded", "false");
+          profileBtn.focus();
+        }
+      });
+    </script>
+
+    {% block extra_js %}{% endblock %}
+  </body>
 </html>
diff --git a/essenza/templates/product/confirm_delete.html b/essenza/templates/product/confirm_delete.html
index eba4f9e..b9ff04b 100644
--- a/essenza/templates/product/confirm_delete.html
+++ b/essenza/templates/product/confirm_delete.html
@@ -1,151 +1,201 @@
+{% 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>Confirmar Borrado - 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;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            min-height: 100vh;
-        }
+      /* --- ADICIÓN DE VARIABLES NECESARIAS --- */
+      body {
+        --color-principal: #c06b3e; /* Color principal: Marrón/Naranja */
+        --color-principal-hover: #a35a34;
+        --color-fondo: #faf7f2;
+        --color-fondo-tarjeta: #fff;
+        --color-texto-base: #333;
+        --color-borde-claro: #eee;
+        --color-error: #b00020;
+        --color-foco-sombra: rgba(192, 107, 62, 0.2);
+
+        background-color: #faf7f2;
+        font-family: "Segoe UI", Arial, sans-serif;
+        color: #333;
+        padding: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        min-height: 100vh;
+      }
+      /* --- FIN ADICIÓN DE VARIABLES --- */
+
+      * {
+        margin: 0;
+        padding: 0;
+        box-sizing: border-box;
+      }
+      /* --- Botones y Clases de Ayuda --- */
+      .btn-primary {
+        /* Estilo principal del botón (Guardar Cambios/Confirmar) */
+        width: 100%;
+        margin-top: 14px;
+        padding: 10px 12px;
+        border-radius: 10px;
+        background: var(
+          --color-principal
+        ); /* AHORA USA EL COLOR MARRÓN/NARANJA */
+        color: var(--color-fondo-tarjeta); /* Blanco */
+        border: none;
+        cursor: pointer;
+        transition: background-color 0.3s;
+        font-weight: bold;
+      }
+      .btn-primary:hover {
+        background-color: var(--color-principal-hover);
+      }
+
+      .update-link {
+        /* Estilo para el enlace Cancelar */
+        margin-top: 15px;
+        text-align: center;
+        font-size: 13px;
+      }
+      .update-link a {
+        color: var(
+          --color-principal
+        ); /* Usa la variable principal (Marrón/Naranja) */
+        text-decoration: underline;
+      }
+
+      /* Mensajes de error */
+      .form-error {
+        color: var(--color-error);
+        font-size: 13px;
+        margin: 6px 0;
+      }
+
+      .confirm-container {
+        background: white;
+        border-radius: 8px;
+        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
+        padding: 40px;
+        max-width: 500px;
+        text-align: center;
+      }
+      .warning-icon {
+        font-size: 48px;
+        margin-bottom: 20px;
+        display: block;
+      }
+      h1 {
+        color: #c85a54;
+        font-size: 24px;
+        margin-bottom: 15px;
+      }
+      p {
+        color: #666;
+        font-size: 16px;
+        margin-bottom: 20px;
+        line-height: 1.5;
+      }
+      .product-info {
+        background-color: #f9f5f2;
+        border-left: 4px solid #c06b3e;
+        padding: 15px;
+        margin: 20px 0;
+        border-radius: 4px;
+        text-align: left;
+      }
+      .product-info strong {
+        display: block;
+        color: #c06b3e;
+        margin-bottom: 8px;
+      }
+      .product-name {
+        font-size: 18px;
+        color: #333;
+        word-break: break-word;
+      }
+      /* REEMPLAZO Y AJUSTE DEL BLOQUE ACTIONS (HTML) */
+      .actions {
+        display: block;
+        gap: 10px;
+        margin-top: 30px;
+        justify-content: center;
+      }
+
+      button,
+      a.btn {
+        padding: 12px 30px;
+        border: none;
+        border-radius: 5px;
+        font-weight: bold;
+        cursor: pointer;
+        text-decoration: none;
+        font-size: 16px;
+        transition: opacity 0.3s;
+        display: inline-block;
+      }
+      .btn-delete {
+        background-color: #c85a54;
+        color: white;
+        flex: 1;
+      }
+      .btn-delete:hover {
+        opacity: 0.85;
+      }
+      .btn-cancel {
+        background-color: #ddd;
+        color: #333;
+        flex: 1;
+      }
+      .btn-cancel:hover {
+        opacity: 0.85;
+      }
+      .note {
+        background-color: #fff3cd;
+        border: 1px solid #ffc107;
+        color: #856404;
+        padding: 12px;
+        border-radius: 4px;
+        margin-top: 20px;
+        font-size: 14px;
+      }
+      @media (max-width: 500px) {
         .confirm-container {
-            background: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
-            padding: 40px;
-            max-width: 500px;
-            text-align: center;
-        }
-        .warning-icon {
-            font-size: 48px;
-            margin-bottom: 20px;
-            display: block;
-        }
-        h1 {
-            color: #c85a54;
-            font-size: 24px;
-            margin-bottom: 15px;
-        }
-        p {
-            color: #666;
-            font-size: 16px;
-            margin-bottom: 20px;
-            line-height: 1.5;
-        }
-        .product-info {
-            background-color: #f9f5f2;
-            border-left: 4px solid #c06b3e;
-            padding: 15px;
-            margin: 20px 0;
-            border-radius: 4px;
-            text-align: left;
-        }
-        .product-info strong {
-            display: block;
-            color: #c06b3e;
-            margin-bottom: 8px;
-        }
-        .product-name {
-            font-size: 18px;
-            color: #333;
-            word-break: break-word;
+          padding: 30px 20px;
         }
         .actions {
-            display: flex;
-            gap: 10px;
-            margin-top: 30px;
-            justify-content: center;
-        }
-        button,
-        a.btn {
-            padding: 12px 30px;
-            border: none;
-            border-radius: 5px;
-            font-weight: bold;
-            cursor: pointer;
-            text-decoration: none;
-            font-size: 16px;
-            transition: opacity 0.3s;
-            display: inline-block;
-        }
-        .btn-delete {
-            background-color: #c85a54;
-            color: white;
-            flex: 1;
-        }
-        .btn-delete:hover {
-            opacity: 0.85;
-        }
-        .btn-cancel {
-            background-color: #ddd;
-            color: #333;
-            flex: 1;
-        }
-        .btn-cancel:hover {
-            opacity: 0.85;
-        }
-        .note {
-            background-color: #fff3cd;
-            border: 1px solid #ffc107;
-            color: #856404;
-            padding: 12px;
-            border-radius: 4px;
-            margin-top: 20px;
-            font-size: 14px;
-        }
-        @media (max-width: 500px) {
-            .confirm-container {
-                padding: 30px 20px;
-            }
-            .actions {
-                flex-direction: column;
-            }
+          flex-direction: column;
         }
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <div class="confirm-container">
-        <span class="warning-icon">⚠️</span>
-        <p>¿Está seguro de que desea borrar este producto?</p>
+      <span class="warning-icon">⚠️</span>
+      <p>¿Está seguro de que desea borrar este producto?</p>
 
+      <div class="product-info">
+        <strong>Producto:</strong>
+        <div class="product-name">{{ product.name }}</div>
+      </div>
 
-        <div class="product-info">
-            <strong>Producto:</strong>
-            <div class="product-name">{{ product.name }}</div>
-        </div>
-
+      <form method="post" style="margin: 0">
+        {% csrf_token %}
+        <div class="actions">
+          <button type="submit" class="btn-primary" style="margin-top: 0">
+            Confirmar Borrado
+          </button>
 
-        <p style="margin-bottom: 10px; font-size: 14px; color: #999;">
-            Esta acción es <strong>irreversible</strong> y no se puede deshacer.
-        </p>
-
-
-        <form method="post" style="margin: 0;">
-            {% csrf_token %}
-            <div class="actions">
-                <button type="submit" class="btn-delete">Sí, borrar producto</button>
-                <a href="{% url 'product_list' %}" class="btn-cancel">← No, cancelar</a>
-            </div>
-        </form>
-
-
-        <div class="note">
-            💡 Si borras este producto, se eliminará toda la información asociada.
+          <p class="update-link">
+            <a href="{% url 'product_list' %}">Cancelar</a>
+          </p>
         </div>
+      </form>
+
+      <div class="note">
+        💡 Si borras este producto, se eliminará toda la información asociada.
+      </div>
     </div>
-</body>
+  </body>
 </html>
-
-
diff --git a/essenza/templates/product/create_product.html b/essenza/templates/product/create_product.html
new file mode 100644
index 0000000..077f1ce
--- /dev/null
+++ b/essenza/templates/product/create_product.html
@@ -0,0 +1,278 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Crear Producto · Essenza</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      /* --- Variables de Color --- */
+      body {
+        --color-principal: #c06b3e;
+        --color-principal-hover: #a35a34;
+        --color-fondo: #faf7f2;
+        --color-fondo-tarjeta: #fff;
+        --color-texto-base: #333;
+        --color-borde-claro: #eee;
+        --color-error: #b00020;
+        --color-foco-sombra: rgba(192, 107, 62, 0.2);
+
+        background-color: var(--color-fondo);
+        margin: 0;
+        font-family: "Segoe UI", Arial, sans-serif;
+      }
+
+      .page {
+        min-height: 100dvh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 2rem;
+        margin-bottom: 40px;
+      }
+
+      .brand {
+        color: var(--color-principal);
+        font-size: 48px;
+        margin-bottom: 10px;
+        text-align: center;
+      }
+
+      .form-card {
+        width: min(420px, 88vw);
+        background: var(--color-fondo-tarjeta);
+        border: 2px solid var(--color-principal);
+        border-radius: 16px;
+        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
+        padding: 22px 24px;
+        box-sizing: border-box;
+      }
+
+      /* --- Elementos del Formulario (Inputs y Labels) --- */
+      label {
+        display: block;
+        font-size: 13px;
+        color: var(--color-texto-base);
+        margin: 10px 0 6px;
+      }
+
+      input[type="text"],
+      input[type="number"],
+      textarea,
+      select {
+        width: 100%;
+        padding: 10px 12px;
+        border: 1px solid var(--color-borde-claro);
+        border-radius: 10px;
+        background: #fafafa;
+        outline: none;
+        box-sizing: border-box;
+        font-family: "Segoe UI", Arial, sans-serif;
+      }
+
+      /* Estilo para el input de archivo */
+      input[type="file"] {
+        width: 100%;
+        font-size: 13px;
+        color: #555;
+        margin: 10px 0 15px;
+        padding: 8px;
+        border: 1px solid var(--color-borde-claro);
+        border-radius: 10px;
+        background: #fafafa;
+        box-sizing: border-box;
+      }
+
+      /* Estilo simple para el label del checkbox */
+      label[for="id_remove_photo"] {
+        display: inline;
+        color: var(--color-error);
+        font-weight: 500;
+        margin-left: 5px;
+      }
+
+      /* Estilo simple para el label del checkbox */
+      label[for="id_is_active"] {
+        display: inline;
+        color: var(--color-texto-base);
+        font-weight: 500;
+        margin-left: 5px;
+      }
+
+      /* Estilo para el checkbox */
+      input[type="checkbox"] {
+        accent-color: var(--color-principal);
+        width: 16px;
+        height: 16px;
+        vertical-align: middle;
+      }
+
+      /* Estilo para deshabilitar visualmente el input de archivo */
+      input[type="file"]:disabled {
+        background-color: #f0f0f0;
+        cursor: not-allowed;
+      }
+
+      input:focus {
+        border-color: var(--color-principal);
+        box-shadow: 0 0 0 3px var(--color-foco-sombra);
+      }
+
+      /* --- Botones y Clases de Ayuda --- */
+      .btn-primary {
+        width: 100%;
+        margin-top: 14px;
+        padding: 10px 12px;
+        border-radius: 10px;
+        background: var(--color-principal);
+        color: var(--color-fondo-tarjeta); /* Blanco */
+        border: none;
+        cursor: pointer;
+        transition: background-color 0.3s;
+      }
+      .btn-primary:hover {
+        background-color: var(--color-principal-hover);
+      }
+
+      .create-link {
+        margin-top: 15px;
+        text-align: center;
+        font-size: 13px;
+      }
+      .create-link a {
+        color: var(--color-principal);
+        text-decoration: underline;
+      }
+
+      /* Mensajes de error */
+      .form-error {
+        color: var(--color-error);
+        font-size: 13px;
+        margin: 6px 0;
+      }
+    </style>
+  </head>
+  <body class="create-bg">
+    <div class="page">
+      <h1 class="brand">ESSENZA</h1>
+      <div class="form-card">
+        <form method="post" enctype="multipart/form-data" novalidate>
+          {% csrf_token %}
+
+          <label for="{{ form.name.id_for_label }}">Nombre</label>
+          {{ form.name }}
+
+          <label for="{{ form.description.id_for_label }}">Descripción</label>
+          {{ form.description }}
+
+          <label for="{{ form.category.id_for_label }}">Categoría</label>
+          {{ form.category }}
+
+          <label for="{{ form.brand.id_for_label }}">Marca</label>
+          {{ form.brand }}
+
+          <label for="{{ form.price.id_for_label }}">Precio</label>
+          {{ form.price }}
+
+          <label for="{{ form.photo.id_for_label }}">Foto (Opcional)</label>
+          {{ form.photo }}
+
+          <div
+            style="
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 15px;
+              margin-top: 10px;
+            "
+          >
+            <div>
+              {{ form.is_active }}
+              <label for="{{ form.is_active.id_for_label }}"
+                >{{ form.is_active.label }}</label
+              >
+            </div>
+          </div>
+
+          {% if form.errors %}
+          <div
+            style="
+              background: #fff0f0;
+              border: 2px solid var(--color-error);
+              border-radius: 10px;
+              padding: 15px;
+              margin-bottom: 15px;
+            "
+          >
+            <p
+              style="
+                color: var(--color-error);
+                margin-top: 0;
+                font-weight: bold;
+              "
+            >
+              ¡El formulario tiene errores!
+            </p>
+            {% for field in form %} {% if field.errors %}
+            <div class="form-error">
+              <strong>{{ field.label }}:</strong>
+              <ul>
+                {% for error in field.errors %}
+                <li>{{ error }}</li>
+                {% endfor %}
+              </ul>
+            </div>
+            {% endif %} {% endfor %} {% for error in form.non_field_errors %}
+            <div class="form-error">
+              <strong>Error general:</strong> {{ error }}
+            </div>
+            {% endfor %}
+          </div>
+          {% endif %}
+
+          <button type="submit" class="btn-primary">Crear Producto</button>
+
+          <p class="create-link">
+            <a href="{% url 'product_list' %}">Cancelar</a>
+          </p>
+        </form>
+      </div>
+    </div>
+
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        // 1. Obtener referencias
+        const fileInput = document.getElementById(
+          "{{ form.photo.id_for_label }}"
+        );
+        const removeCheckbox = document.getElementById(
+          "{{ form.remove_photo.id_for_label }}"
+        );
+
+        if (!fileInput || !removeCheckbox) {
+          return;
+        }
+
+        // 2. Lógica para el Checkbox (Deshabilita el selector)
+        function handleRemovePhotoChange() {
+          const isRemoveChecked = removeCheckbox.checked;
+
+          if (isRemoveChecked) {
+            // Si está marcado, deshabilitar (ignorar) el selector de archivos
+            fileInput.disabled = true;
+          } else {
+            // Si está desmarcado, volver a habilitar el selector
+            fileInput.disabled = false;
+          }
+        }
+
+        // 4. Añadir escuchadores de eventos
+        removeCheckbox.addEventListener("change", handleRemovePhotoChange);
+
+        // 5. Ejecutar al inicio para establecer el estado inicial
+        handleRemovePhotoChange();
+      });
+    </script>
+  </body>
+</html>
diff --git a/essenza/templates/product/dashboard.html b/essenza/templates/product/dashboard.html
index d265d26..ecbc655 100644
--- a/essenza/templates/product/dashboard.html
+++ b/essenza/templates/product/dashboard.html
@@ -2,7 +2,7 @@
 
 {% load static %} {% load humanize %}
 
-{% block title %}Dashboard · Essenza{% endblock %}
+{% block title %}Escaparate · Essenza{% endblock %}
 
 {% block content %}
     <style>
@@ -163,6 +163,15 @@
         color: #666;
         margin: 0;
       }
+      .category-tag {
+        display: inline-block;
+        margin-top: 8px;
+        background: #f2e5df;
+        color: #c06b3e;
+        padding: 4px 10px;
+        border-radius: 6px;
+        font-size: 12px;
+      }
     </style>
   </head>
 
@@ -188,8 +197,9 @@ <h2>Top Bestsellers</h2>
 
         <div class="product-info">
           <div class="product-name">{{ p.name }}</div>
-          <div class="product-price">{{ p.price|floatformat:2 }} €</div>
           <div class="product-description">{{ p.description }}</div>
+          <div class="product-price">{{ p.price|floatformat:2 }} €</div>
+          <span class="category-tag">{{ p.get_category_display }}</span>
         </div>
       </div>
       {% endfor %} {% else %}
diff --git a/essenza/templates/product/detail.html b/essenza/templates/product/detail.html
index 5b05ce9..d63c4eb 100644
--- a/essenza/templates/product/detail.html
+++ b/essenza/templates/product/detail.html
@@ -1,180 +1,200 @@
-{% extends "base.html" %}
-
-{% load static %}
-
-
-{% block title %}{{ product.name }} - Essenza{% endblock %}
-
-{% block content %}
-    <style>
-      /* Scoped styles for product detail so base header/navbar are unaffected */
-      .detail-body * { box-sizing: border-box; }
-      .detail-body {
-        background-color: #faf7f2;
-        font-family: "Segoe UI", Arial, sans-serif;
-        color: #333;
-        padding: 20px 0;
-      }
-      .detail-body .container { max-width: 900px; margin: 0 auto; }
-      .detail-body .product-container {
-        background: white;
-        border-radius: 8px;
-        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-        padding: 30px;
-      }
-      .detail-body .product-header {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 30px;
-        margin-bottom: 30px;
-      }
-      .detail-body .product-image {
-        width: 100%;
-        height: 400px;
-        border-radius: 8px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        font-size: 16px;
-        overflow: hidden;
-      }
-      .detail-body .product-image img {
-        width: 100%;
-        height: 100%;
-        object-fit: contain;
-      }
-      .detail-body .product-details h1 {
-        color: #c06b3e;
-        font-size: 28px;
-        margin-bottom: 10px;
-      }
-      .detail-body .product-brand {
-        color: #666;
-        font-size: 16px;
-        margin-bottom: 15px;
-        font-weight: 500;
-      }
-      .detail-body .product-price {
-        font-size: 32px;
-        color: #333;
-        font-weight: bold;
-        margin-bottom: 15px;
-      }
-      .detail-body .product-category {
-        display: inline-block;
-        background-color: #e8dcd8;
-        color: #c06b3e;
-        padding: 6px 12px;
-        border-radius: 4px;
-        margin-bottom: 20px;
-        font-size: 14px;
-      }
-      .detail-body .product-stock {
-        font-size: 16px;
-        margin-bottom: 15px;
-        color: #333;
-      }
-      .detail-body .product-stock strong { color: #c06b3e; }
-      .detail-body .product-description {
-        background-color: #f9f5f2;
-        padding: 20px;
-        border-left: 4px solid #c06b3e;
-        margin: 20px 0;
-        border-radius: 4px;
-        line-height: 1.6;
-      }
-      .detail-body .actions {
-        display: flex;
-        gap: 10px;
-        margin-top: 30px;
-        padding-top: 30px;
-        border-top: 1px solid #ddd;
-      }
-      .detail-body .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;
-      }
-      .detail-body .btn-edit { background-color: #b7b099; color: white; flex: 1; }
-      .detail-body .btn-edit:hover { opacity: 0.8; }
-      .detail-body .btn-delete { background-color: #c85a54; color: white; flex: 1; }
-      .detail-body .btn-delete:hover { opacity: 0.8; }
-      .detail-body .btn-back { background-color: #ddd; color: #333; flex: 1; }
-      .detail-body .btn-back:hover { opacity: 0.8; }
-      .detail-body .info-grid {
-        display: grid;
-        grid-template-columns: 1fr 1fr;
-        gap: 15px;
-        margin-top: 20px;
-      }
-      .detail-body .info-item { background-color: #f9f5f2; padding: 12px; border-radius: 4px; }
-      .detail-body .info-label { color: #c06b3e; font-weight: bold; font-size: 12px; text-transform: uppercase; }
-      .detail-body .info-value { color: #333; font-size: 14px; margin-top: 4px; }
-      @media (max-width: 768px) {
-        .detail-body .product-header { grid-template-columns: 1fr; }
-        .detail-body .product-image { height: 300px; }
-        .detail-body .actions { flex-direction: column; }
-        .detail-body .info-grid { grid-template-columns: 1fr; }
-      }
-    </style>
-    <div class="detail-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 %}
-            <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>
+{% extends "base.html" %} {% load static %} {% block title %}{{ product.name }}
+- Essenza{% endblock %} {% block content %}
+<style>
+  /* Scoped styles for product detail so base header/navbar are unaffected */
+  .detail-body * {
+    box-sizing: border-box;
+  }
+  .detail-body {
+    background-color: #faf7f2;
+    font-family: "Segoe UI", Arial, sans-serif;
+    color: #333;
+    padding: 20px 0;
+  }
+  .detail-body .container {
+    max-width: 900px;
+    margin: 0 auto;
+  }
+  .detail-body .product-container {
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    padding: 30px;
+  }
+  .detail-body .product-header {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 30px;
+    margin-bottom: 30px;
+  }
+  .detail-body .product-image {
+    width: 100%;
+    height: 400px;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 16px;
+    overflow: hidden;
+  }
+  .detail-body .product-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+  }
+  .detail-body .product-details h1 {
+    color: #c06b3e;
+    font-size: 28px;
+    margin-bottom: 10px;
+  }
+  .detail-body .product-brand {
+    color: #666;
+    font-size: 16px;
+    margin-bottom: 15px;
+    font-weight: 500;
+  }
+  .detail-body .product-price {
+    font-size: 32px;
+    color: #333;
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+  .detail-body .product-category {
+    display: inline-block;
+    background-color: #e8dcd8;
+    color: #c06b3e;
+    padding: 6px 12px;
+    border-radius: 4px;
+    margin-bottom: 20px;
+    font-size: 14px;
+  }
+  .detail-body .product-stock {
+    font-size: 16px;
+    margin-bottom: 15px;
+    color: #333;
+  }
+  .detail-body .product-stock strong {
+    color: #c06b3e;
+  }
+  .detail-body .product-description {
+    background-color: #f9f5f2;
+    padding: 20px;
+    border-left: 4px solid #c06b3e;
+    margin: 20px 0;
+    border-radius: 4px;
+    line-height: 1.6;
+  }
+  .detail-body .actions {
+    display: flex;
+    gap: 10px;
+    margin-top: 30px;
+    padding-top: 30px;
+    border-top: 1px solid #ddd;
+  }
+  .detail-body .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;
+  }
+  .detail-body .btn-edit {
+    background-color: #b7b099;
+    color: white;
+    flex: 1;
+  }
+  .detail-body .btn-edit:hover {
+    opacity: 0.8;
+  }
+  .detail-body .btn-delete {
+    background-color: #c85a54;
+    color: white;
+    flex: 1;
+  }
+  .detail-body .btn-delete:hover {
+    opacity: 0.8;
+  }
+  .detail-body .btn-back {
+    background-color: #ddd;
+    color: #333;
+    flex: 1;
+    height: 42px;
+    width: 100%;
+    display: inline-flex;
+    justify-content: center;
+  }
+  .detail-body .btn-back:hover {
+    opacity: 0.8;
+  }
+  .detail-body .info-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
+    margin-top: 20px;
+  }
+  .detail-body .info-item {
+    background-color: #f9f5f2;
+    padding: 12px;
+    border-radius: 4px;
+  }
+  .detail-body .info-label {
+    color: #c06b3e;
+    font-weight: bold;
+    font-size: 12px;
+    text-transform: uppercase;
+  }
+  .detail-body .info-value {
+    color: #333;
+    font-size: 14px;
+    margin-top: 4px;
+  }
+  @media (max-width: 768px) {
+    .detail-body .product-header {
+      grid-template-columns: 1fr;
+    }
+    .detail-body .product-image {
+      height: 300px;
+    }
+    .detail-body .actions {
+      flex-direction: column;
+    }
+    .detail-body .info-grid {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>
+<div class="detail-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 %}
+          <img
+            src="{% static 'images/default_product.png' %}"
+            alt="Foto de producto por defecto"
+          />
+          {% endif %}
         </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 class="product-details">
+          <h1>{{ product.name }}</h1>
+          <div class="product-brand">{{ product.brand }}</div>
+          <div class="product-category">{{ product.category }}</div>
+          <div class="product-price">€ {{ product.price }}</div>
+          {% if product.stock == 0 %}
+          <span>¡Producto agotado!</span>
+          {% endif %} {% if product.stock < 10 and product.stock > 0%}
+          <span>¡Últimas unidades!</span>
+          {% endif %}
+          <div class="product-description">
+            <strong>Descripción:</strong>
+            <p style="margin-top: 8px">{{ product.description }}</p>
           </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="#"
             onclick="history.back(); return false;"
@@ -184,5 +204,9 @@ <h1>{{ product.name }}</h1>
           >
         </div>
       </div>
+      </div>
+
     </div>
-{% endblock %}
\ No newline at end of file
+  </div>
+  {% endblock %}
+</div>
diff --git a/essenza/templates/product/detail_user.html b/essenza/templates/product/detail_user.html
index 1f7b6f2..c038e20 100644
--- a/essenza/templates/product/detail_user.html
+++ b/essenza/templates/product/detail_user.html
@@ -1,118 +1,285 @@
-{% extends "base.html" %}
-{% load static %}
-
-{% block title %}{{ product.name }} - Essenza{% endblock %}
-
-{% block extra_head %}
-  <style>
-    /* Scoped styles for detail_user page; avoid modifying the global body */
-    .detail-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; }
-    .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; }
-    .btn-back { background: #ddd; color: #333; }
-    .btn-back:hover { background: #c4c4c4; }
-    .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; }
-    .add-text { display: flex; align-items: center; gap: 10px; }
-    .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)} }
-    .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}10%{opacity:1}80%{opacity:1}100%{opacity:0} }
-    @media (max-width:768px) { .product-header{grid-template-columns:1fr} .actions{flex-direction:column} }
-  </style>
-{% endblock %}
-
-{% block content %}
-  <div class="detail-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_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>
-
-        <!-- -------- DESCRIPCIÓN -------- -->
-        <div class="product-description">
-          <strong>Descripción:</strong>
-          <p style="margin-top: 10px">{{ product.description }}</p>
+{% extends "base.html" %} {% load static %} {% block title %}{{ product.name }}
+- Essenza{% endblock %} {% block extra_head %}
+<style>
+  /* Scoped styles for detail_user page; avoid modifying the global body */
+  .detail-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: 700;
+  }
+  .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;
+  }
+  .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;
+  }
+  .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;
+  }
+  .add-text {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+  }
+  .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);
+    }
+  }
+  .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;
+    }
+    10% {
+      opacity: 1;
+    }
+    80% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+  @media (max-width: 768px) {
+    .product-header {
+      grid-template-columns: 1fr;
+    }
+    .actions {
+      flex-direction: column;
+    }
+  }
+</style>
+{% endblock %} {% block content %}
+<div class="detail-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_product.png' %}"
+            alt="{{ product.name }}"
+          />
+          {% endif %}
         </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 class="product-details">
+          <h1>{{ product.name }}</h1>
+          <div class="product-brand">{{ product.brand }}</div>
+          <div class="product-category">{{ product.get_category_display }}</div>
+          <div class="product-price">€ {{ product.price }}</div>
+          <div class="product-description">
+            <strong>Descripción:</strong>
+            <p style="margin-top: 10px">{{ product.description }}</p>
           </div>
         </div>
+        {% if product.stock == 0 %}
+        <span>¡Producto agotado!</span>
+        {% endif %} {% if product.stock < 10 and product.stock > 0 %}
+        <span>¡Últimas unidades!</span>
+        {% endif %}
+      </div>
 
-        <!-- -------- BOTONES -------- -->
-        <div class="actions">
-          <button class="btn btn-add" id="addToCartBtn">
-            <span class="add-text" id="normalText">
-              <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>
-            <span class="added-message" id="addedMessage"> ✓ Añadido </span>
-          </button>
+      <!-- -------- BOTONES -------- -->
+      <div class="actions">
+        <button class="btn btn-add" id="addToCartBtn">
+          <span class="add-text" id="normalText">
+            <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>
+          <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>
+        <a
+          href="#"
+          onclick="history.back(); return false;"
+          class="btn btn-back"
+          title="Volver"
+          >← Volver</a
+        >
       </div>
     </div>
   </div>
+</div>
 
-  <script>
-    const btn = document.getElementById("addToCartBtn");
-    const addedMsg = document.getElementById("addedMessage");
-    btn.addEventListener("click", () => {
-      btn.classList.add("shake");
-      addedMsg.classList.add("show");
-      setTimeout(() => { addedMsg.classList.remove("show"); btn.classList.remove("shake"); }, 1800);
-    });
-  </script>
-{% endblock %}
\ No newline at end of file
+<script>
+  const btn = document.getElementById("addToCartBtn");
+  const addedMsg = document.getElementById("addedMessage");
+  btn.addEventListener("click", () => {
+    btn.classList.add("shake");
+    addedMsg.classList.add("show");
+    setTimeout(() => {
+      addedMsg.classList.remove("show");
+      btn.classList.remove("shake");
+    }, 1800);
+  });
+</script>
+{% endblock %}
diff --git a/essenza/templates/product/form.html b/essenza/templates/product/form.html
deleted file mode 100644
index f59cd89..0000000
--- a/essenza/templates/product/form.html
+++ /dev/null
@@ -1,309 +0,0 @@
-<!DOCTYPE html>
-<html lang="es">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>{% if form.instance.pk %}Editar{% else %}Crear{% endif %} Producto - 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: 600px;
-            margin: 0 auto;
-        }
-        .form-container {
-            /* Contenedor principal blanco del formulario */
-            background: white;
-            border-radius: 8px;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-            padding: 30px;
-        }
-        h1 {
-            color: #c06b3e;
-            text-align: center;
-            margin-bottom: 30px;
-            font-size: 28px;
-        }
-        form {
-            display: flex;
-            flex-direction: column;
-        }
-        .form-group {
-            margin-bottom: 20px;
-            /* Separador sutil */
-            padding-bottom: 5px; 
-            border-bottom: 1px solid #eee; 
-        }
-        /* Eliminar el separador del último form-group (antes de las acciones) */
-        .form-group:last-of-type {
-            border-bottom: none;
-            margin-bottom: 0;
-        }
-        label {
-            display: block;
-            margin-bottom: 6px;
-            font-weight: bold;
-            color: #333;
-            font-size: 14px;
-        }
-        input[type="text"],
-        input[type="email"],
-        input[type="number"],
-        textarea,
-        select {
-            width: 100%;
-            padding: 10px 12px;
-            border: 1px solid #ddd;
-            border-radius: 4px;
-            font-family: 'Segoe UI', Arial, sans-serif;
-            font-size: 14px;
-            transition: border-color 0.3s;
-        }
-        input[type="text"]:focus,
-        input[type="email"]:focus,
-        input[type="number"]:focus,
-        textarea:focus,
-        select:focus {
-            outline: none;
-            border-color: #c06b3e;
-            box-shadow: 0 0 5px rgba(192, 107, 62, 0.2);
-        }
-        textarea {
-            resize: vertical;
-            min-height: 120px;
-        }
-        
-        /* Estilos del checkbox 'Is active' */
-        .form-group input[type="checkbox"] {
-            width: auto;
-            margin-right: 8px;
-            cursor: pointer;
-        }
-        .checkbox-label {
-            display: flex;
-            align-items: center;
-            font-weight: normal;
-            margin-bottom: 0;
-            font-weight: bold;
-            font-size: 14px;
-        }
-        
-        /* Contenedor de botones */
-        .actions {
-            display: flex;
-            gap: 10px;
-            margin-top: 30px;
-            justify-content: flex-end; /* Alineación a la derecha */
-        }
-        /* Ajuste de márgenes para el bloque de botones */
-        .form-container > form > .actions {
-            margin-top: 20px; 
-            padding-top: 15px;
-            border-top: 1px solid #eee;
-        }
-
-        /* Estilo general del botón */
-        button{
-            flex: 0 0 auto; 
-            padding: 12px 20px;
-            border: none;
-            border-radius: 5px;
-            font-weight: bold;
-            cursor: pointer;
-            font-size: 16px;
-            transition: opacity 0.3s;
-        }
-        .btn-cancel {
-            background-color: #ddd;
-            color: #333;
-            flex: 1;
-        }
-        .btn-cancel:hover {
-            opacity: 0.85;
-        }
-        
-        /* Estilo del botón Guardar */
-        .btn-submit {
-            background-color: #c06b3e;
-            color: white;
-            display: flex; 
-            align-items: center;
-        }
-        .btn-submit:hover {
-            opacity: 0.85;
-        }
-        
-        /* Estilo del botón Cancelar (que es un enlace) */
-        .btn-cancel {
-            background-color: #ddd; 
-            color: #333; 
-            border: none;
-            text-align: center;
-            text-decoration: none;
-            padding: 12px 0; 
-            line-height: 1;
-            margin-right: 15px; 
-            display: flex; 
-            align-items: center;
-            justify-content: center;
-        }
-        .btn-cancel:hover {
-            text-decoration: underline;
-            opacity: 0.85;
-        }
-
-        /* Estilos para errores y ayuda */
-        .error-list {
-            background-color: #ffe8e8;
-            border: 1px solid #ffb3b3;
-            color: #c00;
-            padding: 10px 12px;
-            border-radius: 4px;
-            margin-bottom: 15px;
-            font-size: 14px;
-        }
-        .error-list li {
-            margin-left: 20px;
-        }
-        .helptext {
-            display: block;
-            font-size: 12px;
-            color: #666;
-            margin-top: 4px;
-        }
-        .form-group label span.required {
-            color: #c00;
-            margin-left: 4px;
-        }
-        
-        /* Estilos específicos para el campo de foto */
-        .photo-current-info {
-            font-size: 14px;
-            margin-bottom: 10px;
-            display: flex; /* Para alinear el texto y el checkbox 'Limpiar' */
-            align-items: center;
-        }
-        .photo-clear {
-            display: flex; /* Para alinear el checkbox y el texto 'Limpiar' */
-            align-items: center;
-            margin-left: 10px;
-            font-weight: normal;
-        }
-        .photo-clear input[type="checkbox"] {
-            width: auto;
-            margin-right: 5px;
-        }
-
-        @media (max-width: 600px) {
-            .form-container {
-                padding: 20px;
-            }
-            .actions {
-                flex-direction: column;
-                align-items: stretch;
-            }
-            .btn-cancel {
-                margin-right: 0;
-            }
-        }
-    </style>
-</head>
-<body>
-    <div class="container">
-        <div class="form-container">
-            <h1>{% if form.instance.pk %}Editar producto{% else %} Crear nuevo producto{% endif %}</h1>
-
-
-            {% if form.non_field_errors %}
-                <div class="error-list">
-                    <strong>Errores:</strong>
-                    <ul>
-                        {% for error in form.non_field_errors %}
-                            <li>{{ error }}</li>
-                        {% endfor %}
-                    </ul>
-                </div>
-            {% endif %}
-
-
-            <form method="post" enctype="multipart/form-data">
-                {% csrf_token %}
-
-
-                {% for field in form %}
-                    {% if field.name == "is_active" %}
-                        <div class="form-group" style="border-bottom: none;">
-                            <label class="checkbox-label" style="font-weight: normal;">
-                                {{ field }}
-                                <span style="font-weight: bold;">{{ field.label }}</span>
-                            </label>
-                            {% if field.errors %}
-                                <div class="error-list" style="margin-top: 4px;">
-                                    {% for error in field.errors %}
-                                        <div>{{ error }}</div>
-                                    {% endfor %}
-                                </div>
-                            {% endif %}
-                        </div>
-                    {% elif field.name == "photo" %}
-                        <div class="form-group">
-                            <label>Photo:</label>
-                            
-                            {% if form.instance.pk and field.value %}
-                                <div class="photo-current-info" style="margin-bottom: 10px;">
-                                   
-                                    </label>
-                                </div>
-                            {% endif %}
-
-                            <label style="font-weight: normal; margin-bottom: 0;"></label>
-                            {{ field }}
-                            
-                            {% if field.help_text %}
-                                <small class="helptext">{{ field.help_text|safe }}</small>
-                            {% endif %}
-                            {% if field.errors %}
-                                <div class="error-list" style="margin-top: 4px;">
-                                    {% for error in field.errors %}
-                                        <div>{{ error }}</div>
-                                    {% endfor %}
-                                </div>
-                            {% endif %}
-                        </div>
-                        {% else %}
-                        <div class="form-group">
-                            {{ field.label_tag }}
-                            {{ field }}
-                            {% if field.help_text %}
-                                <small class="helptext">{{ field.help_text|safe }}</small>
-                            {% endif %}
-                            {% if field.errors %}
-                                <div class="error-list" style="margin-top: 4px;">
-                                    {% for error in field.errors %}
-                                        <div>{{ error }}</div>
-                                    {% endfor %}
-                                </div>
-                            {% endif %}
-                        </div>
-                    {% endif %}
-                {% endfor %}
-
-
-                <div class="actions">
-                    <button type="submit" class="btn-submit">Guardar</button>
-                    <a href="{% url 'product_list' %}" class="btn btn-cancel">← Cancelar</a>
-                </div>
-            </form>
-        </div>
-    </div>
-</body>
-</html>
\ No newline at end of file
diff --git a/essenza/templates/product/list.html b/essenza/templates/product/list.html
index ff3d14b..761e9a3 100644
--- a/essenza/templates/product/list.html
+++ b/essenza/templates/product/list.html
@@ -1,227 +1,229 @@
-{% extends "base.html" %}
+{% extends "base.html" %} {% block title %}Lista de Productos · Essenza
+{%endblock %} {% block content %} {% load static %}
+<style>
+  /* Styles scoped to .list-page so they don't override base header/navbar */
+  .list-page * {
+    box-sizing: border-box;
+  }
+  .list-page {
+    background-color: #faf7f2;
+    font-family: "Segoe UI", Arial, sans-serif;
+    color: #333;
+    padding: 20px 0;
+  }
+  .list-page .container {
+    /* Contenedor principal centrado para el contenido */
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background: transparent;
+  }
+  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;
+  }
 
-{% block title %}Lista de Productos · Essenza{% endblock %}
+  /* === 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;
+  }
+  /* ======================== */
 
-{% block content %}
-{% load static %}
-    <style>
-      /* Styles scoped to .list-page so they don't override base header/navbar */
-      .list-page * { box-sizing: border-box; }
-      .list-page {
-        background-color: #faf7f2;
-        font-family: "Segoe UI", Arial, sans-serif;
-        color: #333;
-        padding: 20px 0;
-      }
-      .list-page .container {
-        /* Contenedor principal centrado para el contenido */
-        max-width: 1200px;
-        margin: 0 auto;
-        padding: 20px;
-        background: transparent;
-      }
-      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;
+  }
 
-      /* === 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;
-      }
-      /* ======================== */
-
-      .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;
-      }
-
-      /* Header/profile/dropdown styles intentionally omitted here so
+  /* Header/profile/dropdown styles intentionally omitted here so
          the global header in base.html keeps its styles unchanged. */
-    </style>
-    <div class="list-page">
-      <div class="container">
-      <h1>🌸 Productos Essenza</h1>
-      <div class="header-actions">
-        <a href="{% url 'product_create' %}" class="btn-create">
-          Crear producto</a
-        >
-      </div>
+</style>
+<div class="list-page">
+  <div class="container">
+    <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>
+    {% 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>
-        {% 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>
+        <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-actions">
             <a
-              href="#"
-              onclick="history.back(); return false;"
-              style="color: #c06b3e; text-decoration: none"
-              >← Volver</a
+              href="{% url 'product_detail' product.pk %}"
+              class="btn-small btn-detail"
+              >Ver</a
             >
-          </p>
+            <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>
+        {% if product.stock == 0 %}
+        <strong>¡Producto agotado!</strong>
+        {% endif %} {% if product.stock < 10 and product.stock > 0 %}
+        <strong>¡Últimas unidades!</strong>
+        {% endif %}
       </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>
-{% endblock %}
\ No newline at end of file
+  </div>
+</div>
+{% endblock %}
diff --git a/essenza/templates/product/update_product.html b/essenza/templates/product/update_product.html
new file mode 100644
index 0000000..ca0747f
--- /dev/null
+++ b/essenza/templates/product/update_product.html
@@ -0,0 +1,285 @@
+{% load static %}
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Editar Producto · Essenza</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+      /* --- Variables de Color --- */
+      body {
+        --color-principal: #c06b3e;
+        --color-principal-hover: #a35a34;
+        --color-fondo: #faf7f2;
+        --color-fondo-tarjeta: #fff;
+        --color-texto-base: #333;
+        --color-borde-claro: #eee;
+        --color-error: #b00020;
+        --color-foco-sombra: rgba(192, 107, 62, 0.2);
+
+        background-color: var(--color-fondo);
+        margin: 0;
+        font-family: "Segoe UI", Arial, sans-serif;
+      }
+
+      .page {
+        min-height: 100dvh;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: 2rem;
+        margin-bottom: 40px;
+      }
+
+      .brand {
+        color: var(--color-principal);
+        font-size: 48px;
+        margin-bottom: 10px;
+        text-align: center;
+      }
+
+      .form-card {
+        width: min(420px, 88vw);
+        background: var(--color-fondo-tarjeta);
+        border: 2px solid var(--color-principal);
+        border-radius: 16px;
+        box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
+        padding: 22px 24px;
+        box-sizing: border-box;
+      }
+
+      /* --- Elementos del Formulario (Inputs y Labels) --- */
+      label {
+        display: block;
+        font-size: 13px;
+        color: var(--color-texto-base);
+        margin: 10px 0 6px;
+      }
+
+      input[type="text"],
+      input[type="number"],
+      textarea,
+      select {
+        width: 100%;
+        padding: 10px 12px;
+        border: 1px solid var(--color-borde-claro);
+        border-radius: 10px;
+        background: #fafafa;
+        outline: none;
+        box-sizing: border-box;
+        font-family: "Segoe UI", Arial, sans-serif;
+      }
+
+      /* Estilo para el input de archivo */
+      input[type="file"] {
+        width: 100%;
+        font-size: 13px;
+        color: #555;
+        margin: 10px 0 15px;
+        padding: 8px;
+        border: 1px solid var(--color-borde-claro);
+        border-radius: 10px;
+        background: #fafafa;
+        box-sizing: border-box;
+      }
+
+      /* Estilo simple para el label del checkbox */
+      label[for="id_remove_photo"] {
+        display: inline;
+        color: var(--color-error);
+        font-weight: 500;
+        margin-left: 5px;
+      }
+
+      /* Estilo simple para el label del checkbox */
+      label[for="id_is_active"] {
+        display: inline;
+        color: var(--color-texto-base);
+        font-weight: 500;
+        margin-left: 5px;
+      }
+
+      /* Estilo para el checkbox */
+      input[type="checkbox"] {
+        accent-color: var(--color-principal);
+        width: 16px;
+        height: 16px;
+        vertical-align: middle;
+      }
+
+      /* Estilo para deshabilitar visualmente el input de archivo */
+      input[type="file"]:disabled {
+        background-color: #f0f0f0;
+        cursor: not-allowed;
+      }
+
+      input:focus {
+        border-color: var(--color-principal);
+        box-shadow: 0 0 0 3px var(--color-foco-sombra);
+      }
+
+      /* --- Botones y Clases de Ayuda --- */
+      .btn-primary {
+        width: 100%;
+        margin-top: 14px;
+        padding: 10px 12px;
+        border-radius: 10px;
+        background: var(--color-principal);
+        color: var(--color-fondo-tarjeta); /* Blanco */
+        border: none;
+        cursor: pointer;
+        transition: background-color 0.3s;
+      }
+      .btn-primary:hover {
+        background-color: var(--color-principal-hover);
+      }
+
+      .update-link {
+        margin-top: 15px;
+        text-align: center;
+        font-size: 13px;
+      }
+      .update-link a {
+        color: var(--color-principal);
+        text-decoration: underline;
+      }
+
+      /* Mensajes de error */
+      .form-error {
+        color: var(--color-error);
+        font-size: 13px;
+        margin: 6px 0;
+      }
+    </style>
+  </head>
+  <body class="update-bg">
+    <div class="page">
+      <h1 class="brand">ESSENZA</h1>
+      <div class="form-card">
+        <form method="post" enctype="multipart/form-data" novalidate>
+          {% csrf_token %}
+
+          <label for="{{ form.name.id_for_label }}">Nombre</label>
+          {{ form.name }}
+
+          <label for="{{ form.description.id_for_label }}">Descripción</label>
+          {{ form.description }}
+
+          <label for="{{ form.category.id_for_label }}">Categoría</label>
+          {{ form.category }}
+
+          <label for="{{ form.brand.id_for_label }}">Marca</label>
+          {{ form.brand }}
+
+          <label for="{{ form.price.id_for_label }}">Precio</label>
+          {{ form.price }}
+
+          <label for="{{ form.photo.id_for_label }}">Foto (Opcional)</label>
+          {{ form.photo }}
+
+          <div
+            style="
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              margin-bottom: 15px;
+              margin-top: 10px;
+            "
+          >
+            <div>
+              {{ form.remove_photo }}
+              <label for="{{ form.remove_photo.id_for_label }}"
+                >{{ form.remove_photo.label }}</label
+              >
+            </div>
+
+            <div>
+              <label for="{{ form.is_active.id_for_label }}"
+                >{{ form.is_active.label }}</label
+              >
+              {{ form.is_active }}
+            </div>
+          </div>
+
+          {% if form.errors %}
+          <div
+            style="
+              background: #fff0f0;
+              border: 2px solid var(--color-error);
+              border-radius: 10px;
+              padding: 15px;
+              margin-bottom: 15px;
+            "
+          >
+            <p
+              style="
+                color: var(--color-error);
+                margin-top: 0;
+                font-weight: bold;
+              "
+            >
+              ¡El formulario tiene errores!
+            </p>
+            {% for field in form %} {% if field.errors %}
+            <div class="form-error">
+              <strong>{{ field.label }}:</strong>
+              <ul>
+                {% for error in field.errors %}
+                <li>{{ error }}</li>
+                {% endfor %}
+              </ul>
+            </div>
+            {% endif %} {% endfor %} {% for error in form.non_field_errors %}
+            <div class="form-error">
+              <strong>Error general:</strong> {{ error }}
+            </div>
+            {% endfor %}
+          </div>
+          {% endif %}
+
+          <button type="submit" class="btn-primary">Guardar Cambios</button>
+
+          <p class="update-link">
+            <a href="{% url 'product_list' %}">Cancelar</a>
+          </p>
+        </form>
+      </div>
+    </div>
+
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        // 1. Obtener referencias
+        const fileInput = document.getElementById(
+          "{{ form.photo.id_for_label }}"
+        );
+        const removeCheckbox = document.getElementById(
+          "{{ form.remove_photo.id_for_label }}"
+        );
+
+        if (!fileInput || !removeCheckbox) {
+          return;
+        }
+
+        // 2. Lógica para el Checkbox (Deshabilita el selector)
+        function handleRemovePhotoChange() {
+          const isRemoveChecked = removeCheckbox.checked;
+
+          if (isRemoveChecked) {
+            // Si está marcado, deshabilitar (ignorar) el selector de archivos
+            fileInput.disabled = true;
+          } else {
+            // Si está desmarcado, volver a habilitar el selector
+            fileInput.disabled = false;
+          }
+        }
+
+        // 4. Añadir escuchadores de eventos
+        removeCheckbox.addEventListener("change", handleRemovePhotoChange);
+
+        // 5. Ejecutar al inicio para establecer el estado inicial
+        handleRemovePhotoChange();
+      });
+    </script>
+  </body>
+</html>
diff --git a/essenza/templates/user/edit_profile.html b/essenza/templates/user/edit_profile.html
index 9eee2cc..b77587e 100644
--- a/essenza/templates/user/edit_profile.html
+++ b/essenza/templates/user/edit_profile.html
@@ -174,14 +174,6 @@ <h1 class="brand">ESSENZA</h1>
             >
           </div>
           {% endif %} {% if form.errors %}
-          <div style="margin-top: 15px">
-            {% for field in form %} {% for error in field.errors %}
-            <p class="form-error">{{ error }}</p>
-            {% endfor %} {% endfor %} {% for error in form.non_field_errors %}
-            <p class="form-error">{{ error }}</p>
-            {% endfor %}
-          </div>
-          {% endif %} {% if form.errors %}
           <div
             style="
               background: #fff0f0;
diff --git a/essenza/templates/user/profile.html b/essenza/templates/user/profile.html
index 594cb4e..b3127bd 100644
--- a/essenza/templates/user/profile.html
+++ b/essenza/templates/user/profile.html
@@ -1,45 +1,117 @@
-{% extends "base.html" %}
-{% load static %}
+{% extends "base.html" %} {% load static %} {% block title %}Mi Perfil ·
+Essenza{% endblock %} {% block content %}
 
-{% block title %}Mi Perfil · Essenza{% endblock %}
+<style>
+  /* Scoped styles for the profile page to avoid overriding base styles */
+  :root {
+    --color-principal: #c06b3e;
+    --color-principal-hover: #a35a34;
+    --color-error: #b00020;
+  }
+  .profile-page {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 2rem;
+  }
+  .profile-brand {
+    color: var(--color-principal);
+    font-size: 48px;
+    margin-bottom: 10px;
+    text-align: center;
+  }
+  .form-card {
+    width: min(420px, 88vw);
+    background: #fff;
+    border: 2px solid var(--color-principal);
+    border-radius: 16px;
+    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.06);
+    padding: 22px 24px;
+    box-sizing: border-box;
+  }
+  .btn-primary {
+    display: block;
+    width: 100%;
+    max-width: 260px;
+    margin: 14px auto 0;
+    padding: 10px 12px;
+    border-radius: 10px;
+    background: var(--color-principal);
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s;
+    text-decoration: none;
+    text-align: center;
+  }
+  .btn-primary:hover {
+    background-color: var(--color-principal-hover);
+  }
+  .login-link {
+    margin-top: 15px;
+    text-align: center;
+    font-size: 13px;
+  }
+  .login-link a {
+    color: var(--color-principal);
+    text-decoration: underline;
+  }
+  .profile-pic {
+    width: 150px;
+    height: 150px;
+    border-radius: 50%;
+    object-fit: cover;
+    display: block;
+    margin: 10px auto;
+    border: 2px solid var(--color-principal);
+  }
+  .profile-data p {
+    font-size: 16px;
+    color: #333;
+    border-bottom: 1px solid #eee;
+    padding: 10px 0;
+  }
+  .profile-data strong {
+    color: var(--color-principal);
+  }
+  @media (max-width: 600px) {
+    .profile-brand {
+      font-size: 34px;
+    }
+    .form-card {
+      padding: 18px;
+    }
+  }
+</style>
 
-{% block content %}
+<div class="profile-page">
+  <h1 class="profile-brand">ESSENZA</h1>
 
-  <style>
-    /* Scoped styles for the profile page to avoid overriding base styles */
-    :root { --color-principal: #c06b3e; --color-principal-hover: #a35a34; --color-error: #b00020; }
-    .profile-page { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2rem; padding: 40px 0; }
-    .profile-brand { color: var(--color-principal); font-size: 48px; margin-bottom: 10px; text-align: center; }
-    .form-card { width: min(420px, 88vw); background: #fff; border: 2px solid var(--color-principal); border-radius: 16px; box-shadow: 0 12px 28px rgba(0,0,0,0.06); padding: 22px 24px; box-sizing: border-box; }
-    .btn-primary { display: block; width: 100%; max-width: 260px; margin: 14px auto 0; padding: 10px 12px; border-radius: 10px; background: var(--color-principal); color: #fff; border: none; cursor: pointer; transition: background-color .3s; text-decoration: none; text-align: center; }
-    .btn-primary:hover { background-color: var(--color-principal-hover); }
-    .login-link { margin-top: 15px; text-align: center; font-size: 13px; }
-    .login-link a { color: var(--color-principal); text-decoration: underline; }
-    .profile-pic { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; display: block; margin: 10px auto; border: 2px solid var(--color-principal); }
-    .profile-data p { font-size: 16px; color: #333; border-bottom: 1px solid #eee; padding: 10px 0; }
-    .profile-data strong { color: var(--color-principal); }
-    @media (max-width:600px) { .profile-brand { font-size: 34px; } .form-card { padding: 18px; } }
-  </style>
+  <div class="form-card">
+    {% if user.photo %}
+    <img src="{{ user.photo.url }}" alt="Foto de perfil" class="profile-pic" />
+    {% else %}
+    <img
+      src="{% static 'images/default_user.png' %}"
+      alt="Foto de perfil por defecto"
+      class="profile-pic"
+    />
+    {% endif %}
 
-  <div class="profile-page">
-    <h1 class="profile-brand">ESSENZA</h1>
-
-    <div class="form-card">
-      {% if user.photo %}
-        <img src="{{ user.photo.url }}" alt="Foto de perfil" class="profile-pic" />
-      {% else %}
-        <img src="{% static 'images/default_user.png' %}" alt="Foto de perfil por defecto" class="profile-pic" />
-      {% endif %}
-
-      <div class="profile-data">
-        <p><strong>Nombre:</strong> {{ user.first_name }}</p>
-        <p><strong>Apellidos:</strong> {{ user.last_name }}</p>
-        <p><strong>Email:</strong> {{ user.email }}</p>
-      </div>
-
-      <a href="{% url 'profile_edit' %}" class="btn-primary">Editar mis datos</a>
-      <p class="login-link"><a href="{% url 'profile_delete' %}" style="color: var(--color-error)">Eliminar mi cuenta</a></p>
+    <div class="profile-data">
+      <p><strong>Nombre:</strong> {{ user.first_name }}</p>
+      <p><strong>Apellidos:</strong> {{ user.last_name }}</p>
+      <p><strong>Email:</strong> {{ user.email }}</p>
     </div>
+
+    <a href="{% url 'profile_edit' %}" class="btn-primary">Editar mis datos</a>
+    <p class="login-link">
+      <a href="{% url 'profile_delete' %}" style="color: var(--color-error)"
+        >Eliminar mi cuenta</a
+      >
+    </p>
   </div>
+</div>
 
-{% endblock %}
\ No newline at end of file
+{% endblock %}
diff --git a/essenza/user/sample/sample.json b/essenza/user/sample/sample.json
index 643cffc..abcbead 100644
--- a/essenza/user/sample/sample.json
+++ b/essenza/user/sample/sample.json
@@ -48,7 +48,6 @@
       "last_name": "admin",
       "is_superuser": true,
       "is_staff": true,
-      "is_active": true,
       "photo": "profile_pics/admin.jpg",
       "role": "admin",
       "password": "pbkdf2_sha256$1000000$sazfnRvfJ4niYZE6ixBVKR$pboaUb8AWvEXwuJZkWoh3xwfYq++7nik9p2e0TxNPws="