/* ============================================================
   Melhor Passagem · Agency OS — Componentes (camada ds-)
   ------------------------------------------------------------
   Fase 2: classes novas, todas prefixadas ds-. NADA aqui
   estiliza elemento ou classe do CSS legado — só quem usar
   explicitamente uma classe .ds-* recebe estilo.
   Consome apenas var(--ds-*) de ds-tokens.css: zero hex aqui.
   Showcase: /crm/static/ds-showcase.html
   ============================================================ */

/* ── botões ──────────────────────────────────────────────── */
.ds-btn {
  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);
  padding: 14px 18px; min-height: 48px;
  font-family: var(--ds-fonte); font-size: 15px; font-weight: 500;
  letter-spacing: var(--ds-espaco-letras); cursor: pointer;
}
.ds-btn:hover { background: var(--ds-grad-marca-hover); }
.ds-btn:disabled { background: var(--ds-n-200); color: var(--ds-texto-meta); cursor: default; }
.ds-btn--icone { width: 48px; height: 48px; padding: 0; }

.ds-btn-sec {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-esp-8);
  background: var(--ds-branco); color: var(--ds-texto-forte);
  border: 1px solid var(--ds-n-300); border-radius: var(--ds-raio-botao);
  padding: 13px 18px; min-height: 48px;
  font-family: var(--ds-fonte); font-size: 15px; font-weight: 500;
  letter-spacing: var(--ds-espaco-letras); cursor: pointer;
}
.ds-btn-sec:hover { background: var(--ds-n-50); }
.ds-btn-sec:disabled { color: var(--ds-n-400); border-color: var(--ds-n-200); cursor: default; background: var(--ds-branco); }

.ds-btn-texto {
  background: none; border: 0; 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); cursor: pointer;
  padding: var(--ds-esp-8) var(--ds-esp-10); border-radius: var(--ds-raio-input);
}
.ds-btn-texto:hover { background: var(--ds-n-100); }

.ds-btn:focus-visible, .ds-btn-sec:focus-visible, .ds-btn-texto:focus-visible,
.ds-chip:focus-visible, .ds-input:focus-visible, .ds-pag-btn:focus-visible {
  outline: 2px solid var(--ds-foco); outline-offset: 2px;
}

/* ── formulário ──────────────────────────────────────────── */
.ds-campo { display: flex; flex-direction: column; gap: var(--ds-esp-6); }
.ds-label { font-size: var(--ds-tam-sec); color: var(--ds-texto-sec); font-weight: 500;
  letter-spacing: var(--ds-espaco-letras); }
.ds-input {
  height: 46px; width: 100%;
  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: 15px; font-weight: 500;
  letter-spacing: var(--ds-espaco-letras); color: var(--ds-texto-forte);
}
.ds-input::placeholder { color: var(--ds-texto-meta); font-weight: 400; }
.ds-input:focus { outline: none; border-color: var(--ds-foco); box-shadow: 0 0 0 2px var(--ds-brand-200); }
.ds-input.ds-erro { border-color: var(--ds-erro-borda-input); }
.ds-input:disabled, .ds-input.ds-travado { background: var(--ds-n-100); color: var(--ds-texto-sec); }
.ds-msg-erro { font-size: 13px; color: var(--ds-erro-texto); letter-spacing: var(--ds-espaco-letras); }
select.ds-input { appearance: auto; }
textarea.ds-input { height: auto; min-height: 92px; padding: var(--ds-esp-12) 14px; resize: vertical; }

