From bcd87766ba89efb2c967e2264ba135676d479c0d Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Mon, 10 Nov 2025 22:27:08 -0600
Subject: [PATCH] =?UTF-8?q?feat(admin):=20Aplicar=20dise=C3=B1o=20mejorado?=
 =?UTF-8?q?=20al=20componente=20Top=20Bar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Mejoras implementadas:
- Header del tab con gradiente y botón de restaurar defaults
- Cards con sombras y bordes sutiles para las secciones
- Section titles con iconos destacados en gradiente naranja
- Toggle containers con fondo gris claro y bordes
- Input groups sin bordes intermedios (merge)
- Color pickers mejorados con preview de código hex
- Progress bar visual para contador de caracteres del mensaje
- Alert personalizado con tip de diseño
- Vista previa interactiva del Top Bar en tiempo real
- Badges para indicadores (Opcional, Requerido)
- Iconografía consistente con Bootstrap Icons
- Espaciado mejorado con sistema g-4

Diseño coherente con paleta APUs (Navy + Orange + Neutrales)

Issue: #144

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

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

diff --git a/admin-panel/admin/pages/main.php b/admin-panel/admin/pages/main.php
index d3ea2a99..03f3d52f 100644
--- a/admin-panel/admin/pages/main.php
+++ b/admin-panel/admin/pages/main.php
@@ -31,60 +31,114 @@ if (!defined('ABSPATH')) {
 	<!-- Tab Content -->
 	<div class="tab-content mt-3">
 		<!-- ============================= -->
-		<!-- TAB: TOP BAR                  -->
+		<!-- TAB: TOP BAR - VERSIÓN MEJORADA -->
 		<!-- ============================= -->
 		<div id="topBarTab" class="tab-pane fade show active" role="tabpanel">
-			<h3 class="mb-4">Configuración Top Bar</h3>
+			<!-- Header del Tab -->
+			<div class="tab-header mb-4">
+				<div class="d-flex align-items-center justify-content-between">
+					<div>
+						<h3 class="mb-1 text-navy-primary">
+							<i class="bi bi-megaphone-fill me-2 text-orange-primary"></i>
+							Configuración Top Bar
+						</h3>
+						<p class="text-neutral-600 mb-0">
+							Personaliza la barra de anuncios superior de tu sitio
+						</p>
+					</div>
+					<button type="button" class="btn btn-sm btn-outline-secondary" id="resetTopBarDefaults">
+						<i class="bi bi-arrow-counterclockwise me-1"></i>
+						Restaurar valores por defecto
+					</button>
+				</div>
+			</div>
 
 			<!-- ============================= -->
 			<!-- GRUPO 1: ACTIVACIÓN           -->
 			<!-- ============================= -->
-			<div class="form-section">
-				<h4>Activación y Visibilidad</h4>
+			<div class="form-section card shadow-sm border-0 mb-4">
+				<div class="card-body">
+					<h4 class="section-title">
+						<span class="title-icon">
+							<i class="bi bi-toggle-on"></i>
+						</span>
+						Activación y Visibilidad
+					</h4>
 
-				<div class="row">
-					<!-- 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
+					<div class="row g-4">
+						<!-- Enabled -->
+						<div class="col-md-4">
+							<div class="form-group">
+								<label class="form-label text-neutral-700 fw-medium mb-3">
+									<i class="bi bi-power text-orange-primary me-1"></i>
+									Estado del Componente
 								</label>
+								<div class="toggle-container">
+									<div class="form-check form-switch form-switch-lg">
+										<input class="form-check-input"
+											   type="checkbox"
+											   id="topBarEnabled"
+											   role="switch"
+											   checked>
+										<label class="form-check-label" for="topBarEnabled">
+											<span class="switch-label-on">Activado</span>
+											<span class="switch-label-off">Desactivado</span>
+										</label>
+									</div>
+									<small class="form-text text-neutral-700 d-block mt-2">
+										Activa o desactiva el Top Bar en todo el sitio
+									</small>
+								</div>
 							</div>
 						</div>
-					</div>
 
-					<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
+						<!-- Show on Mobile -->
+						<div class="col-md-4">
+							<div class="form-group">
+								<label class="form-label text-neutral-700 fw-medium mb-3">
+									<i class="bi bi-phone text-orange-primary me-1"></i>
+									Visibilidad Mobile
 								</label>
+								<div class="toggle-container">
+									<div class="form-check form-switch form-switch-lg">
+										<input class="form-check-input"
+											   type="checkbox"
+											   id="topBarShowOnMobile"
+											   role="switch"
+											   checked>
+										<label class="form-check-label" for="topBarShowOnMobile">
+											Mostrar en dispositivos móviles
+										</label>
+									</div>
+									<small class="form-text text-neutral-700 d-block mt-2">
+										Pantallas menores a 768px
+									</small>
+								</div>
 							</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
+						<!-- Show on Desktop -->
+						<div class="col-md-4">
+							<div class="form-group">
+								<label class="form-label text-neutral-700 fw-medium mb-3">
+									<i class="bi bi-display text-orange-primary me-1"></i>
+									Visibilidad Desktop
 								</label>
+								<div class="toggle-container">
+									<div class="form-check form-switch form-switch-lg">
+										<input class="form-check-input"
+											   type="checkbox"
+											   id="topBarShowOnDesktop"
+											   role="switch"
+											   checked>
+										<label class="form-check-label" for="topBarShowOnDesktop">
+											Mostrar en desktop
+										</label>
+									</div>
+									<small class="form-text text-neutral-700 d-block mt-2">
+										Pantallas de 768px en adelante
+									</small>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -94,136 +148,188 @@ if (!defined('ABSPATH')) {
 			<!-- ============================= -->
 			<!-- GRUPO 2: CONTENIDO            -->
 			<!-- ============================= -->
-			<div class="form-section">
-				<h4>Contenido y Mensajes</h4>
+			<div class="form-section card shadow-sm border-0 mb-4">
+				<div class="card-body">
+					<h4 class="section-title">
+						<span class="title-icon">
+							<i class="bi bi-card-text"></i>
+						</span>
+						Contenido y Mensajes
+					</h4>
 
-				<!-- Icono -->
-				<div class="row">
-					<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
+					<!-- Icono -->
+					<div class="row g-4 mb-4">
+						<div class="col-md-8">
+							<div class="form-group">
+								<label for="topBarIconClass" class="form-label text-neutral-700 fw-medium">
+									<i class="bi bi-emoji-smile text-orange-primary me-1"></i>
+									Clase del icono
+									<span class="badge bg-neutral-100 text-neutral-600 ms-2">Bootstrap Icons</span>
 								</label>
+								<div class="input-group input-group-merge">
+									<span class="input-group-text bg-neutral-50 border-end-0">
+										<i class="bi bi-code-slash text-neutral-600"></i>
+									</span>
+									<input type="text"
+										   id="topBarIconClass"
+										   class="form-control border-start-0 ps-0"
+										   placeholder="Ej: bi bi-megaphone-fill"
+										   maxlength="50"
+										   value="bi bi-megaphone-fill">
+								</div>
+								<small class="form-text text-neutral-700 d-flex align-items-center mt-2">
+									<i class="bi bi-info-circle me-1"></i>
+									Ver iconos disponibles:
+									<a href="https://icons.getbootstrap.com/" target="_blank" class="ms-1 text-orange-primary">
+										Bootstrap Icons <i class="bi bi-box-arrow-up-right ms-1"></i>
+									</a>
+								</small>
+							</div>
+						</div>
+
+						<div class="col-md-4">
+							<div class="form-group">
+								<label class="form-label text-neutral-700 fw-medium mb-3">
+									Opciones de Icono
+								</label>
+								<div class="toggle-container">
+									<div class="form-check form-switch form-switch-lg">
+										<input class="form-check-input"
+											   type="checkbox"
+											   id="topBarShowIcon"
+											   role="switch"
+											   checked>
+										<label class="form-check-label" for="topBarShowIcon">
+											Mostrar icono
+										</label>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
-				</div>
 
-				<!-- 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>
-
-				<!-- 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">
-							<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">
-							<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">
-							<label for="topBarLinkTarget" class="text-secondary fw-medium">
-								Target
-							</label>
-							<select id="topBarLinkTarget" class="form-select">
-								<option value="_self">Misma ventana</option>
-								<option value="_blank">Nueva ventana</option>
-							</select>
-						</div>
-					</div>
-				</div>
-
-				<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
+					<!-- Texto destacado -->
+					<div class="row g-4 mb-4">
+						<div class="col-md-12">
+							<div class="form-group">
+								<label for="topBarHighlightText" class="form-label text-neutral-700 fw-medium">
+									<i class="bi bi-bookmark-star text-orange-primary me-1"></i>
+									Texto destacado
+									<span class="badge bg-warning-subtle text-warning-emphasis ms-2">Opcional</span>
 								</label>
+								<input type="text"
+									   id="topBarHighlightText"
+									   class="form-control form-control-lg"
+									   placeholder='Ej: "Nuevo:" o "Promoción:"'
+									   maxlength="30"
+									   value="Nuevo:">
+								<small class="form-text text-neutral-700 d-flex align-items-center mt-2">
+									<i class="bi bi-lightbulb text-warning me-1"></i>
+									Se muestra en <strong class="mx-1">negritas</strong> y con <span class="text-orange-primary fw-bold mx-1">color destacado</span>. Dejar vacío para omitir.
+								</small>
+							</div>
+						</div>
+					</div>
+
+					<!-- Mensaje principal -->
+					<div class="row g-4 mb-4">
+						<div class="col-md-12">
+							<div class="form-group">
+								<label for="topBarMessageText" class="form-label text-neutral-700 fw-medium">
+									<i class="bi bi-chat-left-text text-orange-primary me-1"></i>
+									Mensaje principal
+									<span class="badge bg-danger-subtle text-danger-emphasis ms-2">Requerido</span>
+								</label>
+								<textarea id="topBarMessageText"
+										  class="form-control form-control-lg"
+										  rows="3"
+										  maxlength="250"
+										  placeholder="Ej: Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025."
+										  required>Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.</textarea>
+								<div class="d-flex justify-content-between align-items-center mt-2">
+									<small class="form-text text-neutral-700">
+										<i class="bi bi-info-circle me-1"></i>
+										Mensaje que se mostrará en la barra superior
+									</small>
+									<small class="form-text">
+										<span id="topBarMessageTextCount" class="fw-bold">75</span><span class="text-neutral-600">/250 caracteres</span>
+									</small>
+								</div>
+								<div class="progress mt-2" style="height: 4px;">
+									<div id="topBarMessageTextProgress"
+										 class="progress-bar bg-orange-primary"
+										 role="progressbar"
+										 style="width: 30%"
+										 aria-valuenow="75"
+										 aria-valuemin="0"
+										 aria-valuemax="250"></div>
+								</div>
+							</div>
+						</div>
+					</div>
+
+					<!-- Enlace -->
+					<div class="row g-4">
+						<div class="col-md-5">
+							<div class="form-group">
+								<label for="topBarLinkText" class="form-label text-neutral-700 fw-medium">
+									<i class="bi bi-link-45deg text-orange-primary me-1"></i>
+									Texto del enlace
+								</label>
+								<input type="text"
+									   id="topBarLinkText"
+									   class="form-control"
+									   placeholder="Ej: Ver Catálogo"
+									   maxlength="50"
+									   value="Ver Catálogo →">
+							</div>
+						</div>
+
+						<div class="col-md-5">
+							<div class="form-group">
+								<label for="topBarLinkUrl" class="form-label text-neutral-700 fw-medium">
+									<i class="bi bi-globe text-orange-primary me-1"></i>
+									URL del enlace
+								</label>
+								<input type="url"
+									   id="topBarLinkUrl"
+									   class="form-control"
+									   placeholder="Ej: /catalogo o https://ejemplo.com"
+									   value="/catalogo">
+								<small class="form-text text-neutral-700 mt-2 d-block">
+									URLs relativas (/page) o absolutas (https://...)
+								</small>
+							</div>
+						</div>
+
+						<div class="col-md-2">
+							<div class="form-group">
+								<label for="topBarLinkTarget" class="form-label text-neutral-700 fw-medium">
+									<i class="bi bi-window text-orange-primary me-1"></i>
+									Target
+								</label>
+								<select id="topBarLinkTarget" class="form-select">
+									<option value="_self" selected>Misma ventana</option>
+									<option value="_blank">Nueva ventana</option>
+								</select>
+							</div>
+						</div>
+
+						<div class="col-md-12">
+							<div class="form-group">
+								<div class="toggle-container">
+									<div class="form-check form-switch form-switch-lg">
+										<input class="form-check-input"
+											   type="checkbox"
+											   id="topBarShowLink"
+											   role="switch"
+											   checked>
+										<label class="form-check-label" for="topBarShowLink">
+											<strong>Mostrar enlace</strong>
+											<span class="text-neutral-700 ms-2">- Activa para incluir un botón de acción</span>
+										</label>
+									</div>
+								</div>
 							</div>
 						</div>
 					</div>
@@ -233,92 +339,180 @@ if (!defined('ABSPATH')) {
 			<!-- ============================= -->
 			<!-- GRUPO 3: ESTILOS AVANZADOS    -->
 			<!-- ============================= -->
-			<div class="form-section">
-				<h4>Estilos Personalizados</h4>
+			<div class="form-section card shadow-sm border-0 mb-4">
+				<div class="card-body">
+					<h4 class="section-title">
+						<span class="title-icon">
+							<i class="bi bi-palette"></i>
+						</span>
+						Estilos Personalizados
+					</h4>
 
-				<!-- Colores (4 en una fila) -->
-				<div class="row">
-					<div class="col-md-3">
-						<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>
+					<!-- Colores (4 en una fila) -->
+					<div class="row g-4 mb-4">
+						<div class="col-md-3">
+							<div class="form-group">
+								<label for="topBarBgColor" class="form-label text-neutral-700 fw-medium mb-3">
+									<i class="bi bi-paint-bucket text-orange-primary me-1"></i>
+									Color de fondo
+								</label>
+								<div class="color-picker-wrapper">
+									<input type="color"
+										   id="topBarBgColor"
+										   class="form-control form-control-color"
+										   value="#0E2337"
+										   title="Seleccionar color de fondo">
+									<div class="color-preview-text mt-2">
+										<code class="text-neutral-600 small">#0E2337</code>
+										<small class="text-neutral-700 d-block">Navy Dark (Default)</small>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="col-md-3">
+							<div class="form-group">
+								<label for="topBarTextColor" class="form-label text-neutral-700 fw-medium mb-3">
+									<i class="bi bi-fonts text-orange-primary me-1"></i>
+									Color de texto
+								</label>
+								<div class="color-picker-wrapper">
+									<input type="color"
+										   id="topBarTextColor"
+										   class="form-control form-control-color"
+										   value="#ffffff"
+										   title="Seleccionar color de texto">
+									<div class="color-preview-text mt-2">
+										<code class="text-neutral-600 small">#ffffff</code>
+										<small class="text-neutral-700 d-block">White (Default)</small>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="col-md-3">
+							<div class="form-group">
+								<label for="topBarHighlightColor" class="form-label text-neutral-700 fw-medium mb-3">
+									<i class="bi bi-star text-orange-primary me-1"></i>
+									Color destacado
+								</label>
+								<div class="color-picker-wrapper">
+									<input type="color"
+										   id="topBarHighlightColor"
+										   class="form-control form-control-color"
+										   value="#FF8600"
+										   title="Seleccionar color destacado">
+									<div class="color-preview-text mt-2">
+										<code class="text-neutral-600 small">#FF8600</code>
+										<small class="text-neutral-700 d-block">Orange Primary (Default)</small>
+									</div>
+								</div>
+							</div>
+						</div>
+
+						<div class="col-md-3">
+							<div class="form-group">
+								<label for="topBarLinkHoverColor" class="form-label text-neutral-700 fw-medium mb-3">
+									<i class="bi bi-cursor text-orange-primary me-1"></i>
+									Hover enlace
+								</label>
+								<div class="color-picker-wrapper">
+									<input type="color"
+										   id="topBarLinkHoverColor"
+										   class="form-control form-control-color"
+										   value="#FF6B35"
+										   title="Seleccionar color hover del enlace">
+									<div class="color-preview-text mt-2">
+										<code class="text-neutral-600 small">#FF6B35</code>
+										<small class="text-neutral-700 d-block">Orange Hover (Default)</small>
+									</div>
+								</div>
+							</div>
 						</div>
 					</div>
 
-					<div class="col-md-3">
-						<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>
+					<!-- Tamaño de fuente -->
+					<div class="row g-4">
+						<div class="col-md-4">
+							<div class="form-group">
+								<label for="topBarFontSize" class="form-label text-neutral-700 fw-medium">
+									<i class="bi bi-type text-orange-primary me-1"></i>
+									Tamaño de fuente
+								</label>
+								<select id="topBarFontSize" class="form-select form-select-lg">
+									<option value="small">
+										Pequeño - 0.8rem (ideal para mucho texto)
+									</option>
+									<option value="normal" selected>
+										Normal - 0.9rem (recomendado)
+									</option>
+									<option value="large">
+										Grande - 1rem (máxima legibilidad)
+									</option>
+								</select>
+								<small class="form-text text-neutral-700 d-block mt-2">
+									<i class="bi bi-info-circle me-1"></i>
+									El tamaño afecta la altura total de la barra
+								</small>
+							</div>
 						</div>
-					</div>
 
-					<div class="col-md-3">
-						<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">
-							<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>
-
-				<!-- 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 class="col-md-8">
+							<div class="alert alert-info-custom d-flex align-items-start" role="alert">
+								<i class="bi bi-lightbulb-fill text-orange-primary me-3 fs-4"></i>
+								<div>
+									<h6 class="alert-heading mb-1">Tip de Diseño</h6>
+									<p class="mb-0 small">
+										Para mejor legibilidad, usa <strong>fondos oscuros</strong> (Navy Dark) con <strong>texto claro</strong> (White)
+										y <strong>acentos naranjas</strong> para las acciones importantes.
+									</p>
+								</div>
+							</div>
 						</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>
+			<!-- ============================= -->
+			<!-- VISTA PREVIA INTERACTIVA      -->
+			<!-- ============================= -->
+			<div class="form-section card shadow-sm border-0 mb-4 bg-neutral-50">
+				<div class="card-body">
+					<h4 class="section-title">
+						<span class="title-icon">
+							<i class="bi bi-eye"></i>
+						</span>
+						Vista Previa en Tiempo Real
+					</h4>
+
+					<div class="preview-container border border-2 border-neutral-100 rounded-3 p-4 bg-white">
+						<!-- Top Bar Preview -->
+						<div id="topBarPreview" class="top-bar-preview" style="background-color: #0E2337; color: #ffffff; padding: 12px 20px; border-radius: 8px; display: flex; align-items: center; justify-content: center; gap: 15px; flex-wrap: wrap;">
+							<i class="bi bi-megaphone-fill" style="font-size: 1.2rem; color: #FF8600;"></i>
+							<span style="font-weight: 700; color: #FF8600;">Nuevo:</span>
+							<span style="flex: 1; min-width: 300px; text-align: center;">Accede a más de 200,000 Análisis de Precios Unitarios actualizados para 2025.</span>
+							<a href="#" style="color: #ffffff; text-decoration: underline; white-space: nowrap; transition: color 0.3s;">Ver Catálogo →</a>
+						</div>
+
+						<div class="text-center mt-4">
+							<small class="text-neutral-700">
+								<i class="bi bi-info-circle me-1"></i>
+								La vista previa se actualiza automáticamente al modificar los campos
+							</small>
+						</div>
+					</div>
+
+					<div class="mt-4 d-flex gap-2 justify-content-end">
+						<button type="button" class="btn btn-outline-secondary">
+							<i class="bi bi-phone me-1"></i>
+							Ver en Mobile
+						</button>
+						<button type="button" class="btn btn-outline-secondary">
+							<i class="bi bi-display me-1"></i>
+							Ver en Desktop
+						</button>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>