/* ============================================================
   ESPECIFICIDADE — por que tudo aqui usa :where()
   ============================================================
   Este arquivo casa componentes por padrão de nome, e cada regra
   precisa de vários :not() para não pegar elementos internos.
   O problema: `:not()` SOMA especificidade. Um seletor como

     [class*="-card"]:not([class*="-card-"]):not([class*="-cards"])

   pesa 0,3,0 e atropela `.pv-kanban-card` (0,1,0) — que é a regra
   nomeada, escrita depois, e deveria vencer. Foi o que apagou a
   cor de urgência do cartão do quadro e desconfigurou o seletor
   de período do Financeiro.

   `:where()` tem especificidade ZERO. Envolvendo as cadeias de
   :not() nele, este arquivo passa a valer 0,1,0 — funciona como
   BASE, e qualquer regra nomeada de tela ganha dele naturalmente,
   sem precisar de hack de especificidade nem !important.
   ============================================================ */

/* ============================================================
   Unificação — o mesmo componente em todas as telas
   ============================================================

   O PROBLEMA que este arquivo resolve:
   cada tela do TalentInhA cresceu com o seu próprio componente,
   prefixado. O levantamento encontrou:

     167 seletores de botão   (.fin-btn-primary, .cl-btn-primary,
                               .pm-btn-primario, .ce-btn-primary…)
     150 seletores de card    (.fin-card, .pc-card, .ce-card…)
     110 seletores de modal   (.pc-modal, .sa-acomp-modal-card…)
      59 seletores de selo     (.pv-badge-qual, .contr-status-badge…)

   Cada um com raio, altura, peso, sombra e cor próprios. É exatamente
   isso que se lê como "tela com cara diferente da outra" e como
   "antigo misturado com novo": não era resíduo do tema velho, era
   ausência de um componente único.

   A correção casa pelo PADRÃO DE NOME, não tela por tela. Uma regra
   aqui alcança as 486 variações de uma vez — e qualquer tela nova
   nasce no padrão sem precisar de CSS próprio.

   Convenção lida nos seletores:
     [class*="-btn"]:where(:not([class*="-btn-"]))   → o botão em si
     [class*="-btn-primary"]                 → variante de ação
     [class*="-card"]:where(:not([class*="-card-"])) → a superfície do card,
                                               nunca seus elementos
                                               internos (-card-header,
                                               -card-title…)

   Carregar por ÚLTIMO, depois de app.css.
   ============================================================ */

/* ============================================================
   1. Botão — geometria única
   Altura de alvo de toque, raio --radius-sm, peso 700, Inter.
   Sem deslocamento no hover e sem sombra colorida: o DS2 pede
   movimento sóbrio.
   ============================================================ */
[class*="-btn"]:where(:not([class*="-btn-"]):not([class*="-btns"])),
[class*="-btn-primary"], [class*="-btn-primario"],
[class*="-btn-secondary"], [class*="-btn-secundario"],
[class*="-btn-ghost"], [class*="-btn-plain"], [class*="-btn-outline"],
[class*="-btn-danger"], [class*="-btn-remover"], [class*="-btn-cancel"],
[class*="-btn-save"], [class*="-btn-salvar"], [class*="-btn-submit"],
[class*="-btn-search"], [class*="-btn-buscar"], [class*="-btn-sync"],
[class*="-btn-refresh"], [class*="-btn-expand"], [class*="-btn-edit"],
[class*="-btn-resolver"], [class*="-btn-cobrar"], [class*="-btn-ciente"],
[class*="-btn-sentiment"], [class*="-btn-fechar"], [class*="-btn-retry"] {
  align-items: center;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: 700;
  gap: var(--space-2);
  justify-content: center;
  line-height: 1.2;
  min-height: calc(var(--space-8) + var(--space-2));
  padding: var(--space-2) var(--space-4);
  text-decoration: none;
  transform: none;
  transition: background var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}

/* O spinner vive DENTRO do botão — não é botão. */
[class*="-btn-spinner"] {
  align-items: initial;
  border-radius: var(--radius-pill);
  display: inline-block;
  min-height: 0;
  padding: 0;
}

