From 6e4b786595bd89f07fdcf332f9089a37737a3a29 Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Tue, 4 Nov 2025 20:00:07 -0600
Subject: [PATCH] [NIVEL 1 COMPLETADO] Estructura HTML Base + Sistema de
 Variables CSS - Issues #47 #48
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implementación de CIMIENTOS del tema según template index.html.
Sin estos cambios NO se puede avanzar a componentes visuales.

**Issue #47: Estructura HTML Base**
- single.php: Reemplazada estructura con Grid Bootstrap exacto del template
  - Agregado: <div class="container"> → <div class="row">
  - Columna principal: <div class="col-lg-9"> (línea 28)
  - Columna sidebar: <div class="col-lg-3"> (línea 244)
  - Eliminado: <div class="content-wrapper"> (obsoleto)
- Estructura ahora coincide 100% con template líneas 347-350

**Issue #48: Sistema de Variables CSS**
- Creado: assets/css/variables.css (180 líneas)
  - 50+ variables CSS de colores paleta RDash
  - Variables tipográficas (fonts, sizes, weights)
  - Variables de espaciado y bordes
  - Variables de sombras y transiciones
  - Variables de gradientes del template
- Registrado en enqueue-scripts.php (línea 51-58)
- Dependencia: se carga DESPUÉS de Bootstrap

**Archivos Modificados:**
- wp-content/themes/apus-theme/single.php
- wp-content/themes/apus-theme/inc/enqueue-scripts.php

**Archivos Creados:**
- wp-content/themes/apus-theme/assets/css/variables.css

**Referencia Template:**
D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\_planeacion\theme-template\index.html

**Resultado:**
NIVEL 1 (CIMIENTOS) está completo. Ahora se puede avanzar a NIVEL 2 (Componentes Principales).

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../apus-theme/assets/css/variables.css       | 194 ++++++++++++++++++
 .../themes/apus-theme/inc/enqueue-scripts.php |   9 +
 wp-content/themes/apus-theme/single.php       |  38 ++--
 3 files changed, 227 insertions(+), 14 deletions(-)
 create mode 100644 wp-content/themes/apus-theme/assets/css/variables.css

