/* Visor de funcionalidades: superficie neutra y controles propios del tema vigente. */
.image-expandable { position: relative; }
.image-expand-trigger { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: zoom-in; color: var(--white); }
.image-expand-trigger > span { position: absolute; right: 12px; bottom: 12px; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); box-shadow: 0 2px 12px #0003; transition: color .15s, transform .15s; }
.image-expand-trigger:hover > span { color: var(--accent); transform: scale(1.06); }
.image-expand-trigger:focus-visible { outline: 3px solid var(--accent); outline-offset: -4px; }
.image-expand-trigger svg,.image-viewer button svg { width: 20px; height: 20px; pointer-events: none; }
html.image-viewer-open { overflow: hidden; scrollbar-gutter: stable; }
.image-viewer { width: min(1280px, calc(100vw - 48px)); max-width: none; height: min(900px, calc(100dvh - 48px)); max-height: none; margin: auto; padding: 0; border: 1px solid var(--line-strong); border-radius: 20px; background: var(--surface); color: var(--white); box-shadow: 0 30px 100px #0006; overflow: hidden; }
.image-viewer::backdrop { background: #030610b8; backdrop-filter: blur(8px); }
.image-viewer[open] { display: flex; flex-direction: column; animation: viewer-enter .16s ease-out; }
.image-viewer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); flex-shrink: 0; }
.image-viewer-label { color: var(--muted); font-size: .78rem; letter-spacing: .04em; }
.image-viewer-actions { display: flex; gap: 8px; }
.image-viewer button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface-elevated); color: var(--white); font: inherit; font-size: .85rem; cursor: pointer; }
.image-viewer button:hover { border-color: var(--accent); }
.image-viewer button:focus-visible,.image-viewer-stage:focus-visible,.image-viewer-info:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.image-viewer-stage { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; background: #000; }
:root[data-theme="light"] .image-viewer-stage { background: #fff; }
.image-viewer-canvas { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.image-viewer-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.image-viewer-stage.is-zoomed .image-viewer-canvas { width: 200%; height: 200%; }
.image-viewer-info { flex-shrink: 0; max-height: 34%; overflow: auto; padding: 18px 24px 22px; border-top: 1px solid var(--line); }
.image-viewer-info h2 { margin: 0 0 6px; font-size: clamp(1.1rem, 2vw, 1.45rem); line-height: 1.25; letter-spacing: -.02em; }
.image-viewer-info p { margin: 0; max-width: 85ch; font-size: .92rem; line-height: 1.6; color: var(--muted); }
.image-viewer-info .image-viewer-tip { margin-top: 9px; padding-left: 12px; border-left: 2px solid var(--accent); color: var(--white); font-size: .84rem; }
@keyframes viewer-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .image-viewer { width: 100%; height: 100dvh; border: 0; border-radius: 0; }
  .image-viewer-header { padding: max(8px, env(safe-area-inset-top)) 12px 8px; }
  .image-viewer-info { padding: 16px 18px max(18px, env(safe-area-inset-bottom)); max-height: 36%; }
  .image-viewer-label { font-size: .7rem; }
  .image-viewer-info p { font-size: .85rem; }
  .image-expand-trigger > span { right: 8px; bottom: 8px; }
}
@media (max-height: 500px) {
  .image-viewer-info { max-height: 30%; padding: 10px 16px; }
  .image-viewer-header { padding-block: 4px; }
}
@media (max-height: 500px) and (min-width: 600px) {
  .image-viewer { width: calc(100vw - 24px); height: calc(100dvh - 24px); border-radius: 16px; }
  .image-viewer[open] { display: grid; grid-template-columns: minmax(0,1fr) minmax(220px,30%); grid-template-rows: auto minmax(0,1fr); }
  .image-viewer-header { grid-column: 1 / -1; }
  .image-viewer-info { max-height: none; min-height: 0; border-top: 0; border-left: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .image-viewer[open] { animation: none; }
  .image-expand-trigger > span { transition: none; }
}