/* ============================================
   ECOVISION IA — Upload CSS
   Estilos exclusivos da página de upload 2.0
   ============================================ */

/* ============================================
   HEADER DA PÁGINA
   ============================================ */
.upload-header {
  margin-bottom: var(--espaco-5);
}

.upload-header h2 {
  font-size: var(--tamanho-xl);
  font-weight: var(--peso-bold);
  color: var(--cor-texto);
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-1);
}

.upload-header h2 i { color: var(--cor-primaria); }

.upload-header p {
  color: var(--cor-texto-secundario);
  font-size: var(--tamanho-sm);
  margin-bottom: 0;
}

/* ============================================
   ZONA DE UPLOAD
   ============================================ */
.upload-zona-container { margin-bottom: var(--espaco-5); }

.upload-zona {
  border: 2px dashed var(--cor-borda);
  border-radius: var(--raio-2xl);
  padding: var(--espaco-8) var(--espaco-4);
  text-align: center;
  background: var(--cor-fundo);
  transition: all var(--transicao-media);
  cursor: pointer;
  position: relative;
}

.upload-zona:hover {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-fundo);
}

.upload-zona.drag-over {
  border-color: var(--cor-primaria);
  background: var(--cor-primaria-fundo);
  border-style: solid;
  transform: scale(1.01);
  box-shadow: var(--sombra-lg);
}

.upload-zona.drag-over .upload-zona-icone { animation: pulse 0.8s ease infinite; }

.upload-zona-icone {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--cor-primaria-fundo);
  color: var(--cor-primaria);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto var(--espaco-4);
}

.upload-zona h3 {
  font-size: var(--tamanho-md);
  font-weight: var(--peso-semibold);
  color: var(--cor-texto);
  margin-bottom: var(--espaco-1);
}

.upload-zona p {
  color: var(--cor-texto-secundario);
  font-size: var(--tamanho-sm);
  margin-bottom: var(--espaco-1);
}

.upload-formatos {
  font-size: var(--tamanho-xs) !important;
  color: var(--cor-texto-terciario) !important;
  margin-bottom: var(--espaco-4) !important;
}

.upload-opcoes { margin-top: var(--espaco-3); }

/* ============================================
   FILA DE PROCESSAMENTO
   ============================================ */
.upload-fila { margin-bottom: var(--espaco-4); }

.fila-titulo {
  font-size: var(--tamanho-sm);
  font-weight: var(--peso-semibold);
  margin-bottom: var(--espaco-2);
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
}

.fila-item {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--cor-branca);
  border: 1px solid var(--cor-borda-clara);
  border-radius: var(--raio-md);
  margin-bottom: var(--espaco-2);
  font-size: var(--tamanho-sm);
}

.fila-icone {
  width: 36px; height: 36px;
  border-radius: var(--raio-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}

.fila-icone.aguardando { background: var(--cor-fundo-escuro); color: var(--cor-texto-terciario); }
.fila-icone.processando { background: var(--cor-primaria-fundo); color: var(--cor-primaria); animation: pulse 1s ease infinite; }
.fila-icone.concluido { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.fila-icone.erro { background: var(--cor-perigo-fundo); color: var(--cor-perigo); }

.fila-info { flex: 1; min-width: 0; }
.fila-nome { font-weight: var(--peso-medio); color: var(--cor-texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fila-tamanho { font-size: var(--tamanho-xs); color: var(--cor-texto-terciario); }
.fila-status { font-size: var(--tamanho-xs); font-weight: var(--peso-medio); white-space: nowrap; }

/* ============================================
   ÁREA DE PROCESSAMENTO
   ============================================ */
.processamento-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--espaco-4);
}

.processamento-arquivo {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  font-size: var(--tamanho-sm);
  font-weight: var(--peso-medio);
  color: var(--cor-texto);
}

.processamento-arquivo i { color: var(--cor-primaria); font-size: 1.2rem; }

.processamento-barra { margin-bottom: var(--espaco-4); }

.processamento-status {
  display: block;
  text-align: center;
  font-size: var(--tamanho-sm);
  color: var(--cor-texto-secundario);
  margin-top: var(--espaco-2);
}

.processamento-etapas {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.processamento-etapas::before {
  content: '';
  position: absolute;
  top: 16px; left: 30px; right: 30px;
  height: 2px;
  background: var(--cor-borda);
  z-index: 0;
}

.etapa {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--espaco-1);
  position: relative;
  z-index: 1;
  flex: 1;
}

.etapa i {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cor-fundo-escuro);
  color: var(--cor-texto-terciario);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  transition: all var(--transicao-media);
}

.etapa span { font-size: var(--tamanho-xs); color: var(--cor-texto-terciario); font-weight: var(--peso-medio); }

.etapa.concluida i { background: var(--cor-sucesso); color: white; }
.etapa.concluida span { color: var(--cor-sucesso); }
.etapa.ativa i { background: var(--cor-primaria); color: white; animation: pulse 1s ease infinite; }
.etapa.ativa span { color: var(--cor-primaria); font-weight: var(--peso-semibold); }

/* ============================================
   RESULTADOS ACUMULADOS
   ============================================ */
.upload-resultados {
  display: flex;
  flex-direction: column;
  gap: var(--espaco-4);
}

.resultado-bloco {
  background: var(--cor-branca);
  border: 1px solid var(--cor-borda-clara);
  border-radius: var(--raio-xl);
  overflow: hidden;
}

.resultado-bloco-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espaco-3) var(--espaco-4);
  background: var(--cor-sucesso-fundo);
  border-bottom: 1px solid #a7f3d0;
}

