:root {
  --laranja: #ff5a1f;
  --laranja-escuro: #e64a19;
  --preto: #1a1a1a;
  --cinza: #6b6b6b;
  --cinza-claro: #f4f4f5;
  --borda: #e5e5e5;
  --verde: #2e8b57;
  --vermelho: #d64545;
  --branco: #ffffff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: #fafafa;
  color: var(--preto);
}

.topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 32px;
  background: var(--branco);
  border-bottom: 1px solid var(--borda);
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-svg { height: 57px; width: auto; }

.topo-titulo {
  font-size: 15px;
  color: var(--cinza);
}

.link-traceability {
  font-size: 13px;
  font-weight: 600;
  color: var(--cinza);
  text-decoration: none;
  border: 1px solid var(--borda);
  padding: 6px 14px;
  border-radius: 6px;
}
.link-traceability:hover { color: var(--laranja); border-color: var(--laranja); }

button.link-traceability { background: none; cursor: pointer; font-family: inherit; }

.tag-admin {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--laranja-escuro);
  background: #fff1e8;
  border: 1px solid var(--laranja);
  border-radius: 999px;
  padding: 3px 10px;
  margin-left: -6px;
}
.tag-admin.oculto { display: none; }

.banner-aviso {
  background: #fff3e0;
  border-bottom: 1px solid #ffcc80;
  color: #9a5b1f;
  padding: 10px 32px;
  font-size: 14px;
  text-align: center;
}

.banner-aviso.oculto { display: none; }

.conteudo {
  max-width: 720px;
  margin: 32px auto;
  padding: 0 16px;
}

.faixa-info {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--branco);
  border: 1px solid #ffd7bd;
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 600;
  color: var(--laranja-escuro);
  letter-spacing: 0.2px;
}

.faixa-icone { font-size: 18px; }

.pagina-grid {
  display: grid;
  grid-template-columns: 1fr minmax(0, 720px) 1fr;
  gap: 28px;
  max-width: 1400px;
  margin: 32px auto;
  padding: 0 16px;
  align-items: start;
}

.coluna-vantagens {
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: sticky;
  top: 24px;
}

.vantagens-titulo {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cinza);
  text-transform: uppercase;
  letter-spacing: .03em;
  margin: 0 0 2px;
}

/* Altura fixa (não min-height): sem isso, a caixa muda de tamanho a cada
   troca de cartão (textos com tamanhos diferentes) — se o mouse ficar
   parado bem na borda, isso dispara mouseenter/mouseleave repetidamente
   e empilha timers, fazendo o carrossel parecer girar rápido demais. */
.carrossel-vantagens { height: 185px; overflow: hidden; }

.vantagem-card {
  display: none;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--laranja);
  border-radius: 10px;
  padding: 14px 16px;
  transition: box-shadow .15s;
}
.vantagem-card:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.08); }

.vantagem-card.ativo {
  display: block;
  animation: vantagem-entrada .4s ease;
}

