/* ============================================================
   Melhor Passagem · Agency OS — Telas (camada ds-)
   ------------------------------------------------------------
   Aplica o template de LISTA (template 1) às telas reais SEM
   tocar no HTML gerado por JS nem em ids/handlers. Opt-in por
   tela: a <section> ganha a classe aditiva `ds-lista` e herda
   todo este bloco. Só regras de CSS, todas sob .ds-theme.

   Reversão total: remover a classe ds-theme (ou este <link>);
   a classe ds-lista nas seções fica inerte sem ds-theme.
   Zero hex fora de ds-tokens.css.

   Telas marcadas (Fase 4-5): Emissões, Clientes, Conferência,
   Check-in, Movimento de milhas, Milhas & contas, Divergências,
   Detalhe de milhas, Usuários. (Dashboard, formulários e chat
   ficam para fases próprias.)
   ============================================================ */

/* realinha as variáveis LEGADAS usadas em estilos inline do JS
   (var(--ok)/var(--erro)/var(--sub)) à paleta ds — só nas telas
   de lista, sem editar o JS. Célula de lucro (verde/vermelho) e
   textos secundários já saem na cor certa. */
.ds-theme .ds-lista {
  --ok: var(--ds-kpi-positivo);
  --erro: var(--ds-kpi-negativo);
  --sub: var(--ds-texto-meta);
}

/* ── card de seção (raio 32, borda, branco) ── */
.ds-theme .ds-lista .card {
  background: var(--ds-branco); border: 1px solid var(--ds-n-200);
  border-radius: var(--ds-raio-secao); padding: var(--ds-esp-24); margin-bottom: var(--ds-bloco-gap);
}
.ds-theme .ds-lista .card h2 {
  font-family: var(--ds-fonte); color: var(--ds-titulo); font-size: var(--ds-tam-secao);
  font-weight: var(--ds-peso-secao); letter-spacing: var(--ds-espaco-letras); text-transform: none;
}
.ds-theme .ds-lista .card .dica,
.ds-theme .ds-lista .card > p {
  color: var(--ds-texto-meta); font-family: var(--ds-fonte); font-size: var(--ds-tam-sec);
  letter-spacing: var(--ds-espaco-letras);
}

/* ── toolbar / filtros ── */
.ds-theme .ds-lista .grade { gap: var(--ds-esp-12) var(--ds-esp-16); align-items: end; }
.ds-theme .ds-lista label {
  display: block; color: var(--ds-texto-sec); font-family: var(--ds-fonte);
  font-size: var(--ds-tam-sec); font-weight: 500; letter-spacing: var(--ds-espaco-letras);
  margin: 0 0 var(--ds-esp-6);
}

/* busca com lupa à direita */
.ds-theme .ds-lista .campo-busca {
  height: 46px; width: 100%;
  border: 1.5px solid var(--ds-brand-300); border-radius: var(--ds-raio-chip);
  background: var(--ds-branco) var(--ds-icone-busca) no-repeat right 14px center;
  background-size: 16px 16px; padding: 0 40px 0 14px;
  font-family: var(--ds-fonte); font-size: var(--ds-tam-sec); font-weight: 500;
  letter-spacing: var(--ds-espaco-letras); color: var(--ds-texto-forte);
}
.ds-theme .ds-lista .campo-busca::placeholder { color: var(--ds-texto-meta); font-weight: 400; }
.ds-theme .ds-lista .campo-busca:focus { outline: none; border-color: var(--ds-foco);
  box-shadow: 0 0 0 2px var(--ds-brand-200); }