/* ── busca de toolbar (lupa à direita) ───────────────────── */
.ds-busca {
  display: flex; align-items: center; gap: var(--ds-esp-10);
  background: var(--ds-branco); border: 1.5px solid var(--ds-brand-300);
  border-radius: var(--ds-raio-chip); padding: 0 14px; height: 44px;
  min-width: 260px; flex: 1; max-width: 380px;
}
.ds-busca input {
  border: 0; outline: 0; flex: 1; background: none; min-width: 0;
  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-busca input::placeholder { color: var(--ds-texto-meta); font-weight: 400; }
.ds-busca svg { width: 16px; height: 16px; color: var(--ds-texto-meta); flex-shrink: 0; }
.ds-busca:focus-within { border-color: var(--ds-foco); }

/* ── chip de filtro ──────────────────────────────────────── */
.ds-chip {
  display: inline-flex; align-items: center; gap: var(--ds-esp-8);
  background: var(--ds-n-100); border: 0; border-radius: var(--ds-raio-chip);
  height: 42px; padding: var(--ds-esp-12) var(--ds-esp-16);
  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-chip:hover { background: var(--ds-n-200); }
.ds-chip svg { width: 16px; height: 16px; color: var(--ds-texto-meta); }
.ds-toolbar { display: flex; align-items: center; gap: var(--ds-esp-12); flex-wrap: wrap; }

/* ── abas ────────────────────────────────────────────────── */
.ds-abas { display: flex; gap: var(--ds-esp-4); border-bottom: 1px solid var(--ds-n-300); }
.ds-aba {
  padding: var(--ds-esp-10) var(--ds-esp-16); font-size: 15px; font-weight: 500;
  color: var(--ds-texto-meta); cursor: pointer; background: none; border: 0;
  font-family: var(--ds-fonte); letter-spacing: var(--ds-espaco-letras);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ds-aba:hover { color: var(--ds-texto-sec); }
.ds-aba.ds-ativa { color: var(--ds-brand-900); border-bottom-color: var(--ds-brand-600); }

/* ── card de seção (raio 32, sombra = borda) ─────────────── */
.ds-card {
  background: var(--ds-branco); border: 1px solid var(--ds-n-200);
  border-radius: var(--ds-raio-secao); padding: var(--ds-esp-24);
  display: flex; flex-direction: column; gap: var(--ds-esp-28);
}

/* ── KPIs ────────────────────────────────────────────────── */
.ds-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ds-bloco-gap); }
.ds-kpi {
  background: var(--ds-kpi-fundo); border: 1px solid var(--ds-brand-300);
  border-radius: var(--ds-raio-kpi); padding: var(--ds-esp-24);
  display: flex; flex-direction: column; gap: var(--ds-esp-8);
  position: relative; overflow: hidden;
}
.ds-kpi::after { /* marca d'água: seta do monograma oficial (forma via mask, cor via token) */
  content: ""; position: absolute; right: -14px; bottom: -8px; width: 120px; height: 74px;
  opacity: .08; 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-kpi-rotulo { display: flex; align-items: center; gap: var(--ds-esp-8);
  font-size: 13px; color: var(--ds-texto-sec); padding-top: 1px; }
.ds-kpi-rotulo svg { width: 24px; height: 24px; }
.ds-kpi-valor { font-size: var(--ds-tam-kpi); font-weight: var(--ds-peso-kpi);
  color: var(--ds-texto-forte); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ds-kpi-delta { font-size: 13px; font-weight: 500; }
.ds-kpi-delta.ds-pos { color: var(--ds-kpi-positivo); }
.ds-kpi-delta.ds-neg { color: var(--ds-kpi-negativo); }

/* ── tabela ──────────────────────────────────────────────── */
.ds-tabela-wrap { overflow-x: auto; }
.ds-tabela { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--ds-tam-sec);
  letter-spacing: var(--ds-espaco-letras); }
.ds-tabela th {
  background: var(--ds-n-100); color: var(--ds-texto-forte); font-weight: 500;
  text-align: left; padding: var(--ds-esp-12) 14px; white-space: nowrap;
}
.ds-tabela th:first-child { border-radius: var(--ds-raio-kpi) 0 0 0; }
.ds-tabela th:last-child { border-radius: 0 var(--ds-raio-kpi) 0 0; }
.ds-tabela th.ds-ordenavel { cursor: pointer; }
.ds-tabela th .ds-ord { display: inline-flex; flex-direction: column; vertical-align: middle;
  margin-left: var(--ds-esp-6); color: var(--ds-n-400); font-size: 8px; line-height: .7; }
.ds-tabela td { padding: var(--ds-esp-12) 14px; border-bottom: 1px solid var(--ds-n-200);
  color: var(--ds-texto-sec); vertical-align: middle; }
.ds-tabela tbody tr:hover td { background: var(--ds-n-50); }
.ds-tabela td b { color: var(--ds-texto-forte); font-weight: 500; }
.ds-tabela .ds-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-tabela tr.ds-destacada td { background: var(--ds-brand-25); }
.ds-lucro-pos { color: var(--ds-kpi-positivo); font-weight: 500; }
.ds-lucro-neg { color: var(--ds-kpi-negativo); font-weight: 500; }

/* linha expansível: topo marcado + painel "cartão de embarque" */
.ds-tabela tr.ds-expandida td { background: var(--ds-brand-25); border-top: 1px solid var(--ds-brand-300); }
.ds-exp-celula { padding: 0 14px 14px !important; }
.ds-exp-painel {
  position: relative; background: var(--ds-branco);
  border: 1px solid var(--ds-brand-300); border-top: 1px dashed var(--ds-brand-300);
  border-radius: 0 0 var(--ds-raio-kpi) var(--ds-raio-kpi);
  padding: var(--ds-esp-20); display: flex; flex-direction: column; gap: var(--ds-esp-12);
}
.ds-exp-painel::before, .ds-exp-painel::after {
  content: ""; position: absolute; top: -8px; width: 15px; height: 15px;
  border-radius: var(--ds-raio-pill); background: var(--ds-brand-25);
  border: 1px solid var(--ds-brand-300);
}
.ds-exp-painel::before { left: -9px; } .ds-exp-painel::after { right: -9px; }
.ds-exp-cab { display: flex; align-items: center; gap: var(--ds-esp-10); flex-wrap: wrap; }
.ds-exp-cab h4 { margin: 0; font-size: var(--ds-tam-sec); font-weight: 500; color: var(--ds-titulo); }
.ds-exp-cab svg { width: 22px; height: 14px; color: var(--ds-brand-400); }
.ds-exp-minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ds-esp-12); }
.ds-exp-mini { background: var(--ds-painel-frio); border: 1px solid var(--ds-brand-200);
  border-radius: var(--ds-raio-kpi); padding: var(--ds-esp-12) var(--ds-esp-16); }