@keyframes vantagem-entrada {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.carrossel-pontos {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 12px;
}

.ponto {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: none;
  background: var(--borda);
  cursor: pointer;
  padding: 0;
  transition: width .15s, border-radius .15s, background .15s;
}
.ponto.ativo { background: var(--laranja); width: 20px; border-radius: 4px; }

.vantagem-card strong {
  display: block;
  font-size: 14px;
  margin: 6px 0 4px;
  color: var(--preto);
}

.vantagem-card p {
  margin: 0;
  font-size: 12.5px;
  color: var(--cinza);
  line-height: 1.45;
}

.vantagem-tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 4px;
}
.tag-corrige { background: #e6f4ec; color: var(--verde); }
.tag-avisa { background: #fff4e8; color: var(--laranja-escuro); }

@media (max-width: 1100px) {
  .pagina-grid { grid-template-columns: 1fr; max-width: 720px; }
  .coluna-vantagens { position: static; }
  .coluna-vantagens:first-of-type { order: 2; }
  .conteudo { order: 1; }
  .coluna-vantagens:last-of-type { order: 3; }
}

/* .conteudo já é a coluna central do grid aqui — sem isso, ela duplicaria
   a centralização/max-width que faz sentido quando usada solta (login,
   traceability), gerando uma coluna estreita demais dentro da coluna. */
.pagina-grid .conteudo { max-width: none; margin: 0; padding: 0; }

.cartao {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 24px;
}

.campo-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.opcional {
  font-weight: 400;
  color: var(--cinza);
  font-size: 13px;
}

.campo-texto {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 20px;
}

.campo-texto:focus {
  outline: none;
  border-color: var(--laranja);
}

.campo-texto.campo-invalido {
  border-color: var(--vermelho);
}

.campo-erro {
  color: var(--vermelho);
  font-size: 12.5px;
  margin: 0 0 16px;
}
.campo-erro.oculto { display: none; }

.linha-identificacao {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.campo-texto-reduzido {
  width: 160px;
  flex-shrink: 0;
  margin-bottom: 0;
}

.botao-secundario {
  flex-shrink: 0;
  border: 1px solid var(--laranja);
  background: var(--branco);
  color: var(--laranja-escuro);
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.botao-secundario:hover:not(:disabled) { background: var(--laranja); color: var(--branco); }
.botao-secundario:disabled { border-color: #d8d8d8; color: var(--cinza); cursor: not-allowed; }

.identificacao-resumo {
  font-size: 13px;
  padding-top: 11px;
  line-height: 1.4;
}
.identificacao-resumo.encontrado { color: var(--verde); font-weight: 600; }
.identificacao-resumo.nao-encontrado { color: var(--vermelho); font-weight: 600; }
.identificacao-resumo.oculto { display: none; }

.area-envio.oculto { display: none; }

.dropzone {
  border: 2px dashed #d8d8d8;
  border-radius: 12px;
  padding: 36px 20px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}

.dropzone:hover,
.dropzone.arrastando {
  border-color: var(--laranja);
  background: #fff8f4;
}

.dropzone-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cinza-claro);
  font-size: 18px;
  color: var(--laranja);
  margin-bottom: 10px;
}

.dropzone p { margin: 4px 0; font-size: 14px; color: var(--preto); }

.dropzone-detalhe { color: var(--cinza); font-size: 12px !important; }

.lista-arquivos {
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.item-arquivo {
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  font-size: 13px;
}

.item-arquivo-linha {
  display: flex;
  align-items: center;
  gap: 10px;
}

.item-arquivo .nome {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.item-arquivo-detalhe {
  margin: 6px 0 0 30px;
  font-size: 12px;
  color: var(--cinza);
}

.item-arquivo-detalhe.conforme { color: var(--verde); font-weight: 600; }
.item-arquivo-detalhe.nao-conforme,
.item-arquivo-detalhe.erro { color: var(--vermelho); font-weight: 600; }

.item-arquivo-problemas {
  margin: 6px 0 0 30px;
  padding-left: 16px;
  font-size: 12px;
  color: var(--preto);
}

.item-arquivo-problemas li { margin-bottom: 8px; }
.item-arquivo-problemas .paginas { color: var(--cinza); font-weight: 400; font-size: 11.5px; }

.termometro-dpi { margin: 8px 0 6px; max-width: 320px; }

.termometro-barra {
  position: relative;
  height: 10px;
  border-radius: 5px;
  /* vermelho até 150/400 = 37.5%, amarelo até 200/400 = 50%, verde daí pra frente */
  background: linear-gradient(
    to right,
    var(--vermelho) 0%,
    var(--vermelho) 37.5%,
    #e0a900 37.5%,
    #e0a900 50%,
    var(--verde) 50%,
    var(--verde) 100%
  );
  margin-top: 14px;
}

.termometro-ponteiro {
  position: absolute;
  top: -14px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  white-space: nowrap;
}

.termometro-valor {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--preto);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 4px;
  padding: 0 4px;
  margin-bottom: 1px;
}

.termometro-seta {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--preto);
}

.termometro-legenda {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--cinza);
  margin-top: 3px;
}

.termometro-descricao { font-size: 11.5px; font-weight: 600; margin-top: 4px; }
.termometro-descricao.vermelho { color: var(--vermelho); }
.termometro-descricao.amarelo { color: #b8860b; }
.termometro-descricao.verde { color: var(--verde); }

.botoes-pagina { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; }

.botao-pagina {
  border: 1px solid var(--laranja);
  background: #fff8f4;
  color: var(--laranja-escuro);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  cursor: pointer;
}
.botao-pagina:hover { background: var(--laranja); color: white; }

.paginas-mais { font-size: 11px; color: var(--cinza); }

.confirmacao-problema {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 10px;
  background: #fff8f4;
  border: 1px solid var(--laranja);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--preto);
  cursor: pointer;
}
.confirmacao-problema input { margin-top: 2px; flex-shrink: 0; cursor: pointer; }

.aviso-critico {
  margin-top: 8px;
  padding: 8px 10px;
  background: #fdeceb;
  border: 1px solid var(--vermelho);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--vermelho);
}

.aviso-informativo {
  margin-top: 8px;
  padding: 8px 10px;
  background: #eaf3fb;
  border: 1px solid #3b82c4;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #1f5c8b;
}

.preview-pdf {
  margin: 10px 0 0 30px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  overflow: hidden;
}
.preview-pdf.oculto { display: none; }

.preview-pdf-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: var(--cinza-claro);
  font-size: 12px;
  font-weight: 600;
}

