From 423aae062c320ba0a40e7d48cf56e9c568f2e4e5 Mon Sep 17 00:00:00 2001
From: FrankZamora <prime.leads.app@gmail.com>
Date: Mon, 1 Dec 2025 14:28:07 -0600
Subject: [PATCH] refactor(css): limpiar critical-bootstrap.css - solo
 Bootstrap puro
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Eliminado CSS personalizado que no pertenece a Bootstrap:
- Site Structure (.site, .site-main)
- Accessibility (.screen-reader-text, .skip-link)
- CLS Prevention Tables APU (.analisis, .desglose)
- CLS Prevention AdSense (ins.adsbygoogle)
- CLS Prevention Navbar Collapse Mobile
- CLS Prevention Hero Section
- CLS Prevention Featured Image
- CLS Prevention Post Content

Reducción: 1107 → 818 líneas (~26% menos)

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 Assets/Css/critical-bootstrap.css | 332 ++----------------------------
 1 file changed, 22 insertions(+), 310 deletions(-)

diff --git a/Assets/Css/critical-bootstrap.css b/Assets/Css/critical-bootstrap.css
index 6e83da1f..12180c65 100644
--- a/Assets/Css/critical-bootstrap.css
+++ b/Assets/Css/critical-bootstrap.css
@@ -1,17 +1,32 @@
 /**
- * Critical Bootstrap CSS Subset
+ * Critical Bootstrap CSS Subset (TIPO 2)
  *
- * Contiene SOLO las clases Bootstrap usadas en componentes above-the-fold:
- * - TopNotificationBar
- * - Navbar
- * - Hero
+ * Contiene SOLO clases de Bootstrap 5.3.2 usadas en componentes above-the-fold.
+ * NO contiene CSS personalizado (ese va en critical-custom-temp.css - TIPO 3).
  *
- * Esto permite diferir la carga del Bootstrap completo (31KB)
- * mientras se renderiza el contenido crítico inmediatamente.
+ * Componentes Bootstrap incluidos:
+ * - Fonts (@font-face Poppins)
+ * - Variables CSS (:root)
+ * - Resets (box-sizing, body)
+ * - Container system
+ * - Grid system (row, col-*)
+ * - Flexbox utilities (d-flex, justify-content-*, align-items-*)
+ * - Spacing utilities (m-*, p-*)
+ * - Text utilities
+ * - Navbar component
+ * - Collapse/Dropdown components
+ * - Button component
+ * - Alert component
+ * - Typography base (h1-h6, p)
+ * - Responsive breakpoints
+ *
+ * Hook: wp_head priority 0
+ * Output: <style id="roi-critical-bootstrap">
  *
  * @version 5.3.2-subset
  * @see Inc/enqueue-scripts.php - Bootstrap diferido
  * @see Shared/Infrastructure/Services/CriticalBootstrapService.php
+ * @see Assets/Css/critical-custom-temp.css - CSS personalizado (TIPO 3)
  */
 
 /* ==========================================================================
@@ -775,45 +790,6 @@ button:focus:not(:focus-visible) {
     .d-md-none { display: none !important; }
 }
 
-/* ==========================================================================
-   SITE STRUCTURE (Layout crítico)
-   ========================================================================== */
-.site {
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-}
-.site-main {
-    flex-grow: 1;
-}
-
-/* ==========================================================================
-   ACCESSIBILITY (Critical - above-the-fold)
-   ========================================================================== */
-.screen-reader-text {
-    position: absolute;
-    left: -10000px;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    clip-path: inset(50%);
-    white-space: nowrap;
-}
-.skip-link {
-    position: absolute;
-    top: -40px;
-    left: 0;
-    background: #000;
-    color: #fff;
-    padding: 0.5rem 1rem;
-    z-index: 100000;
-    text-decoration: none;
-}
-.skip-link:focus {
-    top: 0;
-}
-
 /* ==========================================================================
    TYPOGRAPHY BASE (Critical)
    ========================================================================== */
@@ -840,267 +816,3 @@ h6 { font-size: 1rem; }
     h4 { font-size: 1.5rem; }
 }
 