.ds-exp-mini span { display: block; font-size: var(--ds-tam-meta); color: var(--ds-texto-meta); }
.ds-exp-mini b { font-size: 18px; font-weight: 700; color: var(--ds-texto-forte);
  font-variant-numeric: tabular-nums; }

/* ── pill de status / badge ──────────────────────────────── */
.ds-pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--ds-raio-status); padding: var(--ds-esp-4) 14px;
  min-width: 86px; font-size: var(--ds-tam-corpo); font-weight: 500;
  letter-spacing: var(--ds-espaco-letras);
}
.ds-pill.ds-ok { background: var(--ds-ok-fundo); color: var(--ds-ok-texto); }
.ds-pill.ds-ruim { background: var(--ds-erro-fundo); color: var(--ds-erro-texto); }
.ds-pill.ds-atencao { background: var(--ds-alerta-fundo); color: var(--ds-alerta-texto); }
.ds-pill.ds-info { background: var(--ds-brand-200); color: var(--ds-brand-900); }
.ds-pill.ds-neutra { background: var(--ds-n-100); color: var(--ds-texto-sec); }

.ds-badge {
  display: inline-flex; align-items: center; gap: 5px;
  border-radius: var(--ds-raio-avatar); padding: 3px var(--ds-esp-10);
  font-size: var(--ds-tam-meta); font-weight: 500; letter-spacing: var(--ds-espaco-letras);
}
.ds-badge.ds-ok { background: var(--ds-ok-fundo); color: var(--ds-ok-texto); }
.ds-badge.ds-ruim { background: var(--ds-erro-fundo); color: var(--ds-erro-texto); }
.ds-badge.ds-atencao { background: var(--ds-alerta-fundo); color: var(--ds-alerta-texto); }
.ds-badge.ds-info { background: var(--ds-brand-50); color: var(--ds-brand-800); }