.preview-pdf-cabecalho .fechar-preview {
  border: none;
  background: none;
  color: var(--cinza);
  font-size: 12px;
  cursor: pointer;
  font-weight: 400;
}
.preview-pdf-cabecalho .fechar-preview:hover { color: var(--vermelho); }

.preview-pdf-corpo {
  position: relative;
  max-height: 480px;
  overflow: auto;
  background: var(--cinza-claro);
  text-align: center;
  padding: 10px;
}

.preview-pdf-canvas-wrap {
  position: relative;
  display: inline-block;
  max-width: 100%;
}

.preview-pdf-termometro {
  margin-top: 10px;
  text-align: left;
}
.preview-pdf-termometro:empty { margin-top: 0; }
.preview-pdf-termometro .termometro-dpi { margin: 0 auto; }

.preview-pdf-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  background: var(--branco);
  cursor: zoom-in;
}

/* Lupa: mostra, num círculo que segue o mouse, uma versão ampliada do
   trecho da página embaixo do cursor — renderizada numa resolução mais
   alta que a prévia normal, pra não ficar borrada ao ampliar. */
.preview-pdf-lupa {
  position: absolute;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 3px solid var(--laranja);
  box-shadow: 0 4px 16px rgba(0,0,0,0.35);
  overflow: hidden;
  pointer-events: none;
  z-index: 5;
  background: var(--branco);
}

.preview-pdf-lupa canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.preview-pdf-lupa.oculto { display: none; }

.preview-pdf-carregando,
.preview-pdf-erro {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  background: var(--branco);
  font-size: 12px;
  color: var(--cinza);
  text-align: center;
  padding: 0 24px;
  overflow-y: auto;
}
.preview-pdf-erro { color: var(--vermelho); }
.preview-pdf-carregando.oculto,
.preview-pdf-erro.oculto { display: none; }

.preview-pdf-log {
  margin-top: 6px;
  font-size: 11px;
  color: var(--cinza);
  text-align: left;
  max-height: 120px;
  overflow-y: auto;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
}
.preview-pdf-log div { padding: 1px 0; }
.preview-pdf-log div:last-child { color: var(--preto); font-weight: 600; }

.botao-tentar-novamente {
  border: 1px solid var(--vermelho);
  background: var(--branco);
  color: var(--vermelho);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 14px;
  border-radius: 6px;
  cursor: pointer;
}
.botao-tentar-novamente:hover { background: var(--vermelho); color: white; }

