Se continua aplicando paleta de colores y se refactorizan clases css

tecnicas/forms/codes_form.py

@@ -6,5 +6,5 @@ class CodesForm(forms.Form):
 
         for index, code in enumerate(codes):
             self.fields[f'producto_{index+1}'] = forms.CharField(max_length=3, required=True, min_length=3, initial=code, label=f"codigo {index+1}", widget=forms.TextInput(attrs={
-                "class": "ct-code bg-gray-300 p-1 border-b-1 text-center w-full disabled:bg-gray-500 uppercase"
+                "class": "ct-code bg-surface-ligt p-1 border-b-1 text-center w-full disabled:bg-surface-general uppercase"
             }))

tecnicas/forms/etiqueta_form.py

@@ -2,6 +2,6 @@ from django import forms
 
 class EtiquetaForm(forms.Form):
     nueva_etiqueta = forms.CharField(max_length=255, required=True, widget=forms.TextInput(attrs={
-        "class": "bg-gray-300 border-b text-center text-black",
+        "class": "bg-surface-alter border-b text-center text-black fond-bold p-3",
         "placeholder": "No repetir etiqueta"
     }))

tecnicas/forms/sesion_basic_form.py

@@ -8,32 +8,32 @@ class SesionBasicForm(forms.Form):
     id_tecnica = forms.IntegerField(widget=forms.HiddenInput())
 
     nombre_sesion = forms.CharField(max_length=255, widget=forms.TextInput(attrs={
-        "class": "bg-gray-200 border-b-1 text-center w-full p-1",
+        "class": "bg-surface-ligt border-b-1 text-center w-full p-1",
         "name": "nombre_sesion",
         "placeholder": "Ej. Mermelada de mango picante"
     }), required=False)
 
     numero_productos = forms.IntegerField(widget=forms.NumberInput(attrs={
-        "class": "bg-gray-200 p-1 border-b-1 text-center w-full",
+        "class": "bg-surface-ligt p-1 border-b-1 text-center w-full",
         "placeholder": "Solo números"
     }), required=True)
 
     numero_catadores = forms.IntegerField(widget=forms.NumberInput(attrs={
-        "class": "bg-gray-200 p-1 border-b-1 text-center w-full",
+        "class": "bg-surface-ligt p-1 border-b-1 text-center w-full",
         "placeholder": "Solo números"
     }), required=True)
 
     numero_repeticiones = forms.IntegerField(widget=forms.NumberInput(attrs={
-        "class": "bg-gray-200 p-1 border-b-1 text-center w-full",
+        "class": "bg-surface-ligt p-1 border-b-1 text-center w-full",
         "placeholder": "Solo números"
     }), required=True)
 
     tamano_escala = forms.IntegerField(widget=forms.NumberInput(attrs={
-        "class": "bg-gray-200 p-1 border-b-1 text-center w-full",
+        "class": "bg-surface-ligt p-1 border-b-1 text-center w-full",
     }), required=True, min_value=5)
 
     instrucciones = forms.CharField(max_length=255, widget=forms.TextInput(attrs={
-        "class": "bg-gray-200 border-b-1 text-center w-full p-1",
+        "class": "bg-surface-ligt border-b-1 text-center w-full p-1",
         "placeholder": "Este campo es opcional"
     }), required=False)
 

tecnicas/forms/sesion_tags_form.py

@@ -9,17 +9,17 @@ class SesionTagsForm(forms.Form):
         if tipo_escala == "estructurada":
             for i in range(longitud):
                 self.fields[f'segmento_{i+1}'] = forms.ModelChoiceField(queryset=Etiqueta.objects.all(), required=True, label=f"segmento {i+1}", empty_label="Selecione opcion", widget=forms.Select(attrs={
-                    "class":"ct-select-op p-1 rounded bg-gray-200 [*]:capitalize"
+                    "class":"ct-select-op p-1 max-sm:w-full bg-surface-ligt [*]:capitalize"
                 }))
         else:
             self.fields['punto_inicial'] = forms.ModelChoiceField(queryset=Etiqueta.objects.all(), required=True, label="Punto inicial", empty_label="Selecione opcion", widget=forms.Select(attrs={
-                    "class":"ct-select-op p-1 rounded bg-gray-200 [*]:capitalize"
+                    "class":"ct-select-op p-1 max-sm:w-full bg-surface-ligt [*]:capitalize"
                 }))
             
             self.fields['punto_medio'] = forms.ModelChoiceField(queryset=Etiqueta.objects.all(), required=True, label="Punto medio", empty_label="Selecione opcion", widget=forms.Select(attrs={
-                    "class":"ct-select-op p-1 rounded bg-gray-200 [*]:capitalize"
+                    "class":"ct-select-op p-1 max-sm:w-full bg-surface-ligt [*]:capitalize"
                 }))
             
             self.fields['punto_final'] = forms.ModelChoiceField(queryset=Etiqueta.objects.all(), required=True, label="Punto final", empty_label="Selecione opcion", widget=forms.Select(attrs={
-                    "class":"ct-select-op p-1 rounded bg-gray-200 [*]:capitalize"
+                    "class":"ct-select-op p-1 max-sm:w-full bg-surface-ligt [*]:capitalize"
                 }))

