.badge-vermelho {
  background-color: #ffebee;
  color: #c62828;
  border: 1px solid #ef9a9a;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-azul {
  background-color: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-azul2 {
  background-color: #dbe9f6;  /* azul bem claro, puxando pro acinzentado */
  color: #0b3c91;             /* azul escuro intenso */
  border: 1px solid #5c9ded;  /* azul médio mais sóbrio */
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-verde {
  background-color: #e6f7f0;
  color: #10b981;
  border: 1px solid #10b981;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-verde2 {
  background-color: #e6f7f0;
  color: #10b981;
  border: 1px solid #10b981;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-verde3 {
  background-color: #e8fcef;
  color: #19c17d;
  border: 1px solid #19c17d;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-verde4 {
  background-color: #e0f5ea;
  color: #15a16c;
  border: 1px solid #15a16c;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-verde5 {
  background-color: #e6f7e6;
  color: #10b96c;
  border: 1px solid #10b96c;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-amarelo {
  background-color: #fffde7;
  color: #f9a825;
  border: 1px solid #fff59d;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-laranja {
  background-color: #fff3e0;
  color: #ef6c00;
  border: 1px solid #ffcc80;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-laranja-escuro {
  background-color: #ffe0b2;
  color: #e65100;
  border: 1px solid #ff9800;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-roxo {
  background-color: #f3e5f5;
  color: #6a1b9a;
  border: 1px solid #ce93d8;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-rosa {
  background-color: #fce4ec;
  color: #c2185b;
  border: 1px solid #f48fb1;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-cinza {
  background-color: #f5f5f5;
  color: #424242;
  border: 1px solid #bdbdbd;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-marrom {
  background-color: #efebe9;
  color: #5d4037;
  border: 1px solid #a1887f;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-ciano {
  background-color: #e0f7fa;
  color: #00838f;
  border: 1px solid #80deea;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

.badge-lima {
  background-color: #f9fbe7;
  color: #827717;
  border: 1px solid #dce775;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: bold;
  display: inline-block;
}

/* Estoque infinito */
.estoque-infinito {
  font-size: 24px;
  color: #1672d8;
  font-weight: bold;
}

.nao-utiliza {
color: #999;
font-style: italic;
}

.view-link {
  color: #1672d8;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  padding-right: 15px; /* Espaço para o ícone */
}

/* Cor ao passar o mouse */
.view-link:hover {
  color: #135ba1;
}

/* Efeito de sublinhado animado */
.view-link::before {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -2px;
  left: 0;
  background-color: #1672d8;
  transition: width 0.3s ease;
}

.view-link:hover::before {
  width: 100%;
}

/* Ícone Font Awesome */
.view-link::after {
  content: "\f302"; /* Código do ícone */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 0.8em;
  margin-left: 5px;
  opacity: 0.7;
  position: absolute;
  right: 10;
  top: 50%;
  transform: translateY(-50%);
}
th#sort-id, td.id-fatura {
  width: 1%; /* Ajusta a largura da coluna automaticamente ao conteúdo */
  white-space: nowrap; /* Impede que o texto quebre */
}

.id-fatura {
  font-family: monospace;
  font-weight: bold;
  color: #1672d8;
  background-color: #e8f4ff;
  padding: 4px 8px;
  border-radius: 4px;
  text-align: center;
  min-width: 45px;       /* Largura mínima */
  width: fit-content;    /* Adapta ao conteúdo */
  max-width: 70px;       /* Limita a largura máxima */
  white-space: nowrap;   /* Não quebra o texto */
  overflow: hidden;      /* Esconde o excesso */
  text-overflow: ellipsis; /* Mostra "..." quando necessário */
}

#tabela-aplicativos th:first-child, 
#tabela-aplicativos td:first-child {
  width: 1%;         /* Isso faz a coluna ocupar o mínimo possível */
  white-space: nowrap;
}

/* Quando passar o mouse, mostra o conteúdo completo se estiver cortado */
.id-fatura:hover {
  overflow: visible;
  max-width: none;
  z-index: 10;
  position: relative;
  background-color: #e8f4ff;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
/* =========================
   ESTILO GERAL PAGINA- Estilos base
   =========================

   Este arquivo contém os estilos gloabais que se usa em todas as pagina
   ARQUIVO: css\global\estrutura-page.css
========================= */


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
}

/* Container principal */
.main-content {
  padding: 20px;
  margin: 20px;
  border-radius: 8px;
  background-color: #f8f9fa;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1), 
              -5px -5px 10px rgba(0, 0, 0, 0.1),
              5px -5px 10px rgba(0, 0, 0, 0.1),
              -5px 5px 10px rgba(0, 0, 0, 0.1);
  position: relative; /* Necessário para o after funcionar */
  overflow: hidden;
}

/* Linha superior decorativa */
.main-content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: #1672d8; /* Mesma cor do .view-header */
  z-index: 1;
}

/* Estilo específico para o h1 */
h1 {
  color: #1672d8;
  margin-bottom: 10px;
  font-size: 2.2rem;
  text-align: left;
  width: 100%;
  display: flex;
  align-items: center;
}

h1::after {
  content: "";
  flex-grow: 1;
  height: 3px;
  background: #1672d8;
  margin-left: 15px;
}

td {
  white-space: nowrap;
}

/* =========================
   BASE COMUM A TODOS
========================= */
.btn-adicionar,
.btn-adicionar-vermelho,
.btn-adicionar-laranja {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 500;
  transition: all 0.25s ease;
  box-shadow: 0 4px 6px rgba(0,0,0,0.0);
  cursor: pointer;
}

.btn-adicionar i,
.btn-adicionar-vermelho i,
.btn-adicionar-laranja i {
  margin-right: 15px;
  font-size: 1rem;
  transition: transform 0.2s ease;
}

/* Estados comuns */
.btn-adicionar:hover,
.btn-adicionar-vermelho:hover,
.btn-adicionar-laranja:hover {
  transform: translateY(-2px);
}

.btn-adicionar:hover i,
.btn-adicionar-vermelho:hover i,
.btn-adicionar-laranja:hover i {
  transform: translateX(2px);
}

.btn-adicionar:active,
.btn-adicionar-vermelho:active,
.btn-adicionar-laranja:active {
  transform: translateY(1px);
}

/* =========================
   ESPECÍFICOS POR VARIANTE
========================= */