/* Ação: Roxo Vértice. Um CTA principal por bloco. */
[class*="-btn-primary"], [class*="-btn-primario"],
[class*="-btn-submit"], [class*="-btn-save"], [class*="-btn-salvar"],
[class*="-btn-cobrar"], [class*="-btn-resolver"] {
  background: var(--violet-500);
  border-color: transparent;
  box-shadow: none;
  color: var(--white);
}
[class*="-btn-primary"]:hover:where(:not(:disabled)), [class*="-btn-primario"]:hover:where(:not(:disabled)),
[class*="-btn-submit"]:hover:where(:not(:disabled)), [class*="-btn-save"]:hover:where(:not(:disabled)),
[class*="-btn-salvar"]:hover:where(:not(:disabled)), [class*="-btn-cobrar"]:hover:where(:not(:disabled)),
[class*="-btn-resolver"]:hover:where(:not(:disabled)) {
  background: var(--violet-700);
  box-shadow: none;
  transform: none;
}

/* Apoio: superfície branca com fio. */
[class*="-btn-secondary"], [class*="-btn-secundario"],
[class*="-btn-outline"], [class*="-btn-cancel"],
[class*="-btn-search"], [class*="-btn-buscar"],
[class*="-btn-sync"], [class*="-btn-refresh"], [class*="-btn-edit"],
[class*="-btn-expand"], [class*="-btn-ciente"], [class*="-btn-retry"] {
  background: var(--white);
  border-color: var(--border-default);
  box-shadow: none;
  color: var(--text-strong);
}
[class*="-btn-secondary"]:hover:where(:not(:disabled)), [class*="-btn-secundario"]:hover:where(:not(:disabled)),
[class*="-btn-outline"]:hover:where(:not(:disabled)), [class*="-btn-cancel"]:hover:where(:not(:disabled)),
[class*="-btn-search"]:hover:where(:not(:disabled)), [class*="-btn-buscar"]:hover:where(:not(:disabled)),
[class*="-btn-sync"]:hover:where(:not(:disabled)), [class*="-btn-refresh"]:hover:where(:not(:disabled)),
[class*="-btn-edit"]:hover:where(:not(:disabled)), [class*="-btn-expand"]:hover:where(:not(:disabled)),
[class*="-btn-ciente"]:hover:where(:not(:disabled)), [class*="-btn-retry"]:hover:where(:not(:disabled)) {
  background: var(--surface-sunken);
  border-color: var(--border-strong);
  transform: none;
}

/* Discreto: sem moldura. */
[class*="-btn-ghost"], [class*="-btn-plain"], [class*="-btn-fechar"] {
  background: transparent;
  border-color: transparent;
  color: var(--text-body);
}
[class*="-btn-ghost"]:hover:where(:not(:disabled)), [class*="-btn-plain"]:hover:where(:not(:disabled)),
[class*="-btn-fechar"]:hover:where(:not(:disabled)) {
  background: var(--surface-sunken);
  color: var(--text-strong);
}

/* Destrutivo: sempre legível, nunca vermelho vibrante de enfeite. */
[class*="-btn-danger"], [class*="-btn-remover"] {
  background: var(--danger-100);
  border-color: color-mix(in srgb, var(--danger-500) 35%, var(--white));
  color: var(--danger-500);
}
[class*="-btn-danger"]:hover:where(:not(:disabled)), [class*="-btn-remover"]:hover:where(:not(:disabled)) {
  background: color-mix(in srgb, var(--danger-500) 18%, var(--white));
  border-color: var(--danger-500);
  transform: none;
}

[class*="-btn"]:disabled { cursor: not-allowed; opacity: 0.5; transform: none; }

/* ============================================================
   2. Card — uma superfície só
   Fundo branco, fio fino, raio --radius-lg, sombra MUITO leve.
   A sombra pesada em card pequeno era parte do "feio": elevação
   forte é para modal, não para bloco de conteúdo.
   ============================================================ */
[class*="-card"]:where(:not([class*="-card-"]):not([class*="-cards"]):not([class*="-modal"])) {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: none;
}

/* Card clicável ganha reação, não elevação. */
button[class*="-card"]:where(:not([class*="-card-"])):hover,
a[class*="-card"]:where(:not([class*="-card-"])):hover,
[class*="-card"][onclick]:where(:not([class*="-card-"])):hover {
  border-color: var(--violet-300);
  box-shadow: var(--shadow-xs);
  transform: none;
}

