/* visor.css — la vista ampliada de una foto de perfil (componentes/visor/).

   El `<dialog>` queda sin caja propia —ni fondo ni borde ni relleno—: lo que
   se ve es la foto flotando sobre un velo oscuro, y el velo es el
   `::backdrop` del diálogo. Así el borde de la vista es el borde de la foto,
   que es como se espera una vista ampliada. */

.visor{
  position:relative; overflow:visible;
  border:0; padding:0; background:none;
  /* El navegador trae a los diálogos un ancho máximo y márgenes propios; sin
     quitarlos, la foto nunca ocuparía lo que la pantalla le presta. */
  max-width:none; max-height:none;
}

.visor::backdrop{background:rgba(20,10,16,.78)}

.visor-foto{
  display:block;
  /* Contener, no recortar: la foto guardada conserva su proporción y la
     vista ampliada existe para verla ENTERA — el círculo pequeño ya recorta
     de más. `background` es el hueco mientras llega, el mismo color que
     deja `retrato.css` en los círculos. */
  max-width:88vw; max-height:78vh; width:auto; height:auto;
  border-radius:var(--radio); background:var(--brand-suave);
}

/* Si no hay foto —cuenta de demostración, cuenta borrada— el hueco lo llenan
   las iniciales de `avatar.js`, pero del tamaño de la vista y no del de una
   fila. La clase llega como `avatar visor`. */
.visor .avatar{width:9rem; height:9rem; font-size:2.4rem}

/* La X: mitad dentro y mitad fuera de la esquina de la foto, sobre el velo.
   En el velo es donde se ve siempre —no compite con ningún color de foto— y
   el color de la marca es el que la página usa para lo que se puede pulsar. */
.visor-cerrar{
  position:absolute; top:0; right:0; transform:translate(50%, -50%);
  width:2.4rem; height:2.4rem; border-radius:50%; border:0;
  background:var(--brand); color:var(--brand-ink);
  font-size:1.35rem; line-height:1; cursor:pointer;
  display:grid; place-items:center;
}
.visor-cerrar:hover{filter:brightness(1.08)}