/* ══════════════════════════════════════════════════════════════════
   WTT-ALI — o logo da aplicação nos dois fundos
   ══════════════════════════════════════════════════════════════════
   São DOIS arquivos, e o sufixo diz a cor da TINTA, não o tema — é a
   mesma convenção que o logo da WTT já usava aqui (logo-wtt-dark.png
   é o de tinta escura, mostrado no tema claro):

     logo-ali.png        tinta escura  -> fundo CLARO   (padrão)
     logo-ali-light.png  tinta clara   -> fundo ESCURO

   Este arquivo faz uma coisa só: no tema escuro, troca um pelo outro.
   A troca é por SRC, não por classe, de propósito — assim vale para
   todo <img> do logo, inclusive os que não têm classe nenhuma (as
   topbars de admin-cadastros, pesquisa, gestao-busca e
   gestao-relatorios) e para qualquer tela nova que venha depois, sem
   ninguém precisar lembrar de vir aqui.

   Os dois arquivos têm EXATAMENTE o mesmo tamanho em pixels (1200x704).
   É isso que faz a troca não mexer no layout: o `content:url()` troca a
   imagem pintada, e as medidas de cada tela continuam valendo.

   Onde ficam as MEDIDAS: em cada CSS de tela, junto do resto do estilo
   daquela tela (.header-logo no laudar.css, .sidebar-logo no admin.css,
   .brand-icon no auth.css e no sala.css…). Não foram trazidas para cá
   para não passar por cima das versões responsivas que já existem.

   Telas PERMANENTEMENTE escuras (pesquisa, admin-cadastros,
   gestao-busca, gestao-relatorios — as de `--bg:#0a0e1a`, sem
   alternador de tema) não entram nesta regra: elas apontam direto para
   o logo-ali-light.png no próprio HTML, porque nelas não existe tema
   claro para voltar.
   ══════════════════════════════════════════════════════════════════ */

[data-theme="dark"] img[src$="logo-ali.png"] {
    content: url("/static/images/logo-ali-light.png");
}

/* NÃO volte a pôr uma regra de `prefers-color-scheme` aqui.
   Tentei, em 21/08, e quebrou /laudar e /gestao: nas duas o logo ficava
   sempre no de fundo escuro, inclusive no tema claro.

   O motivo é uma convenção desta base que não se vê olhando o CSS:
   CLARO É A AUSÊNCIA DE `data-theme`, não `data-theme="light"`.
     · /gestao no claro faz `removeAttribute('data-theme')` (gestao.js);
     · /laudar guarda o tema no <body>, e o <html> nunca tem o atributo.
   Então `html:not([data-theme="light"])` casa SEMPRE, e bastava o
   sistema operacional estar no escuro para o logo errado vencer.

   E não há o que consertar na regra: a aplicação não segue o tema do
   sistema em lugar nenhum — `prefers-color-scheme` não aparece em
   nenhum outro CSS do projeto. Quem manda é o botão de tema. Portanto
   a única chave válida aqui é `[data-theme="dark"]`, acima. */

/* Trava de segurança. O arquivo tem 1200x704 de tamanho natural; se
   alguma tela esquecer de dar medida ao <img> (ou a medida não resolver,
   como acontece com altura percentual dentro de um flex de base fixa), o
   logo entraria em tamanho natural e arrebentaria o layout. Isto põe um
   teto sem competir com nenhuma medida já definida. */
img[src$="logo-ali.png"],
img[src$="logo-ali-light.png"] {
    max-width: 100%;
}