/* ============================================================================ SBGallery — visor de galería / lightbox reutilizable ("widget galería"). Generalizado desde .profile-lightbox. Soporta imagen y video, navegación por teclado/táctil, contador y caption. Singleton montado en . ============================================================================ */ body.sb-gallery-open { overflow: hidden; } .sb-gallery { position: fixed; inset: 0; z-index: calc(var(--z-modal, 1000) + 40); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-3, 1rem); padding: max(var(--space-3, 1rem), env(safe-area-inset-top)) var(--space-3, 1rem) max(var(--space-3, 1rem), env(safe-area-inset-bottom)); background: rgba(8, 10, 14, .94); color: #fff; } .sb-gallery[hidden] { display: none; } .sb-gallery__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3, 1rem); min-height: 40px; } .sb-gallery__counter { font-size: 0.8125rem; color: rgba(255, 255, 255, .7); } .sb-gallery__actions { display: inline-flex; align-items: center; gap: var(--space-2, 0.5rem); } .sb-gallery__btn { width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .18s, border-color .18s, transform .12s; } .sb-gallery__btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .38); } .sb-gallery__btn:active { transform: scale(.96); } .sb-gallery__btn:focus-visible { outline: 3px solid #8ab4f8; outline-offset: 3px; } .sb-gallery__stage-wrap { position: relative; min-height: 0; width: min(100%, 1120px, calc((100vh - 188px) * 1.6)); max-height: calc(100vh - 188px); aspect-ratio: 16 / 10; align-self: center; justify-self: center; display: flex; align-items: center; justify-content: center; } .sb-gallery__stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #05070a; border-radius: 8px; overflow: hidden; } .sb-gallery__img, .sb-gallery__video { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; } .sb-gallery__img { pointer-events: none; } .sb-gallery__img[hidden], .sb-gallery__video[hidden] { display: none; } .sb-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; } .sb-gallery__nav svg { pointer-events: none; } .sb-gallery__nav--prev { left: var(--space-3, 1rem); } .sb-gallery__nav--next { right: var(--space-3, 1rem); } .sb-gallery__caption { max-width: 920px; width: min(100%, 920px); margin: 0 auto; padding: 0 var(--space-2, 0.5rem); text-align: center; } .sb-gallery__title { margin: 0; font-size: 1rem; font-weight: 700; line-height: 1.35; } .sb-gallery__description { margin: var(--space-1, 0.25rem) 0 0; color: rgba(255, 255, 255, .72); font-size: 0.9rem; line-height: 1.5; white-space: pre-line; } .sb-gallery__title:empty, .sb-gallery__description:empty, .sb-gallery__title[hidden], .sb-gallery__description[hidden] { display: none; } .sb-gallery__dots { display: flex; align-items: center; justify-content: center; gap: 7px; padding: var(--space-2, 0.5rem) 0 0; } .sb-gallery__dots[hidden] { display: none; } .sb-gallery__dot { width: 8px; height: 8px; min-width: 0; min-height: 0; aspect-ratio: 1 / 1; border-radius: 50%; background: rgba(255, 255, 255, .3); border: none; padding: 0; font-size: 0; line-height: 0; cursor: pointer; transition: background .2s, transform .18s; flex-shrink: 0; } .sb-gallery__dot:hover { background: rgba(255, 255, 255, .55); } .sb-gallery__dot--active { background: #3b82f6; transform: scale(1.3); } /* Disparadores: cualquier item de galería marca el cursor como ampliable. */ [data-sb-gallery-item] { cursor: zoom-in; } @media (min-width: 768px) { .sb-gallery { padding: var(--space-4, 1.5rem); } .sb-gallery__stage-wrap { width: min(100%, 1180px, calc((100vh - 160px) * 1.7778)); aspect-ratio: 16 / 9; max-height: calc(100vh - 160px); } } @media (max-width: 767px) { .sb-gallery__stage-wrap { width: min(100%, calc((100vh - 210px) * .8)); aspect-ratio: 4 / 5; max-height: calc(100vh - 210px); } .sb-gallery__nav--prev { left: 4px; } .sb-gallery__nav--next { right: 4px; } }