From c1f3250a17cb7fdfd0b5bf8d0a6e0a4aba5a0b06 Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Sat, 8 Nov 2025 09:39:29 -0600
Subject: [PATCH] =?UTF-8?q?fix:=20Corregir=20colores=20de=20paginaci=C3=B3?=
 =?UTF-8?q?n=20de=20azul=20a=20naranja=20-=20Issue=20#127?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

PROBLEMA DIAGNOSTICADO:
- Botones de paginación se veían azules en staging
- Agregué CSS a style.css pero existe pagination.css separado
- pagination.css se carga DESPUÉS y sobreescribía con colores Bootstrap azules

SOLUCIÓN IMPLEMENTADA:
- Editar pagination.css directamente (archivo específico de paginación)
- Reemplazar TODOS los #0d6efd (azul Bootstrap) con var(--color-orange-primary)
- Actualizar gradientes azules a naranja sólido
- Actualizar rgba de box-shadows (de azul a naranja)
- Incluye estilos para hover, focus, active y dark mode

ARCHIVOS MODIFICADOS:
- wp-content/themes/apus-theme/assets/css/pagination.css
  * Línea 37: color hover naranja
  * Línea 38-39: background y border hover naranja
  * Línea 41: box-shadow naranja
  * Línea 46-48: focus naranja
  * Línea 50: box-shadow focus naranja
  * Línea 56-57: active background naranja (sin gradiente)
  * Línea 59: box-shadow active naranja
  * Línea 64: active hover background light orange
  * Línea 66: box-shadow active hover naranja
  * Línea 185: dark mode border naranja
  * Línea 189: dark mode active naranja

VALIDACIÓN:
- ✅ Diagnosticado con Playwright (network requests)
- ✅ Identificado orden de carga: style.css → pagination.css
- ✅ Documentado en Issue #127

Referencias: Issue #127

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../apus-theme/assets/css/pagination.css      | 28 +++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/wp-content/themes/apus-theme/assets/css/pagination.css b/wp-content/themes/apus-theme/assets/css/pagination.css
index 9c3ec00b..53217989 100644
--- a/wp-content/themes/apus-theme/assets/css/pagination.css
+++ b/wp-content/themes/apus-theme/assets/css/pagination.css
@@ -34,36 +34,36 @@
 }
 
 .page-link:hover {
-    color: #0d6efd;
-    background-color: #f8f9fa;
-    border-color: #0d6efd;
+    color: var(--color-orange-primary);
+    background-color: rgba(255, 133, 0, 0.1);
+    border-color: var(--color-orange-primary);
     transform: translateY(-2px);
-    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.15);
+    box-shadow: 0 4px 8px rgba(255, 133, 0, 0.15);
     z-index: 2;
 }
 
 .page-link:focus {
-    color: #0d6efd;
+    color: var(--color-orange-primary);
     background-color: #e9ecef;
-    border-color: #0d6efd;
+    border-color: var(--color-orange-primary);
     outline: 0;
-    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
+    box-shadow: 0 0 0 0.25rem rgba(255, 133, 0, 0.25);
 }
 
 /* Active page */
 .page-item.active .page-link {
     color: #ffffff;
-    background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
-    border-color: #0d6efd;
+    background: var(--color-orange-primary);
+    border-color: var(--color-orange-primary);
     font-weight: 600;
-    box-shadow: 0 4px 12px rgba(13, 110, 253, 0.3);
+    box-shadow: 0 4px 12px rgba(255, 133, 0, 0.3);
     z-index: 3;
 }
 
 .page-item.active .page-link:hover {
-    background: linear-gradient(135deg, #0a58ca 0%, #084298 100%);
+    background: var(--color-orange-light);
     transform: translateY(-2px);
-    box-shadow: 0 6px 16px rgba(13, 110, 253, 0.4);
+    box-shadow: 0 6px 16px rgba(255, 133, 0, 0.4);
 }
 
 /* Disabled state */
@@ -182,11 +182,11 @@
     .page-link:hover {
         color: #ffffff;
         background-color: #343a40;
-        border-color: #0d6efd;
+        border-color: var(--color-orange-primary);
     }
 
     .page-item.active .page-link {
-        background: linear-gradient(135deg, #0d6efd 0%, #0a58ca 100%);
+        background: var(--color-orange-primary);
     }
 
     .page-item.disabled .page-link {