:root {
    --btn-pad-y: clamp(0.55rem, 0.8vw, 0.75rem);
    --btn-pad-x: clamp(1rem, 1.6vw, 1.25rem);
    --btn-fs: clamp(0.9rem, 1.2vw, 1rem);
    --btn-radius: 6px;
    --btn-gap: 0.5rem;
    --btn-min-touch: 40px; 
  }
  
  /* --- Estilo Base para TODOS os botões --- */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    padding: var(--btn-pad-y) var(--btn-pad-x);
    min-height: var(--btn-min-touch);
    font-size: var(--btn-fs);
    line-height: 1;
    font-weight: 500;
    font-family: 'Poppins', sans-serif;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color .2s, border-color .2s, transform .06s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  /* Feedback tátil sutil */
  .btn:active { transform: scale(0.98); }
  

  .btn:focus { outline: none; }
  .btn:focus-visible {
    box-shadow: 0 0 0 3px rgba(26,44,78,.18); 
  }
  
  /* --- Variações de Cor e Estilo --- */
  
  /* Botão Escuro (Principal) */
  .btn-dark {
    background-color: var(--primary-blue);
    color: #fff;
  }
  .btn-dark:hover { background-color: var(--secondary-blue); }
  
  /* Botão Verde (Aprovar) */
  .btn-approve { background-color: #28a745; color: #fff; }
  .btn-approve:hover { background-color: #218838; }
  
  /* Botão Vermelho (Rejeitar / Confirmar Exclusão) */
  .btn-reject { background-color: #dc3545; color: #fff; }
  .btn-reject:hover { background-color: #c82333; }
  
  /* Restaurar */
  .btn-restore { background-color: #4e80ab; color: #fff; }
  .btn-restore:hover { background-color: #6ebdac; }
  
  /* Botão Cinza (Excluir na lista de artigos) */
  .btn-delete { background-color: #cd0000; color: #fff; }
  .btn-delete:hover { background-color: rgb(246, 20, 35); }
  
  /* Botão Branco (Secundário / Cancelar) */
  .btn-secondary {
    background-color: var(--white);
    color: var(--primary-blue);
    border-color: var(--border-color);
  }
  .btn-secondary:hover { background-color: #f8f9fa; }
  
  /* --- Ações de Remover (estilo link) --- */
  .btn-remove, .remove-tag-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    color: #dc3545 !important;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    text-decoration: none;
  }
  .btn-remove:hover, .remove-tag-btn:hover {
    text-decoration: underline;
    color: #a71d2a !important;
  }
  .remove-tag-btn { font-size: 1.1rem; font-weight: bold; }
  
  /* --- Ajustes Específicos de Tamanho --- */
  .action-buttons .btn {
    padding: clamp(0.7rem, 1vw, 0.9rem) clamp(1.25rem, 2vw, 1.5rem);
    font-size: clamp(1rem, 1.4vw, 1.1rem);
    font-weight: 600;
    border-radius: 8px;
  }
  
  /* Utilitárias de tamanho */
  .btn--sm { padding: 0.45rem 0.8rem; font-size: 0.85rem; min-height: 36px; }
  .btn--md { padding: var(--btn-pad-y) var(--btn-pad-x); font-size: var(--btn-fs); }
  .btn--lg { padding: 0.9rem 1.4rem; font-size: 1.05rem; min-height: 44px; }
  
  /* Largura total */
  .btn--block { width: 100%; display: inline-flex; }
  
  /* Grupos de botões que quebram bem */
  .btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }
  
  /* Ícones dentro de botões */
  .btn [class*="icon"], .btn i, .btn svg {
    width: 1.1em; height: 1.1em; flex-shrink: 0;
  }
  
  /* ====== Paginação Padronizada ====== */
  .pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2rem;
    padding-bottom: 2rem;
    gap: 0.5rem;
    flex-wrap: wrap; 
  }
  
  /* Botões inativos */
  .pagination .btn {
    background-color: transparent;
    border: 1px solid #ccc;
    color: var(--dark-text, #333);
    font-weight: 700;
    min-width: 40px;
    padding: 0.5rem 0.8rem;
  }
  
  /* Hover inativo */
  .pagination .btn:hover {
    background-color: #f0f0f0;
    border-color: #aaa;
  }
  
  /* Ativo (página atual) */
  .pagination .btn.active {
    background-color: var(--primary-color, #2c3e50);
    border-color: var(--primary-color, #2c3e50);
    color: #fff;
  }
  .pagination .btn.active:hover {
    background-color: var(--primary-color, #2c3e50);
  }
  
  /* Desabilitado */
  .pagination .btn:disabled {
    background-color: transparent;
    border-color: #ddd;
    color: #aaa;
    cursor: not-allowed;
    opacity: 0.8;
  }
  .pagination .btn:disabled:hover {
    background-color: transparent;
    border-color: #ddd;
  }

  .save-button-container{
    position: fixed;
    right: clamp(16px, 3vw, 32px);
    bottom: calc(clamp(16px, 3vw, 32px) + env(safe-area-inset-bottom));
    z-index: 50;
  }
  
  /* Botão com borda e raio melhores */
  .btn-save-all{
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 12px;
    padding-inline: clamp(16px, 2.6vw, 24px);
    min-height: 44px;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
  }
  .btn-save-all:hover{ transform: translateY(-1px); }
  .btn-save-all:active{ transform: translateY(0); }
  
  
  /* ====== Responsividade ====== */
  
  @media (max-width: 480px) {
    .action-buttons .btn,
    .btn.stack-mobile {
      width: 100%;
      justify-content: center;
    }
  }
  
  /* Ajustes finos em telas médias */
  @media (min-width: 768px) {
    .action-buttons { gap: 0.75rem; }
  }
  
  /* ====== Acessibilidade extra ====== */
  @media (prefers-reduced-motion: reduce) {
    .btn, .pagination .btn { transition: none !important; }
  }
  

  
.btn-icon {
  background: none; 
  border: none; 
  padding: 0; 
}