/*
 * =====================================================================
 * SAFIEDESK — Componente único de botão
 * static/css/safie-buttons.css
 *
 * Vale nas DUAS áreas: consultor (layouts/base.html) e cliente
 * (layouts/base_cliente.html).
 *
 * AUTOCONTIDO: todo var() tem fallback hardcoded, no mesmo padrão que
 * templates/includes/cookie_banner.html já estabeleceu. Isso é o que
 * permite carregar este arquivo na área do consultor, que NÃO importa
 * cliente-tokens.css — lá as variáveis de cor não existem, e sem
 * fallback os botões renderizariam sem cor nenhuma.
 *
 * Carregado por:
 *   templates/layouts/base.html          (APÓS navbar.css)
 *   templates/layouts/base_cliente.html  (APÓS cliente-base.css)
 *
 * A ordem importa: mesma especificidade desempata por ordem de origem.
 * Se este arquivo entrar antes de navbar.css, o gradiente de
 * navbar.css:663 continua ganhando de .btn-primary.
 *
 * CASCATA — leia antes de migrar um template:
 *   base.html carrega CSS global na linha 10, mas {% block stylesheets %}
 *   só na linha 167. Todo <style> de página é emitido DEPOIS de qualquer
 *   folha global. Logo um arquivo só muda de aparência quando os seus
 *   próprios seletores .btn* saem. Remover o seletor do <style> e
 *   reescrever a classe do markup é operação ATÔMICA, um arquivo por
 *   commit — entre as duas metades o arquivo fica sem estilo nenhum.
 *
 * API:
 *   base       .btn                                    (sempre)
 *   intenção   .btn-primary .btn-secondary .btn-ghost
 *              .btn-cyan .btn-accent .btn-success
 *              .btn-danger (contorno) .btn-danger-solid (preenchido)
 *   tamanho    .btn-xs(32) .btn-sm(36) — padrão(44) — .btn-lg(52)
 *   forma      .btn-icon .btn-block .btn-grow
 *   contexto   .btn-on-dark
 *   grupos     .seg / .seg-item        (abas e filtros exclusivos)
 *              .pager / .pager-item    (paginação)
 *
 * Regra do destrutivo: CONTORNO em linha de lista/tabela (.btn-danger),
 * SÓLIDO em confirmação de modal (.btn-danger-solid).
 * =====================================================================
 */

