diff --git a/wp-content/themes/apus-theme/assets/css/custom-style.css b/wp-content/themes/apus-theme/assets/css/custom-style.css deleted file mode 100644 index 338b433c..00000000 --- a/wp-content/themes/apus-theme/assets/css/custom-style.css +++ /dev/null @@ -1,842 +0,0 @@ -/* ======================================== - APU MÉXICO - OPTIMIZED COLOR PALETTE - ======================================== - - PRIMARY COLORS (Navy Brand): - - Navy Dark: #0E2337 - - Navy Primary: #1e3a5f - - Navy Light: #2c5282 - - ACCENT COLORS (Orange Action): - - Orange Primary: #FF8600 - - Orange Hover: #FF6B35 - - Orange Light: #FFB800 - - NEUTRAL COLORS: - - White: #ffffff - - Neutral 50: #f8f9fa - - Neutral 100: #e9ecef - - Neutral 600: #495057 - - Neutral 700: #6c757d -======================================== */ - -/* ======================================== - GLOBAL STYLES -======================================== */ - -:root { - --color-navy-dark: #0E2337; - --color-navy-primary: #1e3a5f; - --color-navy-light: #2c5282; - --color-orange-primary: #FF8600; - --color-orange-hover: #FF6B35; - --color-orange-light: #FFB800; - --color-neutral-50: #f8f9fa; - --color-neutral-100: #e9ecef; - --color-neutral-600: #495057; - --color-neutral-700: #6c757d; -} - -* { - margin: 0; - padding: 0; - box-sizing: border-box; -} - -body { - font-family: 'Poppins', sans-serif; - color: var(--color-neutral-600); - background-color: var(--color-neutral-50); - line-height: 1.6; -} - -/* ======================================== - TOP NOTIFICATION BAR -======================================== */ - -.top-notification-bar { - background-color: var(--color-navy-dark); - color: #ffffff; - padding: 0.5rem 0; - font-size: 0.9rem; - text-align: center; -} - -.top-notification-bar strong { - color: var(--color-orange-primary); -} - -.top-notification-bar i { - color: var(--color-orange-primary); -} - -.top-notification-bar a { - color: #ffffff; - transition: color 0.3s ease; -} - -.top-notification-bar a:hover { - color: var(--color-orange-primary); -} - -/* NAVBAR, HERO SECTION, y BOTÓN LET'S TALK: CSS movido a assets/css/style.css */ - -/* ======================================== - FEATURED IMAGE -======================================== */ - -.featured-image-container { - border-radius: 12px; - overflow: hidden; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); - margin: 2rem 0; -} - -.featured-image-container img { - width: 100%; - height: auto; - display: block; -} - -/* ======================================== - POST CONTENT -======================================== */ - -.post-content { - background: #ffffff; - padding: 2rem; - border-radius: 12px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); -} - -.post-content h2 { - color: var(--color-navy-primary); - font-weight: 700; - margin-top: 2.5rem; - margin-bottom: 1.25rem; - padding-bottom: 0.75rem; - border-bottom: 3px solid var(--color-orange-primary); -} - -.post-content h3 { - color: var(--color-navy-light); - font-weight: 600; - margin-top: 2rem; - margin-bottom: 1rem; -} - -.post-content p { - color: var(--color-neutral-600); - line-height: 1.8; - margin-bottom: 1.25rem; -} - -.post-content ul, -.post-content ol { - margin-bottom: 1.5rem; - padding-left: 2rem; -} - -.post-content li { - margin-bottom: 0.5rem; - color: var(--color-neutral-600); -} - -.post-content strong { - color: var(--color-navy-primary); - font-weight: 600; -} - -.post-content a { - color: var(--color-orange-primary); - text-decoration: underline; - transition: color 0.3s ease; -} - -.post-content a:hover { - color: var(--color-orange-hover); -} - -/* ======================================== - GENERIC TABLES - 10 DIFFERENT STYLES -======================================== */ -/* NOTA: Estilos de tablas APU movidos a tables-apu.css (Arquitectura correcta) */ - -/* Base styles for all generic tables */ -.post-content table:not(.analisis table) { - width: 100%; - border-collapse: collapse; - margin: 2rem auto; - font-size: 0.95rem; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); - border-radius: 8px; - overflow: hidden; -} - -/* Header styles - VERY OBVIOUS */ -.post-content table:not(.analisis table) thead tr:first-child th, -.post-content table:not(.analisis table) tbody tr:first-child td, -.post-content table:not(.analisis table) tr:first-child td { - font-weight: 700; - text-align: center; - padding: 1.25rem 1rem; - font-size: 1.05rem; - letter-spacing: 0.5px; -} - -/* Body cells */ -.post-content table:not(.analisis table) tbody tr:not(:first-child) td { - padding: 0.875rem 1rem; - border: 1px solid var(--color-neutral-100); - text-align: left; -} - -/* STYLE 1: Navy Header with Orange Accent */ -.post-content table:not(.analisis table):nth-of-type(2) thead tr:first-child th, -.post-content table:not(.analisis table):nth-of-type(2) tbody tr:first-child td, -.post-content table:not(.analisis table):nth-of-type(2) tr:first-child td { - background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%); - color: #ffffff !important; - border: none !important; - box-shadow: 0 2px 8px rgba(30, 58, 95, 0.3); -} - -.post-content table:not(.analisis table):nth-of-type(2) tbody tr:nth-child(even) { - background-color: var(--color-neutral-50); -} - -.post-content table:not(.analisis table):nth-of-type(2) tbody tr:hover { - background-color: rgba(255, 133, 0, 0.05); -} - -/* STYLE 2: Orange Header with Light Background */ -.post-content table:not(.analisis table):nth-of-type(3) thead tr:first-child th, -.post-content table:not(.analisis table):nth-of-type(3) tbody tr:first-child td, -.post-content table:not(.analisis table):nth-of-type(3) tr:first-child td { - background: var(--color-orange-primary); - color: #ffffff !important; - border: none !important; - box-shadow: 0 2px 8px rgba(255, 133, 0, 0.3); -} - -.post-content table:not(.analisis table):nth-of-type(3) tbody tr:nth-child(odd) { - background-color: rgba(255, 133, 0, 0.05); -} - -.post-content table:not(.analisis table):nth-of-type(3) tbody tr:hover { - background-color: rgba(255, 133, 0, 0.1); -} - -/* STYLE 3: Minimal with Left Orange Border */ -.post-content table:not(.analisis table):nth-of-type(4) { - border-left: 5px solid var(--color-orange-primary); -} - -.post-content table:not(.analisis table):nth-of-type(4) thead tr:first-child th, -.post-content table:not(.analisis table):nth-of-type(4) tbody tr:first-child td, -.post-content table:not(.analisis table):nth-of-type(4) tr:first-child td { - background: var(--color-navy-primary); - color: #ffffff !important; - border: none !important; - border-bottom: 3px solid var(--color-orange-primary) !important; -} - -.post-content table:not(.analisis table):nth-of-type(4) tbody tr:hover { - background-color: var(--color-neutral-50); -} - -/* STYLE 4: Dark Navy with Striped Rows */ -.post-content table:not(.analisis table):nth-of-type(5) thead tr:first-child th, -.post-content table:not(.analisis table):nth-of-type(5) tbody tr:first-child td, -.post-content table:not(.analisis table):nth-of-type(5) tr:first-child td { - background: var(--color-navy-dark); - color: #ffffff !important; - border: none !important; - box-shadow: 0 2px 8px rgba(14, 35, 55, 0.4); -} - -.post-content table:not(.analisis table):nth-of-type(5) tbody tr:nth-child(even) { - background-color: rgba(30, 58, 95, 0.05); -} - -.post-content table:not(.analisis table):nth-of-type(5) tbody tr:hover { - background-color: rgba(30, 58, 95, 0.1); -} - -/* STYLE 5: Orange Gradient Header */ -.post-content table:not(.analisis table):nth-of-type(6) thead tr:first-child th, -.post-content table:not(.analisis table):nth-of-type(6) tbody tr:first-child td, -.post-content table:not(.analisis table):nth-of-type(6) tr:first-child td { - background: linear-gradient(135deg, var(--color-orange-primary) 0%, var(--color-orange-light) 100%); - color: #ffffff !important; - border: none !important; - box-shadow: 0 2px 8px rgba(255, 133, 0, 0.35); -} - -.post-content table:not(.analisis table):nth-of-type(6) tbody tr { - background-color: #ffffff; -} - -.post-content table:not(.analisis table):nth-of-type(6) tbody tr:hover { - background-color: rgba(255, 133, 0, 0.08); -} - -/* STYLE 6: Bordered with Navy Accents */ -.post-content table:not(.analisis table):nth-of-type(7) { - border: 3px solid var(--color-navy-primary); -} - -.post-content table:not(.analisis table):nth-of-type(7) thead tr:first-child th, -.post-content table:not(.analisis table):nth-of-type(7) tbody tr:first-child td, -.post-content table:not(.analisis table):nth-of-type(7) tr:first-child td { - background: var(--color-navy-primary); - color: #ffffff !important; - border: none !important; - border-bottom: 4px solid var(--color-orange-primary) !important; -} - -.post-content table:not(.analisis table):nth-of-type(7) tbody tr:nth-child(odd) { - background-color: rgba(30, 58, 95, 0.03); -} - -/* STYLE 7: Light Orange Background */ -.post-content table:not(.analisis table):nth-of-type(8) thead tr:first-child th, -.post-content table:not(.analisis table):nth-of-type(8) tbody tr:first-child td, -.post-content table:not(.analisis table):nth-of-type(8) tr:first-child td { - background: var(--color-orange-primary); - color: #ffffff !important; - border: none !important; - border-bottom: 3px solid var(--color-navy-primary) !important; -} - -.post-content table:not(.analisis table):nth-of-type(8) tbody tr:nth-child(even) { - background-color: rgba(255, 133, 0, 0.03); -} - -.post-content table:not(.analisis table):nth-of-type(8) tbody tr:hover { - background-color: rgba(255, 133, 0, 0.08); -} - -/* STYLE 8: Modern Flat with Top Border */ -.post-content table:not(.analisis table):nth-of-type(9) { - border-top: 6px solid var(--color-orange-primary); -} - -.post-content table:not(.analisis table):nth-of-type(9) thead tr:first-child th, -.post-content table:not(.analisis table):nth-of-type(9) tbody tr:first-child td, -.post-content table:not(.analisis table):nth-of-type(9) tr:first-child td { - background: var(--color-navy-light); - color: #ffffff !important; - border: none !important; - box-shadow: 0 2px 6px rgba(44, 82, 130, 0.3); -} - -.post-content table:not(.analisis table):nth-of-type(9) tbody tr { - background-color: #ffffff; -} - -.post-content table:not(.analisis table):nth-of-type(9) tbody tr:hover { - background-color: var(--color-neutral-50); -} - -/* STYLE 9: Compact with Subtle Colors */ -.post-content table:not(.analisis table):nth-of-type(10) thead tr:first-child th, -.post-content table:not(.analisis table):nth-of-type(10) tbody tr:first-child td, -.post-content table:not(.analisis table):nth-of-type(10) tr:first-child td { - background: var(--color-navy-dark); - color: #ffffff !important; - border: none !important; - border-left: 5px solid var(--color-orange-primary) !important; -} - -.post-content table:not(.analisis table):nth-of-type(10) tbody tr:nth-child(odd) { - background-color: var(--color-neutral-50); -} - -.post-content table:not(.analisis table):nth-of-type(10) tbody tr:hover { - background-color: rgba(255, 133, 0, 0.05); -} - -/* STYLE 10: Bold Orange Border */ -.post-content table:not(.analisis table):nth-of-type(11) { - border: 4px solid var(--color-orange-primary); -} - -.post-content table:not(.analisis table):nth-of-type(11) thead tr:first-child th, -.post-content table:not(.analisis table):nth-of-type(11) tbody tr:first-child td, -.post-content table:not(.analisis table):nth-of-type(11) tr:first-child td { - background: linear-gradient(135deg, var(--color-orange-hover) 0%, var(--color-orange-primary) 100%); - color: #ffffff !important; - border: none !important; - box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4); -} - -.post-content table:not(.analisis table):nth-of-type(11) tbody tr:nth-child(even) { - background-color: rgba(255, 133, 0, 0.05); -} - -.post-content table:not(.analisis table):nth-of-type(11) tbody tr:hover { - background-color: rgba(255, 133, 0, 0.12); -} - -/* STYLE 11+: Cycle back to Style 1 (repeat pattern) */ -.post-content table:not(.analisis table):nth-of-type(n+12) thead tr:first-child th, -.post-content table:not(.analisis table):nth-of-type(n+12) tbody tr:first-child td, -.post-content table:not(.analisis table):nth-of-type(n+12) tr:first-child td { - background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%); - color: #ffffff !important; - border: none !important; - box-shadow: 0 2px 8px rgba(30, 58, 95, 0.3); -} - -.post-content table:not(.analisis table):nth-of-type(n+12) tbody tr:nth-child(even) { - background-color: var(--color-neutral-50); -} - -/* ======================================== - TABLE OF CONTENTS (TOC) -======================================== */ - -.sidebar-sticky { - position: sticky; - top: 85px; - display: flex; - flex-direction: column; -} - -.toc-container { - margin-bottom: 13px; - background: #ffffff; - border: 1px solid var(--color-neutral-100); - border-radius: 8px; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); - padding: 12px 16px; - max-height: calc(100vh - 71px - 10px - 250px - 15px - 15px); - display: flex; - flex-direction: column; -} - -.toc-container h4 { - color: var(--color-navy-primary); - padding-bottom: 8px; - border-bottom: 2px solid var(--color-neutral-100); - margin-bottom: 0.75rem; - font-weight: 600; - text-align: left; - font-size: 1rem; - font-style: normal; -} - -.toc-list { - overflow-y: auto; - padding-right: 0.5rem; - list-style: none; - flex: 1; - min-height: 0; -} - -.toc-container li { - margin-bottom: 0.15rem; -} - -.toc-container a { - display: block; - padding: 0.3rem 0.85rem; - color: var(--color-neutral-600); - text-decoration: none; - border-left: 3px solid transparent; - transition: all 0.3s ease; - border-radius: 4px; - font-size: 0.9rem; - line-height: 1.3; -} - -.toc-container a:hover { - background: var(--color-neutral-50); - border-left-color: var(--color-navy-primary); - color: var(--color-navy-primary); -} - -.toc-container a.active { - background: var(--color-neutral-50); - border-left-color: var(--color-navy-primary); - color: var(--color-navy-primary); - font-weight: 600; -} - -.toc-list::-webkit-scrollbar { - width: 6px; -} - -.toc-list::-webkit-scrollbar-track { - background: var(--color-neutral-50); - border-radius: 3px; -} - -.toc-list::-webkit-scrollbar-thumb { - background: var(--color-neutral-600); - border-radius: 3px; -} - -.toc-list::-webkit-scrollbar-thumb:hover { - background: var(--color-neutral-700); -} - -/* ======================================== - CTA BOX (SIDEBAR) -======================================== */ - -.cta-box-sidebar { - background: var(--color-orange-primary); - border-radius: 8px; - padding: 24px; - text-align: center; - margin-top: 0; - margin-bottom: 15px; - height: 250px; - display: flex; - flex-direction: column; - justify-content: center; - box-shadow: 0 4px 12px rgba(255, 133, 0, 0.2); -} - -.cta-box-title { - color: #ffffff; - font-weight: 700; - font-size: 1.25rem; - margin-bottom: 1rem; -} - -.cta-box-text { - color: rgba(255, 255, 255, 0.95); - font-size: 0.9rem; - margin-bottom: 1rem; -} - -.btn-cta-box { - background-color: #ffffff; - color: var(--color-orange-primary); - font-weight: 700; - border: none; - padding: 0.75rem 1.5rem; - border-radius: 8px; - transition: all 0.3s ease; - font-size: 1rem; -} - -.btn-cta-box:hover { - background-color: var(--color-navy-primary); - color: #ffffff; -} - -/* ======================================== - SHARE BUTTONS -======================================== - ELIMINADO: CSS movido a style.css según documentación - Ver: theme-documentation/13-componente-share-buttons/CSS-ESPECIFICO.md -======================================== */ - -/* ======================================== - VIDEO IFRAME STYLING -======================================== */ - -.video-wrapper { - position: relative; - margin: 2rem auto; - max-width: 850px; - border-radius: 12px; - overflow: hidden; - box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); - background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); - padding: 8px; -} - -.video-wrapper iframe { - display: block; - width: 100%; - height: 478px; - border: none; - border-radius: 8px; -} - -/* ======================================== - CTA SECTIONS -======================================== */ - -.cta-section { - background: linear-gradient(135deg, var(--color-orange-primary) 0%, var(--color-orange-light) 100%); - box-shadow: 0 8px 24px rgba(255, 133, 0, 0.3); - border-radius: 12px; - padding: 2rem; -} - -.cta-section h3 { - color: #ffffff !important; -} - -.cta-section p { - color: rgba(255, 255, 255, 0.95) !important; -} - -.cta-button { - background-color: var(--color-orange-primary); - color: #ffffff; - font-weight: 600; - padding: 0.75rem 2rem; - border: none; - border-radius: 8px; - transition: all 0.3s ease; - text-decoration: none; - display: inline-block; -} - -.cta-button:hover { - background-color: var(--color-orange-hover); - color: #ffffff; -} - -/* ======================================== - RELATED POSTS -======================================== */ - -.related-posts { - margin: 3rem 0; -} - -.related-posts h2 { - color: var(--color-navy-primary); - font-weight: 700; - margin-bottom: 2rem; -} - -.related-posts .card { - cursor: pointer; - background: #ffffff !important; - border: 1px solid var(--color-neutral-100) !important; - border-left: 4px solid var(--color-neutral-600) !important; - transition: all 0.3s ease; - height: 100%; -} - -.related-posts .card:hover { - background: var(--color-neutral-50) !important; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important; - border-left-color: var(--color-orange-primary) !important; -} - -.related-posts .card-body { - padding: 1.5rem !important; -} - -.related-posts .card-title { - color: var(--color-navy-primary) !important; - font-weight: 600; - font-size: 0.95rem; - line-height: 1.4; -} - -.related-posts a { - text-decoration: none; -} - -.related-posts a:hover .card-title { - color: var(--color-orange-primary) !important; -} - -/* ======================================== - PAGINATION -======================================== */ - -.pagination .page-link { - color: var(--color-neutral-600); - border: 1px solid var(--color-neutral-100); - padding: 0.5rem 1rem; - margin: 0 0.25rem; - border-radius: 4px; - font-weight: 500; - transition: all 0.3s ease; -} - -.pagination .page-link:hover { - background-color: rgba(255, 133, 0, 0.1); - border-color: var(--color-orange-primary); - color: var(--color-orange-primary); -} - -.pagination .page-item.active .page-link { - background-color: var(--color-orange-primary); - border-color: var(--color-orange-primary); - color: #ffffff; -} - -/* ======================================== - CONTACT FORM -======================================== */ - -.form-control { - border: 2px solid var(--color-neutral-100); - border-radius: 6px; - padding: 0.625rem 1rem; - transition: all 0.3s ease; -} - -.form-control:focus { - border-color: var(--color-orange-primary); - outline: none; -} - -.btn-contact-submit { - background-color: var(--color-orange-primary); - color: #ffffff; - font-weight: 600; - padding: 0.75rem 2rem; - border: none; - border-radius: 6px; - transition: all 0.3s ease; -} - -.btn-contact-submit:hover { - background-color: var(--color-orange-hover); - color: #ffffff; -} - -.btn-submit-form { - background-color: var(--color-orange-primary); - color: #ffffff; - font-weight: 600; - padding: 0.75rem; - border: none; - border-radius: 6px; - transition: all 0.3s ease; -} - -.btn-submit-form:hover { - background-color: var(--color-orange-hover); - color: #ffffff; -} - -/* ======================================== - FOOTER -======================================== */ - -footer { - background-color: var(--color-navy-dark); - color: rgba(255, 255, 255, 0.8); - padding: 3rem 0; -} - -footer h5 { - color: #ffffff; - font-weight: 600; - margin-bottom: 1rem; -} - -footer a { - color: rgba(255, 255, 255, 0.8); - text-decoration: none; - transition: color 0.3s ease; -} - -footer a:hover { - color: var(--color-orange-primary); -} - -footer .btn-primary { - background-color: var(--color-orange-primary); - border-color: var(--color-orange-primary); -} - -footer .btn-primary:hover { - background-color: var(--color-orange-hover); - border-color: var(--color-orange-hover); -} - -.contact-info i { - color: var(--color-orange-primary); -} - -/* ======================================== - RESPONSIVE DESIGN -======================================== */ - -@media (max-width: 991px) { - .hero-title { - padding: 2rem 0; - } - - .hero-title h1 { - font-size: 1.75rem; - } - - .post-content { - padding: 1.5rem; - } - - .toc-container { - position: relative; - top: 0; - margin-bottom: 2rem; - } - - .toc-list { - max-height: 300px; - } - - .sidebar-sticky { - position: relative !important; - } -} - -@media (max-width: 768px) { - /* NOTA: Estilos responsive de tablas APU movidos a tables-apu.css */ - - .btn-lets-talk { - width: 100%; - margin-top: 1rem; - } - - .post-content h2 { - font-size: 1.5rem; - } - - .post-content h3 { - font-size: 1.25rem; - } - - .cta-section { - padding: 1.5rem; - } - - .cta-button { - width: 100%; - margin-top: 1rem; - } -} - -/* ======================================== - UTILITIES -======================================== */ - -.text-navy { - color: var(--color-navy-primary) !important; -} - -.text-orange { - color: var(--color-orange-primary) !important; -} - -.bg-navy { - background-color: var(--color-navy-primary) !important; -} - -.bg-orange { - background-color: var(--color-orange-primary) !important; -} - -.border-orange { - border-color: var(--color-orange-primary) !important; -} - -.border-navy { - border-color: var(--color-navy-primary) !important; -} diff --git a/wp-content/themes/apus-theme/assets/css/generic-tables.css b/wp-content/themes/apus-theme/assets/css/generic-tables.css new file mode 100644 index 00000000..4d2c67d4 --- /dev/null +++ b/wp-content/themes/apus-theme/assets/css/generic-tables.css @@ -0,0 +1,276 @@ +/** + * Generic Tables Styles + * + * Estilos para tablas genéricas en post-content (NO tablas APU) + * Aplica 10 estilos diferentes automáticamente a las primeras 11 tablas + * + * @package Apus_Theme + * @since 1.0.0 + */ + +/* ======================================== + BASE STYLES - Todas las tablas genéricas + ======================================== */ + +.post-content table:not(.analisis table) { + width: 100%; + border-collapse: collapse; + margin: 2rem auto; + font-size: 0.95rem; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); + border-radius: 8px; + overflow: hidden; +} + +/* Header styles - VERY OBVIOUS */ +.post-content table:not(.analisis table) thead tr:first-child th, +.post-content table:not(.analisis table) tbody tr:first-child td, +.post-content table:not(.analisis table) tr:first-child td { + font-weight: 700; + text-align: center; + padding: 1.25rem 1rem; + font-size: 1.05rem; + letter-spacing: 0.5px; +} + +/* Body cells */ +.post-content table:not(.analisis table) tbody tr:not(:first-child) td { + padding: 0.875rem 1rem; + border: 1px solid var(--color-neutral-100); + text-align: left; +} + +/* ======================================== + STYLE 1: Navy Header with Orange Accent + ======================================== */ + +.post-content table:not(.analisis table):nth-of-type(2) thead tr:first-child th, +.post-content table:not(.analisis table):nth-of-type(2) tbody tr:first-child td, +.post-content table:not(.analisis table):nth-of-type(2) tr:first-child td { + background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%); + color: #ffffff !important; + border: none !important; + box-shadow: 0 2px 8px rgba(30, 58, 95, 0.3); +} + +.post-content table:not(.analisis table):nth-of-type(2) tbody tr:nth-child(even) { + background-color: var(--color-neutral-50); +} + +.post-content table:not(.analisis table):nth-of-type(2) tbody tr:hover { + background-color: rgba(255, 133, 0, 0.05); +} + +/* ======================================== + STYLE 2: Orange Header with Light Background + ======================================== */ + +.post-content table:not(.analisis table):nth-of-type(3) thead tr:first-child th, +.post-content table:not(.analisis table):nth-of-type(3) tbody tr:first-child td, +.post-content table:not(.analisis table):nth-of-type(3) tr:first-child td { + background: var(--color-orange-primary); + color: #ffffff !important; + border: none !important; + box-shadow: 0 2px 8px rgba(255, 133, 0, 0.3); +} + +.post-content table:not(.analisis table):nth-of-type(3) tbody tr:nth-child(odd) { + background-color: rgba(255, 133, 0, 0.05); +} + +.post-content table:not(.analisis table):nth-of-type(3) tbody tr:hover { + background-color: rgba(255, 133, 0, 0.1); +} + +/* ======================================== + STYLE 3: Minimal with Left Orange Border + ======================================== */ + +.post-content table:not(.analisis table):nth-of-type(4) { + border-left: 5px solid var(--color-orange-primary); +} + +.post-content table:not(.analisis table):nth-of-type(4) thead tr:first-child th, +.post-content table:not(.analisis table):nth-of-type(4) tbody tr:first-child td, +.post-content table:not(.analisis table):nth-of-type(4) tr:first-child td { + background: var(--color-navy-primary); + color: #ffffff !important; + border: none !important; + border-bottom: 3px solid var(--color-orange-primary) !important; +} + +.post-content table:not(.analisis table):nth-of-type(4) tbody tr:hover { + background-color: var(--color-neutral-50); +} + +/* ======================================== + STYLE 4: Dark Navy with Striped Rows + ======================================== */ + +.post-content table:not(.analisis table):nth-of-type(5) thead tr:first-child th, +.post-content table:not(.analisis table):nth-of-type(5) tbody tr:first-child td, +.post-content table:not(.analisis table):nth-of-type(5) tr:first-child td { + background: var(--color-navy-dark); + color: #ffffff !important; + border: none !important; + box-shadow: 0 2px 8px rgba(14, 35, 55, 0.4); +} + +.post-content table:not(.analisis table):nth-of-type(5) tbody tr:nth-child(even) { + background-color: rgba(30, 58, 95, 0.05); +} + +.post-content table:not(.analisis table):nth-of-type(5) tbody tr:hover { + background-color: rgba(30, 58, 95, 0.1); +} + +/* ======================================== + STYLE 5: Orange Gradient Header + ======================================== */ + +.post-content table:not(.analisis table):nth-of-type(6) thead tr:first-child th, +.post-content table:not(.analisis table):nth-of-type(6) tbody tr:first-child td, +.post-content table:not(.analisis table):nth-of-type(6) tr:first-child td { + background: linear-gradient(135deg, var(--color-orange-primary) 0%, var(--color-orange-light) 100%); + color: #ffffff !important; + border: none !important; + box-shadow: 0 2px 8px rgba(255, 133, 0, 0.35); +} + +.post-content table:not(.analisis table):nth-of-type(6) tbody tr { + background-color: #ffffff; +} + +.post-content table:not(.analisis table):nth-of-type(6) tbody tr:hover { + background-color: rgba(255, 133, 0, 0.08); +} + +/* ======================================== + STYLE 6: Bordered with Navy Accents + ======================================== */ + +.post-content table:not(.analisis table):nth-of-type(7) { + border: 3px solid var(--color-navy-primary); +} + +.post-content table:not(.analisis table):nth-of-type(7) thead tr:first-child th, +.post-content table:not(.analisis table):nth-of-type(7) tbody tr:first-child td, +.post-content table:not(.analisis table):nth-of-type(7) tr:first-child td { + background: var(--color-navy-primary); + color: #ffffff !important; + border: none !important; + border-bottom: 4px solid var(--color-orange-primary) !important; +} + +.post-content table:not(.analisis table):nth-of-type(7) tbody tr:nth-child(odd) { + background-color: rgba(30, 58, 95, 0.03); +} + +/* ======================================== + STYLE 7: Light Orange Background + ======================================== */ + +.post-content table:not(.analisis table):nth-of-type(8) thead tr:first-child th, +.post-content table:not(.analisis table):nth-of-type(8) tbody tr:first-child td, +.post-content table:not(.analisis table):nth-of-type(8) tr:first-child td { + background: var(--color-orange-primary); + color: #ffffff !important; + border: none !important; + border-bottom: 3px solid var(--color-navy-primary) !important; +} + +.post-content table:not(.analisis table):nth-of-type(8) tbody tr:nth-child(even) { + background-color: rgba(255, 133, 0, 0.03); +} + +.post-content table:not(.analisis table):nth-of-type(8) tbody tr:hover { + background-color: rgba(255, 133, 0, 0.08); +} + +/* ======================================== + STYLE 8: Modern Flat with Top Border + ======================================== */ + +.post-content table:not(.analisis table):nth-of-type(9) { + border-top: 6px solid var(--color-orange-primary); +} + +.post-content table:not(.analisis table):nth-of-type(9) thead tr:first-child th, +.post-content table:not(.analisis table):nth-of-type(9) tbody tr:first-child td, +.post-content table:not(.analisis table):nth-of-type(9) tr:first-child td { + background: var(--color-navy-light); + color: #ffffff !important; + border: none !important; + box-shadow: 0 2px 6px rgba(44, 82, 130, 0.3); +} + +.post-content table:not(.analisis table):nth-of-type(9) tbody tr { + background-color: #ffffff; +} + +.post-content table:not(.analisis table):nth-of-type(9) tbody tr:hover { + background-color: var(--color-neutral-50); +} + +/* ======================================== + STYLE 9: Compact with Subtle Colors + ======================================== */ + +.post-content table:not(.analisis table):nth-of-type(10) thead tr:first-child th, +.post-content table:not(.analisis table):nth-of-type(10) tbody tr:first-child td, +.post-content table:not(.analisis table):nth-of-type(10) tr:first-child td { + background: var(--color-navy-dark); + color: #ffffff !important; + border: none !important; + border-left: 5px solid var(--color-orange-primary) !important; +} + +.post-content table:not(.analisis table):nth-of-type(10) tbody tr:nth-child(odd) { + background-color: var(--color-neutral-50); +} + +.post-content table:not(.analisis table):nth-of-type(10) tbody tr:hover { + background-color: rgba(255, 133, 0, 0.05); +} + +/* ======================================== + STYLE 10: Bold Orange Border + ======================================== */ + +.post-content table:not(.analisis table):nth-of-type(11) { + border: 4px solid var(--color-orange-primary); +} + +.post-content table:not(.analisis table):nth-of-type(11) thead tr:first-child th, +.post-content table:not(.analisis table):nth-of-type(11) tbody tr:first-child td, +.post-content table:not(.analisis table):nth-of-type(11) tr:first-child td { + background: linear-gradient(135deg, var(--color-orange-hover) 0%, var(--color-orange-primary) 100%); + color: #ffffff !important; + border: none !important; + box-shadow: 0 2px 8px rgba(255, 107, 53, 0.4); +} + +.post-content table:not(.analisis table):nth-of-type(11) tbody tr:nth-child(even) { + background-color: rgba(255, 133, 0, 0.05); +} + +.post-content table:not(.analisis table):nth-of-type(11) tbody tr:hover { + background-color: rgba(255, 133, 0, 0.12); +} + +/* ======================================== + STYLE 11+: Cycle back to Style 1 + ======================================== */ + +.post-content table:not(.analisis table):nth-of-type(n+12) thead tr:first-child th, +.post-content table:not(.analisis table):nth-of-type(n+12) tbody tr:first-child td, +.post-content table:not(.analisis table):nth-of-type(n+12) tr:first-child td { + background: linear-gradient(135deg, var(--color-navy-primary) 0%, var(--color-navy-light) 100%); + color: #ffffff !important; + border: none !important; + box-shadow: 0 2px 8px rgba(30, 58, 95, 0.3); +} + +.post-content table:not(.analisis table):nth-of-type(n+12) tbody tr:nth-child(even) { + background-color: var(--color-neutral-50); +} diff --git a/wp-content/themes/apus-theme/assets/css/utilities.css b/wp-content/themes/apus-theme/assets/css/utilities.css index f7a59f54..f2e84e1d 100644 --- a/wp-content/themes/apus-theme/assets/css/utilities.css +++ b/wp-content/themes/apus-theme/assets/css/utilities.css @@ -1,450 +1,18 @@ /** * Utility Classes * - * Common utility classes for spacing, sizing, and layout + * SOLO utilidades que NO están en Bootstrap 5 + * IMPORTANTE: Bootstrap 5 ya provee la mayoría de utilities (display, flex, spacing, etc.) + * Este archivo solo contiene utilities adicionales no incluidas en Bootstrap + * * @package Apus_Theme * @since 1.0.0 */ -/* Display utilities */ -.d-none { - display: none !important; -} +/* ======================================== + CURSOR UTILITIES + ======================================== */ -.d-inline { - display: inline !important; -} - -.d-inline-block { - display: inline-block !important; -} - -.d-block { - display: block !important; -} - -.d-flex { - display: flex !important; -} - -.d-grid { - display: grid !important; -} - -.d-table { - display: table !important; -} - -.d-table-row { - display: table-row !important; -} - -.d-table-cell { - display: table-cell !important; -} - -.d-contents { - display: contents !important; -} - -/* Visibility utilities */ -.visibility-hidden { - visibility: hidden !important; -} - -.visibility-visible { - visibility: visible !important; -} - -/* Overflow utilities */ -.overflow-auto { - overflow: auto !important; -} - -.overflow-hidden { - overflow: hidden !important; -} - -.overflow-visible { - overflow: visible !important; -} - -.overflow-scroll { - overflow: scroll !important; -} - -.overflow-x-auto { - overflow-x: auto !important; -} - -.overflow-y-auto { - overflow-y: auto !important; -} - -/* Position utilities */ -.position-static { - position: static !important; -} - -.position-relative { - position: relative !important; -} - -.position-absolute { - position: absolute !important; -} - -.position-fixed { - position: fixed !important; -} - -.position-sticky { - position: sticky !important; -} - -/* Floating utilities */ -.float-start { - float: left !important; -} - -.float-end { - float: right !important; -} - -.float-none { - float: none !important; -} - -/* Flex utilities */ -.flex-row { - flex-direction: row !important; -} - -.flex-column { - flex-direction: column !important; -} - -.flex-wrap { - flex-wrap: wrap !important; -} - -.flex-nowrap { - flex-wrap: nowrap !important; -} - -.flex-grow-1 { - flex-grow: 1 !important; -} - -.flex-shrink-1 { - flex-shrink: 1 !important; -} - -.justify-content-start { - justify-content: flex-start !important; -} - -.justify-content-end { - justify-content: flex-end !important; -} - -.justify-content-center { - justify-content: center !important; -} - -.justify-content-between { - justify-content: space-between !important; -} - -.justify-content-around { - justify-content: space-around !important; -} - -.align-items-start { - align-items: flex-start !important; -} - -.align-items-end { - align-items: flex-end !important; -} - -.align-items-center { - align-items: center !important; -} - -.align-items-baseline { - align-items: baseline !important; -} - -.align-items-stretch { - align-items: stretch !important; -} - -.align-content-start { - align-content: flex-start !important; -} - -.align-content-end { - align-content: flex-end !important; -} - -.align-content-center { - align-content: center !important; -} - -.align-content-between { - align-content: space-between !important; -} - -/* Gap utilities */ -.gap-0 { - gap: 0 !important; -} - -.gap-1 { - gap: 0.25rem !important; -} - -.gap-2 { - gap: 0.5rem !important; -} - -.gap-3 { - gap: 1rem !important; -} - -.gap-4 { - gap: 1.5rem !important; -} - -.gap-5 { - gap: 3rem !important; -} - -/* Text alignment */ -.text-start { - text-align: left !important; -} - -.text-end { - text-align: right !important; -} - -.text-center { - text-align: center !important; -} - -.text-justify { - text-align: justify !important; -} - -/* Text transform */ -.text-lowercase { - text-transform: lowercase !important; -} - -.text-uppercase { - text-transform: uppercase !important; -} - -.text-capitalize { - text-transform: capitalize !important; -} - -/* Text wrapping */ -.text-wrap { - word-wrap: break-word !important; -} - -.text-nowrap { - white-space: nowrap !important; -} - -.text-truncate { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; -} - -/* Font weight */ -.fw-light { - font-weight: 300 !important; -} - -.fw-normal { - font-weight: 400 !important; -} - -.fw-bold { - font-weight: 700 !important; -} - -.fw-bolder { - font-weight: 900 !important; -} - -/* Font style */ -.fst-italic { - font-style: italic !important; -} - -.fst-normal { - font-style: normal !important; -} - -/* Line height */ -.lh-1 { - line-height: 1 !important; -} - -.lh-sm { - line-height: 1.25 !important; -} - -.lh-base { - line-height: 1.5 !important; -} - -.lh-lg { - line-height: 2 !important; -} - -/* Border utilities */ -.border { - border: 1px solid #dee2e6 !important; -} - -.border-0 { - border: 0 !important; -} - -.border-top { - border-top: 1px solid #dee2e6 !important; -} - -.border-end { - border-right: 1px solid #dee2e6 !important; -} - -.border-bottom { - border-bottom: 1px solid #dee2e6 !important; -} - -.border-start { - border-left: 1px solid #dee2e6 !important; -} - -.border-rounded { - border-radius: 0.25rem !important; -} - -.border-rounded-1 { - border-radius: 0.25rem !important; -} - -.border-rounded-2 { - border-radius: 0.5rem !important; -} - -.border-rounded-3 { - border-radius: 1rem !important; -} - -.border-rounded-circle { - border-radius: 50% !important; -} - -/* Width and Height */ -.w-auto { - width: auto !important; -} - -.w-25 { - width: 25% !important; -} - -.w-50 { - width: 50% !important; -} - -.w-75 { - width: 75% !important; -} - -.w-100 { - width: 100% !important; -} - -.h-auto { - height: auto !important; -} - -.h-25 { - height: 25% !important; -} - -.h-50 { - height: 50% !important; -} - -.h-75 { - height: 75% !important; -} - -.h-100 { - height: 100% !important; -} - -.min-vh-100 { - min-height: 100vh !important; -} - -/* Opacity */ -.opacity-0 { - opacity: 0 !important; -} - -.opacity-25 { - opacity: 0.25 !important; -} - -.opacity-50 { - opacity: 0.5 !important; -} - -.opacity-75 { - opacity: 0.75 !important; -} - -.opacity-100 { - opacity: 1 !important; -} - -/* Shadow */ -.shadow-none { - box-shadow: none !important; -} - -.shadow { - box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; -} - -.shadow-sm { - box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.075) !important; -} - -.shadow-lg { - box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; -} - -/* Clearfix */ -.clearfix::after { - content: ""; - display: table; - clear: both; -} - -/* Cursor utilities */ .cursor-pointer { cursor: pointer !important; } @@ -461,7 +29,10 @@ cursor: auto !important; } -/* User select */ +/* ======================================== + USER SELECT + ======================================== */ + .user-select-auto { user-select: auto !important; } @@ -474,7 +45,10 @@ user-select: all !important; } -/* Pointer events */ +/* ======================================== + POINTER EVENTS + ======================================== */ + .pointer-events-none { pointer-events: none !important; } @@ -483,7 +57,10 @@ pointer-events: auto !important; } -/* Object fit */ +/* ======================================== + OBJECT FIT + ======================================== */ + .object-fit-contain { object-fit: contain !important; } @@ -500,24 +77,10 @@ object-fit: scale-down !important; } -/* Z-index */ -.z-1 { - z-index: 1 !important; -} +/* ======================================== + TRANSITION + ======================================== */ -.z-2 { - z-index: 2 !important; -} - -.z-3 { - z-index: 3 !important; -} - -.z-auto { - z-index: auto !important; -} - -/* Transition */ .transition-all { transition: all 0.3s ease !important; } diff --git a/wp-content/themes/apus-theme/assets/css/video.css b/wp-content/themes/apus-theme/assets/css/video.css new file mode 100644 index 00000000..c66e75f6 --- /dev/null +++ b/wp-content/themes/apus-theme/assets/css/video.css @@ -0,0 +1,31 @@ +/** + * Video Iframe Styles + * + * Estilos para videos embebidos (YouTube, Vimeo, etc.) en post-content + * + * @package Apus_Theme + * @since 1.0.0 + */ + +/* ======================================== + VIDEO WRAPPER + ======================================== */ + +.video-wrapper { + position: relative; + margin: 2rem auto; + max-width: 850px; + border-radius: 12px; + overflow: hidden; + box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); + background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%); + padding: 8px; +} + +.video-wrapper iframe { + display: block; + width: 100%; + height: 478px; + border: none; + border-radius: 8px; +} diff --git a/wp-content/themes/apus-theme/inc/enqueue-scripts.php b/wp-content/themes/apus-theme/inc/enqueue-scripts.php index f5b630d3..8827b782 100644 --- a/wp-content/themes/apus-theme/inc/enqueue-scripts.php +++ b/wp-content/themes/apus-theme/inc/enqueue-scripts.php @@ -187,18 +187,61 @@ function apus_enqueue_header() { add_action('wp_enqueue_scripts', 'apus_enqueue_header', 10); /** - * Enqueue custom styles and main JavaScript + * Enqueue generic tables styles + * + * ARQUITECTURA: Estilos para tablas genéricas en post-content + * Solo en posts individuales */ -function apus_enqueue_custom_assets() { - // Custom Styles - navbar animations and theme components +function apus_enqueue_generic_tables() { + // Only enqueue on single posts + if (!is_single()) { + return; + } + + // Generic Tables CSS wp_enqueue_style( - 'apus-custom-style', - get_template_directory_uri() . '/assets/css/custom-style.css', + 'apus-generic-tables', + get_template_directory_uri() . '/assets/css/generic-tables.css', array('apus-bootstrap'), - '1.0.0', + APUS_VERSION, 'all' ); +} +add_action('wp_enqueue_scripts', 'apus_enqueue_generic_tables', 11); + +/** + * Enqueue video iframe styles + * + * ARQUITECTURA: Estilos para videos embebidos (YouTube, Vimeo) + * Solo en posts individuales + */ +function apus_enqueue_video_styles() { + // Only enqueue on single posts + if (!is_single()) { + return; + } + + // Video CSS + wp_enqueue_style( + 'apus-video', + get_template_directory_uri() . '/assets/css/video.css', + array('apus-bootstrap'), + APUS_VERSION, + 'all' + ); +} + +add_action('wp_enqueue_scripts', 'apus_enqueue_video_styles', 11); + +/** + * Enqueue main JavaScript + * + * ELIMINADO: custom-style.css (Issue #131) + * Motivo: Archivo contenía 95% código duplicado de style.css y otros componentes + * Código único movido a: generic-tables.css, video.css + */ +function apus_enqueue_main_javascript() { // Main JavaScript - navbar scroll effects and interactions wp_enqueue_script( 'apus-main-js', @@ -219,7 +262,7 @@ function apus_enqueue_custom_assets() { ); } -add_action('wp_enqueue_scripts', 'apus_enqueue_custom_assets', 11); +add_action('wp_enqueue_scripts', 'apus_enqueue_main_javascript', 11); /** * Remove defer from apus-main-js to make wp_localize_script work