/* Carregamento: caneta escrevendo uma folha (assets/report-loader.js).
   Ciclo de 3,6 s: quatro linhas escritas, caneta levanta entre elas, pausa e a tinta some. */
.ld {
  --ld-ink: #002f6c;
  --ld-pen: #2563eb;
  --ld-paper: #fff;
  --ld-line: #c9d3e0;
  display: grid; place-items: center; align-content: center; gap: 12px;
  min-height: 220px; padding: 28px 16px;
  color: #58647a; font: 500 12.5px/1.4 'IBM Plex Sans', 'Segoe UI', Arial, sans-serif;
  text-align: center;
}
.ld-art { width: 132px; height: auto; overflow: visible; }
.ld-sheet { fill: var(--ld-paper); stroke: var(--ld-line); stroke-width: 2; stroke-linejoin: round; filter: drop-shadow(0 6px 10px rgba(0, 47, 108, .12)); }
.ld-fold { fill: #eef2f7; stroke: var(--ld-line); stroke-width: 2; stroke-linejoin: round; }
.ld-line { fill: none; stroke: var(--ld-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.ld-pen { transform-box: view-box; transform-origin: 0 0; transform: translate(82px, 92px); }
.ld-nib { fill: #17223a; }
.ld-collar { fill: #9fb3cf; }
.ld-body { fill: var(--ld-pen); }
.ld-cap { fill: #1d3f8f; }
.ld-clip { fill: #dbe6ff; }
.ld-txt { letter-spacing: .01em; }

/* Variante compacta: dentro de janelas e painéis. */
.ld-compact { display: flex; justify-content: flex-start; gap: 12px; min-height: 0; padding: 8px 0; text-align: left; }
.ld-compact .ld-art { width: 58px; flex: none; }

/* Onde a lista de obras/relatórios já tinha a caixa tracejada, mantém o espaço dela. */
.library-loading.ld { display: grid; min-height: 200px; }
#work-menu .library-loading.ld { min-height: 0; padding: 18px 6px; gap: 8px; }
#work-menu .library-loading.ld .ld-art { width: 64px; }

@media (prefers-reduced-motion: no-preference) {
  .ld { animation: ld-in .3s .1s ease both; }
  .ld-line { stroke-dashoffset: 1; animation: 3.6s linear infinite; }
  .ld-l1 { animation-name: ld-l1; }
  .ld-l2 { animation-name: ld-l2; }
  .ld-l3 { animation-name: ld-l3; }
  .ld-l4 { animation-name: ld-l4; }
  .ld-ink { animation: ld-ink 3.6s linear infinite; }
  .ld-pen { animation: ld-pen 3.6s linear infinite; }
}
@keyframes ld-in { from { opacity: 0; } }
/* Tinta de cada linha acompanha a caneta (mesmos tempos do ld-pen). */
@keyframes ld-l1 { 0%, 4% { stroke-dashoffset: 1; } 22%, 100% { stroke-dashoffset: 0; } }
@keyframes ld-l2 { 0%, 26% { stroke-dashoffset: 1; } 42%, 100% { stroke-dashoffset: 0; } }
@keyframes ld-l3 { 0%, 46% { stroke-dashoffset: 1; } 64%, 100% { stroke-dashoffset: 0; } }
@keyframes ld-l4 { 0%, 68% { stroke-dashoffset: 1; } 78%, 100% { stroke-dashoffset: 0; } }
@keyframes ld-ink { 0%, 88% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes ld-pen {
  0%    { transform: translate(46px, 39px); }
  4%    { transform: translate(46px, 44px); }
  22%   { transform: translate(112px, 44px); }
  24%   { transform: translate(112px, 39px); }
  25.5% { transform: translate(46px, 55px); }
  26%   { transform: translate(46px, 60px); }
  42%   { transform: translate(106px, 60px); }
  43.5% { transform: translate(106px, 55px); }
  45.5% { transform: translate(46px, 71px); }
  46%   { transform: translate(46px, 76px); }
  64%   { transform: translate(112px, 76px); }
  65.5% { transform: translate(112px, 71px); }
  67.5% { transform: translate(46px, 87px); }
  68%   { transform: translate(46px, 92px); }
  78%   { transform: translate(82px, 92px); }
  81%, 90% { transform: translate(90px, 84px); }
  100%  { transform: translate(46px, 39px); }
}
@media print { .ld { display: none !important; } }