/* La piel de `dialogo.js` y del visor (`visor.js`), común a las pantallas.
   Copiada de `Asociaciones/public/styles.css` (`.dialogo`, `.ampliada`,
   `.visor-caja`, `.visor-cuenta`, `.cerrar-dialogo`) con los tokens de aquí.
   La lógica no se toca (D-12): esto es solo cómo se ve. */

.dialogo {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: var(--s-4);
  background: rgba(34, 27, 38, .88);
}

/* La foto ampliada: el fondo oscuro y el cursor de «cerrar». */
.ampliada { cursor: zoom-out; }
.ampliada img { max-width: 100%; max-height: 100%; object-fit: contain; }

/* La caja ocupa el hueco entero para que deslizar valga también sobre las
   franjas de los lados de una foto vertical. */
.visor-caja {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s-2);
  width: 100%; height: 100%; min-height: 0;
}
.visor-cuenta {
  margin: 0; flex: none;
  color: #fff; font-family: var(--maquina); font-variant-numeric: tabular-nums; font-size: 1rem;
}

/* El cerrar de cualquier diálogo: abajo a la derecha, con texto y no un aspa.
   `z-index` porque va ANTES del contenido y `.visor-caja` lo tapaba
   (2026-09-04; la historia entera, en decisions.md D-80). */
.cerrar-dialogo {
  position: absolute; z-index: 1;
  bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
  right: var(--s-4);
  min-height: 44px; padding: 0 var(--s-4);
  border: 2px solid var(--papel); border-radius: 999px;
  background: var(--papel); color: var(--tinta);
  font: inherit; font-weight: 700; cursor: pointer;
}

/* Un diálogo con contenido propio (la pregunta antes de quitar el cartel). */
.dialogo-caja {
  width: min(100%, 30rem);
  display: flex; flex-direction: column; gap: var(--s-4);
  padding: var(--s-5) var(--s-4);
  background: var(--papel); border-radius: var(--r-lg);
  box-shadow: var(--relieve-alto);
}
.dialogo-caja p { margin: 0; font-weight: 600; }
/* D-80: lo que explica, en peso de lectura; solo la pregunta va en negrita. */
.dialogo-caja .dialogo-texto { font-weight: 400; }
.dialogo-caja .btn { width: 100%; }