/*
 * static/css/miniatura-ampliada.css — o balao que `miniatura-ampliada.js`
 * pendura no <body> ao passar o mouse numa miniatura.
 *
 * Por que um arquivo so, carregado pelos DOIS cascos (base.html e
 * loja_publica/base.html): o balao e um elemento unico, criado por um script
 * unico. Duplicar as regras em sistema.css e num CSS da loja daria o dia em
 * que a correcao entra num lado e o outro fica para tras - e o defeito so
 * aparece para quem abre a loja.
 *
 * O que muda de um lado para o outro e a PALETA, nao o desenho. Por isso cada
 * cor e uma cadeia de tokens: o primeiro e o nome que o sistema usa, o segundo
 * o nome que a loja usa. Nenhum hex de reserva - hex cravado apagaria a
 * escolha de quem trocou o tema, e a loja tem dez modelos.
 *
 * Nao vale para as telas de entrada (`/`, `/login`): elas nao carregam este
 * arquivo, e a garantia e do <link> que nao existe la - fisica, nao de nome.
 */

.miniatura-ampliavel {
    cursor: zoom-in;
}

.miniatura-ampliada {
    position: fixed;
    z-index: 2000;
    padding: 6px;
    border: 1px solid var(--sis-borda, var(--border));
    border-radius: var(--sis-raio, var(--radius));
    background-color: var(--tema-superficie, var(--bg2));
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
    /* Nao e detalhe: o balao segue o cursor, e sem isto ele receberia o
       proprio mouseover, o `mouseout` da miniatura dispararia e a imagem
       piscaria sem parar. */
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
}

.miniatura-ampliada.visivel {
    opacity: 1;
    visibility: visible;
}

/* `max-*` e nao `width`: a foto vem em qualquer proporcao, e forcar o lado
   esticaria a imagem. O quadrado e o teto, quem o define e o script. */
.miniatura-ampliada img {
    display: block;
    width: auto;
    height: auto;
    max-width: var(--miniatura-lado, 320px);
    max-height: var(--miniatura-lado, 320px);
    border-radius: var(--sis-raio-pequeno, 8px);
}