/* ============================================================================
   Ponte de compatibilidade — TEMPORÁRIO. Este arquivo existe para MORRER.
   ============================================================================
   Reaponta os vocabulários antigos (v2-*, partes-*, nv2-*) para os tokens
   novos, para que uma tela ainda não migrada herde as correções de contraste
   no mesmo deploy — sem que ninguém precise abrir o template dela.

   Sem isto, a fase de fundação viraria um big bang: ou migra as 55 telas de
   uma vez, ou metade do sistema fica com o botão primário reprovando em
   contraste enquanto a outra metade não.

   COMO MORRER: a cada fase, ao migrar uma tela, apagar daqui as regras que ela
   era a última a usar. No fim de F7 este arquivo é removido e o <link> sai do
   base.html. Se ele ainda existir depois de F7, a migração não terminou.

   REGRA: aqui só entra ALIAS. Estilo novo vai em components.css. Se você está
   escrevendo algo aqui que não é "aponte o nome velho para o token novo",
   está no arquivo errado.
   ========================================================================== */


/* ── botão primário: a correção mais importante do arquivo ─────────────────
   .v2-btn-primary (style.css:2526) é `color: #fff !important` sobre âmbar =
   2.08:1, reprovado em qualquer critério WCAG. Só o !important daqui vence o
   !important de lá — é a ÚNICA exceção autorizada do sistema, e ela morre
   junto com este arquivo. */
.v2-btn-primary,
.partes-btn-primary,
.nv2-btn-primary,
.pm-btn-primary {
  background: var(--ds-brand) !important;
  color: var(--ds-on-brand) !important;
  border-color: var(--ds-brand) !important;
}
.v2-btn-primary:hover,
.partes-btn-primary:hover,
.nv2-btn-primary:hover,
.pm-btn-primary:hover {
  background: var(--ds-brand-strong) !important;
  color: var(--ds-on-brand) !important;
}
/* Mesma regra para o botão âmbar do Bootstrap quando a tela usa .btn-warning
   como primário (billing faz isso). */
.btn-warning {
  color: var(--ds-on-brand);
}


/* ── cabeçalhos de página: três grafias, um tamanho ────────────────────── */
.v2-page-title, .partes-page-title, .pagetitle h1 {
  font-size: var(--ds-fs-6); font-weight: 750;
  letter-spacing: -.012em; color: var(--ds-text);
}
.v2-page-desc, .partes-page-desc {
  font-size: var(--ds-fs-2); color: var(--ds-text-dim);
}


/* ── superfícies de card ──────────────────────────────────────────────── */
.v2-card, .v2-table-card, .v2-filter-card,
.partes-table-card, .partes-filter-card,
.nv2-card {
  background: var(--ds-surface);
  border-color: var(--ds-border);
  border-radius: var(--ds-radius-lg);
}


/* ── hover de linha: tira o creme de TODAS as tabelas de uma vez ──────────
   --hover-bg é #fefbf3 (creme) e --amber-light é #fff8eb. Os dois foram usados
   como PREENCHIMENTO de linha, o que transforma âmbar de acento em fundo.
   Neutro serve os dois temas com uma regra só.
   O !important aqui vence o do .table-hover do Bootstrap. */
.v2-table-card tbody tr:hover td,
.partes-table-wrapper tbody tr:hover td,
table.table-hover tbody tr:hover > * {
  background: color-mix(in srgb, var(--ds-text) 3%, transparent) !important;
}


/* ── bordas de input: 1.27:1 → 3:1 em todos os formulários do sistema ───── */
.form-control, .form-select,
input[type="text"], input[type="number"], input[type="date"],
input[type="email"], input[type="password"], input[type="search"],
input[type="tel"], input[type="url"],
select:not(.select2-hidden-accessible), textarea,
.v2-filter-input, .partes-filter-input,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  border-color: var(--ds-border-field);
}


/* ── texto de apoio: sai de 2.95:1 ────────────────────────────────────── */
.v2-text-null, .partes-text-null,
.v2-kpi-subtitle, .partes-kpi-subtitle,
.v2-filter-hint {
  color: var(--ds-text-faint);
}


