css /* ========================================================= CUANTO CONSUME - FINAL VISUAL THEME Capa de diseño final sobre custom.css ========================================================= */ :root { --app-bg: #eef2f7; --app-bg-deep: #dfe6f0; --app-surface: #ffffff; --app-surface-soft: #f7f9fc; --app-surface-muted: #e9eef6; --app-border: #d7deea; --app-border-strong: #b8c3d4; --app-text: #111827; --app-text-soft: #2f3a4c; --app-muted: #687386; --app-muted-light: #97a1b2; --app-primary: #184ee8; --app-primary-dark: #1239a8; --app-primary-soft: #e8eeff; --app-accent: #ffb020; --app-accent-dark: #b86b00; --app-accent-soft: #fff4dc; --app-success: #10a46d; --app-success-dark: #05734b; --app-success-soft: #e7f8f1; --app-warning: #dd7a00; --app-warning-dark: #8f4c00; --app-warning-soft: #fff3da; --app-danger: #dc2626; --app-danger-soft: #fee2e2; --app-sidebar-width: 292px; --app-radius-xs: 8px; --app-radius-sm: 12px; --app-radius-md: 18px; --app-radius-lg: 26px; --app-shadow-xs: 0 1px 2px rgba(17, 24, 39, 0.05); --app-shadow-sm: 0 10px 24px rgba(17, 24, 39, 0.07); --app-shadow-md: 0 18px 44px rgba(17, 24, 39, 0.11); --app-shadow-lg: 0 32px 80px rgba(17, 24, 39, 0.17); } /* ========================= BASE ========================= */ html { scroll-padding-top: 100px; } body { color: var(--app-text); background: radial-gradient(circle at 14% 0%, rgba(24, 78, 232, 0.13), transparent 26rem), radial-gradient(circle at 92% 4%, rgba(255, 176, 32, 0.16), transparent 24rem), linear-gradient(180deg, #f7f9fc 0%, var(--app-bg) 42%, var(--app-bg-deep) 100%); font-family: "Manrope", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -0.012em; } a { color: var(--app-primary); } a:hover { color: var(--app-primary-dark); } /* ========================= SHELL / SIDEBAR ========================= */ .app-sidebar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 249, 253, 0.98) 100%); border-right: 1px solid rgba(184, 195, 212, 0.7); box-shadow: 10px 0 40px rgba(17, 24, 39, 0.05); } .app-sidebar-header { min-height: 86px; padding: 0 22px; border-bottom: 1px solid var(--app-border); } .app-brand { gap: 13px; font-size: 1.08rem; font-weight: 950; letter-spacing: -0.055em; } .app-brand-icon { width: 46px; height: 46px; border-radius: 16px; background: radial-gradient(circle at 28% 20%, rgba(255, 255, 255, 0.75), transparent 28%), linear-gradient(135deg, #184ee8 0%, #0f172a 72%); box-shadow: 0 18px 34px rgba(24, 78, 232, 0.30); } .app-brand small { margin-top: 2px; color: var(--app-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: -0.01em; } .app-sidebar-body { padding: 18px 14px 24px; } .app-menu-label { margin: 20px 12px 9px; color: #8b96aa; font-size: 0.68rem; font-weight: 950; letter-spacing: 0.12em; } .app-menu { gap: 5px; } .app-menu-link { min-height: 44px; padding: 10px 12px; border-radius: 14px; color: #344054; font-size: 0.92rem; font-weight: 820; } .app-menu-link:hover, .app-menu-link.is-active { color: var(--app-primary-dark); background: linear-gradient(135deg, #edf2ff 0%, #f8fbff 100%); box-shadow: inset 0 0 0 1px rgba(24, 78, 232, 0.09); } .app-menu-icon { width: 25px; opacity: 0.95; } .app-sidebar-card { margin: 22px 8px 4px; padding: 18px; border: 1px solid rgba(24, 78, 232, 0.16); border-radius: 22px; background: radial-gradient(circle at 90% 0%, rgba(255, 176, 32, 0.24), transparent 8rem), linear-gradient(145deg, #ffffff 0%, #ecf2ff 100%); box-shadow: var(--app-shadow-xs); } .app-sidebar-card-title { font-size: 0.98rem; font-weight: 950; } .app-sidebar-card-text { color: var(--app-text-soft); font-size: 0.84rem; line-height: 1.55; } /* ========================= TOPBAR / SEARCH ========================= */ .app-topbar { min-height: 82px; padding: 0 30px; background: rgba(238, 242, 247, 0.84); border-bottom: 1px solid rgba(215, 222, 234, 0.85); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .app-search { width: min(100%, 620px); } .app-search input { min-height: 50px; padding-left: 46px; border: 1px solid rgba(184, 195, 212, 0.78); border-radius: 18px; background: rgba(255, 255, 255, 0.96); color: var(--app-text); font-size: 0.95rem; font-weight: 760; box-shadow: 0 8px 22px rgba(17, 24, 39, 0.05); } .app-search input:focus { border-color: rgba(24, 78, 232, 0.45); box-shadow: 0 0 0 4px rgba(24, 78, 232, 0.11); } .app-search > span { color: var(--app-muted); } .app-icon-btn { width: 44px; height: 44px; border-radius: 15px; border-color: rgba(184, 195, 212, 0.75); background: #fff; } .app-btn-primary { min-height: 44px; border-radius: 14px; background: linear-gradient(135deg, var(--app-primary) 0%, #0f2f99 100%); color: #fff; box-shadow: 0 14px 28px rgba(24, 78, 232, 0.25); } .app-btn-primary:hover { background: linear-gradient(135deg, #1239a8 0%, #0b256f 100%); color: #fff; } .app-btn-light { min-height: 44px; border-radius: 14px; border-color: var(--app-border); background: #fff; color: var(--app-text); } .app-btn-light:hover { border-color: rgba(24, 78, 232, 0.32); background: #f9fbff; color: var(--app-primary-dark); } /* ========================= PAGE HEADER ========================= */ .app-content { padding: 30px; } .app-page-header { position: relative; overflow: hidden; margin-bottom: 26px; padding: 30px; border: 1px solid rgba(215, 222, 234, 0.85); border-radius: 28px; background: radial-gradient(circle at right top, rgba(255, 176, 32, 0.18), transparent 16rem), linear-gradient(135deg, rgba(255, 255, 255, 0.96) 0%, rgba(246, 249, 253, 0.96) 100%); box-shadow: var(--app-shadow-sm); } .app-page-header::after { content: ""; position: absolute; right: -70px; bottom: -100px; width: 250px; height: 250px; border-radius: 999px; background: rgba(24, 78, 232, 0.06); pointer-events: none; } .app-page-kicker { position: relative; z-index: 2; margin-bottom: 13px; padding: 7px 12px; border-radius: 999px; background: var(--app-primary-soft); color: var(--app-primary-dark); font-size: 0.78rem; font-weight: 950; } .app-page-title { position: relative; z-index: 2; max-width: 980px; margin-bottom: 12px; font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1.02; font-weight: 950; letter-spacing: -0.07em; } .app-page-lead { position: relative; z-index: 2; max-width: 900px; color: var(--app-text-soft); font-size: 1.08rem; line-height: 1.75; } /* ========================= CARDS ========================= */ .app-card { border: 1px solid rgba(215, 222, 234, 0.92); border-radius: 20px; background: rgba(255, 255, 255, 0.98); box-shadow: var(--app-shadow-xs); } .app-card-lg { border-radius: 26px; box-shadow: var(--app-shadow-sm); } .app-card-header { padding: 22px 24px; border-bottom: 1px solid var(--app-border); background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(247, 249, 252, 0.85) 100%); border-top-left-radius: inherit; border-top-right-radius: inherit; } .app-card-body { padding: 24px; } .app-card-title { color: var(--app-text); font-size: 1.12rem; font-weight: 950; letter-spacing: -0.045em; } .app-card-subtitle { color: var(--app-muted); font-size: 0.92rem; line-height: 1.55; } /* ========================= CALCULATOR ========================= */ .js-calculator { border-color: rgba(24, 78, 232, 0.16); } .js-calculator .app-card-header { background: radial-gradient(circle at right top, rgba(24, 78, 232, 0.10), transparent 11rem), linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%); } .calc-field label { color: var(--app-text); font-size: 0.82rem; font-weight: 900; } .calc-field .form-control, .calc-field .input-group-text { min-height: 50px; border-color: rgba(184, 195, 212, 0.9); } .calc-field .form-control { border-radius: 15px; background: #fff; font-weight: 880; } .calc-field .input-group-text { border-top-right-radius: 15px; border-bottom-right-radius: 15px; background: var(--app-surface-soft); } .calc-help { color: var(--app-muted); font-size: 0.78rem; line-height: 1.5; } .calc-result { padding: 18px; border-radius: 18px; background: radial-gradient(circle at right top, rgba(24, 78, 232, 0.06), transparent 8rem), #f8fbff; } .calc-result::after { height: 4px; background: linear-gradient(90deg, var(--app-primary), var(--app-accent)); } .calc-result-label { color: var(--app-muted); font-size: 0.72rem; font-weight: 950; } .calc-result-value { margin-top: 6px; font-size: 1.42rem; font-weight: 950; } .calc-advanced-toggle { min-height: 52px; border-radius: 16px; background: #fff; font-weight: 900; } .calc-advanced-toggle strong { background: var(--app-primary-soft); } /* ========================= HOME ========================= */ .home-main-card { border-color: rgba(24, 78, 232, 0.16); background: radial-gradient(circle at 82% 8%, rgba(255, 176, 32, 0.20), transparent 15rem), radial-gradient(circle at 98% 100%, rgba(24, 78, 232, 0.10), transparent 16rem), linear-gradient(135deg, #ffffff 0%, #f3f7ff 100%); } .home-title { font-size: clamp(2rem, 3.6vw, 3.55rem); letter-spacing: -0.075em; } .home-text { color: var(--app-text-soft); font-size: 1.07rem; line-height: 1.72; } .home-mini-label { background: var(--app-accent-soft); color: var(--app-accent-dark); font-weight: 950; } .home-price-card { border-color: rgba(16, 164, 109, 0.22); } .price-display { color: var(--app-success-dark); font-size: 2.55rem; } .popular-chip { min-height: 42px; padding: 0 15px; border-color: rgba(184, 195, 212, 0.9); background: #fff; color: var(--app-text-soft); font-size: 0.89rem; font-weight: 850; } .popular-chip:hover { transform: translateY(-1px); border-color: rgba(24, 78, 232, 0.28); background: var(--app-primary-soft); } /* ========================= TOOL CARDS / CATEGORIES ========================= */ .tool-card { padding: 20px; border-radius: 22px; border-color: rgba(215, 222, 234, 0.92); background: linear-gradient(180deg, #ffffff 0%, #f9fbff 100%); } .tool-card:hover { transform: translateY(-4px); border-color: rgba(24, 78, 232, 0.26); box-shadow: var(--app-shadow-sm); } .tool-card-icon { width: 46px; height: 46px; border-radius: 16px; background: var(--app-primary-soft); color: var(--app-primary-dark); } .tool-card h3 { color: var(--app-text); font-size: 1.05rem; font-weight: 950; } .tool-card p { color: var(--app-muted); font-size: 0.9rem; line-height: 1.55; } /* ========================= APPLIANCE CONTENT ========================= */ .app-answer { border-color: rgba(16, 164, 109, 0.30); background: radial-gradient(circle at right top, rgba(16, 164, 109, 0.10), transparent 10rem), var(--app-success-soft); } .app-answer p { color: #065f46; line-height: 1.7; } .compact-metric { padding: 14px 0; } .compact-metric span { color: var(--app-muted); font-weight: 820; } .compact-metric strong { color: var(--app-text); font-weight: 950; } /* ========================= TABLES ========================= */ .app-table-wrap { border-radius: 20px; } .app-table thead th { background: var(--app-surface-soft); color: var(--app-muted); font-weight: 950; } .app-table td { color: var(--app-text-soft); } .app-price { color: var(--app-primary-dark); } /* ========================= COMPARISON ========================= */ .compare-card { border-radius: 22px; padding: 22px; } .compare-card-primary { border-color: rgba(24, 78, 232, 0.25); background: radial-gradient(circle at top right, rgba(24, 78, 232, 0.12), transparent 10rem), #ffffff; } .compare-label { background: var(--app-accent-soft); color: var(--app-accent-dark); font-weight: 950; } .compare-vs { width: 52px; height: 52px; background: linear-gradient(135deg, var(--app-primary) 0%, #0f172a 100%); color: #fff; box-shadow: 0 16px 30px rgba(24, 78, 232, 0.22); } /* ========================= LIVE COMPARISON CHART ========================= */ .live-chart-card { border-radius: 24px !important; background: #fff !important; box-shadow: var(--app-shadow-xs); } .live-chart-header { background: radial-gradient(circle at right top, rgba(255, 176, 32, 0.16), transparent 10rem), linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important; } .live-chart-header h2 { font-size: 1.12rem !important; font-weight: 950 !important; } .live-bar-wrap { height: 18px !important; background: #e4eaf3 !important; } .live-bar-use { background: linear-gradient(90deg, var(--app-primary), #6d28d9) !important; } .live-bar-month { background: linear-gradient(90deg, var(--app-success), #0891b2) !important; } .live-result-box { border-radius: 18px; font-weight: 900; } /* ========================= EDITORIAL ARTICLE ========================= */ .article-layout { max-width: 1200px; } .article-hero { padding: 42px; border-radius: 30px; background: radial-gradient(circle at 90% 0%, rgba(255, 176, 32, 0.20), transparent 15rem), radial-gradient(circle at 100% 100%, rgba(24, 78, 232, 0.10), transparent 18rem), #ffffff; box-shadow: var(--app-shadow-sm); } .article-label { background: var(--app-accent-soft); color: var(--app-accent-dark); font-weight: 950; } .article-title { font-size: clamp(2.2rem, 4.4vw, 3.85rem); letter-spacing: -0.075em; } .article-intro { color: var(--app-text-soft); font-size: 1.15rem; line-height: 1.82; } .article-section { padding: 38px; border-radius: 28px; background: #fff; box-shadow: var(--app-shadow-xs); } .article-section h2 { font-size: clamp(1.55rem, 2.4vw, 2.15rem); letter-spacing: -0.055em; } .article-section-lead { color: var(--app-primary-dark); font-weight: 850; } .article-section p { color: var(--app-text-soft); font-size: 1.02rem; line-height: 1.88; } .article-example { border-left-color: var(--app-primary); border-radius: 18px; background: radial-gradient(circle at right top, rgba(24, 78, 232, 0.06), transparent 10rem), var(--app-surface-soft); } .article-note { border-color: #ffd18a; background: var(--app-accent-soft); color: #804600; } .article-side-card { border-radius: 24px; box-shadow: var(--app-shadow-xs); } .article-index-link, .article-tool-link { font-weight: 850; } /* ========================= COOKIE BANNER ========================= */ .cookie-banner-content { border-radius: 24px; border-color: rgba(184, 195, 212, 0.82); box-shadow: 0 28px 80px rgba(17, 24, 39, 0.22); } .cookie-btn { border-radius: 14px; } .cookie-btn-primary { background: linear-gradient(135deg, var(--app-primary), #0f2f99); } /* ========================= FOOTER ========================= */ .app-footer { color: var(--app-muted); } .footer-legal-links a { color: var(--app-muted); } .footer-legal-links a:hover { color: var(--app-primary-dark); } /* ========================= RESPONSIVE ========================= */ @media (max-width: 1199px) { .app-content { padding: 24px; } .app-page-header { padding: 26px; } } @media (max-width: 991px) { .app-topbar { padding: 0 18px; } .app-content { padding: 20px; } .app-page-header, .article-hero, .article-section { border-radius: 24px; } } @media (max-width: 575px) { .app-content { padding: 14px; } .app-page-header { padding: 22px; border-radius: 22px; } .app-page-title, .article-title, .home-title { letter-spacing: -0.055em; } .app-card-body, .app-card-header { padding: 18px; } .article-hero, .article-section { padding: 22px; border-radius: 22px; } } ``` --- ## Paso 2 — Carga este CSS después del actual Archivo: ```text C:\xampp\htdocs\consumoweb\includes\header.php ``` Busca donde tienes el CSS: ```php <link href="<?= esc(asset_url('assets/css/custom.css')) ?>?v=20" rel="stylesheet"> ``` o algo parecido. Déjalo así: ```php <link href="<?= esc(asset_url('assets/css/custom.css')) ?>?v=21" rel="stylesheet"> <link href="<?= esc(asset_url('assets/css/theme-final.css')) ?>?v=1" rel="stylesheet">