/* ── Indicador de carregamento — PADRÃO ÚNICO DO SISTEMA ──
   Toda variação de "carregando" (popup de página, linha de tabela, gráfico,
   card, e a transição de tela cheia do login) usa a MESMA imagem
   (poltrona girando) e os MESMOS tokens de tamanho/animação definidos aqui.
   Nunca duplicar largura de gif, keyframe de barra ou de pulso em outro CSS. */

:root {
  --loading-gif-sm: 86px;   /* seção: gráfico, card, linha de tabela (.sohome-loading-md) */
  --loading-gif-lg: 150px;  /* popup global de página (.lp-gif) */
  --loading-gif-xl: 300px;  /* transição de tela cheia do login (.auth-transition-content img) */
}

@keyframes loading-bar-sweep {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}
@keyframes field-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .lp-bar-fill,
  .field-spinner { animation-duration: .001s !important; }
}

/* ---------- campo de dado individual (número/%/valor) ainda carregando ----------
   Padrão único pra qualquer valor pontual (não uma seção inteira) que ainda
   não chegou — ex: % de um card, um stat isolado. Diferente de .spinner/
   .sohome-loading (gif, pra seções inteiras) e de "—" (resultado real vazio,
   não carregando). Uso: <span class="field-spinner" aria-hidden="true"></span> */
.field-spinner {
  display: inline-block;
  width: 13px;
  height: 13px;
  border: 2px solid var(--border-light);
  border-top-color: var(--action-primary);
  border-radius: 50%;
  animation: field-spin .7s linear infinite;
  vertical-align: middle;
}

/* ---------- popup global de página (#loading-popup, navigation.html) ---------- */

#loading-popup {
  position: fixed;
  top: 0; right: 0; bottom: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(69, 70, 65, 0.42);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
#loading-popup.is-visible { display: flex; }

.loading-popup-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 200px;
  background: var(--bg-main);
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,.28);
  padding: 26px 26px 22px;
}

.lp-gif {
  width: var(--loading-gif-lg);
  display: block;
}

/* barra indeterminada — reutilizada por qualquer variação (popup, transição) */
.lp-bar {
  width: 100%;
  height: 4px;
  background: var(--bg-hover);
  border-radius: 4px;
  overflow: hidden;
  margin-top: 14px;
}
/* usada dentro de .sohome-loading (gráfico/tabela/matriz) — .lp-bar sozinha
   herdaria width:100% do container flex, ficando larga demais perto do gif
   pequeno acima; aqui trava numa largura fixa, igual ao card do popup. */
.sohome-loading-bar { width: var(--loading-gif-sm); margin-top: 4px; }

.lp-bar-fill {
  width: 32%;
  height: 100%;
  background: var(--action-primary);
  border-radius: 4px;
  animation: loading-bar-sweep 1.3s ease-in-out infinite;
}

/* ---------- linha de tabela (tableLoadingRowHtml, utils-card.js) ----------
   O <td> só existe pra centralizar o MESMO .sohome-loading dos gráficos e
   cards — não existe mais uma variante própria de tabela (a antiga
   `<span class="spinner">` desenhava o gif como background e a barra em
   pseudo-elemento, que não pode recortar o preenchimento como
   .lp-bar > .lp-bar-fill faz; a barra escapava do trilho e ficava
   visivelmente diferente do resto do sistema). */
.loading {
  text-align: center;
  padding: 2rem 1rem;
  font-size: 12px;
  color: var(--text-primary);
}
/* Precisa de mais especificidade: a regra genérica de `tbody td` de cada
   tabela (`.table-wrap tbody td` em utils-table.css, `.modal-table tbody td`
   em cada CSS de módulo com modal —
   style_vendas/style_pronta_entrega/style_credito) tem especificidade maior
   que `.loading` sozinha e ganhava, reduzindo o padding e aplicando
   overflow:hidden/nowrap. Qualquer `<table>` NOVA precisa entrar aqui também
   (mesmo padrão, nunca resolver no CSS do módulo). */
.table-wrap tbody td.loading,
.modal-table tbody td.loading {
  padding: 2rem 1rem;
  overflow: visible;
  white-space: normal;
}

/* ---------- gráfico / card (sohome-loading) ----------
   Uso: sectionLoadingHtml(size) em utils-card.js — gif + .lp-bar, sem
   texto nenhum. */
.sohome-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.sohome-loading-gif { display: block; }

/* gráfico */
.sohome-loading-md { height: 150px; }
.sohome-loading-md .sohome-loading-gif { width: var(--loading-gif-sm); }