From 0fd0ee8231b53c13dbc0ad4eeee0561a65305fe5 Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Sun, 9 Nov 2025 15:25:47 -0600
Subject: [PATCH] Refactor: Top Bar v2.1 - Valores CSS + UI Compacta
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Remodulación del Top Bar siguiendo algoritmo v2.1 actualizado.

## 1. Valores de Estilos desde CSS

**Antes (v2.0):**
```php
'custom_styles' => array(
    'background_color' => '',  // Vacío
    'text_color' => '',        // Vacío
    'highlight_color' => '',   // Vacío
    'link_hover_color' => '',  // Vacío
)
```

**Ahora (v2.1):**
```php
'custom_styles' => array(
    'background_color' => '#0E2337',  // Extraído de componente-top-bar.css
    'text_color' => '#ffffff',
    'highlight_color' => '#FF8600',   // var(--color-orange-primary)
    'link_hover_color' => '#FF8600',
    'font_size' => 'normal'           // 0.9rem del CSS
)
```

**Mapping CSS → Defaults:**
- `.top-notification-bar { background-color: var(--color-navy-dark) }` → `#0E2337`
- `.top-notification-bar { color: #ffffff }` → `#ffffff`
- `.top-notification-bar strong { color: var(--color-orange-primary) }` → `#FF8600`
- `.top-notification-bar a:hover { color: var(--color-orange-primary) }` → `#FF8600`

## 2. UI Compacta

**Antes:** Checkboxes dispersos (cada uno fila completa)
**Ahora:**
- Checkboxes móvil/desktop → Fila de 2 columnas (col-md-6)
- Campos enlace (texto + URL + target) → Fila compacta (col-md-5 + 5 + 2)
- Colores ya estaban bien (row con col-md-3)

**Resultado:** Menos scroll, mejor aprovechamiento del espacio.

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 admin-panel/admin/pages/main.php              | 46 ++++++++++---------
 .../includes/class-settings-manager.php       | 11 +++--
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/admin-panel/admin/pages/main.php b/admin-panel/admin/pages/main.php
index 73ce46f1..563fe258 100644
--- a/admin-panel/admin/pages/main.php
+++ b/admin-panel/admin/pages/main.php
@@ -42,17 +42,23 @@ if (!defined('ABSPATH')) {
 					</label>
 					<p class="form-text text-muted">Si está desactivado, el Top Bar no se mostrará en el sitio.</p>
 				</div>
-				<div class="form-group mb-3">
-					<label class="form-check-label">
-						<input type="checkbox" id="topBarShowOnMobile" class="form-check-input">
-						Mostrar en móvil
-					</label>
-				</div>
-				<div class="form-group mb-3">
-					<label class="form-check-label">
-						<input type="checkbox" id="topBarShowOnDesktop" class="form-check-input">
-						Mostrar en desktop
-					</label>
+				<div class="row">
+					<div class="col-md-6">
+						<div class="form-group mb-3">
+							<label class="form-check-label">
+								<input type="checkbox" id="topBarShowOnMobile" class="form-check-input">
+								Mostrar en móvil
+							</label>
+						</div>
+					</div>
+					<div class="col-md-6">
+						<div class="form-group mb-3">
+							<label class="form-check-label">
+								<input type="checkbox" id="topBarShowOnDesktop" class="form-check-input">
+								Mostrar en desktop
+							</label>
+						</div>
+					</div>
 				</div>
 			</div>
 
@@ -91,13 +97,13 @@ if (!defined('ABSPATH')) {
 				</div>
 
 				<div class="row">
-					<div class="col-md-4">
+					<div class="col-md-5">
 						<div class="form-group mb-3">
 							<label for="topBarLinkText">Texto del enlace</label>
 							<input type="text" id="topBarLinkText" class="form-control" placeholder="Ver Catálogo" maxlength="50">
 						</div>
 					</div>
-					<div class="col-md-4">
+					<div class="col-md-5">
 						<div class="form-group mb-3">
 							<label for="topBarLinkUrl">URL del enlace</label>
 							<input type="url" id="topBarLinkUrl" class="form-control" placeholder="/catalogo">
@@ -112,14 +118,12 @@ if (!defined('ABSPATH')) {
 							</select>
 						</div>
 					</div>
-					<div class="col-md-2">
-						<div class="form-group mb-3">
-							<label class="form-check-label">
-								<input type="checkbox" id="topBarShowLink" class="form-check-input">
-								Mostrar enlace
-							</label>
-						</div>
-					</div>
+				</div>
+				<div class="form-group mb-3">
+					<label class="form-check-label">
+						<input type="checkbox" id="topBarShowLink" class="form-check-input">
+						Mostrar enlace
+					</label>
 				</div>
 			</div>
 
diff --git a/admin-panel/includes/class-settings-manager.php b/admin-panel/includes/class-settings-manager.php
index 750839c3..d5bfa7bb 100644
--- a/admin-panel/includes/class-settings-manager.php
+++ b/admin-panel/includes/class-settings-manager.php
@@ -87,11 +87,12 @@ class APUS_Settings_Manager {
 					'link_target' => '_self',
 					'show_link' => true,
 					'custom_styles' => array(
-						'background_color' => '',
-						'text_color' => '',
-						'highlight_color' => '',
-						'link_hover_color' => '',
-						'font_size' => 'normal'
+						// Valores extraídos de componente-top-bar.css
+						'background_color' => '#0E2337',  // var(--color-navy-dark)
+						'text_color' => '#ffffff',
+						'highlight_color' => '#FF8600',   // var(--color-orange-primary)
+						'link_hover_color' => '#FF8600',  // var(--color-orange-primary)
+						'font_size' => 'normal'           // 0.9rem del CSS
 					)
 				)
 				// Navbar - Pendiente