/* Título e rótulo dentro do card. */
[class*="-card-title"] {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--text-block-title);
  font-weight: 700;
  letter-spacing: -0.02em;
}
[class*="-card-label"], [class*="-card-desc"], [class*="-card-subtitle"] {
  color: var(--text-muted);
  font-size: var(--text-body-sm);
}
[class*="-card-header"] { border-bottom: 1px solid var(--border-subtle); }
[class*="-card-footer"] { border-top: 1px solid var(--border-subtle); }

/* ============================================================
   3. Modal — elevação de verdade, aqui sim
   ============================================================ */
[class*="-modal-overlay"], [class*="-overlay"][class*="modal"] {
  background: color-mix(in srgb, var(--night-900) 62%, transparent);
  z-index: var(--layer-modal);
}
[class*="-modal"]:where(:not([class*="-modal-"]):not([class*="-overlay"])),
[class*="-modal-card"], [class*="-modal-content"] {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
}
[class*="-modal-header"] { border-bottom: 1px solid var(--border-subtle); }
[class*="-modal-header"] h2, [class*="-modal-header"] h3, [class*="-modal-title"] {
  color: var(--text-strong);
  font-family: var(--font-display);
  font-size: var(--text-block-title);
  letter-spacing: -0.02em;
}
[class*="-modal-footer"] { border-top: 1px solid var(--border-subtle); }
[class*="-modal-close"] {
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  min-height: var(--space-8);
  min-width: var(--space-8);
}
[class*="-modal-close"]:hover { background: var(--surface-sunken); color: var(--text-strong); }

/* ============================================================
   4. Selo, etiqueta e pílula — uma forma só
   Estado codificado também em forma: o ponto à esquerda mantém a
   leitura sem depender de percepção de cor.
   ============================================================ */
[class*="-badge"]:where(:not([class*="-badge-"])),
[class*="-chip"]:where(:not([class*="-chip-"])),
[class*="-pill"]:where(:not([class*="-pill-"])),
[class*="-tag"]:where(:not([class*="-tag-"]):not([class*="-tags"])) {
  align-items: center;
  border-radius: var(--radius-pill);
  display: inline-flex;
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: 700;
  gap: var(--space-1);
  line-height: 1.4;
  padding: var(--space-1) var(--space-3);
  white-space: nowrap;
}

/* ============================================================
   5. Campo de formulário — o mesmo em toda tela
   ============================================================ */
/* Casado por ELEMENTO, nunca por classe solta. `[class*="-select"]`
   pegava `.fin-periodo-selector` (um grupo de botões) e o pintava de
   campo de formulário — e vencia por especificidade, porque o `:where(:not())`
   soma. Regra: se é campo, o elemento é input/select/textarea. */
input[class*="-input"], select[class*="-select"], textarea[class*="-textarea"],
input[type="text"], input[type="email"], input[type="tel"],
input[type="number"], input[type="date"], input[type="search"],
input[type="password"], select, textarea {
  background: var(--white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-strong);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  min-height: calc(var(--space-8) + var(--space-2));
  padding: var(--space-2) var(--space-3);
}
input:focus-visible, select:focus-visible, textarea:focus-visible,
input:focus, select:focus, textarea:focus {
  border-color: var(--violet-500);
  box-shadow: var(--shadow-focus);
  outline: none;
}
textarea { min-height: var(--space-20); resize: vertical; }
::placeholder { color: var(--text-subtle); }

/* ============================================================
   6. Título de tela e de seção — mesma hierarquia em toda parte
   ============================================================ */
[class*="-title"]:where(:not([class*="-title-"]):not([class*="-card-title"]):not([class*="-modal-title"])) {
  color: var(--text-strong);
  font-family: var(--font-display);
  letter-spacing: -0.025em;
}
[class*="-screen"] > h1, [class*="-screen"] > h2,
[class*="-container"] > h1, [class*="-container"] > h2 {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}
[class*="-subtitle"], [class*="-hint"], [class*="-help"], [class*="-muted"] {
  color: var(--text-muted);
  font-size: var(--text-body-sm);
}

/* Cabeçalho de tela NÃO entra aqui de propósito.
   Um `[class*="-header"] { align-items: end }` alcançaria dezenas de
   cabeçalhos que dependem de alinhamento central (com ícone, avatar,
   botão) e quebraria layout em série. Cada cabeçalho de tela recebe
   tratamento nomeado em telas.css. */