/* Solo se carga en La Paralela. La fotografía ampliada conserva su color. */
html.space-viewer-open,
html.space-viewer-open body {
  overflow:hidden;
}
.space-viewer {
  position:fixed;
  inset:0;
  width:min(1120px,calc(100vw - 32px));
  height:min(900px,calc(100vh - 32px));
  height:min(900px,calc(100svh - 32px));
  max-width:calc(100vw - 24px);
  max-height:calc(100vh - 24px);
  max-height:calc(100svh - 24px);
  margin:auto;
  padding:0;
  border:1px solid #555;
  color:#fff;
  background:#171717;
  overflow:hidden;
  font:500 15px/1.4 var(--body);
}
.space-viewer::backdrop {
  background:rgb(0 0 0 / .8);
}
.space-viewer-panel {
  display:grid;
  grid-template-rows:auto minmax(0,1fr) auto;
  width:100%;
  height:100%;
  min-height:0;
}
.space-viewer-header,
.space-viewer-controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:10px 16px;
  background:#171717;
}
.space-viewer-header {
  border-bottom:1px solid #444;
}
.space-viewer-header p {
  min-width:0;
  font-weight:700;
}
.space-viewer button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  gap:9px;
  min-width:44px;
  min-height:44px;
  padding:8px 12px;
  border:1px solid #777;
  border-radius:0;
  background:transparent;
  color:inherit;
  font:600 14px/1.2 var(--body);
}
.space-viewer button:hover,
.space-viewer button:focus-visible {
  border-color:var(--yellow);
  color:#000;
  background:var(--yellow);
}
.space-viewer button:focus-visible {
  outline:2px solid #fff;
  outline-offset:3px;
}
.space-viewer button:disabled {
  opacity:.4;
  cursor:default;
}
.space-viewer-stage {
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  min-height:0;
  overflow:hidden;
}
.space-viewer-stage img {
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  filter:none;
  mix-blend-mode:normal;
  opacity:1;
}
.space-viewer-stage img[hidden],
.space-viewer-stage p[hidden] {
  display:none;
}
.space-viewer-stage p {
  max-width:32ch;
  padding:20px;
  text-align:center;
}
.space-viewer-controls {
  border-top:1px solid #444;
}
.space-viewer-controls p {
  flex-shrink:0;
  font-variant-numeric:tabular-nums;
}
@media (max-width:480px) {
  .space-viewer {
    width:calc(100vw - 16px);
    height:calc(100vh - 16px);
    height:calc(100svh - 16px);
    max-width:calc(100vw - 16px);
    max-height:calc(100vh - 16px);
    max-height:calc(100svh - 16px);
  }
  .space-viewer-header,
  .space-viewer-controls {
    gap:8px;
    padding:8px;
  }
  .space-viewer-header p {
    font-size:13px;
  }
  .space-viewer button {
    gap:6px;
    padding:8px;
    font-size:13px;
  }
  .space-viewer-controls p {
    font-size:13px;
  }
}
@media (max-height:420px) and (min-width:481px) {
  .space-viewer-header,
  .space-viewer-controls {
    padding:4px 12px;
  }
  .space-viewer-header p {
    font-size:13px;
  }
}