/* ============================================================ design-system / components / tabbar.css Barra de navegació inferior fixa, per a apps mòbil-first amb 3-5 seccions principals (patró "bottom navigation" mòbil natiu). Viu FORA de #main-content, com .ds-topbar / .ds-nav: és chrome persistent entre pàgines — router.js no la toca; tabbar.js només hi marca l'ítem actiu segons la ruta. No hi havia cap component equivalent al catàleg (.ds-nav és un menú horitzontal de capçalera, pensat per a escriptori, no per a ús amb polze a la part baixa de la pantalla). Primer consumidor: Visa+OFF Perpinyà (2026-09-11). ============================================================ */ .ds-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; background: var(--ds-color-surface); border-top: 1px solid var(--ds-color-border); box-shadow: var(--ds-shadow); } /* Zona segura dels mòbils (barra de gestos d'iOS/Android). */ .ds-tabbar { padding-bottom: env(safe-area-inset-bottom, 0px); } .ds-tabbar__item { position: relative; flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: var(--ds-space-1); color: var(--ds-color-muted); text-decoration: none; font-size: 0.68rem; font-weight: 600; line-height: 1.2; border-top: 2px solid transparent; background: transparent; border-left: none; border-right: none; border-bottom: none; font-family: inherit; cursor: pointer; } .ds-tabbar__item i { font-size: 1.15rem; } .ds-tabbar__item.is-active { color: var(--ds-color-primary); border-top-color: var(--ds-color-primary); } .ds-tabbar__item:focus-visible { outline: 2px solid var(--ds-color-primary); outline-offset: -2px; } /* Comptador petit (p. ex. nombre de parades a la ruta). */ .ds-tabbar__badge { position: absolute; top: 2px; right: calc(50% - 18px); min-width: 16px; height: 16px; border-radius: 999px; background: var(--ds-color-accent); color: var(--ds-color-ink-on-primary); font-size: 0.6rem; font-weight: 700; display: flex; align-items: center; justify-content: center; padding: 0 3px; } /* Reserva l'espai perquè el contingut de #main-content no quedi tapat sota la barra fixa. Cal que .ds-tabbar visqui com a germana directa de #main-content dins . */ body:has(> .ds-tabbar) #main-content, body:has(.ds-tabbar) #main-content { padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px)); } /* A partir d'amplada d'escriptori es converteix en una barra centrada tipus "dock", no en un menú horitzontal a sang — la seva raó de ser continua sent la interacció amb polze. */ @media (min-width: 720px) { .ds-tabbar { max-width: 480px; left: 50%; transform: translateX(-50%); border-left: 1px solid var(--ds-color-border); border-right: 1px solid var(--ds-color-border); border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0; } }