tecnicas/forms/word_form.py

@@ -9,7 +9,7 @@ class WordForm(forms.ModelForm):
         max_length=255,
         error_messages={
             "required": "parametros requeridos",
-            "unique": "palabra repetida",  # Ojo: 'unique' lo maneja ModelForm, no aquí
+            "unique": "palabra repetida",
             "min_length": "la palabra es muy corta",
             "max_length": "la palabra es muy larga",
         },

tecnicas/static/js/panel-basic.js

@@ -4,7 +4,7 @@ const descriptons = {
   atributos:
     "Con el estilo atributos elijes las palabras para evaluar los productos",
   vocabulario:
-    "Los vocabularios son un conjunto de palabras especificas para evaluar aspectos de un producto.",
+    "Los vocabularios son un conjunto de palabras específicas para evaluar aspectos de un producto",
 };
 
 let inputsScale;

tecnicas/static/js/panel-codes.js

@@ -18,7 +18,7 @@ function submitData(e) {
     });
     submitData.push(simplePosition);
   });
-  
+
   const codesInput = document.createElement("input");
   codesInput.type = "hidden";
   codesInput.name = "sort_codes";
@@ -139,6 +139,8 @@ function addIUPermutations() {
     unlist.classList.add(
       "flex",
       "flex-wrap",
+      "justify-center",
+      "items-center",
       "gap-3",
       "px-3",
       "py-1",
@@ -158,7 +160,16 @@ function addIUPermutations() {
     });
 
     const section = document.createElement("section");
-    section.classList.add("bg-gray-400", "py-2");
+    section.classList.add(
+      "bg-surface-card",
+      "py-2",
+      "sm:max-w-80",
+      "w-full",
+      "flex",
+      "flex-col",
+      "justify-center",
+      "items-center"
+    );
 
     section.appendChild(paragraph);
     section.appendChild(unlist);

tecnicas/templates/tecnicas/create_sesion/configuracion-panel-basic.html

@@ -3,19 +3,9 @@
 
 {% block title %}Panel Configuracion{% endblock %}
 
-<!--
-||||Debe tener los siguietens campos para:
--- Convenvionales tipo escalas
-- Preguntar si desea darle un nombre a la sesion
-- Numero produtos
-- Numero jueces
-- Numero repeticiones, debe ser mayor a 1, no validar si es menos [-------------REALIZAR-------------]
-- Tipo de escala, seran dos, de rango o estructurada
--->
-
 {% block content %}
-<article class="w-full flex flex-col justify-center items-center bg-gray-600 my-10">
-    <article class="flex flex-col gap-4 bg-gray-400 md:p-10 p-5 rounded-2xl lg:w-4xl w-full">
+<article class="cts-container-main">
+    <article class="cts-wrap-content text-black">
         <h1 class="text-center font-bold text-4xl">Panel de configuración</h1>
         {% if error %}
         <p class="text-sm bg-red-200 text-center">{{ error }}</p>
@@ -23,7 +13,6 @@
         <hr>
         <form method="post" action="" class="[&>article]:not-last:mb-4 [&>article]:not-first:pt-4 [&>article]:px-6">
             {% csrf_token %}
-
             <label for="form_sesion.id_tecnica.id_for_label" class="hidden">
                 {{ form_sesion.id_tecnica }}
             </label>
@@ -66,15 +55,18 @@
                 <section class="flex flex-row gap-4 justify-around flex-wrap">
                     {% for escala in form_sesion.estilo_palabras %}
                     <label for="{{escala.id_for_label}}"
-                        class="ct-radio-estilo uppercase text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 border-blue-800  transition-all rounded-xl bg-blue-500 text-white w-fit">
+                        class="ct-radio-estilo uppercase text-lg tracking-wider font-bold p-2 px-4 rounded-xl cts-btn-secondary btn-push">
                         {{ escala.tag }}
                         {{ escala.choice_label }}
                     </label>
                     {% endfor %}
                 </section>
-                <p
-                    class="ct-ayuda-estilo text-lg font-bold tracking-wide bg-gray-600 text-white text-center py-1 px-4 rounded-xl">
-                </p>
+                <section class="w-full flex justify-center items-center">
+                    <p
+                        class="ct-ayuda-estilo max-w-2xl text-lg font-medium tracking-wide bg-surface-card text-center py-1 px-4 rounded-xl">
+                    </p>
+                </section>
+
             </article>
             <hr>
             <article class="cs-escalas-radio flex flex-col gap-4">
@@ -82,7 +74,7 @@
                 <section class="flex flex-row gap-4 justify-around flex-wrap">
                     {% for escala in form_sesion.tipo_escala %}
                     <label for="{{escala.id_for_label}}"
-                        class="ct-radio-escala uppercase text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 border-blue-800  transition-all rounded-xl bg-blue-500 text-white w-fit">
+                        class="ct-radio-escala uppercase text-lg tracking-wider font-bold p-2 px-4 rounded-xl cts-btn-primary btn-push">
                         {{ escala.tag }}
                         {{ escala.choice_label }}
                     </label>
@@ -97,7 +89,7 @@
 
                 <section class="py-2 px-5 flex flex-col justify-center items-center gap-2 relative">
                     <label for="{{ form_sesion.tamano_escala.id_for_label }}"
-                        class="ct-size-scale text-lg flex flex-col items-center px-2 font-medium">
+                        class="ct-size-scale text-xl flex flex-col items-center px-2 font-bold">
                         <p>Establece número de segmentos:</p>
                         {{ form_sesion.tamano_escala }}
                     </label>
@@ -110,9 +102,15 @@
                 </section>
             </article>
             <hr>
-            <article class="cs-escalas-radio flex flex-col items-center gap-4">
-                <button type="submit"
-                    class="uppercase text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-yellow-500 border-yellow-800  transition-all rounded-xl bg-yellow-500 text-white w-fit">Continuar</button>
+            <article class="cs-escalas-radio w-full flex max-sm:flex-col flex-wrap items-center justify-center gap-4">
+                <button type="submit" class="cts-btn-general cts-btn-primary btn-push flex-1/4 w-full">
+                    Continuar
+                </button>
+                <a href="{% url 'cata_system:seleccion_tecnica' %}" class="flex-1/4 w-full">
+                    <button type="button" class="cts-btn-general cts-btn-error btn-push w-full">
+                        Cancelar la creación
+                    </button>
+                </a>
             </article>
         </form>
     </article>

tecnicas/templates/tecnicas/create_sesion/configuracion-panel-codes.html

@@ -4,8 +4,8 @@
 {% block title %}Panel Configuracion{% endblock %}
 
 {% block content %}
-<article class="w-full flex flex-col justify-center items-center bg-gray-600 my-10">
-    <article class="flex flex-col gap-4 bg-gray-400 md:p-10 p-5 rounded-2xl lg:w-4xl w-full">
+<article class="cts-container-main">
+    <article class="cts-wrap-content text-black">
         <h1 class="text-center font-bold text-4xl">Panel de configuración</h1>
         {% if error %}
         <p class="text-2xl">{{ error }}</p>
@@ -13,36 +13,53 @@
         <form method="post" action="" class="ct-codes-form flex flex-col gap-5">
             {% csrf_token %}
             <h2 class="text-2xl mb-2 font-bold">Codificar productos</h2>
-            <article class="flex flex-row flex-wrap gap-4 items-center justify-center">
-                <p class="text-center font-bold tracking-wide text-xl bg-gray-500 text-white px-3 py-3 pb-4 rounded">
+            <hr>
+            <article class="w-full flex flex-col justify-center items-center gap-5">
+                <p class="text-center font-bold tracking-wide text-xl bg-surface-card px-3 py-3 pb-4 rounded max-w-4xl">
                     Puede dejar los campos como están para usar los códigos predefinidos.
                 </p>
-                {% for field in form_codes %}
-                <label for="{{ field.id_for_label }}"
-                    class="text-lg flex flex-col items-center px-2 font-medium tracking-wide">
-                    <p class="tracking-normal capitalize text-base font-bold">{{ field.label }}</p>
-                    {{ field }}
-                </label>
-                {% endfor %}
-            </article>
-            <article class="flex justify-center gap-5">
-                <button type="button"
-                    class="ct-gen-or text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-yellow-500 border-yellow-800  transition-all rounded-xl bg-yellow-500 text-white w-fit capitalize"
+                <article class="flex flex-row flex-wrap gap-4 items-center justify-center max-w-4xl">
+                    {% for field in form_codes %}
+                    <label for="{{ field.id_for_label }}"
+                        class="text-lg flex flex-col items-center px-2 font-medium tracking-wide">
+                        <p class="tracking-normal capitalize text-base font-bold">{{ field.label }}</p>
+                        {{ field }}
+                    </label>
+                    {% endfor %}
+                </article>
+                <button type="button" class="cts-btn-general cts-btn-secondary btn-push uppercase"
                     onclick="setPermutations()">
                     regenerar ordenes
                 </button>
             </article>
-            <article>
-                <h2 class="text-2xl mb-2 font-bold">Ordenes</h2>
+
+            <h2 class="text-2xl mb-2 font-bold">Ordenes</h2>
+            <hr>
+            <article class="w-full">
                 <section class="flex justify-center">
                     <article
-                        class="ct-orden-list flex flex-wrap px-3 py-4 justify-center items-center capitalize text-lg bg-gray-500 gap-5 w-fit">
+                        class="ct-orden-list grid grid-cols-3 max-lg:grid-cols-2 max-sm:grid-cols-1 gap-4 px-3 py-4 justify-center items-center capitalize text-lg bg-surface-sweet">
                     </article>
                 </section>
             </article>
-            <article class="flex justify-center items-center py-3 rounded">
-                <button type="submit"
-                    class="ct-btn-submit uppercase text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-yellow-500 border-yellow-800  transition-all rounded-xl bg-yellow-500 text-white w-fit disabled:bg-amber-600">Continuar</button>
+
+            <hr>
+            <article class="flex flex-col items-center gap-4">
+                <section class="flex w-full max-sm:flex-col flex-wrap gap-4 max-w-2xl">
+                    <button type="submit" class="cts-btn-general cts-btn-primary btn-push flex-1 w-full">
+                        Continuar
+                    </button>
+                    <a href="{% url 'cata_system:panel_configuracion_tags' %}" class="flex-1 w-full">
+                        <button type="button" class="cts-btn-general cts-btn-secondary btn-push w-full">
+                            Paso anterior
+                        </button>
+                    </a>
+                </section>
+                <a href="{% url 'cata_system:seleccion_tecnica' %}" class="w-full max-w-2xl">
+                    <button type="button" class="cts-btn-general cts-btn-error btn-push w-full">
+                        Cancelar la creación
+                    </button>
+                </a>
             </article>
         </form>
         <input type="number" value="{{ num_tester }}" class="ct-num-cata hidden" disabled>

tecnicas/templates/tecnicas/create_sesion/configuracion-panel-tags.html

@@ -3,19 +3,10 @@
 
 {% block title %}Panel Configuracion{% endblock %}
 
-<!--
-||||Debe tener los siguietens campos para:
--- Convenvionales tipo escalas
-- Agregar palabras o Elejir vocabulario
-- Instrucciones
-- Orden de presentacion
-- Presentar un orden basico segun el numero de catadores y los productos, esta se le muestra el presentador
--->
-
 {% block content %}
-<article class="w-full flex flex-col justify-center items-center bg-gray-600 my-10">
+<article class="cts-container-main">
     <section class="w-fit h-fit relative">
-        <article class="flex flex-col gap-4 bg-gray-400 md:p-10 p-5 rounded-2xl lg:w-4xl w-full">
+        <article class="cts-wrap-content text-black w-full">
             <h1 class="text-center font-bold text-4xl">Panel de configuración</h1>
             <hr>
             {% if error %}
@@ -25,11 +16,12 @@
             {% endif %}
             <form method="post" action="" class="flex flex-col gap-5">
                 {% csrf_token %}
-                <article class="p-4 flex flex-col gap-2 rounded">
+                <article class="p-4 flex flex-col gap-2 rounded max-sm:text-center">
                     <h2 class="text-2xl mb-2 font-bold">Seleccion de etiquetas</h2>
                     {% for field in form_tags %}
-                    <div class="flex flex-row justify-center items-center gap-5 text-lg">
-                        <label for="{{ field.id_for_label }}" class="font-medium p-1 px-3 bg-gray-200 capitalize rounded">
+                    <div class="flex max-sm:flex-col justify-center items-center gap-5 max-sm:gap-2 text-lg border-b-4 border-l-4 border-btn-secondary bg-surface-card p-1">
+                        <label for="{{ field.id_for_label }}"
+                            class="font-medium p-1 px-3 max-sm:w-full capitalize rounded">
                             {{ field.label }}
                         </label>
                         {{ field }}
@@ -37,40 +29,56 @@
                     {% endfor %}
                 </article>
                 <hr>
-                <article class="flex gap-3 flex-wrap p-2 justify-center rounded">
-                    <p class="bg-gray-300 p-2 text-center rounded font-bold text-md">
+                <article class="flex flex-col gap-3 p-2 justify-center items-center bg-surface-card rounded">
+                    <p class="p-2 text-center rounded font-bold text-md">
                         Agregar otra etiqueta
                     </p>
                     <button type="button" onclick="showHiddeExtraTags()"
-                        class="p-1 px-10 uppercase text-lg tracking-wider font-medium border-b-2 active:border-b-0 active:border-t-2 active:border-yellow-500 border-yellow-800  transition-all rounded-xl bg-yellow-500 w-fit">
+                        class="cts-btn-general cts-btn-secondary btn-push w-40">
                         ➕
                     </button>
                 </article>
                 <hr>
-                <article class="flex justify-center items-center py-3 rounded">
-                    <button type="submit"
-                    class="uppercase text-lg tracking-wider font-medium p-2 px-4 border-b-2 active:border-b-0 active:border-t-2 active:border-yellow-500 border-yellow-800  transition-all rounded-xl bg-yellow-500 text-white w-fit">Continuar</button>
+                <article class="cs-escalas-radio w-full flex flex-col gap-4">
+                    <section class="flex max-sm:flex-col flex-wrap items-center justify-center gap-4">
+                        <button type="submit" class="cts-btn-general cts-btn-primary btn-push flex-1 w-full">
+                            Continuar
+                        </button>
+                        <a href="{% url 'cata_system:seleccion_tecnica' %}" class="flex-1 w-full">
+                            <button type="button" class="cts-btn-general cts-btn-secondary btn-push w-full">
+                                Paso anterior
+                            </button>
+                        </a>
+                    </section>
+                    <a href="{% url 'cata_system:seleccion_tecnica' %}" class="flex-1 w-full">
+                        <button type="button" class="cts-btn-general cts-btn-error btn-push w-full">
+                            Cancelar la creación
+                        </button>
+                    </a>
                 </article>
             </form>
         </article>
         <article
-            class="ct-new-tags absolute top-0 w-full h-full bg-gray-600/70 p-5 flex justify-center items-center rounded-2xl hidden">
-            <section class="p-5 bg-gray-400 w-fit rounded">
+            class="ct-new-tags absolute top-0 w-full h-full bg-surface-sweet/70 p-5 flex justify-center items-center rounded-2xl hidden">
+            <section class="p-5 bg-surface-ligt border border-surface-general w-fit rounded">
                 <form method="post" action="" class="ct-form-new-tag p-3">
                     {% csrf_token %}
                     <label for="{{ form_new_tag.nueva_etiqueta.id_for_label }}"
-                        class="font-medium text-md text-white flex gap-3">
-                        <p class="bg-gray-600 px-4">Nueva etiqueta:</p>
+                        class="font-medium text-md text-black flex max-sm:flex-col gap-3">
+                        <p class="bg-btn-secondary sm:p-4 p-1 font-semibold">Nueva etiqueta:</p>
                         {{ form_new_tag.nueva_etiqueta }}
                     </label>
                     <p
                         class="ct-error-tag mt-4 font-bold bg-red-500 text-white text-md capitalize text-center rounded hidden">
                         error</p>
-                    <article class="flex justify-center gap-8 mt-4 text-white font-medium tracking-wide">
-                        <button class="rounded px-3 py-1 bg-green-700 active:bg-green-600"
-                            type="submit">Agregar</button>
-                        <button class="rounded px-3 py-1 bg-red-500 active:bg-red-400" type="button"
-                            onclick="showHiddeExtraTags()">Cancelar</button>
+                    <article class="flex max-sm:flex-col justify-center gap-8 max-sm:gap-4 mt-4 text-white font-medium tracking-wide">
+                        <button type="submit" class="cts-btn-general cts-btn-primary btn-push">
+                            Agregar
+                        </button>
+                        <button class="cts-btn-general cts-btn-error btn-push" type="button"
+                            onclick="showHiddeExtraTags()">
+                            Cancelar
+                        </button>
                     </article>
                 </form>
             </section>
@@ -84,7 +92,6 @@
 
 {%if escala == "estructurada"%}
 <script>
-    // Asignacion rapida de valores a los select
     for (let i = 0; i < options.length; i++) {
         if (options.item(i).value) {
             values.push(options.item(i).value)

tecnicas/templates/tecnicas/create_sesion/seleccion-tecnica.html

@@ -3,16 +3,18 @@
 {% block title %}Panel principal{% endblock %}
 
 {% block content %}
-<article class="w-full flex flex-col justify-center items-center bg-gray-600 mt-10 mb-10">
-    <article class="flex flex-col gap-8 bg-gray-400 md:p-10 p-5 rounded-2xl lg:w-4xl w-full">
+<article class="cts-container-main">
+    <article class="cts-wrap-content">
         <header class="text-center flex sm:flex-row flex-col md:gap-8 gap-3 items-center w-full">
-            <div class="bg-gray-600 p-4 text-white rounded-xl sm:flex-1 w-full">
-                <h1 class="font-bold text-2xl">Selección de<br>técnica sensorial</h1>
+            <div class="bg-surface-card p-4 text-black rounded-xl sm:flex-1 w-full">
+                <h1 class="font-bold text-2xl">Selección de técnica sensorial</h1>
             </div>
             <div class="sm:flex-1 flex flex-row-reverse">
-                <a href="{% url 'cata_system:index' %}"
-                    class="text-white bg-blue-600 hover:bg-blue-700 active:outline-none active:ring-4 active:ring-blue-300 font-medium rounded-xl text-xl p-4 text-center uppercase">Panel
-                    principal</a>
+                <a href="{% url 'cata_system:index' %}">
+                    <button class="cts-btn-general cts-btn-error btn-push">
+                        Panel principal
+                    </button>
+                </a>
             </div>
         </header>
         <section class="text-white *:not-last:mb-4">
@@ -25,15 +27,17 @@
             {% for cate, tecnicas in tipos.items %}
             <article>
                 <button
-                    class="p-4 bg-blue-700 hover:bg-blue-800 active:ring-4 active:outline-none active:ring-blue-300 flex flex-row gap-4 justify-center items-center rounded-lg text-2xl font-medium uppercase tracking-wider w-full z-20 relative"
+                    class="cts-btn-general cts-btn-primary btn-push flex flex-row gap-4 justify-center items-center rounded-lg text-2xl font-medium uppercase tracking-wider w-full z-20 relative"
                     onclick="showList('{{cate}}'); hiddenError()" type="button">{{ cate }}</button>
                 {% if tecnicas %}
                 <section
-                    class="modal-list-{{ cate }} flex flex-col text-lg bg-blue-100 p-4 pr-6 pl-8 sm:pl-12 z-10 -translate-y-1 rounded-b-2xl *:not-last:mb-4 transition-all duration-1000 hidden w-full">
+                    class="modal-list-{{ cate }} flex flex-col text-lg bg-surface-ligt p-4 pr-6 pl-8 sm:pl-12 z-10 -translate-y-1 rounded-b-2xl *:not-last:mb-4 transition-all duration-1000 hidden w-full">
                     {% for tecnica in tecnicas %}
-                    <a href="{% url 'cata_system:panel_configuracion_basic'%}?id_tecnica={{tecnica.id}}"
-                        class="bg-green-700 border-l-10 border-gray-700 rounded-md px-3 py-2 w-full font-bold tracking-wider text-left uppercase">
-                        {{ tecnica.nombre_tecnica }}
+                    <a href="{% url 'cata_system:panel_configuracion_basic'%}?id_tecnica={{tecnica.id}}">
+                        <button
+                            class="cts-btn-secondary btn-push rounded-lg border-b-0 border-l-4 border-gray-700 px-3 py-2 w-full text-left font-bold uppercase">
+                            {{ tecnica.nombre_tecnica }}
+                        </button>
                     </a>
                     {% endfor %}
                 </section>

tecnicas/templates/tecnicas/main-panel.html

@@ -3,8 +3,8 @@
 {% block title %}Panel principal{% endblock %}
 
 {% block content %}
-<article class="ct-container">
-    <article class="ct-wrap-content">
+<article class="cts-container-main">
+    <article class="cts-wrap-content">
         <header class="flex flex-col flex-wrap justify-center items-center gap-8">
             <section class="bg-surface-card p-8 rounded-md w-full shadow-lg">
                 <h1 class="text-black text-4xl font-bold text-center max-sm:text-2xl">Panel Principal</h1>

tecnicas/templates/tecnicas/manage_sesions/detalles-sesion.html

@@ -4,15 +4,15 @@
 {% block title %}Detalles Sesion{% endblock %}
 
 {% block content %}
-<article class="ct-container">
-    <article class="ct-wrap-content">
+<article class="cts-container-main">
+    <article class="cts-wrap-content">
         <header class="text-center flex-row w-full flex justify-around items-center flex-wrap gap-10">
             <h1 class="text-black rounded-xl font-bold text-2xl bg-surface-card shadow-lg p-4 flex-1">
                 Detalles de la sesión
             </h1>
             <a href="{% url 'cata_system:index' %}" class="w-fit">
                 <button
-                    class="text-black bg-btn-secondary font-medium rounded-lg text-xl p-4 text-center border-pink-800 btn-push">
+                    class="cts-btn-general cts-btn-error btn-push">
                     Volver a las Sesiones
                 </button>
             </a>
@@ -170,7 +170,7 @@
             {% endif %}
 
             <button
-                class="flex-1 uppercase text-lg max-sm:text-base tracking-wider p-4 border-b-2 active:border-b-0 active:border-t-2 active:border-red-500 border-red-800 transition-all rounded-xl bg-red-600 text-white font-bold disabled:bg-amber-600 flex flex-col justify-center items-center gap-2">
+                class="flex-1 uppercase text-lg cts-btn-general cts-btn-error btn-push flex flex-col justify-center items-center gap-2">
                 borrar
                 <figure class="w-10">
                     <img src="{% static 'img/basura.svg' %}" alt="bote de basura" class="invert">

tecnicas/templates/tecnicas/manage_sesions/monitor-sesion.html

@@ -3,8 +3,8 @@
 {% block title %}Monitoreo{% endblock %}
 
 {% block content %}
-<article class="ct-container">
-    <article class="ct-wrap-content">
+<article class="cts-container-main">
+    <article class="cts-wrap-content">
         <header class="text-center">
             <h1 class="text-3xl font-bold text-black">Sesión sensorial en curso</h1>
         </header>

tecnicas/templates/tecnicas/manage_sesions/sesiones-panel.html

@@ -4,16 +4,15 @@
 {% block title %}Panel Sesiones{% endblock %}
 
 {% block content %}
-<article class="ct-container">
-    <article class="ct-wrap-content">
+<article class="cts-container-main">
+    <article class="cts-wrap-content">
         <header class="text-center flex flex-row max-sm:flex-col gap-8 items-center w-full">
             <div class="bg-surface-card p-4 text-black shadow-lg rounded-xl flex-1">
                 <h1 class="font-bold text-2xl">Administra las<br>sesiones sensoriales</h1>
             </div>
             <div class="flex-1 flex justify-end items-center">
                 <a href="{% url 'cata_system:index' %}" class="w-fit">
-                    <button
-                        class="text-black bg-btn-secondary font-medium rounded-lg text-xl p-4 text-center border-pink-800 btn-push">
+                    <button class="cts-btn-general cts-btn-error btn-push">
                         Ir al Panel principal
                     </button>
                 </a>
@@ -51,8 +50,9 @@
                     </ul>
                     <div class="mt-6">
                         <a href="{% url 'cata_system:detalles_sesion' session_code=sesion.codigo_sesion %}">
-                            <button class="btn bg-btn-primary border-0 block w-full btn-push">Inspeccionar
-                                sesión</button>
+                            <button class="btn bg-btn-primary border-0 block w-full btn-push">
+                                Inspeccionar sesión
+                            </button>
                         </a>
                     </div>
                 </div>

tecnicas/templates/tecnicas/manage_tester/catador-buscar.html

@@ -4,8 +4,8 @@
 {% block title %}Buscar Catador{% endblock %}
 
 {% block content %}
-<article class="ct-container">
-    <article class="ct-wrap-content">
+<article class="cts-container-main">
+    <article class="cts-wrap-content">
         <header class="flex-1 flex flex-col gap-7">
             <div class="bg-surface-card p-8 text-black text-2xl font-bold rounded-2xl text-center capitalize">
                 <h1>buscando catatador</h1>
@@ -24,7 +24,7 @@
                             Buscar
                         </button>
                         <a href="{% url 'cata_system:panel_catadores' %}">
-                            <button
+                            <button type="button"
                                 class="text-white w-fit bg-ct-error font-bold rounded-lg text-xl py-2 px-6 text-center border-pink-800 btn-push">
                                 Regresar
                             </button>

tecnicas/templates/tecnicas/manage_tester/catador-crear.html

@@ -4,8 +4,8 @@
 {% block title %}Crear Catador{% endblock %}
 
 {% block content %}
-<article class="ct-container">
-    <article class="ct-wrap-content">
+<article class="cts-container-main">
+    <article class="cts-wrap-content">
         <header class="flex flex-col gap-7">
             <div class="bg-surface-card p-8 text-black text-2xl font-bold rounded-2xl text-center">
                 <h1>Creando Catador</h1>

tecnicas/templates/tecnicas/manage_tester/catadores-panel.html

@@ -4,8 +4,8 @@
 {% block title %}Gestionar Catadores{% endblock %}
 
 {% block content %}
-<article class="ct-container">
-    <article class="ct-wrap-content">
+<article class="cts-container-main">
+    <article class="cts-wrap-content">
         <article class="grid min-sm:grid-cols-2 gap-4 p-5 rounded-2xl">
             <header class="flex-1 flex flex-col gap-4">
                 <div class="bg-surface-card p-8 text-2xl text-black font-bold rounded-2xl text-center">

theme/static_src/src/styles.css

@@ -1,57 +1,38 @@
 @import "tailwindcss";
 @plugin "daisyui";
 
-@theme {
-  --color-surface-general: #B95E82;
-  --color-surface-alter: #F39F9F;
-  --color-surface-sweet: #FFC29B;
-  --color-surface-ligt: #FFECC0;
-  --color-surface-card: #FFF3E0;
-  --color-surface-alter-card: #91C4C3;
-  --color-btn-primary: #4CAF50;
-  --color-btn-secondary: #E45A92;
-  --color-btn-tertiary: #FFACAC;
-  --color-ct-success: #2E7D32;
-  --color-ct-error: #E62727;
+
+.cts-container-main {
+  @apply w-full flex flex-col justify-center items-center bg-surface-general mt-10 mb-10;
 }
 
-.btn-push {
-  @apply border-b-4 active:border-b-0 active:border-t-4 transition-all;
+.cts-wrap-content {
+  @apply flex flex-col gap-8 bg-surface-alter p-10 max-lg:p-6 max-sm:px-2 max-sm:w-full rounded-xl max-lg:rounded-none;
 }
 
-.ct-container {
-  @apply w-full flex flex-col justify-center items-center bg-surface-general mt-10 mb-10;
+.cts-btn-general {
+  @apply font-bold rounded-lg text-xl p-4 text-center;
 }
 
-.ct-wrap-content {
-  @apply flex flex-col gap-8 bg-surface-alter p-10 max-lg:p-6 max-sm:px-2 max-sm:w-full rounded-xl max-lg:rounded-none;
+.cts-btn-primary {
+  @apply text-white bg-btn-primary border-green-800;
 }
 
-/* 
-#FFECC0
-#FFC29B
-#F39F9F
-#B95E82
+.cts-btn-secondary {
+  @apply text-white bg-btn-secondary border-pink-800;
+}
 
-#80A1BA
-#91C4C3
-#B4DEBD
-#FFF7DD
+.cts-btn-tertiary {
+  @apply text-white bg-btn-tertiary border-pink-800;
+}
 
-#3E1E68
-#5D2F77
-#E45A92
-#FFACAC
-*/
+.cts-btn-error {
+  @apply text-white bg-ct-error border-red-800;
+}
 
+.btn-push {
+  @apply border-b-4 active:border-b-0 active:border-t-4 transition-all;
+}
 
-/**
-  * A catch-all path to Django template files, JavaScript, and Python files
-  * that contain Tailwind CSS classes and will be scanned by Tailwind to generate the final CSS file.
-  *
-  * If your final CSS file is not being updated after code changes, you may want to broaden or narrow
-  * the scope of this path.
-  */
 @source "../../../**/*.{html,py,js}";
-@source "../../../tecnicas/templates/tecnicas/*.{html,py,js}";
-@source "../../../tecnicas/templates/tecnicas/**/*.{html,py,js}";
+@config "../tailwind.config.js"

theme/static_src/tailwind.config.js

@@ -0,0 +1,26 @@
+// tailwind.config.js
+module.exports = {
+  content: [
+    "../templates/base.html",
+    "../../tecnicas/templates/tecnicas/*.{html,py,js}",
+    "../../tecnicas/templates/tecnicas/**/*.{html,py,js}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        "surface-general": "#B95E82",
+        "surface-alter": "#F39F9F",
+        "surface-sweet": "#FFC29B",
+        "surface-ligt": "#FFECC0",
+        "surface-card": "#FFF3E0",
+        "surface-alter-card": "#91C4C3",
+        "btn-primary": "#4CAF50",
+        "btn-secondary": "#E45A92",
+        "btn-tertiary": "#FFACAC",
+        "ct-success": "#2E7D32",
+        "ct-error": "#E62727",
+      },
+    },
+  },
+  plugins: [],
+};