/* BolsaHoy shared public navigation. Loaded after page-local CSS on main pages. */ .app-header.bh-float-nav { position: fixed; top: var(--bh-header-expanded-top, var(--bh-header-top, 42px)); left: 0; right: 0; z-index: 40; width: min(var(--bh-nav-max, 1180px), calc(100% - var(--bh-nav-gutter, 24px))); margin: var(--bh-header-margin-top, 10px) auto 0; padding: 0 !important; min-height: 0 !important; display: block; border-radius: 999px; background: rgba(var(--bh-header-rgb, 255, 255, 255), .72); border: 1px solid var(--line, rgba(10, 20, 40, .1)); backdrop-filter: blur(20px) saturate(165%); -webkit-backdrop-filter: blur(20px) saturate(165%); box-shadow: 0 16px 34px rgba(10, 20, 40, .12); font-family: var(--bh-font-sans, Inter, ui-sans-serif, system-ui, sans-serif); backface-visibility: hidden; transform: translate3d(0, var(--bh-header-y, 0px), 0); will-change: transform; transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; } body:has(> .market-strip) { --bh-header-top: 62px; --bh-header-expanded-top: 62px; --bh-header-y: 0px; --bh-header-margin-top: 0px; } [data-theme="dark"] .app-header.bh-float-nav { background: rgba(var(--bh-header-rgb, 9, 13, 20), .72); border-color: rgba(255, 255, 255, .12); box-shadow: 0 18px 42px rgba(0, 0, 0, .32); } .header-row { min-height: 58px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 5px 16px 5px 18px; } .brand { min-width: 150px; margin-right: 0; display: inline-flex; align-items: center; justify-content: flex-start; text-decoration: none; flex: 0 0 auto; } .brand > img { width: 128px; max-width: 128px; height: auto !important; display: block; object-fit: contain; } .nav { display: flex; align-items: center; justify-content: space-evenly; gap: 2px; min-width: 0; overflow: visible; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav a, .nav-drop > a { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 8px; border-radius: 999px; color: var(--ink-2, var(--bh-ink-muted, #6b7890)); text-decoration: none; font-size: 13px; font-weight: 850; opacity: .9; white-space: nowrap; transition: color 150ms ease, background 150ms ease, opacity 150ms ease; } .nav a::after, .nav-drop > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px; border-radius: 2px; background: var(--blue, var(--bh-blue, #1f80ff)); transform: scaleX(0); transform-origin: center; transition: transform 150ms ease; } .nav a:hover, .nav a.active, .nav-drop:hover > a, .nav-drop:focus-within > a, .nav-drop.is-open > a { color: var(--blue, var(--bh-blue, #1f80ff)); background: rgba(31, 128, 255, .1); opacity: 1; } .nav a:hover::after, .nav a.active::after, .nav-drop:hover > a::after, .nav-drop:focus-within > a::after, .nav-drop.is-open > a::after { transform: scaleX(1); } .nav-drop { position: relative; display: flex; align-items: center; flex: 0 0 auto; } /* El panel se reubica en (ver site-header.js) y se muestra/oculta con display (a prueba de fallos: sin transiciones de opacity/visibility que, tras reubicar el nodo, dejaban el panel invisible aunque estuviera bien colocado). Necesita z-index alto propio para quedar por encima de cabecera y contenido. */ .nav-drop-panel { position: fixed; top: 0; left: 0; z-index: 1200; min-width: 250px; padding: 10px; border-radius: 14px; border: 1px solid var(--line, rgba(10, 20, 40, .1)); background: rgba(var(--bh-header-rgb, 255, 255, 255), .98); box-shadow: 0 18px 44px rgba(8, 9, 11, .28); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); grid-template-columns: repeat(2, 1fr); gap: 2px; display: none; animation: bhDropIn 150ms ease; } [data-theme="dark"] .nav-drop-panel { background: rgba(var(--bh-header-rgb, 9, 13, 20), .98); border-color: rgba(255, 255, 255, .12); } .nav-drop:hover .nav-drop-panel, .nav-drop:focus-within .nav-drop-panel, .nav-drop.is-open .nav-drop-panel, .nav-drop-panel.is-open { display: grid; } @keyframes bhDropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .nav-drop-panel a { position: static; min-height: 0; display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink-2, var(--bh-ink-muted, #6b7890)); font-size: 13px; font-weight: 800; white-space: nowrap; opacity: 1; } .nav-drop-panel a::after { display: none; } .nav-drop-panel a:hover { color: var(--blue, var(--bh-blue, #1f80ff)); background: rgba(31, 128, 255, .1); } .actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .account-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 118px; min-height: 40px; padding: 0 14px 0 8px; border-radius: 999px; justify-content: center; border: 1px solid rgba(255, 255, 255, .4); background: rgba(31, 128, 255, .32); color: #fff; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); } .account-btn:hover { background: rgba(31, 128, 255, .46); } .account-btn > span:last-child { min-width: 0; max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Shared notification center: same component on every page and in both themes. */ .bh-notification-trigger { position: relative; width: 44px; height: 44px; flex: 0 0 44px; display: inline-grid; place-items: center; padding: 0; border: 1px solid rgba(31, 128, 255, .24); border-radius: 50%; background: rgba(31, 128, 255, .08); color: var(--blue, #1f80ff); cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease; } .bh-notification-trigger:hover, .bh-notification-trigger[aria-expanded="true"] { transform: translateY(-1px); border-color: rgba(31, 128, 255, .52); background: rgba(31, 128, 255, .16); } .bh-notification-trigger .bh-icon { width: 18px; height: 18px; } .bh-notification-trigger-label { display: none; } .bh-notification-count { position: absolute; top: 6px; right: 6px; width: 7px; min-width: 7px; height: 7px; display: grid; place-items: center; padding: 0; border: 1.5px solid var(--bh-header, #fff); border-radius: 999px; background: #ef4444; color: #fff; box-shadow: 0 0 0 2px rgba(239,68,68,.12), 0 2px 7px rgba(239,68,68,.45); font-size: 0; line-height: 1; } .bh-notification-count[hidden] { display: none !important; } [data-theme="dark"] .bh-notification-count { border-color: #09101c; } .bh-notifications-panel { position: fixed; z-index: 1300; width: 390px; max-width: calc(100vw - 24px); max-height: min(620px, calc(100dvh - 94px)); overflow: hidden; border: 1px solid rgba(31, 128, 255, .18); border-radius: 20px; background: rgba(255, 255, 255, .96); color: var(--bh-ink, #101522); box-shadow: 0 26px 70px rgba(8, 22, 48, .25); backdrop-filter: blur(22px) saturate(155%); -webkit-backdrop-filter: blur(22px) saturate(155%); overflow-anchor: none; contain: layout paint; animation: bhNotificationIn .16s ease; } [data-theme="dark"] .bh-notifications-panel { border-color: rgba(124, 190, 255, .18); background: rgba(8, 18, 34, .97); color: #f3f7ff; box-shadow: 0 26px 70px rgba(0, 0, 0, .45); } .bh-notifications-panel[hidden] { display: none !important; } @keyframes bhNotificationIn { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .bh-notifications-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 17px 13px; border-bottom: 1px solid rgba(31, 128, 255, .12); } .bh-notifications-kicker { display: block; color: var(--blue, #1f80ff); font-size: 12px; font-weight: 950; letter-spacing: .1em; } .bh-notifications-head h2 { margin: 3px 0 0; font-size: 19px; letter-spacing: -.03em; } .bh-notifications-head-actions { display: inline-flex; align-items: center; gap: 6px; } .bh-notifications-read-all { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 0; background: transparent; color: var(--blue, #1f80ff); font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; } .bh-notifications-read-all:hover { text-decoration: underline; } .bh-notifications-close { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid color-mix(in srgb, var(--blue, #1f80ff) 25%, transparent); border-radius: 11px; background: color-mix(in srgb, var(--blue, #1f80ff) 8%, transparent); color: var(--bh-ink, #101522); cursor: pointer; transition: transform .15s ease, background .15s ease, border-color .15s ease; } .bh-notifications-close:hover, .bh-notifications-close:focus-visible { transform: translateY(-1px); border-color: var(--blue, #1f80ff); background: color-mix(in srgb, var(--blue, #1f80ff) 16%, transparent); outline: none; } .bh-notifications-close .bh-icon { width: 16px; height: 16px; } [data-theme="dark"] .bh-notifications-close { color: #f4f8ff; } .bh-notifications-list { max-height: 470px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .bh-notification-item { display: grid; grid-template-columns: 38px minmax(0, 1fr) 22px; align-items: center; gap: 10px; min-width: 0; padding: 12px 15px; color: inherit; text-decoration: none; border-bottom: 1px solid rgba(31, 128, 255, .08); transition: background .15s ease; } .bh-notification-item:hover { background: rgba(31, 128, 255, .08); } .bh-notification-item.is-unread { background: linear-gradient(90deg, rgba(92, 104, 255, .13), rgba(31, 128, 255, .055) 62%, transparent); box-shadow: inset 3px 0 #6375ff; } .bh-notification-item.is-like.is-unread { background: linear-gradient(90deg, rgba(232, 93, 141, .15), rgba(147, 90, 255, .07) 62%, transparent); box-shadow: inset 3px 0 #e85d8d; } .bh-notification-item.is-achievement.is-unread { background: linear-gradient(90deg, rgba(245, 180, 64, .16), rgba(147, 90, 255, .08) 62%, transparent); box-shadow: inset 3px 0 #d69a2d; } .bh-notification-item.is-unread:hover { background: linear-gradient(90deg, rgba(92, 104, 255, .2), rgba(31, 128, 255, .1) 68%, transparent); } .bh-notification-item.is-like.is-unread:hover { background: linear-gradient(90deg, rgba(232, 93, 141, .22), rgba(147, 90, 255, .11) 68%, transparent); } .bh-notification-item.is-achievement.is-unread:hover { background: linear-gradient(90deg, rgba(245, 180, 64, .22), rgba(147, 90, 255, .11) 68%, transparent); } .bh-notification-item.is-unread .bh-notification-copy strong { color: color-mix(in srgb, var(--bh-ink, #101522) 88%, #596cff); } [data-theme="dark"] .bh-notification-item.is-unread .bh-notification-copy strong { color: #f7f8ff; } .bh-notification-avatar { width: 36px; height: 36px; display: grid; place-items: center; overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #1f80ff, #0d54c8); color: #fff; font-size: 11px; font-weight: 950; } .bh-notification-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; } .bh-notification-copy { display: grid; min-width: 0; gap: 3px; } .bh-notification-copy strong, .bh-notification-copy span, .bh-notification-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bh-notification-copy strong { font-size: 12px; line-height: 1.25; } .bh-notification-copy span { color: var(--bh-ink-muted, #6b7890); font-size: 12px; line-height: 1.25; } .bh-notification-copy small { color: var(--bh-ink-muted, #6b7890); font-size: 12px; font-weight: 700; } .bh-notification-kind { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 8px; color: #fff; background: #1f80ff; font-size: 12px; font-weight: 950; } .bh-notification-kind.is-like { background: #e85d8d; } .bh-notification-kind.is-achievement { background: linear-gradient(135deg, #d69a2d, #9a68ea); } .bh-notifications-empty { display: grid; justify-items: center; gap: 7px; padding: 34px 24px 38px; text-align: center; } .bh-notifications-empty-icon { width: 42px; height: 42px; display: grid; place-items: center; margin-bottom: 3px; border-radius: 14px; background: rgba(31, 128, 255, .12); color: var(--blue, #1f80ff); } .bh-notifications-empty-icon .bh-icon { width: 20px; height: 20px; } .bh-notifications-empty strong { font-size: 14px; } .bh-notifications-empty > span:last-of-type { max-width: 260px; color: var(--bh-ink-muted, #6b7890); font-size: 12px; line-height: 1.45; } .bh-notifications-empty a { min-height: 44px; display: inline-flex; align-items: center; margin-top: 3px; color: var(--blue, #1f80ff); font-size: 12px; font-weight: 850; text-decoration: none; } .bh-notifications-footer { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-top: 1px solid rgba(31, 128, 255, .12); color: var(--blue, #1f80ff); font-size: 12px; font-weight: 850; text-decoration: none; } .bh-notifications-footer:hover { background: rgba(31, 128, 255, .06); } .bh-notifications-inline-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 0 10px; color: var(--bh-ink-muted, #6b7890); font-size: 12px; font-weight: 750; } .bh-notifications-inline-toolbar .bh-notifications-read-all { font-size: 12px; } .bh-notifications-filters { display: flex; flex-wrap: wrap; gap: 7px; padding: 0 0 12px; } .bh-notifications-filters button { min-height: 32px; padding: 0 11px; border: 1px solid var(--bh-line, rgba(31,128,255,.16)); border-radius: 999px; background: color-mix(in srgb, var(--bh-panel-2, #fff) 72%, transparent); color: var(--bh-ink-muted, #6b7890); font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } .bh-notifications-filters button:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--blue, #1f80ff) 45%, var(--bh-line, transparent)); color: var(--blue, #1f80ff); } .bh-notifications-filters button.is-active { border-color: color-mix(in srgb, var(--blue, #1f80ff) 55%, transparent); background: color-mix(in srgb, var(--blue, #1f80ff) 14%, var(--bh-panel-2, #fff)); color: var(--blue, #1f80ff); } .bh-notifications-inline .bh-notifications-list { max-height: 330px; overflow-y: auto; border-top: 1px solid rgba(31, 128, 255, .1); } .bh-notifications-inline .bh-notification-item { padding-inline: 0; } .bh-notifications-inline .bh-notification-item:first-child { border-top: 0; } .bh-mobile-notification-trigger { display: none; } .account-btn.signed { color: var(--white, #fff); border-color: rgba(31, 128, 255, .8); background: linear-gradient(135deg, var(--blue, #1f80ff), #051a36); } .account-avatar { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--blue, #1f80ff), var(--ink, #08090b)); color: var(--white, #fff); font-size: 12px; font-weight: 950; overflow: hidden; flex-shrink: 0; } .account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .mobile-nav-account span:first-child img, .mob-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .nav-bolsabot { background: rgba(31, 128, 255, .15) !important; border: 1px solid rgba(31, 128, 255, .3) !important; border-radius: 999px !important; padding: 4px 9px !important; color: var(--blue, #1f80ff) !important; font-weight: 700 !important; transition: all .18s ease !important; } .nav-bolsabot:hover { background: rgba(31, 128, 255, .3) !important; } .hamburger-btn { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 40px; height: 40px; border-radius: 999px; background: rgba(var(--fg-rgb, 10, 20, 40), .08); border: 1px solid rgba(var(--fg-rgb, 10, 20, 40), .12); color: var(--ink, var(--bh-ink, #101522)); cursor: pointer; padding: 10px; } .hamburger-btn span { display: block; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transition: transform 180ms ease, opacity 180ms ease; } .hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger-btn.open span:nth-child(2) { opacity: 0; } .hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-nav-overlay, .mob-overlay { display: none; position: fixed; inset: 0; z-index: 998; background: rgba(0, 0, 0, .58); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .mobile-nav-overlay.open, .mob-overlay.open { display: block; animation: bhHeaderFade .18s ease; } @keyframes bhHeaderFade { from { opacity: 0; } to { opacity: 1; } } .mobile-nav, .mob-nav { position: fixed; top: 0; right: -100%; bottom: 0; z-index: 999; width: min(248px, 74vw); background: linear-gradient(180deg, #071225 0%, #050912 100%); border-left: 1px solid rgba(137, 213, 255, .16); display: flex; flex-direction: column; box-shadow: -18px 0 48px rgba(0, 0, 0, .45); transition: right .24s ease; } .mobile-nav, .mob-nav, .bh-notifications-panel { font-family: var(--bh-font-sans, Inter, ui-sans-serif, system-ui, sans-serif); } [data-theme="light"] .mobile-nav, [data-theme="light"] .mob-nav { background: linear-gradient(180deg, #ffffff 0%, #eef6ff 100%); border-left-color: rgba(31, 128, 255, .18); box-shadow: -18px 0 48px rgba(10, 30, 70, .16); } .mobile-nav.open, .mob-nav.open { right: 0; } .mobile-nav-header, .mob-nav-top { display: flex; align-items: center; justify-content: space-between; padding: 14px 14px 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); } [data-theme="light"] .mobile-nav-header, [data-theme="light"] .mob-nav-top { border-bottom-color: rgba(31, 128, 255, .12); } .mobile-nav-logo { display: block; width: auto; max-width: 128px; height: 20px; object-fit: contain; } .mobile-nav-close, .mob-nav-close { width: 44px; height: 44px; border-radius: 9px; background: rgba(255, 255, 255, .08); border: 0; color: rgba(255, 255, 255, .72); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } [data-theme="light"] .mobile-nav-close, [data-theme="light"] .mob-nav-close { background: rgba(31, 128, 255, .09); border: 1px solid rgba(31, 128, 255, .16); color: #0d356f; } .mobile-nav-links, .mob-nav-links { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; } .mobile-nav-link, .mob-link { min-height: 44px; display: flex; align-items: center; gap: 10px; padding: 9px 11px; border-radius: 10px; color: rgba(255, 255, 255, .76); font-size: 14px; font-weight: 750; text-decoration: none; line-height: 1.15; transition: background 150ms ease, color 150ms ease; } [data-theme="light"] .mobile-nav-link, [data-theme="light"] .mob-link { color: #31435f; } .mobile-nav-link:hover, .mob-link:hover { background: rgba(255, 255, 255, .08); color: #fff; } [data-theme="light"] .mobile-nav-link:hover, [data-theme="light"] .mob-link:hover, [data-theme="light"] .mobile-nav-link.active, [data-theme="light"] .mob-link.active { background: rgba(31, 128, 255, .10); color: var(--blue, var(--bh-blue, #1f80ff)); } .mobile-nav-bolsabot { background: rgba(31, 128, 255, .13); border: 1px solid rgba(31, 128, 255, .26); color: #4fa0ff !important; margin-top: 6px; } [data-theme="light"] .mobile-nav-bolsabot { background: rgba(31, 128, 255, .11); border-color: rgba(31, 128, 255, .24); color: var(--blue, var(--bh-blue, #1f80ff)) !important; } .mobile-nav-footer, .mob-nav-bottom { padding: 10px; border-top: 1px solid rgba(255, 255, 255, .08); } [data-theme="light"] .mobile-nav-footer, [data-theme="light"] .mob-nav-bottom { border-top-color: rgba(31, 128, 255, .12); } .mobile-nav-account, .mob-account-btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 11px; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .82); font-size: 14px; font-weight: 800; cursor: pointer; text-align: left; } [data-theme="light"] .mobile-nav-account, [data-theme="light"] .mob-account-btn { background: rgba(31, 128, 255, .07); border-color: rgba(31, 128, 255, .15); color: #193557; } .mobile-nav-account + .mobile-nav-account, .mob-account-btn + .mob-account-btn { margin-top: 8px; } .mobile-nav-account span:first-child, .mob-avatar { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--blue, #1f80ff), var(--blue-2, #0d54c8)); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 900; color: #fff; flex-shrink: 0; overflow: hidden; } @media (max-width: 1080px) { .hamburger-btn { display: flex !important; } .nav, #navBolsaBot { display: none !important; } .account-btn > span:last-child { display: none; } .app-header.bh-float-nav { width: min(100% - 18px, var(--bh-nav-max, 1180px)); top: var(--bh-header-expanded-top, var(--bh-header-top, 30px)); border-radius: 999px; } body:has(> .market-strip) { --bh-header-top: 48px; --bh-header-expanded-top: 48px; } .header-row { width: 100%; min-height: 46px; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; padding: 4px 8px 4px 12px; } .brand { min-width: 0; margin-right: 0; } .brand > img { width: 116px; max-width: 116px; } .actions { margin-left: auto; gap: 6px; } .bh-theme-toggle { width: 36px !important; height: 36px !important; min-height: 36px !important; } .account-btn { min-width: 36px; width: 36px; height: 36px; min-height: 36px; padding: 0; justify-content: center; } .account-avatar { width: 26px; height: 26px; } .hamburger-btn { width: 36px; height: 36px; padding: 9px; } } @media (max-width: 390px) { .brand > img { width: 106px; max-width: 106px; } .mobile-nav, .mob-nav { width: min(232px, 72vw); } } /* Keep the same navigation component readable at phone widths. */ @media (max-width: 768px) { .app-header.bh-float-nav { width: min(calc(100% - 24px), var(--bh-nav-max, 1180px)); max-width: calc(100% - 24px); } .header-row { min-width: 0; } .actions, .brand, .brand > img { min-width: 0; } .mobile-nav, .mob-nav, .bh-mobnav { max-width: 86vw; } .bh-notification-trigger { display: inline-grid; width: 44px; height: 44px; min-width: 44px; flex-basis: 44px; } .bh-mobile-notification-trigger { display: none !important; } .bh-notifications-panel { width: auto !important; max-width: none; max-height: calc(100dvh - 94px); border-radius: 18px; } .bh-notifications-list { max-height: calc(100dvh - 220px); } .bh-notifications-head { padding: 14px 14px 12px; } .bh-notifications-head h2 { font-size: 17px; } .bh-notification-item { grid-template-columns: 34px minmax(0, 1fr) 20px; gap: 9px; padding: 11px 12px; } .bh-notification-avatar { width: 32px; height: 32px; border-radius: 10px; } } .skip-link { position: fixed; z-index: 2147483647; top: 12px; left: 12px; transform: translateY(-180%); padding: 11px 16px; border-radius: 10px; background: #fff; color: #07162d; font-size: 14px; font-weight: 900; line-height: 1.2; text-decoration: none; box-shadow: 0 8px 30px rgba(0, 0, 0, .35); } .skip-link:focus, .skip-link:focus-visible { transform: translateY(0); outline: 3px solid var(--bh-blue, #1f80ff); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .app-header.bh-float-nav { transition: none; } } @media (min-width: 380px) and (max-width: 420px) { .app-header.bh-float-nav { width: 356px !important; max-width: 356px !important; } } /* ======================================================================== BolsaHoy UI contract — canonical public header and type scale This block intentionally lives at the end of the shared stylesheet. Page styles may customise their content, but they must never be able to change the public header, its controls, the dropdown or the mobile drawer. ======================================================================== */ :root { --bh-header-font-size: 13px; --bh-header-font-weight: 800; --bh-header-control-size: 40px; --bh-header-account-width: 118px; --bh-mobile-link-size: 14px; --bh-mobile-link-weight: 750; --bh-body-size: 15px; --bh-body-line: 1.55; } /* Reserva estable para la barra de desplazamiento: evita que una página corta (por ejemplo 404) centre el header distinto a una página larga. */ html { overflow-y: scroll !important; } body, button, input, select, textarea { font-family: var(--bh-font-sans) !important; } body { font-size: var(--bh-body-size) !important; line-height: var(--bh-body-line); } /* Las páginas sin ticker deben ocupar exactamente la misma banda visual que las páginas con ticker; el ticker solo cambia el espacio reservado arriba. */ body:not(:has(> .market-strip)) .app-header.bh-float-nav { top: 55px !important; margin-top: 0 !important; } body :where(h1, h2, h3, h4, h5, h6) { font-family: var(--bh-font-sans) !important; } body main h1, body .page > h1, body .hero-inner h1, body .hero-identity h1, body .topline h1 { font-family: var(--bh-font-sans) !important; font-size: var(--bh-title-size) !important; line-height: var(--bh-title-line) !important; font-weight: var(--bh-title-weight) !important; letter-spacing: var(--bh-title-tracking) !important; } body :where( .section-head h2, .lab-section-head h2, .an-reports h2, .feats-left h2, .plans-page .section-head h2 ) { font-family: var(--bh-font-sans) !important; font-size: var(--bh-section-size) !important; line-height: var(--bh-section-line) !important; font-weight: var(--bh-section-weight) !important; letter-spacing: -.02em !important; } body :where( .post-card h3, .lab-card-title h3, .mkt-hero-news-head h3, .market-panel h3, .comm-card h3, .dashboard-card-title, .chart-head h2, .card h3 ) { font-family: var(--bh-font-sans) !important; font-size: 16px !important; line-height: 1.25 !important; font-weight: 700 !important; letter-spacing: 0 !important; } .app-header.bh-float-nav, .app-header.bh-float-nav :where(a, button, span) { font-family: var(--bh-font-sans) !important; } .app-header.bh-float-nav .header-row { min-height: 58px !important; padding: 5px 16px 5px 18px !important; gap: 10px !important; } .app-header.bh-float-nav .brand { min-width: 150px !important; width: 150px !important; margin: 0 !important; } .app-header.bh-float-nav .brand > img { width: 128px !important; max-width: 128px !important; height: auto !important; } .app-header.bh-float-nav .nav { gap: 2px !important; } .app-header.bh-float-nav .nav a, .app-header.bh-float-nav .nav-drop > a { min-height: 38px !important; padding: 0 8px !important; font-size: var(--bh-header-font-size) !important; font-weight: var(--bh-header-font-weight) !important; line-height: 1 !important; } .app-header.bh-float-nav .nav a .bh-icon, .app-header.bh-float-nav .actions .bh-icon, .mobile-nav .bh-icon, .mob-nav .bh-icon { width: 16px !important; height: 16px !important; flex: 0 0 16px !important; } .app-header.bh-float-nav .nav-bolsabot { min-height: 38px !important; padding: 0 10px !important; font-weight: var(--bh-header-font-weight) !important; } .app-header.bh-float-nav .actions { gap: 8px !important; } .app-header.bh-float-nav .bh-theme-toggle { width: 38px !important; min-width: 38px !important; height: 38px !important; min-height: 38px !important; padding: 0 !important; border-radius: 50% !important; } .app-header.bh-float-nav .account-btn, .app-header.bh-float-nav .btn.account-btn { display: inline-flex !important; width: var(--bh-header-account-width) !important; min-width: var(--bh-header-account-width) !important; height: var(--bh-header-control-size) !important; min-height: var(--bh-header-control-size) !important; padding: 0 10px 0 8px !important; margin: 0 !important; border-radius: 999px !important; font-size: var(--bh-header-font-size) !important; font-weight: var(--bh-header-font-weight) !important; line-height: 1 !important; } .app-header.bh-float-nav .account-avatar { width: 28px !important; height: 28px !important; font-size: 11px !important; font-weight: 900 !important; } .nav-drop-panel { min-width: 280px !important; padding: 10px !important; border-radius: 14px !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 2px !important; } .nav-drop-panel a { min-height: 36px !important; padding: 9px 10px !important; font-size: 13px !important; font-weight: 750 !important; line-height: 1.15 !important; } .mobile-nav, .mob-nav { width: min(248px, 86vw) !important; max-width: 248px !important; } .mobile-nav-header, .mob-nav-top { min-height: 68px !important; padding: 14px 14px 10px !important; } .mobile-nav-logo { width: auto !important; max-width: 128px !important; height: 20px !important; } .mobile-nav-close, .mob-nav-close { width: 40px !important; min-width: 40px !important; height: 40px !important; min-height: 40px !important; padding: 0 !important; border-radius: 10px !important; } .mobile-nav-link, .mob-link { min-height: 44px !important; padding: 9px 11px !important; gap: 10px !important; font-size: var(--bh-mobile-link-size) !important; font-weight: var(--bh-mobile-link-weight) !important; line-height: 1.15 !important; } .mobile-nav-account, .mob-account-btn { min-height: 44px !important; padding: 9px 11px !important; gap: 10px !important; font-family: var(--bh-font-sans) !important; font-size: var(--bh-mobile-link-size) !important; font-weight: var(--bh-header-font-weight) !important; } .mobile-nav-account .mobile-theme-avatar, .mobile-nav-account span:first-child, .mob-avatar { width: 30px !important; height: 30px !important; flex: 0 0 30px !important; } @media (max-width: 1080px) { body:not(:has(> .market-strip)) .app-header.bh-float-nav { top: 45px !important; margin-top: 0 !important; width: min(calc(100% - 24px), var(--bh-nav-max, 1180px)) !important; max-width: calc(100% - 24px) !important; } .app-header.bh-float-nav .header-row { min-height: 46px !important; padding: 4px 8px 4px 12px !important; gap: 8px !important; } .app-header.bh-float-nav .brand { width: 116px !important; min-width: 116px !important; } .app-header.bh-float-nav .brand > img { width: 116px !important; max-width: 116px !important; } .app-header.bh-float-nav .actions { gap: 6px !important; } .app-header.bh-float-nav .bh-theme-toggle, .app-header.bh-float-nav .hamburger-btn { width: var(--bh-header-control-size) !important; min-width: var(--bh-header-control-size) !important; height: var(--bh-header-control-size) !important; min-height: var(--bh-header-control-size) !important; } /* La cuenta vive en el drawer móvil; así el header conserva la misma composición compacta incluso en 320–390px. */ .app-header.bh-float-nav .account-btn, .app-header.bh-float-nav .btn.account-btn { display: none !important; padding: 0 !important; } .app-header.bh-float-nav .account-btn > span:last-child { display: none !important; } } @media (max-width: 390px) { .app-header.bh-float-nav .brand, .app-header.bh-float-nav .brand > img { width: 116px !important; min-width: 116px !important; max-width: 116px !important; } } @media (max-width: 768px) { .app-header.bh-float-nav { left: 12px !important; right: auto !important; width: min(var(--bh-nav-max, 1180px), calc(100vw - 34px)) !important; max-width: calc(100vw - 34px) !important; margin-left: 0 !important; margin-right: 0 !important; } } @media (min-width: 380px) and (max-width: 420px) { .app-header.bh-float-nav { width: 356px !important; max-width: 356px !important; } }