/* PescaRadar · visor de fotografías.
 *
 * ## Por qué tiene hoja propia y no vive en `app.css`
 *
 * Porque `timonel.html` carga `visor.js` y NO carga `app.css`: el panel de
 * administración usa `pages.css`, con su propio vocabulario de tokens. El
 * resultado era que al ampliar una foto desde el panel, el visor se abría sin
 * una sola regla aplicada: la imagen salía a tamaño natural y desbordaba la
 * pantalla, así que solo se veía un trozo. En el resto del sitio funcionaba
 * bien, que es lo que hace que un fallo así sobreviva.
 *
 * La regla ahora es simple y comprobable: **si una página carga `visor.js`,
 * carga esta hoja**. Son las mismas seis: capturas, comunidad, inicio, mapa,
 * perfil y timonel.
 *
 * No depende de ningún token de `tokens.css`: los colores van literales a
 * propósito, porque tiene que verse igual sobre el tema oscuro del sitio
 * público y sobre el claro del panel.
 */

/* ---- Visor de fotografías -----------------------------------------------------
   La miniatura se recorta; esto NO. `contain` sobre fondo oscuro, sin cromo que
   robe alto a la imagen. Ver `frontend/js/visor.js`. */
/* `minmax(0, 1fr)` en la fila, y no la fila automatica de antes.
 *
 * Sin fila declarada, la unica fila era `auto`: crecia hasta el tamano de la
 * foto. Y entonces el `max-height: 100%` de la imagen se medi­a contra una
 * altura que dependia de la propia imagen, o sea contra nada, y no limitaba.
 * Resultado: las fotos verticales y cuadradas se pintaban a tamano natural y
 * se salian de la pantalla. Las apaisadas cabian de milagro, porque en ellas
 * el limite que manda es el ancho, y ese si funcionaba. Por eso el fallo
 * parecia intermitente.
 *
 * El `0` del minmax es imprescindible: un `1fr` a secas tiene minimo
 * automatico y volveria a estirarse con la foto. */
.prVisor {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; grid-template-columns: auto 1fr auto;
  grid-template-rows: minmax(0, 1fr); align-items: center;
  gap: 4px; padding: max(12px, env(safe-area-inset-top)) 8px
           max(12px, env(safe-area-inset-bottom));
  background: rgba(3, 12, 16, .96);
  backdrop-filter: blur(6px);
}
.prVisor[hidden] { display: none; }
body.prVisorAbierto { overflow: hidden; }

.prVisorFigura {
  grid-column: 2; margin: 0; min-width: 0;
  display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 10px;
  justify-items: center; height: 100%;
}
.prVisorImagen {
  min-width: 0; min-height: 0;
  max-width: 100%; max-height: 100%;
  object-fit: contain;          /* la regla del asunto: nunca `cover` */
  border-radius: 10px;
}
.prVisorPie {
  max-width: 60ch; margin: 0; padding: 0 6px;
  color: #b9d6de; font-size: 12px; line-height: 1.5; text-align: center;
}
.prVisorPie[hidden] { display: none; }

.prVisorCerrar {
  position: absolute; top: max(12px, env(safe-area-inset-top)); right: 10px;
  width: 44px; height: 44px;          /* objetivo táctil completo */
  border: 1px solid rgba(255,255,255,.2); border-radius: 13px;
  background: rgba(10, 32, 40, .9); color: #dff8fc;
  font: 700 17px/1 var(--pr-font, system-ui); cursor: pointer;
}
.prVisorNav {
  width: 44px; height: 68px; padding: 0;
  border: 1px solid rgba(255,255,255,.16); border-radius: 14px;
  background: rgba(10, 32, 40, .82); color: #dff8fc;
  font: 700 24px/1 var(--pr-font, system-ui); cursor: pointer;
}
.prVisorNav[hidden] { visibility: hidden; display: block; }
.prVisorNav--izq { grid-column: 1; }
.prVisorNav--der { grid-column: 3; }
.prVisorCerrar:hover, .prVisorNav:hover { border-color: rgba(70,211,241,.55); }

.prVisorContador {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: max(10px, env(safe-area-inset-bottom));
  margin: 0; color: #8fb4bf; font-size: 11px; letter-spacing: .06em;
}
.prVisorContador[hidden] { display: none; }

/* En móvil las flechas estorban: se pasa arrastrando. */
@media (max-width: 560px) {
  .prVisor { grid-template-columns: 1fr; padding-inline: 6px; }
  .prVisorFigura { grid-column: 1; }
  .prVisorNav { display: none; }
}

/* Miniaturas pulsables.
   El botón no debe cambiar nada de cómo se veía la foto: sin borde, sin fondo,
   sin relleno y ocupando exactamente lo mismo que la imagen que envuelve. */
.catchPhotoBtn, .capFotoBtn {
  display: block; width: 100%; padding: 0; border: 0;
  background: none; cursor: zoom-in; text-align: inherit;
}
.catchPhotoBtn > img, .capFotoBtn > img { display: block; width: 100%; }
.catchPhotoBtn:focus-visible, .capFotoBtn:focus-visible {
  outline: 2px solid var(--pr-accent, #46d3f1); outline-offset: 2px;
}