/* ============================================================================
   Máscara de carregamento do uniGUI  —  livro sendo digitalizado
   ----------------------------------------------------------------------------
   POR QUE ESTE ARQUIVO EXISTE

   A aplicação tinha DOIS indicadores de espera com aparências diferentes,
   convivendo na mesma tela:

     A) Ext.LoadMask  — o do uniGUI, disparado em carga de grid/iframe
                        (LoadMask/ScreenMask nos .dfm). Caixinha cinza do ExtJS.
     B) #global-loading-overlay — overlay próprio, criado em
                        web/javascripts/gridfiles_documentos.js:256 e acionado
                        pelo Delphi via window.mostrarLoading().

   Qual aparecia dependia da operação. Este arquivo unifica os dois no visual
   do (B), e vai além: troca o spinner genérico por um livro sendo digitalizado.

   ONDE É LIGADO
   MainModule.pas, junto dos outros CustomFiles:
     UniServerModule.CustomFiles.Add('/web/css/desktop/loadmask.css?...');
   Por ser CustomFiles, vale para a APLICAÇÃO INTEIRA — nenhum .dfm é tocado.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   O fundo da tela.

   O !important NÃO é preguiça: o uniGUI sobrescreve o render do Ext.LoadMask e
   grava a cor INLINE no elemento (ext-unicommon-min.js):
       Ext.override(Ext.LoadMask,{onRender:function(){ ... applyAttribs(a,this)}});
       function applyAttribs(a,b){ ... a.dom.style.backgroundColor = hexToRGB(...) }
   Estilo inline vence folha de estilo; sem !important a regra não pega.
   ---------------------------------------------------------------------------- */
.x-mask {
    background: rgba(255, 255, 255, 0.82) !important;
    -webkit-backdrop-filter: blur(1.5px);
    backdrop-filter: blur(1.5px);
}

/* ----------------------------------------------------------------------------
   O cartão.

   O livro entra como background-image DO CARTÃO, e não num ::before, porque o
   ::before fica reservado para a linha de saudação com o nome do usuário — só
   existem dois pseudo-elementos por elemento e ambos têm dono aqui.

   As animações moram DENTRO do SVG (@keyframes no próprio arquivo). Isso foi
   MEDIDO antes de entrar: dois screenshots do mesmo ponto, 1.747 pixels
   diferentes na versão background-image. Não é suposição.

   max-width + a remoção do nowrap são o que deixa o balão estreito e alto,
   em vez da faixa larga de uma linha só.
   ---------------------------------------------------------------------------- */