/* ── assinaturas da marca: PNR e trajeto ─────────────────── */
.ds-pnr {
  display: inline-flex; align-items: center;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--ds-tam-meta); letter-spacing: .14em;
  background: var(--ds-brand-50); border: 1px dashed var(--ds-brand-300);
  border-radius: var(--ds-raio-pill-p); padding: var(--ds-esp-2) var(--ds-esp-8);
  color: var(--ds-brand-800); font-weight: 500;
}
.ds-rota { display: inline-flex; align-items: center; gap: var(--ds-esp-6);
  font-weight: 700; font-size: 13px; color: var(--ds-mp-navy);
  letter-spacing: .08em; white-space: nowrap; }
.ds-rota i { flex: none; width: 13px; border-top: 2px dashed var(--ds-brand-300); }
.ds-rota svg { width: 18px; height: 11px; color: var(--ds-brand-400); flex: none; }

/* ── avatar de companhia ─────────────────────────────────── */
.ds-avatar-cia {
  width: 66px; height: 66px; border-radius: var(--ds-raio-avatar);
  color: var(--ds-branco); font-weight: 700; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ds-cia-neutra); flex-shrink: 0;
}
.ds-avatar-cia.ds-mini { width: 34px; height: 34px; border-radius: 10px; font-size: 13px; }
.ds-cia-latam { background: var(--ds-cia-latam); }
.ds-cia-gol { background: var(--ds-cia-gol); }
.ds-cia-azul { background: var(--ds-cia-azul); }
.ds-cia-tap { background: var(--ds-cia-tap); }
.ds-cia-iberia { background: var(--ds-cia-iberia); }

/* ── paginação ───────────────────────────────────────────── */
.ds-paginacao { display: flex; align-items: center; gap: var(--ds-esp-16); flex-wrap: wrap;
  font-size: 13px; color: var(--ds-texto-meta); letter-spacing: var(--ds-espaco-letras); }
.ds-paginacao .ds-pags { margin-left: auto; display: flex; align-items: center; gap: var(--ds-esp-6); }
.ds-pag-btn {
  min-width: 34px; height: 34px; padding: 0 var(--ds-esp-10);
  border-radius: 10px; border: 1px solid var(--ds-n-300); background: var(--ds-branco);
  font-family: var(--ds-fonte); font-size: 13px; font-weight: 500;
  letter-spacing: var(--ds-espaco-letras); color: var(--ds-texto-sec); cursor: pointer;
}
.ds-pag-btn:hover { background: var(--ds-n-50); }
.ds-pag-btn.ds-ativo { background: var(--ds-grad-marca); border-color: transparent; color: var(--ds-branco); }

/* ── modal ───────────────────────────────────────────────── */
.ds-modal-overlay { position: fixed; inset: 0; background: rgba(21, 29, 86, .35);
  z-index: 90; display: flex; align-items: center; justify-content: center; padding: var(--ds-esp-16); }