/* Azul (original .btn-adicionar) */
.btn-adicionar {
  background: linear-gradient(135deg, #1672d8 0%, #0d5ca8 100%);
  border-color: rgba(13, 92, 168, 0.2);
  box-shadow: 0 4px 6px rgba(22, 114, 216, 0.25);
}
.btn-adicionar:hover {
  background: linear-gradient(135deg, #0d5ca8 0%, #09498a 100%);
  box-shadow: 0 6px 12px rgba(22, 114, 216, 0.3);
}
.btn-adicionar:active {
  box-shadow: 0 2px 3px rgba(22, 114, 216, 0.2);
}

/* Vermelho (original .btn-adicionar-vermelho) */
.btn-adicionar-vermelho {
  background: linear-gradient(135deg, #d81616 0%, #a80d0d 100%);
  border-color: rgba(168, 13, 13, 0.2);
  box-shadow: 0 4px 6px rgba(216, 22, 22, 0.25);
}
.btn-adicionar-vermelho:hover {
  background: linear-gradient(135deg, #a80d0d 0%, #8a0909 100%);
  box-shadow: 0 6px 12px rgba(216, 22, 22, 0.3);
}
.btn-adicionar-vermelho:active {
  box-shadow: 0 2px 3px rgba(216, 22, 22, 0.2);
}

/* Laranja (novo .btn-adicionar-laranja) */
.btn-adicionar-laranja {
  background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
  border-color: rgba(245, 124, 0, 0.25);
  box-shadow: 0 4px 6px rgba(255, 152, 0, 0.3);
}
.btn-adicionar-laranja:hover {
  background: linear-gradient(135deg, #fb8c00 0%, #e65100 100%);
  box-shadow: 0 6px 12px rgba(255, 152, 0, 0.4);
}
.btn-adicionar-laranja:active {
  box-shadow: 0 2px 3px rgba(255, 152, 0, 0.25);
}

/* Breadcrumb (botao voltar) */
.breadcrumb {
  margin-bottom: 20px;
}

.breadcrumb-link {
  display: inline-flex;
  align-items: center;
  color: #1672d8;
  text-decoration: none;
  font-size: 1rem; /* Aumentado um pouco para melhor legibilidade */
  font-weight: 500;
  transition: color 0.2s ease, text-decoration 0.2s ease;
  position: relative;
  padding: 5px 0;
}

/* Efeito do ícone no hover */
.breadcrumb-link i {
  margin-right: 8px;
  font-size: 1.1rem;
  transition: transform 0.2s ease, color 0.2s ease;
}

.breadcrumb-link:hover {
  color: #135ba1;
}

/* Ícone deslizando suavemente no hover */
.breadcrumb-link:hover i {
  transform: translateX(-4px);
}

/* Subtle underline effect */
.breadcrumb-link::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background-color: #1672d8;
  position: absolute;
  bottom: -2px;
  left: 0;
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.breadcrumb-link:hover::after {
  transform: scaleX(1);
}

/* =========================
  Estilo para o trecho de pesquisa em todas as paginas
  Arquivo global para todas as paginas
  ARQUIVO: css\global\pesquisacontiner.css
========================= */

.search-add-container {
  background-color: #ffffff;
  padding: 1.25rem;
  border-radius: 8px;
  box-shadow: 5px 5px 10px #d1d5db, 
              -5px -5px 10px #ffffff, 
              -5px -5px 6px rgba(0, 0, 0, 0.08); /* Sombra mais para a esquerda */
  margin-bottom: 1.5rem;
  display: flex;
  gap: 1.25rem;
  align-items: center;
  justify-content: space-between;
}

.search-wrapper {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 500px;
}

.search-wrapper .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6B7280;
  font-size: 0.875rem;
  pointer-events: none;
}

.search-wrapper input {
  width: 100%;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Efeito de profundidade */
  padding: 0.75rem 2.5rem;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  font-size: 0.875rem;
  color: #1F2937;
  transition: all 0.2s ease;
}

.search-wrapper input:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.search-wrapper input::placeholder {
  color: #9CA3AF;
}

#clear-search {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  transition: all 0.2s ease;
}

#clear-search:hover {
  background-color: #F3F4F6;
  color: #ef4444;
}

.button-group {
  display: flex;
  gap: 10px;
  align-items: center;
}

/* BOTÃO X PESQUISA 2 */
#btn-limpar-pesquisa {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: #999;
  font-size: 1.25rem;
  cursor: pointer;
  padding: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  transition: all 0.2s ease;
}

#btn-limpar-pesquisa:hover {
  background-color: #F3F4F6;
  color: #ef4444;
}

.search-mobile-container {
  display: none;
}

.empty-state {
  background-color: #ffffff;
}

.empty-state td {
  border: none;
}

.empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 100%;
  padding: 40px 20px;
  margin: 0 auto;
}

.empty-state-title {
  color: #374151;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 10px 0;
}

.empty-state-description {
  color: #6B7280;
  font-size: 1rem;
  margin-bottom: 15px;
}

.empty-state-hint {
  color: #374151;
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 20px;
}

.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.empty-state-content .btn-adicionar {
  padding: 6px 12px;
  font-size: 0.82rem;
}

.empty-state-content .btn-adicionar i {
  font-size: 0.85rem;
  margin-right: 8px;
}


/* =========================
   MODAL GERAL - Estilos base
   =========================

   Este arquivo contém os estilos gloabais gerais dos modais
   ARQUIVO: css\global\modais-geral.css
========================= */

/* =========================
 Estrutura base dos modais
========================= */
.modal-content {
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.modal {
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
}

.modal-title-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.modal-title-wrapper i {
  font-size: 22px;
}

.modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.modal-body-wrapper {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transform: translate3d(0, 0, 0); /* Force hardware acceleration */
  -webkit-overflow-scrolling: touch; /* Smooth scrolling no mobile */
  scroll-behavior: smooth; /* Scroll suave */
}

/* =========================
 Titulo da tabela modais
========================= */
.titulo-table-modal {
    text-align: center;
    color: #444; /* vermelho escuro */
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 5px;
}

.frase-confirmar-modal {
  margin-top: 25px !important;
}

/* =========================
 Labels e textos padrão
========================= */
.form-group label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: #495057;
    font-size: 14px;
}

.modal-body p {
  font-size: 16px;
  color: #444; /* Cinza neutro para boa leitura */
  font-weight: 500;
  text-align: center;
  margin: 8px 0;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* =========================
 Botão fechar
========================= */
.btn-fechar,
.btn-fechar-aviso {
  background: none;
  border: none;
  color: white;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  opacity: 0.8;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}

.btn-fechar:hover,
.btn-fechar-aviso:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.3);
}

.btn-fechar:active,
.btn-fechar-aviso:active {
  transform: scale(0.9);
  background: rgba(255, 255, 255, 0.5);
}

.line-highlight {
  height: 1px;
  background: linear-gradient(to right, transparent, #d1d5db, transparent);
  margin: 0 0 20px 0;
  border: none;
  opacity: 0.6;
}

/* =========================
 Mensagem inicial amarela
========================= */
.mensagem-inicial-aviso {
  background-color: #fff3cd;
  color: #856404;
  padding: 12px 15px;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 4px solid #ffc107;
  animation: fadeIn 0.4s ease-out;
}

.mensagem-inicial-aviso i {
  font-size: 18px;
  color: #ffc107;
}

/* =========================
 Efeito animado para outras linhas
========================= */
.line-highlight-estornar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
  animation: lineShine 4s infinite;
}

/* =========================
 Botões padrão dos modais
========================= */
/* Footer do Modal - Seguindo padrão do sistema */
.modal-footer {
    padding: 20px 25px;
    background: #f9fafb;
    border-top: 1px solid #e5e7eb;
    flex-shrink: 0;
}

.modal-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.btn-cancelar-cinza,
.btn-cancelar {
    padding: 12px 20px;
    border-radius: 6px;
    font-size: 0.95rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
}