-/* ==========================================================================
-   CLS PREVENTION - Tables APU (Critical Column Widths)
-   Previene CLS al definir anchos de columna ANTES de que cargue css-tablas-apu.css
-   ========================================================================== */
-
-/* Contenedor con overflow para scroll horizontal */
-.analisis,
-.desglose {
-    margin: 2rem 0;
-    overflow-x: auto;
-}
-
-/* Tabla base con table-layout: fixed */
-.analisis table,
-.desglose table,
-table.table {
-    table-layout: fixed;
-    width: 100%;
-    border-collapse: collapse;
-    background: #fff;
-}
-
-/* Anchos de columna fijos - CRITICO para prevenir CLS */
-.analisis table td:nth-child(1),
-.analisis table th:nth-child(1),
-.desglose table td:nth-child(1),
-.desglose table th:nth-child(1) {
-    width: 150px;
-    min-width: 100px;
-}
-
-.analisis table td:nth-child(2),
-.analisis table th:nth-child(2),
-.desglose table td:nth-child(2),
-.desglose table th:nth-child(2) {
-    width: auto;
-    min-width: 300px;
-}
-
-.analisis table td:nth-child(3),
-.analisis table th:nth-child(3),
-.desglose table td:nth-child(3),
-.desglose table th:nth-child(3) {
-    width: 80px;
-    min-width: 60px;
-}
-
-.analisis table td:nth-child(4),
-.analisis table th:nth-child(4),
-.desglose table td:nth-child(4),
-.desglose table th:nth-child(4) {
-    width: 110px;
-    min-width: 90px;
-}
-
-.analisis table td:nth-child(5),
-.analisis table th:nth-child(5),
-.desglose table td:nth-child(5),
-.desglose table th:nth-child(5) {
-    width: 120px;
-    min-width: 100px;
-}
-
-.analisis table td:nth-child(6),
-.analisis table th:nth-child(6),
-.desglose table td:nth-child(6),
-.desglose table th:nth-child(6) {
-    width: 120px;
-    min-width: 100px;
-}
-
-/* Filas con altura mínima */
-.analisis table tr,
-.desglose table tr,
-table.table tr {
-    min-height: 40px;
-}
-
-/* Celdas base */
-.analisis table td,
-.analisis table th,
-.desglose table td,
-.desglose table th,
-table.table td,
-table.table th {
-    padding: 0.75rem 1rem;
-    vertical-align: middle;
-    border: none;
-}
-
-/* Filas especiales - estilos base para prevenir CLS */
-.analisis table tr.section-header,
-.desglose table tr.section-header {
-    background-color: #e9ecef;
-}
-
-.analisis table tr.subtotal-row,
-.desglose table tr.subtotal-row {
-    background-color: rgba(255, 133, 0, 0.15);
-}
-
-.analisis table tr.total-row,
-.desglose table tr.total-row {
-    background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
-}
-
-.analisis table tr.total-row td,
-.desglose table tr.total-row td {
-    color: #fff;
-}
-
-/* Responsive - móvil */
-@media (max-width: 767px) {
-    .analisis table td:nth-child(1),
-    .desglose table td:nth-child(1) {
-        width: 80px;
-        min-width: 60px;
-    }
-    .analisis table td:nth-child(2),
-    .desglose table td:nth-child(2) {
-        min-width: 150px;
-    }
-    .analisis table td:nth-child(3),
-    .analisis table td:nth-child(4),
-    .analisis table td:nth-child(5),
-    .analisis table td:nth-child(6),
-    .desglose table td:nth-child(3),
-    .desglose table td:nth-child(4),
-    .desglose table td:nth-child(5),
-    .desglose table td:nth-child(6) {
-        min-width: 70px;
-    }
-}
-
-/* Site main ya tiene flex-grow: 1 arriba - no forzar min-height */
-
-/* ==========================================================================
-   CLS PREVENTION - AdSense Ads
-   PageSpeed Issue: body CLS 1.000 en desktop, 0.226 en móvil
-   Causa: AdSense inyecta style="height: auto !important" al main-content
-   Solución: Reservar espacio mínimo para ads antes de que se carguen
-   ========================================================================== */
-
-/* Reservar espacio para contenedores de AdSense */
-ins.adsbygoogle {
-    display: block;
-    min-height: 100px; /* Altura mínima mientras carga */
-    background: transparent;
-}
-
-/* Ads en contenido (entre párrafos) - más espacio */
-.post-content ins.adsbygoogle,
-article ins.adsbygoogle {
-    min-height: 250px;
-    margin: 1.5rem 0;
-}
-
-/* Ads en sidebar - menos espacio */
-.sidebar ins.adsbygoogle,
-.col-lg-3 ins.adsbygoogle {
-    min-height: 200px;
-}
-
-
-/* ==========================================================================
-   CLS PREVENTION - Navbar Collapse (Mobile)
-   PageSpeed Issue: navbar-collapse CLS 0.245 en móvil
-   Causa: Menú sin dimensiones reservadas al colapsar
-   Solución: Reservar espacio para el menú colapsado
-   ========================================================================== */
-
-/* En desktop: navbar-collapse visible con altura auto */
-@media (min-width: 992px) {
-    .navbar-collapse {
-        display: flex !important;
-        flex-basis: auto;
-    }
-}
-
-/* En móvil: cuando está colapsado, no debe afectar layout */
-@media (max-width: 991.98px) {
-    .navbar-collapse {
-        position: absolute;
-        top: 100%;
-        left: 0;
-        right: 0;
-        background: #1e3a5f; /* Navy dark - mismo que navbar */
-        z-index: 1000;
-        padding: 1rem;
-        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-    }
-
-    .navbar-collapse:not(.show) {
-        display: none;
-    }
-
-    /* Menú vertical en móvil */
-    .navbar-collapse .navbar-nav {
-        flex-direction: column;
-        width: 100%;
-    }
-
-    .navbar-collapse .nav-item {
-        width: 100%;
-    }
-
-    .navbar-collapse .nav-link {
-        padding: 0.75rem 1rem;
-        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    }
-}
-
-/* ==========================================================================
-   CLS PREVENTION - Hero Section
-   PageSpeed Issue: hero-section CLS 0.033 en móvil
-   Solución: Altura mínima para hero
-   ========================================================================== */
-.hero-section {
-    min-height: 120px;
-}
-
-@media (max-width: 767.98px) {
-    .hero-section {
-        min-height: 100px;
-    }
-}
-
-/* ==========================================================================
-   CLS PREVENTION - Featured Image
-   PageSpeed Issue: main-content y container CLS 0.121 + 0.099
-   Solución: Reservar espacio para imagen con aspect-ratio
-   ========================================================================== */
-.featured-image-container {
-    aspect-ratio: 16 / 9;
-    position: relative;
-    background-color: #f0f0f0;
-    border-radius: 12px;
-    overflow: hidden;
-    margin-top: 1rem;
-    margin-bottom: 2rem;
-}
-.featured-image-container img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-}
-
-/* ==========================================================================
-   CLS PREVENTION - Post Content
-   PageSpeed Issue: article.post-content CLS 0.028
-   Solución: min-height para contenido principal
-   ========================================================================== */
-.post-content {
-    min-height: 300px;
-}
-@media (max-width: 767.98px) {
-    .post-content {
-        min-height: 200px;
-    }
-}