/*
 * avatar_lightbox.css
 * -------------------
 * Componente: wrappers <a> que abren imágenes en lightbox Fancybox.
 *
 * Clases disponibles:
 *   .avatar-lightbox     - para avatares pequeños (inline-block, line-height:0).
 *                          Usada por Persona.get_avatar_img_* y por íconos/thumbs
 *                          de listados.
 *   .media-lightbox      - para imágenes a nivel bloque (card-img-top, headers
 *                          con foto grande). NO impone display:inline-block,
 *                          deja que la imagen interna ocupe el ancho natural.
 *
 * Ambas:
 *   - Cursor zoom-in (señal visual de "clickeable para ampliar").
 *   - Sin underline (text-decoration:none).
 *   - Hover suaviza la opacity del <img> interno.
 *
 * Notas:
 *   - El grupo "avatars" / "zonas" / "comprobantes" etc. permite navegar con
 *     flechas entre todas las imágenes del mismo grupo en la misma página.
 *   - Fancybox v4 se inicializa global via /static/components/base/script.js.
 */

.avatar-lightbox,
.media-lightbox {
    cursor: zoom-in;
    text-decoration: none;
}

.avatar-lightbox {
    display: inline-block;
    line-height: 0;
}

.avatar-lightbox:hover img,
.media-lightbox:hover img {
    opacity: .85;
    transition: opacity .15s ease-in-out;
}