/* ── dado numérico: tabular-nums onde já existe coluna de valor ─────────── */
.v2-table-card td.num, .partes-table-wrapper td.num,
.v2-kpi-value, .partes-kpi-value, .pipe-kpi-value,
.sig-summary-value, .evo-stat-value, .rpt-kpi-value {
  font-family: var(--ds-mono); font-variant-numeric: tabular-nums;
}


/* ── skeleton antigo: alinhar o cinza ao das superfícies novas ────────────
   `.v2-skeleton` (style.css:2668) é pintado com --border e --hover-bg do tema
   ANTIGO. No dark isso dá #27272a contra o #22252c do card novo: o bloco de
   esqueletos aparece como um retângulo mais claro dentro do card, o que num
   print parece overlay perdido. Mesmo tom, mesma animação. */
.v2-skeleton {
  background: linear-gradient(
    90deg,
    var(--ds-surface-2) 25%,
    color-mix(in srgb, var(--ds-text) 7%, var(--ds-surface-2)) 50%,
    var(--ds-surface-2) 75%
  );
  background-size: 200% 100%;
}

/* ── estados vazios antigos: mesma altura e mesma cor ──────────────────── */
.v2-empty-state, .partes-initial-state, .ps-empty-block, .cmp-empty {
  color: var(--ds-text-dim);
}
.v2-empty-icon, .partes-initial-icon {
  color: var(--ds-text-faint);
}


/* ── KPI com cor hardcoded no template ────────────────────────────────────
   pipeline/index.html pinta os KPIs com style="color:#3b82f6" e afins, que não
   respondem ao tema. Aqui não dá para desfazer o inline (ele vence), mas as
   variantes por classe passam a existir para quando a tela migrar. */
.pipe-kpi-value.ok, .v2-kpi-value.ok { color: var(--ds-ok); }
.pipe-kpi-value.bad, .v2-kpi-value.bad { color: var(--ds-bad); }


/* ── select2: caixa, busca e largura ──────────────────────────────────────
   O tratamento bom já existia, preso ao seletor do funil
   (`pipeline/index.css`, `.pipe-select-wrap`). Aqui ele vale para os 21
   lugares que usam select2 — a caixa era o retângulo cru do vendor, com
   canto vivo e sem sombra, colada no campo.

   `min-width` resolve o pior caso da lista de empresas: o campo tem 190px e
   o dropdown herdava a largura dele, então "44.679.197 VICTOR DE FREITAS
   CAETANO BARBOZA" quebrava em três linhas. `min-width` vence o `width`
   inline que o select2 calcula, sem `!important`. */
/* O select2 (`setupSelect2`) nasce com `width:100%` INLINE, e inline vence
   classe: dentro do toolbar ele tomava a linha inteira e empurrava os
   vizinhos para baixo. Aqui ele volta a ter a largura dos outros controles
   (a mesma do `.gs-select`), e só no celular ocupa a linha de propósito. */
.ds-toolbar .select2-container { width: 190px !important; flex: none; }
@media (max-width: 560px) {
  .ds-toolbar .select2-container { width: 100% !important; }
}

.select2-container--default .select2-dropdown {
  /* Largura FIXA, e com `!important` de propósito: o select2 escreve a
     largura no atributo `style`, calculada pela maior opção da lista — com
     razão social de CNPJ isso passava de 600px e a caixa saía pela direita da
     tela, cortando o nome no meio. Regra de autor com `!important` vence
     estilo inline, que é o único jeito de mandar nisso sem tocar no vendor.
     O select2 ancora a caixa pela ESQUERDA do campo, e o campo mora no canto
     direito da barra: 420px estouravam 70px para fora da tela (medido em
     1100px e 1440px). 320px cabem nos dois, e o nome quebra em duas linhas em
     vez de sumir. */
  width: min(320px, calc(100vw - 24px)) !important;
  background: var(--ds-surface-2, var(--ds-surface));
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg, 10px);
  box-shadow: var(--ds-shadow-pop, 0 12px 32px rgba(0, 0, 0, .28));
  overflow: hidden;
  margin-top: 4px;
}
.select2-container--default .select2-search--dropdown { padding: 8px; }
.select2-container--default .select2-search--dropdown .select2-search__field {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border-field);
  border-radius: var(--ds-radius);
  color: var(--ds-text); font-size: var(--ds-fs-3);
  padding: 8px 10px; outline: none;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--amber);
}
.select2-container--default .select2-results__option {
  padding: 9px 13px; font-size: var(--ds-fs-3); line-height: 1.35;
  color: var(--ds-text);
  /* razão social longa QUEBRA, não some: a caixa tem `overflow: hidden` para
     respeitar o canto arredondado, então sem isto o nome era cortado no meio
     da palavra — e escolher empresa pelo pedaço que sobrou é chute. */
  white-space: normal; overflow-wrap: anywhere;
}
.select2-container--default .select2-results > .select2-results__options {
  max-height: 320px;
}


