/* O logo da escola, do mesmo tamanho em qualquer tela — venha ele como vier.
 *
 * O DEFEITO QUE ORIGINOU ESTE ARQUIVO
 * -----------------------------------
 * Toda regra de logo do projeto foi escrita supondo um logo DEITADO: capavam a
 * LARGURA (`max-width: 220px`) e deixavam a ALTURA correr solta (`height:auto`).
 * Em 31/08/2026 a escola trocou o logo por um de qualidade melhor — 1234×1403,
 * ou seja, EM PÉ. Resultado medido no login: 220px de largura viraram 250px de
 * altura, e a caixa branca passou a ocupar 282 dos 544px do painel, empurrando o
 * nome do produto para a borda. Na inscrição da colônia foi pior: o logo saía
 * 9px para FORA do cartão em todos os lados, com "Pré-vestibular" cortado.
 *
 * E o outro lado do mesmo problema nunca foi tratado: logo PEQUENO ficava
 * pequeno. `max-height: 3rem` na tela de bloqueio capa o grande e não faz nada
 * pelo miúdo — a escola que subisse um arquivo de 90px veria 90px.
 *
 * A REGRA
 * -------
 * Uma CAIXA de tamanho fixo e `object-fit: contain`. O logo preenche a caixa na
 * dimensão que couber e é centralizado na outra: o grande ENCOLHE, o pequeno
 * CRESCE, e nenhum dos dois distorce nem vaza. É o que a tela do boleto do SIGA
 * já fazia certo — aqui isso vira a regra de todas.
 *
 * COMO USAR
 * ---------
 *     <div class="marca-logo-cartao">
 *         <img src="{{ tenant_logo_url() }}" alt="..." class="marca-logo">
 *     </div>
 *
 * O tamanho é da PÁGINA, não daqui: cada tela reserva o espaço que o desenho
 * dela pede, por `--marca-logo-larg` / `--marca-logo-alt`. Sem `--marca-logo-alt`
 * a caixa é quadrada.
 *
 * `--marca-logo-cartao-*` desliga o cartão branco (fundo, canto, sombra) para a
 * tela que não o quer — a de bloqueio de licença, por exemplo.
 *
 * ESTE ARQUIVO PRECISA SER LIGADO EM CADA PÁGINA. As telas de login, redefinição
 * de senha, pagamento e inscrição são STANDALONE: elas não estendem o base.html
 * e não herdam o base.css, então conserto global não as alcança — é a armadilha
 * já registrada no projeto. Ver `test_contrato_do_logo.py`, que confere que todo
 * logo do sistema passa por aqui.
 */

.marca-logo-cartao {
    /* Sem `--marca-logo-alt`, a caixa é quadrada. */
    --marca-logo-alt: var(--marca-logo-larg, 160px);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--marca-logo-larg, 160px);
    height: var(--marca-logo-alt);
    /* Em tela estreita a caixa cede; o `object-fit` do filho acompanha. */
    max-width: 100%;

    background: var(--marca-logo-cartao-fundo, #fff);
    border-radius: var(--marca-logo-cartao-canto, 1.5rem);
    padding: var(--marca-logo-cartao-respiro, 1rem);
    box-shadow: var(--marca-logo-cartao-sombra, 0 10px 30px rgba(0, 0, 0, 0.15));
    /* A largura declarada é a da CAIXA, e não a do miolo: sem isto o respiro
       soma por fora e a caixa fica maior do que a página reservou. */
    box-sizing: border-box;
}

/* A linha que resolve as duas pontas. `min-width/min-height: 0` porque o item
   de um flex não encolhe abaixo do próprio conteúdo por padrão — sem eles, um
   logo grande empurra a caixa em vez de caber nela. */
.marca-logo {
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    display: block;
}

/* Sem cartão: só o logo, dimensionado do mesmo jeito. */
.marca-logo-cartao--limpo {
    --marca-logo-cartao-fundo: transparent;
    --marca-logo-cartao-sombra: none;
    --marca-logo-cartao-respiro: 0;
}