/* Estilização para botões de IA nas tabelas */

/* Sobrescrever regras problemáticas do style.css para botões de IA */
.largura-maxima-200 td .btn-ia-ligar,
.largura-maxima-200 td .btn-ia-processar,
.largura-maxima-200 td .btn-ia-personalizado,
.dataTable td .btn-ia-ligar,
.dataTable td .btn-ia-processar,
.dataTable td .btn-ia-personalizado,
[class*="coluna-ia-"] .btn-ia-ligar,
[class*="coluna-ia-"] .btn-ia-processar,
[class*="coluna-ia-"] .btn-ia-personalizado,
.btn-ia-ligar,
.btn-ia-processar,
.btn-ia-personalizado {
  position: relative !important;
  transform: none !important;
  right: auto !important;
  top: auto !important;
  z-index: auto !important;
  margin: 0 auto !important;
}

/* Botão de IA ON/OFF */
.btn-ia-ligar {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
  border: 2px solid #dee2e6 !important;
  border-radius: 6px !important;
  width: 70px !important;
  max-width: 70px !important;
  height: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-size: 12px !important;
  color: #6c757d !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  overflow: visible !important;
  margin: 0 auto !important;
}

/* Estados LIGADO e DESLIGADO */
.btn-ia-ligar.ligado {
  /* Usa variáveis CSS para permitir personalização dinâmica */
  background: linear-gradient(135deg, var(--ia-ligar-ligado, #28a745) 0%, var(--ia-ligar-ligado2, #20c997) 100%) !important;
  border-color: var(--ia-ligar-ligado, #28a745) !important;
  color: white !important;
}

.btn-ia-ligar.desligado {
  background: linear-gradient(135deg, var(--ia-ligar-desligado, #dc3545) 0%, var(--ia-ligar-desligado2, #c82333) 100%) !important;
  border-color: var(--ia-ligar-desligado, #dc3545) !important;
  color: white !important;
}

/* Hover states */
.btn-ia-ligar:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Botão de processamento (teste/produção) */
.btn-ia-processar {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
  border: 2px solid #dee2e6 !important;
  border-radius: 6px !important;
  width: 70px !important;
  max-width: 70px !important;
  height: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-size: 12px !important;
  color: #6c757d !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  overflow: visible !important;
  margin: 0 auto !important;
}

/* Botão de REPROCESSAR TUDO */
.btn-ia-reprocessar {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
  border: 2px solid #6c757d !important;
  border-radius: 6px !important;
  width: 100px !important;
  max-width: 120px !important;
  height: 28px !important;
  padding: 0 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  position: relative !important;
  overflow: visible !important;
  margin: 0 auto !important;
}

.btn-ia-reprocessar.parado {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
  border-color: #6c757d !important;
}

.btn-ia-reprocessar.reprocessando {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-color: #667eea !important;
  animation: pulse-reprocessar 1.5s ease-in-out infinite !important;
}

@keyframes pulse-reprocessar {
  0%, 100% { 
    opacity: 1;
    transform: scale(1);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1.02);
  }
}

.btn-ia-reprocessar:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25) !important;
}

/* Estados TESTE e PRODUÇÃO */
.btn-ia-processar.teste {
  background: linear-gradient(135deg, var(--ia-ambiente-teste, #ffc107) 0%, var(--ia-ambiente-teste2, #ffb607) 100%) !important;
  border-color: var(--ia-ambiente-teste, #ffc107) !important;
  color: white !important;
}

.btn-ia-processar.producao {
  background: linear-gradient(135deg, var(--ia-ambiente-producao, #0d6efd) 0%, var(--ia-ambiente-producao2, #0b5ed7) 100%) !important;
  border-color: var(--ia-ambiente-producao, #0d6efd) !important;
  color: white !important;
}

/* Estado REPROCESSANDO (quando usado como botão de reprocessamento em orquestra) */
.btn-ia-processar.reprocessando {
  animation: pulse-reprocessar 1.5s ease-in-out infinite !important;
}

@keyframes pulse-reprocessar {
  0%, 100% { 
    opacity: 1;
    transform: scale(1);
  }
  50% { 
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Hover states para processamento */
.btn-ia-processar:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Botão personalizado */
.btn-ia-personalizado {
  background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%) !important;
  border: 2px solid #dee2e6 !important;
  border-radius: 6px !important;
  width: 70px !important;
  max-width: 70px !important;
  height: 28px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-size: 12px !important;
  color: #6c757d !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  overflow: visible !important;
  margin: 0 auto !important;
}

/* Estados do botão personalizado */
.btn-ia-personalizado.estado-1,
.btn-ia-personalizado.parado {
  background: linear-gradient(135deg, var(--ia-personalizado-estado1, #6c757d) 0%, var(--ia-personalizado-estado1b, #5a6268) 100%) !important;
  border-color: var(--ia-personalizado-estado1, #6c757d) !important;
  color: white !important;
}

.btn-ia-personalizado.estado-2,
.btn-ia-personalizado.processando {
  background: linear-gradient(135deg, var(--ia-personalizado-estado2, #0dcaf0) 0%, var(--ia-personalizado-estado2b, #0aa2c0) 100%) !important;
  border-color: var(--ia-personalizado-estado2, #0dcaf0) !important;
  color: white !important;
  animation: pulse-processar-vazios 2s ease-in-out infinite;
}

@keyframes pulse-processar-vazios {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(13, 202, 240, 0);
  }
}

/* Hover state para botão personalizado */
.btn-ia-personalizado:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Para manter o foco visível */
.btn-ia-ligar:focus-visible,
.btn-ia-processar:focus-visible,
.btn-ia-personalizado:focus-visible {
  outline: 2px solid #0d6efd;
  outline-offset: 2px;
}

/* Colunas de IA */
[class*="coluna-ia-"] {
  width: auto !important;
  min-width: fit-content !important;
  max-width: none !important;
  text-align: center;
  vertical-align: middle;
  position: relative;
  z-index: 0;
  padding: 4px 8px !important;
  white-space: nowrap !important;
}

/* Estilos para colunas separadas */
.coluna-ia-ligarDesligar,
.coluna-ia-ambiente,
.coluna-ia-personalizado {
  width: auto !important;
  min-width: fit-content !important;
  max-width: none !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding: 4px 8px !important;
  position: relative;
  z-index: 0;
  white-space: nowrap !important;
}

[class*="coluna-ia-"] th {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-right: 2px solid #dee2e6;
  position: relative;
  font-weight: 600;
  color: #495057;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  white-space: nowrap !important;
}

/* Container para os dois botões de IA lado a lado */
.ia-botoes-container {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Responsividade */
@media (max-width: 768px) {
  .btn-ia-ligar,
  .btn-ia-processar,
  .btn-ia-personalizado,
  .largura-maxima-200 td .btn-ia-ligar,
  .largura-maxima-200 td .btn-ia-processar,
  .largura-maxima-200 td .btn-ia-personalizado,
  .dataTable td .btn-ia-ligar,
  .dataTable td .btn-ia-processar,
  .dataTable td .btn-ia-personalizado {
    width: 60px !important;
    height: 26px !important;
    font-size: 11px !important;
    position: relative !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
    margin: 0 auto !important;
  }
  
  [class*="coluna-ia-"] {
    width: auto !important;
    min-width: fit-content !important;
    white-space: nowrap !important;
  }
  
  .ia-botoes-container {
    gap: 3px !important;
  }
}

@media (max-width: 480px) {
  .btn-ia-ligar,
  .btn-ia-processar,
  .btn-ia-personalizado,
  .largura-maxima-200 td .btn-ia-ligar,
  .largura-maxima-200 td .btn-ia-processar,
  .largura-maxima-200 td .btn-ia-personalizado,
  .dataTable td .btn-ia-ligar,
  .dataTable td .btn-ia-processar,
  .dataTable td .btn-ia-personalizado {
    width: 50px !important;
    height: 24px !important;
    font-size: 10px !important;
    position: static !important;
    transform: none !important;
    margin: 0 auto !important;
  }
  
  [class*="coluna-ia-"] {
    width: auto !important;
    min-width: fit-content !important;
    white-space: nowrap !important;
  }
  
  .ia-botoes-container {
    gap: 2px !important;
  }
}

/* Garantir que botões de IA fiquem atrás dos títulos */
.btn-ia-ligar,
.btn-ia-processar,
.btn-ia-personalizado {
  position: relative;
  z-index: 0 !important;
}

/* Loading state para botões de IA quando estão processando */
.btn-ia-ligar.loading,
.btn-ia-processar.loading,
.btn-ia-personalizado.loading {
  pointer-events: none !important;
  opacity: 0.7 !important;
}

.btn-ia-ligar.loading::after,
.btn-ia-processar.loading::after,
.btn-ia-personalizado.loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Customizações para cores e ícones personalizados */
.btn-ia-ligar[style*="background-color"],
.btn-ia-processar[style*="background-color"],
.btn-ia-personalizado[style*="background-color"] {
  background-image: none !important;
}

/* Estado: tarefa em fila - usa variáveis com fallback para amarelo claro */
.btn-ia-processar.ativo-reprocessamento,
.ativo-reprocessamento {
  background: linear-gradient(135deg, var(--ia-reprocessamento-bg1, #fff3cd) 0%, var(--ia-reprocessamento-bg2, #ffc107) 100%) !important;
  border-color: var(--ia-reprocessamento-border, #ffcd39) !important;
  color: var(--ia-reprocessamento-text, #4a2f00) !important;
}

/* Micro animação opcional para microtexto */
.pulse-micro {
  animation: pulseMicro 0.7s ease-in-out 2;
}
@keyframes pulseMicro {
  0% { opacity: 0.6; }
  50% { opacity: 1; }
  100% { opacity: 0.6; }
}

/* ========== BOTÃO REPROCESSAR TUDO ========== */
.btn-ia-reprocessar {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
  border: 2px solid #6c757d !important;
  border-radius: 6px !important;
  width: 140px !important;
  max-width: 140px !important;
  height: 32px !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  overflow: visible !important;
  margin: 0 auto !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
}

/* Estado PARADO (cinza) */
.btn-ia-reprocessar.parado {
  background: linear-gradient(135deg, #6c757d 0%, #5a6268 100%) !important;
  border-color: #6c757d !important;
}

.btn-ia-reprocessar.parado:hover {
  background: linear-gradient(135deg, #5a6268 0%, #495057 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.4) !important;
}

/* Estado REPROCESSANDO (roxo com animação) */
.btn-ia-reprocessar.reprocessando {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  border-color: #667eea !important;
  animation: pulseReprocessamento 2s ease-in-out infinite;
}

@keyframes pulseReprocessamento {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(102, 126, 234, 0);
  }
}

/* Responsividade para botão reprocessar */
@media (max-width: 768px) {
  .btn-ia-reprocessar {
    width: 120px !important;
    height: 30px !important;
    font-size: 10px !important;
  }
}

@media (max-width: 480px) {
  .btn-ia-reprocessar {
    width: 100px !important;
    height: 28px !important;
    font-size: 9px !important;
    letter-spacing: 0.3px !important;
  }
}

/* Para ícones personalizados */
.btn-ia-ligar i.bi,
.btn-ia-processar i.bi,
.btn-ia-personalizado i.bi {
  color: inherit !important;
  font-size: inherit !important;
  display: inline-block !important;
  font-family: "bootstrap-icons" !important;
}

/* Garantir que texto personalizado seja visível */
.btn-ia-ligar,
.btn-ia-processar,
.btn-ia-personalizado {
  font-weight: bold !important;
  text-align: center !important;
}