/* Demonstrações vivas da página (js/demos.js), por cima do kit do painel (editor.css). */

/* ---- o lote rodando (abertura) ---- */
#demo-lote { margin-top: 56px; }
.nxd-lote .nx-fila { min-height: 0; }
.nxd-lote .nx-pasta { transition: border-color .3s, background-color .3s; }
.nxd-lote .nx-acao .nx-moldura { flex: 1; min-width: 0; }
.nxd-lote .nx-processar { width: 100%; }
.nxd-lote .nx-progresso-fill { transition: none; }
.nxd-lote .nx-log { height: 148px; overflow: hidden; }
.nxd-resumo .nx-toggle { pointer-events: none; }
@container nx-janela (max-width: 640px) {
  .nxd-lote .nx-janela-corpo { grid-template-columns: 1fr; }
  .nxd-resumo { display: none; }
  .nxd-lote .nx-acao { flex-wrap: wrap; }
  .nxd-lote .nx-log { height: 112px; }
}

/* ---- o editor clicável ---- */
.nxd-corpo { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 22px; padding: 20px 24px 24px; align-items: start; }
.nxd-palco { position: sticky; top: 84px; display: grid; justify-items: center; gap: 10px; }
.nxd-visor { --nx-visor-largura: 280px; position: relative; overflow: hidden; }
.nxd-visor video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nxd-leg { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.nxd-headline { position: absolute; z-index: 4; left: 50%; top: 9%; transform: translateX(-50%); max-width: 88%; text-align: center;
  font: 700 16px/1.15 'NXT Liberation Sans', 'Liberation Sans', Arial, sans-serif; color: #fff; padding: .14em .4em; border-radius: .32em; white-space: pre-wrap; }
.nxd-hl-fundo { background: #000; }
.nxd-hl-texto { -webkit-text-stroke: .16em #000; paint-order: stroke fill; }
.nxd-seta { position: absolute; z-index: 5; left: 10%; top: 62%; width: 9%; animation: nxd-balanco .5s ease-in-out infinite alternate; filter: drop-shadow(0 2px 3px rgba(0,0,0,.5)); }
@keyframes nxd-balanco { to { transform: translateY(14%); } }
.nxd-zona { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.nxd-zona i { position: absolute; background: rgba(255, 70, 70, .28); border: 1px dashed rgba(255, 110, 110, .85); }
.nxd-auto { text-align: center; max-width: 260px; }
.nxd-painel { --nx-col-altura: none; }
.nxd-abas { margin-bottom: 14px; }
.nxd-grade { max-height: 318px; overflow-y: auto; padding: 2px 4px 6px 2px; margin-bottom: 6px; scrollbar-width: thin; scrollbar-color: rgba(57,255,106,.28) transparent; }
.nxd-grade .nx-grade-estilos { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.nxd-grade .nx-estilo-tile-amostra { height: 54px; overflow: hidden; }
.nxd-conta, .nxd-val { color: var(--nx-verde); font-weight: 700; text-transform: none; letter-spacing: 0; }
.nxd-painel .nx-entrada { width: 100%; }
.nxd-som[aria-pressed="true"] { color: var(--nx-verde); border-color: var(--nx-verde); }
[data-aba][hidden], .nxd-editor [hidden] { display: none !important; }
@media (max-width: 820px) {
  .nxd-corpo { grid-template-columns: 1fr; padding: 14px; gap: 14px; }
  .nxd-palco { position: static; }
  .nxd-visor { --nx-visor-largura: 200px; }
  .nxd-grade { max-height: 232px; }
}
@media (prefers-reduced-motion: reduce) { .nxd-seta { animation: none; } }

.nxd-seta svg { display: block; width: 100%; height: auto; }
.nxd-grade .nx-estilo-tile { aspect-ratio: auto; min-height: 0; padding: 6px 4px 5px; gap: 3px; font-size: 10px; }
.nxd-som { white-space: nowrap; }