:root {
  /* Geometria — raio 6px pela escala apertada (md = botão e input) */
  --btn-radius:      var(--radius-md, 6px);
  --btn-gap:         var(--space-2, 0.5rem);
  --btn-pad-y:       0.625rem;
  --btn-pad-x:       1.25rem;
  --btn-h:           44px;
  --btn-font-size:   var(--font-size-base, 1rem);
  --btn-font-weight: var(--font-weight-semibold, 600);

  /* Tempo — nunca "all"; ver COEXISTÊNCIA COM A CAMADA DE ÍCONES */
  --btn-t-fast: var(--transition-fast, 150ms ease);
  --btn-t-base: var(--transition-base, 250ms ease);

  /* Cor */
  --btn-primary-bg:    var(--color-primary, #1B3FD8);
  --btn-primary-bg-h:  var(--color-primary-light, #2F52E8);
  --btn-accent-bg:     var(--color-accent, #F59E0B);
  --btn-accent-bg-h:   var(--color-accent-dark, #D97706);
  --btn-cyan-a:        var(--color-cyan-light, #14DFFA);
  --btn-cyan-b:        var(--color-cyan, #0EA5E9);
  --btn-success-bg:    var(--color-success, #10B981);
  --btn-success-bg-h:  #059669;
  --btn-error:         var(--color-error, #EF4444);
  --btn-error-h:       #DC2626;
  --btn-error-soft:    var(--color-error-light, rgba(239, 68, 68, 0.10));
  --btn-gray-fill:     var(--color-gray-200, #F1F5F9);
  --btn-gray-fill-h:   var(--color-gray-300, #E2E8F0);
  --btn-gray-text:     var(--color-gray-700, #475569);
  --btn-gray-text-h:   var(--color-gray-800, #334155);
  --btn-border:        var(--color-border, #E2E8F0);
  --btn-focus-ring:    var(--color-primary, #1B3FD8);
}

/* =====================================================================
   BASE
   ===================================================================== */
.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-h);
  min-width: var(--btn-h);
  border: none;
  border-radius: var(--btn-radius);
  /* inherit, e NÃO var(--font-sans): base.html define 'Segoe UI' na linha 31
     e não carrega o Google Font do Plus Jakarta Sans. Forçar a variável
     pediria uma fonte não baixada. Um botão nunca briga com a tipografia da
     sua página. */
  font-family: inherit;
  font-size: var(--btn-font-size);
  font-weight: var(--btn-font-weight);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* Enumerado de propósito. `transition: all` é PROIBIDO aqui: ele captura
     propriedades que a camada de micro-animação de ícones controla. */
  transition: background-color var(--btn-t-fast),
              background-image var(--btn-t-fast),
              border-color     var(--btn-t-fast),
              color            var(--btn-t-fast),
              box-shadow       var(--btn-t-base),
              transform        var(--btn-t-fast);
}

/* COEXISTÊNCIA COM A CAMADA DE ÍCONES
   O botão NUNCA declara transform ou animation num descendente. O canal de
   transform do <i> pertence exclusivamente a static/css/icon-motion.css.
   O único transform deste componente é no elemento raiz (translateY no hover,
   scale no :active), o que escala o ícone junto — correto e sem competição. */
.btn > i,
.btn > svg { flex: 0 0 auto; pointer-events: none; }

/* =====================================================================
   INTENÇÕES
   ===================================================================== */
.btn-primary { background: var(--btn-primary-bg); color: #fff;
               box-shadow: var(--shadow-primary, 0 4px 14px rgba(27, 63, 216, .28)); }
.btn-primary:hover { background: var(--btn-primary-bg-h); color: #fff;
               box-shadow: 0 8px 24px rgba(27, 63, 216, .34); transform: translateY(-1px); }

.btn-accent { background: var(--btn-accent-bg); color: #fff;
               box-shadow: var(--shadow-accent, 0 4px 14px rgba(245, 158, 11, .28)); }
.btn-accent:hover { background: var(--btn-accent-bg-h); color: #fff;
               box-shadow: 0 8px 24px rgba(245, 158, 11, .34); transform: translateY(-1px); }

.btn-cyan { background-image: linear-gradient(135deg, var(--btn-cyan-a) 0%, var(--btn-cyan-b) 100%);
               color: #fff; box-shadow: var(--shadow-cyan, 0 4px 14px rgba(14, 165, 233, .3)); }
.btn-cyan:hover { box-shadow: 0 8px 24px rgba(14, 165, 233, .42); color: #fff;
               transform: translateY(-1px); }

/* Existe porque navbar.css:685 (.btn-preview), modal-btn-success e o
   "Exportar CSV" de relatorio.html:494 usam verde e não tinham destino. */
.btn-success { background: var(--btn-success-bg); color: #fff;
               box-shadow: 0 4px 14px rgba(16, 185, 129, .26); }
.btn-success:hover { background: var(--btn-success-bg-h); color: #fff;
               box-shadow: 0 8px 24px rgba(16, 185, 129, .34); transform: translateY(-1px); }

.btn-secondary { background: var(--btn-gray-fill); color: var(--btn-gray-text);
               border: 1px solid var(--btn-border);
               box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, .05)); }
.btn-secondary:hover { background: var(--btn-gray-fill-h); color: var(--btn-gray-text-h);
               border-color: var(--color-gray-400, #CBD5E1); transform: translateY(-1px); }

.btn-ghost { background: transparent; color: var(--btn-primary-bg);
               border: 1px solid var(--color-primary-border, rgba(27, 63, 216, .3)); }
.btn-ghost:hover { background: var(--color-primary-soft, rgba(27, 63, 216, .08));
               border-color: var(--btn-primary-bg); color: var(--btn-primary-bg);
               transform: translateY(-1px); }

/* Destrutivo em CONTORNO: linha de lista e de tabela */
.btn-danger { background: transparent; color: var(--btn-error);
               border: 1px solid rgba(239, 68, 68, .3);
               --btn-focus-ring: var(--btn-error); }
.btn-danger:hover { background: var(--btn-error-soft); border-color: var(--btn-error);
               color: var(--btn-error); transform: translateY(-1px); }

/* Destrutivo SÓLIDO: confirmação em modal.
   Existe porque o consultor tem 23+ botões de exclusão vermelho-preenchido
   (ticket_detalhe.css:1871 e :1903, tickets.html:1820) e o .btn-danger é
   contorno. Reutilizar .btn-danger inverteria a aparência de todos eles, e
   forçar contorno num "Excluir definitivamente" é regressão de hierarquia. */
.btn-danger-solid { background: var(--btn-error); color: #fff;
               box-shadow: 0 4px 14px rgba(239, 68, 68, .28);
               --btn-focus-ring: var(--btn-error); }
.btn-danger-solid:hover { background: var(--btn-error-h); color: #fff;
               box-shadow: 0 8px 24px rgba(239, 68, 68, .36); transform: translateY(-1px); }

/* =====================================================================
   TAMANHOS
   ===================================================================== */
/* 32px existe para tabela densa (era o .btn-action 32x32 de
   permissoes.html:307). Fica abaixo do alvo de toque de 44px — trade-off
   aceito no desktop, compensado no bloco (pointer: coarse) mais abaixo. */
.btn-xs { --btn-h: 32px; --btn-pad-y: 0.25rem; --btn-pad-x: 0.625rem;
          --btn-font-size: var(--font-size-xs, 0.75rem); --btn-gap: 0.25rem; }
.btn-sm { --btn-h: 36px; --btn-pad-y: 0.5rem; --btn-pad-x: 1rem;
          --btn-font-size: var(--font-size-sm, 0.875rem); }
.btn-lg { --btn-h: 52px; --btn-pad-y: 0.875rem; --btn-pad-x: 2rem;
          --btn-font-size: var(--font-size-lg, 1.125rem); }

/* =====================================================================
   FORMA E LAYOUT
   ===================================================================== */
.btn-icon { padding: 0; width: var(--btn-h); height: var(--btn-h);
            min-width: var(--btn-h); min-height: var(--btn-h);
            gap: 0; flex: 0 0 auto; }
.btn-block { width: 100%; }
.btn-grow { flex: 1 1 auto; min-width: 0; }

/* =====================================================================
   SUPERFÍCIE ESCURA
   Necessário para templates/advogado/relatorio.html, cujo .relatorio-header
   tem background:#090941 (linha 18). Sem isto os 9 botões daquela página
   ficariam INVISÍVEIS depois da migração.
   ===================================================================== */
.btn-on-dark { --btn-focus-ring: #14DFFA; }
.btn-on-dark.btn-ghost { color: #C1CEF7; border-color: rgba(20, 223, 250, .3); }
.btn-on-dark.btn-ghost:hover { background: rgba(20, 223, 250, .1);
            border-color: #14DFFA; color: #14DFFA; }
.btn-on-dark.btn-secondary { background: rgba(255, 255, 255, .04); color: #E2E8F0;
            border-color: rgba(255, 255, 255, .14); }
.btn-on-dark.btn-secondary:hover { background: rgba(255, 255, 255, .09); color: #fff; }
.btn-on-dark.btn-success { background: rgba(16, 185, 129, .14); color: #10B981;
            border: 1px solid rgba(16, 185, 129, .4); box-shadow: none; }
.btn-on-dark.btn-success:hover { background: #10B981; color: #06281F; }
.btn-on-dark.btn-danger { background: rgba(239, 68, 68, .12); color: #F87171;
            border: 1px solid rgba(239, 68, 68, .45); }
.btn-on-dark.btn-danger:hover { background: #EF4444; color: #fff;
            border-color: #EF4444; }
.btn-on-dark.btn-primary { box-shadow: none; }

/* =====================================================================
   ESTADOS
   :focus-visible e :disabled NÃO existiam em cliente-base.css — o único
   focus-visible do projeto estava em contabilidade/nota_fiscal.css:184.
   Ganho puro de acessibilidade, sem regressão possível.
   ===================================================================== */
.btn:focus-visible {
  outline: 2px solid var(--btn-focus-ring);
  outline-offset: 2px;
}
/* Anel interno branco quando o próprio botão já é colorido e saturado */
.btn-primary:focus-visible,
.btn-cyan:focus-visible,
.btn-accent:focus-visible,
.btn-success:focus-visible,
.btn-danger-solid:focus-visible {
  outline-color: #fff;
  outline-offset: -3px;
  box-shadow: 0 0 0 3px rgba(27, 63, 216, .45);
}
/* Sem anel no clique de mouse */
.btn:focus:not(:focus-visible) { outline: none; }

.btn:disabled,
.btn[disabled] { opacity: .55; cursor: not-allowed; box-shadow: none; }
.btn:disabled:hover,
.btn[disabled]:hover { transform: none; box-shadow: none; }
/* <a class="btn"> não tem :disabled nativo */
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* :active vem DEPOIS de todos os modificadores, o que dispensa o !important
   que cliente-base.css:192 usava. Aquele !important existia só porque a regra
   estava ANTES de .btn-primary:hover, com a mesma especificidade (0,2,0), e
   perdia o desempate por ordem. Mover resolve na origem e libera o canal de
   transform para a camada de ícones. */
.btn:active { transform: translateY(0) scale(.97); }
/* =====================================================================
   GRUPO SEGMENTADO — abas e filtros mutuamente exclusivos
   Substitui 16 classes (~50 usos) que eram pílulas de 20px: filter-btn-config,
   config-tab, ticket-tab, filter-btn, btn-periodo, btn-dept, filtro-btn,
   filter-tab, vincular-filtro-tag, response-tab, seg-tab-btn,
   aba-responsavel, busca-av-chip, servico-chip.
   Não são botões de comando: não emitem ação, mudam a própria aparência.
   ===================================================================== */
.seg {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  padding: 2px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md, 6px);
  background: var(--btn-gray-fill);
  overflow-x: auto;
  max-width: 100%;
}
.seg-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, 0.5rem);
  padding: 0.4375rem 0.875rem;
  min-height: 32px;
  border: none;
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--btn-gray-text);
  font-family: inherit;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--btn-t-fast), color var(--btn-t-fast);
}
.seg-item:hover { background: rgba(15, 23, 42, .05); color: var(--btn-gray-text-h); }
.seg-item.is-active,
.seg-item.active,
.seg-item.ativa,
.seg-item[aria-selected="true"] {
  background: var(--color-surface-raised, #fff);
  color: var(--btn-primary-bg);
  font-weight: var(--font-weight-semibold, 600);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 23, 42, .05));
}
.seg-item:focus-visible { outline: 2px solid var(--btn-focus-ring); outline-offset: -1px; }
.seg-item:disabled { opacity: .5; cursor: not-allowed; }
/* Contador dentro da aba — é badge, mantém a pílula */
.seg-item > .seg-count {
  padding: 0 0.375rem;
  min-width: 18px;
  border-radius: var(--radius-full, 9999px);
  background: rgba(15, 23, 42, .08);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: var(--font-weight-semibold, 600);
}
/* Variante para superfície escura (relatorio.html) */
.seg.seg-on-dark { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .14); }
.seg-on-dark .seg-item { color: #C1CEF7; }
.seg-on-dark .seg-item:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.seg-on-dark .seg-item.is-active,
.seg-on-dark .seg-item.active { background: rgba(20, 223, 250, .16); color: #14DFFA; box-shadow: none; }

/* =====================================================================
   PAGINAÇÃO
   Substitui pagination-btn, pagination-page-btn, btn-paginacao.
   ===================================================================== */
.pager { display: inline-flex; align-items: center; gap: 0.25rem; flex-wrap: wrap; }
.pager-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  min-height: 32px;
  padding: 0 0.5rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-md, 6px);
  background: var(--color-surface-raised, #fff);
  color: var(--btn-gray-text);
  font-family: inherit;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: var(--font-weight-medium, 500);
  cursor: pointer;
  transition: background-color var(--btn-t-fast), border-color var(--btn-t-fast),
              color var(--btn-t-fast);
}
.pager-item:hover:not(:disabled):not(.is-active):not(.active) {
  background: var(--btn-gray-fill); border-color: var(--color-gray-400, #CBD5E1);
  color: var(--btn-gray-text-h);
}
.pager-item.is-active,
.pager-item.active,
.pager-item[aria-current="page"] {
  background: var(--btn-primary-bg); border-color: var(--btn-primary-bg);
  color: #fff; font-weight: var(--font-weight-semibold, 600);
}
.pager-item:focus-visible { outline: 2px solid var(--btn-focus-ring); outline-offset: 2px; }
.pager-item:disabled { opacity: .45; cursor: not-allowed; }
/* Reticências entre faixas de página — não é interativo */
.pager-gap { padding: 0 0.25rem; color: var(--color-gray-500, #94A3B8); user-select: none; }

/* =====================================================================
   ACESSIBILIDADE
   ===================================================================== */
@media (pointer: coarse) {
  /* Compensa .btn-xs (32px) e .btn-icon densos em tela de toque */
  .btn-xs { --btn-h: 40px; }
  .btn-icon.btn-xs { --btn-h: 40px; }
  .seg-item { min-height: 40px; }
  .pager-item { min-width: 40px; min-height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .seg-item, .pager-item { transition: none; }
  .btn:hover, .btn:active { transform: none; }
}