FIX: Top Notification Bar no se veía - Corregir notification-bar.css - Issue #121

Problema:
Después del commit ba5d7 (limpieza masiva), el Top Notification Bar dejó de verse porque:
1. Eliminé CSS simple del template de style.css (líneas 779-802)
2. notification-bar.css contenía CSS DIFERENTE del Issue #39 (versión avanzada)
3. HTML en header.php usa versión SIMPLE del template
4. CSS avanzado (position fixed, botón cerrar) NO coincidía con HTML simple

Análisis:
- HTML actual: Versión simple sin botón cerrar, sin position fixed
- CSS eliminado: background navy-dark, padding 0.5rem, text-align center
- CSS en archivo: background slate-gray, position fixed, height 40px (INCORRECTO)
- Resultado: Barra invisible por estilos incompatibles

Solución:
Sobrescrito notification-bar.css con CSS correcto del template según:
_planeacion/_desarrollo-tema-apus/theme-documentation/05-componente-top-bar/CSS-ESPECIFICO.md

Nuevo contenido:
- background-color: var(--color-navy-dark)
- color: #ffffff
- padding: 0.5rem 0
- font-size: 0.9rem
- text-align: center
- + estilos para strong, i, a, a:hover

Archivos modificados:
- assets/css/notification-bar.css - Sobrescrito con CSS simple correcto
- functions.php - Version bump 1.0.7 → 1.0.8

🎯 Resultado:
- Top Notification Bar visible con estilos correctos del template
- HTML y CSS alineados correctamente
- CSS ya registrado en enqueue-scripts.php línea 171

🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>

wp-content/themes/apus-theme/assets/css/notification-bar.css

@@ -1,252 +1,48 @@
 /**
  * Top Notification Bar Styles
- * Issue #39
  *
- * Barra de notificación fija en la parte superior del sitio
+ * RESPONSABILIDAD: Estilos de la barra de notificación superior
- * para anunciar actualizaciones importantes o promociones.
+ * - Contenedor principal
+ * - Palabras destacadas (strong)
+ * - Iconos
+ * - Enlaces
+ *
+ * CORRECCIÓN Issue #121: Este archivo contenía CSS avanzado (position fixed, botón cerrar)
+ * que NO coincidía con el HTML simple del template en header.php
+ *
+ * Ahora contiene el CSS correcto del template según:
+ * _planeacion/_desarrollo-tema-apus/theme-documentation/05-componente-top-bar/CSS-ESPECIFICO.md
  *
  * @package Apus_Theme
- * @since 1.0.0
+ * @since 1.0.8
+ * @source apus-theme-template/css/style.css líneas 57-80
  */
 
