/* ============================================================================
   KD Imóveis · Prumo — kd-components.css
   ----------------------------------------------------------------------------
   Complemento MÍNIMO do kd-theme.css para os macros de templates/macros/kd.html.
   Carregado por partials/kd_theme_head.html logo depois de kd-theme.css (mesma
   condição kd_on). Só entra aqui o que a parte 02 do kd-theme não define e os
   macros precisam; nenhuma regra redefine seletor do kd-theme.

   Regras desta camada
   - Toda cor sai de var(--kd-*): os dois temas seguem sozinhos.
   - Sem !important, sem seletor universal, sem geometria do shell.
   - Nunca editar kd-theme.css para acomodar um macro: acrescentar aqui.

   Índice
     1. Ícones com tamanho fixo — macro icon() (.kd-icon, .kd-icon-12…32)
     2. Dinheiro fora de tabela — macro money() (.kd-money.is-negative/.is-zero)
     3. Cabeçalho de página — trilha dentro de <nav> e código dentro do <h1>
     4. Chips de situação da filter-bar — ícone na cor semântica em repouso
     5. Estado vazio de erro — texto em ink
     6. Rodapé de paginação — formulário "por página" em linha
   ============================================================================ */


/* ============================================================================
   1. Ícones Phosphor com tamanho fixo (escala do design system: 12/14/16/20/24/32)
   A fonte do Steex (Phosphor v1) já põe display:inline-flex em [class^=ph-];
   aqui só a caixa quadrada de 1em e o alinhamento com o texto. Contextos que
   fixam o próprio tamanho (.kd-badge-status, .kd-kpi__delta, .kd-empty__icon,
   .kd-search, .kd-icon-btn…) vencem por especificidade (classe + atributo).
   ============================================================================ */
.kd-icon {
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: -.125em;
}
.kd-icon-12 { font-size: 12px; }
.kd-icon-14 { font-size: 14px; }
.kd-icon-16 { font-size: 16px; }
.kd-icon-20 { font-size: 20px; }
.kd-icon-24 { font-size: 24px; }
.kd-icon-32 { font-size: 32px; }


/* ============================================================================
   2. Dinheiro fora de tabela — macro money()
   O kd-theme pinta negativos/zeros só em .kd-numeric.is-* e dentro de
   .table-ledger; o <span class="kd-money"> solto (cards, KPIs, modais) precisa
   dos mesmos dois estados. O sinal "−" faz parte do texto (nunca só cor).
   ============================================================================ */
.kd-money.is-negative {
  color: var(--kd-danger);
}
.kd-money.is-zero {
  color: var(--kd-ink-subtle);
}


/* ============================================================================
   3. Cabeçalho de página — macro page_header()
   A trilha vai dentro de <nav aria-label> (semântica pedida pelo DS); como o
   kd-theme dá flex: 1 0 100% ao <ol class="kd-breadcrumb">, o <nav> que o
   envolve precisa ocupar a linha inteira — e sumir no celular junto com ele,
   senão sobra um item flex vazio de 100% (uma linha em branco).
   O identificador fica DENTRO do <h1> (o leitor de tela anuncia "Contrato
   CTR-00118"); o kd-theme já lhe dá mono 13px, surface-100 e radius-1.
   ============================================================================ */
.kd-page-header__nav {
  flex: 1 0 100%;
  min-width: 0;
}
.kd-page-header__title > h1 > .kd-page-header__code {
  margin-left: 4px;
  vertical-align: middle;
}
@media (max-width: 767.98px) {
  .kd-page-header__nav {
    display: none;
  }
}


/* ============================================================================
   4. Chips de situação — macro filter_bar(chips=…)
   O chip do kd-theme é neutro (surface-0 + borda line; ativo = ink). O ícone
   fixo por estado (check-circle, clock, warning-circle, info, minus-circle)
   leva a cor semântica em repouso para a forma + cor identificarem o estado;
   no chip ativo (fundo ink) o ícone herda ink-inverse.
   ============================================================================ */
.kd-chip.is-success > .kd-icon { color: var(--kd-success); }
.kd-chip.is-warning > .kd-icon { color: var(--kd-warning); }
.kd-chip.is-danger  > .kd-icon { color: var(--kd-danger); }
.kd-chip.is-info    > .kd-icon { color: var(--kd-info); }
.kd-chip.is-active > .kd-icon,
.kd-chip[aria-pressed="true"] > .kd-icon {
  color: inherit;
}


/* ============================================================================
   5. Estado vazio de erro — macro empty_state(kind='error')
   O DS pede o texto em ink (não ink-muted) quando é falha de carregamento; o
   kd-theme só troca a cor do ícone para danger.
   ============================================================================ */
.kd-empty.is-error .kd-empty__text {
  color: var(--kd-ink);
}


/* ============================================================================
   6. Rodapé de paginação — macro pagination_footer()
   O seletor "por página" vive num <form method="get"> próprio, em linha com a
   contagem. O Bootstrap/Steex não dá margem a <form>, mas o reset fica
   explícito para o rodapé manter os 56px.
   ============================================================================ */
.kd-pagination-footer__info > form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}