From ae0bfc9d62cb5138bd257faaecabf2896c16d8c2 Mon Sep 17 00:00:00 2001
From: icamarillo <icamarillo@aduanasoft.com.mx>
Date: Mon, 16 Feb 2026 13:01:17 -0700
Subject: [PATCH] =?UTF-8?q?fix:=20Agregar=20safelist=20de=20colores=20en?=
 =?UTF-8?q?=20Tailwind=20para=20auditor=C3=ADa?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Problema: Las clases de colores retornadas por funciones JavaScript
no eran detectadas por el purge de Tailwind, causando que los colores
no se mostraran (aparecían grises).

Solución: Agregar safelist en tailwind.config.js con todas las clases
de colores usadas dinámicamente:
- Colores de acciones: red, blue, green, indigo, orange, yellow
- Colores de severidad/riesgo con variantes 100, 300, 600, 800
- Bordes y textos correspondientes
- Estados hover y focus

Esto asegura que Tailwind incluya estas clases en el CSS compilado
independientemente de si se usan de forma estática o dinámica.
---
 frontend-internal/tailwind.config.js | 55 ++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)

diff --git a/frontend-internal/tailwind.config.js b/frontend-internal/tailwind.config.js
index 654dc20..d2e21fb 100644
--- a/frontend-internal/tailwind.config.js
+++ b/frontend-internal/tailwind.config.js
@@ -1,6 +1,61 @@
 /** @type {import('tailwindcss').Config} */
 export default {
 	content: ['./src/**/*.{html,js,svelte,ts}'],
+	safelist: [
+		// Colores de acciones
+		'bg-red-600',
+		'bg-blue-600',
+		'bg-green-600',
+		'bg-indigo-600',
+		'bg-orange-600',
+		'bg-yellow-500',
+		'bg-gray-600',
+		// Colores de severidad/riesgo
+		'bg-red-100',
+		'bg-red-800',
+		'bg-orange-100',
+		'bg-orange-300',
+		'bg-orange-600',
+		'bg-orange-700',
+		'bg-orange-800',
+		'bg-yellow-100',
+		'bg-yellow-300',
+		'bg-yellow-800',
+		'bg-blue-100',
+		'bg-blue-300',
+		'bg-blue-800',
+		'bg-green-100',
+		'bg-green-300',
+		'bg-green-800',
+		// Bordes
+		'border-red-300',
+		'border-orange-300',
+		'border-yellow-300',
+		'border-blue-300',
+		'border-green-300',
+		// Text colors
+		'text-red-600',
+		'text-red-800',
+		'text-orange-600',
+		'text-orange-800',
+		'text-yellow-800',
+		'text-blue-600',
+		'text-blue-800',
+		'text-green-600',
+		'text-green-800',
+		'text-white',
+		// Hover states
+		'hover:bg-red-700',
+		'hover:bg-orange-700',
+		'hover:bg-blue-700',
+		'hover:bg-indigo-700',
+		'hover:bg-indigo-50',
+		// Focus rings
+		'focus:ring-red-500',
+		'focus:ring-orange-500',
+		'focus:ring-blue-500',
+		'focus:ring-indigo-500',
+	],
 	theme: {
 		extend: {
 			colors: {