.spinner {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid var(--cinza-claro);
  border-top-color: var(--laranja);
  border-radius: 50%;
  animation: girar 0.7s linear infinite;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

.status.conforme { color: var(--verde); }
.status.nao-conforme { color: var(--vermelho); }

.item-arquivo .tamanho { color: var(--cinza); font-size: 12px; }

.item-arquivo .status { font-size: 16px; width: 20px; text-align: center; }
.item-arquivo .status.pendente { color: var(--cinza); }
.item-arquivo .status.sucesso { color: var(--verde); }
.item-arquivo .status.erro { color: var(--vermelho); }

.item-arquivo .remover {
  background: none;
  border: none;
  color: var(--cinza);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px 4px;
}

.item-arquivo .remover:hover { color: var(--vermelho); }

.botao-primario {
  width: 100%;
  margin-top: 20px;
  padding: 13px;
  border: none;
  border-radius: 10px;
  background: var(--laranja);
  color: var(--branco);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

.botao-primario:hover:not(:disabled) { background: var(--laranja-escuro); }

.botao-primario:disabled {
  background: #d8d8d8;
  cursor: not-allowed;
}

.progresso-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.progresso-wrap.oculto { display: none; }

.progresso-barra {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--cinza-claro);
  overflow: hidden;
}

.progresso-preenchido {
  height: 100%;
  width: 0%;
  background: var(--laranja);
  transition: width .2s;
}

/* Depois que o navegador termina de enviar os bytes pro nosso servidor
   (100%), ainda falta o nosso servidor repassar o arquivo pro Google
   Drive — em arquivos grandes isso pode levar dezenas de segundos.
   Sem essa animação, a barra parada em 100% parecia travada. */
.progresso-preenchido.enviando-drive {
  background: repeating-linear-gradient(
    45deg,
    var(--laranja),
    var(--laranja) 12px,
    color-mix(in srgb, var(--laranja) 70%, white) 12px,
    color-mix(in srgb, var(--laranja) 70%, white) 24px
  );
  background-size: 34px 34px;
  animation: progresso-listrado 1s linear infinite;
}

@keyframes progresso-listrado {
  from { background-position: 0 0; }
  to { background-position: 34px 0; }
}

#progresso-texto { font-size: 12px; color: var(--cinza); min-width: 34px; text-align: right; }

/* Barra de progresso da análise do Intelicrom (substitui a rodinha
   girando) — enche conforme o tempo decorrido se aproxima da estimativa;
   se passar do previsto, vira a mesma animação listrada acima. */
.analise-progresso { margin: 8px 0 0 30px; max-width: 320px; }

.analise-barra {
  height: 6px;
  border-radius: 3px;
  background: var(--cinza-claro);
  overflow: hidden;
}

.analise-preenchida {
  height: 100%;
  width: 0%;
  background: var(--laranja);
  transition: width 1s linear;
}

.analise-preenchida.analise-excedida {
  background: repeating-linear-gradient(
    45deg,
    var(--laranja),
    var(--laranja) 12px,
    color-mix(in srgb, var(--laranja) 70%, white) 12px,
    color-mix(in srgb, var(--laranja) 70%, white) 24px
  );
  background-size: 34px 34px;
  animation: progresso-listrado 1s linear infinite;
}

.aprovacao {
  margin: 10px 0 0 30px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.aprovacao.oculto { display: none; }

.botao-aprovar {
  border: none;
  background: var(--verde);
  color: var(--branco);
  font-size: 13px;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 8px;
  cursor: pointer;
}
.botao-aprovar:hover:not(:disabled) { background: #256e46; }
.botao-aprovar:disabled { background: #a8c9b6; cursor: not-allowed; }

.aprovacao-feito { color: var(--verde); font-weight: 700; font-size: 13px; }
.aprovacao-erro { color: var(--vermelho); font-size: 12px; }
.aprovacao-pendente { color: var(--cinza); font-size: 12px; }

.notificacao-item { margin: 6px 0 0 30px; }

.botao-notificar {
  border: 1px solid var(--cinza);
  background: var(--branco);
  color: var(--cinza);
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.botao-notificar:hover { border-color: var(--laranja); color: var(--laranja); }

.notificacao-ativa { color: var(--cinza); font-size: 12px; }

/* Página Traceability */

.conteudo-larga { max-width: 1080px; }

.rastreio-barra {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

#rastreio-busca {
  flex: 1;
  min-width: 220px;
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  font-size: 13px;
}
#rastreio-busca:focus { outline: none; border-color: var(--laranja); }

.rastreio-contagem { font-size: 12px; color: var(--cinza); margin-left: auto; }

.rastreio-tabela-wrap {
  overflow-x: auto;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 8px;
}

.rastreio-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  white-space: nowrap;
}

.rastreio-tabela th {
  text-align: left;
  padding: 10px 14px;
  background: var(--cinza-claro);
  color: var(--cinza);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--borda);
}

.rastreio-tabela td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--borda);
}

.rastreio-tabela tbody tr:last-child td { border-bottom: none; }
.rastreio-tabela tbody tr:hover { background: #fffaf7; }

.rastreio-vazio { text-align: center; color: var(--cinza); padding: 30px !important; white-space: normal; }

.rastreio-problema { white-space: normal; max-width: 320px; font-size: 12.5px; }
.rastreio-problema-vazio { color: var(--cinza); }

.pilula {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.pilula.conforme { background: #e6f4ec; color: var(--verde); }
.pilula.nao-conforme { background: #fdeceb; color: var(--vermelho); }
.pilula.processando { background: var(--cinza-claro); color: var(--cinza); }
.pilula.vazia { color: var(--cinza); font-weight: 400; }

.pilula.aprovado-limpo { background: #e6f4ec; color: var(--verde); }
.pilula.aprovado-com-erro { background: #fff4e8; color: var(--laranja-escuro); }

@media (max-width: 520px) {
  .topo { flex-direction: column; align-items: flex-start; gap: 6px; }
  .conteudo { margin: 20px auto; }
}