.x-mask-msg {
    box-sizing: border-box;
    max-width: 300px;
    min-width: 210px;
    border: none !important;
    border-radius: 14px !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64' role='img' aria-label='Digitalizando'%3E %3Cstyle%3E /* Animacoes DENTRO do SVG. E exatamente isto que o teste verifica: se rodam quando o arquivo e usado como background-image / img. */ .pagina %7B transform-origin: 32px 44px; %7D .p1 %7B animation: folhear 2.4s ease-in-out infinite; %7D .p2 %7B animation: folhear 2.4s ease-in-out infinite .8s; %7D .p3 %7B animation: folhear 2.4s ease-in-out infinite 1.6s; %7D %40keyframes folhear %7B 0%25 %7B transform: rotateY(0deg); opacity: 0; %7D 12%25 %7B opacity: 1; %7D 55%25 %7B opacity: 1; %7D 70%25 %7B transform: rotateY(-150deg); opacity: 0; %7D 100%25 %7B transform: rotateY(-150deg); opacity: 0; %7D %7D .luz %7B animation: varrer 2.4s ease-in-out infinite; %7D %40keyframes varrer %7B 0%25, 100%25 %7B transform: translateY(0); opacity: 0; %7D 15%25 %7B opacity: .9; %7D 50%25 %7B transform: translateY(20px); opacity: .9; %7D 85%25 %7B opacity: 0; %7D %7D %3C/style%3E %3Cpath d='M6 46c8-4 16-4 25 0V18C22 14 14 14 6 18z' fill='%231E3B8C' opacity='.14'/%3E %3Cpath d='M58 46c-8-4-16-4-25 0V18c9-4 17-4 25 0z' fill='%231E3B8C' opacity='.14'/%3E %3Cpath d='M6 46c8-4 16-4 25 0V18C22 14 14 14 6 18z' fill='none' stroke='%231E3B8C' stroke-width='2.4' stroke-linejoin='round'/%3E %3Cpath d='M58 46c-8-4-16-4-25 0V18c9-4 17-4 25 0z' fill='none' stroke='%231E3B8C' stroke-width='2.4' stroke-linejoin='round'/%3E %3Cline x1='32' y1='17' x2='32' y2='46' stroke='%231E3B8C' stroke-width='2.4' stroke-linecap='round'/%3E %3Cg class='pagina p1'%3E%3Cpath d='M33 20c7-3 14-3 22 0v22c-8-3-15-3-22 0z' fill='%23ffffff' stroke='%231E3B8C' stroke-width='1.6'/%3E%3C/g%3E %3Cg class='pagina p2'%3E%3Cpath d='M33 20c7-3 14-3 22 0v22c-8-3-15-3-22 0z' fill='%23ffffff' stroke='%231E3B8C' stroke-width='1.6'/%3E%3C/g%3E %3Cg class='pagina p3'%3E%3Cpath d='M33 20c7-3 14-3 22 0v22c-8-3-15-3-22 0z' fill='%23ffffff' stroke='%231E3B8C' stroke-width='1.6'/%3E%3C/g%3E %3Cg class='luz'%3E %3Crect x='8' y='24' width='48' height='3' rx='1.5' fill='%2300E0B8'/%3E %3Crect x='8' y='24' width='48' height='9' rx='2' fill='%2300E0B8' opacity='.22'/%3E %3C/g%3E %3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center 18px !important;
    background-size: 56px 56px !important;
    box-shadow: 0 10px 30px rgba(16, 26, 42, 0.20) !important;
    padding: 84px 24px 20px !important;
    text-align: center;
}

