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:
|
||||
* - 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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user