.ds-modal {
  background: var(--ds-branco); border-radius: var(--ds-raio-modal); padding: var(--ds-esp-32);
  width: min(560px, 100%); max-height: 90vh; overflow: auto;
  box-shadow: var(--ds-sombra-modal); display: flex; flex-direction: column; gap: var(--ds-esp-20);
  color: var(--ds-texto); letter-spacing: var(--ds-espaco-letras);
}
.ds-modal-cab { display: flex; align-items: center; gap: var(--ds-esp-12); }
.ds-modal-cab .ds-modal-icone { width: 40px; height: 40px; border-radius: var(--ds-raio-botao);
  background: var(--ds-brand-50); color: var(--ds-brand-600);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ds-modal-cab h3 { margin: 0; font-size: var(--ds-tam-secao); font-weight: 500; color: var(--ds-titulo); flex: 1; }
.ds-modal-x { color: var(--ds-texto-meta); font-size: 20px; cursor: pointer; background: none; border: 0;
  padding: var(--ds-esp-4); line-height: 1; }
.ds-modal hr { border: 0; border-top: 1px solid var(--ds-n-200); margin: 0; }
.ds-modal-grade { display: grid; grid-template-columns: 1fr 1fr; gap: var(--ds-esp-16); }
.ds-modal-rodape { display: flex; justify-content: flex-end; gap: var(--ds-esp-10); align-items: center; }

/* ── drawer lateral ──────────────────────────────────────── */
.ds-drawer {
  position: fixed; top: 0; right: 0; width: 420px; height: 100vh; z-index: 85;
  background: var(--ds-branco); box-shadow: var(--ds-sombra-drawer);
  display: flex; flex-direction: column; color: var(--ds-texto);
  letter-spacing: var(--ds-espaco-letras);
}
.ds-drawer-cab { display: flex; align-items: center; gap: var(--ds-esp-12);
  padding: var(--ds-esp-20) var(--ds-esp-24) var(--ds-esp-12); }
.ds-drawer-cab b { display: block; font-size: var(--ds-tam-corpo); color: var(--ds-texto-forte); }
.ds-drawer-cab span { display: block; font-size: var(--ds-tam-meta); color: var(--ds-texto-meta); }
.ds-drawer .ds-abas { padding: 0 var(--ds-esp-24); }
.ds-drawer-corpo { flex: 1; overflow: auto; padding: var(--ds-esp-16) var(--ds-esp-24);
  display: flex; flex-direction: column; gap: var(--ds-esp-12); }
.ds-drawer-rodape { border-top: 1px solid var(--ds-n-200);
  padding: 14px var(--ds-esp-24); display: flex; gap: var(--ds-esp-10);
  justify-content: flex-end; background: var(--ds-branco); }

/* histórico (linha do tempo) e notas dentro do drawer */
.ds-hist-item { display: flex; gap: var(--ds-esp-10); font-size: 13px; }
.ds-hist-item .ds-ponto { width: 8px; height: 8px; border-radius: var(--ds-raio-pill);
  background: var(--ds-brand-400); margin-top: var(--ds-esp-6); flex-shrink: 0; }
.ds-hist-item .ds-ponto.ds-atencao { background: var(--ds-alerta-icone); }
.ds-hist-item b { color: var(--ds-texto-forte); font-weight: 500; }
.ds-hist-item .ds-meta { color: var(--ds-texto-meta); font-size: var(--ds-tam-meta); }

/* ── toast ───────────────────────────────────────────────── */
.ds-toast {
  display: flex; gap: var(--ds-esp-12); align-items: flex-start;
  background: var(--ds-branco); border: 1px solid var(--ds-n-200);
  border-left: 4px solid var(--ds-ok-icone); border-radius: var(--ds-raio-chip);
  padding: var(--ds-esp-16); min-width: 300px; max-width: 400px;
  box-shadow: var(--ds-sombra-dropdown); letter-spacing: var(--ds-espaco-letras);
}
.ds-toast.ds-ruim { border-left-color: var(--ds-erro-icone); }
.ds-toast.ds-atencao { border-left-color: var(--ds-alerta-icone); }
.ds-toast b { display: block; font-size: var(--ds-tam-sec); color: var(--ds-texto-forte); font-weight: 500; }
.ds-toast span { font-size: 13px; color: var(--ds-texto-sec); }
.ds-toast-area { position: fixed; top: var(--ds-esp-16); right: var(--ds-esp-16); z-index: 95;
  display: flex; flex-direction: column; gap: var(--ds-esp-10); }
.ds-toast-area .ds-toast { animation: ds-toast-in .25s ease-out; }
@keyframes ds-toast-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── estados vazio / carregando ──────────────────────────── */
.ds-vazio { display: flex; flex-direction: column; align-items: center;
  gap: var(--ds-esp-10); padding: 48px; text-align: center; }
.ds-vazio .ds-ilu { width: 72px; height: 72px; border-radius: var(--ds-raio-modal);
  background: var(--ds-grad-marca); color: var(--ds-branco);
  display: flex; align-items: center; justify-content: center; }
.ds-vazio p { margin: 0; font-size: var(--ds-tam-sec); color: var(--ds-texto-meta); max-width: 40ch; }

.ds-skeleton { border-radius: var(--ds-raio-input); background: var(--ds-n-100);
  animation: ds-pulso 1.2s ease-in-out infinite; min-height: 14px; }
@keyframes ds-pulso { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  .ds-toast-area .ds-toast { animation: none; }
  .ds-skeleton { animation: none; }
}

/* ── responsivo (breakpoint principal 768) ───────────────── */
@media (max-width: 768px) {
  .ds-drawer { width: 100%; }
  .ds-modal-grade { grid-template-columns: 1fr; }
  .ds-busca { max-width: none; }
}