/* selects como campo ds, com chevron próprio */
.ds-theme .ds-lista select {
  height: 46px; width: 100%; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--ds-n-300); border-radius: var(--ds-raio-input);
  background: var(--ds-branco) var(--ds-icone-chevron) no-repeat right 12px center;
  background-size: 16px 16px; padding: 0 38px 0 14px;
  font-family: var(--ds-fonte); font-size: var(--ds-tam-sec); font-weight: 500;
  letter-spacing: var(--ds-espaco-letras); color: var(--ds-texto-forte); cursor: pointer;
}
.ds-theme .ds-lista select:focus { outline: none; border-color: var(--ds-foco); }
/* inputs de texto comuns (ex.: ficha do cliente) */
.ds-theme .ds-lista input:not(.campo-busca):not([type=checkbox]):not([type=radio]):not([type=file]) {
  height: 46px; border: 1px solid var(--ds-n-300); border-radius: var(--ds-raio-input);
  padding: 0 14px; background: var(--ds-branco); font-family: var(--ds-fonte);
  font-size: var(--ds-tam-sec); font-weight: 500; letter-spacing: var(--ds-espaco-letras);
  color: var(--ds-texto-forte);
}
.ds-theme .ds-lista input:not(.campo-busca):focus { outline: none; border-color: var(--ds-foco); }

/* botão primário ds */
.ds-theme .ds-lista .acao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-esp-8);
  background: var(--ds-grad-marca); color: var(--ds-brand-00); border: 0;
  border-radius: var(--ds-raio-botao); min-height: 48px; padding: 14px 22px;
  font-family: var(--ds-fonte); font-size: 15px; font-weight: 500;
  letter-spacing: var(--ds-espaco-letras); box-shadow: none;
}
.ds-theme .ds-lista .acao:hover { background: var(--ds-grad-marca-hover); }

/* botões leves (ação de linha / secundário) */
.ds-theme .ds-lista .leve {
  background: var(--ds-branco); border: 1px solid var(--ds-n-300); border-radius: var(--ds-esp-8);
  color: var(--ds-texto-sec); font-family: var(--ds-fonte); font-size: 12.5px; font-weight: 500;
  letter-spacing: var(--ds-espaco-letras); padding: 5px 10px; cursor: pointer;
}
.ds-theme .ds-lista .leve:hover { background: var(--ds-n-50); border-color: var(--ds-brand-300);
  color: var(--ds-brand-700); }

/* ── tabs segmentadas (Milhas & contas) ── */
.ds-theme .ds-lista .seg {
  display: inline-flex; background: var(--ds-n-100); border: 0; border-radius: var(--ds-raio-chip);
  padding: var(--ds-esp-4); gap: var(--ds-esp-2); overflow: hidden;
}
.ds-theme .ds-lista .seg-btn {
  border: 0; background: none; border-radius: 9px; padding: 8px 16px;
  font-family: var(--ds-fonte); font-size: var(--ds-tam-sec); font-weight: 500;
  letter-spacing: var(--ds-espaco-letras); color: var(--ds-texto-sec); cursor: pointer;
}
.ds-theme .ds-lista .seg-btn + .seg-btn { border-left: 0; }
.ds-theme .ds-lista .seg-btn.ativo { background: var(--ds-branco); color: var(--ds-brand-900);
  box-shadow: 0 1px 3px rgba(16, 29, 40, .12); }

