From cc072e407aaf274ee5201a97db29f2733e5e1d6f Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Mon, 10 Nov 2025 22:05:23 -0600
Subject: [PATCH] =?UTF-8?q?feat(admin):=20Implementar=20interfaz=20HTML=20?=
 =?UTF-8?q?del=20Top=20Bar=20seg=C3=BAn=20especificaci=C3=B3n?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Actualizar main.php con diseño completo del Tab Top Bar
- Agregar switches en lugar de checkboxes básicos
- Implementar layout responsive con grid Bootstrap
- Agregar textarea con contador de caracteres para mensaje
- Implementar color pickers para estilos personalizados
- Mejorar accesibilidad con labels y roles ARIA
- Agregar vista previa informativa

Basado en: 05-IMPLEMENTACION-ADMIN-INTERFAZ-TOP-BAR.md
Issue: #144

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 admin-panel/admin/pages/main.php | 322 +++++++++++++++++++++++--------
 1 file changed, 237 insertions(+), 85 deletions(-)

diff --git a/admin-panel/admin/pages/main.php b/admin-panel/admin/pages/main.php
index 563fe258..d3ea2a99 100644
--- a/admin-panel/admin/pages/main.php
+++ b/admin-panel/admin/pages/main.php
@@ -20,154 +20,306 @@ if (!defined('ABSPATH')) {
 	<!-- Navigation Tabs -->
 	<ul class="nav nav-tabs" role="tablist">
 		<li class="nav-item">
-			<a class="nav-link active" data-bs-toggle="tab" data-bs-target="#topBar" href="#topBar">Top Bar</a>
+			<a class="nav-link active" data-bs-toggle="tab" data-bs-target="#topBarTab" href="#topBarTab" role="tab">
+				<i class="bi bi-megaphone-fill me-2"></i>
+				Top Bar
+			</a>
 		</li>
 		<!-- Más tabs aquí: Navbar, Hero, Footer, etc. -->
 	</ul>
 
 	<!-- Tab Content -->
 	<div class="tab-content mt-3">
-		<!-- Top Bar Tab -->
-		<div id="topBar" class="tab-pane fade show active">
-			<h3>Configuración Top Bar</h3>
-			<p class="text-muted">Personaliza la barra de notificación superior del sitio.</p>
+		<!-- ============================= -->
+		<!-- TAB: TOP BAR                  -->
+		<!-- ============================= -->
+		<div id="topBarTab" class="tab-pane fade show active" role="tabpanel">
+			<h3 class="mb-4">Configuración Top Bar</h3>
 
-			<!-- Activación y Visibilidad -->
-			<div class="form-section mb-4">
+			<!-- ============================= -->
+			<!-- GRUPO 1: ACTIVACIÓN           -->
+			<!-- ============================= -->
+			<div class="form-section">
 				<h4>Activación y Visibilidad</h4>
-				<div class="form-group mb-3">
-					<label class="form-check-label">
-						<input type="checkbox" id="topBarEnabled" class="form-check-input">
-						Activar Top Bar
-					</label>
-					<p class="form-text text-muted">Si está desactivado, el Top Bar no se mostrará en el sitio.</p>
-				</div>
+
 				<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>
+					<!-- Enabled + Show on Mobile + Show on Desktop -->
+					<div class="col-md-4">
+						<div class="form-group">
+							<label class="text-secondary fw-medium d-block mb-2">Estado del Componente</label>
+							<div class="form-check form-switch">
+								<input class="form-check-input"
+									   type="checkbox"
+									   id="topBarEnabled"
+									   role="switch">
+								<label class="form-check-label" for="topBarEnabled">
+									Activar Top Bar
+								</label>
+							</div>
 						</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 class="col-md-4">
+						<div class="form-group">
+							<label class="text-secondary fw-medium d-block mb-2">Visibilidad Mobile</label>
+							<div class="form-check form-switch">
+								<input class="form-check-input"
+									   type="checkbox"
+									   id="topBarShowOnMobile"
+									   role="switch">
+								<label class="form-check-label" for="topBarShowOnMobile">
+									Mostrar en dispositivos móviles
+								</label>
+							</div>
+						</div>
+					</div>
+
+					<div class="col-md-4">
+						<div class="form-group">
+							<label class="text-secondary fw-medium d-block mb-2">Visibilidad Desktop</label>
+							<div class="form-check form-switch">
+								<input class="form-check-input"
+									   type="checkbox"
+									   id="topBarShowOnDesktop"
+									   role="switch">
+								<label class="form-check-label" for="topBarShowOnDesktop">
+									Mostrar en desktop
+								</label>
+							</div>
 						</div>
 					</div>
 				</div>
 			</div>
 
-			<!-- Contenido -->
-			<div class="form-section mb-4">
-				<h4>Contenido</h4>
+			<!-- ============================= -->
+			<!-- GRUPO 2: CONTENIDO            -->
+			<!-- ============================= -->
+			<div class="form-section">
+				<h4>Contenido y Mensajes</h4>
 
+				<!-- Icono -->
 				<div class="row">
-					<div class="col-md-6">
-						<div class="form-group mb-3">
-							<label for="topBarIconClass">Clase del icono</label>
-							<input type="text" id="topBarIconClass" class="form-control" placeholder="bi bi-megaphone-fill">
-							<p class="form-text text-muted">Usa clases de <a href="https://icons.getbootstrap.com/" target="_blank">Bootstrap Icons</a></p>
-						</div>
-					</div>
-					<div class="col-md-6">
-						<div class="form-group mb-3">
-							<label class="form-check-label">
-								<input type="checkbox" id="topBarShowIcon" class="form-check-input">
-								Mostrar icono
+					<div class="col-md-8">
+						<div class="form-group">
+							<label for="topBarIconClass" class="text-secondary fw-medium">
+								Clase del icono
+								<small class="text-muted">(Bootstrap Icons)</small>
 							</label>
+							<input type="text"
+								   id="topBarIconClass"
+								   class="form-control"
+								   placeholder="Ej: bi bi-megaphone-fill"
+								   maxlength="50">
+							<small class="form-text text-muted">
+								Ver iconos disponibles: <a href="https://icons.getbootstrap.com/" target="_blank">Bootstrap Icons</a>
+							</small>
+						</div>
+					</div>
+
+					<div class="col-md-4">
+						<div class="form-group">
+							<label class="text-secondary fw-medium d-block mb-2">Opciones de Icono</label>
+							<div class="form-check form-switch">
+								<input class="form-check-input"
+									   type="checkbox"
+									   id="topBarShowIcon"
+									   role="switch">
+								<label class="form-check-label" for="topBarShowIcon">
+									Mostrar icono
+								</label>
+							</div>
 						</div>
 					</div>
 				</div>
 
-				<div class="form-group mb-3">
-					<label for="topBarHighlightText">Texto destacado</label>
-					<input type="text" id="topBarHighlightText" class="form-control" placeholder="Nuevo:" maxlength="30">
-					<p class="form-text text-muted">Máximo 30 caracteres. Aparece en negritas.</p>
+				<!-- Texto destacado -->
+				<div class="row">
+					<div class="col-md-12">
+						<div class="form-group">
+							<label for="topBarHighlightText" class="text-secondary fw-medium">
+								Texto destacado
+								<small class="text-muted">(opcional)</small>
+							</label>
+							<input type="text"
+								   id="topBarHighlightText"
+								   class="form-control"
+								   placeholder='Ej: "Nuevo:" o "Promoción:"'
+								   maxlength="30">
+							<small class="form-text text-muted">
+								Se muestra en negritas y con color destacado. Dejar vacío para omitir.
+							</small>
+						</div>
+					</div>
 				</div>
 
-				<div class="form-group mb-3">
-					<label for="topBarMessageText">Mensaje principal *</label>
-					<input type="text" id="topBarMessageText" class="form-control" placeholder="Accede a más de 200,000 APUs..." maxlength="250" required>
-					<p class="form-text text-muted">Máximo 250 caracteres. Campo obligatorio.</p>
+				<!-- Mensaje principal -->
+				<div class="row">
+					<div class="col-md-12">
+						<div class="form-group">
+							<label for="topBarMessageText" class="text-secondary fw-medium">
+								Mensaje principal <span class="text-danger">*</span>
+							</label>
+							<textarea id="topBarMessageText"
+									  class="form-control"
+									  rows="3"
+									  maxlength="250"
+									  placeholder="Ej: Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025."
+									  required></textarea>
+							<small class="form-text text-muted">
+								<span id="topBarMessageTextCount">0</span>/250 caracteres
+							</small>
+						</div>
+					</div>
 				</div>
 
+				<!-- Enlace -->
 				<div class="row">
 					<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 class="form-group">
+							<label for="topBarLinkText" class="text-secondary fw-medium">
+								Texto del enlace
+							</label>
+							<input type="text"
+								   id="topBarLinkText"
+								   class="form-control"
+								   placeholder="Ej: Ver Catálogo"
+								   maxlength="50">
 						</div>
 					</div>
+
 					<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">
+						<div class="form-group">
+							<label for="topBarLinkUrl" class="text-secondary fw-medium">
+								URL del enlace
+							</label>
+							<input type="url"
+								   id="topBarLinkUrl"
+								   class="form-control"
+								   placeholder="Ej: /catalogo o https://ejemplo.com">
+							<small class="form-text text-muted">URLs relativas o absolutas</small>
 						</div>
 					</div>
+
 					<div class="col-md-2">
-						<div class="form-group mb-3">
-							<label for="topBarLinkTarget">Target</label>
+						<div class="form-group">
+							<label for="topBarLinkTarget" class="text-secondary fw-medium">
+								Target
+							</label>
 							<select id="topBarLinkTarget" class="form-select">
-								<option value="_self">Misma pestaña</option>
-								<option value="_blank">Nueva pestaña</option>
+								<option value="_self">Misma ventana</option>
+								<option value="_blank">Nueva ventana</option>
 							</select>
 						</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 class="row">
+					<div class="col-md-12">
+						<div class="form-group">
+							<div class="form-check form-switch">
+								<input class="form-check-input"
+									   type="checkbox"
+									   id="topBarShowLink"
+									   role="switch">
+								<label class="form-check-label" for="topBarShowLink">
+									Mostrar enlace
+								</label>
+							</div>
+						</div>
+					</div>
 				</div>
 			</div>
 
-			<!-- Estilos Personalizados -->
+			<!-- ============================= -->
+			<!-- GRUPO 3: ESTILOS AVANZADOS    -->
+			<!-- ============================= -->
 			<div class="form-section">
 				<h4>Estilos Personalizados</h4>
-				<p class="form-text text-muted mb-3">Deja en blanco para usar los colores del tema por defecto.</p>
 
+				<!-- Colores (4 en una fila) -->
 				<div class="row">
 					<div class="col-md-3">
-						<div class="form-group mb-3">
-							<label for="topBarBgColor">Color de fondo</label>
-							<input type="color" id="topBarBgColor" class="form-control form-control-color">
+						<div class="form-group">
+							<label for="topBarBgColor" class="text-secondary fw-medium">
+								Color de fondo
+							</label>
+							<input type="color"
+								   id="topBarBgColor"
+								   class="form-control form-control-color"
+								   value="#0E2337"
+								   title="Seleccionar color de fondo">
+							<small class="form-text text-muted">Default: #0E2337</small>
 						</div>
 					</div>
+
 					<div class="col-md-3">
-						<div class="form-group mb-3">
-							<label for="topBarTextColor">Color de texto</label>
-							<input type="color" id="topBarTextColor" class="form-control form-control-color">
+						<div class="form-group">
+							<label for="topBarTextColor" class="text-secondary fw-medium">
+								Color de texto
+							</label>
+							<input type="color"
+								   id="topBarTextColor"
+								   class="form-control form-control-color"
+								   value="#ffffff"
+								   title="Seleccionar color de texto">
+							<small class="form-text text-muted">Default: #ffffff</small>
 						</div>
 					</div>
+
 					<div class="col-md-3">
-						<div class="form-group mb-3">
-							<label for="topBarHighlightColor">Color del highlight</label>
-							<input type="color" id="topBarHighlightColor" class="form-control form-control-color">
+						<div class="form-group">
+							<label for="topBarHighlightColor" class="text-secondary fw-medium">
+								Color destacado
+							</label>
+							<input type="color"
+								   id="topBarHighlightColor"
+								   class="form-control form-control-color"
+								   value="#FF8600"
+								   title="Seleccionar color destacado">
+							<small class="form-text text-muted">Default: #FF8600</small>
 						</div>
 					</div>
+
 					<div class="col-md-3">
-						<div class="form-group mb-3">
-							<label for="topBarLinkHoverColor">Color hover enlace</label>
-							<input type="color" id="topBarLinkHoverColor" class="form-control form-control-color">
+						<div class="form-group">
+							<label for="topBarLinkHoverColor" class="text-secondary fw-medium">
+								Color hover enlace
+							</label>
+							<input type="color"
+								   id="topBarLinkHoverColor"
+								   class="form-control form-control-color"
+								   value="#FF8600"
+								   title="Seleccionar color hover del enlace">
+							<small class="form-text text-muted">Default: #FF8600</small>
 						</div>
 					</div>
 				</div>
 
-				<div class="form-group mb-3">
-					<label for="topBarFontSize">Tamaño de fuente</label>
-					<select id="topBarFontSize" class="form-select" style="max-width: 200px;">
-						<option value="small">Pequeña</option>
-						<option value="normal" selected>Normal</option>
-						<option value="large">Grande</option>
-					</select>
+				<!-- Tamaño de fuente -->
+				<div class="row">
+					<div class="col-md-4">
+						<div class="form-group">
+							<label for="topBarFontSize" class="text-secondary fw-medium">
+								Tamaño de fuente
+							</label>
+							<select id="topBarFontSize" class="form-select">
+								<option value="small">Pequeño (0.8rem)</option>
+								<option value="normal" selected>Normal (0.9rem)</option>
+								<option value="large">Grande (1rem)</option>
+							</select>
+						</div>
+					</div>
 				</div>
 			</div>
+
+			<!-- Vista previa (opcional para futuras versiones) -->
+			<div class="form-section bg-light">
+				<h4>Vista Previa</h4>
+				<p class="text-muted">
+					<i class="bi bi-info-circle me-1"></i>
+					Guarda los cambios para ver el Top Bar actualizado en el frontend.
+				</p>
+			</div>
 		</div>
 	</div>