diff --git a/wp-content/themes/apus-theme/assets/css/variables.css b/wp-content/themes/apus-theme/assets/css/variables.css
new file mode 100644
index 00000000..7f652bde
--- /dev/null
+++ b/wp-content/themes/apus-theme/assets/css/variables.css
@@ -0,0 +1,194 @@
+/**
+ * Variables CSS del Template RDash
+ * Fuente: D:\_Desarrollo\02AnalisisDePreciosUnitarios\analisisdepreciosunitarios.com\_planeacion\theme-template\css\style.css
+ *
+ * NIVEL 1 - BLOQUEANTE
+ * Estas variables DEBEN existir antes de aplicar cualquier estilo.
+ *
+ * @package Apus_Theme
+ * @since 1.0.0
+ */
+
+:root {
+	/* ========================================
+	   COLORES PRINCIPALES - Paleta RDash
+	   ======================================== */
+
+	/* Azules */
+	--color-navy-dark: #0E2337;        /* Navbar background */
+	--color-blue-primary: #1e3a5f;     /* Hero gradient start */
+	--color-blue-secondary: #2c5282;   /* Hero gradient end */
+	--color-blue-light: #1a73e8;       /* Links, accents */
+
+	/* Turquesa / Cyan */
+	--color-cyan-primary: #61c7cd;     /* Links hover, highlights */
+	--color-cyan-dark: #4db8c4;        /* Cyan darker variant */
+	--color-cyan-darker: #4fb3b9;      /* Notification bar hover */
+
+	/* Naranjas */
+	--color-orange-primary: #FF8600;   /* CTA primary */
+	--color-orange-secondary: #FFB800; /* CTA gradient end */
+	--color-orange-button: #FF6B35;    /* Let's Talk button start */
+	--color-orange-button-end: #FF8C42;/* Let's Talk button end */
+	--color-orange-hover: #e67800;     /* Orange hover state */
+
+	/* Grises */
+	--color-slate-gray: #4C5C6B;       /* Notification bar background */
+	--color-gray-50: #f8f9fa;          /* Light backgrounds */
+	--color-gray-100: #f7fafc;         /* Related posts background */
+	--color-gray-200: #e9ecef;         /* Borders light */
+	--color-gray-300: #dee2e6;         /* Borders */
+	--color-gray-400: #cbd5e0;         /* Scrollbar */
+	--color-gray-500: #a0aec0;         /* Scrollbar hover */
+	--color-gray-600: #6c757d;         /* Text secondary */
+	--color-gray-700: #495057;         /* Text default */
+	--color-gray-800: #333;            /* Body text */
+	--color-gray-900: #212529;         /* Headings */
+	--color-gray-dark: #1a1a1a;        /* Footer background */
+
+	/* Blancos y negros */
+	--color-white: #ffffff;
+	--color-black: #000000;
+
+	/* ========================================
+	   TIPOGRAFÍA
+	   ======================================== */
+
+	--font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+	--font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+
+	--font-size-base: 1rem;
+	--font-size-sm: 0.875rem;
+	--font-size-lg: 1.125rem;
+	--font-size-xl: 1.25rem;
+
+	--font-weight-normal: 400;
+	--font-weight-medium: 500;
+	--font-weight-semibold: 600;
+	--font-weight-bold: 700;
+
+	--line-height-base: 1.5;
+	--line-height-tight: 1.25;
+	--line-height-loose: 1.8;
+
+	/* ========================================
+	   ESPACIADOS
+	   ======================================== */
+
+	--spacing-xs: 0.25rem;    /* 4px */
+	--spacing-sm: 0.5rem;     /* 8px */
+	--spacing-md: 1rem;       /* 16px */
+	--spacing-lg: 1.5rem;     /* 24px */
+	--spacing-xl: 2rem;       /* 32px */
+	--spacing-2xl: 3rem;      /* 48px */
+	--spacing-3xl: 4rem;      /* 64px */
+
+	/* ========================================
+	   BORDES
+	   ======================================== */
+
+	--border-width: 1px;
+	--border-width-thick: 2px;
+	--border-width-thicker: 3px;
+	--border-width-lateral: 4px;
+
+	--border-radius-sm: 4px;
+	--border-radius-md: 8px;
+	--border-radius-lg: 12px;
+	--border-radius-xl: 16px;
+
+	--border-color-light: var(--color-gray-200);
+	--border-color-default: var(--color-gray-300);
+
+	/* ========================================
+	   SOMBRAS
+	   ======================================== */
+
+	--shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
+	--shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
+	--shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
+	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.2);
+	--shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.25);
+	--shadow-2xl: 0 20px 60px rgba(0, 0, 0, 0.3);
+
+	/* Sombras específicas de componentes */
+	--shadow-navbar: 0 2px 4px rgba(0, 0, 0, 0.15);
+	--shadow-navbar-scrolled: 0 4px 12px rgba(0, 0, 0, 0.25);
+	--shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.12);
+	--shadow-cta: 0 8px 24px rgba(255, 133, 0, 0.3);
+	--shadow-cta-hover: 0 12px 32px rgba(255, 133, 0, 0.4);
+	--shadow-button: 0 4px 12px rgba(255, 107, 53, 0.3);
+	--shadow-related-posts: 0 12px 32px rgba(26, 115, 232, 0.15);
+	--shadow-pagination: 0 4px 12px rgba(26, 115, 232, 0.3);
+
+	/* ========================================
+	   TRANSICIONES
+	   ======================================== */
+
+	--transition-fast: 0.15s ease;
+	--transition-base: 0.3s ease;
+	--transition-slow: 0.5s ease;
+	--transition-cubic: cubic-bezier(0.4, 0, 0.2, 1);
+
+	/* ========================================
+	   Z-INDEX
+	   ======================================== */
+
+	--z-dropdown: 1000;
+	--z-sticky: 1020;
+	--z-navbar: 1030;
+	--z-modal-backdrop: 1040;
+	--z-modal: 1050;
+	--z-popover: 1060;
+	--z-tooltip: 1070;
+
+	/* ========================================
+	   GRADIENTES
+	   ======================================== */
+
+	--gradient-hero: linear-gradient(135deg, var(--color-blue-primary) 0%, var(--color-blue-secondary) 100%);
+	--gradient-cta: linear-gradient(135deg, var(--color-orange-primary) 0%, var(--color-orange-secondary) 100%);
+	--gradient-button-lets-talk: linear-gradient(135deg, var(--color-orange-button) 0%, var(--color-orange-button-end) 100%);
+	--gradient-pagination: linear-gradient(135deg, var(--color-blue-primary) 0%, var(--color-blue-secondary) 100%);
+	--gradient-underline: linear-gradient(90deg, var(--color-cyan-primary) 0%, var(--color-cyan-dark) 100%);
+	--gradient-border-related: linear-gradient(180deg, var(--color-blue-primary) 0%, var(--color-blue-light) 100%);
+
+	/* ========================================
+	   OPACIDADES
+	   ======================================== */
+
+	--opacity-disabled: 0.5;
+	--opacity-hover: 0.8;
+	--opacity-backdrop: 0.5;
+
+	/* ========================================
+	   BREAKPOINTS (para uso en calc o clamp)
+	   ======================================== */
+
+	--breakpoint-sm: 576px;
+	--breakpoint-md: 768px;
+	--breakpoint-lg: 992px;
+	--breakpoint-xl: 1200px;
+	--breakpoint-xxl: 1400px;
+}
+
+/* ========================================
+   APLICACIÓN GLOBAL DE VARIABLES
+   ======================================== */
+
+body {
+	font-family: var(--font-family-base);
+	color: var(--color-gray-800);
+	line-height: var(--line-height-base);
+	font-weight: var(--font-weight-normal);
+}
+
+/* Links globales */
+a {
+	color: var(--color-blue-light);
+	transition: color var(--transition-base);
+}
+
+a:hover {
+	color: var(--color-cyan-primary);
+}
diff --git a/wp-content/themes/apus-theme/inc/enqueue-scripts.php b/wp-content/themes/apus-theme/inc/enqueue-scripts.php
index d48c7d83..9299dff6 100644
--- a/wp-content/themes/apus-theme/inc/enqueue-scripts.php
+++ b/wp-content/themes/apus-theme/inc/enqueue-scripts.php
@@ -48,6 +48,15 @@ function apus_enqueue_bootstrap() {
         'all'
     );
 