/* ── KPIs ── */
.ds-theme .ds-lista .kpis { gap: var(--ds-bloco-gap); }
.ds-theme .ds-lista .kpi {
  background: var(--ds-kpi-fundo); border: 1px solid var(--ds-brand-300);
  border-radius: var(--ds-raio-kpi); padding: var(--ds-esp-20) var(--ds-esp-24);
  min-height: 0; position: relative; overflow: hidden;
}
.ds-theme .ds-lista .kpi::after {  /* marca d'água da seta oficial */
  content: ""; position: absolute; right: -14px; bottom: -8px; width: 108px; height: 66px;
  opacity: .07; pointer-events: none; background: var(--ds-brand-600);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='260 75 210 125'><path d='M270%20171%20L446%2085%20Q457%2080%20464%2088%20Q471%2096%20463%20105%20L424%20146%20L426%20118%20L287%20196%20Z' fill='black'/></svg>") no-repeat center/contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='260 75 210 125'><path d='M270%20171%20L446%2085%20Q457%2080%20464%2088%20Q471%2096%20463%20105%20L424%20146%20L426%20118%20L287%20196%20Z' fill='black'/></svg>") no-repeat center/contain;
}
.ds-theme .ds-lista .kpi > * { position: relative; }
.ds-theme .ds-lista .kpi span { color: var(--ds-texto-sec); font-size: 13px; letter-spacing: var(--ds-espaco-letras); }
.ds-theme .ds-lista .kpi b {
  display: block; margin: var(--ds-esp-4) 0; color: var(--ds-texto-forte);
  font-size: var(--ds-tam-kpi); font-weight: var(--ds-peso-kpi); line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.ds-theme .ds-lista .kpi.azul { border-color: var(--ds-brand-400); }

/* ── tabela (template 1) ── */
.ds-theme .ds-lista .rolagem { margin-top: var(--ds-esp-16); }
.ds-theme .ds-lista table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-family: var(--ds-fonte); font-size: 13px; letter-spacing: var(--ds-espaco-letras);
}
.ds-theme .ds-lista th {
  background: var(--ds-n-100); color: var(--ds-texto-forte); font-weight: 500;
  text-transform: none; letter-spacing: var(--ds-espaco-letras); font-size: 12.5px;
  text-align: left; white-space: nowrap; border-bottom: 0; padding: var(--ds-esp-12) 10px;
}
.ds-theme .ds-lista th.num { text-align: right; }
.ds-theme .ds-lista th:first-child { border-radius: var(--ds-raio-kpi) 0 0 0; }
.ds-theme .ds-lista th:last-child { border-radius: 0 var(--ds-raio-kpi) 0 0; }
.ds-theme .ds-lista td {
  border-bottom: 1px solid var(--ds-n-200); color: var(--ds-texto-sec);
  font-size: 13px; padding: var(--ds-esp-12) 10px; vertical-align: middle;
}
.ds-theme .ds-lista tr:hover td { background: var(--ds-n-50); }
.ds-theme .ds-lista td b { color: var(--ds-texto-forte); font-weight: 500; }
.ds-theme .ds-lista .num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-theme .ds-lista table a { color: var(--ds-brand-600); font-weight: 500; }

/* ── pills de status ── */
.ds-theme .ds-lista .selo {
  display: inline-block; border-radius: var(--ds-raio-status); padding: 4px 12px;
  font-size: 12.5px; font-weight: 500; letter-spacing: var(--ds-espaco-letras);
  background: var(--ds-n-100); color: var(--ds-texto-sec); text-transform: none;
}
.ds-theme .ds-lista .selo.conferida,
.ds-theme .ds-lista .selo.pago,
.ds-theme .ds-lista .selo.lancado,
.ds-theme .ds-lista .selo.recorrente,
.ds-theme .ds-lista .selo.disponivel,
.ds-theme .ds-lista .selo.venda_emitida,
.ds-theme .ds-lista .selo.venda_paga,
.ds-theme .ds-lista .selo.venda_pago { background: var(--ds-ok-fundo); color: var(--ds-ok-texto); }
.ds-theme .ds-lista .selo.pendente,
.ds-theme .ds-lista .selo.a_lancar,
.ds-theme .ds-lista .selo.a_receber,
.ds-theme .ds-lista .selo.reservado,
.ds-theme .ds-lista .selo.cobrado { background: var(--ds-alerta-fundo); color: var(--ds-alerta-texto); }
.ds-theme .ds-lista .selo.divergente,
.ds-theme .ds-lista .selo.vencido,
.ds-theme .ds-lista .selo.vencendo { background: var(--ds-erro-fundo); color: var(--ds-erro-texto); }
.ds-theme .ds-lista .selo.cancelado,
.ds-theme .ds-lista .selo.usado,
.ds-theme .ds-lista .selo.pontual { background: var(--ds-n-100); color: var(--ds-texto-sec); }

/* ── estado vazio ── */
.ds-theme .ds-lista .vazio {
  color: var(--ds-texto-meta); font-size: var(--ds-tam-sec); text-align: center; padding: 48px;
}

/* ── foco acessível ── */
.ds-theme .ds-lista .campo-busca:focus-visible,
.ds-theme .ds-lista select:focus-visible,
.ds-theme .ds-lista input:focus-visible,
.ds-theme .ds-lista .acao:focus-visible,
.ds-theme .ds-lista .leve:focus-visible,
.ds-theme .ds-lista .seg-btn:focus-visible { outline: 2px solid var(--ds-foco); outline-offset: 2px; }