/* Cancelar cinza */
.btn-cancelar-cinza {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.btn-cancelar-cinza:hover {
  background: #e5e7eb;
  border-color: #bfc4ca;
  color: #1f2937;
}

.btn-cancelar-cinza:focus {
  outline: none;
  border-color: #9ca3af;
  box-shadow: 0 0 0 0.2rem rgba(107, 114, 128, 0.25);
}

.btn-cancelar-cinza:active {
  transform: translateY(1px);
}

/* Cancelar padrão */
.btn-cancelar {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.btn-cancelar:hover {
  background: #e5e7eb;
  border-color: #bfc4ca;
  color: #1f2937;
}

.btn-cancelar:focus {
  outline: none;
  border-color: #9ca3af;
  box-shadow: 0 0 0 0.2rem rgba(107, 114, 128, 0.25);
}

.btn-cancelar:active {
  transform: translateY(1px);
}
/* =========================
 Campos de preço e outros
========================= */
.modais-valor-formatado {
  font-weight: 500;
  font-size: 1rem;
  font-family: monospace;
  text-align: left !important;
  letter-spacing: 0.3px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: inherit;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
  min-height: 38px;
}

/* =========================
 Contador de caracteres dos modais
========================= */


/* =========================
 Animações
========================= */
@keyframes lineShine {
  0% { left: -100%; }
  40% { left: 100%; }
  100% { left: 100%; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
/* =========================
 Estilos de Ordenação da Tabela
 Arquivo css global para o sistema completo
 css\global\sort-tabela.css
========================= */

/* Estilos básicos para as setas de ordenação */
.sort-icon {
  margin-left: 5px;
  color: #ccc; /* Cinza claro inicialmente */
  transition: color 0.3s ease;
  cursor: pointer;
}

.active-sort {
  color: #fff; /* Fica branca quando a ordenação está ativa */
}

/* Estilo para a coluna que está sendo ordenada */
th.active {
  background-color: #1672d8; /* Cor de fundo quando a coluna está ativa */
  color: #fff; /* Texto branco */
  cursor: pointer;
}

/* Esconder as setas específicas inicialmente */
.fa-sort-up,
.fa-sort-down {
  display: none;
}

/* Mostrar seta ascendente ao ordenar */
th.active[data-sort="asc"] .fa-sort-up {
  display: inline;
}

/* Mostrar seta descendente ao ordenar */
th.active[data-sort="desc"] .fa-sort-down {
  display: inline;
}

/* Tornar cabeçalhos ordenáveis visualmente mais clicáveis */
th[id^="sort-"] {
  cursor: pointer;
  transition: background-color 0.2s ease;
}

th[id^="sort-"]:hover {
  background-color: rgba(22, 114, 216, 0.8);
}

/* Hover em todos que tem sort- */
table thead th[id^="sort-"]:hover {
  background-color: #1464c0;
}

/* Hover nos que são sort E estão ativos */
table thead th.active:hover {
  background-color: #125bb0 !important; /* cor mais escura que o ativo normal */
}
/* ================ PAGINAÇÃO MODERNA UNIVERSAL ================ */

/* Container com estrutura em grid: três colunas */
.paginacao-container {
  margin-top: 20px;
  padding: 10px 0;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 15px;
  position: relative; /* Adicionado para que os filhos absolutos fiquem relativos a ele */
}

/* Em telas menores, empilha os elementos */
@media (max-width: 768px) {
  .paginacao-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

/* Controle "itens por página" */
.itens-por-pagina {
  margin-left: 8px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.itens-por-pagina label {
  font-size: 14px;
  color: #444;
}

.itens-por-pagina select {
  font-size: 14px;
  padding: 4px 6px;
  border: none;
  border-bottom: 1px solid #1672d8;
  background: transparent;
  color: #1672d8;
  transition: border-bottom 0.3s ease;
}

.itens-por-pagina select:focus {
  outline: none;
  border-bottom: 1px solid #1672d8;
}

/* Centraliza a paginação com efeito moderno */
.paginacao {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.paginacao a,
.paginacao span {
  position: relative;
  font-size: 14px;
  color: #1672d8;
  text-decoration: none;
  padding: 4px 4px;
  transition: color 0.3s ease, transform 0.2s ease;
  cursor: pointer;
}

/* Animação leve ao passar o mouse */
.paginacao a:hover:not(.disabled),
.paginacao span:hover:not(.disabled) {
  transform: translateY(-2px);
}

/* Underline animado via pseudo-elemento */
.paginacao a::after,
.paginacao span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #1672d8;
  transition: width 0.3s ease;
}

/* Ao hover, o underline expande */
.paginacao a:hover::after,
.paginacao span:hover::after {
  width: 100%;
}

/* Página atual já vem com o underline fixo e estilo diferenciado */
.paginacao .pagina-atual {
  font-weight: bold;
  pointer-events: none;
}

.paginacao .pagina-atual::after {
  width: 100%;
  height: 2px;
  background: #1672d8;
}

/* Estilo para links desabilitados */
.paginacao a.disabled {
  color: #bbb;
  pointer-events: none;
  opacity: 0.6;
}

/* Informação de itens exibidos à direita */
.info-itens {
  font-size: 14px;
  color: #444;
  text-align: right;
}

/* Responsividade para info-itens */
@media (max-width: 768px) {
  .info-itens {
    text-align: center;
    width: 100%;
  }
}

/* Adaptação visual para .select-itens-por-pagina ficar padrão com .itens-por-pagina */
.select-itens-por-pagina {
  margin-left: 8px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.select-itens-por-pagina label {
  font-size: 14px;
  color: #444;
}

.select-itens-por-pagina select {
  font-size: 14px;
  padding: 4px 6px;
  border: none;
  border-bottom: 1px solid #1672d8;
  background: transparent;
  color: #1672d8;
  transition: border-bottom 0.3s ease;
}

.select-itens-por-pagina select:focus {
  outline: none;
  border-bottom: 1px solid #1672d8;
}

/* Estilo compartilhado com o seletor extra para uso em modais */
.itens-por-pagina.modal-itens-por-pagina,
.modal-itens-por-pagina {
  margin-left: 8px;
  display: flex;
  align-items: baseline;
  gap: 5px;
}

.modal-itens-por-pagina label {
  font-size: 14px;
  color: #444;
}

.modal-itens-por-pagina select {
  font-size: 14px;
  padding: 4px 6px;
  border: none;
  border-bottom: 1px solid #1672d8;
  background: transparent;
  color: #1672d8;
  transition: border-bottom 0.3s ease;
}

.modal-itens-por-pagina select:focus {
  outline: none;
  border-bottom: 1px solid #1672d8;
}


/* ============================================
   ESTILOS MOBILE PARA PESQUISA E AÇÕES (ATÉ 768PX)
============================================ */
@media (max-width: 768px) {
  /* Ocultar a caixa de pesquisa principal */
  .search-add-container .search-wrapper {
    display: none;
  }

  .search-add-container {
    display: flex !important;
  }

  /* Mostrar a caixa de pesquisa mobile com estilo semelhante */
  .search-mobile-container {
    display: block !important;
    background-color: #ffffff;
    padding: 1.25rem;
    border-radius: 8px;
    box-shadow: 5px 5px 10px #d1d5db, -5px -5px 10px #ffffff,
      -5px -5px 6px rgba(0, 0, 0, 0.08);
    margin-bottom: 1.5rem;
    display: flex;
    gap: 1.25rem;
    align-items: center;
    justify-content: space-between;
  }

  .search-mobile-wrapper {
    position: relative;
    flex: 1;
    min-width: 200px;
    max-width: 100%;
  }

  .search-mobile-wrapper .search-mobile-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #6b7280;
    font-size: 0.875rem;
    pointer-events: none;
  }

  .search-mobile-wrapper input {
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 0.75rem 2.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.875rem;
    color: #1f2937;
    transition: all 0.2s ease;
    background-color: #ffffff;
  }

  .search-mobile-wrapper input:focus {
    outline: none;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
  }

  .search-mobile-wrapper input::placeholder {
    color: #9ca3af;
  }

  #btn-limpar-pesquisa-mobile {
      -webkit-tap-highlight-color: transparent; /* Remove flash em Android */
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      background: none;
      border: none;
      color: #999;
      font-size: 1.25rem;
      cursor: pointer;
      padding: 0.25rem;
      display: none; /* Inicialmente oculto */
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      transition: all 0.2s ease;
  }

  #btn-limpar-pesquisa-mobile:hover {
    background-color: transparent;
    color: #ef4444;
  }

}
/* FIM ESTILOS MOBILE PARA PESQUISA E AÇÕES (ATÉ 768PX) */

/* ============================================
   ESTILOS MOBILE PARA FILTROS (ATÉ 768PX)
============================================ */
/* Mostrar apenas em mobile (max-width: 768px) */
@media (max-width: 768px) {
  .filters-container .filters-title {
    display: block !important;
  }
  
  /* Ajustar o container para funcionar melhor com o título */
  .filters-container {
    flex-direction: column;
  }
}
/* FIM ESTILOS MOBILE PARA FILTROS (ATÉ 768PX) */

/* =========================
  Estilo para os filtros da pagina
  Arquivo global para todas as paginas
  ARQUIVO: css\global\filtros.css
========================= */

.filters-container {
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 5px 5px 10px #d1d5db, 
              -5px -5px 10px #ffffff, 
              -5px -5px 6px rgba(0, 0, 0, 0.08); /* Sombra mais para a esquerda */
  padding: 1.5rem;
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: flex-end;
}

.filter-item {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.filter-item label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.filter-item input[type="date"],
.filter-item select {
  padding: 0.625rem;
  border: 1px solid #e5e7eb;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 6px;
  font-size: 0.875rem;
  color: #1f2937;
  background-color: #ffffff;
  transition: all 0.2s ease;
  width: 100%;
  cursor: pointer;
}

.filter-item input[type="date"]:focus,
.filter-item select:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.filter-item input[type="date"]:hover,
.filter-item select:hover {
  border-color: #1672d8;
}

.filter-item select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236B7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.filter-buttons {
  display: flex;
  align-items: flex-end; /* isso já tá OK */
  height: 100%; /* novo: força ocupar altura total */
  margin-bottom: 0.7rem; /* para alinhar com o label dos selects */
}

#btn-limpar-filtros {
  background-color: #e5e7eb;
  color: #374151;
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 38px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Sombra suave */
}

#btn-limpar-filtros:hover {
  background-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); /* Sombra maior ao passar o mouse */
}

#btn-limpar-filtros:active {
  transform: translateY(1px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* Sombra reduzida ao clicar */
}

/* Estilo para o alerta de filtro de período ignorado */
.filtro-ignorado-alerta {
  display: inline-flex;
  align-items: center;
  background-color: #ffefe1;
  border-left: 4px solid #ff9800;
  color: #815500;
  padding: 10px 15px;
  margin: 15px 0;
  border-radius: 4px;
  font-size: 0.9rem;
  animation: fadeIn 0.3s ease-out;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.filtro-ignorado-alerta i {
    margin-right: 8px;
    font-size: 1.1rem;
    color: #ff9800;
}

/* Estilos para o intervalo personalizado */
.intervalo-personalizado-container {
  background-color: #f0f8ff; /* Azul bem claro */
  border-radius: 8px;
  padding: 0;  /* Começamos com padding zero */
  margin-top: 0; /* Começamos com margin zero */
  margin-bottom: 0; /* Começamos com margin zero */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border-left: 4px solid #1672d8;
  overflow: hidden; /* Importante para a animação de altura */
  max-height: 0; /* Começa com altura zero */
  opacity: 0; /* Começa invisível */
  display: block; /* Sempre usar display block, controlamos a visibilidade com opacity e max-height */
  pointer-events: none; /* Desativa interações quando oculto */
}

.date-range-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}

.date-item {
  flex: 1;
  min-width: 200px;
}

/* Animações para exibir e esconder o container */
@keyframes slideDown {
  from {
      opacity: 0;
      transform: translateY(-20px);
      max-height: 0;
  }
  to {
      opacity: 1;
      transform: translateY(0);
      max-height: 200px;
  }
}

@keyframes slideUp {
  from {
      opacity: 1;
      transform: translateY(0);
      max-height: 200px;
      margin-bottom: 20px;
      margin-top: 15px;
      padding: 15px;
  }
  to {
      opacity: 0;
      transform: translateY(-20px);
      max-height: 0;
      margin-bottom: 0;
      margin-top: 0;
      padding: 0;
  }
}

.show-date-range {
  animation: slideDown 0.4s ease-out forwards;
  padding: 15px !important; /* Adicionamos padding quando visível */
  margin-top: 15px !important; /* Adicionamos margin quando visível */
  margin-bottom: 20px !important; /* Adicionamos margin quando visível */
  pointer-events: auto !important; /* Reativa interações quando visível */
}

.hide-date-range {
  animation: slideUp 0.4s ease-out forwards;
}

#btn-limpar-filtros-tabela {
  background-color: #e5e7eb;
  color: #374151;
  border: none;
  padding: 0.625rem 1.25rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  height: 38px;
  margin-top: 20px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15); /* Sombra suave */
}

