/* ============================================================
   Melhor Passagem · Agency OS — Cancelamento rastreável (Fase 8)
   ------------------------------------------------------------
   Modal que abre/gerencia o cancelamento de uma emissão e suas
   etapas (retorno de milhas/taxas/estorno) com progresso. Só
   CSS sob .ds-theme; o ds-cancelamento.js (gated em ds-theme)
   cria os elementos e fala com os endpoints da Opção A.
   ============================================================ */

/* barra de progresso das etapas */
.ds-canc-prog { display: flex; align-items: center; gap: var(--ds-esp-10); }
.ds-canc-prog .trilho { flex: 1; height: 8px; border-radius: var(--ds-raio-pill);
  background: var(--ds-n-200); overflow: hidden; }
.ds-canc-prog .trilho i { display: block; height: 100%; background: var(--ds-grad-marca);
  transition: width .2s ease; }
.ds-canc-prog b { font-size: 13px; color: var(--ds-texto-forte); white-space: nowrap;
  font-variant-numeric: tabular-nums; }

/* etapa */
.ds-etapa { border: 1px solid var(--ds-n-200); border-left: 4px solid var(--ds-alerta-icone);
  border-radius: var(--ds-raio-kpi); padding: var(--ds-esp-16); background: var(--ds-branco);
  display: flex; flex-direction: column; gap: var(--ds-esp-10); }
.ds-etapa.ds-feita { border-left-color: var(--ds-ok-icone); background: var(--ds-ok-fundo); }
.ds-etapa-topo { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-esp-12); }
.ds-etapa-topo b { color: var(--ds-texto-forte); font-weight: 500; }
.ds-etapa-topo .esperado { font-size: 13px; color: var(--ds-texto-meta); font-variant-numeric: tabular-nums; }
.ds-etapa-form { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--ds-esp-10); align-items: end; }
.ds-etapa-form .campo { display: flex; flex-direction: column; gap: 4px; }
.ds-etapa-form label { font-size: 12px; color: var(--ds-texto-sec); font-weight: 500; letter-spacing: var(--ds-espaco-letras); }
.ds-etapa-feito { font-size: 13px; color: var(--ds-ok-texto); display: flex; align-items: center; gap: var(--ds-esp-8); }
.ds-etapa-feito svg { width: 16px; height: 16px; }
.ds-etapa-feito .reabrir { margin-left: auto; color: var(--ds-texto-sec); cursor: pointer;
  font-size: 12px; text-decoration: underline; }
@media (max-width: 560px) { .ds-etapa-form { grid-template-columns: 1fr; } }

/* segmentado total/parcial */
.ds-canc-seg { display: inline-flex; background: var(--ds-n-100); border-radius: var(--ds-raio-chip);
  padding: var(--ds-esp-4); gap: var(--ds-esp-2); }
.ds-canc-seg button { border: 0; background: none; border-radius: 9px; padding: 8px 16px;
  font: 500 14px var(--ds-fonte); font-family: var(--ds-fonte); letter-spacing: var(--ds-espaco-letras);
  color: var(--ds-texto-sec); cursor: pointer; }
.ds-canc-seg button.ativo { background: var(--ds-branco); color: var(--ds-brand-900);
  box-shadow: 0 1px 3px rgba(16, 29, 40, .12); }

/* central de ações (dashboard) */
.ds-central-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);
  display: flex; flex-direction: column; gap: var(--ds-esp-12); }
.ds-central-card h2 { margin: 0; font-size: var(--ds-tam-secao); font-weight: 500; color: var(--ds-titulo);
  letter-spacing: var(--ds-espaco-letras); }
.ds-central-item { display: flex; align-items: center; gap: var(--ds-esp-12);
  border: 1px solid var(--ds-n-200); border-left: 4px solid var(--ds-alerta-icone);
  border-radius: var(--ds-raio-kpi); padding: var(--ds-esp-12) var(--ds-esp-16); cursor: pointer; }
.ds-central-item:hover { background: var(--ds-n-50); }
.ds-central-item .ic { width: 34px; height: 34px; border-radius: 10px; flex: 0 0 auto;
  background: var(--ds-alerta-fundo); color: var(--ds-alerta-icone); display: flex; align-items: center; justify-content: center; }
.ds-central-item b { display: block; font-size: 14px; color: var(--ds-texto-forte); font-weight: 500; }
.ds-central-item span { display: block; font-size: 12px; color: var(--ds-texto-meta); }
.ds-central-item .prog { margin-left: auto; font-size: 12px; font-weight: 500; color: var(--ds-texto-sec);
  white-space: nowrap; }
.ds-central-vazio { color: var(--ds-texto-meta); font-size: var(--ds-tam-sec); padding: var(--ds-esp-8) 0; }