/* Visor de imágenes en popup */
#visor { position: fixed; inset: 0; margin: auto; width: min(1280px, calc(100vw - 40px)); height: min(820px, calc(100vh - 40px)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: #fff; color: #202536; box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); }
#visor[open] { display: block; animation: visor-entra .2s ease-out; }
#visor::backdrop { background: rgba(10, 8, 30, .72); backdrop-filter: blur(3px); }
@keyframes visor-entra { from { opacity: 0; transform: scale(.97); } }
.v-stage { position: absolute; inset: 0; overflow: hidden; background: #f9f9f9; touch-action: none; outline: 0; }
.v-stage img { display: block; width: 100%; height: 100%; object-fit: contain; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.v-stage img.suave { transition: transform .16s ease-out; }
.v-stage.zoom { cursor: grab; }
.v-stage.moviendo { cursor: grabbing; }
.v-bar { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; align-items: center; gap: 4px; padding: 5px 8px; border-radius: 12px; background: rgba(32, 37, 54, .92); color: #fff; white-space: nowrap; }
.v-b { width: 42px; height: 38px; padding: 8px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.v-b svg { display: block; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.v-b:hover:not(:disabled), .v-pct:hover { background: rgba(255,255,255,.18); }
.v-b:disabled { opacity: .35; cursor: default; }
.v-pct { min-width: 62px; height: 38px; border: 0; border-radius: 8px; background: transparent; color: #fff; font: 700 14px/1 system-ui, sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; }
.v-ayuda { margin: 0 8px 0 10px; font: 13px/1 system-ui, sans-serif; color: #cfd5e4; }
.v-x { position: absolute; top: 12px; right: 12px; width: 42px; height: 42px; border: 0; border-radius: 10px; background: rgba(32, 37, 54, .92); color: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.v-x:hover { background: #202536; }
#visor :focus-visible { outline: 3px solid #f5d90a; outline-offset: 1px; }
@media (max-width: 640px) { .v-ayuda { display: none; } }