#btn-limpar-filtros-tabela:hover {
  background-color: #d1d5db;
  transform: translateY(-1px);
  box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2); /* Sombra maior ao passar o mouse */
}

#btn-limpar-filtros-tabela:active {
  transform: translateY(1px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.2); /* Sombra reduzida ao clicar */
}
.filters-container .select-wrapper .select-search {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  border-radius: 6px;
}

.filters-container .select-wrapper .select-search:hover {
  border-color: #1672d8;
}

.filters-container .select-wrapper .select-search:focus {
  outline: none;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Cores para filtros de período com classes */
.select-option.periodo-hoje {
  border-left: 3px solid transparent;
  border-left-color: #28a745;
}

.select-option.periodo-ultimos {
  border-left: 3px solid transparent;
  border-left-color: #fd7e14;
}

.select-option.periodo-proximos {
  border-left: 3px solid transparent;
  border-left-color: #17a2b8;
}

.select-option.periodo-padrao {
  border-left: 3px solid transparent;
  border-left-color: #6c757d;
}

.select-option.periodo-personalizado {
  font-style: italic;
  border-left: 3px solid transparent;
}

/* Cores para filtros de período com data-value */
.filter-item .select-option[data-value="hoje"],
.filter-item .select-option[data-value="ontem"] {
    border-left: 3px solid transparent;
    border-left-color: #28a745;
}

.filter-item .select-option[data-value^="ultimos_"] {
    border-left: 3px solid transparent;
    border-left-color: #fd7e14;
}

.filter-item .select-option[data-value^="proximos_"] {
    border-left: 3px solid transparent;
    border-left-color: #17a2b8;
}

.filter-item .select-option[data-value="intervalo_personalizado"] {
    font-style: italic;
}

/* Título dos filtros - oculto por padrão (desktop) */
.filters-container .filters-title {
  display: none;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1672d8;
  padding: 0.75rem 1rem;
  border-left: 4px solid #1672d8;
  background-color: #f8fafc;
  border-radius: 6px;
  text-align: center;
  width: 100%;
  order: -1; /* Garante que fique no topo */
}


/* =========================
   MODAL AZUL - Estilos de exclusão
   =========================

   Este arquivo contém os estilos azul de modais
   Usados no arquivo combinado.php
   ARQUIVO: css\global\modais\modal-azul.css
========================= */

/* =========================
 Mensagens warning azuis
========================= */
.warning-text-azul {
  background: linear-gradient(145deg, #D6E9FB, #cbe2fb);
  color: #0B4C91;
  border: 1px solid rgba(22, 114, 216, 0.4);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  box-shadow: 0 2px 6px rgba(22, 114, 216, 0.08);
  position: relative;
  overflow: hidden;
}

.warning-text-azul::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #1672d8, #3b82f6);
}

/* =========================
 Mensagem inicial azul
========================= */
.mensagem-inicial-azul {
  background-color: #D6E9FB;
  color: #0B4C91;
  padding: 12px 15px;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 4px solid #1672D8;
  animation: fadeIn 0.4s ease-out;
}

.mensagem-inicial-azul i {
  font-size: 18px;
  color: #1672D8;
}

/* =========================
 Linhas com destaque azul
========================= */

/* Azul escuro */
.line-highlight-azul-escuro {
  height: 3px;
  background: linear-gradient(90deg, #1a3a6e, #4a6fa5);
  margin: 0 0 25px 0;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

/* Azul padrão */
.line-highlight-azul {
  height: 3px;
  background: linear-gradient(90deg, #1672d8, #57aff9);
  margin: 0 0 25px 0;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

/* Efeito animado para as linhas azuis */
.line-highlight-azul-escuro::after,
.line-highlight-azul::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
  animation: deleteLineShine 4s infinite;
}

/* =========================
 Botões azuis
========================= */

/* Botão salvar azul específico */
.btn-salvar-azul {
  color: white;
  background: #1672d8;
  background: linear-gradient(to bottom, #3a8df0, #1672d8);
  box-shadow: 0 2px 6px rgba(22, 114, 216, 0.4);
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-salvar-azul:hover {
  background: linear-gradient(to bottom, #5ca1f3, #1363bd);
  box-shadow: 0 4px 10px rgba(22, 114, 216, 0.5);
}

.btn-salvar-azul:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(22, 114, 216, 0.6);
}

.btn-salvar-azul:focus {
  outline: none;
  border-color: #1672d8;
  box-shadow: 0 0 0 0.2rem rgba(22, 114, 216, 0.4);
}

/* Botão salvar padrão (também azul) */
.btn-salvar {
  color: white;
  background: #1672d8;
  background: linear-gradient(to bottom, #3a8df0, #1672d8);
  box-shadow: 0 2px 6px rgba(22, 114, 216, 0.4);
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-salvar:hover {
  background: linear-gradient(to bottom, #5ca1f3, #1363bd);
  box-shadow: 0 4px 10px rgba(22, 114, 216, 0.5);
}

.btn-salvar:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(22, 114, 216, 0.6);
}

.btn-salvar:focus {
  outline: none;
  border-color: #1672d8;
  box-shadow: 0 0 0 0.2rem rgba(22, 114, 216, 0.4);
}

/* =========================
 Header e layout azul
========================= */
/* Header titulo */
.header-detalhes-azul {
  background: linear-gradient(135deg, #1672d8, #57aff9);
  padding: 20px 25px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px 12px 0 0;
  top: 0;
  z-index: 10;
  flex-shrink: 0; /* Impede que o header encolha */
}

/* =========================
 Tabelas e conteúdo azul
========================= */

/* Estilizacao para o table inf do modal azul */
.info-table-azul {
    width: 100%;
    border-collapse: collapse;
    /*margin-bottom: 15px;*/
    background: #f3f9ff;
    border-radius: 6px;
    overflow: hidden;
}

.info-table-azul td {
    padding: 8px 12px;
    border-bottom: 1px solid #e0e0e0;
    font-size: 13px;
}

.info-table-azul td:first-child {
    background: #e3f2fd;
    color: #1565c0;
    font-weight: 500;
    width: 40%;
}

.info-table-azul tr:last-child td {
    border-bottom: none;
}

.info-table-azul tr:hover {
  background: inherit !important;
  color: inherit !important;
  cursor: default !important;
}

/* =========================
 Barra de rolagem modal - Azul
========================= */
.modal-body-wrapper-azul {
  overflow-y: auto;   /* ativa rolagem vertical */
  border-radius: 0 0 12px 12px; /* combina com o header arredondado */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #1672d8 #e9ecef; /* Cor do scroll (azul + fundo cinza) */
}

/* Scrollbar para Chrome, Edge e Safari */
.modal-body-wrapper-azul::-webkit-scrollbar {
  width: 8px;
}

.modal-body-wrapper-azul::-webkit-scrollbar-track {
  background: #e9ecef;
  border-radius: 6px;
}

.modal-body-wrapper-azul::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #1363bd, #1672d8);
  border-radius: 6px;
}

.modal-body-wrapper-azul::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #3a8df0, #1363bd);
}

/* =========================
   MODAL LARANJA - Estilos laranja
   =========================

   Este arquivo contém os estilos laranja e laranja de modais
   ARQUIVO: css\global\modais\modal-laranja.css
========================= */

/* =========================
 Header e layout laranja 
========================= */
/* Header titulo laranja */
.header-detalhes-laranja {
  background: linear-gradient(135deg, #F59E0B, #FBBF24);
  padding: 20px 25px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px 12px 0 0;
  top: 0;
  z-index: 10;
  flex-shrink: 0; /* Impede que o header encolha */
}

/* =========================
 Tabela de informações - Laranja
========================= */
.info-table-laranja {
    width: 100%;
    border-collapse: collapse;
    background: #fffde3;
    border-radius: 6px;
    overflow: hidden;
}

.info-table-laranja td {
    padding: 8px 12px;
    border-bottom: 1px solid #fde68a;
    font-size: 13px;
}

.info-table-laranja td:first-child {
    background: #fff7ed; /* fundo leve alaranjado */
    color: #b45309; /* laranja escuro */
    font-weight: 500;
    width: 40%;
}

.info-table-laranja tr:last-child td {
    border-bottom: none;
}

.info-table-laranja tr:hover {
  background: inherit !important;
  color: inherit !important;
  cursor: default !important;
}

/* =========================
 Mensagens warning laranja/laranja
========================= */
.warning-text-laranja {
  background-color: #FEF3C7 !important;
  color: #92400E !important;
  border-width: 0 1px 1px 1px !important;
  border-style: dashed !important;
  border-color: rgba(251, 191, 36, 0.4) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  text-align: center !important;
  box-shadow: 0 1px 5px rgba(251, 191, 36, 0.08) !important;
  position: relative !important;
  overflow: hidden !important;
}

.warning-text-laranja::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(to right, #fbbf24, #facc15);
  border-radius: 8px 8px 0 0;
  margin: -14px -16px 10px -16px;
}

/* =========================
 Mensagem inicial laranja
========================= */
.mensagem-inicial-laranja {
  background-color: #FEF3C7;
  color: #92400E;
  padding: 12px 15px;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 4px solid #ffc107;
  animation: fadeIn 0.4s ease-out;
}

.mensagem-inicial-laranja i {
  font-size: 18px;
  color: #F59E0B;
}

/* =========================
 Linhas com destaque laranja
========================= */
/* laranja */
.line-highlight-laranja {
  height: 3px;
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
  margin: 0 0 25px 0;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

/* Efeito animado para as linhas laranja */
.line-highlight-laranja::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
  animation: lineShine 4s infinite;
}

/* =========================
 Botões laranja
========================= */

/* Botão limpar laranja */
.btn-limpar-laranja,
.btn-taxa-padrao {
  color: #fff;
  background: #f59e0b;
  background: linear-gradient(to bottom, #fbbf24, #f59e0b);
  box-shadow: 0 2px 6px rgba(251, 191, 36, 0.4);
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-limpar-laranja:hover,
.btn-taxa-padrao:hover {
  background: linear-gradient(to bottom, #fcd34d, #d97706);
  box-shadow: 0 4px 10px rgba(251, 191, 36, 0.5);
}

.btn-limpar-laranja:active,
.btn-taxa-padrao:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(251, 191, 36, 0.6);
}

.btn-limpar-laranja:focus,
.btn-taxa-padrao:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.4);
}

/* Botão salvar laranja */
.btn-salvar-laranja {
  color: #fff;
  background: #f59e0b;
  background: linear-gradient(to bottom, #fbbf24, #f59e0b);
  box-shadow: 0 2px 6px rgba(251, 191, 36, 0.4);
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-salvar-laranja:hover {
  background: linear-gradient(to bottom, #fcd34d, #d97706);
  box-shadow: 0 4px 10px rgba(251, 191, 36, 0.5);
}

.btn-salvar-laranja:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(251, 191, 36, 0.6);
}

.btn-salvar-laranja:focus {
  outline: none;
  border-color: #f59e0b;
  box-shadow: 0 0 0 0.2rem rgba(251, 191, 36, 0.4);
}

/* Botão salvar laranja 2 */
.btn-salvar-laranja2 {
  color: white;
  background: #ff9f43;
  background: linear-gradient(to bottom, #ffa74f, #ff9f43);
  box-shadow: 0 2px 6px rgba(255, 159, 67, 0.4);
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-salvar-laranja2:hover {
  background: linear-gradient(to bottom, #ff9850, #ff7e33);
  box-shadow: 0 4px 10px rgba(255, 126, 51, 0.5);
}

.btn-salvar-laranja2:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(255, 126, 51, 0.6);
}

.btn-salvar-laranja2:focus {
  outline: none;
  border-color: #ff9f43;
  box-shadow: 0 0 0 0.2rem rgba(255, 159, 67, 0.4);
}

/* =========================
 Barra de rolagem modal - Laranja
========================= */
.modal-body-wrapper-laranja {
  overflow-y: auto;   /* ativa rolagem vertical */
  background: #f8f9fa;
  border-radius: 0 0 12px 12px; /* combina com o header arredondado */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #F59E0B #e9ecef; /* Cor do scroll (laranja + fundo cinza) */
}

/* Scrollbar para Chrome, Edge e Safari */
.modal-body-wrapper-laranja::-webkit-scrollbar {
  width: 8px;
}

.modal-body-wrapper-laranja::-webkit-scrollbar-track {
  background: #e9ecef;
  border-radius: 6px;
}

.modal-body-wrapper-laranja::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #d97706, #F59E0B);
  border-radius: 6px;
}

.modal-body-wrapper-laranja::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #FBBF24, #d97706);
}

/* =========================
 Header Roxo
========================= */
.header-detalhes-roxo {
  background: linear-gradient(135deg, #6f42c1, #7c4dff);
  padding: 20px 25px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px 12px 0 0;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

/* =========================
 Linhas com destaque Roxo
========================= */
.line-highlight-roxo {
  height: 3px;
  background: linear-gradient(90deg, #6f42c1, #7c4dff);
  margin: 0 0 25px 0;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.line-highlight-roxo::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
  animation: lineShine 4s infinite;
}

/* =========================
 Botão Roxo
========================= */
.btn-salvar-roxo {
  color: white;  
  background: linear-gradient(to bottom, #7c4dff, #6f42c1);
  box-shadow: 0 2px 6px rgba(111, 66, 193, 0.4);
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-salvar-roxo:hover {
  background: linear-gradient(to bottom, #8e63ff, #5a32a3);
  box-shadow: 0 4px 10px rgba(111, 66, 193, 0.5);
}

.btn-salvar-roxo:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(111, 66, 193, 0.6);
}

.btn-salvar-roxo:focus {
  outline: none;
  border-color: #7c4dff;
  box-shadow: 0 0 0 0.2rem rgba(124, 77, 255, 0.4);
}

/* =========================
 Warning Text Roxo
========================= */
.warning-text-roxo {
  background: linear-gradient(145deg, #f1e8ff, #e9ddff);
  color: #3d1f77;
  border: 1px solid rgba(111, 66, 193, 0.4);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  box-shadow: 0 2px 6px rgba(111, 66, 193, 0.08);
  position: relative;
  overflow: hidden;
}

.warning-text-roxo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6f42c1, #7c4dff);
}

/* =========================
 Mensagem Inicial Roxo
========================= */
.mensagem-inicial-roxo {
  background-color: #f1e8ff;
  color: #3d1f77;
  padding: 12px 15px;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 4px solid #7c4dff;
  animation: fadeIn 0.4s ease-out;
}

.mensagem-inicial-roxo i {
  font-size: 18px;
  color: #7c4dff;
}

/* =========================
 Info Table Roxo
========================= */
.info-table-roxo {
  width: 100%;
  border-collapse: collapse;
  background: #f5f0ff;
  border-radius: 6px;
  overflow: hidden;
}

.info-table-roxo td {
  padding: 8px 12px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 13px;
}

.info-table-roxo td:first-child {
  background: #f1e8ff;
  color: #3d1f77;
  font-weight: 500;
  width: 40%;
}

.info-table-roxo tr:last-child td {
  border-bottom: none;
}

.info-table-roxo tr:hover {
  background: inherit !important;
  color: inherit !important;
  cursor: default !important;
}

/* =========================
 Barra de rolagem modal Roxo
========================= */
.modal-body-wrapper-roxo {
  overflow-y: auto;
  background: #f8f9fa;
  border-radius: 0 0 12px 12px;
  scrollbar-width: thin;
  scrollbar-color: #7c4dff #e9ecef;
}

.modal-body-wrapper-roxo::-webkit-scrollbar {
  width: 8px;
}

.modal-body-wrapper-roxo::-webkit-scrollbar-track {
  background: #e9ecef;
  border-radius: 6px;
}

.modal-body-wrapper-roxo::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #6f42c1, #7c4dff);
  border-radius: 6px;
}

.modal-body-wrapper-roxo::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #8e63ff, #5a32a3);
}

/* =========================
   MODAL VERDE-AQUA - Estilos
   =========================

   Este arquivo contém os estilos verde-aqua de modais
   ARQUIVO: css\global\modais\modal-verde-aqua.css
========================= */

/* =========================
 Header e layout Verde-Aqua 
========================= */
/* Header titulo Verde-Aqua */
.header-detalhes-verde-aqua {
  background: linear-gradient(135deg, #198754, #20c997);
  padding: 20px 25px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px 12px 0 0;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

/* =========================
 Tabela de informações - Verde-Aqua
========================= */
.info-table-verde-aqua {
    width: 100%;
    border-collapse: collapse;
    background: #e6fdf5;
    border-radius: 6px;
    overflow: hidden;
}

.info-table-verde-aqua td {
    padding: 8px 12px;
    border-bottom: 1px solid #9ee6d5;
    font-size: 13px;
}

.info-table-verde-aqua td:first-child {
    background: #e0f7f1; 
    color: #0f5132; 
    font-weight: 500;
    width: 40%;
}

.info-table-verde-aqua tr:last-child td {
    border-bottom: none;
}

.info-table-verde-aqua tr:hover {
  background: inherit !important;
  color: inherit !important;
  cursor: default !important;
}

/* =========================
 Mensagens warning Verde-Aqua
========================= */
.warning-text-verde-aqua {
  background-color: #d1fae5 !important;
  color: #065f46 !important;
  border-width: 0 1px 1px 1px !important;
  border-style: dashed !important;
  border-color: rgba(16, 185, 129, 0.4) !important;
  border-radius: 8px !important;
  padding: 14px 16px !important;
  font-size: 0.95rem !important;
  line-height: 1.6 !important;
  text-align: center !important;
  box-shadow: 0 1px 5px rgba(16, 185, 129, 0.08) !important;
  position: relative !important;
  overflow: hidden !important;
}

.warning-text-verde-aqua::before {
  content: '';
  display: block;
  height: 4px;
  background: linear-gradient(to right, #20c997, #198754);
  border-radius: 8px 8px 0 0;
  margin: -14px -16px 10px -16px;
}

/* =========================
 Mensagem inicial Verde-Aqua
========================= */
.mensagem-inicial-verde-aqua {
  background-color: #d1fae5;
  color: #065f46;
  padding: 12px 15px;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 4px solid #20c997;
  animation: fadeIn 0.4s ease-out;
}

.mensagem-inicial-verde-aqua i {
  font-size: 18px;
  color: #198754;
}

/* =========================
 Linhas com destaque Verde-Aqua
========================= */
.line-highlight-verde-aqua {
  height: 3px;
  background: linear-gradient(90deg, #198754, #20c997);
  margin: 0 0 25px 0;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.line-highlight-verde-aqua::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
  animation: lineShine 4s infinite;
}

/* =========================
 Botões Verde-Aqua
========================= */
.btn-limpar-verde-aqua {
  color: #fff;
  background: linear-gradient(to bottom, #20c997, #198754);
  box-shadow: 0 2px 6px rgba(32, 201, 151, 0.4);
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-limpar-verde-aqua:hover {
  background: linear-gradient(to bottom, #34d399, #157347);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.5);
}

.btn-limpar-verde-aqua:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.6);
}

.btn-limpar-verde-aqua:focus {
  outline: none;
  border-color: #20c997;
  box-shadow: 0 0 0 0.2rem rgba(16, 185, 129, 0.4);
}

.btn-salvar-verde-aqua {
  color: #fff;
  background: linear-gradient(to bottom, #20c997, #198754);
  box-shadow: 0 2px 6px rgba(32, 201, 151, 0.4);
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-salvar-verde-aqua:hover {
  background: linear-gradient(to bottom, #34d399, #157347);
  box-shadow: 0 4px 10px rgba(16, 185, 129, 0.5);
}

.btn-salvar-verde-aqua:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(16, 185, 129, 0.6);
}

.btn-salvar-verde-aqua:focus {
  outline: none;
  border-color: #20c997;
  box-shadow: 0 0 0 0.2rem rgba(32, 201, 151, 0.4);
}

/* =========================
 Barra de rolagem modal - Verde-Aqua
========================= */
.modal-body-wrapper-verde-aqua {
  overflow-y: auto;
  background: #f8f9fa;
  border-radius: 0 0 12px 12px;
  scrollbar-width: thin;
  scrollbar-color: #20c997 #e9ecef;
}

.modal-body-wrapper-verde-aqua::-webkit-scrollbar {
  width: 8px;
}

.modal-body-wrapper-verde-aqua::-webkit-scrollbar-track {
  background: #e9ecef;
  border-radius: 6px;
}

.modal-body-wrapper-verde-aqua::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #198754, #20c997);
  border-radius: 6px;
}

.modal-body-wrapper-verde-aqua::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #20c997, #198754);
}
/* =========================
   MODAL VERDE RENOVAR - Estilos de renovação
   =========================

   Este arquivo contém os estilos verde para modais de renovação
   Tema específico para ações de renovação e atualização
   ARQUIVO: css\global\modais\modal-verde-renovar.css
========================= */

/* =========================
 Header renovação
========================= */
.header-renovar-verde {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 50%, #15803d 100%);
  padding: 25px 30px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px 12px 0 0;
  position: relative;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(34, 197, 94, 0.2);
}

.header-renovar-verde::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: renovarShine 3s infinite;
}

.header-renovar-verde .titulo-renovar {
  font-size: 1.4rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-renovar-verde .icone-renovar {
  font-size: 1.6rem;
  animation: renovarRotate 2s linear infinite;
}

/* =========================
 Mensagens de renovação
========================= */
.alerta-renovacao-verde {
  background: linear-gradient(145deg, #dcfce7, #bbf7d0);
  color: #166534;
  border: 2px solid #22c55e;
  border-radius: 10px;
  padding: 18px 20px;
  font-size: 1rem;
  line-height: 1.7;
  text-align: center;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.15);
  position: relative;
  margin-bottom: 20px;
}

.alerta-renovacao-verde::before {
  content: '🔄';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  background: #22c55e;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  animation: renovarPulse 2s infinite;
}

.mensagem-sucesso-renovar {
  background: linear-gradient(135deg, #f0fdf4, #dcfce7);
  color: #15803d;
  padding: 15px 18px;
  border-radius: 8px;
  margin-bottom: 18px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-left: 5px solid #22c55e;
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.1);
  animation: slideInRenovar 0.5s ease-out;
}

.mensagem-sucesso-renovar .icone-check {
  font-size: 20px;
  color: #22c55e;
  animation: checkBounce 0.6s ease-out;
}

/* =========================
 Card de informações da renovação
========================= */
.card-info-renovacao {
  background: linear-gradient(145deg, #f0fdf4, #ecfdf5);
  border: 1px solid #22c55e;
  border-radius: 12px;
  padding: 20px;
  margin: 20px 0;
  position: relative;
  overflow: hidden;
}

.card-info-renovacao::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #22c55e, #16a34a, #15803d);
  animation: gradientMove 3s linear infinite;
}

.card-info-renovacao .titulo-info {
  color: #15803d;
  font-weight: 600;
  font-size: 1.1rem;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.info-renovacao-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid rgba(34, 197, 94, 0.1);
}

.info-renovacao-item:last-child {
  border-bottom: none;
}

.info-renovacao-label {
  color: #166534;
  font-weight: 500;
  font-size: 14px;
}

.info-renovacao-valor {
  color: #15803d;
  font-weight: 600;
  font-size: 14px;
}

/* =========================
 Botões de renovação
========================= */
.btn-renovar-principal {
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: white;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
  position: relative;
  overflow: hidden;
}

.btn-renovar-principal::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}

.btn-renovar-principal:hover::before {
  left: 100%;
}

.btn-renovar-principal:hover {
  background: linear-gradient(135deg, #16a34a, #15803d);
  box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
  transform: translateY(-2px);
}

.btn-renovar-principal:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(34, 197, 94, 0.5);
}

.btn-cancelar-renovar {
  background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
  color: #6b7280;
  padding: 14px 24px;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1px solid #d1d5db;
}

.btn-cancelar-renovar:hover {
  background: linear-gradient(135deg, #e5e7eb, #d1d5db);
  color: #4b5563;
}

/* =========================
 Progress bar renovação
========================= */
.progress-renovacao {
  background: #f3f4f6;
  border-radius: 10px;
  height: 8px;
  margin: 15px 0;
  overflow: hidden;
}

.progress-renovacao-bar {
  background: linear-gradient(90deg, #22c55e, #16a34a);
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s ease;
  position: relative;
}

.progress-renovacao-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: progressShine 2s infinite;
}

/* =========================
 Status de renovação
========================= */
.status-renovacao {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background: #f0fdf4;
  border-radius: 8px;
  border-left: 4px solid #22c55e;
  margin: 15px 0;
}

.status-renovacao.processando {
  border-left-color: #eab308;
  background: #fefce8;
}

.status-renovacao.concluido {
  border-left-color: #22c55e;
  background: #f0fdf4;
}

.status-renovacao.erro {
  border-left-color: #ef4444;
  background: #fef2f2;
}

.status-icon {
  font-size: 20px;
  animation: statusPulse 2s infinite;
}

.status-icon.processando {
  color: #eab308;
  animation: renovarRotate 1s linear infinite;
}

.status-icon.concluido {
  color: #22c55e;
  animation: checkBounce 0.6s ease-out;
}

.status-icon.erro {
  color: #ef4444;
}

/* =========================
 Corpo do modal renovação
========================= */
.modal-body-renovar::-webkit-scrollbar {
  width: 8px;
}

.modal-body-renovar::-webkit-scrollbar-track {
  background: #f9fafb;
  border-radius: 10px;
}

.modal-body-renovar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #22c55e, #16a34a);
  border-radius: 10px;
}

.modal-body-renovar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #16a34a, #15803d);
}

/* =========================
 Animações
========================= */
@keyframes renovarShine {
  0% { left: -100%; }
  100% { left: 100%; }
}

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

@keyframes renovarPulse {
  0%, 100% { transform: translateX(-50%) scale(1); }
  50% { transform: translateX(-50%) scale(1.1); }
}

@keyframes slideInRenovar {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes checkBounce {
  0%, 20%, 53%, 80%, 100% { transform: scale(1); }
  40%, 43% { transform: scale(1.2); }
  70% { transform: scale(1.1); }
}

@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes progressShine {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes statusPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

/* =========================
 Responsividade
========================= */
@media (max-width: 768px) {
  .header-renovar-verde {
    padding: 20px 15px;
  }
  
  .header-renovar-verde .titulo-renovar {
    font-size: 1.2rem;
  }
  
  .card-info-renovacao {
    margin: 15px 0;
    padding: 15px;
  }
  
  .btn-renovar-principal,
  .btn-cancelar-renovar {
    padding: 12px 20px;
    font-size: 0.95rem;
  }
}

/* =========================
 Estados especiais
========================= */
.modal-renovar.carregando .btn-renovar-principal {
  pointer-events: none;
  opacity: 0.7;
}

.modal-renovar.carregando .btn-renovar-principal::after {
  content: '';
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: renovarRotate 1s linear infinite;
}
/* =========================
   MODAL VERDE
   =========================

   Este arquivo contém os estilos verde para modais
   ARQUIVO: css\global\modais\modal-verde.css
========================= */

/* =========================
 Header Verde
========================= */
.header-detalhes-verde {
  background: linear-gradient(135deg, #218838, #28a745);
  padding: 20px 25px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px 12px 0 0;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

/* =========================
 Linhas com destaque Verde
========================= */
.line-highlight-verde {
  height: 3px;
  background: linear-gradient(90deg, #218838, #28a745);
  margin: 0 0 25px 0;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

/* Efeito animado para as linhas Verde */
.line-highlight-verde::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
  animation: lineShine 4s infinite;
}

/* =========================
 Botão Verde
========================= */
.btn-salvar-verde {
  color: white;  
  background: linear-gradient(to bottom, #28a745, #218838);
  box-shadow: 0 2px 6px rgba(40, 167, 69, 0.4);
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-salvar-verde:hover {
  background: linear-gradient(to bottom, #34ce57, #1e7e34);
  box-shadow: 0 4px 10px rgba(40, 167, 69, 0.5);
}

.btn-salvar-verde:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(40, 167, 69, 0.6);
}

.btn-salvar-verde:focus {
  outline: none;
  border-color: #28a745;
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.4);
}

/* =========================
 Warning Text Verde
========================= */
.warning-text-verde {
  background: linear-gradient(145deg, #e0f6e6, #d4f3dd);
  color: #155724;
  border: 1px solid rgba(40, 167, 69, 0.4);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  box-shadow: 0 2px 6px rgba(40, 167, 69, 0.08);
  position: relative;
  overflow: hidden;
}

.warning-text-verde::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #218838, #28a745);
}

/* =========================
 Mensagem Inicial Verde
========================= */
.mensagem-inicial-verde {
  background-color: #e0f6e6;
  color: #155724;
  padding: 12px 15px;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 4px solid #28a745;
  animation: fadeIn 0.4s ease-out;
}

.mensagem-inicial-verde i {
  font-size: 18px;
  color: #28a745;
}

/* =========================
 Info Table Verde
========================= */
.info-table-verde {
  width: 100%;
  border-collapse: collapse;
  background: #e9f7ec;
  border-radius: 6px;
  overflow: hidden;
}

.info-table-verde td {
  padding: 8px 12px;
  border-bottom: 1px solid #e0e0e0;
  font-size: 13px;
}

.info-table-verde td:first-child {
  background: #e0f6e6;
  color: #155724;
  font-weight: 500;
  width: 40%;
}

.info-table-verde tr:last-child td {
  border-bottom: none;
}

.info-table-verde tr:hover {
  background: inherit !important;
  color: inherit !important;
  cursor: default !important;
}

/* =========================
 Barra de rolagem modal Verde (com !important)
========================= */
.modal-body-wrapper-verde {
  overflow-y: auto !important;   /* ativa rolagem vertical */
  background: #f8f9fa !important;
  border-radius: 0 0 12px 12px !important; /* combina com o header arredondado */
  scrollbar-width: thin !important; /* Firefox */
  scrollbar-color: #28a745 #e9ecef !important; /* Cor do scroll (verde + fundo cinza) */
}

/* Scrollbar para Chrome, Edge e Safari */
.modal-body-wrapper-verde::-webkit-scrollbar {
  width: 8px !important;
}

.modal-body-wrapper-verde::-webkit-scrollbar-track {
  background: #e9ecef !important;
  border-radius: 6px !important;
}

.modal-body-wrapper-verde::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #218838, #28a745) !important;
  border-radius: 6px !important;
}

.modal-body-wrapper-verde::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #34ce57, #218838) !important;
}

/* =========================
   MODAL VERMELHO
   =========================

   Este arquivo contém os estilos vermelhos de modais
   Usados no arquivo combinado.php
   ARQUIVO: css\global\modais\modal-vermelho.css
========================= */

/* =========================
 Mensagens warning vermelhas
========================= */
.warning-text-texto-deletar,
.warning-text-vermelho {
  background: linear-gradient(145deg, #fbeaea, #f8d7da);
  color: #842029;
  border: 1px solid rgba(220, 53, 69, 0.4);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.08);
  position: relative;
  overflow: hidden;
}

.warning-text-texto-deletar::before,
.warning-text-vermelho::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #dc2626, #ef4444);
}

.warning-text-irreversivel {
  background: linear-gradient(145deg, #fbeaea, #f8d7da);
  color: #842029;
  border: 1px solid rgba(220, 53, 69, 0.4);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 0.95rem;
  line-height: 1.6;
  text-align: center;
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.08);
  position: relative;
  overflow: hidden;
}

.warning-text-irreversivel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #dc2626, #ef4444);
}

/* =========================
 Mensagens iniciais vermelhas
========================= */

/* Vermelho */
.mensagem-inicial-vermelho {
  background-color: #f8d7da;
  color: #842029;
  padding: 12px 15px;
  border-radius: 6px;
  margin-bottom: 15px;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-left: 4px solid #dc3545;
  animation: fadeIn 0.4s ease-out;
}

.mensagem-inicial-vermelho i {
  font-size: 18px;
  color: #dc3545;
}

/* =========================
 Linhas vermelhas com efeito animado
========================= */

/* Vermelha */
.line-highlight-deletar {
  height: 3px;
  background: linear-gradient(90deg, #dc3545, #e74c3c);
  margin: 0 0 25px 0;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

/* Efeito animado compartilhado */
.line-highlight-deletar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0));
  animation: deleteLineShine 4s infinite;
}

/* =========================
 Header e layout Vermelho
========================= */
/* Header do modal – Tema vermelho */
.header-detalhes-vermelho {
  background: linear-gradient(135deg, #dc3545, #ff6b6b);
  padding: 20px 25px;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 12px 12px 0 0;
  top: 0;
  z-index: 10;
  flex-shrink: 0;
}

/* =========================
  Tabelas e conteúdo vermelho
========================= */
.info-table-vermelho {
    width: 100%;
    border-collapse: collapse;
    /*margin-bottom: 15px;*/
    background: #fbeaea; /* fundo geral mais claro */
    border-radius: 6px;
    overflow: hidden;
}

.info-table-vermelho td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1c0c0; /* linha divisória suave em tom vermelho */
    font-size: 13px;
}

.info-table-vermelho td:first-child {
    background: #f8d7da; /* fundo da coluna do rótulo */
    color: #842029;       /* vermelho escuro (mesmo do alert-danger) */
    font-weight: 500;
    width: 40%;
}

.info-table-vermelho tr:last-child td {
    border-bottom: none;
}

.info-table-vermelho tr:hover {
  background: inherit !important;
  color: inherit !important;
  cursor: default !important;
}

/* =========================
 Botões vermelhos
========================= */

/* Confirmar exclusão e vermelho */
.btn-confirmar-exclusao {
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  color: white;
  background: #dc3545;
  background: linear-gradient(to bottom, #e85c68, #dc3545);
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4);
}

.btn-confirmar-exclusao:hover {
  background: linear-gradient(to bottom, #eb6b76, #c82333);
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.5);
}

.btn-confirmar-exclusao:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.6);
}

.btn-confirmar-exclusao:focus {
  outline: none;
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.4);
}

.btn-salvar-vermelho {
  padding: 12px 20px;
  border-radius: 6px;
  font-size: 0.95rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  color: white;
  background: #dc3545;
  background: linear-gradient(to bottom, #e85c68, #dc3545);
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.4);
}

.btn-salvar-vermelho:hover {
  background: linear-gradient(to bottom, #eb6b76, #c82333);
  box-shadow: 0 4px 10px rgba(220, 53, 69, 0.5);
}

.btn-salvar-vermelho:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(220, 53, 69, 0.6);
}

.btn-salvar-vermelho:focus {
  outline: none;
  border-color: #dc3545;
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.4);
}

/* =========================
 Barra de rolagem modal Vermelho
========================= */
.modal-body-wrapper-vermelho {
  overflow-y: auto;
  background: #f8f9fa;
  border-radius: 0 0 12px 12px;
  scrollbar-width: thin;
  scrollbar-color: #dc3545 #e9ecef; /* Vermelho + fundo cinza */
}

.modal-body-wrapper-vermelho::-webkit-scrollbar {
  width: 8px;
}

.modal-body-wrapper-vermelho::-webkit-scrollbar-track {
  background: #e9ecef;
  border-radius: 6px;
}

.modal-body-wrapper-vermelho::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #c82333, #dc3545);
  border-radius: 6px;
}

.modal-body-wrapper-vermelho::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #e5535d, #bd2130);
}