From 4d30bd1f04e24e3766783ea8169312af6dd8fabe Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Fri, 7 Nov 2025 16:22:14 -0600
Subject: [PATCH] feat: Agregar CSS del componente Related Posts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Implementar estilos completos en style.css (líneas 1111-1155)
- Border izquierdo visual indicator (gris → naranja hover)
- Cards altura uniforme con height 100%
- Uso estratégico de !important para override de Bootstrap
- Cursor pointer y transiciones suaves
- HTML ya existía en single.php (sin cambios)

Referencias: Issue #127

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../themes/apus-theme/assets/css/style.css    | 46 +++++++++++++++++++
 1 file changed, 46 insertions(+)

diff --git a/wp-content/themes/apus-theme/assets/css/style.css b/wp-content/themes/apus-theme/assets/css/style.css
index aeff9d95..846558a2 100644
--- a/wp-content/themes/apus-theme/assets/css/style.css
+++ b/wp-content/themes/apus-theme/assets/css/style.css
@@ -1107,3 +1107,49 @@ img {
         margin-top: 1rem;
     }
 }
+
+/* === RELATED POSTS === */
+
+.related-posts {
+    margin: 3rem 0;
+}
+
+.related-posts h2 {
+    color: var(--color-navy-primary);
+    font-weight: 700;
+    margin-bottom: 2rem;
+}
+
+.related-posts .card {
+    cursor: pointer;
+    background: #ffffff !important;
+    border: 1px solid var(--color-neutral-100) !important;
+    border-left: 4px solid var(--color-neutral-600) !important;
+    transition: all 0.3s ease;
+    height: 100%;
+}
+
+.related-posts .card:hover {
+    background: var(--color-neutral-50) !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
+    border-left-color: var(--color-orange-primary) !important;
+}
+
+.related-posts .card-body {
+    padding: 1.5rem !important;
+}
+
+.related-posts .card-title {
+    color: var(--color-navy-primary) !important;
+    font-weight: 600;
+    font-size: 0.95rem;
+    line-height: 1.4;
+}
+
+.related-posts a {
+    text-decoration: none;
+}
+
+.related-posts a:hover .card-title {
+    color: var(--color-orange-primary) !important;
+}