/* =========================================================================
   LOADER GLOBAL — a tela congelada enquanto a ação acontece (08/10/2026)
   =========================================================================

   Pedido do dono: "crie um loader legal e animado para nosso sistema e aplique
   em toda ação do sistema, congele a tela e mostre o loader até a ação ser
   concluída".

   POR QUE UM ARQUIVO PRÓPRIO, e não dentro do theme.css: a página pública da
   cotação (`/cotar/{token}`) é autônoma de propósito — ela não carrega o tema
   do sistema, porque quem a abre não tem conta e não deve ver nada do painel.
   Ela precisa do loader do mesmo jeito. Um arquivo pequeno, ligado nos dois
   lugares, evita duplicar trinta linhas de CSS que um dia divergiriam.

   O DESENHO: um prédio subindo dentro de um anel que gira. É a metáfora da
   casa — obra — e dá um movimento com começo e fim aparente, que é o que faz
   a espera parecer curta. Sem imagem, sem fonte extra: só CSS, para aparecer
   no primeiro quadro mesmo com a rede ruim.
   ========================================================================= */

:root {
  --ilic-ld-fundo: rgba(244, 246, 249, .80);
  --ilic-ld-anel:  #2f80ed;
  --ilic-ld-tijolo:#1e3a5f;
}

:root[data-theme="dark"], [data-theme="dark"] {
  --ilic-ld-fundo: rgba(10, 14, 19, .72);
  --ilic-ld-anel:  #5fa0ff;
  --ilic-ld-tijolo:#9fc0ea;
}

/* ------------------------------------------------------------ a cortina */
.ilic-ld {
  position: fixed;
  inset: 0;
  /* Acima do modal (1500) e do empilhamento de avisos (2000): quando a ação
     dispara, nada mais na tela deve aceitar clique. */
  z-index: 2600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ilic-ld-fundo);
  -webkit-backdrop-filter: blur(5px) saturate(.9);
          backdrop-filter: blur(5px) saturate(.9);
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, visibility .18s;
}

.ilic-ld.is-on {
  opacity: 1;
  visibility: visible;
}

.ilic-ld-caixa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .85rem;
  padding: 2rem 2.4rem;
  min-width: 15rem;
  max-width: calc(100vw - 2rem);
  background: var(--ilic-surface, #fff);
  border: 1px solid var(--ilic-border, #e6e9ef);
  border-radius: var(--ilic-radius-lg, 16px);
  box-shadow: var(--ilic-shadow-lg, 0 12px 32px rgba(16,24,40,.12));
  text-align: center;
  /* Sobe um fio ao aparecer: dá a sensação de que a tela respondeu ao clique. */
  transform: translateY(6px) scale(.98);
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}

.ilic-ld.is-on .ilic-ld-caixa { transform: none; }

/* ------------------------------------------------------- o prédio subindo */
.ilic-ld-marca {
  position: relative;
  width: 68px;
  height: 68px;
}

/* O anel. `mask` recorta o miolo, deixando só a borda — assim o gradiente
   cônico vira um arco que gira, sem SVG e sem imagem. */
.ilic-ld-marca::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0turn,
              transparent 0 62%,
              var(--ilic-ld-anel) 88%,
              transparent 100%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  animation: ilic-ld-girar 1.15s linear infinite;
}

/* O traço fraco por baixo, para o anel não parecer quebrado no trecho vazio. */
.ilic-ld-marca::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 3px solid var(--ilic-ld-anel);
  opacity: .14;
}

.ilic-ld-obra {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 4px;
  padding-bottom: 22px;
}

.ilic-ld-obra span {
  display: block;
  width: 6px;
  height: 7px;
  border-radius: 2px;
  background: var(--ilic-ld-tijolo);
  opacity: .35;
  animation: ilic-ld-subir 1.25s ease-in-out infinite;
}

/* O atraso em cascata é o que faz parecer um prédio sendo levantado, e não
   três barras piscando juntas. */
.ilic-ld-obra span:nth-child(2) { animation-delay: .16s; }
.ilic-ld-obra span:nth-child(3) { animation-delay: .32s; }

@keyframes ilic-ld-girar { to { transform: rotate(1turn); } }

@keyframes ilic-ld-subir {
  0%, 100% { height: 7px;  opacity: .3; }
  45%      { height: 24px; opacity: 1;  }
  70%      { height: 24px; opacity: 1;  }
}

/* ---------------------------------------------------------------- textos */
.ilic-ld-texto {
  font-weight: 600;
  font-size: .95rem;
  color: var(--ilic-text, #1f2733);
  letter-spacing: -.01em;
}

.ilic-ld-dica {
  font-size: .75rem;
  color: var(--ilic-text-muted, #667085);
  max-width: 17rem;
  line-height: 1.5;
}

/* Só aparece quando a espera passa do normal — ver `app.js`. Antes disso,
   avisar que "pode demorar" cria a ansiedade que o loader veio tirar. */
.ilic-ld-lento { display: none; }
.ilic-ld.is-lento .ilic-ld-lento { display: block; }

/* ----------------------------------------------- a barra fina do topo */
/* Vale sozinha para a navegação entre telas: dá resposta imediata ao clique
   sem tapar a tela que a pessoa ainda está lendo. */
.ilic-ld-barra {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 2601;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events: none;
}

.ilic-ld-barra.is-on { opacity: 1; }

.ilic-ld-barra::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38%;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(90deg, transparent, var(--ilic-ld-anel), transparent);
  animation: ilic-ld-correr 1.05s cubic-bezier(.45,.05,.3,1) infinite;
}

@keyframes ilic-ld-correr {
  0%   { left: -38%; }
  100% { left: 100%; }
}

/* --------------------------------------------- quem pediu menos movimento */
/* Não é enfeite: animação em laço dispara enxaqueca e crise vestibular em
   parte das pessoas, e o sistema fica aberto o dia inteiro. Aqui o loader
   continua existindo — ele só para de se mexer. */
@media (prefers-reduced-motion: reduce) {
  .ilic-ld,
  .ilic-ld-caixa { transition: none; }

  .ilic-ld-marca::before,
  .ilic-ld-obra span,
  .ilic-ld-barra::after { animation: none; }

  .ilic-ld-marca::before { background: none; border: 3px solid var(--ilic-ld-anel); border-radius: 50%; }
  .ilic-ld-obra span { height: 16px; opacity: .8; }
  .ilic-ld-barra::after { left: 0; width: 100%; }
}

/* Impressão nunca leva a cortina junto. */
@media print {
  .ilic-ld, .ilic-ld-barra { display: none !important; }
}