/* ── alvos de toque: 44px no celular ──────────────────────────────────────
   Medido num iPhone (390x844) durante o Desafio do Summit: cinco controles
   do chrome ficavam abaixo do mínimo — troca de tema 34x34, logo do menu
   25x26, ajuda 24x24, voltar ao topo 40x40 e a conta com 39px de altura.

   44px é o mínimo do WCAG 2.5.8 e da HIG da Apple, e o número não é estético:
   é o tamanho da polpa do dedo. Abaixo disso a pessoa erra, erra de novo, e
   conclui que a tela não responde — que foi exatamente o relato do teste.

   Cresce o ALVO, não o desenho: o ícone continua do tamanho que era, o que
   aumenta é a área que aceita o toque. Só no celular; no mouse 24px é
   preciso o suficiente e crescer ali roubaria espaço da tela. */
@media (max-width: 700px) {
  .btn-theme-toggle,
  .sidebar-logo-link,
  .ajuda-link,
  .back-to-top,
  .sidebar-acct {
    min-width: 44px;
    min-height: 44px;
  }
  /* os que centram ícone continuam centrando depois de crescer */
  .btn-theme-toggle,
  .sidebar-logo-link,
  .ajuda-link,
  .back-to-top {
    display: inline-grid;
    place-items: center;
  }
  /* a conta é uma linha larga: só a altura precisa subir */
  .sidebar-acct { min-width: 0; }
}

/* Os controles do sistema, no celular.

   A varredura no iPhone achou 31 alvos pequenos na prospecção e 38 em
   contatos — campos, selects, abas e botões entre 15 e 43px. Um a um seria
   caçada sem fim e sem garantia; aqui a regra é por CONTROLE, que é como o
   design system já pensa.

   Fora da regra de propósito: checkbox e radio (esticar o quadrado deforma o
   desenho — quem dá área a eles é o rótulo ao lado) e o "×" dentro de chip,
   que cresceria o chip inteiro e quebraria a linha de filtros. */
@media (max-width: 700px) {
  .ds-btn,
  .ds-tab,
  .ds-field input:not([type="checkbox"]):not([type="radio"]),
  .ds-field select,
  .ds-field textarea,
  .ds-search input,
  .gs-select,
  .form-control,
  .form-select,
  select:not(.select2-hidden-accessible),
  input[type="text"]:not(.select2-search__field),
  input[type="search"]:not(.select2-search__field),
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="password"] {
    min-height: 44px;
  }
  /* o cabeçalho de filtros é um botão de largura cheia: só falta altura */
  .ds-filters-head { min-height: 44px; }
  /* a busca dentro do seletor de empresa e do select2 */
  .selemp-busca,
  .select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 44px;
  }
}

/* Ícones de ação da linha e links em forma de pílula.
   Ficaram de fora da regra por controle porque não são campo nem botão do
   sistema — mas são clique de verdade: o olho que abre o processo, o
   download, o link do resultado. 28x28 e 19px de altura num dedo é chute. */
@media (max-width: 700px) {
  .v2-action-icon,
  .partes-action-icon,
  a.ds-pill {
    min-width: 44px;
    min-height: 44px;
    display: inline-grid;
    place-items: center;
  }
}