.resultado-bloco-header h4 {
  font-size: var(--tamanho-sm);
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  color: #065f46;
}

.resultado-bloco-body { padding: var(--espaco-4); }

/* Campos editáveis */
.campo-editavel {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  margin-bottom: var(--espaco-2);
}

.campo-editavel label {
  font-size: var(--tamanho-xs);
  color: var(--cor-texto-terciario);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 80px;
  flex-shrink: 0;
}

.campo-editavel input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--cor-borda);
  border-radius: var(--raio-sm);
  font-family: var(--fonte-principal);
  font-size: var(--tamanho-sm);
  color: var(--cor-texto);
  background: var(--cor-fundo);
  transition: all var(--transicao-rapida);
}

.campo-editavel input:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-fundo);
  background: var(--cor-branca);
}

/* Grupos de prazo */
.prazo-grupo {
  margin-bottom: var(--espaco-3);
  border: 1px solid var(--cor-borda-clara);
  border-radius: var(--raio-lg);
  overflow: hidden;
}

.prazo-grupo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--espaco-2) var(--espaco-3);
  font-size: var(--tamanho-sm);
  font-weight: var(--peso-semibold);
}

.prazo-grupo-header.verde { background: var(--cor-sucesso-fundo); color: #065f46; }
.prazo-grupo-header.amarelo { background: var(--cor-atencao-fundo); color: #92400e; }
.prazo-grupo-header.laranja { background: #fff7ed; color: #9a3412; }
.prazo-grupo-header.vermelho { background: var(--cor-perigo-fundo); color: #991b1b; }
.prazo-grupo-header.azul { background: var(--cor-info-fundo); color: #1e40af; }

.prazo-grupo-body { padding: var(--espaco-2); }

.cond-item-editavel {
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
  padding: var(--espaco-1) var(--espaco-2);
  margin-bottom: 4px;
}

.cond-item-editavel input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  font-family: var(--fonte-principal);
  font-size: var(--tamanho-sm);
  color: var(--cor-texto);
  background: transparent;
  transition: all var(--transicao-rapida);
}

.cond-item-editavel input:hover { background: var(--cor-fundo); }
.cond-item-editavel input:focus {
  outline: none;
  border-color: var(--cor-primaria);
  background: var(--cor-branca);
}

.cond-item-editavel .btn-icone {
  opacity: 0;
  transition: opacity var(--transicao-rapida);
}

.cond-item-editavel:hover .btn-icone { opacity: 1; }

.btn-add-cond {
  font-size: var(--tamanho-xs);
  color: var(--cor-primaria);
  cursor: pointer;
  padding: var(--espaco-1) var(--espaco-2);
  display: flex;
  align-items: center;
  gap: var(--espaco-1);
  background: none;
  border: none;
  font-family: var(--fonte-principal);
}

.btn-add-cond:hover { color: var(--cor-primaria-escura); }

/* Ações do resultado */
.resultado-bloco-acoes {
  display: flex;
  gap: var(--espaco-2);
  padding: var(--espaco-3) var(--espaco-4);
  border-top: 1px solid var(--cor-borda-clara);
  background: var(--cor-fundo);
}

/* ============================================
   HISTÓRICO
   ============================================ */
.upload-historico { margin-top: var(--espaco-6); }

.upload-historico h3 {
  font-size: var(--tamanho-md);
  font-weight: var(--peso-semibold);
  margin-bottom: var(--espaco-3);
  display: flex;
  align-items: center;
  gap: var(--espaco-2);
}

.historico-item {
  display: flex;
  align-items: center;
  gap: var(--espaco-3);
  padding: var(--espaco-3);
  background: var(--cor-branca);
  border: 1px solid var(--cor-borda-clara);
  border-radius: var(--raio-md);
  margin-bottom: var(--espaco-2);
  transition: all var(--transicao-rapida);
  cursor: pointer;
}

.historico-item:hover { box-shadow: var(--sombra-sm); border-color: var(--cor-borda); }

.historico-icone {
  width: 40px; height: 40px;
  border-radius: var(--raio-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.historico-icone.pdf { background: var(--cor-perigo-fundo); color: var(--cor-perigo); }
.historico-icone.imagem { background: var(--cor-info-fundo); color: var(--cor-info); }

.historico-info { flex: 1; min-width: 0; }

.historico-nome {
  font-weight: var(--peso-medio);
  font-size: var(--tamanho-sm);
  color: var(--cor-texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.historico-data { font-size: var(--tamanho-xs); color: var(--cor-texto-terciario); }

.historico-acoes { display: flex; gap: var(--espaco-1); }

/* ============================================
   RESPONSIVO
   ============================================ */
@media (max-width: 767px) {
  .upload-zona { padding: var(--espaco-6) var(--espaco-3); }
  .resultado-bloco-acoes { flex-direction: column; }
  .resultado-bloco-acoes .btn { width: 100%; justify-content: center; }
  .processamento-etapas::before { left: 20px; right: 20px; }
  .campo-editavel { flex-direction: column; align-items: flex-start; }
  .campo-editavel label { min-width: auto; }
}

@media (min-width: 768px) {
  .upload-zona { padding: var(--espaco-10) var(--espaco-6); }
}