/* Imagens compartilham abertura, enquadramento e recuperação de foco. */
[data-nf-image] { cursor: zoom-in; }
[data-nf-image]:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring); outline-offset: 3px; }
.nf-media-viewer {
    box-sizing: border-box;
    width: min(96vw, 100rem);
    height: min(94dvh, 72rem);
    max-width: 96vw;
    max-height: 94dvh;
    padding: 0;
    margin: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background: var(--surface-color);
    color: var(--text-color);
}
.nf-media-viewer[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.nf-media-viewer::backdrop { background: rgb(0 0 0 / .82); }
.nf-media-viewer__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; padding: .65rem 1rem; }
.nf-media-viewer__bar h2 { margin: 0; min-width: 0; flex: 1; font-size: var(--text-base); overflow-wrap: anywhere; }
.nf-media-viewer > header { flex-wrap: nowrap; }
.nf-media-viewer [data-media-close] { flex: 0 0 auto; }
.nf-media-viewer__bar .btn { min-width: 44px; min-height: 44px; }
.nf-media-viewer__stage { position: relative; display: grid; place-items: center; overflow: auto; min-height: 0; background: color-mix(in srgb, var(--surface-color) 75%, #000); }
.nf-media-viewer__stage img { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; cursor: zoom-in; }
.nf-media-viewer.is-original .nf-media-viewer__stage { display: block; }
.nf-media-viewer.is-original .nf-media-viewer__stage img { width: auto; height: auto; max-width: none; max-height: none; margin: auto; cursor: zoom-out; }
.nf-media-viewer__controls { justify-content: center; border-top: 1px solid var(--border-color); }
.nf-media-viewer__error:not([hidden]) { position: absolute; max-width: 32rem; padding: 1rem; text-align: center; background: var(--surface-color); }
.nf-media-viewer [hidden] { display: none; }
.nf-media-viewer__fallback { font-size: var(--text-xs); color: var(--muted-color); }
.nf-image-frame { display: grid; place-items: center; min-width: 0; overflow: hidden; background: var(--surface-color); border-radius: var(--radius-md); }
.nf-image-frame img { display: block; max-width: 100%; object-fit: contain; object-position: center; margin: auto; }
.nf-image-frame[hidden] { display: none; }
@media (max-width: 600px) {
    .nf-media-viewer { width: 100vw; height: 100dvh; max-width: 100vw; max-height: 100dvh; border: 0; border-radius: 0; }
    .nf-media-viewer__bar { padding: .5rem; gap: .3rem; }
    .nf-media-viewer__bar h2 { font-size: var(--text-sm); }
    .nf-media-viewer__controls [data-media-original] { font-size: var(--text-sm); }
}