/* ============================================ DIBO suite-nav — top-bar compartida Usada por: index-registro.html, informe-sibo.html, radar-sibo.html, como-funciona.html. index.html usa
propio, no .suite-nav. Requisitos en cada HTML que enlace este archivo: - css/tokens.css debe estar cargado (define --nav-h, --accent, --ink-strong, --mark, --border, --z-nav). Sticky global (Sprint 0 A.24): la nav se queda fija arriba al hacer scroll en toda la suite. Theming (jun 2026): la nav va siempre en BLANCO en los 3 temas. El color del tema solo aparece en (a) el logo-mark (--accent), (b) el item activo: texto en --ink-strong + bold + subrayado fino en --accent. Sin pastilla. La nav se separa del contenido con un borde inferior fino (1px var(--border)). ============================================ */ .suite-nav { background: #fff; border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: .25rem; padding: .3rem .75rem; height: var(--nav-h); box-sizing: border-box; flex-shrink: 0; position: sticky; top: 0; z-index: var(--z-nav); } .suite-link { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: var(--ink-strong); text-decoration: none; padding: .3rem .65rem; border-radius: 6px; transition: opacity .15s; margin-right: .5rem; flex-shrink: 0; } .suite-link:hover { opacity: .8; } /* "d" del header — varía por tema. Wellness es la regla base; Boli y Carbon sobrescriben background-image vía [data-theme] (el snippet anti-FOUC del de cada página ya pinta el atributo antes del primer paint, así que el PNG correcto se carga directamente — sin parpadeo). */ .suite-link-icon { width: 18px; height: 18px; border-radius: 4px; background: url("../img/favicon-wellness.png") center / contain no-repeat; } [data-theme="boli"] .suite-link-icon { background-image: url("../img/favicon-boli.png"); } [data-theme="carbon"] .suite-link-icon { background-image: url("../img/favicon-carbon.png"); } .suite-nav-sep { width: 1px; background: var(--border); height: 18px; margin: 0 .25rem; } /* Items de la nav: inactivos en gris medio, sin hover de relleno (la nav superior va plana — la pista de interactividad es el cursor). */ .suite-nav a:not(.suite-link), .suite-nav .snav-item { font-size: 11px; font-weight: 500; color: var(--text2); text-decoration: none; padding: .3rem .65rem; transition: color .15s; white-space: nowrap; display: flex; align-items: center; gap: .3rem; border-bottom: 2px solid transparent; border-radius: 0; } .suite-nav a:not(.suite-link):hover, .suite-nav .snav-item:hover { color: var(--ink-strong); } /* Activo: subrayado fino en --accent + texto --ink-strong + bold. Sin pastilla. El subrayado es señal no-solo-color → AA OK. */ .suite-nav a:not(.suite-link).active, .suite-nav .snav-item.active, .suite-nav a:not(.suite-link)[aria-current="page"], .suite-nav .snav-item[aria-current="page"] { color: var(--ink-strong); font-weight: 700; border-bottom-color: var(--accent); } /* Item "Radar" en estado "Próximamente" — solo en uso por radar-sibo.html (el resto de la suite ya no muestra Radar en el nav). */ #snav-radar { opacity: .45; cursor: default; padding: 4px 8px; font-size: 12px; display: flex; align-items: center; gap: 5px; } #snav-radar > span { font-size: 9px; background: var(--mark); color: var(--ink-strong); padding: 1px 5px; border-radius: 8px; letter-spacing: .03em; } @media (max-width: 400px) { #snav-radar > span { display: none; } }