.x-mask-msg .x-mask-msg-inner,
.x-mask-msg .x-mask-msg-text {
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

/* ----------------------------------------------------------------------------
   O texto.

   Sem white-space:nowrap - era ele que forçava a faixa larga. Agora quebra
   dentro do max-width acima.
   ---------------------------------------------------------------------------- */
.x-mask-msg .x-mask-msg-text {
    background-image: none !important;
    white-space: normal !important;
    font-size: 13px;
    line-height: 1.45;
    color: #40546b;
    font-weight: 400;
}

/* ----------------------------------------------------------------------------
   A saudação com o nome do usuário.

   O nome chega por uma variável CSS definida UMA VEZ por sessão, em
   TframeModulo_GED.UniFrameCreate - logo depois do AddJS do favicon.

   NÃO é no Main.pas: aquela unit não está no .dpr e nenhuma outra lhe dá uses,
   então é código morto. A primeira tentativa foi lá, compilou com BUILD OK, e
   o binário saiu com ZERO ocorrências de "egd-saudacao".

   POR QUE É SAUDAÇÃO E NÃO "Aguarde, Fábio...": as 124 mensagens de máscara do
   projeto, em 45 redações diferentes, JÁ começam com "Aguarde". Prefixar aqui
   produziria "Aguarde, Fábio... / Aguarde... Seu pedido está sendo
   Processado". A saudação resolve a personalização sem duplicar, e sem
   reescrever nenhuma das 124.
   ---------------------------------------------------------------------------- */
.x-mask-msg .x-mask-msg-text::before {
    content: var(--egd-saudacao, "Só um instante");
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
    font-weight: 600;
    color: #1E2A3A;
    letter-spacing: .2px;
}

/* ----------------------------------------------------------------------------
   MOVIMENTO REDUZIDO

   A intenção do bloco anterior era "continua vendo o livro, parado". Não era o
   que acontecia: quando a animação passou do CSS para dentro do data URI, este
   @media ficou só desligando o backdrop-filter, e o livro seguia folheando em
   looping para quem pediu menos movimento no sistema.

   E não adianta levar a media query para dentro do <style> do SVG. MEDIDO, com
   um SVG de três estados (uma cor por ramo) renderizado em <img> e lido pixel a
   pixel via canvas:

     página no-preference  ->  o SVG casou 'reduce'
     página reduce         ->  o SVG casou 'reduce'
     sem emulação          ->  o SVG casou 'reduce'

   Ou seja: dentro de SVG-usado-como-imagem essa media query é CONSTANTE, não
   reflete a preferência de ninguém. Pôr a regra lá dentro mataria a animação
   para todo mundo; envolver a animação em 'no-preference' faria ela nunca
   rodar. Os dois caminhos "por dentro" erram pelo mesmo motivo.

   O que funciona é trocar a imagem por FORA, aqui, que roda no documento
   hospedeiro e enxerga a preferência normalmente. Medido em Chromium; a solução
   não depende do motor, justamente porque não pede ao SVG que enxergue nada.

   É o mesmo livro, sem o <style>, sem as três páginas folheando e sem a barra
   de luz. Livro parado, não ausência de livro: aqui o movimento não é enfeite,
   é o sinal de que algo está acontecendo — tirar o desenho deixaria a caixa
   muda.

   ATENÇÃO ao mexer neste data URI: todo '#' de cor precisa virar %23. Em
   url("data:..."), o '#' inicia o fragmento e o navegador descarta dali em
   diante - o SVG chega cortado e não renderiza, sem erro nenhum no console.
   ---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .x-mask {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .x-mask-msg {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='64' height='64' role='img' aria-label='Digitalizando'%3E %3Cpath d='M6 46c8-4 16-4 25 0V18C22 14 14 14 6 18z' fill='%231E3B8C' opacity='.14'/%3E %3Cpath d='M58 46c-8-4-16-4-25 0V18c9-4 17-4 25 0z' fill='%231E3B8C' opacity='.14'/%3E %3Cpath d='M6 46c8-4 16-4 25 0V18C22 14 14 14 6 18z' fill='none' stroke='%231E3B8C' stroke-width='2.4' stroke-linejoin='round'/%3E %3Cpath d='M58 46c-8-4-16-4-25 0V18c9-4 17-4 25 0z' fill='none' stroke='%231E3B8C' stroke-width='2.4' stroke-linejoin='round'/%3E %3Cline x1='32' y1='17' x2='32' y2='46' stroke='%231E3B8C' stroke-width='2.4' stroke-linecap='round'/%3E %3C/svg%3E") !important;
    }
}

/* ----------------------------------------------------------------------------
   O overlay proprio da aplicacao (#global-loading-overlay).

   Estas tres regras estavam DUPLICADAS, identicas, injetadas em runtime por
   SEIS arquivos JS: gridfiles_documentos, gridfiles_ocerizacao,
   gridfiles_certificacao, gridfiles_sumarizacao, griddocumentos_digitalizacao
   e pesquisavancada. Cada um criava a propria <style> a cada carga do store.

   Este e o lugar certo por dois motivos. Primeiro, o arquivo ja e CustomFiles
   (MainModule.pas:2177), entao vale para a aplicacao inteira. Segundo, ele ja
   existe justamente para unificar as DUAS esperas que o cabecalho la em cima
   descreve - e o overlay era a metade (B) daquela historia, que continuava
   morando espalhada por seis arquivos.

   MEDIDO antes de mover: os seis rodam no documento PAI - cinco injetados em
   ClientEvents.store.load pelo Delphi, griddocumentos_digitalizacao via
   CustomFiles - e nenhum HTML de iframe os carrega. E o pai que CustomFiles
   alcanca; se algum rodasse dentro de iframe, esta folha nao chegaria nele.

   NAO inclui gridfiles_digitalizacao.js: aquele tem o proprio conjunto com
   prefixo (.gridfilesdigitaliza-loading-overlay), de proposito, e nao usa
   estas classes.
   ---------------------------------------------------------------------------- */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loading-content {
    text-align: center;
    font-size: 1.5rem;
    color: #000;
}

.d-none {
    display: none !important;
}