refactor(css): limpiar critical-bootstrap.css - solo Bootstrap puro
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>
This commit is contained in:
FrankZamora
@@ -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:
|
* Contiene SOLO clases de Bootstrap 5.3.2 usadas en componentes above-the-fold.
|
||||||
* - TopNotificationBar
|
* NO contiene CSS personalizado (ese va en critical-custom-temp.css - TIPO 3).
|
||||||
* - Navbar
|
|
||||||
* - Hero
|
|
||||||
*
|
*
|
||||||
* Esto permite diferir la carga del Bootstrap completo (31KB)
|
* Componentes Bootstrap incluidos:
|
||||||
* mientras se renderiza el contenido crítico inmediatamente.
|
* - 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
|
* @version 5.3.2-subset
|
||||||
* @see Inc/enqueue-scripts.php - Bootstrap diferido
|
* @see Inc/enqueue-scripts.php - Bootstrap diferido
|
||||||
* @see Shared/Infrastructure/Services/CriticalBootstrapService.php
|
* @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; }
|
.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)
|
TYPOGRAPHY BASE (Critical)
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
@@ -840,267 +816,3 @@ h6 { font-size: 1rem; }
|
|||||||
h4 { font-size: 1.5rem; }
|
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
Reference in New Issue
Block a user