-/* ============================================
+/* ========================================
-   NOTIFICATION BAR BASE STYLES
+   Top Notification Bar
-   ============================================ */
+   ======================================== */
 
 .top-notification-bar {
-    background-color: var(--color-slate-gray);
+    background-color: var(--color-navy-dark);
-    height: 40px;
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: var(--z-navbar);
-    color: var(--color-white);
-    font-size: var(--font-size-sm);
-    animation: slideDown var(--transition-base) ease;
-    display: flex;
-    align-items: center;
-    box-shadow: var(--shadow-sm);
-}
-
-/* ============================================
-   ANIMATION
-   ============================================ */
-
-@keyframes slideDown {
-    from {
-        transform: translateY(-100%);
-        opacity: 0;
-    }
-    to {
-        transform: translateY(0);
-        opacity: 1;
-    }
-}
-
-/* ============================================
-   TEXT STYLES
-   ============================================ */
-
-.notification-text {
-    font-size: 0.875rem;
-    line-height: 1.2;
-}
-
-.text-highlight {
-    color: #61c7cd;
-    font-weight: 600;
-    margin-right: 0.25rem;
-}
-
-/* ============================================
-   LINK STYLES
-   ============================================ */
-
-.notification-link {
-    color: #61c7cd;
-    text-decoration: none;
-    font-weight: 500;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-}
-
-.notification-link:hover {
-    text-decoration: underline;
-    color: #4db8c4;
-}
-
-.notification-link:focus {
-    outline: 2px solid #61c7cd;
-    outline-offset: 2px;
-}
-
-/* ============================================
-   ICON STYLES
-   ============================================ */
-
-.top-notification-bar .bi-megaphone-fill {
-    color: #61c7cd;
-    font-size: 1rem;
-}
-
-/* ============================================
-   CLOSE BUTTON
-   ============================================ */
-
-.btn-close-notification {
-    background: transparent;
-    border: none;
-    color: rgba(255, 255, 255, 0.8);
-    cursor: pointer;
-    padding: 0.5rem;
-    font-size: 0.75rem;
-    position: absolute;
-    right: 1rem;
-    transition: all 0.2s ease;
-    line-height: 1;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.btn-close-notification:hover {
     color: #ffffff;
-    transform: scale(1.1);
+    padding: 0.5rem 0;
+    font-size: 0.9rem;
+    text-align: center;
 }
 
-.btn-close-notification:focus {
+.top-notification-bar strong {
-    outline: 2px solid #61c7cd;
+    color: var(--color-orange-primary);
-    outline-offset: 2px;
 }
 
-.btn-close-notification .bi-x-lg {
+.top-notification-bar i {
-    font-size: 0.875rem;
+    color: var(--color-orange-primary);
 }
 
-/* ============================================
+.top-notification-bar a {
-   NAVBAR ADJUSTMENT
-   ============================================ */
-
-/* Ajustar navbar cuando notification bar está visible */
-body:not(.notification-dismissed) .navbar {
-    top: 40px;
-    position: sticky;
-}
-
-/* Asegurar que el navbar no se solape cuando la barra está cerrada */
-body.notification-dismissed .navbar {
-    top: 0;
-}
-
-/* ============================================
-   RESPONSIVE STYLES
-   ============================================ */
-
-/* Tablets y pantallas pequeñas */
-@media (max-width: 991px) {
-    .top-notification-bar {
-        font-size: 0.8125rem;
-        height: 36px;
-    }
-
-    .notification-text {
-        font-size: 0.8125rem;
-    }
-
-    .btn-close-notification {
-        right: 0.75rem;
-    }
-
-    body:not(.notification-dismissed) .navbar {
-        top: 36px;
-    }
-}
-
-/* Móviles */
-@media (max-width: 767px) {
-    .top-notification-bar {
-        font-size: 0.8rem;
-        height: 40px;
-        padding: 0 0.5rem;
-    }
-
-    .top-notification-bar .container-fluid {
-        padding: 0 0.5rem;
-    }
-
-    .notification-text {
-        font-size: 0.8rem;
-    }
-
-    .top-notification-bar .bi-megaphone-fill {
-        font-size: 0.875rem;
-    }
-
-    .btn-close-notification {
-        right: 0.5rem;
-        padding: 0.25rem;
-    }
-
-    .notification-link {
-        font-size: 0.8rem;
-    }
-}
-
-/* Pantallas muy pequeñas */
-@media (max-width: 480px) {
-    .top-notification-bar {
-        font-size: 0.75rem;
-    }
-
-    .notification-text {
-        font-size: 0.75rem;
-    }
-
-    .text-highlight {
-        margin-right: 0.15rem;
-    }
-
-    .notification-link {
-        font-size: 0.75rem;
-        margin-left: 0.25rem !important;
-    }
-}
-
-/* ============================================
-   ACCESSIBILITY
-   ============================================ */
-
-/* Modo de alto contraste */
-@media (prefers-contrast: high) {
-    .top-notification-bar {
-        border-bottom: 2px solid #ffffff;
-    }
-
-    .text-highlight,
-    .notification-link {
     color: #ffffff;
-        font-weight: 700;
+    transition: color 0.3s ease;
-    }
 }
 
-/* Reducción de movimiento */
+.top-notification-bar a:hover {
-@media (prefers-reduced-motion: reduce) {
+    color: var(--color-orange-primary);
-    .top-notification-bar {
-        animation: none;
-    }
-
-    .btn-close-notification:hover {
-        transform: none;
-    }
-}
-
-/* ============================================
-   PRINT STYLES
-   ============================================ */
-
-@media print {
-    .top-notification-bar {
-        display: none;
-    }
 }

wp-content/themes/apus-theme/functions.php

@@ -14,7 +14,7 @@ if (!defined('ABSPATH')) {
 /**
  * Theme Version
  */
-define('APUS_VERSION', '1.0.7');
+define('APUS_VERSION', '1.0.8');
 
 /**
  * Theme Setup