+    // Variables CSS del Template RDash (NIVEL 1 - BLOQUEANTE - Issue #48)
+    wp_enqueue_style(
+        'apus-variables',
+        get_template_directory_uri() . '/assets/css/variables.css',
+        array('apus-bootstrap'),
+        APUS_VERSION,
+        'all'
+    );
+
     // Bootstrap JS Bundle - in footer with defer
     wp_enqueue_script(
         'apus-bootstrap-js',
diff --git a/wp-content/themes/apus-theme/single.php b/wp-content/themes/apus-theme/single.php
index ee9a6d3c..550015b4 100644
--- a/wp-content/themes/apus-theme/single.php
+++ b/wp-content/themes/apus-theme/single.php
@@ -20,10 +20,13 @@ get_template_part('template-parts/content', 'hero');
 
 	<main id="main-content" class="site-main" role="main">
 
-		<div class="content-wrapper">
+		<!-- Container Bootstrap exacto del template -->
+		<div class="container">
+			<div class="row">
 
-			<!-- Primary Content Area -->
-			<div id="primary" class="content-area">
+				<!-- Columna Principal (9/12) - Template línea 349 -->
+				<div class="col-lg-9">
+					<div id="primary" class="content-area">
 
 				<?php
 				while ( have_posts() ) :
@@ -227,19 +230,26 @@ get_template_part('template-parts/content', 'hero');
 				endwhile; // End of the loop.
 				?>
 
-			</div><!-- #primary -->
+					</div><!-- #primary -->
+				</div><!-- .col-lg-9 -->
 
-			<?php
-			/**
-			 * Sidebar
-			 * Display the sidebar if it's active.
-			 */
-			if ( is_active_sidebar( 'sidebar-1' ) ) :
-				get_template_part( 'template-parts/sidebar' );
-			endif;
-			?>
+				<!-- Columna Sidebar (3/12) - Template línea 1164+ -->
+				<?php
+				/**
+				 * Sidebar
+				 * Display the sidebar if it's active.
+				 */
+				if ( is_active_sidebar( 'sidebar-1' ) ) :
+					?>
+					<div class="col-lg-3">
+						<?php get_template_part( 'template-parts/sidebar' ); ?>
+					</div><!-- .col-lg-3 -->
+					<?php
+				endif;
+				?>
 
-		</div><!-- .content-wrapper -->
+			</div><!-- .row -->
+		</div><!-- .container -->
 
 	</main><!-- #main-content -->