/* ==========================================================================
   FiscPro: painel de progresso das operações fiscais
   Mostrado sempre que o sistema fala com o MotorNFe: emissão, cancelamento,
   carta de correção, inutilização, cadastro, certificado e consultas.
   ========================================================================== */

.progresso-fundo {
  position: fixed; inset: 0; z-index: 960;
  background: var(--fundo-modal);
  backdrop-filter: blur(5px);
  display: flex; align-items: center; justify-content: center;
  padding: 30px;
  opacity: 0; transition: opacity .18s;
}
.progresso-fundo.visivel { opacity: 1; }

/* Uma janela aberta DEPOIS do painel fica POR CIMA dele. É o caso da
   confirmação com o código do aplicativo, que a ponte pede no meio de uma
   operação crítica (ponte.js, `confirmar: true`), e da pergunta do titular
   diferente no envio do certificado. Com o painel em 960 e o modal em 900,
   ela abria ESCONDIDA atrás, e a tela ficava "Enviando o certificado digital"
   esperando um código que ninguém via (06/10/2026). A janela aberta ANTES do
   painel continua embaixo dele, como sempre. */
.progresso-fundo ~ .modal-fundo { z-index: 970; }

.progresso-painel {
  width: min(500px, 100%);
  background: var(--fundo-modal-caixa);
  backdrop-filter: var(--vidro-desfoque);
  -webkit-backdrop-filter: var(--vidro-desfoque);
  border: 1px solid var(--vidro-borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra), var(--vidro-brilho);
  padding: 26px 26px 22px;
  transform: translateY(12px) scale(.985);
  transition: transform .18s;
}
.progresso-fundo.visivel .progresso-painel { transform: none; }

.progresso-topo { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }

.progresso-selo {
  width: 48px; height: 48px; min-width: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--selo-fundo); color: var(--selo-texto);
  position: relative;
}
.progresso-selo::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  border: 2px solid var(--superficie-3); border-top-color: var(--ceu);
  animation: girar 1.1s linear infinite;
}
.progresso-painel.concluido .progresso-selo { background: var(--tinta-sucesso); color: var(--sucesso); }
.progresso-painel.concluido .progresso-selo::before { animation: none; border-color: var(--borda-sucesso); }
.progresso-painel.falhou .progresso-selo { background: var(--tinta-erro); color: var(--vermelho); }
.progresso-painel.falhou .progresso-selo::before { animation: none; border-color: var(--borda-erro); }

.progresso-titulo { flex: 1; min-width: 0; }
.progresso-titulo b { display: block; font-size: 19px; line-height: 1.25; color: var(--texto-titulo); font-weight: 700; }
.progresso-titulo span { display: block; font-size: 14px; color: var(--texto-fraco); margin-top: 2px; }

.progresso-barra {
  height: 4px; border-radius: 999px; background: var(--superficie-3);
  overflow: hidden; margin-bottom: 20px;
}
.progresso-barra .preenchimento {
  height: 100%; border-radius: 999px; width: 0;
  background: linear-gradient(90deg, var(--petroleo-medio), var(--ouro));
  transition: width .35s ease;
}
.progresso-painel.falhou .progresso-barra .preenchimento { background: linear-gradient(90deg, var(--vermelho), var(--laranja)); }

.progresso-etapas { display: flex; flex-direction: column; gap: 2px; }

.progresso-etapa {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 11px; border-radius: 9px;
  font-size: 14.5px; color: var(--texto-tenue);
  transition: var(--transicao);
}
.progresso-etapa .marca {
  width: 22px; height: 22px; min-width: 22px; border-radius: 50%;
  border: 1.5px solid var(--linha); display: grid; place-items: center;
  color: var(--texto-tenue); font-size: 12.5px; font-weight: 600;
  transition: var(--transicao);
}
.progresso-etapa .texto-etapa { flex: 1; min-width: 0; }
.progresso-etapa .observacao {
  display: block; font-size: 13px; color: var(--texto-tenue); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.progresso-etapa.corrente {
  background: var(--ceu-suave);
  color: var(--texto-titulo);
}
.progresso-etapa.corrente .marca {
  border-color: var(--ceu-borda);
  border-top-color: var(--ceu);
  color: transparent;
  animation: girar .9s linear infinite;
}

.progresso-etapa.concluida { color: var(--texto-suave); }
.progresso-etapa.concluida .marca {
  background: var(--tinta-sucesso); border-color: var(--borda-sucesso);
  color: var(--sucesso);
}

.progresso-etapa.falhou { color: var(--vermelho-claro); background: var(--tinta-erro); }
.progresso-etapa.falhou .marca {
  background: var(--tinta-erro); border-color: var(--borda-erro); color: var(--vermelho);
}

.progresso-etapa.pulada { opacity: .45; }

.progresso-mensagem {
  margin-top: 16px; padding: 11px 14px; border-radius: var(--raio-p);
  font-size: 14px; line-height: 1.55;
  border: 1px solid transparent;
  max-height: 190px; overflow-y: auto;
  white-space: pre-wrap; word-break: break-word;
}
.progresso-mensagem.sucesso { background: var(--tinta-sucesso); border-color: var(--borda-sucesso); color: var(--texto-sucesso); }
.progresso-mensagem.erro { background: var(--tinta-erro); border-color: var(--borda-erro); color: var(--texto-erro); }
.progresso-mensagem.alerta { background: var(--tinta-atencao); border-color: var(--borda-atencao); color: var(--texto-alerta); }

.progresso-rodape { display: flex; gap: 9px; justify-content: flex-end; margin-top: 18px; flex-wrap: wrap; }
.progresso-rodape .espacador { flex: 1; }

.progresso-cronometro {
  font-size: 13px; color: var(--texto-tenue); font-variant-numeric: tabular-nums;
  display: flex; align-items: center; gap: 6px;
}

/* indicador discreto no topo da janela, para operações rápidas */
.faixa-atividade {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 990;
  background: transparent; overflow: hidden; pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.faixa-atividade.visivel { opacity: 1; }
.faixa-atividade::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--petroleo-medio), var(--ouro), transparent);
  transform: translateX(-100%);
  animation: deslizar 1.15s ease-in-out infinite;
}
@keyframes deslizar {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}